/* Object Cinema — projection booth. Since the earlier landing page was retired (6 Oct 2026) this sheet is live only
   under the Terms and Privacy pages (web/terms.html, web/privacy.html, web/legal/), with web/legal.css on top. */
:root{
  /* THE BLUE THEME (Cameron, 22 Oct 2026; this sheet moved over 23 Oct), as in app/public/ws.css: cool charcoal and
     icy off-white. --amber keeps its name and is now the brand blue: fills, selected states, the one main action
     (white text on it). Blue words and thin lines on the dark use --amber-soft. A warning keeps its warm amber (--warn). */
  --ink:#111318; --ink-2:#1A1D24; --ink-3:#22262E;
  --ivory:#F5F6F8; --ivory-dim:#B3B8C4;
  /* Was #6B635A (3.2:1 on the ink), then #8A8175 (4.6:1); the blue theme's faint is 7:1 and still recedes. */
  --ivory-faint:#9AA1AE;
  --amber:#2447D6; --amber-soft:#90A1E4; --accent-hover:#1E3AAF; --on-amber:#FFFFFF; --logo:#5C78EB;
  --warn:#C98B3A; --warn-soft:#E0AC63;
  --paper:#E9ECF1; --paper-ink:#1A1D24; --paper-dim:#565C69; --paper-rule:#C8CDD6;
  --rule:#2A2F38;
  --display:'Fraunces',Georgia,serif;
  --ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gut:clamp(20px,4vw,64px);
  --maxw:1240px;
  --nav-h:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-faint)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* THE ANCHOR OFFSET. The header is sticky, so "See plans" used to land with the
   Plans heading tucked underneath it. Every anchor target clears the nav plus a
   little air. */
/* One offset, on the scroller, so every fragment clears the measured nav (app.js
   sets --nav-h). scroll-padding and scroll-margin both apply when set together,
   which landed the Plans heading a third of the way down a phone screen. */
html{scroll-padding-top:calc(var(--nav-h) + 24px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 0,'WONK' 1;text-decoration:none;white-space:nowrap}
.mark em{font-style:italic;color:var(--logo)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13px;letter-spacing:.02em;color:var(--ivory-dim);text-decoration:none}
.nav-links a:hover{color:var(--ivory)}
@media (max-width:760px){.nav-links{display:none}}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-login{font-size:13px;color:var(--ivory-dim);text-decoration:none;white-space:nowrap}
.nav-login:hover{color:var(--ivory)}
.nav-cta-mobile{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:11px 20px;border-radius:2px;border:1px solid var(--amber);
  background:var(--amber);color:var(--on-amber);text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease;min-height:44px}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ivory-dim);background:transparent}
@media(max-width:640px){.nav-in{padding-block:8px}.nav-right{gap:8px}.nav-login{font-size:12px}.nav-photo-check{white-space:nowrap;padding-inline:13px}.nav-cta-full{display:none}.nav-cta-mobile{display:inline}}

/* ---------- hero ----------
   Tightened so the whole offer — eyebrow, two display lines, the explanation,
   both buttons and the price note — is on the first screen at 1280x720. */
.hero{padding:clamp(30px,4vw,56px) var(--gut) clamp(30px,4vw,56px)}
.hero-grid{display:grid;grid-template-columns:1fr .74fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}}
.hero h1{
  font-family:var(--display);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1;
  font-size:clamp(42px,6.6vw,74px);line-height:1;letter-spacing:-.03em;
  margin:0 0 18px;text-wrap:balance}
