/* =========================================================
   YourWebDesignAgency — pages.css
   Page-specific blocks: hero, demos, pricing, portfolio,
   guide articles, legal pages, thank-you and 404.
   ========================================================= */

/* =========================================================
   HERO (home)
   ========================================================= */
.hero { position: relative; overflow: hidden; }
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: var(--hero-yt) var(--pad-x) var(--hero-yb);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.hero-inner .badge { animation: riseIn 0.7s ease-out both; }
.hero h1 {
  font-size: clamp(38px, 5.8vw, 82px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  animation: riseIn 0.8s ease-out 0.1s both;
}
.hero h1 span { color: var(--accent); }
.hero-lead {
  max-width: 660px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  animation: riseIn 0.8s ease-out 0.2s both;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  animation: riseIn 0.8s ease-out 0.3s both;
}

.stat-panel {
  position: relative;
  margin-top: 30px;
  width: 100%;
  border-radius: var(--radius-panel-sm);
  border: 1px solid var(--panel-line);
  background: var(--glass-mid);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
  padding: 28px;
  animation: riseIn 0.9s ease-out 0.4s both;
}
.stat-panel::before {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(74, 124, 214, 0.4), rgba(48, 74, 150, 0.28) 58%, transparent 76%);
  filter: blur(24px);
  animation: lick 6s ease-in-out infinite;
  pointer-events: none;
}
.stat-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}
.stat { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.stat b { font-size: 17px; font-weight: 600; }
.stat span { font-size: 14px; color: var(--muted-3); }

/* =========================================================
   PAGE HERO (every page except home)
   ========================================================= */
.page-hero { position: relative; overflow: hidden; }
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--pad-x) 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 900px;
}
.page-hero .lead {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}
.page-hero .hero-actions { justify-content: flex-start; animation: none; margin-top: 6px; }

