/* ============================================================
   DOLD Grand Opening — Cream Brutalist
   Design tokens mirror the active Novamira design system.
   ============================================================ */

:root{
  --bg:#F4F1EA;
  --ink:#100B12;
  --accent:#A5CF9F;
  --support:#6B69A3;
  --dark:#1A141C;
  --ink-muted:#3A3540;
  --ink-faint:#6B5F6E;
  --on-dark-muted:#B5AFBC;
  --on-support-muted:#DCD9E6;
  --on-accent-muted:#22301F;
  --placeholder:#8B8391;
  --faint-on-dark:#8B8391;
  --hairline:#4C4653;
  --danger:#F3B4AE;
  /* Accessible text variants: same hues, tuned to clear WCAG AA. */
  --support-text:#666397;
  --on-support:#F7F5F0;

  --r-card:8px;
  --r-input:6px;
  --r-pill:999px;

  --rule:2px solid var(--ink);
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.18s var(--ease);

  --font-display:Anton,Impact,"Arial Narrow",sans-serif;
  --font-body:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad-x:56px;
  --pad-x-header:40px;
  --wrap:1328px;
}

/* ---------- Reset (specificity-0 so components always win) ---------- */
:where(*,*::before,*::after){box-sizing:border-box}
:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(a){color:inherit;text-decoration:none}
:where(img,svg){display:block;max-width:100%}
:where(button,input,select,textarea){font:inherit;color:inherit}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

.m{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Focus ---------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--support);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible,.on-support :focus-visible{outline-color:var(--accent)}

.skip-link{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--ink);color:var(--bg);
  font:600 14px/1 var(--font-body);
  padding:14px 20px;border-radius:var(--r-pill);
  transition:top var(--t);
}
.skip-link:focus{top:12px}

/* ---------- Shared section shell ---------- */
.sec{border-bottom:var(--rule);padding-left:var(--pad-x);padding-right:var(--pad-x)}
.wrap{max-width:var(--wrap);margin-inline:auto;width:100%}
section[id]{scroll-margin-top:150px}

.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--support-text);
  margin-bottom:18px;
}
.on-ink .eyebrow{color:var(--accent)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font:600 15px/1 var(--font-body);
  padding:19px 32px;
  border-radius:var(--r-pill);
  border:2px solid var(--ink);
  background:var(--ink);color:var(--bg);
  text-align:center;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
}
.btn:hover{background:var(--accent);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);padding:18px 30px}
.btn--ghost:hover{background:var(--support);color:var(--bg);border-color:var(--support)}
.btn--sm{font-size:14px;padding:15px 26px}
.btn--sm:hover{transform:none}
.btn--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--accent:hover{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btn--block{display:block;width:100%;padding-left:14px;padding-right:14px}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:90;
  background:var(--bg);
  border-bottom:var(--rule);
  padding:12px var(--pad-x-header);
}
.site-header__inner{
  display:flex;align-items:center;gap:30px;
  max-width:1360px;margin-inline:auto;
}
.site-header__logo{display:block;flex:none}
.site-header__logo svg,.site-header__logo img{height:46px;width:auto;color:var(--ink)}

