:root{
  --ink:#213045; --ink900:#16202E; --ink700:#283A50; --ink600:#344964; --ink500:#4A5F7D;
  --ink400:#6C7F99; --ink300:#9CAABE; --ink200:#C5CEDA; --ink100:#E2E7ED; --ink50:#F2F4F7;
  --gold:#C08A2E; --gold5:#D6A648; --gold1:#F7EEDC;
  --ok:#17705A; --okbg:#E2EFEA; --bad:#A62F1E; --badbg:#F5E4E0; --warn:#7A5714;
  --paper:#FFFFFF; --wash:#F4F6F7; --line:#D8DEE4; --muted:#61728A; --body:#2E3B4D;
}
:root[data-theme="dark"]{
  --paper:#141E2B; --wash:#1A2534; --line:#33435C; --muted:#94A3B8; --body:#D5DEE9;
  --ink:#E4E9F0; --ink900:#0E1620; --ink700:#C5CEDA; --ink600:#9CAABE; --ink500:#B2BFD1;
  --ink400:#8493A8; --ink300:#6C7F99; --ink200:#3D4E6B; --ink100:#2A3648; --ink50:#1E2938;
  --gold:#D6A648; --gold1:#332818; --ok:#5CC4A0; --okbg:#16352E; --bad:#E8836E; --badbg:#3A2019; --warn:#E0B160;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:"Public Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0}
h1{font-size:clamp(2.7rem,6.4vw,4.5rem)}
h2{font-size:clamp(1.9rem,4.1vw,2.8rem)}
h3{font-size:1.5rem}
p{margin:0 0 1.1em}
a{color:var(--ok)}
.eyebrow{font-size:.82rem;font-weight:700;color:var(--gold);margin:0 0 16px}

/* nav */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .wm{font-size:1.24rem;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.brand .wm i{font-style:normal;color:var(--gold)}
.navlinks{display:flex;gap:26px}
.navlinks a{font-size:.94rem;font-weight:500;color:var(--muted);text-decoration:none}
.navlinks a:hover{color:var(--ink)}
@media(max-width:760px){.navlinks{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:"Public Sans",sans-serif;font-size:1rem;font-weight:600;border-radius:7px;padding:14px 26px;min-height:48px;cursor:pointer;text-decoration:none;border:1px solid transparent}
.btn-go{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-sm{padding:10px 18px;min-height:44px;font-size:.92rem}

/* hero */
.hero{padding:88px 0 76px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero p.sub{font-size:1.24rem;color:var(--muted);max-width:44ch;margin:22px 0 32px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.trust{margin-top:26px;font-size:.88rem;color:var(--muted)}

.hero-card{position:relative;width:min(100%,280px);min-height:458px;margin:0 auto}
.hero-card-back{position:absolute;z-index:0;top:13px;left:28px;width:100%;aspect-ratio:638/1011;border:1px solid rgba(33,48,69,.16);
  overflow:hidden;border-radius:18px;background:var(--ink);box-shadow:0 4px 8px rgba(25,36,52,.16),0 20px 36px rgba(25,36,52,.2);
  transform:rotate(7deg)}
.hero-card-back::before{position:absolute;inset:0;content:"";background-image:url("/demos/google-reviews/card-front.png?v=2");
  background-repeat:no-repeat;background-size:100% 100%;background-position:center}
:root[data-theme="dark"] .hero-card-back{background:var(--gold)}
.hero-card-face{position:relative;z-index:1;width:100%;overflow:hidden;isolation:isolate;border-radius:18px;background:#fff;
  box-shadow:0 2px 1px rgba(255,255,255,.72) inset,0 4px 8px rgba(25,36,52,.18),0 20px 36px rgba(25,36,52,.23);
  transform:rotate(-4.5deg)}
.hero-card-face::after{position:absolute;inset:0;border:1px solid rgba(33,48,69,.12);border-radius:inherit;
  background:linear-gradient(128deg,rgba(255,255,255,.16),transparent 32%,transparent 72%,rgba(33,48,69,.03));
  content:"";pointer-events:none}
.hero-card img{display:block;width:100%;height:auto;aspect-ratio:638/1011}

/* sections */
section{padding:84px 0}
.wash{background:var(--wash)}
.lede{font-size:1.18rem;color:var(--muted);max-width:56ch;margin-top:18px}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:30px 28px}
.door h3{margin-bottom:8px}
.door p{margin:0;color:var(--muted);font-size:.98rem}
.equal{margin-top:24px;text-align:center;font-size:.95rem;color:var(--muted)}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;align-items:stretch}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vscard{border-radius:12px;padding:30px 28px}
.vscard.bad{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--bad)}
.vscard.good{background:#213045;border:1px solid #213045}
.vstag{font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:3px;display:inline-block;margin-bottom:16px;letter-spacing:.04em}
.vscard.bad .vstag{background:var(--badbg);color:var(--bad)}
.vscard.good .vstag{background:#D6A648;color:#16202E}
.vscard h3{font-size:1.32rem;margin-bottom:11px}
.vscard.bad h3{color:var(--ink)}
.vscard.good h3{color:#FFFFFF}
.vscard p{margin:0;font-size:.99rem;line-height:1.6}
.vscard.bad p{color:var(--muted)}
.vscard.good p{color:#C5CEDA}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:46px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:22px;border-top:3px solid var(--gold)}
.step .n{font-weight:600;font-family:"Fraunces",Georgia,serif;font-size:2.6rem;color:var(--gold);line-height:1}
.step h3{font-size:1.24rem;margin:8px 0 8px}
.step p{margin:0;color:var(--muted);font-size:.97rem}

.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
@media(max-width:900px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.feats{grid-template-columns:1fr}}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:26px 24px}
.feat h3{font-size:1.16rem;margin-bottom:8px}
.feat p{margin:0;font-size:.95rem;color:var(--muted)}

.price{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:760px){.price{grid-template-columns:1fr}}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px 30px}
.tier.hi{border:2px solid var(--gold)}
.tier .amt{font-weight:600;font-family:"Fraunces",Georgia,serif;font-size:3.2rem;color:var(--ink);line-height:1}
.tier .per{font-size:.95rem;color:var(--muted)}
.tier ul{list-style:none;margin:22px 0 0;padding:0}
.tier li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:.96rem}
.tier li svg{flex-shrink:0;margin-top:4px}

/* form */
.formwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media(max-width:860px){.formwrap{grid-template-columns:1fr;gap:36px}}
.form{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:34px 32px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
label{font-size:.86rem;font-weight:600;color:var(--ink500);margin-bottom:7px}
input,select,textarea{font-family:"Public Sans",sans-serif;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:13px 14px;min-height:48px;width:100%}
textarea{min-height:104px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold1)}
.hint{font-size:.8rem;color:var(--muted);margin-top:6px}
.err{font-size:.8rem;color:var(--bad);font-weight:600;margin-top:6px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px}
.consent input{width:20px;height:20px;min-height:20px;margin-top:2px;accent-color:var(--ok)}
.consent span{font-size:.88rem;color:var(--muted);line-height:1.5}
.formfoot{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.formmsg{margin:22px 0 0;padding:14px 16px;border:1px solid;border-radius:8px;font-size:.94rem;font-weight:500}
.formmsg:focus{outline:3px solid var(--gold);outline-offset:2px}
.formmsg.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.formmsg.bad{background:var(--badbg);border-color:var(--bad);color:var(--bad)}

footer{background:var(--ink900);color:#fff;padding:58px 0 34px;margin-top:0}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
footer .legal{grid-column:1/-1;max-width:none;margin-top:0}
@media (max-width:760px){footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}footer .wrap>div:first-child{grid-column:1/-1}}
footer .wm{font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
footer .wm i{font-style:normal;color:#D6A648}
footer a{color:#9CAABE;text-decoration:none;font-size:.92rem;display:block;padding:5px 0}
footer a:hover{color:#fff}
footer h4{font-size:.78rem;font-weight:700;color:#D6A648;margin:0 0 10px}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:22px;font-size:.82rem;color:#6C7F99;max-width:80ch}


.themebtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;height:44px;padding:0 14px;
  background:transparent;border:1px solid var(--line);border-radius:7px;cursor:pointer;color:var(--muted);
  font-family:"Public Sans",sans-serif;font-size:.86rem;font-weight:600}
.themebtn:hover{color:var(--ink);border-color:var(--ink300)}
.themebtn .sun{display:none}
.themebtn .moon{display:block}
:root[data-theme="dark"] .themebtn .sun{display:block}
:root[data-theme="dark"] .themebtn .moon{display:none}
.navright{display:flex;align-items:center;gap:12px}

.pagehero{padding:70px 0 34px}
.prose{max-width:62ch}
.prose p{font-size:1.06rem;color:var(--body)}
.prose h3{margin:36px 0 10px;font-size:1.44rem}
.pull{border-left:4px solid var(--gold);padding:6px 0 6px 24px;margin:34px 0;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.5rem;line-height:1.3;color:var(--ink)}
@media(max-width:700px){}
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
@media(max-width:820px){.vals{grid-template-columns:1fr}}
.val{border-top:3px solid var(--gold);padding-top:20px}
.val h3{font-size:1.2rem;margin:0 0 8px}
.val p{margin:0;font-size:.96rem;color:var(--muted)}
.cgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
@media(max-width:860px){.cgrid{grid-template-columns:1fr;gap:34px}}
.cway{border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin-bottom:16px}
.cway h3{font-size:1.1rem;margin:0 0 6px}
.cway p{margin:0;font-size:.94rem;color:var(--muted)}
.cway a{font-weight:600}

.shophero{padding:64px 0 40px}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding:64px 0;border-top:1px solid var(--line)}
@media(max-width:880px){.prod{grid-template-columns:1fr;gap:34px}}
.prod.flip .shot{order:2}
@media(max-width:880px){.prod.flip .shot{order:0}}
.shot{background:var(--wash);border:1px dashed var(--ink200);border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;min-height:330px}
.shot .tag{font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.shot .what{font-size:.95rem;color:var(--muted);max-width:34ch;line-height:1.5}
.shot .dims{font-size:.8rem;color:var(--ink300);font-family:ui-monospace,monospace}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;letter-spacing:.02em;white-space:nowrap;color:var(--ink)}
.thumbs{display:flex;gap:10px;margin-top:6px}
.thumb{width:56px;height:40px;border:1px dashed var(--ink200);border-radius:5px;background:var(--paper)}
.thumb.on{border:2px solid var(--gold)}

/* ---------- product gallery ----------
   Prefixed `pgal-` and sharing no class with anything else on the site. The
   admin learned this the hard way twice in one day: a chart column called
   `.bar` inherited the page header's padding, and a bare `button` rule clamped
   one of two customer doors. A new component does not borrow a name. */
/* Capped, so the photograph reads as a product shot beside the copy rather
   than as a slab taller than everything it is describing. Without this it takes
   the full grid column, which at a wide viewport is over 500px. */
.pgal{display:flex;flex-direction:column;gap:12px;max-width:420px}
/* `height:auto` is load-bearing, not tidiness. The <img> used to carry
   width="1200" height="1200" attributes, which are presentational and set the
   used height to 1200px. `aspect-ratio` is ignored when width and height are
   both given, so the frame came out 504x1200 -- and `object-fit:cover` then
   cropped a square photograph to that, magnifying the card and cutting the
   margins off. It looked like the photographs were too big. They were not; the
   frame was the wrong shape. The attributes are gone from the markup too: the
   four photographs are not all one size, and one <img> that swaps between them
   cannot carry any single pair honestly. `aspect-ratio` reserves the space. */
/* The frame owns the shape, the border and the clip. The image scales inside
   it on hover, so something has to stop it spilling over the copy beside it. */
.pgal-frame{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:14px;background:var(--wash);border:1px solid var(--ink200)}
.pgal-main{width:100%;height:100%;display:block;object-fit:cover;
  transform-origin:center;transition:transform .2s ease-out}
/* While the pointer is moving, the transform must track it exactly -- a
   transition here makes the image lag behind the cursor and feel broken. It is
   re-enabled on the way out so the reset eases rather than snaps. */
.pgal-frame.zooming .pgal-main{transition:none}

/* Zoom is a mouse affordance, so it is switched on by `.mouse`, which the
   script adds the first time a real mouse pointer touches the frame.

   This used to be `@media (hover:hover) and (pointer:fine)`. That describes the
   PRIMARY pointer, so on a laptop with a touchscreen it is false and the whole
   feature vanished for a mouse that was plugged in and working. A media query
   asks about the hardware; the script asks the event what it actually is. */
.pgal-hint{display:none}
.pgal-frame.mouse{cursor:zoom-in}
.pgal-frame.mouse.zooming{cursor:zoom-out}
.pgal-frame.mouse .pgal-hint{display:block;position:absolute;left:10px;bottom:10px;
  padding:5px 10px;border-radius:999px;font-size:.74rem;font-weight:600;
  letter-spacing:.02em;color:var(--ink);background:rgba(255,255,255,.88);
  border:1px solid var(--ink100);pointer-events:none;
  transition:opacity .2s ease-out}
:root[data-theme="dark"] .pgal-frame.mouse .pgal-hint{background:rgba(20,30,43,.88)}
.pgal-frame.zooming .pgal-hint{opacity:0}
/* Someone who has asked for less movement still gets the magnification -- that
   is the information -- but not the animated ramp in and out of it. */
@media (prefers-reduced-motion:reduce){
  .pgal-main{transition:none}
  .pgal-hint{transition:none}
}
/* The thumbnails divide the row rather than each claiming a fixed 64px. At a
   fixed size the strip fit exactly five: six came to 434px inside a 420px
   frame and wrapped a lone thumbnail onto a second line. Adding a photograph
   should not be a layout change, so they flex -- six share the row at about
   62px each, and the cap stops three photographs becoming three slabs.
   min-width keeps them a 44px touch target however many there are. */
.pgal-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pgal-thumb{flex:1 1 52px;min-width:44px;max-width:72px;aspect-ratio:1/1;
  position:relative;padding:0;border:1px solid var(--ink200);
  border-radius:7px;background:var(--wash);cursor:pointer;overflow:hidden}
/* Absolute rather than height:100%: the button's height comes from
   aspect-ratio, and a percentage height against a height that is itself
   derived is the kind of thing that resolves to zero in a browser somewhere. */
.pgal-thumb img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.pgal-thumb[aria-current="true"]{border:2px solid var(--gold)}
/* No photographs yet: show the same dashed placeholder the tent and the window
   sticker use, so the column reads as "a picture goes here" rather than as
   nothing at all.

   It is its own element, and the photographs are hidden with `display:none`.
   The first attempt hid the <img> with `visibility:hidden` and let its own
   border stand in as the placeholder -- but visibility hides an element's
   border and background too, so the box kept its 400px of space and drew
   nothing. The whole left half of the product row came out blank. An element
   that is meant to be seen should not be the same element that is being
   hidden. Its classes are its own for the same reason: `.shot` would have
   worked, but `.prod.flip .shot{order:2}` would then reorder the inside of
   this gallery the day someone flips this row. */
.pgal-ph{background:var(--wash);border:1px dashed var(--ink200);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:30px;min-height:330px}
.pgal-tag{font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.pgal-what{font-size:.95rem;color:var(--muted);max-width:34ch;line-height:1.5}
.pgal-dims{font-size:.8rem;color:var(--ink300);font-family:ui-monospace,monospace}
.pgal.pending .pgal-frame,.pgal.pending .pgal-thumbs{display:none}
.pgal:not(.pending) .pgal-ph{display:none}
.pricerow{display:flex;align-items:baseline;gap:14px;margin:18px 0 6px}
.pricerow .now{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.6rem;color:var(--ink);line-height:1}
.pricerow .unit{font-size:.95rem;color:var(--muted)}
.bullets{list-style:none;margin:20px 0 0;padding:0}
.bullets li{display:flex;gap:11px;align-items:flex-start;padding:6px 0;font-size:.97rem;color:var(--body)}
.bullets svg{flex-shrink:0;margin-top:4px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden;width:fit-content}
.qty button{width:46px;height:48px;border:none;background:var(--paper);color:var(--ink);font-size:1.15rem;cursor:pointer;font-family:"Public Sans",sans-serif}
.qty button:hover{background:var(--wash)}
.qty span{width:56px;text-align:center;font-weight:600;font-size:1rem;color:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:48px}
.buyrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}
.vol{margin-top:22px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.vol .vh{background:var(--ink);color:var(--paper);font-size:.74rem;font-weight:700;padding:9px 14px;letter-spacing:.04em}
.vol .vr{display:flex;justify-content:space-between;padding:11px 14px;border-top:1px solid var(--line);font-size:.94rem}
.vol .vr.on{background:var(--gold1)}
.vol .vr b{color:var(--ink)}
.bundle{background:#213045;border-radius:16px;padding:44px 42px;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center;margin:64px 0}
@media(max-width:860px){.bundle{grid-template-columns:1fr;gap:28px;padding:34px 28px}}
.bundle h2{color:#fff}
.bundle p{color:#C5CEDA;margin:14px 0 0}
.bundle .bx{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:26px 24px}
.bundle .bx .amt{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.6rem;color:#fff;line-height:1}
.bundle .bx .was{font-size:.92rem;color:#9CAABE;text-decoration:line-through}
.bundle .bx ul{list-style:none;margin:16px 0 0;padding:0}
.bundle .bx li{font-size:.93rem;color:#C5CEDA;padding:5px 0;display:flex;gap:9px}
.ship{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
@media(max-width:820px){.ship{grid-template-columns:1fr}}
.shipcard{border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.shipcard h3{font-size:1.1rem;margin-bottom:7px}
.shipcard p{margin:0;font-size:.93rem;color:var(--muted)}


.legalwrap{max-width:70ch;padding-bottom:20px}
.legalwrap h2{font-size:1.5rem;margin:40px 0 12px}
.legalwrap h2:first-of-type{margin-top:26px}
.legalwrap p,.legalwrap li{font-size:1rem;color:var(--body);line-height:1.65}
.legalwrap ul{padding-left:20px;margin:0 0 1.1em}
.legalwrap li{margin-bottom:.4em}
.asof{display:inline-block;font-size:.8rem;font-weight:700;color:var(--warn);background:var(--gold1);padding:6px 12px;border-radius:4px;margin-bottom:8px}
.note{border-left:4px solid var(--gold);background:var(--wash);padding:16px 20px;border-radius:0 6px 6px 0;margin:26px 0}
.note p{margin:0;font-size:.95rem}
.faqq{border-top:1px solid var(--line)}
  .faqq:first-of-type{border-top:2px solid var(--ink)}
  .faqq>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
    gap:20px;padding:20px 0;font-size:1.16rem;font-weight:600;line-height:1.35;color:var(--ink)}
  .faqq>summary::-webkit-details-marker{display:none}
  .faqq>summary:hover{color:var(--gold)}
  .faqq>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
  .faqq .chev{width:19px;height:19px;flex-shrink:0;margin-top:4px;color:var(--muted);transition:transform .18s ease}
  .faqq[open]>summary .chev{transform:rotate(180deg)}
  .faqq .faqa{padding:0 0 22px;max-width:68ch}
  .faqq .faqa>*:first-child{margin-top:0}
  .faqq .faqa p{margin:0 0 10px;font-size:.98rem;color:var(--muted)}
  .faqq .faqa p:last-child{margin-bottom:0}
  .faqq .faqa ol,.faqq .faqa ul{margin:10px 0 0;padding-left:20px;font-size:.98rem;color:var(--muted);line-height:1.7}
.faqgroup{margin-top:46px}
.faqgroup > .eyebrow{margin-bottom:6px}
.navlinks a.active{color:var(--ink);font-weight:600}
html{scroll-behavior:auto}

.locbox{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;margin-top:26px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:30px 32px}
@media(max-width:820px){.locbox{grid-template-columns:1fr;gap:24px}}
.locbox h3{font-size:1.3rem;margin:0 0 10px}
.locbox p{margin:0 0 10px;color:var(--body)}
.locbox p.small{font-size:.92rem;color:var(--muted);margin:0}
.locladder{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:11px 16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--body)}
.lrow:first-child{border-top:none}
.lrow.on{background:var(--gold1)}
.lrow b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.lrow .ea{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}

.steps{display:flex;flex-direction:column;gap:26px;margin-top:8px;max-width:74ch}
.stepitem{display:flex;gap:22px;align-items:flex-start}
.stepnum{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:"Fraunces",Georgia,serif;
  font-size:1.25rem;font-weight:600}
.stepbody h3{font-size:1.3rem;margin:6px 0 0}
.stepbody p{margin:8px 0 0;color:var(--body)}
.tip{margin-top:12px;background:var(--wash);border-left:4px solid var(--gold);border-radius:0 7px 7px 0;
  padding:13px 17px;font-size:.95rem;color:var(--body)}
.tip strong{color:var(--ink)}
.helpbox{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px 30px;max-width:72ch}
@media(max-width:560px){.stepitem{gap:15px}.stepnum{width:38px;height:38px;font-size:1.1rem}}

.navsetup{font-size:.92rem;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.navsetup:hover{color:var(--ink)}
.navsetup.active{color:var(--ink)}
.navsignin{display:inline-flex;align-items:center;height:44px;padding:0 18px;border:1px solid var(--line);
  border-radius:7px;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.navsignin:hover{border-color:var(--ink);}
.navsignin.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:820px){.navsetup{display:none}}
.authwrap{max-width:430px;margin:0 auto}
.authcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px 34px}
.authcard h1{font-size:1.9rem;margin:0}
.authcard .sub{margin:8px 0 0;color:var(--muted);font-size:.95rem}
.fieldrow{margin-top:18px}
.fieldrow label{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.fieldrow input{width:100%;box-sizing:border-box;height:48px;padding:0 14px;font-family:"Public Sans",sans-serif;
  font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:7px}
.fieldrow input:focus{outline:3px solid var(--gold);outline-offset:1px}
.authbtn{width:100%;margin-top:22px;height:50px;font-family:"Public Sans",sans-serif;font-size:1rem;font-weight:600;
  color:#fff;background:var(--ok);border:none;border-radius:7px;cursor:pointer}
.authbtn:hover{background:#0F5442}
.authalt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.93rem;color:var(--muted)}
.authalt a{font-weight:600}
.forgot{display:block;margin-top:12px;font-size:.9rem;text-align:center}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Phones: brand plus one action. Theme follows the phone setting; Sign in stays in the footer. */
@media(max-width:560px){.navsignin,.themebtn{display:none}.navright{gap:0}.brand{gap:9px}.brand svg{width:30px;height:30px}.brand .wm{font-size:1.1rem}.navright .btn-sm{padding:10px 14px;white-space:nowrap}}
@media(max-width:360px){.brand .wm{font-size:1rem}.navright .btn-sm{padding:10px 12px}}
/* Tablets: nav links need about 810px alongside the buttons. */
@media(max-width:860px){.navlinks{display:none}}
.prod>*{min-width:0}
@media(max-width:400px){.pricerow{flex-wrap:wrap}strong,a[href^="mailto"]{overflow-wrap:anywhere}}

/* Shop finish picker, cart messages, checkout */
.cartmsg,.cartbar{margin:14px 0 0;font-size:.94rem;color:var(--body)}
.cartmsg a,.cartbar a{font-weight:600;color:var(--ok)}
.cartbar{margin-top:18px;padding:12px 16px;border:1px solid var(--line);border-radius:9px;background:var(--wash);width:fit-content;max-width:100%}
.cartgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;align-items:start;padding-bottom:40px}
@media(max-width:880px){.cartgrid{grid-template-columns:minmax(0,1fr)}}
.cline{display:grid;grid-template-columns:minmax(0,1fr) auto 90px auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cline:first-child{border-top:1px solid var(--line)}
.cname b{display:block;color:var(--ink);font-size:1.02rem}
.cname span{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}
.camt{text-align:right;color:var(--ink)}
.crem{background:none;border:none;color:var(--muted);font-size:.86rem;text-decoration:underline;cursor:pointer;padding:8px 0;min-height:44px;font-family:"Public Sans",sans-serif}
.crem:hover{color:var(--bad)}
.cline.free .camt{color:var(--ok)}
.qty.sm button{width:40px;height:40px}
.qty.sm span{width:44px;line-height:40px}
@media(max-width:560px){.cline{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}.cline .camt{text-align:left}.cline .crem{justify-self:end}}
.cartsum h2{font-size:1.3rem;margin:0 0 14px}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:.95rem;color:var(--body)}
.sumrow b{color:var(--ink);text-align:right;font-weight:600}
.sumrow.total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:1.05rem}
.cartsum .btn{width:100%;margin-top:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.cartsum .note{margin:18px 0 0}
.cartkeep{margin-top:18px}
.cartkeep a{font-weight:600;color:var(--ok)}
.shipnudge{margin:14px 0 0;font-size:.9rem;color:var(--ok);font-weight:600}
.cartempty{padding:30px 0 60px}
.cartempty p{color:var(--muted);font-size:1.05rem}
.bundle .cartmsg{color:#fff}
.bundle .cartmsg a{color:#D6A648}

/* --- Three plans: card only, Dashboard, Dashboard with Smart Assist -------- */
/* Added 28 Sep 2026 with the survey work. `.price` stays two-up for any older
   two-plan block; `.price.three` is the pricing section on the home page. */
.price.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.price.three{grid-template-columns:1fr}}
.tier .plan{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.tier .sub{font-size:.95rem;color:var(--muted);margin:14px 0 0}
.tier .sub b{color:var(--ink);font-weight:600}
.tier .go{display:inline-block;margin-top:20px;font-weight:600;color:var(--ok);text-decoration:none}
.tier .go:hover{text-decoration:underline}

/* Plan labels on feature tiles and in lists. Two sizes of subscription, so a
   tile has to say which one it belongs to. */
.plantag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;border-radius:20px;padding:3px 9px;vertical-align:middle}
.plantag.dash{background:var(--gold1);color:var(--ink);border:1px solid var(--gold)}
.plantag.sa{background:var(--ink);color:#fff;border:1px solid var(--ink)}
/* A generic sparkle, drawn here — not anyone else's AI mark. It sits beside our
   own product name, never beside Google's. */
.plantag.sa{display:inline-flex;align-items:center;gap:4px;align-self:center;flex:0 0 auto}
.plantag .sa-ico{width:10px;height:10px;fill:var(--gold);flex-shrink:0}

/* The two location tables, side by side. */
.ladders{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:24px}
@media(max-width:820px){.ladders{grid-template-columns:1fr}}
.ladders h4{font-size:1rem;margin:0 0 9px;color:var(--ink)}
.lhead{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:8px 14px;
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-bottom:none;border-radius:9px 9px 0 0}
.lhead span:last-child{min-width:74px;text-align:right}
.ladders .locladder{border-radius:0 0 9px 9px}

/* "You choose what a tap opens": the three customer-page modes. */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
@media(max-width:860px){.modes{grid-template-columns:1fr}}
.mode{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px 22px}
.mode.on{border:2px solid var(--gold)}
.mode h3{font-size:1.15rem;margin:0 0 4px}
.mode .tagline{font-size:.82rem;color:var(--muted);margin:0 0 12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.mode p{margin:0;color:var(--body);font-size:.96rem}