/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);

  background: var(--ui-bg);

  color: var(--ui-text);

  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   NAVBAR — NAV-003 style, floating rounded glass menu
========================================================= */

.navbar {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  width: min(1360px, calc(100vw - 48px));
  min-height: 76px;

  display: flex;
  align-items: center;
  gap: 24px;

  padding: 10px 14px 10px 26px;
  border-radius: 20px;

  background: var(--ui-glass);
  border: 1px solid var(--ui-glass-line);

  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);

  /* Visible from the first screen (decided 2026-09-23): it no longer
     waits for the hero to scroll away. */
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ui-deep);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* The wordmark (UI Vault assets/images/Icon/icon02) is painted as a mask, so
   it takes --ui-deep and works in both palettes and both themes without a
   second file. */
.navbar__brand-mark {
  width: 120px;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.navbar__brand:hover { opacity: 0.7; }

.navbar__links {
  position: relative; /* the sliding underline is placed inside it */
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__link {
  position: relative;
  padding: 10px 14px;
  /* Dark enough to stay legible when the see-through menu sits over the dark
     testimonials band; the active link is told apart by weight + underline. */
  color: rgba(var(--ui-text-rgb), 0.82);
  text-decoration: none;
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.25s ease;
}
/* Every link is as wide as its own bold version (a hidden copy of the
   label, set by site.js), so turning bold never pushes its neighbours. */
.navbar__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.navbar__link::before {
  content: attr(data-label);
  content: attr(data-label) / ""; /* no alt text: it is a hidden copy */
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}
.navbar__link:hover { color: var(--ui-deep); }
.navbar__link.is-active {
  color: var(--ui-deep);
  font-weight: 700;
}
/* One underline for the whole menu, sliding to the active link and taking
   its width (site.js sets --x, --y, --w), instead of one per link that
   blinked off and on (2026-09-23, on request). */
.navbar__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 0px);
  height: 2px;
  border-radius: 2px;
  background: var(--ui-primary);
  transform: translate(var(--x, 0px), var(--y, 0px));
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    width .5s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.navbar__indicator.is-instant { transition: none; }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ui-deep);
  color: var(--ui-bg);
  text-decoration: none;
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .navbar__cta:hover {
    background: var(--ui-text);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--ui-text-rgb), 0.22);
  }
}
.navbar__cta:active { transform: scale(.97); transition-duration: .12s; }
.navbar__cta iconify-icon { font-size: 15px; }

.navbar__icon-btn {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-glass-line);
  border-radius: 999px;
  background: rgba(var(--ui-surface-rgb), 0.55);
  color: var(--ui-deep);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .navbar__icon-btn:hover {
    border-color: var(--ui-medium);
    transform: translateY(-1px);
  }
}
.navbar__icon-btn:active,
.navbar__menu-toggle:active { transform: scale(.94); transition-duration: .12s; }
.navbar__icon-btn iconify-icon { font-size: 16px; }

.navbar__menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-glass-line);
  border-radius: 999px;
  background: rgba(var(--ui-surface-rgb), 0.55);
  color: var(--ui-deep);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar__menu-toggle iconify-icon { font-size: 18px; }

/* Full navbar needs ~1280px at the readable text sizes; below that it collapses. */
@media (max-width: 1279.98px) {
  .navbar { padding: 8px 10px 8px 20px; gap: 12px; min-height: 68px; }
  .navbar__brand-mark { width: 100px; }
  .navbar__links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--ui-glass-line);
    border-radius: 16px;
    background: var(--ui-surface);
    /* Drops from the menu button (top right): quick fade and settle on the
       house curve, and back up on close. Hidden with visibility, not
       display, so it can animate both ways and reverse mid-way. */
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    pointer-events: none;
    transition:
      opacity .16s ease,
      transform .2s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear .2s;
  }
  .navbar__links.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      opacity .18s ease,
      transform .24s cubic-bezier(.22, 1, .36, 1),
      visibility 0s;
  }
  .navbar__link { padding: 12px 16px; }
  .navbar__indicator { display: none; }
  .navbar__cta { padding: 0 14px; font-size: var(--fs-small); }
  .navbar__cta span { display: none; }
  .navbar__menu-toggle { display: inline-flex; }
  .navbar__actions { margin-left: auto; }
}

/* =========================================================
   SECTIONS
========================================================= */

.section {
  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 160px 40px 100px;

  overflow: hidden;
}

/* =========================================================
   SECTION CONTENT
========================================================= */

.section-content {
  width: min(1300px, 100%);

  text-align: center;
}

/* =========================================================
   NUMBER
========================================================= */

/* =========================================================
   TYPE
========================================================= */

/* =========================================================
   HUGE TEXT
========================================================= */

