/* Lazo design system v4 — editorial, and it moves. JC-LAZO-CSS-0915-006
   Every selector from v3 is kept so every page keeps working. What changed is
   how the page FEELS, after the WWDC "Designing Fluid Interfaces" rules:
     - Everything you can press answers on pointer-DOWN (:active scales it
       97% in 90ms) and settles slowly on release. Hover lifts only where
       there is a real pointer; touch gets the press, not the hover.
     - One easing for arrivals (critically damped: fast out, no bounce), one
       for state changes. No overshoot anywhere - a wedding site is calm.
     - Sections rise into place as you reach them, siblings a beat apart;
       the hero's lines arrive in reading order. lazo.js sets html.motion;
       without it (or with Reduce Motion on) the page simply appears.
     - Display type tightens with size; body text is untouched.
     - Depth is layered (a hairline plus a soft, long shadow), gold is still
       spent on one word and one button. Photos are still the design. */
:root{
  --plum:#52284F; --plum-deep:#3D1C3B; --night:#2E1530; --gold:#D9B77C; --gold-line:#E6D6B8;
  --ivory:#FAF6F0; --card:#FFFDF9; --ink:#241E2B; --muted:#6B5F72; --blush:#E8B4B8;
  --vgreen:#2E8B6B; --gold-faint:#EADFCB; --gold-ink:#8A6A2F;
  /* kept for older markup that references them */
  --glass:#FFFDF9; --glass-border:#E6D6B8;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,system-ui,sans-serif;
  /* motion tokens */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* arrivals and releases: fast out, settles, never bounces */
  --ease-std:cubic-bezier(.4,0,.2,1);       /* state changes */
  --t-press:90ms; --t-release:260ms; --t-hover:220ms; --t-reveal:.72s;
  /* depth */
  --shadow-card:0 1px 2px rgba(61,28,59,.05),0 20px 40px -18px rgba(61,28,59,.22);
  --shadow-card-hover:0 2px 4px rgba(61,28,59,.06),0 30px 56px -18px rgba(61,28,59,.32);
  --shadow-float:0 30px 60px -10px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--plum);color:var(--ivory)}
a{color:var(--plum)}
img{max-width:100%}
h1,h2,h3,.brand-word{font-family:var(--serif);font-weight:500;color:var(--plum-deep);margin:0 0 .4em;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
h1{letter-spacing:-.02em}
h1 em,h2 em{font-style:italic;color:var(--gold-ink);font-weight:500}
.hero h1 em,.band-plum h2 em,.june h2 em,.claim-strip h2 em{color:var(--gold)}
p{text-wrap:pretty}

/* ---------- pressable things: answer on pointer-down ----------
   Down is instant (90ms); the release is the slow part, so the button seems
   to come back to meet you rather than snap. */
.btn-gold,.nav-cta,.finder .btn-gold,.tile,.metro-card,.cat-card,.vendor-card,.related-links a,
.vf,.fv-cta,.tcta,.ww .demo .row span,.faq summary,.foot-col a,.site-nav a,.rowhead .more,.vf.claim .go{
  transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out),
    border-color var(--t-hover) var(--ease-std),background-color var(--t-hover) var(--ease-std),color var(--t-hover) var(--ease-std),opacity var(--t-hover) var(--ease-std)}
.btn-gold:active,.nav-cta:active,.finder .btn-gold:active,.related-links a:active,.fv-cta:active,.tcta:active,.vf.claim .go:active{
  transform:scale(.97);transition-duration:var(--t-press)}
.tile:active,.metro-card:active,.cat-card:active,.vendor-card:active,.vf:active,.faq summary:active{
  transform:scale(.985);transition-duration:var(--t-press)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:rgba(250,246,240,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .35s var(--ease-std),padding .35s var(--ease-std),border-color .35s var(--ease-std),background-color .35s var(--ease-std)}
.site-head.scrolled{box-shadow:0 1px 0 rgba(61,28,59,.06),0 12px 32px -16px rgba(61,28,59,.18);padding-top:10px;padding-bottom:10px;
  border-bottom-color:var(--gold-line);background:rgba(250,246,240,.92)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand picture{display:block}
.brand-lockup{height:30px;width:auto;display:block;transition:height .35s var(--ease-std)}
.site-head.scrolled .brand-lockup{height:26px}
.brand-word{font-size:26px;letter-spacing:.34em;line-height:1;color:var(--plum)}
.site-nav{display:flex;gap:26px;align-items:center}
.site-nav a{position:relative;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink)}
.site-nav a:not(.nav-cta){padding-bottom:2px}
/* the underline grows from the left on hover and stays for the current page */
.site-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-release) var(--ease-out)}
.site-nav a:not(.nav-cta):hover::after,.site-nav a.on::after{transform:scaleX(1)}
.site-nav a:not(.nav-cta):hover{color:var(--plum)}
.site-head .site-nav a.on{color:var(--plum);font-weight:600;border-bottom:0;padding-bottom:2px}
.site-nav a.nav-cta,.nav-cta{background:var(--plum);color:var(--ivory)!important;padding:10px 18px;border-radius:999px;font-weight:600!important;line-height:1.2;display:inline-flex;align-items:center;
  border-bottom:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(61,28,59,.2)}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--plum-deep)}

/* ---------- heroes ---------- */
.hero{position:relative;color:var(--ivory);padding:96px 28px 72px;overflow:hidden;background:var(--night)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:none}
.hero-inner{position:relative;max-width:1180px;margin:0 auto}
/* the hero arrives in reading order: headline, line, finder, facts */
html.motion .hero-inner>*{animation:rise .8s var(--ease-out) both}
html.motion .hero-inner>:nth-child(1){animation-delay:.05s}
html.motion .hero-inner>:nth-child(2){animation-delay:.16s}
html.motion .hero-inner>:nth-child(3){animation-delay:.27s}
html.motion .hero-inner>:nth-child(4){animation-delay:.38s}
html.motion .hero-inner>:nth-child(n+5){animation-delay:.48s}
.hero h1{color:var(--ivory);font-size:clamp(40px,6vw,76px);line-height:.98;max-width:14ch;letter-spacing:-.022em;text-shadow:0 2px 24px rgba(46,21,48,.35)}
.hero-sub{max-width:52ch;color:rgba(250,246,240,.9);font-size:18px;margin:18px 0 26px;text-shadow:0 1px 12px rgba(46,21,48,.4)}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;color:var(--gold-ink);margin:0 0 14px;font-weight:700}
.eyebrow a{color:var(--gold);text-decoration:none}
.rank-note{color:rgba(250,246,240,.75);font-size:14px}
/* photo heroes: the picture is the design; one warm overlay, no clip */
.hero-photo{background-size:cover;background-position:center 32%;padding:120px 28px 72px;clip-path:none;min-height:560px;
  display:flex;align-items:flex-end}
.hero-photo::before{background:linear-gradient(90deg,rgba(46,21,48,.8) 0%,rgba(46,21,48,.55) 45%,rgba(46,21,48,.16) 100%),
  linear-gradient(0deg,rgba(46,21,48,.88) 0%,rgba(46,21,48,0) 55%)}
/* JC-LAZO-AUDIT-1016: on a phone the copy runs the full width, so the left-to-right fade left the
   right half of each line over bright florals. Even the wash out across the width there. */
@media(max-width:760px){.hero-photo::before{background:linear-gradient(180deg,rgba(46,21,48,.55) 0%,rgba(46,21,48,.62) 40%,rgba(46,21,48,.9) 100%)}}
.hero-photo .hero-inner{width:100%}
.hero-photo .eyebrow{display:inline-block;background:none;padding:0;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-home h1{font-size:clamp(44px,6.4vw,84px)}
.hero-cat.hero-photo,.hero-metro.hero-photo{padding:110px 28px 64px;min-height:420px}

/* the finder: one bar, three parts */
.finder{display:grid;grid-template-columns:1.2fr 1fr auto;gap:6px;margin:0 0 18px;padding:6px;border-radius:16px;
  background:var(--ivory);border:1px solid rgba(255,255,255,.55);backdrop-filter:none;-webkit-backdrop-filter:none;max-width:760px;
  box-shadow:var(--shadow-float);transition:box-shadow var(--t-hover) var(--ease-std),transform var(--t-release) var(--ease-out)}
.finder:focus-within{box-shadow:var(--shadow-float),0 0 0 3px rgba(217,183,124,.45)}
.finder select{min-width:0;padding:14px 40px 14px 16px;border-radius:10px;border:0;border-right:1px solid var(--gold-line);
  background:transparent;font:500 15px var(--sans);color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%2352284F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;transition:background-color var(--t-hover) var(--ease-std)}
.finder select:hover{background-color:rgba(82,40,79,.05)}
.finder select:focus{outline:none;background-color:rgba(82,40,79,.06)}
.finder select:last-of-type{border-right:0}
.finder .btn-gold{flex:0 0 auto;border:none;cursor:pointer;font-size:15px;border-radius:10px;background:var(--plum);color:var(--ivory);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);padding:0 26px}
.finder .btn-gold:hover{background:var(--plum-deep);transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.finder .btn-gold:active{transform:scale(.97)}
.proof-chips{display:flex;gap:28px;flex-wrap:wrap;margin:0}
.proof-chips span{font-size:13.5px;letter-spacing:0;color:rgba(250,246,240,.85);border:0;border-radius:0;padding:0;background:none}

/* ---------- sections ---------- */
.band{max-width:1180px;margin:0 auto;padding:84px 28px}
.band-title{font-size:clamp(34px,4vw,54px);margin-bottom:14px;letter-spacing:-.018em}
.band-sub{max-width:56ch;color:var(--muted);font-size:17px}
.band-plum{position:relative;overflow:hidden;color:var(--ivory);max-width:none;background:var(--night);padding:84px 28px}
.band-plum .band-title{color:var(--ivory);max-width:1180px;margin:0 auto .5em}
.band-plum .band-sub{color:rgba(250,246,240,.78)}
.promises{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1180px;margin:28px auto 0}
.promise{background:rgba(250,246,240,.06);border:1px solid rgba(217,183,124,.35);border-radius:18px;padding:26px;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:border-color var(--t-hover) var(--ease-std),background-color var(--t-hover) var(--ease-std)}
.promise:hover{border-color:rgba(217,183,124,.7);background:rgba(250,246,240,.08)}
.promise h3{color:var(--ivory);font-size:26px}
.promise p{color:rgba(250,246,240,.82);font-size:15px;margin:0}
.band-plum .btn-gold{margin-top:6px}
/* the curves are gone; the class stays so old markup renders nothing */
.curve{display:none}

/* ---------- cards (metro, category) ---------- */
.metro-grid,.cat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.metro-card,.cat-card{display:block;background:var(--card);border:1px solid var(--gold-line);border-radius:18px;padding:24px;text-decoration:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-card)}
.metro-name,.cat-name{display:block;font-family:var(--serif);font-size:26px;font-weight:500;color:var(--plum-deep);line-height:1.1}
.metro-go,.cat-count{font-size:13px;color:var(--muted)}
.cat-intro{max-width:64ch;font-size:16px;color:var(--muted);margin:0 0 26px}

