/* ============================================================
   Weblytica — site components
   Built on the Weblytica design system (tokens in ds/).
   Desktop values mirror the approved mockups 1:1; breakpoints
   below adapt them down to tablet and mobile.
   ============================================================ */
@import url("ds/fonts.css");
@import url("ds/colors.css");
@import url("ds/typography.css");
@import url("ds/spacing.css");
@import url("ds/effects.css");
@import url("ds/base.css");

/* ---- Page scaffold ------------------------------------------------ */
.page { background: #fff; overflow-x: hidden; }

/* Reset browser margins inside our gap-driven layouts */
.hero h1, .hero p,
.section h2, .section h3,
.band-center h2, .band-center p,
.prose p, .card p, .step-card p, .fit-card p,
.callout p, .callout__title, .section-head p,
.faq h2, .faq p, .pullquote p { margin: 0; }

/* ---- Header / nav ------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 20px 64px;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__logo-link { display: flex; }
.site-header__logo { height: 30px; display: block; }
.site-nav { display: flex; align-items: center; gap: 36px; }
.navlink {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--navy-900); text-decoration: none;
}
.navlink:hover { color: var(--orange-600); text-decoration: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border-default);
  background: #fff; border-radius: var(--radius-md); cursor: pointer;
  align-items: center; justify-content: center; color: var(--navy-900);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

/* ---- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
  border-radius: var(--radius-pill); transition: var(--transition-base);
  cursor: pointer; border: 0; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--orange-500); color: var(--navy-900); }
.btn--primary:hover { background: var(--orange-600); }
.btn--outline { background: #fff; border: 2px solid var(--border-default); color: var(--navy-900); }
.btn--outline:hover { border-color: var(--navy-900); }
.btn--nav  { padding: 12px 24px; font-size: 15px; }
.btn--hero { padding: 18px 34px; font-size: 17px; box-shadow: var(--shadow-accent-sm); }
.btn--hero.btn--outline { padding: 16px 32px; box-shadow: none; }
.btn--cta  { padding: 18px 36px; font-size: 17px; box-shadow: var(--shadow-accent); margin-top: 8px; }

/* ---- Hero --------------------------------------------------------- */
.hero { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 34%,
    rgba(255,255,255,0.55) 58%, rgba(255,255,255,0.02) 82%);
}
.hero__inner {
  position: relative; max-width: 1312px; margin: 0 auto;
  padding: 96px 64px; width: 100%; box-sizing: border-box;
}
.hero__content { max-width: 620px; display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 58px;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--navy-900);
}
.hero__lead { font-family: var(--font-body); font-size: 19px; line-height: var(--lh-relaxed); color: var(--gray-700); }
.hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* Mobile: a soft rounded background is cloned onto EACH line of the hero eyebrow
   and lead text so the words stay readable over the photo (with a gap between
   lines, not one full block). Uses the theme's own hero-overlay color: white in
   light mode, charcoal in dark. Only elements wrapped in .hero-hl get it. */
@media (max-width: 680px) {
  .hero__content .eyebrow,
  .hero__content .hero__lead { line-height: 1.9; }
  .hero__content .hero-hl {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: rgba(255, 255, 255, 0.30);
    padding: 0.12em 0.36em;
    border-radius: 7px;
  }
  [data-theme="dark"] .hero__content .hero-hl { background: rgba(28, 32, 40, 0.30); }
}

/* Hero variants */
.hero--claude h1 { font-size: 54px; }
.hero--ai h1 { font-size: 56px; }
.hero--ai .hero__overlay {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 36%,
    rgba(255,255,255,0.6) 58%, rgba(255,255,255,0.04) 82%);
}
.hero--split { background: var(--gray-50); }
.hero--split .hero__img { left: auto; right: 0; width: 62%; }
.hero--split .hero__overlay {
  background: linear-gradient(90deg,
    rgba(247,248,251,1) 0%, rgba(247,248,251,1) 40%,
    rgba(247,248,251,0.72) 58%, rgba(247,248,251,0.02) 84%);
}

