/* MotiveGTM, home page. Loads after base.css. */

/* ---------- Hero: the signal field ---------- */
.hhero{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + 72px) 0 88px;overflow:hidden;background:var(--canvas)}
.hhero-art{position:absolute;inset:0;pointer-events:none}
.signal-canvas{position:absolute;inset:0;width:100%;height:100%}
.hhero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,21,48,1) 0%,rgba(10,21,48,.96) 30%,rgba(10,21,48,.55) 46%,rgba(10,21,48,0) 60%),linear-gradient(to top,rgba(10,21,48,1) 0%,rgba(10,21,48,0) 16%),linear-gradient(to bottom,rgba(10,21,48,.9) 0,rgba(10,21,48,0) 140px)}
.hhero-inner{position:relative;z-index:2;pointer-events:none}
.hhero-copy{pointer-events:auto}
/* The diagram's callouts: numbered buttons, hover zones, and one explanation card per part. */
.art-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.art-zone{position:absolute;left:0;top:0;border-radius:12px;pointer-events:auto;cursor:help}
/* Hotspots: a pulsing ring on each part of the diagram. Nothing reads as text until someone hovers or taps. */
.art-spot{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity 1s var(--ease-out)}
.art-ready .art-spot{opacity:1}
.art-spot span{position:absolute;inset:7px;border-radius:50%;border:1.5px solid rgba(191,227,53,.9);background:rgba(10,21,48,.75);transition:transform .25s var(--ease-out),background-color .25s var(--ease-out),border-color .25s var(--ease-out)}
.art-spot span::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent-hover);transition:transform .25s var(--ease-out),background-color .25s var(--ease-out)}
.art-spot::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(191,227,53,.6);animation:spotPing 2.8s var(--ease-out) infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes spotPing{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
.explored .art-spot::before{animation-duration:5.6s;opacity:.5}
.art-spot:hover span,.art-spot:focus-visible span,.art-spot.on span{transform:scale(1.2);background:var(--accent);border-color:var(--accent)}
.art-spot:hover span::after,.art-spot:focus-visible span::after,.art-spot.on span::after{background:var(--ink)}
.art-spot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.has-focus .art-spot:not(.on){opacity:.3}
.art-tip{position:absolute;left:0;top:0;width:310px;padding:16px 18px 14px;border-radius:12px;border:1px solid rgba(163,196,32,.6);background:#0F2349;box-shadow:0 0 0 4px rgba(6,11,26,.5),0 30px 60px -20px rgba(6,11,26,.95),0 0 40px -14px rgba(163,196,32,.6);pointer-events:none}
.art-tip:not([hidden]){animation:tipIn .22s var(--ease-out)}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.art-tip-head{display:flex;align-items:center;gap:10px}
.art-tip-title{font-size:16px;line-height:1.25;font-weight:500;letter-spacing:-.01em;color:#fff}
.art-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(163,196,32,.18)}
.art-tip-body{margin-top:10px;font-size:14px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.art-key{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hairline);font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-muted);font-weight:500}
.key{flex:none;display:block}
.key-white{width:28px;height:2px;border-radius:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9))}
.key-olive{width:28px;height:2px;border-radius:1px;background:linear-gradient(90deg,rgba(163,196,32,0),#BFE335)}
.key-node{position:relative;width:28px;height:2px;background:rgba(163,196,32,.8)}
.key-node::after{content:"";position:absolute;right:-4px;top:-5px;width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:#0A1530;box-shadow:inset 0 0 0 2.5px #0A1530,inset 0 0 0 5px #fff}
.hhero-copy{max-width:660px}
.hhero h1{font-size:clamp(40px,4.7vw,68px);line-height:1.04;font-weight:500;letter-spacing:-.026em;max-width:15ch;text-wrap:balance}
.hhero-sub{margin-top:26px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--text-secondary);max-width:54ch;text-wrap:pretty}
.hhero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.js .hhero-copy>*{animation:heroIn .9s var(--ease-out) both}
.js .hhero-copy>:nth-child(2){animation-delay:.08s}
.js .hhero-copy>:nth-child(3){animation-delay:.2s}
.js .hhero-copy>:nth-child(4){animation-delay:.32s}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hhero{align-items:flex-end;min-height:100vh;min-height:100svh;padding-top:calc(var(--nav-h) + 40vh);padding-bottom:64px}
  .hhero-veil{background:linear-gradient(to top,rgba(10,21,48,1) 0%,rgba(10,21,48,.96) 34%,rgba(10,21,48,.55) 52%,rgba(10,21,48,0) 70%),linear-gradient(to bottom,rgba(10,21,48,.9) 0,rgba(10,21,48,0) 120px)}
  .art-tip{width:min(420px,calc(100% - 32px))}
  .hhero h1{font-size:clamp(34px,8.4vw,56px)}
}

/* ---------- Section 1: the Curation Filter, a signal triage board ----------
   Compact by default. "Expand the board" adds the account and fit score, the AI's suggestion
   as its own column, all four decision buttons, and more sent messages. */
.curation-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(28px,3vw,40px)}
.curation-head h2{max-width:15ch}
@media (max-width:900px){.curation-head{grid-template-columns:1fr}}

