/* ═══════════════════════════════════════════════════════════════════════
   MikeRidesDaily.com
   Asphalt at night: near-black base, sodium-lamp ember, chrome type.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────────────────── */
@font-face{font-family:'Clash Display';src:url('/assets/fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('/assets/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('/assets/fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/assets/fonts/geist-var-latin.woff2') format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-var-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

/* ─── Tokens ────────────────────────────────────────────────────────── */
:root{
  --ink:#0B0B0C;
  --ink-2:#131316;
  --ink-3:#191920;
  --cream:#F3F0EB;
  --smoke:#A29D95;
  --ash:#6B6762;
  --ember:#E8963A;
  --ember-lo:#B4712A;
  --ember-glow:rgba(232,150,58,.14);

  /* Ambient only, never on a control. Sodium streetlight vs. the blue an hour
     after sunset — the two colours a night ride actually happens in. */
  --warm:232,150,58;
  --cool:74,124,138;

  --hair:rgba(246,238,228,.095);
  --hair-hi:rgba(246,238,228,.17);
  --shell-bg:rgba(246,238,228,.035);

  --r:2rem;
  --r-in:calc(var(--r) - .375rem);
  --pad:.375rem;

  --gut:clamp(1.25rem,5vw,3.5rem);
  --max:1240px;
  --sec-y:clamp(5.5rem,12vw,10.5rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-fluid:cubic-bezier(.32,.72,0,1);

  --font-d:'Clash Display',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Geist',ui-sans-serif,system-ui,sans-serif;
  --font-m:'Geist Mono',ui-monospace,'SF Mono',monospace;
}

/* ─── Reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
html{background:var(--ink)}
body{
  background:transparent;
  isolation:isolate;
  color:var(--cream);
  font-family:var(--font-b);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
button,input{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
summary::-webkit-details-marker{display:none}

/* ─── Atmosphere ────────────────────────────────────────────────────────
   Four soft pools of light plus a fine asphalt hatch. Fixed and inset past
   the edges, so the page scrolls through the light instead of dragging it
   along, and the drift never exposes a seam. One rasterise, no scroll cost. */
body::before{
  content:'';
  position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38rem 30rem at 4% 4%,   rgba(var(--warm),.22), transparent 64%),
    radial-gradient(34rem 30rem at 99% 19%, rgba(var(--cool),.19), transparent 66%),
    radial-gradient(42rem 32rem at 8% 52%,  rgba(var(--cool),.13), transparent 64%),
    radial-gradient(40rem 32rem at 96% 78%, rgba(var(--warm),.17), transparent 64%),
    radial-gradient(36rem 28rem at 40% 99%, rgba(var(--cool),.12), transparent 66%),
    repeating-linear-gradient(118deg, rgba(243,240,235,.026) 0 1px, transparent 1px 9px);
}

/* Barely-there drift so the light feels like weather, not wallpaper.
   Transform only, and only where there is a mouse and no motion objection. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  body::before{animation:drift 54s var(--ease) infinite alternate;will-change:transform}
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-1.6%,1.4%,0) scale(1.07)}
}

/* Film grain. Fixed + pointer-events:none so it never repaints on scroll. */
body::after{
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--ember);color:#160D03}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);
  z-index:200;padding:.75rem 1.25rem;border-radius:999px;
  background:var(--cream);color:var(--ink);font-weight:500;font-size:.875rem;
  transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* ─── Layout ────────────────────────────────────────────────────────── */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-y);position:relative}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(var(--cool),.055) 14%,rgba(var(--cool),.055) 86%,transparent)}

/* Section lighting.
   The fixed atmosphere alone repeats the same pools for every screenful, which
   reads as one flat tone. These scroll with the document, so each band gets its
   own centre of light and the page warms and cools as you move down it.
   Painted as element backgrounds rather than pseudo-elements, which keeps them
   out of the z-index stack entirely. The two ids that also carry .sec-alt
   restate its band, since an id would otherwise drop it. */
