/* Vorpp Capital — site styles
   Fluid throughout: type and spacing scale with the viewport via clamp(), so
   every width between phone and desktop works rather than three fixed layouts.
   Colours are the brand guide's, used as accents on a white and light-grey page. */

/* ---------- Fonts -------------------------------------------------------
   Self-hosted on purpose: loading fonts from Google's CDN has been held to be
   a GDPR problem in German courts, and self-hosting is faster. If the .woff2
   files are not in place yet the fallback stack renders correctly, so the site
   is never broken by a missing font. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --blue: #1e5a94;
  --blue-dark: #17497a;
  --blue-deep: #232870;
  --blue-light: #3880b5;
  --bronze: #94641e;
  --bronze-bg: #f6efe2;
  --bronze-line: #ecdfc8;

  --ink: #12151f;
  --body: #232a35;
  --muted: #5c6875;
  --soft: #7a8694;
  --faint: #8a94a2;

  --paper: #ffffff;
  --grey: #f4f7fa;
  --tint: #eaf0f7;
  --line: #e7ecf2;
  --line-strong: #dde4ec;

  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1296px;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(30, 90, 148, .10);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto;
  clip: auto; background: var(--paper); padding: 10px 16px; border-radius: 8px;
  box-shadow: var(--shadow); font-weight: 600;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-prose { max-width: 820px; }

.i { width: 1em; height: 1em; flex: none; }

/* Brand lockup. Kept as one inline box so a flex `gap` can never open a
   space inside it — that bug rendered the product name as "Trade OS". */
.bw { display: inline; white-space: nowrap; }
/* TradeOS is set in the weight of whatever surrounds it — no bold OS. The
   owner reversed the earlier iPhone-style rule on 18 Sep 2026. The <b> is still
   in the markup, so restoring it is one declaration: font-weight: 800. The .bw
   wrapper stays either way, to stop the name breaking across two lines. */
.bw b { font-weight: inherit; }

/* ---------- Type -------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -.024em; font-weight: 800; }
h1, .h1 { font-size: clamp(30px, 5.2vw, 58px); line-height: 1.08; letter-spacing: -.028em; }
h2, .h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3, .h3 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.02em; }

.eyebrow {
  margin: 0 0 11px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue);
}
.lede { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; color: var(--muted); max-width: 58ch; }
.lede-wide { max-width: 68ch; }
.meta { font-family: var(--mono); font-size: 11.5px; color: var(--soft); letter-spacing: .02em; }
.col-head { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

.more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue); }
.more .i { transition: transform .18s ease; }
a:hover .more .i, .more:hover .i { transform: translateX(3px); }

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  text-align: center;
}
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: #c8d3e0; }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-outline { background: var(--paper); color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn .i { margin-left: 8px; }
.plan-title > span:first-child { margin-right: 2px; }

/* ---------- Nav ---------------------------------------------------------- */

.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: clamp(14px, 3vw, 44px); min-height: 72px; }
.brand { flex: none; display: flex; align-items: center; }
.brand img { height: clamp(17px, 2vw, 29px); width: auto; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.2vw, 32px); flex: 1 1 auto; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.nav-links a:hover, .nav-links a.on { color: var(--ink); font-weight: 600; }
.nav-links a.on { color: var(--blue); font-weight: 700; }
.nav-actions { flex: none; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.nav-actions .quiet { font-size: 15px; font-weight: 500; color: var(--muted); }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 22px; }
.m-nav { display: none; flex-direction: column; padding: 8px var(--gutter) 20px; border-top: 1px solid var(--line); background: var(--paper); }
.m-nav a { padding: 13px 0; font-size: 17px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .quiet { display: none; }
  .m-nav[data-open] { display: flex; }
}

/* ---------- Hero --------------------------------------------------------- */

