/* ============================================================
   site.css — shared marketing/content site styles (gantts.app)
   Theme-aware (light/dark), responsive. Used by all non-app pages.
   ============================================================ */
/* self-hosted variable fonts (privacy-friendly, works offline) */
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter.woff2') format('woff2'); font-weight:100 900; font-display:swap; font-style:normal; }
@font-face { font-family:'Bricolage'; src:url('/assets/fonts/bricolage.woff2') format('woff2'); font-weight:200 800; font-display:swap; font-style:normal; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk.woff2') format('woff2'); font-weight:300 700; font-display:swap; font-style:normal; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight:100 800; font-display:swap; font-style:normal; }

:root {
  /* signature identity: indigo-violet + coral */
  --brand: #6c4cf1;
  --brand-ink: #5a3ce6;
  --brand-2: #8b5cf6;
  --brand-3: #a78bfa;
  --accent: #ff6a3d;
  --bg: #ffffff;
  --bg-soft: #f7f6fc;
  --bg-softer: #efedf9;
  --card: #ffffff;
  --ink: #17141f;
  --ink-soft: #4c475a;
  --ink-faint: #9691a5;
  --line: #e8e5f1;
  --line-soft: #f1eff8;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(23,20,31,.05), 0 8px 24px rgba(90,60,230,.06);
  --shadow-lg: 0 24px 56px rgba(60,40,140,.16);
  --maxw: 1200px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Bricolage', 'Inter', var(--font);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --grad: linear-gradient(118deg, #8b5cf6, #6c4cf1 52%, #5a3ce6);
}
/* Default is always LIGHT — dark only when the user explicitly toggles it
   (no prefers-color-scheme auto-dark). */
:root[data-theme="dark"] {
  --bg: #0e0b1a; --bg-soft: #151127; --bg-softer: #1b1533; --card: #171230;
  --ink: #ece9f7; --ink-soft: #b3adca; --ink-faint: #7a7495;
  --line: #2b2545; --line-soft: #221d3b;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.4);
  --shadow-lg: 0 26px 64px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-soft: #f7f6fc; --bg-softer: #efedf9; --card: #ffffff;
  --ink: #17141f; --ink-soft: #4c475a; --ink-faint: #9691a5;
  --line: #e8e5f1; --line-soft: #f1eff8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.6; -webkit-font-smoothing: antialiased; font-size: 16px;
  font-feature-settings: "cv11", "ss01"; letter-spacing: -0.006em;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
img, svg { max-width: 100%; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 724px; }   /* ~68ch reading measure — comfortable line length */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 15px;
  font-family: var(--font); transition: transform .06s, background .15s, box-shadow .15s, border-color .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; background: var(--bg-soft); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); border: none; color: #fff; box-shadow: 0 8px 20px rgba(59,130,246,.35); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.05); color: #fff; }
.btn-lg { padding: 15px 26px; font-size: 17px; border-radius: 12px; }
.btn-ghost { background: transparent; }
.btn-white { background: #fff; color: var(--brand-ink); border: none; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo:hover { text-decoration: none; }
.brand-mark { height: 30px; width: 30px; display: block; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.brand-word b { color: var(--brand); font-weight: 700; }
.footer .brand-mark { height: 28px; width: 28px; }
.footer .brand-word { font-size: 19px; }
/* nowrap on both axes: without it the links keep their row but each
   label wraps internally ("What is a Gantt chart?" onto two lines),
   which is what made the bar look squeezed and ragged. */
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex-wrap: nowrap; }
.nav-links a { color: var(--ink-soft); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-inner > .nav-logo { flex: none; }
.brand-word { white-space: nowrap; }
.theme-toggle { border: 1px solid var(--line); background: var(--card); width: 38px; height: 38px; border-radius: 9px; cursor: pointer; font-size: 16px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.lang-select { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 9px; padding: 8px 8px; font-size: 14px; font-family: var(--font); cursor: pointer; height: 38px; }
@media (max-width: 620px) { .lang-select { display: none; } }
.nav-burger { display: none; border: 1px solid var(--line); background: var(--card); width: 40px; height: 38px; border-radius: 9px; cursor: pointer; font-size: 18px; color: var(--ink); }
/* Hand over to the burger BEFORE the links run out of room. The old
   860px cutoff left a dead zone (~860-1100px) where the links were
   still shown but too cramped to sit on one line. German and Spanish
   labels are longer than English, so the cutoff is generous. */
@media (max-width: 1100px) {
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg); flex-direction: column; align-items: stretch; padding: 10px 16px 16px; border-bottom: 1px solid var(--line); gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; font-size: 16px; white-space: normal; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* Phones: the bar needs ~435px of chrome but only has ~415px at 430w,
   so something has to give. The theme toggle goes rather than the
   primary CTA — losing the button would cost a conversion on the most
   traffic-heavy breakpoint, and dark mode is still reachable on
   desktop. Kept in lockstep with the .lang-select cutoff above — when
   the two differed there was a band around 545-560px where neither had
   applied yet and the bar overflowed by a few pixels. */
@media (max-width: 620px) {
  .nav-inner { gap: 8px; }
  .nav-cta { gap: 6px; }
  .nav-cta .theme-toggle { display: none; }
  .nav-cta .btn { padding: 8px 11px; font-size: 13.5px; }
  .brand-word { font-size: 18px; }
  .nav-burger { width: 36px; height: 36px; }
}
/* Very small screens (320px, older iPhone SE, folded devices). Two
   things overflow here: the large hero buttons, which do not shrink,
   and the nav CTA — whose label is longer in Spanish and German than
   in English, so an English-only check would have missed it. */
@media (max-width: 380px) {
  .brand-word { font-size: 16px; }
  .brand-mark { height: 26px; width: 26px; }
  /* the burger already reaches the app; the hero CTA sits just below */
  .nav-cta .btn { display: none; }
  .btn-lg { font-size: 15px; padding: 12px 16px; max-width: 100%; white-space: normal; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 40px; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 60% at 15% 0%, rgba(99,102,241,.14), transparent 60%),
  radial-gradient(50% 60% at 90% 10%, rgba(6,182,212,.14), transparent 60%); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: 6px 12px; border-radius: 999px; }
.hero h1 { font-size: clamp(32px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 18px 0 14px; font-weight: 800; }
.hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-soft); max-width: 640px; margin: 0 0 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 22px; color: var(--ink-soft); font-size: 14px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.check { color: var(--accent); font-weight: 800; }

/* ---------- sections ---------- */
section { padding: 56px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
.section-head .eyebrow { margin-bottom: 14px; }
h2 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 14px; font-weight: 800; }
h3 { font-size: 20px; margin: 0 0 8px; font-weight: 700; }
.lead { font-size: 18px; color: var(--ink-soft); }
.bg-soft { background: var(--bg-soft); }

/* ---------- feature grid ---------- */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card .ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: color-mix(in srgb, var(--brand) 12%, transparent); margin-bottom: 14px; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--ink-soft); margin: 0; font-size: 15px; }
.card-link { display: block; text-decoration: none; color: inherit; transition: transform .1s, box-shadow .15s, border-color .15s; }
.card-link:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .steps { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .steps { grid-template-columns: 1fr;} }
.step { position: relative; padding-top: 12px; }
.step .n { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad); color: #fff; border-radius: 20px; padding: 46px 32px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 18px; margin: 0 auto 22px; max-width: 560px; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; margin-bottom: 12px; background: var(--card); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--brand-ink); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-soft); margin: 0 0 16px; }

/* ---------- prose (articles) ---------- */
.prose { font-size: 18px; line-height: 1.72; color: var(--ink); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.9em; font-size: clamp(23px, 2.4vw, 28px); scroll-margin-top: 84px; }
.prose h3 { font-size: 21px; margin-top: 1.5em; scroll-margin-top: 84px; }
.prose p, .prose li { color: var(--ink); }
.narrow > h1, article > h1 { font-family: var(--font-display); font-size: clamp(31px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.025em; margin: 6px 0 8px; }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: .4em 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: 12px; border: 1px solid var(--line); }
.prose blockquote { border-left: 4px solid var(--brand); background: var(--bg-soft); margin: 1.4em 0; padding: 12px 18px; border-radius: 0 10px 10px 0; color: var(--ink-soft); }
.prose code { background: var(--bg-softer); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose table th, .prose table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose table th { background: var(--bg-soft); font-weight: 700; }
.callout { background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); border-radius: 12px; padding: 18px 20px; }
.callout strong { color: var(--brand-ink); }

/* ---------- breadcrumbs / meta ---------- */
.crumbs { font-size: 14px; color: var(--ink-faint); margin-bottom: 10px; }
.crumbs a { color: var(--ink-soft); }
.post-meta { color: var(--ink-faint); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; }
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin: 24px 0; }
.toc strong { display: block; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.toc ol { margin: 0; padding-left: 20px; }
.toc a { color: var(--ink-soft); }

/* ---------- template gallery ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .tpl-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .tpl-grid { grid-template-columns: 1fr;} }
.tpl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .12s, box-shadow .15s; display: flex; flex-direction: column; }
.tpl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.tpl-thumb { aspect-ratio: 16/10; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.tpl-body h3 { font-size: 17px; margin-bottom: 4px; color: var(--ink); }
.tpl-body p { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; flex: 1; }
.tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 600; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 10%, transparent); padding: 3px 9px; border-radius: 999px; }
.tag.excel { color: #15803d; background: #dcfce7; } .tag.ppt { color: #c2410c; background: #ffedd5; }
.tag.csv { color: #6d28d9; background: #ede9fe; } .tag.sheets { color: #047857; background: #d1fae5; }
:root[data-theme="dark"] .tag.excel,:root[data-theme="dark"] .tag.ppt,:root[data-theme="dark"] .tag.csv,:root[data-theme="dark"] .tag.sheets { filter: brightness(.9) saturate(1.2); }

.dl-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }

/* ---------- footer ---------- */
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 56px 0 28px; margin-top: 56px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px 28px; }
/* The old breakpoints were 820px and 480px set to the SAME two columns,
   so phones got two ~140px columns instead of ever collapsing to one. */
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

.footer h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin: 0 0 10px; font-family: var(--font); font-weight: 700; }
/* 15px text on 5px padding gave a ~25px tap target, well under the 44px
   guideline. Padding raised, and raised further where touch is likely. */
