/* ============================================================
   Wave Books — styles.css
   1. Variables      6. Buttons        11. Integrations   16. Responsive
   2. Reset          7. Hero           12. CTA            17. Reduced motion
   3. Typography     8. Feature strip  13. Footer         18. Print
   4. Layout         9. Feature cards  14. Legal pages
   5. Header        10. Workflow       15. Support page
   ============================================================ */

/* 1. Variables ---------------------------------------------- */
:root {
  --color-hero-background: #080a0b;
  --color-hero-background-soft: #0d1011;
  --color-hero-surface: #131617;

  --color-page-background: #f6f2eb;
  --color-page-background-soft: #fbf8f3;
  --color-page-surface: #fffdf9;
  --color-page-surface-muted: #f1ece4;
  --color-page-blush: #f6e6d9;          /* warm coral-tinted band (Dipsea-style) */

  --color-ink: #151617;
  --color-ink-soft: #2d3032;
  --color-text-muted: #686b6d;
  --color-text-light: #f4f2ee;
  --color-text-light-muted: #b6b7b5;

  --color-accent: #df6d59;            /* vivid coral — dark bg + graphics only */
  --color-accent-hover: #d4604d;
  --color-accent-active: #bd5141;
  --color-accent-soft: rgba(223, 109, 89, 0.12);
  --color-accent-border: rgba(223, 109, 89, 0.32);
  /* Deeper coral for TEXT on the warm off-white (WCAG AA >=4.5:1,
     incl. coral-tinted badge backgrounds). */
  --color-accent-text: #a8432f;
  /* Filled coral CTA: white text passes AA (4.5:1) on these. */
  --color-accent-cta: #c4523d;
  --color-accent-cta-hover: #b84b36;
  --color-accent-cta-active: #a03d29;

  --color-border-dark: rgba(255, 255, 255, 0.1);
  --color-border-light: #ded8cf;
  --color-divider-light: #e8e2da;

  --color-jellyfin: #8b64c7;
  --color-audiobookshelf: #58a99c;
  --color-icloud: #5e6670;
  --color-success: #668b6c;

  --shadow-phone: 0 30px 70px rgba(0, 0, 0, 0.38);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 35px rgba(58, 47, 36, 0.05);

  --font-heading: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

  --font-hero: clamp(3.3rem, 6.4vw, 6.5rem);
  --font-display: clamp(2.4rem, 4vw, 4.3rem);
  --font-h2: clamp(2rem, 3vw, 3rem);
  --font-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --font-body-large: clamp(1.05rem, 1.3vw, 1.25rem);
  --font-size-body: 1rem;
  --font-small: 0.9375rem; /* 15px — meets body-copy readability minimum */
  --font-label: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --radius-pill: 999px;

  --header-height: 76px;
}

/* 2. Reset -------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Overscroll rubber-banding reveals the html canvas; both page ends are
     dark, so match them instead of flashing the beige body background. */
  background: var(--color-hero-background);
}

/* Safari doesn't reliably use the html background for its rubber-band
   areas, so park dark covers just above and below the viewport — during
   overscroll they slide into the revealed gap. */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 100vh;
  background: var(--color-hero-background);
  pointer-events: none;
  z-index: 999;
}
body::before { top: -100vh; }
body::after { bottom: -100vh; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-page-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid rgba(223, 109, 89, 0.9);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-hero-surface);
  color: var(--color-text-light);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-small);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 3. Typography --------------------------------------------- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: 1.1; }
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  color: var(--color-accent);
  font-size: var(--font-small);
  letter-spacing: 0.16em;
  font-weight: 600;
}

.section-heading {
  font-size: var(--font-h2);
  text-align: center;
  color: var(--color-ink);
}

/* 4. Layout ------------------------------------------------- */
.container {
  width: min(calc(100% - 40px), 1320px);
  margin-inline: auto;
}

.section {
  padding-block: clamp(3.5rem, 8vw, 8rem);
}

[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }

/* 5. Header ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.site-header--on-dark { color: var(--color-text-light); }
.site-header--on-light {
  color: var(--color-ink);
  background: var(--color-page-background);
  border-bottom: 1px solid var(--color-divider-light);
}
.site-header--scrolled.site-header--on-dark {
  background: rgba(8, 10, 11, 0.82);
  border-bottom-color: var(--color-border-dark);
  backdrop-filter: saturate(140%) blur(8px);
}
/* Without JS the scroll listener never runs, so the transparent on-dark header
   would leave white text over the light content below the hero. Give it a
   permanent dark backdrop when JS is unavailable. Invisible over the dark hero
   at the top; keeps the header legible everywhere else. */
.no-js .site-header--on-dark {
  background: rgba(8, 10, 11, 0.9);
  border-bottom-color: var(--color-border-dark);
}

/* Wider gutters than the shared container so the brand and store badge
   never crowd the viewport edges. */
.site-header .container { width: min(calc(100% - 64px), 1320px); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
}
.brand__symbol { width: 30px; height: 30px; flex: none; }
.brand__wordmark {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.site-nav { display: none; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--font-small);
  font-weight: 500;
  color: currentColor;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--color-accent);
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-actions .header-cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: none;
  color: inherit;
}
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 auto 0;
  background: var(--color-hero-background-soft);
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  padding: var(--space-4) 0 var(--space-6);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 99;
}
.site-header--on-light + .mobile-nav {
  background: var(--color-page-surface);
  color: var(--color-ink);
  border-color: var(--color-divider-light);
}
.mobile-nav[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.mobile-nav .container { display: flex; flex-direction: column; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: var(--font-body-large);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border-dark);
}
.site-header--on-light + .mobile-nav a { border-color: var(--color-divider-light); }

body[data-menu-open="true"] { overflow: hidden; }

/* 6. Buttons ------------------------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-align: center;
}
.button svg { width: 20px; height: 20px; flex: none; }

.button--primary { background: var(--color-accent-cta); color: #fff; }
.button--primary:hover { background: var(--color-accent-cta-hover); transform: translateY(-1px); }
.button--primary:active { background: var(--color-accent-cta-active); transform: none; }

.button--dark { background: var(--color-ink); color: #fff; }
.button--dark:hover { background: #000; transform: translateY(-1px); }
.button--dark:active { transform: none; }

.button--ghost {
  background: transparent;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: currentColor;
  font-weight: 500;
  gap: var(--space-2);
}
.button--ghost:hover { color: var(--color-accent); }
.button--ghost svg { transition: transform 0.2s ease; }
.button--ghost:hover svg { transform: translateX(3px); }

/* Official App Store badge — plain anchor + img, no custom chrome. */
.app-store-badge {
  display: inline-flex;
  border-radius: var(--radius-small);
}
.app-store-badge img { height: 48px; width: auto; }
.site-header .app-store-badge img { height: 40px; }
.mobile-nav .app-store-badge { margin-top: var(--space-4); }

/* 7. Hero --------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Pull the dark hero up behind the sticky, transparent header so its white
     text/CTA stay legible at scroll 0 (otherwise they sit over the cream body). */
  margin-top: calc(-1 * var(--header-height));
  background:
    radial-gradient(circle at 72% 45%, rgba(223, 109, 89, 0.10), transparent 34%),
    var(--color-hero-background);
  color: var(--color-text-light);
}
.hero__wave {
  position: absolute;
  inset: 0 0 0 auto;
  width: 65%;
  opacity: 0.12;
  color: var(--color-accent);
  pointer-events: none;
  object-fit: cover;
}
/* Film grain: kills flat digital black on the large dark areas.
   Sits under .hero__inner (z-index 1), so text stays crisp. */
.hero::after,
.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .hero__wave { animation: wave-float 16s ease-in-out infinite alternate; }
}
@keyframes wave-float {
  from { transform: translateY(-8px); }
  to { transform: translateY(10px); }
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--header-height) + clamp(2rem, 5vw, 3.5rem)) clamp(3rem, 6vw, 5.5rem);
}
.hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 7vw, 4rem);
  align-items: center;
}
.hero__eyebrow { margin-bottom: var(--space-5); display: inline-block; }
.hero h1 {
  font-size: var(--font-hero);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}
