/* ==========================================================================
   MAGNETIQ V2 : inner.css
   The three inner pages: process.html, studio.html, start.html.

   Loaded AFTER core.css. Nothing declared in core is redefined here, this file
   only adds what is genuinely page specific. Core supplies the tokens, the
   surfaces, the type scale, the header, drawer, footer, buttons, cursor,
   loader, marquee shell, reveal base states, form baseline and utilities.

   CONTENTS
     00  Shared inner primitives (stagger kids, strips, CTA band)
     01  PROCESS : hero
     02  PROCESS : the pinned five step narrative
     03  PROCESS : mock browser
     04  PROCESS : what we need from you
     05  PROCESS : delivery timeline
     06  PROCESS : FAQ
     07  STUDIO  : hero
     08  STUDIO  : story
     09  STUDIO  : pinned statement
     10  STUDIO  : principles
     11  STUDIO  : the stack
     12  STUDIO  : numbers
     13  START   : shell and head
     14  START   : the brief card
     15  START   : fields, options, checks
     16  START   : navigation and the finished state
     17  START   : side panel and trust strip
     18  Responsive
     19  Reduced motion
   ========================================================================== */


/* ==========================================================================
   00  SHARED INNER PRIMITIVES
   ========================================================================== */

/* motion.js tags the direct children of a [data-reveal-stagger] host with
   .rv-kid and staggers .is-in across them. Core does not style that class, so
   the hidden start state lives here. */
.rv-kid{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--e-out), transform .95s var(--e-out);
  will-change:opacity,transform;
}
.rv-kid.is-in{ opacity:1; transform:none; }

/* Heroes clear the fixed header on top of the normal section rhythm. */
.pc-hero,.st-hero{
  padding-top:calc(var(--sec) * .78 + var(--hdr-h));
}
.sb{ padding-top:calc(var(--sec) * .52 + var(--hdr-h)); }

/* A flush full bleed strip, used for the marquee bands. */
.in-strip{
  padding-block:clamp(18px,2.4vh,30px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.in-strip .marquee-item{
  font-size:clamp(1.2rem,3.4vw,2.6rem);
  opacity:.9;
}
.in-strip .marquee-item.is-mono{ font-size:11px; }

/* Outlined marquee words for the negatives (no WordPress, no page builders). */
.marquee-item.is-ghost{ color:var(--fg-dim); }
@supports (-webkit-text-stroke:1px currentColor){
  .marquee-item.is-ghost{
    color:transparent;
    -webkit-text-stroke:1px var(--fg-dim);
  }
}

/* Closing call to action band, shared by process and studio. */
.in-cta{ text-align:center; }
.in-cta-in{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,2.4vh,26px);
  max-width:900px;
  margin-inline:auto;
}
.in-cta-in h2{ max-width:16ch; }
.in-cta-in .lede{ text-align:center; }
.in-cta-in .cluster{ justify-content:center; margin-top:8px; }


/* ==========================================================================
   01  PROCESS : HERO
   ========================================================================== */

.pc-h1{ margin-top:clamp(14px,2vh,26px); max-width:15ch; }

.pc-hero-grid{
  display:grid;
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(30px,5vh,56px);
  align-items:start;
}
@media (min-width:900px){
  .pc-hero-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}

.pc-hero-side{ display:flex; flex-direction:column; gap:clamp(20px,3vh,30px); }

.pc-facts{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.pc-fact{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding-block:13px;
  border-bottom:1px solid var(--line);
}
.pc-fact > span:first-child{ flex:0 0 auto; width:88px; }
.pc-fact > span:last-child{ color:var(--fg); font-size:15px; line-height:1.35; }

.pc-cue{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(34px,6vh,72px);
}
.pc-cue i{
  display:block;
  width:clamp(60px,10vw,140px);
  height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.pc-cue i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--iris);
  background-size:220% 100%;
  transform:translateX(-100%);
  animation:pcCue 2.8s var(--e-io) infinite;
}
@keyframes pcCue{
  0%   { transform:translateX(-100%); }
  55%  { transform:translateX(0); }
  100% { transform:translateX(100%); }
}


/* ==========================================================================
   02  PROCESS : PINNED NARRATIVE
   motion.js grows .pc-pin and holds .pin-inner in place, writing --p from 0 to
   1 across the 400vh of scroll. Everything below reads that one variable.
   ========================================================================== */

.pc-story{ overflow:hidden; }

.pc-pin{ position:relative; }

.pc-pin .pin-inner{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:calc(var(--hdr-h) + 18px) clamp(28px,5vh,54px);
}

.pc-pin-in{
  display:grid;
  gap:clamp(26px,4vw,72px);
  width:100%;
  align-items:center;
}
@media (min-width:1000px){
  .pc-pin-in{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); }
}

.pc-left{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2.2vh,26px);
}

