/* ==================== SELF-HOSTED FONTS ====================
   Served from this origin instead of fonts.googleapis.com, so loading a page no
   longer hands a visitor IP to a third party and no longer costs two extra DNS and
   TLS round trips. Latin and latin-ext subsets only. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Hallmark · macrostructure: Technical/Blueprint (custom, derived from comparison pass)
 * theme: custom (vibe: "precise, configurator, blueprint-on-paper") · paper oklch(95% 0.012 240)
 * accent oklch(48% 0.18 260) signal-blue · IBM Plex Sans + IBM Plex Mono
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 * Craftvane: websites + AI automation for small businesses. Locked 2026-08-21.
 */

/* ============================ TOKENS ============================ */
:root{
  --color-paper:      oklch(100% 0 0);
  --color-paper-2:     oklch(97% 0.008 240);
  --color-card:        oklch(98.5% 0.005 240);
  --color-ink:         oklch(22% 0.045 258);
  --color-ink-soft:    oklch(38% 0.04 255);
  --color-muted:       oklch(50% 0.032 252);
  --color-line:        oklch(88% 0.014 240);
  --color-grid:        oklch(93% 0.01 240);
  --shadow-card: 0 1px 2px oklch(30% 0.03 255 / 0.05), 0 4px 12px oklch(30% 0.03 255 / 0.06);
  --color-accent:      oklch(64% 0.196 42);
  --color-accent-hi:   oklch(70% 0.18 42);
  --color-accent-dim:  oklch(52% 0.17 41);
  --color-accent-press: oklch(46% 0.155 41);
  --color-on-accent:   oklch(99% 0.006 240);
  --color-focus:       oklch(70% 0.18 42);

  --font-display: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-display: clamp(2.1rem, 4.6vw, 3.4rem);
  --text-display-s: clamp(1.7rem, 3.2vw, 2.3rem);
  --text-lg: 1.2rem;
  --text-md: 1rem;
  --text-sm: .88rem;
  --text-xs: .76rem;

  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  --radius-sm: 3px;
  --radius-md: 6px;
}

/* ============================ BASE ============================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; font-style:normal; margin:0; overflow-wrap:anywhere; min-width:0; }
p{ margin:0; }
.wrap{ max-width:1120px; margin:0 auto; padding-inline:1.5rem; }

:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }

/* Skip link: off screen until focused, then pinned to the top left so a keyboard
   user can actually see the target they just landed on. */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--color-ink);
  color:var(--color-paper); font-family:var(--font-mono); font-size:.85rem;
  padding:.7rem 1.1rem; text-decoration:none; }
.skip:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================ NAV (title block) ============================ */
.site-nav{ border-bottom:1px solid var(--color-line); background:var(--color-paper); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem; gap:1rem; }
.wordmark{ font-family:var(--font-mono); font-weight:600; font-size:.98rem; letter-spacing:.08em; text-decoration:none; color:var(--color-ink); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a:not(.btn){ font-size:.92rem; text-decoration:none; color:var(--color-ink-soft); position:relative; padding-bottom:2px; transition:color var(--dur-fast) var(--ease-out); }
.nav-links a:not(.btn)::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--color-accent); transition:right var(--dur-base) var(--ease-out); }
.nav-links a:not(.btn):hover::after{ right:0; }
.nav-links a:not(.btn):hover{ color:var(--color-accent-dim); }
.nav-links .btn{ margin-left:.4rem; }
.nav-toggle{ display:none; }
.title-block{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-muted); border-top:1px solid var(--color-line); padding-block:.5rem;
}
@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:var(--color-paper);
    flex-direction:column; align-items:flex-start; gap:1.4rem; padding:5rem 1.5rem 2rem;
    transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out);
    border-left:1px solid var(--color-line);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.05rem; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:1px solid var(--color-line); border-radius:var(--radius-sm); background:none; cursor:pointer;
  }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:''; display:block; width:18px; height:2px; background:var(--color-ink); position:relative;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
}