/* =========================================================
   PROBLEM SECTION (home)
   ========================================================= */
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gap); }
.problem {
  border-radius: var(--radius-card);
  border: 1px solid var(--line-soft);
  background: var(--tint-fill);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.problem .symptom {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--danger-bright);
}
.problem b { font-size: 17px; font-weight: 600; }
.problem span { font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.problem ul { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.problem li { font-size: 14px; line-height: 1.55; color: var(--muted-2); }
.problem li::marker { color: var(--accent); }

/* =========================================================
   BEFORE / AFTER DEMOS
   ========================================================= */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }
.demo {
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--panel-line);
  background: var(--fill-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--fill-1);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.url {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.demo > input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.switch label {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  user-select: none;
}
.switch label:hover { color: var(--text); border-color: var(--line-med-3); }

.stage { position: relative; height: 340px; overflow: hidden; }
.frame {
  position: absolute;
  inset: 0;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.demo .before:checked ~ .stage .frame-before,
.demo .after:checked ~ .stage .frame-after { opacity: 1; visibility: visible; }
.demo .before:checked ~ .switch label[for$="-before"],
.demo .after:checked ~ .switch label[for$="-after"] {
  background: var(--fill-solid);
  border-color: var(--pure);
  color: var(--on-light);
}
.demo > .before:focus-visible ~ .switch label[for$="-before"],
.demo > .after:focus-visible ~ .switch label[for$="-after"] {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.demo-caption { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.demo-caption b { font-size: 16px; font-weight: 600; }
.demo-caption span { font-size: 13px; color: var(--muted-3); line-height: 1.55; }

/* --- Retro mini site -------------------------------------------------------
   These colours are deliberately hardcoded and stay outside the token system:
   they imitate a 2003 website and must never follow the brand palette. */
.old {
  background: #fdfdf5;
  color: #111;
  font-family: 'Times New Roman', Times, serif;
  font-size: 13px;
  padding: 14px 16px;
  min-height: 100%;
}
.old-title {
  font-size: 22px;
  font-weight: 700;
  color: #000080;
  text-align: center;
  text-shadow: 1px 1px 0 #c9c9a8;
  margin-bottom: 4px;
}
.old-tagline { text-align: center; color: #7a0000; font-style: italic; font-size: 12px; margin-bottom: 10px; }
.old-nav {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  border-top: 2px ridge #b7b79b; border-bottom: 2px ridge #b7b79b; padding: 6px 0; margin-bottom: 12px;
}
.old-nav a { color: #0000ee; text-decoration: underline; font-size: 12px; }
.old-cols { display: flex; gap: 12px; }
.old-main { flex: 1; }
.old-side { width: 34%; border: 2px inset #cfcfae; background: #f3f3e2; padding: 8px; font-size: 11px; }
.old p { margin: 0 0 8px; line-height: 1.35; }
.old-img {
  height: 66px; margin: 0 0 8px; border: 2px inset #cfcfae; background: #e7e7d2;
  display: grid; place-items: center; color: #7a7a5e; font-size: 11px;
}
.old-hr { border: 0; border-top: 2px groove #c4c4a4; margin: 10px 0; }
.old-foot { text-align: center; font-size: 10px; color: #444; }
.old-badge {
  display: inline-block; margin-top: 6px; padding: 2px 6px; border: 1px solid #999;
  background: linear-gradient(#fff, #ddd); font-size: 9px; color: #333;
}
.blink { animation: blinker 1.4s steps(2, start) infinite; color: #cc0000; font-weight: 700; }
@keyframes blinker { to { visibility: hidden; } }

/* --- Retro variant B: the 2011 "downloaded template" restaurant site --------
   Dark, centred, gold serif, gradient navigation strip, everything as an image
   or a PDF. A different bad website from .old, not the same one recoloured. */
.old2 {
  background: #221a14;
  color: #e8dcc8;
  font-family: Georgia, 'Times New Roman', Times, serif;
  min-height: 100%;
  text-align: center;
  padding-bottom: 14px;
}
.old2-top {
  background: linear-gradient(#3b2d21, #221a14);
  border-bottom: 3px double #6b563c;
  padding: 14px 12px 10px;
}
.old2-title { font-size: 23px; letter-spacing: 0.06em; color: #d9b46a; text-shadow: 1px 1px 2px #000; }
.old2-sub { font-size: 11px; font-style: italic; color: #a08a68; margin-top: 4px; }
.old2-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  background: #2c2119; border-bottom: 1px solid #4a3a2a;
}
.old2-nav a {
  color: #c9a961; font-size: 11px; text-decoration: none;
  padding: 8px 11px; border-right: 1px solid #4a3a2a;
}
.old2-nav a:last-child { border-right: 0; }
.old2-photo {
  margin: 12px 14px; height: 92px; border: 4px ridge #6b563c;
  background: repeating-linear-gradient(45deg, #2e241b, #2e241b 8px, #332920 8px, #332920 16px);
  display: grid; place-items: center; color: #7d6a4e; font-size: 11px;
}
.old2-body { padding: 0 18px; font-size: 12px; line-height: 1.5; }
.old2-body p { margin: 0 0 8px; }
.old2-pdf { color: #8ab4e8; text-decoration: underline; font-size: 11px; }
.old2-foot {
  margin-top: 12px; padding-top: 8px; font-size: 10px;
  color: #6b5a44; border-top: 1px solid #3a2d21;
}

/* --- Retro variant C: the neglected 2009 page with browser default styling ---
   No template at all. Stark white, black serif, blue underlined links. */
.old3 {
  background: #fff; color: #000;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px; padding: 16px 18px; min-height: 100%;
}
.old3-title { font-size: 25px; font-weight: 700; line-height: 1.15; }
.old3-rule { border: 0; border-top: 1px solid #999; margin: 10px 0; }
.old3 p { margin: 0 0 10px; line-height: 1.35; }
.old3 a { color: #0000ee; text-decoration: underline; }
.old3 ul { margin: 0 0 10px; padding-left: 22px; }
.old3 li { margin-bottom: 3px; }
.old3-note {
  background: #ffffcc; border: 1px solid #e0e0a0;
  padding: 6px 8px; font-size: 12px; margin-bottom: 10px;
}
.old3-tbl { border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.old3-tbl th, .old3-tbl td { border: 1px solid #808080; padding: 3px 8px; text-align: left; }
.old3-foot { font-size: 11px; color: #555; }

/* --- Modern mini site --- */
.new { min-height: 100%; font-family: var(--font); }
.new-a { background: #0e1117; color: #f4f6fa; }
.new-b { background: #fbf6ee; color: #2a211a; }
.new-c { background: #f4f8f7; color: #16241f; }
.new-hero { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.new-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.new-logo { font-weight: 700; letter-spacing: -0.02em; font-size: 13px; }
.new-menu { display: flex; gap: 10px; color: rgba(255, 255, 255, 0.55); }
.new-h { font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.new-p { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.new-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pill { padding: 8px 14px; border-radius: 8px; font-size: 11px; font-weight: 600; }
.pill-solid-a { background: #4f8ef7; color: #06101f; }
.pill-line { border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); }
.new-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 20px 16px; }
.tile {
  border-radius: 10px; padding: 10px; font-size: 10.5px; line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column; gap: 4px;
}
.tile b { font-size: 11.5px; }
.tile span { color: rgba(255, 255, 255, 0.55); }
.new-strip {
  margin: 0 20px 18px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.new-strip b { color: #fff; font-size: 12px; }

/* --- Modern variant B: warm editorial (restaurant) -------------------------
   Light, serif, menu-led. Deliberately not the tile grid of .new-a — a
   restaurant's home page has a different job from a contractor's. */
.newb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid #e6dccd;
}
.newb-logo { font-family: Georgia, serif; font-size: 15px; font-weight: 700; }
.newb-menu {
  display: flex; gap: 12px; font-size: 9.5px; color: #8a7a68;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.newb-hero { padding: 18px 18px 14px; }
.newb-h { font-family: Georgia, serif; font-size: 21px; line-height: 1.2; max-width: 15em; }
.newb-p { font-size: 11.5px; line-height: 1.55; color: #6f6154; margin-top: 8px; max-width: 28em; }
.newb-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; padding: 0 18px 16px; }
.newb-list { display: flex; flex-direction: column; gap: 9px; }
.newb-item { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; }
.newb-dots { flex: 1; border-bottom: 1px dotted #c9bba6; transform: translateY(-3px); }
.newb-price { color: #a2582c; font-weight: 600; }
.newb-card {
  background: #fff; border: 1px solid #e6dccd; border-radius: 10px;
  padding: 12px; font-size: 11px; line-height: 1.65; color: #6f6154;
}
.newb-card b { display: block; color: #2a211a; font-size: 12px; margin-bottom: 4px; }
.newb-btn {
  display: inline-block; margin-top: 9px; background: #a2582c; color: #fff;
  font-size: 11px; font-weight: 600; padding: 8px 12px; border-radius: 6px;
}

/* --- Modern variant C: clean clinical (physiotherapy) ----------------------
   Light, sans, booking card beside the headline. A third structure again. */
.newc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #fff; border-bottom: 1px solid #dfe9e5;
}
.newc-logo { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.newc-call {
  font-size: 10px; font-weight: 600; color: #0b6349;
  border: 1px solid #bfe0d3; border-radius: 999px; padding: 5px 10px;
}
.newc-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; padding: 16px; }
.newc-h { font-size: 18px; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; }
.newc-p { font-size: 11px; line-height: 1.55; color: #52645d; margin-top: 8px; }
.newc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.newc-chip {
  font-size: 9.5px; background: #fff; border: 1px solid #dfe9e5;
  border-radius: 999px; padding: 4px 9px; color: #3c5049;
}
.newc-book {
  background: #fff; border: 1px solid #dfe9e5; border-radius: 12px; padding: 12px;
  box-shadow: 0 8px 20px -12px rgba(16, 60, 45, 0.35);
}
.newc-book b { display: block; font-size: 11.5px; margin-bottom: 6px; }
.newc-slot {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: #52645d; padding: 5px 0; border-bottom: 1px solid #eef4f1;
}
.newc-slot:last-of-type { border-bottom: 0; }
.newc-btn {
  display: block; text-align: center; margin-top: 9px; background: #0b6349;
  color: #fff; font-size: 11px; font-weight: 600; padding: 8px; border-radius: 8px;
}
.newc-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: #eaf2ef; border-top: 1px solid #dfe9e5;
  font-size: 10.5px; color: #3c5049;
}

/* =========================================================
   PRICING
   ========================================================= */
.pricing-panel {
  position: relative;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line-strong);
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-panel-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: center;
}
.pricing-panel::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(74, 124, 214, 0.42), rgba(44, 68, 140, 0.26) 58%, transparent 76%);
  filter: blur(28px);
  animation: lick 7s ease-in-out infinite;
  pointer-events: none;
}
.price-col { position: relative; display: flex; flex-direction: column; gap: 16px; }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.price-tag .big { font-size: clamp(46px, 7vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price-tag .mid { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-bright); }
.price-tag small { font-size: 16px; color: var(--muted-2); font-weight: 400; }
.price-note { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 440px; }
.price-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* Plain inline flow, not flex: the hint carries a sentence with a link to the
   refund clause, and flex would break it into separately spaced items. */
.pay-hint { font-size: 12.5px; color: var(--dim); line-height: 1.6; }

/* Cost-comparison bars — width is set inline per row, the only inline style
   in the project, because the value is data, not design. */
.compare { display: flex; flex-direction: column; gap: 18px; }
.compare-row { display: flex; flex-direction: column; gap: 8px; }
.compare-head { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.compare-head b { font-weight: 600; }
.compare-head span { color: var(--muted-2); font-family: var(--mono); font-size: 13px; }
.compare-bar { height: 12px; border-radius: var(--radius-pill); background: var(--tint-fill); border: 1px solid var(--line-soft); overflow: hidden; }
.compare-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.compare-fill.is-ours { background: linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow: 0 0 18px -2px var(--accent-glow); }
/* The bars draw themselves once the section scrolls in — the numbers are the
   point of that section, so they get the one animation on the page. */
.reveal.is-in .compare-fill { transform-origin: left; animation: barIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.reveal.is-in .compare-row:nth-child(2) .compare-fill { animation-delay: 0.1s; }
.reveal.is-in .compare-row:nth-child(3) .compare-fill { animation-delay: 0.2s; }
.reveal.is-in .compare-row:nth-child(4) .compare-fill { animation-delay: 0.3s; }
.compare-note { font-size: 13px; color: var(--dim); line-height: 1.6; }

/* =========================================================
   PORTFOLIO (examples page)
   ========================================================= */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.filter-btn {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  background: var(--fill-1);
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.filter-btn:hover { color: var(--text); border-color: var(--line-soft-2); }
.filter-btn[aria-pressed="true"] {
  background: var(--fill-solid);
  border-color: var(--pure);
  color: var(--on-light);
}

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.project {
  border-radius: var(--radius-card);
  border: 1px solid var(--line-soft);
  background: var(--tint-fill);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.project[hidden] { display: none; }
.project-shot {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line-soft);
  background: var(--fill-1);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.project-shot svg { width: 100%; height: 100%; display: block; }
.project-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.project-body h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.project-line { display: flex; flex-direction: column; gap: 4px; }
.project-line dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dim);
}
.project-line dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.project dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.filter-empty { font-size: 15px; color: var(--muted); padding: 24px 0; }

/* =========================================================
   GUIDE / ARTICLES
   ========================================================= */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.guide-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line-soft);
  background: var(--tint-fill);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.guide-card:hover { background: var(--tint-fill-2); }
.guide-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.guide-card h3 a { color: var(--text); }
.guide-card h3 a:hover { color: var(--accent-bright); }
.guide-card p { font-size: 14px; line-height: 1.65; color: var(--muted-2); }
.guide-meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}
.guide-more { font-size: 14px; font-weight: 600; margin-top: auto; }

.article { position: relative; z-index: 1; max-width: var(--wrap-text); margin: 0 auto; padding: 30px var(--pad-x) 40px; }
.article h1 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; line-height: 1.1; margin-bottom: 16px; }
.article .article-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
  padding-bottom: 26px; border-bottom: 1px solid var(--line-soft);
}
.article .standfirst { font-size: 18px; line-height: 1.7; color: var(--text-2); margin: 26px 0; }
.article h2 {
  position: relative;
  font-size: 24px;
  font-weight: 600;
  margin: 40px 0 14px;
  padding-left: 16px;
  scroll-margin-top: 90px;
}
.article h2::before {
  content: '';
  position: absolute;
  left: 0; top: 0.18em; bottom: 0.18em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 0 12px var(--accent-glow);
}
.article h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.article p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.article p + p { margin-top: 14px; }
.article ul, .article ol { margin: 14px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.article li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.article li::marker { color: var(--accent); font-weight: 600; }
.article li strong, .article p strong { color: var(--text-2); font-weight: 600; }
.article a { text-decoration: underline; text-underline-offset: 3px; }
.article .callout {
  margin: 26px 0;
  padding: 22px 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--tint-fill);
  border-left: 2px solid var(--accent);
}
.article .callout p { color: var(--text-2); }

/* Key points — the bullet summary that sits between the standfirst and the
   first heading, so the article can be read in twenty seconds or in nine
   minutes. Uses the .includes bullet pattern, not a third list style. */
.keypoints {
  margin: 26px 0 34px;
  padding: 22px 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--tint-line);
  background: var(--tint-fill);
}
.keypoints h2 {
  margin: 0 0 14px;
  padding-left: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  font-weight: 400;
}
.keypoints h2::before { display: none; }
.keypoints ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.keypoints li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.keypoints li::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px; flex: none; margin-top: 8px;
  background: var(--accent);
  transition: transform var(--t), box-shadow var(--t);
}
.keypoints li:hover::before { transform: scale(1.35) rotate(45deg); box-shadow: 0 0 10px var(--accent); }

.toc {
  margin: 0 0 34px;
  padding: 22px 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--tint-fill);
}
.toc h2 {
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim); font-weight: 400;
}
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.toc li { font-size: 15px; line-height: 1.5; color: var(--muted-2); }
.toc li::marker { color: var(--accent); }
.toc a { color: var(--muted); text-decoration: none; transition: color var(--t); }
.toc a:hover { color: var(--accent-bright); }

.article-cta {
  margin-top: 44px;
  padding: 30px;
  border-radius: var(--radius-panel-sm);
  border: 1px solid var(--panel-line);
  background: var(--glass-mid);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.article-cta h2 { margin: 0; font-size: 22px; }
.article-cta p { font-size: 15px; }
.article-cta .cta-actions { margin-top: 4px; }

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal { position: relative; z-index: 1; max-width: var(--wrap-text); margin: 0 auto; padding: 30px var(--pad-x) 40px; }
.legal h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 700; margin-bottom: 10px; }
.legal h2 { font-size: 20px; font-weight: 600; margin: 36px 0 10px; }
.legal h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.legal li::marker { color: var(--accent); }
.legal .updated { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.legal .box {
  margin-top: 20px; padding: 20px 24px; border-radius: var(--radius-md);
  border: 1px solid var(--line-soft); background: var(--tint-fill);
}
.legal .box p { color: var(--text-2); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 26px; }

/* =========================================================
   THANK YOU / CONFIRMATION / 404
   ========================================================= */
.thanks {
  position: relative; z-index: 1;
  max-width: var(--wrap-thanks); margin: 0 auto;
  padding: 90px var(--pad-x) 60px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.thanks h1 { font-size: clamp(34px, 6vw, 54px); font-weight: 700; }
.thanks p { font-size: 17px; line-height: 1.65; color: var(--muted); }
.checkmark {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-med-2); background: var(--fill-4);
  box-shadow: 0 0 40px var(--accent-glow); font-size: 30px;
}
.next-steps { text-align: left; width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.thanks .cta-actions { justify-content: center; margin-top: 6px; }

.error-code {
  font-family: var(--mono);
  font-size: clamp(64px, 14vw, 128px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-shadow: 0 0 60px var(--accent-glow);
}
.error-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .pricing-panel { padding: 28px; }
}

@media (max-width: 600px) {
  .hero-lead { font-size: 17px; }
  .hero-actions, .price-actions { width: 100%; }
  .stage { height: 300px; }
  .new-tiles { grid-template-columns: 1fr; }
  .newb-cols, .newc-main { grid-template-columns: 1fr; }
  .article h2 { font-size: 21px; }
  .article-cta { padding: 24px; }
  .thanks { padding-top: 60px; }
}