/* Storytailor marketing — final design layer (owner 2026-11-08). Everything not listed here is the live site.
   Frost nav · the in-app prompt bar · bubble story cards (/assets/runtime/dcffef3ab8208526/e5e982f5cfb0/hero-cards.css) · Lamplight-dark pricing · Lamplight foundations.
   Selectors use html:root so they carry the same weight the option switches had. */
/* =====================================================================================
   NAV · Frost — never red. options.js samples what sits under the bar and sets, on .guest-header:
   --ft (tint, "r g b"), --fa (tint alpha: 50%, raised only until var(--color-warm-25) or ink text reaches 4.5:1 over
   the blurred backdrop), data-frost-tone="dark|light". The prompt bar shares the same material.
   ===================================================================================== */
html:root .guest-header{--ft:30 26 22;--fa:.94;--nav-ink:var(--color-cream-50);--nav-cta-bg:var(--color-warm-25);--nav-cta-ink:var(--color-ink);--nav-cta-hover:var(--color-warm-25)}
html:root .guest-header[data-frost-tone=light]{--nav-ink:var(--color-ink);--nav-cta-bg:var(--color-ink);--nav-cta-ink:var(--color-warm-25);--nav-cta-hover:var(--color-warm-975)}
html:root .guest-header .guest-nav{position:relative;isolation:isolate;color:var(--nav-ink);background:rgb(var(--ft) / var(--fa));transition:background-color 420ms cubic-bezier(.22,1,.36,1),box-shadow 420ms,color 240ms,-webkit-backdrop-filter 420ms,backdrop-filter 420ms}
html:root .guest-header .guest-start{background:var(--nav-cta-bg);color:var(--nav-cta-ink);transition:background-color 200ms,color 200ms}
html:root .guest-header .guest-start:hover{background:var(--nav-cta-hover)}
html:root .guest-header .guest-signin,html:root .guest-header .guest-links a{color:inherit}
html:root .guest-header .guest-current-dot{background:currentColor}
html:root .guest-header .guest-logo img{transition:filter 240ms}
html:root .guest-header[data-frost-tone=light] .guest-logo img{filter:brightness(0)}
html:root .guest-header .guest-nav :focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* The logo link's tap area meets WCAG 2.5.8 (24px minimum; it gets the full 44px bar height). */
html:root .guest-header .guest-logo{min-height:44px}

/* Heavy blur and saturation under a translucent tint just strong enough for the text. */
html:root .guest-header .guest-nav{-webkit-backdrop-filter:blur(36px) saturate(175%);backdrop-filter:blur(36px) saturate(175%);box-shadow:inset 0 0 0 1px var(--color-alpha-cream-10),var(--shadow-dock)}
html:root .guest-header[data-frost-tone=light] .guest-nav{box-shadow:inset 0 0 0 1px rgb(28 25 21 / .07),var(--shadow-dock)}

/* Fallbacks: no backdrop-filter, reduced transparency or more contrast → an opaque blended bar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:root .guest-header .guest-nav{background:rgb(var(--ft) / .96)}
  html:root :is(.sth-dock,.prompt-study){--pb-raised:rgb(var(--ft) / .96)!important}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html:root .guest-header .guest-nav{background:rgb(var(--ft) / 1)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html:root :is(.sth-dock,.prompt-study){--pb-raised:rgb(var(--ft) / 1)!important}
  html:root :is(.sth,.prompt-study) .sth-prompt{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){html:root .guest-header .guest-nav{transition:none}}

/* =====================================================================================
   PROMPT BAR — the in-app Prompt bar (Figma 1135:16329) at marketing scale.
   Home bar R36 / p16 / gap 12 (36 = 20 + 16); phones R38 / p16 / gap 8 (38 = 22 + 16).
   Field 4/12, Text sm 14/20. Pills on bg-sunk, 40 tall (44 on phones). Send is the ink pill.
   Same form, same controllers, same story-start hand-off as the live site.
   ===================================================================================== */
/* Frost (owner 2026-11-08): the bar is the nav's material, not a white slab. options.js samples the art under
   each composer and sets --ft / --fa / data-frost-tone on it. Dark tone: cream text, a cream "Write for me"
   pill like "Get started". Light tone: ink text and an ink pill. The ink Send appears only once there are words. */
