/* =========================================================================
   Handled — Editorial design system (website-v2)
   The "newest stylesheet." Warm paper, Newsreader serif display,
   Geist sans UI, Geist Mono marginalia, deep-navy + terracotta accents.
   Shared across the home page and service pages.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --paper:        #F4F1EA;
  --paper-warm:   #EFEBE0;
  --paper-3:      #E6DFCF;
  --paper-soft:   #F8F5EE;
  --ink:          #15141A;
  --ink-2:        #3A3934;
  --ink-3:        #615E56;
  --ink-4:        #9A968B;
  --line:         #DDD8C9;
  --line-soft:    #E9E5D8;
  --accent:       #2B3E63;       /* deep navy */
  --accent-deep:  #15233F;
  --accent-warm:  #B5552E;       /* terracotta */
  --accent-warm-2:#92421F;
  --terra:        var(--accent-warm);  /* alias: shared sections reference --terra */
  --line-strong:  var(--line);         /* alias: stronger hairline fallback */
  --green:        #3E5D3E;
  --gold:         #B8945A;
  --destructive:  #BC3B2E;       /* pricing featured / pop */

  --serif:        "Newsreader", "Times New Roman", Georgia, serif; /* @kind font */
  --sans:         "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; /* @kind font */
  --mono:         "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* @kind font */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01" 1;
  overflow-x: hidden;
}

/* Paper grain — very subtle */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(rgba(21,20,26,0.018) 1px, transparent 1px),
    radial-gradient(rgba(21,20,26,0.012) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .wrap { padding: 0 40px; } }
@media (min-width: 1024px) { .wrap { padding: 0 56px; } }

/* ====================================================================
   Buttons
   ==================================================================== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink); color: var(--paper);
  font: 500 14px var(--sans);
  text-decoration: none; border: none; border-radius: 7px;
  letter-spacing: -0.005em; cursor: pointer;
  transition: background .15s, transform .05s;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary svg { width: 14px; height: 14px; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  color: var(--ink);
  font: 500 14px var(--sans);
  text-decoration: none; border-radius: 7px;
  border: 1px solid var(--line);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--ink-3); }

/* ====================================================================
   Hero stats row (shared)
   ==================================================================== */
