:root{
  --paper:#FFFFFF;
  --paper-2:#E5E1D5;
  --paper-3:#FAF9F5;
  --ink:#15141B;
  --ink-2:#514D60;
  --ink-3:#8A8598;
  --tape:#1E1C28;
  --tape-2:#2B2838;
  --stamp:#FFB000;
  --ok:#0E7150;
  --accent:#D6446B;
  --accent-deep:#9E2A4A;
  --line:rgba(21,20,27,.14);
  --radius:14px;
  --wrap:1180px;
  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --display-stretch:82%;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --hand:"Caveat","Bradley Hand",cursive;
}
/* Drop Caveat below 720px: a browser only fetches a font file when a glyph
   actually uses it, so taking it off the front of the stack saves phones the
   49.9 KB woff2. Must stay after the :root above — same specificity, source
   order decides. Nothing else sets --hand. */
@media (max-width:720px){ :root{ --hand:"Bradley Hand",cursive } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(21,20,27,.13) 1px,transparent 1px);
  background-size:4px 4px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:1}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;letter-spacing:-.025em;line-height:.98;margin:0}
h1{font-size:clamp(36px,5.2vw,68px)}
h2{font-size:clamp(30px,4.6vw,52px)}
h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.015em}
p{margin:0 0 1em}
.lede{font-size:clamp(17px,2vw,21px);color:var(--ink-2);max-width:56ch}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.hand{font-family:var(--hand);font-weight:700}

/* ---------- top bar ---------- */
/* reserve the bar's height while partials/header.html is still loading */
[data-include="header"]{min-height:59px}
.bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;text-decoration:none;font-family:"Alfa Slab One",Georgia,serif;font-weight:400;font-size:28px;line-height:1;letter-spacing:0;color:#E4322B}
@keyframes rec{0%,55%{opacity:1}56%,100%{opacity:.15}}
.bar-secure{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{font-size:14px;text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
/* Events is a real menu of the eleven event pages, not just an anchor on the
   homepage. .nav-menu's padding-top is the hover bridge across the bar's own
   padding — without it the menu is unreachable with a mouse. */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-menu{display:none;position:absolute;top:100%;left:-16px;padding-top:13px;z-index:70}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:block}
.nav-menu-in{display:flex;flex-direction:column;background:var(--paper-3);border:1px solid var(--line);border-radius:12px;padding:8px 0;box-shadow:0 14px 34px rgba(0,0,0,.10)}
.nav-menu-in a{padding:8px 18px;border-bottom:none;white-space:nowrap}
.nav-menu-in a:hover{color:var(--ink);border-bottom-color:transparent;background:var(--paper-2)}
.btn{
  display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  background:var(--ink);color:var(--paper-3);padding:14px 22px;border-radius:999px;
  transition:transform .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--accent-deep)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--ink);color:var(--paper-3);border-color:var(--ink)}
.btn-sm{padding:10px 16px;font-size:11.5px}
.btn{white-space:nowrap}
.nav-toggle{display:none}

/* ---------- viewfinder hero ---------- */
.hero{padding:0}
/* full-bleed: cancel the wrap so the hero spans the viewport */
.hero > .wrap{max-width:none;padding:0}
.finder{
  position:relative;background:var(--tape);color:#F4F2F7;border-radius:0;
  min-height:calc(76svh - 59px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,8vh,96px) 0;overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--accent) 42%, transparent) 0%, transparent 60%);
  background-size:100% 3px,100% 100%;
}
/* inner column keeps the copy on the site's grid inside the full-bleed hero */
.finder-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;text-align:center}
.stamp{color:var(--stamp)}
.hero-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;line-height:1.4;
  text-transform:uppercase;color:color-mix(in srgb,var(--accent) 62%, #ffffff);margin:0 0 20px}
.finder h1{max-width:26ch;margin-inline:auto;text-wrap:balance;font-size:clamp(34px,4.6vw,62px)}
.finder h1 em{font-style:normal;color:color-mix(in srgb,var(--accent) 78%, #ffffff)}
.finder .lede{color:rgba(244,242,247,.72);margin:22px auto 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.finder .hero-cta{justify-content:center}
.finder .btn{background:#F4F2F7;color:var(--ink)}
.finder .btn:hover{background:var(--accent);color:#fff}
.finder .btn-ghost{background:transparent;color:#F4F2F7;border:1px solid rgba(255,255,255,.3)}
.finder .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
/* Trust line under the hero buttons. Same shape as .ehero-trust on the event
   pages, centred and inverted for the dark hero.

   The stars are one text node clipped to 96% — 4.8 of 5 — not five solid
   glyphs, because five filled stars beside a 4.8 claims a score we do not
   have. The clip is behind @supports: without background-clip:text the
   transparent colour would leave the row blank, so the plain gold stars are
   what an unsupporting browser gets. */
.hero-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 10px;margin:20px 0 0;font-size:14.5px;color:rgba(244,242,247,.72)}
.hero-trust .stars{color:var(--stamp);letter-spacing:2px;font-size:12px;line-height:1}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-trust .stars{
    background-image:linear-gradient(90deg,var(--stamp) 0 96%,rgba(244,242,247,.3) 96%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.hero-trust b{color:#F4F2F7;font-weight:600}


/* ---------- sections ---------- */
.sec{padding:88px 0}
.sec-tight{padding:56px 0}
/* First section on a page with no breadcrumb — keeps the old crumbs + section rhythm below the nav. */
.sec-lead{padding-top:100px}
/* Section that sits directly under the one before it — drops its own top padding so the two read as one block. Two classes so the mobile .sec override doesn't win. */
.sec.sec-flush,.sec-tight.sec-flush{padding-top:0}
/* Its partner — the section above, pulled in so the two sit close instead of a section apart. */
.sec.sec-tail,.sec-tight.sec-tail{padding-bottom:32px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px;flex-wrap:wrap}
.sec-head .lede{margin:12px 0 0}
.sec-head.mid{justify-content:center;text-align:center}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
/* Event landing pages run their kickers without the accent rule. */
body.event .kicker::before{display:none}

/* ---------- cassette grid ---------- */
.tapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.tape{
  position:relative;display:block;text-decoration:none;background:var(--tape);border-radius:10px;padding:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 22px -18px rgba(21,20,27,.9);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tape:hover,.tape:focus-visible{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 18px 30px -20px rgba(21,20,27,.85)}
.tape .spine{display:block;height:7px;border-radius:4px;background:var(--tape-2);margin-bottom:11px;position:relative;overflow:hidden}
.tape .spine::after{content:"";position:absolute;inset:0;width:38%;background:var(--tape-accent,var(--accent))}
.tape .label{background:var(--paper-3);border-radius:5px;padding:15px 14px 13px;min-height:132px;display:flex;flex-direction:column}
.tape .label .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);display:flex;justify-content:space-between}
.tape .label .name{font-family:var(--hand);font-weight:700;font-size:34px;line-height:1.02;margin-top:auto;color:var(--ink)}
.tape .label .note{font-size:13px;color:var(--ink-2);margin-top:4px}
.tape .reels{display:flex;gap:26px;justify-content:center;padding:12px 0 4px}
.tape .reels i{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.18);display:block;position:relative}
.tape .reels i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--tape-accent,var(--accent));opacity:.75}

/* Below 720px the eleven tapes swipe sideways instead of stacking into a very long page. */
@media (max-width:720px){
  .tapes{
    display:flex;gap:14px;
    margin:0 -24px;padding:4px 24px 14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:24px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .tapes::-webkit-scrollbar{display:none}
  .tape{flex:0 0 78%;max-width:272px;scroll-snap-align:start}
  .tape:hover,.tape:focus-visible{transform:none}
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);padding:0;position:relative;overflow:hidden}
.step .shot{position:relative;display:block;background:var(--paper-2)}
.step .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.step .num{
  position:absolute;left:16px;top:16px;width:38px;height:38px;border-radius:50%;
  background:var(--stamp);color:var(--ink);font-family:var(--display);font-size:19px;
  display:grid;place-items:center;box-shadow:0 2px 0 rgba(21,20,27,.28)
}
.step .txt{padding:22px 24px 26px}
.step .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--accent-deep);margin-bottom:12px;display:block}
.step h3{margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15.5px;margin:0}

/* ---------- feature list ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline}
.facts .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.facts .v{font-size:16px;color:var(--ink)}
.facts .v b{font-weight:600}

.moments{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.moments li{background:var(--paper-3);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start;font-size:15.5px}
.moments li::before{content:"REC";font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#fff;background:var(--accent);padding:3px 6px;border-radius:4px;flex:none;margin-top:3px}

/* ---------- pricing ---------- */
/* Payment option selector above the plan cards. Centred pill, one option
   filled — the SaaS billing-toggle pattern, borrowed because three options in
   one control read as a choice rather than as three separate offers. The
   markup is currently inert: nothing reads it and pressing changes nothing. */
.pay-seg{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 26px;padding:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px}
.pay-seg button{font-family:var(--body);font-size:15px;color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:10px 20px;min-width:0;cursor:pointer}
.pay-seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(21,20,27,.10)}
#plans{padding-top:56px;padding-bottom:80px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column}
.plan.pick{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent)}
.plan .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:4px 10px;align-self:flex-start;margin-bottom:14px}
.plan .tag.mute{background:transparent;color:var(--ink-3);border:1px solid var(--line)}
.plan .price{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1;margin:6px 0 2px}
.plan .per{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.plan .price span{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-left:8px}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:9px}
.plan li{font-size:15px;color:var(--ink-2);display:flex;gap:10px}
.plan li::before{content:"+";color:var(--accent);font-weight:700}
.plan .btn{margin-top:auto;justify-content:center}
.fin-amt{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1;margin:6px 0 2px}
.fin-amt span{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.fin-logos{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 26px}
.fin-logos img{height:44px;width:88px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:8px;display:block}
/* Under the three plan cards on the event pages. Klarna and Affirm run the
   split, so the line names them and the fine print hands them the terms. */
.pay-note{text-align:center;margin:26px 0 0}
.pay-note p{font-size:15px;color:var(--ink-2);margin:0}
.pay-note .fin-logos{margin:12px 0 0}
.pay-note .fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 0}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:var(--tape);color:#F0EEF5;border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.quote .stars{color:var(--stamp);letter-spacing:3px;font-size:13px}
.quote p{font-size:15.5px;line-height:1.5;color:rgba(240,238,245,.86);margin:0}
.quote .who{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,238,245,.5);margin-top:auto}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:600;font-size:19px;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:20px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);font-size:15.5px;margin:0 0 20px;max-width:70ch}