/* ---------- vendor list (category pages) ---------- */
.vendor-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vendor-card{position:relative;display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--gold-line);border-radius:18px;padding:18px 22px;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-card)}
.vendor-name{font-family:var(--serif);font-size:26px;font-weight:500;text-decoration:none;color:var(--plum-deep);line-height:1.1}
.vendor-name::after{content:"";position:absolute;inset:0;z-index:1}
.vendor-meta{margin:.15em 0;font-size:14px;color:var(--muted)}
.vthumb{flex:0 0 auto;width:72px;height:72px;border-radius:14px;display:block;background-size:cover;background-position:center;border:1px solid var(--gold-line);box-shadow:none}
.score-num{font:600 17px var(--sans);fill:var(--plum)}
.score-cord-lg .score-num{font-size:15px}
.score-label{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:.3em 0 0}
.badge{display:inline-block;font-size:12px;font-weight:600;border:1px solid var(--gold);color:var(--plum);border-radius:999px;padding:3px 10px;margin-right:6px;background:transparent}
.badge-verified{background:var(--gold);color:var(--plum-deep);box-shadow:none;border-color:var(--gold)}
.badge-muted{border-color:#D8CFDC;color:#8A7D90;background:transparent}
.badge-new{background:var(--plum-deep);color:var(--gold);border-color:var(--plum-deep)}
.new-chip-lg{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px}
.vendor-trio{background:var(--card);border:1px solid var(--gold-line);border-radius:16px;padding:18px 22px;font-size:15.5px}
.vendor-trio strong{color:var(--plum)}
.vendor-body{display:grid;gap:32px;grid-template-columns:1fr}
.vendor-facts{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;background:var(--card);border:1px solid var(--gold-line);border-radius:18px;padding:28px;backdrop-filter:none;-webkit-backdrop-filter:none}
.facts{display:grid;gap:12px;margin:0}
.facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.facts dd{margin:0;font-size:15px}
.vendor-intro{max-width:64ch;font-size:16.5px;color:var(--ink);margin:0 0 8px}
.near-block h2,.faq-block h2,.related-block h2{font-size:30px}
.near-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:520px}
.near-list li{background:var(--card);border:1px solid var(--gold-line);border-radius:12px;padding:10px 16px;display:flex;justify-content:space-between;font-size:14.5px;backdrop-filter:none;-webkit-backdrop-filter:none}
.near-mi{color:var(--muted);font-size:13px}
.faq{background:var(--card);border:1px solid var(--gold-line);border-radius:14px;margin-bottom:10px;max-width:760px;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:border-color var(--t-hover) var(--ease-std),box-shadow var(--t-hover) var(--ease-std)}
.faq[open]{border-color:var(--gold);box-shadow:var(--shadow-card)}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px;color:var(--plum-deep);list-style:none;display:flex;justify-content:space-between;gap:12px;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-ink);font-weight:400;font-size:20px;line-height:1;transition:transform var(--t-release) var(--ease-out)}
.faq[open] summary::after{content:"+";transform:rotate(45deg)}
.faq p{padding:0 18px 16px;margin:0;font-size:14.5px;color:#4A4150}
html.motion .faq[open] p{animation:rise .4s var(--ease-out) both}
.related-links{display:flex;flex-wrap:wrap;gap:10px}
.related-links a{background:var(--card);border:1px solid var(--gold-line);border-radius:999px;padding:8px 16px;font-size:14px;text-decoration:none;color:var(--plum)}
.related-links a:hover{border-color:var(--gold);box-shadow:var(--shadow-card)}

/* ---------- claim strip, buttons ---------- */
.claim-strip{position:relative;overflow:hidden;color:var(--ivory);border-radius:22px;padding:36px;background:var(--night);border:1px solid rgba(217,183,124,.4);
  box-shadow:0 30px 60px -24px rgba(46,21,48,.5)}
.claim-strip::before{display:none}
.claim-strip h2{color:var(--ivory);position:relative;font-size:clamp(28px,3.4vw,42px)}
.claim-strip p{color:rgba(250,246,240,.82);position:relative;max-width:60ch}
.band-claim .claim-wide{max-width:1180px;margin:0 auto;text-align:left;padding:44px 40px}
.btn-gold{position:relative;display:inline-block;background:linear-gradient(180deg,#E3C78F,var(--gold));color:var(--plum-deep);font-weight:700;text-decoration:none;padding:13px 24px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(61,28,59,.18),0 10px 24px -12px rgba(138,106,47,.6)}
.btn-gold:hover{transform:translateY(-1px);background:linear-gradient(180deg,#EAD09C,#E0BF86);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(61,28,59,.16),0 16px 30px -12px rgba(138,106,47,.7)}
.btn-gold:active{transform:scale(.97)}
.claim-form{justify-content:flex-start;margin-left:0}
.claim-note{color:var(--muted)}

/* ---------- tiles, steps ---------- */
.tile-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tile{position:relative;display:flex;align-items:flex-end;min-height:190px;border-radius:16px;background-size:cover;background-position:center;text-decoration:none;overflow:hidden;
  border:0;box-shadow:var(--shadow-card);isolation:isolate}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.tile-cta{align-items:center;justify-content:center;background-color:var(--night)}
.tile-cta-label{font-size:24px;color:var(--gold)}
.tile-label{padding:14px 16px;color:#fff;font-family:var(--serif);font-size:22px;font-weight:500;text-shadow:0 1px 8px rgba(36,30,43,.6);transition:transform var(--t-release) var(--ease-out)}
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:28px}
.step{background:var(--card);border:1px solid var(--gold-line);border-radius:18px;padding:26px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-card)}
.step-n{display:inline-block;font-family:var(--serif);font-size:30px;color:var(--gold-ink);line-height:1;margin-bottom:8px;background:none;width:auto;height:auto;font-feature-settings:"lnum" 1}
.step h3{font-size:24px}
.step p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- June ---------- */
.june{background-size:cover;background-position:center;color:var(--ivory);padding:96px 28px;max-width:none;margin:0;border-radius:0;overflow:hidden;border:0;box-shadow:none;position:relative}
.june-inner{max-width:1180px;margin:0 auto;text-align:left}
.june h2{color:var(--ivory);font-size:clamp(34px,4.2vw,54px);max-width:16ch}
.june p{color:rgba(250,246,240,.86);font-size:17px;max-width:56ch}

/* ---------- founder / prose / legal ---------- */
.founder-grid{display:grid;gap:36px;grid-template-columns:1.2fr .8fr;align-items:center}
.founder-photo{min-height:300px;border-radius:18px;background-size:cover;background-position:center;border:1px solid var(--gold-line);box-shadow:var(--shadow-card)}
.founder-sign{font-family:var(--serif);font-size:19px;color:var(--plum)}
.prose{max-width:720px}
.prose h2{font-size:30px;margin-top:1.6em}
.prose p{font-size:16.5px;color:#3E3644}
.prose a,.vendor-intro a{color:var(--plum);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color var(--t-hover) var(--ease-std)}
.prose a:hover,.vendor-intro a:hover{text-decoration-color:var(--plum)}
.legal p{font-size:14.5px}
.legal h2{font-size:22px}

/* ---------- footer (JC-LAZO-FOOT-0915-001) ----------
   The footer is the site's second conversion surface and its internal-linking
   spine, so it is built to be READ, not scrolled past: a brand block with one
   gold button, five columns of real destinations, then a full-width slab of
   every city that has a page. Under 760px each heading becomes an accordion
   (lazo.js adds .foot-acc); with JS off, everything is simply open, so the
   links are in the DOM either way. Every v3 selector is kept. */
.site-foot{position:relative;border-top:0;text-align:initial;padding:64px 28px 32px;margin-top:64px;color:rgba(250,246,240,.78);background:var(--night)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,183,124,.55) 30%,rgba(217,183,124,.55) 70%,transparent)}
/* The brand takes its own row so the six link columns get the full width -
   side by side they came out 132px wide and every second heading wrapped. */
.foot-top{max-width:1280px;margin:0 auto;text-align:left}
.foot-brand{display:grid;grid-template-columns:1fr auto;align-items:flex-end;gap:24px 40px;max-width:none;
  padding-bottom:32px;margin-bottom:34px;border-bottom:1px solid rgba(250,246,240,.1)}
.foot-act{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.foot-mark img,.foot-mark-img{height:72px;width:auto;display:block;margin:0 0 12px}
.foot-line{font-family:var(--serif);font-size:22px;color:var(--gold);margin:.2em 0}
.foot-promise{font-size:13px;color:rgba(250,246,240,.62);max-width:480px;margin:0}

/* the one button down here, and the one place gold is spent in the footer */
.foot-cta{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:12px 24px;border-radius:999px;
  background:linear-gradient(180deg,#E3C78F,var(--gold));color:var(--plum-deep);font:600 14.5px/1.2 var(--sans);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px -14px rgba(0,0,0,.8);
  transition:transform var(--t-release) var(--ease-out),background-color var(--t-hover) var(--ease-std),box-shadow var(--t-release) var(--ease-out)}
.foot-cta:hover{background:linear-gradient(180deg,#EAD09C,#E0BF86);transform:translateY(-1px)}
.foot-cta:active{transform:scale(.97);transition-duration:var(--t-press)}
.foot-stores{display:flex;gap:10px;justify-content:flex-end;margin:14px 0 0}
.foot-stores img{height:40px;width:auto;display:block}
.foot-stores a{display:block;transition:transform var(--t-hover) var(--ease-std)}
.foot-stores a:hover{transform:translateY(-1px)}
.foot-social{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;margin:16px 0 0;font-size:13px}
.foot-social a{color:rgba(250,246,240,.62);text-decoration:none;transition:color var(--t-hover) var(--ease-std)}
.foot-social a:hover{color:var(--gold)}

.foot-cols{display:grid;gap:28px 24px;grid-template-columns:repeat(6,minmax(0,1fr))}
/* fifteen categories against columns of five: give it two tracks and two inner columns
   so the block ends on one line instead of trailing a 15-deep tail of empty space */
.foot-col-2{grid-column:span 2}
.foot-col-2 .foot-stack{columns:2;column-gap:20px}
.foot-col-2 .foot-stack a{break-inside:avoid}
.foot-col h4{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.foot-col a{display:block;width:fit-content;font-size:14px;text-decoration:none;color:rgba(250,246,240,.85);padding:4px 0}
.foot-col a:hover{color:var(--gold);transform:translateX(2px)}

/* every city that has a page - the reason the footer is worth its height */
.foot-cities{max-width:1280px;margin:52px auto 0;padding-top:30px;border-top:1px solid rgba(250,246,240,.1)}
.foot-city-list{columns:200px;column-gap:24px}
.foot-city-list a{break-inside:avoid;font-size:13.5px;color:rgba(250,246,240,.74)}
/* JC-LAZO-AUDIT-1016: 363 city links on every page read as a wall. On desktop lazo.js clamps the
   list to a few rows behind a "Show all" button; every link stays in the HTML for crawlers, and
   with JS off the list is simply open. Phones already fold it into the accordion. */
.foot-cities.clamp .foot-city-list{max-height:176px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.foot-cities.clamp.all .foot-city-list{max-height:none;-webkit-mask-image:none;mask-image:none}
.foot-more{margin-top:14px;background:none;border:1px solid rgba(217,183,124,.45);border-radius:999px;color:var(--gold);font:600 13px var(--sans);padding:8px 16px;cursor:pointer;transition:background var(--t-hover) var(--ease-std),color var(--t-hover) var(--ease-std)}
.foot-more:hover{background:rgba(217,183,124,.14);color:var(--ivory)}

.site-foot .foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  max-width:1280px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(250,246,240,.1);
  text-align:left;font-size:12px;color:rgba(250,246,240,.5)}
.foot-copy{margin:0}
.foot-fine{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-fine a{color:rgba(250,246,240,.5);text-decoration:none;transition:color var(--t-hover) var(--ease-std)}
.foot-fine a:hover{color:var(--gold)}

/* ---------- early-access form (kept for older pages) ---------- */
.ea-form{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 10px;max-width:440px}
.ea-form input[type=email]{flex:1 1 220px;padding:13px 16px;border-radius:999px;border:1px solid rgba(217,183,124,.6);background:rgba(250,246,240,.92);font:500 15px var(--sans);color:var(--ink);
  transition:border-color var(--t-hover) var(--ease-std),box-shadow var(--t-hover) var(--ease-std)}
.ea-form input[type=email]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,183,124,.35)}
.ea-form .btn-gold{border:none;cursor:pointer}
.ea-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.ea-note{font-size:12.5px;color:rgba(250,246,240,.7)}

/* ---------- home-page pieces (home.html carries their layout inline; the feel lives here) ---------- */
main .vf{box-shadow:var(--shadow-card);transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std)}
main .vf .ph{transition:transform .9s var(--ease-out)}
main .vf:active{transform:scale(.985);transition-duration:var(--t-press)}
main .frame{transition:transform .9s var(--ease-out),box-shadow .9s var(--ease-out)}
main .chat{box-shadow:var(--shadow-card)}
main .ww{box-shadow:var(--shadow-card)}
main .ww .demo{transition:transform .9s var(--ease-out),box-shadow .9s var(--ease-out)}
main .ww .demo .row span{cursor:default}
main .rowhead .more{display:inline-block}
main .rowhead .more:hover{color:var(--plum-deep);transform:translateX(2px)}

/* ---------- hover: only where there is a real pointer ---------- */
@media (hover:hover) and (pointer:fine){
  .metro-card:hover,.cat-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-card-hover)}
  .vendor-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow-card-hover);cursor:pointer}
  .tile:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(61,28,59,.08),0 30px 56px -18px rgba(61,28,59,.45)}
  .tile:hover .tile-label{transform:translateY(-2px)}
  .step:hover{border-color:var(--gold)}
  main .vf:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-card-hover)}
  main .vf:hover .ph{transform:scale(1.04)}
  main .ww:hover .demo{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 30px 56px -18px rgba(0,0,0,.5)}
  html{scrollbar-color:var(--plum) var(--ivory);scrollbar-width:thin}
  ::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--ivory)}
  ::-webkit-scrollbar-thumb{background:var(--plum);border-radius:999px;border:3px solid var(--ivory)}
}