.hero {
  background-image: url('/assets/img/hero.png');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
  background-color: var(--grey);
  border-bottom: 1px solid var(--line);
}
.hero-inner { padding: clamp(40px, 7vw, 92px) var(--gutter); max-width: 1296px; }
.hero h1 { max-width: 16ch; margin-top: 18px; }
.hero .lede { max-width: 46ch; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  min-height: 30px; padding: 0 13px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted);
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--blue); }
.cta-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
@media (max-width: 560px) { .cta-row .btn { width: 100%; } }

/* ---------- Stats -------------------------------------------------------- */

.stats { background: var(--grey); border-bottom: 1px solid var(--line); }
.stats-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3vw, 40px); padding-top: 20px; padding-bottom: 20px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; color: var(--blue); }
.stat-label { font-size: clamp(11.5px, 1vw, 12.5px); color: var(--muted); }
@media (max-width: 640px) { .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---------- Sections ----------------------------------------------------- */

.section { padding: clamp(44px, 6.5vw, 92px) 0; }
.section-top { padding-top: clamp(32px, 4vw, 56px); }
.section-tight { padding-top: 0; }
.band { background: var(--grey); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(44px, 6.5vw, 88px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 38px); flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cards -------------------------------------------------------- */

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid, .card-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: #b9cbe0; box-shadow: var(--shadow); color: inherit; }
.card-media { overflow: hidden; background: var(--tint); aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.card:hover .card-media img { transform: scale(1.025); }
.card-media-empty { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); }
.card-body { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; }
.card-body h3 { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.32; font-weight: 700; letter-spacing: -.012em; }
.card-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1 1 auto; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.card-featured { flex-direction: row; margin-bottom: clamp(16px, 2vw, 26px); }
.card-featured .card-media { flex: 0 0 48%; aspect-ratio: 16/9; }
.card-featured .card-body { justify-content: center; padding: clamp(22px, 3vw, 44px); gap: 14px; }
.card-featured .card-body h3 { font-size: clamp(21px, 2.4vw, 29px); line-height: 1.22; letter-spacing: -.018em; }
.card-featured .card-body p { font-size: clamp(15px, 1.3vw, 16px); flex: none; }
@media (max-width: 820px) { .card-featured { flex-direction: column; } .card-featured .card-media { flex: none; width: 100%; } }

.tag {
  display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 5px;
  background: var(--tint); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--blue);
}

/* ---------- Chips -------------------------------------------------------- */

.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(22px, 3vw, 32px); padding-top: 24px; border-top: 1px solid var(--line); }
.chips-wrap { border-top: 0; padding-top: 0; margin: 20px 0 clamp(22px, 3vw, 32px); }
.chips-label { font-size: 13.5px; color: var(--soft); margin-right: 4px; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13.5px; color: var(--muted); background: var(--paper); }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip span { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.chip.on span { color: rgba(255,255,255,.75); }

/* ---------- TradeOS ------------------------------------------------------ */

.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.58; color: var(--body); }
.ticks .i { width: 19px; height: 19px; margin-top: 3px; color: var(--blue); }
.plans { display: flex; flex-direction: column; gap: 16px; }
.plan { padding: clamp(22px, 3vw, 32px); border-radius: 15px; background: var(--paper); border: 1px solid #dbe3ec; }
.plan-free { border-top: 3px solid var(--blue); }
.plan p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 10px; }
.plan-price span { font-size: clamp(26px, 3vw, 30px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.plan-price small { font-size: 14.5px; color: var(--muted); }
.plan-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(18px, 2vw, 21px); font-weight: 700; color: var(--ink); }
.badge-soon { padding: 4px 10px; border-radius: 5px; background: var(--bronze-bg); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--bronze); }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { flex: 1 1 200px; min-height: 50px; padding: 0 16px; border-radius: 8px; border: 1px solid #ccd6e2; background: var(--paper); font-family: var(--sans); font-size: 15px; color: var(--ink); }
.inline-form .btn { min-height: 50px; padding: 0 24px; font-size: 15px; }
.form-note { margin: 10px 0 0; font-size: 13.5px; color: var(--blue); }

/* ---------- Resources ---------------------------------------------------- */

.resources { display: flex; flex-direction: column; gap: 12px; }
.resource { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); color: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.resource:hover { border-color: #b9cbe0; box-shadow: var(--shadow); color: inherit; }
.resource-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--tint); display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 21px; }
.resource-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.resource-text strong { font-size: 16.5px; font-weight: 700; }
/* Direct child only. The brand lockup is a <span> too, and without the `>` it
   was being caught here — which is why TradeOS rendered small and grey inside
   an otherwise bold title. Same trap in .menu below. */
