/* =========================================================================
 * Ezine Trades & Business School — public marketing stylesheet.
 *
 * Scope: pages under /trades that are PUBLIC and INDEXABLE.
 * Excludes the LMS pages (trades-desk / -profile / -curriculum / -lesson /
 * -action-plan / -portfolio / -certificate). Those are styled by
 * assets/css/trades.css and assets/js/trades-app.js — do not touch here.
 *
 * Palette (MID §25): midnight navy, heritage green, ivory, charcoal,
 * restrained brass. Token names align with the rest of the site
 * (assets/seo.css and explore-trades.html) so nothing looks alien:
 *   --ink     midnight navy  (base surface)
 *   --paper   ivory          (light surface / page bg in light mode)
 *   --lamp    restrained brass (accent / CTA)
 *   --sage    heritage green (secondary accent)
 *   --charcoal charcoal      (deep text/rule)
 *
 * Typography (MID §25): editorial display (Newsreader) + readable interface
 * (IBM Plex Sans) + monospaced eyebrows (IBM Plex Mono). System fallbacks
 * throughout so pages render before web fonts arrive.
 *
 * Chrome injection: pair with assets/js/trades-marketing-chrome.js and
 *   <div id="trades-nav" data-active="…"></div>  … page main …
 *   <div id="trades-footer"></div>
 *   <script src="/assets/js/trades-marketing-chrome.js" defer></script>
 * ========================================================================= */

:root {
  --ink: #1B1E30;
  --ink-2: #252A42;
  --ink-3: #12141F;
  --paper: #FAF7F0;
  --paper-2: #F3EEE3;
  --paper-3: #EBE4D2;
  --lamp: #C88F3E;
  --lamp-soft: #E0A951;
  --lamp-deep: #8E5D1E;
  --lamp-wash: rgba(200,143,62,.08);
  --lamp-foil: linear-gradient(180deg, #F0CF9E 0%, #E0A951 30%, #C88F3E 60%, #8E5D1E 100%);
  --sage: #4C7A6E;
  --sage-soft: #7AA396;
  --charcoal: #2A2D3A;
  --text: #1F2230;
  --muted: #676C82;
  --line: #E4DCCB;
  --line-soft: #EEE7D6;
  --danger: #A4432E;
  --card: #FFFFFF;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 0 rgba(27,30,48,.04), 0 6px 20px -12px rgba(27,30,48,.24);
  --shadow-md: 0 1px 0 rgba(27,30,48,.04), 0 18px 48px -22px rgba(27,30,48,.36);
  --maxw: 1140px;
  --maxw-narrow: 900px;
  --font-serif: "Newsreader", "Charter", "Iowan Old Style", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #E8E4DA;
  --ink-2: #232739;
  --ink-3: #0F1119;
  --paper: #12141F;
  --paper-2: #1A1D28;
  --paper-3: #232739;
  --lamp: #E6B567;
  --lamp-soft: #F0CF9E;
  --lamp-deep: #A4732F;
  --lamp-wash: rgba(230,181,103,.10);
  --lamp-foil: linear-gradient(180deg, #F5DDA7 0%, #E6B567 35%, #C08E3E 70%, #A4732F 100%);
  --sage: #74A593;
  --sage-soft: #9CC4B7;
  --charcoal: #E8E4DA;
  --text: #E8E4DA;
  --muted: #9CA2B8;
  --line: #2C3142;
  --line-soft: #232739;
  --danger: #D06B54;
  --card: #1E212E;
  --shadow-sm: 0 1px 0 rgba(0,0,0,.24), 0 6px 20px -12px rgba(0,0,0,.55);
  --shadow-md: 0 1px 0 rgba(0,0,0,.28), 0 22px 60px -22px rgba(0,0,0,.70);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
/* Editorial paper: a warm cream base + a very fine SVG grain (data URI)
   for a print-feel that catches light without looking busy. The grain is
   1.1% opacity — visible only in aggregate, invisible per pixel. In dark
   mode the grain gets a touch more density on a deeper canvas. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    /* very fine grain — SVG turbulence */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/></svg>"),
    /* soft brass wash top-left */
    radial-gradient(1200px 700px at 8% -6%, var(--lamp-wash), transparent 60%),
    /* soft sage wash bottom-right */
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--sage) 8%, transparent), transparent 60%),
    /* warm paper base */
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment: fixed, fixed, fixed, fixed;
}
:root[data-theme="dark"] body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/></svg>"),
    radial-gradient(1200px 700px at 8% -6%, rgba(230,181,103,.12), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(116,165,147,.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--ink-3) 100%);
}
a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
::selection { background: var(--lamp-wash); color: var(--charcoal); }

