/* ═══════════════════════════════════════════════════════════════════════════
   Todah — public site. Marketing, pricing, legal.

   The rule this file exists to enforce: COLOUR COMMITS AT PAGE SCALE. Whole
   sections are saturated fields, not white sections with a coloured button in
   them. The previous version was white throughout with one indigo accent, and
   that is exactly what made it look like every other product. A field section
   here owns its entire band of the page — background, type, borders, buttons —
   and the page is read as a sequence of those bands.
   ═══════════════════════════════════════════════════════════════════════════ */

.site { scroll-behavior:smooth; scroll-padding-top:84px; }
.site body { background:var(--p50); font-size:var(--t-md); line-height:1.62; }

/* The bands themselves are always full-bleed; this caps the CONTENT inside
   them. Readability is protected by the ch-based caps on headings and prose
   further down, not by this number — so it can be generous. 1140 left too
   much empty rail on a 1440 screen and read as a narrow column on a wide
   page. */
.wrap { width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--s8); }
.wrap-narrow { max-width:760px; }

/* ═══ Colour fields ═══════════════════════════════════════════════════════
   Each field re-points the local variables, so everything inside — rules,
   secondary text, buttons — recolours itself without a single override. */

.field { background:var(--fld); color:var(--fg); }
.field { --fld:var(--p50); --fg:var(--text); --fg-2:var(--text-2); --hair:var(--border); }

/* Class names are kept because the markup names them; the values are re-cut.
   Under the old palette these carried warm bone foregrounds, which on the new
   accent grounds were unreadable — field-mustard was putting near-black text
   on deep navy. Each pairing below was checked for contrast. */
.field-bone   { --fld:var(--p50);    --fg:var(--p800); --fg-2:var(--p500);
                --hair:var(--p200); }
.field-paper  { --fld:var(--p100);   --fg:var(--p800); --fg-2:#6c6b6d;
                --hair:var(--p200); }
.field-ink    { --fld:#18191b;       --fg:#f9f9f9;     --fg-2:#b3b3b4;
                --hair:rgba(249,249,249,.14); }
/* The accent, at its three depths — the beads again, at section scale. */
.field-blue   { --fld:#475bff;       --fg:#ffffff;     --fg-2:#f1f3ff;
                --hair:rgba(255,255,255,.24); }
.field-red    { --fld:#1e2a99;       --fg:#ffffff;     --fg-2:#c3cbf0;
                --hair:rgba(255,255,255,.20); }
.field-mustard{ --fld:#c2cfff;       --fg:#141a3d;     --fg-2:#3a438a;
                --hair:rgba(20,26,61,.20); }

.field p, .field .lede { color:var(--fg-2); }

/* ═══ Dark ════════════════════════════════════════════════════════════════
   The site defaults to dark. The saturated bands already work on either
   theme, but the two light grounds are literal light colours -- flipping a
   flag would leave them glaring. They get dark counterparts here, and the
   pale band goes deep so the rhythm of light-and-dark sections survives.
   Every pairing below was checked for contrast in both roles. */

[data-theme="dark"] .field-bone,
[data-theme="dark"] .field { --fld:#18191b; --fg:#f9f9f9; --fg-2:#b3b3b4;
                             --hair:rgba(249,249,249,.12); }
[data-theme="dark"] .field-paper { --fld:#212224; --fg:#f9f9f9; --fg-2:#b3b3b4;
                                   --hair:rgba(249,249,249,.12); }
[data-theme="dark"] .field-mustard { --fld:#1a2450; --fg:#ffffff; --fg-2:#b9c4ee;
                                     --hair:rgba(255,255,255,.18); }

