/* ==========================================================================
   Bookuble — shared layer: tokens, base type, buttons, header, footer.
   Every page links this; nothing here is page-specific. Tokens are lifted
   verbatim from the Bookuble design system
   (Bookuble_Design_System/_ds/bookuble-design-system-430d1c64/tokens/*).
   Ramps 300/400 are sampled from the brand renders; the rest derive.
   ========================================================================== */
:root{
  /* Ink — cool near-black neutrals. The brand lives on ink-950. */
  --ink-1000:#08080a; --ink-950:#0e0e10; --ink-900:#131315; --ink-850:#17171a;
  --ink-800:#1f1f23; --ink-750:#26262b; --ink-700:#2f2f35; --ink-600:#3a3a42;
  --ink-500:#55555f; --ink-400:#74747f; --ink-300:#9797a2; --ink-200:#bfbfc8;
  --ink-150:#d7d7de; --ink-100:#e7e7ec; --ink-50:#f3f3f6;
  --pearl:#e9e7ee; --pearl-dim:#c8c5d2; --white:#fff;

  --steel-300:#97b5d1; --steel-400:#7398b8; --steel-500:#587e9f; --steel-700:#37536d;
  --lilac-300:#b7accd; --lilac-400:#9b8fb4;
  --sage-300:#ccd6b4; --champagne-400:#c79e80; --rose-300:#e39c84;
  --jade-300:#b4c79f; --jade-600:#61794f;
  --amber-300:#dcb894; --amber-600:#8a6549;
  --coral-300:#d9a294; --coral-600:#874c42;

  /* Chrome — spectrum for headlines/CTAs, steel for surfaces. */
  --chrome-spectrum:linear-gradient(100deg,#97b5d1 0%,#9b8fb4 20%,#ccd6b4 42%,#e39c84 62%,#c79e80 74%,#9b8fb4 88%,#97b5d1 100%);
  --chrome-spectrum-wide:linear-gradient(100deg,#97b5d1 0%,#9b8fb4 14%,#ccd6b4 28%,#e39c84 42%,#c79e80 52%,#e39c84 62%,#ccd6b4 74%,#9b8fb4 88%,#97b5d1 100%);
  --chrome-hairline:linear-gradient(90deg,transparent,rgba(151,181,209,.5) 18%,rgba(155,143,180,.62) 50%,rgba(227,156,132,.5) 82%,transparent);
  --steel-face:linear-gradient(176deg,#3c3c46 0%,#2c2c36 22%,#202028 58%,#17171d 100%);
  --steel-face-hover:linear-gradient(176deg,#4a4a56 0%,#363642 22%,#27272f 58%,#1c1c23 100%);
  --steel-deep:linear-gradient(176deg,#24242c 0%,#1b1b22 44%,#15151a 100%);
  --steel-sunken:linear-gradient(176deg,#101014 0%,#16161b 100%);
  --steel-bloom:radial-gradient(120% 90% at 30% -20%,rgba(255,255,255,.14),transparent 62%);
  --rim-steel:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(233,231,238,.06);
  --rim-chrome:inset 0 0 0 1px rgba(151,181,209,.4);
  --rim-chrome-soft:inset 0 0 0 1px rgba(151,181,209,.22);
  --wall-texture:radial-gradient(120% 90% at 50% 0%,#26262b 0%,#17171a 42%,#0e0e10 100%);
  --scrim-dark:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.72) 62%,rgba(8,8,10,.95) 100%);

  --font-display:"Gabarito","Trebuchet MS",system-ui,sans-serif;
  --font-text:"Manrope",system-ui,-apple-system,sans-serif;
  --font-mono:"Fragment Mono",ui-monospace,"SF Mono",monospace;
  --tracking-brand:.14em;

  /* Smallest body copy. The ink ramp's 400/500 steps are display greys and
     fail AA at 12-14px on these grounds; this clears 4.5 on both. */
  --text-3:#8a8a95;

  --shadow-lift:0 18px 40px -18px rgba(0,0,0,.8);
  --maxw:1180px;
  --gutter:clamp(18px,5vw,44px);
  --sec:clamp(56px,7.4vw,104px);
  --r:14px; --r-lg:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ink-950);
  color:var(--ink-150);
  font-family:var(--font-text);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is load-bearing, not boilerplate. Both watermarks set width in
   CSS and carry width/height attributes for CLS; without this the max-width
   clamp shrinks the width while the height attribute pins the height, and the
   mark renders squeezed (390x500 on a 500x500 source). Anything that wants a
   real height sets one and wins on specificity. */
img,video{max-width:100%;height:auto;display:block}
a{color:var(--steel-300);text-decoration:none}
a:hover{color:var(--pearl)}
:focus-visible{outline:2px solid var(--steel-300);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- chrome type ------------------------------------------------------- */
.chrome{
  background:var(--chrome-spectrum-wide);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:sweep 14s linear infinite;
}
@keyframes sweep{from{background-position:0 0}to{background-position:230% 0}}
.eyebrow{
  font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:var(--tracking-brand);text-transform:uppercase;
  color:var(--steel-300);margin:0;
}
.rule{height:1px;background:var(--chrome-hairline);border:0;margin:0}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:15px 26px;border-radius:11px;border:0;cursor:pointer;
  transition:transform .18s ease,filter .18s ease,background .18s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-chrome{background:var(--chrome-spectrum);color:var(--ink-1000);box-shadow:var(--shadow-lift)}
.btn-chrome:hover{filter:brightness(1.08);color:var(--ink-1000)}
.btn-outline{background:transparent;color:var(--pearl);box-shadow:var(--rim-chrome-soft)}
.btn-outline:hover{background:rgba(151,181,209,.09);color:var(--pearl)}
.btn-steel{background:var(--steel-face);color:var(--pearl);box-shadow:var(--rim-steel)}
.btn-steel:hover{background:var(--steel-face-hover);color:var(--pearl)}
.btn-sm{padding:10px 17px;font-size:13.5px;border-radius:9px}
.btn-full{width:100%}
.btn svg{width:17px;height:17px;flex:none}

/* --- header ------------------------------------------------------------ */
.hdr{
  position:sticky;top:0;z-index:50;
  padding:13px 0;
  background:rgba(14,14,16,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.hdr.stuck{background:rgba(11,11,13,.9);border-bottom-color:rgba(233,231,238,.08)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:31px;height:31px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand .name{
  font-family:var(--font-display);font-size:17px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.nav{display:none;gap:30px;font-size:14.5px}
.nav a{color:var(--ink-200)}
.nav a:hover{color:var(--pearl)}
@media (min-width:900px){.nav{display:flex}}
.hdr-cta{display:none}
@media (min-width:560px){.hdr-cta{display:inline-flex}}

/* --- footer ------------------------------------------------------------ */
.ftr{background:var(--ink-1000);padding-block:clamp(48px,7vw,80px) 34px;border-top:1px solid rgba(233,231,238,.07)}
.ftr-top{display:grid;gap:34px;grid-template-columns:1fr;margin-bottom:38px}
@media (min-width:760px){.ftr-top{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}}
.ftr h4{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:var(--tracking-brand);text-transform:uppercase;color:var(--ink-300);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr li a{font-size:14px;color:var(--text-3)}
.ftr li a:hover{color:var(--pearl)}
.ftr-brand p{font-size:14px;color:var(--text-3);max-width:34ch;margin-top:13px}
.ftr-btm{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(233,231,238,.07);font-size:12.5px;color:var(--text-3)}

/* Chrome sweep is decoration; hold it still when motion is unwelcome. */
@media (prefers-reduced-motion:reduce){
  .chrome{animation:none}
}