/* Home page layout: less crowded, same words (owner, 2026-09-25). Structure hooks only; the UI lead owns the
   visual system (frame, markers, spacing, tab style) and may restyle any of this. */

/* the calm band under the hero: the lede, the power-of-attorney line and the small print, word for word */
.hb-band{padding:44px 0 48px;border-bottom:1px solid var(--steel-2)}
.hb-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 56px;align-items:start}
.hb-say .hero-more{margin:0 0 14px;font-size:17px;line-height:1.62;color:var(--ink-2);max-width:60ch}
.hb-say .hero-poa{margin:0;color:var(--ink)}
.hb-go{display:grid;gap:10px;padding-left:24px;border-left:1px solid var(--steel-2)}
.hb-go .hero-free,.hb-go .ttfr{margin:0;font-size:15px;color:var(--ink-2)}
.hb-film{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;color:var(--ink);text-underline-offset:4px}
.hb-film svg{color:var(--cobalt)}

/* numbered section markers */
.rd-kick[data-n]::before{content:attr(data-n);width:auto;height:auto;background:none;padding-right:10px;border-right:1px solid currentColor}

/* big vertical whitespace between panels */
.film-band,.mcp-band,.rd-thesis,.flow-band,.mission,.siw-band{padding-top:88px;padding-bottom:88px}

/* MCP: one tabbed block (all three ways show without script) */
.mcp-ways.is-tabs{gap:0;border:1px solid var(--steel-2);border-radius:14px;overflow:hidden;background:#fff}
.mcp-tabs{display:flex;border-bottom:1px solid var(--steel-2);background:var(--paper-2);overflow-x:auto}
.mcp-tabs button{appearance:none;border:0;background:none;font:600 14.5px/1 var(--sans);color:var(--ink-2);padding:14px 18px;min-height:44px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.mcp-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--cobalt)}
.mcp-tabs button:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
/* phones: the three tabs share the width and wrap their labels, so "Gateway" is never off-screen behind a scroll */
@media (max-width:520px){.mcp-ways.is-tabs{grid-template-columns:minmax(0,1fr)}.mcp-tabs{overflow-x:visible}.mcp-tabs button{flex:1 1 0;min-width:0;white-space:normal;line-height:1.25;padding:10px 4px;font-size:13px;text-align:center}}
.mcp-ways.is-tabs .mcp-way{padding:18px 18px 20px;min-height:104px}
.mcp-ways.is-tabs .mcp-w b{display:none}

/* the second recorded run, one click away */
.siw-more{margin:18px 0 0}
.siw-more>summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.siw-more[open]>summary{margin-bottom:12px}

@media (max-width:760px){
  .hb-band{padding:32px 0 36px}
  .hb-grid{grid-template-columns:1fr}
  .hb-go{padding-left:0;border-left:0;padding-top:18px;border-top:1px solid var(--steel-2)}
  .film-band,.mcp-band,.rd-thesis,.flow-band,.mission,.siw-band{padding-top:56px;padding-bottom:56px}
}

/* hero: the power-of-attorney line is the subhead (owner, 2026-09-25); the left column centres on the receipt */
.rd-hero .grid{align-items:center}
.rd-hero .lede.hero-poa{margin:0 0 28px}
.hb-say .hb-lede{margin:0;color:var(--ink);font-weight:600}

/* numbered markers for the developer sections (number only, no new words) */
/* (their divider rule on .rest markers is superseded by the ruled chip below) */
.rest section{padding-top:24px}

/* evidence and the open format sit together as one pair (.pair); the column is 760px, so they stack */
.pair>section{margin:0}

/* ---------- visual pass (UI lead): hierarchy, frame, markers, disclosure. Words untouched. ---------- */

/* the hero does one job: the headline block sits level with the receipt, not stranded above empty space */
.rd-hero .wrap.grid{align-items:center}

