/* The marketing site (public/site/, sub-project 3d spec section 3). Its own tokens with the app's values
   (public/app/styles.css :root), so the site and the screenshots read as one product.
   Look (Ben, 2026-10-19, "Stationery suite" in the app's palette): the header, the hero, each page's top, the closing
   and the footer are deep pine bands; the demo and the closing are paper cards with a gold double rule, like a
   wedding invitation and its reply card; screenshots sit whole in white frames on paper, with no captions (Ben, 2026-10-19).
   Type scale (px): 18 / 22 / 28 / 40 / 64 / 88; the hero headline runs from 44 at 390 wide to 88 at 1280.
   Nothing moves on scroll. */
:root{
  --paper:#F7F8F5; --pine:#1E3A2F; --ink-2:#4E5F57; --moss:#2F6B4F; --gold:#A8862F; --line:#D9DED9;
  --surface:#FFFFFF; --mist:#E3EFE8; --gold-ink:#5E4A12;
  --serif:"Fraunces",Georgia,serif; --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --fs-18:18px; --fs-22:22px; --fs-28:28px; --fs-40:40px; --fs-64:64px; --fs-88:88px;
  --r:8px; --pill:999px; --gutter:24px; --max:1200px; --gap:128px;
  --inline:max(var(--gutter),calc((100% - var(--max)) / 2));   /* full-width bands keep their content in the column */
  --lift:0 18px 40px rgba(30,58,47,.14); --lift-dark:0 30px 60px rgba(10,22,17,.45);
}
@media (max-width:640px){ :root{ --gutter:16px; --gap:88px; --fs-40:28px; --fs-64:40px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--pine);font-family:var(--sans);font-size:var(--fs-18);line-height:1.6;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 50;margin:0;letter-spacing:-0.01em;text-wrap:balance}
h2{font-size:var(--fs-40);line-height:1.15}
p,ul,ol,figure{margin:0}
a{color:var(--moss);text-underline-offset:0.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--paper);color:var(--pine);padding:8px 16px;border-radius:var(--r);z-index:2}
.skip:focus{top:8px}

/* ---- the pine bands: header, hero, page tops, closing, footer ---- */
.site-head,.hero,.page-top,.closing,.site-foot{background:var(--pine);color:var(--paper)}
.site-head,.site-foot,main>section{padding-left:var(--inline);padding-right:var(--inline)}
.site-head :focus-visible,.hero :focus-visible,.page-top :focus-visible,.closing :focus-visible,.site-foot :focus-visible{outline-color:var(--paper)}
.hero a:not(.button),.page-top a:not(.button),.site-foot a{color:var(--mist)}

/* ---- buttons: pine on paper, paper on pine; and a quiet text link ---- */
.button{display:inline-block;background:var(--pine);color:var(--paper);text-decoration:none;font-weight:500;line-height:1.2;
  padding:12px 22px;border-radius:var(--pill);border:1px solid var(--pine);white-space:nowrap}
.button:hover{background:var(--moss);border-color:var(--moss)}
.site-head .button,.hero .button,.page-top .button{background:var(--paper);color:var(--pine);border-color:var(--paper)}
.site-head .button:hover,.hero .button:hover,.page-top .button:hover{background:var(--mist);border-color:var(--mist)}
.quiet{font-weight:500}

/* ---- header and footer (the same markup on every site page) ---- */
.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:24px;padding-bottom:24px}
.wordmark{font-family:var(--serif);font-size:var(--fs-22);font-weight:600;font-variation-settings:"SOFT" 50;color:var(--paper);text-decoration:none;line-height:1.2}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.site-nav a:not(.button){color:var(--paper);text-decoration:none;font-weight:500}
.site-nav a:not(.button):hover,.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px}
@media (max-width:640px){
  .site-nav .nav-page{display:none}
  .site-nav{gap:8px 20px}
  .site-head .button{padding:10px 18px}
}
.site-foot{padding-top:48px;padding-bottom:64px;display:grid;gap:12px;color:var(--mist);box-shadow:inset 0 1px 0 rgba(227,239,232,.22)}
.site-foot .wordmark{margin-bottom:8px}
.site-foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
main+.site-foot{margin-top:var(--gap)}
main:has(>section:last-child:is(.closing,.page-top))+.site-foot{margin-top:0}

/* ---- the card: paper with a gold double rule inside a thin gold line, like an invitation ---- */
.card{background:var(--paper);color:var(--pine);border:3px double var(--gold);outline:1px solid var(--gold);outline-offset:7px;
  box-shadow:0 0 0 14px var(--paper),var(--lift-dark);margin:14px}