/* ---------- band cta ---------- */
.band{background:var(--tape);color:#F4F2F7;border-radius:var(--radius);padding:clamp(30px,5vw,60px);display:flex;gap:34px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.band h2{max-width:18ch}
.band p{color:rgba(244,242,247,.66);max-width:44ch;margin:14px 0 0}
.band .btn{background:var(--accent);color:#fff}
.band .btn:hover{background:#F4F2F7;color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:70px;padding:42px 0 60px;font-size:14px;color:var(--ink-2)}
.foot{display:flex;gap:34px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.foot-brand{display:flex;flex-direction:column}
.foot-legal{margin-top:26px}
.foot-links{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);gap:10px 44px;justify-items:end;text-align:right}
.foot-col{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);gap:10px 44px;align-content:start}
.foot-h{color:var(--ink-3)}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--accent-deep)}
.foot .fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:520px){
  .foot-links{grid-auto-flow:row;grid-template-rows:none;justify-items:start;text-align:left}
  .foot-col{grid-auto-flow:row;grid-template-rows:none}
}

/* ---------- checkout ---------- */
.co-title{font-size:clamp(30px,4.6vw,52px)}
.co-grid{display:grid;grid-template-columns:1fr 372px;gap:34px;align-items:start}
.co-step{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 28px;margin-bottom:18px}
.co-step > h3{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.co-step > h3 .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#fff;background:var(--ink);border-radius:999px;padding:4px 9px;font-weight:400}
.co-step > h3 .tag-opt{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;white-space:nowrap}
.co-step .hint{color:var(--ink-2);font-size:14.5px;margin:0 0 22px}
.opt{display:grid;gap:10px}
/* display:grid is an author rule and beats the UA sheet's [hidden], so the
   collapsed upgrade group draws in full without this. Same trap as .rows .r. */
.opt[hidden]{display:none}
/* gap only reaches inside a grid, and the collapsed upgrades are a second one. */
.opt + .opt{margin-top:10px}
.opt-more{margin-top:10px;padding:8px 0;background:none;border:0;font-family:var(--body);font-size:14.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.opt-more:hover{color:var(--ink)}
.opt-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
label.card{
  display:grid;grid-template-columns:20px 1fr auto;gap:16px;align-items:start;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;padding:17px 18px;background:var(--paper);
  transition:border-color .15s ease, background .15s ease;
}
label.card:hover{border-color:var(--ink-3)}
label.card input{margin:4px 0 0;accent-color:var(--accent);width:18px;height:18px;flex:none}
label.card.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--paper-3));box-shadow:0 0 0 1px var(--accent)}
label.card > span{min-width:0}
label.card .t{display:block;font-weight:600;font-size:16px;line-height:1.3}
label.card .d{display:block;font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:4px}
label.card .p{font-family:var(--mono);font-size:14px;white-space:nowrap;padding-top:1px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
/* .f sets display:flex, which outranks the UA [hidden] rule — without this a
   hidden field still holds its row and its 14px of grid gap. */
.f[hidden]{display:none}
.f label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.f input,.f select,.f textarea{
  font-family:var(--body);font-size:15.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:12px 13px;width:100%;
}
.f select{
  -webkit-appearance:none;appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B6779' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.f .help{font-size:12.5px;color:var(--ink-3)}
/* Step 01's availability answer. It used to be a .help span inside the date
   field: 12.5px var(--ink-3), wrapping in half a grid column, wearing exactly
   the same clothes as the optional-field hints elsewhere on the site — and the
   same clothes as its own "that date has passed" state, so a yes and a no read
   identically. It is a full-width panel now, with the verdict on its own line
   above the shipping detail, and the mark and tint carry the state before the
   sentence is read. Green is available, amber is tight, pink is a stop. */
.datenote{
  grid-column:1/-1;margin:0;
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);
  background:color-mix(in srgb,var(--ok) 7%,var(--paper-3));
  font-size:14px;line-height:1.45;color:var(--ink-2);
}
/* display:grid above is an author rule and beats the UA's [hidden], so without
   this the note draws as an empty green box before a date is entered. */
.datenote[hidden]{display:none}
.datenote::before{
  content:"\2713";
  width:22px;height:22px;border-radius:50%;background:var(--ok);color:var(--paper);
  font-size:12px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.datenote b{
  display:block;font-family:var(--display);font-stretch:var(--display-stretch);
  font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px;
}
.datenote.warn{background:color-mix(in srgb,var(--stamp) 15%,var(--paper-3))}
.datenote.warn::before{content:"!";background:var(--stamp);color:var(--ink)}
/* #B3242F, not var(--accent): --accent is the event's colour on this page, so
   a stop wearing it renders indigo on an unpicked event and green on a
   graduation. Same red .err already uses for a refusal. */
.datenote.stop{background:color-mix(in srgb,#B3242F 7%,var(--paper-3))}
.datenote.stop::before{content:"!";background:#B3242F}
.datenote.stop a{color:#B3242F}
.datenote a{color:var(--accent-deep)}
/* The two event-date fields — the eleven buy boxes and step 01 of checkout.
   iOS Safari does not lay a date input out like the others: it sizes the field
   from the width of its own internal date text and ignores the declared box,
   so it bleeds past whatever contains it, and an empty one draws nothing at
   all — no mm/dd/yyyy, no glyph — which reads as a dead box rather than a
   question. Neither symptom appears in Chrome at any width.

   The value is left-aligned here because iOS centres it. The width is not
   fixed here: min-width:0 and max-width do not clamp one of these, which is
   what the first attempt at this got wrong. Only appearance:none does, and
   that is in the iOS-only block below. */
.pdp-date input[type="date"],
#eventDate{min-width:0}
.pdp-date input[type="date"]::-webkit-date-and-time-value,
#eventDate::-webkit-date-and-time-value{text-align:left}
/* The calendar mark is the affordance iOS leaves out, and the whole block is
   scoped to iOS on purpose — -webkit-touch-callout is supported nowhere else.
   Every other browser draws its own picker button on the right, so the icon
   here would be a second one beside it, and appearance:none would take that
   button away to fix a browser that never had one.

   appearance:none is what makes the field obey its width. The 44px of padding
   is for the icon, and on a field iOS is sizing by content it made the bleed
   44px worse rather than moving the text in — so the two belong together and
   neither is safe alone. min-height comes with them, because a stripped input
   holding no value collapses to its padding. */
@supports (-webkit-touch-callout:none){
  .pdp-date input[type="date"],
  #eventDate{
    -webkit-appearance:none;appearance:none;
    display:block;width:100%;min-height:47px;
    padding-right:44px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236B6779' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='1' y='2.5' width='12' height='10.5' rx='2'/%3E%3Cpath d='M1 6h12M4.5 1v3M9.5 1v3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;
  }
}
.summary{position:sticky;top:78px}
.receipt{background:var(--tape);color:#F2F0F7;border-radius:var(--radius);padding:20px;overflow:hidden}
.receipt .label{background:var(--paper-3);color:var(--ink);border-radius:6px;padding:14px 15px;margin-bottom:18px}
.receipt .label .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--ink-3);display:flex;justify-content:space-between}
.receipt .label .name{font-family:var(--hand);font-weight:700;font-size:31px;line-height:1.05;margin-top:8px}
.receipt .label .sub{font-family:var(--hand);font-weight:600;font-size:19px;color:var(--ink-2);line-height:1.15}
.rows{display:grid;gap:9px;font-size:14.5px}
.rows .r{display:flex;justify-content:space-between;gap:14px;color:rgba(242,240,247,.78)}
.rows .r b{font-weight:500;color:#F2F0F7;font-family:var(--mono);font-size:13.5px}
.rows .r.mut{color:rgba(242,240,247,.45)}
/* The plan row and its editor are static children of .rows; #rRows holds the
   rows render() rewrites. display:contents keeps every row one grid item, so
   the gap stays even across both. */
#rRows{display:contents}
/* .rows .r sets display:flex, which as an author rule beats the UA's
   [hidden]{display:none} — without this the plan row still draws a bare "edit"
   button while pricing is loading and on the failure state. */
.rows .r[hidden]{display:none}
/* The auto right margin keeps the link beside the plan name — .r is
   space-between, which would otherwise strand it mid-row. The padding gives it
   a touch target and the negative margins hold the row's height, so 13px type
   is still tappable on a phone without the receipt growing. */
.r-plan .r-edit{margin:-7px auto -7px 4px;padding:7px 6px;background:none;border:0;font-family:var(--body);
  font-size:13px;color:rgba(242,240,247,.62);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.r-plan .r-edit:hover{color:#F2F0F7}
.r-plan .r-edit:focus-visible{outline:2px solid #F2F0F7;outline-offset:2px;border-radius:3px}
/* .f gives the select the site's own field styling — paper ground, the same
   arrow, the accent focus ring — so this reads as a control on the dark panel
   rather than a new one invented for the receipt. */
.r-planedit{margin:-2px 0 2px}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.16);margin-top:16px;padding-top:16px}
/* The label matches the amount — same display face, size and colour — so the
   total reads as one line rather than a caption with a number after it.
   Shared by all four receipts: checkout, balance, drive-checkout and
   confirmation. */
.total span{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;font-size:32px;letter-spacing:-.02em;color:inherit}
.total b{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;font-size:32px;letter-spacing:-.02em}
.summary .btn{width:100%;justify-content:center;margin-top:16px}
.summary .btn + .btn,.summary .pay-or + .btn{margin-top:10px}
.summary .btn[hidden],.receipt .fine[hidden],.pay-or[hidden]{display:none}
/* The two buy buttons and the deposit split sit under the Payment Element
   in step 05, not in the receipt and never inside Stripe's mount. Same
   full-width stack the receipt gave them, recoloured for paper: .pay-or and
   .fine were written against the receipt's dark tape, so their rules here
   are the light-background half of the same two components. */
.co-pay-actions{margin-top:34px}
.co-pay-actions .btn{width:100%;justify-content:center}
.co-pay-actions .btn+.btn,.co-pay-actions .pay-or+.btn{margin-top:10px}
.co-pay-actions .btn[hidden],.co-pay-actions .fine[hidden]{display:none}
.co-pay-actions .pay-or{color:var(--ink-3)}
.co-pay-actions .pay-or::before,.co-pay-actions .pay-or::after{background:var(--line)}
.co-pay-actions .fine{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3);text-align:center}
.co-pay-terms b{display:inline-block;color:var(--ink);font-weight:700}
.co-pay-terms a{color:inherit}
/* Pay in full stays in its own colour on rollover, same as the deposit button
   below — the sitewide .btn-accent:hover goes to black, which reads as a
   different button rather than the same one under the cursor. */
#placeOrder:hover,#bPlace:hover{background:var(--accent-deep);color:#fff}
/* The deposit button. Filled, not outlined: holding the date is a way to buy,
   not the thing you press when you can't. Amazon's buy-now orange, on dark ink
   for contrast — the price inside it is the bold half. */
.btn-hold{background:#FFA41C;color:var(--ink)}
.btn-hold:hover{background:#F08804;color:var(--ink)}
.btn-hold b{font-weight:800}
/* "or" between the two, ruled off on both sides, so they read as a pair. */
.pay-or{
  display:flex;align-items:center;gap:10px;margin:12px 0 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,247,.45);
}
.pay-or::before,.pay-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}
.receipt .fine{margin:12px 0 0;font-size:12px;line-height:1.45;color:rgba(242,240,247,.5);text-align:center}
.trust{display:grid;gap:7px;margin-top:16px;font-size:12.5px;color:var(--ink-2)}
.trust div::before{content:"✓";color:var(--accent-deep);margin-right:8px;font-weight:700}
/* The checkout receipt carries this list inside the dark tape, under the
   total. --accent-deep is a blue that all but disappears there, so the tick
   is green and the text is lifted off the tape. Scoped: the same class sits
   on paper on 14 other pages. */
.receipt .trust{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:rgba(242,240,247,.72)}
.receipt .trust div{padding-left:20px;text-indent:-20px}
.receipt .trust div::before{color:#5DD39E}
/* The first line is the promise the buyer is actually checking for, so it
   carries the receipt's full text colour and weight while the rest sit back. */
.receipt .trust div:first-child{color:#F2F0F7;font-weight:700}
/* Social proof under that list. Third copy of the stars treatment — .hero-trust
   on the dark hero, .pdp-rating on paper, this one on the tape — and clipped to
   96% for the same reason as both: five solid glyphs beside a 4.8 claims a score
   we do not have. Behind @supports, or a browser without background-clip:text
   draws nothing where the stars were. */
.receipt .rating{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:5px 9px;margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:rgba(242,240,247,.6)}
.receipt .rating .stars{color:var(--stamp);letter-spacing:2px;font-size:11px;line-height:1}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .receipt .rating .stars{
    background-image:linear-gradient(90deg,var(--stamp) 0 96%,rgba(242,240,247,.28) 96%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.receipt .rating b{color:#F2F0F7;font-weight:600}
/* Mobile total bar. Off entirely above 720px — the sticky sidebar is the total
   there. Turned on in the 720px block below. */
.co-bar{display:none}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:26px 0 18px}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs .on{color:var(--accent-deep)}
.err{color:#B3242F;font-size:12.5px;display:none}
.err.show{display:block}
.err a{color:inherit}

/* ---------- confirmation ---------- */
.done{max-width:720px;margin:0 auto;text-align:center;padding:40px 0 10px}
.timeline{list-style:none;margin:34px 0 0;padding:0;text-align:left;display:grid;gap:2px}
.timeline li{background:var(--paper-3);border:1px solid var(--line);padding:16px 18px;display:grid;grid-template-columns:18px 88px 1fr;gap:14px;align-items:start}
.timeline li:first-child{border-radius:var(--radius) var(--radius) 0 0}
.timeline li:last-child{border-radius:0 0 var(--radius) var(--radius)}
.timeline .w{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-deep);display:grid;gap:3px;padding-top:2px}
.timeline .w em{font-style:normal;letter-spacing:.1em;color:var(--ink-3)}
.timeline .t{font-size:15.5px}
.timeline .t b{font-weight:600}
/* Tick, ring, badge — the state of each step, read on a page opened weeks later. */
.timeline .tl-mark{width:18px;height:18px;margin-top:2px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:grid;place-items:center;font-size:11px;line-height:1;color:var(--paper)}
.timeline .is-done{background:var(--paper)}
.timeline .is-done .tl-mark{background:var(--accent-deep);border-color:var(--accent-deep)}
.timeline .is-done .w,.timeline .is-done .t{color:var(--ink-3)}
.timeline .is-next{background:var(--paper);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.timeline .is-next .tl-mark{border-color:var(--accent);border-width:2px}
.tl-badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--accent);border-radius:4px;padding:2px 6px;margin-right:8px;vertical-align:2px}
@media(max-width:520px){
  .timeline li{grid-template-columns:16px 78px 1fr;gap:10px;padding:14px}
  .timeline .t{font-size:14.5px}
}


/* ---------- photography ---------- */
.finder{position:relative;isolation:isolate}
.finder .bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:0}
.finder .bg img{width:100%;height:100%;object-fit:cover;object-position:65% 45%;filter:saturate(.8) contrast(1.04) brightness(.92)}
.finder .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg, rgba(22,20,30,.90) 0%, rgba(22,20,30,.66) 48%,
    rgba(22,20,30,.34) 100%);
}
.finder::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:0;
  background:repeating-linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
.finder > *:not(.bg){position:relative;z-index:2}

.frame{display:block;position:relative;overflow:hidden;border-radius:10px;background:var(--tape-2);aspect-ratio:4/3}
.frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05);transition:transform .55s ease}
.frame .fr{position:absolute;left:8px;top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.9);background:rgba(0,0,0,.38);padding:2px 7px;border-radius:3px}
.frame .fs{position:absolute;right:9px;bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--stamp);text-shadow:0 1px 4px rgba(0,0,0,.7)}

.sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shot-card{display:block}
.shot-card:hover .frame img{transform:scale(1.05)}
.shot-card .cap{font-family:var(--hand);font-weight:700;font-size:21px;line-height:1.15;margin-top:11px;color:var(--ink)}
.sheet-2{grid-template-columns:repeat(2,1fr)}
.sheet-2 .frame{aspect-ratio:5/4}

.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.thumb .frame{aspect-ratio:1/1}
.thumb .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--accent-deep);display:block;margin-top:10px}
.thumb .t{display:block;font-size:14.5px;line-height:1.35;margin-top:3px;color:var(--ink)}

