/* =============================================================================
   CTFY · Invest / Own a Chamber (/investor-relations/, PRD pages/15) · page-only layout
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Only page variants live here:
   the hero headline fit, the product reveal on the "By the numbers" stage, the one-chamber → three-revenue-lines
   flow, the M19 fit (outputs + disclaimer + "Book a day" inside one desktop viewport; 4:3 chart on phones),
   the partner label slot and the working-model inset. The BG twin links this file too.
   Motion is transform/opacity only (plus three one-off stroke draws); everything is in its finished state
   without JS, with the G4 toggle off (html[data-motion="off"]) and with prefers-reduced-motion.
   ============================================================================= */

#numbers,#model,#roi,#partner,#steps{scroll-margin-top:24px}

/* ---------- 1 · Hero (H7, A01 film) ---------- */
/* PRD 15 §4.1: the only inner page with an XL headline. Three sentences, one per line where the panel allows. */
@media (min-width:761px){
  .ir-hero .hero__panel{max-width:740px}
  .ir-hero .hero__title{font-size:calc(clamp(2.75rem,1.4rem + 3vw,4.3rem) * var(--k-display));line-height:1.02}
}

/* ---------- 2 · By the numbers: the product reveal ---------- */
.ir-numbers{overflow-x:clip}
.ir-numbers__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:center;margin-bottom:clamp(40px,5vw,80px)}
.ir-numbers__lead{display:grid;gap:clamp(36px,4.5vw,64px);align-content:center}
.ir-numbers__head{margin-bottom:0}
/* the price sits beside the machine; the other three figures run as one strip below */
.ir-spec-lead{grid-template-columns:minmax(0,1fr)}
.ir-spec-lead .m-spec__num{font-size:clamp(3.25rem,1.4rem + 4.4vw,6.25rem)}
.ir-spec-lead .m-spec__label{max-width:34ch}
.ir-spec{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.ir-spec .m-spec__item .m-spec__num{font-size:calc(var(--t-num-m) * 1.25)}
.ir-product{position:relative;margin:0}
.ir-product>.bloom{inset:6% 4% -6%;background:radial-gradient(48% 42% at 50% 62%,rgba(62,85,245,.30),rgba(62,85,245,.08) 55%,transparent 75%)}
/* the A07 set is #0A0B10, a hair from --bg-1: a soft radial mask is enough to lose the photo's edges */
.ir-product__still img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 76%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 76%,transparent);mask-composite:intersect}
.ir-product__chips{position:absolute;inset:0;pointer-events:none}
.ir-product__chips>li{position:absolute;left:var(--x);top:var(--y);pointer-events:auto}
/* reveal: the product rises 32px over 900ms, then the chips follow 70ms apart (PRD 15 §4.1 motion notes) */
.js .ir-product.is-pending{opacity:0;transform:translateY(32px)}
.js .ir-product.is-in{transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
.js .ir-product.is-pending .ir-product__chips>li{opacity:0;transform:translateY(8px)}
.ir-product.is-in .ir-product__chips>li{transition:opacity 400ms var(--ease-out) 650ms,transform 400ms var(--ease-out) 650ms}
.ir-product.is-in .ir-product__chips>li+li{transition-delay:720ms}
/* "How we estimate this" points down to the calculator */
.ir-down .icon{rotate:90deg}
@media (max-width:1023px){
  .ir-numbers__top{grid-template-columns:minmax(0,1fr);gap:8px}
  .ir-numbers__lead{display:contents}
  .ir-product{width:110%;margin-inline:-5%}
  .ir-spec-lead{order:3;margin-top:8px}
}
@media (max-width:599px){
  .ir-product__chips{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 5% 0}
  .ir-product__chips>li{position:static}
  .ir-product__chips .chip{white-space:normal}
}

/* ---------- 3 · The model: one chamber, three revenue lines ---------- */
.ir-model .blueprint{opacity:.4}
.ir-model .sec__head{margin-bottom:clamp(28px,3.5vw,48px)}
.ir-flow{position:relative;display:grid;justify-items:center}
.ir-flow__product{position:relative;isolation:isolate;width:clamp(92px,8vw,124px);aspect-ratio:640/794}
.ir-flow__product .bloom{inset:-45%}
.ir-flow__product img{display:block;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.ir-flow__lines{display:block;width:100%;height:clamp(64px,7vw,100px);overflow:visible;fill:none;stroke:var(--theta-400);stroke-width:1.25;stroke-linecap:round;opacity:.8}
.ir-flow__lines path{stroke-dasharray:1 1;stroke-dashoffset:0}
.js .ir-flow.is-pending .ir-flow__lines path{stroke-dashoffset:1}
.ir-flow.is-in .ir-flow__lines path{transition:stroke-dashoffset 900ms var(--ease-out) calc(150ms + var(--i,0) * 120ms)}
/* the three cards sit exactly under the three line ends (pillar grid: 3 equal columns) */
.ir-pillars{position:relative}
.ir-pillars .m-pillar{border-top-color:rgba(107,125,255,.38)}
@media (max-width:1023px){
  .ir-flow__lines{display:none}
  /* phones/tablets: one thread from the chamber runs down behind the stacked cards, visible in the gaps */
  .ir-flow::after{content:"";display:block;width:1px;height:36px;background:var(--theta-400);opacity:.8}
  .ir-pillars{grid-template-columns:minmax(0,1fr);gap:28px;max-width:560px;margin-inline:auto}
  .ir-pillars::before{content:"";position:absolute;left:50%;top:-2px;bottom:24px;width:1px;background:linear-gradient(180deg,var(--theta-400),rgba(107,125,255,.2));pointer-events:none}
  .ir-pillars .m-pillar{position:relative}
}

/* ---------- 4 · ROI instrument (M19) ---------- */
/* Desktop: outputs, disclaimer and "Book a day" fit one viewport under the dock (PRD 15 §9.2). The chart is drawn
   at its rendered pixel size by roi.js (data-roi-fit), so its height is set here and the axis text stays 12px. */
.ir-roi .sec__head{margin-bottom:clamp(36px,4vw,56px)}
.ir-roi .m-roi__outputs{gap:18px;padding:clamp(22px,2.4vw,32px) clamp(24px,2.8vw,36px)}
.ir-roi .m-roi__year{gap:6px}
.ir-roi .m-roi__year output{font-size:clamp(3rem,1.6rem + 3.4vw,5.25rem);line-height:1}
.ir-roi .m-roi__row{padding-top:16px}
.ir-roi .m-roi__chart{display:block;height:clamp(140px,100vh - 680px,200px)}
.ir-roi .m-roi__disclaimer{padding-top:14px;font-size:.84375rem;line-height:1.5}
.ir-roi .m-roi__controls{gap:18px}
/* the dial and the split bar ease with the chart (roi.js), so no CSS transition doubles them */
.ir-roi .m-roi__ctas .btn{flex:1 1 auto}
@media (max-width:1023px){
  .ir-roi .m-roi__chart{height:auto;aspect-ratio:4/3}
  /* the sticky mini bar (year + payback) rides along with the sliders; the full outputs panel then slides over it */
  .ir-roi .m-roi__outputs{position:relative;z-index:7;padding:24px 22px;
    background:linear-gradient(var(--solid-fill),var(--solid-fill)) padding-box,var(--bg-2) padding-box}  /* same look, opaque */
}
@media (max-width:599px){
  .ir-roi .m-roi__controls{padding:20px 16px}
  .ir-roi .m-roi__presets{grid-template-columns:auto auto auto}
  .ir-roi .m-roi__presets button{padding:0 8px;font-size:.8125rem}
  /* payback and monthly revenue share a row, so the year figure and the disclaimer fit one phone screen */
  .ir-roi .m-roi__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .ir-roi .m-roi__payback{gap:10px}
  .ir-roi .m-roi__dial{width:44px;height:44px}
  .ir-roi .m-roi__payback output,.ir-roi .m-roi__month output{font-size:1.625rem}
  .ir-roi .m-roi__legend{display:grid;gap:2px;font-size:.75rem}
  .ir-roi .m-roi__legend span{white-space:nowrap}
  .ir-roi .m-roi__ctas{flex-direction:column}
  .ir-roi .m-roi__ctas .btn{width:100%}
}
@media (max-width:359px){.ir-roi .m-roi__row{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5 · Reveal (M10, product variant) ---------- */
.ir-film{background:var(--bg-1)}
.ir-film .m-film__copy .chip-list{gap:8px}
/* spec chips keep their written case: uppercase would turn "µA" into "ΜA" and "Hz" into "HZ" */
.ir-specs .chip{text-transform:none;letter-spacing:.01em;font-size:.8125rem}
.ir-film .m-film__spill{inset:-12% -20%}

/* ---------- 6 · Ways to partner (M11 --partner): the label slot holds words, not a price ---------- */
.ir-partner .m-tier__price{white-space:normal;font-size:calc(var(--t-num-m) * .82);line-height:1.05}
.ir-partner .m-tier__price small{margin-left:.3em}
.ir-partner .m-tier__cta .link{justify-self:center}

/* ---------- 7 · How partnering works (M27) ---------- */
.ir-steps .m-route__end .m-frame img{object-position:var(--pos,50% 50%)}

/* ---------- 8 · The working model (M14): the Sofia showroom, a lounge frame overlapping the room ---------- */
.ir-visit .m-split__media{margin-right:clamp(0px,3vw,40px)}
.ir-visit__inset{position:absolute;z-index:2;right:clamp(-40px,-3vw,0px);bottom:-9%;width:30%;aspect-ratio:3/4;border-radius:var(--r-l);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px var(--line-2)}
.ir-visit__address{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;color:var(--fg-1);line-height:1.6}
.ir-visit__address .icon{margin-top:3px;color:var(--theta-300)}
@media (max-width:1023px){
  .ir-visit .m-split__media{margin-right:0}
  .ir-visit__inset{display:none}
}

/* ---------- Calm states: reduced motion, motion toggle off ---------- */
html[data-motion="off"] .ir-product,html[data-motion="off"] .ir-product__chips>li{opacity:1!important;transform:none!important}
html[data-motion="off"] .ir-flow__lines path{stroke-dashoffset:0!important}
@media (prefers-reduced-motion:reduce){
  .ir-product,.ir-product__chips>li{opacity:1!important;transform:none!important}
  .ir-flow__lines path{stroke-dashoffset:0!important}
}