:root{
    --ink:var(--ds-ink); --body:#4a4550; --gold:var(--ds-gold-line); --gold-deep:#7A6446;
    --ivory:var(--ds-ivory); --line:#ece3d1;
  }
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
  .display{font-family:'Manrope', ui-sans-serif, system-ui, sans-serif}
  h1,h2{text-wrap:balance;letter-spacing:-.03em;line-height:1.05}
  h3,h4{font-family:'Inter','Inter',sans-serif;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
  p{line-height:1.65}
  main > section{padding-top:clamp(96px,10vw,144px);padding-bottom:clamp(96px,10vw,144px)}
  a,button{transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:9999px}
  .gold-shimmer{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    background:linear-gradient(180deg, var(--ds-gold) 0%, #C9A33D 52%, #C58E3A 100%);
    border:1px solid rgba(145,113,0,0.85);
    overflow:hidden;
    isolation:isolate;
    color:#FFFDE5;
    text-shadow:0 -1px 0 rgba(178,140,2,0.85);
    transition:transform 0.25s cubic-bezier(0.1,0.4,0.2,1), box-shadow 0.25s cubic-bezier(0.1,0.4,0.2,1), filter var(--dur-base) var(--ease-standard);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -2px 0 rgba(0,0,0,0.08),
      0 6px 18px -4px rgba(246,197,118,0.45),
      0 2px 4px rgba(31,26,21,0.12);
  }
  .gold-shimmer::before{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,253,221,0.55) 0%, rgba(133,104,7,0.18) 55%, rgba(255,241,179,0.35) 100%);
    pointer-events:none;
    z-index:-1;
  }
  .gold-shimmer::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.55) 55%, transparent 80%);
    transform:translateX(-120%);
    animation:shimmerSweep 3s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes shimmerSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
  .gold-shimmer:hover{
    filter:brightness(1.05);
    transform:translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 0 rgba(0,0,0,0.06),
      0 12px 28px -8px rgba(246,197,118,0.55),
      0 4px 8px rgba(31,26,21,0.14);
  }
  .gold-shimmer:active{
    transform:translateY(0) scale(0.98);
    filter:brightness(0.95);
  }
  .gold-shimmer iconify-icon{
    transition:transform var(--dur-base) var(--ease-standard);
  }
  .gold-shimmer:hover iconify-icon{
    transform:translateX(3px);
  }
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
  .marquee{display:flex;gap:24px;width:max-content;animation:slide 46s linear infinite}
  .marquee:hover{animation-play-state:paused}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .chapter-num{font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;font-size:clamp(64px,9vw,132px);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--gold);opacity:.65}
  .grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.marquee{animation:none}.gold-shimmer{animation:none}.gold-shimmer::after{animation:none}}
  @media (max-width:640px){a[class*="rounded-full"],button{min-height:44px}}

/* --- mobile audit fixes --- */
footer a,.site-footer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:639px){
  .eyebrow{font-size:12px!important}
  .marquee,.logo-track{animation-play-state:paused!important}
  .btn,.btn-premium,.gold-shimmer{min-height:48px!important}
}
@media(prefers-reduced-motion:reduce){.marquee,.logo-track{animation:none!important}}
.drawer{height:100dvh!important}
.card-title-link,.prod-link{min-height:44px;display:inline-flex;align-items:center}


/* --- mobile-first polish (<=640px) --- */
@media (max-width:640px){
  .text-\[10px\]{font-size:11.5px!important;line-height:1.5!important}
  .text-\[11px\]{font-size:12px!important;line-height:1.55!important}
  .tracking-\[0\.32em\]{letter-spacing:.2em!important}
  .tracking-\[0\.28em\]{letter-spacing:.18em!important}
  .tracking-\[0\.26em\]{letter-spacing:.17em!important}
  p,li{text-wrap:pretty}
  h1,h2,h3{text-wrap:balance;overflow-wrap:anywhere}
  img,video,svg,table{max-width:100%}
}
@media (max-width:900px){
  footer a,nav a,header a{min-height:44px;display:inline-flex;align-items:center}
  label:has(input[type=checkbox]),label:has(input[type=radio]){min-height:44px;display:flex;align-items:center}
  input,select,textarea{font-size:16px!important}
}
/* Mobile-first centering */
@media (max-width: 768px) {
  main section h1,
  main section h2,
  main section h3,
  main section h4,
  main section p,
  main section .eyebrow,
  main section [class*="eyebrow"],
  main section .hero-trust-row,
  main section .display,
  main section dl,
  main section dt,
  main section dd,
  main section li,
  main section h2 .word,
  main section h3 .word,
  main section .reveal-title .word,
  main section .reveal-title {
    text-align: center !important;
  }
  main section .flex:not(.logo-track):not(.marquee):not(.items-start),
  main section .grid {
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
  }
  main section .max-w-xl,
  main section .max-w-lg,
  main section .max-w-2xl,
  main section .max-w-3xl,
  main section .max-w-4xl,
  main section .max-w-5xl,
  main section > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main section div:not(.logo-track):not(.marquee),
  main section article,
  main section li,
  main section dl > div {
    text-align: center !important;
  }
  main section img:not(.logo-badge):not(.w-full):not([class*="h-full"]) {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main section .max-w-md,
  main section .max-w-sm,
  main section .max-w-prose,
  main section form {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main section a.inline-flex,
  main section a[class*="skeuomorphic"],
  main section button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .skeuomorphic-btn,
  .skeuomorphic-btn-secondary,
  .gold-shimmer,
  .btn-premium,
  .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* clean+bold pairing: Manrope display, Inter body */
h1,h2,h3,h4,h5,.display,.brand-logo{font-family:'Manrope',ui-sans-serif,system-ui,sans-serif!important;font-style:normal!important;letter-spacing:-.02em}
h1,h2{font-weight:600!important}
h3,h4,h5{font-weight:500!important}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}

/* .gold-shimmer's display:inline-flex was overriding .hidden on the header CTA, pushing the
   page ~530px wide on phones. Keep it hidden below the sm breakpoint as the markup intends. */
@media (max-width:639px){.gold-shimmer.hidden{display:none}}