#discounts{
  background:
    radial-gradient(54rem 36rem at 90% 4%,  rgba(var(--warm),.13), transparent 60%),
    radial-gradient(48rem 36rem at 0% 76%,  rgba(var(--cool),.12), transparent 60%);
}
#videos{
  background:
    linear-gradient(180deg,transparent,rgba(var(--cool),.055) 14%,rgba(var(--cool),.055) 86%,transparent),
    radial-gradient(52rem 36rem at 6% 8%,   rgba(var(--cool),.15), transparent 60%),
    radial-gradient(46rem 34rem at 96% 82%, rgba(var(--warm),.11), transparent 60%);
}
#follow{
  background:
    radial-gradient(50rem 34rem at 50% 100%, rgba(var(--warm),.14), transparent 62%),
    radial-gradient(40rem 30rem at 4% 6%,    rgba(var(--cool),.10), transparent 62%);
}
#gear{
  background:
    linear-gradient(180deg,transparent,rgba(var(--cool),.055) 14%,rgba(var(--cool),.055) 86%,transparent),
    radial-gradient(48rem 34rem at 96% 8%,  rgba(var(--cool),.13), transparent 60%),
    radial-gradient(42rem 32rem at 2% 92%,  rgba(var(--warm),.10), transparent 60%);
}
#faq{
  background:
    radial-gradient(52rem 36rem at 4% 14%,  rgba(var(--warm),.11), transparent 62%),
    radial-gradient(44rem 32rem at 98% 88%, rgba(var(--cool),.10), transparent 62%);
}

/* ─── Type ──────────────────────────────────────────────────────────── */
/* Clash Display ships a narrow word space. Negative tracking eats what is left,
   so every display string needs it added back or headings read as one word. */
h1,h2,h3{font-family:var(--font-d);font-weight:600;letter-spacing:-.03em;word-spacing:.13em;line-height:.94}
h1{
  font-size:clamp(3rem,7.4vw,6.5rem);
  font-weight:700;letter-spacing:-.045em;
  margin-block:1.15rem 0;
}
.h1-line{display:block}
.h1-accent{color:var(--ember)}
h2{font-size:clamp(2.15rem,5.4vw,3.9rem);letter-spacing:-.038em}
h3{font-size:1.4rem;letter-spacing:-.028em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-m);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;color:var(--smoke);
  padding:.4rem .85rem .4rem .7rem;border-radius:999px;
  background:var(--shell-bg);border:1px solid var(--hair);
}
.dot{width:5px;height:5px;border-radius:50%;background:var(--ember);flex:none;box-shadow:0 0 0 3px var(--ember-glow)}

.tag{
  font-family:var(--font-m);font-size:.65rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;color:var(--ash);
}

.sec-head{max-width:44rem;margin-bottom:clamp(2.75rem,6vw,4.5rem)}
.sec-head h2{margin-block:1.25rem .9rem}
/* A heading standing on its own carries no trailing gap. */
.sec-head h2:only-child{margin-block:0}
.sec-lede{color:var(--smoke);font-size:1.0625rem;max-width:40rem}
.sec-head-row{
  max-width:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
}

/* ─── Double-bezel frame ────────────────────────────────────────────── */
.frame{
  background:var(--shell-bg);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:var(--pad);
  transition:border-color .55s var(--ease),background .55s var(--ease),transform .55s var(--ease);
}
.frame-in{
  position:relative;
  background:linear-gradient(168deg,rgba(243,240,235,.042),rgba(243,240,235,0) 46%),var(--ink-2);
  border-radius:var(--r-in);
  box-shadow:inset 0 1px 0 rgba(243,240,235,.055);
  height:100%;
  overflow:hidden;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--cream);--btn-fg:#0B0B0C;--orb-bg:rgba(11,11,12,.09);
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.5rem .5rem .5rem 1.35rem;
  border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.9375rem;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;
  transition:transform .5s var(--ease-fluid),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
  will-change:transform;
}
.btn:active{transform:scale(.975)}
.btn-orb{
  width:2rem;height:2rem;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--orb-bg);
  transition:transform .5s var(--ease-fluid),background .4s var(--ease);
}
.btn-orb .ic{width:.875rem;height:.875rem}
.btn:hover .btn-orb{transform:translate(2px,-2px) scale(1.06)}
.btn-orb-lead{margin-left:-.9rem;margin-right:-.1rem}
.btn:hover .btn-orb-lead{transform:translateX(1px) scale(1.06)}