.still{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:21/9;min-height:280px}
.still img,.still video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.05)}
.still .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,4vw,42px);color:#F4F2F7;
  background:linear-gradient(to top, rgba(20,18,28,.9) 8%, rgba(20,18,28,.35) 55%, rgba(20,18,28,.1) 100%)}
.still h3{max-width:20ch}
.still p{color:rgba(244,242,247,.74);max-width:46ch;margin:10px 0 0;font-size:15.5px}
.still .play{width:56px;height:56px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin-bottom:18px;flex:none}
.still .play span{width:0;height:0;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.still .fs{position:absolute;right:16px;top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--stamp)}

.strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.strip .frame{flex:0 0 232px;aspect-ratio:3/2}

@media (max-width:960px){
  .sheet{grid-template-columns:repeat(2,1fr)}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .still{aspect-ratio:4/3;min-height:0}
}
/* mobile: the shot list turns into a swipeable carousel instead of a tall stack */
@media (max-width:720px){
  .thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:-24px;padding:0 24px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .thumbs::-webkit-scrollbar{display:none}
  .thumb{flex:0 0 76%;scroll-snap-align:start}
}
@media (max-width:520px){
  .sheet{grid-template-columns:1fr}
  .still{aspect-ratio:3/4}
}

/* ---------- camera page ---------- */
.diagram{background:var(--tape);border-radius:var(--radius);padding:24px;display:grid;place-items:center}
.diagram svg{width:100%;height:auto;max-width:440px}
.spec{border-top:1px solid var(--line);margin:0}
.spec .row{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.spec dd{margin:0;font-size:15.5px}
.spec dd b{font-weight:600}
.shoot{
  position:relative;aspect-ratio:4/3;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--accent) 55%, var(--line));
  background:color-mix(in srgb,var(--accent) 5%, var(--paper-3));
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px;text-align:center;
}
.shoot .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-deep)}
.shoot .txt{font-size:14px;color:var(--ink-2);max-width:24ch;line-height:1.4}
.shoot .dim{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.1em}
.note-box{border-left:3px solid var(--accent);background:var(--paper-3);border-radius:0 10px 10px 0;padding:18px 20px;font-size:15px;color:var(--ink-2)}
.note-box b{color:var(--ink)}
/* Same copy with no box around it — the event pages run it straight under the plan cards. */
.note-box.note-bare{border-left:0;background:none;border-radius:0;padding:0}
.plans + .note-box{margin-top:26px}
.note-box + .plans{margin-top:26px}
@media (max-width:720px){ .spec .row{grid-template-columns:1fr;gap:4px} }