/* ---- Sections & containers --------------------------------------- */
.section { padding: 104px 64px; }
.section--success { padding: 112px 64px; background: var(--orange-50); }
.section--cta { background: var(--navy-900); }
.bg-white { background: #fff; }
.bg-gray  { background: var(--gray-50); }
.container       { max-width: 1184px; margin: 0 auto; }
.container--narrow { max-width: 880px; margin: 0 auto; }
.container--faq  { max-width: 800px; margin: 0 auto; }

.eyebrow--after { color: var(--orange-700); }
.section h2, .band-center h2 { letter-spacing: var(--ls-tight); }

.section-stack { display: flex; flex-direction: column; gap: 56px; }
.section-head { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.section-head--wide { max-width: 720px; }
.section-head p { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--gray-800); }

/* ---- Prose / two-column splits ----------------------------------- */
.split-420 { display: grid; grid-template-columns: 420px 1fr; gap: 80px; }
.split-360 { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: start; }
.col-head { display: flex; flex-direction: column; gap: 20px; }
.prose { display: flex; flex-direction: column; gap: 24px; }
.prose p { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--gray-800); }
.note-md { max-width: 760px; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--gray-800); margin: 0; }

.link-accent { color: var(--orange-700); font-weight: 600; }
.link-more { color: var(--orange-600); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ---- Callout boxes ----------------------------------------------- */
.callout { background: var(--gray-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 32px 36px; display: flex; flex-direction: column; gap: 12px; }
.callout--roomy { padding: 36px 40px; gap: 14px; }
.callout__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--navy-900); }
.callout__title--sm { font-size: var(--fs-base); }
.callout p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); }

.pullquote { border-left: 3px solid var(--orange-500); padding: 4px 0 4px 28px; margin-top: 8px; }
.pullquote p { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--navy-900); }

/* ---- Stack card (tech list) -------------------------------------- */
.stack-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 24px; }
.stack-card__label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--gray-500); }
.stack-card__icon { width: 40px; height: 40px; }
.stack-row { display: flex; align-items: center; gap: 16px; }
.stack-row img { width: 36px; height: 36px; }
.stack-row__meta { display: flex; flex-direction: column; }
.stack-item { display: flex; flex-direction: column; gap: 6px; }
.stack-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--navy-900); }
.stack-desc { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--gray-500); }
.stack-divider { border-top: 1px solid var(--border-subtle); padding-top: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ---- Grids & cards ----------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 40px; display: flex; flex-direction: column; gap: 14px; }
.card--soft { background: var(--gray-50); border: 0; }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--navy-900); }
.card__text, .step-card p, .fit-card p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); }

.step-card { background: var(--gray-50); border-radius: var(--radius-xl); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); color: var(--orange-500); }
.step-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--navy-900); }

.fit-card { border-top: 3px solid var(--orange-500); padding: 28px 4px 0; display: flex; flex-direction: column; gap: 12px; }
.fit-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--navy-900); }

/* ---- Link cards (start here) ------------------------------------- */
.link-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 36px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: var(--transition-base); text-decoration: none; }
.link-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-default); text-decoration: none; }
.link-card__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--gray-500); }
.link-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--navy-900); }
.link-card__cta { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); color: var(--orange-600); margin-top: 8px; }

/* ---- Centered bands (success / cta) ------------------------------ */
.band-center { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; text-align: center; align-items: center; }
.lead { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--gray-800); }
.section--cta h2 { color: #fff; }
.section--cta .lead { color: var(--navy-200); }
.note { font-family: var(--font-body); font-size: var(--fs-base); color: var(--navy-200); margin: 8px auto 0; max-width: 650px; }
.note a { color: var(--orange-400); font-weight: 600; }

/* ---- FAQ ---------------------------------------------------------- */
.faq-head { display: flex; flex-direction: column; gap: 40px; }
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--navy-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--orange-500); font-size: 24px; font-weight: 400; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); line-height: 1; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq p { padding: 0 40px 24px 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); }

/* ---- Footer ------------------------------------------------------- */
.site-footer { padding: 64px; background: var(--navy-950); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-footer__logo { height: 26px; display: block; }
.footer-links { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.footer-links a { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--navy-200); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--navy-400); }

/* ==================================================================
   RESPONSIVE — tablet
   ================================================================== */
@media (max-width: 1040px) {
  .site-header { padding: 16px 40px; }
  .section { padding: 80px 40px; }
  .section--success { padding: 88px 40px; }
  .hero__inner { padding: 80px 40px; }
  .site-footer { padding: 48px 40px; }

  .split-420, .split-360 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .hero h1, .hero--claude h1, .hero--ai h1 { font-size: 46px; }
  .hero__content { max-width: 680px; }
}