/* hero stats / guarantee numbers */
.hero-stats {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.hero-stats-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-warm);
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.hero-stats-label::before { content: ""; width: 24px; height: 1px; background: var(--accent-warm); }
.hero-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 720px) { .hero-stats-grid { grid-template-columns: 1fr; gap: 12px; } }
.hero-stat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 20px 22px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.hero-stat-top { display: flex; align-items: center; gap: 10px; }
.hero-stat-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-stat-check svg { width: 12px; height: 12px; }
.hero-stat-num { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.hero-stat-num em { font-style: normal; color: var(--accent); }
.hero-stat-h { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.hero-stat-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.hero-stat-key {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.hero-stat-val {
  font-family: var(--serif); font-size: 38px; font-weight: 500;
  letter-spacing: -0.035em; line-height: 1; color: var(--ink);
}
.hero-stat-val em { font-style: italic; color: var(--accent); }

/* ====================================================================
   Mast (editorial header)
   ==================================================================== */
.mast {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.mast-inner {
  display: flex; align-items: center; justify-content: space-between;
  /* vertical only — horizontal padding comes from .wrap on the same element */
  padding-top: 22px; padding-bottom: 22px;
}
.mast-brand { display: inline-flex; align-items: center; gap: 13px;
  text-decoration: none; color: var(--ink);
}
.mast-brand-mark {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em;
}
.mast-brand-name {
  font-family: "Archivo", "Geist", -apple-system, sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.mast-nav { display: flex; align-items: center; gap: 32px; }
.mast-link {
  font-size: 13px; color: var(--ink-3);
  text-decoration: none; letter-spacing: -0.005em;
  transition: color .15s; white-space: nowrap;
}
.mast-link:hover { color: var(--ink); }
.mast-link.is-current { color: var(--ink); }
.mast-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  padding: 7px 14px 7px 16px; border-radius: 7px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none;
  transition: background .15s; white-space: nowrap;
}
.mast-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.mast-cta svg { width: 12px; height: 12px; }

/* ====================================================================
   Generic section + eyebrow + heading
   ==================================================================== */
.section { position: relative; padding: 104px 0; }
@media (max-width: 720px) { .section { padding: 72px 0; } }
.section-muted { background: var(--paper-warm); }
.section-deep { background: var(--paper-3); }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--accent-warm); letter-spacing: 0.18em; text-transform: uppercase;
  display: block; margin: 0 0 28px;
}
.eyebrow.is-centered { text-align: center; }

.section-head { max-width: 760px; margin: 0 0 72px; }
.section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-h {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 500; letter-spacing: -0.032em; line-height: 1.03;
  margin: 0; text-wrap: balance;
}
.section-h em { font-style: normal; color: var(--accent); }
.section-lede {
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
  color: var(--ink-2); margin: 18px 0 0; max-width: 52ch; text-wrap: pretty;
}
.section-head.is-centered .section-lede { margin-left: auto; margin-right: auto; }

/* Cards (shared) */
.card-h { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 9px; }
.card-p { font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 0; }

/* Hero headline + lede (shared — both hero layouts use these) */
.hero-h { font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; margin: 20px 0 0; text-wrap: balance; }
.hero-h em { font-style: normal; color: var(--accent); }
.hero-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 24px 0 0; max-width: 46ch; text-wrap: pretty; }
.hero-lede strong { color: var(--ink); font-weight: 600; }

/* Shared hero layout (landing + SEO) — right slot is a prop (form or dossier) */
.hero { padding: 72px 0 80px; }
@media (min-width: 1000px) { .hero { padding: 104px 0 64px; } }
.hero-in { display: grid; gap: 56px; align-items: start; }
@media (min-width: 980px) { .hero-in { grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; } }
.ticks { display: grid; gap: 14px; margin-top: 32px; }
.tick { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.tick strong { color: var(--ink); font-weight: 600; }
.tick-ic { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
.hero-cta-row { display: none; margin-top: 32px; }
@media (max-width: 980px) { .hero-cta-row { display: flex; } }

/* Quote form (shared — landing hero + SEO CTA) */
.form-card { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 14px; padding: 30px; color: var(--ink); /* reset — dark sections like .letterpress set light text */ }
.form-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.form-card .sub { font-size: 13.5px; color: var(--ink-3); margin: 0 0 24px; }
.form-card .frow { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-card .frow label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.form-card .frow input { height: 44px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 0 14px; color: var(--ink); font: 400 15px var(--sans); outline: none; transition: border-color .15s, box-shadow .15s; }
.form-card .frow input::placeholder { color: var(--ink-4); }
.form-card .frow input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,62,99,0.12); }
.form-card .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .form-card .fgrid { grid-template-columns: 1fr; } }
.form-card .consent { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 18px; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.form-card .consent input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.form-card .consent a { color: var(--accent); text-decoration: underline; }
.form-card .form-submit { width: 100%; }
.form-card .form-note { text-align: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); margin-top: 13px; }

/* ====================================================================
   Dossier card (operational panel)
   ==================================================================== */
.dossier {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 80px -30px rgba(21,20,26,0.18);
}
.dossier-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.dossier-head .stamp { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-warm); }
.dossier-head .stamp::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm); animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,85,46,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(181,85,46,0); }
}
.dossier-title {
  font-family: var(--serif); font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 18px;
}
.dossier-rows { display: flex; flex-direction: column; gap: 14px; }
.dossier-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: baseline; }
.dossier-key {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.dossier-val { font-family: var(--serif); font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.dossier-val em { font-style: italic; color: var(--accent); }
.dossier-tag {
  font-family: var(--mono); font-size: 10px; color: var(--green);
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid rgba(62,93,62,0.25); background: rgba(62,93,62,0.05);
  letter-spacing: 0.05em; white-space: nowrap;
}
.dossier-tag.is-warm { color: var(--accent-warm); border-color: rgba(181,85,46,0.25); background: rgba(181,85,46,0.05); }
.dossier-rule { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0; }
.dossier-foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 0.05em; white-space: nowrap; gap: 16px;
}
.dossier-foot strong { color: var(--ink); font-weight: 600; }

/* ====================================================================
   Letterpress CTA + letter form
   ==================================================================== */
.letterpress {
  padding: 140px 0 120px;
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
}
.letterpress::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 0%, rgba(43,62,99,0.35), transparent 65%),
    radial-gradient(50% 50% at 90% 100%, rgba(181,85,46,0.18), transparent 60%);
}
.letterpress-grid { position: relative; display: grid; gap: 64px; align-items: end; }
@media (min-width: 1024px) { .letterpress-grid { grid-template-columns: 1.2fr 1fr; } }
.lp-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.55); letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.lp-eyebrow::before { content: ""; width: 32px; height: 1px; background: rgba(255,255,255,0.35); }
.lp-h {
  font-family: var(--serif); font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1;
  margin: 0 0 28px; color: var(--paper); text-wrap: balance; max-width: 12ch;
}
.lp-h em { font-style: italic; color: #C4D2F0; }
.lp-lede {
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
  color: rgba(255,255,255,0.72); max-width: 42ch; margin: 0 0 36px;
}
.lp-actions { display: flex; gap: 12px; }
.lp-btn-primary {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px;
  background: var(--paper); color: var(--ink); font: 500 14px var(--sans);
  text-decoration: none; border-radius: 7px; transition: background .15s; white-space: nowrap;
}
.lp-btn-primary:hover { background: #fff; }
.lp-btn-primary svg { width: 14px; height: 14px; }
.lp-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px;
  color: rgba(255,255,255,0.92); font: 500 14px var(--sans);
  text-decoration: none; border-radius: 7px; border: 1px solid rgba(255,255,255,0.2); white-space: nowrap;
}
.lp-btn-ghost:hover { border-color: rgba(255,255,255,0.4); }

.letter {
  background: var(--paper-soft); color: var(--ink); border-radius: 16px; padding: 36px 32px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 50px 100px -20px rgba(0,0,0,0.4),
    0 30px 60px -30px rgba(43,62,99,0.5);
}
.letter-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; gap: 16px;
}
.letter-h { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.022em; margin: 0 0 6px; }
.letter-sub { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--ink-3); margin: 0 0 22px; }
.letter-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.letter-row label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.letter-row input {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; font: 400 16px var(--serif); color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.letter-row input:hover { border-color: var(--ink-4); }
.letter-row input:focus {
  border-color: var(--accent); background: var(--paper-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.letter-row input::placeholder { color: var(--ink-4); font-style: normal; }
.letter-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.letter-submit {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px;
  background: var(--ink); color: var(--paper); font: 500 13px var(--sans);
  border: none; border-radius: 7px; cursor: pointer; letter-spacing: -0.005em; white-space: nowrap;
}
.letter-submit:hover { background: var(--accent-deep); }
.letter-submit svg { width: 14px; height: 14px; }
.letter-note {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}

/* ====================================================================
   Colophon footer
   ==================================================================== */
.colophon {
  padding: 36px 0; background: var(--paper); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.colophon-inner { display: flex; justify-content: space-between; gap: 24px; white-space: nowrap; flex-wrap: wrap; }

/* =========================================================================
   THEMES — same markup, swapped token set.
   Set on <html data-theme="…">. Default (no attribute) = editorial.
   ========================================================================= */

/* ---- Studio: warm-neutral, light, Geist typography ----
   A warm cousin of Mono — the same clean, light, software feel, but the
   greys are warmed (a neutral sand/stone scale) instead of pure grayscale.
   Geist sans throughout, no serif, no paper grain. */
html[data-theme="modern"] {
  --paper:        #FDFCFA;   /* tone 1 — lightest warm white · PRIMARY ground */
  --paper-warm:   #F6F3EC;   /* tone 2 — warm sand · alternating sections */
  --paper-3:      #EDE6D6;   /* tone 3 — soft warm sand · emphasis sections */
  --paper-soft:   #FFFFFF;   /* cards sit pure-white                        */
  --ink:          #1C1A17;   /* warm near-black                           */
  --ink-2:        #3D3A34;
  --ink-3:        #6B665C;   /* warm stone gray                           */
  --ink-4:        #ABA69B;
  --line:         #EAE5DC;   /* warm hairline                             */
  --line-soft:    #F3F0E9;
  --accent:       #2B3E63;   /* deep navy — restrained                    */
  --accent-deep:  #1B2B49;
  --accent-warm:  #A85636;   /* softened terracotta                       */
  --accent-warm-2:#8C4527;
  --green:        #46624A;
  --gold:         #B8945A;
  --destructive:  #BC3B2E;
  /* Mono typography: Geist sans in the display ("serif") slot */
  --serif:        "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; /* @kind font */
}
/* Sans display wants tighter tracking + non-italic emphasis */
html[data-theme="modern"] .hero-head,
html[data-theme="modern"] .svc-hero-h,
html[data-theme="modern"] .section-h,
html[data-theme="modern"] .cap-h,
html[data-theme="modern"] .lp-h,
html[data-theme="modern"] .manifesto-h,
html[data-theme="modern"] .vow-title,
html[data-theme="modern"] .price-name,
html[data-theme="modern"] .loc-name,
html[data-theme="modern"] .loc-fact-h,
html[data-theme="modern"] .support-card-h,
html[data-theme="modern"] .svc-cell-h,
html[data-theme="modern"] .principle-h,
html[data-theme="modern"] .quote-text,
html[data-theme="modern"] .dossier-title,
html[data-theme="modern"] .price-name {
  letter-spacing: -0.035em; font-weight: 600;
}
html[data-theme="modern"] .mast-brand-name { letter-spacing: -0.01em; font-weight: 800; }
html[data-theme="modern"] em { font-style: normal; }
/* Flat and clean — drop the paper grain like Mono */
html[data-theme="modern"] body::before { opacity: 0; }

/* ---- Black: Mono (shadcn neutral) in dark mode — pure grayscale ---- */
html[data-theme="noir"] {
  --paper:        #1A1A1A;   /* --background (dark)   */
  --paper-warm:   #212121;   /* --secondary (dark)    */
  --paper-3:      #262626;   /* tone 3 — deeper gray  */
  --paper-soft:   #212121;   /* --card (dark)         */
  --ink:          #FAFAFA;   /* --foreground          */
  --ink-2:        #E4E4E4;
  --ink-3:        #A1A1A1;   /* --muted-fg            */
  --ink-4:        #6E6E6E;
  --line:         #2E2E2E;   /* --border (dark)       */
  --line-soft:    #272727;
  --accent:       #FAFAFA;   /* mono — emphasis is light ink, not color */
  --accent-deep:  #FFFFFF;
  --accent-warm:  #A1A1A1;   /* eyebrows go neutral gray */
  --accent-warm-2:#C4C4C4;
  --green:        #D4D4D4;   /* status chips neutralize to light gray */
  --gold:         #A1A1A1;
  --destructive:  #E5E5E5;
}
/* grayscale dark behaves like Mono: non-italic emphasis, no grain */
html[data-theme="noir"] em { font-style: normal; }
html[data-theme="noir"] body::before { opacity: 0; }
html[data-theme="noir"] .letterpress { background: var(--paper-soft); }
html[data-theme="noir"] .letterpress::before { opacity: 0; }
html[data-theme="noir"] .lp-h { color: var(--ink); }
html[data-theme="noir"] .lp-h em { color: var(--accent); }
/* CTA primary button: --paper flips dark, so invert to stay legible */
html[data-theme="noir"] .lp-btn-primary { background: var(--ink); color: var(--paper); }
html[data-theme="noir"] .lp-btn-primary:hover { background: var(--accent-deep); color: var(--paper); }

/* ---- Mono: the original Handled app theme (shadcn neutral + Geist) ----
   Sourced from the product globals.css — pure grayscale, white paper,
   Geist sans display, 0-chroma neutrals. The cleanest, most "software" of
   the set. */
html[data-theme="mono"] {
  --paper:        #FFFFFF;   /* --background  oklch(1 0 0)      */
  --paper-warm:   #FAFAFA;   /* --secondary   oklch(0.985)      */
  --paper-3:      #F2F2F2;   /* tone 3 — slightly deeper gray   */
  --paper-soft:   #FFFFFF;   /* --card        oklch(1 0 0)      */
  --ink:          #232323;   /* --foreground  oklch(0.145 0 0)  */
  --ink-2:        #3A3A3A;   /* --primary     oklch(0.205 0 0)  */
  --ink-3:        #797979;   /* --muted-fg    oklch(0.556 0 0)  */
  --ink-4:        #A8A8A8;   /* --ring        oklch(0.708 0 0)  */
  --line:         #E5E5E5;   /* --border      oklch(0.922 0 0)  */
  --line-soft:    #EFEFEF;
  --accent:       #232323;   /* mono — emphasis is ink, not color */
  --accent-deep:  #000000;
  --accent-warm:  #6F6F6F;   /* eyebrows go neutral gray         */
  --accent-warm-2:#4A4A4A;
  --green:        #3A3A3A;   /* status chips neutralize to ink   */
  --gold:         #6F6F6F;
  --destructive:  #1C1C1C;   /* mono — featured card stays neutral ink */
  --serif:        "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; /* @kind font */
}
/* Sans display: tighter tracking, non-italic emphasis (like Modern) */
html[data-theme="mono"] .hero-head,
html[data-theme="mono"] .svc-hero-h,
html[data-theme="mono"] .section-h,
html[data-theme="mono"] .cap-h,
html[data-theme="mono"] .lp-h,
html[data-theme="mono"] .manifesto-h,
html[data-theme="mono"] .vow-title {
  letter-spacing: -0.04em; font-weight: 600;
}
html[data-theme="mono"] em { font-style: normal; }
/* Flat white — drop the paper grain */
html[data-theme="mono"] body::before { opacity: 0; }
/* Neutralize the status-chip tints so the theme stays pure grayscale */
html[data-theme="mono"] .chip-green,
html[data-theme="mono"] .dossier-tag,
html[data-theme="mono"] .loc-tag { color: var(--ink-2); border-color: var(--line); background: var(--paper-warm); }
html[data-theme="mono"] .chip-navy,
html[data-theme="mono"] .chip-warm { color: var(--ink-3); border-color: var(--line); background: var(--paper-warm); }
html[data-theme="mono"] .dossier-head .stamp,
html[data-theme="mono"] .panel-head .stamp { color: var(--ink-3); }
html[data-theme="mono"] .dossier-head .stamp::before,
html[data-theme="mono"] .panel-head .stamp::before { background: var(--ink-3); }

/* ---- Slate Blue: Mono, cooled — blue-tinted neutrals + a blue accent ----
   The grayscale-clean feel of Mono with a cool cast and real color emphasis. */
html[data-theme="slate"] {
  --paper:        #FBFCFD;
  --paper-warm:   #F1F4F8;
  --paper-3:      #EAEEF4;
  --paper-soft:   #FFFFFF;
  --ink:          #1B2430;   /* blue-black */
  --ink-2:        #33404F;
  --ink-3:        #647184;   /* cool slate gray */
  --ink-4:        #9AA6B6;
  --line:         #DCE3EC;
  --line-soft:    #EAEFF5;
  --accent:       #2F5FD0;   /* confident blue */
  --accent-deep:  #1E47A8;
  --accent-warm:  #3D6AD6;   /* eyebrows go blue, not terracotta */
  --accent-warm-2:#4E79E0;
  --green:        #3F6E52;
  --gold:         #7C89A0;
  --destructive:  #C0413A;
  --serif:        "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; /* @kind font */
}
html[data-theme="slate"] .hero-head,
html[data-theme="slate"] .svc-hero-h,
html[data-theme="slate"] .section-h,
html[data-theme="slate"] .cap-h,
html[data-theme="slate"] .lp-h,
html[data-theme="slate"] .manifesto-h,
html[data-theme="slate"] .vow-title {
  letter-spacing: -0.04em; font-weight: 600;
}
html[data-theme="slate"] em { font-style: normal; }
html[data-theme="slate"] body::before { opacity: 0; }

/* ---- Warm Sand: warmer than Neutral — cream/tan light + terracotta, serif ----
   Keeps the editorial Newsreader serif and paper grain for a softer feel. */
html[data-theme="sand"] {
  --paper:        #FBF6EE;
  --paper-warm:   #F3EADA;
  --paper-3:      #EFE3D0;
  --paper-soft:   #FFFDF8;
  --ink:          #2A2115;   /* warm dark brown-black */
  --ink-2:        #473827;
  --ink-3:        #7A6A54;
  --ink-4:        #B3A388;
  --line:         #E6D9C4;
  --line-soft:    #F0E7D7;
  --accent:       #B4562A;   /* terracotta */
  --accent-deep:  #8F3F1D;
  --accent-warm:  #C56A34;
  --accent-warm-2:#A0511F;
  --green:        #5C6B3E;
  --gold:         #C08A3E;
  --destructive:  #B33528;
}

/* ---- Forest: light neutral ground + a deep green accent ---- */
html[data-theme="forest"] {
  --paper:        #FAFBF9;
  --paper-warm:   #EEF2EC;
  --paper-3:      #E6EDE3;
  --paper-soft:   #FFFFFF;
  --ink:          #16201A;
  --ink-2:        #2C3A30;
  --ink-3:        #5C6B60;
  --ink-4:        #97A398;
  --line:         #DDE5D9;
  --line-soft:    #EBF0E8;
  --accent:       #2C6B4A;   /* deep green */
  --accent-deep:  #1D4E34;
  --accent-warm:  #357C57;
  --accent-warm-2:#276243;
  --green:        #2C6B4A;
  --gold:         #8A7A3E;
  --destructive:  #B33528;
}
html[data-theme="forest"] body::before { opacity: 0; }

/* ---- Midnight Blue: the dark counterpart to Slate — blue-black + blue accent ---- */
html[data-theme="midnight"] {
  --paper:        #10151F;
  --paper-warm:   #161C29;
  --paper-3:      #1B2332;
  --paper-soft:   #161D2B;
  --ink:          #EEF2F8;
  --ink-2:        #D3DAE6;
  --ink-3:        #93A0B5;
  --ink-4:        #5F6C82;
  --line:         #263042;
  --line-soft:    #1E2634;
  --accent:       #6C93F0;   /* luminous blue */
  --accent-deep:  #86A6F4;
  --accent-warm:  #7E9CEF;
  --accent-warm-2:#A9BEF6;
  --green:        #8FB39A;
  --gold:         #B9A46A;
  --destructive:  #E8938C;
  --serif:        "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; /* @kind font */
}
/* dark theme: behaves like noir — non-italic emphasis, no grain, inverted CTA */
html[data-theme="midnight"] em { font-style: normal; }
html[data-theme="midnight"] body::before { opacity: 0; }
html[data-theme="midnight"] .letterpress { background: var(--paper-soft); }
html[data-theme="midnight"] .letterpress::before { opacity: 0; }
html[data-theme="midnight"] .lp-h { color: var(--ink); }
html[data-theme="midnight"] .lp-h em { color: var(--accent); }
html[data-theme="midnight"] .lp-btn-primary { background: var(--ink); color: var(--paper); }
html[data-theme="midnight"] .lp-btn-primary:hover { background: var(--accent-deep); color: var(--paper); }
html[data-theme="midnight"] .hero-head,
html[data-theme="midnight"] .svc-hero-h,
html[data-theme="midnight"] .section-h,
html[data-theme="midnight"] .cap-h,
html[data-theme="midnight"] .lp-h,
html[data-theme="midnight"] .manifesto-h,
html[data-theme="midnight"] .vow-title {
  letter-spacing: -0.04em; font-weight: 600;
}

/* The site-wide design style is now chosen in /admin/style and applied by the
   catch-all route (data-theme on <html>); the old floating visitor switcher and
   its .theme-switch styles were removed. */

/* ============================================================
   MERGED FROM service-page.css — section + component layouts.
   ============================================================ */

/* =========================================================================
   Handled — Service-page module (editorial)
   Shared layout/components for service detail pages (eCommerce, B2B, …).
   Loads AFTER editorial.css. All values reference editorial tokens, so it
   themes automatically (Editorial / Modern / Noir).
   ========================================================================= */

/* ================= hero ================= */
.svc-hero { position: relative; padding: 80px 0 88px; }
@media (min-width: 1024px) { .svc-hero { padding: 104px 0 104px; } }
.breadcrumb {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 40px;
  display: flex; align-items: center; gap: 10px;
}
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink-4); }
.breadcrumb .here { color: var(--accent-warm); }

.svc-hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .svc-hero-grid { grid-template-columns: 1.15fr 1fr; gap: 72px; } }
.svc-hero-h {
  font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.25rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 0.98;
  margin: 22px 0 0; text-wrap: balance; max-width: 15ch;
}
.svc-hero-h em { font-style: italic; color: var(--accent); }
.svc-hero-lede {
  font-family: var(--serif); font-size: 20px; line-height: 1.5;
  color: var(--ink-2); max-width: 42ch; margin: 28px 0 48px; text-wrap: pretty;
}
.svc-hero-lede strong { font-weight: 600; color: var(--ink); }
.svc-hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* journey panel */
.journey-track { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.journey-step {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: center;
  padding: 13px 0; position: relative;
}
.journey-step + .journey-step { border-top: 1px solid var(--line-soft); }
.journey-bullet {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--green); background: var(--paper-soft); margin: 0 auto;
}
.journey-step.is-active .journey-bullet { background: var(--accent-warm); border-color: var(--accent-warm); }
.journey-step.is-pending .journey-bullet { border-color: var(--line); }
.journey-label { font-family: var(--serif); font-size: 16px; letter-spacing: -0.01em; }
.journey-time { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; letter-spacing: 0.04em; }

/* Dossier coast variants: a [data-dossier-variant] ancestor (la | nj | dynamic)
   picks which [data-dossier] child renders. Any other value — including
   "dynamic" before its swap script runs, or no JS at all — falls back to NJ. */
[data-dossier-variant] [data-dossier="la"] { display: none; }
[data-dossier-variant="la"] aside[data-dossier="la"] { display: block; }
[data-dossier-variant="la"] span[data-dossier="la"] { display: inline; }
[data-dossier-variant="la"] [data-dossier="nj"] { display: none; }

/* ================= capability sequence ================= */
.cap { padding: 96px 0; }
@media (max-width: 720px) { .cap { padding: 64px 0; } }
.cap:nth-child(even of .cap) { background: var(--paper-warm); }
.cap-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .cap-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.cap.is-flip .cap-copy { order: 2; }
@media (max-width: 999px) { .cap.is-flip .cap-copy { order: 0; } }
.cap-index {
  font-family: var(--mono); font-size: 11px; color: var(--accent-warm);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.cap-index::before { content: ""; width: 28px; height: 1px; background: var(--accent-warm); }
.cap-h {
  font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.85rem);
  font-weight: 500; letter-spacing: -0.026em; line-height: 1.06;
  margin: 0 0 18px; text-wrap: balance; max-width: 18ch;
}
.cap-h em { font-style: italic; color: var(--accent); }
.cap-body { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; margin: 0; }
.cap-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cap-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cap-points li::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-warm); margin-top: 0.5em;
}