.section h1,
.section h2 {
  margin: 0 auto;

  max-width: 1250px;

  font-size: clamp(54px, 7.4vw, 120px);

  line-height: 0.98;

  letter-spacing: -0.075em;

  font-family: var(--font-display);

  font-weight: 800;
}

/* =========================================================
   WHITE
========================================================= */

.section-white {
  background: var(--ui-bg);
}

/* =========================================================
   SOFT GRAY
========================================================= */

.section-gray {
  background: linear-gradient(180deg, var(--ui-gray-100) 0%, var(--ui-gray-50) 100%);
}

/* =========================================================
   DONE FOR YOU TRANSITION
========================================================= */

.section-transition {
  background: linear-gradient(
    180deg,
    var(--ui-gray-50) 0%,
    var(--ui-gray-100) 50%,
    var(--ui-bg) 100%
  );
}

/* =========================================================
   DARK CTA
========================================================= */

.section-dark {
  background: var(--ui-cta);

  color: var(--ui-cta-text);
}

/* =========================================================
   FOOTER
========================================================= */

.footer-section {
  min-height: 75vh;

  background: linear-gradient(180deg, var(--ui-footer) 0%, var(--ui-footer-deep) 100%);
  border-top: 1px solid rgba(var(--ui-footer-accent-rgb), 0.22);

  color: var(--ui-footer-text);
}

.section.hero-section { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); gap: clamp(24px, 3vw, 56px); min-height: 100svh; align-items: center; justify-content: normal; isolation: isolate; padding: 100px clamp(32px, 6vw, 96px) 64px; overflow-x: clip; }
.hero-section__content { position: relative; top: clamp(32px, 8vh, 88px); z-index: 2; width: min(1020px, 100%); margin: 0; text-align: left; } /* above .hero-stage (z 1): its rings pass behind the headline. `top` sits the copy a little lower, clear of the "From your book" card (2026-09-23, on request) */
/* Headline 10% bigger (2026-09-23, on request) where it fits beside the
   phone: never below the old size (52–100px), up to +10% (57–110px), and
   capped by 7.1vw - 18px so "Your stories deserve" ends ≥24px before the
   phone. Full +10% from ~1680px; about +5% at 1440 and +3% at 1280. */
.section .hero-section__title { max-width: 1020px; margin: 0; font-family: var(--font-display); font-size: clamp(clamp(52px, 5.7vw, 100px), calc(7.1vw - 18px), clamp(57px, 6.27vw, 110px)); font-weight: 800; letter-spacing: -.075em; line-height: .92; }
.hero-section__title span { display: block; white-space: nowrap; }
.hero-section__description { max-width: 470px; margin: 28px 0 0; color: rgba(var(--ui-text-rgb), .64); font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.5; }
.hero-section__content .cursor-fill { font-family: var(--font-body); font-size: 17.25px; font-weight: 700; animation: hero-cta-presence 4.6s cubic-bezier(.22,1,.36,1) infinite; }
/* The pulse holds still under the cursor, so it doesn't bob under the fill. */
.hero-section__content .cursor-fill:hover { animation-play-state: paused; }
.hero-section__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 48px; }
.hero-section__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ui-text); font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; text-decoration: none; }
.hero-section__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.hero-section__link:hover svg { transform: translateX(4px); }
.hero-section__link:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 4px; border-radius: 6px; }

@keyframes hero-cta-presence {
  0%, 76%, 100% { box-shadow: 0 0 0 rgba(var(--ui-text-rgb), .0); transform: translateY(0); }
  84% { box-shadow: 0 10px 22px rgba(var(--ui-text-rgb), .12); transform: translateY(-2px); }
  91% { box-shadow: 0 4px 10px rgba(var(--ui-text-rgb), .06); transform: translateY(0); }
}

/* Desktop calibration: the interface keeps the same proportions at 100% zoom,
   with the text, menu and large section blocks reduced slightly. */
@media (min-width: 1024px) {
  .section { min-height: 100vh; padding: 144px 36px 90px; }
  .section h1, .section h2 { font-size: clamp(49px, 6.7vw, 108px); }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1023.98px) {
  .section.hero-section {
    grid-template-columns: 1fr;
    padding-top: 128px;
  }

  /* Stacked: the phone is below the copy, so the copy needs no offset
     (it would only overlap the stage). The headline has the room for +10%. */
  .hero-section__content { top: 0; }
  .section .hero-section__title { font-size: clamp(57px, 6.27vw, 110px); }
}

@media (max-width: 767.98px) {
  .section {
    padding: 100px 24px;
  }

  .section h1,
  .section h2 {
    font-size: clamp(48px, 13vw, 78px);
  }

  /* 132px clears the menu, visible from the start (24px + 68px) with air. */
  .section.hero-section { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding: 132px 24px 40px; }
  .hero-section__content { text-align: left; }
  .section .hero-section__title { font-size: clamp(58px, 15.7vw, 95px); } /* +10% (was 53px, 14.3vw, 86px) */
  .hero-section__title span { white-space: normal; }
  .hero-section__description { max-width: 355px; font-size: var(--fs-lead); }
}

