:root {
  --night: #06070d;
  --night-soft: #0c0e1c;
  --card: #10132a;
  --card-hover: #151936;
  --line: #23274a;
  --text: #eceaf6;
  --muted: #9d9db8;
  --dawn: #eeb95c;
  --dawn-soft: #f6d493;
  --dream: #9d8cff;
  --dream-deep: #6a5ae0;
  --glow-gold: rgba(238, 185, 92, .35);
  --glow-violet: rgba(157, 140, 255, .3);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .wordmark { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.12; }
a { color: inherit; }
::selection { background: var(--dream-deep); color: #fff; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header ---------- */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--night) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
header.top .wrap { height: 4.25rem; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 1.3rem; letter-spacing: .01em; text-decoration: none; transition: text-shadow .3s; }
.wordmark:hover { text-shadow: 0 0 24px var(--glow-gold); }
.wordmark .moon { color: var(--dawn); }
nav.main { display: flex; align-items: center; gap: 1.9rem; font-size: .9rem; font-weight: 500; }
nav.main a:not(.cta) {
  position: relative; text-decoration: none; color: var(--muted); padding: .25rem 0; transition: color .25s;
}
nav.main a:not(.cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: linear-gradient(90deg, var(--dawn), var(--dream));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
nav.main a:not(.cta):hover { color: var(--text); }
nav.main a:not(.cta):hover::after { transform: scaleX(1); }
nav.main a.cta {
  color: var(--night); background: var(--dawn); text-decoration: none;
  padding: .5rem 1.1rem; border-radius: 999px; transition: background .25s, box-shadow .25s, transform .15s;
}
nav.main a.cta:hover { background: var(--dawn-soft); box-shadow: 0 4px 24px var(--glow-gold); transform: translateY(-1px); }

/* hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none; width: 2.6rem; height: 2.6rem; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: .6rem;
  align-items: center; justify-content: center; transition: border-color .25s;
}
.nav-toggle:hover { border-color: var(--dream); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; display: block; width: 1.15rem; height: 1.6px; border-radius: 2px;
  background: var(--text); transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; top: -.38rem; left: 0; }
.nav-toggle .bars::after { position: absolute; top: .38rem; left: 0; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(.38rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-.38rem) rotate(-45deg); }

@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }
  nav.main {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--night-soft);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
    padding: .25rem 1.25rem 1.25rem;
  }
  nav.main.open { display: flex; }
  nav.main a:not(.cta) { color: var(--text); padding: .95rem .25rem; border-bottom: 1px solid var(--line); }
  nav.main a:not(.cta)::after { display: none; }
  nav.main a.cta { margin-top: 1.1rem; text-align: center; padding: .8rem 1.1rem; }
}

/* ---------- hero ---------- */
/* The artwork carries the hero's atmosphere; the CSS veil blobs and starfield
   this replaced are gone. Their two empty divs stay in the markup on purpose:
   CMS region ids are `tag.ordinal.run` and the ordinal counts EVERY opening tag
   of that name (src/cms-regions.mjs), so deleting a div would shift every later
   div.N id on the page and silently orphan any stored override. */
.hero { position: relative; overflow: hidden; }
/* The scrim is angled, not uniform: heaviest at the left where the headline,
   lede and buttons sit, lightest at the right where the ribbons are and no text
   goes. A uniform scrim dark enough for the copy flattens the artwork away.

   The stops are set by scripts/contrast-scan.js measuring rendered pixels, and
   the headroom is much larger than it looks: the artwork is itself night-dark
   (mean luminance 32.5/255, and only 23.5 across the left half where the copy
   sits), so light-on-dark copy keeps AA at every level tested — measured, with
   the scanner fire-tested to prove its silence means something. The first
   version of this file ran .93/.74/.42, which let the artwork contribute just
   7% of the left half and reproduced the exact M26 failure the spec warns about
   ("the image contributes 6% and is gone").

   The asset is 2560px wide, which is NOT the largest that fits: at 1280@2x —
   the common retina laptop — a 2560 source measures SHARPER than a 3840 one
   (ribbon acutance 39.1 vs 36.3) because it is an exact 1:1 device-pixel match
   while 3840 must be resampled down by an awkward ratio. At 1920@2x it is
   within 3% of 3840 for 42 KB less. Bigger is not automatically sharper. */
.hero {
  background-image:
    linear-gradient(100deg, rgba(11,12,16,.34) 0%, rgba(11,12,16,.16) 48%, rgba(11,12,16,.04) 100%),
    url("assets/hero.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* At narrow widths `cover` scales a 16:9 image to the box HEIGHT and crops
   ~940px of its width away, and the centre of this artwork is its empty dark
   half — measured at 375x740, the ribbons vanished entirely. So the crop is
   anchored right, onto the ribbons, and the scrim turns vertical to match:
   the copy stacks at the top, so darkest-at-top keeps it on solid ground while
   the artwork surfaces below it, behind nothing.

   68% and not further right, which is counter-intuitive: the artwork's
   BRIGHTEST band sits at 85%, so shifting the crop rightward drags it under the
   copy rather than away from it. Measured per-crop, on the 10th-percentile
   background pixel behind the lede (the median that scripts/contrast-scan.js
   judges on stays ~7:1 throughout and hides this entirely):
     50%  6.75    68%  6.06  <- shipped
     72%  4.99    76%  3.89  fails AA
     82%  2.63    92%  2.35    100%  2.43
   68% is the rightmost crop that still clears AA with real headroom, so it
   keeps the most ribbon in frame without putting a lit band under the text. */
@media (max-width: 760px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(11,12,16,.46) 0%, rgba(11,12,16,.34) 42%, rgba(11,12,16,.10) 100%),
      url("assets/hero.avif");
    background-position: 68% center;
  }
}
/* --line (#23274a) is a near-invisible hairline chosen against the flat --night
   ground. Once the scrim lightened, the ghost button's outline landed on a lit
   gold ribbon and effectively disappeared — a button with no visible boundary.
   Scoped to .hero so every other ghost button on the page keeps the original
   hairline against the flat ground it was designed for. */
.hero .btn.ghost {
  border-color: rgba(236,234,246,.34);
  background: rgba(11,12,16,.30);
  backdrop-filter: blur(6px);
}
.hero .btn.ghost:hover { background: rgba(11,12,16,.44); }
.hero .wrap { position: relative; padding-top: 7.5rem; padding-bottom: 8rem; }
.kicker {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dream); margin-bottom: 1.4rem;
}
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.2rem); max-width: 17ch; }
.hero h1 em {
  font-family: "Inter", sans-serif; font-style: italic; font-weight: 600; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--dawn) 20%, var(--dawn-soft) 50%, var(--dream) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { margin-top: 1.6rem; max-width: 33rem; font-size: 1.15rem; color: var(--muted); }