/* ============================ BUTTONS ============================ */
.btn{
  font-family:var(--font-mono); font-weight:600; font-size:.85rem; letter-spacing:.01em;
  padding:.85rem 1.4rem; border-radius:var(--radius-sm); border:1px solid var(--color-accent-dim);
  background:var(--color-accent-dim); color:var(--color-on-accent); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  box-shadow:0 1px 2px oklch(55% 0.19 42 / .12), 0 2px 6px oklch(55% 0.19 42 / .1);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn:hover{ background:var(--color-accent-press); transform:translateY(-1px); box-shadow:0 2px 4px oklch(55% 0.19 42 / .14), 0 4px 10px oklch(55% 0.19 42 / .14); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 2px oklch(55% 0.19 42 / .12); }
.btn.ghost{ background:transparent; color:var(--color-ink); border-color:var(--color-line); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--color-accent-dim); color:var(--color-accent-dim); background:transparent; box-shadow:none; }

/* ============================ HERO ============================ */
.hero{ background:var(--color-paper); }
.hero .wrap{ padding-block:var(--space-xl) var(--space-2xl); }
.hero .status{
  display:inline-flex; gap:1rem; flex-wrap:wrap; font-family:var(--font-mono);
  font-size:var(--text-xs); letter-spacing:.02em; color:var(--color-muted);
  border:1px solid var(--color-line); border-left:3px solid var(--color-accent); border-radius:var(--radius-sm);
  padding:.55rem .9rem .55rem 1rem; margin-bottom:1.8rem; background:var(--color-card); box-shadow:var(--shadow-card);
}
.hero .status b{ color:var(--color-accent-dim); font-weight:600; }
.hero h1{ font-size:var(--text-display); line-height:1.08; letter-spacing:-.015em; max-width:18ch; margin-bottom:1.1rem; text-wrap:balance; }
.hero .lede{ font-size:1.06rem; line-height:1.65; color:var(--color-ink-soft); max-width:56ch; margin-bottom:1.9rem; }
.hero .cta-row{ display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.spec-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--color-line); border:1px solid var(--color-line); border-radius:var(--radius-md); overflow:hidden; }
.spec-grid > div{ background:var(--color-card); padding:1.1rem 1.2rem; }
.spec-grid .k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); margin-bottom:.4rem; }
.spec-grid .v{ font-size:.98rem; line-height:1.5; font-weight:500; }
@media (max-width:700px){ .spec-grid{ grid-template-columns:1fr; } }

/* ============================ PAGE HEAD (interior pages) ============================ */
.page-head{ background:var(--color-paper); border-bottom:1px solid var(--color-line); }
.page-head .wrap{ padding-block:var(--space-xl) var(--space-lg); }
.page-head .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.8rem; }
.page-head h1{ font-size:var(--text-display); line-height:1.1; letter-spacing:-.015em; max-width:20ch; margin-bottom:1.1rem; text-wrap:balance; }
.page-head .lede{ font-size:1.05rem; line-height:1.65; color:var(--color-ink-soft); max-width:58ch; }

/* ============================ STEPS ============================ */
.steps{ background:var(--color-paper); }
.steps .wrap{ padding-block:var(--space-xl); }
.steps .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-muted); margin-bottom:.7rem; }
.steps h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:2.2rem; max-width:28ch; text-wrap:balance; }
.step-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:820px){ .step-grid{ grid-template-columns:1fr; } }
.step{ border:1px solid var(--color-line); border-top:3px solid var(--color-accent); border-radius:var(--radius-md); padding:1.5rem 1.6rem; background:var(--color-card); box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.step:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 10px 24px oklch(30% 0.03 255 / .1); }
.step .n{ font-family:var(--font-mono); font-size:.78rem; color:var(--color-accent-dim); margin-bottom:.7rem; }
.step h3{ font-size:1.15rem; margin-bottom:.6rem; }
.step p{ color:var(--color-ink-soft); font-size:.94rem; line-height:1.55; }