/* ---------- event hero: the tape label (light, editorial) ---------- */
.ehero{padding:50px 0 0}
.ehero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,60px);align-items:center}
/* max-width tracks .lede: 56ch of clamp(17px,2vw,21px) == clamp(476px,56vw,588px) */
.ehero h1{font-size:clamp(34px,4.6vw,60px);max-width:min(100%,clamp(476px,56vw,588px));text-wrap:pretty}
.ehero h1 em{font-style:normal;color:var(--accent-deep)}
.ehero .lede{margin-top:20px}
.ehero .hero-cta{margin-top:28px}
.ehero-trust{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.ehero-trust .stars{color:var(--stamp);letter-spacing:2px;font-size:12px}
.ehero-trust b{color:var(--ink);font-weight:600}
.ehero-hold{margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.ehero-hold b{color:var(--ink);font-weight:600}
.ehero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:9px 28px;
  margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.ehero-facts li{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ehero-facts b{color:var(--ink);font-weight:500}
.ehero-media{position:relative;margin:0}
.ehero-media .pic{display:block;position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;background:var(--tape-2)}
.ehero-media img,.ehero-media video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.04)}
.ehero-media .chip{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#fff;
  background:rgba(0,0,0,.42);padding:5px 9px;border-radius:4px}
.ehero-media .chip i{width:7px;height:7px;border-radius:50%;background:#FF3B30;animation:rec 1.6s steps(1,end) infinite}
.ehero-media .dt{position:absolute;right:14px;bottom:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;color:var(--stamp);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.ehero-label{position:absolute;left:-18px;bottom:26px;max-width:74%;
  background:var(--paper-3);border-radius:7px;padding:13px 17px 14px;transform:rotate(-1.6deg);
  box-shadow:0 18px 34px -20px rgba(21,20,27,.85), 0 0 0 1px rgba(21,20,27,.06)}
.ehero-label .code{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);
  font-size:10px;letter-spacing:.15em;color:var(--ink-3)}
.ehero-label .name{display:block;font-family:var(--hand);font-weight:700;font-size:30px;line-height:1.05;margin-top:5px}
.ehero-label::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:7px 7px 0 0;background:var(--accent)}

/* ---------- camera hero: the manual cover ---------- */
.manual{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,58px);align-items:center}
.manual h1{font-size:clamp(34px,4.6vw,60px);max-width:16ch;text-wrap:balance}
.manual h1 em{font-style:normal;color:var(--accent-deep)}
.manual-panel{background:var(--tape);border-radius:var(--radius);padding:clamp(20px,3vw,32px);
  display:grid;place-items:center;position:relative;overflow:hidden}