.tm-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.tm-wrap--narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 24px; }
.serif { font-family: var(--font-serif); font-weight: 500; }
.mono  { font-family: var(--font-mono); }
.tm-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lamp);
  margin: 0 0 14px;
}
.tm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Skip link ────────────────────────────────────────────────────────── */
.tm-skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 8px; text-decoration: none; z-index: 100;
  font-family: var(--font-sans); font-weight: 600;
}
.tm-skip:focus { left: 16px; outline: 2px solid var(--lamp-soft); outline-offset: 2px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* Frosted paper: warm-tinted translucency with a hairline brass rule
   flush against the bottom border so the whole surface reads as a
   deliberate object floating above the page. */
.tm-nav {
  position: sticky; top: 0; z-index: 40;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--paper) 82%, transparent));
  backdrop-filter: saturate(1.35) blur(14px);
  -webkit-backdrop-filter: saturate(1.35) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 8px 24px -20px rgba(27,30,48,.25);
}
.tm-nav::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lamp) 45%, transparent), transparent);
  pointer-events: none;
}
.tm-nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 32px;
  min-height: 62px;
}
/* Refined lockup: crest + serif primary + hairline separator + mono subtitle
   all on a single horizontal baseline. Reads as a proper mark. */
.tm-lockup {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-serif); font-weight: 500;
  letter-spacing: -.003em;
  flex: 0 0 auto;
}
.tm-lockup__crest {
  width: 34px; height: 34px; color: var(--lamp);
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--lamp-deep) 30%, transparent));
}
.tm-lockup__name {
  display: inline-flex; align-items: baseline; gap: 12px;
  line-height: 1; white-space: nowrap;
}
.tm-lockup__primary {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; color: var(--ink);
  letter-spacing: -.005em;
}
.tm-lockup__sep {
  display: inline-flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--lamp) 90%, transparent);
  flex: 0 0 auto;
  transform: translateY(-1px);
}
.tm-lockup__sub {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  padding-top: 1px;
}
.tm-nav__links {
  display: flex; align-items: center; gap: 26px;
  margin-left: auto;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted);
}
.tm-nav__links a,
.tm-nav__links span[aria-disabled="true"] {
  text-decoration: none; transition: color .14s ease;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
/* Fine hairline underline that grows on hover — no heavy border-bottom */
.tm-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: var(--lamp);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .18s ease;
}
.tm-nav__links a:hover { color: var(--ink); }
.tm-nav__links a:hover::after { transform: scaleX(1); }
.tm-nav__links a[aria-current="page"] { color: var(--ink); }
.tm-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.tm-nav__cta {
  display: flex; align-items: center; gap: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--line-soft);
  margin-left: 4px;
}
.tm-nav__toggle {
  display: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; width: 40px; height: 40px;
  cursor: pointer; padding: 0;
  color: var(--charcoal);
  transition: border-color .14s ease, background .14s ease, transform .18s ease;
}
.tm-nav__toggle:hover { border-color: var(--lamp); background: color-mix(in srgb, var(--lamp) 8%, transparent); }
.tm-nav__toggle:focus-visible { outline: 2px solid var(--lamp-soft); outline-offset: 2px; }
.tm-nav__toggle[aria-expanded="true"] {
  border-color: var(--lamp); background: color-mix(in srgb, var(--lamp) 12%, transparent);
  transform: rotate(90deg);
}
.tm-nav__bars {
  display: block; margin: 0 auto; width: 18px; height: 2px;
  background: currentColor; position: relative;
  transition: background .12s ease;
}
.tm-nav__bars::before,
.tm-nav__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor;
  transition: transform .18s ease, top .18s ease;
}
.tm-nav__bars::before { top: -6px; }
.tm-nav__bars::after  { top:  6px; }
/* When drawer is open (aria-expanded=true on the toggle), morph bars into a cross */
.tm-nav__toggle[aria-expanded="true"] .tm-nav__bars { background: transparent; }
.tm-nav__toggle[aria-expanded="true"] .tm-nav__bars::before { top: 0; transform: rotate(45deg); }
.tm-nav__toggle[aria-expanded="true"] .tm-nav__bars::after  { top: 0; transform: rotate(-45deg); }

