/* Surround Sound Marketing — shared design system for interior pages.
   index.html is deliberately NOT on this stylesheet: it carries the scroll
   engine's styles inline. Anything that must exist on every page (notably the
   .formmount rules) therefore has to be duplicated there if the film page ever
   carries an embed. That split is exactly how a booking widget ends up 300px
   wide on one page and fine on the rest. */

:root {
  --base: #0A0E1A;
  --base-soft: #111726;
  --card: #0E1524;
  --navy: #17418F;
  --cyan: #2BB0E2;
  --orange: #E87722;
  --cream: #F2ECE2;
  --muted: #8E98AC;
  --display: "Montserrat", system-ui, -apple-system, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 4.2vw, 72px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --line: rgba(242, 236, 226, .16);
}

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

html { background: var(--base); color: var(--cream); font-family: var(--display); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.wrap { max-width: 1240px; margin: 0 auto; }
.micro {
  font-family: var(--data); font-size: 10px; font-weight: 500;
  line-height: 1.5; letter-spacing: .09em; text-transform: uppercase;
}
.kicker { margin: 0 0 16px; color: var(--cyan); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px;
  background: rgba(10, 14, 26, .92); backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { width: 232px; display: block; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--cyan); }
/* NOT the mono face: Plex Mono's slashed zeros align with the hyphens at this
   size and the number reads as struck through. Mono is for codes. */
.site-nav__tel { font-size: 13px; font-weight: 700; white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: 3px;
  background: var(--orange); color: #0A0E1A;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: filter 200ms ease;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(242, 236, 226, .45); }
.btn--ghost:hover { background: rgba(242, 236, 226, .08); }

.nav-toggle {
  display: none; width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(242, 236, 226, .4); border-radius: 3px;
  background: rgba(10, 14, 26, .5); cursor: pointer;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; margin: 4px auto;
  background: var(--cream); transition: transform 260ms var(--ease-out), opacity 200ms;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.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(-5.5px) rotate(-45deg); }

/* ---------- bands ---------- */
.band { padding: clamp(72px, 9vw, 132px) var(--gutter); }
.band--paper { background: var(--cream); color: var(--base); }
.band--paper .kicker { color: var(--navy); }
.band--soft { background: var(--base-soft); }
.band--navy { background: linear-gradient(180deg, var(--navy), #0E2A5E); }

.page-hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 84px); }
.page-hero h1 {
  margin: 0; font-size: clamp(38px, 5.6vw, 82px); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.02; text-wrap: balance; max-width: 18ch;
}
.page-hero h1 em { font-style: normal; color: var(--orange); }
.page-hero .lede { max-width: 42rem; margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: rgba(242, 236, 226, .86); }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

h2 { margin: 0; font-size: clamp(30px, 3.8vw, 56px); font-weight: 800; letter-spacing: -.028em; line-height: 1.06; text-wrap: balance; }
h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
p { font-size: 17px; line-height: 1.6; }

.two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(36px, 5vw, 60px); }
.card { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card__n { font-family: var(--data); font-size: 11px; letter-spacing: .12em; color: var(--cyan); }

.steps { counter-reset: step; display: grid; gap: 2px; margin-top: clamp(36px, 5vw, 60px); }
.step { display: grid; grid-template-columns: 62px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--data); font-size: 13px; color: var(--orange); padding-top: 4px;
}
.step p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

.checks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 16px; line-height: 1.45; }
.checks li::before { content: ""; width: 8px; height: 8px; margin-top: .42em; border-radius: 50%; background: var(--cyan); }

/* ---------- booking mount ----------
   AN IFRAME WITH NO WIDTH IS 300px. That is the HTML default and it is the
   single most likely cause of "the booking widget is narrow and really tall":
   the widget stacks to one column below 1025px of ITS OWN width.
   Do NOT add a max-width here to tidy it up, for the same reason. */
.formmount { width: 100%; }
.formmount iframe { width: 100%; min-height: 760px; border: 0; display: block; }

/* ---------- legal ---------- */
.legal { max-width: 60rem; }
.legal h1 { margin: 0 0 8px; font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; letter-spacing: -.03em; }
.legal h2 { margin: 44px 0 12px; font-size: clamp(20px, 2vw, 26px); }
.legal p, .legal li { color: rgba(242, 236, 226, .84); font-size: 16px; line-height: 1.65; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--cyan); text-underline-offset: 3px; }

