/* ============================================================================
   Storivie sales site: shared stylesheet
   Started 21 September 2026. Sales-site files only; the app's own tokens come
   from theme-storivie.css, so the plum, the gilt, the eight accents and the
   light theme are the real ones rather than a second set that drifts.

   What this file adds on top of the theme: page layout, the nav, section
   rhythm, the two device frames, and the screenshot slots.

   **Screenshot slots.** Every product image on the site is a slot: a near-black
   rectangle inside a generic phone or browser frame, carrying an id and a
   description of the exact screen that goes there. The full list lives in
   sales-site-shot-list-storivie.md. Replacing a slot means putting an <img> in
   its .screen and deleting the .slot; the layout never changes, which is what
   lets any single screenshot be swapped after legal review.

   Things deliberately not here (the brief's default-AI tells): identical
   bordered cards, small uppercase labels on everything, pill badges, stat
   tiles, three-column feature grids, gradient buttons.
   ========================================================================= */
*{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
}
body{
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 70% at 12% 0%, var(--haze-a) 0%, transparent 60%),
    radial-gradient(90% 60% at 95% 100%, var(--haze-b) 0%, transparent 60%);
}
body::after{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--grain-url); opacity: var(--grain-opacity); mix-blend-mode: overlay;
}
main, header.nav, footer{ position: relative; z-index: 1 }
a{ color: inherit }
.skip{ position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: var(--r-control) }
.skip:focus{ left: 12px }
.vh{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.wrap{ width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px }
.wrap-narrow{ max-width: 760px }
/* ---------- Type ---------- */
h1, h2, h3{ font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-display); color: var(--text-heading); margin: 0; text-wrap: balance }
h1{ font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08 }
h2 em, h1 em{ font-style: italic; color: var(--accent-text) }
p{ margin: 0; text-wrap: pretty }
.lede{ font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--text-secondary); max-width: 36em }
/* A chapter mark: small caps in Cormorant SC, used once per section at most,
   never stacked above every heading. */
.mark{ font-family: var(--font-label); font-size: 17px; letter-spacing: .06em; color: var(--accent-text); margin: 0 0 14px }
/* ---------- Buttons and links ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-control);
  font: 600 16px/1 var(--font-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-primary{ background: var(--accent); color: var(--on-accent) }
.btn-primary:hover{ background: var(--accent-hover) }
.btn-quiet{ color: var(--text); border-color: var(--border-strong); background: transparent }
.btn-quiet:hover{ border-color: var(--accent) }
/* ---------- Nav ---------- */
header.nav{ position: sticky; top: 0; z-index: 50; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease) }
.nav-in{ display: flex; align-items: center; gap: 28px; height: 76px }
.nav .logo{ display: block; width: 168px; aspect-ratio: 15/4; background: url("logo-dark-storivie.png") left center / contain no-repeat; flex: none }
.nav-links{ display: flex; gap: 26px; margin: 0 0 0 12px; padding: 0; list-style: none }
.nav-links a{ text-decoration: none; font-size: 15px; font-weight: 500; color: var(--text-secondary) }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--text) }
.nav-end{ margin-left: auto; display: flex; align-items: center; gap: 18px }
.nav-end .btn{ min-height: 42px; padding: 0 18px; font-size: 15px }
@media (max-width: 980px){
  .nav-links{ display: none }
  .nav-in{ gap: 12px; height: 64px }
  .nav .logo{ width: 138px }
  .nav-end{ gap: 10px }
}
/* Sign In stays in the bar on a phone. The trial button is the thing that
   steps aside, because the sheet repeats it as a full width button. */