.manual-panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(255,255,255,.045) 0 1px, transparent 1px 3px)}
.manual-panel svg{width:100%;height:auto;max-width:400px;position:relative;z-index:1}
.gal{position:relative;min-width:0}
.gal-stage{position:relative;min-width:0;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;overflow:hidden}
.gal-track{display:flex;min-width:0;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.gal-track::-webkit-scrollbar{display:none}
.gal-item{flex:0 0 100%;scroll-snap-align:center;margin:0}
.gal-item img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--paper);border-radius:10px}
/* Homepage variant — event photos, not square product shots, so they fill
   the frame rather than being letterboxed into a square one. */
.gal-wide .gal-item img{aspect-ratio:4/3;object-fit:cover}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;padding:0;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--ink);
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.gal-nav:hover{background:var(--paper)}
.gal-nav.prev{left:22px}
.gal-nav.next{right:22px}
.gal-cap{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  margin:14px 0 0;text-align:center;min-height:2.6em;line-height:1.3}
.gal-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.gal-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer;
  transition:width .2s,background .2s}
.gal-dots button[aria-current="true"]{width:20px;background:var(--accent-deep)}
@media (max-width:520px){.gal-nav.prev{left:16px}.gal-nav.next{right:16px}}
@media (max-width:720px){ #plans{padding-top:40px;padding-bottom:60px} }
@media (max-width:520px){
  .pay-seg{width:100%;display:grid;grid-template-columns:repeat(3,1fr);border-radius:14px}
  .pay-seg button{min-width:0;white-space:normal;padding:9px 4px;font-size:13px;line-height:1.25;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.gal-track{scroll-behavior:auto}.gal-dots button{transition:none}}

/* Hero gallery — the event hero's tape frame used as the carousel stage. The
   REC chip, the date stamp and the tape label sit outside the scrolling track,
   so they stay put while the slides move and the module keeps its identity.
   .ehero-media-col wraps the frame with the caption and thumbnail strip, which
   is what carries the stacked order below 900px now that the figure is nested. */
.ehero-media-col{min-width:0}
/* Square rather than the 4/5 the plain frame uses: the caption and the thumb
   strip sit under it, and at 4/5 they pushed past the fold on a 900px-tall
   laptop — a strip you have to scroll to find is not a strip. Total height
   of the module lands back where the single video frame was. */
.ehero-gal .pic{padding:0;border:0;background:var(--tape-2);aspect-ratio:1/1}
.ehero-gal .gal-track{gap:0;height:100%}
.ehero-gal .gal-item{height:100%}
.ehero-gal .gal-item img,.ehero-gal .gal-item video{height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}
.ehero-gal .gal-nav{width:34px;height:34px;font-size:14px}
.ehero-gal .gal-nav.prev{left:12px}
.ehero-gal .gal-nav.next{right:12px}
.ehero-media-col .gal-cap{margin-top:14px;min-height:1.4em;text-align:center}
/* Thumbnails rather than dots — eight stills is more than a dot row can label.
   Overrides the 7px dot sizing above, so it has to stay after it. */
/* justify-content:center would clip the first thumb: when a flex row overflows
   a scroll container, centring pushes the excess out of BOTH ends and the left
   half sits before scrollLeft:0, where nothing can reach it. safe centre falls
   back to flex-start the moment it overflows. The flex-start line before it is
   the fallback for browsers that do not parse the safe keyword. */
.ehero-thumbs{gap:8px;margin-top:10px;flex-wrap:nowrap;
  justify-content:flex-start;justify-content:safe center;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.ehero-thumbs::-webkit-scrollbar{display:none}
.ehero-thumbs button{flex:0 0 auto;width:auto;height:auto;padding:0;overflow:hidden;border-radius:9px;
  background:none;border:1px solid var(--line);opacity:.62;line-height:0;
  transition:opacity .18s ease,border-color .18s ease}
.ehero-thumbs button:hover{opacity:1}
.ehero-thumbs button img{display:block;width:58px;height:58px;object-fit:cover}
.ehero-thumbs button[aria-current="true"]{width:auto;background:none;opacity:1;
  border-color:var(--accent-deep);box-shadow:0 0 0 1px var(--accent-deep)}
@media (max-width:520px){.ehero-thumbs button img{width:50px;height:50px}}
@media (prefers-reduced-motion:reduce){.ehero-thumbs button{transition:none}}
.manual-strip{display:flex;flex-wrap:wrap;gap:9px 30px;margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--line);list-style:none}
.manual-strip li{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.manual-strip b{color:var(--ink);font-weight:500}
.manual-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;margin-bottom:20px}

/* ---------- buy box: one SKU, bought on its own ---------- */
/* raw-footage.html sells the drive as a product rather than as an add-on to a
   kit, so the price, the quantity and the button sit together in the hero. */
.buy{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-3);
  padding:20px;margin-top:26px}
.buy-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buy-price b{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:38px;letter-spacing:-.03em;line-height:1}
.buy-price span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.buy-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.buy-row .btn{flex:1 1 200px}
.buy .fine{font-size:12.5px;line-height:1.5;color:var(--ink-3);margin:14px 0 0}
.buy .fine a{color:inherit}

/* Quantity stepper. A bare number input is two 1-pixel arrows on a phone, so the
   buttons are what make this usable at 375px. */
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);overflow:hidden;flex:0 0 auto}
.qty button{width:44px;height:46px;padding:0;border:0;background:none;color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1;cursor:pointer}
.qty button:hover:not(:disabled){background:var(--paper-3)}
.qty button:disabled{color:var(--ink-3);cursor:default}
.qty input{width:44px;height:46px;padding:0;border:0;background:none;text-align:center;
  font-family:var(--mono);font-size:16px;color:var(--ink);appearance:textfield;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:2px solid var(--accent);outline-offset:-2px}

@media (max-width:480px){ .buy-row .btn{flex:1 1 100%} }

@media (max-width:900px){
  .ehero-grid,.manual{grid-template-columns:1fr;gap:32px}
  .ehero-media,.ehero-media-col{order:-1}
  .ehero-media .pic{aspect-ratio:4/3}
  .ehero-label{position:static;transform:none;max-width:none;margin-top:14px;box-shadow:none;
    border:1px solid var(--line)}
  /* Stacked, the thumb strip belongs against the image it indexes — the tape
     label sits between them otherwise and the strip reads as chrome for
     whatever follows. It cannot be done in the markup: the label is a
     figcaption, so it has to stay a child of the figure, and moving the strip
     in beside it makes that box taller — which above 900px drops the label,
     absolute against the same box, onto the thumbnails. display:contents
     hands the figure's two children to .ehero-media-col for the length of
     this query instead, so all four are siblings and one set of order values
     does it. Nothing above 900px is touched. */
  .ehero-media-col{display:flex;flex-direction:column}
  .ehero-gal{display:contents}
  .ehero-media-col .gal-stage{order:1}
  .ehero-media-col .ehero-thumbs{order:2}
  .ehero-media-col .ehero-label{order:3}
  .ehero-media-col .gal-cap{order:4}
  .manual h1{max-width:none}
}

