/* ============================================================
   CODON — SERVICE PAGES, GUIDES AND COMPARISONS
   Extends style.css; uses the same design tokens.
   ============================================================ */

.nav a, .brand__sub { white-space: nowrap; }
@media (max-width: 1280px) {
  .nav { gap: var(--space-5); }
}
@media (max-width: 1140px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header__actions .btn--sm { display: none; }
}

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-10), 6vw, var(--space-16));
  border-bottom: 1px solid var(--color-divider);
}
.page-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-border) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-border) 60%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 90% at 85% 0%, black 0%, transparent 70%);
  opacity: 0.5;
}
.page-hero__inner { position: relative; }
.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.crumbs a:hover { color: var(--color-primary); }
.crumbs [aria-current] { color: var(--color-text); }
.page-title {
  font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em;
  max-width: 24ch;
}
.page-hero .lede { max-width: 62ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* ---------- Body layout ---------- */
.page-body { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.page-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: start;
}
.page-aside { position: sticky; top: var(--space-24); display: flex; flex-direction: column; gap: var(--space-6); }

@media (max-width: 980px) {
  .page-body__grid { grid-template-columns: 1fr; }
  .page-aside { position: static; }
}

/* ---------- Prose ---------- */
.prose { max-width: 70ch; min-width: 0; }
.prose > h2 {
  font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em;
  margin-top: var(--space-12);
}
.prose > h2:first-child, .prose > .answer:first-child { margin-top: 0; }
.prose > h3 { font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-8); }
.prose > p, .prose > ul, .prose > ol { margin-top: var(--space-4); color: var(--color-text-muted); }
.prose > ul, .prose > ol { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.prose li::marker { color: var(--color-primary); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose > p a, .prose li a, .prose td a, .answer a {
  color: var(--color-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose > p a:hover, .prose li a:hover, .prose td a:hover, .answer a:hover { color: var(--color-primary-hover); }

.answer {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.answer__label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary);
}

.table-wrap {
  margin-top: var(--space-6);
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.prose table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.prose thead th { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; white-space: nowrap; }
.prose tbody th { color: var(--color-text); font-weight: 600; width: 26%; }
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }

.prose .faq__list { margin-top: var(--space-6); }
.prose .faq__answer { padding-right: 0; }

.page-note {
  margin-top: var(--space-12) !important;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-faint) !important;
}

/* ---------- Aside ---------- */
.facts {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.facts h2, .aside-cta h2 { font-size: var(--text-base); font-weight: 600; }
.facts h2 {
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary);
}
.facts dl { margin-top: var(--space-4); display: flex; flex-direction: column; }
.facts dl > div { padding-block: var(--space-3); border-top: 1px solid var(--color-divider); }
.facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.facts dd { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-top: 2px; }

.aside-cta {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
}
.aside-cta p { font-size: var(--text-sm); opacity: 0.9; }
.aside-cta .btn { background: var(--color-text-inverse); color: var(--color-primary); margin-top: var(--space-2); }
.aside-cta .btn:hover { transform: translateY(-1px); }

/* ---------- Related / link cards ---------- */
.related { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); border-top: 1px solid var(--color-divider); background: var(--color-surface); }
.related--home { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); background: var(--color-bg); border-top: 0; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.related--home .related__grid { margin-top: var(--space-12); }
.related__all { margin-top: var(--space-8); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.hub-heading { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; margin-top: var(--space-16); }
.hub-heading:first-child { margin-top: 0; }

.link-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.link-card__type { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.link-card__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; line-height: 1.25; color: var(--color-text); }
.link-card__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.link-card__more { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }

@media (max-width: 940px) { .related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .related__grid { grid-template-columns: 1fr; } }

/* ---------- Homepage service cards ---------- */
.card h3 a:hover { color: var(--color-primary); }
.card__more { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.card__more:hover { color: var(--color-primary-hover); }

/* ---------- Footer with longer link set ---------- */
.footer__nav { flex-wrap: wrap; row-gap: var(--space-2); }

/* Self-hosted Inter and Newsreader (SIL Open Font License), latin and latin-ext subsets. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-normal-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/newsreader-normal-400-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;
}


/* ==========================================================================
   CODON - OCTOBER 2026 REDESIGN (from the Stitch "Codon Valuation Website
   Redesign" project). The previous pages.css is kept unchanged as
   pages-base.css and imported above; everything below re-skins it.
   To roll back: restore pages-base.css as pages.css.
   ========================================================================== */

:root,[data-theme='light']{--color-bg:#f9f9f8;--color-surface:#ffffff;--color-surface-2:#f3f4f3;--color-surface-offset:#eeeeed;--color-divider:#e3e7e6;--color-border:#d3dbd9;--color-text:#1a1c1c;--color-text-muted:#3e4947;--color-text-faint:#6e7977;--color-text-inverse:#ffffff;--color-primary:#0f766e;--color-primary-hover:#005c55;--color-primary-active:#00504a;--color-primary-highlight:#eeeeed;--shadow-sm:0 1px 2px rgb(16 24 40 / 0.06);--shadow-md:0 4px 12px rgb(16 24 40 / 0.08);--shadow-lg:0 16px 40px rgb(16 24 40 / 0.12)}
[data-theme='dark']{--color-bg:#14171c;--color-surface:#1e222a;--color-surface-2:#191d23;--color-surface-offset:#252a33;--color-divider:#272c34;--color-border:#343a44;--color-text:#e6e4de;--color-text-muted:#a7adb6;--color-text-faint:#737a85;--color-text-inverse:#10201e;--color-primary:#6bd8cb;--color-primary-hover:#89f5e7;--color-primary-active:#9cf2e8;--color-primary-highlight:#22383a;--shadow-sm:0 1px 2px rgb(0 0 0 / 0.3);--shadow-md:0 4px 12px rgb(0 0 0 / 0.35);--shadow-lg:0 16px 40px rgb(0 0 0 / 0.5)}
:root{--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--content-default:960px;--content-wide:1280px;--font-display:'Newsreader',Georgia,'Times New Roman',serif;--font-body:'Inter','Helvetica Neue',Arial,sans-serif;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:clamp(1.5rem,1.3rem + 0.9vw,1.75rem);--text-2xl:clamp(1.75rem,1.3rem + 1.9vw,2.5rem);--text-hero:clamp(2.25rem,1.4rem + 3.4vw,3.5rem);--dots:radial-gradient(circle,var(--color-primary) 0 3.5px,transparent 4px)}

/* ---------- Base ---------- */
body{font-size:var(--text-base);line-height:1.6}
h1,h2,h3,h4{font-weight:500;letter-spacing:-0.01em}
.section-label,.eyebrow,.link-card__type,.answer__label,.facts h2,.why__num{font-family:var(--font-body);font-size:0.6875rem;line-height:1rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase}
.section-label::before,.eyebrow::before{content:'';display:block;width:34px;height:8px;margin-bottom:0.5rem;background:var(--dots) 0 0/13px 8px repeat-x}
.section-title{font-size:var(--text-2xl);font-weight:500;line-height:1.2;letter-spacing:-0.02em;max-width:26ch}
.lede{font-size:var(--text-lg);line-height:1.6}

/* ---------- Buttons ---------- */
.btn{border-radius:var(--radius-sm);font-size:0.8125rem;font-weight:500;letter-spacing:0.01em;padding:0.625rem 1rem;box-shadow:var(--shadow-sm)}
.btn--lg{padding:0.875rem 1.5rem;font-size:0.8125rem}
.btn--sm{padding:0.625rem 1rem}
.btn--primary:hover{transform:none}
.btn--ghost{background:var(--color-surface-offset);border:0;box-shadow:none}
.btn--ghost:hover{background:var(--color-border);color:var(--color-text)}

/* ---------- Header ---------- */
.header{background:color-mix(in oklab,var(--color-bg) 90%,transparent)}
.header__inner{min-height:5rem}
.brand__name{letter-spacing:0.2em;font-size:0.8125rem;display:inline-flex;align-items:center;gap:0.4rem}
.brand__name::after{content:'';width:16px;height:4px;background:radial-gradient(circle,var(--color-primary) 0 1.8px,transparent 2.2px) 0 0/6px 4px repeat-x}
.brand__sub{font-size:0.6875rem;font-weight:500;letter-spacing:0.08em}
.nav{gap:1.25rem}
.nav a{font-size:0.8125rem}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3rem,8vw,7rem);padding-inline:0}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.5;background:radial-gradient(24rem 24rem at 88% 0%,color-mix(in oklab,var(--color-primary) 16%,transparent),transparent 70%),radial-gradient(20rem 20rem at 6% 62%,color-mix(in oklab,var(--color-text-muted) 12%,transparent),transparent 70%)}
.hero__grid,.hero__side{display:none}
.hero__inner{text-align:left;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:2.5rem;align-items:center;padding-inline:clamp(1.25rem,5vw,3rem)}
.hero__inner > *{grid-column:1}
.hero__inner::after{content:'';grid-column:2;grid-row:1 / span 4;justify-self:end;width:min(18rem,100%);aspect-ratio:9 / 10;border-radius:var(--radius-lg);background-color:var(--color-surface-2);box-shadow:var(--shadow-sm);background-repeat:no-repeat;background-position:center;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 320' fill='none' font-family='Inter,Arial,sans-serif'%3E%3Ctext x='24' y='40' font-size='10.5' font-weight='600' letter-spacing='.9' fill='%236e7977'%3EMODEL SCHEMA%3C/text%3E%3Ccircle cx='240' cy='36' r='4' fill='%230f766e'/%3E%3Ccircle cx='252' cy='36' r='4' fill='%23bdc9c6'/%3E%3Ccircle cx='264' cy='36' r='4' fill='%23bdc9c6'/%3E%3Cg transform='translate(24 72)' stroke='%230f766e'%3E%3Cpath d='M20 20C60 50 60 110 100 140C140 170 140 10 180 50C200 70 220 80 220 80' opacity='.45' stroke-dasharray='2 3' stroke-width='1.5'/%3E%3Cpath d='M20 140C60 110 60 50 100 20C140 -10 140 150 180 110C200 90 220 80 220 80' opacity='.45' stroke-dasharray='2 3' stroke-width='1.5'/%3E%3Cpath d='M45 38V122M155 42V118' opacity='.3'/%3E%3Cpath d='M100 20V140' opacity='.6' stroke-width='1.5'/%3E%3Cg stroke='none' fill='%230f766e'%3E%3Ccircle cx='45' cy='38' r='3'/%3E%3Ccircle cx='45' cy='122' r='3'/%3E%3Ccircle cx='100' cy='20' r='3.5'/%3E%3Ccircle cx='100' cy='80' r='2.5'/%3E%3Ccircle cx='100' cy='140' r='3.5'/%3E%3Ccircle cx='155' cy='42' r='3'/%3E%3Ccircle cx='155' cy='118' r='3'/%3E%3C/g%3E%3Cg stroke='none' fill='%236e7977'%3E%3Ccircle cx='45' cy='80' r='2'/%3E%3Ccircle cx='155' cy='80' r='2'/%3E%3C/g%3E%3C/g%3E%3Crect x='24' y='256' width='240' height='40' rx='4' fill='%236e7977' fill-opacity='.12'/%3E%3Ctext x='36' y='280' font-size='10.5' font-weight='500' fill='%236e7977'%3EJurisdictional Precision%3C/text%3E%3Ctext x='252' y='280' text-anchor='end' font-size='10.5' font-weight='700' fill='%230f766e'%3E409A · EMI%3C/text%3E%3C/svg%3E")}
.eyebrow{color:var(--color-text-muted);letter-spacing:0.16em;margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem}
.eyebrow::before{flex:none;margin:0;width:26px;height:6px;background-size:10px 6px}
.hero__title{font-weight:500;line-height:1.1;max-width:18ch;margin-inline:0}
.hero__title span{font-style:italic}
.hero__lede{margin:1.5rem 0 0;max-width:42rem;line-height:1.6}
.hero__actions{justify-content:flex-start;margin-top:2rem}
@media (max-width:900px){.hero__inner{grid-template-columns:1fr}.hero__inner::after{display:none}}

/* ---------- Section rhythm ---------- */
.about,.services,.faq,.why,.approach,.contact,.related--home{padding-block:clamp(4rem,8vw,6rem);border:0}
.about,.faq,.approach,.contact{background:var(--color-surface-2)}
.services,.why,.related--home{background:var(--color-bg)}

/* ---------- About ---------- */
.about__grid{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:2.5rem}
.about__content{max-width:none}
.about__content > p{max-width:72ch}
.about__points{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.point{flex-direction:column;gap:0.75rem;padding:1.5rem;border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.point__num{font-size:1.375rem;line-height:1.875rem;width:auto}
.point p{font-size:var(--text-sm);line-height:1.55}
.point strong{display:block;margin-bottom:0.5rem;font-family:var(--font-display);font-size:1.375rem;line-height:1.3;font-weight:600;letter-spacing:-0.005em}
@media (max-width:860px){.about__grid{grid-template-columns:1fr;gap:1.5rem}.about__points{grid-template-columns:1fr}}

/* ---------- Services ---------- */
.services .section-label{text-align:center}
.services .section-label::before,.faq .section-label::before{margin-inline:auto}
.services .section-title{max-width:22ch}
.cards{gap:1.5rem;margin-top:3rem}
.card{background:var(--color-surface);border:0;border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow-sm)}
.card:hover{transform:none;box-shadow:var(--shadow-md)}
.card__icon{width:2.5rem;height:2.5rem;background:var(--color-surface-offset)}
.card h3{font-size:1.75rem;line-height:2.25rem;font-weight:600}
.card p,.card__list li{font-size:var(--text-sm);line-height:1.6}
.card__list{gap:0.625rem}
.card__list li{color:var(--color-text);padding-left:1.75rem}
.card__list li::before{top:0.15em;width:1.125rem;height:1.125rem;border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/contain no-repeat}
.card__more,.link-card__more,.related__all{font-size:0.8125rem}

/* ---------- FAQ ---------- */
.faq .section-label,.faq .section-title,.faq > .faq__inner > .lede{text-align:center;margin-inline:auto}
.faq__list{gap:0.75rem}
.faq__item,.faq__item:first-child{border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);padding:0 1.25rem}
.faq__question{padding-block:1rem;font-family:var(--font-display);font-size:1.375rem;line-height:1.875rem;font-weight:600;letter-spacing:-0.005em}
.faq__icon,.faq__item[open] .faq__icon{border:0;background:none;width:1.25rem;height:1.25rem}
.faq__icon::before{width:9px;height:9px;background:none;border-right:1.75px solid var(--color-text-muted);border-bottom:1.75px solid var(--color-text-muted);transform:translate(-50%,-70%) rotate(45deg)}
.faq__icon::after{display:none}
.faq__item[open] .faq__icon{transform:rotate(180deg)}
.faq__answer{padding-bottom:1rem}

/* ---------- Why Codon ---------- */
.why__grid{gap:1rem;margin-top:2.5rem}
.why__item{padding:1.5rem;border-radius:var(--radius-lg);background:var(--color-surface-2);box-shadow:var(--shadow-sm)}
.why__item:last-child:nth-child(3n+2){grid-column:span 2}
.why__item h3,.step h3{font-size:1.375rem;line-height:1.875rem;font-weight:600;letter-spacing:-0.005em}
.why__item p,.step p{font-size:var(--text-base)}
.why__num{color:var(--color-primary);margin-bottom:0.5rem}
@media (max-width:940px){.why__item:last-child:nth-child(3n+2){grid-column:auto}}

/* ---------- Approach ---------- */
.approach__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem}
.steps{gap:1rem}
.step,.step:last-child{gap:1.5rem;padding:1.5rem;border:0;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.step__index{font-size:1.75rem;line-height:2.25rem;font-weight:600;width:auto}
@media (max-width:860px){.approach__grid{grid-template-columns:1fr}}

/* ---------- Guides cards ---------- */
.related__grid{gap:1rem}
.related--home .related__grid{margin-top:2.5rem}
.link-card{background:var(--color-surface);border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.link-card:hover{transform:none;box-shadow:var(--shadow-md)}
.link-card__title{font-size:1.375rem;line-height:1.875rem;letter-spacing:-0.005em}
.related--home .link-card:last-child:nth-child(3n+1){grid-column:1 / -1}

/* ---------- Contact ---------- */
.contact__grid{gap:2.5rem}
.contact__link{font-family:var(--font-display);font-size:1.375rem}
.form{background:var(--color-surface);border:0;border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-md);gap:1rem}
.form__row{gap:0.25rem}
.form__row label{font-size:0.8125rem;letter-spacing:0;color:var(--color-text)}
.form__row input,.form__row textarea,.form__row select{border:1px solid transparent;border-radius:var(--radius-sm);background:var(--color-bg);font-size:0.9375rem;padding:0.625rem 0.75rem;min-height:2.75rem}
.form__row input:focus,.form__row textarea:focus,.form__row select:focus{outline:2px solid color-mix(in oklab,var(--color-primary) 40%,transparent);outline-offset:0;border-color:transparent}
.form__submit{width:100%;min-height:2.75rem}
.form__note{color:var(--color-text-muted)}

/* ---------- Footer ---------- */
.footer{background:var(--color-surface-2);border-top:1px solid var(--color-divider)}
.footer__copy{color:var(--color-text-muted)}

/* ---------- Service pages and guides ---------- */
.page-hero{background:var(--color-surface-2);border-bottom:0}
.page-hero__grid{display:none}
.page-title{font-weight:500;line-height:1.15;letter-spacing:-0.02em}
.prose > h2,.hub-heading{font-weight:500}
.prose > h3{font-family:var(--font-display);font-size:1.375rem;font-weight:600}
.answer,.table-wrap,.facts{border-color:var(--color-divider);border-radius:var(--radius-lg)}
.answer{border-left:3px solid var(--color-primary)}
.facts{box-shadow:var(--shadow-sm);border:0}
.aside-cta{border-radius:var(--radius-lg)}
.aside-cta h2{font-size:1.375rem;font-weight:600}
.aside-cta .btn{box-shadow:none}
.related:not(.related--home){background:var(--color-surface-2);border-top:0}


/* pages-redesign.css holds the October 2026 redesign (light and dark)
   and imports pages-base.css. Below: tighter vertical spacing. */
.about,.services,.faq,.why,.approach,.contact,.related--home{padding-block:clamp(2.5rem,5vw,3.5rem)}
.hero{padding-block:clamp(2.5rem,6vw,4.5rem)}
.eyebrow{margin-bottom:1rem}
.hero__lede{margin-top:1rem}
.hero__actions{margin-top:1.5rem}
.about p{margin-top:0.75rem}
.about .lede,.lede{margin-top:0.75rem}
.about__points{margin-top:1.75rem}
.cards{margin-top:2rem}
.faq__list{margin-top:1.75rem}
.why__grid,.related--home .related__grid{margin-top:1.75rem}
.contact__details{margin-top:1.5rem}
.footer{padding-block:2rem}
.page-hero{padding-block:clamp(2rem,5vw,3.5rem) clamp(1.75rem,4vw,2.5rem)}
.page-body,.related{padding-block:clamp(2rem,5vw,3.5rem)}
.prose > h2{margin-top:2rem}
.prose > h3{margin-top:1.5rem}
.prose > p,.prose > ul,.prose > ol{margin-top:0.75rem}

/* ---------- 10 Oct 2026: logo F, hero eyebrow, hero card 2b ---------- */
.brand svg{display:none}
.brand__text{align-items:center;line-height:1}
.brand__name{display:block;align-self:stretch;text-align:center;font-family:var(--font-display);font-size:1.375rem;font-weight:500;letter-spacing:0.26em;padding:0 0 0.3rem 0.26em;border-bottom:1px solid var(--color-primary)}
.brand__name::after{content:none}
.brand__sub{font-family:var(--font-display);font-size:0.5625rem;font-weight:400;letter-spacing:0.24em;padding-left:0.24em;margin-top:0.35rem;color:var(--color-text-muted)}
.eyebrow::before{display:none}
.hero__inner::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 320' fill='none' font-family='Inter,Arial,sans-serif'%3E%3Ctext x='24' y='40' font-size='10.5' font-weight='600' letter-spacing='.9' fill='%233e4947'%3EONE PROCESS%3C/text%3E%3Cg transform='translate%2824 72%29'%3E%3Cpath d='M10 82H136C158 82 150 46 172 46' stroke='%230f766e' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 94H136C158 94 150 130 172 130' stroke='%230f766e' stroke-width='2.5' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='10' cy='82' r='4.5' fill='%230f766e'/%3E%3Ccircle cx='10' cy='94' r='4.5' fill='%230f766e'/%3E%3Cg fill='%23ffffff' stroke='%230f766e' stroke-width='2'%3E%3Crect x='29' y='72' width='12' height='32' rx='6'/%3E%3Crect x='71' y='72' width='12' height='32' rx='6'/%3E%3Crect x='113' y='72' width='12' height='32' rx='6'/%3E%3C/g%3E%3Cg font-size='9' font-weight='500' fill='%233e4947' text-anchor='middle'%3E%3Ctext x='35' y='122'%3EIntake%3C/text%3E%3Ctext x='77' y='122'%3EAnalysis%3C/text%3E%3Ctext x='119' y='122'%3EReview%3C/text%3E%3C/g%3E%3Crect x='172' y='31' width='64' height='30' rx='4' fill='%23ffffff'/%3E%3Crect x='172' y='115' width='64' height='30' rx='4' fill='%23ffffff'/%3E%3Cg font-size='11' font-weight='700' fill='%230f766e' text-anchor='middle'%3E%3Ctext x='204' y='50'%3EUS 409A%3C/text%3E%3Ctext x='204' y='134'%3EUK EMI%3C/text%3E%3C/g%3E%3C/g%3E%3Crect x='24' y='256' width='240' height='40' rx='4' fill='%236e7977' fill-opacity='.14'/%3E%3Ctext x='36' y='280' font-size='10.5' font-weight='600' fill='%233e4947'%3ETwo compliant reports%3C/text%3E%3C/svg%3E")}
[data-theme='dark'] .hero__inner::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 320' fill='none' font-family='Inter,Arial,sans-serif'%3E%3Ctext x='24' y='40' font-size='10.5' font-weight='600' letter-spacing='.9' fill='%23a7adb6'%3EONE PROCESS%3C/text%3E%3Cg transform='translate%2824 72%29'%3E%3Cpath d='M10 82H136C158 82 150 46 172 46' stroke='%236bd8cb' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 94H136C158 94 150 130 172 130' stroke='%236bd8cb' stroke-width='2.5' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='10' cy='82' r='4.5' fill='%236bd8cb'/%3E%3Ccircle cx='10' cy='94' r='4.5' fill='%236bd8cb'/%3E%3Cg fill='%23191d23' stroke='%236bd8cb' stroke-width='2'%3E%3Crect x='29' y='72' width='12' height='32' rx='6'/%3E%3Crect x='71' y='72' width='12' height='32' rx='6'/%3E%3Crect x='113' y='72' width='12' height='32' rx='6'/%3E%3C/g%3E%3Cg font-size='9' font-weight='500' fill='%23a7adb6' text-anchor='middle'%3E%3Ctext x='35' y='122'%3EIntake%3C/text%3E%3Ctext x='77' y='122'%3EAnalysis%3C/text%3E%3Ctext x='119' y='122'%3EReview%3C/text%3E%3C/g%3E%3Crect x='172' y='31' width='64' height='30' rx='4' fill='%23252a33'/%3E%3Crect x='172' y='115' width='64' height='30' rx='4' fill='%23252a33'/%3E%3Cg font-size='11' font-weight='700' fill='%236bd8cb' text-anchor='middle'%3E%3Ctext x='204' y='50'%3EUS 409A%3C/text%3E%3Ctext x='204' y='134'%3EUK EMI%3C/text%3E%3C/g%3E%3C/g%3E%3Crect x='24' y='256' width='240' height='40' rx='4' fill='%23a7adb6' fill-opacity='.14'/%3E%3Ctext x='36' y='280' font-size='10.5' font-weight='600' fill='%23a7adb6'%3ETwo compliant reports%3C/text%3E%3C/svg%3E")}


/* pages-tweaks.css: spacing, logo F, hero eyebrow and hero card (imports the
   redesign, which imports the base). Below: hero layout 1, airy split. */
.hero{padding-block:clamp(3.5rem,9vw,7rem)}
.hero__inner{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2.5rem,7vw,6rem)}
.eyebrow{margin-bottom:1.75rem}
.hero__title{font-size:clamp(2.5rem,1.3rem + 4.6vw,4.75rem);line-height:1.04;max-width:none}
.hero__title span{display:block}
.hero__lede{margin-top:1.75rem;max-width:32.5rem}
.hero__actions{margin-top:2.5rem;gap:1rem}
.hero .btn--lg{padding:0.95rem 1.6rem;font-size:0.875rem}
.hero__inner::after{width:clamp(18rem,30vw,25rem)}
@media (max-width:900px){.hero__inner{grid-template-columns:1fr}}

/* ---------- Dark only (10 Oct 2026): every visitor gets the dark theme ---------- */
:root,[data-theme='light'],[data-theme='dark']{color-scheme:dark;--color-bg:#14171c;--color-surface:#1e222a;--color-surface-2:#191d23;--color-surface-offset:#252a33;--color-divider:#272c34;--color-border:#343a44;--color-text:#e6e4de;--color-text-muted:#a7adb6;--color-text-faint:#737a85;--color-text-inverse:#10201e;--color-primary:#6bd8cb;--color-primary-hover:#89f5e7;--color-primary-active:#9cf2e8;--color-primary-highlight:#22383a;--shadow-sm:0 1px 2px rgb(0 0 0 / 0.3);--shadow-md:0 4px 12px rgb(0 0 0 / 0.35);--shadow-lg:0 16px 40px rgb(0 0 0 / 0.5)}
.theme-toggle{display:none}
.hero__inner::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 320' fill='none' font-family='Inter,Arial,sans-serif'%3E%3Ctext x='24' y='40' font-size='10.5' font-weight='600' letter-spacing='.9' fill='%23a7adb6'%3EONE PROCESS%3C/text%3E%3Cg transform='translate%2824 72%29'%3E%3Cpath d='M10 82H136C158 82 150 46 172 46' stroke='%236bd8cb' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M10 94H136C158 94 150 130 172 130' stroke='%236bd8cb' stroke-width='2.5' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='10' cy='82' r='4.5' fill='%236bd8cb'/%3E%3Ccircle cx='10' cy='94' r='4.5' fill='%236bd8cb'/%3E%3Cg fill='%23191d23' stroke='%236bd8cb' stroke-width='2'%3E%3Crect x='29' y='72' width='12' height='32' rx='6'/%3E%3Crect x='71' y='72' width='12' height='32' rx='6'/%3E%3Crect x='113' y='72' width='12' height='32' rx='6'/%3E%3C/g%3E%3Cg font-size='9' font-weight='500' fill='%23a7adb6' text-anchor='middle'%3E%3Ctext x='35' y='122'%3EIntake%3C/text%3E%3Ctext x='77' y='122'%3EAnalysis%3C/text%3E%3Ctext x='119' y='122'%3EReview%3C/text%3E%3C/g%3E%3Crect x='172' y='31' width='64' height='30' rx='4' fill='%23252a33'/%3E%3Crect x='172' y='115' width='64' height='30' rx='4' fill='%23252a33'/%3E%3Cg font-size='11' font-weight='700' fill='%236bd8cb' text-anchor='middle'%3E%3Ctext x='204' y='50'%3EUS 409A%3C/text%3E%3Ctext x='204' y='134'%3EUK EMI%3C/text%3E%3C/g%3E%3C/g%3E%3Crect x='24' y='256' width='240' height='40' rx='4' fill='%23a7adb6' fill-opacity='.14'/%3E%3Ctext x='36' y='280' font-size='10.5' font-weight='600' fill='%23a7adb6'%3ETwo compliant reports%3C/text%3E%3C/svg%3E")}

/* ---------- Homepage "409A and EMI, side by side" section ---------- */
.compare{padding-block:clamp(2.5rem,5vw,3.5rem);background:var(--color-bg);border-top:1px solid var(--color-divider)}
.compare__table{position:relative;margin-top:1.75rem;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-sm);font-size:var(--text-sm);line-height:1.55}
.compare__row{display:grid;grid-template-columns:15rem minmax(0,1fr) minmax(0,1fr);column-gap:2rem;padding:1rem 1.5rem;border-top:1px solid var(--color-divider);color:var(--color-text-muted)}
.compare__row--head{border-top:0;padding-block:0.875rem;font-weight:600;color:var(--color-text);background:var(--color-surface-offset)}
.compare__row [role='rowheader']{font-weight:600;color:var(--color-text)}
.compare__table::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4.5rem;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--color-surface))}
.compare__actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.compare__link{font-size:var(--text-sm);font-weight:600;color:var(--color-primary)}
.compare__link:hover{color:var(--color-primary-hover)}
@media (max-width:720px){.compare__row{grid-template-columns:1fr;row-gap:0.4rem}.compare__row--head{display:none}.compare__row [data-label]::before{content:attr(data-label) ': ';font-weight:600;color:var(--color-text)}}
.compare-dialog{width:min(68rem,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lg)}
.compare-dialog[open]{display:flex;flex-direction:column}
.compare-dialog::backdrop{background:rgb(0 0 0 / 0.6)}
.compare-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.75rem;border-bottom:1px solid var(--color-divider)}
.compare-dialog__head h2{font-size:1.75rem}
.compare-dialog__close{flex:none;width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--color-surface-offset);color:var(--color-text)}
.compare-dialog__body{max-width:none;overflow:auto;padding:0 1.75rem 1.75rem}
.compare-dialog__body .table-wrap{margin-top:0;border:0;border-radius:0;background:none}
@media (max-width:720px){.compare-dialog{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.compare-dialog__body{padding:0 1rem 1rem}}

/* ============================================================
   CODON — TOOL PAGES (free estimate, request a quote)
   Extends style.css and pages-base.css; same design tokens.
   ============================================================ */

/* ---------- Estimate ---------- */
.estimate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.estimate .form { gap: var(--space-4); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form__group { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-4); }
.form__legend { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.form__hint { font-size: var(--text-xs); color: var(--color-text-faint); }
.form__hint input { margin-right: var(--space-2); }
.form__error { font-size: var(--text-sm); color: #b4423a; }
.segmented { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px; background: var(--color-surface); align-self: flex-start; }
.segmented button { padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.segmented button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-text-inverse); }
.series { border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.series__head { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.series__remove { color: var(--color-text-faint); font-size: var(--text-xs); }
.series__remove:hover { color: #b4423a; }
.btn--link { color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); padding: 0; align-self: flex-start; }

.result { position: sticky; top: var(--space-24); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.result__empty { color: var(--color-text-muted); }
.result__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.result__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.result__range { color: var(--color-text-muted); font-size: var(--text-sm); }
.result__bar { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden; }
.result__bar span { position: absolute; top: 0; bottom: 0; background: var(--color-primary); opacity: 0.35; }
.result__bar i { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--color-primary); }
.result__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); font-size: var(--text-sm); }
.result__facts dt { color: var(--color-text-faint); font-size: var(--text-xs); }
.result__facts dd { color: var(--color-text); font-weight: 600; }
.result__notes { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); }
.result__notes li::marker { color: var(--color-primary); }
.result__disclaimer { font-size: var(--text-xs); color: var(--color-text-faint); border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.result__disclaimer a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.result table { width: 100%; font-size: var(--text-xs); border-collapse: collapse; }
.result td, .result th { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); text-align: left; }
.result td:last-child, .result th:last-child { text-align: right; }
.result th { color: var(--color-text-faint); font-weight: 500; }
.result__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.tool-notes { margin-top: clamp(var(--space-12), 7vw, var(--space-20)); padding-top: var(--space-10); border-top: 1px solid var(--color-divider); }

@media (max-width: 900px) {
  .estimate { grid-template-columns: 1fr; }
  .result { position: static; }
  .form__grid { grid-template-columns: 1fr; }
}

/* ---------- Quote ---------- */
.quote__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: start; }
.quote__points { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 860px) { .quote__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CODON v3 (18 Oct 2026): the "valuation memo" design, ported from
   codon-site-mockup. Loaded last, so it re-skins everything above it.
   Keeps the existing markup and class names; the homepage gains a few new
   elements (.split, .estimate) styled here.
   ========================================================================== */

/* ---------- Tokens: teal-black ink palette ---------- */
:root,[data-theme='light'],[data-theme='dark']{color-scheme:dark;
  --color-bg:#0e1817;--color-surface:#132120;--color-surface-2:#132120;--color-surface-offset:#182a28;
  --color-divider:#27413d;--color-border:#37554f;
  --color-text:#ebe9e2;--color-text-muted:#a6b5b0;--color-text-faint:#6f817c;--color-text-inverse:#0e1817;
  --color-primary:#6bd8cb;--color-primary-hover:#8de6db;--color-primary-active:#9cf2e8;--color-primary-highlight:#182a28;
  --shadow-sm:none;--shadow-md:none;--shadow-lg:0 16px 40px rgb(0 0 0 / 0.5);
  --content-default:960px;--content-wide:1120px;
  --radius-sm:4px;--radius-md:4px;--radius-lg:4px;
  --text-lg:1.1875rem;--text-xl:1.5rem;--text-2xl:clamp(1.9rem,1.4rem + 1.6vw,2.4375rem);--text-hero:clamp(2.5rem,1.6rem + 3.6vw,4.25rem)}

body{line-height:1.65}
h1,h2,h3,h4{font-weight:400;letter-spacing:-0.012em;line-height:1.12;font-variation-settings:'opsz' 72}
h3{font-variation-settings:'opsz' 36}
a{text-underline-offset:0.18em}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.section-inner{max-width:var(--content-wide)}
.lede{font-family:var(--font-display);font-variation-settings:'opsz' 24;font-size:var(--text-lg);line-height:1.5;color:var(--color-text-muted);max-width:58ch}

/* ---------- Header ---------- */
.header{background:color-mix(in oklab,var(--color-bg) 92%,transparent);border-bottom:1px solid var(--color-divider)}
.header__inner{max-width:var(--content-wide);min-height:5rem}
.nav a{color:var(--color-text-muted);font-size:0.9375rem;font-weight:400}
.nav a:hover{color:var(--color-text)}
.btn{border-radius:4px;font-size:0.9375rem;font-weight:600;padding:0.8rem 1.25rem;box-shadow:none;letter-spacing:0}
.btn--sm{padding:0.55rem 0.9rem;font-size:0.875rem}
.btn--lg{padding:0.85rem 1.4rem;font-size:0.9375rem}
.btn--primary{background:var(--color-primary);color:var(--color-text-inverse);border:1px solid var(--color-primary)}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-text-inverse)}
.btn--ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border);box-shadow:none}
.btn--ghost:hover{background:var(--color-surface-offset);border-color:var(--color-primary);color:var(--color-text)}
.nav-mobile{background:var(--color-surface);border-bottom:1px solid var(--color-divider)}

