/* ==========================================================================
   7upTheme — main stylesheet
   Palette: deep indigo ground, pink → orange gradient, violet support.
   Written plain: no build step, no framework.
   ========================================================================== */

/* --------------------------------------------------------- 1. Tokens */

:root {
  /* brand */
  --pink:        #ec4899;
  --pink-deep:   #db2777;
  --orange:      #f97316;
  --violet:      #8b5cf6;
  --indigo:      #1e1b4b;
  --indigo-800:  #272263;
  --indigo-700:  #332c7d;

  --grad-warm:   linear-gradient(97deg, var(--pink) 0%, var(--orange) 100%);
  --grad-cool:   linear-gradient(135deg, var(--violet) 0%, var(--pink) 100%);

  /* neutrals, biased slightly violet so they sit with the brand */
  --ink:         #15122e;
  --body:        #4b4763;
  --muted:       #77738f;
  --line:        #e7e3f3;
  --line-soft:   #f0edf9;
  --surface:     #ffffff;
  --surface-alt: #f8f6fd;

  /* on dark */
  --on-dark:        #ffffff;
  --on-dark-body:   #c5c1e6;
  --on-dark-muted:  #948fc4;
  --on-dark-line:   rgba(255, 255, 255, .12);

  /* type */
  --font:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* space + shape */
  --shell:   1180px;
  --radius:  14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(21, 18, 46, .04), 0 12px 32px -20px rgba(21, 18, 46, .28);
  --shadow-lg: 0 2px 4px rgba(21, 18, 46, .05), 0 28px 60px -32px rgba(21, 18, 46, .42);
}

/* --------------------------------------------------------- 2. Base */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--pink-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Both list types, not just ul. An unreset <ol> keeps the browser's 40px
   indent, which is what pushed every breadcrumb out of line with the heading
   under it. Ordered lists inside article prose get their numbering back
   further down. */
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.muted { color: var(--muted); }

/* --------------------------------------------------------- 3. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  background: var(--grad-warm);
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(236, 72, 153, .75);
}
.btn-primary:hover { box-shadow: 0 12px 28px -10px rgba(236, 72, 153, .9); }

.btn-ghost {
  background: rgba(255, 255, 255, .07);
  border-color: var(--on-dark-line);
  color: var(--on-dark);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }

.btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--violet); color: var(--violet); }

.btn-outline-light {
  background: transparent;
  border-color: var(--on-dark-line);
  color: var(--on-dark);
}
.btn-outline-light:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }

.link-arrow {
  font-weight: 700;
  font-size: 15px;
  color: var(--pink-deep);
  white-space: nowrap;
}
.link-arrow::after { content: " \2192"; transition: margin-left .16s ease; display: inline-block; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { margin-left: 4px; }
.link-arrow.sm { font-size: 14px; }

/* --------------------------------------------------------- 4. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--indigo);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--on-dark-line);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--grad-warm);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}
.brand-word strong { font-weight: 800; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  color: var(--on-dark-body);
  font-size: 15px;
  font-weight: 600;
  transition: color .15s ease, background-color .15s ease;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--grad-warm);
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto;
  border-radius: 2px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------- 5. Hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: var(--on-dark-body);
  padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 128px);
}
.hero-glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(46% 46% at 12% 8%,  rgba(236, 72, 153, .30), transparent 70%),
    radial-gradient(44% 44% at 88% 78%, rgba(249, 115, 22, .24), transparent 70%),
    radial-gradient(40% 40% at 62% 4%,  rgba(139, 92, 246, .26), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 0 0 16px;
}
.eyebrow-light {
  display: inline-block;
  color: #f9a8d4;
  background: rgba(236, 72, 153, .14);
  border: 1px solid rgba(236, 72, 153, .3);
  border-radius: 100px;
  padding: 7px 16px;
}

.hero-title {
  color: #fff;
  font-size: clamp(38px, 6.4vw, 72px);
  letter-spacing: -0.035em;
  margin: 0 0 22px;
}
.grad {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  max-width: 62ch;
  margin: 0 auto 34px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--on-dark-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 58px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  background: var(--on-dark-line);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-stats > div {
  background: rgba(30, 27, 75, .72);
  padding: 22px 14px;
  backdrop-filter: blur(6px);
}
.hero-stats dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 6px;
}
.hero-stats dd {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 6. Sections */

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section-alt { background: var(--surface-alt); }

.section-dark {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: var(--on-dark-body);
}
.section-dark .section-title { color: #fff; }
.section-dark .section-lede { color: var(--on-dark-body); }
.glow-corner {
  position: absolute;
  inset: auto -15% -40% -15%;
  height: 90%;
  background:
    radial-gradient(40% 60% at 20% 100%, rgba(139, 92, 246, .28), transparent 70%),
    radial-gradient(40% 60% at 82% 90%, rgba(249, 115, 22, .20), transparent 70%);
  pointer-events: none;
}
.section-dark .shell { position: relative; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 44px;
}
.section-head.center {
  justify-content: center;
  text-align: center;
  margin-bottom: 56px;
}
.section-head.center > div { max-width: 760px; }
.section-head.center .section-lede { margin-inline: auto; }

.section-title {
  font-size: clamp(27px, 3.6vw, 42px);
  margin: 0 0 12px;
}
.section-lede {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
}

/* Oversized section title — used where the section name itself is the headline
   (e.g. Website Maintenance on the homepage). */
.section-title-xl {
  font-size: clamp(36px, 5.4vw, 60px);
  letter-spacing: -0.038em;
  margin-bottom: 14px;
}

/* Deck: the one-line summary that sits under an oversized title. */
.section-deck {
  max-width: 52ch;
  text-wrap: balance;
  margin: 0 auto 14px;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.section-dark .section-deck { color: #fff; }
.section-dark .section-lede { color: var(--on-dark-muted); }

/* --------------------------------------------------------- 7. Grid + cards */

.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 26px;
}
.card-body h3 { font-size: 21px; margin: 0 0 9px; }
.card-body h3 a { color: inherit; }
.card-body h3 a:hover { color: var(--pink-deep); text-decoration: none; }
.card-body p { font-size: 15.5px; color: var(--body); }
/* Same specificity trap as .post .meta: the rule above beats a bare .meta, so
   card metadata needs two classes to keep its own size. */
.card-body .meta { font-size: 10px; letter-spacing: .05em; color: var(--muted); }

.meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 0;
  /* pins the footer to the bottom so cards of different text lengths line up */
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--surface-alt);
  color: var(--muted);
}
.tag-free { background: rgba(236, 72, 153, .1); color: var(--pink-deep); }