/* ---------- motion (lazo.js sets html.motion, .scrolled, .reveal/.in-view) ----------
   Reveal is an animation with fill "backwards", not a transition: once it has
   played, the element's own hover and press transitions take over cleanly. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.scroll-progress{display:none}
.reveal{opacity:1;transform:none}
html.motion .reveal{opacity:0}
html.motion .reveal.in-view{opacity:1;animation:rise var(--t-reveal) var(--ease-out) backwards;animation-delay:calc(var(--i,0)*70ms)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal,html.motion .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-col-2{grid-column:span 1}
  .foot-col-2 .foot-stack{columns:1}
}
@media (max-width:900px){
  .finder{grid-template-columns:1fr}
  .finder select{border-right:0;border-bottom:1px solid var(--gold-line);font-size:16px}
  .finder .btn-gold{padding:14px 20px;text-align:center}
  .founder-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html{scroll-padding-top:64px}
  .site-head{padding:10px 14px;gap:10px}
  .site-head.scrolled{padding-top:8px;padding-bottom:8px}
  .brand-lockup{height:22px}
  .site-nav{gap:12px;flex-shrink:0}
  .site-nav a:not(.nav-cta){display:none}
  .nav-cta{font-size:13px;padding:9px 14px;white-space:nowrap}
  .hero,.hero-photo{padding:72px 20px 40px;min-height:0}
  .hero h1,.hero-home h1{font-size:clamp(34px,10vw,48px);max-width:none}
  .hero-sub{font-size:16px}
  .proof-chips{gap:16px}
  .band,.band-plum{padding:52px 20px}
  .band-title{font-size:clamp(30px,8vw,38px)}
  .june{padding:64px 20px}
  .june h2{font-size:clamp(30px,8vw,38px)}
  .tile{min-height:150px}
  .tile-cta-label{font-size:20px}
  .founder-photo{min-height:220px}
  .band-claim .claim-wide{padding:30px 22px}
  .score-cord svg{width:48px;height:48px}
  .vendor-name{font-size:21px}
  .vthumb{width:56px;height:56px;border-radius:12px}
  .vendor-card{align-items:flex-start}
  .vendor-facts{padding:20px}
  .site-foot{padding:44px 20px 28px}
  /* the brand stops being a two-up: mark and promise, then a full-width button */
  .foot-brand{grid-template-columns:1fr;gap:20px;padding-bottom:26px;margin-bottom:6px}
  .foot-act{align-items:stretch}
  .foot-cta{width:100%;padding:14px 24px;font-size:15px}
  .foot-social{justify-content:flex-start}
  .foot-stores{justify-content:flex-start}
  .foot-mark img,.foot-mark-img{height:58px}
  .foot-cols{grid-template-columns:1fr;gap:0}
  .foot-cities{margin-top:0;padding-top:0;border-top:0}
  /* lazo.js adds .foot-acc; without it every column stays open and readable */
  .site-foot.foot-acc .foot-col{border-top:1px solid rgba(250,246,240,.1)}
  .site-foot.foot-acc .foot-col h4{position:relative;margin:0;padding:17px 30px 17px 0;cursor:pointer;
    font-size:12px;color:rgba(250,246,240,.9);letter-spacing:.14em;-webkit-tap-highlight-color:transparent}
  .site-foot.foot-acc .foot-col h4::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
    margin-top:-6px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
    transform:rotate(45deg);transform-origin:center;transition:transform var(--t-release) var(--ease-out)}
  .site-foot.foot-acc .foot-col.open h4::after{transform:rotate(-135deg);margin-top:-2px}
  .site-foot.foot-acc .foot-col h4:active{color:var(--gold)}
  /* The panel appears on the press and settles into place. (A height
     transition via grid-template-rows 0fr->1fr resolves the track against an
     auto-height container here and collapses to the padding, so the panel
     simply opens and the motion is carried by the fade - which is also what
     Reduce Motion wants, since the animation is gated on html.motion.) */
  .site-foot.foot-acc .foot-links{display:none}
  .site-foot.foot-acc .foot-col.open .foot-links{display:block;padding-bottom:14px}
  html.motion .site-foot.foot-acc .foot-col.open .foot-links{animation:footOpen .3s var(--ease-out) both}
  @keyframes footOpen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
  .foot-city-list{columns:1}
  .site-foot .foot-legal{justify-content:flex-start;margin-top:26px}
  html.motion .reveal.in-view{animation-delay:calc(var(--i,0)*45ms)}
  main .hm-facts{gap:10px 18px;margin-top:18px}
  main .hm-facts b{font-size:20px}
}
@media (max-width:380px){.brand-lockup{height:22px}}
@media (min-width:1800px){.hero-photo{background-position:center 40%}}

/* ---------- vendor page (JC-LAZO-VPAGE-0915-006) ----------
   The vendor page's styles moved here from vendor.html so they ship with the
   stylesheet. Every rule is prefixed with `main` so it outranks the inline
   block still present in pages built before this change; the media queries
   are repeated here for the same reason. Same bones as v5 - the vendor first,
   the work second, the rail sticky - with the v4 feel: layered depth, press
   states, hover only for a real pointer, and a hero that arrives in order. */
main .vp{max-width:1180px;margin:0 auto;padding:18px 20px 48px}
main .vp-crumb{font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin:0 0 14px}
main .vp-crumb a{color:var(--plum);text-decoration:none;font-weight:600;transition:color var(--t-hover) var(--ease-std)}
main .vp-crumb a:hover{color:var(--plum-deep)}
main .vp-crumb span{margin:0 7px;color:#C9BFCF}

/* hero: the vendor, first */
main .vp-hero{position:relative;border-radius:24px;border:1px solid rgba(217,183,124,.85);overflow:hidden;background:var(--plum-deep);background-size:cover;background-position:center;
  min-height:clamp(220px,32vw,380px);display:flex;align-items:flex-end;margin:0 0 12px;color:var(--ivory);box-shadow:var(--shadow-card-hover);isolation:isolate}
main .vp-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -80px 120px -60px rgba(46,21,48,.6);pointer-events:none}
main .vp-hero-plain{background:radial-gradient(110% 90% at 100% 0%,rgba(217,183,124,.26),rgba(217,183,124,0) 58%),radial-gradient(70% 60% at 0% 100%,rgba(232,180,184,.14),rgba(232,180,184,0) 60%),linear-gradient(135deg,#6A3A66,#52284F 55%,#3D1C3B)}
main .vp-hero-in{display:flex;gap:20px;align-items:flex-end;padding:30px 30px 26px;width:100%;position:relative;z-index:1}
html.motion main .vp-hero-in>*{animation:rise .7s var(--ease-out) both}
html.motion main .vp-hero-in>:nth-child(2){animation-delay:.12s}
main .vp-hero-txt{min-width:0;flex:1}
main .vp-hero h1{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.8vw,60px);line-height:1.02;color:var(--ivory);font-feature-settings:"lnum" 1;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(46,21,48,.45);text-wrap:balance}
main .vp-sub{margin:8px 0 0;font-size:13.5px;color:rgba(250,246,240,.86);text-shadow:0 1px 10px rgba(46,21,48,.5)}
main .vp-flags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
main .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;border:1px solid rgba(250,246,240,.38);color:var(--ivory);line-height:1;
  background:rgba(46,21,48,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
main .pill-gold{background:linear-gradient(180deg,#E3C78F,var(--gold));border-color:var(--gold);color:var(--plum-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
main .pill-score{border-color:rgba(217,183,124,.7)}
main .pill-score i{font-style:normal;font-weight:500;font-size:11px;color:rgba(250,246,240,.8)}
main .vp-sum{margin:12px 0 0;font-size:13px;color:var(--gold);font-weight:600;letter-spacing:.01em}
main .v-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ivory);border:1px solid rgba(217,183,124,.9);border-radius:16px;overflow:hidden;box-shadow:0 14px 32px -14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.2)}
main .v-logo img{display:block;object-fit:contain}
main .v-logo:not(.is-wide):not(.is-tile){height:72px;max-width:240px;padding:8px 12px}
main .v-logo:not(.is-wide):not(.is-tile) img{height:100%;width:auto;max-width:216px}
main .v-logo.is-wide{height:72px;max-width:300px;padding:8px 14px}
main .v-logo.is-wide img{height:100%;width:auto;max-width:272px}
main .v-logo.is-tile{width:112px;height:112px;padding:8px;border-radius:20px}
main .v-logo.is-tile img{width:100%;height:100%}
main .v-logo.is-bg{padding:0}
main .v-logo.is-bg.is-wide img{max-width:300px}
main .v-logo.is-bg.is-light{border-color:rgba(82,40,79,.25)}

/* the work */
main .v-gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;height:clamp(300px,40vw,440px);margin:0 0 10px}
main .v-gal a{position:relative;display:block;border-radius:14px;overflow:hidden;background:#F1E9E0;border:1px solid rgba(217,183,124,.4);isolation:isolate;
  transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out)}
main .v-gal a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
main .v-gal a:first-child{grid-row:span 2}
main .v-gal a:nth-child(n+6){display:none}
main .v-gal a.v-hide{display:none}
main .v-gal a:active{transform:scale(.985);transition-duration:var(--t-press)}
main .v-gal.v-gal-all{grid-template-columns:repeat(4,1fr);grid-template-rows:none;height:auto}
main .v-gal.v-gal-all a{aspect-ratio:1/1}
main .v-gal.v-gal-all a:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:1/1}
main .v-gal.v-gal-all a:nth-child(n+6){display:block}
main .v-gal img{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden;transition:transform .9s var(--ease-out)}
main .v-more{text-align:right;margin:0 0 22px}
main .v-more button{background:#fff;border:1px solid var(--gold);color:var(--plum);border-radius:999px;padding:9px 20px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-card);transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out),background-color var(--t-hover) var(--ease-std)}
main .v-more button:hover{background:var(--ivory);box-shadow:var(--shadow-card-hover)}
main .v-more button:active{transform:scale(.97);transition-duration:var(--t-press)}

/* two columns; the rail stays sticky, clear of the header */
main .vp-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start;margin-top:6px}
main .vp-main{min-width:0}
main .vp-rail{position:sticky;top:88px}
main .vp-card{background:linear-gradient(150deg,#3D1C3B,#52284F 70%,#5B2F58);border:1px solid var(--gold);border-radius:22px;padding:24px 22px 20px;color:var(--ivory);
  box-shadow:0 1px 2px rgba(46,21,48,.2),0 34px 64px -28px rgba(46,21,48,.6);position:relative;overflow:hidden}
main .vp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(90% 70% at 100% 0%,rgba(217,183,124,.18),rgba(217,183,124,0) 60%);pointer-events:none}
main .vp-card>*{position:relative}
main .vp-card-h{font-family:var(--serif);font-size:29px;margin:0 0 6px;font-weight:500;letter-spacing:-.01em}
main .vp-card-p{font-size:12.5px;line-height:1.6;color:rgba(250,246,240,.8);margin:0 0 16px}
main .vp-card-btns{display:flex;gap:8px}
main .vp-card-btn{display:block;text-align:center;flex:1}
main .vp-save{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(217,183,124,.7);color:var(--ivory);border-radius:999px;padding:0 16px;font-size:13px;font-weight:700;text-decoration:none;
  transition:transform var(--t-release) var(--ease-out),background-color var(--t-hover) var(--ease-std),border-color var(--t-hover) var(--ease-std)}
main .vp-save:hover{background:rgba(250,246,240,.1);border-color:var(--gold)}
main .vp-save:active{transform:scale(.96);transition-duration:var(--t-press)}
main .vp-proof{margin-top:12px;display:grid;gap:6px}
main .vp-proof-row{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(250,246,240,.85)}
main .vp-proof-booked{background:rgba(46,139,107,.18);border:1px solid rgba(126,200,170,.45);border-radius:10px;padding:8px 10px;color:#BFEBD5;font-weight:700;font-size:12.5px}
main .vp-card-note{text-align:center;font-size:12px;color:var(--gold);margin:10px 0 0;font-weight:700}
main .vp-card-list{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(217,183,124,.3)}
main .vp-card-list li{font-size:11.5px;color:rgba(250,246,240,.78);padding:4px 0 4px 18px;position:relative}
main .vp-card-list li:before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:800}

/* price, once */
main .vp-price{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;border:1px solid rgba(217,183,124,.55);border-radius:16px;padding:14px 18px;margin:0 0 18px;background:var(--card);box-shadow:var(--shadow-card)}
main .vp-price b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
main .vp-price em{font-style:normal;font-family:var(--serif);font-size:24px;color:var(--plum);font-weight:600;font-feature-settings:"lnum" 1}
main .vp-price a{color:var(--plum);font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);transition:border-color var(--t-hover) var(--ease-std)}
main .vp-price a:hover{border-color:var(--plum)}