/* ============================ PRICING CARDS ============================ */
.price-cards{ background:var(--color-paper); }
.price-cards .wrap{ padding-block:var(--space-xl); }
.price-card-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
@media (max-width:820px){ .price-card-grid{ grid-template-columns:1fr; } }
.price-card{ border:1px solid var(--color-line); border-top:3px solid var(--color-accent); border-radius:var(--radius-md); padding:2rem 2.1rem; background:var(--color-card); box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.price-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 10px 24px oklch(30% 0.03 255 / .1); }
.price-card .tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:1rem; }
.price-card h2, .price-card h3{ font-size:1.5rem; margin-bottom:.5rem; }
.price-card .amount{ font-family:var(--font-display); font-size:2.1rem; font-weight:600; margin-bottom:.3rem; }
.price-card .amount span{ font-family:var(--font-mono); font-size:.9rem; font-weight:500; color:var(--color-muted); }
.price-card .note{ color:var(--color-muted); font-size:.88rem; margin-bottom:1.4rem; }
.price-card ul{ margin:0 0 1.6rem; padding:0; list-style:none; display:grid; gap:.6rem; }
.price-card li{ position:relative; padding-left:1.05rem; font-size:.94rem; color:var(--color-ink-soft); }
.price-card li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:1px; background:var(--color-accent); }

.diff-note{ background:var(--color-paper-2); border-block:1px solid var(--color-line); }
.diff-note .wrap{ padding-block:var(--space-lg); display:flex; gap:1rem; align-items:flex-start; }
.diff-note .mark{ font-family:var(--font-mono); color:var(--color-accent-dim); font-weight:600; flex-shrink:0; }
.diff-note p{ color:var(--color-ink-soft); line-height:1.6; max-width:64ch; }

/* ============================ ABOUT BODY ============================ */
.about-body{ background:var(--color-paper); }
.about-body .wrap{ padding-block:var(--space-xl); max-width:760px; }
.about-body p{ font-size:1.06rem; line-height:1.75; color:var(--color-ink-soft); margin-bottom:1.3rem; }
.about-body p:first-child::first-letter{ float:left; font-family:var(--font-display); font-weight:600; font-size:3.1em; line-height:.85; padding:.03em .08em 0 0; color:var(--color-accent); }

/* ============================ CONTACT FORM ============================ */
.contact-wrap{ background:var(--color-paper); }
.contact-wrap .wrap{ padding-block:var(--space-xl); display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:820px){ .contact-wrap .wrap{ grid-template-columns:1fr; gap:2rem; } }
.checklist{ display:grid; gap:1rem; }
.checklist .row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:start; }
.checklist .n{ font-family:var(--font-mono); font-size:.78rem; color:var(--color-accent-dim); padding-top:.2rem; }
.checklist p{ font-size:.96rem; line-height:1.55; color:var(--color-ink-soft); }
.form-card{ border:1px solid var(--color-line); border-radius:var(--radius-md); padding:1.8rem; background:var(--color-card); box-shadow:var(--shadow-card); }
.form-field{ display:grid; gap:.4rem; margin-bottom:1.1rem; }
.form-field label{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--color-muted); }
.form-field input, .form-field textarea{
  font-family:var(--font-body); font-size:.96rem; padding:.7rem .85rem; border:1px solid var(--color-line);
  border-radius:var(--radius-sm); background:var(--color-paper); color:var(--color-ink); width:100%;
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--color-focus); outline-offset:1px; border-color:var(--color-accent); }
.form-field textarea{ min-height:110px; resize:vertical; }
.form-card .btn{ width:100%; justify-content:center; }

/* ============================ ARTICLE ============================ */
.article-body{ background:var(--color-paper); }
.article-body .wrap{ padding-block:var(--space-xl); max-width:720px; }
.article-body p{ font-size:1.06rem; line-height:1.75; color:var(--color-ink-soft); margin-bottom:1.3rem; }
.article-body h2{ font-size:1.5rem; line-height:1.25; margin:2.4rem 0 1rem; }
.article-body ul{ margin:0 0 1.3rem; padding-left:1.3rem; }
.article-body li{ font-size:1.02rem; line-height:1.7; color:var(--color-ink-soft); margin-bottom:.5rem; }
.article-body ul li::marker{ color:var(--color-accent); }
.article-body b, .article-body strong{ color:var(--color-ink); font-weight:600; }
.article-body p a, .article-body li a{
  color:var(--color-accent-dim); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; transition:color var(--dur-fast) var(--ease-out);
}
.article-body p a:hover, .article-body li a:hover{ color:var(--color-accent-press); }
.article-body .stat-block{
  border:1px solid var(--color-line); border-left:3px solid var(--color-accent); border-radius:var(--radius-sm);
  background:var(--color-card); padding:1.2rem 1.4rem; margin:1.6rem 0; box-shadow:var(--shadow-card);
}
.article-body .stat-block .num{ font-family:var(--font-display); font-weight:600; font-size:1.8rem; color:var(--color-accent); line-height:1; margin-bottom:.4rem; }
.article-body .stat-block p{ font-size:.94rem; color:var(--color-ink-soft); margin:0; }
.sources-block{ border-top:1px solid var(--color-line); margin-top:2.4rem; padding-top:1.4rem; }
.sources-block .eyebrow{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted); margin-bottom:.8rem; }
.sources-block ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.sources-block a{ font-size:.9rem; color:var(--color-accent-dim); text-decoration:underline; }