.hero h1 span{display:block}
.hero h1 .it{font-style:italic;color:var(--amber-soft)}
.hero p{font-size:clamp(15px,1.5vw,17.5px);line-height:1.6;color:var(--ivory-dim);
  max-width:44ch;margin:0 0 24px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .hero-price{margin:14px 0 0;font-size:13px;line-height:1.5;max-width:48ch;color:var(--ivory-dim)}
.hero .hero-fit{font-size:14px;color:var(--ivory)}
.hero .hero-fit + .hero-price{margin-top:6px}
.hero-media{position:relative;border:1px solid var(--rule);margin:0}
/* The picture is the proof, but it must not set the height of the first screen.
   Capped to the viewport so a short laptop shows the whole offer, not one bottle. */
.hero-media img{width:100%;max-height:min(62vh,560px);object-fit:cover;object-position:center 38%}
@media (max-width:900px){.hero-media img{max-height:46vh}}
/* The free offer and its phone-photo proof fit even a short in-app browser. */
@media(max-width:640px){
  .hero{padding-top:22px;padding-bottom:30px}
  .hero-grid{gap:20px}
  .hero h1{font-size:38px;line-height:1.04;margin-bottom:14px}
  .hero #hero-sub{font-size:15px;line-height:1.5;margin-bottom:18px}
  .hero-cta .btn{width:100%;text-align:center}
}
/* ---------- sections ---------- */
.sec{padding-block:clamp(44px,5.4vw,80px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  margin-bottom:clamp(24px,3.2vw,40px);flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1;
  font-size:clamp(28px,4.2vw,44px);line-height:1.04;letter-spacing:-.025em;margin:0;
  max-width:18ch;text-wrap:balance}
.sec-head p{margin:0;color:var(--ivory-dim);font-size:15px;max-width:42ch}
.sec-head.low{align-items:end}

/* ---------- the work ----------
   Two columns of large previews. The caption is deliberately smaller than the
   thing it captions; the old layout gave a production report more area than the
   video it described. */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
@media (max-width:820px){.gallery{grid-template-columns:1fr;gap:30px}}
.shot{display:flex;flex-direction:column}
.film-media{position:relative;margin:0;border:1px solid var(--rule);overflow:hidden}
.film-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--ink);cursor:pointer}
.film-play{
  position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  border:1px solid rgba(245,246,248,.45);background:rgba(17,19,24,.46);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;
  transition:opacity .25s ease,transform .25s ease,background .25s ease}
.film-play:hover{background:rgba(17,19,24,.66);transform:scale(1.06)}
.film-play:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.tri{width:0;height:0;margin-left:4px;border-left:15px solid var(--ivory);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.film-media.playing .film-play,.step-media.playing .step-play,.walk-media.playing .walk-play{opacity:0;pointer-events:none}
.step-media.playing{cursor:pointer}
.film-media.playing:hover .film-play,.step-media.playing:hover .step-play,.walk-media.playing:hover .walk-play{opacity:1;pointer-events:auto}
.film-media.playing .film-play .tri,.walk-media.playing .walk-play .tri{
  border:0;width:13px;height:15px;margin-left:0;
  border-left:4px solid var(--ivory);border-right:4px solid var(--ivory);box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.film-play,.step-play,.walk-play{transition:none}}
.shot-body{padding:14px 16px 0}
.shot-body h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4vw,26px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 6px;font-variation-settings:'SOFT' 0,'WONK' 1}
.shot-body .cap{color:var(--ivory-dim);margin:0;font-size:15px}

/* suited-to: two labelled rows of plain labels (nothing here is clickable, so
   nothing looks clickable), and a real button on phones for the long row. */
.cats{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--rule);padding-top:22px;display:grid;gap:18px}
.cats-intro{max-width:820px}.cats-intro h3{font-family:var(--display);font-size:clamp(25px,3vw,34px);font-weight:400;margin:0 0 7px}.cats-intro p{color:var(--ivory-dim);margin:0;line-height:1.55}
.cats-row{display:grid;grid-template-columns:150px 1fr;gap:12px 24px;align-items:start}
@media (max-width:640px){.cats-row{grid-template-columns:1fr;gap:10px}}
.cats-row>.mono{margin:9px 0 0}
@media (max-width:640px){.cats-row>.mono{margin:0}}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{border:1px solid var(--rule);padding:6px 11px;font-size:13px;line-height:1.3;color:var(--ivory-dim);border-radius:2px}
.chips.use span{border-style:dashed}
.chips-more{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-soft);background:transparent;border:1px solid var(--amber-soft);padding:6px 11px;cursor:pointer;border-radius:2px;min-height:32px}
@media (max-width:640px){
  .chips span.fold{display:none}
  .cats.open .chips span.fold{display:inline-block}
  .chips-more{display:inline-block}
}
.cats-note{color:var(--ivory-faint);font-size:13.5px;margin:0;line-height:1.55;max-width:110ch}
.cats-action{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.cats-action span{color:var(--ivory-faint);font-size:13px}

/* directions strip */
.dirs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.dirs{grid-template-columns:repeat(2,1fr)}}
.dirs figure{margin:0;border:1px solid var(--rule)}
.dirs img{width:100%;aspect-ratio:9/16;object-fit:cover}
.dirs figcaption{padding:9px 10px;background:var(--ink-2)}