/* sections */
main .vp-h2{color:var(--plum-deep);font-size:30px;margin:42px 0 16px;font-family:var(--serif);font-weight:500;padding-bottom:10px;border-bottom:1px solid #EFE5D8;letter-spacing:-.012em;text-wrap:balance;position:relative}
main .vp-h2::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:1px;background:var(--gold)}
main .vp-about{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:start}
main .vp-about .vp-owner[style*="display:none"] + .vp-about-txt,main .vp-about .vp-owner[style*="display: none"] + .vp-about-txt{grid-column:1 / -1}
main .vp-about:has(.vp-owner[style*="none"]) .vp-about-txt{grid-column:1 / -1}
html:has(main .vp),body:has(main .vp){max-width:100%;overflow-x:hidden}
main .vp-about .v-bio{max-width:68ch}
main .vp-owner{text-align:center;background:var(--card);border:1px solid rgba(217,183,124,.55);border-radius:20px;padding:20px 16px;box-shadow:var(--shadow-card)}
main .vp-owner b{display:block;color:var(--plum);font-size:15px;margin-top:12px}
main .vp-owner span{color:var(--muted);font-size:12px}
main .v-owner-av{width:84px;height:84px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,#3D1C3B,#52284F);background-size:cover;background-position:center;color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:34px;font-weight:600;border:0;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--gold)}
main .v-owner-bio{font-size:12.5px;line-height:1.55;color:#5C5262;margin:10px 0 0}
main .v-owner-links{display:flex;gap:10px;justify-content:center;margin-top:10px}
main .v-owner-links a{color:var(--plum);font-size:12px;font-weight:600;border-bottom:1px solid var(--gold);text-decoration:none;transition:border-color var(--t-hover) var(--ease-std)}
main .v-owner-links a:hover{border-color:var(--plum)}
/* JC-LAZO-SOCIALS-1014-001: the vendor's own social profiles, a quiet row of pills under the bio */
main .v-socials{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
main .v-socials span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B5F72;margin-right:2px}
main .v-soc{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--gold);border-radius:999px;color:var(--plum);font-size:13px;font-weight:600;text-decoration:none;background:var(--card);transition:background var(--t-hover) var(--ease-std),color var(--t-hover) var(--ease-std)}
main .v-soc::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--plum)}
main .v-soc:hover{background:var(--plum);color:var(--ivory,#FAF6F0)}
main .v-soc-instagram::before{background:#D62976}main .v-soc-tiktok::before{background:#25F4EE;box-shadow:2px 0 0 #FE2C55}main .v-soc-facebook::before{background:#1877F2}main .v-soc-pinterest::before{background:#E60023}
main .v-soc-youtube::before{background:#FF0000}main .v-soc-vimeo::before{background:#1AB7EA}main .v-soc-threads::before{background:#111}main .v-soc-x::before{background:#111}
main .v-bio{font-size:15.5px;line-height:1.85;color:var(--ink);margin:0;white-space:pre-line}
main .v-ann{background:linear-gradient(135deg,#3D1C3B,#52284F);border:1px solid var(--gold);border-radius:18px;padding:16px 20px;margin:0 0 18px;box-shadow:var(--shadow-card)}
main .v-ann b{color:var(--gold);font-size:14.5px;display:block;margin-bottom:3px}
main .v-ann p{color:var(--ivory);font-size:13px;margin:0;line-height:1.55}
main .v-chips{display:flex;flex-wrap:wrap;gap:7px}
main .v-chips span{background:var(--card);border:1px solid rgba(217,183,124,.55);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--plum);font-weight:600}

/* films */
main .v-films{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:0 0 8px}
main .v-film{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(217,183,124,.45);background:#2A1129;cursor:pointer;box-shadow:var(--shadow-card);transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out)}
main .v-film:active{transform:scale(.985);transition-duration:var(--t-press)}
main .v-film img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:opacity .4s var(--ease-std),transform .9s var(--ease-out)}
main .v-film .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
main .v-film .play i{width:56px;height:56px;border-radius:999px;background:rgba(217,183,124,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4);transition:transform var(--t-release) var(--ease-out)}
main .v-film .play i:after{content:"";border-left:16px solid #3D1C3B;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
main .v-film iframe{width:100%;height:100%;border:0;display:block}

/* packages */
main .v-pack{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
main .v-pack-card{position:relative;background:var(--card);border:1px solid rgba(217,183,124,.55);border-radius:20px;padding:22px 20px;box-shadow:var(--shadow-card);
  transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std)}
main .v-pack-card h3{color:var(--plum);font-size:19px;margin:0 0 2px;font-family:var(--serif);font-weight:600}
main .v-pack-card .p-hours{color:var(--muted);font-size:11px;margin:0 0 9px;font-weight:600;letter-spacing:.04em}
main .v-pack-card .p-price{color:var(--plum);font-weight:600;font-size:24px;margin:0 0 10px;font-family:var(--serif);font-feature-settings:"lnum" 1}
main .v-pack-card p{color:#5C5262;font-size:12.5px;line-height:1.6;margin:0;white-space:pre-line}
main .v-pack-card .p-pif{color:var(--muted);font-size:12px;font-weight:600;margin:-6px 0 10px}
main .v-pack-card.is-tagged{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-card-hover)}
main .p-tag{position:absolute;top:-11px;right:16px;background:linear-gradient(180deg,#E3C78F,var(--gold));color:var(--plum-deep);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;line-height:1.2;box-shadow:0 4px 10px -4px rgba(138,106,47,.6)}
main .v-pack-group{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--plum);margin:20px 0 12px}
main #hy-pack > .v-pack-group:first-child{margin-top:0}
main #hy-pack > .v-pack + .v-pack{margin-top:12px}
main .v-addons{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin:10px 0 2px;font-size:12.5px;color:#5C5262}
main .v-addons b{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
main .v-addons em{font-style:normal;color:var(--plum);font-weight:700;font-feature-settings:"lnum" 1}
main .v-sheet-pages{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
main .v-sheet-pages a{flex:0 0 auto;width:220px;scroll-snap-align:start;border:1px solid rgba(217,183,124,.55);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow-card);transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out)}
main .v-sheet-pages img{display:block;width:100%;height:auto}
main .v-sheet{margin:6px 0 0}

/* reviews */
main .v-reviews{display:grid;gap:10px}
main .v-review{position:relative;background:var(--card);border:1px solid rgba(217,183,124,.5);border-radius:16px;padding:16px 18px 16px;box-shadow:var(--shadow-card);overflow:hidden}
main .v-review::before{content:"\201C";position:absolute;right:14px;top:-6px;font-family:var(--serif);font-size:64px;line-height:1;color:var(--gold-faint);pointer-events:none}
main .v-review-stars{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:13px;position:relative}
main .v-review-stars span{color:#E4D7C2}
main .v-review-stars span.on{color:var(--gold)}
main .v-review-stars b{color:var(--plum)}
main .v-review-stars i{font-style:normal;color:var(--muted);font-size:12px}
main .v-review p{margin:0;font-size:14px;line-height:1.65;color:var(--ink);position:relative}
main .v-empty{font-size:13.5px;line-height:1.6;color:var(--muted);background:var(--card);border:1px dashed rgba(217,183,124,.7);border-radius:16px;padding:14px 16px;margin:0}

/* details, places, peers */
/* JC-LAZO-VPAGE-0915-010: the facts strip under the name. Narrow column, so it
   stacks rather than using the wide auto-fit grid the Details list uses. */
main .v-where{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--gold-faint)}
main .v-where div{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0 0 7px}
main .v-where div:last-child{margin-bottom:0}
main .v-where dt{flex:0 0 106px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.7}
main .v-where dd{margin:0;flex:1;min-width:180px;color:var(--ink);font-size:13.5px;line-height:1.5}
main .v-where dd span{color:var(--muted)}
@media(max-width:560px){main .v-where dt{flex-basis:100%;line-height:1.4}}

main .v-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 26px;margin:0}
main .v-facts div{margin:0}
main .v-facts dt{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
main .v-facts dd{margin:0;color:var(--ink);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
main .v-facts dd a{color:var(--plum);font-weight:600;border-bottom:1px solid var(--gold);text-decoration:none;transition:border-color var(--t-hover) var(--ease-std)}
main .v-facts dd a:hover{border-color:var(--plum)}
main .geo-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
main .geo-list a{display:inline-flex;align-items:baseline;gap:8px;background:var(--card);border:1px solid rgba(217,183,124,.55);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--plum);font-weight:600;text-decoration:none;
  transition:border-color var(--t-hover) var(--ease-std),transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out)}
main .geo-list a:active{transform:scale(.97);transition-duration:var(--t-press)}
main .geo-list a span{font-size:11px;color:var(--muted);font-weight:500}
main .geo-plain a{background:#F1E9E0}
main .geo-note{font-size:11px;color:var(--muted);margin:4px 0 0}
main .v-peers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
main .v-peer{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid rgba(217,183,124,.55);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std)}
main .v-peer:active{transform:scale(.985);transition-duration:var(--t-press)}
main .v-peer-img{display:block;aspect-ratio:4/3;background:#3D1C3B center/cover;transition:transform .9s var(--ease-out)}
main .v-peer-b{display:block;padding:10px 12px 12px}
main .v-peer-b b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--plum-deep);line-height:1.1}
main .v-peer-b i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
main .v-pref a{display:inline-block;margin:4px 8px 4px 0;color:var(--plum);font-weight:600;font-size:13px;border-bottom:1px solid var(--gold);text-decoration:none}
main .faq-vendor{margin:0}

/* availability */
main .v-cal-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
main .v-cal-month{background:var(--card);border:1px solid rgba(217,183,124,.5);border-radius:16px;padding:14px;box-shadow:var(--shadow-card)}
main .v-cal-month h4{margin:0 0 8px;color:var(--plum);font-size:16px;text-align:center;font-family:var(--serif);font-weight:600;font-feature-settings:"lnum" 1}
main .v-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
main .v-cal-grid span{font-size:11px;text-align:center;padding:5px 0;border-radius:7px;color:var(--ink)}
main .v-cal-grid .dow{color:var(--muted);font-weight:700;font-size:10px}
main .v-cal-grid .bk{background:var(--plum-deep);color:var(--ivory);font-weight:700}
main .v-cal-grid .pd{color:#C9BFCF}
main .v-cal-note{font-size:12px;color:var(--muted);margin:10px 0 0}
main .v-cal-note a{color:var(--plum);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}

/* strips, lightbox, phone bar */
main .ww-strip{background:linear-gradient(135deg,#3D1C3B,#52284F);border:1px solid rgba(217,183,124,.5);border-radius:18px;padding:28px 24px;margin:28px 0 0;text-align:center;box-shadow:var(--shadow-card)}
main .ww-strip .ww-k{font-size:10.5px;letter-spacing:.34em;color:var(--gold);margin:0 0 8px}
main .ww-strip .ww-h{color:var(--ivory);font-family:var(--serif);font-size:23px;margin:0 0 14px;text-wrap:balance}
main .vp .claim-strip{margin-top:26px}
.v-lb{position:fixed;inset:0;z-index:200;background:rgba(28,12,28,.94);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.v-lb.on{display:flex}
.v-lb img{max-width:94vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
html.motion .v-lb.on img{animation:rise .32s var(--ease-out) both}
.v-lb button{position:absolute;background:rgba(250,246,240,.12);border:1px solid rgba(250,246,240,.35);color:var(--ivory);width:44px;height:44px;border-radius:999px;font-size:20px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background-color var(--t-hover) var(--ease-std),transform var(--t-release) var(--ease-out)}
.v-lb button:hover{background:rgba(250,246,240,.22)}
.v-lb button:active{transform:scale(.92);transition-duration:var(--t-press)}
.v-lb .lb-x{top:18px;right:18px}
.v-lb .lb-p{left:18px;top:50%;transform:translateY(-50%)}
.v-lb .lb-n{right:18px;top:50%;transform:translateY(-50%)}
.v-lb .lb-p:active{transform:translateY(-50%) scale(.92)}
.v-lb .lb-n:active{transform:translateY(-50%) scale(.92)}
.v-lb .lb-c{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(250,246,240,.7);font-size:12px}
main .vp img,main .vp iframe{max-width:100%}
.v-ctabar{display:none}

@media (hover:hover) and (pointer:fine){
  main .v-gal a:hover img{transform:scale(1.04)}
  main .v-film:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
  main .v-film:hover img{opacity:1;transform:scale(1.03)}
  main .v-film:hover .play i{transform:scale(1.06)}
  main .v-pack-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--gold)}
  main .v-sheet-pages a:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
  main .geo-list a:hover{border-color:var(--plum);transform:translateY(-1px);box-shadow:var(--shadow-card)}
  main .v-peer:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--gold)}
  main .v-peer:hover .v-peer-img{transform:scale(1.04)}
}
@media (max-width:980px){
  main .vp-grid{grid-template-columns:1fr;gap:0}
  main .vp-rail{position:static;margin:26px 0 0}
  main .vp-about{grid-template-columns:minmax(0,1fr);gap:16px}
  main .vp-about .v-bio{max-width:none}
  main .vp-owner{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;text-align:left;align-items:center}
  main .v-owner-av{width:64px;height:64px;margin:0;font-size:26px;grid-row:span 3}
  main .vp-owner b{margin-top:0}
  main .v-owner-bio{grid-column:2}
  main .v-owner-links{justify-content:flex-start;grid-column:2}
}
@media (max-width:640px){
  main .vp{padding:14px 16px 24px}
  main .vp-hero{min-height:230px;border-radius:20px}
  main .vp-hero-in{padding:18px 16px 16px;gap:12px;flex-direction:column;align-items:flex-start}
  main .v-logo:not(.is-wide):not(.is-tile){height:56px;max-width:200px;padding:6px 10px}
  main .v-logo:not(.is-wide):not(.is-tile) img{max-width:180px}
  main .v-logo.is-wide{height:56px;max-width:220px;padding:6px 10px}
  main .v-logo.is-wide img{max-width:200px}
  main .v-logo.is-bg.is-wide img{max-width:220px}
  main .v-logo.is-tile{width:84px;height:84px;padding:6px;border-radius:16px}
  main .vp-hero h1{font-size:31px}
  main .vp-h2{font-size:26px;margin:34px 0 14px}
  main .v-gal{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;gap:6px}
  main .v-gal a{aspect-ratio:1/1}
  main .v-gal a:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  main .v-gal a:nth-child(n+6){display:none}
  main .v-pack{grid-template-columns:1fr}
  main .v-cal-wrap{grid-template-columns:1fr}
  main .v-cal-month:nth-child(n+2){display:none}
}
@media (max-width:720px){
  body:has(.v-ctabar){padding-bottom:96px}
  .v-ctabar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(46,21,48,.94);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;align-items:center;border-top:1px solid rgba(217,183,124,.8);box-shadow:0 -12px 32px -16px rgba(0,0,0,.5)}
  .v-ctabar p{color:var(--ivory);font-size:12px;margin:0;flex:1;line-height:1.35}
  .v-ctabar a{flex:0 0 auto}
  .v-ctabar-save{width:42px;height:42px;border-radius:999px;border:1px solid rgba(217,183,124,.7);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:transform var(--t-release) var(--ease-out),background-color var(--t-hover) var(--ease-std)}
  .v-ctabar-save:active{transform:scale(.92);transition-duration:var(--t-press)}
}

/* ---------- contact form + page chrome  JC-LAZO-CFORM-0916-001 ----------
   One form component (_contact_form.html) serves /contact/, /delete-account/,
   /privacy/ and /terms/, so it has to sit correctly both on its own band and
   at the foot of a wall of legal prose. It uses the site's own vocabulary:
   ivory card, gold hairline, plum ink, the same press-on-pointer-down feel. */
.cform-band{max-width:var(--doc-box);margin:0 auto;padding:0 28px 84px}
.band + .cform-band{padding-top:8px}
.cform{background:var(--card);border:1px solid var(--gold-line);border-radius:20px;
  padding:34px 34px 30px;box-shadow:var(--shadow-card)}
.cform-h{font-size:30px;margin:0 0 .3em}
.cform-sub{color:var(--muted);font-size:15.5px;margin:0 0 26px;max-width:52ch}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.cf-field{margin:0 0 18px;display:flex;flex-direction:column;gap:7px}
.cf-field label{font:600 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cf-opt{letter-spacing:0;text-transform:none;font-weight:400;color:#9A8FA0}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--gold-line);background:var(--ivory);
  font:400 15.5px/1.5 var(--sans);color:var(--ink);
  transition:border-color var(--t-hover) var(--ease-std),box-shadow var(--t-hover) var(--ease-std),background-color var(--t-hover) var(--ease-std)}
.cf-field textarea{resize:vertical;min-height:130px}
.cf-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%2352284F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.cf-field input:hover,.cf-field select:hover,.cf-field textarea:hover{border-color:var(--gold)}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--card);box-shadow:0 0 0 3px rgba(217,183,124,.35)}
/* invalid only after the reader has had a go at it - never on an empty page load */
.cform.tried .cf-field input:invalid,.cform.tried .cf-field textarea:invalid{border-color:#B4453F;box-shadow:0 0 0 3px rgba(180,69,63,.14)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.cform .btn-gold{border:none;cursor:pointer;font:600 15px var(--sans);flex:0 0 auto}
.cform .btn-gold[disabled]{opacity:.55;cursor:default;transform:none}
.cf-note{font-size:12.5px;color:var(--muted);margin:0;flex:1 1 220px;min-width:200px}
.cf-note a{color:var(--plum)}
.cf-msg{margin:18px 0 0;font-size:14.5px;line-height:1.5;display:none}
.cf-msg.show{display:block}
.cf-msg.ok{color:#1F6B52;background:rgba(46,139,107,.08);border:1px solid rgba(46,139,107,.3);
  border-radius:12px;padding:13px 16px}
.cf-msg.err{color:#8E3630;background:rgba(180,69,63,.07);border:1px solid rgba(180,69,63,.3);
  border-radius:12px;padding:13px 16px}

/* ---------- the document column  JC-LAZO-DOCCOL-0916-002 ----------
   A page like /delete-account/ or /privacy/ used to render on THREE different
   left edges: the hero at 28px, the prose at 147px, the form back at 28px.

   The cause is a collision, not a choice. `<section class="band prose">` carries
   both classes; .band says max-width:1180px and .prose says 720px, they have the
   same specificity, and .prose is further down this file - so it wins, the whole
   section shrinks to 720px, and .band's `margin:0 auto` then centres it. The
   section also keeps .band's 28px side padding, which is why the text measure was
   only 664px: thin, and floating away from everything around it.

   So: one token, and every part of a document page derives its width from it.
   The hero's inner box IS the measure; the section boxes are the measure plus
   their own 28px padding either side, so the text inside them lands on exactly
   the same left edge as the hero. Opt in with .doc on the prose section and
   .hero-doc on the hero - NOT global, because the comparison pages (zola, the
   knot, honeybook...) deliberately follow a narrow prose intro with full-width
   .band-plum sections, and they must keep that. */
:root{ --doc-measure:720px; --doc-box:calc(720px + 56px) }
.hero-doc .hero-inner{max-width:var(--doc-measure)}
section.band.prose.doc{max-width:var(--doc-box)}
/* legal pages were set in 14.5px, which read as fine print on a page whose whole
   job is to be read. The measure is wide enough to carry the normal body size. */
.doc.legal p,.doc.legal li{font-size:15.5px}

@media (max-width:860px){
  /* below the column width there is nothing to centre: fall back to plain gutters */
  .hero-doc .hero-inner,section.band.prose.doc,.cform-band,.next-reads{max-width:none}
}

/* ---------- comparison pages  JC-LAZO-CMPCOL-0916-004 ----------
   These are NOT document pages: a narrow prose band is followed by full-width
   .band-plum sections, and that mix is deliberate. But the prose band was
   centring itself (the .band/.prose max-width collision above) while the hero
   and every section after it sat on the page's left edge - the same three-edge
   problem, just with different neighbours.

   So the band joins the left edge and keeps a readable measure on its text.
   The comparison table is the one thing that wanted the room all along: it is
   three columns of prose and was being squeezed into 664px. It gets the band. */
/* 1180 + its own 28px gutters: every other section on these pages centres an
   1180-wide box INSIDE its padding, so the band has to be that much wider for
   the text inside it to land on the same left edge rather than 28px right. */
section.band.prose:not(.doc){max-width:calc(1180px + 56px)}
section.band.prose:not(.doc) > *{max-width:var(--doc-measure)}
section.band.prose:not(.doc) > table,
section.band.prose:not(.doc) > .cmp{max-width:none;width:100%}

/* back link: every page that is not the home should offer the way out it came in */
.page-back{max-width:1180px;margin:0 auto;padding:22px 28px 0;font-size:13.5px}
.prose .page-back,.cform-band .page-back{padding-left:0;padding-right:0}
.page-back a{color:var(--plum);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px;
  transition:color var(--t-hover) var(--ease-std),transform var(--t-release) var(--ease-out)}
.page-back a::before{content:"\2190";color:var(--gold-ink);transition:transform var(--t-release) var(--ease-out)}
.page-back a:hover{color:var(--plum-deep)}
.page-back a:hover::before{transform:translateX(-3px)}
.page-back a:active{transform:scale(.97);transition-duration:var(--t-press)}

/* the read-on rail at the foot of a thin page: never leave a reader at a dead end */
.next-reads{max-width:var(--doc-box);margin:0 auto;padding:0 28px 84px}
.next-reads h2{font-size:22px;margin:0 0 18px}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.next-grid a{display:block;background:var(--card);border:1px solid var(--gold-line);border-radius:16px;padding:20px 22px;
  text-decoration:none;box-shadow:var(--shadow-card);
  transition:transform var(--t-release) var(--ease-out),box-shadow var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std)}
.next-grid a:active{transform:scale(.985);transition-duration:var(--t-press)}
.next-grid b{display:block;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--plum-deep);margin-bottom:5px}
.next-grid span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
@media (hover:hover) and (pointer:fine){
  .next-grid a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-card-hover)}
}

/* pull quote + lede, used by the story pages (about, what-is-a-lazo) */
.prose .lede{font-size:20px;line-height:1.6;color:#332B39}
.pull{background:var(--card);border:1px solid var(--gold-line);border-left:3px solid var(--gold);border-radius:18px;
  padding:22px 26px;margin:34px 0;font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--plum-deep)}
.prose .dek{font:600 11.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 6px}

@media (max-width:760px){
  .cform-band{padding:0 20px 56px}
  .cform{padding:24px 20px 22px;border-radius:18px}
  .cform-h{font-size:25px}
  .cf-grid{grid-template-columns:1fr}
  /* 16px keeps iOS from zooming the page on focus */
  .cf-field input,.cf-field select,.cf-field textarea{font-size:16px}
  .cform .btn-gold{width:100%;text-align:center}
  .cf-note{flex:1 1 100%}
  .page-back{padding:16px 20px 0}
  .next-reads{padding:0 20px 56px}
  .pull{font-size:20px;padding:18px 20px;margin:26px 0}
}

/* traditions hub: eight grouped sections down one page  JC-LAZO-TRAD-0916-001 */
.trad-group{padding-bottom:40px}
.trad-group h2{font-size:22px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--gold-faint)}
.trad-group:last-of-type{padding-bottom:72px}

/* the cost line on a category hero - sits under .hero-sub on a dark photo */
.hero-cost{margin:10px 0 0;font-size:14.5px;color:rgba(250,246,240,.85);text-shadow:0 1px 12px rgba(46,21,48,.4)}
.hero-cost strong{color:var(--ivory);font-feature-settings:"lnum" 1}
.hero-cost a{color:var(--gold);text-decoration:none;font-weight:600;
  transition:color var(--t-hover) var(--ease-std)}
.hero-cost a:hover{color:var(--ivory)}

/* ---------- cost guides  JC-LAZO-COST-0916-001 ----------
   /cost/ and /cost/<category>/. These sit on the document column (.doc), so
   everything here is measured against --doc-measure and needs no widths of its
   own; what it needs is to make a page of numbers scannable, because the reader
   arrived with one question and should be able to find the answer without
   reading a feature. */

/* the three price bands: the middle one is what most couples pay, and it says so */
.cost-bands{display:grid;gap:12px;margin:26px 0 10px}
.cost-band{background:var(--card);border:1px solid var(--gold-line);border-radius:16px;padding:20px 22px;
  display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline}
.cost-band.is-typical{border-color:var(--gold);box-shadow:var(--shadow-card);background:linear-gradient(180deg,#FFFDF9,#FFFBF2)}
.cb-label{grid-column:1;margin:0;font:600 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cb-tag{display:inline-block;background:var(--gold);color:var(--plum-deep);border-radius:999px;
  padding:2px 8px;font-size:9.5px;letter-spacing:.1em;margin-left:6px;vertical-align:middle}
.cb-range{grid-column:2;grid-row:1;margin:0;font-family:var(--serif);font-size:27px;font-weight:600;color:var(--plum-deep);
  line-height:1.1;font-feature-settings:"lnum" 1}
.cb-detail{grid-column:1 / -1;margin:8px 0 0;font-size:15px;color:#4A4150;line-height:1.6}
.cost-note{font-size:13.5px;color:var(--muted);font-style:italic;margin:0 0 8px}

/* drivers + savings: a definition list is what this actually is */
.cost-drivers{margin:22px 0 8px;display:grid;gap:0}
.cost-drivers dt{font:600 16px var(--sans);color:var(--plum-deep);margin-top:20px}
.cost-drivers dt:first-child{margin-top:0}
.cost-drivers dd{margin:5px 0 0;font-size:15.5px;color:#4A4150;line-height:1.65;
  padding-left:14px;border-left:2px solid var(--gold-faint)}
.cost-save dd{border-left-color:rgba(46,139,107,.4)}

.cost-ask{margin:20px 0 8px;padding:0;list-style:none;counter-reset:ask}
.cost-ask li{counter-increment:ask;position:relative;padding:12px 0 12px 42px;border-bottom:1px solid var(--gold-faint);
  font-size:15.5px;color:#3E3644;line-height:1.6}
.cost-ask li:last-child{border-bottom:0}
.cost-ask li::before{content:counter(ask);position:absolute;left:0;top:11px;width:26px;height:26px;border-radius:999px;
  background:var(--plum);color:var(--ivory);font:600 12px var(--sans);display:flex;align-items:center;justify-content:center}

/* the city rail and the hub's guide cards share a container */
.cost-cities{max-width:var(--doc-box);margin:0 auto;padding:0 28px 72px}
.cost-cities h2{font-size:26px;margin:0 0 6px}
.cc-sub{color:var(--muted);font-size:15px;margin:0 0 20px;max-width:56ch}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cc-grid a{display:block;background:var(--card);border:1px solid var(--gold-line);border-radius:12px;padding:12px 14px;
  text-decoration:none;transition:transform var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std),box-shadow var(--t-release) var(--ease-out)}
.cc-grid b{display:block;font:600 14px var(--sans);color:var(--plum-deep);line-height:1.3}
.cc-grid span{display:block;font-size:12px;color:var(--muted);margin-top:2px;font-feature-settings:"lnum" 1}
.cc-grid a:active{transform:scale(.97);transition-duration:var(--t-press)}
.cc-more{margin:18px 0 0;font-size:14.5px}
.cc-more a{color:var(--plum);font-weight:600;text-decoration:none}
.cc-more a:hover{color:var(--plum-deep)}

/* the hub: one card per guide, price forward - it is what the page is for */
.cc-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.cc-guides a{display:block;background:var(--card);border:1px solid var(--gold-line);border-radius:16px;padding:20px 22px;
  text-decoration:none;box-shadow:var(--shadow-card);
  transition:transform var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std),box-shadow var(--t-release) var(--ease-out)}
.cc-guides b{display:block;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--plum-deep);line-height:1.2}
.cc-guides em{display:block;font-style:normal;font:600 15px var(--sans);color:var(--gold-ink);margin:6px 0 6px;
  font-feature-settings:"lnum" 1}
.cc-guides span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.cc-guides a:active{transform:scale(.985);transition-duration:var(--t-press)}
@media (hover:hover) and (pointer:fine){
  .cc-grid a:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow-card)}
  .cc-guides a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-card-hover)}
}