/* ---------- Hero: headline left, the ONE PROCESS chart right ---------- */
.hero{padding-block:clamp(4rem,9vw,7rem) clamp(3rem,6vw,5rem);border-bottom:1px solid var(--color-divider)}
.hero::before{display:none}
.hero__inner{--hero-pad:clamp(1.25rem,5vw,3rem);max-width:calc(var(--content-wide) + 2 * var(--hero-pad));padding-inline:var(--hero-pad);column-gap:clamp(2.5rem,7vw,5rem)}
.eyebrow{font-family:var(--font-display);font-style:italic;font-variation-settings:'opsz' 24;font-size:var(--text-lg);font-weight:400;letter-spacing:0;text-transform:none;color:var(--color-primary);margin-bottom:1.25rem}
.hero__title{font-size:var(--text-hero);font-weight:400;line-height:1.1;max-width:15ch}
.hero__title span{display:inline;color:var(--color-text);font-style:normal}
.hero__lede{font-family:var(--font-display);font-variation-settings:'opsz' 24;font-size:var(--text-lg);line-height:1.5;color:var(--color-text-muted);max-width:30rem;margin-top:1.5rem}
.hero__actions{margin-top:2rem;gap:0.75rem 1.25rem;align-items:center}
.hero__actions .btn--ghost{background:none;border:0;padding:0;color:var(--color-primary);border-bottom:1px solid var(--color-primary);border-radius:0;font-weight:400}
.hero__actions .btn--ghost:hover{color:var(--color-text);border-color:var(--color-text)}
.hero__inner::after{border-radius:4px;box-shadow:none;border:1px solid var(--color-border);background-color:var(--color-surface)}