.hero h1 em { color: var(--color-accent); font-style: italic; }
.hero__copy {
  font-size: var(--font-body-large);
  color: var(--color-text-light-muted);
  max-width: 44ch;
  margin-bottom: var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  color: var(--color-text-light-muted);
}
.hero__trust svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; }

.hero-devices {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-mockup {
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-phone);
  background: var(--color-hero-background-soft);
  object-fit: contain;
}
.hero-device { position: absolute; }
.hero-device--player  { width: 32%; left: 0; top: 15%; z-index: 1; }
.hero-device--library { width: 40%; z-index: 3; }
.hero-device--import  { width: 32%; right: 0; top: 16%; z-index: 1; }

/* Hero entrance: one orchestrated moment on load. Uses the `translate`
   property so it composes with the phones' rotate() transforms. Gated on
   JS being present (no-js removed) and motion being allowed. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .hero__eyebrow,
  html:not(.no-js) .hero h1,
  html:not(.no-js) .hero__copy,
  html:not(.no-js) .hero__actions,
  html:not(.no-js) .hero__trust,
  html:not(.no-js) .hero-device {
    opacity: 0;
    translate: 0 18px;
    animation: hero-rise 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  html:not(.no-js) .hero__eyebrow { animation-delay: 0.05s; }
  html:not(.no-js) .hero h1 { animation-delay: 0.12s; }
  html:not(.no-js) .hero__copy { animation-delay: 0.22s; }
  html:not(.no-js) .hero__actions { animation-delay: 0.3s; }
  html:not(.no-js) .hero__trust { animation-delay: 0.38s; }
  html:not(.no-js) .hero-device { animation-duration: 0.8s; translate: 0 28px; }
  html:not(.no-js) .hero-device--player { animation-delay: 0.25s; }
  html:not(.no-js) .hero-device--library { animation-delay: 0.42s; }
  html:not(.no-js) .hero-device--import { animation-delay: 0.52s; }
}
@keyframes hero-rise {
  to { opacity: 1; translate: 0 0; }
}

/* 7b. Waves, bands & blobs ----------------------------------- */
/* Organic wavy section dividers. Background = section above,
   path fill (currentColor) = section below. */
.wave-divider { line-height: 0; }
.wave-divider svg {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 110px);
}
.wave-divider path { fill: currentColor; }
.wave-divider--hero {
  position: relative;
  z-index: 1;
  color: var(--color-page-background);
}
/* Band-owned edge dividers: absolutely positioned INSIDE the band so the
   blobs flow under them instead of being cut off at the section boundary.
   The 1px overshoot guards against subpixel seams between sections. */
.wave-divider--band-top,
.wave-divider--band-bottom {
  position: absolute;
  left: 0;
  right: 0;
}
.wave-divider--band-top { top: -1px; color: var(--color-page-background); }
.wave-divider--band-top svg { transform: rotate(180deg); }
.wave-divider--band-bottom { bottom: -1px; color: var(--color-hero-background); }

.band-blush {
  position: relative;
  overflow: hidden;
  background: var(--color-page-blush);
}
.band-blush .container { position: relative; z-index: 1; }

