/* ==========================================================
   Tone test (how-test.html only, loaded after light.css).
   A tinted black-and-white scale instead of pure neutral grays, for a more premium feel.
   Tint strength raised ~2-3x after the user's first look ("I don't see much difference").
   Cool (slate) is the user's pick and the default here; how-test.html?tone=warm shows the stone/paper
   version (the user: "hazy and dreamlike, not in a good way") and ?tone=neutral the current colors.
   Rules: every color comes from the scale below, nothing is pure #000 or #fff, and surfaces
   step ~4-6% apart so the layers read as deliberate.
   ========================================================== */
:root.tone-warm {
  --t-paper: #eeeae2;
  --t-surface: #f8f6f1;
  --t-line: #ddd7cc;
  --t-rule: #e6e1d8;
  --t-ink: #17140f;
  --t-ink-hover: #2b261f;
  --t-muted: #5c554a;
  --t-dim: #8b8478;
  --t-d0: #13110d;
  --t-d1: #1d1a15;
  --t-d2: #29251e;
  --t-d3: #36312a;
  --t-on-dark: #f3eee4;
  --t-on-dark-muted: #bcb4a6;
  --t-on-dark-dim: #918a7d;
  --t-ink-rgb: 23, 20, 15;
  --t-paper-rgb: 238, 234, 226;
  --t-on-dark-rgb: 243, 238, 228;
}
:root.tone-cool {
  --t-paper: #edf0f4;
  --t-surface: #f7f9fb;
  --t-line: #d9dee6;
  --t-rule: #e3e7ed;
  --t-ink: #0e1219;
  --t-ink-hover: #222937;
  --t-muted: #4b5462;
  --t-dim: #7d8696;
  --t-d0: #0a0e14;
  --t-d1: #121821;
  --t-d2: #1b222d;
  --t-d3: #28303d;
  --t-on-dark: #edf1f6;
  --t-on-dark-muted: #aab3c0;
  --t-on-dark-dim: #848d9b;
  --t-ink-rgb: 14, 18, 25;
  --t-paper-rgb: 237, 240, 244;
  --t-on-dark-rgb: 237, 241, 246;
}

/* Dark monochrome (2026-10-04, user: "a dark one for all the site"; how-test.html?tone=dark). The same slate
   family, inverted: "paper" is the page, "surface" the raised cards, "ink" the light text, and the d-steps
   are the bands and dark cards, lifted a little above the page so a long dark page keeps its rhythm.
   Nothing is pure black or white. Buttons flip to light with dark text (overrides at the end of the file). */
:root.tone-dark {
  --t-paper: #090c11;
  --t-surface: #121821;
  --t-line: #222a36;
  --t-rule: #1a212b;
  --t-ink: #e9edf2;
  --t-ink-hover: #d3d9e1;
  --t-muted: #a3acb9;
  --t-dim: #7a8392;
  --t-d0: #0e131a;
  --t-d1: #151b24;
  --t-d2: #1d2430;
  --t-d3: #2b3340;
  --t-on-dark: #e9edf2;
  --t-on-dark-muted: #a3acb9;
  --t-on-dark-dim: #7a8392;
  --t-ink-rgb: 233, 237, 242;
  --t-paper-rgb: 9, 12, 17;
  --t-on-dark-rgb: 233, 237, 242;
}

/* ---- Page tokens ---- */
:root.toned {
  --bg: var(--t-paper);
  --hero-bg: var(--t-paper);
  --card-bg: var(--t-surface);
  --ink: var(--t-ink);
  --text: var(--t-ink);
  --text-muted: var(--t-muted);
  --text-dim: var(--t-dim);
  --accent: var(--t-ink);
  --accent-soft: var(--t-ink);
  --surface: rgba(var(--t-ink-rgb), 0.04);
  --surface-strong: rgba(var(--t-ink-rgb), 0.07);
  --border: rgba(var(--t-ink-rgb), 0.1);
  --border-strong: rgba(var(--t-ink-rgb), 0.2);
}