/* ── Mobile drawer — refined ────────────────────────────────────────── */
.tm-nav__drawer {
  border-top: 1px solid color-mix(in srgb, var(--lamp) 30%, transparent);
  background:
    radial-gradient(600px 300px at 50% -20%, color-mix(in srgb, var(--lamp) 10%, transparent), transparent 60%),
    var(--paper);
  box-shadow: 0 24px 40px -24px rgba(27,30,48,.22);
  animation: tm-drawer-in .22s ease both;
}
@keyframes tm-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.tm-nav__drawer[hidden] { display: none; }
.tm-nav__drawer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 22px 20px;
  display: flex; flex-direction: column; gap: 0;
}
.tm-nav__drawer-inner a,
.tm-nav__drawer-inner span[aria-disabled="true"] {
  padding: 14px 6px; text-decoration: none; color: var(--charcoal);
  border-bottom: 1px solid var(--line-soft); font-size: 16px;
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.003em;
  display: flex; align-items: center; justify-content: space-between;
  transition: color .12s ease, padding-left .16s ease;
}
.tm-nav__drawer-inner a::after {
  content: "→"; color: var(--lamp); opacity: 0;
  transition: opacity .14s ease, transform .16s ease;
  transform: translateX(-4px);
}
.tm-nav__drawer-inner a:hover,
.tm-nav__drawer-inner a:focus-visible {
  color: var(--ink); padding-left: 10px; outline: none;
}
.tm-nav__drawer-inner a:hover::after,
.tm-nav__drawer-inner a:focus-visible::after {
  opacity: 1; transform: translateX(0);
}
.tm-nav__drawer-inner a[aria-current="page"] { color: var(--lamp); }
.tm-nav__drawer-inner a[aria-current="page"]::after { opacity: 1; transform: translateX(0); }
.tm-nav__drawer-inner .tm-btn {
  margin-top: 16px; align-self: stretch; justify-content: center;
}

/* Keyboard/screenreader users get the same styling on the disabled "soon" items */
.tm-nav__drawer-inner span[aria-disabled="true"] {
  color: var(--muted); font-style: italic;
}

/* When the drawer is open, prevent body scroll behind it (chrome.js toggles
   .tm-nav-open on the body). */
body.tm-nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .tm-nav__links { display: none; }
  .tm-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* Nav CTA cluster: hide the "Start free trial" button on mobile — it lives
     in the drawer instead. Search + session slot stay visible. */
  .tm-nav__cta .tm-btn--sm { display: none; }
  .tm-nav__cta { padding-left: 0; border-left: 0; margin-left: auto; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.tm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); color: var(--charcoal);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, border-color .12s, background .12s, filter .12s;
}
.tm-btn:hover { transform: translateY(-1px); border-color: var(--lamp); }
.tm-btn:focus-visible { outline: 2px solid var(--lamp-soft); outline-offset: 3px; }
.tm-btn--primary {
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--lamp-soft) 60%, #ffffff 40%) 0%,
      var(--lamp) 42%,
      var(--lamp-deep) 100%);
  color: #2A1A05;
  border-color: color-mix(in srgb, var(--lamp-deep) 70%, var(--lamp) 30%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 55%, transparent) inset,
    0 -1px 0 color-mix(in srgb, var(--lamp-deep) 45%, transparent) inset,
    0 6px 14px -8px color-mix(in srgb, var(--lamp-deep) 65%, transparent),
    0 2px 4px -2px color-mix(in srgb, var(--lamp-deep) 40%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--lamp-soft) 65%, transparent);
}
.tm-btn--primary:hover {
  filter: brightness(1.05) saturate(1.05);
  transform: translateY(-1px);
}
.tm-btn--ghost { background: transparent; }
/* Compact button size — used in the nav bar so the CTA doesn't dominate */
.tm-btn--sm {
  padding: 9px 15px; font-size: 13.5px; gap: 6px;
  border-radius: 9px;
}
.tm-btn--sm .tm-btn__arrow { transform: translateX(0); font-size: 15px; line-height: 1; }
.tm-btn--dark {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.tm-btn--dark:hover { filter: brightness(1.1); border-color: var(--ink); }
.tm-btn__arrow { transition: transform .12s; }
.tm-btn:hover .tm-btn__arrow { transform: translateX(2px); }

/* ── Language chip in the footer baseline ─────────────────────────── */
.tm-footer__lang a {
  display: inline-flex; align-items: center; gap: 6px;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-decoration: none;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
}
.tm-footer__lang a:hover { color: var(--lamp-soft); }

/* ── Search icon in the nav ──────────────────────────────────────────── */
/* Iconic, no border — reads as a control rather than a chip */
.tm-nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  border: 0; background: transparent;
  transition: color .14s ease, background .14s ease;
}
.tm-nav__search:hover, .tm-nav__search:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--lamp) 10%, transparent);
  outline: none;
}
.tm-nav__search:focus-visible {
  box-shadow: 0 0 0 2px var(--lamp-soft);
}
@media (max-width: 720px) {
  .tm-nav__search { display: none; }
}