@media (max-width:760px){
  .cost-cities{padding:0 20px 48px}
  .cost-band{grid-template-columns:minmax(0,1fr);gap:2px;padding:18px 18px}
  .cb-label{white-space:normal}
  .cb-range{grid-column:1;grid-row:auto;font-size:24px}
  .cb-detail{grid-column:1}
  .cost-ask li{padding-left:38px}
}

/* ---------- questions + booking timeline  JC-LAZO-ASK-0916-001 ----------
   Both clusters sit on the document column, so nothing here sets a width. What
   these need is scanability: a reader arrives with a vendor meeting tomorrow and
   wants the questions, not an essay. */

/* a question, and what to listen for in the answer */
.ask-list{display:grid;gap:12px}
.ask-item{background:var(--card);border:1px solid var(--gold-line);border-radius:16px;padding:18px 20px}
.ask-q{margin:0 0 10px;font:600 16.5px var(--sans);color:var(--plum-deep);line-height:1.45}
.ask-l{margin:0;font-size:15px;color:#4A4150;line-height:1.65}
.ask-tag{display:block;font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:5px}
.ask-universal .ask-item{border-left:3px solid var(--gold)}

/* the booking timeline: when on the left, what on the right */
.wtb-list{display:grid;gap:2px}
.wtb-row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;
  border-bottom:1px solid var(--gold-faint)}
.wtb-row:last-child{border-bottom:0}
.wtb-when{margin:0;font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);padding-top:3px}
.wtb-body{min-width:0}
.wtb-cat{margin:0 0 6px;font-family:var(--serif);font-size:21px;font-weight:500;color:var(--plum-deep);line-height:1.2}
.wtb-cat a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-line);
  transition:border-color var(--t-hover) var(--ease-std)}
.wtb-cat a:hover{border-bottom-color:var(--gold)}
.wtb-price{font:600 13px var(--sans);color:var(--muted);margin-left:8px;white-space:nowrap;
  font-feature-settings:"lnum" 1}