.nav{display:flex;gap:24px}
.nav a{
  font-family:var(--font-mono);font-size:11.5px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  padding-bottom:3px;border-bottom:2px solid transparent;
  transition:border-color var(--t);
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{border-bottom-color:var(--support)}
.site-header__cta{margin-left:auto}

.nav-toggle{
  display:none;margin-left:auto;
  background:transparent;border:2px solid var(--ink);
  border-radius:var(--r-pill);
  padding:11px 16px;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  align-items:center;gap:9px;
}
.nav-toggle__bars{position:relative;display:block;width:16px;height:2px;background:var(--ink)}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);
  transition:transform var(--t),opacity var(--t);
}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{
  background:var(--accent);border-bottom:var(--rule);
  padding:16px var(--pad-x-header);
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;text-align:center;
}
.announce__label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.announce__pill{
  font:600 13px/1 var(--font-body);
  background:var(--ink);color:var(--accent);
  padding:8px 14px;border-radius:var(--r-pill);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{display:grid;grid-template-columns:5fr 7fr;border-bottom:var(--rule)}
.hero__media{
  background:var(--support);border-right:var(--rule);
  display:flex;align-items:center;justify-content:center;
  padding:40px;min-height:600px;
}
.hero__frame{
  width:100%;height:100%;min-height:480px;
  border:var(--rule);border-radius:var(--r-input);
  background:repeating-linear-gradient(135deg,rgba(16,11,18,.13) 0 10px,transparent 10px 20px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero__frame img{width:100%;height:100%;object-fit:cover;border-radius:4px}

/* Brandmark panel: sage ground, ink logo, ink hatch laid over the top.
   The hatch is the design's existing two-stop pattern, not a decorative blend. */
.hero__frame--brand{background:var(--accent);position:relative;padding:7%}
.hero__frame--photo{position:relative}
.hero__frame--brand::after,
.hero__frame--photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;
  background:repeating-linear-gradient(135deg,rgba(16,11,18,.13) 0 10px,transparent 10px 20px);
}
.hero__brandmark{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.hero__brandmark svg{width:100%;height:auto;max-height:100%;color:var(--ink);display:block}
.hero__frame-note{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--on-support);text-align:center;line-height:2;text-transform:uppercase;
  padding:20px;
}
.hero__body{
  background:var(--bg);padding:76px var(--pad-x) 72px;
  display:flex;flex-direction:column;justify-content:center;
}
.hero__inner{max-width:780px}
.pill-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);border:var(--rule);
  padding:8px 14px;border-radius:var(--r-pill);margin-bottom:28px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
}
.hero h1{
  font:400 clamp(40px,5.7vw,82px)/0.86 var(--font-display);
  text-transform:uppercase;letter-spacing:-.015em;margin-bottom:26px;
}
.hl{
  display:inline-block;
  background:var(--accent);
  padding:.10em 10px .045em;
  line-height:.74;
  vertical-align:baseline;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero__lede{
  font:400 19px/1.6 var(--font-body);color:var(--ink-muted);
  max-width:48ch;margin-bottom:34px;
}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__proof{display:flex;gap:26px;margin-top:36px;flex-wrap:wrap}
.hero__proof-v{font:400 30px/1 var(--font-display);text-transform:uppercase}
.hero__proof-l{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:5px;
}

/* ============================================================
   MARQUEE — the rotating sale ticker
   ============================================================ */
@keyframes dold-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{
  border-bottom:var(--rule);padding:14px 0;overflow:hidden;
  background:var(--support);color:var(--on-support);
}
.marquee--accent{background:var(--accent);color:var(--ink)}
.marquee__track{
  display:flex;width:max-content;
  animation:dold-mq 30s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:0 20px;white-space:nowrap;
}
/* ============================================================
   SERVICES
   ============================================================ */
.sec--services{padding-top:96px;padding-bottom:96px}
.sec-head{text-align:center;max-width:900px;margin:0 auto 56px}
.sec-head h2{
  font:400 clamp(32px,4.3vw,62px)/0.98 var(--font-display);
  text-transform:uppercase;margin-bottom:20px;
}
.sec-head p{font:400 18px/1.6 var(--font-body);color:var(--ink-muted);max-width:60ch;margin:0 auto}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{
  border:var(--rule);border-radius:var(--r-card);
  padding:32px;display:flex;flex-direction:column;
}
.card--lift{transition:transform var(--t),box-shadow var(--t)}
.card--lift:hover,.card--lift:focus-within{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink)}
.card__num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:16px;opacity:.75;
}
.card__title{font:400 clamp(26px,2.2vw,32px)/0.98 var(--font-display);text-transform:uppercase;margin-bottom:14px}
.card__text{font:400 15.5px/1.6 var(--font-body);margin-bottom:22px;opacity:.88}
.card__link{
  color:inherit;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  margin-top:auto;border-bottom:2px solid currentColor;
  padding-bottom:3px;align-self:flex-start;
}
.card__link:hover{opacity:.7}

/* ============================================================
   WEBSITE PACKAGES (ink ground)
   ============================================================ */
.on-ink{background:var(--ink);color:var(--bg)}
.on-support{background:var(--support);color:var(--on-support)}
.on-accent{background:var(--accent);color:var(--ink)}

.sec--websites{padding-top:96px;padding-bottom:96px}
.split-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:20px;flex-wrap:wrap}
.split-head h2{
  font:400 clamp(38px,5.83vw,84px)/0.9 var(--font-display);
  text-transform:uppercase;letter-spacing:-.015em;
}
.split-head p{font:400 17px/1.6 var(--font-body);color:var(--on-dark-muted);max-width:36ch}
.txt-accent{color:var(--accent)}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:48px 0 40px}
.pack{
  position:relative;border:2px solid var(--line,#3A3540);border-radius:var(--r-card);
  padding:34px 30px;display:flex;flex-direction:column;
}
.pack--dark{background:var(--dark);color:var(--bg);border-color:var(--ink-muted)}
.pack--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.pack__badge{
  position:absolute;top:-14px;right:22px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--support);color:var(--on-support);border:var(--rule);
  padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;
}
.pack__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;opacity:.7}
.pack__name{font:400 clamp(27px,2.36vw,34px)/0.98 var(--font-display);text-transform:uppercase;margin-bottom:20px}
.price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.price__sale{font:400 clamp(46px,4.3vw,62px)/1 var(--font-display)}
.price__reg{font-family:var(--font-mono);font-size:15px;text-decoration:line-through;opacity:.55}
.price__save{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:24px;opacity:.75}
.pack__who{font:400 15px/1.6 var(--font-body);margin-bottom:26px;opacity:.9;border-top:1px solid currentColor;padding-top:20px}
.pack__cta{margin-top:auto;font:600 14.5px/1 var(--font-body);padding:16px 10px;border-radius:var(--r-pill);text-align:center;display:block;transition:transform var(--t),background var(--t),color var(--t)}
.pack__cta--ghost{background:transparent;color:var(--bg);border:2px solid var(--bg)}
.pack__cta--ghost:hover{transform:translateY(-2px);background:var(--bg);color:var(--ink)}
.pack__cta--ink{background:var(--ink);color:var(--accent);border:2px solid var(--ink)}
.pack__cta--ink:hover{transform:translateY(-2px);background:var(--dark)}