html:root{--pb-r:36px;--pb-p:16px;--pb-gap:12px;--pb-h:40px}
html:root :is(.sth-dock,.prompt-study){--ft:30 26 22;--fa:.94;--pb-raised:rgb(var(--ft) / var(--fa));--pb-text:var(--color-cream-50);--pb-placeholder:var(--color-alpha-cream-78);--pb-muted:var(--color-alpha-cream-78);--pb-sunk:var(--color-alpha-cream-16);--pb-sunk-hover:var(--color-alpha-cream-22);--pb-ink:var(--color-warm-25);--pb-ink-hover:var(--color-cream-50);--pb-on-ink:var(--color-ink);--pb-rim:var(--color-alpha-cream-16);--pb-rim-focus:var(--color-alpha-cream-35);--pb-shadow:0 18px 40px -20px var(--color-alpha-dusk-46);--pb-icon-sunk:brightness(0) invert(1);--pb-icon-ink:brightness(0)}
/* Light tone (owner 2026-11-08): a pale frost on a cream page all but disappears, so over light backgrounds the bar is
   Lamplight's field well (warm-100, the in-app bg-field) at 94% with the day raised shadow. Over art it stays frost. */
html:root :is(.sth-dock,.prompt-study)[data-frost-tone=light]{--pb-text:var(--color-ink);--pb-placeholder:var(--color-warm-700);--pb-muted:var(--color-warm-700);--pb-sunk:rgb(28 25 21 / .07);--pb-sunk-hover:rgb(28 25 21 / .12);--pb-ink:var(--color-ink);--pb-ink-hover:var(--color-ink);--pb-on-ink:var(--color-warm-25);--pb-rim:rgb(28 25 21 / .08);--pb-rim-focus:rgb(28 25 21 / .2);--pb-icon-sunk:brightness(0);--pb-icon-ink:brightness(0) invert(1);--pb-raised:rgb(238 232 223 / .94);--pb-shadow:0 1px 2px var(--color-alpha-dusk-8),0 12px 40px var(--color-alpha-dusk-10)}
@media(max-width:600px){html:root{--pb-r:38px;--pb-gap:8px;--pb-h:44px}}
/* The composer container is only a frame for the glass: no fill, edge or shadow of its own (the live pre-footer gave it an ink fill and edge). */
html:root :is(.sth-dock,.prompt-study){background:transparent!important;box-shadow:none!important;border-color:transparent!important}