/* ---- Light surfaces and ink ---- */
.toned .btn-primary { color: var(--t-on-dark); background: var(--t-ink); box-shadow: 0 8px 24px rgba(var(--t-ink-rgb), 0.14); }
.toned .btn-primary:hover { background: var(--t-ink-hover); }
.toned .site-header.is-scrolled,
.toned .site-header.on-light.is-scrolled { background: rgba(var(--t-paper-rgb), 0.82); border-bottom-color: rgba(var(--t-ink-rgb), 0.08); }
.toned .site-header.on-light .btn-primary { color: var(--t-on-dark); background: var(--t-ink); }
.toned .site-header.on-light .btn-primary:hover { background: var(--t-ink-hover); }
.toned .hero-badge { color: var(--t-muted); background: var(--t-surface); border-color: var(--t-line); }
.toned .lead { color: var(--t-muted); }
.toned .shot { background: var(--t-line); border-color: rgba(var(--t-ink-rgb), 0.08); }
.toned .fill-text .w { color: rgba(var(--t-ink-rgb), 0.18); }
.toned .fill-text .w.is-lit { color: var(--t-ink); }
.toned .bottom-blur::after { background: linear-gradient(to bottom, transparent, rgba(var(--t-paper-rgb), 0.35)); }
@media (max-width: 960px) {
  .toned .main-nav ul { background: var(--t-surface); }
}

/* ---- Dark surfaces: cards on d1, bands on d0, gradients from d2 ---- */
.toned .how3-black .how3-card {
  --text: var(--t-on-dark);
  --text-muted: var(--t-on-dark-muted);
  --border: rgba(var(--t-on-dark-rgb), 0.1);
  --border-strong: rgba(var(--t-on-dark-rgb), 0.26);
  --card-bg: var(--t-d1);
}
.toned .qt-dark {
  --text: var(--t-on-dark);
  --text-muted: var(--t-on-dark-muted);
  --text-dim: var(--t-on-dark-dim);
  --border: rgba(var(--t-on-dark-rgb), 0.12);
  --border-strong: rgba(var(--t-on-dark-rgb), 0.24);
  --deco-bg: var(--t-d0);
  background: var(--t-d0);
}
.toned .cta-panel {
  --text: var(--t-on-dark);
  --text-muted: var(--t-on-dark-muted);
  --text-dim: var(--t-on-dark-dim);
  --border: rgba(var(--t-on-dark-rgb), 0.12);
  background: radial-gradient(90% 120% at 50% 0%, var(--t-d2), var(--t-d0) 70%);
  border-color: rgba(var(--t-on-dark-rgb), 0.08);
}
.toned .contact-full .cta-panel {
  background:
    radial-gradient(circle, rgba(var(--t-on-dark-rgb), 0.09) 1px, transparent 1.5px) 0 0 / 28px 28px,
    radial-gradient(70% 60% at 50% 50%, var(--t-d2), var(--t-d0) 75%);
}
/* Light buttons on the dark panels: off-white, not pure white */
.toned .cta-panel .btn-primary,
.toned .plan-featured .btn-primary {
  color: var(--t-ink);
  background: var(--t-on-dark);
  box-shadow: 0 0 0 1px rgba(var(--t-on-dark-rgb), 0.4), 0 0 18px rgba(var(--t-on-dark-rgb), 0.3), 0 0 42px rgba(var(--t-on-dark-rgb), 0.1);
}
.toned .cta-panel .btn-primary:hover,
.toned .plan-featured .btn-primary:hover { background: var(--t-paper); }