/* ==================================================================
   RESPONSIVE — mobile
   ================================================================== */
@media (max-width: 680px) {
  /* Collapsible nav */
  .nav-toggle { display: inline-flex; }
  .site-header { padding: 12px 20px; position: sticky; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 8px;
    background: #fff; border-bottom: 1px solid var(--border-subtle);
    padding: 12px 20px 20px; box-shadow: var(--shadow-lg);
  }
  .site-nav.open { display: flex; }
  .site-nav .navlink { padding: 12px 4px; border-bottom: 1px solid var(--border-subtle); }
  .site-nav .btn--nav { width: 100%; margin-top: 8px; padding: 14px 24px; }

  /* Sections */
  .section { padding: 56px 20px; }
  .section--success { padding: 60px 20px; }
  .section-stack { gap: 36px; }

  /* Hero — text over a softened wash */
  .hero { min-height: 0; }
  .hero__inner { padding: 56px 20px; }
  .hero__content { gap: 20px; max-width: 100%; }
  .hero h1, .hero--claude h1, .hero--ai h1 { font-size: 34px; }
  .hero__lead { font-size: 17px; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.86) 70%, rgba(255,255,255,0.82) 100%);
  }
  .hero--split .hero__img { width: 100%; }
  .hero--split .hero__overlay {
    background: linear-gradient(180deg, rgba(247,248,251,0.93) 0%, rgba(247,248,251,0.86) 70%, rgba(247,248,251,0.82) 100%);
  }
  .hero__actions { gap: 12px; }
  .hero__actions .btn { width: 100%; }

  /* Grids collapse */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* Cards / padding trims */
  .card, .step-card, .card--soft { padding: 28px 24px; }
  .stack-card { padding: 28px 24px; }
  .callout, .callout--roomy { padding: 24px 24px; }

  /* Footer stacks */
  .site-footer { flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 20px; }
  .footer-links { gap: 16px 20px; }

  .faq summary { font-size: var(--fs-base); }
  .faq p { padding-right: 8px; }
}

/* ==================================================================
   Cookie consent banner
   ================================================================== */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 760px; margin: 0 auto;
  background: var(--navy-900); color: #fff;
  border: 1px solid var(--navy-700); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  margin: 0; flex: 1 1 340px;
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal);
  color: var(--navy-200);
}
.cookie-banner__text a { color: var(--orange-400); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.cookie-banner__btn { padding: 12px 22px; font-size: 15px; }
.cookie-banner .btn--outline { background: transparent; color: #fff; border-color: var(--navy-600); box-shadow: none; }
.cookie-banner .btn--outline:hover { border-color: #fff; background: transparent; }

/* Footer "Cookie Settings" toggle, styled to match footer links */
.cookie-settings-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--navy-200);
}
.cookie-settings-link:hover { color: #fff; }

@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; left: 8px; right: 8px; bottom: 8px; padding: 16px; gap: 14px; }
  .cookie-banner__btn { flex: 1; }
}

/* ==================================================================
   /learn section
   Per-pillar accent is passed in as --pillar-accent.
   ================================================================== */
.learn-hero {
  background: var(--navy-900); color: #fff;
  padding: 72px 64px 60px;
  border-top: 4px solid var(--pillar-accent, var(--orange-500));
}
.learn-hero--hub { padding-top: 88px; padding-bottom: 72px; }
.learn-hero__inner { max-width: 1184px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* Hero lines up with the 1184px body column below it. */
.crumbs { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--navy-200); }
.crumbs a { color: var(--pillar-accent, var(--orange-400)); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 8px; color: var(--navy-400); }
.learn-hero__kicker {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--pillar-accent, var(--orange-400));
}
.learn-hero .learn-hero__eyebrow { color: var(--pillar-accent, var(--orange-400)); }
.learn-hero__title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 5vw, 52px); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); color: #fff;
}
.learn-hero__lede { margin: 0; max-width: 660px; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--navy-200); }

/* ---- Article body (rendered markdown) ---- */
.container--article { max-width: 1184px; margin: 0 auto; }
/* The column spans 1184px (aligns with the hero), but body text caps at a
   comfortable measure so lines never run too long to read. Left-aligned, so
   the text's left edge lines up with the hero above it. */