/* the band under the hero is light: the power-of-attorney phrase takes the cobalt accent there */
.hb-band .poa-hl{color:var(--cobalt)}

/* numbered section markers: the number in a small ruled chip, the label after it */
.rd-kick[data-n]::before{content:attr(data-n);width:auto;height:auto;background:none;border:1px solid currentColor;border-radius:5px;padding:2px 7px 1px;margin-right:2px;font-weight:600;letter-spacing:.06em}

/* a visible page frame on wide screens: two thin rules at the content column's edges, so each light section reads
   as a panel in one column instead of a stream (background only: no layout, no shifts) */
@media (min-width:1180px){
  .hb-band,.film-band,.mcp-band,.rd-thesis,.flow-band,.mission,.siw-band,.wrap.rest{
    background-image:linear-gradient(var(--steel-2),var(--steel-2)),linear-gradient(var(--steel-2),var(--steel-2));
    background-size:1px 100%,1px 100%;background-repeat:no-repeat;
    background-position:calc(50% - 560px) 0,calc(50% + 560px) 0}
  .wrap.rest{background-position:0 0,100% 0}
  .film-band,.mcp-band,.rd-thesis,.flow-band,.mission,.siw-band{border-top:1px solid var(--steel-2)}
}

/* "See the full run" reads as a control: a chevron that turns, a hairline box, 44px tall */
.siw-more>summary{list-style:none;gap:10px;padding:0 16px;border:1px solid var(--steel-2);border-radius:10px;background:#fff}
.siw-more>summary::-webkit-details-marker{display:none}
.siw-more>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg);transition:transform .2s ease;margin-right:2px}
.siw-more[open]>summary::before{transform:rotate(45deg)}
.siw-more>summary:hover{border-color:var(--steel)}
.siw-more>summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.siw-more>summary::before{transition:none}}

/* ---------- hero option C (owner's pick, 2026-09-26): the signed document on security paper ----------
   Dark navy ground; the same guilloche (drawn in, then counter-rotating) enlarged behind the receipt so the paper sits
   on it like security paper; steel eyebrow; a large headline; the power-of-attorney phrase with a cobalt highlighter
   underline; a cobalt primary button. Every word and control is kept (the receipt's buttons, the technical receipt
   and the tagline stay in the right column). */