/* ---- Pricing ---- */
.toned .packages { --grid-line: var(--t-rule); }
.toned .plan:not(.plan-featured) { background: var(--t-surface); }
.toned .plan-featured {
  --text: var(--t-on-dark);
  --text-muted: var(--t-on-dark-muted);
  --text-dim: var(--t-on-dark-dim);
  --accent-soft: var(--t-on-dark);
  --border: rgba(var(--t-on-dark-rgb), 0.12);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--t-on-dark-rgb), 0.06), transparent 70%),
    linear-gradient(to bottom, var(--t-d2), var(--t-d1));
}
.toned .p3 { --p3-line: var(--t-line); --p3-rule: var(--t-line); }
.toned .how3-soft { --p3-line: var(--t-line); }
.toned .pc {
  --pc-bg: var(--t-d2);
  --pc-shade: var(--t-d0);
  --pc-text: var(--t-on-dark);
  --pc-muted: var(--t-on-dark-muted);
  --pc-dim: var(--t-on-dark-dim);
  --pc-line: rgba(var(--t-on-dark-rgb), 0.16);
}
/* Flat cards: the darkest step, with a light hairline */
.toned .pc-flat { --pc-flat-bg: var(--t-d0); --pc-flat-line: rgba(var(--t-on-dark-rgb), 0.24); }
/* Dark tone: the cards step up from the page, the covered ones sink back toward it */
.tone-dark .pc { --pc-bg: var(--t-d2); --pc-shade: var(--t-paper); }
.toned .p3-featured { background: var(--t-surface); border-color: var(--t-surface); }
.toned .p3-badge { color: var(--t-on-dark); background: var(--t-ink); }
.toned .p3-card .btn.p3-btn { color: var(--t-ink); background: var(--t-surface); border-color: var(--t-line); }
.toned .p3-card .btn.p3-btn:hover { background: var(--t-paper); }
.toned .p3-featured .btn.p3-btn { color: var(--t-on-dark); background: linear-gradient(to bottom, var(--t-d3), var(--t-d0)); border-color: var(--t-d3); }
.toned .p3-featured .btn.p3-btn:hover { background: linear-gradient(to bottom, var(--t-d3), var(--t-d1)); }
.toned .p3-facts::after { background: repeating-linear-gradient(to left, var(--t-line) 0 3px, transparent 3px 6px); }

/* ---- Leftovers: shadows and the phone menu button, tinted like everything else ---- */
.toned .hero-badge { box-shadow: 0 2px 10px rgba(var(--t-ink-rgb), 0.05); }
.toned .p3-card .btn.p3-btn { box-shadow: 0 1px 2px rgba(var(--t-ink-rgb), 0.04); }
.toned .p3-badge { box-shadow: 0 6px 11px rgba(var(--t-ink-rgb), 0.16); }
.toned .menu-toggle,
.toned .site-header.on-light .menu-toggle { color: var(--t-ink); background: rgba(var(--t-ink-rgb), 0.04); border-color: rgba(var(--t-ink-rgb), 0.12); }
.toned .menu-toggle span { background: var(--t-ink); }

/* ---- Dark monochrome: light buttons and tabs with dark text (the shared rules pair ink with on-dark,
   which are both light here) ---- */
.tone-dark .btn-primary,
.tone-dark .site-header.on-light .btn-primary,
.tone-dark .cta-panel .btn-primary,
.tone-dark .plan-featured .btn-primary {
  color: var(--t-paper);
  background: var(--t-ink);
  box-shadow: 0 0 0 1px rgba(var(--t-ink-rgb), 0.3), 0 0 24px rgba(var(--t-ink-rgb), 0.12);
}
.tone-dark .btn-primary:hover,
.tone-dark .site-header.on-light .btn-primary:hover,
.tone-dark .cta-panel .btn-primary:hover,
.tone-dark .plan-featured .btn-primary:hover { background: var(--t-ink-hover); }
.tone-dark .p3-badge { color: var(--t-paper); background: var(--t-ink); box-shadow: 0 6px 14px rgba(var(--t-paper-rgb), 0.6); }
/* Pricing buttons: the side cards get a quiet raised button, the featured card the light one */
.tone-dark .p3-card .btn.p3-btn { color: var(--t-ink); background: var(--t-d2); border-color: var(--t-line); box-shadow: none; }
.tone-dark .p3-card .btn.p3-btn:hover { background: var(--t-d3); }
.tone-dark .p3-featured .btn.p3-btn { color: var(--t-paper); background: var(--t-ink); border-color: var(--t-ink); }
.tone-dark .p3-featured .btn.p3-btn:hover { background: var(--t-ink-hover); }
/* The featured pricing card is the raised step, the side cards sit on the page */
/* The featured pricing card stays near-white in the dark theme too (user, 2026-10-05): it takes the light slate
   scale locally, so everything inside (text, rule, icons, the dark button and tab) renders as in the light theme */