.article { --measure: 46rem; }
.article > * { max-width: var(--measure); }
.article { font-family: var(--font-body); color: var(--text-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.article > *:first-child { margin-top: 0; }
.article h2 { font-family: var(--font-display); color: var(--text-strong); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); margin: 1.8em 0 0.5em; }
.article h3 { font-family: var(--font-display); color: var(--text-strong); font-size: var(--fs-xl); margin: 1.5em 0 0.5em; }
.article h4 { font-family: var(--font-display); color: var(--text-strong); font-size: var(--fs-lg); margin: 1.4em 0 0.4em; }
.article p { margin: 0 0 1.1em; }
.article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.article li { line-height: var(--lh-relaxed); }
.article a { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article a:hover { text-decoration-thickness: 2px; }

/* Inline links in body copy are underlined so they read as links by more than
   color alone (accessibility), everywhere prose appears. */
.prose a, .lead a, .note a, .note-md a, .section-head p a,
.callout p a, .faq p a, .hero__lead a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.article strong { color: var(--text-strong); }
.article em { font-style: italic; }
.article blockquote { margin: 1.6em 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--pillar-accent, var(--orange-500)); color: var(--gray-700); }
.article blockquote p:last-child { margin-bottom: 0; }
.codeblock { position: relative; margin: 0 0 1.4em; }
.codeblock__copy {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; line-height: 1;
  color: var(--navy-100); background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20); border-radius: var(--radius-sm);
  padding: 7px 12px; cursor: pointer; transition: var(--transition-base);
}
.codeblock__copy:hover { background: rgba(255,255,255,0.20); color: #fff; }
.codeblock__copy.is-copied { background: var(--success-500); border-color: var(--success-500); color: #fff; }
/* Wrap long lines so the whole block shows (no horizontal scroll off-screen).
   Extra top padding leaves room for the copy button. */
.article pre { background: var(--navy-950); border-radius: var(--radius-md); padding: 46px 24px 22px; margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.article pre code { font-family: var(--font-mono); font-size: 0.9em; color: #fff; background: none; padding: 0; }
.article code { font-family: var(--font-mono); font-size: 0.92em; background: var(--gray-100); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--navy-800); }
.article hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 2.4em 0; }
.article img { max-width: 100%; border-radius: var(--radius-lg); margin: 1.4em 0; }

/* ---- Hub catalog cards ---- */
.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.learn-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 34px 32px 28px; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition-base); overflow: hidden; }
a.learn-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-default); transform: translateY(-2px); text-decoration: none; }
.learn-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pillar-accent, var(--orange-500)); }
.learn-card__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--pillar-accent, var(--orange-600)); }
.learn-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--navy-900); }
.learn-card__desc { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); }
.learn-card__cta { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); color: var(--pillar-accent, var(--orange-600)); margin-top: auto; padding-top: 8px; }
.learn-card--soon { opacity: 0.72; box-shadow: none; }
.learn-card--soon .learn-card__bar { background: var(--border-default); }
.learn-card--soon .learn-card__eyebrow { color: var(--gray-500); }

@media (max-width: 900px) { .learn-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .learn-hero { padding: 48px 20px 40px; }
  .learn-hero--hub { padding-top: 56px; padding-bottom: 48px; }
  .learn-card { padding: 24px; }
}

/* ==================================================================
   Two-zone header nav (Site Navigation + Page Navigation)
   ================================================================== */
.mainnav { flex: 1 1 auto; display: flex; align-items: center; gap: 40px; }
.navgroup { display: flex; flex-direction: column; gap: 7px; }
.navgroup--page { align-items: flex-start; text-align: left; min-width: 0; } /* sits beside the last site-nav item */
.navgroup--page .navgroup__links { flex-wrap: wrap; row-gap: 2px; }
.navgroup--page:not(:has(li)) { display: none; } /* hide the whole zone if every jump link is removed */
.site-header .btn--nav { flex-shrink: 0; margin-left: auto; } /* auto margin keeps the CTA rightmost, nav groups stay left */
.navgroup__label {
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px;
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--orange-600);
}
.navgroup__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 24px; }
.navgroup__links > li { display: flex; align-items: center; gap: 5px; position: relative; }
.navgroup a { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--navy-900); text-decoration: none; white-space: nowrap; }
.navgroup a:hover { color: var(--orange-600); text-decoration: none; }

.dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 2px; cursor: pointer; color: var(--navy-500); }
.dropdown-toggle svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.has-dropdown:hover .dropdown-toggle svg,
.has-dropdown[data-open="true"] .dropdown-toggle svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 16px); left: -14px; min-width: 252px;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px; margin: 0; list-style: none;
  display: none; flex-direction: column; z-index: 60;
}
.dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } /* hover bridge */
.has-dropdown:hover .dropdown, .has-dropdown[data-open="true"] .dropdown { display: flex; }
.dropdown a { display: block; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 15px; }
.dropdown a:hover { background: var(--gray-50); }

@media (max-width: 1100px) {
  .mainnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 22px;
    background: #fff; border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg); padding: 20px;
  }
  .mainnav.open { display: flex; }
  .navgroup { gap: 10px; }
  .navgroup--page { margin-left: 0; align-items: flex-start; text-align: left; }
  .navgroup__links { flex-direction: column; align-items: flex-start; gap: 2px; }
  .navgroup__links > li { width: 100%; }
  .navgroup a { display: block; padding: 10px 4px; }
  .has-dropdown { flex-wrap: wrap; }
  .dropdown { position: static; display: flex; box-shadow: none; border: 0; padding: 6px 0 4px 16px; min-width: 0; flex-basis: 100%; }
  .dropdown::before { display: none; }
  .mainnav .btn--nav { align-self: flex-start; margin-top: 4px; }
  .mainnav .theme-toggle { align-self: flex-start; }
}

/* ==================================================================
   Theme toggle button (header) + light/dark logo swap
   ================================================================== */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: transparent; color: var(--navy-900); cursor: pointer;
  transition: var(--transition-base);
}
.theme-toggle:hover { border-color: var(--navy-900); color: var(--orange-600); }
.theme-toggle svg { width: 20px; height: 20px; } /* display comes from the base svg rule so the show/hide rules below win */
.theme-toggle__moon { display: none; }

/* Two logos ship in the markup; CSS shows the one that reads on the current header. */
.site-header__logo--dark { display: none; }

/* ==================================================================
   DARK MODE — component overrides for the raw-literal cases.
   Token-driven components already flipped via ds/colors.css.
   Additive only: nothing here touches light mode.
   ================================================================== */
[data-theme="dark"] .page { background: var(--surface-page); }

/* Header glass + logo swap */
[data-theme="dark"] .site-header { background: rgba(28,32,40,0.86); }
[data-theme="dark"] .site-header__logo--light { display: none; }
[data-theme="dark"] .site-header__logo--dark { display: block; }
[data-theme="dark"] .navlink,
[data-theme="dark"] .navgroup a { color: var(--text-strong); }
[data-theme="dark"] .navlink:hover,
[data-theme="dark"] .navgroup a:hover { color: var(--orange-400); }
[data-theme="dark"] .nav-toggle { background: var(--surface-card); color: var(--text-strong); }
[data-theme="dark"] .dropdown-toggle { color: var(--text-muted); }

/* Theme toggle in dark */
[data-theme="dark"] .theme-toggle { color: var(--text-strong); }
[data-theme="dark"] .theme-toggle:hover { border-color: var(--text-strong); color: var(--orange-400); }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }

/* Buttons — primary keeps orange/navy; outline goes ghost-on-charcoal */
[data-theme="dark"] .btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
[data-theme="dark"] .btn--outline:hover { border-color: var(--text-strong); }

/* Hero — charcoal scrims over the photo, light headline */
[data-theme="dark"] .hero h1 { color: var(--text-strong); }
[data-theme="dark"] .hero__lead { color: var(--text-body); }
[data-theme="dark"] .hero__overlay {
  background: linear-gradient(90deg,
    rgba(28,32,40,0.97) 0%, rgba(28,32,40,0.92) 34%,
    rgba(28,32,40,0.55) 58%, rgba(28,32,40,0.02) 82%);
}
[data-theme="dark"] .hero--ai .hero__overlay {
  background: linear-gradient(90deg,
    rgba(28,32,40,0.97) 0%, rgba(28,32,40,0.92) 36%,
    rgba(28,32,40,0.6) 58%, rgba(28,32,40,0.04) 82%);
}
[data-theme="dark"] .hero--split { background: var(--surface-subtle); }
[data-theme="dark"] .hero--split .hero__overlay {
  background: linear-gradient(90deg,
    rgba(35,40,51,1) 0%, rgba(35,40,51,1) 40%,
    rgba(35,40,51,0.72) 58%, rgba(35,40,51,0.02) 84%);
}

