/* Design C: Trinity page on the new home page system.
   Tokens, header, buttons, popover come from /assets/home/base.css.
   Type rule for this page: Newsreader for headings and the footer line only; everything else is one sans.
   Content is fully visible without JS; motion is armed by trinity.js and skipped for reduced motion. */

.tn{overflow-x:hidden}
.tn section{scroll-margin-top:16px}

/* ---------- HERO ---------- */
.hero-band{background:var(--deep)}
.hero-body{padding-block:var(--s-4) clamp(56px,8vw,112px);border-radius:0 0 clamp(28px,4vw,56px) clamp(28px,4vw,56px)}
.hero-band .tcard{box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-8);align-items:center;padding-block:0}
.hero .h1{font-size:clamp(48px,6.2vw,92px);margin:var(--s-3) 0 var(--s-5)}
.hero .lead{margin-bottom:var(--s-6)}
.hero-actions{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}

.stage{display:grid;gap:var(--s-3)}
.tcard{color:var(--ink);background:var(--surface);border-radius:var(--radius-lg);padding:var(--s-5);display:grid;gap:var(--s-3);box-shadow:0 1px 0 #e3e7d8,0 28px 60px -34px rgba(41,45,39,.35)}
.tc-label{font:600 13px/1.4 var(--sans);color:var(--muted)}
.tc-text{font:400 16px/1.5 var(--sans);color:var(--ink)}
.tc-block{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4);border-radius:var(--radius);background:var(--tint-1)}
.tc-did{background:var(--paper)}
.tc-ico{width:36px;height:36px;flex:none;object-fit:contain}
.tc-link{display:flex;align-items:center;gap:var(--s-3);padding-left:var(--s-5);font:400 13px/1 var(--sans);color:var(--muted)}
.tc-link::before{content:"";width:2px;height:20px;background:#c9d2c0;border-radius:2px}
.tc-list{display:grid;gap:6px;margin-top:6px}
.tc-list li{display:flex;gap:10px;align-items:center;font:400 16px/1.4 var(--sans)}
.tc-list b,.key b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font:700 12px/1 var(--sans)}
.tc-msg{padding:var(--s-4);border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 0 0 1px #dfe4d3}
.tc-label-2{margin-top:var(--s-3)}
.tc-in{margin-top:6px;width:fit-content;max-width:92%;padding:var(--s-3) var(--s-4);border-radius:4px 16px 16px 16px;background:#e8e6dc;font:400 16px/1.5 var(--sans)}
.tc-bubble{margin:var(--s-2) 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:4px 16px 16px 16px;background:#fff;box-shadow:0 0 0 1px #e3e7d8;font:400 16px/1.5 var(--sans)}
.tc-send{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.tc-wait{font:400 13px/1.3 var(--sans);color:var(--muted)}
.tc-send .btn{margin-bottom:3px}
.s-b{display:none}
.is-sent .s-a{display:none}.is-sent .s-b{display:inline}
.tc-msg.is-sent .tc-wait{color:var(--green);font-weight:600}
.tc-done{display:none;align-items:center;gap:12px;margin-top:var(--s-3);padding:12px 14px;border-radius:12px;background:#e3ecd6;font:400 15px/1.4 var(--sans);color:var(--ink)}
.tc-done b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font:700 14px/1 var(--sans)}
.tc-msg.is-sent .tc-send{display:none}
.tc-msg.is-sent .tc-done{display:flex}
.tc-msg.is-sent .tc-bubble{border-radius:16px 16px 4px 16px;background:#e3ecd6;box-shadow:none;margin-left:auto;max-width:92%}
.stage-foot{display:flex;align-items:center;justify-content:space-between;padding-inline:var(--s-2)}

/* ---------- TEAM ---------- */
.team{padding-block:var(--s-8) var(--s-9)}
.team .h2{margin:var(--s-3) 0 var(--s-4)}
.pair{--rx:0deg;--ry:0deg;display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,1.25fr) minmax(0,.9fr);align-items:center;margin-top:var(--s-7);perspective:1400px}
.plate{border-radius:var(--radius-lg);padding:var(--s-6);min-height:400px;display:flex;flex-direction:column;align-items:flex-start;transform-style:preserve-3d;will-change:transform}
.plate-pk{background:var(--surface);box-shadow:0 1px 0 #e3e7d8,0 40px 50px -36px rgba(41,45,39,.4);transform:rotateY(calc(7deg + var(--ry))) rotateX(var(--rx)) translateZ(0)}
.plate-tn{background:var(--deep);box-shadow:0 40px 50px -30px rgba(31,44,37,.65);transform:rotateY(calc(-7deg + var(--ry))) rotateX(var(--rx)) translateZ(0)}
.plate .disc{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--paper);margin-bottom:var(--s-5);transform:translateZ(40px);box-shadow:0 14px 24px -12px rgba(0,0,0,.35)}
.plate-pk .disc{background:var(--tint-1)}
.plate .disc img{width:68px;height:68px;object-fit:contain}
.plate .h3{font-size:clamp(32px,3.4vw,44px);margin:var(--s-2) 0 var(--s-3);transform:translateZ(20px)}
.plate-p{max-width:24em;color:var(--muted)}
.plate-tn .plate-p{color:var(--on-deep)}
.mini{display:grid;gap:8px;margin-top:auto;padding-top:var(--s-5);width:100%;transform:translateZ(24px)}
.mini li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--tint-1);font:400 15px/1.3 var(--sans);color:var(--ink)}
.mini-tn li{background:var(--deep-2);color:var(--paper)}
.mini b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--terra-lite);color:var(--deep);font:700 12px/1 var(--sans)}
.mini b.w{background:none;color:var(--terra-lite);font-size:14px}
.channel{position:relative;z-index:2;padding-inline:var(--s-4)}
.sift{position:relative;height:340px;border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;box-shadow:0 1px 0 #e3e7d8,0 28px 60px -34px rgba(41,45,39,.35)}
.sf-ask{position:absolute;left:14px;right:14px;top:14px;padding:12px 14px;border-radius:var(--radius);background:var(--tint-1);color:var(--ink);font:400 15px/1.4 var(--sans);z-index:3}
.sf-ask span{display:block;margin-bottom:4px;font:600 13px/1.3 var(--sans);color:var(--muted)}
.sf-ask mark{background:transparent;color:var(--ink);border-radius:4px;padding:0 3px;box-shadow:inset 0 -2px 0 #c3cbb5}
.sf-side{position:absolute;top:100px;font:600 11px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.sf-side.l{left:14px}.sf-side.r{right:14px}
.sf-border{position:absolute;left:62%;top:128px;bottom:104px;width:3px;border-radius:4px;background:var(--terra)}
.sf-c{position:absolute;top:150px;right:calc(38% + 4px);display:block;height:38px;padding:0 16px;border-radius:999px;font:600 13px/38px var(--sans);font-style:normal;white-space:nowrap}
.sf-c.ok{background:var(--tint-1);box-shadow:inset 0 0 0 1px #cfd6c2;color:var(--ink)}
.sf-c.bl{background:#f3e0d2;box-shadow:inset 0 0 0 1px #e1ad8c;color:#6e3a22}
.sf-c.no{background:#e8e6dc;box-shadow:inset 0 0 0 1px #c3cbb5;color:var(--muted)}
.sf-why{position:absolute;left:14px;right:14px;bottom:14px;height:76px;border-radius:var(--radius);background:var(--paper);font:400 14px/1.45 var(--sans);color:var(--ink)}
.sf-why span{position:absolute;inset:10px 12px;opacity:0}
.sf-why strong{font-weight:600}
.pair-points{margin-top:var(--s-5);display:grid;gap:var(--s-4);justify-items:center}
.pp-lead{font:400 clamp(18px,1.6vw,22px)/1.35 var(--serif);text-align:center;max-width:56em;color:var(--ink);text-wrap:balance}
.pp-list{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s-5) var(--s-7);justify-content:center}
.pp-list li{display:flex;align-items:center;gap:12px;font:400 14px/1.4 var(--sans);color:var(--muted)}
.pp-list b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.pp-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint-1);color:var(--green)}
.pair-lead{max-width:44em;margin:var(--s-6) auto 0;text-align:center;font:400 var(--fs-lg)/1.55 var(--sans);color:var(--ink)}
.mini li.li-rej{display:block}
.li-rej small{display:block;margin-top:2px;font:600 11px/1.2 var(--sans);color:var(--terra-deep)}
.pair-cap{margin-top:var(--s-6);text-align:center}

/* ---------- DONE: a pinned phone, the day told by scroll ---------- */
.done{background:var(--tint-1)}
.done-stick{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);gap:var(--s-8);align-items:center;padding-block:var(--s-9)}
.done .h2{margin:var(--s-3) 0 var(--s-4)}
.rail{display:grid;gap:0;margin-top:var(--s-6);padding-left:var(--s-5);border-left:2px solid #cfd6c2}
.rail li{position:relative;display:flex;gap:var(--s-4);align-items:baseline;padding:8px 0;font:400 16px/1.3 var(--sans);color:var(--muted)}
.rail li::before{content:"";position:absolute;left:calc(-1 * var(--s-5) - 7px);top:15px;width:12px;height:12px;border-radius:50%;background:var(--tint-1);box-shadow:inset 0 0 0 2px #b9c3ab}
.rail span{min-width:3.4em;font:600 13px/1 var(--sans)}
.rail li.on{color:var(--ink)}
.rail li.on::before{background:var(--green);box-shadow:none}
.rail li.r-needs.on::before{background:var(--terra)}
.rail li.cur{font-weight:600}
.done-foot{display:flex;gap:var(--s-5);align-items:center;margin-top:var(--s-5)}

.phone{width:100%;max-width:390px;justify-self:end;border-radius:40px;padding:10px;background:#1f2c25;box-shadow:0 40px 70px -34px rgba(31,44,37,.7)}
.ph-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:30px 30px 0 0;background:var(--deep);color:var(--paper)}
.ph-head img{width:40px;height:40px;border-radius:50%;background:var(--paper);padding:4px;object-fit:contain}
.ph-head b{display:block;font:600 16px/1.2 var(--sans)}
.ph-head small{font:400 12px/1.2 var(--sans);color:var(--on-deep)}
.ph-body{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:480px;padding:20px 16px;border-radius:0 0 30px 30px;background:#efeadf}
.is-js .ph-body{height:480px;overflow:hidden}
.msg{display:grid;gap:6px;justify-items:start}
.stamp{font:600 11px/1 var(--sans);letter-spacing:.04em;color:var(--muted);padding-left:6px}
.bub{max-width:92%;padding:11px 14px;border-radius:4px 16px 16px 16px;background:#fff;box-shadow:0 1px 0 #ddd7c9;font:400 15px/1.45 var(--sans);color:var(--ink)}
.att{max-width:92%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--tint-1);font:500 13px/1.2 var(--sans);color:var(--ink)}
.att-clash{position:relative;display:block;width:200px;height:56px;padding:0}
.att-clash i{position:absolute;display:block;height:20px;border-radius:6px}
.att-clash i:nth-child(1){left:10px;top:8px;width:120px;background:#cdd6c0}
.att-clash i:nth-child(2){left:70px;top:28px;width:120px;background:var(--terra-lite)}
.att-file b{width:18px;height:22px;border-radius:3px 7px 3px 3px;background:var(--green)}
.ask-card{width:100%;padding:14px;border-radius:16px;background:var(--deep);color:var(--paper);--focus:var(--terra-lite)}
.ask-q{font:600 16px/1.35 var(--sans)}
.ask-ctx{margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--on-deep)}
.ask-quote{margin:8px 0 14px;font:400 14px/1.5 var(--sans);color:var(--on-deep)}
.ask-row{display:flex;gap:8px;flex-wrap:wrap}
.ask-row .btn-ink{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 #1f2c25}
.msg-needs .stamp{color:var(--terra)}
.msg-needs.is-sent .ask-q::after{content:" Sent.";color:var(--terra-lite)}
.msg-needs.is-held .ask-q::after{content:" Held for later.";color:var(--terra-lite)}
.msg-needs.is-sent .s-a{display:none}.msg-needs.is-sent .s-b{display:inline}

/* pinned scroll mode (set by JS only when there is room) */
.done.is-scroll .done-pin{height:300vh}
.done.is-scroll .done-stick{position:sticky;top:0;min-height:100vh;padding-block:var(--s-6)}
.is-js .msg{display:none}
.is-js .msg.on{display:grid}

/* ---------- LINES ---------- */
.lines{background:var(--deep);padding-block:var(--s-9);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.lines .h2{margin:var(--s-3) 0 var(--s-4)}
.board{position:relative;margin-top:var(--s-7);display:grid;gap:var(--s-4)}
.lane{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);height:56px;margin-bottom:76px}
.seg{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 20px;border-radius:999px;font:600 13px/1 var(--sans);letter-spacing:.02em}
.seg b{margin-right:auto;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.s-go{background:#d9e3cb;color:var(--deep)}
.s-ask{background:#f3e0d2;color:#6e3a22}
.s-never{background:#222b25;color:var(--on-deep);box-shadow:inset 0 0 0 1px #3a4a40}
.gate{position:absolute;top:-6px;bottom:-6px;display:grid;place-items:center;width:34px;border-radius:12px;z-index:1}
.g-ask{left:calc((100% - 32px) / 3 + 16px - 17px);background:var(--terra-lite);color:var(--deep)}
.g-never{left:calc((100% - 32px) / 3 * 2 + 32px - 17px);background:var(--paper);color:var(--deep);box-shadow:0 0 0 3px #222b25}
.token{position:absolute;left:10px;top:8px;height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 6px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 14px/1 var(--sans);white-space:nowrap;z-index:3;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.token>img{width:28px;height:28px;border-radius:50%;object-fit:contain;background:var(--tint-1)}
.token.is-ok{background:#e8f0dc}
.token.is-no{background:#2e3a33;color:var(--paper)}
.verdict{position:absolute;top:calc(100% + 14px);left:0;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(360px,70vw);padding:12px 14px;border-radius:14px;background:var(--paper);color:var(--ink);font:500 14px/1.4 var(--sans);white-space:normal;box-shadow:0 14px 28px -14px rgba(0,0,0,.55)}
.verdict::before{content:"";position:absolute;top:-6px;left:22px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.verdict.v-right{left:auto;right:0}.verdict.v-right::before{left:auto;right:22px}
.verdict.v-ask{background:var(--terra-lite);color:var(--deep)}
.verdict.v-no{background:#222b25;color:var(--paper);box-shadow:0 0 0 1px #4a5a50,0 14px 28px -14px rgba(0,0,0,.55)}
.verdict .btn{white-space:nowrap;flex:none;min-height:36px;padding:0 14px;font-size:13px;margin-bottom:3px;box-shadow:0 3px 0 var(--terra-deep)}
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.zone{padding:var(--s-6);border-radius:var(--radius);display:flex;flex-direction:column;gap:var(--s-2);min-height:290px;color:var(--ink)}
.zone .kicker{color:var(--muted)}
.zone .h3{font-size:clamp(26px,2.4vw,34px)}
.zone p:not(.kicker){color:var(--muted)}
.z-go{background:var(--tint-1)}
.z-ask{background:#f3e0d2}
.z-never{background:#222b25;color:var(--paper)}
.z-never .kicker,.z-never p:not(.kicker){color:var(--on-deep)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--s-4)}
.chips button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink);font:500 14px/1 var(--sans);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.chips button:hover{background:#fff}
.chips button[aria-pressed=true]{background:var(--deep);color:var(--paper);box-shadow:none}
.z-never .chips button{background:rgba(255,255,255,.12);color:var(--paper);box-shadow:none}
.z-never .chips button[aria-pressed=true]{background:var(--terra-lite);color:var(--deep)}
.zone.is-hit{box-shadow:0 0 0 3px var(--terra-lite)}
.try-out{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.try-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
.foot{margin-top:var(--s-5)}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--s-9) var(--s-8)}
.faq-head{margin-bottom:var(--s-7)}
.faq-head .h2{margin-top:var(--s-3)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);align-items:start}
.faq details{background:var(--tint-1);border-radius:var(--radius)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px;padding:12px var(--s-4) 12px var(--s-5);list-style:none;cursor:pointer;font:500 17px/1.35 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--terra);font:600 20px/1 var(--sans);font-style:normal}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{padding:0 var(--s-5) var(--s-5);color:var(--muted);max-width:40em}
.faq a.ul{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* ---------- INVITE ---------- */
.invite{padding-block:0 var(--s-9)}
.inv-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s-8);padding:var(--s-8);border-radius:var(--radius-lg);background:var(--deep);align-items:center}
.inv-owl{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--paper);margin-bottom:var(--s-5)}
.inv-owl img{width:68px;height:68px;object-fit:contain}
.inv-copy .h2{font-size:clamp(34px,4vw,52px);margin:var(--s-3) 0 var(--s-4)}
.inv-form{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:var(--s-6);--focus:var(--terra)}
.inv-form .field{margin-bottom:6px;display:block}
.inv-form input[type=email]{width:100%;min-height:52px;padding:0 14px;border:0;border-radius:10px;background:var(--tint-2);box-shadow:inset 0 0 0 1px #cfd6c2;font:400 16px var(--sans);color:var(--ink);margin-bottom:var(--s-4)}
.inv-form input:focus-visible{box-shadow:none}
.inv-form .check{margin-bottom:var(--s-2)}
.inv-form .btn{width:100%;margin-top:var(--s-3)}
.form-help{margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.5;color:var(--muted)}
.form-help a{text-decoration:underline;text-underline-offset:2px}
.status{margin-top:var(--s-2);color:#8a3722}
.inv-done b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;font-size:20px;margin-bottom:var(--s-4)}
.inv-done .h3{font-size:30px;margin-bottom:var(--s-3)}
.inv-done p{color:var(--muted);margin-bottom:var(--s-3)}

/* ---------- FOOTER ---------- */
.tf{background:var(--tint-1);padding-block:var(--s-8) var(--s-5);color:var(--ink)}
.tf-perch{display:flex;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-7)}
.tf-perch img{flex:none;width:64px;height:64px;object-fit:contain}
.tf-line{position:relative;flex:1;height:3px;margin-bottom:6px;border-radius:3px;background:#c9d2c0}
.tf-dot{position:absolute;left:100%;top:50%;width:11px;height:11px;margin:-5px 0 0 -11px;border-radius:50%;background:var(--terra)}
.tf-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s-6);align-items:start}
.tf-tag{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.01em}
.tf-tag em{color:var(--terra)}
.tf h3{font:600 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-3)}
.tf nav,.tf-grid>div{display:grid;gap:2px;justify-items:start}
.tf a,.tf button:not(.x){display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;padding:0;font:400 15px/1.3 var(--sans);color:var(--ink);text-align:left}
.tf a:hover,.tf button:not(.x):hover{color:var(--terra)}
.tf small{font-size:12px;color:var(--muted)}
.tf .here{padding:3px 10px;border-radius:999px;background:var(--deep);color:var(--paper)}
.tf-bottom{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid #cfd6c2;font-size:var(--fs-sm);color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .done-stick{grid-template-columns:1fr;gap:var(--s-6)}
  .phone{justify-self:center}
  .hero{grid-template-columns:1fr;gap:var(--s-7);padding-bottom:var(--s-8)}
  .done-head{grid-template-columns:1fr;gap:var(--s-5)}
  .inv-card{grid-template-columns:1fr;padding:var(--s-6);gap:var(--s-6)}
  .tf-grid{grid-template-columns:1fr 1fr}
  .tf-tag{grid-column:1 / -1}
}
@media (max-width:760px){
  .pair{grid-template-columns:1fr;gap:var(--s-4)}
  .plate{min-height:0;transform:none!important}
  .channel{transform:none;padding-block:var(--s-2)}
  .zones{grid-template-columns:1fr}
  .lane{display:none}
  .zone{min-height:0}
  .try-out{position:static;width:auto;height:auto;clip:auto;white-space:normal;padding:12px 16px;border-radius:12px;background:var(--deep-2)}
  .faq-grid{grid-template-columns:1fr}
  .tf-grid{grid-template-columns:1fr}
}

/* sequence timing */
.tc-mem{--d:.1}.tc-link{--d:.5}.tc-did{--d:.85}
.tc-list li:nth-child(1){--d:1.3}.tc-list li:nth-child(2){--d:1.7}.tc-list li:nth-child(3){--d:2.1}
.tc-msg{--d:1.95}
.day .step:nth-child(1){--i:0}.day .step:nth-child(2){--i:1}.day .step:nth-child(3){--i:2}.day .step:nth-child(4){--i:3}.day .step:nth-child(5){--i:4}
.needs.is-held .needs-q::after{content:" Held for later.";color:var(--terra-lite)}

/* ---------- MOTION (armed by JS; everything is visible without it) ---------- */
@media (prefers-reduced-motion:no-preference){
  .is-armed .t-step{opacity:0;transform:translateY(14px)}
  .is-armed.is-play .t-step{animation:tIn .6s var(--ease) both;animation-delay:calc(var(--d,0) * 1s)}
  .msg.on{animation:tMsg .5s var(--ease) both}
  @keyframes tMsg{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
  .verdict:not([hidden]){animation:tIn .35s var(--ease) both}
  .token.is-no{animation:tBump .5s var(--ease)}
  @keyframes tBump{0%,100%{translate:0}25%{translate:-8px}55%{translate:5px}}
  .gate.is-flash{animation:tFlash .6s var(--ease)}
  @keyframes tFlash{0%,100%{transform:none}30%{transform:scale(1.2,1.08)}}
  .tc-msg.is-sent .tc-done{animation:tIn .45s var(--ease) both}
  @keyframes tIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes tPop{from{transform:scale(0)}60%{transform:scale(1.25)}to{transform:scale(1)}}
  .token{transition:transform 1s var(--ease-io),background .3s,color .3s}
  .zone{transition:box-shadow .3s}
  .faq summary i{transition:transform .2s var(--ease)}
  /* one clock: trinity.js adds .go / .on to one memory at a time, so chip, caption and highlight cannot drift */
  .sift .sf-c{opacity:0;transform:translateX(-140%)}
  .sift .sf-c.go.ok{animation:sfOkGo 4.8s linear both}
  .sift .sf-c.go.no,.sift .sf-c.go.bl{animation:sfNoGo 4.8s linear both}
  .sift .sf-why span.on{animation:sfYGo 4.8s linear both}
  .sift mark.on{animation:sfMarkGo 4.8s linear both}
  @keyframes sfOkGo{0%{transform:translateX(-140%);opacity:0;animation-timing-function:cubic-bezier(.3,.1,.3,1)}10%{opacity:1}48%{transform:translateX(0);opacity:1}68%{transform:translateX(0);opacity:1;animation-timing-function:ease-in}88%{transform:translateX(70%);opacity:1}95%,100%{transform:translateX(105%);opacity:0}}
  @keyframes sfNoGo{0%{transform:translateX(-140%);opacity:0;animation-timing-function:cubic-bezier(.3,.1,.3,1)}10%{opacity:1}48%{transform:translateX(0);opacity:1}78%{transform:translateX(0);opacity:1}96%,100%{transform:translateX(-26%);opacity:0}}
  @keyframes sfYGo{0%,44%{opacity:0}50%,90%{opacity:1}98%,100%{opacity:0}}
  @keyframes sfMarkGo{0%,44%{background:transparent;box-shadow:inset 0 -2px 0 #c3cbb5}50%,90%{background:var(--terra-lite);box-shadow:none}98%,100%{background:transparent;box-shadow:inset 0 -2px 0 #c3cbb5}}
  .plate{transition:transform .5s var(--ease)}
  .tf-dot{animation:tFly 4.5s var(--ease-io) infinite}
  @keyframes tFly{0%{left:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}
  .tf-owl{transform-origin:50% 100%}
  .tf-perch.is-seen .tf-owl{animation:tNod 1.1s var(--ease) 2.4s 2}
  @keyframes tNod{0%,100%{transform:rotate(0)}40%{transform:rotate(-8deg)}70%{transform:rotate(3deg)}}
}
@media (prefers-reduced-motion:reduce){
  .tf-dot{display:none}
  .sift{height:auto;padding-bottom:var(--s-4)}
  .sift .sf-ask,.sift .sf-side,.sift .sf-border,.sift .sf-c{position:static}
  .sift .sf-ask{margin:12px}
  .sift .sf-border,.sift .sf-side{display:none}
  .sift .sf-c{display:block;width:fit-content;margin:8px 12px}
  .sift .sf-why{position:static;margin:12px}
  .sf-why{height:auto;padding:10px 12px}
  .sf-why span{position:static;display:block;opacity:1}
}

@media (max-width:480px){
  .tn .brand .sub{display:none}
  .tn .head .btn-sm{white-space:nowrap}
}

/* ---------- one frame per section ---------- */
.tn .sec{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s-7);align-items:end}
.sec-head .h2{margin:var(--s-2) 0 0;font-size:clamp(34px,4.2vw,56px)}
.sec-head .lead{margin:0;padding-bottom:6px}
.team{padding-block:var(--s-6)}
.team .pair{margin-top:var(--s-6)}
.team .plate{min-height:0;padding:var(--s-5)}
.team .plate .disc{width:76px;height:76px;margin-bottom:var(--s-3)}
.team .plate .disc img{width:54px;height:54px}
.team .plate .h3{font-size:clamp(28px,3vw,38px);margin:4px 0 var(--s-2)}
.team .mini{padding-top:var(--s-4)}
.team .mini li{padding:8px 12px;font-size:14px}
.team .pair-lead{margin-top:var(--s-5);font-size:15px;max-width:48em}
.lines{padding-block:var(--s-6)}
.lines .board{margin-top:var(--s-6);gap:var(--s-3)}
.lines .lane{margin-bottom:62px}
.lines .zone{min-height:0;padding:var(--s-5)}
.lines .zone .h3{font-size:clamp(24px,2.2vw,30px)}
.lines .chips{padding-top:var(--s-3)}
.lines .foot{margin-top:var(--s-3)}
.faq{padding-block:var(--s-6)}
.faq .faq-head{margin-bottom:var(--s-5)}
@media (max-width:760px){.pp-list{grid-template-columns:1fr;gap:var(--s-3)}}
@media (max-width:1000px){.tn .sec{min-height:0}.sec-head{grid-template-columns:1fr;gap:var(--s-4)}}

/* short windows: tighten so each section still reads as one frame */
@media (min-width:1000px) and (max-height:820px){
  .team,.lines,.faq{padding-block:var(--s-5)}
  .sec-head .h2{font-size:clamp(30px,3.6vw,46px)}
  .team .pair{margin-top:var(--s-4)}
  .team .pair-points{margin-top:var(--s-3);gap:var(--s-2)}
  .team .pp-lead{display:none}
  .team .plate .disc{width:60px;height:60px;margin-bottom:var(--s-2)}
  .team .plate .disc img{width:42px;height:42px}
  .team .plate-p{font-size:14px}
  .team .mini{display:none}
  .sift{height:300px}
  .lines .board{margin-top:var(--s-4)}
  .lines .zone p:not(.kicker){font-size:14px}
  .lines .zone{padding:var(--s-4) var(--s-5)}
  .lines .foot{display:none}
}

.tc-who{display:flex;align-items:center;gap:10px}
.tc-who .tc-ico{width:32px;height:32px}
.tc-msg .tc-bubble{margin-top:var(--s-3)}

/* replay: a small icon button instead of the words */
.replay-ico{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:var(--paper);cursor:pointer}
.replay-ico:hover{background:rgba(255,255,255,.24)}
.stage-foot{justify-content:flex-end;padding-inline:0}
.done .replay-ico{background:#dfe5d2;color:var(--ink)}
.done .replay-ico:hover{background:#d3dbc4}
.done-foot{margin-top:var(--s-4)}
@media (prefers-reduced-motion:no-preference){.replay-ico svg{transition:transform .5s var(--ease)}.replay-ico:hover svg{transform:rotate(-200deg)}}

/* replay icon lives inside the thing it replays */
.tc-linkrow{display:flex;align-items:center;justify-content:space-between;padding-right:4px}
.replay-mini{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;opacity:.75}
.replay-mini:hover{opacity:1;background:var(--tint-1)}
.ph-head .replay-mini{margin-left:auto;color:var(--on-deep)}
.ph-head .replay-mini:hover{background:rgba(255,255,255,.14)}
.replay-ico{display:none}
@media (prefers-reduced-motion:no-preference){.replay-mini svg{transition:transform .5s var(--ease)}.replay-mini:hover svg{transform:rotate(-200deg)}}

/* phone approval: the card completes in place, then Trinity answers */
.msg-needs.is-sent .ask-q::after,.msg-needs.is-held .ask-q::after{content:none}
.msg-after .bub{max-width:92%}
.rail li.r-ok::before{background:var(--green)}
.rail li.r-no::before{background:#8b9480}
.msg-after .typing{display:inline-flex;gap:4px;padding:12px 14px;border-radius:4px 16px 16px 16px;background:#fff}
.msg-after .typing i{width:6px;height:6px;border-radius:50%;background:#b9c3ab}
@media (prefers-reduced-motion:no-preference){
  .msg-after .typing i{animation:lDot 1s ease-in-out infinite}.msg-after .typing i:nth-child(2){animation-delay:.15s}.msg-after .typing i:nth-child(3){animation-delay:.3s}
}
.rail li.r-needs.r-ok::before{background:var(--green)}
.rail li.r-needs.r-no::before{background:#8b9480}

/* scroll cue for the pinned day */
.scroll-cue{display:none}
.done.is-scroll .scroll-cue{display:inline-flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(41,45,39,.06);color:var(--muted);font:600 13px/1 var(--sans);pointer-events:none;transition:opacity .35s var(--ease)}
.done.is-scroll .scroll-cue.is-off{opacity:0}
@media (prefers-reduced-motion:no-preference){.scroll-cue svg{animation:cueBob 1.6s ease-in-out infinite}@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}}

/* owl avatar: the disc is its own box so the accent dot is never clipped */
.ph-head .av,.th-head .av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper)}
.ph-head .av img,.th-head .av img{width:32px;height:32px;padding:0;border-radius:0;background:none;object-fit:contain}

/* hero card: floats in from the side, turns toward you when you reach for it */
@media (min-width:1000px){
  .hero .tcard{--rest:1;transform:perspective(1400px) rotateX(calc(2.5deg * var(--rest) + var(--tx,0deg))) rotateY(calc(-7deg * var(--rest) + var(--ty,0deg)));transform-origin:30% 50%;box-shadow:calc(var(--sh,0px) - 18px * var(--rest)) 34px 60px -30px rgba(0,0,0,.5)}
  .hero .tcard:hover,.hero .tcard:focus-within{--rest:0}
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .hero .tcard{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:transform}
}

/* hero: Trinity thinks for a moment between your tap and the confirmation */
.tc-think{display:none;align-items:center;gap:5px;width:fit-content;margin-top:var(--s-3);padding:12px 16px;border-radius:4px 16px 16px 16px;background:#fff;box-shadow:0 0 0 1px #e3e7d8}
.tc-think i{width:7px;height:7px;border-radius:50%;background:#b9c3ab}
.tc-msg.is-sending .tc-send{display:none}
.tc-msg.is-sending .tc-think{display:inline-flex}
@media (prefers-reduced-motion:no-preference){
  .tc-think i{animation:tcDot 0.9s ease-in-out infinite}.tc-think i:nth-child(2){animation-delay:.15s}.tc-think i:nth-child(3){animation-delay:.3s}
  @keyframes tcDot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
}

/* hero: a short "thinking" beat between the connector line and the draft */
.tc-pre{overflow:hidden;max-height:0;opacity:0}
.tc-pre span{display:inline-flex;align-items:center;gap:5px;padding:12px 16px;border-radius:4px 16px 16px 16px;background:var(--tint-1)}
.tc-pre i{width:7px;height:7px;border-radius:50%;background:#aab5a0}
@media (prefers-reduced-motion:no-preference){
  .is-armed.is-play .tc-pre{animation:tcPre 1s var(--ease) .95s both}
  .tc-pre i{animation:tcDot .9s ease-in-out infinite}.tc-pre i:nth-child(2){animation-delay:.15s}.tc-pre i:nth-child(3){animation-delay:.3s}
  @keyframes tcPre{0%{opacity:0;max-height:0}12%{opacity:1;max-height:48px}82%{opacity:1;max-height:48px}100%{opacity:0;max-height:0}}
}

/* the thinking dots overlay the space the draft will fill, so the card never changes height */
.tc-slot{position:relative}
.tc-pre{position:absolute;left:0;top:0;max-height:none;overflow:visible;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .is-armed.is-play .tc-pre{animation:tcPre2 1s var(--ease) .95s both}
  @keyframes tcPre2{0%{opacity:0;transform:translateY(6px)}14%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
}

/* the clash card: two real, labelled meetings that overlap */
.att-clash2{display:grid;gap:6px;width:min(100%,300px);padding:12px;border-radius:12px;background:var(--tint-1)}
.ev{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;font:500 13px/1.3 var(--sans);color:var(--ink)}
.ev b{font-weight:600}
.ev span{color:var(--muted);white-space:nowrap}
.ev-a{background:#cdd6c0}
.ev-b{margin-left:22%;background:#e8c0a6}
.ev-note{padding-left:4px;font:600 12px/1.3 var(--sans);color:var(--terra-deep)}
.inv-card .inv-form{align-self:center}
.inv-form:has(.inv-done:not([hidden])){padding:var(--s-5)}
.inv-done p:last-child{margin-bottom:0}
.inv-done b{margin-bottom:var(--s-3)}
/* contrast: AA on the tinted calendar rows and the small "Needs you" stamp */
.ev span{color:#3f4a39}
.msg-needs .stamp{color:var(--terra-deep)}
/* replay icons: keep the small look, give the hit area 44px */
.replay-mini{position:relative}
.replay-mini::after{content:"";position:absolute;inset:-7px}
/* phone: the menu's bottom margin stays inside the dark band (no light strip between header and hero) */
.hero-band.band-top{display:flow-root}