.resource-text > span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.resource > .i { color: #9aa5b3; width: 17px; height: 17px; transition: transform .18s ease; }
.resource:hover > .i { transform: translateX(3px); }

/* ---------- Author ------------------------------------------------------- */

.author { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); padding: clamp(22px, 3vw, 38px) clamp(20px, 3vw, 42px); border-radius: 16px; background: var(--grey); border: 1px solid var(--line); }
.author-compact { background: var(--paper); margin: 36px 0 44px; align-items: flex-start; }
.avatar { border-radius: 999px; object-fit: cover; flex: none; }
.author > .avatar { width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); }
.author-compact > .avatar { width: 72px; height: 72px; }
.author-text { flex: 1 1 auto; }
.author-text .eyebrow { color: var(--soft); font-size: 11.5px; letter-spacing: .1em; margin-bottom: 7px; }
.author-text h3 { font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; margin-bottom: 9px; }
.author-text p:last-child { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 72ch; }
.author > .more { flex: none; }
@media (max-width: 760px) { .author { flex-direction: column; align-items: flex-start; } }

/* ---------- Article ------------------------------------------------------ */

.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: clamp(28px, 4vw, 72px); align-items: start; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(44px, 6vw, 88px); }
@media (max-width: 1000px) { .article-wrap { grid-template-columns: minmax(0, 1fr); } }
.article { max-width: 760px; }
.crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; font-size: 13.5px; color: var(--soft); }
.crumbs a { color: var(--soft); }
.crumbs a:hover { color: var(--blue); }
.article > .tag { margin-bottom: 18px; }
.article h1 { margin-bottom: 18px; }
.standfirst { margin: 0 0 26px; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--muted); }
.byline { display: flex; align-items: center; gap: 15px; padding: 19px 0; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; margin-bottom: 30px; }
.byline > div:first-of-type { flex: 1 1 auto; }
.byline .avatar { width: 44px; height: 44px; }
.byline-name { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; }
.byline p { margin: 0; }
.share { display: flex; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--muted); cursor: pointer; font-size: 15px; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }
.hero-figure { margin: 0 0 36px; }
.hero-figure img { width: 100%; border-radius: var(--radius); display: block; }