/* placeholder preview frames ------------------------------------------- */

.thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  padding: 0;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.thumb-tall { aspect-ratio: 4 / 3; }
.thumb-bar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 26px;
  padding-inline: 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.thumb-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.thumb-body { display: block; padding: 20px; }
.thumb-line, .thumb-block {
  display: block;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .17), rgba(236, 72, 153, .13));
  margin-bottom: 9px;
}
.thumb-line { height: 9px; }
.w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; }
.w-75 { width: 75%; } .w-90 { width: 90%; }
.thumb-block { height: 46px; }
.thumb-block.tall { height: 64px; }
.thumb-row { display: flex; gap: 9px; }
.thumb-row span {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  background: rgba(249, 115, 22, .14);
}
.thumb-note {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, .88);
  border: 1px dashed var(--line);
  border-radius: 5px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* per-card accent on the top edge */
.card-template { position: relative; }
.card-template::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
}
.accent-pink::before   { background: var(--grad-warm); }
.accent-violet::before { background: var(--grad-cool); }
.accent-orange::before { background: linear-gradient(90deg, var(--orange), #fbbf24); }

/* --------------------------------------------------------- 8. Plans */

.plans { align-items: start; }

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px 32px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
}
.plan h3 { color: #fff; font-size: 21px; margin: 0 0 6px; }
.plan-blurb { color: var(--on-dark-muted); font-size: 14.5px; margin: 0 0 20px; }

.plan-featured {
  position: relative;
  background: rgba(255, 255, 255, .085);
  border-color: rgba(236, 72, 153, .45);
  box-shadow: 0 24px 60px -34px rgba(236, 72, 153, .8);
}
.plan-flag {
  position: absolute;
  top: -13px;
  left: 28px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-warm);
  padding: 5px 12px;
  border-radius: 100px;
}

.plan-price {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--on-dark-line);
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price .cur { font-size: 24px; vertical-align: super; margin-right: 2px; }
.plan-price .per { font-size: 15px; margin-left: 5px; font-weight: 600; color: var(--on-dark-muted); letter-spacing: 0; }

.plan-list { margin: 0 0 26px; flex: 1; }
.plan-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 15px;
  color: var(--on-dark-body);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  transform: rotate(-45deg);
}