/* The nav sits on whatever band is under it. */
[data-theme="dark"] .site-nav { background:color-mix(in srgb, #18191b 86%, transparent); }
[data-theme="dark"] .site-nav.scrolled { border-bottom-color:rgba(249,249,249,.12); }
[data-theme="dark"] .brand-lockup .wm { color:#f9f9f9; }
[data-theme="dark"] .nav-links a { color:#b3b3b4; }
[data-theme="dark"] .nav-links a:hover { color:#f9f9f9; }
[data-theme="dark"] .nav-links .sep { background:rgba(249,249,249,.18); }
[data-theme="dark"] .mega-trigger { color:#b3b3b4; }
[data-theme="dark"] .mega-trigger:hover,
[data-theme="dark"] .mega-trigger[aria-expanded="true"] { color:#f9f9f9; }
[data-theme="dark"] .mega { background:#252628; }
[data-theme="dark"] .mega-group > h4 { color:#7a7a7b; }
[data-theme="dark"] .mega-item .t { color:#f9f9f9; }
[data-theme="dark"] .mega-item .d { color:#b3b3b4; }
[data-theme="dark"] .mega-item:hover { background:rgba(237,238,240,.08); }
[data-theme="dark"] .burger { color:#b3b3b4; }
[data-theme="dark"] .burger:hover { background:rgba(237,238,240,.08); }

/* ── The theme switch. Two beads on a rod: the lit one is the mode you are
      in. It is the identity doing a job rather than a borrowed sun/moon. ── */
.theme-switch {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 10px; border-radius:var(--r-full);
  background:var(--ghost); border:1px solid transparent; cursor:pointer;
  color:inherit; transition:background var(--base) var(--ease);
}
.theme-switch:hover { background:var(--ghost-hover); }
.theme-switch svg { width:15px; height:15px; display:block; }
.theme-switch .lbl { font-size:var(--t-xs); font-weight:700; }
@media (max-width:900px) { .theme-switch .lbl { display:inline; } }


.field h1, .field h2, .field h3 { color:var(--fg); }

/* ═══ Nav ═════════════════════════════════════════════════════════════════ */
.site-nav {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--p50) 86%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--base) var(--ease);
}
.site-nav.scrolled { border-bottom-color:var(--p200); }
.site-nav .inner {
  max-width:1280px; margin-inline:auto; padding:0 var(--s8);
  height:72px; display:flex; align-items:center; gap:var(--s8);
}

.brand-lockup { display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand-lockup .tile { width:28px; height:28px; border-radius:6px; flex:none; }
.brand-lockup .wm {
  font-family:var(--display); font-size:var(--t-xl); font-weight:700;
  letter-spacing:-.03em; color:var(--p900); line-height:1;
}

.nav-links { display:flex; align-items:center; gap:var(--s6); margin-left:auto; }
.nav-links a {
  font-size:var(--t-base); font-weight:700; color:var(--p800);
  text-decoration:none; transition:color var(--fast) var(--ease-io);
}
.nav-links a:hover { color:var(--p900); }
.nav-links .sep { width:1px; height:16px; background:var(--p200); }

.burger { display:none; margin-left:auto; padding:var(--s2); border-radius:var(--r); color:var(--p600); }
.burger:hover { background:var(--p100); }

/* ═══ Buttons ═════════════════════════════════════════════════════════════
   Spaceship's, measured on spaceship.com: 40px with a 16px bold label, 48px
   for the call to action, always a pill. A button inherits the field it
   stands in, so the same class reads correctly on light, dark and colour. */

.btn-site {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:40px; padding:0 16px; border-radius:var(--r-full);
  font-size:var(--t-base); line-height:24px; font-weight:700;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid transparent;
  transition:background var(--base) var(--ease), color var(--base) var(--ease),
             border-color var(--base) var(--ease);
}
.btn-site.lg { height:48px; padding:0 24px; font-size:var(--t-base); }

/* On a light field the primary button is ink; on a dark or saturated field it
   inverts to paper. One rule, driven by the field's own foreground. */
.btn-site.primary { background:var(--fg,var(--p900)); color:var(--fld,var(--p50)); }
.btn-site.primary:hover { opacity:.9; }

/* Secondary is a wash, never an outline: Spaceship's ghost is an 8% fill of
   the field's own foreground with no border. */
.btn-site.ghost { background:color-mix(in srgb, var(--fg,var(--p900)) 8%, transparent); color:var(--fg,var(--p900)); border-color:transparent; }
.btn-site.ghost:hover { background:color-mix(in srgb, var(--fg,var(--p900)) 13%, transparent); }

/* The one place a bead colour is used as a button: the main call to action on
   a bone field, where nothing else is competing for it. */
.btn-site.bead { background:var(--bead-2); color:#fbf6ee; border-color:transparent; }
.btn-site.bead:hover { background:var(--accent-hover); }
/* On the dark theme the ramp lightens and --bead-2 goes pale, which left the
   light label at about 2.6:1. The deepest bead holds it above 4.5:1. */
[data-theme="dark"] .btn-site.bead,
[data-theme="dark"] .btn-site.bead:hover { background:var(--bead-3); color:#ffffff; }

/* ═══ Sections ════════════════════════════════════════════════════════════ */
.section { padding:var(--s24) 0; }
.section.tight { padding:var(--s16) 0; }
.section h2 { font-size:var(--t-3xl); max-width:17ch; }
/* A page whose one heading sits in a section, not a hero (contact): the h1
   search engines want, at the size the section was designed for. */
.section h1.as-h2 { font-size:var(--t-3xl); max-width:17ch; }
.wrap-narrow h2 { max-width:24ch; }
.section .lede {
  font-size:var(--t-lg); line-height:1.6; max-width:60ch; margin-top:var(--s5);
}

/* A rod with its bead, used to open a section instead of an eyebrow label. */
.rod-mark { width:64px; height:1px; background:var(--hair); position:relative; margin-bottom:var(--s6); }
.rod-mark::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--bead-1);
}
.rod-mark.two::before   { background:var(--bead-2); }
.rod-mark.three::before { background:var(--bead-3); }

/* ═══ Hero ════════════════════════════════════════════════════════════════ */
.hero { padding:var(--s20) 0 var(--s16); position:relative; overflow:hidden; }
.hero h1 {
  font-size:clamp(2.9rem, 6.6vw, 5.1rem); line-height:1.04; letter-spacing:-.01em;
  max-width:13ch; font-weight:700;
}
.hero h1 em { font-style:normal; color:var(--bead-2); }
.hero .sub {
  font-size:var(--t-lg); line-height:1.58; color:var(--p600);
  max-width:52ch; margin-top:var(--s6);
}
.cta-row { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s8); }
.reassure {
  margin-top:var(--s6); font-size:var(--t-sm); color:var(--p500);
  display:flex; gap:var(--s5); flex-wrap:wrap; align-items:center;
}
.reassure span { display:inline-flex; align-items:center; gap:7px; }
.reassure i {
  width:7px; height:7px; border-radius:50%; background:var(--bead-1); flex:none;
}
.reassure span:nth-child(2) i { background:var(--bead-2); }
.reassure span:nth-child(3) i { background:var(--bead-3); }

/* ═══ The counting frame — the hero's own device ══════════════════════════
   Three rods carrying the three numbers a business owner actually wants. The
   beads sit where the money is. This replaces the browser-screenshot cliché:
   it shows the answer rather than a picture of the software. */
.frame-abacus {
  margin-top:var(--s12); border-radius:var(--r-xl);
  background:var(--p0); box-shadow:var(--sh-3); overflow:hidden;
}
.abacus-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s6); border-bottom:1px solid var(--p150); background:var(--p25);
  font-size:var(--t-sm); color:var(--p500); font-weight:400;
}
.abacus-body { padding:var(--s6) var(--s6) var(--s8); }
.rail {
  display:grid; grid-template-columns:minmax(140px,auto) 1fr auto;
  align-items:center; gap:var(--s5);
  padding:var(--s5) 0; border-bottom:1px solid var(--p150);
}
.rail:last-child { border-bottom:none; }
.rail .k { font-size:var(--t-base); color:var(--p600); font-weight:400; }
.rail .track { position:relative; height:10px; }
.rail .track::before {
  content:''; position:absolute; inset:50% 0 auto; height:1px;
  background:var(--p200); transform:translateY(-50%);
}
.rail .bead {
  position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:var(--sh-1);
}
.rail .v {
  font-size:var(--t-2xl); font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; font-family:var(--display);
}
.rail .d { font-size:var(--t-xs); color:var(--p400); margin-top:2px; }

.synthetic {
  margin-top:var(--s5); font-size:var(--t-xs); color:var(--p400);
  display:flex; align-items:center; gap:7px;
}

/* ═══ Capability list ═════════════════════════════════════════════════════ */
.split { display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s20); align-items:start; }
.split.even { grid-template-columns:1fr 1fr; }
@media (min-width:901px) { .split > :first-child { position:sticky; top:100px; } }
.split.even > :first-child { position:static; }

.cap-list { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8) var(--s6); }
.cap .num {
  font-family:var(--display); font-size:var(--t-sm); font-weight:700;
  color:var(--fg-2); opacity:.7; display:block; margin-bottom:var(--s2);
  font-variant-numeric:tabular-nums;
}
.cap h3 { font-size:var(--t-md); font-weight:700; letter-spacing:0; }
.cap p { font-size:var(--t-base); margin-top:6px; line-height:1.6; }
.cap .bar { height:2px; width:26px; background:var(--bead-1); margin-bottom:var(--s3); }
.cap:nth-child(3n+2) .bar { background:var(--bead-2); }
.cap:nth-child(3n+3) .bar { background:var(--bead-3); }

/* ═══ Feature toggle panel ════════════════════════════════════════════════ */
.panel-visual {
  background:var(--p0);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-2);
  color:var(--p900);
}
.panel-visual .ph { font-family:var(--display); font-size:var(--t-md); font-weight:700; letter-spacing:0; }
.panel-visual .psub { font-size:var(--t-sm); color:var(--p500); margin:3px 0 var(--s4); }
.toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:12px 0; border-top:1px solid var(--p150);
}
.toggle-row .lbl { font-size:var(--t-base); font-weight:400; }
.toggle-row .lbl small { display:block; font-weight:400; color:var(--p500); font-size:var(--t-sm); margin-top:1px; }
.pip {
  width:34px; height:20px; border-radius:var(--r-full); background:var(--p200);
  position:relative; flex:none; transition:background var(--base) var(--ease);
}
.pip::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--p0); box-shadow:var(--sh-1);
  transition:transform var(--base) var(--ease-bead);
}
.pip.on { background:var(--paid); }
.pip.on::after { transform:translateX(14px); }
.toggle-row.pending .lbl { color:var(--p500); }

/* ═══ Pricing ═════════════════════════════════════════════════════════════ */
.bill-toggle {
  display:inline-flex; gap:4px; padding:4px;
  background:color-mix(in srgb, var(--p900) 7%, transparent);
  border:none; border-radius:var(--r-full); margin-top:var(--s6);
}
.bill-toggle button {
  height:40px; padding:0 18px; border-radius:var(--r-full); font-size:var(--t-base);
  font-weight:700; color:var(--p600);
  transition:background var(--base) var(--ease), color var(--fast) var(--ease-io);
}
.bill-toggle button.active { background:var(--p0); color:var(--p900); box-shadow:var(--sh-1); }
.bill-toggle .save { color:var(--paid); margin-left:6px; }

.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s10); align-items:start; }
.plan {
  border:1px solid transparent; border-radius:var(--r-lg);
  padding:var(--s8) var(--s6) var(--s6); background:var(--p0); text-align:left;
  position:relative; box-shadow:var(--sh-2);
  transition:border-color var(--base) var(--ease), box-shadow var(--slow) var(--ease);
}
/* The rod runs across the top of the card and the bead sits on it. A bare
   coloured stripe here would be the system reduced to decoration — the bead is
   the part that carries meaning, so the bead has to be present. */
