/* ==========================================================================
   Småbiter — nettside
   Designtokens speiler appens AppColors/AppTypography.
   ========================================================================== */

:root {
  color-scheme: light;
  /* App DesignSystem Tokens */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-xxl: 32px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;

  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 40px rgba(31, 41, 55, 0.05);
  --shadow-deep: 0 20px 60px rgba(31, 41, 55, 0.08);

  --brand: #2B7882;          /* functional teal */
  --brand-accent: #39A0AD;   /* illustration accent */
  --brand-pressed: #205B63;
  --soft-teal: #E8F2F4;
  --device-rim: #C9C4BC;
  --brand-dark: #2B7882;     /* trykket/dyp teal */
  --bg: #FBF5EC;             /* App Store oat paper */
  --nav-bg: rgba(251, 245, 236, 0.96);
  --bg-bottom: #E8F2F4;
  --card: #FFFFFF;
  --ochre: #D4A35B;          /* decorative accent, never a primary action */
  --text: #112538;
  --text-secondary: #59646D;
  --divider: #DDD8CE;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Bevegelseskurver — myke, «smøraktige» flyt (ease-out-expo/quint). */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --reveal-dur: 0.95s;
}

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

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 88px;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

/* Shared low-contrast background used by document pages and the 404 page. */
.bg-splat {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--brand-dark);
  -webkit-mask-image: url('../assets/splat-bg.svg'), url('../assets/splat-bg.svg');
  mask-image: url('../assets/splat-bg.svg'), url('../assets/splat-bg.svg');
  -webkit-mask-size: clamp(300px, 50vw, 600px), clamp(400px, 70vw, 900px);
  mask-size: clamp(300px, 50vw, 600px), clamp(400px, 70vw, 900px);
  -webkit-mask-position: left -10vw top 20vh, right -10vw bottom 10vh;
  mask-position: left -10vw top 20vh, right -10vw bottom 10vh;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  opacity: 0.035;
}

/* Splat placements. The charter puts «fixed splat decoration without a
   communication job» on the remove list, so the mark is not a texture — every
   instance below has a stated job, and a new instance needs one too:
   1. .hero-product::before — icon-to-product link: a soft teal splat behind
      the phone on the oat hero echoes the app icon's composition,
      so the product shot and the App Store tile read as the same thing.
   2. .meal-diary .splat-mark — «Småbiter. Mye søl.»: the mark *is* a søl;
      this caption is where the site says so.
   3. .premium-footer .splat-mark — sign-off: the topbar opens every page
      with the mark, the footer closes it the same way. */
.splat-mark {
  display: inline-block;
  background-color: var(--brand);
  -webkit-mask: url('../assets/splat-bg.svg') center / contain no-repeat;
  mask: url('../assets/splat-bg.svg') center / contain no-repeat;
}

.meal-diary .splat-mark {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

.premium-footer .splat-mark {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto calc(var(--space-lg) * 2);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--brand-dark); }

:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: 3px;
}

/* Available before JavaScript loads and when it is disabled. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.no-js-nav,
.no-js-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: min(100% - 32px, 1140px);
  margin-inline: auto;
  padding: 16px 0;
}

.no-js-nav { border-bottom: 1px solid var(--divider); }
.no-js-footer { border-top: 1px solid var(--divider); }
.no-js-nav a,
.no-js-footer a { min-height: 44px; padding-block: 10px; font-weight: 600; }

/* ==========================================================================
   Layout Base & Sections
   ========================================================================== */
.spacious-section {
  padding: 120px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
@media (max-width: 834px) {
  .spacious-section { padding: 60px 16px; }
}

.overline {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: var(--space-xl);
  text-wrap: balance;
}

/* ==========================================================================
   Sticky Nav
   ========================================================================== */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 30px rgba(0,0,0,0.02);
}