.rd-hero{background:#0b1a2b}
.rd-hero::before{display:none} /* option C is flat navy: the security paper is the only texture */
.rd-hero .rosette{left:calc(50% + 316px - 470px);right:auto;top:calc(50% - 500px);width:940px;height:940px;opacity:.5;
  /* the weave lives behind the paper and fades before the note and tagline under it, so they stay easy to read */
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 80%);mask-image:linear-gradient(to bottom,#000 60%,transparent 80%)}
.rd-hero .kicker{color:#9FB4C4}
.rd-hero .kicker::before{background:#9FB4C4}
.rd-hero h1{font-size:clamp(46px,6.2vw,88px);line-height:.98;max-width:9.5ch}
.rd-hero .lede.hero-poa{color:#EAF1F8}
.rd-hero .poa-hl{color:#fff;font-weight:600;background:linear-gradient(transparent 62%,rgba(36,71,240,.55) 0);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}
.rd-hero .actions .btn-primary{background:#2447F0;color:#fff;border-color:#2447F0}
.rd-hero .actions .btn-primary:hover{background:#1B3AD6;border-color:#1B3AD6}
.rd-hero .hr{filter:drop-shadow(0 24px 48px rgb(2 8 18 / .55))}
.rd-hero .seal-cap{position:relative}
@media (max-width:980px){
  /* phones and tablets: the weave scales down and sits behind the receipt, which follows the headline */
  .rd-hero .rosette{left:calc(50% - 330px);top:auto;bottom:260px;width:660px;height:660px;opacity:.42}
}

/* ---------- "old text layout, new look" (owner, 2026-09-26): the band's words move back into the hero ----------
   One calm hierarchy: subhead large, the second line medium, the paragraph at body size in a softer tone, small print
   smallest; even spacing; the CTAs on one row at desktop. */
.rd-hero .lede.hero-poa{margin:0 0 14px}
.rd-hero .hero-sub2{margin:0 0 18px;font-size:18px;line-height:1.45;font-weight:600;color:#C9D5DE;max-width:36ch}
.rd-hero .hero-more{margin:0 0 28px;font-size:16px;line-height:1.62;color:#9FB4C4;max-width:46ch}
.rd-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0}
.rd-hero .hero-free{margin:22px 0 4px;font-size:14px;color:#9FB4C4}
.rd-hero .hero-free a{color:#8FA6FF}
.rd-hero .ttfr{margin:6px 0 0;font-size:14px;color:#C9D5DE}
@media (min-width:981px){.rd-hero .actions{flex-wrap:nowrap}}

/* ---------- the owner's final home top (2026-09-28): hero, then "Identity isn't authority", the flow, the analogy and
   the close. Calm hierarchy: the "gives" sentence large, the identity/authority pair semibold, the body softer, the
   close as the emphasis line; the H1 keeps "that act" together. ---------- */
.rd-hero h1{max-width:none;font-size:clamp(42px,4.4vw,64px);text-wrap:balance}
.rd-hero .wrap.grid{align-items:start}
.rd-hero .col-side{padding-top:24px}
.rd-hero .lede.hero-p1{margin:0 0 18px;max-width:34ch}
.rd-hero .hero-pair{margin:0 0 18px;font-size:18px;line-height:1.5;font-weight:600;color:#EAF1F8}
.rd-hero .hero-pair span{display:block}
.rd-hero .hero-more{margin:0 0 12px;font-size:15.5px;max-width:48ch}
.rd-hero .hero-more.hero-sig{margin-bottom:18px}
.rd-hero .hero-em{margin:0 0 26px;font-size:19px;font-weight:700;letter-spacing:-.005em;color:#fff}

.intro-band{padding:88px 0;border-bottom:1px solid var(--steel-2)}
.intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px;align-items:start}
.intro-block h2{margin:0 0 18px;font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.intro-block p{margin:0 0 12px;color:var(--ink-2);font-size:16.5px;line-height:1.6}
.intro-block .poa-hl{color:var(--ink);background:linear-gradient(transparent 62%,rgba(36,71,240,.22) 0);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qlist{list-style:none;margin:6px 0 16px;padding:0;border-top:1px solid var(--steel-2)}
.qlist li{padding:9px 0;border-bottom:1px solid var(--steel-2);font-weight:600;color:var(--ink)}
.ci-flow{list-style:none;margin:0 0 14px;padding:0;display:grid;justify-items:start;gap:2px}
.ci-node{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--steel-2);border-radius:10px;background:#fff;min-width:min(100%,320px)}
.ci-node b{color:var(--ink);font-size:16px}.ci-node span{color:var(--ink-2);font-size:14.5px}
.ci-arrow{padding:2px 0 2px 22px;color:var(--cobalt)}
.ci-cap{font-weight:600;color:var(--ink)!important}
.contrast{margin:18px 0 0;padding:16px 18px;border-left:3px solid var(--cobalt);background:#fff;border-radius:0 10px 10px 0}
.contrast p{margin:0 0 8px;color:var(--ink)}.contrast p:last-child{margin:0}
.contrast .ck{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.intro-close{grid-column:1/-1;margin:8px 0 0;padding-top:32px;border-top:1px solid var(--steel-2);font-size:clamp(22px,2.2vw,28px);line-height:1.35;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.intro-close span{display:block}
.intro-close span:last-child{color:var(--cobalt)}
@media (max-width:1100px){.intro{grid-template-columns:1fr;gap:48px}}
@media (max-width:760px){.intro-band{padding:56px 0}}