html:root .sth-dock[data-composer-invitation] .dock-editor,html:root .prompt-study .dock-editor{background:transparent;border-color:transparent;border-radius:var(--pb-r)}
html:root :is(.sth,.prompt-study) .sth-prompt{max-width:none;gap:var(--pb-gap);padding:var(--pb-p);border:0;border-radius:var(--pb-r);background:var(--pb-raised);-webkit-backdrop-filter:blur(36px) saturate(175%);backdrop-filter:blur(36px) saturate(175%);box-shadow:inset 0 0 0 1px var(--pb-rim),var(--pb-shadow);transition:background-color 420ms cubic-bezier(.22,1,.36,1)}
html:root :is(.sth,.prompt-study) .sth-prompt:focus-within{box-shadow:inset 0 0 0 1px var(--pb-rim-focus),var(--pb-shadow)}
html:root .sth-prompt textarea{min-height:28px;padding:4px 12px;color:var(--pb-text);font:400 14px/20px var(--font-body);caret-color:var(--pb-ink)}
html:root .sth-prompt textarea::placeholder{color:var(--pb-placeholder)}
html:root .dock-input-row{margin-bottom:0}
html:root .sth-prompt .sth-prompt-actions{display:flex;align-items:center;gap:8px;justify-content:flex-start;grid-template-columns:none}
html:root .sth-prompt :is(.sth-idea-next,.sth-send){height:var(--pb-h);min-height:var(--pb-h);gap:8px;border-radius:var(--radius-full);font:500 14px/20px var(--font-body);transition:background-color 200ms,color 200ms,width 520ms cubic-bezier(.22,1,.36,1)}
html:root .sth-prompt .sth-idea-next{width:auto;padding:0 16px 0 12px;background:var(--pb-sunk);color:var(--pb-text)}
html:root .sth-prompt .sth-idea-next:hover{background:var(--pb-sunk-hover)}
html:root .sth-prompt .sth-idea-next img{filter:var(--pb-icon-sunk)}
html:root .sth-prompt .sth-idea-label{font-size:14px;padding:0}
html:root .sth-prompt .sth-send{margin-left:auto;width:auto;flex:0 0 auto;padding:0 16px 0 18px;background:var(--pb-ink);color:var(--pb-on-ink)}
html:root .sth-prompt .sth-send:hover{background:var(--pb-ink-hover)}
html:root .sth-prompt .sth-send img{filter:var(--pb-icon-ink)}
html:root .sth-prompt .sth-send .sth-send-label{display:block;font-size:14px}
html:root .sth-prompt :is(.sth-idea-next,.sth-send):focus-visible{outline:2px solid var(--pb-ink);outline-offset:2px;box-shadow:none}
/* Empty field: the ink pill is Write for me (wand), as in the app. With words, Send takes the ink. */
html:root .sth-prompt:not(:has(.sth-send.is-ready)) .sth-send{display:none}
html:root .sth-prompt:not(:has(.sth-send.is-ready)) .sth-idea-next{margin-left:auto;background:var(--pb-ink);color:var(--pb-on-ink)}
html:root .sth-prompt:not(:has(.sth-send.is-ready)) .sth-idea-next:hover{background:var(--pb-ink-hover)}
html:root .sth-prompt:not(:has(.sth-send.is-ready)) .sth-idea-next img{filter:var(--pb-icon-ink)}
/* Status, warnings and errors keep their messages; they now sit in a warm slab around the white bar. */
/* The offer over the art is Lamplight text-sm (14/20), not 12px: it carries the price promise. */
html:root .sth-dock .composer-invitation{font-size:14px;line-height:20px}
html:root .sth-prompt-frame{border-radius:var(--pb-r)}
html:root .sth-prompt-frame[data-prompt-state=sending]{--prompt-message-bg:var(--color-warm-100);--prompt-message-ink:var(--color-ink)}
html:root .sth-prompt-frame[data-prompt-state=warning]{--prompt-message-bg:var(--color-lamp-50);--prompt-message-ink:var(--color-lamp-800)}
html:root .sth-prompt-frame[data-prompt-state=error]{--prompt-message-bg:var(--color-red-50);--prompt-message-ink:var(--color-red-700)}
html:root .sth-prompt-frame>.sth-feedback{border-radius:0 0 var(--pb-r) var(--pb-r)!important;font-size:14px!important}
html:root .sth-dock:not(.is-collapsed) .sth-prompt-frame:has(>.sth-feedback:not(:empty))>.sth-prompt{box-shadow:inset 0 0 0 1px var(--pb-rim)}
html:root .sth-prompt-frame .sth-prompt-progress{background:var(--color-warm-200);color:var(--color-ink)}
html:root .sth-prompt-progress::-webkit-progress-value{background:var(--color-ink)}
html:root .sth-prompt-progress:indeterminate{background:linear-gradient(90deg,var(--color-warm-200) 0 25%,var(--color-ink) 25% 65%,var(--color-warm-200) 65% 100%);background-size:200% 100%}
/* Dock width on the hero (desktop): a calmer 640, centred. */
@media(min-width:1001px){html:root .sth-dock:not(.is-collapsed){width:min(640px,calc(100vw - 48px));--composer-input-width:calc(min(640px,100vw - 48px) - 56px)}}

/* Collapsed (owner 2026-11-08): just the pill. With one button there is nothing for the frosted frame to hold,
   so it steps back (no fill, blur, rim or padding) and the pill carries a soft dock shadow so it holds over any art.
   48 tall (52 on phones), R full. Expanding grows the bar back around it. */
