/* Price Index page. Owned by the price-index agent. Round 3: lilac aging stage (one large frame, a thumbnail filmstrip,
   the curve inside the text column), mint accordion, butter count, blush signup. */
:root{--body:rgba(21,20,18,.82)}
.lede,.sub,.what,.count-cap{color:var(--body)}

/* ---------- the pinned stage ---------- */
.stage{position:relative;height:500vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.slot{position:absolute;left:0;top:72px;bottom:0;width:min(560px,40vw);overflow:hidden}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(64px,9vh,100px);will-change:transform}
.hero-copy>*{will-change:opacity}
.hero-copy h1{font-size:var(--h-hero);line-height:.95;letter-spacing:-.05em;font-weight:500;max-width:9ch}
.hero-copy .sub{font-size:clamp(17px,1.3vw,20px);line-height:1.45;margin:22px 0 30px;max-width:32ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding-bottom:4px}
.link.as-btn{appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);color:var(--ink)}
.panel{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:8px;padding-bottom:20px;will-change:transform}
.panel h2{font-size:var(--h-sec);line-height:.98;letter-spacing:-.05em;max-width:9ch}
.panel .lede{font-size:17px;line-height:1.5;margin:14px 0 clamp(16px,2.6vh,26px);max-width:32ch}
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:0 clamp(20px,2.6vw,40px);border-top:1px solid rgba(21,20,18,.16);padding-top:14px;margin:0}
.readout dt{font-size:14px;color:var(--body);margin-bottom:6px}
.readout dd{margin:0;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.ro-note{margin:12px 0 0}
.ro-note .illus{background:rgba(255,255,255,.6);color:var(--ink);border-color:rgba(21,20,18,.18)}
.chart-wrap{margin:clamp(14px,2.4vh,24px) 0 0;background:#fff;box-shadow:0 1px 0 rgba(21,20,18,.06);border-radius:20px;padding:14px 16px 10px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:15px var(--sans);fill:var(--body)}
.chart .tk{font-variant-numeric:tabular-nums}
.chart .ticks line{stroke:rgba(21,20,18,.3);stroke-width:1}
.chart .hl{stroke:rgba(21,20,18,.2);stroke-width:1;fill:none}
.chart .newp{stroke:rgba(21,20,18,.35);stroke-dasharray:3 4}
.chart .ghost{stroke:rgba(106,95,176,.35);stroke-width:1.5;fill:none;stroke-dasharray:2 5}
.chart .ink{stroke:#6a5fb0;stroke-width:2.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:rgba(106,95,176,.12)}
.chart .mk-line{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.chart .mk{fill:#fff;stroke:var(--ink);stroke-width:2}
.chart .ms circle{fill:#fff;stroke:rgba(21,20,18,.4);stroke-width:1.5;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.chart .ms.on circle{fill:#6a5fb0;stroke:#6a5fb0}
.chart .ms text{fill:rgba(21,20,18,.55);transition:fill .4s var(--ease)}
.chart .ms.on text{fill:var(--ink)}
.cap{font-size:14px;color:var(--body);margin:4px 0 0}

/* the large frame of the robot, and the filmstrip of all eleven frames under it */
.viz{position:absolute;left:calc(min(560px,40vw) + 32px);right:max(16px,var(--pad));top:84px;bottom:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.big{position:relative;height:calc(100% - 96px);aspect-ratio:346/528;max-width:100%;border-radius:24px;overflow:hidden;background:#f7f7f5}
.big canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0}
.big canvas:first-child{opacity:1}
.thumbs{position:relative;display:flex;gap:8px;height:72px;flex:none}
.thumbs canvas{display:block;height:100%;width:auto;aspect-ratio:346/528;border-radius:8px;max-width:none}
.t-mark{position:absolute;top:-5px;bottom:-5px;left:-5px;border:2px solid var(--ink);border-radius:12px;pointer-events:none}

/* ---------- kinds: a pinned accordion, one row open at a time ---------- */
.kinds{position:relative}
.k-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(24px,4vw,64px);padding-right:max(16px,var(--pad))}
.k-steps{margin-top:-100vh;margin-top:-100svh}
.k-step{height:38vh}.k-step.last{height:100vh}
.k-copy h2{font-size:var(--h-sec);line-height:.98;letter-spacing:-.05em;max-width:12ch}
.k-copy .lede{font-size:clamp(17px,1.3vw,20px);margin:20px 0 0;line-height:1.5}
.acc{list-style:none;margin:0;padding:0;border-top:1px solid rgba(21,20,18,.18)}
.acc-row{border-bottom:1px solid rgba(21,20,18,.18)}
.acc-head{display:flex;align-items:baseline;gap:18px;padding:13px 0}
.acc-n{font-size:15px;font-variant-numeric:tabular-nums;color:var(--body);width:26px;flex:none}
.acc-name{font-size:var(--h-sub);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:rgba(21,20,18,.42);transition:color .4s var(--ease)}
.acc-row.on .acc-name{color:var(--ink)}
.acc-body{height:0;overflow:hidden;transition:height .28s cubic-bezier(.4,0,.2,1)}
.acc-pic,.acc-in p{opacity:0;transition:opacity .16s ease}
.acc-in{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:2px 0 16px 44px}
.acc-pic{margin:0;flex:none;width:min(520px,100%);aspect-ratio:16/8;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.5)}
.acc-pic img{width:100%;height:100%;object-fit:cover;max-width:none}
.acc-in p{margin:0;font-size:17px;line-height:1.5;color:var(--body);max-width:40ch}

/* ---------- sources: the count gets the room ---------- */
.sec{padding-top:clamp(110px,16vh,190px);padding-bottom:clamp(60px,10vh,120px)}
.sec h2{font-size:var(--h-sec);line-height:.98;letter-spacing:-.05em;max-width:16ch}
.sec .lede{font-size:clamp(17px,1.3vw,20px);line-height:1.5;max-width:40ch;margin:20px 0 0}
.src{padding-top:clamp(64px,9vh,110px)}
.count{font-size:clamp(110px,19vw,300px);line-height:.84;letter-spacing:-.065em;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:#9a7a1f;margin-top:clamp(28px,5vh,56px)}
.count-cap{font-size:clamp(19px,1.6vw,24px);margin:clamp(34px,4.4vw,70px) 0 0;max-width:34ch;line-height:1.4}
.sources{list-style:none;margin:clamp(48px,8vh,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(21,20,18,.16)}
.sources li{display:flex;flex-direction:column;gap:6px;padding:20px clamp(16px,2vw,32px) 0 0}
.sources li+li{padding-left:clamp(16px,2vw,32px);border-left:1px solid rgba(21,20,18,.16)}
.src-n{font-size:var(--h-sub);letter-spacing:-.03em;font-weight:500;line-height:1.1}
.sources .what{font-size:17px;line-height:1.5}

/* ---------- report: the heading reads in word by word ---------- */
.words .w{opacity:var(--o,.15)}
.report{scroll-margin-top:96px;padding-bottom:clamp(110px,16vh,170px)}
.rep-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.sign{position:relative;background:rgba(255,255,255,.7);border-radius:20px;padding:clamp(22px,2.4vw,32px)}
.sign .field{margin-bottom:4px}
.sign .row{display:flex;gap:10px}
.sign .row input{flex:1;min-width:0}
.sign .row .btn{flex:none}
.sign .err{font-size:14px;color:#9a3b2e;margin:8px 0 0;min-height:1em}
.sign .thanks{display:none}
.sign.sent form{display:none}
.sign.sent .thanks{display:block;animation:rise .6s var(--ease) both}
.thanks h3{font-size:var(--h-sub);letter-spacing:-.04em;margin:0 0 10px}
.thanks p{margin:0;color:var(--body);font-size:17px;line-height:1.5;max-width:38ch}
.thanks svg{width:44px;height:44px;margin-bottom:16px}
.thanks svg circle{stroke:var(--line);fill:none}
.thanks svg path{stroke:var(--ink);stroke-width:2;fill:none;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .7s .15s var(--ease) forwards}
.alt{margin-top:18px;font-size:16px;color:var(--body)}
.alt .link{font-size:16px;color:var(--ink)}

/* ---------- 1024 ---------- */
@media(max-width:1180px) and (min-width:761px){
 .slot{width:min(460px,43vw)}
 .viz{left:calc(min(460px,43vw) + 20px)}
 .panel h2{font-size:clamp(34px,4.2vw,50px)}
 .panel .lede{font-size:16px}
 .readout dd{font-size:clamp(24px,3vw,34px)}
 .thumbs{height:56px;gap:6px}
 .big{height:calc(100% - 78px)}
}
/* ---------- phone ---------- */
@media(max-width:760px){
 .slot{top:auto;bottom:0;height:48%;width:100%}
 .hero-copy{bottom:max(24px,env(safe-area-inset-bottom,0px))}
 .hero-copy h1{font-size:clamp(38px,10.6vw,48px);max-width:none}
 .hero-copy .sub{font-size:16px;margin:12px 0 16px}
 .panel{justify-content:flex-end;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
 .panel h2{font-size:30px;max-width:none}
 .panel .lede,.ro-note{display:none}
 .readout{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;padding-top:10px}
 .readout dt{font-size:13px}
 .readout dd{font-size:26px}
 .chart-wrap{margin-top:10px;padding:8px 10px 6px;border-radius:14px}
 .chart text{font-size:20px}
 #x0,#newp-t{display:none}
 .cap{font-size:13px;margin-top:2px}
 .viz{left:0;right:0;top:64px;bottom:auto;height:calc(52% - 72px);padding:0}
 .big{height:100%}
 .thumbs{display:none}
 .k-pin{grid-template-columns:minmax(0,1fr);align-content:center;gap:20px;padding-top:72px}
 .k-copy .lede{display:none}
 .acc{margin:0 max(16px,var(--pad))}
 .acc-head{padding:10px 0;gap:12px}
 .acc-name{font-size:21px}
 .acc-in{gap:8px;padding:0 0 12px 38px}
 .acc-pic{width:100%}
 .acc-in p{font-size:16px;max-width:none}
 .src{min-height:0}
 .count{font-size:clamp(84px,25vw,120px)}
 .sources{grid-template-columns:minmax(0,1fr)}
 .sources li,.sources li+li{padding:18px 0;border-left:0;border-bottom:1px solid rgba(21,20,18,.16)}
 .sources .what,.thanks p{font-size:16px}
 .rep-grid{grid-template-columns:minmax(0,1fr)}
 .sign .row{flex-direction:column}
 .sign .row .btn{width:100%}
}

/* ---------- reduced motion: nothing pinned, everything in its final state ---------- */
.stage.rm{height:auto!important}
.stage.rm .pin{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column}
.stage.rm .slot{position:static;width:auto;height:auto;overflow:visible}
.stage.rm .hero-copy,.stage.rm .panel{position:static;padding-top:24px}
.stage.rm .hero-copy{padding-top:120px}
.stage.rm .panel{max-width:620px}
.stage.rm .viz{position:static;height:auto;padding:24px max(16px,var(--pad)) 40px}
.stage.rm .big{height:min(70vh,640px)}
.kinds.rm .k-pin{position:relative;height:auto;padding-top:120px;padding-bottom:40px}
.kinds.rm .k-steps{display:none}
.kinds.rm .acc-body{height:auto!important}