/* ---- the giant crossfading numeral ---- */
.pc-numwrap{
  display:grid;
  line-height:.72;
  pointer-events:none;
}
.pc-num{
  grid-area:1 / 1;
  font-family:var(--serif);
  font-style:normal;
  font-size:clamp(5.5rem,11vw,11rem);
  line-height:.72;
  letter-spacing:-.03em;
  color:var(--fg);
  opacity:0;
  transform:translateY(.14em) scale(.94);
  transition:opacity .55s var(--e-out), transform .8s var(--e-out);
  background-image:var(--iris);
  background-size:260% 100%;
  background-position:6% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:currentColor;
  text-shadow:none;
  padding-bottom:.06em;
}
.pc-num.is-on{
  opacity:1;
  transform:none;
  -webkit-text-fill-color:transparent;
}

/* ---- the crossfading copy ---- */
.pc-steps{ display:grid; }
.pc-step{
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(22px);
  pointer-events:none;
  transition:opacity .5s var(--e-out), transform .7s var(--e-out);
  max-width:52ch;
}
.pc-step.is-on{ opacity:1; transform:none; pointer-events:auto; }

.pc-step-tag{
  color:var(--fg-dim);
  margin-bottom:12px;
  text-transform:uppercase;
}
.pc-step-h{
  font-size:clamp(1.6rem,3.4vw,3.1rem);
  line-height:1;
  margin-bottom:clamp(14px,2vh,22px);
}
.pc-step p{ font-size:clamp(14px,1vw,16px); max-width:50ch; }

/* ---- progress rail ---- */
.pc-rail{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.pc-rail-line{
  height:2px;
  width:100%;
  background:var(--line);
  overflow:hidden;
}
.pc-rail-line > i{
  display:block;
  height:100%;
  width:100%;
  background:var(--iris);
  background-size:220% 100%;
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
}
.pc-rail-keys{
  display:flex;
  justify-content:space-between;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
}
.pc-rail-keys li{
  opacity:clamp(.26, calc((var(--p,0) * 5 - var(--i,0)) * 3), 1);
  transition:opacity .2s linear;
}
.pc-rail-keys li:nth-child(1){ --i:0; }
.pc-rail-keys li:nth-child(2){ --i:1; }
.pc-rail-keys li:nth-child(3){ --i:2; }
.pc-rail-keys li:nth-child(4){ --i:3; }
.pc-rail-keys li:nth-child(5){ --i:4; }

.pc-right{ display:flex; flex-direction:column; gap:14px; }


/* ==========================================================================
   03  PROCESS : MOCK BROWSER
   One panel that evolves across five stages: .is-s1 wireframe, .is-s2 grey
   layout, .is-s3 colour, .is-s4 motion, .is-s5 live.
   ========================================================================== */

.pc-mock{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:color-mix(in srgb, var(--fg) 3%, transparent);
  overflow:hidden;
  transition:border-color .7s var(--e-out), background-color .7s var(--e-out),
             box-shadow .7s var(--e-out), transform .7s var(--e-out);
}
.pc-mock.is-s5{
  border-color:color-mix(in srgb, var(--volt-2) 55%, transparent);
  box-shadow:0 26px 70px rgba(75,43,255,.22);
  transform:translateY(-4px);
}

.pc-mock-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
}
.pc-mock-dots{ display:flex; gap:5px; flex:none; }
.pc-mock-dots i{
  width:7px; height:7px;
  border-radius:50%;
  background:color-mix(in srgb, var(--fg) 20%, transparent);
  transition:background-color .6s var(--e-out);
}
.is-s5 .pc-mock-dots i:nth-child(1){ background:var(--flare); }
.is-s5 .pc-mock-dots i:nth-child(2){ background:var(--acid); }
.is-s5 .pc-mock-dots i:nth-child(3){ background:var(--volt-2); }

.pc-mock-url{
  display:grid;
  align-items:center;
  justify-items:start;
  flex:1 1 auto;
  min-width:0;
  height:24px;
  padding-inline:12px;
  border-radius:999px;
  background:var(--faint);
  border:1px solid var(--line);
  overflow:hidden;
}
.pc-url{
  grid-area:1 / 1;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.13em;
  color:var(--fg-dim);
  white-space:nowrap;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .4s var(--e-out), transform .5s var(--e-out), color .5s var(--e-out);
  font-weight:400;
}
.pc-url.is-on{ opacity:1; transform:none; }
.is-s5 .pc-url.is-on{ color:var(--fg); }

.pc-mock-live{
  flex:none;
  display:inline-flex;
  opacity:0;
  transition:opacity .5s var(--e-out);
}
.pc-mock-live .dot{ background:var(--acid); }
.is-s5 .pc-mock-live{ opacity:1; }

.pc-mock-body{
  display:grid;
  gap:clamp(8px,1.1vw,13px);
  padding:clamp(12px,1.6vw,20px);
}

.pc-mock-nav{ display:flex; gap:8px; }
.pc-mock-nav i{ width:32px; height:6px; border-radius:3px; }
.pc-mock-nav i:first-child{ width:16px; }