.card :focus-visible{outline-color:var(--moss)}

/* ---- the hero: the headline beside the live demo, on pine ---- */
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center;padding-top:56px;padding-bottom:120px}
.hero h1{font-size:clamp(44px,calc(4.944vw + 24.7px),var(--fs-88));line-height:1;font-weight:450;font-variation-settings:"SOFT" 100;letter-spacing:-0.025em}
.lede{font-size:var(--fs-22);line-height:1.5;color:var(--ink-2);margin-top:32px;max-width:30em}
.hero .lede,.page-top .lede{color:var(--mist)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.note{color:var(--ink-2);margin-top:20px}
.hero .note,.page-top .note{color:var(--mist)}
@media (max-width:960px){ .hero{grid-template-columns:minmax(0,1fr);gap:56px} }
@media (max-width:640px){ .hero{padding-top:24px;padding-bottom:80px} .lede{margin-top:24px} .actions{margin-top:32px} }

/* ---- the live price demo: the reply card ---- */
.demo{padding:36px 40px 32px;container-type:inline-size}
.demo-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 24px}
.demo-slider{display:grid;gap:8px;font-size:var(--fs-22);font-weight:500}
.demo-slider input{width:100%;margin:0;height:32px;accent-color:var(--gold);cursor:pointer;border-radius:var(--pill)}
/* Until the slider is first touched (demo.js), a soft gold glow twice, a second after load; never with reduced motion. */
.demo-slider input.demo-hint{animation:demo-hint 1.6s ease-in-out 1s 2}
@keyframes demo-hint{0%,100%{filter:drop-shadow(0 0 0 rgba(168,134,47,0))}50%{filter:drop-shadow(0 0 7px rgba(168,134,47,.9))}}
@media (prefers-reduced-motion:reduce){ .demo-slider input.demo-hint{animation:none} }
.demo-count{font-family:var(--serif);font-size:var(--fs-88);line-height:0.9;font-weight:400;font-variation-settings:"SOFT" 100;
  font-variant-numeric:lining-nums tabular-nums;min-width:3ch;text-align:right;letter-spacing:-0.03em}
.demo-key{color:var(--ink-2);margin-top:28px}
.demo-list{list-style:none;padding:0;margin-top:8px;border-bottom:1px solid var(--line)}
.demo-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:16px 0 16px 20px;
  border-top:1px solid var(--line);position:relative;background:var(--paper)}
.demo-list li::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:2px}
.demo-list li:first-child::before{background:var(--gold)}
.demo-name{font-family:var(--serif);font-size:clamp(13px,calc((100cqi - 40px) / 15.5),var(--fs-28));line-height:1.2;font-variation-settings:"SOFT" 50;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line, so a re-sort never changes a row's height */
.demo-total{font-family:var(--serif);font-size:clamp(18px,calc((100cqi - 40px) / 10.8),var(--fs-40));line-height:1.1;font-weight:500;color:var(--gold-ink);font-variant-numeric:lining-nums tabular-nums}
.demo-still{border:1px solid var(--line);border-radius:var(--r)}
/* Until the demo has rendered (or if it never can), only the still screenshot shows. */
.demo:has(> .demo-still:not([hidden])) > :not(.demo-still){display:none}
@media (max-width:640px){
  .demo{padding:24px 20px 20px}
  .demo-count{font-size:var(--fs-64)}
  .demo-list li{padding:14px 0 14px 16px}
  .demo-list li::before{top:14px;bottom:14px}
}

/* ---- screenshots: whole, in a white frame on paper ---- */
.shot img{background:var(--surface);padding:10px;border:1px solid var(--line);box-shadow:var(--lift)}
.tilt-l img{transform:rotate(-0.8deg)}
.tilt-r img{transform:rotate(0.8deg)}
/* A shot whose <picture> has a phone version: shown at a phone's own width on a phone. */
@media (max-width:640px){
  .shot.has-phone img{max-width:300px}
  .tilt-l img,.tilt-r img{transform:none}
}

/* ---- home feature sections: the words beside one picture, sides alternating ---- */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center;margin-top:var(--gap)}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip>.feature-text{order:2}
.feature-text{max-width:30em}
.feature-text p{margin-top:20px}
@media (max-width:960px){
  .feature,.feature.flip{grid-template-columns:minmax(0,1fr)}
  .feature.flip>.feature-text{order:0}
}