/* ---------- FAQ page ---------- */
.faq-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}
.faq-intro h1{font-size:clamp(38px,5vw,64px);margin-top:6px}
.faq-intro .lede{margin-top:14px}
.faq-layout{display:grid;grid-template-columns:246px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.faq-rail{position:sticky;top:80px}
.faq-rail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.faq-rail a{display:flex;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink-2);
  font-size:14.5px;line-height:1.3;padding:10px 0 10px 16px;margin-left:-1px;
  border-left:2px solid transparent;transition:color .15s ease,border-color .15s ease}
.faq-rail a .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.faq-rail a:hover{color:var(--ink)}
.faq-rail a.on{color:var(--ink);border-left-color:var(--accent);font-weight:500}
.faq-rail a.on .n{color:var(--accent-deep)}
.faq-rail a.btn,.faq-rail a.btn:hover{color:#fff}

.faq-group{scroll-margin-top:86px;margin-bottom:46px}
.faq-group[hidden]{display:none}
.faq-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;margin-bottom:8px}
.faq-head .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#fff;background:var(--accent);
  border-radius:999px;padding:5px 10px}
.faq-head h2{font-size:clamp(24px,3vw,32px)}
.faq-head p{color:var(--ink-2);font-size:15px;margin:7px 0 0}
.faq-body .faq{max-width:none;margin-top:14px}
.faq details[hidden]{display:none}

/* ---------- comparison pages ---------- */
.answer{background:var(--paper-3);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px;max-width:78ch}
.answer p{font-size:17.5px;line-height:1.52;color:var(--ink);margin:0}
.answer p + p{margin-top:12px}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-3)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px;font-size:15px}
table.cmp th,table.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);background:var(--paper-2);line-height:1.5}
table.cmp thead th.us{color:var(--accent-deep)}
table.cmp tbody th{font-weight:600;font-size:14px;width:186px;color:var(--ink)}
table.cmp th[scope="row"].us,table.cmp td.us{background:color-mix(in srgb,var(--accent) 11%,transparent)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .n{font-family:var(--mono);font-size:14px;color:var(--ink)}
table.cmp .sub{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.asof{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 0;line-height:1.7}
.asof a{color:var(--ink-2)}
.scales{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scale{border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 24px;background:var(--paper-3)}
.scale.us{border-color:var(--accent)}
.scale h3{font-size:18px;margin-bottom:14px}
.scale ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.scale li{font-size:14.5px;line-height:1.45;color:var(--ink-2);display:flex;gap:10px}
.scale li::before{content:"›";color:var(--accent);font-weight:700;flex:none}
.verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.verdict{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 26px;display:flex;flex-direction:column}
.verdict.us{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent)}
.verdict .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:12px;display:block}
.verdict h3{font-size:20px;margin-bottom:10px}
.verdict p{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0 0 18px}
.verdict .tally{font-family:var(--mono);font-size:13px;color:var(--ink);margin-top:auto;
  border-top:1px solid var(--line);padding-top:14px}
.cmp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cmp-card{display:flex;flex-direction:column;text-decoration:none;background:var(--paper-3);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px 26px;
  transition:border-color .16s ease,transform .16s ease}
.cmp-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.cmp-card .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.cmp-card h3{font-size:21px;margin:9px 0 9px}
.cmp-card p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 16px}
.cmp-card .tally{font-family:var(--mono);font-size:12.5px;color:var(--accent-deep);margin-top:auto}
@media (max-width:960px){
  .verdicts,.scales,.cmp-cards{grid-template-columns:1fr}
  table.cmp tbody th{width:auto}
}

/* videographer cost by region */
.geo{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-3);overflow:hidden}
.geo-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 24px;border-bottom:1px solid var(--line)}
.geo-where .k,.geo-num .k,.geo-pick label{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);display:block}
.geo-where b{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(23px,3vw,31px);display:block;margin-top:7px}
.geo-pick{display:flex;flex-direction:column;gap:6px;flex:1 1 300px;max-width:400px}
.geo-pick select{font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:11px 12px;width:100%}
.geo-pick select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.geo-nums{display:grid;grid-template-columns:repeat(3,1fr)}
.geo-num{padding:22px 24px 24px;border-left:1px solid var(--line)}
.geo-num:first-child{border-left:0}
.geo-num.us{background:color-mix(in srgb,var(--accent) 6%,var(--paper-3))}
.geo-num b{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(31px,4vw,45px);display:block;margin:9px 0 9px}
.geo-num.us b{color:var(--accent-deep)}
.geo-num .s{font-size:13.5px;line-height:1.45;color:var(--ink-2);display:block;max-width:34ch}
@media (max-width:720px){
  .geo-nums{grid-template-columns:1fr}
  .geo-num{border-left:0;border-top:1px solid var(--line)}
  .geo-num:first-child{border-top:0}
  .geo-pick{max-width:none}
}

/* reminder list — the band under the packages on the eleven event pages.
   Full viewport width on purpose: it is the one thing on the page addressed to
   someone who is not buying today, so it reads as a separate offer rather than
   a footnote on the packages above it. */
.remind{background:var(--paper-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.remind-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.remind h2{font-size:clamp(27px,3.6vw,40px);max-width:19ch}
.remind .lede{margin:14px 0 0;font-size:16.5px;max-width:46ch}
.remind-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 24px}
.remind-note{font-size:13px;line-height:1.4;color:var(--ink-3)}
.remind-card .btn{width:100%;justify-content:center}
.remind-card .err{margin-top:8px}
.remind-done{border-left:3px solid var(--accent)}
.remind-done h3{margin-bottom:10px}
.remind-done p{color:var(--ink-2);font-size:15px;margin:0}
@media (max-width:900px){
  .remind-in{grid-template-columns:1fr;gap:26px;align-items:start}
  .remind h2,.remind .lede{max-width:none}
}

/* legal pages */
.legal .faq-group{border-top:1px solid var(--line);padding-top:26px}
.legal .faq-head{margin-bottom:16px}
.legal p{color:var(--ink-2);font-size:15.5px;max-width:72ch;margin:0 0 15px}
.legal p b,.legal li b{color:var(--ink);font-weight:600}
.legal a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.legal ul{margin:0 0 18px;padding-left:20px;max-width:72ch}
.legal li{color:var(--ink-2);font-size:15.5px;margin-bottom:8px}
.legal li::marker{color:var(--accent)}
.legal .faq-group:first-child{border-top:0;padding-top:0}

@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr}
  .faq-rail{position:static;margin-bottom:28px}
  .faq-rail ul{display:flex;flex-wrap:wrap;gap:6px;border-left:0;border-top:1px solid var(--line);padding-top:14px}
  .faq-rail a{border:1px solid var(--line);border-radius:999px;padding:7px 13px;margin:0;font-size:13px}
  .faq-rail a.on{border-color:var(--accent);border-left-color:var(--accent)}
}