.plan:hover { box-shadow:var(--sh-3); }
/* The featured plan is marked by the one accent, as a 2px ring, not by an ink
   outline. The rod-and-bead that hung off each card's top edge is gone: it
   ran past the rounded corners and read as a rendering fault. */
.plan.featured { border-color:var(--accent-base); box-shadow:0 0 0 1px var(--accent-base), var(--sh-3); }
.plan .pname { font-family:var(--display); font-size:var(--t-lg); font-weight:700; letter-spacing:-.01em; }
.plan .pdesc { font-size:var(--t-sm); color:var(--p500); margin-top:4px; min-height:36px; }
.plan .price { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:var(--s5) 0 var(--s2); }
.plan .price .from { flex-basis:100%; font-size:var(--t-base); font-weight:700; color:var(--p600); margin-bottom:-6px; }
.plan .price b {
  font-family:var(--display); font-size:var(--t-4xl); font-weight:700;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.plan .price span { font-size:var(--t-base); color:var(--p500); }
.plan .peq { font-size:var(--t-sm); color:var(--p500); min-height:20px; }
.plan .btn-site { width:100%; margin:var(--s5) 0; }
.plan ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.plan li { display:grid; grid-template-columns:15px 1fr; gap:10px; font-size:var(--t-base); color:var(--p600); }
.plan li .dot { width:7px; height:7px; border-radius:50%; background:var(--paid); margin-top:7px; }

/* ═══ Legal ═══════════════════════════════════════════════════════════════ */
.legal { padding:var(--s16) var(--s6) var(--s24); max-width:800px; margin-inline:auto; }
.legal .meta, .legal .updated { font-size:var(--t-sm); color:var(--p500); margin-bottom:var(--s10); }
.legal h1 { font-size:var(--t-3xl); }
.legal h2 {
  font-size:var(--t-xl); margin-top:var(--s12); margin-bottom:var(--s4);
  padding-top:var(--s6); border-top:1px solid var(--p200);
}
.legal h3 { font-size:var(--t-md); margin-top:var(--s6); margin-bottom:var(--s2); font-family:var(--sans); }
.legal p, .legal li { font-size:var(--t-md); color:var(--p700); line-height:1.68; max-width:70ch; }
.legal p + p { margin-top:var(--s4); }
.legal ul, .legal ol { margin:var(--s4) 0 0 var(--s5); display:flex; flex-direction:column; gap:9px; }
.legal a { color:var(--bead-1); }
.legal .callout {
  background:var(--p100); border:1px solid var(--p200); border-radius:var(--r-md);
  padding:var(--s5); margin:var(--s6) calc(var(--s5) * -1);
}
.legal .callout p { margin:0; font-size:var(--t-base); }
.legal .todo {
  background:var(--bead-3-wash); border:1px solid color-mix(in srgb, var(--bead-3) 45%, transparent);
  border-radius:var(--r-md); padding:var(--s4) var(--s5); margin-bottom:var(--s8);
  font-size:var(--t-base); color:#6d4d05; line-height:1.6;
}
.legal .toc {
  background:var(--p100); border:1px solid var(--p200); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6); margin-bottom:var(--s10);
}
.legal .toc ol { margin:var(--s3) 0 0 var(--s5); gap:5px; }
.legal .toc li { font-size:var(--t-base); }