.footer a { display: block; color: var(--ink-soft); padding: 8px 0; font-size: 15px; line-height: 1.35; }
.footer a:hover { color: var(--ink); text-decoration: none; }
.footer a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px) { .footer a { padding: 11px 0; } }

.footer-brand p { color: var(--ink-soft); font-size: 14.5px; max-width: 300px; margin: 12px 0 0; line-height: 1.6; }
/* one clear action in the brand column, instead of three footer links
   that all pointed at /app.html with different labels */
.footer-cta { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 16px; color: var(--brand-ink) !important; font-weight: 600; font-size: 15px; padding: 0 !important; }
.footer-cta:hover { gap: 9px; }
.footer-ext::after { content: " ↗"; color: var(--ink-faint); font-size: 12px; }
/* Parent-brand attribution. Deliberately quiet — it should read as
   provenance, not as a second call to action competing with the CTA
   directly above it. */
/* .footer-brand p is class+element (0,1,1) and would otherwise win over
   a lone .footer-byline class (0,1,0), leaving the byline the same
   weight as the tagline above it. */
.footer-brand p.footer-byline { margin: 18px 0 0; font-size: 13px; color: var(--ink-faint); }
.footer-byline a { display: inline; padding: 0; font-size: inherit; color: var(--ink-soft); font-weight: 600; }
.footer-byline a:hover { color: var(--brand-ink); }