.plans-note {
  margin: 34px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--on-dark-muted);
}
.plans-note a { color: #f9a8d4; }

/* --------------------------------------------------------- 9. Steps */

/* Older four-across step list. Superseded by .flow below, kept because the
   markup may still exist somewhere. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: step;
  border-top: 2px solid var(--line);
}
.step {
  position: relative;
  padding: 30px 26px 8px 0;
}
.step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--grad-warm);
}
.step-num {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--pink-deep);
  margin-bottom: 12px;
}
.step h3 { font-size: 18px; margin: 0 0 8px; }
.step p { font-size: 15px; color: var(--muted); }

/* --------------------------------------------------------- 10. Posts */

.post {
  padding: 26px 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post h3 { font-size: 19px; margin: 0 0 10px; }
.post h3 a { color: inherit; }
.post h3 a:hover { color: var(--pink-deep); text-decoration: none; }
/* Two class selectors, because ".post p" below is more specific than ".meta"
   and was quietly overriding the size set there — the date was rendering at
   the 15px body size rather than the 10.5px the .meta rule asked for. */
.post .meta { display: block; font-size: 10px; letter-spacing: .05em; }
/* The tag takes its own line, so the date and reading time always sit together
   on the next one instead of "READ" wrapping off on its own. */
.post .meta .tag { display: block; width: max-content; max-width: 100%; margin-bottom: 9px; }
.post .meta > br { display: none; }
.post p { font-size: 15px; }

/* A card with a picture: the image goes edge to edge at the top and the
   padding moves onto the text underneath. A post with no image keeps the
   plain card above, so the two can sit side by side without looking broken. */
.post-has-img {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.post-has-img:hover .post-thumb img { transform: scale(1.035); }
.post-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-body p:last-child { margin-bottom: 0; }

/* The featured image at the top of an article.
   Shown as a band rather than the full 16:9 frame: at the width of the prose
   column a full 16:9 image is nearly 500px tall and pushes the first paragraph
   off the screen. The whole 16:9 file is still what gets shared and what the
   structured data points at. */
.article-figure {
  margin: 0 0 34px;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.article-figure picture, .article-figure img { display: block; width: 100%; height: 100%; }
.article-figure img { object-fit: cover; object-position: center; }

@media (max-width: 760px) {
  .article-figure { aspect-ratio: 16 / 9; margin-bottom: 26px; }
}

/* --------------------------------------------------------- 11. CTA */

.cta {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: clamp(52px, 6vw, 76px) 0;
}

/* Image-backed CTA. The picture sits underneath, a scrim sits over it, and the
   panel text flips between white and ink depending on how bright the artwork
   is — see $cta_images in includes/media.php. */
.cta-img {
  position: relative;
  overflow: hidden;
  border-top: 0;
  padding: clamp(62px, 7vw, 96px) 0;
  isolation: isolate;
}
.cta-media {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cta-scrim { position: absolute; inset: 0; z-index: 1; }
.cta-img .cta-inner { position: relative; z-index: 2; }

.cta-tone-dark .cta-scrim {
  background:
    linear-gradient(94deg, rgba(17, 14, 48, .93) 0%, rgba(17, 14, 48, .86) 40%, rgba(17, 14, 48, .52) 68%, rgba(17, 14, 48, .26) 100%),
    radial-gradient(80% 130% at 4% 100%, rgba(236, 72, 153, .26), transparent 60%);
}
.cta-tone-dark h2 { color: #fff; }
.cta-tone-dark p  { color: rgba(255, 255, 255, .84); }
.cta-tone-dark .btn-outline {
  background: rgba(255, 255, 255, .07);
  border-color: var(--on-dark-line);
  color: var(--on-dark);
}
.cta-tone-dark .btn-outline:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.cta-tone-light .cta-scrim {
  background:
    linear-gradient(94deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .90) 40%, rgba(255, 255, 255, .60) 68%, rgba(255, 255, 255, .34) 100%),
    radial-gradient(70% 120% at 2% 100%, rgba(236, 72, 153, .10), transparent 62%);
}
.cta-tone-light h2 { color: var(--ink); }
.cta-tone-light p  { color: var(--body); }
.cta-tone-light .btn-outline {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(30, 27, 75, .18);
}
.cta-tone-light .btn-outline:hover { background: #fff; }

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; max-width: 28ch; }
.cta p { color: var(--muted); margin: 0; }
/* Keep the words and the buttons off the artwork. On an image CTA the whole
   panel stacks on the left, inside the strong part of the scrim, and the
   picture is left clear on the right. */
.cta-img .cta-inner { display: block; }
.cta-img .cta-inner > div:first-child { max-width: 54ch; }
.cta-img p { max-width: 52ch; }
.cta-img .cta-actions { margin-top: 26px; }
.cta-actions { display: flex; gap: 13px; flex-wrap: wrap; }

/* --------------------------------------------------------- 12. Footer */

.site-footer {
  background: var(--indigo);
  color: var(--on-dark-body);
  padding: 64px 0 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer-brand p {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--on-dark-muted);
}
/* Tighter between the paragraphs than after the logo. */
.footer-brand p + p { margin-top: 12px; }
.footer-nav h2 {
  color: #fff;
  font-size: 12px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { color: var(--on-dark-body); font-size: 15px; }
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 14px;
  color: var(--on-dark-muted);
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a { color: var(--on-dark-muted); }
.footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------- 13. Reveal */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------- 14. Responsive */

@media (max-width: 1000px) {
  .grid-3   { grid-template-columns: repeat(2, 1fr); }
  .steps    { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-cta-mobile { display: block; margin-top: 10px; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--indigo-800);
    border-top: 1px solid var(--on-dark-line);
    border-bottom: 1px solid var(--on-dark-line);
    padding: 14px 24px 22px;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 12px 10px; font-size: 16px; }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .08); }

  .header-inner { position: relative; }
  .site-header { position: sticky; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps  { grid-template-columns: 1fr; border-top: 0; }
  .step   { padding: 24px 0 4px; border-top: 2px solid var(--line); }
  .footer-top { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 100%; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------- 15. Motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- 16. Print */

@media print {
  .site-header, .site-footer, .cta, .hero-glow, .glow-corner { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   17. Inner pages
   Everything below this line is used by pages other than the homepage.
   ========================================================================== */

/* --------------------------------------------------------- page hero */

.page-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding: clamp(34px, 5vw, 58px) 0 clamp(38px, 5vw, 62px);
}
.page-hero-dark {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  border-bottom: 0;
  color: var(--on-dark-body);
}
.page-hero-in { position: relative; z-index: 2; }

/* Photographic breadcrumb banner. The scrim is always deep indigo, so light
   photos and dark photos both end up with legible white type. Swap the picture
   for a page in $page banner values — see includes/media.php. */
.page-hero-img {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(46px, 6vw, 88px) 0 clamp(50px, 6vw, 92px);
}
.page-hero-media {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(97deg, rgba(30, 27, 75, .95) 0%, rgba(30, 27, 75, .90) 34%, rgba(30, 27, 75, .66) 55%, rgba(30, 27, 75, .32) 78%, rgba(30, 27, 75, .13) 100%),
    radial-gradient(58% 120% at 4% 106%, rgba(236, 72, 153, .26), transparent 60%),
    radial-gradient(52% 110% at 98% -10%, rgba(249, 115, 22, .16), transparent 58%);
}
/* The photo sits slightly right of centre so its subject lands in the clear
   part of the scrim rather than behind the heading. */
.page-hero-media img { object-position: 68% center; }
/* Some photographs put their subject on the left, right under the heading.
   Mirroring moves the people to the right and leaves the words clear space.
   object-position moves with them, so the same part of the picture is kept.
   Listed in $banner_flip in includes/media.php. */
.page-hero-flip .page-hero-media img { transform: scaleX(-1); object-position: 32% center; }

/* Belt and braces: a whisper of shadow keeps type crisp over a busy photo. */
.page-hero-img .page-title,
.page-hero-img .page-lede,
.page-hero-img .crumbs { text-shadow: 0 1px 14px rgba(15, 12, 40, .45); }
/* A soft edge where the banner meets the page below. */
.page-hero-img::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: var(--grad-warm);
}

.page-title {
  font-family: inherit;
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--ink);
  text-wrap: balance;
}
.page-hero-dark .page-title { color: #fff; }

.page-lede {
  max-width: 64ch;
  margin: 0;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--muted);
}
.page-hero-dark .page-lede { color: var(--on-dark-body); }

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.page-hero-dark .page-meta { border-top-color: var(--on-dark-line); }

.stat-inline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-inline b {
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}
.page-hero-dark .stat-inline { color: var(--on-dark-muted); }
.page-hero-dark .stat-inline b { color: #fff; }

/* --------------------------------------------------------- breadcrumbs */

.crumbs { margin-bottom: 18px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 13.5px;
}
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--line); }
.page-hero-dark .crumbs li { color: var(--on-dark-muted); }
.page-hero-dark .crumbs li + li::before { color: rgba(255,255,255,.25); }
.crumbs a { color: var(--muted); }
.page-hero-dark .crumbs a { color: var(--on-dark-muted); }
.crumbs a:hover { color: var(--pink-deep); }
.page-hero-dark .crumbs a:hover { color: #f9a8d4; }

/* --------------------------------------------------------- section spacing */

.section-tight { padding: clamp(40px, 5vw, 64px) 0; }

/* --------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 32px;
}
.filter {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.filter:hover { border-color: var(--violet); color: var(--violet); text-decoration: none; }
.filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.section-alt .filter { background: var(--surface); }

/* --------------------------------------------------------- grids */

.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------- detail layout */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
}
.detail-main { min-width: 0; }
.detail-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.block-title {
  font-size: 22px;
  margin: 38px 0 16px;
}
/* Whatever comes first in the column should not push itself down. It used
   to always be the heading; on a showcase page it is now the screenshot. */
.detail-main > :first-child { margin-top: 0; }

/* ------------------------------------------------- showcase business profile */

/* Plain headed sections, used instead of the numbered .story when a project
   carries a 'profile' array. Nothing numbered, because a profile of somebody
   else's business is not a sequence of events. */
.profile-part + .profile-part { margin-top: 34px; }
.profile-part > p { margin: 0 0 14px; }
.profile-part > p:last-child { margin-bottom: 0; }

/* The linked service and destination lists. Two across on a wide screen,
   one on a narrow one. The link is the name; the line under it is the
   description, so the clickable text stays short and meaningful. */
.profile-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 32px;
}
.profile-list li {
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 15.5px;
  line-height: 1.5;
}
.profile-list a,
.profile-list b { font-weight: 600; }
.profile-list b { color: var(--ink); }
.profile-list span { display: block; color: var(--muted); font-size: 14.5px; }

@media (max-width: 700px) { .profile-list { grid-template-columns: 1fr; } }

.profile-note {
  margin: 18px 0 0;
  padding: 16px 20px;
  background: var(--surface-alt);
  border-left: 3px solid var(--pink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 16px;
}

/* --------------------------------------------------------- large previews */

.preview-large,
.preview-wide,
.preview-story {
  position: relative;
  display: block;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.preview-large { aspect-ratio: 16 / 11; }
/* .preview-wide is not used by any page now that the showcase screenshot
   moved into the story column. Kept because it costs nothing and is the
   right shape for a full width banner if one is wanted again. */
.preview-wide  { aspect-ratio: 16 / 7; }

/* The showcase screenshot, sitting at the head of the story column rather
   than in a full width band of its own. It is narrower than .preview-wide,
   so it takes a taller ratio to stay a sensible shape. */
.preview-story { aspect-ratio: 16 / 9; margin-bottom: 34px; }
.preview-large.accent-pink   { border-top: 3px solid transparent; border-image: var(--grad-warm) 1; }
.preview-large .thumb-bar em,
.preview-wide  .thumb-bar em,
.preview-story .thumb-bar em {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
}
.preview-large .thumb-body,
.preview-wide  .thumb-body,
.preview-story .thumb-body { padding: 26px 30px; }
.preview-large .thumb-note,
.preview-wide  .thumb-note,
.preview-story .thumb-note { bottom: 18px; }

/* A real screenshot in place of the drawn frame. The picture fills the frame
   and is cropped, so one image serves both aspect ratios. */
.thumb-shot,
.preview-shot { background: var(--surface); }
.thumb-shot .shot-pic,
.preview-shot .shot-pic { display: block; height: 100%; }
.thumb-shot img,
.preview-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* --------------------------------------------------------- download card */

.download-card {
  padding: 26px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.dl-price {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1;
}
.dl-sub { margin: 8px 0 20px; font-size: 14px; color: var(--muted); }
.download-card .btn { margin-bottom: 10px; }
.download-card .btn:last-of-type { margin-bottom: 0; }

.dl-facts { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.dl-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 14px;
}
.dl-facts dt { color: var(--muted); }
.dl-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

.dl-fine { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------- side card */

.side-card {
  padding: 22px 24px 24px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.side-card h3 { font-size: 16px; margin: 0 0 10px; }
.side-card h3 + h3 { margin-top: 18px; }
.side-card p { font-size: 14.5px; }
.side-card .small { font-size: 13px; }

.link-list li { margin-bottom: 9px; font-size: 14.5px; }
.link-list li:last-child { margin-bottom: 0; }

.mini-steps { counter-reset: mini; margin: 0; padding: 0; list-style: none; }
.mini-steps li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 14.5px;
}
.mini-steps li:last-child { margin-bottom: 0; }
.mini-steps li::before {
  counter-increment: mini;
  content: counter(mini);
  position: absolute;
  left: 0; top: 1px;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-warm);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
}

/* --------------------------------------------------------- lists */

.tick-list, .cross-list, .dot-list { margin: 0; }
.tick-list li, .cross-list li, .dot-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 15.5px;
}
.tick-list li:last-child, .cross-list li:last-child, .dot-list li:last-child { margin-bottom: 0; }

.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 12px; height: 6px;
  border-left: 2px solid var(--pink-deep);
  border-bottom: 2px solid var(--pink-deep);
  transform: rotate(-45deg);
}
.cross-list li::before {
  content: "\00d7";
  position: absolute;
  left: 3px; top: -1px;
  font-size: 18px;
  color: var(--muted);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violet);
}

.numbered { margin: 0; padding-left: 22px; list-style: decimal; }
.numbered li { margin-bottom: 10px; padding-left: 4px; }

/* --------------------------------------------------------- note strips */

.note-strip {
  margin: 30px 0 0;
  padding: 18px 22px;
  background: var(--surface-alt);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
}
.section-alt .note-strip { background: var(--surface); }
.note-strip p { margin: 0; }
.note-warn { border-left-color: var(--orange); }

/* --------------------------------------------------------- prose */

.prose-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.prose-narrow { max-width: 760px; }

.toc { position: sticky; top: 96px; }
.toc-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc li { margin: 0; }
.toc li a, .toc li {
  display: block;
  padding: 7px 0 7px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  color: var(--muted);
}
.toc li a:hover { color: var(--pink-deep); border-left-color: var(--pink); text-decoration: none; }

/* Scroll-spy: the section currently being read. Colour alone would fail for
   anyone who cannot distinguish it, so the rail and the weight change too. */
.toc li a.is-current {
  color: var(--ink);
  font-weight: 700;
  border-left-color: var(--pink);
  background: linear-gradient(90deg, rgba(236, 72, 153, .07), transparent 85%);
}
.toc li a { transition: color .15s ease, border-color .15s ease, background-color .15s ease; }

/* Stop a heading landing under the sticky header when jumped to. */
.prose h2[id] { scroll-margin-top: 96px; }

.prose, .prose-narrow { font-size: 16.5px; }
.prose h2, .prose-narrow h2 {
  font-size: 25px;
  margin: 40px 0 14px;
  scroll-margin-top: 96px;
}
.prose > h2:first-child, .prose-narrow > h2:first-child { margin-top: 0; }
.prose h3, .prose-narrow h3 { font-size: 18px; margin: 28px 0 10px; }
.prose p, .prose-narrow p { margin: 0 0 16px; max-width: 68ch; }
.prose ul, .prose-narrow ul { margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.prose ol, .prose-narrow ol { margin: 0 0 18px; padding-left: 22px; list-style: decimal; }
.prose ul li, .prose-narrow ul li,
.prose ol li, .prose-narrow ol li { margin-bottom: 8px; }
.prose i, .prose-narrow i { color: var(--muted); }

code {
  font-family: var(--mono);
  font-size: .88em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--pink-deep);
}
.section-alt code { background: var(--surface); }
pre.code {
  margin: 0 0 20px;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--indigo);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: #cdc7f0;
}
pre.code code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* --------------------------------------------------------- Q&A + FAQ */

.qa { margin: 0; }
.qa dt {
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
  margin-top: 22px;
}
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 6px 0 0; color: var(--body); max-width: 68ch; }

details.faq {
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 34px 16px 0;
  position: relative;
  font-weight: 700;
  color: var(--ink);
  font-size: 16.5px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 24px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
details.faq[open] summary::after { transform: rotate(-135deg); }
details.faq summary:hover { color: var(--pink-deep); }
.faq-body { padding: 0 34px 18px 0; color: var(--body); }
.faq-body p { margin: 0; max-width: 68ch; }

/* --------------------------------------------------------- story */

.story { list-style: none; margin: 0; padding: 0; counter-reset: story; }
.story-step {
  position: relative;
  padding: 0 0 30px 56px;
  border-left: 2px solid var(--line);
  margin-left: 15px;
}
.story-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.story-num {
  position: absolute;
  left: -16px; top: -2px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-warm);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
}
.story-step h3 { font-size: 19px; margin: 4px 0 8px; }
.story-step p { color: var(--body); max-width: 66ch; }

.result {
  margin: 28px 0 0;
  padding: 22px 26px;
  background: var(--surface-alt);
  border-left: 3px solid var(--pink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.result p { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------- prev / next */

.prev-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pn { display: block; max-width: 40%; }
.pn:hover { text-decoration: none; }
.pn-next { text-align: right; }
.pn-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pn-name { font-weight: 700; color: var(--ink); font-size: 15.5px; }
.pn:hover .pn-name { color: var(--pink-deep); }

/* --------------------------------------------------------- maintenance page */



@media (max-width: 700px) {
}

.covered-block {
  padding: 26px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.covered-block h3 {
  font-size: 13px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 0 0 16px;
}

.exclusions { margin: 0; }
.ex-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 6px 32px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ex-row:first-child { border-top: 0; }
.ex-row dt { font-weight: 700; color: var(--ink); font-size: 16px; }
.ex-row dd { margin: 0; color: var(--muted); font-size: 15px; }

.plan-for {
  margin: -10px 0 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.plan-for b { color: var(--ink); }

/* light-background variant of the plan cards */
.plans-light .plan {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.plans-light .plan h3 { color: var(--ink); }
.plans-light .plan-blurb { color: var(--muted); }
.plans-light .plan-price { color: var(--ink); border-bottom-color: var(--line); }
.plans-light .plan-price .per { color: var(--muted); }
.plans-light .plan-list li { color: var(--body); }
.plans-light .plan-featured {
  background: var(--surface);
  border-color: var(--pink);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------- comparison table */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

table.compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 15px;
}
table.compare th, table.compare td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
table.compare thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--line);
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}
table.compare thead th:not(:first-child),
table.compare tbody td { text-align: center; }
.th-price {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}
table.compare tbody th {
  font-weight: 500;
  color: var(--body);
}
tr.group-row th {
  background: var(--surface-alt);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 10px 18px;
}
.col-featured { background: rgba(236, 72, 153, .045); }
.yes { color: var(--pink-deep); font-size: 17px; font-weight: 700; }
.no  { color: var(--line); font-size: 17px; }
.table-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------- forms */

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}
.form-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }

.form { max-width: 720px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
/* An odd field left on its own at the end of a row spans both columns, so it
   never reads as half a pair with the other half missing. */
.field-row > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 7px;
}
.req { color: var(--pink-deep); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field select,
.field textarea,
.search-form input[type="search"] {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus,
.search-form input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.field-help { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); }
.field-error {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #b91c1c;
}

.form-actions { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-fine { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }

.alert {
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 26px;
  font-size: 15px;
}
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert p { margin: 0; }

/* The status line form.js writes into. Empty until something happens. */
.form-result { margin: 0 0 18px; font-size: 15px; border-radius: var(--radius-sm); }
.form-result:empty { display: none; }
.form-result.is-pending,
.form-result.is-ok,
.form-result.is-error,
.form-result .is-error {
  display: block;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.form-result.is-pending { background: var(--surface-alt); color: var(--muted);  border-color: var(--line); }
.form-result.is-ok      { background: #ecfdf5;            color: #065f46;       border-color: #a7f3d0; }
.form-result.is-error,
.form-result .is-error  { background: #fef2f2;            color: #991b1b;       border-color: #fecaca; }

/* honeypot — off-screen rather than display:none, because some bots skip
   properly hidden inputs but happily fill in ones that are merely moved away */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------- search */

.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.search-form input[type="search"] { flex: 1 1 260px; }

.header-search {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  color: var(--on-dark-body);
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.header-search:hover { background: rgba(255,255,255,.09); color: #fff; }

.result-list { margin: 0 0 34px; }
.result-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.result-list li:first-child { border-top: 0; }
.result-list a { font-weight: 700; font-size: 17px; }
.result-list p { margin: 4px 0 0; font-size: 14.5px; }

.search-hints { margin-top: 8px; }

/* --------------------------------------------------------- empty state */

.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface-alt);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty-state p { font-size: 17px; margin-bottom: 18px; }

/* --------------------------------------------------------- confirm + 404 */

.confirm { padding: clamp(48px, 8vw, 92px) 0; }
.confirm-in { max-width: 660px; text-align: center; }
.confirm-in .page-lede { margin-inline: auto; }
.confirm-mark {
  width: 62px; height: 62px;
  margin: 0 auto 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-warm);
  color: #fff;
  font-size: 30px;
}
.confirm-card { margin: 34px 0 26px; text-align: left; }
.confirm-card h2 { font-size: 16px; margin: 0 0 12px; }
.confirm-fine { font-size: 14px; color: var(--muted); margin-bottom: 24px; }

.err-code {
  font-family: var(--mono);
  font-size: clamp(58px, 12vw, 104px);
  line-height: 1;
  margin: 0 0 10px;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err-grid { margin: 40px 0 32px; text-align: left; }
.err-card {
  display: block;
  padding: 22px 24px 24px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.err-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.err-card h2 { font-size: 17px; margin: 0 0 7px; }
.err-card p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------- licence split */

.split-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}
.allow, .deny {
  padding: 24px 26px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.allow { background: rgba(236, 72, 153, .05); border-color: rgba(236, 72, 153, .25); }
.deny  { background: var(--surface-alt); }
.allow h2, .deny h2 { font-size: 18px; margin: 0 0 16px; }

/* --------------------------------------------------------- fact grid */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.fact-grid > div { background: var(--surface); padding: 24px 22px; }
.fact-grid dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fact-grid dd {
  margin: 0;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- utility */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .detail-grid, .form-grid, .prose-grid { grid-template-columns: 1fr; gap: 34px; }
  .detail-side, .form-side, .toc { position: static; }
  .detail-side, .form-side { flex-direction: row; flex-wrap: wrap; }
  .detail-side > *, .form-side > * { flex: 1 1 280px; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 4px 8px; border-left: 0; }
  .toc li a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; }
  .toc li a.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
  .grid-2 { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .ex-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .split-cards { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }
  .prev-next { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .pn { max-width: none; }
  .pn-next { text-align: center; }
  .detail-side, .form-side { flex-direction: column; }
  .story-step { padding-left: 40px; }
}

/* --------------------------------------------------------- 18. Service list
   The eight maintenance services. A numbered two-column list rather than
   cards, because each one carries a paragraph and four bullets — too much
   content for a card, and the numbering is real (it is a fixed list of eight).
   ------------------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.service {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 4px;
  padding: 28px 30px 30px;
  background: var(--surface);
}

.service-num {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: 4px;
}

.service-main { min-width: 0; }
.service h3 {
  font-size: 20px;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.service-body {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 18px;
}
.service .tick-list li {
  font-size: 14.5px;
  margin-bottom: 9px;
}

.service-tiers {
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}
.service-tiers-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.service-tiers b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .service { grid-template-columns: 1fr; padding: 24px 20px 26px; }
  .service-num { margin-bottom: 8px; }
}

/* ------------------------------------------- banner + CTA imagery on mobile */
/* The desktop scrims fade left-to-right because the type sits on the left. On
   a narrow screen the text runs the full width, so the fade goes top-to-bottom
   instead and stays opaque under every line. */
@media (max-width: 900px) {
  .page-hero-scrim {
    background:
      linear-gradient(180deg, rgba(30, 27, 75, .78) 0%, rgba(30, 27, 75, .88) 55%, rgba(30, 27, 75, .94) 100%),
      radial-gradient(80% 60% at 0% 100%, rgba(236, 72, 153, .28), transparent 66%);
  }
  .cta-tone-dark .cta-scrim {
    background:
      linear-gradient(180deg, rgba(17, 14, 48, .80) 0%, rgba(17, 14, 48, .92) 100%),
      radial-gradient(80% 60% at 0% 100%, rgba(236, 72, 153, .24), transparent 66%);
  }
  .cta-tone-light .cta-scrim {
    background: linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .94) 100%);
  }
}

/* Someone who has asked for less motion also tends to want less noise. Keep the
   picture, lift the scrim so the page reads as flat colour. */
@media (prefers-reduced-motion: reduce) {
  .page-hero-media img, .cta-media img { filter: saturate(.9); }
}

/* ============================================================ about page */

/* --- the two specialities, as image cards --- */
.spec-grid { gap: 30px; }
.spec {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec-media { position: relative; aspect-ratio: 3 / 2; background: var(--surface-alt); }
.spec-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A brand wash over the photo so two different pictures still feel like a pair. */
.spec-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30, 27, 75, .34), rgba(236, 72, 153, .16) 62%, transparent);
}
.spec-num {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #fff;
  padding: 8px 15px;
  border-radius: 100px;
  background: var(--grad-warm);
  box-shadow: 0 8px 20px -8px rgba(236, 72, 153, .8);
}
.spec-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.spec-body h2 { font-size: clamp(21px, 2.3vw, 26px); margin: 0 0 10px; }
.spec-lede { color: var(--muted); margin: 0 0 18px; }
.spec-foot { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); }

/* --- the statement band --- */
.statement {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(58px, 7vw, 96px) 0;
  color: var(--on-dark-body);
}
.statement-media { position: absolute; inset: 0; z-index: 0; display: block; }
.statement-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.statement-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(30, 27, 75, .96) 0%, rgba(30, 27, 75, .93) 55%, rgba(30, 27, 75, .80) 80%, rgba(30, 27, 75, .44) 100%),
    radial-gradient(60% 120% at 4% 106%, rgba(236, 72, 153, .28), transparent 62%),
    radial-gradient(50% 110% at 96% -10%, rgba(249, 115, 22, .18), transparent 58%);
}
.statement-in { position: relative; z-index: 2; max-width: 780px; }
.statement blockquote { margin: 0 0 34px; }
.statement blockquote p {
  font-size: clamp(21px, 2.9vw, 31px);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.statement-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  padding-top: 28px;
  border-top: 1px solid var(--on-dark-line);
}
.statement-split h3 { font-size: 17px; color: #fff; margin: 0 0 7px; }
.statement-split p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .8); }

/* --- the three principles, three across --- */
/* In a narrow column the number reads better stacked above the title than
   sitting beside it, so this card is a simple stack with a brand hairline
   across the top to tie the three together. */
.principles { gap: 24px; }
.principle {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.principle::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-warm);
}
.principle:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.principle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--pink-deep);
  background: rgba(236, 72, 153, .09);
  border: 1px solid rgba(236, 72, 153, .22);
  border-radius: 12px;
}
.principle h3 { font-size: 18px; margin: 0 0 14px; }
.principle .tick-list { margin: 0; }
.principle .tick-list li { font-size: 14.5px; }

/* Two across: the odd one out spans the full width rather than sitting
   half-width next to nothing. */
@media (max-width: 1000px) {
  .principles .principle:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .statement-split { grid-template-columns: 1fr; gap: 20px; }
  .spec-body { padding: 22px 22px 26px; }
  .principle { padding: 22px 22px 24px; gap: 14px; }
}


/* ====================================================== process flow

   Four steps on a rail. When the list scrolls into view the gradient draws
   left to right and each node pops in behind it, so the animation reads as
   the process running rather than as four things fading in at once.

   Both .flow-anim and .is-live are added by JavaScript. Without scripting the
   section renders in its finished state, fully visible.
   ------------------------------------------------------------------------ */

.flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

/* The track from each node to the next one. Drawn per step rather than as one
   bar across the whole row, so it always ends at the last node instead of
   running on to the edge of the grid.
   Node is 56px wide and the grid gap is 34px, so the gap to cross is
   100% + 34px - 56px. */
.flow-link {
  position: absolute;
  top: 27px;
  left: 56px;
  width: calc(100% - 22px);
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.flow-link i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--grad-warm);
  transform: scaleX(0);
  transform-origin: left center;
}

