/* ═══════════════════════════════════════════════════════════════════════
   webpage.contact — Night Shift

   Dark, dense, and short. The daylight version said everything and took
   13,000px to say it; this one makes its case in five screens: the pitch,
   the proof, the price, the form. If the page itself doesn't sell a fast
   site, no paragraph underneath it will.

   Two palettes on purpose. The PAGE is ink: charcoal panels, warm cream
   text, one electric blue. The MOCK-UPS inside it (the compare frame, the
   example builds) keep their own light "paper" tokens — client sites
   drawn at full brightness inside a dark frame is the contrast doing the
   selling.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* the page */
  --bg:      #0e1014;
  --panel:   #151920;
  --panel-2: #1a1f28;
  --line:    #262c37;
  --line-2:  #323947;
  --text:    #ece7dd;   /* warm cream, the brand's paper carried over    */
  --muted:   #a7abb4;
  --faint:   #7d828d;
  --blue:    #6e9be8;   /* the navy, turned up so it reads on ink        */
  --blue-deep: #1b3a6b; /* the brand navy, for fills                     */
  --hot:     #ece7dd;   /* the loudest thing on the page is cream        */

  /* the mock-ups' own daylight — do not use these for page chrome */
  --paper:   #faf7f2;
  --paper-2: #f2ede4;
  --card:    #ffffff;
  --ink:     #16181c;
  --ink-50:  #6b6459;
  --rule:    #ded7cb;
  --rule-2:  #cfc6b6;

  --display: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --wrap: 1200px;
  --gap: clamp(.8rem, 1.6vw, 1.1rem);
  --sect: clamp(1.9rem, 3.2vw, 2.75rem);
  --r: 3px;
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(.98rem, .2vw + .93rem, 1.04rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg { display: block; width: 100%; height: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--blue-deep); color: var(--paper);
  padding: .7rem 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: top .15s;
}
.skip:focus { top: 1rem; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sect); border-top: 1px solid var(--line); }

/* Section heads are one row, not a stacked block: headline left, note
   right, rule underneath. A dashboard labels its panels; it doesn't
   introduce them. */
.rowhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
  margin-bottom: clamp(.9rem, 1.6vw, 1.25rem);
}
.rowhead h2 { margin-right: auto; }
.rowhead-note { margin: 0; font-size: .92rem; color: var(--muted); }

/* ── Type ────────────────────────────────────────────────────────────── */
h1, h2, h3, .amount, .brand-word {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }

.dim { color: var(--faint); }

.lede {
  font-size: clamp(1.05rem, .4vw + .98rem, 1.18rem);
  color: var(--muted);
  max-width: 44ch;
  margin: .9rem 0 1.25rem;
}
.lede-sm { font-size: 1rem; color: var(--muted); max-width: 60ch; margin: .6rem 0 .8rem; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--display); font-weight: 700;
  font-size: .92rem; letter-spacing: -.005em;
  padding: .72rem 1.2rem;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-lg { font-size: .97rem; padding: .85rem 1.45rem; }
.btn-block { width: 100%; }

/* The loud one: cream on ink. Light-switch contrast, no gradient. */
.btn-hot { background: var(--hot); color: #14161a; }
.btn-hot:hover { background: #fff; }

.btn-line { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-line:hover { border-color: var(--text); }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar.is-stuck { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .8); }
.topbar-inner { display: flex; align-items: center; gap: var(--gap); padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-right: auto; }
.brand-word { font-size: 1.05rem; letter-spacing: -.03em; }
.brand-word em { font-style: normal; color: var(--blue); }
/* The real mark: globe + cursor, transparent PNG — renders clean on any
   background, no blend tricks needed. */
.brand-mark {
  width: 34px; height: 34px; flex: none; display: block;
  filter: brightness(1.15);   /* the mark's glow was tuned for light paper */
}
.topnav { display: flex; gap: 1.35rem; }
.topnav a {
  text-decoration: none; font-family: var(--display); font-size: .9rem; color: var(--muted);
  padding-block: .15rem; border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.topnav a:hover { color: var(--text); border-bottom-color: var(--blue); }

/* The nav used to vanish below 760px, and that was fine while the site was a
   single page — everything was a scroll away and the callbar carried the two
   things that mattered. It stopped being fine the moment /pricing, the case
   studies and the guide became separate pages: hiding the nav on a phone left
   the footer as the only route to any of them, which is not a route.

   No hamburger, no JavaScript. The bar wraps to two rows and the links become
   one horizontally scrollable strip — the pattern a phone already understands,
   and one that cannot get stuck open. */
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: .5rem var(--gap); padding-block: .55rem; }
  .topnav {
    order: 3; width: 100%;
    gap: 1.1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the edges so the strip reads as scrollable rather than clipped,
       then pad the ends back so the first and last links aren't against glass. */
    margin-inline: calc(50% - 50vw); padding-inline: 1rem;
    padding-bottom: .1rem;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { white-space: nowrap; font-size: .86rem; }
  .brand-mark { width: 28px; height: 28px; }
}

/* ── Entrance ────────────────────────────────────────────────────────── */
.rise { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  background:
    radial-gradient(56rem 30rem at 82% -12%, rgba(110, 155, 232, .1), transparent 65%),
    var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.open-sign {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line-2); border-left: 3px solid var(--blue);
  background: var(--panel);
  padding: .5rem .8rem; margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue);
}
.open-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--blue); }