@media (max-width: 560px){
  .nav .logo{ width: 124px }
  .nav-end{ gap: 6px }
}
/* ---------- Sections ---------- */
section{ position: relative }
.sec-tight{ padding: clamp(28px, 3.2vw, 42px) 0 }
/* ---------- Footer ---------- */
footer{ border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); padding: 64px 0 40px; margin-top: 40px }
.foot-blurb{ font-size: 14.5px; color: var(--text-muted); margin-top: 16px; max-width: 26em }
.foot-base{ margin-top: 48px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font-size: 13px; color: var(--text-muted) }
/* ---------- Page heads (inner pages) ---------- */
.page-head{ padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 5vw, 56px) }
.page-head h1{ font-size: clamp(36px, 4.6vw, 56px); max-width: 15em }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr }
}
.sign{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1; color: var(--accent-text); margin: 0 }
.sign span{ display: block; font: 400 11px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; font-style: normal }
.btn{ white-space: nowrap }
@media (max-width: 420px){
  .nav-end .btn{ padding: 0 12px; font-size: 14px; min-height: 38px }
  .nav .logo{ width: 120px }
}
/* ============================================================================
   ABOUT
   ========================================================================= */
.essay{ max-width: 680px; margin: 0 auto }
.essay p{ font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 22px); line-height: 1.65; color: var(--text-heading) }
.essay p + p{ margin-top: 20px }
.close-row{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border) }
.lex-word{ font-family: var(--font-display); font-size: 25px; line-height: 1; letter-spacing: .02em; color: var(--text-heading) }
.lex-pron{ font-size: 11px; letter-spacing: .1em; color: var(--text-muted); margin-top: 8px }
.lex-pron .say{ color: var(--text-secondary) }
.lex-ety{ font-family: var(--font-display); font-size: 17px; color: var(--text-muted); margin-top: 7px }
.lex-ety em{ font-style: italic; color: var(--text-secondary) }
.lex-pay{ font-family: var(--font-display); font-style: italic; font-size: 18px; letter-spacing: .03em; color: var(--accent-text); margin-top: 8px }
/* ============================================================================
   HOME, condensed (v2, 21 Sep). The one-feature-per-screen homepage became
   three dense sections so a visitor can take in the breadth at a glance:
   Features as a list beside one switching screenshot, Tools as a two-column
   list with thumbnails, Why Storivie as type beside the founder quote. Three
   different shapes on purpose, so no two sections read as the same template.
   ========================================================================= */
/* The hero band has its own weather: a warmer, heavier version of the page
   wash plus the same grain at roughly three times the strength, running the
   full width and behind the nav, and masked away at the bottom so the band
   ends rather than stops. Mocked up 8 Oct, replacing the trial button, the
   price line and the desktop browser frame. */
/* Tall enough for the painting to stand up in. The headline sits in the top
   half, the book spreads across the bottom. */
.hero2{ position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(28px, 3.2vw, 48px) 0 clamp(20px, 2.4vw, 36px);
  min-height: clamp(340px, 35vw, 510px); display: grid; align-items: center }
/* The text column takes its own width and the phone column is a fixed track,
   so the phone sits beside the text rather than out at the right margin. A
   percentage width here collapses: the track would be sizing to the figure
   while the figure sized to the track. */
/* Big, faded, set to the right and behind everything, filling most of the
   hero. The headline and the lede sit over its left edge. 8 Oct. */