.btn-row { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .85rem 1.7rem; border-radius: 999px;
  transition: transform .18s ease, background .25s, box-shadow .25s, border-color .25s;
}
.btn.primary { background: var(--dawn); color: var(--night); box-shadow: 0 2px 16px rgba(238,185,92,.18); }
.btn.primary:hover { background: var(--dawn-soft); transform: translateY(-2px); box-shadow: 0 8px 32px var(--glow-gold); }
.btn.ghost { border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--dream); transform: translateY(-2px); box-shadow: 0 8px 28px var(--glow-violet); }

/* ---------- bands ---------- */
section.band { padding: 6rem 0; }
section.band.alt { background: var(--night-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); max-width: 24ch; }
.band .sub { margin-top: .9rem; color: var(--muted); max-width: 38rem; }

/* ---------- cards with gradient borders ---------- */
.cards { margin-top: 2.9rem; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.card {
  position: relative; background: var(--card); border-radius: 1.1rem; padding: 1.9rem;
  border: 1px solid var(--line);
  transition: transform .25s ease, background .25s, box-shadow .25s, border-color .25s;
}
.card:hover {
  transform: translateY(-5px); background: var(--card-hover);
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px var(--dream-deep), 0 0 34px var(--glow-violet);
}
.card .glyph {
  width: 2.7rem; height: 2.7rem; border-radius: .8rem; display: grid; place-items: center;
  background: rgba(157,140,255,.14); color: var(--dream); font-size: 1.25rem;
  transition: background .25s, color .25s, transform .25s;
}
.card:hover .glyph { background: var(--dream-deep); color: #fff; transform: rotate(-8deg) scale(1.06); }
.card h3 { margin-top: 1.15rem; font-size: 1.3rem; }
.card p { margin-top: .65rem; font-size: .95rem; color: var(--muted); }

/* ---------- pricing tiers ---------- */
/* stretch, not start: the subscription tiers carry feature lists of different
   lengths, so top-aligned cards end up ragged (86px apart at 1280). The `pick`
   button is pinned to the bottom by `.tier ul { margin-bottom: auto }` below. */
.tiers { margin-top: 2.9rem; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: 1.1rem; padding: 2rem 1.8rem;
  transition: transform .25s ease, background .25s, box-shadow .25s, border-color .25s;
}
.tier:hover {
  transform: translateY(-5px); background: var(--card-hover); border-color: transparent;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px var(--dream-deep), 0 0 34px var(--glow-violet);
}
.tier.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(140deg, var(--dawn), var(--dream)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 30px var(--glow-violet);
}
.tier.featured:hover { transform: translateY(-7px); }
.tier .badge {
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
  font-family: "Inter", sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--night); background: linear-gradient(100deg, var(--dawn), var(--dawn-soft));
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
}
.tier .plan { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 600; }
.tier .tagline { margin-top: .3rem; font-size: .85rem; color: var(--muted); }
.tier .price { margin-top: 1.3rem; display: flex; align-items: baseline; gap: .35rem; }
.tier .price .amount { font-family: "Fraunces", Georgia, serif; font-size: 2.5rem; font-weight: 600; color: var(--text); line-height: 1; }
.tier .price .unit { font-size: .8rem; color: var(--muted); letter-spacing: .04em; }
/* Build fee sits under the monthly headline; the term is the quieter third line. */
.tier .setup { margin-top: .45rem; font-size: .82rem; color: var(--dream); }
.tier .term { margin-top: .2rem; font-size: .76rem; color: var(--muted); }
/* margin-bottom:auto absorbs the slack a stretched card gains, so the button
   lands on the card's floor while keeping its own 1.9rem gap above. */
.tier ul { list-style: none; margin-top: 1.5rem; margin-bottom: auto; display: grid; gap: .7rem; align-content: start; }
.tier ul li { position: relative; padding-left: 1.6rem; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.tier ul li::before {
  content: "◗"; position: absolute; left: 0; top: 0; color: var(--dawn); font-size: .85rem;
}
.tier ul li strong { color: var(--text); font-weight: 600; }
.tier .pick {
  margin-top: 1.9rem; display: inline-block; text-align: center; text-decoration: none;
  font-weight: 600; font-size: .9rem; padding: .75rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text);
  transition: transform .18s ease, background .25s, box-shadow .25s, border-color .25s, color .25s;
}
.tier .pick:hover { border-color: var(--dream); transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow-violet); }
.tier.featured .pick { background: var(--dawn); color: var(--night); border-color: transparent; box-shadow: 0 2px 16px rgba(238,185,92,.18); }
.tier.featured .pick:hover { background: var(--dawn-soft); box-shadow: 0 8px 32px var(--glow-gold); }
.pricing .foot { margin-top: 2rem; font-size: .88rem; color: var(--muted); }