.guide-list{ background:var(--color-paper); }
.guide-list .wrap{ padding-block:var(--space-xl); }
.guide-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:760px){ .guide-grid{ grid-template-columns:1fr; } }
.guide-card{
  border:1px solid var(--color-line); border-top:3px solid var(--color-accent); border-radius:var(--radius-md);
  padding:1.6rem 1.7rem; background:var(--color-card); box-shadow:var(--shadow-card); text-decoration:none; color:inherit;
  display:block; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.guide-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 10px 24px oklch(30% 0.03 255 / .1); }
.guide-card .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.8rem; }
.guide-card h2, .guide-card h3{ font-size:1.25rem; line-height:1.3; margin-bottom:.7rem; }
.guide-card p{ color:var(--color-ink-soft); font-size:.94rem; line-height:1.55; margin:0; }

/* ============================ DIAGNOSTIC ============================ */
.diagnostic{ background:var(--color-paper-2); border-block:1px solid var(--color-line); }
.diagnostic .wrap{ padding-block:var(--space-xl); }
.diagnostic .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.7rem; }
.diagnostic h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:2rem; max-width:26ch; text-wrap:balance; }
.diag-list{ display:grid; gap:1px; background:var(--color-line); border:1px solid var(--color-line); border-radius:var(--radius-md); overflow:hidden; }
.diag-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:start; background:var(--color-card); padding:1.1rem 1.3rem; }
.diag-row .n{
  font-family:var(--font-mono); font-weight:600; font-size:.76rem; color:var(--color-on-accent);
  background:var(--color-accent); width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.diag-row p{ font-size:1rem; line-height:1.55; }
.diag-row p b{ font-weight:600; }

/* ============================ MODULES ============================ */
.modules{ background:var(--color-paper); }
.modules .wrap{ padding-block:var(--space-xl); }
.modules > .wrap > .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-muted); margin-bottom:.7rem; }
.modules h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:2.4rem; max-width:30ch; text-wrap:balance; }
.module-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:760px){ .module-grid{ grid-template-columns:1fr; } }
.module{ border:1px solid var(--color-line); border-top:3px solid var(--color-accent); border-radius:var(--radius-md); padding:1.6rem 1.7rem; background:var(--color-card); box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.module:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 10px 24px oklch(30% 0.03 255 / .1); }
.module .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.9rem; }
.module h3{ font-size:1.35rem; line-height:1.2; margin-bottom:.8rem; }
.module p{ color:var(--color-ink-soft); line-height:1.6; margin-bottom:1.1rem; }
.module ul{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.module li{ position:relative; padding-left:1.05rem; font-size:.94rem; color:var(--color-ink-soft); }
.module li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:1px; background:var(--color-accent); }

/* ============================ PRICING TEASER ============================ */
.price-teaser{ background:var(--color-paper-2); border-block:1px solid var(--color-line); }
.price-teaser .wrap{ padding-block:var(--space-xl); display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
@media (max-width:760px){ .price-teaser .wrap{ grid-template-columns:1fr; text-align:left; } }
.price-teaser h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:1rem; }
.price-teaser .rows{ display:grid; gap:.5rem; font-family:var(--font-mono); font-size:.92rem; color:var(--color-ink-soft); }
.price-teaser .rows b{ color:var(--color-ink); font-weight:600; }