.includes{border:2px solid var(--accent);border-radius:var(--r-card);padding:34px 36px}
.includes h3{font:400 clamp(24px,2.08vw,30px)/1 var(--font-display);text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.includes__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 26px}
.includes__item{display:flex;gap:10px;align-items:baseline;font:400 15.5px/1.5 var(--font-body)}
.includes__item::before{content:"\2714";color:var(--accent);font-weight:600;flex:none}

/* ============================================================
   MARKETING KITS
   ============================================================ */
.sec--marketing{padding-top:96px;padding-bottom:96px}
.sec--marketing .sec-head{max-width:920px;margin-bottom:20px}
.sec--marketing .sec-head h2{font:400 clamp(34px,4.86vw,70px)/0.94 var(--font-display);text-transform:uppercase;margin-bottom:20px}
.sec--marketing .sec-head p{max-width:58ch}
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:52px 0 26px;align-items:start}
.kit{position:relative;border:var(--rule);border-radius:var(--r-card);padding:34px 30px;display:flex;flex-direction:column}
.kit--cream{background:var(--bg);color:var(--ink)}
.kit--accent{background:var(--accent);color:var(--ink)}
.kit--support{background:var(--support);color:var(--on-support)}
.kit__badge{
  position:absolute;top:-14px;left:24px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--accent);border:var(--rule);
  padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;
}
.kit__name{font:400 clamp(26px,2.22vw,32px)/0.98 var(--font-display);text-transform:uppercase;margin-bottom:18px}
.kit .price__sale{font:400 clamp(42px,3.9vw,56px)/1 var(--font-display)}
.kit .price__reg{font-size:14px}
.kit .price__save{margin-bottom:22px}
.kit__who{font:400 15px/1.55 var(--font-body);margin-bottom:22px;opacity:.9}
.kit__list{border-top:var(--rule);border-top-color:currentColor;padding-top:20px;margin-bottom:26px}
.kit__list-head{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;opacity:.7}
.kit__items{display:grid;gap:9px}
.kit__item{display:flex;gap:10px;align-items:baseline;font:400 15px/1.45 var(--font-body)}
.kit__item::before{content:"\2192";opacity:.6;flex:none}
.kit__cta{margin-top:auto;font:600 14.5px/1 var(--font-body);border:var(--rule);padding:16px 10px;border-radius:var(--r-pill);text-align:center;display:block;transition:transform var(--t),box-shadow var(--t)}
.kit__cta:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
.kit__cta--ink{background:var(--ink);color:var(--bg)}
.kit__cta--ink-accent{background:var(--ink);color:var(--accent)}
.kit__cta--cream{background:var(--bg);color:var(--ink)}

/* ============================================================
   ADD-ONS
   ============================================================ */
.sec--addons{padding-top:88px;padding-bottom:88px}
.sec--addons .split-head{margin-bottom:44px}
.sec--addons .split-head h2{font:400 clamp(32px,4.3vw,62px)/0.96 var(--font-display);letter-spacing:normal}
.sec--addons .split-head p{color:var(--on-accent-muted);max-width:38ch}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.addon{
  background:var(--bg);border:var(--rule);border-radius:var(--r-card);
  padding:26px 28px;display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t);
}
.addon:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--ink)}
.addon__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.addon__title{font:400 24px/1 var(--font-display);text-transform:uppercase}
.addon__price{font:400 26px/1 var(--font-display);color:var(--support);white-space:nowrap}
.addon__text{font:400 14.5px/1.55 var(--font-body);color:var(--ink-muted)}

/* ============================================================
   PROCESS
   ============================================================ */
.sec--process{padding-top:96px;padding-bottom:96px}
.sec--process .sec-head{margin-bottom:56px}
.sec--process .sec-head h2{font:400 clamp(32px,4.58vw,66px)/0.96 var(--font-display)}
.step{border:var(--rule);border-radius:var(--r-card);padding:30px 26px}
.step--cream{background:var(--bg);color:var(--ink)}
.step--accent{background:var(--accent);color:var(--ink)}
.step--support{background:var(--support);color:var(--on-support)}
.step__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;opacity:.75}
.step__title{font:400 clamp(25px,2.08vw,30px)/0.98 var(--font-display);text-transform:uppercase;margin-bottom:14px}
.step__text{font:400 15px/1.6 var(--font-body);opacity:.9}

/* ============================================================
   WHY US
   ============================================================ */
.sec--why{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center;max-width:calc(var(--wrap) + (var(--pad-x) * 2));margin-inline:auto;width:100%}
.sec--why h2{font:400 clamp(32px,4.3vw,62px)/0.96 var(--font-display);text-transform:uppercase;margin-bottom:24px}
.sec--why > div > p{font:400 17.5px/1.65 var(--font-body);color:var(--on-support);max-width:44ch}
.why-list{display:grid;gap:14px}
.why-item{border:2px solid var(--on-support);border-radius:var(--r-card);padding:22px 24px}
.why-item h3{font:600 19px/1.3 var(--font-body);text-transform:none;letter-spacing:normal;margin-bottom:8px}
.why-item p{font:400 15px/1.55 var(--font-body);color:var(--on-support)}
/* ============================================================
   FAQ
   ============================================================ */