/* The four numbers, 2×2, in a panel. */
.hero-figures {
  margin: 1rem 0 0; border: 1px solid var(--line); border-right: 0;
  background: var(--panel); max-width: 32rem;
  display: grid; grid-template-columns: 1fr 1fr;
}
.hero-figures > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; padding: .5rem .8rem;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.hero-figures > div:nth-last-child(-n+2) { border-bottom: 0; }
.hero-figures dt {
  margin: 0; font-family: var(--display);
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
.hero-figures dd {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 1.08rem; color: var(--text);
}
.hero-figures dd.free { color: var(--blue); }
.hero-figures dd small { font-size: .66rem; font-weight: 600; color: var(--faint); }
.hero-figures dd.plain { font-family: var(--body); font-size: .88rem; font-weight: 600; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
/* On a phone the frame can't show a useful slice of both sides. */
@media (max-width: 760px) {
  .compare { display: none; }
}

/* ── The before/after frame ──────────────────────────────────────────── */
.compare { margin: 0; position: relative; }
.frame {
  position: relative;
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.frame-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.frame-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.frame-url { margin-left: .75rem; font-size: .78rem; color: var(--muted); font-family: var(--display); }
.frame-drag {
  margin-left: auto;
  font-family: var(--display);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.frame-drag::after { content: ' \2192'; }

.frame-screen {
  position: relative;
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.shot { position: absolute; inset: 0; }

/* Before — clipped from the left by the handle. */
.shot-before { clip-path: inset(0 calc(100% - var(--split, 48%)) 0 0); background: #fff; }
.bf-inner {
  font-family: 'Times New Roman', Times, serif;
  color: #000; background: #fff;
  font-size: 2.35cqw;
  line-height: 1.4;
  height: 100%; display: flex; flex-direction: column;
}
.bf-banner {
  font-weight: bold; color: #000080; text-align: center;
  font-size: 1.3em; padding: .65em .5em;
  text-decoration: underline;
  background: #e8e8f0; border-bottom: 2px solid #000080;
  flex: none;
}
.bf-body { flex: 1; display: flex; min-height: 0; }
.bf-side {
  width: 30%; flex: none;
  background: #dcdce8; border-right: 2px solid #000080;
  padding: .8em .7em;
  display: flex; flex-direction: column; gap: .35em;
}
.bf-side-head { font-weight: bold; color: #000080; border-bottom: 1px solid #9a9ab0; padding-bottom: .3em; }
.bf-side a { color: #0000ee; }
.bf-counter {
  margin-top: auto; text-align: center;
  background: #000; color: #0f0;
  font-family: 'Courier New', monospace; letter-spacing: .12em;
  padding: .35em .4em;
}
.bf-main { padding: .9em 1em; display: flex; flex-direction: column; }
.bf-construction { color: #c00; margin-bottom: .8em; }
.bf-text { margin: 0 0 .7em; }
.bf-text a { color: #0000ee; }
.bf-services { margin: 0 0 .7em; padding-left: 1.4em; }
.bf-services li { margin-bottom: .15em; }
.bf-small { font-size: .9em; }
.bf-footer { color: #666; font-size: .85em; margin-top: auto; padding-top: 1em; }

/* After — daylight inside the dark page, which is the point. */
.shot-after {
  background: var(--paper);
  display: flex; flex-direction: column;
  font-size: 2.35cqw;
  color: var(--ink);
}
.af-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8em 1.1em; flex: none;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.af-logo { font-family: var(--display); font-weight: 800; font-size: 1.02em; letter-spacing: -.03em; }
.af-logo em { font-style: normal; color: var(--blue-deep); }
.af-call {
  font-family: var(--display); font-weight: 700; font-size: .82em;
  background: var(--blue-deep); color: var(--paper);
  padding: .5em .9em;
}
.af-hero {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4em; align-items: center;
  padding: 1.3em 1.2em;
}
.af-eyebrow {
  font-family: var(--display);
  font-size: .72em; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-deep);
  margin: 0 0 .55em;
}
.af-hero h3 { font-size: 2.15em; line-height: 1.02; margin: 0 0 .85em; font-weight: 800; }
.af-btns { display: flex; gap: .45em; }
.af-btn {
  font-family: var(--display); font-weight: 700; font-size: .82em;
  background: var(--blue-deep); color: var(--paper); padding: .6em .95em;
}
.af-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.af-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue-deep);
  padding: .95em .9em;
  display: flex; flex-direction: column; gap: .32em;
}
.af-card-status { display: flex; align-items: center; gap: .4em; font-weight: 600; font-size: .82em; color: #1f6b40; }
.af-live { width: 6px; height: 6px; border-radius: 50%; background: #1f6b40; }
.af-card-num { font-family: var(--display); font-weight: 800; font-size: 1.2em; letter-spacing: -.03em; }
.af-card-sub { font-size: .87em; color: var(--ink-50); line-height: 1.45; }
.af-card-btn {
  margin-top: .35em; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: .8em;
  border: 1.5px solid var(--ink);
  padding: .6em;
}
.af-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); flex: none;
  background: var(--card);
}
.af-strip > div {
  padding: .65em .8em; text-align: center;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .12em;
}
.af-strip > div:last-child { border-right: 0; }
.af-strip strong { font-family: var(--display); font-weight: 700; font-size: .95em; }
.af-strip span { color: var(--ink-50); font-size: .85em; }

/* Handle */
.handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 48%);
  width: 2px; margin-left: -1px;
  background: var(--blue);
  pointer-events: none;
}
.handle-grip {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-deep);
  border: 2px solid var(--blue);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.handle-grip::before, .handle-grip::after {
  content: ''; position: absolute; top: 50%; translate: 0 -50%;
  width: 0; height: 0; border-block: 5px solid transparent;
}
.handle-grip::before { left: 9px; border-right: 7px solid var(--paper); }
.handle-grip::after  { right: 9px; border-left: 7px solid var(--paper); }

.compare-range { width: 100%; margin-top: .8rem; accent-color: var(--blue); }
.compare-hint {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: .4rem 0 0; font-size: .84rem; color: var(--faint);
}
.compare-hint span:last-child { text-align: right; }

/* ── The work — real screenshots of real client builds ─────────────────── */
/* These used to be eight hand-built CSS mock-ups of invented businesses.
   They are now four screenshots of pages that actually shipped, which means
   the picture is the proof rather than an illustration of it.

   Two columns, not three. A browser viewport is about 2.25:1, and a real
   screenshot squeezed into a narrow third-of-a-row column renders its body
   text at three or four pixels — legible as texture, not as a website. Two
   columns give each shot roughly 560px, which is where a 1568px-wide capture
   starts reading as a page someone could use. */
.builds {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--gap);
  /* auto-fit rather than a fixed count, because the number of client sites we
     are allowed to show changes — one came off the row the day a client had
     not given permission yet. Three fit across at desktop width, two on a
     tablet, one on a phone, and a fourth returning needs no CSS change. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.build {
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  border-radius: var(--r); overflow: hidden;
}

/* The shot itself. The padding-top is the browser bar's own strip, so the bar
   sits above the capture rather than on top of it — overlaying it cost every
   client their masthead, which on half these sites is where the phone number
   lives. aspect-ratio is on the image, so the box is the right height before
   the lazy capture arrives and nothing below it jumps when it lands. */
.build-shot {
  position: relative;
  padding-top: 26px;
  background: var(--bg);
  overflow: hidden;
}
.build-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1568 / 698;
  /* cover + top so a shot is cropped from the bottom, never the masthead.
     The top of a homepage is the part worth showing. */
  object-fit: cover; object-position: 50% 0;
  border: 0;
}

/* A minimal browser bar over the top of the shot. It carries no address:
   naming the client's domain here is exactly the thing we are not doing. */
.build-chrome {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 0 .6rem; height: 26px;
  background: rgba(14, 16, 20, .82);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.build-chrome .bc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  flex: none;
}
.build-chrome .bc-addr {
  margin-left: .45rem;
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .1rem .5rem;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
  white-space: nowrap;
}
/* The global `svg { width:100%; height:100% }` reset would inflate this to
   the width of the pill, so the lock is sized explicitly. */
.build-chrome .bc-addr svg { flex: none; width: 9px; height: 9px; opacity: .8; }

.build-foot {
  padding: .6rem .85rem; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .6rem;
}
.build-trade { font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: -.03em; }
.build-note { font-size: .82rem; color: var(--faint); margin-left: auto; text-align: right; }

/* Two of the three builds now have a case study behind them. The link sits in
   the card's foot rather than making the whole card clickable: the third build
   has no page to go to, and a grid where some cards are links and others are
   not is a grid that feels broken. */
.build-more {
  display: block; padding: .55rem .85rem;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; color: var(--blue); text-decoration: none;
}
.build-more:hover { background: var(--panel-2); color: var(--text); }

@media (max-width: 760px) {
  .builds { grid-template-columns: 1fr; }
  .build-foot { flex-wrap: wrap; gap: .15rem .6rem; }
  .build-note { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ── Already on Shopify — the other half of the work ─────────────────── */
/* The four builds above are sites made from scratch. This panel is the case
   where the store already exists and the job is theme work instead. Same
   split as the hero: ink on the left doing the talking, a daylight mock-up
   on the right doing the proving. */
.shopify-panel {
  margin-top: var(--gap);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  display: grid; grid-template-columns: 1fr .92fr;
  gap: clamp(1.25rem, 2.6vw, 2.4rem);
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  align-items: center;
}
.sp-copy { min-width: 0; }
.sp-eyebrow {
  margin: 0 0 .55rem;
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
}
.sp-copy h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; }
.sp-lede { margin: .85rem 0 1rem; font-size: .98rem; color: var(--muted); max-width: 52ch; }
.sp-list {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: grid; gap: .4rem; font-size: .92rem; color: var(--muted);
}
.sp-list li { position: relative; padding-left: 1.5rem; }
.sp-list li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
.sp-price { margin: 0 0 1rem; display: flex; align-items: baseline; gap: .45rem; }

/* The mini page keeps the mock-ups' daylight tokens — it is a picture of a
   client's storefront, not page chrome. Flat boxes stand in for the inputs;
   nothing here is focusable, and the whole block is aria-hidden. */
.sp-demo { margin: 0; min-width: 0; }
.sp-mini {
  display: grid; gap: .55rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1rem 1rem 1.1rem;
}
.sp-mini-h { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.sp-mini-sub { font-size: .74rem; color: var(--ink-50); margin-bottom: .15rem; }
.sp-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.sp-mini-f { display: grid; gap: .22rem; min-width: 0; }
.sp-mini-f i {
  font-style: normal;
  font-family: var(--display); font-weight: 700; font-size: .6rem;
  letter-spacing: .04em; color: var(--ink-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-mini-f b {
  display: block; height: 1.55rem;
  background: var(--card); border: 1px solid var(--rule-2); border-radius: 2px;
}
.sp-mini-f b.area { height: 3.8rem; }
/* The subject field is a select in the Liquid — draw its caret. */
.sp-mini-f b.sel {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-50) 50%),
                    linear-gradient(135deg, var(--ink-50) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sp-mini-btn {
  justify-self: start; margin-top: .2rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: .72rem;
  padding: .6rem 1.1rem; border-radius: 2px;
}
.sp-demo-cap { margin-top: .55rem; font-size: .78rem; color: var(--faint); }

@media (max-width: 860px) {
  .shopify-panel { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 420px) {
  .sp-mini-row { grid-template-columns: 1fr; }
}

/* ── What's included — one dense strip of ticks ──────────────────────── */
.ticks {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.ticks li {
  position: relative;
  background: var(--panel);
  padding: .75rem .9rem .75rem 2.1rem;
  font-size: .9rem; color: var(--muted);
}
.ticks li em { font-style: normal; color: var(--text); font-weight: 600; }
.ticks li::before {
  content: ''; position: absolute; left: .8rem; top: 1.15em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
@media (max-width: 980px) { .ticks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ticks { grid-template-columns: 1fr; } }

.strip-note {
  margin: .9rem 0 0; max-width: none;
  font-size: .9rem; color: var(--faint);
  border-left: 3px solid var(--line-2); padding-left: .9rem;
}
.strip-note a { color: var(--blue); }

/* ── Shop (hidden until configured in main.js) ───────────────────────── */
.shop-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.shop-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; min-height: 120px; }
@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .shop-grid { grid-template-columns: 1fr; } }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.paths { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.path {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.2rem 1.2rem;
  display: flex; flex-direction: column;
}
.path.is-picked { border-color: var(--blue); background: var(--panel-2); }
.path-flag {
  position: absolute; top: -0.7rem; left: 1rem;
  margin: 0;
  font-family: var(--display);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--blue); color: #0e1014;
  padding: .28rem .6rem; border-radius: var(--r);
}
.path-name { font-size: 1.08rem; margin-bottom: .4rem; }
.path-price { margin: 0 0 .7rem; display: flex; align-items: baseline; gap: .45rem; }
.amount { font-size: clamp(1.8rem, 2.8vw, 2.2rem); }
.per { font-size: .92rem; color: var(--faint); }
.path-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; font-size: .92rem; color: var(--muted); }
.path-list li { position: relative; padding-left: 1.5rem; }
.path-list li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  rotate: -45deg;
}
.path-actions { margin-top: auto; display: grid; gap: .5rem; }
.path .btn, .path .path-actions { margin-top: auto; }
.path-actions .btn { margin-top: 0; }

@media (max-width: 760px) { .paths { grid-template-columns: 1fr; } .path-flag { top: -0.65rem; } }

/* ── Contact ─────────────────────────────────────────────────────────── */
.cta { padding-block: var(--sect); border-top: 1px solid var(--line); }
.cta-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.cta-copy .dim { color: var(--faint); }
.cta-alt { margin: .9rem 0 0; font-size: .98rem; color: var(--muted); }
.cta-alt a { color: var(--text); font-family: var(--display); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--blue); }
.cta-fine { margin: 1.2rem 0 0; font-size: .84rem; color: var(--faint); max-width: 46ch; }

.cta-form { display: grid; gap: .75rem; align-content: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .35rem; }
.field label {
  font-family: var(--display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.field input {
  width: 100%;
  padding: .75rem .85rem;
  background: var(--bg);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
}
.field input::placeholder { color: var(--faint); }
.field input:focus { border-color: var(--blue); outline: none; }
.field.is-bad input { border-color: #d96a58; }
.field-error { margin: 0; font-size: .84rem; color: #e8a396; }
.cta-note { margin: .3rem 0 0; font-size: .86rem; color: var(--faint); }
.cta-note.is-good { color: #86d9a5; }

@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem var(--gap); }
.foot-brand { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; }
.foot-tag {
  margin-left: .5rem; padding-left: .8rem; border-left: 1px solid var(--line-2);
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-links a { text-decoration: none; font-family: var(--display); font-size: .88rem; color: var(--muted); }
.foot-links a:hover { color: var(--text); }
.foot-legal { width: 100%; margin: 0; font-size: .82rem; color: var(--faint); }

/* ── Mobile call bar ─────────────────────────────────────────────────── */
.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: .5rem;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
  }
  .callbar-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .8rem .6rem;
    font-family: var(--display); font-weight: 700; font-size: .92rem;
    text-decoration: none; border-radius: var(--r);
    background: var(--hot); color: #14161a;
  }
  .callbar-btn.ghost { background: transparent; border: 1.5px solid var(--line-2); color: var(--text); }
  .foot { padding-bottom: 5.5rem; }
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar .btn { font-size: .8rem; padding: .55rem .85rem; white-space: nowrap; }
  .brand-word { font-size: .95rem; }
  .topbar-inner { gap: .7rem; }
  .rowhead { flex-direction: column; align-items: flex-start; gap: .2rem; }
}

/* ── Support chat ─────────────────────────────────────────────────────── */
/* The other way to reach us. The enquiry form takes a message and ends the
   interaction; this opens a conversation the visitor can watch, and Night Desk
   staff answer it from the hub. Everything here is built by support.js, so
   there is no markup in index.html to keep in step with these rules. */

.sup {
  position: fixed;
  right: clamp(.8rem, 2vw, 1.4rem);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  z-index: 60;                       /* over the sticky topbar, under nothing */
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
  font-family: var(--body);
}

/* ── the launcher ─────────────────────────────────────────────────────── */
.sup-launch {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--hot); color: #14161a;
  font-family: var(--display); font-weight: 700; font-size: .88rem;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sup-launch:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8); }
.sup-launch:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sup-launch-ico { width: 17px; height: 17px; flex: none; }
/* The global `svg { width:100%; height:100% }` reset does the sizing here; the
   fill has to be set explicitly because the button's colour is the text one. */
.sup-launch-ico svg { fill: currentColor; }

/* An answer arrived while the panel was shut. */
.sup-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e0483a; flex: none;
  box-shadow: 0 0 0 2px var(--hot);
}
.sup-launch.has-unread { animation: sup-nudge 1.6s ease-in-out 2; }
@keyframes sup-nudge {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-3px); }
  60%      { transform: translateY(0); }
}

/* ── the panel ────────────────────────────────────────────────────────── */
.sup-panel {
  width: min(23rem, calc(100vw - 1.6rem));
  max-height: min(32rem, calc(100vh - 7rem));
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.sup-panel[hidden] { display: none; }

.sup-head {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.sup-head-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sup-head-t b { font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }
.sup-head-s { font-size: .74rem; color: var(--faint); line-height: 1.4; }
.sup-x {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; padding: 5px;
  background: transparent; border: 0; border-radius: 5px;
  color: var(--muted); cursor: pointer;
}
.sup-x:hover { background: var(--line); color: var(--text); }
.sup-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.sup-log {
  flex: 1 1 auto; min-height: 5rem;
  overflow-y: auto; overscroll-behavior: contain;
  padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
}

.sup-msg {
  max-width: 85%;
  padding: .5rem .7rem;
  border-radius: 10px;
  font-size: .88rem; line-height: 1.5;
  /* A support message is whatever somebody typed, including a 400-character
     URL with no spaces in it. Without this one line that message decides the
     width of the panel and the layout breaks around it. */
  overflow-wrap: anywhere;
}
.sup-msg p { margin: 0; }
.sup-msg.is-me    { align-self: flex-end; background: var(--blue-deep); color: var(--text); border-bottom-right-radius: 3px; }
.sup-msg.is-staff { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.sup-when { display: block; margin-top: .2rem; font-size: .64rem; color: var(--faint); }

.sup-status {
  margin: .1rem 0; padding: .45rem .6rem;
  font-size: .76rem; line-height: 1.45; color: var(--muted);
  border-left: 2px solid var(--line-2); border-radius: 0 4px 4px 0;
  background: var(--panel-2);
}
.sup-status.is-ok  { border-left-color: var(--blue); }
.sup-status.is-err { border-left-color: #e0483a; color: #f0b3ac; }

.sup-intro {
  padding: .1rem .9rem .6rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.sup-intro[hidden] { display: none; }
.sup-f { display: flex; flex-direction: column; gap: .2rem; }
.sup-f > span {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.sup-f > span i { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.sup-f input,
.sup-ta {
  width: 100%;
  padding: .5rem .6rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 6px;
  font: inherit; font-size: .88rem;
}
.sup-f input:focus, .sup-ta:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent; }

.sup-form {
  display: flex; gap: .45rem; align-items: flex-end;
  padding: .1rem .9rem .6rem;
}
.sup-ta { resize: none; max-height: 7rem; line-height: 1.45; }
.sup-send {
  flex: none;
  padding: .55rem .9rem;
  background: var(--hot); color: #14161a;
  border: 0; border-radius: 6px;
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  cursor: pointer;
}
.sup-send:disabled { opacity: .5; cursor: default; }
.sup-send:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Off-screen rather than display:none. A field that is display:none is one
   many bots know to skip; one that is merely positioned away is not, and
   tabIndex -1 keeps a keyboard user out of it either way. */
.sup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sup-note {
  margin: 0; padding: 0 .9rem .8rem;
  font-size: .72rem; line-height: 1.5; color: var(--faint);
}
.sup-note a { color: var(--muted); }
.sup-end {
  background: none; border: 0; padding: 0;
  color: var(--faint); font: inherit; font-size: .72rem;
  text-decoration: underline; cursor: pointer;
}
.sup-end:hover { color: var(--muted); }

/* The mobile call bar owns the bottom of the screen below 760px, so the
   launcher sits above it rather than on top of the "Free mock-up" button —
   two tap targets in the same place is one mis-tap for every visitor. */
@media (max-width: 760px) {
  .sup { bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  .sup-panel { max-height: calc(100vh - 11rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sup-launch, .sup-launch:hover { transition: none; transform: none; }
  .sup-launch.has-unread { animation: none; }
}

/* ── Night Desk — the support chat, sold ──────────────────────────────── */
.deskrow { padding-top: 0; }
.desk-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.4rem, 3.5vw, 2.6rem);
}
.desk-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .5rem 0 .9rem; }
.desk-lede { color: var(--muted); max-width: 44ch; margin: 0 0 1.1rem; }
.desk-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.desk-list li { display: flex; gap: .6rem; font-size: .93rem; color: var(--text); }
.desk-list li::before {
  content: ""; flex: none; margin-top: .52rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.desk-foot { font-size: .86rem; color: var(--faint); margin: 0; }
.desk-foot a { color: var(--blue); }

/* The mock panel. Daylight tokens, like every other mock-up on the page. */
.desk-shot {
  background: var(--card); color: var(--ink);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  display: flex; flex-direction: column; max-width: 420px; width: 100%; margin-left: auto;
}
.ds-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: .82rem; font-weight: 700;
}
.ds-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9e6a; flex: none; }
.ds-close { margin-left: auto; color: var(--ink-50); font-size: 1.05rem; line-height: 1; }
.ds-body { padding: .9rem; display: flex; flex-direction: column; gap: .5rem; background: var(--paper-2); }
.ds-msg p {
  margin: 0; padding: .55rem .75rem; font-size: .84rem; line-height: 1.45;
  border-radius: 12px; max-width: 85%;
}
.ds-msg.them p { background: var(--card); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.ds-msg.us { display: flex; justify-content: flex-end; }
.ds-msg.us p { background: var(--blue-deep); color: var(--paper); border-bottom-right-radius: 4px; }
.ds-compose {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .9rem; border-top: 1px solid var(--rule);
  font-size: .82rem; color: var(--ink-50);
}
.ds-send {
  margin-left: auto; font-family: var(--display); font-weight: 700; font-size: .74rem;
  background: var(--blue-deep); color: var(--paper); padding: .32rem .7rem; border-radius: 5px;
}

@media (max-width: 860px) {
  .desk-panel { grid-template-columns: 1fr; }
  .desk-shot { margin: 0 auto; }
}

/* The section label above the Night Desk heading. The build mock-ups have
   their own .bs-eyebrow scoped inside .build-site; this is the page-level one. */
.desk-copy .eyebrow {
  margin: 0; font-family: var(--display); font-size: .62rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue);
}

/* ── One price, no tiers — sits under the build row ───────────────────── */
.oneprice {
  margin-top: var(--gap);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.1rem, 2.6vw, 1.8rem);
}
.op-mark {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding-right: clamp(1.2rem, 3vw, 2.4rem); border-right: 1px solid var(--line-2);
}
.op-amt {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: -.04em; line-height: 1; color: var(--text);
}
.op-amt i { font-style: normal; font-size: .42em; font-weight: 700; color: var(--faint); letter-spacing: 0; }
.op-or {
  font-family: var(--display); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  padding: .15rem 0;
}
.op-copy .eyebrow {
  margin: 0; font-family: var(--display); font-size: .62rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue);
}
.op-copy h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: .35rem 0 .5rem; }
.op-copy p { color: var(--muted); font-size: .93rem; margin: 0 0 .5rem; max-width: 62ch; }
.op-small { font-size: .84rem !important; color: var(--faint) !important; margin: 0 !important; }

@media (max-width: 700px) {
  .oneprice { grid-template-columns: 1fr; }
  .op-mark {
    flex-direction: row; align-items: baseline; gap: .6rem;
    padding: 0 0 .9rem 0; border-right: 0; border-bottom: 1px solid var(--line-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Inner pages

   Everything above this line belongs to the homepage. Everything below is
   for the pages that hang off it — the two ad landing pages, /pricing, the
   case studies, the cost guide, and the mock-up host.

   The rule these follow: reuse the homepage's classes wherever the shape is
   the same (.wrap, .section, .rowhead, .btn, .ticks, .paths, .cta, .foot),
   and only add a class here when an inner page needs a shape the homepage
   never had. A landing page that quietly forks the button styles is a
   landing page that looks like a different company by the third redesign.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sub-page hero ───────────────────────────────────────────────────── */
/* The homepage hero is two columns and a full screen tall because it has to
   do the whole pitch. These don't: the visitor arrived from an ad or a
   search for one specific thing, so the hero states that thing and gets out
   of the way. One column, capped measure, no viewport-height games. */
.subhero {
  padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.subhero h1 { max-width: 18ch; }
.subhero .lede { max-width: 52ch; }
.subhero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }

/* Breadcrumbs earn their place on the case studies and the guide, where a
   visitor can land cold from search with no idea what site they are on. */
.crumbs {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 1rem;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span { margin-inline: .45rem; opacity: .5; }

.eyebrow-line {
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .7rem;
}

/* ── Long-form prose ─────────────────────────────────────────────────── */
/* The cost guide is the only page on this site that is genuinely an article,
   and articles need a measure. 68ch, serif body, generous leading — the
   dashboard-dense treatment the homepage uses would make 1,500 words
   unreadable. */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 2.4rem 0 .7rem; scroll-margin-top: 5rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.7rem 0 .5rem; color: var(--text); }
.prose p { margin: 0 0 1rem; color: var(--muted); }
.prose p strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.2rem; color: var(--muted); }
.prose li { margin-bottom: .4rem; }
.prose li strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--blue); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* A pulled-out claim mid-article. Not a testimonial — this site doesn't have
   any it can honestly print yet, and an invented one is worse than none. */
.callout {
  border-left: 3px solid var(--blue);
  background: var(--panel);
  padding: 1rem 1.1rem; margin: 1.6rem 0;
  border-radius: 0 var(--r) var(--r) 0;
}
.callout p { margin: 0; color: var(--text); }
.callout p + p { margin-top: .6rem; color: var(--muted); font-size: .92rem; }

/* ── Price table (the guide's market-rate comparison) ────────────────── */
.ptable { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1.1rem; font-size: .93rem; }
.ptable caption { text-align: left; color: var(--faint); font-size: .85rem; padding-bottom: .6rem; }
.ptable th, .ptable td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
.ptable thead th {
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  border-bottom-color: var(--line-2);
}
.ptable td { color: var(--muted); vertical-align: top; }
.ptable td:first-child { color: var(--text); font-weight: 600; }
.ptable tr.is-us td { background: var(--panel); color: var(--text); }
.table-scroll { overflow-x: auto; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); margin-top: 1.4rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: .95rem 2rem .95rem 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: .98rem;
  letter-spacing: -0.015em; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .3rem; top: .8rem;
  font-size: 1.2rem; color: var(--faint); line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 1rem; color: var(--muted); max-width: 68ch; }

/* ── Case study ──────────────────────────────────────────────────────── */
/* Three stages down the page — what was wrong, what got built, what is
   different now — each one a numbered block so the story reads in order
   even when somebody skims it in eight seconds. */
.case-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin: 0;
}
.case-facts > div { background: var(--panel); padding: .85rem 1rem; }
.case-facts dt {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  margin-bottom: .3rem;
}
.case-facts dd {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.02em; color: var(--text);
}

.stage {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.stage-n {
  font-family: var(--display); font-weight: 800; font-size: 2.4rem;
  line-height: 1; letter-spacing: -0.04em; color: var(--line-2);
}
.stage-body { max-width: 62ch; }
.stage-body h2 { margin-bottom: .6rem; }
.stage-body p { margin: 0 0 .9rem; color: var(--muted); }
.stage-body ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--muted); }
.stage-body li { margin-bottom: .35rem; }
.stage-body li strong { color: var(--text); font-weight: 600; }

/* The screenshot, framed the way the homepage frames its build shots so the
   two pages plainly show the same object. */
.case-shot { margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem); }
.case-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r);
}
.case-shot figcaption { margin-top: .6rem; font-size: .87rem; color: var(--faint); }

/* Where a case study points at the other one. Two studies is the minimum
   credible number, so each one has to hand the reader the other. */
.nextcase {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); padding: 1rem 1.2rem;
}
.nextcase p { margin: 0; color: var(--muted); font-size: .93rem; }
.nextcase p strong {
  color: var(--text); font-weight: 600;
  display: block; font-family: var(--display);
}
.nextcase .btn { margin-left: auto; }