/* ═══ Footer ══════════════════════════════════════════════════════════════ */
.site-foot { padding:var(--s16) 0 var(--s10); }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s10); }
.foot-grid h4 { font-size:var(--t-sm); font-weight:700; color:var(--fg); margin-bottom:var(--s4); }
.foot-grid a {
  display:block; font-size:var(--t-base); color:var(--fg-2);
  text-decoration:none; padding:4px 0; transition:color var(--fast) var(--ease-io);
}
.foot-grid a:hover { color:var(--fg); }
.foot-blurb { font-size:var(--t-base); color:var(--fg-2); line-height:1.6; margin-top:var(--s4); max-width:36ch; }
.foot-legal {
  margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-size:var(--t-sm); color:var(--fg-2);
}
.site-foot .brand-lockup .wm { color:var(--fg); }

/* ═══ Motion ══════════════════════════════════════════════════════════════
   One authored moment: the beads slide along their rods to their final
   positions on first view, which is the identity doing the thing it depicts.
   Everything is readable without it — the hiding class only applies when
   script is present to remove it. */
.js .rise { opacity:0; transform:translateY(16px); }
.js .rise.in {
  opacity:1; transform:none;
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js .frame-abacus .bead { left:0 !important; opacity:0; }
.js .frame-abacus.in .bead {
  left:var(--at) !important; opacity:1;
  transition:left 760ms var(--ease-bead), opacity 240ms linear;
}
.js .frame-abacus.in .bead:nth-of-type(1) { transition-delay:80ms; }
.rail:nth-child(2) .bead { transition-delay:200ms !important; }
.rail:nth-child(3) .bead { transition-delay:320ms !important; }
@media (prefers-reduced-motion:reduce) {
  .js .rise { opacity:1; transform:none; }
  .js .frame-abacus .bead { left:var(--at) !important; opacity:1; }
}

/* ═══ Responsive ══════════════════════════════════════════════════════════ */
@media (max-width:960px) {
  .split, .split.even { grid-template-columns:1fr; gap:var(--s10); }
  @media (min-width:901px) { .split > :first-child { position:static; } }
  .plans { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:var(--s8); }
}

@media (max-width:720px) {
  .site body { font-size:var(--t-base); }
  .section { padding:var(--s16) 0; }
  .hero { padding:var(--s12) 0 var(--s10); }
  .cap-list { grid-template-columns:1fr; gap:var(--s6); }
  .burger { display:block; }
  .nav-links {
    position:absolute; top:60px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--p50); border-bottom:1px solid var(--p200);
    box-shadow:var(--sh-3); padding:var(--s3); display:none;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px var(--s3); border-radius:var(--r); }
  .nav-links a:hover { background:var(--p100); }
  .nav-links .sep { display:none; }
  .nav-links .btn-site { margin-top:var(--s2); }
  .cta-row .btn-site { flex:1; min-width:160px; }
  .rail { grid-template-columns:1fr auto; gap:var(--s3); }
  .rail .track { display:none; }
  .abacus-body { padding:var(--s4); }
  .foot-grid { grid-template-columns:1fr; }
  .foot-legal { flex-direction:column; gap:var(--s2); }
}

