/**
 * 10 steps — the journey of one bottle.
 *
 * Ported from the design (LOLA/V4, "VYNE+ 10 steps") — desktop rules first, then the
 * mobile layer from the design's phone export. Every rule is scoped to the
 * page wrapper the section engine draws (inc/page-builder.php), so nothing
 * here reaches the site's header or footer. Chrome rules the design carried
 * for its own header/footer were left out: the site keeps its own.
 */
/* The design's own Cormorant weights (400/500/600, upright and italic) — the
   design has no 300, so its 300 text is drawn with the 400 face. Self-hosted
   under their own name so only these two pages follow the design this way. */
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-500i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-500i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-600i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-600i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond V4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-v4/cormorant-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



  .sci-page{
    --bg:#f4ede0;--bg-2:#ebe2d0;--bg-3:#e3d8c1;--paper:#faf5e9;
    --line:rgba(38,30,16,.12);--line-strong:rgba(38,30,16,.28);
    --gold:#b8924d;--gold-soft:#c9a661;--gold-deep:#8a6f33;--gold-bright:#e6cf9e;
    --green:#1f3522;--green-soft:#2d4d31;
    --ink:#261e10;--ink-soft:#4a3f2a;--ink-mute:#7a6f5a;
    --serif:'Cormorant Garamond V4','Cormorant Garamond',serif;--sans:'Jost',sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
    --pad:22px;--maxw:1180px;--spine:78px;
    position:relative;background:var(--bg);color:var(--ink-soft);font-family:var(--sans);font-weight:300;
  }
  .sci-page::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:linear-gradient(90deg,transparent 0 13px,rgba(184,146,77,.05) 13px 14px),linear-gradient(0deg,transparent 0 13px,rgba(184,146,77,.05) 13px 14px);background-size:14px 14px}
  .sci-page>*{position:relative;z-index:1}
  .sci-page *{box-sizing:border-box}
  .sci-page h1,.sci-page h2,.sci-page h3{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.06;margin:0}
  .sci-page em{font-style:italic;color:var(--gold-deep)}
  .sci-page a{color:var(--gold-deep);text-decoration:none}
  .sci-page a:hover{color:var(--green)}
  .sci-page .shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  .sci-page p{margin:0}

/* ---- */
.sci-page ::selection{background:var(--gold);color:#16100a}.sci-page a{color:var(--gold-deep);text-decoration:none}.sci-page a:hover{color:var(--green)}.sci-page h1,.sci-page h2,.sci-page h3{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.06}.sci-page em{font-style:italic;color:var(--gold-deep)}.sci-page .shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}.sci-page .kicker{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}.sci-page .kicker::before{content:"";width:34px;height:1px;background:var(--gold-deep);opacity:.55}/* ===== hero ===== */.sci-page .hero{display:block !important;min-height:0 !important;overflow:visible !important;align-items:initial;position:relative;padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px);text-align:center}.sci-page .hero h1{font-size:clamp(44px,9vw,104px);line-height:.98;margin-top:20px}.sci-page .hero .lead{font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);line-height:1.5;color:var(--ink-soft);margin:24px auto 0;max-width:46ch}.sci-page .hero .scroll-hint{position:static;left:auto;bottom:auto;transform:none;margin-top:44px;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;flex-direction:column;align-items:center;gap:12px}.sci-page .hero .scroll-hint .ln{width:1px;height:52px;background:linear-gradient(180deg,var(--gold-deep),transparent);animation:drop 2.2s ease-in-out infinite}
  @keyframes drop{0%,100%{opacity:.35;transform:scaleY(.7);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
  @media (prefers-reduced-motion:reduce){.sci-page .hero .scroll-hint .ln{animation:none}}/* fact strip */.sci-page .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.sci-page .facts div{padding:26px 24px;border-right:1px solid var(--line);text-align:center}.sci-page .facts div:last-child{border-right:none}.sci-page .facts .n{font-size:clamp(30px,3.6vw,46px)!important}
.sci-page .facts > div{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.sci-page .facts.in > div{opacity:1;transform:none}
.sci-page .facts.in > div:nth-child(2){transition-delay:.1s}
.sci-page .facts.in > div:nth-child(3){transition-delay:.2s}
.sci-page .tl-head{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.sci-page .tl-head.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sci-page .step,.sci-page .step .media,.sci-page .node,.sci-page .step::after,
  .sci-page .step .phase,.sci-page .step h3,.sci-page .step .lead,.sci-page .step .card p,
  .sci-page .facts > div,.sci-page .tl-head{opacity:1!important;transform:none!important;transition:none!important}
}
.sci-page .facts .n{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5vw,58px);color:var(--gold-deep);line-height:1}.sci-page .facts .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:9px;line-height:1.7}/* ===== timeline — centre spine, cards alternating left / right ===== */
.sci-page .tl-wrap{padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,110px)}
.sci-page .tl-head{max-width:640px;margin:0 auto clamp(38px,5vw,64px);text-align:center}
.sci-page .tl-head h2{font-size:clamp(32px,4.6vw,52px);margin-top:14px}
.sci-page .tl-head p{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ink-mute);margin-top:14px}