/* ── Session badge in the nav (rendered by chrome.js) ─────────────────── */
.tm-nav__session {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--lamp-wash); color: var(--charcoal);
  font-size: 13px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
}
.tm-nav__session:hover { border-color: var(--lamp); }
.tm-nav__session::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}

/* ── Hero — theatrical mesh + editorial ornament ─────────────────────── */
/* Five-layer mesh: warm brass halo (top-center), deep gold-foil accent
   (top-right), sage counter-tone (bottom-left), soft brass on the right
   flank, cross-hatched SVG mesh at ~4% opacity, then the paper base.
   The hero carries a fleuron-style ornamental mark below the title. */
.tm-hero {
  position: relative;
  padding: 128px 0 108px;
  background:
    /* fine cross-hatch mesh in brass */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g stroke='%23C88F3E' stroke-width='0.35' stroke-opacity='0.16'><path d='M0 20 H40'/><path d='M20 0 V40'/></g></svg>"),
    radial-gradient(1400px 620px at 50% -6%, color-mix(in srgb, var(--lamp) 26%, transparent), transparent 62%),
    radial-gradient(800px 500px at 8% 120%, color-mix(in srgb, var(--sage) 18%, transparent), transparent 60%),
    radial-gradient(700px 480px at 96% -14%, color-mix(in srgb, var(--lamp-deep) 20%, transparent), transparent 55%),
    radial-gradient(500px 400px at 96% 120%, color-mix(in srgb, var(--lamp) 12%, transparent), transparent 55%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--paper-2) 55%, transparent) 100%);
  background-size: 40px 40px, auto, auto, auto, auto, auto;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
/* Ornamental fleuron dot pattern at the very top-center */
.tm-hero::before {
  content: "";
  position: absolute; inset: 0 auto auto 50%;
  transform: translateX(-50%);
  top: 56px;
  width: 82px; height: 8px;
  background:
    radial-gradient(circle at 20% 50%, var(--lamp) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--lamp) 0 2px, transparent 2.5px),
    radial-gradient(circle at 80% 50%, var(--lamp) 0 1.5px, transparent 2px),
    linear-gradient(90deg, transparent 22%, color-mix(in srgb, var(--lamp) 55%, transparent) 22%, color-mix(in srgb, var(--lamp) 55%, transparent) 48%, transparent 48%, transparent 52%, color-mix(in srgb, var(--lamp) 55%, transparent) 52%, color-mix(in srgb, var(--lamp) 55%, transparent) 78%, transparent 78%);
  background-size: 8px 3px, 8px 4px, 8px 3px, 100% 1px;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}
/* Soft bottom fade so the hero eases into the next section */
.tm-hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 100px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper) 65%, transparent));
}
.tm-hero__inner { text-align: center; position: relative; z-index: 1; }
.tm-hero__eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--lamp); margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.tm-hero__eyebrow::before,
.tm-hero__eyebrow::after {
  content: ""; width: 22px; height: 1px;
  background: color-mix(in srgb, var(--lamp) 65%, transparent);
}
.tm-hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(40px, 6.6vw, 76px);
  line-height: 1.02; letter-spacing: -.022em;
  color: var(--ink); margin: 0 auto 28px; max-width: 22ch;
  font-feature-settings: "ss01","liga","dlig","kern";
  text-wrap: balance;
}
.tm-hero__title em {
  font-style: italic;
  background: var(--lamp-foil);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lamp);
}
.tm-hero__lede {
  max-width: 62ch; margin: 0 auto 36px;
  font-size: 19px; line-height: 1.62; color: var(--muted);
}
.tm-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Section shell ────────────────────────────────────────────────────── */
/* Sections keep the body grain visible. --tint adds a warmer paper layer
   with a soft radial highlight at the top so alternating sections have
   visible depth without a hard band break. A tiny ornamental divider
   (small serif dot flanked by two brass hairlines) sits over the top
   border of --tint sections when they follow a non-tint. */
