/* The homepage's approved two-column apparatus. Keep the window non-interactive. */
.hero { padding-top: 30px; padding-bottom: 72px; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 72px; align-items: center; }
.hero__grid > * { min-width: 0; }
.rig { position: relative; isolation: isolate; }
.rig__shard { position: absolute; right: -52px; bottom: -44px; width: 460px; height: 360px; z-index: 0; background: var(--coral); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.rig__frame { position: relative; z-index: 1; padding: 48px 0 56px 52px; border-radius: var(--r-frame) 0 0 var(--r-frame); background: linear-gradient(158deg, var(--accent-soft) 0%, var(--accent) 38%, var(--accent-dark) 100%); overflow: hidden; }
.win { width: calc(100% + 24px); border: 1px solid var(--line); border-radius: var(--r-window); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-window); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 48px 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-panel-2); color: var(--text); }
.win__app { width: 20px; height: 20px; display: grid; place-items: center; flex: none; border-radius: var(--r-tiny); background: var(--accent); color: var(--on-accent); }
.win__app svg { width: 12px; height: 12px; }
.win__title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.win__ctl { display: flex; gap: 6px; margin-left: auto; }
.win__ctl span { width: 28px; height: 20px; display: grid; place-items: center; border-radius: var(--r-tiny); background: var(--line-strong); color: var(--text-muted); }
.win__ctl svg { width: 10px; height: 10px; }
.win__tabs { display: flex; gap: 4px; padding: 0 48px 0 16px; border-bottom: 1px solid var(--line); }
.win__tab { position: relative; padding: 11px 12px; font-size: 13px; line-height: 18px; color: var(--text-muted); white-space: nowrap; }
.win__tab.is-on { color: var(--accent); font-weight: 700; }
.win__tab.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: var(--r-pill); background: var(--accent); }
.win__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 18px 48px 18px 24px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld__lab { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
.fld__lab i { font-family: var(--font-mono); font-size: 11px; font-weight: 400; font-style: normal; color: var(--text-muted); }
.fld__box { height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--bg-panel); color: var(--text); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.fld__box > span { overflow: hidden; text-overflow: ellipsis; }
.fld__box.is-ph { color: var(--text-faint); }
.fld__box.is-val > span { font-family: var(--font-mono); font-size: 12px; }
.fld__box svg { width: 12px; height: 12px; flex: none; color: var(--text-muted); }
.fld__box.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.win__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 48px 14px 24px; border-top: 1px solid var(--line); background: var(--bg); color: var(--text); }
.mini-btn { height: 32px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.mini-btn--ok { background: var(--accent); color: var(--on-accent); }
.mini-btn--no { border: 1px solid var(--line-strong); background: var(--bg-panel); color: var(--text); }
.rig__tag { position: absolute; z-index: 3; top: -16px; right: -40px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: var(--r-tag); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-tag); transform: rotate(3deg); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.rig__check { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: var(--r-tiny); background: var(--cta); color: var(--accent); }
.rig__check svg { width: 13px; height: 13px; }
.rig__tag code { font-size: 13px; font-weight: 600; color: var(--accent); }
.rig__dot { color: var(--text-faint); }
.pitch { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--coral-ink); box-shadow: var(--shadow-soft); font-size: 12.5px; font-weight: 600; line-height: 18px; letter-spacing: 0.14em; text-transform: lowercase; }
.pulse { position: relative; width: 8px; height: 8px; flex: none; }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); }
.pulse::after { background: var(--coral-halo); animation: breathe 2.6s ease-out infinite; }
@keyframes breathe { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.pitch h1 { margin: 0; font-size: clamp(34px, calc(1.2rem + 2.2vw), 48px); line-height: 1.18; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.pitch h1 .title-line { display: block; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lede { margin: 28px 0 0; max-width: 31em; font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.lede strong { color: var(--text); font-weight: 700; }
.facts { display: flex; align-items: center; gap: 8px; width: 100%; }
.facts__lab { width: 64px; flex: none; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.facts ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts--proto { margin-top: 24px; }
.chip { min-height: 32px; display: inline-flex; align-items: center; padding: 4px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); font-family: var(--font-mono); font-size: 13px; font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.facts--plat { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.facts--plat ul { gap: 4px; }
.plat { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: var(--r-pill); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.18s ease, box-shadow 0.18s ease; }
.plat__ico { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-panel); color: var(--accent); }
.plat__ico svg { width: 15px; height: 15px; }
.plat:hover { background: var(--bg-panel); box-shadow: var(--shadow-soft); }
.band { padding-top: 56px; padding-bottom: 88px; border-top: 1px solid var(--line); background: var(--bg-panel); color: var(--text); }
.band__eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--coral-ink); }
.band h2 { margin: 0; font-size: clamp(22px, calc(1rem + 1.2vw), 32px); line-height: 1.25; }
.band p { max-width: 40em; margin: 14px 0 0; color: var(--text-muted); line-height: 1.75; }

/* Shared page components */
.tabs { min-width: 0; }
.tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: 10px; }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 18px; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); font-weight: 700; text-align: left; }
.tabs [role="tab"] svg { width: 21px; height: 21px; flex: none; }
.tabs [role="tab"]:hover { border-color: var(--accent); }
.tabs [role="tab"][aria-selected="true"] { border-color: var(--cta); background: var(--bg-panel); color: var(--accent); box-shadow: var(--shadow-soft); }
.tabs [role="tabpanel"] { min-width: 0; margin-top: 24px; }
.tabs [role="tabpanel"][hidden] { display: none; }
.feature-stage { position: relative; padding-bottom: 70px; overflow-x: clip; background: var(--bg-panel-2); color: var(--text); }
.feature-stage::before, .feature-stage::after { content: ""; position: absolute; bottom: 0; height: 180px; pointer-events: none; }
.feature-stage::before { right: 0; width: 48%; background: var(--coral); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.feature-stage::after { right: 15%; width: 42%; background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.feature-stage .tabs { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr); gap: 30px; align-items: start; }
.feature-stage [role="tablist"] { flex-direction: column; }
.feature-stage [role="tab"] { width: 100%; min-height: 72px; border-radius: var(--r-window); }
.feature-stage [role="tabpanel"] { margin-top: 0; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-window); }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-field); background: var(--icon-navy-bg); color: var(--accent); }
.feature-icon--coral { background: var(--icon-coral-bg); color: var(--coral-ink); }
.feature-icon--yellow { background: var(--icon-yellow-bg); color: var(--accent); }
.feature-icon--cool { background: var(--icon-cool-bg); color: var(--accent); }
.feature-icon svg { width: 24px; height: 24px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-tag); background: var(--bg-panel); color: var(--text); }
.toc a { padding: 8px 13px; border-radius: var(--r-pill); color: var(--accent); text-decoration: none; }
.toc a:hover, .toc a[aria-current="true"] { background: var(--accent-tint); }
.toc--sticky { position: sticky; top: 12px; z-index: 10; }
.faq-item { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-window); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 16px 22px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--accent); font-size: 22px; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item__body { padding: 0 22px 20px; color: var(--text-muted); }
.faq-item__body > :first-child { margin-top: 0; }
.glossary-card, .client-card, .article-card { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.glossary-card h3, .client-card h3, .article-card h3 { margin: 0 0 10px; }
.glossary-card p, .client-card p, .article-card p { margin: 0; color: var(--text-muted); }
.glossary-card__term { font-family: var(--font-mono); color: var(--accent); overflow-wrap: anywhere; }
.client-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.client-card__head img { width: 54px; height: 54px; flex: none; }
.client-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 27px; padding: 3px 11px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.badge--first { background: var(--cta); color: var(--accent); }
.badge--recommend { background: var(--icon-navy-bg); color: var(--accent); }
.badge--retired { background: var(--bg-panel-2); color: var(--text-muted); }
.article-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.article-card:hover { border-color: var(--accent); }
.article-card__meta { color: var(--text-muted); font-size: 13px; }
.article-card__more { margin-top: auto; color: var(--accent); font-weight: 700; }
.callout { margin-block: 22px; padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 var(--r-tag) var(--r-tag) 0; background: var(--bg-panel-2); color: var(--text); }
.callout strong { color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table, .prose table { border-collapse: collapse; min-width: max-content; background: var(--bg-panel); color: var(--text); }
.prose table { display: block; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th, .data-table td, .prose table th, .prose table td { min-width: 7em; padding: 12px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.data-table th, .prose table th { background: var(--bg-panel-2); color: var(--text); font-weight: 700; }
.data-table code, .prose table code { overflow-wrap: anywhere; }
.dl-fab { position: fixed; z-index: 20; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; max-width: min(330px, calc(100vw - 40px)); padding: 12px 20px 12px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--accent); box-shadow: var(--shadow-tag); font-weight: 700; text-decoration: none; }
.dl-fab svg { width: 20px; height: 20px; flex: none; }
.dl-fab:hover { background: var(--bg-panel-2); }
.end-download { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-block: 48px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-soft); }
.end-download h2 { margin: 0 0 8px; font-size: 24px; }
.end-download p { margin: 0; color: var(--text-muted); }

@media (max-width: 1240px) { .hero__grid { gap: 60px; } }
@media (max-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } .pitch { order: -1; } .rig { margin-right: 40px; } }
@media (max-width: 640px) {
  .hero { padding-top: 24px; padding-bottom: 55px; }
  .pitch h1 { font-size: clamp(24px, 7vw, 30px); }
  .cta-row { width: 100%; }
  .cta-row .btn { flex: 1 1 auto; }
  .lede { font-size: 16px; }
  .facts { flex-direction: column; align-items: flex-start; }
  .facts__lab { width: auto; }
  .facts ul { flex-direction: row; flex-wrap: wrap; }
  .rig { margin-right: 16px; }
  .rig__frame { padding: 32px 0 36px 22px; border-radius: 28px 0 0 28px; }
  .win__form { grid-template-columns: minmax(0, 1fr); padding: 16px 40px 16px 16px; }
  .win__tabs, .win__bar { padding-right: 40px; }
  .win__foot { padding-right: 40px; }
  .rig__tag { right: -10px; top: -20px; font-size: 12.5px; transform: none; }
  .rig__shard { width: 280px; height: 240px; right: -16px; bottom: -28px; }
  .feature-stage .tabs { grid-template-columns: minmax(0, 1fr); }
  .feature-stage [role="tablist"] { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 12px; }
  .feature-stage [role="tab"] { width: auto; min-height: 48px; flex: none; border-radius: var(--r-pill); }
  .feature-stage [role="tabpanel"] { padding: 20px; }
  .dl-fab { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; opacity: 0; } .plat { transition: none; } }