.sec--faq{padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:4fr 8fr;gap:64px;max-width:calc(var(--wrap) + (var(--pad-x) * 2));margin-inline:auto;width:100%}
.sec--faq h2{font:400 clamp(30px,4.03vw,58px)/0.96 var(--font-display);text-transform:uppercase;margin-bottom:22px}
.faq__aside p{font:400 16px/1.6 var(--font-body);color:var(--ink-muted);margin-bottom:22px}
.faq__aside-link{font:600 14.5px/1 var(--font-body);color:var(--support-text);border-bottom:2px solid var(--support);padding-bottom:3px;display:inline-block}
.faq__aside-link:hover{color:var(--support-text)}
.faq__list{border-top:var(--rule)}
.faq__item{border-bottom:1px solid rgba(16,11,18,.18)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:26px;
  background:transparent;border:0;padding:26px 0;cursor:pointer;text-align:left;
  font:500 21px/1.35 var(--font-body);color:var(--ink);
}
.faq__q:hover{color:var(--support-text)}
.faq__sign{font:400 24px/1 var(--font-body);color:var(--support);flex:none}
.faq__a{overflow:hidden}
.faq__a[hidden]{display:none}
.faq__a p{font:400 16.5px/1.7 var(--font-body);color:var(--ink-muted);max-width:66ch;padding-bottom:26px;margin-top:-6px}

/* ============================================================
   BOOKING / CTA
   ============================================================ */
.sec--book{padding-top:110px;padding-bottom:110px}
.book__inner{max-width:1000px;margin:0 auto;text-align:center}
.book__badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--ink);border:2px solid var(--accent);
  padding:9px 16px;border-radius:var(--r-pill);margin-bottom:30px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
}
.book__inner h2{
  font:400 clamp(42px,6.67vw,96px)/0.9 var(--font-display);
  text-transform:uppercase;letter-spacing:-.015em;margin-bottom:26px;
}
.book__lede{font:400 19px/1.6 var(--font-body);color:var(--on-dark-muted);max-width:52ch;margin:0 auto 40px}
.book__fine{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint-on-dark);margin-top:20px}
.book__fine a{color:var(--faint-on-dark)}
.book__fine a:hover{color:var(--accent)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--bg);padding:60px var(--pad-x) 30px}
.site-footer__grid{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px;
  padding-bottom:38px;border-bottom:var(--rule);
  max-width:var(--wrap);margin-inline:auto;
}
.site-footer__logo{display:block;margin-bottom:20px;color:var(--ink)}
.site-footer__logo svg,.site-footer__logo img{height:84px;width:auto}
.site-footer__contact{font:400 15px/1.75 var(--font-body);color:var(--ink-muted)}
.site-footer__contact a{color:var(--ink-muted)}
.site-footer__contact a:hover{color:var(--support-text)}
.site-footer__head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--support-text);margin-bottom:16px}
.site-footer__links{display:grid;gap:9px}
.site-footer__links a{font:400 15px/1.4 var(--font-body);color:var(--ink);transition:color var(--t)}
.site-footer__links a:hover{color:var(--support-text)}
.site-footer__bottom{
  display:flex;justify-content:space-between;padding-top:24px;flex-wrap:wrap;gap:16px;
  max-width:var(--wrap);margin-inline:auto;
}
.site-footer__bottom span,.site-footer__bottom a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  color:var(--ink-faint);text-transform:uppercase;
}
.site-footer__bottom a:hover{color:var(--support-text)}
/* ============================================================
   GENERIC PAGES (blog, existing block pages, 404, search)
   ============================================================ */
.page-shell{padding:72px var(--pad-x) 96px;border-bottom:var(--rule)}
.page-shell__inner{max-width:var(--wrap);margin-inline:auto}
.page-hero{border-bottom:var(--rule);background:var(--bg);padding:64px var(--pad-x) 48px}
.page-hero__inner{max-width:var(--wrap);margin-inline:auto}
.page-hero h1{font:400 clamp(34px,4.5vw,64px)/0.96 var(--font-display);text-transform:uppercase;letter-spacing:-.015em}
.page-hero p{font:400 18px/1.6 var(--font-body);color:var(--ink-muted);max-width:60ch;margin-top:16px}

.entry-content{max-width:100%}
.entry-content > *{max-width:72ch}
.entry-content > .alignwide,.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull,.entry-content > .wp-block-cover{max-width:none}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  line-height:.98;letter-spacing:-.01em;margin:1.6em 0 .5em;
}
.entry-content h1{font-size:clamp(34px,4.2vw,58px)}
.entry-content h2{font-size:clamp(28px,3.2vw,44px)}
.entry-content h3{font-size:clamp(22px,2.2vw,30px)}
.entry-content h4{font-size:20px}
.entry-content p,.entry-content li{font:400 17px/1.7 var(--font-body);color:var(--ink-muted)}
.entry-content p,.entry-content ul,.entry-content ol,.entry-content figure,
.entry-content .wp-block-image,.entry-content .wp-block-group{margin-bottom:1.2em}
.entry-content ul{list-style:disc;padding-left:1.3em}
.entry-content ol{list-style:decimal;padding-left:1.3em}
.entry-content li{margin-bottom:.4em}
.entry-content a{color:var(--support);border-bottom:1px solid currentColor}
.entry-content a:hover{color:var(--ink)}
.entry-content img,.entry-content .wp-block-image img{border-radius:var(--r-card);border:var(--rule)}
.entry-content blockquote{
  border:var(--rule);border-left-width:6px;border-radius:var(--r-card);
  padding:22px 26px;margin:1.6em 0;background:transparent;
}
.entry-content blockquote p{font-size:19px;color:var(--ink)}
.entry-content .wp-block-button__link{
  background:var(--ink);color:var(--bg);border:2px solid var(--ink);
  border-radius:var(--r-pill);font:600 15px/1 var(--font-body);padding:17px 30px;
  text-decoration:none;transition:background var(--t),color var(--t);
}
.entry-content .wp-block-button__link:hover{background:var(--accent);color:var(--ink)}