/* ---------- steps ---------- */
ol.steps { margin-top: 2.9rem; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; }
ol.steps li {
  counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.6rem;
  transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
ol.steps { counter-reset: step; }
ol.steps li:hover {
  transform: translateY(-5px); border-color: rgba(238,185,92,.55);
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 28px rgba(238,185,92,.12);
}
ol.steps li::before {
  content: "0" counter(step); font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; color: var(--dawn); display: block;
  transition: transform .25s ease;
}
ol.steps li:hover::before { transform: translateX(.3rem); }
ol.steps h3 { margin-top: .55rem; font-size: 1.08rem; }
ol.steps p { margin-top: .45rem; font-size: .9rem; color: var(--muted); }

/* ---------- studio ---------- */
.about-copy { margin-top: 2rem; max-width: 42rem; }
.about-copy p { color: var(--muted); }
.about-copy p + p { margin-top: 1rem; }
.about-copy strong { color: var(--text); font-weight: 600; }

/* ---------- faq ---------- */
.faq-list { margin-top: 2.6rem; display: grid; gap: 1rem; max-width: 46rem; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.faq-item[open] { border-color: rgba(157,140,255,.5); box-shadow: 0 10px 34px rgba(0,0,0,.4), 0 0 24px var(--glow-violet); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.5rem; font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex: none; width: 1.4rem; height: 1.4rem; position: relative; transition: transform .3s ease; color: var(--dawn);
}
.faq-item summary .plus::before, .faq-item summary .plus::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-item summary .plus::before { width: 1.1rem; height: 2px; }
.faq-item summary .plus::after { width: 2px; height: 1.1rem; transition: transform .3s ease, opacity .3s ease; }
.faq-item[open] summary .plus { transform: rotate(90deg); }
.faq-item[open] summary .plus::after { opacity: 0; }
.faq-item .answer { padding: 0 1.5rem 1.4rem; color: var(--muted); font-size: .95rem; max-width: 42rem; }
.faq-item:hover { border-color: rgba(157,140,255,.35); }

/* ---------- contact ---------- */
.contact { text-align: center; position: relative; overflow: hidden; }
.contact .veil {
  position: absolute; left: 50%; bottom: -18rem; width: 40rem; height: 30rem; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(106,90,224,.25), transparent 65%); filter: blur(60px); pointer-events: none;
}
.contact .wrap { position: relative; }
.contact h2 { margin-inline: auto; }
.contact .email {
  position: relative; display: inline-block; margin-top: 2rem; font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 4vw, 2.1rem); color: var(--dawn); text-decoration: none; padding-bottom: .25rem;
  transition: text-shadow .3s;
}
.contact .email::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--dawn), var(--dream));
  transform: scaleX(.25); transform-origin: left; transition: transform .35s ease;
}
.contact .email:hover { text-shadow: 0 0 30px var(--glow-gold); }
.contact .email:hover::after { transform: scaleX(1); }
.contact .note { margin-top: 1.1rem; font-size: .9rem; color: var(--muted); }

footer.site { border-top: 1px solid var(--line); padding: 2.5rem 0; font-size: .85rem; color: var(--muted); }
footer.site .footer-area { font-size: .82rem; }
footer.site .footer-row { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
footer.site a { text-decoration: none; transition: color .25s; }
footer.site a:hover { color: var(--dawn); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, ol.steps li, nav.main a.cta { transition: none; }
}