.article-body { font-size: clamp(16.5px, 1.5vw, 18px); line-height: 1.78; color: var(--body); }
.article-body p { margin: 0 0 24px; }
.article-body h2 { font-size: clamp(23px, 2.6vw, 32px); line-height: 1.22; font-weight: 700; margin: 40px 0 16px; }
.article-body h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.3; font-weight: 700; margin: 32px 0 14px; }
.article-body h4 { font-size: clamp(17px, 1.7vw, 19px); font-weight: 700; margin: 26px 0 12px; }
.article-body ul, .article-body ol { margin: 0 0 26px; padding-left: 22px; }
.article-body li { margin-bottom: 10px; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.insight-figure { margin: 30px 0; }
.insight-figure img { width: 100%; border-radius: 12px; display: block; }

.disclaimer { display: flex; gap: 14px; padding: 22px 26px; border-radius: 12px; background: var(--bronze-bg); border: 1px solid var(--bronze-line); margin: 36px 0; }
.disclaimer .i { width: 21px; height: 21px; color: var(--bronze); margin-top: 2px; }
.disclaimer p { margin: 0; font-size: 14.5px; line-height: 1.66; color: #6b5227; }
.disclaimer strong { color: #57411c; }

.sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 92px; }
@media (max-width: 1000px) { .sidebar { position: static; } }
.side-box { padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.side-box h3 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.018em; margin-bottom: 11px; }
.side-box p { margin: 0 0 15px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.side-cta { background: var(--grey); border-color: #dbe3ec; border-top: 3px solid var(--blue); }
.toc { display: flex; flex-direction: column; gap: 13px; }
.toc a { font-size: 14.5px; line-height: 1.45; color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; }
.toc a:hover, .toc a.on { color: var(--blue); font-weight: 600; border-left-color: var(--blue); }

/* ---------- Pager, topics, prose ---------------------------------------- */

.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }
.pg { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: 14.5px; font-weight: 600; color: var(--muted); }
.pg:hover { border-color: var(--blue); color: var(--blue); }
.pg.on { background: var(--blue); border-color: var(--blue); color: #fff; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
.topic-card { padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: inherit; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.topic-card:hover { border-color: #b9cbe0; box-shadow: var(--shadow); color: inherit; }
.topic-card h2 { font-size: 20px; font-weight: 700; }
.topic-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1 1 auto; }

.prose { font-size: 16.5px; line-height: 1.78; color: var(--body); }
.prose h2 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; margin: 40px 0 14px; }
.prose h3 { font-size: clamp(18px, 1.9vw, 21px); font-weight: 700; margin: 30px 0 12px; }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; color: var(--ink); }

/* ---------- Footer ------------------------------------------------------- */

.footer { background: var(--grey); border-top: 1px solid var(--line); padding: clamp(36px, 5vw, 58px) 0 clamp(26px, 3vw, 36px); }
.f-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 860px) { .f-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .f-top { grid-template-columns: minmax(0, 1fr); } }
.f-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.f-brand img { height: clamp(20px, 2vw, 26px); width: auto; }
.f-col { display: flex; flex-direction: column; gap: 13px; }
.f-head { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.f-col a { font-size: 14.5px; color: var(--muted); }
.f-col a:hover { color: var(--blue); }
.f-bottom { display: flex; align-items: flex-start; gap: 28px; padding-top: 24px; flex-wrap: wrap; }
.f-legal { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--soft); max-width: 800px; flex: 1 1 420px; }
.f-copy { margin: 0; font-size: 12.5px; color: var(--soft); white-space: nowrap; }

/* Touch targets: footer and inline links are text-sized, which is fine with a
   mouse but tight with a thumb. On small screens give them real height. */
@media (max-width: 720px) {
  .f-col { gap: 2px; }
  .f-col a { padding: 9px 0; }
  .chips { gap: 8px; }
  .chip { padding: 9px 14px; }
}

/* =========================================================================
   Designed pages: TradeOS, Resources, About
   ========================================================================= */

.page-hero { background: var(--grey); border-bottom: 1px solid var(--line); padding: clamp(36px, 5vw, 72px) 0 clamp(36px, 5vw, 64px); }
/* Same skyline as the home page, for pages that open on a statement rather
   than a screenshot. */
.page-hero-photo {
  background-image: url('/assets/img/hero.png');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
  background-color: var(--grey);
}
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero-text h1 { margin-bottom: 4px; }
.page-hero-text .lede { max-width: 48ch; }
.hero-note { margin: 14px 0 0; font-size: 13.5px; color: var(--soft); }
.page-hero-shot { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 18px 44px rgba(35,40,112,.14); background: #12151f; }
.page-hero-shot img { width: 100%; display: block; }
@media (max-width: 900px) { .page-hero-inner { grid-template-columns: minmax(0, 1fr); } }

.portrait { margin: 0; position: relative; justify-self: center; max-width: 420px; }
.portrait img { width: 100%; display: block; border-radius: var(--radius); background: var(--tint); }
.portrait figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; font-size: 14.5px; }
.portrait figcaption strong { font-weight: 700; }
.portrait figcaption span { color: var(--muted); }

.band-tight { padding: clamp(28px, 4vw, 48px) 0; }
.pullquote { margin: 0 auto; max-width: 62ch; text-align: center; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.5; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }

.section-grey { background: var(--grey); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.centred { text-align: center; margin-left: auto; margin-right: auto; }
h2.centred + .modules, h2.centred + .price-grid { margin-top: clamp(28px, 4vw, 44px); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.shot-frame { margin: 0; }
.shot-frame img { width: 100%; display: block; border-radius: var(--radius); border: 1px solid var(--line-strong); background: #12151f; }
.shot-frame figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--soft); }

.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }
.module { padding: 24px; border-radius: 13px; background: var(--paper); border: 1px solid var(--line); }
.module-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); color: var(--blue); font-size: 20px; margin-bottom: 14px; }
.module h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.module p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.ticks-sm { margin: 18px 0; gap: 10px; }
.ticks-sm li { font-size: 14.5px; }
.ticks-sm .i { width: 17px; height: 17px; margin-top: 2px; }
.plan-foot { margin: 12px 0 0 !important; font-size: 13px; color: var(--soft); }

