/* Doxifi landing page
   Fluid layout: no fixed page-width cap. Prose keeps a readable measure;
   the shell itself uses the viewport.
   Two themes; teal is the default, the nav toggle switches to blue. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/inter-700.woff2') format('woff2');
}

/* ---------- tokens: cobalt (default) ----------
 * The bare :root block carries the DEFAULT theme, so it must hold cobalt's
 * values. Teal keeps its own explicit block below and is unaffected. */
:root,
:root[data-theme="cobalt"] {
  --ink: #0B1524;
  --ink-soft: #24344A;
  --muted: #4A5A70;
  --muted-2: #55657C;

  --accent: #1D4ED8;
  --accent-deep: #1637A0;
  --accent-tint: #E8EFFD;
  --accent-line: #C4D5F8;

  --page: #F6F8FC;
  --card: #FFFFFF;
  --line: #DFE6F0;
  --line-soft: #EBF0F7;
  --old-bg: #EEF2F8;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow: 0 1px 2px rgba(11, 21, 36, .04), 0 14px 36px -14px rgba(11, 21, 36, .11);
  --shadow-lift: 0 2px 4px rgba(11, 21, 36, .05), 0 26px 60px -22px rgba(11, 21, 36, .19);

  --pad: clamp(20px, 4vw, 72px);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- tokens: teal (explicit) ---------- */
:root[data-theme="teal"] {
  --ink: #0C1512;
  --ink-soft: #2A3B37;
  --muted: #566A65;
  --muted-2: #5F726D;

  --accent: #0E5F55;
  --accent-deep: #0A4740;
  --accent-tint: #E6F1EE;
  --accent-line: #C6DDD7;

  --page: #F7F8F7;
  --card: #FFFFFF;
  --line: #E1E7E5;
  --line-soft: #ECF1EF;
  --old-bg: #F1F2F1;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow: 0 1px 2px rgba(12, 21, 18, .05), 0 14px 36px -14px rgba(12, 21, 18, .12);
  --shadow-lift: 0 2px 4px rgba(12, 21, 18, .06), 0 26px 60px -22px rgba(12, 21, 18, .20);

  --pad: clamp(20px, 4vw, 72px);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- tokens: blue (alternate) ---------- */
/* ---------- tokens: cobalt (solid, professional, fresh) ---------- */
:root[data-theme="cobalt"] {
  --ink: #0B1524;
  --ink-soft: #24344A;
  --muted: #4A5A70;
  --muted-2: #55657C;

  --accent: #1D4ED8;
  --accent-deep: #1637A0;
  --accent-tint: #E8EFFD;
  --accent-line: #C4D5F8;

  --page: #F6F8FC;
  --card: #FFFFFF;
  --line: #DFE6F0;
  --line-soft: #EBF0F7;
  --old-bg: #EEF2F8;

  --shadow: 0 1px 2px rgba(11, 21, 36, .04), 0 14px 36px -14px rgba(11, 21, 36, .11);
  --shadow-lift: 0 2px 4px rgba(11, 21, 36, .05), 0 26px 60px -22px rgba(11, 21, 36, .19);
}

/* ---------- tokens: violet (outgoing, modern) ---------- */
/* ---------- tokens: citrus (warm, energetic) ---------- */
:root[data-theme="citrus"] {
  --ink: #1C1206;
  --ink-soft: #3D2C18;
  --muted: #6B5740;
  --muted-2: #75634C;

  --accent: #C2410C;
  --accent-deep: #93300A;
  --accent-tint: #FDECE1;
  --accent-line: #F6CBB0;

  --page: #FDFAF6;
  --card: #FFFFFF;
  --line: #EFE4D8;
  --line-soft: #F7EEE5;
  --old-bg: #F6EFE6;

  --shadow: 0 1px 2px rgba(28, 18, 6, .04), 0 14px 36px -14px rgba(28, 18, 6, .10);
  --shadow-lift: 0 2px 4px rgba(28, 18, 6, .05), 0 26px 60px -22px rgba(28, 18, 6, .18);
}

/* ---------- avatar tones per theme ---------- */
:root[data-theme="cobalt"] .oc-own[data-tone="a"] { background: #DDE7FC; color: #1B3A78; }
:root[data-theme="cobalt"] .oc-own[data-tone="b"] { background: #FBE7D1; color: #7A4A18; }
:root[data-theme="cobalt"] .oc-own[data-tone="c"] { background: #DCE9F7; color: #1F4568; }
:root[data-theme="cobalt"] .oc-own[data-tone="d"] { background: #F7DFDF; color: #7A2D2D; }


:root[data-theme="citrus"] .oc-own[data-tone="a"] { background: #FBE3D4; color: #7A3C15; }
:root[data-theme="citrus"] .oc-own[data-tone="b"] { background: #EAF0D4; color: #43551A; }
:root[data-theme="citrus"] .oc-own[data-tone="c"] { background: #E1EAF6; color: #274566; }
:root[data-theme="citrus"] .oc-own[data-tone="d"] { background: #F4DCDC; color: #7A2C2C; }
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 0.55vw + 14px, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

/* Fluid shell: no max-width cap, generous side padding.
   Beyond a 1920px viewport (roughly a 21-inch display) a gutter takes over and
   grows with the screen, so very wide monitors keep a readable column instead of
   stretching edge to edge. 0.15 at 1920 base, +0.25 per extra px per side. */
.wrap {
  width: 100%;
  padding-inline: clamp(20px, 4vw, 72px);
}
@media (min-width: 1920px) {
  .wrap {
    /* 288px = 15% of 1920; each px above adds a quarter px of gutter per side */
    padding-inline: calc(288px + (100vw - 1920px) * 0.25);
  }
}
.hero h1, .hero .lede, .hero .promise, .hero-note { max-width: 24ch; }
.hero .lede, .hero .promise, .hero-note { max-width: 48ch; }
.band h2, .cta-title { max-width: 24ch; }
.band .sub { max-width: 46ch; }
.foot-brand { max-width: 26ch; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
.eyebrow {
  font-size: clamp(11px, .3vw + 10px, 12.5px);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(12px, 1vw, 18px);
}
h2 { font-size: clamp(28px, 2.1vw + 16px, 48px); }
.sub {
  margin-top: clamp(12px, 1vw, 18px);
  color: var(--muted);
  font-size: clamp(16px, .5vw + 14px, 19px);
  line-height: 1.55;
}
.hl { color: var(--accent); }
.footnote {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.55; color: var(--muted-2);
  max-width: 70ch;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-md);
  font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  /*
   * transition background-color on hover only, not on a theme change.
   * A transition on a var()-driven colour makes the first computed value after
   * a data-theme switch resolve against the previous theme's custom property,
   * so the button visibly lags one paint behind the rest of the page.
   */
  transition: color .16s ease, border-color .16s ease;
}
.btn:hover { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-deep); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-quiet { color: var(--ink); padding-inline: 4px; }
.btn-quiet:hover { color: var(--accent); }
.btn-quiet span { display: inline-block; margin-left: 8px; transition: transform .16s ease; }
.btn-quiet:hover span { transform: translateX(3px); }
.btn-invert { background: #fff; color: var(--accent-deep); }
.btn-invert:hover { background: var(--accent-tint); }
.btn-invert-quiet { border-color: rgba(255,255,255,.38); color: #fff; }
.btn-invert-quiet:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--page);
  border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(8px)) {
  .nav { background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); }
}
.nav-inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); min-height: 68px; }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 700; letter-spacing: -.03em;
}
.mark { width: 20px; height: 20px; border-radius: 5px; background: var(--accent); position: relative; flex: none; }
.mark::after {
  content: ""; position: absolute; inset: 5px 5px 5px 6px;
  border-top: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 1px;
}
.nav-links { display: flex; gap: clamp(16px, 1.6vw, 28px); margin-left: auto; font-size: 15px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.theme-picker { display: flex; align-items: center; gap: 6px; }
.sw {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0; cursor: pointer;
  background-clip: content-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  transition: box-shadow .16s ease, transform .16s ease;
}
.sw:hover { transform: scale(1.12); }
.sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sw[aria-checked="true"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 0 0 2px var(--card), 0 0 0 4px var(--sw-c);
}
.sw[data-theme-value="teal"]   { background-color: #0E5F55; --sw-c: #0E5F55; }
.sw[data-theme-value="cobalt"] { background-color: #1D4ED8; --sw-c: #1D4ED8; }
.sw[data-theme-value="citrus"] { background-color: #C2410C; --sw-c: #C2410C; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .theme-picker { gap: 4px; }
  .sw { width: 19px; height: 19px; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 6vw, 104px) clamp(40px, 5vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 48px); }
}

.hero h1 {
  font-size: clamp(34px, 3.4vw + 14px, 68px);
  letter-spacing: -.034em;
  margin-bottom: clamp(18px, 1.6vw, 26px);
}
.lede {
  font-size: clamp(17px, .6vw + 15px, 21px);
  line-height: 1.58;
  color: var(--muted);
}

.promise {
  margin-top: clamp(24px, 2.4vw, 34px);
  display: grid;
  gap: 10px;
}
.promise li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(15px, .35vw + 14px, 17.5px);
  color: var(--ink-soft);
  line-height: 1.5;
}
.promise li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 11px; height: 1.6px; background: var(--accent);
}

/* hero outline card: shows ownership without explaining it */
.outline-card {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: clamp(18px, 1.6vw, 26px);
}
.oc-head { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.oc-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px;
}
.oc-title { font-size: clamp(16px, .5vw + 14px, 19px); font-weight: 700; letter-spacing: -.02em; }

.oc-list { padding-top: 6px; }
.oc-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(13px, .3vw + 12px, 14.5px);
}
.oc-list li:last-child { border-bottom: 0; }
.oc-num {
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 700; color: var(--muted-2);
}
.oc-name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* owner block: avatar + name + role */
.oc-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oc-id { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; }
.oc-id b { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.oc-id i {
  font-style: normal;
  font-size: 11px; letter-spacing: .005em;
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
}

.oc-active {
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
  border-bottom-color: transparent !important;
}
.oc-active .oc-name { color: var(--accent-deep); font-weight: 700; }
.oc-active .oc-num { color: var(--accent); }

/* Nested rows read as children of the row above */
.oc-sub .oc-num { padding-left: 10px; }
.oc-sub .oc-name { padding-left: 10px; }
.oc-sub { border-left: 2px solid var(--accent-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.oc-sub .oc-id b { color: var(--muted); font-weight: 400; }

/* On narrow viewports the owner name would clip against the section name, so
   the owner block drops under the section and spans the row instead of
   competing for the same horizontal space. */
@media (max-width: 560px) {
  .oc-list li {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas: "num name" ". who";
    row-gap: 6px;
    align-items: start;
  }
  .oc-num { grid-area: num; padding-top: 2px; }
  .oc-name { grid-area: name; white-space: normal; }
  .oc-who { grid-area: who; }
  .oc-id b { white-space: normal; }
  .oc-sub .oc-num { padding-left: 0; }
  .oc-sub .oc-name { padding-left: 0; }
}

.oc-own {
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
:root[data-theme="teal"] .oc-own[data-tone="a"] { background: #DFEDE9; color: #24403A; }
:root[data-theme="teal"] .oc-own[data-tone="b"] { background: #F3E7D8; color: #5A4327; }
:root[data-theme="teal"] .oc-own[data-tone="c"] { background: #E4E6F2; color: #333A5C; }
:root[data-theme="teal"] .oc-own[data-tone="d"] { background: #EFE3E3; color: #5C3131; }

.oc-foot {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted-2);
}

.cta-row { display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 2.6vw, 38px); flex-wrap: wrap; }
.hero-note { margin-top: clamp(18px, 1.6vw, 26px); font-size: 14px; color: var(--muted-2); }

/* ---------- bands ---------- */
.band { padding-block: clamp(48px, 5.5vw, 96px); }
.band-alt { background: var(--card); border-block: 1px solid var(--line-soft); }

/* ---------- contrast pair ---------- */
.twocol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin-top: clamp(28px, 3vw, 44px);
}
.old, .new { padding: clamp(22px, 2vw, 34px); border-radius: var(--radius-xl); }
.old { background: var(--old-bg); border: 1px solid var(--line); }
.new { background: var(--accent); color: #fff; box-shadow: var(--shadow-lift); }

.tag {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: clamp(14px, 1.4vw, 20px);
}
.tag-invert { color: rgba(255,255,255,.72); }

.cross li, .tick li {
  position: relative; padding-left: 28px;
  font-size: clamp(14.5px, .3vw + 13.5px, 16px);
  line-height: 1.5;
  margin-bottom: 12px;
}
.cross li:last-child, .tick li:last-child { margin-bottom: 0; }
.cross li { color: var(--muted); }
.cross li::before, .cross li::after {
  content: ""; position: absolute; left: 4px; top: .64em;
  width: 9px; height: 1.6px; background: var(--muted-2);
}
.cross li::before { transform: rotate(-45deg); }
.cross li::after { transform: rotate(45deg); }

.tick li { color: rgba(255,255,255,.92); }
.tick li::before {
  content: ""; position: absolute; left: 3px; top: .56em;
  width: 9px; height: 4.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: clamp(18px, 1.8vw, 30px) clamp(20px, 2.2vw, 40px);
  margin-top: clamp(28px, 3vw, 48px);
}
.feat h3 {
  font-size: clamp(15.5px, .3vw + 14.5px, 17px);
  letter-spacing: -.015em;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.feat p { font-size: clamp(14px, .25vw + 13.5px, 15px); line-height: 1.55; color: var(--muted); }

/* ---------- pricing ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  margin-top: clamp(28px, 3vw, 44px);
  align-items: stretch;
}
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(22px, 2vw, 32px);
  display: flex; flex-direction: column;
}
.tier-lead { border-color: var(--accent); box-shadow: var(--shadow); }
.tier-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.badge {
  font-size: 10.5px; letter-spacing: .08em; padding: 4px 9px;
  border-radius: 100px; background: var(--accent-tint); color: var(--accent-deep);
}
.tier-price {
  margin-top: 14px; font-size: clamp(36px, 2vw + 20px, 44px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier-price .cur { font-size: 20px; letter-spacing: 0; margin-right: 3px; vertical-align: 10px; color: var(--muted); }
.tier-price .per { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted-2); margin-left: 4px; }
.tier-for {
  margin-top: 12px; font-size: 14.5px; line-height: 1.55;
  color: var(--muted); min-height: 44px;
}
.tier-list {
  margin: 20px 0 24px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 10px; flex: 1;
}
.tier-list li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.5;
}
.tier-list li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 8px; height: 4px;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.tier-list b { font-weight: 700; color: var(--ink); }

/* Two plans: fill the row, half each. The 900px cap was for three tiers. */
.tiers-two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: none;
}
/* A half-width card is wide, so the feature list splits into two columns on
   larger screens rather than becoming one long thin stack. */
@media (min-width: 1100px) {
  .tier-lead .tier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
  }
}

/* worked examples: what a team actually pays at each size */
.price-examples {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.pe-head {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 16px;
}
.pe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
}
.pe-grid > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
}
.pe-people { font-size: 13px; color: var(--muted); }
.pe-cost {
  font-size: clamp(19px, .8vw + 14px, 23px);
  font-weight: 700; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.pe-cost span { font-size: 12px; font-weight: 400; color: var(--muted-2); letter-spacing: 0; }

/* ---------- cta ---------- */
.cta { background: var(--accent-deep); color: #fff; padding-block: clamp(44px, 5vw, 76px); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 3vw, 40px); flex-wrap: wrap; }
.cta-title { font-size: clamp(26px, 1.8vw + 16px, 40px); color: #fff; }
.cta-sub {
  margin-top: 12px; color: rgba(255,255,255,.78);
  max-width: 46ch; font-size: clamp(15px, .3vw + 14px, 16.5px); line-height: 1.6;
}
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.foot { padding-block: clamp(40px, 4.5vw, 64px) 28px; }
.foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.wordmark-sm { font-size: 17px; }
.wordmark-sm .mark { width: 17px; height: 17px; border-radius: 4px; }
.foot-note { margin-top: 12px; font-size: 14px; color: var(--muted-2); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.foot-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px;
}
.foot-cols a { display: block; font-size: 14.5px; color: var(--ink-soft); padding: 4px 0; }
.foot-cols a:hover { color: var(--accent); }
.foot-status { font-size: 13.5px; line-height: 1.6; color: var(--muted-2); max-width: 32ch; }
.foot-legal {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 20px; font-size: 13px; color: var(--muted-2); flex-wrap: wrap;
}
@media (max-width: 820px) {
  .foot-inner { grid-template-columns: 1fr; }
}