@media (max-width:960px){
  .split,.co-grid{grid-template-columns:1fr;gap:34px}
  .steps,.plans,.quotes{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:720px){
  body{font-size:16px}
  .sec{padding:60px 0}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--paper-3);flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--line)}
  .nav.open a{padding:12px 0;border-bottom:1px solid var(--line)}
  /* 16 items now — the panel is fixed to the bar, so it has to scroll itself
     rather than run off the bottom of the viewport. */
  /* Stretch, not the base bar's centre: the eleven event links are indented
     under Events, and indented text under centred text reads as broken. */
  .nav.open{align-items:stretch;max-height:calc(100vh - 59px);overflow-y:auto}
  /* No hover on a phone: the eleven event pages are just listed, indented. */
  .nav.open .nav-drop{flex-direction:column;align-items:stretch}
  .nav.open .nav-menu{display:block;position:static;padding:0}
  .nav.open .nav-menu-in{background:none;border:none;border-radius:0;box-shadow:none;padding:0}
  .nav.open .nav-menu-in a{padding:11px 0 11px 16px;border-bottom:1px solid var(--line);color:var(--ink-3)}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .fields{grid-template-columns:1fr}
  /* Room under the last field for the fixed bar. --co-bar-h is the bar's own
     measured height, written by checkout.js. */
  .co-grid{padding-bottom:calc(var(--co-bar-h,0px) + 20px)}
  .co-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--tape);color:#F2F0F7;border-top:1px solid rgba(255,255,255,.16);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    transition:opacity .15s ease;
  }
  /* Faded, not removed. The bar is fixed, so keeping its box means the padding
     under .co-grid never changes and the page doesn't shift as it hides. */
  .co-bar.gone{opacity:0;pointer-events:none}
  .co-bar-in{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center}
  .co-bar-total .t{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,247,.6)}
  .co-bar-total b{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;font-size:24px;letter-spacing:-.02em}
  .co-bar .btn{justify-content:center}
  .co-bar .btn[hidden]{display:none}
  .co-bar-hold{grid-column:1/-1}
  /* Once a deposit order is priced, Pay in full comes off and the deposit
     button is the only one left — it takes the row beside the total rather
     than dropping to a second row with an empty cell above it. */
  #bPlace[hidden] ~ .co-bar-hold{grid-column:auto}
  .finder h1{max-width:none;text-wrap:pretty}
  .finder h1 br{display:none}
  .finder{padding:56px 0}
  label.card{grid-template-columns:20px 1fr;row-gap:8px}
  label.card .p{grid-column:2;justify-self:start}
  .bar-in{gap:12px}
  .bar .btn-accent{padding:9px 13px;font-size:10.5px;letter-spacing:.1em}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-eyebrow{font-size:11px;letter-spacing:.14em}
}
/* The header row is three fixed-width items — wordmark, Menu, Book a kit — and
   below about 380px they cannot all fit, which pushed every page on the site
   into a horizontal scroll. Shrink the row rather than drop anything from it:
   the CTA is the reason the header exists. */
@media (max-width:420px){
  .bar-in{padding:12px 16px;gap:10px}
  .logo{font-size:23px}
  .bar .nav-toggle{padding:9px 12px}
}
@media (max-width:360px){
  .bar-in{padding:12px 14px;gap:8px}
  .logo{font-size:21px}
  .bar .btn-accent{padding:8px 11px}
  /* .btn is nowrap, so the longest labels on the site — "Book a bachelorette
     party kit", "Start a milestone birthday order" — set a floor wider than the
     screen and drag their whole section into a horizontal scroll. Below this
     width a button that runs to a second line is the lesser problem. */
  .btn{white-space:normal;text-align:center}
  /* Except in the header, where the row is already sized to fit and a wrapped
     "Book a kit" just makes the bar taller on the smallest screens. */
  .bar .btn{white-space:nowrap}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* resources — cost-by-market pages under resources/.
   Charts are CSS, not SVG, on purpose: an SVG chart scaled to a 375px screen
   scales its type down with it, and these pages are read on phones. Bars,
   ranges and stacks below are real boxes at real font sizes. */
.res-chart{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-3);
  padding:24px 26px 26px}
.res-chart + .res-chart{margin-top:16px}
.res-chart .asof{margin-top:18px}

.res-bars{display:grid;gap:15px;margin:0;list-style:none;padding:0}
.res-bar .res-lab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14px;color:var(--ink-2);margin-bottom:6px}
.res-bar .res-lab b{font-family:var(--mono);font-weight:500;font-size:14.5px;color:var(--ink);flex:none}
.res-bar .res-track{display:block;background:var(--paper-2);border-radius:6px;height:20px;overflow:hidden}
.res-bar .res-fill{display:block;height:100%;background:var(--ink-3);border-radius:6px;min-width:3px}
.res-bar.us .res-fill{background:var(--accent)}
.res-bar.us .res-lab b{color:var(--accent-deep)}
.res-bar .res-note{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3);margin-top:5px}

.res-range-track{position:relative;height:10px;background:var(--paper-2);border-radius:999px;margin:0 0 10px}
.res-range-span{position:absolute;top:0;bottom:0;border-radius:999px;
  background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.res-range-tick{position:absolute;top:-5px;bottom:-5px;width:3px;border-radius:2px;background:var(--ink)}
.res-range-tick.us{background:var(--accent);width:4px;top:-8px;bottom:-8px}
.res-range-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--ink-3);margin-bottom:20px}
.res-key{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.res-key li{display:flex;gap:11px;align-items:baseline;font-size:14px;line-height:1.45;color:var(--ink-2)}
.res-key .res-dot{flex:none;width:11px;height:11px;border-radius:3px;background:var(--ink);
  position:relative;top:1px}
.res-key .res-dot.span{background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.res-key .res-dot.us{background:var(--accent)}
.res-key b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.res-key .us b{color:var(--accent-deep)}

.res-stack{display:flex;height:30px;border-radius:7px;overflow:hidden;margin-bottom:16px}
.res-stack .res-seg{display:block;height:100%;background:var(--paper-2);min-width:2px}
.res-stack .res-seg.on{background:var(--accent)}
.res-stack .res-seg.ours{background:var(--accent-deep)}

.res-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.res-link{display:block;text-decoration:none;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px 20px;transition:border-color .16s ease}
.res-link:hover{border-color:var(--accent)}
.res-link .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:8px}
.res-link b{display:block;font-size:16px;color:var(--ink);line-height:1.3}
.res-link span.s{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:7px}

.res-index{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px;list-style:none;margin:0;padding:0}
.res-index li{border-bottom:1px solid var(--line);padding-bottom:11px}
.res-index a{text-decoration:none;color:var(--ink);font-size:15.5px;display:flex;justify-content:space-between;gap:14px}
.res-index a:hover{color:var(--accent-deep)}
.res-index .n{font-family:var(--mono);font-size:13.5px;color:var(--ink-3);flex:none}

.res-slot{border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper-3);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:20px}
.res-slot span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:1.7}

/* Photo credit. Sits at the foot of the page rather than under the image —
   Unsplash requires the attribution to be present and linked, not that it
   interrupt the page. Small and grey on purpose. */
.res-credit{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:0;padding:0 0 8px}
.res-credit a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.res-credit a:hover{color:var(--accent-deep)}

@media (max-width:900px){
  .res-links{grid-template-columns:1fr}
  .res-index{grid-template-columns:1fr}
}
@media (max-width:600px){
  .res-chart{padding:20px 18px 22px}
  .res-bar .res-lab{flex-wrap:wrap;gap:2px 14px}
}

/* ---------- 404 ---------- */
.nf{background:var(--tape);color:#F4F2F7;border-radius:var(--radius);
  padding:clamp(32px,5vw,64px);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.nf-code{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,242,247,.55);display:flex;align-items:center;gap:10px;margin-bottom:26px}