.footer-bottom { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-faint); font-size: 13.5px; }
.footer-bottom a { display: inline; padding: 0; font-size: inherit; color: var(--ink-faint); }
@media (max-width: 560px) { .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* ---------- misc ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 18px; } .mt-4 { margin-top: 36px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.jump-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.jump { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.jump:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; background: var(--bg-soft); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* =====================================================================
   REDESIGN v2 — editorial, product-led, less-templated
   ===================================================================== */
:root { --maxw: 1200px; }

/* cleaner, less "AI pill" label — also refreshes the other pages' eyebrows */
.label, .eyebrow {
  display: inline-flex; align-items: center; gap: 9px; background: none; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-ink);
}
.label::before, .eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--brand); }

.section { padding: 66px 0; }
.section.band { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card { border-radius: 16px; }
.tpl-card { border-radius: 16px; }

/* ---- left-aligned editorial section header ---- */
.head-l { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.head-l > div { min-width: 0; }
.head-l h2 { margin: 10px 0 0; font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -0.02em; }
.head-l-note { max-width: 380px; color: var(--ink-soft); font-size: 15px; margin: 0; }
.head-l-link, .head-l-cta { white-space: nowrap; font-weight: 600; }
@media (max-width: 720px) { .head-l { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ---- hero (asymmetric + app window) ---- */
.hero2 { position: relative; overflow: hidden; padding: 60px 0 46px; }
.hero2-glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(48% 55% at 84% 4%, rgba(59,130,246,.16), transparent 62%),
  radial-gradient(42% 48% at 2% 34%, rgba(99,102,241,.12), transparent 60%); }
.hero2-inner { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 50px; align-items: center; }
@media (max-width: 940px) { .hero2-inner { grid-template-columns: 1fr; gap: 36px; } }
.hero2-copy { max-width: 540px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); background: var(--card); padding: 6px 13px; border-radius: 999px; }
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.hero2 h1 { font-size: clamp(34px, 4.7vw, 55px); line-height: 1.03; letter-spacing: -0.028em; font-weight: 800; margin: 20px 0 16px; }
.hero2 h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-soft); margin: 0 0 26px; max-width: 500px; }
.hero2-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero2-link { font-weight: 600; color: var(--ink); }
.hero2-meta { margin: 20px 0 0; font-size: 13px; color: var(--ink-faint); }