/* ═══ Contact form ════════════════════════════════════════════════════════
   The site had linked to /contact from four places and nothing served it.
   The form posts rather than exposing a mailto:, which on a public marketing
   page is harvested within days. */

.contact-form {
  background:var(--p0); border-radius:var(--r-lg);
  padding:var(--s6); box-shadow:var(--sh-2); position:relative;
}
.contact-form::before {
  content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--p200);
}
.contact-form::after {
  content:''; position:absolute; top:-4px; left:var(--s6);
  width:9px; height:9px; border-radius:50%; background:var(--bead-2);
}
.contact-form .field { margin-bottom:var(--s4); }
.contact-form label {
  display:block; font-size:var(--t-sm); font-weight:700;
  color:var(--p600); margin-bottom:5px;
}
.contact-form input, .contact-form textarea {
  width:100%; padding:10px 12px;
  border:1px solid var(--p300); border-radius:var(--r-md);
  font-size:var(--t-base); color:var(--p900); background:var(--p0);
  font-family:inherit; resize:vertical;
  transition:border-color var(--fast) var(--ease-io), box-shadow var(--fast) var(--ease-io);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline:none; border-color:var(--bead-1);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bead-1) 22%, transparent);
}
.contact-form .btn-site { width:100%; }

/* Off-screen rather than display:none — a bot reading the DOM still sees it,
   which is the point, and a screen reader is told to ignore it. */
