@font-face{font-family:'Polymath Display';src:url('https://talkpush-feature-wall.vercel.app/assets/fonts/PolymathDisp-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Polymath Text';src:url('https://talkpush-feature-wall.vercel.app/assets/fonts/PolymathText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Polymath Text';src:url('https://talkpush-feature-wall.vercel.app/assets/fonts/PolymathText-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Layout concept: a streaming-service wall printed on Talkpush beige. A masthead names the wall,
   a billboard features one title, then horizontal rails of pastel posters coloured by product.
   Each poster opens its own title page (hash route) and morphs into that page's key art.
   Single light theme by design: every colour is painted explicitly. */
:root{
  color-scheme:light;
  --stage:#FFFFF5;
  --stage-2:#F7F7EA;
  --panel:#FFFFFF;
  --panel-2:#F2F2E4;
  --line:#E5E5D6;
  --line-2:#D3D3C3;
  --text:#14140F;
  --text-2:#4F4F45;
  --text-3:#80806F;
  --pink:#E8C2EF;   /* TalkScore */
  --blue:#BBCAF0;   /* Crew */
  --green:#ACCDB5;  /* CRM */
  --orange:#E8B766; /* Platform */
  --ink:#14140F;
  --on-ink:#FFFFF5;
  --ink-2:#2A2A22;
  --paper:rgba(255,255,245,.8);
  --display:'Polymath Display','Space Grotesk',system-ui,sans-serif;
  --body:'Polymath Text','Space Grotesk',system-ui,sans-serif;
  --util:'Space Grotesk','Polymath Text',system-ui,sans-serif;
  --pw:188px;
  --gut:clamp(16px,4vw,56px);
  --max:1280px;
  --ground:var(--orange);
  --grain:none;
  --lift:0 1px 2px rgba(20,20,15,.06),0 14px 28px -18px rgba(20,20,15,.38);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--stage);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
.p-TalkScore{--ground:var(--pink)}
.p-Crew{--ground:var(--blue)}
.p-CRM{--ground:var(--green)}
.p-Platform{--ground:var(--orange)}
body[data-view="wall"] .page-only,body[data-view="page"] .wall-only{display:none!important}

/* ---------- top bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,245,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px var(--gut) 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 28px;align-items:center;view-transition-name:bar}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{display:block;height:22px;width:auto}
.logo span{font:700 11px/1 var(--util);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding-left:12px;border-left:1px solid var(--line-2);white-space:nowrap}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px;min-width:0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--util);letter-spacing:.04em;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);transition:background .15s,color .15s,border-color .15s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--text-3));display:block;box-shadow:inset 0 0 0 1px rgba(20,20,15,.12)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.fw-search{position:relative;min-width:0}
.fw-search input{width:210px;max-width:100%;font:500 14px/1 var(--util);color:var(--text);background:var(--panel);border:1px solid var(--line-2);border-radius:999px;padding:10px 14px 10px 38px}
.fw-search input::placeholder{color:var(--text-3)}
.fw-search input:focus{outline:none;border-color:var(--text-2)}
.fw-search svg{position:absolute;left:13px;top:50%;translate:0 -50%;width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:2;stroke-linecap:round}
.crumb{display:flex;align-items:center;gap:14px;min-width:0;font:700 13px/1 var(--util)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:9px 14px 9px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);white-space:nowrap}
.back:hover{border-color:var(--text-3)}
.back svg,.pg svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.crumb-row{color:var(--text-3);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pager{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--util);color:var(--text-3);font-variant-numeric:tabular-nums}
.pg{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);display:grid;place-items:center;color:var(--text);text-decoration:none}
.pg:hover{border-color:var(--text-3)}
@media (max-width:820px){
  .bar{grid-template-columns:1fr auto;gap:10px 14px}
  .chips{grid-column:1/-1;order:3}
  .fw-search input{width:150px}
  .crumb{grid-column:1/-1;order:3}
  .logo span{display:none}
}

/* ---------- masthead ---------- */
.fw-mast{padding:clamp(30px,5vw,64px) var(--gut) clamp(8px,1.5vw,16px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:end}
.fw-mast h1{font:600 clamp(56px,11vw,168px)/.86 var(--display);letter-spacing:-.025em;text-wrap:balance}
.fw-mast h1 em{font-style:normal;display:inline-block;background:linear-gradient(100deg,#7FAF8C,#8EA3E0 38%,#C88BD4 68%,#D9A040);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.mast-side{display:grid;gap:14px;justify-items:start;max-width:34ch;padding-bottom:10px}
.mast-side p{font-size:18px;line-height:1.45;color:var(--text-2)}
.tally{display:flex;gap:8px;flex-wrap:wrap}
.tally span{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--util);padding:8px 11px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text-2);font-variant-numeric:tabular-nums}
.tally i{width:8px;height:8px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(20,20,15,.12)}
@media (max-width:820px){.fw-mast{grid-template-columns:1fr}.mast-side{padding-bottom:0}}

/* ---------- billboard ---------- */
.billboard{margin:clamp(18px,3vw,28px) var(--gut) 0;border-radius:28px;position:relative;overflow:hidden;padding:clamp(24px,4.4vw,60px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;background:radial-gradient(800px 420px at 85% 30%,rgba(232,194,239,.75),transparent 70%),radial-gradient(600px 360px at 0% 100%,rgba(187,202,240,.6),transparent 70%),var(--panel);border:1px solid var(--line)}
.eyebrow{font:700 11px/1 var(--util);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:10px}
.eyebrow b{display:inline-block;padding:5px 8px;border-radius:4px;background:var(--ink);color:var(--on-ink);letter-spacing:.12em}
.billboard h2{font:600 clamp(42px,6.2vw,92px)/.96 var(--display);letter-spacing:-.015em;margin-block:18px;text-wrap:balance}
.billboard .tag{font-size:clamp(18px,2vw,23px);line-height:1.4;color:var(--text-2);max-width:34ch;text-wrap:balance}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-block:20px 26px;font:500 13px/1.3 var(--util);color:var(--text-3)}
.facts span{display:inline-flex;align-items:center;gap:18px}
.facts span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--text-3);display:block}
.facts strong{color:var(--text);font-weight:700}
.fw-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--util);padding:14px 24px;border-radius:8px;border:0;text-decoration:none;transition:background .15s}
.btn-main{background:var(--ink);color:var(--on-ink)}
.btn-main:hover{background:var(--ink-2)}
.btn-alt{background:rgba(20,20,15,.07);color:var(--text)}
.btn-alt:hover{background:rgba(20,20,15,.13)}
.btn svg{width:16px;height:16px}
.stage-card{background:var(--ink);color:var(--on-ink);border-radius:20px;padding:clamp(18px,2.4vw,30px);box-shadow:0 40px 70px -40px rgba(20,20,15,.7)}
.live{display:flex;align-items:center;gap:10px;font:700 11px/1 var(--util);letter-spacing:.14em;text-transform:uppercase;color:#C6C6B5}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:#F26B5E;box-shadow:0 0 0 4px rgba(242,107,94,.25)}
.live em{margin-left:auto;font-style:normal;color:#93937F;font-variant-numeric:tabular-nums}
.eq{display:flex;align-items:center;justify-content:space-between;gap:4px;height:150px;margin-block:22px}
.eq i{flex:1;max-width:9px;height:calc(var(--h)*1%);border-radius:5px;background:var(--pink);transform-origin:center;animation:eq var(--d) ease-in-out infinite alternate;animation-delay:var(--o)}
.eq i:nth-child(3n){background:var(--blue)}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.lines{display:grid;gap:10px}
.lines p{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;font-size:15px;line-height:1.4}
.lines b{font:700 10px/1.9 var(--util);letter-spacing:.14em;text-transform:uppercase;color:#93937F}
.score{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #312F23}
.score span{font:700 12px/1 var(--util);padding:8px 11px;border-radius:999px;background:#26261B;color:#C6C6B5}
.score span em{font-style:normal;color:var(--pink);margin-left:6px}
@media (max-width:860px){.billboard{grid-template-columns:1fr}}

/* ---------- rows ---------- */
#rows{padding-top:clamp(20px,3vw,36px)}
.row{padding-block:10px 6px}
.row-h{padding-inline:var(--gut);display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.row-h h2{font:600 clamp(21px,2.3vw,28px)/1.15 var(--display);letter-spacing:-.01em}
.row-h p{font:500 13px/1.3 var(--util);color:var(--text-3)}
.rail-wrap{position:relative}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);padding:26px var(--gut) 34px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
.arrow{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;z-index:5;border:1px solid var(--line-2);background:var(--panel);color:var(--text);opacity:0;transition:opacity .15s;display:grid;place-items:center;box-shadow:var(--lift)}
.arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow.prev{left:max(4px,calc(var(--gut) - 22px))}.arrow.next{right:max(4px,calc(var(--gut) - 22px))}
.rail-wrap:hover .arrow:not([disabled]){opacity:1}
.arrow[disabled]{pointer-events:none}
@media (hover:none){.arrow{display:none}}

/* ---------- posters ---------- */
.poster{position:relative;display:flex;flex-direction:column;width:var(--pw);aspect-ratio:2/3;padding:calc(var(--pw)*.075);border-radius:calc(var(--pw)*.07);background:var(--ground);color:var(--ink);text-align:left;text-decoration:none;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;isolation:isolate;box-shadow:var(--lift)}
.poster::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,245,.45),transparent 60%);z-index:-1}
.poster::after,.p-art::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.2;mix-blend-mode:multiply;pointer-events:none;z-index:1}
.poster .top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;min-height:20px}
.poster .fw-prod{font:700 calc(var(--pw)*.052)/1.2 var(--util);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.pill{flex:0 0 auto;font:700 calc(var(--pw)*.05)/1 var(--util);letter-spacing:.08em;text-transform:uppercase;padding:calc(var(--pw)*.026) calc(var(--pw)*.04);border-radius:999px;white-space:nowrap}
.pill.New{background:var(--ink);color:var(--on-ink)}
.pill.Early{border:1.5px solid var(--ink);color:var(--ink)}
.pill.Soon{border:1.5px dashed var(--ink);color:var(--ink)}
.poster .art{flex:1;min-height:0;display:grid;place-items:center;padding-block:calc(var(--pw)*.04)}
.poster .art svg{width:100%;height:100%;max-height:calc(var(--pw)*.62);overflow:visible}
.poster h3{font:600 calc(var(--pw)*.132)/1.03 var(--display);text-wrap:balance}
.peek{position:absolute;inset:auto 0 0 0;z-index:2;padding:calc(var(--pw)*.075);background:rgba(20,20,15,.94);color:var(--on-ink);display:flex;flex-direction:column;gap:calc(var(--pw)*.03);translate:0 101%;transition:translate .24s cubic-bezier(.2,.7,.2,1)}
.peek b{font:600 calc(var(--pw)*.1)/1.08 var(--display)}
.peek span{font:500 calc(var(--pw)*.07)/1.35 var(--body);color:#D6D6C6}
.peek i{font:700 calc(var(--pw)*.058)/1 var(--util);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--ground)}
@media (hover:hover){
  a.poster:hover,a.poster:focus-visible{transform:translateY(-8px) scale(1.06);box-shadow:0 30px 44px -22px rgba(20,20,15,.55);z-index:3}
  a.poster:hover .peek,a.poster:focus-visible .peek{translate:0 0}
}
a.poster:active{transform:scale(.98)}
.k{fill:var(--ink)}.w{fill:var(--paper)}
.ks{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ws{fill:none;stroke:var(--paper);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.wk{fill:var(--paper);stroke:var(--ink);stroke-width:5}
.jt{display:flex;align-items:flex-end}
.jt .num{font:600 calc(var(--pw)*1.05)/.78 var(--display);color:var(--stage);-webkit-text-stroke:3px var(--line-2);margin-right:calc(var(--pw)*-.1);margin-left:calc(var(--pw)*.04);position:relative;z-index:0;user-select:none;padding-bottom:calc(var(--pw)*.02)}
.jt .poster{z-index:1}
.empty{padding:70px var(--gut);text-align:center;color:var(--text-2)}
.empty h2{font:600 28px/1.2 var(--display);margin-bottom:8px;color:var(--text)}

/* ---------- footer CTA ---------- */
.foot{margin:24px var(--gut) 0;padding:clamp(26px,4vw,48px);border-radius:24px;background:var(--ink);color:var(--on-ink);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.foot h2{font:600 clamp(26px,3.6vw,44px)/1.05 var(--display);letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.foot p{font-size:17px;line-height:1.5;max-width:46ch;margin-top:10px;color:#C6C6B5}
.foot .btn{background:var(--on-ink);color:var(--ink)}
.foot .btn:hover{background:#fff}

/* ---------- live interview (AI Voice Interviews title page) ---------- */
.p-try{background:var(--ink);color:var(--on-ink);border-radius:24px;padding:clamp(28px,4vw,52px) clamp(16px,3vw,40px)}
.p-try .p-h2{text-align:center;margin-bottom:14px}

.legend{padding:22px var(--gut) 40px;display:flex;flex-wrap:wrap;gap:8px 22px;font:500 12px/1.4 var(--util);color:var(--text-3)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:9px;height:9px;border-radius:50%;display:block}

/* ---------- title page ---------- */
.sec{max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.p-hero{position:relative;padding-block:clamp(28px,5vw,72px) clamp(34px,5vw,64px);background:linear-gradient(180deg,transparent 70%,var(--stage)),radial-gradient(1000px 560px at 80% 35%,color-mix(in srgb,var(--ground) 55%,transparent),transparent 70%),radial-gradient(700px 380px at 0% 110%,color-mix(in srgb,var(--ground) 25%,transparent),transparent 70%)}
.p-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,80px);align-items:center}
.p-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:700 11px/1 var(--util);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.p-eyebrow i{width:10px;height:10px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 1px rgba(20,20,15,.15)}
.p-eyebrow .pill{font-size:10.5px;padding:5px 9px;letter-spacing:.1em}
.p-hero h1{font:600 clamp(48px,7.6vw,112px)/.95 var(--display);letter-spacing:-.015em;margin-block:20px;text-wrap:balance}
.p-hero h1:focus{outline:none}
.p-tag{font-size:clamp(19px,2.1vw,25px);line-height:1.4;color:var(--text-2);max-width:32ch;text-wrap:balance}
.p-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-block:22px 28px;font:500 13px/1.3 var(--util);color:var(--text-3)}
.p-meta span{display:inline-flex;align-items:center;gap:16px}
.p-meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--text-3);display:block}
.p-art{position:relative;justify-self:end;width:100%;max-width:400px;aspect-ratio:3/4;border-radius:24px;background:var(--ground);display:grid;place-items:center;padding:13%;overflow:hidden;isolation:isolate;box-shadow:0 50px 80px -46px rgba(20,20,15,.6),0 0 0 1px rgba(20,20,15,.05)}
.p-art::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 70% at 100% 0%,rgba(255,255,245,.5),transparent 60%);z-index:-1}
.p-art svg{width:100%;overflow:visible;animation:float 7s ease-in-out infinite}
.p-art .stamp{position:absolute;left:7%;bottom:6%;right:7%;display:flex;justify-content:space-between;font:700 11px/1 var(--util);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.7}
@keyframes float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
@media (max-width:820px){
  .p-hero-in{grid-template-columns:1fr}
  .p-art{order:-1;justify-self:start;max-width:none;aspect-ratio:16/10;padding:8% 22%}
}
.p-h2{font:600 clamp(24px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.01em;margin-bottom:20px}
.p-label{font:700 11px/1 var(--util);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.p-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr);gap:36px clamp(28px,5vw,72px);padding-block:clamp(28px,4vw,48px) 0}
.p-desc{font-size:clamp(20px,2vw,24px);line-height:1.5;max-width:44ch;text-wrap:pretty}
.gets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:30px}
.get{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px}
.get::before{content:"";display:block;width:28px;height:5px;border-radius:3px;background:var(--ground);margin-bottom:16px}
.get p{font-size:16px;line-height:1.45;color:var(--text)}
.proof{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:24px 28px;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--ground) 70%,var(--panel)),color-mix(in srgb,var(--ground) 18%,var(--panel)) 75%);border:1px solid color-mix(in srgb,var(--ground) 60%,var(--line))}
.proof strong{font:600 clamp(44px,6vw,76px)/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.proof p{font-size:17px;line-height:1.4;max-width:34ch}
.proof small{display:block;margin-top:6px;font:500 12px/1.3 var(--util);color:var(--text-2)}
.fw-about{display:grid;gap:24px;align-content:start;border-left:1px solid var(--line);padding-left:clamp(22px,3vw,40px)}
.fw-about p{font-size:16px;line-height:1.5;color:var(--text)}
.fw-about .vibes{display:flex;flex-wrap:wrap;gap:8px}
.fw-about .vibes span{font:700 12px/1 var(--util);padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--text-2)}
@media (max-width:820px){.p-body{grid-template-columns:1fr}.fw-about{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.p-sec{padding-block:clamp(40px,5vw,64px) 0}
.shot-stage{padding:clamp(14px,3vw,40px);border-radius:24px;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--ground) 65%,transparent),transparent 60%),color-mix(in srgb,var(--ground) 22%,var(--stage-2));display:grid;justify-items:center}
.shot{width:100%;border-radius:14px;overflow:hidden;border:1px solid rgba(20,20,15,.1);background:#fff;box-shadow:0 30px 60px -36px rgba(20,20,15,.55)}
.chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.chrome span{margin-left:12px;font:500 12px/1 var(--util);color:var(--text-3)}
.shot img{display:block;width:100%;height:auto;max-height:680px;object-fit:cover;object-position:top left}
.shot-cap{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font:500 13.5px/1.45 var(--util);color:var(--text-2)}
.shot-cap span{color:var(--text-3)}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.step{position:relative;padding:14px 14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text-3)}
.step b{display:block;font:700 11px/1 var(--util);letter-spacing:.12em;margin-bottom:22px;font-variant-numeric:tabular-nums}
.step span{font:600 18px/1.1 var(--display);color:var(--text-2)}
.step.on{background:var(--ground);border-color:color-mix(in srgb,var(--ground) 70%,var(--ink));color:var(--ink)}
.step.on span{color:var(--ink)}
.step.across{border-color:color-mix(in srgb,var(--ground) 80%,var(--line));background:color-mix(in srgb,var(--ground) 28%,var(--panel))}
.step.across span{color:var(--text)}
.fit-note{margin-top:14px;font-size:16px;color:var(--text-2)}
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:12px;margin-top:14px}
.ba-card{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:start;padding:22px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.ba-card h3{grid-column:1/-1;font:600 20px/1.1 var(--display)}
.ba-card .p-label{margin-bottom:8px}
.ba-card .fw-was{color:var(--text-3);font-size:15px;line-height:1.45}
.ba-card .now{color:var(--text);font-size:15px;line-height:1.45}
.ba-card .now-l{color:var(--text);display:inline-flex;align-items:center;gap:8px}
.ba-card .now-l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 1px rgba(20,20,15,.2)}
.ba-card svg{width:20px;height:20px;margin-top:22px;stroke:var(--text-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.src{margin-top:12px;font:500 12px/1.4 var(--util);color:var(--text-3)}
@media (max-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.ba-card{grid-template-columns:1fr}.ba-card svg{display:none}}
.next{--pw:118px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,32px);align-items:center;padding:18px;border-radius:20px;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.next:hover{border-color:var(--line-2);box-shadow:var(--lift)}
.next .nx-t{font:600 clamp(26px,3vw,38px)/1.05 var(--display);margin-block:10px 8px;text-wrap:balance}
.next p.t{color:var(--text-2);font-size:16px;max-width:52ch}
.next .go{display:inline-flex;align-items:center;gap:10px;font:700 14px/1 var(--util);padding:13px 20px;border-radius:8px;background:var(--ink);color:var(--on-ink);white-space:nowrap}
.next .go svg{width:14px;height:14px}
@media (max-width:640px){.next{grid-template-columns:auto minmax(0,1fr)}.next .go{grid-column:1/-1;justify-content:center}}
.more{display:grid;grid-template-columns:repeat(auto-fill,var(--pw));gap:18px 14px;justify-content:start;padding-block:12px 0}
.page .foot{margin-top:clamp(40px,5vw,64px)}
.page{padding-bottom:40px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:80;background:var(--ink);color:var(--on-ink);font:700 14px/1.3 var(--util);padding:13px 18px;border-radius:999px;max-width:calc(100% - 32px);overflow-wrap:anywhere}

::view-transition-group(feature){animation-duration:.46s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
::view-transition-old(feature),::view-transition-new(feature){height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
@media (max-width:640px){
  :root{--pw:144px}
  .rail{gap:10px}
  .lines p{grid-template-columns:78px minmax(0,1fr)}
  .more{gap:14px 10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}