.btn-primary{--btn-bg:var(--cream);--btn-fg:#0B0B0C;--orb-bg:rgba(11,11,12,.1)}
.btn-primary:hover{--btn-bg:#fff;--orb-bg:var(--ember)}
.btn-primary:hover .btn-orb{color:#160D03}

.btn-ghost{
  --btn-bg:transparent;--btn-fg:var(--cream);--orb-bg:rgba(243,240,235,.075);
  border:1px solid var(--hair-hi);
  padding:calc(.5rem - 1px) calc(.5rem - 1px) calc(.5rem - 1px) calc(1.35rem - 1px);
}
.btn-ghost:hover{--btn-bg:rgba(243,240,235,.05);border-color:rgba(243,240,235,.28)}
.btn-sm{font-size:.875rem;padding:.375rem .375rem .375rem 1.1rem}
.btn-sm.btn-ghost{padding:calc(.375rem - 1px) calc(.375rem - 1px) calc(.375rem - 1px) calc(1.1rem - 1px)}
.btn-sm .btn-orb{width:1.75rem;height:1.75rem}

.ic{width:1.25rem;height:1.25rem;fill:none}

/* ─── Nav ───────────────────────────────────────────────────────────── */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:60;padding:1.25rem var(--gut);pointer-events:none}
.nav{
  pointer-events:auto;
  width:max-content;max-width:100%;margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:.5rem .6rem .5rem 1rem;
  border-radius:999px;
  background:rgba(13,13,15,.62);
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(243,240,235,.07);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease-fluid);
}
body.scrolled .nav{background:rgba(13,13,15,.86);border-color:var(--hair-hi)}

.nav-brand{display:flex;align-items:center;gap:.6rem}
.nav-mark{
  width:1.75rem;height:1.75rem;flex:none;border-radius:.55rem;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#1E1913,var(--ink));
  border:1px solid rgba(232,150,58,.3);
  font-family:var(--font-d);font-weight:700;font-size:.9rem;color:var(--cream);
  padding-bottom:1px;
}
.nav-name{font-family:var(--font-d);font-weight:600;font-size:.9375rem;letter-spacing:-.02em;word-spacing:.1em;white-space:nowrap}

.nav-list{display:flex;align-items:center;gap:.15rem}
.nav-list a{
  display:block;padding:.45rem .85rem;border-radius:999px;
  font-size:.875rem;color:var(--smoke);
  transition:color .35s var(--ease),background .35s var(--ease);
}
.nav-list a:hover{color:var(--cream);background:rgba(243,240,235,.06)}

.burger{
  display:none;width:2.25rem;height:2.25rem;border-radius:50%;
  background:rgba(243,240,235,.06);
  position:relative;flex:none;
}
.burger span{
  position:absolute;left:50%;width:15px;height:1.5px;border-radius:2px;background:var(--cream);
  transition:transform .5s var(--ease-fluid),opacity .3s var(--ease);
}
.burger span:nth-child(1){transform:translate(-50%,-4px)}
.burger span:nth-child(2){transform:translate(-50%,3px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translate(-50%,0) rotate(-45deg)}

/* ─── Mobile menu ───────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:55;
  background:rgba(9,9,10,.9);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  backdrop-filter:blur(28px) saturate(1.4);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gut) 3rem;
  opacity:0;transition:opacity .45s var(--ease);
}
.menu[hidden]{display:none}
.menu.open{opacity:1}
.menu-list{display:flex;flex-direction:column;gap:.25rem}
.menu-list a{
  display:flex;align-items:baseline;gap:1.1rem;
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(2.25rem,11vw,3.25rem);letter-spacing:-.04em;word-spacing:.12em;line-height:1.16;
  padding-block:.35rem;
  opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease) calc(var(--i)*55ms + 90ms),transform .7s var(--ease-fluid) calc(var(--i)*55ms + 90ms),color .3s var(--ease);
}
.menu-num{font-family:var(--font-m);font-size:.7rem;font-weight:500;color:var(--ember);letter-spacing:.1em}
.menu-list a:hover{color:var(--ember)}
.menu-foot{
  display:flex;gap:.6rem;margin-top:2.75rem;
  opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease) calc(var(--i)*55ms + 90ms),transform .7s var(--ease-fluid) calc(var(--i)*55ms + 90ms);
}
.menu-foot a{
  width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair);color:var(--smoke);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.menu-foot a:hover{color:var(--cream);border-color:var(--hair-hi);background:rgba(243,240,235,.05)}
.menu.open .menu-list a,.menu.open .menu-foot{opacity:1;transform:translateY(0)}
body.menu-open{overflow:hidden}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(7.5rem,11vw,9.5rem) clamp(3.5rem,8vw,6rem);overflow:hidden}
.hero-glow{
  position:absolute;left:-18%;top:8%;width:min(46rem,90vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(var(--warm),.10),rgba(var(--warm),.03) 44%,transparent 68%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center;position:relative;
}
.hero-tag{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--ember);
  margin-top:1.25rem;letter-spacing:-.02em;word-spacing:.1em;
}
.hero-lede{color:var(--smoke);max-width:33rem;margin-top:.9rem;font-size:1.0625rem}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.85rem}
.hero-meta{margin-top:1.5rem;font-size:.875rem;color:var(--ash)}
.hero-meta strong{
  font-family:var(--font-m);font-weight:500;color:var(--cream);
  font-size:.9375rem;letter-spacing:-.01em;
}

.hero-art{position:relative;justify-self:end;width:100%;max-width:27rem}
.frame-tilt{transform:rotate(-2.2deg);transition:transform .9s var(--ease-fluid)}
.hero-art:hover .frame-tilt{transform:rotate(-1deg)}
.frame-tilt .frame-in{border-radius:calc(var(--r) - var(--pad))}
.frame-tilt img{width:100%;aspect-ratio:1;object-fit:cover}

.chip-live{
  position:absolute;left:-1rem;bottom:1.75rem;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1rem;border-radius:999px;
  background:rgba(13,13,15,.85);border:1px solid var(--hair-hi);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--font-m);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--smoke);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,150,58,.5)}
  55%{box-shadow:0 0 0 7px rgba(232,150,58,0)}
}

/* ─── Marquee ───────────────────────────────────────────────────────── */
.marquee{
  border-block:1px solid var(--hair);
  padding-block:1.1rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;align-items:center;width:max-content;
  /* -50% now travels three sets instead of one, so the duration triples to
     keep the pixels-per-second identical to before. */
  animation:slide 126s linear infinite;
}
.marquee-set{display:flex;align-items:center;gap:1.75rem;padding-right:1.75rem}
.marquee-track span{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(.95rem,1.7vw,1.15rem);letter-spacing:-.02em;word-spacing:.1em;color:var(--ash);
  white-space:nowrap;
}
.marquee-track i{color:var(--ember);font-style:normal;font-size:.55rem;opacity:.75}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─── Discounts ─────────────────────────────────────────────────────── */
.codes{display:grid;grid-template-columns:repeat(12,1fr);gap:1.15rem}
.code-card{grid-column:span 5}
.code-card.is-feature{grid-column:span 7}
.links-card{grid-column:span 7}

.code-card .frame-in{
  padding:clamp(1.6rem,3vw,2.2rem);
  display:flex;flex-direction:column;gap:1.1rem;
}
.code-card:hover{border-color:var(--hair-hi);background:rgba(243,240,235,.045)}
.code-card.is-feature .frame-in{
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(232,150,58,.09),transparent 55%),
    var(--ink-2);
}
.card-top h3{margin-top:.55rem;font-size:clamp(1.55rem,3vw,2rem);font-weight:700;letter-spacing:-.035em}
.card-head{color:var(--cream);font-size:1rem;margin-top:.3rem;font-weight:450}
.card-blurb{color:var(--smoke);font-size:.9375rem;line-height:1.62;flex:1}
.card-foot{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.25rem}
.card-note{font-family:var(--font-m);font-size:.7rem;color:var(--ash);letter-spacing:.09em;text-transform:uppercase}

/* Copy-to-clipboard chip */
.code{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.5rem .6rem .5rem 1rem;border-radius:.85rem;
  background:rgba(232,150,58,.09);
  border:1px dashed rgba(232,150,58,.42);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease-fluid);
}
.code:hover{background:rgba(232,150,58,.15);border-color:rgba(232,150,58,.68)}
.code:active{transform:scale(.975)}
.code-label{
  font-family:var(--font-m);font-size:.6rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ember-lo);
}
.code-val{
  font-family:var(--font-m);font-size:1rem;font-weight:500;
  letter-spacing:.01em;color:var(--ember);
}
.code-act{
  width:1.75rem;height:1.75rem;border-radius:.55rem;flex:none;
  display:grid;place-items:center;background:rgba(232,150,58,.14);color:var(--ember);
  position:relative;
}
.code-act .ic{width:.9rem;height:.9rem;grid-area:1/1;transition:opacity .3s var(--ease),transform .4s var(--ease-fluid)}
.code-act .ic-check{opacity:0;transform:scale(.5)}
.code.copied{background:rgba(232,150,58,.2);border-style:solid;border-color:var(--ember)}
.code.copied .ic-copy{opacity:0;transform:scale(.5)}
.code.copied .ic-check{opacity:1;transform:scale(1)}

