/* Self-hosted, subset to the characters this site actually uses. No third-party requests. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/archivo-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plex-sans-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plex-sans-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plex-mono-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:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/archivo-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plex-sans-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plex-sans-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plex-mono-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}

/* ==========================================================================
   MacBoardFix — board-level Apple repair, Zarren (BE)
   Palette sampled from the hero footage itself.
   ========================================================================== */

:root{
  --canvas:#0C1413;
  --canvas-deep:#080F0E;
  --panel:#141F1C;
  --panel-2:#1B2925;
  --line:#25352F;
  --line-strong:#3A5045;
  --text-primary:#E8EDE7;
  --text-secondary:#9BAAA1;
  --text-dim:#6F8078;
  --copper:#B87A4A;
  --copper-dim:#5E4230;
  --accent:#FF6A2B;
  --accent-hover:#FF8551;
  --accent-muted:rgba(255,106,43,.22);
  --ok:#7FD6A8;

  --tshadow:0 1px 2px rgba(5,10,9,.95),0 3px 12px rgba(5,10,9,.78),0 10px 44px rgba(5,10,9,.8);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);

  --display:"Archivo",system-ui,"Segoe UI",sans-serif;
  --body:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}

html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{
  overflow-x:hidden;overflow-x:clip;
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;display:block}
a{color:inherit}

::selection{background:var(--accent);color:#160800}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--accent);color:#160800;padding:12px 18px;
  font-family:var(--mono);font-size:13px;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   The environment: one fixed layer behind everything (the trace network)
   -------------------------------------------------------------------------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(58,80,69,.28) 0%,rgba(12,20,19,0) 60%),
    radial-gradient(90% 60% at 12% 108%,rgba(184,122,74,.10) 0%,rgba(12,20,19,0) 55%),
    var(--canvas);
}
.env svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.env .drift{
  position:absolute;inset:-20%;
  background:radial-gradient(closest-side,rgba(155,170,161,.055),rgba(0,0,0,0) 70%);
  animation:drift 78s var(--ease) -22s infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(-8%,-4%,0) scale(1)}
  100%{transform:translate3d(9%,6%,0) scale(1.18)}
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:640;
  line-height:1.04;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.95rem,4.1vw,3.05rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600;}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.lede{
  font-size:clamp(1.06rem,1.5vw,1.28rem);
  color:var(--text-secondary);
  line-height:1.58;
  max-width:60ch;
}

.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
.kicker::before{
  content:"";width:26px;height:1px;background:var(--copper);opacity:.65;flex:none;
}

.prose{max-width:68ch}
.prose p,.prose li{color:var(--text-secondary)}
.prose strong{color:var(--text-primary);font-weight:600}
.prose h3{color:var(--text-primary);margin:2.2rem 0 .7rem}
.prose ul{padding-left:1.1rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.42rem}
.prose li::marker{color:var(--copper)}
.prose a{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent)}

.quote{
  border-left:2px solid var(--copper);
  padding:.1rem 0 .1rem 1.15rem;
  margin:1.5rem 0;
  font-size:1.04rem;
  color:var(--text-primary);
  font-style:normal;
}
.quote cite{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.74rem;font-style:normal;letter-spacing:.06em;color:var(--text-dim)}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
main{position:relative;z-index:1;display:block}
section{position:relative;padding:clamp(64px,9vw,124px) 0}
.section-sep{border-top:1px solid var(--line)}

.split{display:grid;gap:clamp(28px,4vw,64px)}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:start}
  .split.narrow-first{grid-template-columns:.86fr 1.14fr}
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(8,15,14,.72);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.nav.stuck{border-bottom-color:var(--line);background:rgba(8,15,14,.9)}
.nav-in{
  width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);
  height:66px;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand svg{width:26px;height:26px;flex:none}
.brand b{
  font-family:var(--display);font-weight:660;
  font-size:1.13rem;letter-spacing:-.02em;
}
.brand b i{font-style:normal;color:var(--copper)}
.nav-links{display:none;gap:clamp(12px,1.9vw,26px);margin-left:auto;align-items:center}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-links a{
  font-size:.875rem;text-decoration:none;color:var(--text-secondary);
  transition:color .25s var(--ease);white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text-primary)}