/* The list's top border sits directly under the section heading, so the
   heading needs the gap — a margin on the heading would not reach it. */
.faq { margin-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 34px 20px 0; font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item summary:hover { color: var(--blue); }
.faq-body { padding: 0 0 20px; }
.faq-body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 70ch; }


.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px); border-radius: var(--radius); background: var(--grey); border: 1px solid var(--line); }
.cta-band h2 { margin-bottom: 6px; }
.cta-band p { margin: 0; font-size: 15px; color: var(--muted); }

.coverage { display: flex; flex-direction: column; gap: 2px; margin-top: clamp(22px, 3vw, 32px); }
.cov { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 44px; gap: 16px; align-items: center; padding: 11px 12px; border-radius: 8px; color: inherit; }
.cov:hover { background: var(--paper); color: inherit; }
.cov-label { font-size: 14.5px; font-weight: 600; }
.cov-bar { height: 10px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.cov-bar span { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.cov:hover .cov-bar span { background: var(--blue-deep); }
.cov-count { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right; }
@media (max-width: 560px) { .cov { grid-template-columns: minmax(0, 1fr) 40px; } .cov-bar { grid-column: 1 / -1; } }


/* ---------- Dropdown navigation ----------------------------------------- */

.nav-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-link:hover { color: var(--ink); }
.nav-link.on { color: var(--blue); font-weight: 700; }
.caret { width: 10px; height: 6px; transition: transform .18s ease; }
.has-menu { position: relative; display: inline-flex; }
.has-menu[data-open] .caret { transform: rotate(180deg); }
.has-menu[data-open] .nav-link { color: var(--ink); }
.menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 320px; padding: 8px; border-radius: 14px; background: var(--paper);
  border: 1px solid var(--line-strong); box-shadow: 0 18px 44px rgba(35,40,112,.14);
  display: flex; flex-direction: column; gap: 2px; z-index: 60;
}
.menu[hidden] { display: none; }
.menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.menu a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 9px; color: inherit; }
.menu a:hover { background: var(--grey); color: inherit; }
.menu a strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.menu a > span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.m-head { margin: 16px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.m-nav .m-sub { padding-left: 14px; font-weight: 500; }

/* ---------- Academy ----------------------------------------------------- */

.academy-hero { background: var(--grey); border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 76px) 0; text-align: center; }
.academy-logo { height: clamp(26px, 3.6vw, 42px); width: auto; display: block; margin: 0 auto clamp(18px, 2.5vw, 26px); }
.academy-hero .lede { margin-left: auto; margin-right: auto; }
.academy-hero .cta-row { justify-content: center; margin-top: 26px; }