/* ── Two- and three-column tick lists ────────────────────────────────── */
.ticks-2 { grid-template-columns: repeat(2, 1fr); }
.ticks-3 { grid-template-columns: repeat(3, 1fr); }
/* These sit later in the file than the .ticks breakpoints above, so they win
   at equal specificity and have to restate their own narrow behaviour. */
@media (max-width: 980px) { .ticks-3 { grid-template-columns: repeat(2, 1fr); } }

/* Not-included list. Saying plainly what the $550 does not buy is what keeps
   the number believable — and stops the job growing after it is agreed. */
.nots { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; }
.nots li { position: relative; padding-left: 1.6rem; color: var(--faint); font-size: .9rem; }
.nots li::before {
  content: '\00d7'; position: absolute; left: .45rem; top: -.05em;
  color: var(--line-2); font-size: 1.1rem; line-height: 1.4;
}

/* ── Mock-up preview host ────────────────────────────────────────────── */
/* One person ever sees a given preview: the owner of the business it is for.
   It is noindexed, unlinked, and deliberately plain — the mock-up is the
   thing being looked at, so the page around it says who it is for, what
   happens next, and nothing else. */
.preview-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: .7rem clamp(.9rem, 3vw, 1.6rem);
}
.preview-for {
  font-family: var(--display); font-weight: 700;
  font-size: .95rem; letter-spacing: -0.02em;
}
.preview-for span { color: var(--faint); font-weight: 500; }
.preview-bar .btn { margin-left: auto; }
.preview-note {
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
}
.preview-frame {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--paper);
  margin-block: clamp(1.2rem, 3vw, 2rem);
}
.preview-frame iframe { display: block; width: 100%; height: 78vh; border: 0; }
.preview-frame img { display: block; width: 100%; height: auto; }

/* ── Narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .case-facts { grid-template-columns: repeat(2, 1fr); }
  .ticks-2, .ticks-3 { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; gap: .4rem; }
  .stage-n { font-size: 1.6rem; }
  .nextcase .btn { margin-left: 0; width: 100%; }
  .preview-frame iframe { height: 68vh; }
}
@media (max-width: 560px) {
  .case-facts { grid-template-columns: 1fr; }
  .subhero-actions .btn { width: 100%; text-align: center; }
}