/* ============================ FINAL CTA ============================ */
.final-cta{
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, oklch(64% 0.196 42 / .16), transparent 60%),
    var(--color-ink);
  color:var(--color-paper);
}
.final-cta .wrap{ padding-block:var(--space-xl); text-align:center; }
.final-cta h2{ font-size:var(--text-display-s); line-height:1.18; max-width:22ch; margin:0 auto 1.4rem; text-wrap:balance; }
.final-cta .btn{ background:var(--color-accent-hi); border-color:var(--color-accent-hi); color:var(--color-ink); }
/* The shared hover turns the button dark, which would be unreadable against dark ink text on a dark band. */
.final-cta .btn:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-ink); }

/* ============================ DETAIL GRID (4-up automation breakdown) ============================ */
.detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:760px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-card{ border:1px solid var(--color-line); border-top:3px solid var(--color-accent); border-radius:var(--radius-md); padding:1.5rem 1.6rem; background:var(--color-card); box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.detail-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 10px 24px oklch(30% 0.03 255 / .1); }
.detail-card .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.8rem; }
.detail-card h3{ font-size:1.15rem; margin-bottom:.6rem; }
.detail-card p{ color:var(--color-ink-soft); font-size:.92rem; line-height:1.6; }

/* ============================ FAQ ============================ */
.faq-section{ background:var(--color-paper-2); border-block:1px solid var(--color-line); }
.faq-section .wrap{ padding-block:var(--space-xl); max-width:820px; }
.faq{ display:grid; gap:.75rem; margin-top:1.5rem; }
.faq details{
  border:1px solid var(--color-line); border-radius:var(--radius-md); background:var(--color-card);
  padding:1rem 1.3rem; box-shadow:var(--shadow-card);
}
.faq summary{
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-family:var(--font-mono); font-size:1.2rem; color:var(--color-accent-dim);
  flex-shrink:0; transition:transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--color-ink-soft); font-size:.96rem; line-height:1.65; margin-top:.8rem; }

/* ============================ WORK / PROOF ============================ */
.work-list{ background:var(--color-paper); }
.work-list .wrap{ padding-block:var(--space-xl); display:grid; gap:var(--space-2xl); }
.work-item{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:2.5rem; align-items:start; }
@media (max-width:900px){ .work-item{ grid-template-columns:1fr; gap:1.8rem; } }
.work-shot{
  border:1px solid var(--color-line); border-radius:var(--radius-md); overflow:hidden;
  background:var(--color-card); box-shadow:var(--shadow-card);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.work-shot:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 12px 28px oklch(30% 0.03 255 / .12); }
.browser-bar{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem;
  border-bottom:1px solid var(--color-line); background:var(--color-paper-2);
}
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:var(--color-line); flex-shrink:0; }
.browser-bar span{
  font-family:var(--font-mono); font-size:.68rem; color:var(--color-muted);
  margin-left:.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.work-shot img{ width:100%; height:auto; }
.work-meta .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.8rem; }
.work-meta h2{ font-size:1.6rem; line-height:1.2; margin-bottom:.9rem; }
.work-meta p{ color:var(--color-ink-soft); font-size:.98rem; line-height:1.65; margin-bottom:1.1rem; }
.work-specs{ display:grid; gap:1px; background:var(--color-line); border:1px solid var(--color-line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:1.3rem; }
.work-specs div{ display:grid; grid-template-columns:9rem minmax(0,1fr); gap:.9rem; background:var(--color-card); padding:.65rem .9rem; }
@media (max-width:420px){ .work-specs div{ grid-template-columns:1fr; gap:.2rem; } }
.work-specs dt, .work-specs .k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--color-muted); align-self:center; }
.work-specs dd, .work-specs .v{ margin:0; font-size:.92rem; line-height:1.5; }
.work-note{
  border-left:3px solid var(--color-accent); background:var(--color-paper-2);
  padding:.85rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1.3rem;
}
.work-note p{ font-size:.9rem; line-height:1.6; color:var(--color-ink-soft); margin:0; }

/* Article block sitting inside a full-width page: keep the 1120 gutter, cap the measure */
.article-body.inset .wrap{ max-width:1120px; }
.article-body.inset .wrap > *{ max-width:68ch; }
.article-body.inset .sources-block{ max-width:68ch; }