/* Slow-morphing organic shapes, layered under content. */
.blob {
  position: absolute;
  pointer-events: none;
  border-radius: 58% 42% 46% 54% / 55% 48% 52% 45%;
}
@keyframes blob-morph {
  0%, 100% { border-radius: 58% 42% 46% 54% / 55% 48% 52% 45%; transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { border-radius: 44% 56% 58% 42% / 46% 58% 42% 54%; transform: translate3d(1.5%, -2.5%, 0) rotate(3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .blob { animation: blob-morph 24s ease-in-out infinite; }
}

/* Anchor blobs well past their section edge: parallax + morph move them
   up to ~90px, so overshoot must always exceed that or a clipped edge shows. */
.hero__blob--a {
  width: min(52vw, 640px);
  aspect-ratio: 1 / 0.92;
  left: -16%;
  top: -32%;
  background: rgba(223, 109, 89, 0.10);
}
.hero__blob--b {
  width: min(60vw, 760px);
  aspect-ratio: 1.1 / 1;
  right: -20%;
  bottom: -38%;
  background: rgba(223, 109, 89, 0.07);
  animation-delay: -12s;
}

/* The blush band is tall — these span its full height, bleeding off both
   the top and bottom edges like Dipsea's side shapes. */
.band-blush__blob--a {
  width: min(36vw, 500px);
  height: 118%;
  left: -16%;
  top: -9%;
  background: rgba(223, 109, 89, 0.12);
}
.band-blush__blob--b {
  width: min(30vw, 440px);
  height: 112%;
  right: -14%;
  top: -6%;
  background: var(--color-page-surface);
  opacity: 0.55;
  animation-delay: -8s;
}

/* CTA blobs live in .dark-band (CTA + footer), so they have room to read
   as full shapes; they only bleed off the page's sides and bottom. */
.cta-section__blob--a {
  width: min(62vw, 780px);
  aspect-ratio: 1 / 0.9;
  left: -18%;
  top: 34%;
  background: rgba(223, 109, 89, 0.14);
}
.cta-section__blob--b {
  width: min(34vw, 420px);
  aspect-ratio: 1 / 1.06;
  right: 4%;
  top: 8%;
  background: rgba(223, 109, 89, 0.10);
  animation-delay: -9s;
}

/* 8. Coming-soon badge -------------------------------------- */
.badge-soon {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

/* 9. Feature cards ------------------------------------------ */
.feature-cards__head { margin-bottom: var(--space-8); }
.feature-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.feature-card {
  background: var(--color-page-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-6) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-border);
}
.feature-card__icon {
  width: 40px; height: 40px;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card h3 {
  font-family: var(--font-body);
  font-size: var(--font-h3);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-5);
}
.feature-card__shot {
  margin-top: auto;
  height: clamp(220px, 24vw, 300px);
  border-top-left-radius: var(--radius-medium);
  border-top-right-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.feature-card__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-medium);
}

/* 10. Workflow + 11. Integrations --------------------------- */
.workflow-section {
  background: var(--color-page-background);
  /* The hero wave divider above already provides the visual transition;
     don't stack a full section pad on top of it. */
  padding-block-start: clamp(2rem, 4vw, 3.5rem);
}
.workflow-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
/* Let grid items shrink below their content's min-content width so a 2-col
   integration grid can't stretch the shared single column and overflow. */
.workflow-section__grid > * { min-width: 0; }
.integration-card { min-width: 0; }
.workflow-section__head { margin-bottom: var(--space-8); }

.workflow-steps { display: grid; gap: var(--space-5); padding: 0; }
.workflow-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.workflow-step__num {
  width: 40px; height: 40px;
  border: 1.5px solid var(--color-accent-border);
  color: var(--color-accent-text);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-small);
  font-weight: 600;
  background: var(--color-page-background);
  position: relative;
  z-index: 1;
}
.workflow-step h3 {
  font-family: var(--font-body);
  font-size: var(--font-h3);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.workflow-step p { color: var(--color-text-muted); font-size: var(--font-small); }

.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.integration-card {
  position: relative;
  background: var(--color-page-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-medium);
  padding: var(--space-5);
}
.integration-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.integration-card__icon { width: 32px; height: 32px; flex: none; }
.integration-card__icon svg { width: 100%; height: 100%; }
.icon-local { color: var(--color-accent); }
.icon-icloud { color: var(--color-icloud); }
.icon-jellyfin { color: var(--color-jellyfin); }
.icon-abs { color: var(--color-audiobookshelf); }
.integration-card h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.integration-card .badge-soon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  margin: 0;
}
.integration-card p { font-size: var(--font-small); color: var(--color-text-muted); }

/* 12. CTA --------------------------------------------------- */
/* Full-bleed dark band, echoing the hero (Dipsea-style bookend).
   .dark-band owns the background and clipping so the blobs can flow
   from the CTA down through the footer without a mid-band cut. */
.dark-band {
  position: relative;
  overflow: hidden;
  background: var(--color-hero-background);
}
.cta-section {
  position: relative;
  color: var(--color-text-light);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.cta-banner__wave {
  position: absolute;
  inset: -30% 0;
  width: 100%;
  height: 160%;
  object-fit: cover;
  opacity: 0.16;
  color: var(--color-accent);
  pointer-events: none;
}
.cta-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.cta-banner__icon { width: 64px; height: 64px; border-radius: var(--radius-medium); flex: none; }
.cta-banner h2 { font-size: clamp(1.75rem, 2.6vw, 2.6rem); margin-bottom: var(--space-2); }
.cta-banner p { color: var(--color-text-light-muted); max-width: 42ch; }
.cta-banner__action { position: relative; z-index: 1; }

/* 13. Footer ------------------------------------------------ */
/* Dark, continuing the CTA band above it. */
.site-footer {
  background: var(--color-hero-background);
  padding-block: var(--space-8) var(--space-6);
  color: var(--color-text-light-muted);
  font-size: var(--font-small);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
.site-footer__brand .brand {
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
}
.site-footer__brand p { max-width: 32ch; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.site-footer li + li { margin-top: var(--space-3); }
.site-footer a { transition: color 0.2s ease; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-5);
  font-size: var(--font-small);
}

/* 14. Legal pages ------------------------------------------- */
.legal-page { background: var(--color-page-background); }
.legal-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.legal-notice {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-medium);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-small);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}
.legal-content { max-width: 760px; }
.legal-content h1 { font-size: var(--font-display); margin-bottom: var(--space-3); }
.legal-content > p.legal-meta {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-6);
}
.legal-content h2 {
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: 600;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.legal-content h3 {
  font-family: var(--font-body);
  font-size: var(--font-body-large);
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.legal-content h1 + p {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-6);
}
.legal-content table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-5) 0;
  font-size: var(--font-small);
}
.legal-content th, .legal-content td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.legal-content th { background: var(--color-page-surface-muted); }
.legal-content p, .legal-content li {
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}
.legal-content ul { list-style: disc; padding-left: var(--space-5); }
.legal-content ol { padding-left: var(--space-5); }
.legal-content li { margin-bottom: var(--space-2); }
.legal-content a { color: var(--color-accent-text); text-decoration: underline; }
.legal-placeholder {
  background: #fff4d6;
  color: #6b5514;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
}
.legal-toc { align-self: start; font-size: var(--font-small); }
.legal-toc h2 {
  font-family: var(--font-body);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}