/* Section backgrounds */
[data-theme="dark"] .bg-white { background: var(--surface-page); }
[data-theme="dark"] .bg-gray { background: var(--surface-subtle); }
[data-theme="dark"] .section--success { background: var(--surface-card); border-top: 3px solid var(--orange-500); }
[data-theme="dark"] .section--cta { background: var(--surface-dark); }

/* Cards & panels */
[data-theme="dark"] .stack-card,
[data-theme="dark"] .card,
[data-theme="dark"] .link-card,
[data-theme="dark"] .learn-card { background: var(--surface-card); border-color: var(--border-subtle); }
[data-theme="dark"] .card--soft,
[data-theme="dark"] .step-card,
[data-theme="dark"] .callout { background: var(--surface-subtle); border-color: var(--border-subtle); }

/* Titles / strong text that used raw navy */
[data-theme="dark"] .callout__title,
[data-theme="dark"] .card__title,
[data-theme="dark"] .stack-name,
[data-theme="dark"] .step-card__title,
[data-theme="dark"] .fit-card__title,
[data-theme="dark"] .link-card__title,
[data-theme="dark"] .learn-card__title,
[data-theme="dark"] .pullquote p,
[data-theme="dark"] .faq summary { color: var(--text-strong); }

/* Body / meta text that used raw grays */
[data-theme="dark"] .section-head p,
[data-theme="dark"] .prose p,
[data-theme="dark"] .note-md,
[data-theme="dark"] .lead,
[data-theme="dark"] .card__text,
[data-theme="dark"] .step-card p,
[data-theme="dark"] .fit-card p,
[data-theme="dark"] .callout p,
[data-theme="dark"] .faq p,
[data-theme="dark"] .learn-card__desc { color: var(--text-body); }
[data-theme="dark"] .stack-desc,
[data-theme="dark"] .stack-card__label,
[data-theme="dark"] .link-card__eyebrow,
[data-theme="dark"] .learn-card__eyebrow,
[data-theme="dark"] .learn-card--soon .learn-card__eyebrow { color: var(--text-muted); }

/* Dropdown menu */
[data-theme="dark"] .dropdown { background: var(--surface-card); }
[data-theme="dark"] .dropdown a:hover { background: var(--surface-subtle); }

/* Article extras */
[data-theme="dark"] .article code { background: var(--surface-sunken); color: var(--text-strong); }
[data-theme="dark"] .article pre code { background: none; } /* code block already has its own dark bg */
[data-theme="dark"] .article blockquote { color: var(--text-body); }

/* Already-dark bands lifted to charcoal so they sit on, not under, the page */
[data-theme="dark"] .learn-hero { background: var(--surface-dark); }
[data-theme="dark"] .site-footer { background: var(--surface-sunken); }
[data-theme="dark"] .cookie-banner { background: var(--surface-card); border-color: var(--border-default); }

/* Brand icons are dark silhouettes (img-loaded SVGs, so CSS fill can't reach
   them); render them white on dark surfaces so they stay visible. */
[data-theme="dark"] .stack-row img,
[data-theme="dark"] .stack-card__icon { filter: brightness(0) invert(1); }

/* Mobile nav panel background */
@media (max-width: 1100px) {
  [data-theme="dark"] .mainnav { background: var(--surface-card); }
}

/* ==================================================================
   Learn guide hero — landing-style photo header at ~55% of full height
   ================================================================== */
.hero--short { min-height: 550px; }
.hero--short .hero__inner { padding: 64px 64px; }
.hero--learn .hero__content { max-width: 760px; gap: 16px; }
.hero--learn h1 { font-size: 58px; }
/* Shift the photo right (right-anchored zoom, since a full-width cover image
   cannot pan via object-position on wide screens) and weight the scrim
   heavier on the left so the text stays readable. */