/* Desktop hero (26 Oct 2026): each headline sentence on one row. The card is
   narrower and the gap tighter, and the headline is sized from the column that
   is left so the longer sentence always fits. (The hero now carries the same
   side padding as every section, at every width, so it no longer touches the
   viewport edge on phones or small desktops; at wide screens the content box
   is unchanged.) */
@media (min-width:901px){
  .hero__inner{--hero-card:clamp(16rem,24vw,18rem);--hero-gap:clamp(2.5rem,5vw,4rem);column-gap:var(--hero-gap)}
  .hero__inner::after{width:var(--hero-card)}
  .hero__title{max-width:none;white-space:nowrap;font-size:clamp(2rem,calc((min(var(--content-wide),100vw - 2 * var(--hero-pad) - 20px) - var(--hero-card) - var(--hero-gap)) / 13.8),3.375rem)}
}

/* The rule-and-triangle device, borrowed from the wordmark */
.split{grid-column:1 / -1;margin-top:clamp(3rem,6vw,4.5rem);display:grid;grid-template-columns:1fr auto 1fr;gap:0 2rem;align-items:start}
.split__side{border-top:1px solid var(--color-primary);padding-top:1rem}
.split__side h2{font-size:var(--text-xl);font-weight:400;margin:0 0 0.5rem;max-width:none}
.split__side p{color:var(--color-text-muted);font-size:0.9375rem;margin:0 0 0.5rem;max-width:40ch}
.split__side a{font-size:0.9375rem;color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary)}
.split__side a:hover{color:var(--color-text);border-color:var(--color-text)}
.split__mark{display:grid;justify-items:center;gap:0.75rem;padding-top:0.15rem;color:var(--color-primary)}
.split__mark svg{width:22px;height:20px;fill:currentColor}
.split__mark span{font-family:var(--font-display);font-style:italic;color:var(--color-text-muted);font-size:0.875rem;white-space:nowrap}
@media (max-width:700px){.split{grid-template-columns:1fr;gap:1.5rem}.split__mark{order:-1;justify-items:start;grid-auto-flow:column;align-items:center;gap:0.75rem}}