.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{border:var(--rule);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;background:var(--bg);transition:transform var(--t),box-shadow var(--t)}
.post-card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink)}
.post-card__date{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.post-card__title{font:400 26px/1 var(--font-display);text-transform:uppercase;margin-bottom:12px}
.post-card__excerpt{font:400 15.5px/1.6 var(--font-body);color:var(--ink-muted);margin-bottom:20px}
.post-card__more{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-top:auto;border-bottom:2px solid currentColor;padding-bottom:3px;align-self:flex-start}
.pagination{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
.pagination .page-numbers{border:var(--rule);border-radius:var(--r-pill);padding:11px 18px;font:500 14px/1 var(--font-body)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--ink);color:var(--bg)}
.search-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.search-form input[type="search"]{font:400 16px/1 var(--font-body);padding:16px 18px;border:var(--rule);border-radius:var(--r-input);background:transparent;color:var(--ink);min-width:min(320px,100%)}

/* ============================================================
   RESPONSIVE — intentional, not a shrunken desktop
   ============================================================ */
@media (max-width:1280px){
  :root{--pad-x:44px;--pad-x-header:32px}
  .includes__grid{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:1180px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--bg);border-bottom:var(--rule);
    padding:8px var(--pad-x-header) 20px;
  }
  .nav.is-open{display:flex}
  .nav a{
    font-size:13px;padding:16px 0;border-bottom:1px solid rgba(16,11,18,.14);
    border-bottom-color:rgba(16,11,18,.14);
  }
  .nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{border-bottom-color:var(--support)}
  .nav-toggle{display:inline-flex;min-height:44px}
  .site-header__cta{min-height:44px;display:inline-flex;align-items:center}
  .site-header__inner{gap:16px}
  .site-header__cta{margin-left:0;order:3}
  .nav-toggle{order:2;margin-left:auto}
  .includes__grid{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .sec--why,.sec--faq{gap:44px}
}

@media (max-width:1080px){
  .grid-3,.addons{grid-template-columns:repeat(2,1fr)}
  .packs,.kits{grid-template-columns:1fr;gap:34px}
  .packs{margin:56px 0 40px}
  .pack__badge{right:auto;left:24px}
  .sec--why,.sec--faq{grid-template-columns:1fr;gap:40px}
  .sec--why > div > p{max-width:66ch}
}

@media (max-width:960px){
  :root{--pad-x:32px;--pad-x-header:24px}
  .hero{grid-template-columns:1fr}
  .hero__media{min-height:0;border-right:0;border-bottom:var(--rule);padding:28px}
  .hero__frame{min-height:300px;aspect-ratio:4/5;max-height:52vh}
  .hero__body{padding:52px var(--pad-x) 56px}
  .hero__inner{max-width:none}
  .sec--services,.sec--websites,.sec--marketing,.sec--process{padding-top:72px;padding-bottom:72px}
  .sec--addons,.sec--why{padding-top:64px;padding-bottom:64px}
  .sec--book{padding-top:80px;padding-bottom:80px}
  .sec-head{margin-bottom:40px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:36px}
}

@media (max-width:760px){
  :root{--pad-x:24px;--pad-x-header:20px}
  .announce{padding:14px 20px;gap:10px}
  .grid-3,.grid-4,.addons,.post-list{grid-template-columns:1fr}
  .includes__grid{grid-template-columns:repeat(2,1fr);gap:14px 20px}
  .includes{padding:28px 24px}
  .split-head{gap:22px;margin-bottom:26px}
  .split-head p{max-width:none}
  .hero__lede{font-size:17.5px}
  .hero__proof{gap:20px}
  #dold-book form.contact-form{grid-template-columns:1fr}
  .book__lede{font-size:17.5px}
  .faq__q{font-size:18.5px;gap:18px;padding:22px 0}
  .sec--faq h2{margin-bottom:16px}
  .card{padding:26px 24px}
  .pack,.kit{padding:30px 24px}
}

@media (max-width:560px){
  :root{--pad-x:20px;--pad-x-header:16px}
  .site-header{padding:10px var(--pad-x-header)}
  .site-header__logo svg,.site-header__logo img{height:40px}
  .site-header__cta{font-size:13px;padding:13px 18px}
  .announce{flex-direction:column;gap:9px;padding:12px 20px}
  .hero__body{padding:40px var(--pad-x) 44px}
  .hero h1{margin-bottom:20px}
  .hero__actions{gap:10px}
  .hero__actions .btn{width:100%;padding:17px 22px}
  .hero__proof{gap:16px 22px;margin-top:28px}
  .includes__grid{grid-template-columns:1fr}
  .addon__top{flex-direction:column;align-items:flex-start;gap:4px}
  .site-footer__grid{grid-template-columns:1fr;gap:30px}
  .site-footer{padding:44px var(--pad-x) 26px}
  .site-footer__logo svg,.site-footer__logo img{height:68px}
  .site-footer__bottom{flex-direction:column;gap:10px}
  #dold-book form.contact-form > button[type="submit"]{width:100%;padding:19px 24px;justify-self:stretch}
  .marquee__item{font-size:11.5px;padding:0 14px}
  .price__sale{line-height:1.05}
}

@media (max-width:390px){
  :root{--pad-x:16px;--pad-x-header:14px}
  .site-header__inner{gap:10px}
  .site-header__logo svg,.site-header__logo img{height:34px}
  .site-header__cta{font-size:12px;padding:12px 14px}
  .nav-toggle{padding:10px 12px;font-size:10px}
  .chip span{font-size:13px;padding:12px 15px}
  #dold-book form.contact-form input,#dold-book form.contact-form textarea{padding:15px 15px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none;transform:none;width:auto;justify-content:center;flex-wrap:wrap}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .card--lift:hover,.addon:hover,.post-card:hover,.btn:hover,.kit__cta:hover,.pack__cta:hover{transform:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.marquee,.nav-toggle,.book__form{display:none}
  body{background:#fff;color:#000}
}
/* ============================================================
   JETPACK FORMS — restyled to the approved design.
   Selectors verified against this site's rendered Jetpack output.
   Scoped under #dold-book so plugin defaults are always outranked,
   while Jetpack's own functional CSS (show/hide states) stays intact.
   ============================================================ */
#dold-book .jetpack-contact-form-container{max-width:820px;margin:0 auto;text-align:left}
#dold-book form.contact-form{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0;padding:0;
}
#dold-book form.contact-form .grunion-field-wrap{margin:0;padding:0;min-width:0}
#dold-book form.contact-form .grunion-field-checkbox-multiple-wrap,
#dold-book form.contact-form .grunion-field-checkbox-wrap,
#dold-book form.contact-form .grunion-field-radio-wrap,
#dold-book form.contact-form .grunion-field-select-wrap,
#dold-book form.contact-form .grunion-field-textarea-wrap,
#dold-book form.contact-form .grunion-field-consent-wrap,
#dold-book form.contact-form p.contact-submit{grid-column:1 / -1}

/* Jetpack nests a <div> inside <p class="contact-submit">, which is invalid HTML:
   the parser closes the paragraph early, so the button, the error blocks and the
   hidden inputs all end up as direct grid children, and a stray </p> leaves an
   empty phantom cell. Place them explicitly rather than relying on that wrapper. */
#dold-book form.contact-form > *:not(.grunion-field-wrap){grid-column:1 / -1}
#dold-book form.contact-form > p.contact-submit{
  margin:0;padding:0;min-height:0;background:none;border:0;text-align:center;
}
#dold-book form.contact-form > p.contact-submit:empty{display:none}
#dold-book form.contact-form > p:not([class]){display:none}
#dold-book form.contact-form > button[type="submit"]{
  justify-self:center;width:auto;margin-top:8px;
}