/* ---------- conversion band + footer ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin: 0 auto; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.reassure { margin-top: 16px; font-size: 14px; color: rgba(242, 236, 226, .74); }

.site-footer { padding: 44px var(--gutter) max(44px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--base); color: var(--muted); }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.site-footer img { width: 200px; opacity: .9; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cream); }
.footer-note { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.6; }
.footer-note a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .site-nav {
    position: fixed; inset: 72px 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px;
    background: rgba(10, 14, 26, .97); border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 220ms ease, transform 220ms var(--ease-out), visibility 220ms;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav a:not(.btn) { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-nav .btn { margin-top: 16px; }
  .nav-toggle { display: block; }
  .site-header__brand img { width: 176px; }
  .two-col, .cards { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px 1fr; gap: 14px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .formmount iframe { min-height: 1100px; }
}

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

/* quiet backup path under the booking widget: if the embed ever fails to
   reveal itself, the visitor still has a way through */
.formmount__alt { margin: 18px 0 0; font-size: 14px; color: #8E98AC; }
.formmount__alt a { color: #2BB0E2; text-underline-offset: 3px; }

/* ---------- pricing tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(36px, 5vw, 58px); align-items: stretch; }
.tier { display: flex; flex-direction: column; padding: 32px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.tier--featured { border-color: var(--orange); background: #131A2B; }
.tier__tag { display: inline-block; align-self: flex-start; margin-bottom: 16px; padding: 5px 10px; border-radius: 999px; background: var(--orange); color: #0A0E1A; font-family: var(--data); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.tier__name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--cyan); }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.tier__price b { font-size: clamp(38px, 3.8vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier__price span { font-size: 14px; color: var(--muted); }
.tier__note { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tier .checks { margin-top: 22px; margin-bottom: 26px; }
.tier .checks li { font-size: 15px; }
.tier .btn { margin-top: auto; }

/* ---------- add-ons ---------- */
.addons { width: 100%; border-collapse: collapse; margin-top: 26px; }
.addons th { padding: 0 0 12px; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--data); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.addons td { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.4; }
.addons td:last-child, .addons th:last-child { text-align: right; }
.addons td:last-child { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.addons .addons__why { color: var(--muted); font-size: 14px; }

/* auto-fit, not a fixed 3: the term count changes as the offer does, and a
   hardcoded column count leaves the fourth item stranded on its own row */
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(36px, 5vw, 56px); }
.terms div { padding-top: 16px; border-top: 2px solid var(--cyan); }
.terms h3 { margin: 0 0 8px; font-size: 16px; }
.terms p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

@media (max-width: 860px) {
  .tiers, .terms { grid-template-columns: 1fr; }
  .addons .addons__why { display: none; }
}

/* ---------- hero with a film still ----------
   The interior heroes were a headline on the left and half a screen of empty
   dark on the right. These stills come straight out of frames/desktop, so the
   pages inherit the film's own art direction at zero asset cost and the site
   reads as one piece rather than a film plus some pages.

   Only .hero-grid gets the two-column treatment: the legal pages share
   .page-hero but must stay a single readable measure. */
.page-hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: center;
}
.page-hero .hero-grid h1 { max-width: 14ch; }
.page-hero .hero-grid .lede { max-width: 34rem; }

.hero-still {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #060911;
}
.hero-still img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* neutral dark falloff on the copy side, never a brand-colour wash: the frame's
   own warmth is what sells it, and a tinted overlay reads as a poster */
.hero-still::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--base) 0%, rgba(10, 14, 26, .55) 22%, rgba(10, 14, 26, 0) 62%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .page-hero .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .page-hero .hero-grid h1 { max-width: none; }
  /* below the copy on mobile, and shallower: it is atmosphere, not the point */
  .hero-still { aspect-ratio: 16 / 9; order: 2; }
  .hero-still::after {
    background: linear-gradient(180deg, rgba(10, 14, 26, .45) 0%, rgba(10, 14, 26, 0) 55%);
  }
}

/* ---------- demo thumbnail inside a pricing tier ----------
   A demo button under a price has to point at something that loads. These
   screenshots are captured from the real demo builds, never composed. */
.tier__demo { display: block; margin: 0 0 20px; text-decoration: none; }
.tier__demo img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line); border-radius: 5px; background: #060911;
  transition: border-color 180ms ease, transform 180ms ease;
}
.tier__demo:hover img { border-color: var(--cyan); transform: translateY(-2px); }
.tier__demo span {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--data); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan);
}
.tier__demo:hover span { text-decoration: underline; text-underline-offset: 3px; }
.tier__demo em {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 12.5px; color: var(--muted);
}