/* ---------- process (paper) ---------- */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .sec-head h2{color:var(--paper-ink)}
.paper .sec-head p,.paper .mono{color:var(--paper-dim)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,34px)}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:26px}}
.steps figure{margin:0}
.step-media{position:relative;border:1px solid var(--paper-rule);overflow:hidden;background:#111}
.step-media img,.step-video{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.step-video{cursor:pointer;background:#111}
.step-play{position:absolute;left:0;right:0;bottom:14px;margin:auto;width:max-content;height:40px;border-radius:999px;
  border:1px solid rgba(245,246,248,.5);background:rgba(17,19,24,.62);backdrop-filter:blur(6px);color:var(--ivory);
  display:flex;align-items:center;gap:10px;padding:0 16px 0 14px;cursor:pointer;transition:opacity .25s ease,transform .25s ease}
.step-play .tri{border-left-width:11px;border-top-width:7px;border-bottom-width:7px;margin-left:0}
.play-word{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.step-play:hover{transform:scale(1.06)}
.step-n{margin:14px 0 4px}
.steps h3{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 5px;letter-spacing:-.01em}
.steps p{margin:0;font-size:14px;line-height:1.55;color:var(--paper-dim)}
.paper .rule{background:var(--paper-rule)}

/* the interface recording, inside the process section */
.walk{margin-top:clamp(28px,3.6vw,44px);padding-top:clamp(24px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(22px,3.4vw,56px);align-items:center}
@media (max-width:820px){.walk{grid-template-columns:1fr;gap:22px}}
.walk-copy h3{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.6vw,28px);
  margin:8px 0 8px;letter-spacing:-.02em}
.walk-copy p{margin:0;color:var(--paper-dim);font-size:14.5px;max-width:52ch;line-height:1.6}
/* As large as the 780px-wide source allows without going soft: never scaled
   past its own pixels on a 1x screen, and on a 2x screen the worst case is a
   little under 1.5x, which reads fine for an interface. */
.walk-media{position:relative;margin:0;width:min(100%,560px);justify-self:end;
  border:1px solid var(--paper-rule);background:#111;overflow:hidden}
@media (max-width:820px){.walk-media{width:min(100%,520px);justify-self:center}}
/* 780x1004 — the shape the capture actually is. A recording forced into a
   different aspect either crops the interface or stretches it. */
.walk-video,.walk-media img{display:block;width:100%;height:auto;aspect-ratio:780/1004;object-fit:contain;background:#111318;cursor:pointer}
.walk-play{position:absolute;inset:0;margin:auto;width:max-content;height:48px;border-radius:999px;
  border:1px solid rgba(245,246,248,.55);background:rgba(17,19,24,.66);backdrop-filter:blur(6px);color:var(--ivory);
  display:flex;align-items:center;gap:12px;padding:0 20px 0 18px;cursor:pointer;transition:opacity .25s ease,transform .25s ease}
.walk-play .tri{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:0}
.walk-play:hover{transform:scale(1.06)}

/* ---------- shapes ----------
   Four cards, equal billing. No destination grouping: the application stopped
   deciding where a customer posts and so does this. */
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.shapes{grid-template-columns:repeat(2,1fr)}}
.shape-card{border:1px solid var(--rule);padding:20px 18px;display:flex;flex-direction:column}
.shape-box{height:120px;display:flex;align-items:flex-end;margin-bottom:16px}
.shape-box span{display:block;border:1px solid var(--amber-soft);background:var(--ink-2)}
.shape-card b{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1}
.shape-card em{font-style:normal;font-size:14.5px;color:var(--ivory-dim);margin-top:3px}
.shape-card i{font-style:normal;margin-top:8px}
.shape-card p{margin:10px 0 0;font-size:13px;color:var(--ivory-faint);line-height:1.5}
.shape-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.shape-note{margin:0;font-size:15px;color:var(--ivory-dim);max-width:96ch;line-height:1.65}

/* ---------- customer quotes ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.testimonial{margin:0;border:1px solid var(--rule);padding:24px;background:var(--ink);display:flex;flex-direction:column;gap:18px}
.testimonial-stars{color:var(--amber);font-size:18px;letter-spacing:.16em;line-height:1}
.testimonial blockquote{margin:0;color:var(--ivory-dim);font-size:16px;line-height:1.6}
.testimonial figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--amber-soft);margin-top:auto}
.testimonial-role{display:block;margin-top:8px;color:var(--ivory-dim);font-family:var(--ui);font-size:13px;letter-spacing:0;line-height:1.5}
@media (max-width:860px){.testimonials{grid-template-columns:1fr}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--rule);padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--ink)}
.plan.rec{border-color:var(--amber);background:var(--ink-2)}
.plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan h3{font-family:var(--display);font-weight:500;font-size:23px;margin:0;letter-spacing:-.01em}
.price{font-family:var(--display);font-size:40px;line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SOFT' 0,'WONK' 1}
.price small{font-family:var(--ui);font-size:13px;color:var(--ivory-dim);letter-spacing:0}
.plan .cr{font-family:var(--mono);font-size:12px;color:var(--amber-soft);letter-spacing:.06em}
.plan .bl{margin:0;color:var(--ivory-dim);font-size:14px;flex:1}
.plan-legal{max-width:64ch;margin:22px auto 0;font-size:12.5px;line-height:1.65;
  color:var(--ivory-faint);text-align:center}
.plan-legal a{color:var(--ivory-dim)}

/* WHAT A PLAN BUYS, before any components. */
.example{margin-top:clamp(26px,3.4vw,40px);border:1px solid var(--rule);background:var(--ink-2);
  display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:820px){.example{grid-template-columns:1fr}}
.ex-lines,.ex-fit{padding:clamp(20px,2.6vw,28px)}
.ex-fit{border-left:1px solid var(--rule)}
@media (max-width:820px){.ex-fit{border-left:0;border-top:1px solid var(--rule)}}
.ex-lines h3{font-family:var(--display);font-weight:500;font-size:24px;margin:8px 0 16px;letter-spacing:-.02em}
.ex-lines dl{margin:0;display:grid;gap:0}
.ex-lines dl>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--rule)}
.ex-lines dt{font-size:14.5px;color:var(--ivory-dim)}
.ex-lines dd{margin:0;font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--ivory)}
.ex-lines .ex-total{border-bottom:0;padding-top:14px}
.ex-lines .ex-total dt{color:var(--ivory);font-size:15.5px}
.ex-lines .ex-total dd{font-family:var(--display);font-size:26px;color:var(--amber-soft);letter-spacing:-.02em}
.ex-fit ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:14px}
.ex-fit li{display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:baseline}
.ex-fit li b{font-family:var(--display);font-size:18px;font-weight:500}
.ex-fit li .mono{font-size:10.5px}
.ex-fit li em{grid-column:1/-1;font-style:normal;font-size:13.5px;color:var(--ivory-dim);line-height:1.5}
.ex-caveat{margin:18px 0 0;font-size:13px;color:var(--ivory-faint);line-height:1.55}

/* the calculator, behind a disclosure */
.calc-wrap{margin-top:18px;border:1px solid var(--rule)}
.calc-wrap>summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--ui);font-size:14.5px;font-weight:600;min-height:44px}
.calc-wrap>summary::-webkit-details-marker{display:none}
.calc-wrap>summary::after{content:'+';font-family:var(--mono);color:var(--amber-soft);font-size:18px}
.calc-wrap[open]>summary::after{content:'–'}
.calc-wrap[open]>summary{border-bottom:1px solid var(--rule)}
.calc{padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px)}
@media (max-width:860px){.calc{grid-template-columns:1fr;gap:24px}}
.calc h3{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 4px}
.calc>div>p{margin:0 0 20px;color:var(--ivory-dim);font-size:14px}
.rows{display:grid;gap:2px}
.row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.row-l{font-size:14.5px}
.row-l em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ivory-faint);
  display:block;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.step-ctl{display:flex;align-items:center;gap:2px}