/* ---------- The memo structure: running head in the margin ---------- */
.about .section-inner,.services .section-inner,.faq .section-inner,.why .section-inner,.approach .section-inner,.related--home .section-inner,.compare .section-inner{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.5rem 3rem;align-items:start}
.about .section-inner > *,.services .section-inner > *,.faq .section-inner > *,.why .section-inner > *,.approach .section-inner > *,.related--home .section-inner > *,.compare .section-inner > *{grid-column:2}
.section-label{grid-column:1 !important;grid-row:1 / span 20;font-family:var(--font-display);font-style:italic;font-variation-settings:'opsz' 24;font-size:var(--text-lg);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.3;color:var(--color-primary);margin:0}
.section-label::before{display:none}
@media (min-width:900px){.section-label{position:sticky;top:6.5rem}}
@media (max-width:899px){.about .section-inner,.services .section-inner,.faq .section-inner,.why .section-inner,.approach .section-inner,.related--home .section-inner,.compare .section-inner{grid-template-columns:1fr;gap:0.75rem}.section-label{grid-row:auto}}
.section-title{font-size:var(--text-2xl);font-weight:400;max-width:22ch;margin:0 0 1rem}
.about,.services,.faq,.why,.approach,.contact,.related--home,.compare,.related:not(.related--home){padding-block:clamp(3.5rem,7vw,6rem);border-top:0;border-bottom:1px solid var(--color-divider)}
.services,.why,.related--home,.contact{background:var(--color-surface)}
.about,.faq,.approach,.compare{background:var(--color-bg)}