.triage{position:relative;padding:clamp(14px,1.8vw,22px);border:1px solid var(--border-strong);border-radius:16px;background:rgba(15,35,73,.9);box-shadow:0 34px 90px -44px rgba(77,163,255,.45),0 50px 100px -60px rgba(163,196,32,.35)}
.tr-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.tr-kicker{flex:1 1 220px;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-muted);font-weight:500}
.tr-stats{display:flex;flex-wrap:wrap;gap:6px}
.tr-stat{display:flex;align-items:baseline;gap:8px;padding:6px 12px;border:1px solid var(--hairline);border-radius:999px;background:rgba(6,11,26,.45)}
.tr-stat b{font-family:var(--font-mono);font-size:15px;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.tr-stat span{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-muted);white-space:nowrap;font-weight:500}
.s-ai b{color:#7FBDFF}
.s-person b{color:var(--accent-hover)}
.tr-controls{display:flex;gap:6px}
.tr-pause,.tr-expand{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-secondary);white-space:nowrap;cursor:pointer;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background-color .2s var(--ease-out);font-weight:500}
.tr-pause:hover,.tr-expand:hover{border-color:#fff;color:#fff}
.tr-expand{border-color:rgba(163,196,32,.6);color:var(--accent-hover)}
.tr-expand:hover{border-color:var(--accent);background:rgba(163,196,32,.12);color:var(--accent-hover)}
.tr-pause i{position:relative;width:10px;height:10px}
.tr-pause i::before,.tr-pause i::after{content:"";position:absolute;top:0;width:3px;height:10px;border-radius:1px;background:currentColor}
.tr-pause i::before{left:1px}
.tr-pause i::after{right:1px}
.tr-pause[aria-pressed="true"] i::before{left:1px;width:0;height:0;border-radius:0;background:none;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tr-pause[aria-pressed="true"] i::after{display:none}
.tr-expand i{position:relative;width:10px;height:10px}
.tr-expand i::before,.tr-expand i::after{content:"";position:absolute;width:5px;height:5px;border-color:currentColor;border-style:solid;transition:transform .25s var(--ease-out)}
.tr-expand i::before{left:0;top:0;border-width:1.5px 0 0 1.5px}
.tr-expand i::after{right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.is-expanded .tr-expand i::before{transform:translate(2px,2px) rotate(180deg)}
.is-expanded .tr-expand i::after{transform:translate(-2px,-2px) rotate(180deg)}

.tr-funnel{display:flex;flex-direction:column;align-items:center}
.tr-band{position:relative;width:var(--bw);padding:10px 12px 12px;border:1px solid;border-radius:12px}
.is-expanded .tr-band{padding:14px 16px 16px;border-radius:14px}
.tr-b1{--bw:100%;border-color:rgba(77,163,255,.45);background:linear-gradient(180deg,rgba(77,163,255,.13),rgba(6,11,26,.4))}
.tr-b2{--bw:82%;border-color:rgba(163,196,32,.6);background:linear-gradient(180deg,rgba(163,196,32,.13),rgba(6,11,26,.4))}
.tr-b3{--bw:64%;border-color:rgba(255,255,255,.22);background:rgba(6,11,26,.5)}
.tr-neck{position:relative;width:var(--bw);height:18px;overflow:hidden;clip-path:polygon(0 0,100% 0,calc(100% - var(--inset)) 100%,var(--inset) 100%);background:linear-gradient(180deg,rgba(77,163,255,.22),rgba(163,196,32,.18))}
.is-expanded .tr-neck{height:26px}
.tr-neck::after{content:"";position:absolute;left:0;right:0;top:-20px;bottom:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,transparent 2px 10px);will-change:transform;animation:neckFlow 1.2s linear infinite}
.n1{--bw:100%;--inset:9%}
.n2{--bw:82%;--inset:11%;background:linear-gradient(180deg,rgba(163,196,32,.22),rgba(255,255,255,.08))}
.n2::after{background:repeating-linear-gradient(180deg,rgba(191,227,53,.3) 0 2px,transparent 2px 10px)}
@keyframes neckFlow{from{transform:translateY(0)}to{transform:translateY(20px)}}
.tr-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:8px}
.is-expanded .tr-label{margin-bottom:12px}
.tr-label b{font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:0}
.tr-label span{font-size:12px;color:var(--text-muted)}
.tr-b1 .tr-label b{color:#7FBDFF}
.tr-b2 .tr-label b{color:var(--accent-hover)}
.tr-b3 .tr-label b{color:#fff}
.tr-held{margin-left:auto;padding:2px 8px;border-radius:999px;background:rgba(163,196,32,.16);font-style:normal;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--accent-hover);opacity:0;transition:opacity .25s var(--ease-out);font-weight:500}
.is-held .tr-held{opacity:1}

/* Signal cards */
.tr-row{position:relative;height:118px;overflow:hidden}
.is-expanded .tr-row{height:176px}
.tr-card{display:flex;flex-direction:column;min-width:0;padding:10px 12px;border:1px solid var(--hairline);border-radius:10px;background:#0F2349}
.is-expanded .tr-card{padding:12px 14px}
.tr-row .tr-card{position:absolute;left:0;top:0;height:100%;transition:transform .55s var(--ease-out),opacity .55s var(--ease-out)}
.tr-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.tr-src{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;white-space:nowrap;color:var(--sc);font-weight:500}
.tr-src::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.tr-ind{flex:none;padding:1px 7px;border:1px solid var(--hairline);border-radius:999px;font-size:10.5px;line-height:1.5;color:var(--text-secondary);white-space:nowrap}
.tr-what{margin-top:6px;font-size:13px;line-height:1.38;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.is-expanded .tr-what{margin-top:8px;font-size:13.5px;-webkit-line-clamp:3}
.tr-tags{display:grid;gap:5px;margin-top:auto;padding-top:7px;border-top:1px dashed rgba(77,163,255,.32)}
.tr-tags>*{opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.tr-tags>:nth-child(2){transition-delay:.3s}
.tr-tagrow{display:none;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)}
.is-expanded .tr-tagrow{display:flex}
.tr-acct{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-fit{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.tr-fit i{position:relative;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.tr-fit i::after{content:"";position:absolute;inset:0;background:#7FBDFF;transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease-out) .35s}
.tr-action{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-action em{font-style:normal;color:#7FBDFF}
.tr-card.tagged .tr-tags>*{opacity:1;transform:none}
.tr-card.tagged .tr-fit i::after{transform:scaleX(var(--fit-k,0))}

/* The review */
.tr-review{position:relative;min-height:128px}
.is-expanded .tr-review{min-height:184px}
.tr-empty{display:grid;place-items:center;min-height:128px;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-muted);animation:tipIn .4s var(--ease-out);font-weight:500}
.is-expanded .tr-empty{min-height:184px}
.tr-rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10px;align-items:stretch;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.is-expanded .tr-rv{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.15fr);gap:12px}
.tr-rv.enter{opacity:0;transform:translateY(-18px)}
.tr-rv.out-pass{opacity:0;transform:translateX(48px)}
.tr-rv.out-send{opacity:0;transform:translateY(24px) scale(.96)}
.tr-rv .tr-card{min-height:128px}
.is-expanded .tr-rv .tr-card{min-height:184px}
.is-expanded .tr-rv .tr-action{display:none}
.tr-suggest{display:none;flex-direction:column;padding:12px 14px;border:1px dashed rgba(77,163,255,.45);border-radius:10px;background:rgba(77,163,255,.06)}
.is-expanded .tr-suggest{display:flex}
.tr-suggest small,.tr-decide small{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;font-weight:500}
.tr-suggest small{color:#7FBDFF}
.tr-suggest p{margin-top:8px;font-size:14px;line-height:1.45;color:#fff;text-wrap:pretty}
.tr-decide{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid rgba(163,196,32,.4);border-radius:10px;background:rgba(163,196,32,.07)}
.is-expanded .tr-decide{gap:10px;padding:12px 14px}
.tr-decide small{color:var(--accent-hover)}
.tr-btns{display:flex;flex-wrap:wrap;gap:5px}
.tr-btns span{flex:1 1 auto;padding:4px 8px;border:1px solid var(--border-strong);border-radius:999px;text-align:center;font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--text-muted);transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out)}
.triage:not(.is-expanded) .tr-btns span:not(.pick){display:none}
.triage:not(.is-expanded) .tr-btns span.pick{flex:none}
.tr-btns .pick{transform:scale(1.05)}
.tr-btns .pick.approve{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.tr-btns .pick.edit{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.tr-btns .pick.overrule{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.tr-btns .pick.none{background:rgba(255,255,255,.88);border-color:#fff;color:var(--ink)}
.tr-why{font-size:12.5px;line-height:1.45;color:var(--text-secondary);opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease-out) .2s,transform .4s var(--ease-out) .2s;text-wrap:pretty}
.is-expanded .tr-why{font-size:13px}
.tr-why b{display:block;margin-bottom:2px;font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:0;color:#fff}
.decided .tr-why{opacity:1;transform:none}

/* What was sent */
.tr-moves{display:grid;align-content:start;gap:6px;min-height:92px}
.is-expanded .tr-moves{gap:8px;min-height:290px}
.tr-moves li:nth-child(n+3){display:none}
.is-expanded .tr-moves li:nth-child(n+3){display:block}
.tr-move{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;min-height:43px;padding:6px 10px;border:1px solid rgba(163,196,32,.35);border-radius:10px;background:rgba(163,196,32,.08);color:#fff;font-size:13.5px;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.is-expanded .tr-move{min-height:50px;padding:8px 12px;font-size:14px}
.tr-move:hover{border-color:var(--accent);background:rgba(163,196,32,.16)}
.tr-ch{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-secondary);white-space:nowrap;font-weight:500}
.tr-mt{min-width:0}
.tr-by{font-size:12px;color:var(--text-muted);white-space:nowrap}
.tr-see{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--accent-hover);white-space:nowrap;font-weight:500}
.tr-moves li.new{animation:moveIn .5s var(--ease-out)}
@keyframes moveIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* The dialog: one AI draft next to what was sent */
.tr-detail{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12px;border-radius:16px;background:rgba(6,11,26,.86)}
.tr-detail[hidden]{display:none}
.tr-dialog{width:min(780px,100%);max-height:100%;overflow:auto;padding:clamp(16px,2.2vw,24px);border:1px solid rgba(163,196,32,.6);border-radius:14px;background:#0F2349;box-shadow:0 40px 90px -30px rgba(6,11,26,.95);animation:tipIn .24s var(--ease-out)}
.tr-dialog:focus{outline:none}
.tr-d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tr-d-kick{display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--text-muted);font-weight:500}
.tr-d-result{color:var(--accent-hover)}
.tr-d-title{margin-top:6px;font-size:clamp(18px,1.7vw,21px)}
.tr-d-btns{display:flex;gap:6px;flex:none}
.tr-d-close{position:relative;flex:none;width:36px;height:36px;border:1px solid var(--border-strong);border-radius:50%;background:transparent;cursor:pointer}
.tr-d-close:hover{border-color:#fff}
.tr-d-close span::before,.tr-d-close span::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;background:#fff;transform:rotate(45deg)}
.tr-d-close span::after{transform:rotate(-45deg)}
.tr-d-what{margin-top:10px;font-size:14px;color:var(--text-secondary)}
.tr-d-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tr-d-col{padding:14px 16px;border-radius:10px}
.tr-d-col small{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;font-weight:500}
.tr-d-col p{margin-top:8px;font-size:15px;line-height:1.55;white-space:pre-line;text-wrap:pretty}
.d-ai{border:1px dashed rgba(77,163,255,.5);background:rgba(77,163,255,.06)}
.d-ai small{color:#7FBDFF}
.d-ai p{color:var(--text-muted)}
.d-ai p.d-none{font-style:italic}
.d-sent{border:1px solid rgba(163,196,32,.6);background:rgba(163,196,32,.08)}
.d-sent small{color:var(--accent-hover)}
.d-sent p{color:#fff}
.tr-d-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);font-size:14px;line-height:1.5;color:var(--text-secondary)}
.tr-d-note b{display:block;margin-bottom:3px;font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:0;color:#fff}

@media (max-width:900px){
  .tr-b2{--bw:94%}
  .tr-b3{--bw:88%}
  .n1{--bw:100%;--inset:3%}
  .n2{--bw:94%;--inset:3.2%}
  .is-expanded .tr-rv{grid-template-columns:1fr 1fr}
  .is-expanded .tr-rv .tr-card{grid-column:1/-1;min-height:0}
  .is-expanded .tr-review,.is-expanded .tr-empty{min-height:320px}
}
@media (max-width:600px){
  .tr-stats{width:100%}
  .tr-stat{flex:1;flex-direction:column;align-items:flex-start;gap:0;border-radius:10px;padding:6px 10px}
  .tr-stat span{font-size:11.5px;white-space:normal}
  .tr-controls{width:100%}
  .tr-controls button{flex:1;justify-content:center}
  .tr-b2,.tr-b3{--bw:100%}
  .n1,.n2{--bw:100%;--inset:5%}
  .tr-rv,.is-expanded .tr-rv{grid-template-columns:1fr}
  .tr-rv .tr-card{min-height:0}
  .tr-review,.tr-empty{min-height:250px}
  .is-expanded .tr-review,.is-expanded .tr-empty{min-height:440px}
  .tr-label span{display:none}
  .is-expanded .tr-label span{display:inline}
  .tr-move,.is-expanded .tr-move{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .tr-move .tr-ch{justify-self:start}
  .tr-move .tr-mt{grid-column:1/-1;grid-row:2}
  .tr-move .tr-by{grid-column:1;grid-row:3}
  .tr-move .tr-see{grid-column:2;grid-row:1}
  .tr-d-compare{grid-template-columns:1fr}
}

/* ---------- Section 2: the Growth Stack ---------- */
.sec-stack{background:rgba(6,11,26,.55);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.stack-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.stack-copy h2{max-width:14ch}
.stack-copy .lead{margin-top:20px}
.stack-stage{position:relative;max-width:600px;margin-inline:auto}
.tiers{display:flex;flex-direction:column;align-items:center;gap:10px}
.tier{width:var(--w);will-change:transform,opacity}
/* The top tier is the narrowest, so it sets how long a tier name can be: at 58% the
   label "GTM Engineering" was cut to "GTM Engi...". These widths are the gentler
   pyramid the phone layout below already uses, which fits the longest of the three. */
.tier-growth{--w:70%;--tier:#A3C420;--tier-deep:#6E8712}
.tier-brand{--w:85%;--tier:#3DD6C4;--tier-deep:#1E8F84}
.tier-disc{--w:100%;--tier:#4DA3FF;--tier-deep:#2266B8}
.tier-btn{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;min-height:76px;padding:0 22px;border:0;border-radius:12px;background:var(--tier);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -5px 0 var(--tier-deep),0 22px 44px -24px var(--tier);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),filter .22s var(--ease-out)}
.tier-btn:hover,.tier-btn[aria-expanded="true"]{transform:translateY(-3px);filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 0 var(--tier-deep),0 28px 54px -22px var(--tier)}
.tier-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tier-name{font-size:clamp(18px,1.7vw,22px);line-height:1.2;font-weight:500;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier-tag{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:rgba(6,11,26,.62);white-space:nowrap;font-weight:500}
.tier-plus{position:relative;width:24px;height:24px;border-radius:50%;background:rgba(6,11,26,.16);transition:transform .22s var(--ease-out),background-color .22s var(--ease-out)}
.tier-plus::before,.tier-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;background:var(--ink);border-radius:1px}
.tier-plus::after{transform:rotate(90deg)}
.tier-btn[aria-expanded="true"] .tier-plus{transform:rotate(45deg);background:rgba(6,11,26,.28)}
/* The light climbs the stack: base first, then each tier above it. */
.tier-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);transform:translateX(-130%);animation:tierShine 4.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .42s);pointer-events:none}
@keyframes tierShine{0%{transform:translateX(-130%)}38%,100%{transform:translateX(130%)}}
.js .stack.reveal .tier{opacity:0}
.stack figcaption{margin-top:24px;text-align:center;font-size:14px;line-height:1.5;color:var(--text-secondary);text-wrap:balance}
/* The pop-up, anchored to the tier that opened it. */
.tier-pop{position:absolute;z-index:6;left:50%;top:0;width:min(360px,100%);padding:18px 20px 20px;border-radius:14px;background:#0F2349;border:1px solid var(--tier);box-shadow:0 0 0 4px rgba(6,11,26,.55),0 30px 70px -20px rgba(6,11,26,.95),0 0 44px -12px var(--tier);transform:translateX(-50%);transform-origin:50% 100%}
.tier-pop[data-tier="growth"]{--tier:#A3C420}
.tier-pop[data-tier="brand"]{--tier:#3DD6C4}
.tier-pop[data-tier="disc"]{--tier:#4DA3FF}
.tier-pop:not([hidden]){animation:popIn .26s var(--ease-out)}
.tier-pop.below{transform-origin:50% 0}
@keyframes popIn{from{opacity:0;transform:translateX(-50%) translateY(6px) scale(.96)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.pop-arrow{position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:#0F2349;border-right:1px solid var(--tier);border-bottom:1px solid var(--tier);transform:translateX(-50%) rotate(45deg)}
.tier-pop.below .pop-arrow{bottom:auto;top:-7px;transform:translateX(-50%) rotate(-135deg)}
.pop-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 12px;align-items:start}
.pop-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:var(--tier);font-weight:500}
.pop-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pop-title{grid-column:1;font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.012em;color:#fff}
.pop-close{grid-column:2;grid-row:1/3;position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-strong);background:transparent;cursor:pointer;transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.pop-close:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.pop-close span::before,.pop-close span::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#fff;transform:rotate(45deg)}
.pop-close span::after{transform:rotate(-45deg)}
.tier-pop p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--text-secondary);text-wrap:pretty}
@media (max-width:900px){
  .stack-grid{grid-template-columns:1fr}
  .stack{order:2}
}
/* Just above that breakpoint the stack shares the row with the copy, so its column is
   at its narrowest of any viewport. Widen the tiers here the way the phone rule below
   does, or "GTM Engineering" runs out of room again between about 900 and 1000px. */
@media (min-width:901px) and (max-width:1000px){
  .tier-growth{--w:80%}
  .tier-brand{--w:90%}
}
@media (max-width:560px){
  .tier-growth{--w:74%}
  .tier-brand{--w:88%}
  .tier-btn{min-height:66px;padding:0 16px;gap:10px;grid-template-columns:minmax(0,1fr) auto}
  .tier-tag{display:none}
}

/* ---------- Section 3: Supply-Driven vs. Demand-Driven ---------- */
.shift-head{max-width:800px;margin-bottom:clamp(28px,3vw,44px)}
.shift-head .lead{margin-top:20px;max-width:64ch}
.compare-toggle{position:relative;display:inline-flex;padding:4px;margin-bottom:24px;border:1px solid var(--border-strong);border-radius:999px;background:rgba(15,35,73,.85)}
.tg{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border:0;border-radius:999px;background:transparent;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:color .24s var(--ease-out)}
.tg small{font-size:12px;font-weight:400;font-family:var(--font-mono);letter-spacing:.02em;opacity:.85}
.tg-demand[aria-pressed="true"]{color:var(--ink)}
.tg-supply[aria-pressed="true"]{color:#fff}
.tg-knob{position:absolute;top:4px;bottom:4px;left:4px;width:120px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 1px rgba(191,227,53,.5),0 8px 24px -6px rgba(163,196,32,.6);transition:left .34s var(--ease-out),width .34s var(--ease-out),background-color .34s var(--ease-out),box-shadow .34s var(--ease-out)}
.compare[data-mode="supply"] .tg-knob{background:rgba(255,122,107,.32);box-shadow:0 0 0 1px rgba(255,122,107,.6),0 8px 24px -6px rgba(255,122,107,.35)}
.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.col{position:relative;padding:clamp(22px,2.6vw,32px);border:1px solid var(--hairline);border-radius:14px;background:rgba(15,35,73,.85);transition:opacity .36s var(--ease-out),border-color .36s var(--ease-out),transform .36s var(--ease-out),box-shadow .36s var(--ease-out),background-color .36s var(--ease-out),visibility 0s linear 0s}
.col h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.col h3 span{font-family:var(--font-sans);font-size:13.5px;font-weight:400;letter-spacing:0;color:var(--text-muted)}
.col ul{margin-top:18px}
.col li{position:relative;padding:15px 0 15px 34px;border-top:1px solid var(--hairline);font-size:15.5px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.col li::before{content:"";position:absolute;left:0;top:17px;width:18px;height:18px;border-radius:50%}
.col-supply li::before{background:rgba(255,122,107,.14);border:1px solid rgba(255,122,107,.5);background-image:linear-gradient(45deg,transparent 45%,rgba(255,122,107,.95) 45%,rgba(255,122,107,.95) 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,rgba(255,122,107,.95) 45%,rgba(255,122,107,.95) 55%,transparent 55%);background-size:8px 8px;background-position:center;background-repeat:no-repeat}
.col-demand li::before{background:var(--accent);box-shadow:0 0 0 4px rgba(163,196,32,.16)}
.col-demand li::after{content:"";position:absolute;left:5px;top:22px;width:7px;height:4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.compare[data-mode="demand"] .col-demand{border-color:rgba(163,196,32,.55);background:linear-gradient(180deg,rgba(163,196,32,.14),rgba(15,35,73,.9) 38%);box-shadow:0 0 0 1px rgba(163,196,32,.2),0 34px 80px -30px rgba(163,196,32,.45)}
.compare[data-mode="demand"] .col-demand h3 span{color:var(--accent-hover)}
.compare[data-mode="supply"] .col-supply{border-color:rgba(255,122,107,.45);background:linear-gradient(180deg,rgba(255,122,107,.12),rgba(15,35,73,.9) 38%);box-shadow:0 0 0 1px rgba(255,122,107,.16),0 34px 80px -30px rgba(255,122,107,.35)}
.compare[data-mode="supply"] .col-supply h3 span{color:var(--coral)}
.compare[data-mode="demand"] .col-supply,.compare[data-mode="supply"] .col-demand{opacity:.38;transform:scale(.985)}
.compare[data-mode="demand"] .col-demand li,.compare[data-mode="supply"] .col-supply li{color:var(--text-primary)}
.js .col.rows-in li{animation:rowIn .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .compare-toggle{display:flex;width:100%}
  .tg{flex:1;justify-content:center;padding:0 10px;flex-direction:column;gap:0;height:54px;line-height:1.2}
  .tg small{font-size:11px}
  .compare-cols{grid-template-columns:1fr}
  .col{grid-area:1/1}
  .compare[data-mode="demand"] .col-supply,.compare[data-mode="supply"] .col-demand{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,0s,0s,0s,.36s}
  .compare[data-mode="demand"] .col-supply{transform:translateX(-14px)}
  .compare[data-mode="supply"] .col-demand{transform:translateX(14px)}
}

/* ---------- Section 4: Start where you are ---------- */
.sec-start{border-top:1px solid var(--hairline)}
.segment a{background:rgba(15,35,73,.85)}
.start-head{margin-bottom:clamp(24px,2.5vw,36px)}
.start-head h2{max-width:20ch}
.segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.segment a{display:flex;flex-direction:column;height:100%;padding:22px 22px 20px;border:1px solid var(--hairline);border-radius:12px;background:var(--panel);text-decoration:none;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
.segment a:hover,.segment a:focus-visible{background:var(--panel-hover);border-color:var(--border-strong)}
.segment h3{margin-top:0}
.segment p{flex:1;margin-top:12px;font-size:15px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.seg-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:500;color:var(--text-primary);transition:color .2s var(--ease-out)}
.segment a:hover .seg-link{color:var(--accent)}
.start-cta{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px)}
@media (max-width:900px){
  .segments{grid-template-columns:1fr}
  .segment a{min-height:0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .js .hhero-copy>*{animation:none}
  .tier-btn::after{animation:none;opacity:0}
  .js .stack.reveal .tier{opacity:1!important;transform:none!important}
  .art-spot{opacity:1}
}
/* The 'Illustration' label stands on its own rather than opening the sentence beside it. */
.tr-illus{flex:none;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--text-muted)}