.pc-mock-hero{
  position:relative;
  height:clamp(74px,11vw,124px);
  border-radius:9px;
  overflow:hidden;
}
.pc-mock-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
  transform:translateX(-120%);
  opacity:0;
}

.pc-mock-lines{ display:grid; gap:7px; }
.pc-mock-lines i{ height:6px; border-radius:3px; }
.pc-mock-lines i:nth-child(2){ width:88%; }
.pc-mock-lines i:nth-child(3){ width:57%; }

.pc-mock-cta{ width:104px; height:24px; border-radius:999px; }

.pc-mock-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.pc-mock-grid i{ height:clamp(34px,4.4vw,54px); border-radius:7px; }

/* every painted block shares one transition so the stages crossfade together */
.pc-mock-nav i,
.pc-mock-hero,
.pc-mock-lines i,
.pc-mock-cta,
.pc-mock-grid i{
  transition:background-color .7s var(--e-out), border-color .7s var(--e-out),
             background-image .7s var(--e-out), opacity .6s var(--e-out);
}

/* stage 1: wireframe, nothing but structure */
.pc-mock.is-s1 .pc-mock-nav i,
.pc-mock.is-s1 .pc-mock-hero,
.pc-mock.is-s1 .pc-mock-lines i,
.pc-mock.is-s1 .pc-mock-cta,
.pc-mock.is-s1 .pc-mock-grid i{
  background:transparent;
  border:1px dashed color-mix(in srgb, var(--fg) 30%, transparent);
}

/* stage 2: grey layout, structure resolved */
.pc-mock.is-s2 .pc-mock-nav i,
.pc-mock.is-s2 .pc-mock-lines i,
.pc-mock.is-s2 .pc-mock-grid i,
.pc-mock.is-s2 .pc-mock-cta{
  background:color-mix(in srgb, var(--fg) 15%, transparent);
}
.pc-mock.is-s2 .pc-mock-hero{ background:color-mix(in srgb, var(--fg) 22%, transparent); }

/* stages 3 to 5: real colour */
.pc-mock.is-s3 .pc-mock-nav i,
.pc-mock.is-s4 .pc-mock-nav i,
.pc-mock.is-s5 .pc-mock-nav i,
.pc-mock.is-s3 .pc-mock-lines i,
.pc-mock.is-s4 .pc-mock-lines i,
.pc-mock.is-s5 .pc-mock-lines i{
  background:color-mix(in srgb, var(--fg) 26%, transparent);
}
.pc-mock.is-s3 .pc-mock-hero,
.pc-mock.is-s4 .pc-mock-hero,
.pc-mock.is-s5 .pc-mock-hero{
  background-image:var(--iris);
  background-size:240% 100%;
  background-position:8% 50%;
}
.pc-mock.is-s3 .pc-mock-cta,
.pc-mock.is-s4 .pc-mock-cta,
.pc-mock.is-s5 .pc-mock-cta{ background:var(--fg); }
.pc-mock.is-s3 .pc-mock-grid i{ background:color-mix(in srgb, var(--fg) 18%, transparent); }

.pc-mock.is-s4 .pc-mock-grid i:nth-child(1),
.pc-mock.is-s5 .pc-mock-grid i:nth-child(1){ background:var(--volt); }
.pc-mock.is-s4 .pc-mock-grid i:nth-child(2),
.pc-mock.is-s5 .pc-mock-grid i:nth-child(2){ background:var(--flare); }
.pc-mock.is-s4 .pc-mock-grid i:nth-child(3),
.pc-mock.is-s5 .pc-mock-grid i:nth-child(3){ background:var(--acid); }

/* stage 4 is where the motion arrives */
.pc-mock.is-s4 .pc-mock-shine,
.pc-mock.is-s5 .pc-mock-shine{
  opacity:1;
  animation:pcShine 2.6s var(--e-io) infinite;
}
@keyframes pcShine{
  0%   { transform:translateX(-120%); }
  60%  { transform:translateX(120%); }
  100% { transform:translateX(120%); }
}
.pc-mock.is-s5 .pc-mock-hero{ background-position:34% 50%; }

.pc-mock-cap{ display:grid; min-height:1.4em; }
.pc-cap{
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .45s var(--e-out), transform .5s var(--e-out);
}
.pc-cap.is-on{ opacity:1; transform:none; }


/* ==========================================================================
   04  PROCESS : WHAT WE NEED FROM YOU
   ========================================================================== */

.pc-need-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.pc-need-n{
  color:var(--fg-dim);
  letter-spacing:.2em;
}
.pc-need-card h4{ max-width:18ch; }
.pc-need-card p{ font-size:14px; }


/* ==========================================================================
   05  PROCESS : DELIVERY TIMELINE
   ========================================================================== */

.pc-bars{ display:flex; flex-direction:column; gap:clamp(26px,4vh,44px); }