.step-ctl button{width:36px;height:36px;border:1px solid var(--rule);background:transparent;
  color:var(--ivory);font-size:16px;line-height:1;cursor:pointer;border-radius:2px;font-family:var(--ui)}
.step-ctl button:hover:not(:disabled){border-color:var(--ivory-dim)}
.step-ctl button:disabled{opacity:.34;cursor:not-allowed}
.step-ctl output{width:32px;text-align:center;font-family:var(--mono);font-size:14px;
  font-variant-numeric:tabular-nums}
.row-c{font-family:var(--mono);font-size:13px;color:var(--ivory-dim);
  font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.total{background:var(--ink);border:1px solid var(--rule);padding:20px;align-self:start}
.total dl{margin:0;display:grid;gap:11px}
.total .tr{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total dt{font-size:13.5px;color:var(--ivory-dim)}
.total dd{margin:0;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.total .big dd{font-family:var(--display);font-size:30px;letter-spacing:-.02em}
.total .warn dd{color:var(--warn-soft)}
.bar{height:5px;background:var(--ink-3);margin:16px 0 8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--amber);transition:width .3s ease}
.calc-legal{margin:14px 0 0;font-size:12px;color:var(--ivory-faint);line-height:1.55}
.plan-pick{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.plan-pick button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 14px;border:1px solid var(--rule);background:transparent;color:var(--ivory-dim);
  cursor:pointer;border-radius:2px;min-height:40px}
.plan-pick button[aria-pressed="true"]{border-color:var(--amber);color:var(--amber-soft)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;
  justify-content:space-between;gap:20px;align-items:baseline;
  font-family:var(--display);font-size:clamp(17px,2.2vw,21px);font-weight:400;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--amber-soft);font-size:17px;flex:none}
.faq details[open] summary::after{content:'–'}
.faq p{margin:0 0 22px;color:var(--ivory-dim);font-size:15px;line-height:1.65;max-width:70ch}

/* ---------- closing + footer ---------- */
.close{position:relative;border-top:1px solid var(--rule)}
.close-grid{display:grid;grid-template-columns:1fr .68fr;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:820px){.close-grid{grid-template-columns:1fr}}
.close h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,50px);
  line-height:1.02;letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance;
  font-variation-settings:'SOFT' 0,'WONK' 1}