.wtb-note{margin:0 0 8px;font-size:15px;color:#4A4150;line-height:1.6}
.wtb-links{margin:0;font-size:13.5px}
.wtb-links a{color:var(--plum);font-weight:600;text-decoration:none}
.wtb-links a:hover{color:var(--plum-deep)}

@media (max-width:760px){
  .ask-item{padding:16px 16px;border-radius:14px}
  .ask-q{font-size:16px}
  .wtb-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .wtb-price{display:block;margin-left:0;margin-top:3px}
}

/* ---------- the guide block on a vendor page  JC-LAZO-VENDORLINK-0917-001 ----------
   Three contextual links from every vendor page into the content clusters. Sits
   inside .vp, which is its own column, so it takes the vendor page's widths
   rather than the document column's. */
main .vp-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 34px}
main .vp-guides a{display:block;background:var(--card);border:1px solid var(--gold-line);border-radius:14px;
  padding:16px 18px;text-decoration:none;box-shadow:var(--shadow-card);
  transition:transform var(--t-release) var(--ease-out),border-color var(--t-hover) var(--ease-std),box-shadow var(--t-release) var(--ease-out)}
main .vp-guides b{display:block;font:600 15.5px var(--sans);color:var(--plum-deep);margin-bottom:4px}
main .vp-guides span{display:block;font-size:13px;color:var(--muted);line-height:1.45;
  font-feature-settings:"lnum" 1}
main .vp-guides a:active{transform:scale(.985);transition-duration:var(--t-press)}
@media (hover:hover) and (pointer:fine){
  main .vp-guides a:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow-card-hover)}
}
@media (max-width:760px){
  main .vp-guides{grid-template-columns:1fr;gap:10px;margin-bottom:26px}
}

/* ---------- guest guides  JC-LAZO-GUEST-0917-001 ----------
   The verdict block is the whole design idea of this cluster: someone searching
   "can I wear black to a wedding" gets the answer before any heading, in a box
   they cannot miss. Everything else on the page is for the people who want to
   know why. */
.verdict{background:linear-gradient(180deg,#FFFDF9,#FFFBF2);border:1px solid var(--gold);
  border-left:4px solid var(--gold);border-radius:16px;padding:22px 26px;margin:6px 0 34px;
  box-shadow:var(--shadow-card)}
.verdict-tag{margin:0 0 8px;font:600 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink)}
.verdict-text{margin:0;font-size:18px;line-height:1.55;color:var(--plum-deep)}

/* the at-a-glance table: situation on the left, what to do on the right */
.quick-table{margin:20px 0 10px;display:grid;grid-template-columns:auto 1fr;gap:0}
.quick-table dt{grid-column:1;font:600 14.5px var(--sans);color:var(--plum-deep);
  padding:11px 20px 11px 0;border-bottom:1px solid var(--gold-faint);white-space:nowrap}
.quick-table dd{grid-column:2;margin:0;font-size:15px;color:#4A4150;line-height:1.55;
  padding:11px 0;border-bottom:1px solid var(--gold-faint)}
.quick-table dt:last-of-type,.quick-table dd:last-of-type{border-bottom:0}

@media (max-width:760px){
  .verdict{padding:18px 18px;margin-bottom:26px}
  .verdict-text{font-size:16.5px}
  /* the two-column table cannot hold at phone width - stack it */
  .quick-table{grid-template-columns:minmax(0,1fr)}
  .quick-table dt{grid-column:1;white-space:normal;padding:12px 0 2px;border-bottom:0}
  .quick-table dd{grid-column:1;padding:0 0 12px}
}

/* JC-LAZO-HOTELS-0921-002: hotels near the venue */
.v-hotels{margin-top:34px}
.v-hotels-sub{color:var(--muted);font-size:15px;margin:6px 0 14px}
.v-hotel-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--gold-line)}
.v-hotel-list li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--gold-line);font-size:15px}
.v-hotel-list b{font-weight:600;color:var(--ink)}
.v-hotel-stars{font-size:12px;color:var(--gold-ink);font-weight:700;margin-left:8px}
.v-hotel-meta{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.v-hotel-links{display:flex;gap:14px;white-space:nowrap;font-size:13.5px}
.v-hotel-links a{color:var(--plum);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}
.v-hotels-credit{font-size:12px;color:var(--muted);margin:12px 0 0}
@media(max-width:640px){.v-hotel-list li{flex-direction:column;gap:6px}}

/* ---------- app install bar - JC-LAZO-APPBAR-1003 ----------
   lazo.js adds it on Android phones and on iOS browsers other than Safari (Safari
   already shows Apple's smart banner from the apple-itunes-app meta). Dismiss = 30 days. */
.lz-appbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 8px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));border-radius:18px;background:rgba(46,21,48,.97);color:var(--ivory);
  border:1px solid rgba(217,183,124,.45);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transform:translateY(calc(100% + 16px));
  transition:transform .35s var(--ease-out,ease)}