/* the demo CTA is a real button, not a text link: it is the highest-intent
   thing on the pricing card after the price itself */
.tier__demo .demo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; margin-top: 12px; padding: 0 16px;
  border: 1px solid var(--cyan); border-radius: 4px;
  background: rgba(43, 176, 226, .10); color: var(--cyan);
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: .01em; text-transform: none;
  transition: background 180ms ease, color 180ms ease;
}
.tier__demo:hover .demo-btn { background: var(--cyan); color: #0A0E1A; }

/* ---------- audit system: intake form, reports, prospect report ----------
   Used by the static /intake page AND by the server-rendered /reports and /r
   pages in api/. Both load this sheet, which is the whole point: the previous
   site's intake and admin screens were styled separately from the marketing
   pages and looked like a different company. One sheet, no drift. */
  .sheet { max-width: 980px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) 96px; }
  .sheet--narrow { max-width: 660px; }
  .sheet h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; }
  .sheet p.lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 34px; max-width: 62ch; }

  .card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 3.4vw, 32px); }
  .card + .card { margin-top: 18px; }

  /* ---------- forms ---------- */
  .field { margin: 0 0 22px; }
  .field > label, .field > legend { display: block; font-size: 13px; font-weight: 700; margin: 0 0 8px; padding: 0; }
  .field .hint { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin: 4px 0 0; }
  /* Deny-list, not an allow-list. Enumerating input types missed type=password
     entirely, so every password field on the admin pages rendered as a raw
     browser default. Checkboxes and radios are the only ones that must NOT
     take this treatment, so name those instead and let every other type in. */
  .field input:not([type=checkbox]):not([type=radio]),
  .field select, .field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px;
    background: var(--base-soft); color: var(--cream);
    border: 1px solid var(--line); border-radius: 3px;
    font-family: var(--display); font-size: 16px; /* 16px or iOS zooms on focus */
  }
  .field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
  .field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--orange); }
  .field .err { display: none; color: var(--orange); font-size: 13px; margin: 6px 0 0; }
  .field--invalid .err { display: block; }
  .checks { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; }
  .checks label { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; }
  .checks input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cyan); flex: none; }
  .grid2 { display: grid; gap: 0 20px; grid-template-columns: 1fr 1fr; }
  .grid2 > .field { display: flex; flex-direction: column; }
  .grid2 > .field input, .grid2 > .field select { margin-top: auto; }
  @media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

  .progress { position: sticky; top: 72px; z-index: 20; height: 3px; background: var(--line); margin-bottom: 34px; }
  .progress__bar { height: 100%; width: 0; background: var(--cyan); transition: width .3s var(--ease-out); }

  /* Section heading inside a long form. The intake runs to twenty-odd
     questions once the gate opens, and an unbroken column of inputs reads as
     far longer than the same questions in named groups. */
  /* 16:9 video that keeps its ratio at every width. aspect-ratio rather than a
     padding-top hack, which is supported everywhere this site targets. */
  .videowrap {
    position: relative; margin: 0 0 34px; border-radius: 4px; overflow: hidden;
    background: var(--base-soft); border: 1px solid var(--line); aspect-ratio: 16 / 9;
  }
  .videowrap video, .videowrap iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  }

  .formsection { margin: 34px 0 18px; padding-top: 22px; border-top: 1px solid var(--line); }
  .field[hidden], [hidden] { display: none !important; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .formnote { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 18px 0 0; }
  .formerr { display: none; margin: 0 0 20px; padding: 14px 16px; border-radius: 3px;
             background: rgba(232, 119, 34, .12); border: 1px solid var(--orange); color: var(--cream); font-size: 14px; }
  .formerr[data-on] { display: block; }
  .formok { display: none; margin: 0 0 20px; padding: 14px 16px; border-radius: 3px;
            background: rgba(43, 176, 226, .12); border: 1px solid var(--cyan); color: var(--cream); font-size: 14px; }
  .formok[data-on] { display: block; }
  details.card summary::marker { color: var(--cyan); }
  details.card[open] summary { margin-bottom: 4px; }

  /* ---------- report ---------- */
  .score { display: flex; align-items: center; gap: 18px; margin: 0 0 8px; }
  .score__n { font-family: var(--data); font-size: 52px; font-weight: 500; line-height: 1; }
  .score__meta { font-size: 13px; color: var(--muted); line-height: 1.5; }
  .sev { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
         letter-spacing: .06em; text-transform: uppercase; font-family: var(--data); }
  .sev--high { background: rgba(232, 119, 34, .18); color: #F0A163; }
  .sev--med  { background: rgba(43, 176, 226, .16); color: #7FD0F0; }
  .sev--low  { background: rgba(120, 200, 150, .16); color: #86CFA3; }
  .meter { height: 6px; background: var(--base-soft); border-radius: 999px; overflow: hidden; margin: 14px 0 0; }
  .meter__fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--orange)); }
  .rlist { margin: 0; padding: 0 0 0 22px; }
  .rlist li { margin: 0 0 12px; line-height: 1.6; }
  .rbody p { line-height: 1.7; margin: 0 0 16px; }
  .rbody p:last-child { margin-bottom: 0; }

  /* ---------- admin table ---------- */
  .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
  table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
  table.data th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
                  font-family: var(--data); color: var(--muted); padding: 12px 16px; background: var(--base-soft); font-weight: 500; }
  table.data td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
  table.data tr:hover td { background: rgba(255, 255, 255, .02); }
  table.data a { color: var(--cyan); font-weight: 600; text-decoration: none; }
  table.data a:hover { text-decoration: underline; }
  .adminbar { display: flex; align-items: center; justify-content: space-between; gap: 20px;
              padding: 14px var(--gutter); border-bottom: 1px solid var(--line); background: var(--base-soft); }
  .adminbar__t { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
  .adminbar form { margin: 0; }
  .linkbtn { background: none; border: 0; color: var(--cyan); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
  .empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* ---------- lead magnet: /first-90-days and /customer-profile ----------
   Two public pages that are traffic sources rather than parts of the audit
   funnel, so they get their own layouts rather than reusing the page-hero. */

.guidehero {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1.05fr .95fr; align-items: start;
}
@media (max-width: 900px) { .guidehero { grid-template-columns: 1fr; } }
.guidehero__copy h1 { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.03; letter-spacing: -.02em; margin: 0 0 16px; }
.guidehero__form { position: sticky; top: 96px; }
@media (max-width: 900px) { .guidehero__form { position: static; } }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; line-height: 1.6; color: var(--cream); font-size: 15px; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--cyan);
}