/* ============================ GUARANTEE ============================ */
.guarantee{ background:var(--color-paper-2); border-block:1px solid var(--color-line); }
.guarantee .wrap{ padding-block:var(--space-xl); }
.guarantee-card{
  border:1px solid var(--color-line); border-left:4px solid var(--color-accent); border-radius:var(--radius-md);
  background:var(--color-card); box-shadow:var(--shadow-card); padding:2rem 2.2rem; max-width:820px;
}
.guarantee-card .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.9rem; }
.guarantee-card h2{ font-size:var(--text-display-s); line-height:1.18; margin-bottom:1rem; max-width:24ch; text-wrap:balance; }
.guarantee-card p{ color:var(--color-ink-soft); font-size:1.02rem; line-height:1.7; margin-bottom:1rem; }
.guarantee-card p:last-child{ margin-bottom:0; }
.guarantee-card b{ color:var(--color-ink); font-weight:600; }

/* ============================ INDUSTRY CARDS ============================ */
.industry-list{ background:var(--color-paper); }
.industry-list .wrap{ padding-block:var(--space-xl); }
.industry-list > .wrap > .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-muted); margin-bottom:.7rem; }
.industry-list h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:2.2rem; max-width:30ch; text-wrap:balance; }
.industry-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:760px){ .industry-grid{ grid-template-columns:1fr; } }
.industry-card{
  border:1px solid var(--color-line); border-top:3px solid var(--color-accent); border-radius:var(--radius-md);
  padding:1.5rem 1.6rem; background:var(--color-card); box-shadow:var(--shadow-card); text-decoration:none; color:inherit;
  display:block; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.industry-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px oklch(30% 0.03 255 / .07), 0 10px 24px oklch(30% 0.03 255 / .1); }
.industry-card .tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.7rem; }
.industry-card h3{ font-size:1.2rem; line-height:1.3; margin-bottom:.6rem; }
.industry-card p{ color:var(--color-ink-soft); font-size:.93rem; line-height:1.55; margin:0; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--color-paper); border-top:2px solid var(--color-accent); }
.site-footer .wrap{ padding-block:var(--space-lg); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; }
.site-footer .f-links{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.site-footer a{ text-decoration:none; color:var(--color-muted); font-size:.88rem; }
.site-footer a:hover{ color:var(--color-accent-dim); }
.site-footer .f-meta a{ font-size:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.site-footer .f-meta{ font-family:var(--font-mono); font-size:.76rem; color:var(--color-muted); }

/* ============================ CHATBOT WIDGET ============================ */
.cv-chat-launcher{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:80;
  width:56px; height:56px; border-radius:50%; border:1px solid var(--color-accent-dim);
  background:var(--color-accent-dim); color:var(--color-on-accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out);
}
.cv-chat-launcher:hover{ transform:translateY(-2px); background:var(--color-accent-press); }
.cv-chat-panel{
  position:fixed; right:1.5rem; bottom:5.5rem; z-index:80;
  width:min(360px, calc(100vw - 2rem)); max-height:min(560px, calc(100vh - 8rem));
  background:var(--color-paper); border:1px solid var(--color-line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); display:none; flex-direction:column; overflow:hidden;
}
.cv-chat-panel.is-open{ display:flex; }
.cv-chat-head{
  padding:.9rem 1.1rem; border-bottom:1px solid var(--color-line); background:var(--color-card);
  display:flex; align-items:center; justify-content:space-between;
}
.cv-chat-head strong{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.02em; }
.cv-chat-close{ background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--color-muted); line-height:1; }
.cv-chat-log{ flex:1; overflow-y:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.65rem; }
.cv-chat-msg{ font-size:.9rem; line-height:1.45; max-width:88%; padding:.55rem .75rem; border-radius:var(--radius-sm); }
.cv-chat-msg.user{ align-self:flex-end; background:var(--color-accent-dim); color:var(--color-on-accent); }
.cv-chat-msg.bot{ align-self:flex-start; background:var(--color-card); border:1px solid var(--color-line); color:var(--color-ink); }
.cv-chat-msg.pending{ color:var(--color-muted); font-style:italic; }
.cv-chat-form{ display:flex; gap:.5rem; padding:.85rem; border-top:1px solid var(--color-line); }
.cv-chat-form input{
  flex:1; padding:.6rem .75rem; border:1px solid var(--color-line); border-radius:var(--radius-sm);
  background:var(--color-paper); color:var(--color-ink); font-size:.9rem;
}
.cv-chat-form button{
  padding:.6rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--color-accent-dim);
  background:var(--color-accent-dim); color:var(--color-on-accent); cursor:pointer; font-size:.9rem;
}
.cv-chat-form button:disabled{ background:var(--color-muted); border-color:var(--color-muted); cursor:default; }