html:root .sth-dock.is-collapsed .dock-editor{border-radius:var(--radius-full)}
html:root .sth-dock.is-collapsed .sth-prompt{padding:0;border-radius:var(--radius-full);gap:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html:root .sth-dock.is-collapsed .sth-idea-next{width:100%;height:48px;min-height:48px;margin:0;justify-content:center;background:var(--pb-ink);color:var(--pb-on-ink);box-shadow:var(--shadow-dock)}
html:root .sth-dock.is-collapsed .sth-idea-next:hover{background:var(--pb-ink-hover)}
html:root .sth-dock.is-collapsed .sth-idea-next img{filter:var(--pb-icon-ink)}
@media(max-width:600px){html:root .sth-dock.is-collapsed .sth-idea-next{height:52px;min-height:52px}}

/* =====================================================================================
   READABLE HEROES (accessibility) — options.js sets --veil-top / --veil-top-end / --veil-bottom per hero from
   the art itself: a warm dusk shade held behind the copy, fading out 200px below it, and a lower shade behind
   the offer line. Zero where the art is already dark enough, so most heroes are untouched.
   ===================================================================================== */
html:root :is(.audience-stage,.studio-stage){--veil-top:0;--veil-top-end:40%;--veil-bottom:0}
html:root .audience-stage::after,html:root .studio-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(20 17 14 / var(--veil-top)) 0,rgb(20 17 14 / var(--veil-top)) var(--veil-top-end),rgb(20 17 14 / 0) calc(var(--veil-top-end) + 200px)),linear-gradient(0deg,rgb(20 17 14 / max(.14,var(--veil-bottom))) 0,rgb(20 17 14 / var(--veil-bottom)) 150px,rgb(20 17 14 / 0) 320px);transition:opacity 420ms}

/* Focus rings for the few controls the live site left without one (WCAG 2.4.7, found 2026-11-08). Targeted, so
   controls with their own designed ring keep it. */
html:root :is(.adventure-faq details a,.watch-film,.testimonial-nav button,.pricing-section .text-link,.below-cards a):focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:var(--radius-xs)}

/* =====================================================================================
   PRE-FOOTER — original design; "Their first two stories are free." sits under the bar.
   ===================================================================================== */
.adventure-ending__free{margin:12px 0 0;text-align:center;font:400 14px/20px var(--font-body);color:var(--color-warm-700)}
.sth-dock[data-composer-invitation][data-offer-surface="ending"] .composer-offer{font-size:14px!important;line-height:20px;color:var(--color-warm-700)!important}
.adventure-ending .pricing-composer-note{text-align:center}

/* =====================================================================================
   PRICING — the original dark section, locked dark in light and dark colour schemes, in the Lamplight
   night palette (owner 2026-11-08): warm-950 canvas, warm-850 cards, warm-800 rules, cream-100 text,
   cream-200 secondary, lamp-400 links (the pricing files' variables carry those values). color-scheme
   keeps the browser's own parts (select menus, scrollbars, autofill) dark inside it too.
   ===================================================================================== */
.pricing-section{color-scheme:dark;--white:var(--color-cream-100)}

/* =====================================================================================
   LAMPLIGHT FOUNDATIONS (owner 2026-11-08) — Figma 6Ri3KOHJhByb488Sa0sXVt, as in apps/storytailor-web.
   Colours: every stylesheet's cool greys and blue were moved onto the Lamplight ramps (warm, lamp, ink).
   Type: Inter, the same file Lamplight ships (opsz axis). Display and titles are Inter Medium at
   optical size 32 with Lamplight tracking (display-2xl 64/68 −2px ≈ −.03em); Inter Tight 600 is retired
   from headings, so the display families point at Inter.
   ===================================================================================== */
@font-face{font-family:STDisplay;src:url('/assets/runtime/dd8a4575be9806105ac3decd02805cd2782fe7c05abb02c582316bc436ce03ae/font.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:PartnerDisplay;src:url('/assets/runtime/dd8a4575be9806105ac3decd02805cd2782fe7c05abb02c582316bc436ce03ae/font.woff2') format('woff2');font-weight:100 900;font-display:swap}
html{font-optical-sizing:auto}
:is(h1,h2){font-weight:500!important;letter-spacing:-.03em!important;font-variation-settings:"opsz" 32}
h3{font-weight:500!important;letter-spacing:-.015em!important}