/* email: the email under what the AI makes of it, two pieces of paper overlapping */
.pair{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.pair .shot:first-child{width:78%}
.pair .shot:last-child{width:80%;margin:-48px 0 0 auto;position:relative}
@media (max-width:640px){ .pair .shot:first-child,.pair .shot:last-child{width:100%;margin:24px 0 0} }


/* together: three plain statements */
.together{padding:0;list-style:none;margin-top:24px;display:grid;gap:14px}
.together li{padding-left:22px;position:relative}
.together li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--gold)}

/* closing: an invitation on pine */
.closing{margin-top:var(--gap);padding-top:120px;padding-bottom:120px;display:flex;justify-content:center}
.closing .card{max-width:640px;width:100%;padding:56px 40px;text-align:center}
.closing-invite{font-family:var(--serif);font-style:italic;font-size:var(--fs-22);color:var(--ink-2);font-variation-settings:"SOFT" 100}
.closing h2{font-size:var(--fs-64);line-height:1.05;font-weight:450;font-variation-settings:"SOFT" 100;letter-spacing:-0.02em;margin-top:12px}
.closing .card>p:not(.actions):not(.closing-invite){margin-top:20px;font-size:var(--fs-22);color:var(--ink-2)}
.closing .actions{margin-top:32px;justify-content:center}
@media (max-width:640px){ .closing{padding-top:80px;padding-bottom:80px} .closing .card{padding:40px 20px} }

/* ---- Features and Pricing: a page title on pine, then the content ---- */
.page-top{padding-top:56px;padding-bottom:88px}
.page-top h1{font-size:var(--fs-64);line-height:1.05;font-weight:450;font-variation-settings:"SOFT" 100;letter-spacing:-0.02em;max-width:14em}
.page-top .lede{max-width:32em}
@media (max-width:640px){ .page-top{padding-top:24px;padding-bottom:64px} .page-top .lede{margin-top:20px} }

/* features: the areas listed at the top (columns read down, in the page's order), then one entry per area: its name
   beside what it does, a screenshot under the text where one helps */
.toc{margin-top:48px;padding-top:24px;border-top:1px solid rgba(227,239,232,.25)}
.toc ul{list-style:none;padding:0;columns:3 14em;column-gap:40px}
.toc li{break-inside:avoid;padding:4px 0}
.page-top .toc a{color:var(--paper);font-weight:500}
.area{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px 48px;align-items:start;
  margin-top:112px;scroll-margin-top:24px}
.area h2{font-size:var(--fs-40);line-height:1.1}
.area-body>*+*{margin-top:16px}
.area-body p,.area-body ul{max-width:34em}
.area-body ul{padding-left:1.2em}
.area-body li+li{margin-top:6px}
.area .shot{margin-top:32px}
.area>.shot{grid-column:1/-1;margin-top:32px}   /* a wide screenshot spans the name and the text */
.area-ai::before{content:"";grid-column:1/-1;height:3px;background:var(--gold);margin-bottom:32px}
@media (max-width:960px){ .area{grid-template-columns:minmax(0,1fr);margin-top:80px} }
@media (max-width:640px){ .toc ul{columns:2;column-gap:24px} }

/* pricing: one comparison on a paper card, the plans as columns; under 640px each line stacks, the plan named before
   its answer */
.page-top .plans-card{margin-top:56px;max-width:920px;padding:24px 40px 32px}
.plans{width:100%;border-collapse:collapse;font-size:var(--fs-22)}
.plans th,.plans td{text-align:left;padding:20px 24px 20px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.plans thead th{font-family:var(--serif);font-size:var(--fs-40);font-weight:500;font-variation-settings:"SOFT" 50;line-height:1.1;
  border-bottom:3px double var(--gold);padding-bottom:16px}
.plans tbody th{font-weight:500;width:40%}
.plans thead td{border-bottom:0}
.plans .price td{font-family:var(--serif);font-size:var(--fs-28);font-variation-settings:"SOFT" 50;color:var(--gold-ink)}
.plans-after{margin-top:48px}
.plans-after .actions{margin-top:24px}
@media (max-width:640px){
  .page-top .plans-card{padding:16px 16px 20px}
  .plans{font-size:var(--fs-18)}
  .plans thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .plans,.plans tbody,.plans tr,.plans th,.plans td{display:block}
  .plans tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .plans tbody tr:first-child{border-top:3px double var(--gold)}
  .plans th,.plans td,.plans tbody th{padding:0;border:0;width:auto}
  .plans tbody th{margin-bottom:8px;color:var(--ink-2)}
  .plans td{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:4px 0}
  .plans td::before{content:attr(data-plan);font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 50}
  .plans .price td{font-size:var(--fs-22)}
}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto} }