/* Labels */
#dold-book .grunion-field-label,
#dold-book legend.grunion-field-label{
  display:block;float:none;width:auto;
  font:500 13px/1.2 var(--font-body);color:var(--on-dark-muted);
  margin:0 0 9px;padding:0;text-transform:none;letter-spacing:normal;
}
#dold-book legend.grunion-field-label{margin-bottom:11px}
#dold-book .grunion-label-required{
  color:var(--accent);font-weight:500;font-size:11.5px;margin-left:7px;opacity:.85;
}
#dold-book fieldset.jetpack-field-multiple__fieldset{border:0;margin:0;padding:0;min-width:0}

/* Text inputs and textarea */
#dold-book form.contact-form input[type="text"],
#dold-book form.contact-form input[type="email"],
#dold-book form.contact-form input[type="tel"],
#dold-book form.contact-form input[type="url"],
#dold-book form.contact-form input[type="number"],
#dold-book form.contact-form input[type="date"],
#dold-book form.contact-form select,
#dold-book form.contact-form textarea{
  width:100%;box-sizing:border-box;display:block;
  font:400 16px/1.45 var(--font-body);color:var(--bg);
  padding:17px 18px;margin:0;
  border:2px solid var(--ink-muted);border-radius:var(--r-input);
  background:var(--dark);box-shadow:none;outline:none;
  transition:border-color var(--t);
  -webkit-appearance:none;appearance:none;
}
#dold-book form.contact-form textarea{height:auto;min-height:140px;resize:vertical}
#dold-book form.contact-form input::placeholder,
#dold-book form.contact-form textarea::placeholder{color:var(--faint-on-dark);opacity:1}
#dold-book form.contact-form input:hover,
#dold-book form.contact-form textarea:hover{border-color:var(--hairline)}
#dold-book form.contact-form input:focus,
#dold-book form.contact-form textarea:focus,
#dold-book form.contact-form select:focus{border-color:var(--accent);background:var(--dark)}
#dold-book form.contact-form input:focus-visible,
#dold-book form.contact-form textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#dold-book form.contact-form input:-webkit-autofill{
  -webkit-text-fill-color:var(--bg);
  -webkit-box-shadow:0 0 0 1000px var(--dark) inset;
}