.pc-bar{ display:flex; flex-direction:column; gap:14px; }

.pc-bar-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
}
.pc-bar-head h3{
  font-family:var(--mono);
  font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.2;
}
.pc-bar-price{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.4vw,2.1rem);
  line-height:1;
  color:var(--fg);
}

.pc-bar-track{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
}
.pc-bar-rail{
  height:12px;
  border-radius:999px;
  background:var(--faint);
  border:1px solid var(--line);
  overflow:hidden;
}
.pc-bar-rail > i{
  display:block;
  height:100%;
  width:100%;
  background:var(--iris);
  background-size:220% 100%;
  background-position:0% 50%;
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform 1.5s var(--e-out) .18s;
}
.pc-bar.is-in .pc-bar-rail > i{ transform:scaleX(var(--w,1)); }

.pc-bar-days{
  color:var(--fg);
  font-size:12px;
  letter-spacing:.16em;
  white-space:nowrap;
  min-width:82px;
  text-align:right;
}
.pc-bar-note{ font-size:14px; max-width:60ch; }

.pc-time-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-top:clamp(38px,6vh,70px);
  padding-top:clamp(24px,3vh,34px);
  border-top:1px solid var(--line);
}
.pc-time-foot p{ max-width:56ch; margin:0; }


/* ==========================================================================
   06  PROCESS : FAQ
   Native details and summary, so it is keyboard reachable with zero script.
   ========================================================================== */

.pc-faq-list{ border-top:1px solid var(--line); }

.pc-q{ border-bottom:1px solid var(--line); }
.pc-q > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:clamp(20px,2.6vh,30px);
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:'opsz' 32,'wght' 500;
  font-size:clamp(1.05rem,1.9vw,1.55rem);
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--fg);
  transition:color .35s var(--e-out);
}
.pc-q > summary::-webkit-details-marker{ display:none; }
.pc-q > summary:hover{ color:var(--fg); }
.pc-q > summary > span{ max-width:38ch; }

.pc-q > summary > i{
  position:relative;
  flex:none;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  transition:border-color .4s var(--e-out), transform .5s var(--e-spring),
             background-color .4s var(--e-out);
}
.pc-q > summary > i::before,
.pc-q > summary > i::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:11px; height:1.5px;
  margin:-.75px 0 0 -5.5px;
  background:currentColor;
  transition:transform .5s var(--e-spring), opacity .3s var(--e-out);
}
.pc-q > summary > i::after{ transform:rotate(90deg); }
.pc-q[open] > summary > i{ background:var(--fg); color:var(--bg); }
.pc-q[open] > summary > i::after{ transform:rotate(0deg); opacity:0; }
.pc-q > summary:hover > i{ border-color:color-mix(in srgb, var(--fg) 45%, transparent); }

.pc-a{ padding-bottom:clamp(22px,3vh,32px); }
.pc-a p{ max-width:64ch; }
.pc-q[open] .pc-a{ animation:pcOpen .6s var(--e-out); }
@keyframes pcOpen{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}


/* ==========================================================================
   07  STUDIO : HERO
   ========================================================================== */

.st-h1{ margin-top:clamp(14px,2vh,26px); max-width:14ch; }

.st-hero-grid{
  display:grid;
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(30px,5vh,56px);
  align-items:end;
}
@media (min-width:900px){
  .st-hero-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

.st-meta{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.st-meta li{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding-block:13px;
  border-bottom:1px solid var(--line);
  margin:0;
}
.st-meta li > span:first-child{ flex:0 0 auto; width:98px; }
.st-meta li > span:last-child{ color:var(--fg); font-size:15px; }


/* ==========================================================================
   08  STUDIO : STORY
   ========================================================================== */

.st-story-grid{ display:grid; gap:clamp(30px,4vw,80px); }
@media (min-width:900px){
  .st-story-grid{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); }
}

.st-story-side{ display:flex; flex-direction:column; gap:clamp(20px,4vh,40px); }
.st-sig{
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--fg);
  opacity:.16;
  user-select:none;
}

.st-story-body{ display:flex; flex-direction:column; gap:clamp(18px,2.4vh,28px); }
.st-story-body p{ max-width:58ch; margin:0; }
.st-lead-p{
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--fg);
}
.st-story-body .cluster{ margin-top:clamp(8px,1.6vh,18px); }


/* ==========================================================================
   09  STUDIO : PINNED STATEMENT
   The words light up one after another as --p advances across the pin. No
   script: every unit reads the --i and --n that motion.js writes on the split.
   ========================================================================== */

.st-say{ overflow:hidden; }
.st-say-pin{ position:relative; }
.st-say-pin .pin-inner{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:calc(var(--hdr-h) + 18px) clamp(28px,5vh,54px);
}