/* =========================================================
   PHONE CAROUSELS (scripts/mobile-rail.js)
   Below 768px the long step lists and card grids scroll sideways, one card
   at a time (2026-09-23, on request). Each component places its own
   columns; this block gives every [data-rail] the same behaviour: full
   bleed to the screen edge, snap, a peek of the next card, no scrollbar,
   and the cards that aren't current dimmed a little.
========================================================= */

.rail-dots { display: none; }

@media (max-width: 767.98px) {
  [data-rail] {
    position: relative; /* the cards' offsetLeft is measured against it */
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-rail]::-webkit-scrollbar { display: none; }

  /* the card on screen is sharp; its neighbours step back (.rail-card is
     set on the cards by mobile-rail.js; the specificity beats the
     components' own transform/opacity resets) */
  [data-rail] .rail-card {
    transition:
      opacity .45s cubic-bezier(.22, 1, .36, 1),
      transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  [data-rail] .rail-card.is-rail-away {
    opacity: .45;
    transform: scale(.97);
  }

  .rail-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 18px;
  }
  /* 44px tap target, 6px dot; the current one stretches into a pill */
  .rail-dots__dot {
    display: grid;
    width: 28px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .rail-dots__dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ui-soft);
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .35s ease;
  }
  .rail-dots__dot.is-current::before {
    width: 20px;
    background: var(--ui-text);
  }
  .rail-dots__dot:focus-visible { outline: 2px solid var(--ui-text); outline-offset: -8px; border-radius: 12px; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .hero-section__content .cursor-fill {
    animation: none;
  }

}

/* =========================================================
   LOADING SKELETON (SKL-001 inspired)
   Shown until the hero's fonts and photos are ready; fades to reveal the page.
========================================================= */

.page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ui-bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-skeleton.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-skeleton .sk {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--ui-gray-100) 0%,
    var(--ui-gray-50) 50%,
    var(--ui-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
}

@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Same grid, padding and alignment as .hero-section, so nothing jumps when the
   real hero replaces it. */
.page-skeleton__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  height: 100%;
  padding: 100px clamp(32px, 6vw, 96px) 64px;
}

.page-skeleton__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(1020px, 100%);
}

/* Each block matches the element it stands in for. */
.sk-title {
  width: min(1020px, 92%);
  height: clamp(38px, 4.1vw, 72px);   /* cap height of the 52–100px headline */
  border-radius: 12px;
}

.sk-title--second {
  width: min(880px, 78%);
  margin-top: 14px;
}

/* The headline wraps to four lines on phones; these two bars stand in for
   the extra lines there and stay hidden elsewhere. */
.sk-title--extra { display: none; margin-top: 14px; }

.sk-line {
  width: min(575px, 62%);
  height: 15px;
  margin-top: 30px;
}

.sk-line--short {
  width: min(430px, 48%);
  margin-top: 12px;
}

.sk-button {
  width: 165px;
  height: 60px;               /* .cursor-fill is 60px tall, radius 10 */
  border-radius: 10px;
  margin-top: 36px;
}

/* Same box as .hero-stage and its phone, so the phone lands where its
   placeholder was. */
.page-skeleton__stage {
  display: grid;
  place-items: center;
  height: min(660px, calc(100svh - 180px));
  min-height: 540px;
}

.sk-phone {
  width: clamp(250px, 21vw, 312px);
  transform: scale(1.03);   /* the real phone sits 40px forward in 3D */
  aspect-ratio: 9 / 19.2;
  border-radius: 46px;
}

/* Tablet mirrors the hero's single column: copy on top, phone below. */
@media (max-width: 1023.98px) {
  .page-skeleton__hero { grid-template-columns: 1fr; align-content: start; padding-top: 128px; }
  .page-skeleton__stage { height: 600px; min-height: 0; margin-top: 56px; }
  .sk-phone { width: 270px; }
}

/* Mobile mirrors the hero there: one column, smaller type. */
@media (max-width: 767.98px) {
  .page-skeleton__hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 24px;
  }

  .sk-title { width: 100%; height: clamp(40px, 11vw, 62px); }
  .sk-title--second { width: 82%; }
  .sk-line { width: 100%; }
  .sk-line--short { width: 72%; }

  .page-skeleton__hero { justify-content: flex-start; padding: 132px 24px 40px; }
  .page-skeleton__stage { height: 520px; min-height: 0; margin-top: 90px; }
  .sk-phone { width: 228px; }
  .sk-title--extra { display: block; width: 58%; }
  .sk-title--extra + .sk-title--extra { width: 88%; }
}

/* Sections are the positioning context for their own decoration. */
.hero-section,
.section { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .page-skeleton .sk { animation: none; }
}