.nf-code i{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.nf-cam{width:min(340px,80%);height:auto;margin-bottom:34px}
.nf h1{max-width:17ch;text-wrap:balance}
.nf p{color:rgba(244,242,247,.68);max-width:52ch;margin:20px 0 0;font-size:16.5px}
.nf p.hand{color:var(--stamp);font-size:24px;margin-top:22px}
.nf .btn{margin-top:30px;background:var(--accent);color:#fff}
.nf .btn:hover{background:#F4F2F7;color:var(--ink)}
.nf-reel{transform-box:fill-box;transform-origin:center;animation:nf-spin 7s linear infinite}
.nf-reel.slow{animation-duration:11s;animation-direction:reverse}
@keyframes nf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nf-reel{animation:none}}

/* ---------- Product-detail buy box (gender-reveal.html only) ----------
   One contained buy box in the hero instead of price, deposit, rating and specs
   trailing under the button in four different type styles. The order is the one
   an ecommerce product page uses — proof, price, payment, a single action, then
   the reassurance — so nothing a buyer needs to decide sits below the CTA.

   Scoped to one event page on purpose. The other ten keep the old hero so this
   can be judged against them; reverting is this block plus that page (§5). */
.pdp-buy{margin-top:26px;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper-3)}
.pdp-rating{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14.5px;color:var(--ink-2)}
.pdp-rating .stars{color:var(--stamp);letter-spacing:2px;font-size:12px}
/* Clipped to 96% — 4.8 of 5 — for the same reason as .hero-trust: the number
   now sits beside the glyphs, and five solid stars next to a 4.8 claims a
   score we do not have. Behind @supports, or a browser without
   background-clip:text draws nothing where the stars were. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pdp-rating .stars{
    background-image:linear-gradient(90deg,var(--stamp) 0 96%,rgba(21,20,27,.22) 96%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.pdp-rating b{color:var(--ink);font-weight:600}
/* The date sits above the package, matching the order checkout asks in. It
   reuses .f — the same label, input and focus ring as the form it feeds. */
.pdp-date{margin-top:16px}
/* Package. Two cameras, four, or editing only — everything on sale is picked
   here rather than by scrolling to the packages, and the price above changes on
   tap, which is the clearest signal on the page that this is a thing being
   bought and not a brochure. */
.pdp-opts-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:16px}
.pdp-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pdp-opts label{position:relative;display:block;padding:12px 10px 12px 30px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer}
.pdp-opts input{position:absolute;left:9px;top:14px;width:15px;height:15px;margin:0;
  accent-color:var(--accent-deep)}
.pdp-opts span{display:grid;gap:2px;font-size:12.5px;line-height:1.25;color:var(--ink-2)}
.pdp-opts b{font-size:15px;font-weight:600;color:var(--ink)}
.pdp-opts label:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--paper))}
.pdp-opts label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
/* Same badge as the plan cards on checkout.html, and it means the same thing:
   the kit this event usually needs. It rides the card border rather than the
   label text because three columns leave ~65px of text each (below), which is
   not enough for a pill beside "4 cameras". It does not follow the selection —
   picking another kit does not stop this being the recommended one. */
.pdp-opts .rec{position:absolute;top:-8px;right:8px;display:block;
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--accent);
  border-radius:999px;padding:2px 7px;white-space:nowrap}
/* Three across leaves ~65px of text per column at 375px, which breaks every
   label onto three lines. Two up with editing only spanning the row keeps the
   guest-count line intact on a phone. */
@media (max-width:560px){
  .pdp-opts{grid-template-columns:1fr 1fr}
  .pdp-opts label:last-child{grid-column:1/-1}
}

/* The price is the largest thing in the box after the headline — a product page
   that makes you hunt for it reads as a brochure. */
.pdp-price{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:12px}
/* Direct child only — the deposit sentence beside it carries a <b> of its own
   and must not inherit the price's display face. */
.pdp-price > b{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:clamp(34px,6vw,44px);letter-spacing:-.03em;line-height:1}
.pdp-price span{font-size:14px;color:var(--ink-2);line-height:1.35}
.pdp-price span b{color:var(--ink);font-weight:600}
/* One primary action, full width. "See packages" was a second button of equal
   weight, which on a phone stacked into two identical full-width choices. */
.pdp-buy .hero-cta{margin-top:18px}
.pdp-buy .hero-cta .btn{width:100%;justify-content:center}
/* The whole line is the link, so it may wrap — the old nowrap kept a two-word
   phrase together and would now push a full sentence past the box on a phone. */
.pdp-alt{margin-top:12px;font-size:14px}
.pdp-alt a{display:block;color:var(--accent-deep);font-weight:600}
.pdp-buy .trust{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
/* The shared .trust tick is a ::before, so a line that wraps on a phone
   starts back under the tick. Hang the indent here only. */
.pdp-buy .trust div{padding-left:20px;text-indent:-20px}

/* Desktop keeps the price and the action reachable without a bar. */
.pdp-bar{display:none}

@media (max-width:720px){
  /* Room under the footer for the fixed bar. */
  body.pdp{padding-bottom:76px}
  .pdp-buy{padding:18px}
  .pdp-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--tape);color:#F2F0F7;border-top:1px solid rgba(255,255,255,.16);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 24px rgba(21,20,27,.22);
    opacity:0;pointer-events:none;visibility:hidden;transform:translateY(8px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  }
  /* visibility, not just opacity — a bar that is off screen should be off the
     screen reader's list too, and it is a duplicate of a link already on the page. */
  .pdp-bar.on{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition-delay:0s}
  .pdp-bar-in{display:flex;align-items:center;gap:14px}
  .pdp-bar-price{display:grid;line-height:1.15}
  .pdp-bar-price span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(242,240,247,.6)}
  .pdp-bar-price b{font-family:var(--display);font-stretch:var(--display-stretch);
    font-weight:800;font-size:22px;letter-spacing:-.02em}
  .pdp-bar .btn{margin-left:auto;justify-content:center;padding:13px 18px}
}
@media (prefers-reduced-motion:reduce){.pdp-bar{transition:none;transform:none}}

/* ---------- about: the letter ---------- */
/* about.html is the one page that is a person talking rather than the product
   explaining itself, so it is a single sheet of paper: prose measure, a
   snapshot the text runs around, and no cards. Nothing else uses these. */
.letter{max-width:780px;margin:0 auto;background:var(--paper-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(28px,5vw,62px);box-shadow:0 18px 44px rgba(21,20,27,.07)}
.letter p.letter-date{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.letter h1{font-size:clamp(27px,3.4vw,40px);max-width:22ch;margin-bottom:28px}
.letter p{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0 0 1.15em}
.letter p b{color:var(--ink);font-weight:600}

/* Floated, so the letter runs around it — a photo tucked into a page rather
   than a hero image sitting above one. The white mount and the small rotation
   are what stop it reading as a stock header. */
.letter-photo{float:right;width:236px;margin:4px 0 20px 32px;padding:11px 11px 0;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 10px 26px rgba(21,20,27,.13);transform:rotate(1.6deg)}
/* The frame is 4:5; the photo in it is a 9:16 phone portrait, so cover crops
   it vertically. Anchored near the top because that is where the face is —
   centred would take the top of her head off. */
.letter-photo img{width:100%;height:auto;aspect-ratio:4/5;border-radius:2px;
  object-fit:cover;object-position:50% 6%}
.letter-cap{font-family:var(--hand);font-weight:700;font-size:17.5px;line-height:1.25;
  color:var(--ink);text-align:center;padding:11px 4px 13px;overflow-wrap:break-word}

/* clear:both so the sign-off always starts a fresh line — a signature sitting
   beside the photo reads as a caption for it. */
.letter p.letter-sig{clear:both;font-family:var(--hand);font-weight:700;font-size:38px;line-height:1;
  color:var(--ink);margin:32px 0 8px}
.letter p.letter-from{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.letter-after{max-width:780px;margin:34px auto 0;text-align:center}
.letter-after p{color:var(--ink-3);font-size:15px;margin:0 0 16px}

@media (max-width:640px){
  .letter-photo{float:none;width:min(100%,262px);margin:0 auto 26px;transform:none}
  .letter-cap{font-size:19px}
  .letter p.letter-sig{font-size:32px}
}