/* Ciro3D link list */
.links-card .frame-in{padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column}
.links-head{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-start}
.links-head h3{margin-top:.55rem;font-size:clamp(1.55rem,3vw,2rem);font-weight:700;letter-spacing:-.035em}
.links-note{color:var(--smoke);font-size:.875rem;max-width:17rem;text-align:right}
.links-list{margin-top:1.5rem;border-top:1px solid var(--hair)}
.links-list li{border-bottom:1px solid var(--hair)}
.links-list a{
  display:flex;align-items:center;gap:1rem;padding:1rem .25rem;
  transition:padding .5s var(--ease-fluid);
}
.links-list a:hover{padding-left:.7rem;padding-right:0}
.links-idx{font-family:var(--font-m);font-size:.7rem;color:var(--ember);flex:none;letter-spacing:.08em}
.links-body{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.links-title{font-size:.9375rem;font-weight:500;letter-spacing:-.015em}
.links-sub{font-size:.8125rem;color:var(--ash);line-height:1.5}
.links-list .btn-orb{background:rgba(243,240,235,.07);color:var(--smoke)}
.links-list a:hover .btn-orb{background:var(--ember);color:#160D03;transform:translate(2px,-2px)}

.disclose{
  margin-top:2rem;font-size:.8125rem;color:var(--ash);
  max-width:46rem;line-height:1.65;
  padding-left:1rem;border-left:1px solid var(--hair-hi);
}

/* ─── Videos ────────────────────────────────────────────────────────── */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 1.25rem}
.vid a{display:block}
.vid-thumb{
  display:block;position:relative;overflow:hidden;
  border-radius:1.1rem;aspect-ratio:16/9;
  background:var(--ink-3);border:1px solid var(--hair);
}
.vid-thumb img{position:absolute;inset:0;width:100%;height:100%}
/* Backdrop: the same bitmap, blown up and blurred, so vertical Shorts sit on
   their own colour instead of YouTube's grey padding. Static filter, so the
   browser rasterises it once and never re-runs it on scroll. */
.vid-bg{
  object-fit:cover;transform:scale(1.6);
  filter:blur(18px) saturate(1.3) brightness(.5);
}
.vid-fg{
  object-fit:contain;
  transition:transform .9s var(--ease-fluid);
}
.vid a:hover .vid-fg{transform:scale(1.045)}
.vid-play{
  position:absolute;inset:0;margin:auto;
  width:3.1rem;height:3.1rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,11,12,.62);border:1px solid rgba(243,240,235,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--cream);
  opacity:0;transform:scale(.82);
  transition:opacity .45s var(--ease),transform .55s var(--ease-fluid),background .4s var(--ease);
}
.vid-play .ic{width:1.15rem;height:1.15rem;margin-left:2px}
.vid a:hover .vid-play{opacity:1;transform:scale(1)}
.vid a:hover .vid-play{background:var(--ember);color:#160D03;border-color:transparent}
.vid-badge{
  position:absolute;top:.7rem;left:.7rem;
  font-family:var(--font-m);font-size:.6rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  padding:.28rem .55rem;border-radius:.4rem;
  background:rgba(11,11,12,.78);color:var(--smoke);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.vid-meta{
  display:flex;align-items:center;gap:.45rem;margin-top:.95rem;
  font-family:var(--font-m);font-size:.6875rem;color:var(--ash);letter-spacing:.06em;
}
.vid-dot{opacity:.5}
.vid-title{
  font-family:var(--font-b);font-size:.9375rem;font-weight:450;
  line-height:1.5;letter-spacing:-.012em;margin-top:.4rem;
  color:var(--cream);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .35s var(--ease);
}
.vid a:hover .vid-title{color:var(--ember)}

.empty .frame-in{padding:clamp(2.5rem,6vw,4rem);text-align:center;display:grid;gap:.6rem;justify-items:center}
.empty-head{font-family:var(--font-d);font-size:1.35rem;font-weight:600;letter-spacing:-.025em;word-spacing:.1em}
.empty-sub{color:var(--smoke);font-size:.9375rem;max-width:30rem;margin-bottom:.8rem}

/* Facebook embed */
.fb{margin-top:clamp(3.5rem,8vw,5.5rem)}
.fb-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.fb-head h3{margin-top:.5rem;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.035em}
.fb-note{color:var(--smoke);font-size:.875rem}
.fb-frame .frame-in{min-height:19rem;display:grid;place-items:center;padding:1.5rem}
.fb-ask{text-align:center;display:grid;gap:1.25rem;justify-items:center;max-width:26rem}
.fb-ask p{color:var(--smoke);font-size:.9375rem}
.fb-ask-btns{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
#fb-slot iframe{border:none;overflow:hidden;width:100%;max-width:500px}

/* ─── Socials ───────────────────────────────────────────────────────── */
.socials{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.soc .frame-in{
  padding:1.5rem;display:flex;flex-direction:column;gap:.15rem;min-height:14.5rem;
}
.soc:hover{border-color:var(--hair-hi);background:rgba(243,240,235,.05);transform:translateY(-3px)}
.soc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:auto}
.soc-ic{width:1.6rem;height:1.6rem;color:var(--smoke);transition:color .4s var(--ease)}
.soc:hover .soc-ic{color:var(--cream)}
.soc .btn-orb{background:rgba(243,240,235,.06);color:var(--ash);width:1.85rem;height:1.85rem}
.soc:hover .btn-orb{background:var(--ember);color:#160D03;transform:translate(2px,-2px)}
.soc-count{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.5rem);letter-spacing:-.045em;line-height:1;
}
.soc-unit{font-family:var(--font-m);font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ash);margin-top:.4rem}
.soc-name{font-size:.9375rem;font-weight:500;margin-top:.9rem;letter-spacing:-.015em}
.soc-note{font-size:.8125rem;color:var(--ash);margin-top:.15rem}
.soc.is-primary .frame-in{
  background:
    radial-gradient(120% 100% at 0% 100%,rgba(232,150,58,.11),transparent 58%),
    var(--ink-2);
}
.soc.is-primary .soc-count{color:var(--ember)}

/* ─── Kit ───────────────────────────────────────────────────────────── */
.kit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.kit-copy h2{margin-block:1.25rem .9rem}
.kit-copy .btn{margin-top:1.75rem}
.kit-list{border-top:1px solid var(--hair)}
.kit-list li{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.35rem .25rem;border-bottom:1px solid var(--hair);
}
.kit-idx{font-family:var(--font-m);font-size:.7rem;color:var(--ember);flex:none;letter-spacing:.08em}
.kit-body{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.kit-name{font-family:var(--font-d);font-size:1.15rem;font-weight:600;letter-spacing:-.028em;word-spacing:.1em}
.kit-why{font-size:.875rem;color:var(--ash);line-height:1.55}
.kit-cat{
  font-family:var(--font-m);font-size:.65rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ash);flex:none;
  padding:.3rem .65rem;border-radius:999px;border:1px solid var(--hair);
}

/* ─── Reel band ─────────────────────────────────────────────────────────
   Full-bleed strip of his own reel covers, breaking up the run of text
   between Follow and the kit list. Same transform-only marquee as the
   brand strip, so it costs nothing to keep moving. */
.band{
  overflow:hidden;
  margin-top:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.25rem,3vw,2rem);
  border-block:1px solid var(--hair);
  background:
    radial-gradient(60rem 20rem at 50% 50%, rgba(var(--warm),.07), transparent 70%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.band-track{
  display:flex;width:max-content;
  animation:slide 174s linear infinite;
}
.band-set{display:flex;gap:.85rem;padding-right:.85rem}
.band:hover .band-track{animation-play-state:paused}
.band figure{
  flex:none;
  width:clamp(7.5rem,13vw,10.5rem);
  aspect-ratio:9/16;
  border-radius:1.1rem;
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--ink-3);
  transition:transform .7s var(--ease-fluid),border-color .5s var(--ease);
}
.band figure:hover{transform:translateY(-6px) scale(1.02);border-color:var(--hair-hi)}
.band img{width:100%;height:100%;object-fit:cover}

/* ─── Section photo ─────────────────────────────────────────────────────
   Reuses the double-bezel frame so it sits in the same material language
   as the cards. */
.shot{margin-top:2.25rem;max-width:22rem}
.shot .frame-in{overflow:hidden}
.shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease-fluid)}
.shot:hover img{transform:scale(1.035)}
.faq-head .shot{max-width:22rem}