/* ==================== SAMPLE AUDIT REPORT ==================== */
.audit-out{ font-family:var(--font-mono); font-size:.72rem; line-height:1.55; color:var(--color-ink);
  background:var(--color-card); border:1px solid var(--color-line); border-top:3px solid var(--color-accent);
  border-radius:var(--radius-md); padding:1.4rem 1.5rem; overflow-x:auto; white-space:pre;
  box-shadow:var(--shadow-card); }
.audit-out:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }
.s-p{ color:#1B6B3A; font-weight:600; }
.s-f{ color:#B3261E; font-weight:600; }
.s-w{ color:#7A5200; font-weight:600; }
.s-i{ color:#566575; font-weight:600; }
@media (max-width:640px){ .audit-out{ font-size:.63rem; padding:1rem .9rem; } }

/* ==================== HOMEPAGE PROOF STRIP ==================== */
.proof-strip{ background:var(--color-paper); }
.proof-strip .wrap{ padding-block:var(--space-xl); }
.proof-strip .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.7rem; }
.proof-strip h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:1.8rem; max-width:30ch; text-wrap:balance; }
.proof-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:760px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-grid .work-shot{ display:block; }

/* ==================== SERVICE AREAS ==================== */
.more-specific{ margin-top:1.4rem; font-size:.92rem; color:var(--color-ink-soft); }
.more-specific a{ color:var(--color-accent-dim); text-decoration:underline; text-underline-offset:2px; }
.service-areas{ background:var(--color-paper-2); }
.service-areas .wrap{ padding-block:var(--space-xl); }
.service-areas .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.7rem; }
.service-areas h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:.9rem; max-width:30ch; text-wrap:balance; }
.area-note{ color:var(--color-ink-soft); max-width:64ch; margin-bottom:1.6rem; }
.area-grid{ display:flex; flex-wrap:wrap; gap:.75rem; }
.area-link{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em;
  padding:.55rem 1rem; border:1px solid var(--color-line); border-radius:var(--radius-sm);
  background:var(--color-card); color:var(--color-ink); text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.area-link:hover{ border-color:var(--color-accent-dim); transform:translateY(-1px); }

/* ==================== SMS DEMO ==================== */
.demo-callout{ background:var(--color-paper-2); }
.demo-callout .wrap{ padding-block:var(--space-xl); }
.demo-card{
  border:1px solid var(--color-line); border-top:3px solid var(--color-accent-dim);
  border-radius:var(--radius-md); background:var(--color-card); box-shadow:var(--shadow-card);
  padding:2.2rem 2.4rem; text-align:center; max-width:34rem; margin:0 auto;
}
.demo-card .tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:1.2rem; }
.demo-instruction{ font-size:1.05rem; color:var(--color-ink-soft); margin-bottom:.4rem; }
.demo-number{ font-family:var(--font-mono); font-weight:600; font-size:1.9rem; letter-spacing:.02em; margin-bottom:1rem; }
.demo-note{ font-size:.85rem; color:var(--color-muted); max-width:38ch; margin:0 auto; }
@media (max-width:520px){ .demo-card{ padding:1.6rem 1.3rem; } .demo-number{ font-size:1.5rem; } }

/* ==================== HOMEPAGE QUOTE FORM ==================== */
.home-form{ background:var(--color-paper-2); }
.home-form .wrap{ padding-block:var(--space-xl); display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:820px){ .home-form .wrap{ grid-template-columns:1fr; gap:2rem; } }
.home-form .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-dim); margin-bottom:.7rem; }
.home-form h2{ font-size:var(--text-display-s); line-height:1.15; margin-bottom:1rem; max-width:24ch; text-wrap:balance; }
.home-form-note{ color:var(--color-ink-soft); line-height:1.65; max-width:52ch; }
.home-form-note a{ color:var(--color-accent-dim); text-decoration:underline; text-underline-offset:2px; }