/* Interest chips (checkbox-multiple rendered as pills) */
#dold-book .grunion-checkbox-multiple-options{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
#dold-book .grunion-checkbox-multiple-options label.contact-form-field{
  position:relative;display:inline-flex;margin:0;padding:0;font-weight:400;
}
#dold-book input.checkbox-multiple[type="checkbox"]{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer;z-index:1;
}
#dold-book .grunion-checkbox-multiple-label{
  display:inline-flex;align-items:center;gap:7px;
  font:500 14px/1 var(--font-body);
  background:transparent;color:var(--bg);
  border:2px solid var(--ink-muted);
  padding:13px 18px;border-radius:var(--r-pill);
  cursor:pointer;user-select:none;margin:0;
  transition:background var(--t),color var(--t),border-color var(--t);
}
#dold-book .grunion-checkbox-multiple-label .grunion-field-text{display:inline}
#dold-book input.checkbox-multiple:hover + .grunion-checkbox-multiple-label{border-color:var(--on-dark-muted)}
#dold-book input.checkbox-multiple:checked + .grunion-checkbox-multiple-label{
  background:var(--accent);color:var(--ink);border-color:var(--accent);
}
#dold-book input.checkbox-multiple:checked + .grunion-checkbox-multiple-label::after{content:"\2713";font-weight:600}
#dold-book input.checkbox-multiple:focus-visible + .grunion-checkbox-multiple-label{
  outline:3px solid var(--accent);outline-offset:3px;
}

/* Submit */
#dold-book form.contact-form button.pushbutton-wide,
#dold-book form.contact-form button[type="submit"],
#dold-book form.contact-form input[type="submit"]{
  display:inline-block;width:auto;
  font:600 16px/1 var(--font-body);
  background:var(--accent);color:var(--ink);
  border:2px solid var(--accent);border-radius:var(--r-pill);
  padding:21px 40px;margin:0;cursor:pointer;text-shadow:none;box-shadow:none;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
#dold-book form.contact-form button.pushbutton-wide:hover,
#dold-book form.contact-form button[type="submit"]:hover{
  background:var(--bg);border-color:var(--bg);color:var(--ink);transform:translateY(-2px);
}
#dold-book form.contact-form button[type="submit"]:active{transform:translateY(0)}
#dold-book form.contact-form button[type="submit"]:focus-visible{outline:3px solid var(--bg);outline-offset:3px}
#dold-book form.contact-form button[type="submit"][disabled]{opacity:.6;cursor:progress}

/* ---- Validation states ------------------------------------------------
   Jetpack paints its own #b32d2e block and a 1px red input border. Both are
   off-palette, so every error surface is restated here in brand colours.
   Errors are also gated behind a real submit attempt: Jetpack validates on
   blur, which otherwise fires the moment someone tabs through an empty field.
   ---------------------------------------------------------------------- */

/* Inline field errors */
#dold-book .contact-form__input-error{
  gap:7px;margin-top:9px;align-items:center;
  color:var(--danger);font:500 13.5px/1.4 var(--font-body);
}
#dold-book .contact-form__input-error svg path{fill:var(--danger)}

/* Invalid input: keep the design's 2px stroke, recoloured. */
#dold-book form.contact-form [aria-invalid="true"]:not(fieldset){
  border:2px solid var(--danger);
}
#dold-book form.contact-form fieldset[aria-invalid="true"]{
  outline:2px solid var(--danger);outline-offset:10px;border:0;
}

/* Form-level error summary */
#dold-book .contact-form__error{
  background-color:var(--dark);
  color:var(--danger);
  font:500 14.5px/1.5 var(--font-body);
  border:2px solid var(--danger);border-radius:var(--r-card);
  padding:16px 18px;margin:0 0 14px;text-align:left;
  gap:9px;
}
#dold-book .contact-form__error .contact-form__warning-icon svg{fill:var(--danger)}
#dold-book .contact-form__error ul{margin:8px 0 0;padding-inline-start:1.1em;list-style:disc}
#dold-book .contact-form__error li{color:var(--danger)}
#dold-book .contact-form__error a{color:var(--danger);border-bottom:1px solid currentColor}
#dold-book .contact-form__error:not(.show-errors){display:none}

/* Stay quiet until the form has actually been submitted once. */
#dold-book form.contact-form:not(.is-validated) .contact-form__input-error{
  opacity:0;max-height:0;margin:0;overflow:hidden;
}
#dold-book form.contact-form:not(.is-validated) [aria-invalid="true"]:not(fieldset){
  border:2px solid var(--ink-muted);
}
#dold-book form.contact-form:not(.is-validated) [aria-invalid="true"]:not(fieldset):focus{
  border-color:var(--accent);
}
#dold-book form.contact-form:not(.is-validated) fieldset[aria-invalid="true"]{outline:0}