.cf-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cf-note { margin-top:var(--s3); font-size:var(--t-base); min-height:22px; color:var(--p600); }
.cf-note.bad { color:var(--over); }

.cf-done { text-align:center; padding:var(--s8) var(--s4); }
.cf-done h3 {
  font-family:var(--display); font-size:var(--t-xl); font-weight:700;
  letter-spacing:-.01em; margin-bottom:var(--s2);
}
.cf-done p { font-size:var(--t-base); color:var(--p600); max-width:38ch; margin-inline:auto; }

/* ═══ About / Features ════════════════════════════════════════════════════
   A link inside running copy takes the band's full-strength foreground, not
   the softer paragraph tone, and keeps its underline so it reads as a link
   without relying on colour. */
.field p a { color:var(--fg); font-weight:700; }
.field p a:hover { text-decoration-thickness:2px; }

/* Which plan a feature needs, on the Features page. Outlined in the band's
   own foreground so it holds contrast on every ground and in both themes. */
.plan-tag {
  display:inline-block; vertical-align:2px; margin-left:6px;
  padding:1px 7px; border:1px solid currentColor; border-radius:var(--r-full);
  font-family:var(--body, inherit); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.02em; color:var(--fg);
}
.feat-index { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s6);
  font-size:var(--t-sm); }
.feat-index a { color:var(--fg); font-weight:700; }
.section[id] { scroll-margin-top:84px; }
/* The page you are on, in the nav: full strength and underlined, so it does
   not rest on colour alone. */
.nav-links a[aria-current="page"] { color:var(--p900); text-decoration:underline;
  text-underline-offset:.4em; text-decoration-thickness:2px; text-decoration-color:var(--bead-1); }
[data-theme="dark"] .nav-links a[aria-current="page"] { color:#f9f9f9; }