/* Lamplight foundations for the marketing site (owner 2026-11-08).
   Everything below the marker is copied verbatim from apps/storytailor-web/src/styles/tokens.css, which is
   GENERATED by scripts/build-tokens.mjs from design-tokens/lamplight.figma.json (Figma 6Ri3KOHJhByb488Sa0sXVt).
   Do not edit the copied block here: change Figma / lamplight.figma.json, regenerate, and copy it again.
   This preamble adds what the app gets from next/font (the Inter faces and font-family tokens) and the website-only display sizes. */
@font-face{font-family:Inter;src:url('/assets/runtime/dd8a4575be9806105ac3decd02805cd2782fe7c05abb02c582316bc436ce03ae/font.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* Inter carries the opsz axis: display and title styles render at opsz 32, as in the app. */
  --font-body:Inter,Arial,sans-serif;
  --font-display:Inter,Arial,sans-serif;
  --font-modal:Inter,Arial,sans-serif;
  /* Website-only display steps (Figma text styles Display 3xl/4xl, variables Font size/display-3xl|4xl, added 2026-11-09).
     The app's token export doesn't carry type sizes, so they live here until it does. */
  --font-size-display-3xl:72px;--line-height-display-3xl:76px;
  --font-size-display-4xl:80px;--line-height-display-4xl:84px;
}
/* ---- copied from apps/storytailor-web/src/styles/tokens.css ---- */
/* GENERATED by scripts/build-tokens.mjs from design-tokens/lamplight.figma.json — do not edit. */
/* Lamplight foundations: Figma 6Ri3KOHJhByb488Sa0sXVt (Colors 884:6, Typography 884:7, Spacing 884:8, Effects 884:9). */
:root {
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;
  --color-warm-25: #FBF8F3;
  --color-warm-50: #F5F1EA;
  --color-warm-100: #EEE8DF;
  --color-warm-200: #E5DDD2;
  --color-warm-300: #CFC5B7;
  --color-warm-400: #A1958A;
  --color-warm-500: #8E8275;
  --color-warm-600: #6E655C;
  --color-warm-700: #4A433C;
  --color-warm-800: #2E2721;
  --color-warm-850: #24201B;
  --color-warm-900: #1E1A16;
  --color-warm-925: #1B1713;
  --color-warm-950: #14110E;
  --color-warm-975: #0F0D0B;
  --color-ink: #1C1915;
  --color-cream-50: #F7F1E8;
  --color-cream-100: #F2EADF;
  --color-cream-200: #C4B8A9;
  --color-lamp-50: #FBF1E4;
  --color-lamp-100: #F4E4D3;
  --color-lamp-150: #F2DDC2;
  --color-lamp-200: #E8C39A;
  --color-lamp-400: #E8A866;
  --color-lamp-500: #C9772F;
  --color-lamp-600: #8A5A2B;
  --color-lamp-800: #4A3420;
  --color-lamp-900: #3A2A1A;
  --color-lamp-925: #312419;
  --color-red-50: #FEF3F2;
  --color-red-100: #FEE4E2;
  --color-red-300: #FDA29B;
  --color-red-500: #E8362A;
  --color-red-700: #B42318;
  --color-red-900: #7A271A;
  --color-red-950: #2A1512;
  --color-green-50: #EEF4E8;
  --color-green-100: #BFE3C0;
  --color-green-300: #9CCB9F;
  --color-green-700: #2F6B3F;
  --color-green-900: #12301A;
  --color-clay-100: #EFD6CC;
  --color-clay-900: #3B2621;
  --color-sage-100: #DDE3CB;
  --color-sage-900: #28301F;
  --color-oat-100: #E7DCCB;
  --color-oat-900: #2C251E;
  --color-alpha-dusk-8: #14110E14;
  --color-alpha-cream-8: #F7F1E814;
  --color-alpha-dusk-10: #14110E1A;
  --color-alpha-cream-10: #F7F1E81A;
  --color-alpha-dusk-16: #14110E29;
  --color-alpha-cream-16: #F7F1E829;
  --color-alpha-dusk-22: #14110E38;
  --color-alpha-cream-22: #F7F1E838;
  --color-alpha-dusk-35: #14110E59;
  --color-alpha-cream-35: #F7F1E859;
  --color-alpha-dusk-46: #14110E75;
  --color-alpha-cream-46: #F7F1E875;
  --color-alpha-dusk-50: #14110E80;
  --color-alpha-cream-50: #F7F1E880;
  --color-alpha-dusk-55: #14110E8C;
  --color-alpha-cream-55: #F7F1E88C;
  --color-alpha-dusk-62: #14110E9E;
  --color-alpha-cream-62: #F7F1E89E;
  --color-alpha-dusk-78: #14110EC7;
  --color-alpha-cream-78: #F7F1E8C7;
  --color-alpha-lamp-40: #E8A86666;
  --color-alpha-night-veil-62: #0806059E;
  --color-alpha-black-50: #00000080;
  --color-alpha-black-35: #00000059;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-dock-mobile: 30px;
  --radius-32: 32px;
  --radius-dock: 34px;
  --radius-dock-inner: 26px;
  --radius-dock-mobile-inner: 22px;
  --radius-modal: 36px;
  --radius-sheet: 38px;
  --radius-40: 40px;
  --radius-42: 42px;
  --radius-44: 44px;
  --radius-46: 46px;
  --radius-48: 48px;
  --radius-full: 9999px;
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 120px;
  --spacing-11xl: 160px;
  --size-tag: 24px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 44px;
  --size-hero-md: 48px;
  --size-hero-lg: 52px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-avatar-xs: 24px;
  --size-avatar-sm: 32px;
  --size-avatar-md: 40px;
  --size-avatar-lg: 56px;
  --size-avatar-xl: 80px;
  --size-modal-inset: 16px;
  --container-content-max: 1120px;
  --container-reading-max: 680px;
  --container-composer-width: 720px;
  --container-modal-s: 360px;
  --container-modal-m: 440px;
  --container-modal-l: 640px;
  --container-sheet-mobile: 343px;
  --container-margin-mobile: 16px;
  --container-margin-desktop: 40px;
  --container-margin-marketing: 160px;
  --container-dock-clearance: 40px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-enter: 320ms;
  --duration-calm: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
}
:root, [data-light="day"] {
  color-scheme: light;
  --bg-canvas: var(--color-warm-50);
  --bg-quiet: var(--color-warm-25);
  --bg-raised: var(--color-base-white);
  --bg-field: var(--color-warm-100);
  --bg-control: var(--color-warm-100);
  /* The edge on a raised floating surface (prompt bar, dock): none by day, the shadow carries it (owner 10-29). */
  --edge-raised: transparent;
  --bg-on-field: var(--color-base-white); /* Figma Background/bg-on-field: a control in a field well (Now playing row) */
  --bg-sunk: var(--color-warm-100);
  --bg-inverse: var(--color-ink);
  --bg-inverse-hover: var(--color-warm-800);
  --bg-selected: var(--color-ink);
  --bg-accent: var(--color-ink);
  --bg-accent-subtle: var(--color-warm-100);
  --bg-on-accent: var(--color-alpha-cream-16);
  --bg-on-media: var(--color-alpha-dusk-50);
  --bg-on-media-solid: var(--color-cream-50);
  --bg-overlay: var(--color-alpha-dusk-46);
  --bg-destructive: var(--color-red-100);
  --bg-error-subtle: var(--color-red-50);
  --bg-success-subtle: var(--color-green-50);
  --bg-brand-mark: var(--color-ink);
  --bg-segment: var(--color-base-white);
  --bg-new: var(--color-lamp-100);
  --bg-skeleton: var(--color-warm-100);
  --bg-skeleton-shine: var(--color-warm-50);
  --bg-word-lamp: var(--color-lamp-150);
  --bg-word-clay: var(--color-clay-100);
  --bg-word-sage: var(--color-sage-100);
  --bg-word-oat: var(--color-oat-100);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-warm-700);
  --text-tertiary: var(--color-warm-600);
  --text-placeholder: var(--color-warm-600);
  --text-on-inverse: var(--color-warm-25);
  --text-on-media: var(--color-cream-50);
  --text-on-selected: var(--color-warm-25);
  --text-on-cream: var(--color-ink);
  --text-on-accent-tertiary: var(--color-alpha-cream-78);
  --text-accent: var(--color-ink);
  --text-error: var(--color-red-700);
  --text-success: var(--color-green-700);
  --text-brand: var(--color-ink);
  --text-new: var(--color-lamp-600);
  --border-hairline: var(--color-warm-200);
  --border-divider: var(--color-warm-200);
  --border-focus: var(--color-ink);
  --border-selected: var(--color-ink);
  --border-error: var(--color-red-700);
  --border-on-media: var(--color-alpha-cream-22);
  --border-on-accent: var(--color-alpha-cream-16);
  --fg-primary: var(--color-ink);
  --fg-secondary: var(--color-warm-700);
  --fg-tertiary: var(--color-warm-600);
  --fg-on-inverse: var(--color-warm-25);
  --fg-on-media: var(--color-cream-50);
  --fg-accent: var(--color-ink);
  --fg-brand: var(--color-ink);
  --fg-error: var(--color-red-700);
  --fg-logo: var(--color-ink);
  --focus-ring-color: var(--color-alpha-dusk-22);
  --focus-gap-color: var(--color-warm-50);
  --shadow-soft-color: var(--color-alpha-dusk-8);
  --shadow-strong-color: var(--color-alpha-dusk-16);
  --icon: var(--fg-primary);
  --shadow-raised: 0px 1px 2px 0px var(--shadow-soft-color), 0px 12px 40px 0px var(--shadow-soft-color);
  --shadow-dock: 0px 10px 30px 0px var(--shadow-strong-color);
  --shadow-modal: 0px 2px 6px 0px var(--shadow-soft-color), 0px 24px 48px -12px var(--shadow-strong-color);
  --shadow-menu: 0px 4px 12px -2px var(--shadow-soft-color), 0px 16px 32px -8px var(--shadow-strong-color);
  --focus-ring: 0px 0px 0px 3px var(--focus-ring-color);
}
[data-light="night"] {
  color-scheme: dark;
  --bg-canvas: var(--color-warm-950);
  --bg-quiet: var(--color-warm-900);
  --bg-raised: var(--color-warm-850);
  --bg-field: var(--color-warm-925);
  --bg-control: var(--color-warm-800);
  /* By night a dark shadow can't hold the shape, so the faint cream divider edge stays. */
  --edge-raised: var(--border-divider);
  --bg-on-field: var(--color-warm-800);
  --bg-sunk: var(--color-warm-975);
  --bg-inverse: var(--color-cream-100);
  --bg-inverse-hover: var(--color-cream-50);
  --bg-selected: var(--color-lamp-900);
  --bg-accent: var(--color-lamp-400);
  --bg-accent-subtle: var(--color-lamp-900);
  --bg-on-accent: var(--color-alpha-dusk-16);
  --bg-on-media: var(--color-alpha-dusk-50);
  --bg-on-media-solid: var(--color-cream-50);
  --bg-overlay: var(--color-alpha-night-veil-62);
  --bg-destructive: var(--color-red-900);
  --bg-error-subtle: var(--color-red-950);
  --bg-success-subtle: var(--color-green-900);
  --bg-brand-mark: var(--color-cream-100);
  --bg-segment: var(--color-warm-950);
  --bg-new: var(--color-lamp-900);
  --bg-skeleton: var(--color-warm-800);
  --bg-skeleton-shine: var(--color-warm-700);
  --bg-word-lamp: var(--color-lamp-925);
  --bg-word-clay: var(--color-clay-900);
  --bg-word-sage: var(--color-sage-900);
  --bg-word-oat: var(--color-oat-900);
  --text-primary: var(--color-cream-100);
  --text-secondary: var(--color-cream-200);
  --text-tertiary: var(--color-warm-400);
  --text-placeholder: var(--color-warm-400);
  --text-on-inverse: var(--color-warm-950);
  --text-on-media: var(--color-cream-50);
  --text-on-selected: var(--color-lamp-400);
  --text-on-cream: var(--color-ink);
  --text-on-accent-tertiary: var(--color-alpha-dusk-78);
  --text-accent: var(--color-lamp-400);
  --text-error: var(--color-red-300);
  --text-success: var(--color-green-300);
  --text-brand: var(--color-cream-100);
  --text-new: var(--color-lamp-400);
  --border-hairline: var(--color-warm-800);
  --border-divider: var(--color-alpha-cream-10);
  --border-focus: var(--color-lamp-400);
  --border-selected: var(--color-lamp-400);
  --border-error: var(--color-red-300);
  --border-on-media: var(--color-alpha-cream-22);
  --border-on-accent: var(--color-alpha-dusk-16);
  --fg-primary: var(--color-cream-100);
  --fg-secondary: var(--color-cream-200);
  --fg-tertiary: var(--color-warm-500);
  --fg-on-inverse: var(--color-warm-950);
  --fg-on-media: var(--color-cream-50);
  --fg-accent: var(--color-lamp-400);
  --fg-brand: var(--color-cream-100);
  --fg-error: var(--color-red-300);
  --fg-logo: var(--color-cream-100);
  --focus-ring-color: var(--color-alpha-lamp-40);
  --focus-gap-color: var(--color-warm-950);
  --shadow-soft-color: var(--color-alpha-black-35);
  --shadow-strong-color: var(--color-alpha-black-50);
  --icon: var(--fg-primary);
  --shadow-raised: 0px 1px 2px 0px var(--shadow-soft-color), 0px 12px 40px 0px var(--shadow-soft-color);
  --shadow-dock: 0px 10px 30px 0px var(--shadow-strong-color);
  --shadow-modal: 0px 2px 6px 0px var(--shadow-soft-color), 0px 24px 48px -12px var(--shadow-strong-color);
  --shadow-menu: 0px 4px 12px -2px var(--shadow-soft-color), 0px 16px 32px -8px var(--shadow-strong-color);
  --focus-ring: 0px 0px 0px 3px var(--focus-ring-color);
}
[data-icon-tone="default"] { --icon: var(--fg-primary); }
[data-icon-tone="secondary"] { --icon: var(--fg-secondary); }
[data-icon-tone="tertiary"] { --icon: var(--fg-tertiary); }
[data-icon-tone="on-inverse"] { --icon: var(--fg-on-inverse); }
[data-icon-tone="on-media"] { --icon: var(--fg-on-media); }
[data-icon-tone="on-selected"] { --icon: var(--text-on-selected); }
[data-icon-tone="accent"] { --icon: var(--fg-accent); }
[data-icon-tone="error"] { --icon: var(--fg-error); }
[data-icon-tone="ink"] { --icon: var(--color-ink); }
.t-display-2xl-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -2px;
  font-variation-settings: "opsz" 32;
}
.t-display-xl-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -1.4px;
  font-variation-settings: "opsz" 32;
}
.t-display-lg-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.1px;
  font-variation-settings: "opsz" 32;
}
.t-display-md-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -1px;
  font-variation-settings: "opsz" 32;
}
.t-display-sm-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.8px;
  font-variation-settings: "opsz" 32;
}
.t-title-lg-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.6px;
  font-variation-settings: "opsz" 32;
}
.t-title-md-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.4px;
  font-variation-settings: "opsz" 32;
}
.t-title-sm-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.3px;
  font-variation-settings: "opsz" 32;
}
.t-title-xs-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-variation-settings: "opsz" 32;
}
.t-modal-title-medium {
  font-family: var(--font-modal);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-reading-lg-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: -0.2px;
}
.t-reading-md-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 34px;
  letter-spacing: -0.1px;
}
.t-text-xl-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.1px;
}
.t-text-lg-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.1px;
}
.t-text-lg-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-md-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-md-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-sm-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-sm-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-xs-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-xs-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-2xs-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0px;
}
.t-text-2xs-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0px;
}
.t-text-3xs-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0px;
}
.t-eyebrow-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Skip to content (owner N6, 2026-11-09): hidden until focused, the first stop for keyboard and switch users. */
.st-skip {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 16px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.st-skip:focus { transform: none; outline: 2px solid var(--border-focus); outline-offset: 2px; }