.hero-art{
  position: absolute; z-index: -1; pointer-events: none;
  top: 50%; right: -11%; transform: translateY(-50%);
  width: min(1180px, 78vw); aspect-ratio: 1000 / 667;
  background: url("goal-art-storivie.webp") no-repeat center / contain;
  opacity: .15; filter: saturate(.85);
  -webkit-mask-image: radial-gradient(82% 88% at 52% 50%, #000 40%, transparent 94%);
          mask-image: radial-gradient(82% 88% at 52% 50%, #000 40%, transparent 94%);
}
@media (max-width: 900px){
  .hero-art{ width: min(1180px, 116vw); right: -20%; opacity: .12 }
}
/* One column of type, laid over the picture. */
.hero2 .hero-grid{ grid-template-columns: 1fr; align-content: center }
.hero2 .hero-grid > :first-child{ max-width: 37em }
.hero2 .lede{ margin-bottom: 0; max-width: 37em; font-size: 17px; line-height: 1.7 }
/* The turn of the headline, in the accent italic the welcome letter uses. */
.hero2 h1 em{ font-style: italic; color: var(--accent-text) }
@media (max-width: 900px){
  .hero2 .hero-grid > :first-child{ max-width: none }
}
/* ============================================================================
   LEGAL pages (privacy, terms), rendered from the drafts file by legal.js
   ========================================================================= */
/* Dark mode asks a lot of the eye over a long read: near-white type on a
   near-black field for a thousand words. A soft pool of lighter ground sits
   under the reading column, feathered at every edge so it reads as light
   falling on the page rather than a card dropped onto it. Dark only, because
   light mode is already easy on the eye. 8 Oct. */
[data-theme="dark"] .essay,
[data-theme="dark"] .legal{ position: relative; isolation: isolate }
[data-theme="dark"] .essay::before,
[data-theme="dark"] .legal::before{
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -44px -56px; border-radius: 34px;
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--surface) 88%, transparent) 0%,
    color-mix(in srgb, var(--surface) 58%, transparent) 42%,
    color-mix(in srgb, var(--surface) 26%, transparent) 100%);
  -webkit-mask-image: radial-gradient(128% 96% at 50% 30%, #000 44%, transparent 100%);
          mask-image: radial-gradient(128% 96% at 50% 30%, #000 44%, transparent 100%);
}
@media (max-width: 720px){
  [data-theme="dark"] .essay::before,
  [data-theme="dark"] .legal::before{ inset: -24px -22px; border-radius: 24px }
}

/* ============================================================================
   Coming soon: the waitlist and the slim footer. Everything above this line is
   lifted unchanged from the 10 Oct site so the two pages and the full site that
   replaces them cannot drift. 14 Oct.
   ========================================================================= */

/* The label sits above the headline the way a chapter mark opens a section. */
.hero2 .mark{ margin: 0 0 14px; font-size: 22px }
@media (max-width: 640px){ .hero2 .mark{ font-size: 19px } }
/* The line that says what the form is for, 14 Oct. */
.wl-lead{ margin: clamp(26px, 3vw, 36px) 0 0; max-width: 34em; font-size: 15px; line-height: 1.6; color: var(--text-secondary) }
.wl-lead + .wl{ margin-top: 14px }

/* One row: the field takes the space, the button keeps its size. */
.wl{ display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(26px, 3vw, 36px) 0 0; max-width: 34em }
.wl input{
  flex: 1 1 15em; min-width: 0; height: 50px; padding: 0 16px;
  font: 400 16px/1 var(--font-sans); color: var(--text);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 52%, transparent);
  border-radius: var(--r-control, 10px);
  -webkit-appearance: none; appearance: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wl input::placeholder{ color: var(--text-muted) }
.wl input:focus{ outline: none;
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.wl .btn{ flex: 0 0 auto; min-height: 50px }
.wl .btn[disabled]{ opacity: .6; cursor: default }

/* The answer sits under the form and holds its line, so nothing jumps. */
.wl-msg{ min-height: 1.5em; margin: 12px 0 0; max-width: 34em;
  font-size: 15px; line-height: 1.5; color: var(--text-secondary) }
.wl-msg.is-ok{ color: var(--accent-text) }
.wl-msg.is-bad{ color: var(--text) }

@media (max-width: 460px){
  .wl{ flex-direction: column }
  /* Stacked, the 15em basis meant for its width became its height. */
  .wl input{ flex: 0 0 auto; width: 100% }
  .wl .btn{ width: 100% }
}

/* The footer: a wordmark, a line, and the pages there are. */
.foot-slim{ display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px }
/* The footer logo lost its rule when the stylesheet was trimmed, so the link
   drew as an empty strip the width of the page. */
footer .logo{ display: block; width: 150px; aspect-ratio: 15/4; background: url("logo-dark-storivie.png") left center / contain no-repeat }
.foot-slim .foot-blurb{ margin: 0; max-width: 34ch }

/* The dark reading panel behind Our Story is a pseudo-element bled 56px past
   the column on each side. Between about 760 and 830 the gutter is narrower
   than that and the bleed pushes the page sideways, so it tightens as the
   window does. This bug is in the 10 Oct files too. 14 Oct. */
@media (max-width: 900px){
  [data-theme="dark"] .essay::before, [data-theme="dark"] .legal::before{ inset: -32px -20px }
}
@media (max-width: 640px){
  [data-theme="dark"] .essay::before, [data-theme="dark"] .legal::before{ inset: -24px -14px }
}

/* One screen of content, so the footer does not need a full section of air. */
footer{ padding-top: clamp(32px, 4vw, 48px) }

/* ---------- Phone menu, from the 10 Oct design. Our Story moves in here
   below 980px; FAQ joins it at launch. 14 Oct. ---------- */
.icon-btn{ width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--text-secondary); cursor: pointer; padding: 0 }
.icon-btn:hover{ color: var(--text); border-color: var(--border) }
.icon-btn svg{ width: 19px; height: 19px }
.menu-btn{ display: none }
@media (max-width: 980px){ .menu-btn{ display: grid } }
.sheet{ position: fixed; inset: 0; z-index: 60; background: var(--page); padding: 20px 24px 32px; display: none; flex-direction: column }
.sheet.open{ display: flex }
.sheet-top{ display: flex; align-items: center; justify-content: space-between; height: 56px }
.sheet .logo{ display: block; width: 138px; aspect-ratio: 15/4; background: url("logo-dark-storivie.png") left center / contain no-repeat }
.sheet ul{ list-style: none; margin: 28px 0 0; padding: 0 }
.sheet li a{ display: block; padding: 14px 0; font-family: var(--font-display); font-size: 30px; text-decoration: none; color: var(--text-heading); border-bottom: 1px solid var(--border) }

/* Footer links, on every screen size. */
.foot-links{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px }
.foot-links a{ text-decoration: none; color: var(--text-secondary); font-size: 14.5px }
.foot-links a:hover{ color: var(--text) }

/* ---------- Contact, from the 10 Oct design. ---------- */
.fine{ font-size: 14px; color: var(--text-muted); line-height: 1.6 }
.link-on{ color: var(--accent-text); text-decoration: none; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom: 1px }
.link-on:hover{ border-bottom-color: var(--accent) }
.page-head .lede{ margin-top: 20px }
.contact{ display: grid; gap: 18px }
.contact .row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.contact label{ display: block }
.contact .lbl{ display: block; font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 7px }
.contact input, .contact select, .contact textarea{
  width: 100%; box-sizing: border-box; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-control); padding: 12px 13px; font: 16px/1.5 var(--font-sans); -webkit-appearance: none; appearance: none }
.contact select{ padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99cb3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px }
.contact textarea{ resize: vertical }
.contact input:focus, .contact select:focus, .contact textarea:focus{ outline: none; border-color: var(--accent) }
.contact .hint{ font-size: 14.5px; color: var(--text-secondary); margin: -6px 0 0 }
.contact .err{ font-size: 14px; color: var(--accent-text); margin: 0 }
.contact .btn{ justify-self: start }
.contact .btn[disabled]{ opacity: .6; cursor: default }
.contact .trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.sent{ padding: 8px 0 }
.sent:focus{ outline: none }
.sent h2{ margin: 0 0 16px }
.sent p{ color: var(--text-secondary); max-width: 38em; margin: 0 }
.sent p + p{ margin-top: 12px }
.direct{ margin-top: 28px }
@media (max-width: 640px){ .contact .row2{ grid-template-columns: 1fr } .contact .btn{ width: 100% } }