/* About */
.about__inner{display:block}
.about__content{max-width:68ch}
.about__content p{color:var(--color-text-muted)}
.about__content > p:first-of-type{font-family:var(--font-display);font-variation-settings:'opsz' 24;font-size:var(--text-lg);line-height:1.5}
.about__points{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2rem;max-width:68ch}
.point{display:block;padding:0 0 0 1.5rem;position:relative;background:none;box-shadow:none;border:0;border-radius:0}
.point::before{content:'';position:absolute;left:0;top:0.7em;width:0.6rem;height:1px;background:var(--color-primary)}
.point__num{display:none}
.point p{color:var(--color-text-muted)}
.point strong{color:var(--color-text)}

/* Services: a ledger, not cards */
.cards{display:block;margin-top:0;border-top:1px solid var(--color-border)}
.card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0.5rem 3rem;padding:2rem 0;border:0;border-bottom:1px solid var(--color-divider);border-radius:0;background:none;box-shadow:none}
.card__icon{display:none}
.card h3{grid-column:1;font-size:var(--text-2xl);font-size:1.9375rem;margin:0 0 0.75rem;font-weight:400}
.card h3 a{color:var(--color-text);text-decoration:none}
.card h3 a:hover{color:var(--color-primary)}
.card > p{grid-column:1;color:var(--color-text-muted);margin:0}
.card ul{grid-column:2;grid-row:1 / span 3;margin:0.35rem 0 0;padding-left:1.1rem;color:var(--color-text-muted);font-size:0.9375rem;list-style:disc}
.card ul li{margin:0.3rem 0;padding:0}
.card ul li::before,.card ul li::marker{color:var(--color-primary)}
.card__more{grid-column:1;display:inline-block;margin-top:0.75rem;color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary);width:fit-content;font-size:0.9375rem;font-weight:400}
.card__more:hover{color:var(--color-text);border-color:var(--color-text)}
@media (max-width:760px){.card{grid-template-columns:1fr}.card ul{grid-column:1;grid-row:auto}}