.guidegrid {
  display: grid; gap: 26px 30px; margin: 30px 0 0;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .guidegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .guidegrid { grid-template-columns: 1fr; } }
.guidegrid h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.25; }
.guidegrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* Inline with the heading it numbers rather than stacked above it. Sitting on
   the same baseline reads as one label; on its own line it read as a heading of
   its own, which is a lot of weight for a counter. */
.guidegrid__n {
  font-family: var(--data); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; color: var(--cyan); margin-right: 10px;
}

.guidenote {
  margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 72ch;
}

.whowhere { display: grid; gap: 24px 30px; grid-template-columns: repeat(3, 1fr); margin: 28px 0 0; }
@media (max-width: 780px) { .whowhere { grid-template-columns: 1fr; } }
.whowhere > div { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.whowhere__k {
  display: block; font-family: var(--data); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin: 0 0 10px;
}
.whowhere p { margin: 0; line-height: 1.65; font-size: 14.5px; color: var(--cream); }

/* The one-page deliverable, mocked in the /customer-profile hero. Styled as a
   document rather than a UI card: a header bar, ruled rows, and a footnote that
   admits it is an example. */
.profilemock {
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.profilemock__bar {
  margin: 0; padding: 13px 20px; background: var(--base);
  border-bottom: 1px solid var(--line);
  font-family: var(--data); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
}
.profilemock__row { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.profilemock__row p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--cream); }
.profilemock__k {
  display: block; margin: 0 0 6px;
  font-family: var(--data); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.profilemock__foot {
  margin: 0; padding: 14px 20px; font-size: 12.5px; color: var(--muted);
}
@media (max-width: 900px) { .profilemock { margin-top: 34px; } }

/* Destructive action in the admin table. Same weight as its neighbours so the
   row does not shout, distinct enough in color that it is not misclicked. */
.linkbtn--danger { color: var(--orange); }
.linkbtn--danger:hover { text-decoration: underline; }