.sci-page .tl{position:relative;padding:8px 0 0}
.sci-page .tl::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:18px;width:1px;background:var(--line-strong)}
.sci-page .tl-fill{position:absolute;left:50%;transform:translateX(-50%);top:0;width:1px;height:0;background:linear-gradient(180deg,var(--gold),var(--gold-deep));transition:height .12s linear;box-shadow:0 0 9px rgba(184,146,77,.5)}

.sci-page .step{position:relative;width:calc(50% - 46px);margin-bottom:clamp(-215px,-16vw,-60px);opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.sci-page .step:first-of-type{margin-top:0}
/* cards enter from their own side of the spine */
.sci-page .step:nth-of-type(odd){transform:translate3d(-38px,26px,0)}
.sci-page .step:nth-of-type(even){transform:translate3d(38px,26px,0)}
.sci-page .step.in{opacity:1;transform:translate3d(0,0,0)}

/* node pops once the card lands */
.sci-page .node{transform:scale(.72);opacity:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1) .12s,opacity .4s ease .12s,background .5s,border-color .5s,color .5s,box-shadow .5s}
.sci-page .step.in .node{transform:scale(1);opacity:1}

/* connector draws outward from the card */
.sci-page .step::after{transform:scaleX(0);transition:transform .5s cubic-bezier(.16,1,.3,1) .1s}
.sci-page .step:nth-of-type(odd)::after{transform-origin:left center}
.sci-page .step:nth-of-type(even)::after{transform-origin:right center}
.sci-page .step.in::after{transform:scaleX(1)}

/* photo settles from a slow push-in */
.sci-page .step .media{transform:scale(1.07);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.sci-page .step.in .media{transform:scale(1)}

/* inner copy staggers in behind the card */
.sci-page .step .phase,
.sci-page .step h3,
.sci-page .step .lead,
.sci-page .step .card p{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.sci-page .step.in .phase{opacity:1;transform:none;transition-delay:.16s}
.sci-page .step.in h3{opacity:1;transform:none;transition-delay:.24s}
.sci-page .step.in .lead{opacity:1;transform:none;transition-delay:.32s}
.sci-page .step.in .card p{opacity:1;transform:none;transition-delay:.4s}
.sci-page .step:last-of-type{margin-bottom:0!important}
/* .tl-fill is a div, so :nth-of-type counts only the step articles */
.sci-page .step:nth-of-type(even){margin-left:auto}

/* node sits on the centre line */
.sci-page .node{position:absolute;top:14px;width:62px;height:62px;border-radius:50%;background:var(--paper);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:18px;line-height:1;letter-spacing:.05em;color:var(--ink-mute);z-index:2;transition:background .5s,border-color .5s,color .5s,box-shadow .5s}
/* JetBrains Mono — same face as the phase chips. Lining figures, no descenders. */
.sci-page .node{padding:0;line-height:0}
.sci-page .node::before{content:attr(data-n);display:block;line-height:1;transform:translateY(.024em)}
.sci-page .step:nth-of-type(odd) .node{right:-77px}
.sci-page .step:nth-of-type(even) .node{left:-77px}
.sci-page .step.in .node{background:var(--paper);border-color:var(--gold-deep);color:var(--gold-deep);box-shadow:0 0 0 7px rgba(184,146,77,.12),0 6px 20px rgba(138,111,51,.16)}

/* connector from the card to the spine */
.sci-page .step::after{content:"";position:absolute;top:45px;width:27px;height:1px;background:var(--line-strong)}
.sci-page .step:nth-of-type(odd)::after{right:-27px}
.sci-page .step:nth-of-type(even)::after{left:-27px}

.sci-page .step .card{background:var(--paper);border:1px solid var(--line-strong);overflow:hidden}
.sci-page .step .media{position:relative;aspect-ratio:16/10;background:var(--bg-3) center/cover no-repeat}
.sci-page .step .media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,30,16,.18),transparent 55%)}
.sci-page .step .card .body{padding:clamp(20px,2.2vw,30px)}
.sci-page .step .phase{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#16100a;background:linear-gradient(180deg,var(--gold-soft),var(--gold));padding:5px 10px}
.sci-page .step h3{font-size:clamp(23px,2.5vw,30px);line-height:1.12;margin-top:14px}
.sci-page .step .lead{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.7vw,19px);line-height:1.35;color:var(--gold-deep);margin-top:10px}
.sci-page .step .card p{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:11px}