.close h2 .it{font-style:italic;color:var(--amber-soft)}
.closing-film{width:100%;height:auto;display:block;max-height:60vh;object-fit:cover}
/* Reduced motion is handled in app.js, not here: a CSS background sits BEHIND the
   video and is simply painted over, so it would look like it worked while the
   video kept playing. Pausing the element is the only thing that stops it. */

footer{border-top:1px solid var(--rule);padding:26px 0 40px;
  /* Clear the chat launcher so the footer links are never sitting underneath it. */
  padding-bottom:calc(40px + 56px)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-legal{flex-basis:100%;order:3}
.foot-legal a{color:var(--ivory-faint);text-decoration:none}
.foot-legal a:hover{color:var(--amber-soft)}

/* ---------- dialog ---------- */
dialog{border:1px solid var(--rule);background:var(--ink-2);color:var(--ivory);
  padding:0;max-width:440px;width:calc(100% - 32px);border-radius:2px}
dialog::backdrop{background:rgba(7,8,11,.78)}
.dlg{padding:26px}
.dlg h3{font-family:var(--display);font-weight:500;font-size:23px;margin:10px 0 8px}
.dlg p{color:var(--ivory-dim);font-size:14.5px;margin:0 0 18px;line-height:1.6}
.dlg .btn{width:100%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- the same allowance, spent three ways ----------
   Deliberately quieter than the plan cards above it. This answers "is this for
   me if I only want photographs", which is a question, not a pitch — three
   columns of plain type, no borders competing with the plans. */
.months{margin-top:clamp(24px,3vw,34px);border:1px solid var(--rule);padding:clamp(20px,2.6vw,28px)}
.months-head{margin-bottom:18px}
.months-head .mono{margin:0}
.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
@media (max-width:760px){.months-grid{grid-template-columns:1fr;gap:22px}}
.month{border-top:1px solid var(--rule);padding-top:14px}
.month h3{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 8px;letter-spacing:-.01em}
.m-spend{margin:0 0 4px;font-size:14.5px;color:var(--ivory-dim);line-height:1.5}
.m-out{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--amber-soft)}
.m-note{margin:0;font-size:13px;color:var(--ivory-faint);line-height:1.5}
.months-note{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ivory-dim);line-height:1.55;max-width:none}

.plan-examples{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}.plan-examples [aria-pressed=true]{border-color:var(--amber);color:var(--amber-soft)}.plan-extra{font-size:13px;color:var(--ivory-dim)}.calc-wrap .example,.calc-wrap #months{padding:22px}.cats-row{margin-bottom:22px}