/* ─── FAQ ───────────────────────────────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.faq-head h2{margin-top:1.25rem}
.faq-list{border-top:1px solid var(--hair)}
.faq-list details{border-bottom:1px solid var(--hair)}
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem .25rem;cursor:pointer;list-style:none;
  font-family:var(--font-b);font-size:1.0625rem;font-weight:500;letter-spacing:-.016em;
  transition:color .35s var(--ease);
}
.faq-list summary:hover{color:var(--ember)}
.faq-sign{position:relative;width:.85rem;height:.85rem;flex:none}
.faq-sign::before,.faq-sign::after{
  content:'';position:absolute;inset:0;margin:auto;
  background:var(--ember);border-radius:2px;
  transition:transform .5s var(--ease-fluid),opacity .35s var(--ease);
}
.faq-sign::before{width:100%;height:1.5px}
.faq-sign::after{width:1.5px;height:100%}
details[open] .faq-sign::after{transform:rotate(90deg);opacity:0}
.faq-body{padding:0 .25rem 1.5rem;max-width:44rem}
.faq-body p{color:var(--smoke);font-size:.9375rem;line-height:1.72}
details[open] .faq-body{animation:faqIn .55s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ─── Footer ────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--hair);padding-block:clamp(3rem,6vw,4.5rem)}
.foot-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;padding-bottom:2.5rem;
}
.foot-brand{display:flex;align-items:center;gap:.75rem}
.foot-name{font-family:var(--font-d);font-weight:600;font-size:1rem;letter-spacing:-.025em;word-spacing:.1em}
.foot-place{font-family:var(--font-m);font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ash);margin-top:.15rem}
.foot-nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-nav a{font-size:.875rem;color:var(--smoke);transition:color .35s var(--ease)}
.foot-nav a:hover{color:var(--cream)}
.foot-soc{display:flex;gap:.5rem}
.foot-soc a{
  width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair);color:var(--ash);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.foot-soc a:hover{color:var(--cream);border-color:var(--hair-hi);background:rgba(243,240,235,.05)}
.foot-soc .ic{width:1.05rem;height:1.05rem}
.foot-bottom{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.75rem;border-top:1px solid var(--hair);
  font-size:.8125rem;color:var(--ash);
}
.foot-credit a{color:var(--smoke);border-bottom:1px solid rgba(232,150,58,.45);padding-bottom:1px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.foot-credit a:hover{color:var(--ember);border-color:var(--ember)}

/* ─── Toast ─────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:1.75rem;z-index:120;
  transform:translate(-50%,140%);
  padding:.7rem 1.25rem;border-radius:999px;
  background:var(--cream);color:var(--ink);
  font-size:.875rem;font-weight:500;white-space:nowrap;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-fluid),opacity .4s var(--ease);
  opacity:0;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ─── Scroll reveal ─────────────────────────────────────────────────── */