/* ============================ INSTANT AUDIT ============================ */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.audit-form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.8rem; max-width:560px; }
.audit-form input{
  flex:1 1 260px; padding:.85rem 1rem; font-size:1rem; font-family:var(--font-body);
  border:1px solid var(--color-line); border-radius:var(--radius-sm);
  background:var(--color-paper); color:var(--color-ink);
}
.audit-form input:focus{ outline:2px solid var(--color-focus); outline-offset:1px; border-color:var(--color-accent); }
.audit-note{ font-size:.84rem; color:var(--color-muted); margin-top:.7rem; }
.audit-results{ margin-top:2.4rem; }
.audit-status{ font-family:var(--font-mono); font-size:.9rem; color:var(--color-muted); }
.audit-summary{
  display:flex; gap:1.6rem; flex-wrap:wrap; padding:1rem 1.2rem; margin-bottom:1.6rem;
  border:1px solid var(--color-line); border-left:3px solid var(--color-accent);
  border-radius:var(--radius-sm); background:var(--color-card);
}
.audit-summary b{ font-size:1.5rem; display:block; line-height:1.1; }
.audit-summary span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); }
.audit-group{ margin-bottom:1.8rem; }
.audit-group > h3{ font-size:1.1rem; margin-bottom:.8rem; }
.audit-item{
  border:1px solid var(--color-line); border-radius:var(--radius-sm);
  padding:.9rem 1.1rem; margin-bottom:.6rem; background:var(--color-card);
}
.audit-item .k{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.35rem; }
.audit-item.fail .k{ color:oklch(48% 0.17 25); }
.audit-item.warn .k{ color:var(--color-accent-dim); }
.audit-item.pass .k{ color:oklch(45% 0.12 150); }
.audit-item.info .k{ color:var(--color-muted); }
.audit-item h4{ font-size:1rem; margin:0 0 .35rem; font-weight:600; }
.audit-item p{ font-size:.92rem; line-height:1.55; color:var(--color-ink-soft); }
.audit-item .detail{ font-family:var(--font-mono); font-size:.8rem; color:var(--color-muted); margin-top:.4rem; word-break:break-word; }
.audit-failbox{
  border:1px solid var(--color-line); border-left:3px solid var(--color-accent);
  background:var(--color-paper-2); padding:1.2rem 1.4rem; border-radius:var(--radius-sm);
}
.audit-failbox p{ font-size:.98rem; line-height:1.6; color:var(--color-ink-soft); }

/* ==================== CITY PAGE PHOTO ==================== */
.city-photo{ background:var(--color-paper); }
.city-photo .wrap{ padding-block:var(--space-lg); }
/* Constrained rather than full-bleed: these are supporting photos, not the argument, and a
   700px-tall hero would push the page's actual content below the fold. */
.city-photo figure{ margin:0; max-width:760px; }
.city-photo img{ width:100%; height:auto; display:block; border-radius:var(--radius-md);
  border:1px solid var(--color-line); }
.city-photo figcaption{ font-family:var(--font-mono); font-size:.7rem; line-height:1.6;
  color:var(--color-muted); margin-top:.6rem; }
.city-photo figcaption a{ color:var(--color-muted); text-decoration:underline;
  text-underline-offset:2px; }
.city-photo figcaption a:hover{ color:var(--color-accent-dim); }
.photo-note{ border-left:3px solid var(--color-line); padding-left:1.1rem; max-width:70ch;
  color:var(--color-ink-soft); line-height:1.65; }

/* ==================== FURTHER READING ==================== */
.further-reading{ background:var(--color-paper-2); }
.further-reading .wrap{ padding-block:var(--space-lg); }
.further-reading .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-muted); margin-bottom:.8rem; }
.further-reading ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; max-width:70ch; }
.further-reading li{ position:relative; padding-left:1.05rem; font-size:.98rem;
  color:var(--color-ink-soft); line-height:1.5; }
.further-reading li::before{ content:''; position:absolute; left:0; top:.55em; width:6px;
  height:6px; border-radius:1px; background:var(--color-accent-dim); }