.flow-step { position: relative; padding-right: 8px; }

.flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 50%;
  /* opaque, so it masks the rail running behind it */
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--muted);
  transition: background .45s ease, border-color .45s ease, color .45s ease,
              box-shadow .45s ease, transform .3s ease;
}
.flow-step:hover .flow-node { transform: translateY(-3px); }

.flow-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 0 0 9px;
}
.flow-step h3 { font-size: 18px; margin: 0 0 8px; }
.flow-step p  { font-size: 15px; color: var(--muted); margin: 0; }

/* ---- the animation, only once JavaScript has opted in ---- */

.flow-anim .flow-node {
  opacity: 0;
  transform: scale(.55);
}
/* No transition on the hidden state: these classes are added by JavaScript
   after first paint, and a transition here would make the text visibly fade
   OUT before the animation had even started. The transition belongs on the
   .is-live rule, which is the only direction that should be animated. */
.flow-anim .flow-text {
  opacity: 0;
  transform: translateY(14px);
}

/* node, then its track, then the next node: the eye follows the process. */
.flow-anim.is-live .flow-link i {
  transform: scaleX(1);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  transition-delay: calc(.32s + var(--i) * .30s);
}

/* Each node lands about when the gradient reaches it. The overshoot easing
   gives it a small pop rather than a flat fade. */