.st-say-h{
  margin-top:clamp(20px,3vh,38px);
  font-size:clamp(1.9rem,5.4vw,5rem);
  line-height:1.02;
  max-width:20ch;
}
/* Once the line has risen into place the scroll owns the opacity of every word.
   motion.js writes a staggered inline transition-delay for the entrance, and an
   inline delay always beats a stylesheet, so opacity is dropped out of the
   transition list entirely: it then tracks --p with no lag while the transform
   keeps its staggered rise. */
.st-say-h.is-in .sp-w{
  opacity:clamp(.17, calc((var(--p,0) * (var(--n,1) + 2) - var(--i,0)) * 1.25), 1);
  transition-property:transform;
}

.st-say-rail{
  margin-top:clamp(30px,5vh,64px);
  height:2px;
  width:100%;
  background:var(--line);
  overflow:hidden;
}
.st-say-rail > i{
  display:block;
  height:100%;
  width:100%;
  background:var(--iris);
  background-size:220% 100%;
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
}


/* ==========================================================================
   10  STUDIO : PRINCIPLES
   ========================================================================== */

.st-prin-list{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
}
.st-prin-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,54px);
  align-items:start;
  padding-block:clamp(26px,3.6vh,46px);
  border-bottom:1px solid var(--line);
  margin:0;
  transition:background-color .5s var(--e-out);
}
.st-prin-n{
  color:var(--fg-dim);
  letter-spacing:.2em;
  padding-top:.55em;
  transition:color .4s var(--e-out);
}
.st-prin-item:hover .st-prin-n{ color:var(--fg); }

.st-prin-body{ display:flex; flex-direction:column; gap:12px; }
.st-prin-body h3{
  font-size:clamp(1.4rem,3.4vw,2.9rem);
  line-height:1.02;
  max-width:22ch;
}
.st-prin-body p{ max-width:58ch; margin:0; }

@media (min-width:900px){
  .st-prin-body{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(24px,4vw,60px);
    align-items:baseline;
  }
}


/* ==========================================================================
   11  STUDIO : THE STACK
   The card is the reveal target, the inner block carries the pointer tilt, so
   the two transforms never fight each other.
   ========================================================================== */

.st-stack-card{ perspective:1000px; }
.st-stack-in{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--fg) 3%, transparent);
  transform-style:preserve-3d;
  transition:border-color .45s var(--e-out), background-color .45s var(--e-out);
}
.st-stack-in:hover{
  border-color:color-mix(in srgb, var(--fg) 36%, transparent);
  background:color-mix(in srgb, var(--fg) 6%, transparent);
}
.st-stack-l{
  display:block;
  color:var(--fg);
  letter-spacing:.2em;
  font-size:10px;
}
.st-stack-in p{ font-size:14px; margin:0; }

.st-stack-card.is-no .st-stack-l{ color:var(--flare); }
.st-stack-card.is-no .st-stack-in{ border-style:dashed; }


/* ==========================================================================
   12  STUDIO : NUMBERS
   ========================================================================== */

.st-nums .sec-head{ margin-bottom:clamp(28px,4vh,52px); }

.st-nums-row{
  display:grid;
  gap:clamp(24px,3vw,48px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  padding-top:clamp(26px,3.6vh,44px);
}
.st-num{ display:flex; flex-direction:column; gap:12px; }
.st-num .num{ font-size:clamp(2.6rem,5.4vw,4.8rem); }
.st-num-l{
  color:var(--fg-dim);
  line-height:1.5;
}
.st-nums-note{
  margin-top:clamp(28px,4vh,48px);
  max-width:60ch;
  font-size:14px;
}


/* ==========================================================================
   13  START : SHELL AND HEAD
   ========================================================================== */

/* The conversion page keeps its head short: the brief itself is the hero, so
   the headline is deliberately a size down from the other pages and the whole
   block is tuned to put the first question on screen without a scroll. */
.sb{ padding-bottom:clamp(60px,8vh,110px); }
.sb-head{ max-width:62ch; }
.sb-h1{
  margin-top:clamp(14px,2vh,26px);
  font-size:clamp(2.2rem,5.4vw,4.4rem);
  max-width:16ch;
}
.sb-head .lede{ margin-top:clamp(18px,2.4vh,28px); max-width:50ch; }

.sb-grid{
  display:grid;
  gap:clamp(26px,3vw,52px);
  margin-top:clamp(38px,6vh,72px);
  align-items:start;
}
@media (min-width:1000px){
  .sb-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr); }
}


/* ==========================================================================
   14  START : THE BRIEF CARD
   ========================================================================== */

.sb-card{
  --sp:.25;
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.8vw,44px);
  overflow:hidden;
  transition:border-color .5s var(--e-out), box-shadow .6s var(--e-out);
}
.sb-card.is-sent{
  border-color:color-mix(in srgb, var(--volt-2) 45%, transparent);
  box-shadow:0 24px 70px rgba(75,43,255,.14);
}

.sb-top{ margin-bottom:clamp(22px,3vh,34px); }
.sb-top-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.sb-count{ color:var(--fg); letter-spacing:.2em; flex:none; }
.sb-count b{ font-weight:500; font-variant-numeric:tabular-nums; }