@media (max-width: 834px) {
  .sticky-nav {
    padding: 12px 16px;
  }
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-splat {
  width: 36px;
  height: 36px;
  /* Matches .topbar-word's effective color exactly (light: --brand-dark via
     the Phase 3 override below; dark: --brand via the [data-theme="dark"]
     rule) so the mark and the wordmark are always the same teal. Both are now
     masked SVGs, so "color" means background-color on each. */
  background-color: var(--brand-dark);
  -webkit-mask-image: url('../assets/splat-bg.svg');
  mask-image: url('../assets/splat-bg.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The wordmark is the APPROVED OUTLINED EXPORT, never live text. §C of
   MASTER_COORDINATION.md (now `Archive/website/MASTER_COORDINATION.md`) forbids loading or imitating Baloo 2 as website text
   and §J lists an approximated wordmark as a release blocker; the site did
   both between 2026-08-23 and 2026-08-29 via a self-hosted webfont at the
   wrong weight (700 — the lockup is ExtraBold 800). assets/wordmark.svg comes
   from tools/generate_logo_wordmark.py, the same source as the app lockup.
   Applied as a mask, like .topbar-splat above, so one asset serves both themes
   via background-color. Sizes are the ink box (456.61 x 89.32, ratio 5.112)
   scaled to the old text's cap height; the generator prints the ratio if it
   ever changes. */
.topbar-word {
  display: inline-block;
  width: 82px;
  height: 16px;
  background-color: var(--brand);
  -webkit-mask: url('../assets/wordmark.svg') left center / contain no-repeat;
  mask: url('../assets/wordmark.svg') left center / contain no-repeat;
  /* The span keeps its real text as the no-CSS fallback; zeroing the font is
     what hides the glyphs behind the mask. */
  font-size: 0;
  line-height: 0;
}

.nav-actions { display: flex; align-items: center; gap: var(--space-xl); flex-shrink: 0; }

.nav-link {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--brand); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--brand);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover { 
  background: var(--brand-dark); 
  transform: translateY(-2px);
}

.lang-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); }
.lang-btn {
  background: transparent; border: none; font-weight: 600;
  font-family: var(--font);
  color: var(--text-secondary); cursor: pointer;
  padding: 6px 10px; border-radius: var(--radius-sm);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.is-active { color: var(--text); background: rgba(0,0,0,0.06); }
[data-theme="dark"] .lang-btn.is-active { background: rgba(255,255,255,0.1); }
.lang-sep { color: var(--divider); }

@media (max-width: 834px) {
  .nav-link { display: none; }
  .nav-actions { gap: var(--space-sm); }
  .nav-cta span { display: none; }
  .nav-cta { padding: 12px; border-radius: 50%; justify-content: center; width: 44px; height: 44px; }
  .nav-cta svg { margin-right: 0 !important; width: 16px; height: 16px; }
  .lang-btn { min-height: 40px; padding: 8px 4px; font-size: 0.8rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100svh + 60px);
  display: block;
  padding-top: max(110px, 12vh);
  padding-bottom: 120px;
  background: var(--brand);
  overflow: hidden;
}

@media (max-width: 834px) {
  .hero {
    min-height: auto;
    padding-top: max(90px, 10vh);
    padding-bottom: 60px;
  }
}

.hero-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero-content {
  flex: 1;
  text-align: left;
  padding-top: 40px;
}

.hero-title {
  color: #FFFFFF;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 28ch;
  margin: 0;
}

.hero-lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  max-width: 44rem;
  margin: 16px 0 0 0;
  text-wrap: pretty;
}

.cta { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: var(--space-md); 
}

.hero-cta { 
  margin-top: 24px; 
}
.hero-cta {
  align-items: flex-start;
}

.hero-mockup {
  flex: 1;
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.iphone-frame {
  position: relative;
  width: 100%;
  max-width: 256px;
  border-radius: var(--radius-xxl);
  box-shadow: 0 0 0 12px #1f2937, 0 30px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  background: #fff;
}

@media (max-width: 834px) {
  .iphone-frame {
    max-width: 220px;
  }
}

.iphone-frame img {
  width: 100%;
  display: block;
}

@media (max-width: 834px) {
  .hero-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }
  .hero-content {
    text-align: center;
    padding-top: 0;
  }
  .hero-title, .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta, .cta {
    align-items: center;
  }
  .hero-mockup {
    margin-top: 40px;
  }
}

.trust-strip-premium {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-dark);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.trust-icon {
  width: 24px; height: 24px; stroke: var(--ochre);
}
.trust-dot { opacity: 0.3; }



/* ==========================================================================
   Features Cards
   ========================================================================== */
.features-header { text-align: center; margin-bottom: 64px; }

/* ==========================================================================
   Feature List
   ========================================================================== */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
  max-width: 1140px;
  margin: 0 auto;
}