.lz-appbar.show{transform:none}
.lz-appbar img{width:44px;height:44px;border-radius:11px;flex:none}
.lz-appbar .t{flex:1;min-width:0;line-height:1.25}
.lz-appbar .t b{display:block;font-size:14px;font-weight:600}
.lz-appbar .t span{display:block;font-size:12px;color:rgba(250,246,240,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lz-appbar .go{flex:none;background:linear-gradient(180deg,#E3C78F,var(--gold));color:var(--plum-deep);font-weight:700;font-size:14px;text-decoration:none;padding:9px 18px;border-radius:999px}
.lz-appbar .x{flex:none;background:none;border:0;color:rgba(250,246,240,.6);font-size:24px;line-height:1;padding:4px 6px;cursor:pointer;font-family:inherit}
html.has-appbar body{padding-bottom:84px}

/* ---------- scroll motion - JC-LAZO-MOTION-1003 ----------
   lazo.js (item 8) drives these with transforms only, and only under html.motion. */
/* photo heroes: lazo.js moves the picture into .hero-bg, which scrolls slower than the page */
.hero-bg{position:absolute;left:0;right:0;top:-14%;bottom:-14%;background-size:cover;background-position:center 32%;
  transform:translateY(var(--hy,0px));will-change:transform;z-index:0}
.hero::before{z-index:1}
.hero-inner{z-index:2}
/* pictures inside revealing cards settle from a slight zoom */
html.motion .reveal .ph,html.motion .reveal.frame img,html.motion .ww.reveal .demo img,html.motion .ap-f.reveal .im img,html.motion .fc.reveal .mk img{
  transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
html.motion .reveal.in-view .ph,html.motion .reveal.frame.in-view img,html.motion .ww.reveal.in-view .demo img,html.motion .ap-f.reveal.in-view .im img,html.motion .fc.reveal.in-view .mk img{transform:none}
/* two-column stances slide in from their own sides */
@keyframes riseL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes riseR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
html.motion .ap-vs>div:first-child.reveal.in-view,html.motion .stance .cols>.them.reveal.in-view,html.motion .why-cols>.them.reveal.in-view{animation-name:riseL}
html.motion .ap-vs>div:last-child.reveal.in-view,html.motion .stance .cols>div:last-child.reveal.in-view,html.motion .why-cols>div:last-child.reveal.in-view{animation-name:riseR}
/* the app page hero: phones rise in, then drift at three speeds (--py from lazo.js) */
@keyframes apUp{from{opacity:0;transform:translateY(calc(var(--base,0px) + 56px))}to{opacity:1;transform:translateY(calc(var(--base,0px) + var(--py,0px)))}}
.ap-shots img{--base:0px;--py:0px;transform:translateY(calc(var(--base) + var(--py)));will-change:transform}
.ap-shots img:nth-child(2){--base:-26px;transform:translateY(calc(var(--base) + var(--py)))}
html.motion .ap-shots img{animation:apUp 1.1s var(--ease-out) both}
html.motion .ap-shots img:nth-child(1){animation-delay:.25s}
html.motion .ap-shots img:nth-child(2){animation-delay:.1s}
html.motion .ap-shots img:nth-child(3){animation-delay:.4s}
/* JC-LAZO-MOTION-1016 (lazo.js item 11) */
/* a. home app phones float at three speeds */
html.motion .apphome .shots img{transform:translateY(var(--sy,0px));will-change:transform}
html.motion .apphome .shots img:nth-child(2){transform:translateY(calc(-22px + var(--sy,0px)))}
/* c. category tiles tilt in, one after another */
html.motion .tile-grid > .reveal{opacity:0}
html.motion .tile-grid > .reveal.in-view{opacity:1;animation:tileIn .8s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*95ms)}
@keyframes tileIn{from{opacity:0;transform:perspective(900px) rotateX(14deg) translateY(36px) scale(.94)}to{opacity:1;transform:none}}
/* d. the feature cards stack: sticky, and a covered card settles back */
html.motion .ftg.stack{align-items:start}
html.motion .ftg.stack > .fc{position:sticky;top:calc(var(--hh,64px) + 18px);transform-origin:50% 0;
  transform:scale(calc(1 - var(--cov,0) * .07));filter:brightness(calc(1 - var(--cov,0) * .18));
  box-shadow:0 -14px 40px -24px rgba(36,14,34,.45)}
html.motion .ftg.stack > .fc.reveal.in-view{animation-name:stackIn}
@keyframes stackIn{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
html.motion .ftg.stack > .fc:hover{transform:scale(calc(1 - var(--cov,0) * .07)) translateY(-3px)}
html.motion .ap-wrap>div:first-child>*{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--i,0)*90ms)}
.ap-wrap>div:first-child>:nth-child(1){--i:0}.ap-wrap>div:first-child>:nth-child(2){--i:1}.ap-wrap>div:first-child>:nth-child(3){--i:2}
.ap-wrap>div:first-child>:nth-child(4){--i:3}.ap-wrap>div:first-child>:nth-child(5){--i:4}.ap-wrap>div:first-child>:nth-child(6){--i:5}.ap-wrap>div:first-child>:nth-child(7){--i:6}
.ap-wrap>div:first-child{will-change:transform,opacity}
.ap-hero::before{will-change:transform;transform:translateY(var(--gy,0px))}
html.motion .ap-rail img{transition:transform .5s var(--ease-out)}
.ap-rail figure:hover img{transform:translateY(-6px)}

/* ---------- cookie notice - JC-LAZO-CONSENT-1003 (lazo.js item 9) ---------- */
.lz-consent{position:fixed;left:16px;bottom:16px;z-index:70;max-width:390px;background:rgba(46,21,48,.97);color:var(--ivory);
  border:1px solid rgba(217,183,124,.45);border-radius:18px;padding:16px 18px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  transform:translateY(calc(100% + 24px));opacity:0;transition:transform .4s var(--ease-out,ease),opacity .4s var(--ease-out,ease)}
.lz-consent.show{transform:none;opacity:1}
.lz-consent p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:rgba(250,246,240,.85)}
.lz-consent p b{color:var(--ivory);font-weight:600}
.lz-consent p a{color:var(--gold)}
.lz-consent .b{display:flex;gap:10px}
.lz-consent button{font:600 14px var(--sans);border-radius:999px;padding:9px 18px;cursor:pointer;border:1px solid rgba(217,183,124,.6)}
.lz-consent .yes{background:linear-gradient(180deg,#E3C78F,var(--gold));color:var(--plum-deep);border-color:transparent}
.lz-consent .no{background:none;color:var(--ivory)}
.lz-consent .no:hover{border-color:var(--gold)}
@media(max-width:480px){.lz-consent{left:10px;right:10px;max-width:none;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* JC-LAZO-SITEFACTS-1013: "From their website" block on unclaimed vendor pages */
main .v-site-q{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--gold);background:rgba(0,0,0,.025);border-radius:0 10px 10px 0;font-family:var(--serif,Georgia,serif);font-size:16px;line-height:1.5;color:var(--ink)}
main .v-site-q cite{display:block;margin-top:6px;font-family:inherit;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
main .v-site-social{margin:16px 0 0;font-size:13.5px;color:var(--ink)}
main .v-site-social a{color:var(--plum);font-weight:600;border-bottom:1px solid var(--gold);text-decoration:none}
main .v-site .geo-note{margin-top:12px}

/* ---------- night theme  JC-LAZO-NIGHT-1014-001 ----------
   Light is the default for everyone. Night is opt-in: the header switch
   (JC-LAZO-NIGHT-1014-002) sets html[data-theme=dark] and remembers it in
   localStorage; base.html applies it in <head> before first paint, so there
   is no flash. Deep plum, not grey-black:
   the page is night plum, cards sit a step lighter, the plum bands, hero and
   footer go a step DEEPER so they still read as bands, and gold is untouched.

   The trick is in the tokens. Four of them change job in the dark:
     --plum       link/accent TEXT -> a soft orchid that reads on plum
     --plum-deep  heading TEXT     -> near-ivory
     --ivory      stays ivory, because it is the text colour on every dark band;
                  the page background moves to --bg instead
     --card       the surface a step above the page
   So the handful of rules that paint a BACKGROUND with --plum/--plum-deep, and
   the gold buttons that use --plum-deep as their TEXT, are pinned back below.
   Everything here is additive: light mode is byte-for-byte what it was.
   Every rule hangs off html[data-theme=dark] inside :where(), so it keeps the
   specificity it was written with; the `html ...` rules carry one extra element
   to outrank a page's own <style> block (category, city guide, home). */

  html[data-theme=dark]{
    color-scheme:dark;
    --bg:#1C0E1E; --card:#291628; --card-2:#321C31; --night:#130914;
    --ink:#EEE5EC; --ink-2:#D8CCD6; --muted:#B3A5B8; --faint:#7E6F84;
    --plum:#DDB5D7; --plum-deep:#F5EBF1; --plum-btn:#6A3A66; --plum-btn-hover:#7B4677;
    --gold-ink:#E2C590; --gold-line:#4A3247; --gold-faint:#3A2438;
    --glass:#291628; --glass-border:#4A3247;
    --shadow-card:0 1px 2px rgba(0,0,0,.35),0 20px 40px -18px rgba(0,0,0,.7);
    --shadow-card-hover:0 2px 4px rgba(0,0,0,.4),0 30px 56px -18px rgba(0,0,0,.85);
  }
  :where(html[data-theme=dark]) body{background:var(--bg)}
  :where(html[data-theme=dark]) ::selection{background:var(--plum-btn);color:#FAF6F0}

  /* header: frosted night instead of frosted ivory; the plum lockup swaps to ivory in base.html */
  :where(html[data-theme=dark]) .site-head{background:rgba(28,14,30,.82)}
  :where(html[data-theme=dark]) .site-head.scrolled{background:rgba(28,14,30,.9);box-shadow:0 1px 0 rgba(0,0,0,.3),0 12px 32px -16px rgba(0,0,0,.6)}
  html:where([data-theme=dark]) .site-nav a.on{color:var(--plum)}
  :where(html[data-theme=dark]) .site-nav a.nav-cta,:where(html[data-theme=dark]) .nav-cta{background:var(--plum-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.4)}
  :where(html[data-theme=dark]) .nav-cta:hover{background:var(--plum-btn-hover)}

  /* the finder floats on the hero photo: a night card, not an ivory one */
  :where(html[data-theme=dark]) .finder{background:var(--card);border-color:rgba(217,183,124,.35)}
  :where(html[data-theme=dark]) .finder select{color:var(--ink);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23D9B77C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  :where(html[data-theme=dark]) .finder select option{background:var(--card);color:var(--ink)}
  :where(html[data-theme=dark]) .finder select:hover,:where(html[data-theme=dark]) .finder select:focus{background-color:rgba(250,246,240,.06)}
  :where(html[data-theme=dark]) .finder .btn-gold,:where(html[data-theme=dark]) .finder .btn-gold:hover{background:var(--plum-btn);color:#FAF6F0}
  :where(html[data-theme=dark]) .finder .btn-gold:hover{background:var(--plum-btn-hover)}

  /* gold buttons keep dark plum lettering */
  :where(html[data-theme=dark]) .btn-gold,:where(html[data-theme=dark]) .badge-verified,:where(html[data-theme=dark]) .foot-cta,:where(html[data-theme=dark]) .cb-tag,:where(html[data-theme=dark]) .lz-appbar .go,:where(html[data-theme=dark]) .lz-consent .yes,:where(html[data-theme=dark]) main .pill-gold,:where(html[data-theme=dark]) main .p-tag{color:#3D1C3B}
  :where(html[data-theme=dark]) .badge-muted{border-color:var(--gold-line);color:var(--muted)}
  :where(html[data-theme=dark]) .badge-new{background:#3D1C3B;color:var(--gold);border-color:rgba(217,183,124,.5)}

  /* bands keep a hairline so deep-on-deep still has an edge */
  :where(html[data-theme=dark]) .band-plum,:where(html[data-theme=dark]) .hero:not(.hero-photo){box-shadow:inset 0 1px 0 rgba(217,183,124,.14),inset 0 -1px 0 rgba(217,183,124,.14)}
  :where(html[data-theme=dark]) .claim-strip{box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
  :where(html[data-theme=dark]) .tile:hover{box-shadow:0 2px 4px rgba(0,0,0,.4),0 30px 56px -18px rgba(0,0,0,.85)}

  /* body text that was set in fixed dark greys */
  :where(html[data-theme=dark]) .faq p,:where(html[data-theme=dark]) .prose p,:where(html[data-theme=dark]) .cb-detail,:where(html[data-theme=dark]) .cost-drivers dd,:where(html[data-theme=dark]) .cost-ask li,:where(html[data-theme=dark]) .ask-l,:where(html[data-theme=dark]) .wtb-note,:where(html[data-theme=dark]) .quick-table dd,:where(html[data-theme=dark]) main .v-pack-card p,:where(html[data-theme=dark]) main .v-addons,:where(html[data-theme=dark]) main .v-owner-bio{color:var(--ink-2)}
  :where(html[data-theme=dark]) .prose .lede{color:var(--ink)}
  :where(html[data-theme=dark]) main .v-socials span{color:var(--muted)}
  :where(html[data-theme=dark]) .cf-opt{color:var(--faint)}
  :where(html[data-theme=dark]) main .vp-crumb span,:where(html[data-theme=dark]) main .v-cal-grid .pd{color:var(--faint)}
  :where(html[data-theme=dark]) main .v-review-stars span{color:var(--gold-line)}

  /* surfaces that were fixed light colours */
  :where(html[data-theme=dark]) main .v-gal a,:where(html[data-theme=dark]) main .geo-plain a{background:var(--card-2)}
  :where(html[data-theme=dark]) main .v-more button{background:var(--card);color:var(--plum)}
  :where(html[data-theme=dark]) main .v-more button:hover{background:var(--card-2)}
  :where(html[data-theme=dark]) .cost-band.is-typical,:where(html[data-theme=dark]) .verdict{background:linear-gradient(180deg,var(--card),var(--card-2))}
  :where(html[data-theme=dark]) main .vp-h2{border-bottom-color:var(--gold-faint)}
  :where(html[data-theme=dark]) main .v-site-q{background:rgba(250,246,240,.04)}
  :where(html[data-theme=dark]) main .vp-hero{background-color:#3D1C3B}
  :where(html[data-theme=dark]) main .v-cal-grid .bk{background:var(--plum-btn);color:#FAF6F0}
  :where(html[data-theme=dark]) .cost-ask li::before{background:var(--plum-btn);color:#FAF6F0}
  :where(html[data-theme=dark]) main .v-soc::before{background:var(--plum)}
  :where(html[data-theme=dark]) main .v-soc:hover{background:var(--plum-btn);color:#FAF6F0}
  :where(html[data-theme=dark]) main .v-logo.is-bg.is-light{border-color:rgba(217,183,124,.5)}

  /* form fields */
  :where(html[data-theme=dark]) .cf-field input,:where(html[data-theme=dark]) .cf-field select,:where(html[data-theme=dark]) .cf-field textarea,:where(html[data-theme=dark]) .ea-form input[type=email]{background-color:var(--bg);border-color:var(--gold-line);color:var(--ink)}
  :where(html[data-theme=dark]) .cf-field input:focus,:where(html[data-theme=dark]) .cf-field select:focus,:where(html[data-theme=dark]) .cf-field textarea:focus{background-color:var(--card-2)}
  :where(html[data-theme=dark]) .cf-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23D9B77C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  :where(html[data-theme=dark]) .cf-field input::placeholder,:where(html[data-theme=dark]) .cf-field textarea::placeholder{color:var(--faint)}
  :where(html[data-theme=dark]) .cf-msg.ok{color:#9FDCC2;background:rgba(46,139,107,.14);border-color:rgba(126,200,170,.35)}
  :where(html[data-theme=dark]) .cf-msg.err{color:#F2B4AE;background:rgba(180,69,63,.14);border-color:rgba(230,130,120,.35)}

  @media (hover:hover) and (pointer:fine){
    html[data-theme=dark]{scrollbar-color:var(--plum-btn) var(--bg)}
    :where(html[data-theme=dark]) ::-webkit-scrollbar-track,:where(html[data-theme=dark])::-webkit-scrollbar-track{background:var(--bg)}
    :where(html[data-theme=dark]) ::-webkit-scrollbar-thumb,:where(html[data-theme=dark])::-webkit-scrollbar-thumb{background:var(--plum-btn);border-color:var(--bg)}
  }

  /* ---- category page (category.html carries its own <style>) ---- */
  html:where([data-theme=dark]) .cat-tools,html:where([data-theme=dark]) #vnone,html:where([data-theme=dark]) .vc2,html:where([data-theme=dark]) .ch-price{background:var(--card)}
  html:where([data-theme=dark]) .cat-tools{box-shadow:var(--shadow-card)}
  html:where([data-theme=dark]) .cat-chip,html:where([data-theme=dark]) .ch-travel{background:var(--card-2);color:var(--plum)}
  html:where([data-theme=dark]) .cat-intro2,html:where([data-theme=dark]) #vcount,html:where([data-theme=dark]) #vnone,html:where([data-theme=dark]) .vc2-meta,html:where([data-theme=dark]) .vc2-score i{color:var(--muted)}
  html:where([data-theme=dark]) .vc2-bio{color:var(--faint)}
  html:where([data-theme=dark]) #vsearch{background-color:var(--bg);color:var(--ink)}
  html:where([data-theme=dark]) #vsearch:focus{background-color:var(--card-2);border-color:var(--gold)}
  html:where([data-theme=dark]) #vsearch::placeholder{color:var(--faint)}
  html:where([data-theme=dark]) #vclear,html:where([data-theme=dark]) #vnone b,html:where([data-theme=dark]) .vc2-name,html:where([data-theme=dark]) .vc2-score b,html:where([data-theme=dark]) .no-ads b,html:where([data-theme=dark]) .ch-price{color:var(--plum)}
  html:where([data-theme=dark]) .fbar button{color:var(--plum);background:rgba(250,246,240,.04)}
  html:where([data-theme=dark]) .fbar button.on{background:var(--plum-btn);color:#FAF6F0;border-color:var(--plum-btn)}
  html:where([data-theme=dark]) .vc2:hover{box-shadow:var(--shadow-card-hover)}
  html:where([data-theme=dark]) .no-ads{color:var(--ink-2);background:var(--card)}
  html:where([data-theme=dark]) .vc2-score em{color:var(--gold-ink)}
  html:where([data-theme=dark]) .ch-new{background:var(--card-2);color:var(--muted)}
  html:where([data-theme=dark]) .ch-also{background:var(--card-2);color:var(--muted);border-color:var(--gold-line)}
  html:where([data-theme=dark]) .ch-rev{background:rgba(46,139,107,.16);color:#9FDCC2}

  /* ---- city guide (_city_guide.html) ---- */
  html:where([data-theme=dark]) .cg h2,html:where([data-theme=dark]) .cg-faq summary,html:where([data-theme=dark]) .cu-foot b{color:var(--plum-deep)}
  html:where([data-theme=dark]) .cg h3,html:where([data-theme=dark]) .cg-card a,html:where([data-theme=dark]) .cg-pick a,html:where([data-theme=dark]) .cu-name,html:where([data-theme=dark]) .cu-foot a{color:var(--plum)}
  html:where([data-theme=dark]) .cg-lead,html:where([data-theme=dark]) .cg-card p,html:where([data-theme=dark]) .cg-how,html:where([data-theme=dark]) .cg-faq p,html:where([data-theme=dark]) .cu p{color:var(--ink-2)}
  html:where([data-theme=dark]) .cg-sub,html:where([data-theme=dark]) .cg-pick small,html:where([data-theme=dark]) .cu-meta,html:where([data-theme=dark]) .cu-foot{color:var(--muted)}
  html:where([data-theme=dark]) .cg-card .k,html:where([data-theme=dark]) .cg-tbl th,html:where([data-theme=dark]) .cg-pick em,html:where([data-theme=dark]) .cu-head small,html:where([data-theme=dark]) .cu-meta em,html:where([data-theme=dark]) .cu-ask .k{color:var(--gold-ink)}
  html:where([data-theme=dark]) .cg-card,html:where([data-theme=dark]) .cg-pick,html:where([data-theme=dark]) .cg-faq details,html:where([data-theme=dark]) .cu,html:where([data-theme=dark]) .cg-how,html:where([data-theme=dark]) .cu-ask{background:var(--card)}
  html:where([data-theme=dark]) .cg-tbl th,html:where([data-theme=dark]) .cg-tbl td{border-bottom-color:var(--gold-line)}
  html:where([data-theme=dark]) .cg-links a,html:where([data-theme=dark]) .cu-tags span{background:var(--card-2);color:var(--plum)}
  html:where([data-theme=dark]) .cg-links a:hover{background:var(--plum-btn);color:#FAF6F0}
  html:where([data-theme=dark]) .cg-pick:hover,html:where([data-theme=dark]) .cu:hover{box-shadow:var(--shadow-card-hover)}

  /* ---- home / metro pieces (home.html, metro.html) ---- */
  html:where([data-theme=dark]) .msg.u{background:var(--card-2);color:var(--ink)}
  html:where([data-theme=dark]) .stance .them h3,html:where([data-theme=dark]) .stance .them p{color:var(--faint)}
  html:where([data-theme=dark]) .vf:hover{box-shadow:var(--shadow-card-hover)}
  html:where([data-theme=dark]) .vfc .chk{background:rgba(46,139,107,.16);color:#9FDCC2}
  html:where([data-theme=dark]) .apphome .shots img{box-shadow:0 28px 50px -30px rgba(0,0,0,.8)}
  html:where([data-theme=dark]) .ft .all span{background:var(--card)}
  /* a QR code needs its light quiet zone to scan */
  html:where([data-theme=dark]) .apphome .qr img{background:#fff;padding:4px}
  html:where([data-theme=dark]) .fc:hover{box-shadow:var(--shadow-card-hover)}

  /* ---- metro websites page ---- */
  html:where([data-theme=dark]) .wwh .cta{background:var(--plum-btn)}
  html:where([data-theme=dark]) .wwc a{background:var(--card)}


/* night theme, part two: pages whose own <style> blocks hard-code the light palette.
   App mockups (.mk) are pictures of the app, which is light inside - they get the
   light tokens back rather than being repainted. */

  :where(html[data-theme=dark]) .mk,:where(html[data-theme=dark]) .wl-tpl .screen{--ink:#241E2B;--plum:#52284F;--plum-deep:#3D1C3B;--muted:#6B5F72;--gold-ink:#8A6A2F;--gold-line:#E6D6B8;--gold-faint:#EADFCB;--card:#FFFDF9;--ivory:#FAF6F0}

  /* home features + vendor features sections */
  html:where([data-theme=dark]) .ft,html:where([data-theme=dark]) .fvf{background:var(--bg)}
  html:where([data-theme=dark]) .fvf .head h2,html:where([data-theme=dark]) .fvc h3{color:var(--plum-deep)}
  html:where([data-theme=dark]) .fvf .head h2 em{color:var(--gold-ink)}
  html:where([data-theme=dark]) .fvf .head p,html:where([data-theme=dark]) .fvc p,html:where([data-theme=dark]) .fvf .key{color:var(--muted)}
  html:where([data-theme=dark]) .fvc{background:var(--card);border-color:var(--gold-line)}
  html:where([data-theme=dark]) .fvc:hover{box-shadow:var(--shadow-card-hover)}
  html:where([data-theme=dark]) .fvf .all span,html:where([data-theme=dark]) .ft .all span{background:var(--card);border-color:var(--gold-line);color:var(--plum)}
  html:where([data-theme=dark]) .fvc .tg{background:rgba(46,139,107,.16);color:#9FDCC2}
  html:where([data-theme=dark]) .fvc .tg.pro{background:rgba(217,183,124,.16);color:var(--gold-ink)}
  html:where([data-theme=dark]) .vfc .n{background:var(--plum-btn)}
  html:where([data-theme=dark]) .msg.j{background:#3D1C3B}
  /* photo frames that fall back to --plum-deep while the picture loads */
  html:where([data-theme=dark]) .vf .ph,html:where([data-theme=dark]) .ww .demo,html:where([data-theme=dark]) .ap-f .im,html:where([data-theme=dark]) .wl-f .im{background-color:#3D1C3B}

  /* buttons and dots painted with --plum */
  html:where([data-theme=dark]) .wl-card .go,html:where([data-theme=dark]) .wl-steps li::before,html:where([data-theme=dark]) .wl-card .ch i{background:var(--plum-btn);color:#FAF6F0}
  html:where([data-theme=dark]) .wl-card .ch i{color:var(--gold)}
  html:where([data-theme=dark]) .wl-card .go:hover{background:var(--plum-btn-hover)}
  html:where([data-theme=dark]) .mk .av{background:#52284F}

  /* welcome funnels */
  html:where([data-theme=dark]) .wl-card{background:rgba(41,22,40,.97)}
  html:where([data-theme=dark]) .wl-card input,html:where([data-theme=dark]) .wl-card select{background-color:var(--bg);color:var(--ink)}
  html:where([data-theme=dark]) .wl-card .wl-steps li{background:var(--card-2)}
  html:where([data-theme=dark]) .wl-f:hover{box-shadow:var(--shadow-card-hover)}
  html:where([data-theme=dark]) .wl-vs .ls.them{background:#231323;border-color:var(--gold-line)}
  html:where([data-theme=dark]) .wl-vs .ls.them .tag{background:var(--card-2);color:var(--muted)}
  html:where([data-theme=dark]) .wl-vs .ls.them p,html:where([data-theme=dark]) .wl-vs .ls.them h3{color:var(--faint)}

  /* app page */
  html:where([data-theme=dark]) .ap-vs .them li::before{background:var(--card-2);color:var(--faint)}
  html:where([data-theme=dark]) .ap-vs .them li,html:where([data-theme=dark]) .ap-vs .them h3{color:var(--faint)}

  /* comparison pages + the merger news page */
  html:where([data-theme=dark]) .cmp,html:where([data-theme=dark]) .nz-facts{background:rgba(250,246,240,.03)}
  html:where([data-theme=dark]) .cmp td:first-child,html:where([data-theme=dark]) .nz-card h3{color:var(--plum)}
  html:where([data-theme=dark]) .cmp .yes{color:#7FD1AE}
  html:where([data-theme=dark]) .cmp .meh,html:where([data-theme=dark]) .cmp-note,html:where([data-theme=dark]) .tm-note,html:where([data-theme=dark]) .nz-note{color:var(--muted)}
  html:where([data-theme=dark]) .nz-card{background:var(--card);box-shadow:var(--shadow-card)}

  /* city guide question list, why-lazo */
  html:where([data-theme=dark]) .cu-ask ol,html:where([data-theme=dark]) .why-list p,html:where([data-theme=dark]) .score p{color:var(--ink-2)}
  html:where([data-theme=dark]) .why-cols .them h3,html:where([data-theme=dark]) .why-cols .them p{color:var(--faint)}

  /* couples finder, license pages, metro websites */
  html:where([data-theme=dark]) .cs input,html:where([data-theme=dark]) .mls input,html:where([data-theme=dark]) .lsc input{background-color:var(--bg);color:var(--ink)}
  html:where([data-theme=dark]) .cr a,html:where([data-theme=dark]) .lsf div,html:where([data-theme=dark]) .lsb .note,html:where([data-theme=dark]) .lsc,html:where([data-theme=dark]) .lso a{background:var(--card)}

  /* ---- for-vendors page (pages/for-vendors.html) ---- */
  html:where([data-theme=dark]) .fv{color:var(--ink)}
  html:where([data-theme=dark]) .fv-sec.alt{background:#170B18}
  html:where([data-theme=dark]) .fv-kick,html:where([data-theme=dark]) .fv-pro-tag,html:where([data-theme=dark]) .fv-tier h3,html:where([data-theme=dark]) .fv-claim label,html:where([data-theme=dark]) .fv-faq summary:after{color:var(--gold-ink)}
  html:where([data-theme=dark]) .fv-h2,html:where([data-theme=dark]) .fv-tier .amt,html:where([data-theme=dark]) .fv-card h3,html:where([data-theme=dark]) .fv-founder blockquote,html:where([data-theme=dark]) .fv-founder .sign b,html:where([data-theme=dark]) .fv-step h3,html:where([data-theme=dark]) .fv-faq summary,html:where([data-theme=dark]) .fv-claim .named-h{color:var(--plum-deep)}
  html:where([data-theme=dark]) .fv-lead,html:where([data-theme=dark]) .fv-tier li,html:where([data-theme=dark]) .fv-roi,html:where([data-theme=dark]) .fv-card p,html:where([data-theme=dark]) .fv-founder .sign,html:where([data-theme=dark]) .fv-step p,html:where([data-theme=dark]) .fv-faq p,html:where([data-theme=dark]) .fv-vs td:first-child,html:where([data-theme=dark]) .fv-claim .named-p{color:var(--ink-2)}
  html:where([data-theme=dark]) .fv-tier .who,html:where([data-theme=dark]) .fv-tier .soon,html:where([data-theme=dark]) .fv-tier .amt small,html:where([data-theme=dark]) .fv-tier .per,html:where([data-theme=dark]) .fv-claim .note{color:var(--muted)}
  html:where([data-theme=dark]) .fv-claim .note a{color:var(--plum)}
  html:where([data-theme=dark]) .fv-tier,html:where([data-theme=dark]) .fv-card,html:where([data-theme=dark]) .fv-founder,html:where([data-theme=dark]) .fv-step,html:where([data-theme=dark]) .fv-faq details,html:where([data-theme=dark]) .fv-vs table{background:var(--card);border-color:var(--gold-line)}
  html:where([data-theme=dark]) .fv-tier.hot{border-color:var(--gold);box-shadow:var(--shadow-card-hover)}
  html:where([data-theme=dark]) .fv-tier .tcta{background:var(--plum-btn)}
  html:where([data-theme=dark]) .fv-vs{box-shadow:var(--shadow-card-hover)}
  html:where([data-theme=dark]) .fv-vs th,html:where([data-theme=dark]) .fv-vs td{border-bottom-color:var(--gold-line)}
  html:where([data-theme=dark]) .fv-vs .bad{color:#E39A78}
  html:where([data-theme=dark]) .fv-vs .good{color:#7FD1AE}
  html:where([data-theme=dark]) .fv-claim{background:var(--card)}
  html:where([data-theme=dark]) .fv-sub{background:rgba(28,14,30,.92);border-bottom-color:var(--gold-line)}
  html:where([data-theme=dark]) .fv-sub a{color:var(--muted)}
  html:where([data-theme=dark]) .fv-sub a:hover,html:where([data-theme=dark]) .fv-sub a.on{color:var(--ink);background:var(--card-2)}
  html:where([data-theme=dark]) .fv-sub a.go{background:var(--gold);color:#2E1530}
  html:where([data-theme=dark]) .fvf .kf{background:var(--card);border-color:var(--gold-line);color:var(--muted)}
  html:where([data-theme=dark]) .fvf .kf.on{background:var(--gold);border-color:var(--gold);color:#2E1530}
  html:where([data-theme=dark]) .fv-tier.full{border-color:var(--gold)}
  html:where([data-theme=dark]) .fv-more a{color:var(--plum)}
  html:where([data-theme=dark]) .hm-go{color:rgba(250,246,240,.86)}
  html:where([data-theme=dark]) .typing{background:var(--card-2)}
  html:where([data-theme=dark]) .fv-claim input{background-color:var(--bg);color:var(--ink)}
  html:where([data-theme=dark]) .fv-ic,html:where([data-theme=dark]) .fv-tag.pro{background:#3D1C3B}
  html:where([data-theme=dark]) .fv-founder .photo{border-color:var(--gold-line)}


/* ---------- the night switch  JC-LAZO-NIGHT-1014-002 ----------
   A small pill in the header. Day: an ivory track, a gold sun. Night: the track
   goes deep plum with a few stars and the knob slides across as an ivory moon.
   The knob travels on the same fast-out, no-bounce easing as everything else;
   the colour change across the page is a short cross-fade (html.theme-anim,
   added for 600ms by lazo.js), and Reduce Motion skips both. */
.lk-dark{display:none}
html[data-theme=dark] .lk-light{display:none}
html[data-theme=dark] .lk-dark{display:block}
/* the switch takes ~60px of the header; on the narrowest phones the lockup scales down evenly rather than squashing */
.brand{min-width:0;flex:0 1 auto}
.brand-lockup{object-fit:contain;object-position:left center;max-width:100%}
.theme-sw{position:relative;flex:none;display:inline-block;width:56px;height:30px;padding:0;margin:0;cursor:pointer;border-radius:999px;
  border:1px solid var(--gold-line);background:linear-gradient(180deg,#FFFDF9,#F2E8DA);
  box-shadow:inset 0 1px 2px rgba(61,28,59,.10),0 1px 0 rgba(255,255,255,.7);
  -webkit-tap-highlight-color:transparent;transition:border-color var(--t-hover) var(--ease-std),transform var(--t-release) var(--ease-out)}
.theme-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s var(--ease-std);
  background:radial-gradient(1.2px 1.2px at 13px 9px,#FAF6F0 60%,transparent 70%),radial-gradient(1px 1px at 21px 20px,rgba(250,246,240,.85) 60%,transparent 70%),
    radial-gradient(.9px .9px at 8px 18px,rgba(250,246,240,.6) 60%,transparent 70%),radial-gradient(1px 1px at 27px 11px,rgba(217,183,124,.9) 60%,transparent 70%),
    linear-gradient(180deg,#2A1529,#170B18)}
.theme-sw:hover{border-color:var(--gold)}
.theme-sw:active{transform:scale(.95);transition-duration:var(--t-press)}
.theme-sw .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#E8CD97,#D9B77C);box-shadow:0 1px 3px rgba(61,28,59,.28),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .5s var(--ease-out),background .45s var(--ease-std),box-shadow .45s var(--ease-std)}
.theme-sw:hover .knob{box-shadow:0 0 0 4px rgba(217,183,124,.22),0 1px 3px rgba(61,28,59,.28),inset 0 1px 0 rgba(255,255,255,.55)}
.theme-sw svg{grid-area:1/1;width:14px;height:14px;transition:transform .5s var(--ease-out),opacity .3s var(--ease-std)}
.theme-sw .i-sun{fill:none;stroke:#3D1C3B;stroke-width:1.9;stroke-linecap:round}
.theme-sw .i-moon{fill:#52284F;opacity:0;transform:rotate(-70deg) scale(.6)}
html[data-theme=dark] .theme-sw{border-color:rgba(217,183,124,.45);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
html[data-theme=dark] .theme-sw::before{opacity:1}
html[data-theme=dark] .theme-sw .knob{transform:translateX(26px);background:linear-gradient(180deg,#FBF6F1,#E9DCE4);
  box-shadow:0 0 10px rgba(250,246,240,.28),0 1px 3px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.8)}
html[data-theme=dark] .theme-sw:hover .knob{box-shadow:0 0 0 4px rgba(250,246,240,.12),0 0 12px rgba(250,246,240,.35),0 1px 3px rgba(0,0,0,.5)}
html[data-theme=dark] .theme-sw .i-sun{opacity:0;transform:rotate(90deg) scale(.6)}
html[data-theme=dark] .theme-sw .i-moon{opacity:1;transform:none}
@media (max-width:760px){.theme-sw{width:50px;height:28px}.theme-sw .knob{width:20px;height:20px}html[data-theme=dark] .theme-sw .knob{transform:translateX(22px)}}
@media (prefers-reduced-motion:no-preference){
  html.theme-anim body,html.theme-anim body *:not(.theme-sw):not(.theme-sw *){transition:background-color .45s var(--ease-std),color .45s var(--ease-std),border-color .45s var(--ease-std),fill .45s var(--ease-std)!important}
}