.lang{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--text-secondary);text-decoration:none;border:1px solid var(--line-strong);
  border-radius:7px;padding:6px 9px;margin-left:auto;transition:color .25s var(--ease),border-color .25s var(--ease);
  flex:none;
}
.lang:hover{color:var(--text-primary);border-color:var(--copper)}
@media(min-width:1000px){.lang{margin-left:0}}
.nav-cta{white-space:nowrap}
@media(max-width:999px){.nav-cta{margin-left:8px}}
.cta-full{display:none}
.cta-brief{display:inline}
@media(min-width:620px){.cta-full{display:inline}.cta-brief{display:none}}

@media(min-width:1000px){.nav-cta{margin-left:0}}

.menu-btn{
  margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--text-primary);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 13px;border-radius:8px;cursor:pointer;
}
@media(min-width:1000px){.menu-btn{display:none}}
.drawer{
  display:none;border-top:1px solid var(--line);
  background:rgba(8,15,14,.97);padding:14px 0 22px;
}
.drawer.open{display:block}
.drawer nav{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;display:grid;gap:2px}
.drawer a{
  text-decoration:none;color:var(--text-secondary);padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.98rem;
}
.drawer a:last-child{border-bottom:0}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:13px 22px;border-radius:10px;
  background:var(--btn-bg);color:#180800;
  font-family:var(--body);font-weight:600;font-size:.94rem;
  text-decoration:none;border:0;cursor:pointer;
  text-shadow:none;
  transition:background .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
  box-shadow:0 8px 26px -14px rgba(255,106,43,.9);
}
.btn:hover{--btn-bg:var(--accent-hover);transform:translateY(-1px);box-shadow:0 14px 34px -14px rgba(255,106,43,.95)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--text-primary);
  border:1px solid var(--line-strong);box-shadow:none;
}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--copper);transform:translateY(-1px);box-shadow:none}
.btn.small{padding:10px 16px;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
@media(pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* --------------------------------------------------------------------------
   HERO — the scroll-scrubbed descent
   -------------------------------------------------------------------------- */
.hero{position:relative;height:700vh}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep);
}
.stage .poster,
.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.stage .poster{
  background-size:cover;background-position:center;
  transition:opacity .8s var(--ease);
}
.stage video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 118% 88% at 50% 45%,rgba(8,15,14,.04) 28%,rgba(8,15,14,.68) 100%);
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,15,14,.72) 0%,rgba(8,15,14,0) 24%,rgba(8,15,14,0) 66%,rgba(8,15,14,.8) 100%);
}

.ring{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%) rotate(-90deg);
  width:44px;height:44px;color:var(--copper);opacity:.85;
  transition:opacity .5s var(--ease);
}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

.cue{
  position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-secondary);opacity:0;transition:opacity .6s var(--ease);
  text-shadow:var(--tshadow);pointer-events:none;
}
.stage.video-ready .cue{opacity:.75;animation:cuepulse 3.4s ease-in-out -1s infinite}
.stage.moved .cue{opacity:0;animation:none}
@keyframes cuepulse{0%,100%{opacity:.42}50%{opacity:.9}}

/* caption bands */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;top:0;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;text-shadow:var(--tshadow);
  padding:0 clamp(20px,4vw,48px);
  isolation:isolate;            /* keeps the band's own scrim above the video at opacity 1 */
}
.band .btn{text-shadow:none}
.band.left{left:0;width:min(42%,545px);align-items:flex-start;text-align:left}
.band.right{right:0;width:min(42%,545px);align-items:flex-start;text-align:left}
.band.mid{
  left:50%;transform:translateX(-50%);
  width:min(88%,780px);align-items:center;text-align:center;
  justify-content:flex-start;padding-top:19vh;
}
/* two-sided scrims: never one stretched across the middle */
.band.left::before,.band.right::before{
  content:"";position:absolute;inset:-10% -70% -10% -10%;pointer-events:none;z-index:-1;
  opacity:calc(.34 + .66*var(--k,1));
}
.band.left::before{
  background:radial-gradient(ellipse 128% 64% at 6% 50%,
    rgba(3,8,7,.82) 0%,rgba(3,8,7,.74) 30%,rgba(3,8,7,.54) 52%,rgba(3,8,7,.24) 72%,rgba(3,8,7,0) 90%);
}
.band.right::before{
  inset:-10% -10% -10% -70%;
  background:radial-gradient(ellipse 128% 64% at 94% 50%,
    rgba(3,8,7,.82) 0%,rgba(3,8,7,.74) 30%,rgba(3,8,7,.54) 52%,rgba(3,8,7,.24) 72%,rgba(3,8,7,0) 90%);
}
.band.mid::before{
  content:"";position:absolute;inset:-40% -30% 0 -30%;pointer-events:none;z-index:-1;
  opacity:calc(.34 + .66*var(--k,1));
  background:radial-gradient(ellipse 86% 62% at 50% 46%,
    rgba(3,8,7,.84) 0%,rgba(3,8,7,.76) 28%,rgba(3,8,7,.54) 48%,rgba(3,8,7,.24) 68%,rgba(3,8,7,0) 88%);
}
.band h2,.band .bh{
  font-family:var(--display);font-weight:680;
  font-size:clamp(2.0rem,4vw,3.1rem);line-height:1.03;letter-spacing:-.022em;
  margin:0 0 .55rem;
}
.band .bs{
  font-size:clamp(1rem,1.42vw,1.2rem);color:#CBD6CE;max-width:26ch;margin:0;
}
.band.mid .bs{max-width:34ch}