/* Estimate panel */
.cta-estimate{padding-block:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--color-divider)}
.cta-estimate .section-inner{max-width:var(--content-wide)}
.estimate__panel{border:1px solid var(--color-border);border-left:3px solid var(--color-primary);background:var(--color-surface);padding:clamp(1.5rem,4vw,2.5rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem;align-items:center}
.estimate__panel h2{font-size:1.9375rem;font-weight:400;margin:0 0 0.5rem;max-width:none}
.estimate__panel p{color:var(--color-text-muted);margin:0;max-width:62ch}
.estimate__actions{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;align-items:center;white-space:nowrap}
.estimate__actions a:not(.btn){color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary)}
.estimate__actions a:not(.btn):hover{color:var(--color-text);border-color:var(--color-text)}
@media (max-width:760px){.estimate__panel{grid-template-columns:1fr}.estimate__actions{white-space:normal}}

/* Compare (409A and EMI side by side) */
.compare__table{border-radius:0;box-shadow:none;background:none;border-top:1px solid var(--color-border);margin-top:1.5rem;font-size:0.9375rem}
.compare__row{padding:0.9rem 0;border-top:1px solid var(--color-divider);column-gap:2rem}
.compare__row--head{background:none;padding-block:0.75rem;color:var(--color-text-muted);font-size:0.875rem}
.compare__row [role='rowheader']{color:var(--color-text);font-weight:500}
.compare__table::after{display:none}
.compare__actions{margin-top:1.5rem}
.compare__link{font-weight:400;color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary)}
.compare__link:hover{color:var(--color-text)}
.compare-dialog{border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface)}

