/* Public-site reveal, motion, responsive behavior, and keyboard treatment.
   Loads after signal.css so composition remains stable without duplicating it. */

/* ══ REVEAL ════════════════════════════════════════════════════════════ */
.js .rise{transform:translate3d(0,12px,0)}
.rise{transition:transform .7s var(--ease)}
.js .rise.in{transform:none}
.rise[data-d="1"]{transition-delay:.06s}
.rise[data-d="2"]{transition-delay:.12s}

/* ══ ENTRANCES — open lines, drawn rules, and bounded cascades ════════ */
.lines .l{display:block;overflow:visible}
.lines .li{display:block}
.js .lines .li{
  transform:translateX(-.08em);transition:transform .78s var(--ease);
}
.js .lines.in .li{transform:none}
.js .lines .l:nth-child(2) .li{transition-delay:.11s}

.drawline{position:relative}
.js .drawline{border-color:transparent}
.js .drawline::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--line,var(--rule-soft));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .12s;
}
.js .drawline.top::after{top:-1px;bottom:auto}
.grid.drawline{--line:var(--plate-rule)}
.js .in .drawline::after,.js .drawline.in::after{transform:scaleX(1)}

/* the marks step in after the runs-line lands, in reading order */
.js .runs-line .rl-mark{opacity:0;transform:translateY(5px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .runs-line.in .rl-mark{opacity:1;transform:none}
.js .runs-line.in .rl-mark:nth-child(1){transition-delay:.5s}
.js .runs-line.in .rl-mark:nth-child(2){transition-delay:.56s}
.js .runs-line.in .rl-mark:nth-child(3){transition-delay:.62s}
.js .runs-line.in .rl-mark:nth-child(4){transition-delay:.68s}

/* the wall arrives cell by cell, in reading order at every column count */
.js .stagger .brandcell{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .stagger.in .brandcell{opacity:1;transform:none}
.js .stagger.in .brandcell:nth-child(2){transition-delay:.03s}
.js .stagger.in .brandcell:nth-child(3){transition-delay:.06s}
.js .stagger.in .brandcell:nth-child(4){transition-delay:.09s}
.js .stagger.in .brandcell:nth-child(5){transition-delay:.12s}
.js .stagger.in .brandcell:nth-child(6){transition-delay:.15s}
.js .stagger.in .brandcell:nth-child(7){transition-delay:.18s}
.js .stagger.in .brandcell:nth-child(8){transition-delay:.21s}
.js .stagger.in .brandcell:nth-child(9){transition-delay:.24s}
.js .stagger.in .brandcell:nth-child(10){transition-delay:.27s}
.js .stagger.in .brandcell:nth-child(11){transition-delay:.3s}
.js .stagger.in .brandcell:nth-child(12){transition-delay:.33s}
.js .stagger.in .brandcell:nth-child(13){transition-delay:.36s}
.js .stagger.in .brandcell:nth-child(14){transition-delay:.39s}
.js .stagger.in .brandcell:nth-child(15){transition-delay:.42s}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .navlinks{margin-left:20px}
  .navlinks a{padding:0 11px}
}
@media (max-width:1040px){
  .navlinks{display:none}
  .grid{grid-template-columns:minmax(0,1fr)}
  .cap,.cap:nth-child(even){padding:32px 0;border-left:0}
  .steps{grid-template-columns:minmax(0,1fr);gap:14px}
  .vcols{grid-template-columns:minmax(0,1fr);gap:22px}
  /* three across. 15 cells → five clean rows, and the LAST ROW IS THREE — the old
     rule said two, which left a stray hairline under the cell beside it. */
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brandcell:nth-child(5n){border-right:1px solid var(--rule-soft)}
  .brandcell:nth-child(3n){border-right:0}
  .brandcell:nth-last-child(-n+5){border-bottom:1px solid var(--rule-soft)}
  .brandcell:nth-last-child(-n+3){border-bottom:0}
  .three{grid-template-columns:minmax(0,1fr)}
  .three article,.three article + article{padding:28px 0;border-left:0;padding-left:0}
  .faq > div{grid-template-columns:minmax(0,1fr);gap:14px}
  .door-body{grid-template-columns:minmax(0,1fr)}
  .door-body > div{border-right:0;border-bottom:1px solid var(--rule-soft);padding:26px 24px}
  .door-body > div:last-child{border-bottom:0}
}
@media (max-width:760px){
  .dock-top{padding:0 8px 0 16px;top:12px;height:56px;border-radius:14px}
  .navend{gap:14px}
  .btn-sm{height:44px}
  .dock-top.stuck{width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  .hero{padding:112px 0 60px;min-height:auto}
  .hero h1{font-size:clamp(38px,10.4vw,58px);line-height:1.02}
  .wide-br{display:none}
  .say{font-size:17px}
  .cta{flex-direction:column;align-items:stretch;width:100%}
  .cta .btn{width:100%}
  .cap .d,.cap > ul{padding-left:0}
  .cap h3{padding-right:0}
  .door-bar{flex-wrap:wrap;gap:10px;padding:18px 20px}
  .url{font-size:13px;width:100%;order:2}
  .door-live{margin-left:0;order:3}
  .lock{order:1}
  .claim h2{font-size:clamp(32px,9vw,46px)}
  /* TWO across, not one. Fifteen logos stacked in a single column is a thousand
     pixels of scrolling — a whole extra screen of the same thing. Two columns halve
     it, and the open door takes the bottom row to itself, so its long label has the
     full width and never wraps into a ragged cell. */
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px}
  .brandcell{min-height:70px;padding:18px 16px;gap:11px}
  .brandcell:nth-child(5n),.brandcell:nth-child(3n){border-right:1px solid var(--rule-soft)}
  .brandcell:nth-child(2n){border-right:0}
  .brandcell:nth-last-child(-n+5),.brandcell:nth-last-child(-n+3){border-bottom:1px solid var(--rule-soft)}
  .brandcell.any{grid-column:1 / -1;border-right:0;border-bottom:0}
  .brandcell:nth-child(n){border-right:0;border-bottom:1px solid var(--rule-soft)}
  .brandcell:last-child{border-bottom:0}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:18px}
  .foot-lead p{max-width:none}
  .endzone .cta{align-items:center}
  .fine{text-align:center}
}
/* ══ CALM ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .rise{transform:none}
  /* the entrances hold their finished state too: lines set, rules drawn,
     marks and cells in place, the claim fully lit */
  .js .lines .li{transform:none}
  .js .drawline::after{transform:none}
  .js .runs-line .rl-mark,.js .stagger .brandcell{opacity:1;transform:none}
  /* the card pictures still show their finished state */
  .krow,.bfile,.slink,.kfoot,.scount,.spulse,.sfaces i{opacity:1 !important;transform:none !important}
  .kled{background:var(--accent-ink) !important}
  .bbar i{width:100% !important}
}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.platform :focus-visible,.endzone :focus-visible{outline-color:var(--accent)}
::selection{background:rgba(36,64,200,.18)}