.sb-labels{ display:grid; justify-items:end; text-align:right; min-width:0; }
.sb-label{
  grid-area:1 / 1;
  color:var(--fg-dim);
  letter-spacing:.16em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s var(--e-out), transform .5s var(--e-out);
  white-space:nowrap;
}
.sb-label.is-on{ opacity:1; transform:none; }

.sb-prog{
  height:3px;
  width:100%;
  background:var(--faint);
  border-radius:999px;
  overflow:hidden;
}
.sb-prog > i{
  display:block;
  height:100%;
  width:100%;
  background:var(--iris);
  background-size:220% 100%;
  background-position:0% 50%;
  transform:scaleX(var(--sp,.25));
  transform-origin:0 50%;
  transition:transform .6s var(--e-out);
}

.sb-steps{
  position:relative;
  transition:height .48s var(--e-out);
}
.sb-steps.is-sliding{ overflow:hidden; }

.sb-step{
  border:0;
  padding:0;
  margin:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.2vh,24px);
}
.sb-step[hidden]{ display:none; }
.sb-step.is-fwd{ animation:sbIn .5s var(--e-out) both; }
.sb-step.is-bwd{ animation:sbInBack .5s var(--e-out) both; }
@keyframes sbIn{
  from{ opacity:0; transform:translateX(26px); }
  to  { opacity:1; transform:none; }
}
@keyframes sbInBack{
  from{ opacity:0; transform:translateX(-26px); }
  to  { opacity:1; transform:none; }
}

.sb-legend{
  padding:0;
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:'opsz' 32,'wght' 500;
  font-size:clamp(1.25rem,2.2vw,1.85rem);
  letter-spacing:-.025em;
  line-height:1.1;
  color:var(--fg);
}

.sb-note{
  font-size:13px;
  line-height:1.55;
  color:var(--fg-dim);
  max-width:56ch;
  margin:0;
  padding-top:2px;
}


/* ==========================================================================
   15  START : FIELDS, OPTIONS, CHECKS
   ========================================================================== */

.sb-two{
  display:grid;
  gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:620px){
  .sb-two{ grid-template-columns:minmax(0,1fr); }
}

.sb-sublabel{ margin-bottom:2px; }

/* Core styles .field .err colour and type, this decides when it is on screen. */
.field .err{ display:none; }
.field.is-bad .err{ display:block; }

.field.is-shake{ animation:sbShake .42s var(--e-out); }
@keyframes sbShake{
  0%,100%{ transform:translateX(0); }
  22%    { transform:translateX(-6px); }
  55%    { transform:translateX(5px); }
  80%    { transform:translateX(-2px); }
}

/* ---- radio cards ---- */
.sb-opts{ display:grid; gap:10px; }
.sb-opts.is-row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:760px){
  .sb-opts.is-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.sb-opt{ position:relative; display:block; cursor:pointer; }

/* The native control stays in the tab order and keeps radio semantics, it is
   only taken out of the paint. Beats the core .field input sizing by order. */
.sb-opt input,
.sb-check input{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:0; border:0;
  opacity:0;
  pointer-events:none;
  appearance:none;
  -webkit-appearance:none;
}

.sb-opt-in{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--faint);
  transition:border-color .35s var(--e-out), background-color .35s var(--e-out),
             transform .45s var(--e-spring);
}
.sb-opt:hover .sb-opt-in{ border-color:color-mix(in srgb, var(--fg) 40%, transparent); }
.sb-opt:active .sb-opt-in{ transform:scale(.99); }

.sb-opt-t{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--fg);
  line-height:1.3;
}
.sb-opt-d{
  font-size:13px;
  line-height:1.45;
  color:var(--fg-dim);
}
.sb-opt-d.serif{ font-size:19px; color:var(--fg); }

.sb-opt input:checked + .sb-opt-in{
  border-color:var(--volt);
  background:color-mix(in srgb, var(--volt) 10%, transparent);
}
.sb-opt input:checked + .sb-opt-in .sb-opt-t{ color:var(--fg); }
.sb-opt input:focus-visible + .sb-opt-in{
  outline:2px solid var(--volt);
  outline-offset:3px;
}
[data-surface="dark"] .sb-opt input:focus-visible + .sb-opt-in{ outline-color:var(--volt-2); }

.sb-opt.is-tight .sb-opt-in{ padding:14px 15px; gap:3px; align-items:flex-start; }

/* ---- checkboxes ---- */
.sb-checks{ display:flex; flex-wrap:wrap; gap:10px; }
.sb-check{ position:relative; cursor:pointer; }
.sb-check-in{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 16px 11px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--faint);
  font-size:14px;
  color:var(--fg);
  line-height:1;
  transition:border-color .35s var(--e-out), background-color .35s var(--e-out);
}
.sb-check:hover .sb-check-in{ border-color:color-mix(in srgb, var(--fg) 40%, transparent); }