/* panel — generic operational card */
.panel {
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 30px 70px -34px rgba(21,20,26,0.2);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; gap: 12px;
}
.panel-head .stamp { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.panel-head .stamp::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--green); }
.panel-head .stamp.is-warm { color: var(--accent-warm); }
.panel-head .stamp.is-warm::before { background: var(--accent-warm); }

/* data table (SKU / PO / line items) */
.sku-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sku-table th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 0 10px; border-bottom: 1px solid var(--line-soft);
}
.sku-table th.num, .sku-table td.num { text-align: right; }
.sku-table td { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.sku-table tr:last-child td { border-bottom: none; }
.sku-name { font-family: var(--serif); font-size: 15px; letter-spacing: -0.01em; }
.sku-code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.sku-num { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.sku-low { color: var(--accent-warm); }
.chip {
  font-family: var(--mono); font-size: 9.5px; padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.04em; white-space: nowrap;
}
.chip-green { color: var(--green); border: 1px solid rgba(62,93,62,0.25); background: rgba(62,93,62,0.05); }
.chip-warm { color: var(--accent-warm); border: 1px solid rgba(181,85,46,0.25); background: rgba(181,85,46,0.05); }
.chip-navy { color: var(--accent); border: 1px solid rgba(43,62,99,0.25); background: rgba(43,62,99,0.05); }

/* checklist */
.check-rows { display: flex; flex-direction: column; gap: 0; }
.check-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 0;
}
.check-row + .check-row { border-top: 1px solid var(--line-soft); }
.check-mark {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--paper-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.check-mark svg { width: 12px; height: 12px; }
.check-mark.is-pending { background: transparent; border: 1.5px dashed var(--line); }
.check-label { font-family: var(--serif); font-size: 15.5px; letter-spacing: -0.01em; }
.check-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

/* spec / packing / detail list */
.spec-rows { display: flex; flex-direction: column; gap: 12px; }
.spec-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; }
.spec-key { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.spec-val { font-family: var(--serif); font-size: 16px; letter-spacing: -0.01em; }
.spec-val em { font-style: italic; color: var(--accent); }

/* big-number clock / counter */
.clock {
  display: flex; align-items: baseline; gap: 14px; padding: 6px 0 18px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 16px;
}
.clock-big { font-family: var(--serif); font-size: 52px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.clock-big em { font-style: italic; color: var(--accent); font-size: 0.55em; }
.clock-cap { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.clock-tag { margin-left: auto; align-self: center; }

/* shipping label / barcode mock */
.label-mock {
  border: 1px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff;
}
html[data-theme="noir"] .label-mock { background: var(--paper-soft); }
.label-mock-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.label-mock-body { padding: 14px; }
.label-mock-to { font-family: var(--serif); font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
.label-mock-to span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); display:block; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.barcode { display: flex; gap: 1.5px; height: 46px; align-items: stretch; }
.barcode i { display: block; background: var(--ink); }
.label-mock-code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-align: center; margin-top: 8px; color: var(--ink); }

/* ================= guarantees (modern card row) ================= */
.guarantees { background: var(--paper-warm); padding: 56px 0; }
.guarantees-inner { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 760px) { .guarantees-inner { grid-template-columns: repeat(3, 1fr); } }
.guarantee {
  padding: 30px 28px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.guarantee:last-child { border-right: none; }
@media (max-width: 759px) { .guarantee:last-child { border-bottom: none; } }
@media (min-width: 760px) { .guarantee { border-bottom: none; } }
.guarantee-metric {
  font-size: 34px; font-weight: 600;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); margin-bottom: 16px;
}
.guarantee-h { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; }
.guarantee-d { font-size: 14px; color: var(--ink-3); margin-top: 7px; line-height: 1.6; }

/* ================= other-services grid ================= */
.svc-grid { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper-soft); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: 1fr 1fr 1fr; } }
.svc-cell {
  padding: 28px 26px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  text-decoration: none; color: var(--ink); display: block; transition: background .15s;
}
.svc-cell:hover { background: rgba(255,255,255,0.5); }
html[data-theme="noir"] .svc-cell:hover { background: rgba(255,255,255,0.04); }
.svc-cell-num { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.1em; }
.svc-cell-h {
  font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.018em;
  margin: 12px 0 8px; display: flex; align-items: center; gap: 8px;
}
.svc-cell-h .arr { font-size: 14px; color: var(--ink-4); transition: transform .15s, color .15s; }
.svc-cell:hover .arr { transform: translate(3px,-3px); color: var(--accent-warm); }
.svc-cell-d { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 0; }

/* ================= integrations strip ================= */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scroll 50s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-cell {
  width: 168px; height: 86px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(28,26,23,0.12); border-radius: 12px;
  font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; color: var(--ink-2);
}
/* Square / compact marks — comfortable padding inside the cell */
.logo-cell img { max-height: 30px; max-width: 104px; width: auto; opacity: 0.72; }
/* Wide wordmark logos: run closer to the cell edges (less horizontal padding)
   so they read at a confident size — without widening the cell or enlarging
   the square marks. */
/* Wide WORDMARK marks: simple-icons use a square 24x24 canvas, so a wide
   wordmark is a thin glyph centered in a square. The lettering size scales with
   the box size — tuned per-mark since each glyph fills its canvas differently. */
.logo-cell img[alt="DHL"],
.logo-cell img[alt="Walmart"],
.logo-cell img[alt="WooCommerce"] { max-height: 80px; max-width: 80px; }
.logo-cell img[alt="FedEx"] { max-height: 68px; max-width: 68px; }
.logo-cell img[alt="eBay"] { max-height: 62px; max-width: 62px; }
.logo-cell img[alt="AfterShip"] { max-height: 50px; max-width: 50px; }
/* Squarish marks that read fine a touch larger than the base */
.logo-cell img[alt="Wix"] { max-height: 40px; max-width: 40px; }
.logo-cell img[alt="BigCommerce"],
.logo-cell img[alt="Squarespace"] { max-height: 42px; max-width: 42px; }
.logo-cell .logo-wm { height: 28px; width: 28px; fill: #6F6C63; opacity: 0.72; }
.logo-cell:hover img, .logo-cell:hover .logo-wm { opacity: 1; }
html[data-theme="noir"] .logo-cell img { filter: invert(1) brightness(1.4); opacity: 0.6; }
html[data-theme="noir"] .logo-cell .logo-wm { fill: #B7B4AD; opacity: 0.7; }

/* ================= pricing (3-panel, middle elevated) ================= */
.pricing-3 {
  display: grid; gap: 16px; align-items: center;
  grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto;
}
@media (min-width: 880px) { .pricing-3 { grid-template-columns: 1fr 1.04fr 1fr; gap: 0; } }
.price-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 30px;
  display: flex; flex-direction: column;
  text-align: left;
}
@media (min-width: 880px) {
  /* let the side cards tuck under the taller middle one */
  .price-card { border-radius: 0; }
  .price-card:first-child { border-radius: 14px 0 0 14px; }
  .price-card:last-child { border-radius: 0 14px 14px 0; border-left: none; }
  .price-card:nth-child(2) { border-left: none; }
}
.price-card:not(.is-featured) {
  background: transparent;
  border-color: var(--line);
}
.price-card.is-featured {
  padding: 56px 34px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 16px;
  position: relative; z-index: 2;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 36px 80px -30px rgba(21,20,26,0.45);
}
.price-card.is-featured .price-name { color: var(--paper); }
.price-card.is-featured .price-num { color: rgba(255,255,255,0.5); }
.price-card.is-featured .price-basis { color: rgba(255,255,255,0.6); }
.price-card.is-featured .price-desc { color: rgba(255,255,255,0.78); }
.price-card.is-featured .btn-primary { background: var(--paper); color: var(--ink); }
.price-card.is-featured .btn-primary:hover { background: #FFF; }
.price-tag {
  align-self: flex-start; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper);
  background: var(--accent-warm); padding: 4px 11px; border-radius: 999px;
  margin-bottom: 18px;
}
.price-num { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.12em; margin-bottom: 18px; }
.price-name { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
.is-featured .price-name { font-size: 30px; }
.price-basis { font-family: var(--mono); font-size: 10.5px; color: var(--accent-warm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.price-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.price-card .btn-primary { margin-top: 28px; width: 100%; justify-content: center; }
.price-note {
  margin: 32px auto 0; max-width: 760px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-3);
}

/* ================= support ================= */
.support-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .support-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .support-grid { grid-template-columns: repeat(4, 1fr); } }
.support-card { border-top: 2px solid var(--ink); padding: 22px 0 0; }
.support-ic { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; }
.support-ic svg { width: 22px; height: 22px; display: block; }
.support-card-k { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.1em; margin-bottom: 14px; }
.support-card-h { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.018em; margin: 0 0 8px; line-height: 1.15; }
.support-card-d { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 0; }

/* ================= locations ================= */
.loc-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .loc-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.loc-pair { display: grid; gap: 16px; }
.loc-card {
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
}
.loc-code { font-family: var(--mono); font-size: 12px; color: var(--accent-warm); letter-spacing: 0.06em; }
.loc-name { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.loc-sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.loc-tag { font-family: var(--mono); font-size: 10px; color: var(--green); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(62,93,62,0.25); background: rgba(62,93,62,0.05); white-space: nowrap; }
.loc-facts { display: flex; flex-direction: column; gap: 0; }
.loc-fact { padding: 22px 0; border-top: 1px solid var(--line); }
.loc-fact:last-child { border-bottom: 1px solid var(--line); }
.loc-fact-h { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 6px; }
.loc-fact-h em { font-style: italic; color: var(--accent); }
.loc-fact-d { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 44ch; }

/* ================= testimonials (rotating) + customers ================= */
.tm-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .tm-grid { grid-template-columns: 1.7fr 1fr; gap: 64px; } }
.tm-quote {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.4rem); font-weight: 500;
  font-style: italic; letter-spacing: -0.02em; line-height: 1.28; color: var(--ink);
  margin: 0; text-wrap: pretty; transition: opacity .3s ease, transform .3s ease;
}
.tm-author { display: flex; align-items: center; gap: 14px; margin-top: 32px; transition: opacity .3s ease; }
.tm-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; font-weight: 500;
}
.tm-name { font-family: var(--serif); font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.tm-card { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.tm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-card-tag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-warm); }
.tm-count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.06em; white-space: nowrap; }
.tm-stars { display: flex; gap: 3px; margin-top: 14px; }
.tm-stars svg { width: 16px; height: 16px; }
.tm-source { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 14px; letter-spacing: 0.04em; }
.tm-dots { display: flex; gap: 8px; margin-top: 24px; }
.tm-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--line); transition: background .2s, width .2s; }
.tm-dot.is-on { width: 26px; border-radius: 999px; background: var(--accent-warm); }
.tm-fade { opacity: 0; transform: translateY(6px); }