.tone-dark .p3-featured {
  --t-paper: #edf0f4; --t-surface: #f7f9fb; --t-line: #d9dee6; --t-rule: #e3e7ed;
  --t-ink: #0e1219; --t-ink-hover: #222937; --t-muted: #4b5462; --t-dim: #7d8696;
  --t-d0: #0a0e14; --t-d1: #121821; --t-d2: #1b222d; --t-d3: #28303d;
  --t-on-dark: #edf1f6; --t-on-dark-muted: #aab3c0; --t-on-dark-dim: #848d9b;
  --t-ink-rgb: 14, 18, 25; --t-paper-rgb: 237, 240, 244; --t-on-dark-rgb: 237, 241, 246;
  --bg: var(--t-paper); --card-bg: var(--t-surface); --ink: var(--t-ink);
  --text: var(--t-ink); --text-muted: var(--t-muted); --text-dim: var(--t-dim);
  --border: rgba(var(--t-ink-rgb), 0.1); --border-strong: rgba(var(--t-ink-rgb), 0.2);
  color: var(--t-ink);
  background: var(--t-surface);
  border-color: var(--t-surface);
}
.tone-dark .p3-featured .btn.p3-btn { color: var(--t-on-dark); background: linear-gradient(to bottom, var(--t-d3), var(--t-d0)); border-color: var(--t-d3); }
.tone-dark .p3-featured .btn.p3-btn:hover { background: linear-gradient(to bottom, var(--t-d3), var(--t-d1)); }
.tone-dark .p3-featured .p3-badge { color: var(--t-on-dark); background: var(--t-ink); box-shadow: 0 6px 14px rgba(9, 12, 17, 0.5); }
/* Shadows read as black on a dark page */
.tone-dark .hero-badge { box-shadow: none; }
.tone-dark .shot { box-shadow: 0 12px 32px rgba(var(--t-paper-rgb), 0.7); }
/* The YouTube icon's play triangle is drawn in white; on a light icon it needs the page color */
.tone-dark .yt-link svg path[fill="#fff"] { fill: var(--t-paper); }

/* Process folder tabs: the cards step from the lightest surface to the darkest shade; in the dark tone from the
   raised surface up through the lighter steps to an inverted light card for the launch */
.toned .pc-folder .pc-card { --f-bg: var(--t-surface); --f-text: var(--t-ink); --f-muted: var(--t-muted); }
.toned .pc-folder .pc-card:nth-child(2) { --f-bg: var(--t-line); }
.toned .pc-folder .pc-card:nth-child(3) { --f-bg: var(--t-d3); --f-text: var(--t-on-dark); --f-muted: var(--t-on-dark-muted); }
.toned .pc-folder .pc-card:nth-child(4) { --f-bg: var(--t-d2); --f-text: var(--t-on-dark); --f-muted: var(--t-on-dark-muted); } /* 5 steps only */
.toned .pc-folder .pc-card:last-child { --f-bg: var(--t-d0); --f-text: var(--t-on-dark); --f-muted: var(--t-on-dark-muted); }
.tone-dark .pc-folder .pc-card { --f-bg: var(--t-d1); }
.tone-dark .pc-folder .pc-card:nth-child(2) { --f-bg: var(--t-d2); }
.tone-dark .pc-folder .pc-card:nth-child(3) { --f-bg: var(--t-d3); }
.tone-dark .pc-folder .pc-card:nth-child(4) { --f-bg: color-mix(in srgb, var(--t-d3), var(--t-ink) 12%); } /* 5 steps only */
.tone-dark .pc-folder .pc-card:last-child { --f-bg: var(--t-ink); --f-text: var(--t-paper); --f-muted: rgba(var(--t-paper-rgb), 0.72); }
/* Full-screen menu open: the header loses its glass and sits on the menu's background */
.toned.menu-open .site-header.is-scrolled,
.toned.menu-open .site-header.on-light.is-scrolled { background: transparent; border-bottom-color: transparent; }