.flow-anim.is-live .flow-node {
  opacity: 1;
  transform: scale(1);
  background: var(--grad-warm);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(236, 72, 153, .85);
  transition: opacity .35s ease,
              transform .55s cubic-bezier(.34, 1.56, .64, 1),
              background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease;
  transition-delay: calc(.10s + var(--i) * .30s);
}
.flow-anim.is-live .flow-step:hover .flow-node { transform: translateY(-3px) scale(1); }

.flow-anim.is-live .flow-text {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(.20s + var(--i) * .30s);
}

@media (max-width: 1000px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
  /* Two rows: a track pointing at a node on the line below would be wrong. */
  .flow-link { display: none; }
}
@media (max-width: 620px) {
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .flow-node { width: 48px; height: 48px; margin-bottom: 16px; }
}

/* Someone who has asked for less motion gets the finished state immediately. */
@media (prefers-reduced-motion: reduce) {
  .flow-anim .flow-node,
  .flow-anim .flow-text { opacity: 1; transform: none; }
  .flow-anim .flow-link i { transform: scaleX(1); }
  .flow-anim .flow-node,
  .flow-anim .flow-text,
  .flow-anim .flow-link i { transition: none; }
}

/* A one-line summary above a long legal page. */
.lead-note {
  margin: 0 0 30px;
  padding: 16px 20px;
  background: var(--surface-alt);
  border-left: 3px solid var(--pink-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15.5px;
}
.lead-note b { color: var(--ink); }


/* ==========================================================================
   Template screenshot gallery, on a template's own page
   ========================================================================== */

.shotshow { margin: 0 0 18px; }
.shotshow-main {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: var(--surface-alt); cursor: zoom-in; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.shotshow-main.accent-orange { border-top: 3px solid transparent; border-image: var(--grad-warm) 1; }
.shotshow-main picture { display: block; }
.shotshow-main img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center;
  display: block; transition: transform .4s ease;
}
.shotshow-main::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20, 16, 45, 0); transition: background .3s ease;
}
.shotshow-main:hover img, .shotshow-main:focus-visible img { transform: scale(1.03); }
.shotshow-main:hover::after, .shotshow-main:focus-visible::after { background: rgba(20, 16, 45, .22); }
.shotshow-zoom {
  position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--ink);
  opacity: 0; transform: scale(.7); transition: opacity .28s ease, transform .28s ease;
}
.shotshow-zoom svg { width: 24px; height: 24px; }
.shotshow-main:hover .shotshow-zoom, .shotshow-main:focus-visible .shotshow-zoom { opacity: 1; transform: scale(1); }
.shotshow figcaption { font-size: 14px; color: var(--muted); padding-top: 10px; }

.shotgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 6px; }
@media (max-width: 900px) { .shotgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .shotgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.shotgrid figure { margin: 0; }
.shotgrid-item {
  display: block; width: 100%; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--surface-alt); cursor: zoom-in;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.shotgrid-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; display: block; }
.shotgrid-item:hover, .shotgrid-item:focus-visible {
  border-color: var(--pink); transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(30, 27, 75, .12);
}
.shotgrid figcaption { font-size: 12.5px; color: var(--muted); padding-top: 7px; line-height: 1.4; }

/* --- the popup ----------------------------------------------------------- */
.shotbox[hidden] { display: none; }
.shotbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(14px, 3vw, 40px);
  background: rgba(12, 9, 26, .93);
  animation: sb-in .2s ease both;
}
.sb-calm { animation: none; }
@keyframes sb-in { from { opacity: 0; } to { opacity: 1; } }

.sb-frame { margin: 0; max-width: min(1180px, 100%); width: 100%; text-align: center; }
.sb-scroll {
  max-height: 78vh; overflow-y: auto; overflow-x: hidden;
  border-radius: var(--radius); background: #191430;
  scrollbar-width: thin;
}
.sb-img { display: block; width: 100%; height: auto; }
.sb-cap { color: rgba(255, 255, 255, .82); font-size: 14.5px; padding-top: 14px; }

.shotbox button {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14); border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  transition: background .2s ease;
}
.shotbox button:hover { background: rgba(255, 255, 255, .3); }
.sb-close { top: 14px; right: 16px; width: 46px; height: 46px; font-size: 30px; }
.sb-prev, .sb-next { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 32px; }
.sb-prev { left: 12px; }
.sb-next { right: 12px; }
@media (max-width: 560px) {
  .sb-prev, .sb-next { width: 42px; height: 42px; margin-top: -21px; font-size: 25px; }
  .sb-scroll { max-height: 68vh; }
}

body.sb-open { overflow: hidden; }