.hero2-app { position: relative; }
.appframe { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--card); }
.appframe-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 13px; background: var(--bg-softer); border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.dots i:nth-child(1){ background:#f87171 } .dots i:nth-child(2){ background:#fbbf24 } .dots i:nth-child(3){ background:#34d399 }
.appframe-url { font-size: 12px; color: var(--ink-faint); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 12px; }
.appframe-body { line-height: 0; }
.appframe-body svg { width: 100%; height: auto; display: block; }
.hero2-badge { position: absolute; right: -8px; top: -14px; background: var(--grad); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 15px; border-radius: 999px; box-shadow: 0 10px 22px rgba(59,130,246,.42); transform: rotate(4deg); }
@media (max-width: 940px) { .hero2-badge { right: 10px; top: -10px; } }

/* ---- positioning strip ---- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.strip-inner { display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap; padding: 15px 0; font-size: 14px; color: var(--ink-faint); }
.strip b { color: var(--ink-soft); font-weight: 700; }
.strip em { color: var(--line-strong); font-style: normal; }
@media (max-width: 560px) { .strip-inner { font-size: 12.5px; gap: 8px; } }

/* ---- bento features ---- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(190px, auto); gap: 16px; }
.bento-item { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .12s, box-shadow .15s, border-color .15s; min-width: 0; overflow: hidden; }
.bento-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.bento-item h3 { font-size: 17px; margin: 0 0 6px; }
.bento-item p { color: var(--ink-soft); font-size: 14.5px; margin: 0; line-height: 1.55; }
.b1 { grid-column: span 3; grid-row: span 2; }
.b2 { grid-column: span 3; } .b3 { grid-column: span 3; }
.b4, .b5, .b6 { grid-column: span 2; }
.b1 .bento-visual { flex: 1 1 auto; min-height: 130px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 16px 20px; margin-bottom: 18px; }
.b1 .bento-visual svg { width: 100%; height: auto; max-height: 190px; }
.licon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, transparent); margin-bottom: 15px; }
.licon svg { width: 23px; height: 23px; }
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .b1, .b2, .b3, .b4, .b5, .b6 { grid-column: span 1; grid-row: auto; }
  .b1 .bento-visual { min-height: 150px; }
}
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } }

/* ---- 3-step flow ---- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.flow li { border-top: 2px solid var(--line); padding-top: 18px; }
.flow-n { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--brand-ink); }
.flow li h3 { margin: 12px 0 7px; font-size: 19px; }
.flow li p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.flow li code { background: var(--bg-softer); padding: 1px 6px; border-radius: 5px; font-size: .88em; }
@media (max-width: 720px) { .flow { grid-template-columns: 1fr; gap: 20px; } }

/* ---- partner promo (ExcelGuru.io) ----
   A labelled ad slot, not a disguised editorial card. It reads as a
   promotion on purpose: the "Advertisement" tag is not decoration, it
   is what keeps the block honest for the reader and keeps the page
   clear of Google's deceptive-ad guidance. Muted surface rather than
   the brand purple so it never competes with the page's own CTA. */
.promo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  background: var(--bg-soft, #f7f7fb); margin: 34px 0; }
.promo-body { flex: 1 1 320px; min-width: 0; }
.promo-tag { display: inline-block; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; margin-bottom: 9px; }
.promo h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.promo p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.promo .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 620px) { .promo { padding: 16px; } .promo .btn { width: 100%; text-align: center; } }

/* ---- template detail hero ----
   The detail page used to run the whole page down a 724px .narrow
   column while the nav, the CTA band and every other page type sat at
   the 1200px site width — so the page visibly stepped in and back out
   again, and the 480px-wide preview SVG was upscaled to 676px to fill
   a column that was still too narrow for it.

   Now the masthead spans the full site width with the preview beside
   the copy rather than under it. At 1200px the media column lands near
   540px, which is close to the SVG's native 480 instead of stretching
   it. Body prose stays in .narrow below: matching the site width is
   right for the masthead, but a 1200px line of running text is ~113
   characters and unreadable. */
.tpl-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 46px; align-items: center; }
@media (max-width: 900px) { .tpl-hero { grid-template-columns: 1fr; gap: 26px; } }
.tpl-hero-copy h1 { margin: 12px 0 14px; }
.tpl-hero-copy .lead { margin-bottom: 22px; }
.tpl-hero-media img { display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---- split (why free) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 30px; } }
.split-copy h2 { font-size: clamp(24px, 2.9vw, 33px); margin: 12px 0 14px; letter-spacing: -0.02em; }
.split-copy p { color: var(--ink-soft); margin: 0 0 24px; font-size: 16px; }
.compare { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.compare li { display: grid; grid-template-columns: 1.25fr .9fr .9fr; align-items: center; padding: 13px 20px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.compare li:first-child { border-top: none; }
.c-k { color: var(--ink-soft); }
.c-us { font-weight: 700; color: var(--accent); }
.c-us::before { content: "✓ "; font-weight: 800; }
.c-them { color: var(--ink-faint); text-align: right; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-faint) 55%, transparent); }
.compare .c-price { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare .c-price .c-us { font-size: 16px; }
.compare .c-price .c-them { text-decoration: none; }

/* ---- FAQ two-column ---- */
.faq2 { display: grid; grid-template-columns: .82fr 1.18fr; gap: 46px; align-items: start; }
@media (max-width: 820px) { .faq2 { grid-template-columns: 1fr; gap: 22px; } }
/* .faq2-side is deliberately NOT sticky — pinning the heading left it
   hanging under the nav for the whole section while the answers
   scrolled past it. */
.faq2-side h2 { font-size: clamp(24px, 2.7vw, 32px); margin: 12px 0 10px; }
.faq2-side p { color: var(--ink-soft); margin: 0 0 16px; }
.faq2-list { max-width: none; margin: 0; }

/* ---- CTA ---- */
.cta2 { background: var(--grad); color: #fff; border-radius: 22px; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.cta2 h2 { color: #fff; margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); }
.cta2 p { color: rgba(255,255,255,.9); margin: 0; font-size: 16px; }

/* =====================================================================
   HERO v3 — the pitch rendered AS a Gantt chart (distinctive identity)
   ===================================================================== */
.hero3 { position: relative; overflow: hidden; padding: 30px 0 60px; }
.hero3-bg { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(52% 60% at 86% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
  radial-gradient(42% 46% at -2% 38%, color-mix(in srgb, var(--brand-2) 13%, transparent), transparent 60%); }
.hero3 > .container { position: relative; z-index: 1; }
.hero3-ruler { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); border-bottom: 1px dashed var(--line); padding-bottom: 10px; margin-bottom: 28px; }
.hero3-ruler .on-today { color: #fff; background: var(--accent); font-weight: 700; padding: 2px 10px; border-radius: 999px; font-family: var(--font); font-size: 11px; letter-spacing: 0; }
.hero3-head { max-width: 700px; margin-bottom: 30px; }
.hero3 h1 { font-family: var(--font-display); font-size: clamp(37px, 5.7vw, 63px); line-height: 1.0; letter-spacing: -0.035em; margin: 16px 0 16px; font-weight: 800; }
.hero3 h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero3-sub { font-size: clamp(17px, 1.55vw, 20px); color: var(--ink-soft); max-width: 610px; margin: 0 0 24px; }
.hero3-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero3-link { font-weight: 600; color: var(--ink); }
.hero3-meta { margin-top: 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }

.hero3-bars { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); grid-auto-rows: 46px; gap: 14px 0; margin-top: 6px; }
.fbar { grid-column: var(--s) / span var(--w); border-radius: 10px; display: flex; align-items: center; padding: 0 16px; color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: var(--shadow); overflow: hidden; transform-origin: left center; animation: fgrow .7s cubic-bezier(.2,.8,.2,1) both; }
.fbar.r1 { grid-row: 1; animation-delay: .05s; } .fbar.r2 { grid-row: 2; animation-delay: .18s; }
.fbar.r3 { grid-row: 3; animation-delay: .31s; } .fbar.r4 { grid-row: 4; animation-delay: .44s; }
.fbar.r5 { grid-row: 5; animation-delay: .57s; }
.fbar.v { background: #6c4cf1; } .fbar.i { background: #7c5cff; } .fbar.o { background: var(--accent); }
.fbar.p { background: #8b5cf6; } .fbar.g { background: #10b981; }
.fmile { grid-column: var(--s); grid-row: 4; align-self: center; justify-self: start; width: 22px; height: 22px; border-radius: 5px; background: var(--accent); box-shadow: var(--shadow); transform: rotate(45deg); animation: fpop .5s ease .72s both; }
.hero3-today { position: absolute; top: -8px; bottom: -8px; left: 50%; width: 2px; background: var(--accent); opacity: .45; }
@keyframes fgrow { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes fpop { from { opacity: 0; transform: rotate(45deg) scale(.2); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .fbar, .fmile { animation: none; opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .hero3-bars { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .fbar { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 42px; }
  .fmile, .hero3-today { display: none; }
}

/* ---- checks list (replaces competitor comparison) ---- */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.checks li { position: relative; padding-left: 36px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.5; }
.checks li b { color: var(--ink); font-weight: 700; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.checks li::after { content: "✓"; position: absolute; left: 6px; top: 1px; color: var(--accent); font-weight: 800; font-size: 14px; }
.checks li code { background: var(--bg-softer); padding: 1px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: .85em; }

/* ---------- guide figures (inline SVG diagrams) ---------- */
/* The SVGs use currentColor for labels so they stay legible in both
   themes; the card gives them a light surface in dark mode too, since
   the neutral greys inside them are tuned for a light background. */
.fig {
  margin: 26px 0 30px;
  padding: 20px 20px 8px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  overflow-x: auto;
}
.fig figcaption {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 16px;
  line-height: 1.5;
}
.fig svg { display: block; max-width: 100%; height: auto; min-width: 460px; }
:root[data-theme="dark"] .fig { background: #f8fafc; color: #16151d; }
:root[data-theme="dark"] .fig figcaption { color: #475569; }

/* ---------- template-hub search ---------- */
.tpl-search-wrap { border-bottom: 1px solid var(--line); background: var(--bg); }
.tpl-search-inner {
  max-width: 760px; margin: 0 auto; padding: 20px 24px 22px;
  display: flex; align-items: center; gap: 14px;
}
.tpl-search {
  flex: 1; min-width: 0;
  font: inherit; font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239691a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; padding-left: 44px;
}
.tpl-search:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.tpl-search-count { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 520px) {
  .tpl-search-inner { flex-wrap: wrap; padding: 16px; }
  .tpl-search-count { width: 100%; }
}

/* The cookie-consent banner styles used to live here. They now ship
   inside js/consent.js, because this stylesheet is not loaded by
   /app.html — the editor uses styles.css, so the banner rendered there
   completely unstyled. A component that injects itself into every page
   has to carry its own CSS; two copies in two stylesheets would drift,
   and the sheets do not even define the same custom properties. */

/* In-prose diagrams sit between paragraphs rather than above the
   article, so they need less air and their caption reads better BELOW
   the drawing — by the time you reach it you have already looked. */
.fig-inline { margin: 22px 0; padding: 18px 18px 10px; }
.fig-inline figcaption { margin: 14px 0 0; }

/* Worked examples. The class is also what scripts/audit-guide-richness.js
   counts, so it is load-bearing markup, not decoration — renaming it
   silently drops these pages below the richness floor. */
.worked {
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--bg-soft);
  font-size: 16.5px;
}
.worked > * + * { margin-top: .9em; }
.worked h3, .worked h4 { margin: 0; font-size: 17px; font-family: var(--font-display); }
.worked table { font-size: 14.5px; }
/* Numbers in a worked example are the point of it — tabular figures stop
   the columns from jittering as the digits change width. */
.worked td, .worked th { font-variant-numeric: tabular-nums; }

.post-meta { font-size: 14px; color: var(--ink-soft); margin-top: -6px; }

/* Fallback-language note. Previously this reused .crumbs, which is the
   breadcrumb style — so localized pages had a note that looked like
   navigation and no actual breadcrumb. */
.locale-note { color: var(--ink-soft); font-size: 13px; margin: -6px 0 22px; }