.tm-section {
  position: relative;
  padding: 88px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tm-section:last-of-type { border-bottom: 0; }
.tm-section--tint {
  background:
    radial-gradient(900px 380px at 50% 0%, color-mix(in srgb, var(--lamp) 8%, transparent), transparent 65%),
    linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2) 82%, var(--paper-3) 18%));
  border-top: 1px solid var(--line-soft);
}
/* Ornamental brass rule spanning the top of tinted sections, with a
   three-dot fleuron centered on it — reads as a printed section break. */
.tm-section--tint::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--lamp) 30%, transparent) 15%,
    color-mix(in srgb, var(--lamp) 55%, transparent) 45%,
    transparent 48%,
    transparent 52%,
    color-mix(in srgb, var(--lamp) 55%, transparent) 55%,
    color-mix(in srgb, var(--lamp) 30%, transparent) 85%,
    transparent 100%);
}
.tm-section--tint::after {
  content: "";
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 10px;
  background:
    radial-gradient(circle at 15% 50%, var(--lamp) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--lamp) 0 2px, transparent 2.5px),
    radial-gradient(circle at 85% 50%, var(--lamp) 0 1.5px, transparent 2px);
  background-color: color-mix(in srgb, var(--paper-2) 90%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper-2) 90%, transparent);
}
.tm-section--dark {
  background:
    radial-gradient(1000px 500px at 50% 0%, color-mix(in srgb, var(--lamp) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  color: var(--paper);
}
.tm-section--dark h2,
.tm-section--dark h3 { color: var(--paper); }
.tm-section--dark .tm-muted { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.tm-section--dark .tm-btn { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); background: transparent; }
.tm-section--dark .tm-btn--primary { background: var(--lamp); color: #2A1A05; border-color: var(--lamp); }
.tm-section__head { margin-bottom: 40px; position: relative; }
/* Ornamental preceding rule that anchors the heading to a print-block feel */
.tm-section__head .tm-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: color-mix(in srgb, var(--lamp) 70%, transparent);
  margin-right: 12px; vertical-align: middle;
}
.tm-section__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.12; letter-spacing: -.012em;
  color: var(--ink); margin: 0 0 14px; max-width: 26ch;
}
.tm-section__title em {
  font-style: italic;
  background: linear-gradient(180deg, var(--lamp), color-mix(in srgb, var(--lamp) 70%, var(--sage) 30%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lamp);
}
.tm-section__lede {
  max-width: 66ch; font-size: 17.5px; color: var(--muted); margin: 0; line-height: 1.62;
}
.tm-muted { color: var(--muted); }

/* Two-column layouts */
.tm-two {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
}
@media (max-width: 900px) { .tm-two { grid-template-columns: 1fr; gap: 32px; } }

/* Card grid */
.tm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.tm-card {
  position: relative;
  display: flex; flex-direction: column;
  color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 22px;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  box-shadow: var(--shadow-sm);
  /* Card face — very subtle vertical gradient + inner highlight for depth */
  background:
    radial-gradient(400px 120px at 0% 0%, color-mix(in srgb, var(--lamp) 6%, transparent), transparent 60%),
    linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 92%, var(--paper-2) 8%));
  overflow: hidden;
  isolation: isolate;
}
/* Hairline brass foil at the top of every card, visible only on hover */
.tm-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lamp), transparent);
  opacity: 0; transition: opacity .16s ease;
  z-index: 1;
}
.tm-card:hover, .tm-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lamp) 60%, var(--line) 40%);
  box-shadow:
    0 1px 0 rgba(27,30,48,.04),
    0 26px 60px -22px rgba(27,30,48,.34),
    0 0 0 1px color-mix(in srgb, var(--lamp) 18%, transparent) inset;
  outline: none;
}
.tm-card:hover::before, .tm-card:focus-visible::before { opacity: 1; }
.tm-card:focus-visible { outline: 2px solid var(--lamp-soft); outline-offset: 2px; }
.tm-card__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lamp); margin: 0 0 8px;
}
.tm-card__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; margin: 0 0 8px; color: var(--ink);
}
.tm-card__body {
  font-size: 14.5px; color: var(--muted); margin: 0 0 14px;
}
.tm-card__go {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--lamp);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Numbered method steps */
.tm-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  counter-reset: tmstep;
}
.tm-step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  position: relative;
}
.tm-step::before {
  counter-increment: tmstep;
  content: counter(tmstep, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .16em; color: var(--lamp);
  display: block; margin-bottom: 10px;
}
.tm-step h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; margin: 0 0 6px; color: var(--ink);
}
.tm-step p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }

/* Comparison stripe (Before / With Ezine) */
.tm-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card);
}
@media (max-width: 700px) { .tm-compare { grid-template-columns: 1fr; } }
.tm-compare__col { padding: 26px 26px 24px; }
.tm-compare__col--before { background: var(--paper-2); }
.tm-compare__col h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.tm-compare__col--with h3 { color: var(--lamp); }
.tm-compare__col ul { list-style: none; padding: 0; margin: 0; }
.tm-compare__col li {
  padding: 10px 0 10px 22px; position: relative;
  font-size: 15px; color: var(--charcoal);
  border-bottom: 1px dashed var(--line-soft);
}
.tm-compare__col li:last-child { border-bottom: 0; }
.tm-compare__col--before li::before {
  content: "×"; position: absolute; left: 0; top: 8px;
  color: var(--muted); font-weight: 700;
}
.tm-compare__col--with li::before {
  content: "→"; position: absolute; left: 0; top: 10px;
  color: var(--lamp); font-weight: 700;
}

/* Pathways row (audience quick-picks) */
.tm-pathways {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.tm-pathway {
  display: block; padding: 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: var(--charcoal);
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.tm-pathway:hover, .tm-pathway:focus-visible {
  border-color: var(--lamp); transform: translateY(-2px);
  box-shadow: var(--shadow-md); outline: none;
}
.tm-pathway:focus-visible { outline: 2px solid var(--lamp-soft); outline-offset: 2px; }
.tm-pathway__label {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--ink);
  margin: 0 0 6px;
}
.tm-pathway__body { font-size: 14px; color: var(--muted); margin: 0; }

/* FAQ / detail list */
.tm-faq { display: grid; gap: 6px; }
.tm-faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px;
}
.tm-faq summary {
  cursor: pointer; font-family: var(--font-serif); font-weight: 500;
  font-size: 17px; color: var(--ink); list-style: none;
  padding-right: 24px; position: relative;
}
.tm-faq summary::-webkit-details-marker { display: none; }
.tm-faq summary::after {
  content: "+"; position: absolute; right: 0; top: -1px;
  color: var(--lamp); font-weight: 500; font-size: 20px;
  transition: transform .12s;
}
.tm-faq details[open] summary::after { content: "−"; }
.tm-faq details p { margin: 12px 0 0; color: var(--muted); font-size: 15px; }