/* Success panel */
/* Jetpack ships no CSS to hide this; it relies on its Interactivity runtime.
   Hide it outright and reveal it only on the success class, which Jetpack adds
   from JS on the AJAX path and from PHP on the no-JS path. */
#dold-book .contact-form-submission{display:none}
#dold-book .contact-form-submission.submission-success{
  display:block;
  background:var(--dark);border:2px solid var(--accent);border-radius:var(--r-card);
  padding:34px 36px;color:var(--bg);text-align:left;margin:0 auto 28px;max-width:820px;
}
#dold-book .contact-form-submission[aria-hidden="true"]:not(.submission-success){display:none}
#dold-book .contact-form-submission h4{
  font:400 30px/1 var(--font-display);text-transform:uppercase;
  color:var(--accent);letter-spacing:-.01em;margin:0 0 10px;
}
#dold-book .contact-form-submission p{font:400 15.5px/1.6 var(--font-body);color:var(--on-dark-muted)}
#dold-book .contact-form-submission .go-back-message a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-muted);
}
#dold-book .contact-form-submission .go-back-message a:hover{color:var(--accent)}
#dold-book .jetpack_forms_contact-form-success-summary{
  border-top:1px solid var(--ink-muted);padding-top:14px;margin-top:14px;
}
#dold-book .field-name{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-muted)}
#dold-book .field-value{font:400 16px/1.5 var(--font-body);color:var(--bg);margin-top:4px}

/* Akismet honeypot must stay invisible */
#dold-book .akismet-fields-container{display:none !important}

@media (max-width:760px){
  #dold-book form.contact-form{grid-template-columns:1fr}
  #dold-book form.contact-form button[type="submit"]{width:100%;padding:19px 24px}
}
/* ============================================================
   PAYMENT PLANS
   Sits under each pricing grid. Amounts are derived from the
   package price, so they cannot drift out of sync with it.
   ============================================================ */
.plans{
  border:2px solid var(--ink);border-radius:var(--r-card);
  padding:30px 32px;margin:0 0 40px;
}
.plans--ink{border-color:var(--accent);color:var(--bg)}
.plans--cream{border-color:var(--ink);color:var(--ink);margin-top:26px}
.plans__title{
  font:400 clamp(24px,2.08vw,30px)/1 var(--font-display);
  text-transform:uppercase;margin-bottom:10px;
}
.plans--ink .plans__title{color:var(--accent)}
.plans__note{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:24px;
}
.plans--ink .plans__note{color:var(--on-dark-muted)}
.plans--cream .plans__note{color:var(--ink-faint)}

.plans__table{width:100%;border-collapse:collapse;text-align:left}
.plans__table th,.plans__table td{padding:14px 12px;vertical-align:baseline}
.plans__table thead th{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding-top:0;white-space:nowrap;
}
.plans--ink thead th{color:var(--accent)}
.plans--cream thead th{color:var(--support-text)}
.plans__table tbody tr{border-top:1px solid currentColor}
.plans--ink tbody tr{border-top-color:rgba(244,241,234,.22)}
.plans--cream tbody tr{border-top-color:rgba(16,11,18,.18)}
.plans__table tbody th{padding-left:0;font-weight:400}
.plans__table td:last-child{padding-right:0}

.plans__name{
  display:block;font:400 19px/1.1 var(--font-display);
  text-transform:uppercase;letter-spacing:-.005em;
}
.plans__total{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;margin-top:5px;opacity:.7;
}
.plans__amount{font:400 24px/1 var(--font-display);display:inline-block}
.plans__count{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  margin-left:6px;opacity:.7;white-space:nowrap;
}

/* Stack into per-package blocks where a five-column table cannot breathe. */
@media (max-width:880px){
  .plans{padding:24px 22px}
  .plans__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .plans__table,.plans__table tbody,.plans__table tr,.plans__table th,.plans__table td{display:block;width:100%}
  .plans__table tbody tr{padding:18px 0}
  .plans__table tbody th{padding:0 0 12px}
  .plans__table td{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:7px 0;
  }
  .plans__table td::before{
    content:attr(data-label);
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;opacity:.75;
  }
  .plans__amount{font-size:21px}
}
@media (max-width:390px){
  .plans{padding:20px 16px}
  .plans__table td{flex-wrap:wrap;gap:4px 10px}
}
/* ============================================================
   TOUCH TARGETS
   Inline text links sit at 20-23px, below the 24px minimum and
   awkward to hit on a phone. Extend the hit area with a pseudo
   element so the visual treatment is untouched. Isolated links
   only — stacked lists get real spacing instead, so the enlarged
   areas cannot overlap each other.
   ============================================================ */
@media (max-width:760px){
  .card__link,
  .faq__aside-link,
  .site-header__logo{position:relative}

  .card__link::after,
  .faq__aside-link::after,
  .site-header__logo::after{
    content:"";position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);
    height:44px;min-width:44px;
  }

  /* Stacked link lists: real padding, and enough gap to stay separate. */
  .site-footer__links{gap:2px}
  .site-footer__links a{display:block;padding:11px 0}
  .site-footer__bottom a{display:inline-block;padding:6px 2px}
}