/* phone / tablet: spine returns to the left edge, cards go full width */
@media (max-width:900px){
  .sci-page .tl{padding-left:52px}
  .sci-page .tl::before,.sci-page .tl-fill{left:18px;transform:none}
  .sci-page .step{width:100%;margin-left:0!important;margin-bottom:26px!important}
  .sci-page .step .node,
  .sci-page .step:nth-of-type(odd) .node,
  .sci-page .step:nth-of-type(even) .node{left:-42px;right:auto;width:48px;height:48px;top:16px;font-size:15px}
  .sci-page .step::after,
  .sci-page .step:nth-of-type(odd)::after,
  .sci-page .step:nth-of-type(even)::after{left:-18px;right:auto;width:18px;top:40px}
}

/* ===== closing ===== */.sci-page .close{background:linear-gradient(160deg,#1c1610,#080605);color:#c7bba8;padding:clamp(56px,8vw,104px) 0;text-align:center}.sci-page .close .kicker{color:var(--gold-soft)}.sci-page .close .kicker::before{background:var(--gold-soft)}.sci-page .close h2{color:#f5ede0;font-size:clamp(32px,5vw,58px);margin-top:18px}.sci-page .close h2 em{color:var(--gold-soft)}.sci-page .close p{font-family:var(--serif);font-size:19px;line-height:1.55;color:#c7bba8;margin:20px auto 0;max-width:44ch}.sci-page .close .cta{display:inline-flex;align-items:center;gap:12px;margin-top:34px;background:linear-gradient(180deg,#d9b765,#b98f3c);color:#16100a;border:none;padding:19px 38px;font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;text-decoration:none}.sci-page .close .cta:hover{box-shadow:0 12px 32px rgba(184,146,77,.28);color:#16100a}.sci-page .close .links{display:flex;gap:24px;justify-content:center;margin-top:32px;flex-wrap:wrap}.sci-page .close .links a{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8e8474;border-bottom:1px solid rgba(231,210,176,.24);padding-bottom:3px}.sci-page .close .links a:hover{color:var(--gold-soft)}


  /* ===== responsive ===== */
  @media (max-width:900px){.sci-page .sci-card{grid-template-columns:1fr}.sci-page .sci-card .media{min-height:230px;aspect-ratio:16/10}.sci-page .facts{grid-template-columns:1fr}.sci-page .facts div{border-right:none;border-bottom:1px solid var(--line);padding:22px}.sci-page .facts div:last-child{border-bottom:none}
  }
  @media (max-width:640px){.sci-page :root{--spine:17px;--pad:18px}.sci-page .tl{padding-left:52px}.sci-page .node{left:-52px;width:34px;height:34px}.sci-page .step.sci .node{width:34px;height:34px;top:2px;left:-52px;font-size:11px}.sci-page .tl::before,.sci-page .tl-fill{left:17px}.sci-page .step .t{font-size:22px}.sci-page .sci-metrics{flex-direction:column;gap:0}.sci-page .sci-metrics div{border-right:none;border-bottom:1px solid var(--line);padding:13px 0}.sci-page .sci-metrics div:last-child{border-bottom:none}
  }


/* ═══ mobile layer (design: phone export) ═══ */

/* ═══════════ How it works — mobile layer (≤860px) ═══════════
   Desktop uses a centre spine with cards alternating left/right. On a phone the
   spine moves to the left edge and every card goes full width in one column. */
@media (max-width:860px){
  .sci-page{--pad:18px}

  /* hero */
  .sci-page .hero{padding:34px 0 26px}
  .sci-page .hero h1{font-size:clamp(34px,10vw,50px);line-height:1.02}
  .sci-page .hero .lead{font-size:17px;line-height:1.5;margin-top:16px;max-width:36ch}
  .sci-page .hero .scroll-hint{margin-top:28px}
  .sci-page .hero .scroll-hint .ln{height:38px}

  /* fact strip: compact rows, number left / label right, so pairing is obvious.
     The desktop 900px rule targets `.facts div` (not `> div`), which also
     bordered the inner .n and .l — that stray line is cleared here. */
  .sci-page .facts{grid-template-columns:1fr!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sci-page .facts > div{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;padding:13px 18px!important;border-right:none!important;border-bottom:1px solid var(--line)!important;text-align:left!important}
  .sci-page .facts > div:last-child{border-bottom:none!important}
  .sci-page .facts .n,.sci-page .facts .l{border:none!important;padding:0!important;margin:0!important;text-align:left!important}
  .sci-page .facts .n{font-size:27px!important;line-height:1.05;white-space:nowrap}
  .sci-page .facts .l{font-size:9px;letter-spacing:.14em;line-height:1.55}

  /* section intro */
  .sci-page .tl-wrap{padding:40px 0 52px}
  .sci-page .tl-head{margin-bottom:30px;text-align:left}
  .sci-page .tl-head h2{font-size:clamp(27px,7.6vw,36px)}
  .sci-page .tl-head p{font-size:16px;margin-top:12px}

  /* ── spine: left edge, single column ── */
  .sci-page .tl{padding:4px 0 0 54px}
  .sci-page .tl::before,.sci-page .tl-fill{left:19px!important;transform:none!important;top:8px;bottom:8px}

  .sci-page .step{width:100%!important;margin:0 0 20px 0!important}
  .sci-page .step:last-of-type{margin-bottom:0!important}
  /* both sides now enter from the same direction */
  .sci-page .step:nth-of-type(odd),
  .sci-page .step:nth-of-type(even){transform:translate3d(18px,20px,0)}
  .sci-page .step.in{transform:translate3d(0,0,0)}

  /* node on the spine, left of the card */
  .sci-page .node,
  .sci-page .step:nth-of-type(odd) .node,
  .sci-page .step:nth-of-type(even) .node{left:-54px!important;right:auto!important;top:16px;width:38px;height:38px;font-size:14px}

  /* short connector, always drawn from the left */
  .sci-page .step::after,
  .sci-page .step:nth-of-type(odd)::after,
  .sci-page .step:nth-of-type(even)::after{left:-16px!important;right:auto!important;width:16px;top:35px;transform-origin:left center}

  /* cards: wider photo ratio reads better at phone width */
  .sci-page .step .media{aspect-ratio:3/2}
  .sci-page .step .card .body{padding:18px 18px 20px}
  .sci-page .step .phase{font-size:8.5px;letter-spacing:.18em;padding:4px 9px}
  .sci-page .step h3{font-size:22px;margin-top:12px;line-height:1.16}
  .sci-page .step .lead{font-size:16.5px;margin-top:9px}
  .sci-page .step .card p{font-size:15px;line-height:1.55;margin-top:9px}

  /* closing block */
  .sci-page .close{padding:48px 0}
  .sci-page .close h2{font-size:clamp(27px,7.4vw,38px)}
  .sci-page .close p{font-size:16.5px;margin-top:16px;max-width:34ch}
  .sci-page .close .cta{margin-top:26px;padding:17px 26px;font-size:10px;letter-spacing:.22em;width:100%;justify-content:center}
  .sci-page .close .links{gap:16px 20px;margin-top:26px}
  .sci-page .close .links a{font-size:9px}
}
@media (max-width:420px){
  .sci-page .tl{padding-left:46px}
  .sci-page .tl::before,.sci-page .tl-fill{left:16px!important}
  .sci-page .node,
  .sci-page .step:nth-of-type(odd) .node,
  .sci-page .step:nth-of-type(even) .node{left:-46px!important;width:32px;height:32px;font-size:12px;top:14px}
  .sci-page .step::after,
  .sci-page .step:nth-of-type(odd)::after,
  .sci-page .step:nth-of-type(even)::after{left:-14px!important;width:14px;top:30px}
  .sci-page .step h3{font-size:20px}
}


/* The design system lifts the scroll hint above the hero (z-index 2). */
.sci-page .hero .scroll-hint{z-index:2}