/* FAQ */
.faq__list{margin-top:0;border-top:1px solid var(--color-border);max-width:72ch;display:block}
.faq__item,.faq__item:first-child{border:0;border-bottom:1px solid var(--color-divider);border-radius:0;background:none;box-shadow:none;padding:0;margin:0}
.faq__question{padding:1.1rem 2.5rem 1.1rem 0;font-family:var(--font-display);font-variation-settings:'opsz' 24;font-size:var(--text-lg);font-weight:400;color:var(--color-text)}
.faq__question:hover{color:var(--color-primary)}
.faq__icon{top:1.05rem;right:0.25rem}
.faq__answer{padding:0 0 1.25rem}
.faq__answer p{color:var(--color-text-muted);font-size:var(--text-base);max-width:68ch}

/* Why Codon */
.why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 3rem;margin-top:0;max-width:60rem}
.why__item{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.why__num{display:none}
.why__item h3{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;margin:0 0 0.35rem;font-variation-settings:normal}
.why__item p{color:var(--color-text-muted);font-size:0.9375rem}
@media (max-width:700px){.why__grid{grid-template-columns:1fr}}

/* Approach: a real sequence, so the numbers stay */
.approach__inner{display:block}
.steps{display:block;border-top:1px solid var(--color-border);margin-top:0;max-width:60rem}
.step,.step:last-child{display:grid;grid-template-columns:4.5rem minmax(0,14rem) minmax(0,1fr);gap:1rem 2rem;padding:1.5rem 0;border:0;border-bottom:1px solid var(--color-divider);border-radius:0;background:none;box-shadow:none;align-items:baseline}
.step__index{width:auto;font-family:var(--font-display);font-variation-settings:'opsz' 72;font-size:2.4375rem;font-weight:400;color:var(--color-primary);line-height:1}
.step h3{font-size:var(--text-xl);font-weight:400;margin:0}
.step p{color:var(--color-text-muted);font-size:0.9375rem;margin:0}
@media (max-width:700px){.step,.step:last-child{grid-template-columns:3rem 1fr}.step p{grid-column:2}}

/* Guides on the homepage */
.related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem 2rem;margin-top:0}
.link-card{display:block;border:0;border-top:1px solid var(--color-divider);border-radius:0;background:none;box-shadow:none;padding:0.75rem 0 0;text-decoration:none}
.link-card:hover{transform:none;border-color:var(--color-primary)}
.link-card__type{display:none}
.link-card__title{display:block;font-family:var(--font-display);font-variation-settings:'opsz' 24;font-size:var(--text-lg);color:var(--color-text);font-weight:400}
.link-card:hover .link-card__title{color:var(--color-primary)}
.link-card__text{display:block;color:var(--color-text-muted);font-size:0.9375rem;margin-top:0.35rem}
.link-card__more{display:none}
.related__all{margin-top:1.5rem}
.related__all a{color:var(--color-primary);text-decoration:none;border-bottom:1px solid var(--color-primary)}

/* Contact */
.contact__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem 4rem;max-width:var(--content-wide)}
.contact .section-title{margin-bottom:1rem}
.contact__details{margin-top:1.25rem}
.contact__details a{color:var(--color-primary)}
.form{background:none;border:0;border-radius:0;padding:0;box-shadow:none;gap:1rem}
.form input,.form select,.form textarea{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);padding:0.7rem 0.8rem}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:1px}
.form label{color:var(--color-text-muted);font-size:0.875rem}
@media (max-width:860px){.contact__inner{grid-template-columns:1fr}}