.hero--learn .hero__img { transform: scale(1.2); transform-origin: 0% 30%; }
.hero--learn .hero__overlay {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.96) 40%,
    rgba(255,255,255,0.5) 58%, rgba(255,255,255,0.04) 80%);
}
[data-theme="dark"] .hero--learn .hero__overlay {
  background: linear-gradient(90deg,
    rgba(28,32,40,0.99) 0%, rgba(28,32,40,0.96) 40%,
    rgba(28,32,40,0.52) 58%, rgba(28,32,40,0.05) 80%);
}
.hero--learn .crumbs { color: var(--gray-600); font-size: var(--fs-sm); }
.hero--learn .crumbs a { color: var(--orange-600); font-weight: 600; text-decoration: none; }
.hero--learn .crumbs a:hover { text-decoration: underline; }
.hero--learn .crumbs span[aria-hidden] { margin: 0 8px; color: var(--gray-400); }
[data-theme="dark"] .hero--learn .crumbs { color: var(--text-muted); }
[data-theme="dark"] .hero--learn .crumbs a { color: var(--orange-400); }
@media (max-width: 1040px) { .hero--short .hero__inner { padding: 52px 40px; } .hero--learn h1 { font-size: 46px; } }
@media (max-width: 680px)  { .hero--short { min-height: 320px; } .hero--short .hero__inner { padding: 44px 20px; } .hero--learn h1 { font-size: 34px; } }

/* ==================================================================
   Article cards — guides listed on a pillar page
   ================================================================== */
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.guide-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition-base); }
a.guide-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-default); transform: translateY(-3px); text-decoration: none; }
.guide-card__media { display: block; height: 200px; background: var(--gray-100); border-bottom: 3px solid var(--pillar-accent, var(--orange-500)); overflow: hidden; }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card__body { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px 30px; }
.guide-card__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--orange-600); }
.guide-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--navy-900); }
.guide-card__desc { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); }
.guide-card__cta { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--orange-600); margin-top: 2px; }
a.guide-card:hover .guide-card__cta { color: var(--orange-700); }
[data-theme="dark"] .guide-card { background: var(--surface-card); border-color: var(--border-subtle); }
[data-theme="dark"] .guide-card__media { background: var(--surface-sunken); }
[data-theme="dark"] .guide-card__title { color: var(--text-strong); }
[data-theme="dark"] .guide-card__desc { color: var(--text-body); }
[data-theme="dark"] .guide-card__eyebrow, [data-theme="dark"] .guide-card__cta { color: var(--orange-400); }
@media (max-width: 780px) { .guide-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   Topic page two-column body: article + sticky quote card
   ================================================================== */
.learn-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.learn-aside { position: sticky; top: 104px; }
.quote-card { margin: 0; padding: 28px 30px; background: var(--gray-50); border-left: 3px solid var(--pillar-accent, var(--orange-500)); border-radius: var(--radius-lg); }
.quote-card__text { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--navy-900); }
.quote-card__by { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); }
[data-theme="dark"] .quote-card { background: var(--surface-subtle); }
[data-theme="dark"] .quote-card__text { color: var(--text-strong); }
[data-theme="dark"] .quote-card__by { color: var(--text-muted); }
@media (max-width: 900px) { .learn-body { grid-template-columns: 1fr; gap: 40px; } .learn-aside { position: static; } }

/* ==================================================================
   Hero quote (Learn hub) — small italic quote under the lede
   ================================================================== */
.hero__quote { margin: 6px 0 0; max-width: 600px; }
.hero__quote blockquote { margin: 0 0 6px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; line-height: var(--lh-normal); color: var(--navy-700); }
.hero__quote figcaption { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--orange-600); }
[data-theme="dark"] .hero__quote blockquote { color: var(--text-body); }
[data-theme="dark"] .hero__quote figcaption { color: var(--orange-400); }

/* Learn hub hero: no zoom, so the full width of the photo shows. */
.hero--learn-hub .hero__img { transform: none; }

/* ==================================================================
   Booking page (/book) — Calendly embed, on-brand
   ================================================================== */
.book-top { padding: 76px 64px 44px; background: var(--gray-50); border-bottom: 1px solid var(--border-subtle); }
.book-top__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.book-top h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--navy-900); }
.book-top__lead { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--gray-700); max-width: 660px; }
.book-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.book-chip { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--navy-800); background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 7px 16px; }