/* per-character / per-word entrance atoms */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.e-depth .bh{
  --kc:clamp(0,var(--k,0)*1.5,1);
  opacity:var(--kc);
  transform:scale(calc(0.84 + 0.16*var(--kc)));
  transform-origin:left center;
}
.band.mid.e-depth .bh{transform-origin:center}
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-rise .bs{opacity:clamp(0,(var(--k,0) - .60)*4,1)}
.e-rise .band-cta{
  opacity:clamp(0,(var(--k,0) - .74)*5,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .74)*5,1))*12px));
}
.band .bs{opacity:1}
.band-cta{margin-top:1.5rem;display:flex;gap:.7rem;flex-wrap:wrap;justify-content:inherit;pointer-events:none}
.band.live .band-cta{pointer-events:auto}

/* static hero (phones, reduced motion) */
.static-hero{display:none;position:relative;min-height:88vh;align-items:flex-end;overflow:hidden}
.static-hero .shot{position:absolute;inset:0;background-size:cover;background-position:50% 46%}
.static-hero .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,15,14,.58) 0%,rgba(8,15,14,.18) 40%,rgba(8,15,14,.86) 86%);
}
.static-hero .inner{position:relative;padding:0 0 clamp(46px,9vw,84px);width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.static-hero h1{text-shadow:var(--tshadow);margin-bottom:.7rem}
.static-hero .hero-title{
  font-family:var(--display);font-weight:640;
  font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.04;letter-spacing:-.018em;
  margin:0 0 .7rem;text-wrap:balance;text-shadow:var(--tshadow);
}

.static-hero p{color:#CBD6CE;text-shadow:var(--tshadow);max-width:32ch;font-size:1.06rem}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}
@media (max-height:560px){.cue{display:none}}

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero{padding:clamp(52px,8vw,96px) 0 clamp(34px,5vw,56px);position:relative}
.page-hero h1{margin-bottom:1rem}
.crumbs{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--text-dim);margin-bottom:1.4rem;
}
.crumbs a{color:var(--text-dim);text-decoration:none}
.crumbs a:hover{color:var(--copper)}
.crumbs span{margin:0 .45rem;opacity:.5}

/* --------------------------------------------------------------------------
   Cards, grids, stats
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:700px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}

.card{
  position:relative;
  background:linear-gradient(168deg,var(--panel) 0%,var(--canvas-deep) 100%);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(20px,2.3vw,28px);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card h3{margin-bottom:.55rem}
.card p{color:var(--text-secondary);font-size:.95rem;margin:0}
.card .pad{
  position:absolute;top:18px;right:18px;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--copper-dim);
}
.card:hover .pad{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}

a.card{text-decoration:none;display:block}
a.card .more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--copper);
  transition:gap .3s var(--ease),color .3s var(--ease);
}
a.card:hover .more{gap:.75rem;color:var(--accent)}

.stat{
  border:1px solid var(--line);border-radius:12px;padding:20px 18px;
  background:var(--panel);
}
.stat b{
  display:block;font-family:var(--display);font-weight:680;
  font-size:clamp(1.7rem,3vw,2.35rem);line-height:1;letter-spacing:-.02em;margin-bottom:.4rem;
}
.stat span{font-size:.86rem;color:var(--text-secondary);display:block;line-height:1.45}

/* --------------------------------------------------------------------------
   Steps (the send-in flow)
   -------------------------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--panel);padding:clamp(20px,2.3vw,28px);position:relative}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--copper);
  display:block;margin-bottom:1.1rem;
}
.step h3{font-size:1.06rem;margin-bottom:.45rem}
.step p{font-size:.92rem;color:var(--text-secondary);margin:0}

/* --------------------------------------------------------------------------
   Price tables
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
caption{
  text-align:left;padding:18px clamp(16px,2vw,22px) 0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
}
th,td{padding:13px clamp(12px,1.6vw,20px);text-align:left;border-bottom:1px solid var(--line)}
thead th{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim);font-weight:400;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .25s var(--ease)}
tbody tr:hover{background:var(--panel-2)}
td.price{font-family:var(--mono);font-size:.92rem;color:var(--text-primary);white-space:nowrap}
td.price.hi{color:var(--accent)}
td.apple{font-family:var(--mono);font-size:.92rem;color:var(--text-dim);white-space:nowrap;text-decoration:line-through;text-decoration-color:var(--copper-dim)}
.note{font-size:.84rem;color:var(--text-dim);margin-top:.9rem;max-width:70ch}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.06rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--copper);border-bottom:1.5px solid var(--copper);
  transform:translateY(-70%) rotate(45deg);transition:transform .34s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 20px;color:var(--text-secondary);max-width:72ch}
.faq .a p{margin-bottom:.8rem}

/* --------------------------------------------------------------------------
   The interactive moment: hold to solder
   -------------------------------------------------------------------------- */
.solder{
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  padding:clamp(22px,3vw,38px);
}
.solder-stage{position:relative;margin:0 auto;max-width:520px}
.solder-stage svg{width:100%;height:auto;display:block}
.solder-read{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--text-dim);
  margin-top:1rem;
}
.solder-read b{color:var(--accent);font-weight:400;font-variant-numeric:tabular-nums}
.hold{
  margin-top:1.2rem;width:100%;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.solder-done{
  margin-top:1.3rem;opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  color:var(--ok);font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;
}
.solder.done .solder-done{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form{display:grid;gap:14px}
@media(min-width:720px){.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}}
.field{display:grid;gap:6px}
.field label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
}
.field input,.field select,.field textarea{
  background:var(--canvas-deep);
  border:1px solid var(--line-strong);
  border-radius:9px;
  color:var(--text-primary);
  font-family:var(--body);font-size:.98rem;
  padding:12px 13px;width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:#0A1211}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--text-dim)}
.consent input{width:16px;height:16px;margin-top:.24rem;accent-color:var(--accent);flex:none}
.form-note{font-size:.82rem;color:var(--text-dim)}
.form-ok{
  display:none;border:1px solid var(--ok);border-radius:12px;padding:20px;
  background:rgba(127,214,168,.07);color:var(--text-primary);
}
.form-ok.show{display:block}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:clamp(46px,6vw,72px) 0 40px;position:relative;z-index:1}
.foot-grid{display:grid;gap:32px}
@media(min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);font-weight:400;margin:0 0 1rem;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot a{color:var(--text-secondary);text-decoration:none;font-size:.92rem}
.foot a:hover{color:var(--accent)}
.foot address{font-style:normal;color:var(--text-secondary);font-size:.92rem;line-height:1.75}
.foot-bottom{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.8rem;color:var(--text-dim);
}

/* --------------------------------------------------------------------------
   Entrances + self-drawing traces
   -------------------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rise.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0ms}
.stagger.in>*:nth-child(2){transition-delay:80ms}
.stagger.in>*:nth-child(3){transition-delay:160ms}
.stagger.in>*:nth-child(4){transition-delay:240ms}
.stagger.in>*:nth-child(5){transition-delay:320ms}
.stagger.in>*:nth-child(6){transition-delay:400ms}
.stagger.in.settled>*:nth-child(1),
.stagger.in.settled>*:nth-child(2),
.stagger.in.settled>*:nth-child(3),
.stagger.in.settled>*:nth-child(4),
.stagger.in.settled>*:nth-child(5),
.stagger.in.settled>*:nth-child(6){transition-delay:0ms!important}

.trace-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s var(--ease-out)}
.trace-line.drawn{stroke-dashoffset:0}

/* --------------------------------------------------------------------------
   Reduced motion + paused tabs
   -------------------------------------------------------------------------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .rise,.stagger>*{opacity:1!important;transform:none!important}
  .trace-line{stroke-dashoffset:0!important}
  .band{opacity:1}
  .band.mid{transform:translateX(-50%)}
  .ring{display:none}
}