/* ── Pricing plan card (Slice 9) ─────────────────────────────────── */
.tm-plan {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 34px 30px;
  box-shadow: 0 22px 60px -32px rgba(27,30,48,.28);
}
.tm-plan__head { border-bottom: 1px solid var(--line-soft); padding-bottom: 26px; margin-bottom: 26px; }
.tm-plan__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lamp); margin: 0 0 16px;
}
.tm-plan__prices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 18px; margin: 0 0 20px;
}
.tm-plan__price {
  display: flex; flex-direction: column; padding: 14px 16px;
  background: var(--paper-2); border-radius: 10px;
}
.tm-plan__num {
  font-family: var(--font-serif); font-size: 30px; font-weight: 500;
  color: var(--ink); line-height: 1.1;
}
.tm-plan__per { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.tm-plan__note { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.tm-plan__feats {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.tm-plan__feats li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15.5px; color: var(--charcoal); line-height: 1.5;
}
.tm-plan__tick { color: var(--sage); font-weight: 700; flex: none; }
.tm-plan__cta { display: inline-flex; }
.tm-plan__foot { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }

/* ── Plain lists used in pricing "included / not included" ──────── */
.tm-plain {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.tm-plain li {
  font-size: 15px; color: var(--charcoal); line-height: 1.55;
  padding-left: 16px; position: relative;
}
.tm-plain li::before {
  content: ""; width: 6px; height: 6px; background: var(--lamp);
  border-radius: 999px; position: absolute; left: 0; top: 9px;
}

/* Small text callouts (disclaimers, notes) */
.tm-note {
  font-size: 13px; color: var(--muted);
  padding: 14px 18px; border-left: 3px solid var(--lamp);
  background: var(--lamp-wash); border-radius: 4px;
  margin-top: 24px;
}

/* Big CTA panel (bottom of home) — dimensional dark surface with warm halo */
.tm-cta-panel {
  position: relative;
  text-align: center; padding: 72px 28px;
  color: var(--paper);
  border-radius: var(--radius-lg);
  margin: 0 auto; max-width: var(--maxw);
  background:
    radial-gradient(700px 340px at 50% 0%, color-mix(in srgb, var(--lamp) 30%, transparent), transparent 62%),
    radial-gradient(500px 320px at 10% 100%, color-mix(in srgb, var(--sage) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink-3));
  box-shadow:
    0 32px 90px -40px rgba(27,30,48,.6),
    0 0 0 1px color-mix(in srgb, var(--lamp) 22%, transparent) inset;
  overflow: hidden;
}
/* Hairline brass rule floating at the very top of the panel */
.tm-cta-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lamp), transparent);
  opacity: .6;
}
/* Serif dot ornament centered at the top */
.tm-cta-panel::after {
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 82%, transparent);
}
.tm-cta-panel h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.12; margin: 0 auto 16px; max-width: 22ch;
  letter-spacing: -.012em;
}
.tm-cta-panel h2 em {
  font-style: italic;
  background: linear-gradient(180deg, var(--lamp-soft), var(--lamp));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lamp-soft);
}
.tm-cta-panel p {
  max-width: 56ch; margin: 0 auto 32px;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  font-size: 17.5px; line-height: 1.6;
}
.tm-cta-panel__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.tm-footer {
  background: var(--ink-3); color: color-mix(in srgb, var(--paper) 78%, transparent);
  padding: 56px 0 32px; margin-top: 40px;
}
.tm-footer a { color: color-mix(in srgb, var(--paper) 78%, transparent); text-decoration: none; }
.tm-footer a:hover { color: var(--lamp-soft); }
.tm-footer__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 900px) { .tm-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tm-footer__inner { grid-template-columns: 1fr; } }
.tm-footer__brand p { font-size: 14px; line-height: 1.55; margin: 12px 0 0; }
.tm-footer h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lamp-soft);
  margin: 0 0 12px; font-weight: 500;
}
.tm-footer ul { list-style: none; padding: 0; margin: 0; }
.tm-footer li { padding: 4px 0; font-size: 14px; }
.tm-footer__baseline {
  max-width: var(--maxw); margin: 32px auto 0; padding: 20px 24px 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  font-size: 12px; line-height: 1.55;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}
.tm-footer__legal {
  max-width: 68ch; margin: 12px auto 0; padding: 0 24px;
  font-size: 12px; line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  text-align: center;
}

/* ── Calculator pages ─────────────────────────────────────────────────
   Shared classes for the /trades/resources/calculators/* pages.
   Kept small and scoped so a calc page is ~120 lines + its unique JS.  */
.calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 800px) { .calc { grid-template-columns: 1fr; gap: 24px; } }
.calc__inputs { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; }
.calc__inputs label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.calc__inputs label:first-of-type { margin-top: 0; }
.calc__inputs input, .calc__inputs select {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px;
  color: var(--charcoal); background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 10px;
}
.calc__inputs input:focus, .calc__inputs select:focus {
  outline: 2px solid var(--lamp-soft); outline-offset: 2px; border-color: var(--lamp);
}
.calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.calc__result {
  position: sticky; top: 96px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-md);
}
@media (max-width: 800px) { .calc__result { position: static; } }
.calc__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lamp); margin: 0 0 8px; }
.calc__value {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.1;
  color: var(--ink); margin: 0 0 14px;
}
.calc__value small { font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: var(--muted); display: block; margin-top: 6px; }
.calc__breakdown { list-style: none; padding: 0; margin: 14px 0 0; }
.calc__breakdown li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 14.5px; color: var(--charcoal);
}
.calc__breakdown li:last-child { border-bottom: 0; }
.calc__breakdown li strong { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }

.calc__note {
  margin-top: 24px; padding: 14px 18px;
  background: var(--lamp-wash); border-left: 3px solid var(--lamp);
  border-radius: 4px; font-size: 13.5px; color: var(--muted); line-height: 1.55;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ── Print — hand a clean page to any browser's Print / Save as PDF ─── */
/* Especially matters for /trades/verify: a learner needs to hand a printed
   or PDF verification result to a partner, funder, or employer, and it must
   read as a formal document — no dark backgrounds, no nav, no CTA panel,
   real URLs printed next to links. */
@media print {
  :root, :root[data-theme="dark"] {
    /* Force a print-neutral palette regardless of the user's theme */
    --paper: #ffffff; --paper-2: #ffffff; --paper-3: #ffffff;
    --card: #ffffff; --line: #d0c9b7; --line-soft: #e6e0cf;
    --ink: #111318; --charcoal: #2a2d3a; --muted: #4a4e60;
    --lamp: #8a5a1c; --lamp-deep: #6f4713; --lamp-soft: #a8722c;
    --lamp-wash: rgba(138,90,28,.06);
  }
  html, body { background: #ffffff !important; color: #111318 !important; }
  body {
    background-image: none !important;
    font-family: "IBM Plex Sans", Georgia, serif;
    font-size: 11pt; line-height: 1.45;
  }

  /* Hide chrome, controls and calls to action that don't belong in print */
  .tm-skip,
  .tm-nav, #trades-nav,
  .tm-footer, #trades-footer,
  .tm-footer__lang,
  .tm-nav__search, .tm-nav__toggle,
  .tm-cta-panel,
  .tm-hero__cta,
  .tm-btn,
  form,
  .nf-search,
  .nf-grid { display: none !important; }

  /* Pull hero back to a printable heading, not a full-bleed banner */
  .tm-hero {
    padding: 0 0 12pt !important;
    background: none !important;
    border-bottom: 1pt solid #a8722c !important;
    margin-bottom: 18pt !important;
  }
  .tm-hero::before, .tm-hero::after { display: none !important; }
  .tm-hero__title {
    font-family: "Newsreader", Georgia, serif;
    font-size: 22pt !important; line-height: 1.15 !important;
    color: #111318 !important; margin: 0 0 6pt !important;
  }
  .tm-hero__title em {
    color: #6f4713 !important;
    -webkit-background-clip: initial !important; background-clip: initial !important;
    -webkit-text-fill-color: #6f4713 !important;
    background-image: none !important;
  }
  .tm-hero__eyebrow {
    color: #6f4713 !important; font-size: 8pt !important;
    letter-spacing: .18em !important; margin-bottom: 6pt !important;
  }
  .tm-hero__eyebrow::before, .tm-hero__eyebrow::after { display: none !important; }
  .tm-hero__lede {
    color: #2a2d3a !important; font-size: 10.5pt !important;
    max-width: none !important; margin: 6pt 0 0 !important;
  }

  /* Sections lose their tinted backgrounds, radial glows, ornamental rules */
  .tm-section {
    padding: 12pt 0 !important;
    background: none !important;
    border-bottom: 0.5pt solid #d0c9b7 !important;
  }
  .tm-section--tint::before,
  .tm-section--tint::after { display: none !important; }
  .tm-section--tint { background: none !important; }
  .tm-section__title {
    font-family: "Newsreader", Georgia, serif;
    font-size: 14pt !important; color: #111318 !important;
  }
  .tm-section__lede,
  .tm-section__head p { color: #2a2d3a !important; font-size: 10.5pt !important; }

  /* Cards flatten into bordered blocks */
  .tm-card, .tm-plan, .tm-note {
    background: #ffffff !important;
    border: 0.5pt solid #d0c9b7 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Print real URLs next to links so a paper reader can follow them */
  a[href^="/"]::after,
  a[href^="https://"]::after,
  a[href^="http://"]::after {
    content: " (" attr(href) ")";
    font-family: "IBM Plex Mono", monospace; font-size: 8.5pt;
    color: #6f4713; word-break: break-all;
  }
  /* Don't duplicate the URL for mailto, tel, or intra-page anchors */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after { content: ""; }

  /* Verify page: strip the form, promote the result panel to page-of-record.
     The verify page renders its "verified/unknown/error" result into the
     #verify-out region — keep only that region on paper. */
  main#trades-main {
    max-width: 100%; margin: 0 auto; padding: 0;
  }
  .tm-wrap, .tm-wrap--narrow { max-width: 100%; margin: 0 auto; padding: 0 12mm; }

  /* Comfortable margins on A4 / Letter */
  @page { margin: 18mm 16mm; }
}