/* customers marquee */
.customers { padding: 56px 0 88px; background: var(--paper); }
.customers-label { text-align: center; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-4); margin-bottom: 36px; }
.customers-marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.customers-track { display: flex; gap: 56px; width: max-content; animation: scroll 60s linear infinite; }
.customers-name { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink-3); white-space: nowrap; transition: color .2s; }
.customers-name:hover { color: var(--ink); }
@media (max-width: 600px) { .customers-name { font-size: 20px; } }

/* ================= FAQ ================= */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 26px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500;
  letter-spacing: -0.018em; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-num { font-family: var(--mono); font-size: 11px; color: var(--accent-warm); letter-spacing: 0.08em; flex-shrink: 0; padding-top: 8px; width: 36px; }
.faq-q-text { flex: 1; }
.faq-sign { flex-shrink: 0; width: 22px; height: 22px; position: relative; margin-top: 6px; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--ink-3); transition: transform .2s, opacity .2s; }
.faq-sign::before { top: 10px; left: 0; width: 22px; height: 1.5px; }
.faq-sign::after { left: 10px; top: 0; width: 1.5px; height: 22px; }
.faq-item[open] .faq-sign::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 0 28px 60px; max-width: 70ch; }
.faq-a p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 640px) { .faq-a { padding-left: 0; } }