.legal-toc a { color: var(--color-text-muted); display: block; padding: var(--space-1) 0; }
.legal-toc a:hover { color: var(--color-accent-text); }

/* 15. Support page ------------------------------------------ */
.support-hero { max-width: 760px; }
.support-hero h1 { font-size: var(--font-display); margin-bottom: var(--space-4); }
.support-hero p { font-size: var(--font-body-large); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.support-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }
.faq-list { max-width: 760px; }
.faq-list__heading { font-size: var(--font-h2); margin-bottom: var(--space-5); }
.faq-item { border-bottom: 1px solid var(--color-divider-light); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-weight: 600;
  font-size: var(--font-body-large);
  list-style: none;
  cursor: pointer;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { color: var(--color-text-muted); padding-bottom: var(--space-5); line-height: 1.7; }

/* 16. Responsive -------------------------------------------- */
@media (max-width: 480px) {
  .container { width: min(calc(100% - 28px), 1320px); }
  .site-header .container { width: calc(100% - 40px); }
  /* Badge and ghost button wrap to two rows; keep both left-aligned so the
     action group reads as one unit instead of a full-width centered button. */
}

@media (min-width: 640px) {
  .feature-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 768px) {
  .integration-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-devices { max-width: 560px; }
  .legal-page__inner { grid-template-columns: 220px 1fr; }
  .legal-toc { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
  .legal-content { order: 2; }
}

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .header-actions .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .hero__layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .feature-cards__grid { grid-template-columns: repeat(4, 1fr); }
  .workflow-section__grid { grid-template-columns: 0.8fr 1.2fr; }
  .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-banner__action .button { min-height: 56px; }
}

@media (min-width: 1280px) {
  .hero-devices { max-width: 660px; aspect-ratio: 1.06 / 1; }
}

/* 17. Reduced motion ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .feature-card:hover { transform: none; }
}

/* No-JS fallback: content stays visible without JavaScript */
.no-js .reveal { opacity: 1; transform: none; }

/* 18. Print ------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .hero__wave, .cta-banner__wave,
  .hero-devices, .support-actions, .wave-divider, .blob { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}