.sb-tick{
  position:relative;
  width:16px; height:16px;
  flex:none;
  border-radius:5px;
  border:1px solid color-mix(in srgb, var(--fg) 34%, transparent);
  transition:background-color .3s var(--e-out), border-color .3s var(--e-out);
}
.sb-tick::after{
  content:"";
  position:absolute;
  left:5px; top:1.5px;
  width:4px; height:8px;
  border:solid var(--chalk);
  border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) scale(.4);
  opacity:0;
  transition:opacity .25s var(--e-out), transform .35s var(--e-spring);
}
.sb-check input:checked + .sb-check-in .sb-tick{
  background:var(--volt);
  border-color:var(--volt);
}
.sb-check input:checked + .sb-check-in .sb-tick::after{ opacity:1; transform:rotate(45deg) scale(1); }
.sb-check input:checked + .sb-check-in{
  border-color:var(--volt);
  background:color-mix(in srgb, var(--volt) 10%, transparent);
}
.sb-check input:focus-visible + .sb-check-in{
  outline:2px solid var(--volt);
  outline-offset:3px;
}
[data-surface="dark"] .sb-check input:focus-visible + .sb-check-in{ outline-color:var(--volt-2); }


/* ==========================================================================
   16  START : NAVIGATION AND THE FINISHED STATE
   ========================================================================== */

.sb-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:clamp(24px,3.4vh,38px);
  padding-top:clamp(20px,2.6vh,28px);
  border-top:1px solid var(--line);
}
.sb-nav .btn-solid,
.sb-nav .btn-iris{ margin-left:auto; }
.sb-arr-back{ display:inline-block; }
.btn:hover .sb-arr-back{ transform:translateX(-4px); }
#sbSend[aria-busy="true"]{ opacity:.6; pointer-events:none; }

.sb-done{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.4vh,24px);
  animation:sbDone .7s var(--e-out) both;
}
@keyframes sbDone{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

.sb-done-mark{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--iris);
  background-size:240% 100%;
  background-position:10% 50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sb-done-mark > i{
  width:15px; height:8px;
  margin-top:-4px;
  border:solid var(--chalk);
  border-width:0 0 2px 2px;
  transform:rotate(-45deg);
}
.sb-done-h{
  font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1.02;
}

/* One panel, two outcomes: delivered, or saved here and one tap from the
   studio. The copy for both is in the markup so the i18n pass sees it. */
.sb-if-no{ display:none; }
.sb-done.is-fail .sb-if-ok{ display:none; }
.sb-done.is-fail .sb-if-no{ display:block; }
.sb-done.is-fail .sb-done-h .sb-if-no{ display:inline; }
.sb-done.is-fail .sb-done-mark{ display:none; }
.sb-done-h:focus{ outline:none; }
.sb-done > p{ max-width:52ch; }

.sb-warn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:16px 18px;
  border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--flare) 45%, transparent);
  background:color-mix(in srgb, var(--flare) 8%, transparent);
}
.sb-warn p{ font-size:13px; margin:0; max-width:56ch; }

.sb-sum{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
  margin:0;
}
.sb-sum-row{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:14px;
  padding-block:11px;
  border-bottom:1px solid var(--line);
}
.sb-sum dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding-top:3px;
}
.sb-sum dd{
  margin:0;
  font-size:15px;
  color:var(--fg);
  overflow-wrap:anywhere;
}

.sb-done-cta{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }
.sb-done-alt{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}


/* ==========================================================================
   17  START : SIDE PANEL AND TRUST STRIP
   ========================================================================== */

/* The brief section bleeds so the liquid object stays visible behind the head,
   which means this panel has to be opaque: a translucent tint would let the
   object wander straight through the copy. */
.sb-side-in{
  display:flex;
  flex-direction:column;
  gap:clamp(22px,3vh,32px);
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--card) 93%, var(--fg) 7%);
}

.sb-next{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.sb-next li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin:0;
  padding:0;
}
.sb-next li::before{ display:none; }
.sb-next-n{ color:var(--fg-dim); letter-spacing:.2em; padding-top:3px; }
.sb-next h4{ font-size:15px; letter-spacing:-.01em; line-height:1.25; }
.sb-next p{ font-size:13px; line-height:1.55; margin-top:6px; max-width:38ch; }

.sb-promise{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-top:clamp(18px,2.4vh,24px);
  border-top:1px solid var(--line);
}
.sb-promise > div{ display:flex; flex-direction:column; gap:4px; }
.sb-promise b{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--fg);
}
.sb-promise span{ font-size:13px; }
.sb-promise .dot{ margin-top:5px; }

.sb-side-wa{ display:flex; flex-direction:column; gap:12px; }
.sb-side-wa p{ font-size:13px; margin:0; }