.course-group + .course-group { margin-top: clamp(40px, 5vw, 64px); }
.course-group > .h2 { margin-bottom: clamp(20px, 2.5vw, 28px); }
.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.course { display: flex; flex-direction: column; gap: 11px; padding: clamp(22px, 2.6vw, 28px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
a.course:hover { border-color: #b9cbe0; box-shadow: var(--shadow); color: inherit; }
.course-dim { background: #fafbfd; border-style: dashed; border-color: #d3dce7; }
.course-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px; }
.course-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.course-badge { padding: 3px 9px; border-radius: 4px; background: var(--tint); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--blue); }
.course-badge.soon { background: var(--bronze-bg); color: var(--bronze); }
.course h3 { font-size: clamp(19px, 1.9vw, 22px); font-weight: 700; letter-spacing: -.015em; }
.course p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1 1 auto; }
.course-dim h3 { color: #4c5665; }
.course-soon { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* ---------- About: values, topic tiles, founder ------------------------- */

.hero-wide { max-width: 20ch; }
.page-hero .lede-wide { margin-top: 18px; }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: clamp(24px, 3vw, 36px); }
.value { padding: clamp(22px, 2.6vw, 28px); border-radius: 13px; background: var(--paper); border: 1px solid var(--line); }
.value-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--tint); color: var(--blue); font-size: 21px; margin-bottom: 14px; }
.value h3 { font-size: 18px; font-weight: 700; margin-bottom: 9px; }
.value p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }

.topic-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.topic-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 13px; border: 1px solid var(--line); background: var(--paper); color: inherit; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.topic-tile:hover { border-color: #b9cbe0; box-shadow: var(--shadow); color: inherit; }
.topic-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--tint); color: var(--blue); font-size: 23px; transition: background .2s ease, color .2s ease; }
.topic-tile:hover .topic-icon { background: var(--blue); color: #fff; }
.topic-tile h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.topic-tile p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--muted); }

/* The portrait is cropped at the waist on purpose. It sits flush on the bottom
   edge of the grey band so the white section below reads as standing in front
   of him — hence padding-bottom: 0 on the band and align-items: end here.
   The text column carries its own bottom padding so it does not touch the edge. */
/* #f4f8fb is the exact background of the portrait file, one step off --grey.
   Matching it here makes the edge of the photo invisible, so he reads as
   standing in the band rather than inside a box. Do not "tidy" this to
   var(--grey) — the seam comes straight back. */
.founder-band { padding-bottom: 0; background: #f4f8fb; }
.founder { display: grid; grid-template-columns: clamp(340px, 34vw, 490px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: end; }
.founder img {
  width: 100%; display: block; align-self: end;
  margin-bottom: -1px;                       /* covers the band's bottom border */
  background: var(--grey);                   /* same as the band, so no frame shows */
}
.founder-text { padding-bottom: clamp(40px, 5vw, 72px); }
/* Stacks at 1000px rather than 860: below that the portrait column and the
   text column are both too narrow to read side by side. */
@media (max-width: 1000px) {
  .founder { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .founder-text { order: 1; padding-bottom: 28px; }
  .founder img { order: 2; max-width: 340px; margin: 0 auto -1px; }
}
.founder p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.66; color: var(--muted); }
.founder p:last-child { margin-bottom: 0; }
.founder .h3 { margin-bottom: 14px; }

/* ---------- Share this Insight ------------------------------------------ */
/* Typographic rather than a row of coloured brand marks: it stays legible at
   any size and matches the rest of the page's register. */
.share-box { margin: 30px 0 38px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 13px; background: var(--grey); }
.share-box .col-head { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.share-box .col-head .i { width: 16px; height: 16px; color: var(--blue); }
.share-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.share-pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--paper);
  font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.share-pill:hover { border-color: var(--blue); color: var(--blue); background: var(--paper); }
.share-pill .i { width: 15px; height: 15px; }
.share-copy.copied { border-color: var(--blue); color: var(--blue); }
.share-copy.copied span::after { content: " — copied"; }
@media (max-width: 560px) { .share-box { padding: 18px 16px; } .share-pill { font-size: 13.5px; padding: 0 13px; } }

/* The copy button in the byline had no visible result, so it read as dead.
   It now says so. */
.icon-btn { position: relative; }
.icon-btn.copied { border-color: var(--blue); color: var(--blue); }
.icon-btn.copied::after {
  content: "Link copied"; position: absolute; bottom: calc(100% + 8px); right: 0;
  padding: 5px 9px; border-radius: 7px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap;
}

/* The caret sat on the line-box centre, which reads high against the
   x-height of the label beside it. */
.caret { margin-top: 2px; }

/* A button that directly follows a paragraph always gets the same gap. Set
   once here rather than per section, so no block can end up tighter than
   another. Full-width buttons inside cards are excluded — they carry their own
   rhythm. */
p + .btn:not(.btn-block), .lede + .btn:not(.btn-block) { margin-top: 26px; }

/* The page-hero capsule needs the same breathing room under it as the home
   hero's, otherwise the H1 lands at a different height on each page. */
.badge + h1, .badge + .h1 { margin-top: 18px; }

/* ---------- Join the team ----------------------------------------------- */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: clamp(22px, 3vw, 32px); }
.role { padding: clamp(22px, 2.6vw, 30px); border-radius: 13px; background: var(--paper); border: 1px solid var(--line); }
.role-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.role-head h3 { font-size: 20px; font-weight: 700; }
.role-place { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; }
.role p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); }