/* ---------- Inner pages ---------- */
.page-hero{background:var(--color-bg);border-bottom:1px solid var(--color-divider);padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,3.5rem)}
.page-hero__inner{max-width:var(--content-wide)}
.crumbs{font-size:0.875rem;color:var(--color-text-faint);margin-bottom:1.5rem}
.crumbs a{color:var(--color-text-muted);text-decoration:none}
.crumbs a:hover{color:var(--color-text)}
.page-hero .section-label{position:static;grid-row:auto;font-size:0.9375rem;margin-bottom:0.75rem}
.page-title{font-size:clamp(2.25rem,1.5rem + 2.8vw,3.5rem);font-weight:400;letter-spacing:-0.012em;max-width:18ch;margin:0 0 1.25rem}
.page-hero .lede{margin-top:0;margin-bottom:1.5rem}
.page-hero__actions{gap:0.75rem 1.25rem}
.page-hero__actions .btn--ghost{background:none;border:0;padding:0;color:var(--color-primary);border-bottom:1px solid var(--color-primary);border-radius:0;font-weight:400}
.page-body{padding-block:clamp(3rem,6vw,5rem)}
.page-body__grid{max-width:var(--content-wide);grid-template-columns:minmax(0,1fr) 18rem;gap:3rem 4rem}
.prose{max-width:68ch}
.prose > h2{font-size:1.9375rem;font-weight:400;margin:2.75rem 0 1rem}
.prose > h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400}
.prose > p{color:var(--color-text);margin-top:0;margin-bottom:1rem}
.prose li{color:var(--color-text-muted)}
.prose li strong,.prose p strong{color:var(--color-text)}
.answer{border:0;border-left:3px solid var(--color-primary);border-radius:0;background:none;padding:0.25rem 0 0.25rem 1.25rem;margin:0 0 2.5rem;font-family:var(--font-display);font-variation-settings:'opsz' 24;font-size:var(--text-lg);line-height:1.5;max-width:62ch}
.answer__label{display:block;font-family:var(--font-body);font-size:0.875rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--color-primary);margin-bottom:0.5rem}
.page-aside{position:sticky;top:6.5rem;display:grid;gap:1.5rem}
.facts{border:0;border-top:1px solid var(--color-border);border-radius:0;background:none;box-shadow:none;padding:0}
.facts h2{font-family:var(--font-display);font-style:italic;font-variation-settings:'opsz' 24;font-size:var(--text-lg);font-weight:400;letter-spacing:0;text-transform:none;color:var(--color-primary);padding:1rem 0 0.5rem;margin:0}
.facts dl{margin:0}
.facts div{display:grid;gap:0.15rem;padding:0.75rem 0;border-bottom:1px solid var(--color-divider)}
.facts dt{font-size:0.875rem;color:var(--color-text-faint)}
.facts dd{margin:0;font-size:0.9375rem;color:var(--color-text)}
.aside-cta{border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:0;background:var(--color-surface);box-shadow:none;padding:1.5rem}
.aside-cta h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin:0 0 0.5rem}
.aside-cta p{color:var(--color-text-muted);font-size:0.9375rem}
.aside-cta .btn{margin-top:1rem;background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.page-note{color:var(--color-text-faint);font-size:0.875rem;margin-top:2.5rem}
.table-wrap{border:0;border-radius:0;background:none;margin-top:1rem}
table{font-size:0.9375rem}
th,td{padding:0.7rem 0.75rem 0.7rem 0;border-bottom:1px solid var(--color-divider);background:none}
thead th{font-size:0.875rem;font-weight:600;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);background:none}
tbody th{font-weight:500;color:var(--color-text)}
td{color:var(--color-text-muted)}
.related:not(.related--home){background:var(--color-surface)}
.related:not(.related--home) .section-inner{max-width:var(--content-wide)}
@media (max-width:960px){.page-body__grid{grid-template-columns:1fr}.page-aside{position:static}}

/* Guides hub */
.hub-heading{font-size:1.9375rem;font-weight:400;margin:2.5rem 0 1rem}

/* ---------- Footer ---------- */
.footer{background:var(--color-bg);border-top:1px solid var(--color-divider);padding-block:3rem 2.5rem}
.footer__inner{max-width:var(--content-wide)}
.footer__nav a{color:var(--color-text);font-size:0.9375rem}
.footer__nav a:hover{color:var(--color-primary)}
.footer__copy{color:var(--color-text-faint);font-size:0.875rem}

/* ---------- Fixes after the first build ---------- */
.about .section-inner,.approach .section-inner{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.5rem 3rem;align-items:start}
.about .section-inner > *,.approach .section-inner > *{grid-column:2;min-width:0}
.about__content{max-width:none}
.about__content > p{max-width:68ch}
.approach__grid > div .section-title,.approach__grid > div .lede{margin-bottom:1rem}
@media (max-width:899px){.about .section-inner,.approach .section-inner{grid-template-columns:1fr;gap:0.75rem}}
.card ul,.card .card__list{list-style:none;padding:0;margin:0.35rem 0 0}
.card li{position:relative;padding-left:1.1rem;margin:0.3rem 0;font-size:0.9375rem;color:var(--color-text-muted)}
.card li::before{content:'';position:absolute;left:0;top:0.75em;width:0.45rem;height:1px;background:var(--color-primary);border-radius:0;transform:none}
.card li::marker{content:''}
.faq .section-label,.faq .section-title,.faq > .faq__inner > .lede{text-align:left;margin-inline:0}
.faq__inner{max-width:var(--content-wide)}
.lede--center{margin-inline:0}
.cta-estimate .section-inner{display:block}
.estimate__panel{width:100%}
.estimate__panel > div{min-width:0}
.card .card__list{display:block;border-top:0;padding-top:0}

/* Left-align every homepage section heading (the redesign centred some) and
   collapse the memo grid cleanly on narrow screens. */
.section-title,.about .lede,.services .lede,.faq .lede,.why .lede,.approach .lede,.compare .lede,.related--home .lede{text-align:left;margin-inline:0}
.services .section-title,.services .lede{margin-left:0;margin-right:0}
@media (max-width:899px){
  .about .section-inner > *,.services .section-inner > *,.faq .section-inner > *,.why .section-inner > *,.approach .section-inner > *,.related--home .section-inner > *,.compare .section-inner > *{grid-column:1}
  .section-label{grid-column:1 !important;grid-row:auto}
}

/* Memo grids: the label spans 20 rows so it can stick, but most of those rows
   are empty, and the row gap was adding ~400px of dead space under every
   section. Zero the row gap and space the content column with margins. */
@media (min-width:900px){
  .about .section-inner,.services .section-inner,.faq .section-inner,.why .section-inner,.approach .section-inner,.related--home .section-inner,.compare .section-inner{row-gap:0}
  .about .section-inner > :not(.section-label) + :not(.section-label),.services .section-inner > :not(.section-label) + :not(.section-label),.faq .section-inner > :not(.section-label) + :not(.section-label),.why .section-inner > :not(.section-label) + :not(.section-label),.approach .section-inner > :not(.section-label) + :not(.section-label),.related--home .section-inner > :not(.section-label) + :not(.section-label),.compare .section-inner > :not(.section-label) + :not(.section-label){margin-top:1.5rem}
}

/* Visible revision date under a guide's lede, for readers and for AI answer engines. */
.page-hero__date{font-size:0.875rem;color:var(--color-text-faint);margin:1rem 0 0}
.page-hero__date time{color:var(--color-text-muted)}


/* Centre the comparison pop-up (the site reset removes the default margin). */
.compare-dialog{margin:auto}
@media (max-width:720px){.compare-dialog{margin:0}}

/* Brand lockup: the rule under CODON becomes two short lines with the
   three-dot triangle mark between them (logo option I). Sized in em so it
   scales with the wordmark. */
.brand__name{border-bottom:0}
.brand__rule{display:flex;align-items:center;gap:.25em;align-self:stretch;color:var(--color-primary);font-size:1.375rem}
.brand__rule-line{flex:1 1 0;height:1px;background:currentColor}
/* Proportions follow the original mark: triangle about half the cap height, dots about an eighth of it, gap half the triangle width. */
.brand .brand__tri{display:block;flex:none;width:.5em;height:.45em;fill:currentColor}
.brand__sub{margin-top:.6rem}