.sb-trust{ padding-bottom:0; }
.sb-trust-grid{
  display:grid;
  gap:clamp(22px,3vw,48px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:clamp(26px,3.6vh,44px);
  border-top:1px solid var(--line);
}
.sb-trust-item{ display:flex; flex-direction:column; gap:10px; }
.sb-trust-item span{ letter-spacing:.2em; }
.sb-trust-item p{ font-size:14px; margin:0; }

.sb-marq{
  margin-top:clamp(40px,6vh,80px);
  padding-block:clamp(16px,2.2vh,26px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  opacity:.75;
}
.sb-marq .marquee-item{ color:var(--fg-dim); }


/* ==========================================================================
   18  RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
  .pc-pin .pin-inner,
  .st-say-pin .pin-inner{
    align-items:flex-start;
    padding-block:calc(var(--hdr-h) + 26px) clamp(24px,4vh,40px);
  }

  /* The numeral becomes a watermark behind the copy so the pinned panel still
     fits inside one viewport on a phone. */
  .pc-left{ position:relative; }
  .pc-numwrap{
    position:absolute;
    top:-.1em; right:-.04em;
    z-index:-1;
    opacity:.14;
  }
  .pc-num{ font-size:clamp(7rem,30vw,13rem); }
  .pc-num.is-on{ -webkit-text-fill-color:currentColor; }

  .pc-right{ margin-top:6px; }
  .pc-mock-body{ gap:8px; }
  .pc-mock-hero{ height:clamp(56px,13vw,90px); }
  .pc-mock-grid i{ height:clamp(26px,7vw,40px); }
}

@media (max-width:860px){
  .st-nums-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sb-trust-grid{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .pc-time-foot{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:640px){
  .pc-step-h{ font-size:clamp(1.35rem,6.4vw,1.9rem); }
  .pc-step p{ font-size:13.5px; }
  .pc-rail-keys{ font-size:8px; letter-spacing:.1em; }
  .pc-fact > span:first-child,
  .st-meta li > span:first-child{ width:76px; }
  .pc-bar-days{ min-width:0; }
  .sb-done-alt{ flex-direction:column; align-items:flex-start; }
  .sb-nav{ gap:10px; }
  .sb-nav .btn{ flex:1 1 auto; }
  .sb-nav .btn-solid,
  .sb-nav .btn-iris{ margin-left:0; }
}

@media (max-width:420px){
  .pc-mock-cta{ width:84px; }
  .sb-opt-in{ padding:13px 15px; }
  .sb-check-in{ font-size:13px; padding:10px 14px 10px 12px; }
}


/* ==========================================================================
   19  REDUCED MOTION
   Core already forces every reveal and split unit to its rest state. These
   rules unstack the two pinned sections so their content reads as a normal
   list when nothing is allowed to animate on scroll.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .pc-pin .pin-inner,
  .st-say-pin .pin-inner{
    min-height:0;
    display:block;
    padding-block:var(--sec);
  }

  .pc-pin-in{ display:block; }
  .pc-numwrap{ display:none; }
  .pc-rail{ display:none; }

  .pc-steps{ display:block; }
  .pc-step{
    opacity:1;
    transform:none;
    pointer-events:auto;
    max-width:62ch;
    padding-bottom:clamp(26px,4vh,42px);
    margin-bottom:clamp(26px,4vh,42px);
    border-bottom:1px solid var(--line);
  }
  .pc-step:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }

  .pc-right{ margin-top:clamp(26px,4vh,42px); }
  /* The mock browser shows one state at a time. Without motion the other four
     captions and URLs must be REMOVED, not just faded to zero: text left at
     opacity 0 is still announced by a screen reader and still counts as
     content that never becomes visible. */
  .pc-cap{ opacity:1; transform:none; }
  .pc-cap:not(.is-on){ display:none; }
  .pc-url{ opacity:1; transform:none; }
  .pc-url:not(.is-on){ display:none; }
  .pc-mock-shine{ display:none; }
  .pc-cue i::after{ display:none; }

  .st-say-h.is-in .sp-w{ opacity:1; }
  .st-say-rail > i{ transform:scaleX(1); }
  .pc-rail-line > i{ transform:scaleX(1); }
  .pc-bar.is-in .pc-bar-rail > i,
  .pc-bar .pc-bar-rail > i{ transform:scaleX(var(--w,1)); }

  .rv-kid{ opacity:1; transform:none; }
  .sb-label{ opacity:1; }
  .sb-label:not(.is-on){ display:none; }
}


/* ==========================================================================
   20  HIDDEN MEANS HIDDEN
   .btn is display:inline-flex and .sb-done is display:flex, both of which
   outrank the browser's own [hidden] rule, which would leave a hidden button
   painted and still in the tab order. The attribute is re-asserted here, at the
   very end of the sheet, where source order settles every tie in its favour.
   ========================================================================== */

[hidden]{ display:none; }
.sb-card [hidden],
.sb-nav .btn[hidden],
.sb-step[hidden]{ display:none; }