@media (max-width: 834px) {
  .feature-list {
    flex-direction: column;
    align-items: stretch;
  }
}

.feature-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  flex: 1 1 calc(33.333% - var(--space-xl));
  min-width: 280px;
  max-width: 360px;
}

.feature-row .feature-illustration {
  flex-shrink: 0;
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

.feature-row-text h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.feature-row-text p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin: 0;
}

@media (max-width: 834px) {
  .feature-row {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .feature-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-lg);
  }
}

.premium-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.02);
}

.card-content { padding: 40px 32px; flex-grow: 1; }

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: rgba(57, 160, 173, 0.10); color: var(--brand-dark);
  margin-bottom: var(--space-xl);
}
.card-icon svg { width: 28px; height: 28px; }

.premium-card h3 {
  font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: var(--space-md);
}
.premium-card p {
  color: var(--text-secondary); font-size: 1.05rem;
}

/* Card Demos */
.card-demo {
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-demo--guidance { background-color: #7A6B99; color: #fff; }
.card-demo--ochre { background-color: var(--ochre); color: #fff; }
.card-demo--safe { background-color: #10B981; color: #fff; }
.card-demo--accent { background-color: #6B59B8; color: #fff; }
.card-demo--gold { background-color: #F2D159; color: rgba(0,0,0,0.7); }
.card-demo--brand { background-color: var(--brand); color: #fff; }

/* ==========================================================================
   Final CTA & Credibility
   ========================================================================== */
.final-cta-section {
  text-align: center;
  padding-bottom: 0;
}

.final-cta-content h2 { margin-bottom: var(--space-xxl); }

.minimal-cred {
  margin-top: 80px;
  padding: 32px;
  background: rgba(0,0,0,0.02);
  border-radius: var(--radius-xl);
  text-align: left;
}

.minimal-cred h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.minimal-cred p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.premium-footer {
  padding: 80px 24px;
  text-align: center;
}

.footer-content {
  max-width: 1140px;
  margin: 0 auto;
  border-top: 1px solid var(--divider);
  padding-top: 64px;
}

.footer-links {
  display: flex; gap: var(--space-xxl); justify-content: center; flex-wrap: wrap; margin-bottom: 40px;
}

.footer-links a {
  color: var(--text); font-weight: 700; text-decoration: none; font-size: 1.05rem;
}
.footer-links a:hover { color: var(--brand); }

.footer-meta {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.footer-meta p {
  max-inline-size: 72ch;
  margin: 0;
}

[data-theme="dark"] {
  color-scheme: dark;
  --brand: #2F808B;
  --brand-dark: #6FC5CF;
  --brand-pressed: #2B7882;
  --soft-teal: #1A2E30;
  --device-rim: #526366;
  --bg: #0E1E21;
  --nav-bg: rgba(14, 30, 33, 0.95);
  --bg-bottom: #0E1E21;
  --card: #1A2E30;
  --text: #E8F2F4;
  --text-secondary: #7A9EA5;
  --divider: #1E3438;
}
[data-theme="dark"] .topbar-word { background-color: var(--brand-dark); }
[data-theme="dark"] .topbar-splat { background-color: var(--brand-dark); }
[data-theme="dark"] .legal a { color: #6FC5CF; }

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Juridiske artikkelsider (Beholdes)
   ========================================================================== */
.legal { max-width: 720px; margin: 120px auto 0; padding: 56px 24px 80px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: var(--space-xs); }
.legal .meta { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--space-xxl); }
.legal h2 { font-size: 1.5rem; font-weight: 700; margin: 40px 0 12px; color: var(--text); }
.legal h3 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { margin-bottom: var(--space-md); color: var(--text-secondary); }
.legal ul, .legal ol { padding-left: 24px; margin-bottom: var(--space-lg); color: var(--text-secondary); }
.legal table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 16px 0 24px; }
.legal th, .legal td { border: 1px solid var(--divider); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: rgba(0,0,0,0.03); font-weight: 700; color: var(--text); }
.legal .callout { background: rgba(57, 160, 173, 0.08); border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; margin: 20px 0; }
.legal .callout.warn { background: rgba(212, 163, 91, 0.12); border-left-color: var(--ochre); }

/* =======================================================================
   Phase 3 — native type and shared-shell refinements
   ======================================================================= */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-xxl: 28px;
  --shadow-subtle: 0 2px 8px rgba(31, 41, 55, 0.08);
  --shadow-card: 0 8px 24px rgba(31, 41, 55, 0.07);
  --shadow-deep: 0 16px 40px rgba(31, 41, 55, 0.12);
  --text-secondary: #59646D;
  --focus-ring: #9B681D;
}

body { font-weight: 400; line-height: 1.62; }
.hero h1, .section h2 { font-family: var(--font-display); font-weight: 750; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
.overline, .nav-link, .nav-cta, .lang-btn, .footer-links a,
.trust-strip-premium, .card-demo { font-weight: 600; }
.hero-title, .feature-row-text h3, .premium-card h3,
.minimal-cred h3, .legal h1, .legal h2 { font-weight: 700; }
p { max-width: 72ch; }

:focus-visible {
  outline: 2px solid var(--card);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-ring);
}
.sticky-nav { border-bottom-color: var(--divider); box-shadow: 0 1px 10px rgba(31, 41, 55, 0.04); }
.nav-content { min-width: 0; }
.topbar-brand { color: var(--brand-dark); }
/* Phase 3 sizing: the wordmark grew from 1.3rem to 1.5rem text; the mask box
   carries that same step (16px -> 19px of ink, width from the 5.112 ratio). */
.topbar-word { width: 97px; height: 19px; background-color: var(--brand-dark); }
.nav-actions { gap: 28px; }
.nav-link { font-size: 0.9375rem; }
.nav-cta { min-height: 44px; padding: 10px 18px; font-weight: 600; background-color: var(--brand); }
.nav-cta:hover { transform: none; background: var(--brand-pressed); }
.lang-btn { min-height: 40px; border: 1px solid transparent; }
.lang-btn.is-active { border-color: var(--divider); background: var(--card); }
.premium-card { border-color: var(--divider); box-shadow: var(--shadow-subtle); }
.legal { max-width: 760px; }
.legal p, .legal li { max-width: 68ch; line-height: 1.65; }
.table-wrap { max-width: 100%; overflow-x: auto; }

[data-theme="dark"] {
  --text-secondary: #B6D0D5;
  --divider: #315158;
  --focus-ring: #F0C86E;
}

@media (max-width: 834px) {
  .sticky-nav { padding: 8px 16px; }
  .nav-actions { gap: 6px; }
  .nav-cta { width: 44px; height: 44px; padding: 0; }
  .lang-btn { min-width: 44px; min-height: 44px; padding-inline: 6px; }
  .legal { margin-top: 88px; padding-inline: 16px; }
}

@media (max-width: 390px) {
  .sticky-nav { padding-inline: 8px; }
  .topbar-brand { height: 44px; gap: 7px; }
  .topbar-splat { width: 30px; height: 30px; }
  .topbar-word { width: 82px; height: 16px; }
  .nav-actions { gap: 4px; }
  .lang-toggle { gap: 0; }
  .lang-btn { width: 44px; min-width: 44px; min-height: 44px; padding-inline: 2px; font-size: 0; }
  .lang-btn::before { font-size: 0.75rem; }
  .lang-btn[data-lang="nb"]::before { content: "NO"; }
  .lang-btn[data-lang="en"]::before { content: "EN"; }
  .lang-sep { font-size: 0.75rem; }
}

/* =======================================================================
   Phase 4 — linear homepage
   ======================================================================= */
.page-width {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.nav-cta svg {
  display: none;
}

.nav-cta::before {
  content: "↓";
  font-size: 1rem;
  line-height: 1;
}

.narrow-copy {
  width: min(100% - 48px, 760px);
  margin-inline: auto;
}

main {
  overflow: clip;
}

.section {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px);
}

/* Hand-drawn wayfinding between sections. The line is decorative and is
   revealed once; content remains still and immediately readable. */
.section-arrow {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: clamp(230px, 28vw, 340px);
  color: var(--ochre);
  pointer-events: none;
  transform: translateY(45%);
}

.section-arrow--left {
  left: max(16px, calc((100vw - 1100px) / 2 + 24px));
}

.section-arrow__draw {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(-6px);
  transition:
    clip-path 600ms var(--ease-in-out),
    opacity 300ms var(--ease-out-expo),
    transform 600ms var(--ease-in-out);
}

.section-arrow[data-visible] .section-arrow__draw {
  opacity: 0.88;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

.section-arrow svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.section-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


.section-heading {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--brand-dark);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.5;
  text-transform: none;
}

.section h2 {
  max-width: 20ch;
  margin-bottom: 20px;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.section h3 {
  margin-bottom: 10px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
}

.section p {
  color: var(--text-secondary);
}

.section-lead {
  font-size: clamp(1.125rem, 2vw, 1.35rem);
}

.hero {
  min-height: auto;
  padding: clamp(112px, 9vw, 136px) 0 48px;
  background: var(--bg);
  color: var(--text);
  overflow: visible;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
  padding: 0;
}

.hero-content {
  padding: clamp(32px, 6vw, 80px) 0 0;
  text-align: left;
}

.hero .eyebrow {
  color: var(--brand-dark);
  margin-bottom: 20px;
}

.hero h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(3rem, 5.8vw, 4.75rem);
  line-height: 1.06;
  text-wrap: balance;
}

.hero-lead {
  max-width: 36ch;
  margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
}

.store-availability {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.app-store-badge {
  display: block;
  width: 120px;
  height: 40px;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  transition: background-color 160ms ease;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

.primary-action:hover {
  background: var(--brand-pressed);
}
.primary-action:active { transform: translateY(1px); }

.hero-reassurance {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.hero-actions .store-availability { margin-top: -6px; }

.availability {
  max-width: none;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
}

.hero-product {
  margin: 0;
  min-width: 0;
  position: relative;
}

/* Splat placement 1 (see the .splat-mark comment block): the icon composition
   behind the product shot. Kept to a whisper — it should register as texture
   on the teal, not as a second illustration. */
/* The soft splat echoes the app icon behind the product, without covering it. */
.hero-product::before {
  content: "";
  position: absolute;
  width: min(480px, 135%);
  aspect-ratio: 1;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: var(--soft-teal);
  -webkit-mask: url('../assets/splat-bg.svg') center / contain no-repeat;
  mask: url('../assets/splat-bg.svg') center / contain no-repeat;
  pointer-events: none;
}

.hero-product .hero-phone {
  position: relative;
  width: min(100%, 316px);
  border: 6px solid var(--device-rim);
  border-radius: 40px;
  padding: 5px;
  background: var(--card);
  box-shadow: 0 14px 36px rgba(17, 37, 56, 0.10);
}

.hero-phone img { border-radius: 29px; }
.hero-phone .preview-dark {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.hero-phone[data-preview="dark"] .preview-dark { opacity: 1; }
.hero-phone.preview-instant .preview-dark { transition: none; }

.preview-caption {
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px auto 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.preview-caption.is-interactive { display: flex; }
.preview-controls {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--divider);
  border-radius: 999px;
}
.preview-controls[hidden] { display: none; }
.preview-controls button {
  min-width: 64px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.preview-controls button:hover { color: var(--text); }
.preview-controls button:disabled { opacity: 0.45; cursor: default; }
.preview-controls button[aria-pressed="true"] { background: var(--brand); color: #fff; }

.evidence-section {
  background: var(--card);
  scroll-margin-top: 88px;
}

.evidence-layout {
  display: block;
}

.evidence-copy {
  max-width: 720px;
}

.evidence-copy p:last-child {
  font-size: 1.125rem;
}

.phone-frame {
  width: min(100%, 300px);
  margin-inline: auto;
  overflow: hidden;
  border: 10px solid #1F2937;
  border-radius: 34px;
  background: #fff;
  box-shadow: var(--shadow-deep);
}

.phone-frame img {
  width: 100%;
  height: auto;
}

.relief-section {
  border-bottom: 1px solid var(--divider);
  background: var(--bg);
}

.relief-section .narrow-copy {
  max-width: 760px;
}

.meal-diary {
  margin-top: clamp(28px, 4vw, 44px);
}

.meal-diary__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(150px, 17vw, 188px));
  gap: clamp(8px, 1vw, 12px);
}

.meal-diary__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
}

.meal-diary__image--lead {
  grid-column: 1;
  grid-row: 1 / 3;
}

.meal-diary__image--mess {
  grid-column: 2;
  grid-row: 1;
  object-position: center 42%;
}

.meal-diary__image--hands {
  grid-column: 2;
  grid-row: 2;
  object-position: center 58%;
}

.meal-diary__image--aftermath {
  grid-column: 3;
  grid-row: 1 / 3;
}

.meal-diary figcaption {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.workflow-section {
  background: var(--card);
}

.workflow-list {
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: workflow;
}

.workflow-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid var(--divider);
}

.workflow-list li:last-child {
  border-bottom: 1px solid var(--divider);
}

.step-number {
  color: var(--brand-dark);
  font-size: 1rem;
  font-weight: 700;
}

.workflow-list p {
  margin: 0;
  font-size: 1.0625rem;
}

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

.fact-row,
.trust-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 7vw, 88px);
  max-width: 880px;
  padding-block: 36px;
  border-top: 1px solid var(--divider);
}

.fact-row--reverse {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.fact-row--reverse img,
.fact-row--reverse .feature-illustration {
  grid-column: 2;
  grid-row: 1;
}

.fact-row--reverse div {
  grid-column: 1;
  grid-row: 1;
}

.fact-row img,
.trust-row img,
.fact-row .feature-illustration,
.trust-row .feature-illustration {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.fact-row p,
.trust-row p {
  margin: 0;
  font-size: 1.0625rem;
}

.trust-section {
  background: var(--card);
}

.trust-row {
  grid-template-columns: 160px minmax(0, 1fr);
  max-width: 960px;
  border-top: 0;
}

.trust-row--bordered {
  border-top: 1px solid var(--divider);
}

.trust-row img,
.trust-row .feature-illustration {
  width: 160px;
  height: 160px;
}

/* =======================================================================
   Feature illustration motion

   Marketing-only explanation and delight. JavaScript adds `motion-ready`
   and reveals each scene once as it enters the viewport; without JavaScript,
   every SVG remains fully visible.
   ======================================================================= */
.feature-illustration {
  display: block;
  max-width: 100%;
  overflow: visible;
}

.motion-ready .feature-illustration [data-motion] {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity var(--motion-duration, 600ms) var(--motion-ease, var(--ease-out-expo)) var(--motion-delay, 0ms),
    transform var(--motion-duration, 600ms) var(--motion-ease, var(--ease-out-expo)) var(--motion-delay, 0ms);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion] {
  opacity: 0;
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="pop"] {
  transform: translateY(8px) scale(.94);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="settle"] {
  transform: translate(10px, 8px) rotate(5deg) scale(.96);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="pantry-row"] {
  transform: translateY(8px) scale(.97);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="lock-close"] {
  transform: translateY(-10px);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="from-left"] {
  transform: translateX(-12px) scale(.98);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="from-right"] {
  transform: translateX(12px) scale(.98);
}

.motion-ready .feature-illustration:not([data-visible]) [data-motion="turn"] {
  transform: rotate(-90deg) scale(.94);
}

.motion-ready .feature-illustration[data-visible] [data-motion] {
  opacity: 1;
  transform: translate(0, 0) rotate(0) scale(1);
}

.allergen-row:nth-child(1) { --motion-delay: 80ms; }
.allergen-row:nth-child(2) { --motion-delay: 140ms; }
.allergen-row:nth-child(3) { --motion-delay: 200ms; }
.allergen-magnifier { --motion-delay: 240ms; }

.pantry-shell { --motion-delay: 0ms; }
.pantry-front { --motion-delay: 80ms; }
.pantry-row--1 { --motion-delay: 160ms; }
.pantry-row--2 { --motion-delay: 240ms; }
.pantry-row--3 { --motion-delay: 320ms; }

/* The catalogue rests for 2.4s, then advances one 33px row over 600ms.
   Three duplicate rows at the end make the iteration reset invisible. */
.feature-illustration--foods[data-loop-active] .pantry-track {
  animation: pantry-catalog-scroll 18s linear infinite;
  will-change: transform;
}

@keyframes pantry-catalog-scroll {
  0% { transform: translateY(0); }
  13.333% {
    transform: translateY(0);
    animation-timing-function: var(--ease-in-out);
  }
  16.667% { transform: translateY(-33px); }
  30% {
    transform: translateY(-33px);
    animation-timing-function: var(--ease-in-out);
  }
  33.333% { transform: translateY(-66px); }
  46.667% {
    transform: translateY(-66px);
    animation-timing-function: var(--ease-in-out);
  }
  50% { transform: translateY(-99px); }
  63.333% {
    transform: translateY(-99px);
    animation-timing-function: var(--ease-in-out);
  }
  66.667% { transform: translateY(-132px); }
  80% {
    transform: translateY(-132px);
    animation-timing-function: var(--ease-in-out);
  }
  83.333% { transform: translateY(-165px); }
  96.667% {
    transform: translateY(-165px);
    animation-timing-function: var(--ease-in-out);
  }
  100% { transform: translateY(-198px); }
}

.privacy-line {
  --motion-duration: 400ms;
}
.privacy-line:nth-child(1) { --motion-delay: 100ms; }
.privacy-line:nth-child(2) { --motion-delay: 150ms; }
.privacy-line:nth-child(3) { --motion-delay: 200ms; }
.privacy-lock { --motion-delay: 220ms; }
.privacy-shackle { --motion-delay: 350ms; --motion-duration: 500ms; }

.sync-phone--left { --motion-delay: 0ms; }
.sync-phone--right { --motion-delay: 80ms; }
.sync-mark {
  --motion-delay: 180ms;
  --motion-duration: 600ms;
  --motion-ease: var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .feature-illustration [data-motion] {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  .feature-illustration--foods .pantry-track {
    animation: none !important;
    transform: none !important;
  }
}

.emphasis-line {
  margin-top: 12px !important;
  color: var(--text) !important;
  font-weight: 600;
}

.source-note {
  display: block;
  max-width: 960px;
  padding-block: 36px;
  border-top: 1px solid var(--divider);
}

.source-note p {
  margin: 0;
  font-size: 1.0625rem;
}

.limits-section {
  background: #1C3F44;
}

.limits-section .eyebrow {
  color: #A8DDE2;
}

.limits-section h2,
.limits-section p {
  color: #F2F8F9;
}

.limits-section p + p {
  margin-top: 20px;
}

.final-section {
  background: var(--bg);
  text-align: center;
}

.final-section .narrow-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.availability--final {
  margin-bottom: 20px;
  color: var(--brand-dark);
}

.store-availability--final {
  align-items: center;
  margin-bottom: 16px;
}

.store-availability--final .availability--final {
  margin-bottom: 0;
}

.final-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 28px;
}

.final-links a {
  min-height: 44px;
  padding-block: 10px;
  color: var(--brand-dark);
  font-weight: 600;
  text-underline-offset: 4px;
}

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .step-number,
[data-theme="dark"] .availability--final,
[data-theme="dark"] .final-links a {
  color: #6FC5CF;
}

[data-theme="dark"] .hero .eyebrow {
  color: var(--brand-dark);
  margin-bottom: 20px;
}

[data-theme="dark"] .primary-action {
  color: #fff;
}

@media (max-width: 768px) {
  .page-width,
  .narrow-copy {
    width: min(100% - 32px, 1100px);
  }

  .hero {
    padding-top: 104px;
    padding-bottom: 36px;
  }

  .hero-layout,
  .evidence-layout {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    align-items: start;
    text-align: left;
  }

  .hero-content {
    text-align: left;
    padding-top: 0;
  }

  .evidence-copy {
    padding-top: 0;
  }

  .hero-product {
    width: 100%;
  }

  .hero-product .hero-phone {
    width: min(80vw, 304px);
  }

  .workflow-list li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(2.75rem, 11vw, 3.5rem);
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .store-availability {
    align-items: flex-start;
  }

  .primary-action {
    width: 100%;
  }

  .meal-diary {
    margin-top: 36px;
  }

  .meal-diary__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .meal-diary__image--lead {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 3 / 2;
  }

  .meal-diary__image--mess,
  .meal-diary__image--hands,
  .meal-diary__image--aftermath {
    grid-row: 2;
    aspect-ratio: 3 / 4;
  }

  .meal-diary__image--mess { grid-column: 1; }
  .meal-diary__image--hands { grid-column: 2; }
  .meal-diary__image--aftermath { grid-column: 3; }

  .fact-row,
  .fact-row--reverse,
  .trust-row,
  .source-note {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fact-row--reverse img,
  .fact-row--reverse .feature-illustration,
  .fact-row--reverse div {
    grid-column: 1;
  }

  .fact-row--reverse img,
  .fact-row--reverse .feature-illustration {
    grid-row: 1;
  }

  .fact-row--reverse div {
    grid-row: 2;
  }

  .fact-row img,
  .trust-row img,
  .fact-row .feature-illustration,
  .trust-row .feature-illustration {
    width: 128px;
    height: 128px;
  }

}