.apply-form { margin-top: clamp(22px, 3vw, 30px); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 13px 14px; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(30,90,148,.12); }
.field-foot { margin: 14px 0 0; font-size: 13.5px; color: var(--soft); }

/* ---------- eBook -------------------------------------------------------- */
.cover-figure { margin: 0; display: flex; justify-content: center; }
.cover-figure img { width: 100%; max-width: 360px; height: auto; border-radius: 10px; box-shadow: 0 22px 50px rgba(18,21,31,.26); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: step; }
.step { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: 13px; background: var(--paper); border: 1px solid var(--line); }
.step-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--tint); color: var(--blue); font-size: 20px; }
.step h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* ---------- eBook: prologue and "what is inside" ------------------------ */
.prologue { margin: 18px 0 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.62; color: var(--body); }
.inside { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.inside-card { padding: clamp(22px, 2.6vw, 28px); border-radius: 13px; background: var(--paper); border: 1px solid var(--line); }
.inside-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: var(--tint); color: var(--blue); font-size: 23px; margin-bottom: 15px; }
.inside-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.inside-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* The prologue sits in the same section as the cards below it, so it lines up
   with the left edge of the first card rather than sitting in a centred
   prose column. */
.prologue { max-width: 72ch; }

/* ---------- Academy course pages ---------------------------------------- */
.course-hero { background: var(--grey); border-bottom: 1px solid var(--line); padding: clamp(36px, 5vw, 72px) 0 0; }
.course-hero-text { padding-bottom: clamp(28px, 4vw, 44px); }
.course-hero-text h1 { max-width: 18ch; margin-top: 18px; }
.course-hero-shot { margin: 0; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; border: 1px solid var(--line-strong); border-bottom: 0; background: var(--tint); }
.course-hero-shot img { width: 100%; display: block; }

.modules-stack { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 92px); }
.module-row { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.module-shot { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--grey); }
.module-shot img { width: 100%; display: block; }
.module-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.module-text h2 { margin-bottom: 14px; }
.module-text > p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.learnings { margin: 0 0 12px !important; font-weight: 600; color: var(--ink) !important; font-size: 14.5px !important; }
.module-foot { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--soft); }
/* The image column is fixed-ish, so below 900px the text has nowhere to go. */
@media (max-width: 900px) {
  .module-row, .module-row.module-flip { grid-template-columns: minmax(0, 1fr); }
  .module-row .module-shot { order: 1; }
  .module-row .module-text { order: 2; }
}

.included { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--grey); }
.free-word { color: var(--blue); margin: 6px 0 0; }
.included-list { margin-top: 0; }
@media (max-width: 800px) { .included { grid-template-columns: minmax(0, 1fr); } }
.cost-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--soft); }

/* A cut-out module image has no background of its own, so it should not sit in
   a frame either — it floats on the page the way it does on the old site. */
.module-bare { border: 0; border-radius: 0; background: none; overflow: visible; }

/* The footer X is now the mark alone. It needs a hit area of its own once the
   handle beside it is gone. */
.f-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -9px; border-radius: 9px; color: var(--muted); font-size: 17px; }
.f-social:hover { color: var(--blue); background: var(--grey); }