/* Gated behind .js, which the inline head script sets before first paint.
   Without it the content stays visible: a blocked, failed or slow script
   must never leave the page blank. */
.js .reveal{
  opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .85s var(--ease) var(--d,0ms),transform .95s var(--ease-fluid) var(--d,0ms),filter .85s var(--ease) var(--d,0ms);
}
.js .reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .vids{grid-template-columns:repeat(2,1fr)}
  .socials{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .nav-list{display:none}
  .burger{display:block}
  .nav{width:100%;justify-content:space-between}

  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero-art{justify-self:start;max-width:22rem;margin-inline:auto}
  .frame-tilt{transform:none}
  .hero-art:hover .frame-tilt{transform:none}
  .chip-live{left:auto;right:-.5rem;bottom:-.75rem}

  .codes{grid-template-columns:1fr;gap:1rem}
  .code-card,.code-card.is-feature,.links-card{grid-column:1/-1}
  .links-note{text-align:left;max-width:none}

  .kit-grid,.faq-grid{grid-template-columns:1fr;gap:2.5rem}
  .shot,.faq-head .shot{max-width:100%;margin-top:1.75rem}
  .sec-head-row{align-items:flex-start;flex-direction:column}
}

@media (max-width:560px){
  :root{--r:1.5rem}
  .nav-name{display:none}
  .vids{grid-template-columns:1fr;gap:1.75rem}
  .socials{grid-template-columns:1fr}
  .soc .frame-in{min-height:0;padding:1.35rem}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;justify-content:center;min-width:13rem}
  .kit-list li{flex-wrap:wrap;gap:.75rem 1rem}
  .kit-cat{order:3;margin-left:auto}
  .foot-top{flex-direction:column;align-items:flex-start;gap:2rem}
  .card-foot{width:100%}
  .card-foot .code{flex:1}
}

/* ─── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none;filter:none}
  .marquee-track,.band-track,body::before{animation:none}
  .frame-tilt{transform:none}
}