.book-main { padding: 60px 64px 100px; }
.book-grid { display: grid; grid-template-columns: 1fr minmax(360px, 520px); gap: 60px; align-items: start; max-width: 1184px; margin: 0 auto; }
.book-info { display: flex; flex-direction: column; gap: 36px; }
.book-block { display: flex; flex-direction: column; gap: 14px; }
.book-block h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--navy-900); }
.book-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.book-list li { position: relative; padding-left: 30px; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-700); }
.book-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 4px var(--orange-100); }
.book-host { margin: 4px 0 0; border-left: 3px solid var(--orange-500); padding: 6px 0 6px 22px; }
.book-host blockquote { margin: 0 0 8px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--navy-800); }
.book-host figcaption { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--orange-600); }

.book-cal__card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); border-top: 4px solid var(--orange-500); overflow: hidden; }
.book-cal .calendly-inline-widget { min-width: 320px; height: 700px; }
.book-cal__loading { padding: 48px 24px; text-align: center; color: var(--gray-500); font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.book-cal__loading a { color: var(--orange-700); font-weight: 600; }
.book-cal__foot { margin: 16px 0 0; text-align: center; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--gray-500); }
.book-cal__foot a { color: var(--orange-700); font-weight: 600; }

[data-theme="dark"] .book-top { background: var(--surface-subtle); border-bottom-color: var(--border-subtle); }
[data-theme="dark"] .book-top h1 { color: var(--text-strong); }
[data-theme="dark"] .book-top__lead { color: var(--text-body); }
[data-theme="dark"] .book-chip { background: var(--surface-card); color: var(--text-body); border-color: var(--border-subtle); }
[data-theme="dark"] .book-block h2 { color: var(--text-strong); }
[data-theme="dark"] .book-list li { color: var(--text-body); }
[data-theme="dark"] .book-host blockquote { color: var(--text-body); }
[data-theme="dark"] .book-cal__card { background: var(--surface-card); }
[data-theme="dark"] .book-cal__loading a, [data-theme="dark"] .book-cal__foot a { color: var(--orange-400); }

@media (max-width: 900px) {
  .book-top { padding: 56px 20px 36px; }
  .book-main { padding: 44px 20px 72px; }
  .book-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==================================================================
   Booking confirmation (/book/confirmation) — confetti + details
   ================================================================== */
.cf-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }
.cf-wrap { position: relative; padding: 88px 32px; min-height: 64vh; display: flex; align-items: center; justify-content: center; background: var(--gray-50); }
.cf-card { position: relative; z-index: 1; max-width: 640px; width: 100%; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 56px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cf-check { width: 74px; height: 74px; border-radius: 50%; background: var(--success-500); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--success-100); margin-bottom: 4px; }
.cf-check svg { width: 38px; height: 38px; display: block; }
.cf-card h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--navy-900); }
.cf-lead { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--gray-700); max-width: 480px; }
.cf-details { width: 100%; max-width: 440px; margin: 8px 0 4px; display: flex; flex-direction: column; background: var(--gray-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 6px 20px; text-align: left; }
.cf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.cf-row:last-child { border-bottom: 0; }
.cf-row dt { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gray-500); flex: 0 0 auto; }
.cf-row dd { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); color: var(--navy-900); text-align: right; }
.cf-next { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--gray-600); max-width: 460px; }
.cf-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

[data-theme="dark"] .cf-wrap { background: var(--surface-subtle); }
[data-theme="dark"] .cf-card { background: var(--surface-card); border-color: var(--border-subtle); }
[data-theme="dark"] .cf-card h1 { color: var(--text-strong); }
[data-theme="dark"] .cf-lead { color: var(--text-body); }
[data-theme="dark"] .cf-next { color: var(--text-muted); }
[data-theme="dark"] .cf-details { background: var(--surface-sunken); border-color: var(--border-subtle); }
[data-theme="dark"] .cf-row dd { color: var(--text-strong); }

@media (max-width: 560px) {
  .cf-wrap { padding: 56px 16px; }
  .cf-card { padding: 40px 24px; }
  .cf-row { flex-direction: column; gap: 2px; }
  .cf-row dd { text-align: left; }
  .cf-actions .btn { width: 100%; }
}

/* Booking calendar loading spinner */
.book-cal__spinner { display: block; width: 30px; height: 30px; margin: 0 auto 16px; border: 3px solid var(--border-default); border-top-color: var(--orange-500); border-radius: 50%; animation: book-spin 0.8s linear infinite; }
[data-theme="dark"] .book-cal__spinner { border-color: var(--border-strong); border-top-color: var(--orange-500); }
@keyframes book-spin { to { transform: rotate(360deg); } }