.camera-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.camera-compare-grid figure{margin:0;min-width:0}.camera-compare-grid video{display:block;width:100%;aspect-ratio:16/9;background:#22262E;object-fit:cover;border-radius:12px}.camera-compare-grid h3{margin:18px 0 6px}.camera-compare-grid p,.camera-compare-note{line-height:1.6}.camera-compare-note{max-width:70ch;margin-top:18px}@media(max-width:650px){.camera-compare-grid{grid-template-columns:1fr}}

/* ---------- the one full-size before/after, inside the free check ----------
   The candle: kitchen phone photo -> free preview, side by side at every width. */
.proof-pair{margin:0 auto 30px;max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:clamp(10px,2vw,20px);align-items:start;text-align:left}
.proof-item{min-width:0}
.proof-item img,.proof-item video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule);background:#1A1D24}
.proof-item:nth-of-type(2) img,.proof-item video{object-position:center 62%}
.proof-item .mono{margin:9px 0 0;color:var(--ivory-dim);letter-spacing:.08em;line-height:1.4}
.proof-arrow{color:var(--amber-soft);font-size:24px;line-height:1;align-self:center;margin-bottom:24px}
.proof-item .nobr{white-space:nowrap}
.proof-pair figcaption{grid-column:1/-1;font-size:12.5px;color:var(--ivory-faint);text-align:center}
@media (max-width:480px){.proof-item .mono{font-size:10px;letter-spacing:.04em}}
/* Phone: the photo and the preview side by side, the video full width under them. */
@media (max-width:640px){
  .proof-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .proof-pair>.proof-arrow:nth-of-type(2){display:none}
  .proof-video{grid-column:1/-1;width:62%;margin:4px auto 0}
  .proof-video video{aspect-ratio:9/16;max-height:62vh}
}

/* The free check is the landing action: the proof, one headline, one sentence, one button. */
.free-check{padding-top:clamp(30px,4.4vw,56px);padding-bottom:clamp(34px,5vw,64px);text-align:center}
.free-check h2{font-family:var(--display);font-weight:500;font-size:clamp(27px,3.2vw,42px);letter-spacing:-.025em;line-height:1.12;margin:0 auto 12px;max-width:780px}
.free-check-line{margin:0 auto 22px;max-width:56ch;font-size:clamp(15px,1.4vw,17px);line-height:1.55;color:var(--ivory-dim)}
.free-check h2 span,.free-check h2 em{display:block}
.free-check h2 em{color:var(--amber-soft);font-weight:inherit}
.entry-timing{font-size:13px;line-height:1.5;color:var(--ivory-dim);margin:0 0 22px}
@media(max-width:640px){.free-check{text-align:left}.free-check-line{margin-left:0}.free-check .btn{width:100%;text-align:center}}

/* Hero clip: sits exactly over the still (same crop) and fades in once playing. */
.hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero-loop.on{opacity:1}
/* Hero inset: the phone photo the hero frame was made from. */
.hero-inset{position:absolute;top:12px;left:12px;width:clamp(96px,27%,150px);margin:0;background:rgba(9,10,13,.78);border:1px solid rgba(208,213,222,.35);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hero-media .hero-inset img{display:block;width:100%;max-height:none;aspect-ratio:4/3;object-fit:cover;object-position:center}
.hero-inset .mono{display:block;padding:6px 7px 7px;font-size:9.5px;letter-spacing:.04em;line-height:1.3;color:#D0D5DE}
@media(max-width:640px){
  /* Keep the proof library on the page without turning four examples and four
     looks into eight consecutive phone screens. The visible next-card edge is
     the swipe affordance. */
  .gallery{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 10px;margin-inline:calc(var(--gut) * -1)}
  .gallery .shot{flex:0 0 82vw;scroll-snap-align:start}
  .dirs{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 10px;margin-inline:calc(var(--gut) * -1)}
  .dirs figure{flex:0 0 42vw;scroll-snap-align:start}
  .steps{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 10px;margin-inline:calc(var(--gut) * -1)}
  .steps figure{flex:0 0 78vw;scroll-snap-align:start}
}

/* A larger iOS text setting must not push the navigation off the page. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
@media(max-width:640px){
  .nav-in{flex-wrap:wrap}
  .nav-right{min-width:0;max-width:100%;flex-wrap:wrap}
  .nav-photo-check{min-width:0;max-width:100%;white-space:normal;text-align:center}
  .nav-cta-mobile{overflow-wrap:anywhere}
}