/* Northstar Digital — one stylesheet, same origin, no imports, no webfonts. */

:root {
  --paper: #FAF8F4;
  --paper-alt: #F2EEE6;
  --ink: #101826;
  --ink-soft: #55606F;
  --rule: #DCD6CA;
  --panel: #0C1320;
  --panel-ink: #F2EFE9;
  --panel-soft: #A8B2C0;
  --panel-rule: #26303F;
  --accent: #D89B3C;
  --accent-ink: #101826;
  --accent-text: #8A5A12;
  --accent-on-panel: #E7B463;
  --mess: #E24B1E;
  --mess-text: #A8320F;
  --card: #FFFDF8;
  --card-line: #E6DFD2;
  --demo-brand: #9A5227;
  --demo-brand-ink: #FAF5EC;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-hand: "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;

  --gutter: 20px;
  --measure: 34rem;
  --radius: 3px;
  /* How far the finished-site frame hangs past the hero's bottom edge on a desktop. The
     next section's top padding is built from the same number, so nothing is covered. */
  --hero-overhang: 0px;
  /* Distance from the content edge to the viewport edge. Lets the frame break out of
     its column by exactly as much room as the screen actually has. */
  --edge: calc((100vw - min(100vw, 72rem)) / 2 + var(--gutter));
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.025em; font-weight: 760; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration-thickness: 0.13em; }

:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; }
.panel :focus-visible, .site-footer :focus-visible, .site-header :focus-visible, .sticky-buy :focus-visible {
  outline-color: var(--accent-on-panel);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }
.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; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ----------
   The headline is three deliberate lines: YOUR WEBSITE. / WITHOUT THE / WEBSITE BUILDER.
   Measured at weight 800, the longest line is 8.72em wide; sizes below keep it inside
   its column with ~8% to spare for wider system faces than Segoe UI. On a narrow phone
   the last line wraps to WEBSITE / BUILDER. — a poster, not a squeeze. */

h1 { font-size: clamp(2.2rem, 11.2vw, 2.7rem); line-height: 0.94; letter-spacing: -0.04em; font-weight: 800; text-transform: uppercase; }
@media (min-width: 560px) { h1 { font-size: clamp(3rem, 9vw, 4.6rem); } }
@media (min-width: 980px) { h1 { font-size: clamp(3.3rem, calc(6.09vw - 2.5px), 4.1rem); } }
h2 { font-size: clamp(1.9rem, 4.8vw, 3.1rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 780; }
h3 { font-size: 1.1875rem; letter-spacing: -0.015em; font-weight: 700; }

.eyebrow { font-size: 0.75rem; font-weight: 720; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1rem; }
.panel .eyebrow { color: var(--accent-on-panel); }
.lede { font-size: clamp(1.0625rem, 2.4vw, 1.25rem); color: var(--ink-soft); max-width: var(--measure); }
.panel .lede { color: var(--panel-soft); }
.section-intro { max-width: 40rem; margin-bottom: 2.25rem; }
.section-intro .lede { margin-top: 1rem; }

/* ---------- header ---------- */

.site-header { background: var(--panel); color: var(--panel-ink); border-bottom: 1px solid var(--panel-rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 60px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--panel-ink); text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 1.0625rem; padding-block: 0.65rem; }
.brand .star { color: var(--accent); flex: none; }
.brand:hover { color: #fff; }
.header-links { display: flex; align-items: center; gap: 0 1.25rem; flex-wrap: wrap; }
/* 0.65rem of padding makes each link a 45px tap target without changing the header. */
.header-links a { color: var(--panel-soft); text-decoration: none; font-size: 0.9375rem; padding-block: 0.65rem; }
.header-links a:hover { color: var(--panel-ink); text-decoration: underline; }
/* A phone keeps one link so the header is one row and the hero stays high. The other
   destinations are one scroll away and all of them are repeated in the page. */
@media (max-width: 479px) { .header-links a:not(:first-child) { display: none; } }
@media (min-width: 480px) and (max-width: 759px) { .header-links a:nth-child(2), .header-links a:nth-child(3) { display: none; } }

/* ---------- sections ---------- */

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.panel { background: var(--panel); color: var(--panel-ink); }
.panel h1, .panel h2, .panel h3 { color: var(--panel-ink); }
.panel p { color: var(--panel-soft); }
.alt { background: var(--paper-alt); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: inherit; font-weight: 720; letter-spacing: 0.01em; text-transform: uppercase; font-size: 0.9375rem;
  padding: 0.95rem 1.5rem; min-height: 52px;
  border-radius: var(--radius); text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  /* Wraps rather than overflowing: at a phone with large text turned on, one line of
     GET MY WEBSITE — $149 is wider than the screen, and a clipped buy button is lost. */
  text-align: center; text-wrap: balance;
}
.btn-buy { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-text); }
.btn-buy:hover { background: #E7AC55; }
.btn-ghost { background: transparent; color: var(--panel-ink); border-color: var(--panel-soft); }
.btn-ghost:hover { border-color: var(--panel-ink); background: rgba(255,255,255,0.05); }
.btn-unavailable { background: transparent; color: var(--panel-soft); border: 2px dashed var(--panel-rule); cursor: not-allowed; }
.unavailable-note { flex-basis: 100%; margin-top: 1rem; font-size: 0.9375rem; color: var(--panel-soft); max-width: 46ch; }
.unavailable-note a { color: var(--accent-on-panel); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
/* A buy button on paper sits on cream, so its label and border are checked against
   paper in tokens.mjs — the gold fill alone would fail as a control edge. */

/* ---------- the price ---------- */

.price-mark { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.price-mark__amount { font-size: clamp(2.7rem, 6.5vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--panel-ink); }
.price-mark__once { font-weight: 640; color: var(--panel-soft); font-size: 1.0625rem; }
.price-mark__terms { flex-basis: 100%; margin-top: 0.35rem; font-size: 0.75rem; font-weight: 720; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-panel); }

/* ---------- RAW INPUT: the intake card ---------- */

.card-raw {
  position: relative; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 0.75rem 0.85rem 0.85rem 1.05rem;
  box-shadow: 0 14px 34px -22px rgba(16,24,38,0.45), 0 1px 0 rgba(16,24,38,0.05);
  transform: rotate(var(--tilt, 0deg));
}
.card-raw::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mess); border-radius: 3px 0 0 3px; }
.card-raw__tag { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mess-text); margin-bottom: 0.45rem; }
.card-raw__tag::before { content: ""; width: 0.45rem; height: 0.45rem; background: var(--mess); border-radius: 1px; flex: none; }
.card-raw__hand { font-family: var(--font-hand); font-size: 1rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.card-raw__hand span { display: block; }
/* A filename that does not fit is truncated like a file browser truncates it —
   "logo_final_FI…" — rather than broken mid-word. */
.card-raw__file { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-soft); margin-top: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-raw--photo img { border-radius: 2px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-raw--logo .mono {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--demo-brand); color: var(--demo-brand-ink);
  font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; border-radius: 3px;
}

/* ---------- TRANSFORMATION: the gold seam ---------- */

.seam { color: var(--accent-text); overflow: visible; }
.panel .seam { color: var(--accent); }
.seam path { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.seam circle { fill: currentColor; }
.has-js .seam path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s; }
.has-js .seam.is-in path { stroke-dashoffset: 0; }

/* ---------- FINISHED: the frame ---------- */

.frame { background: #0A101B; border: 1px solid var(--panel-rule); border-radius: 7px; overflow: hidden; box-shadow: 0 40px 70px -34px rgba(12,19,32,0.65), 0 2px 0 rgba(255,255,255,0.03) inset; }
.frame__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; background: #111A28; border-bottom: 1px solid var(--panel-rule); }
.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-rule); flex: none; }
.frame__bar span { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--panel-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame__shot img { width: 100%; }
.frame--phone { border-radius: 24px; border: 6px solid #111A28; background: #111A28; box-shadow: 0 30px 50px -24px rgba(12,19,32,0.7); }
.frame--phone .frame__shot { border-radius: 18px; overflow: hidden; }
.frame__fallback { padding: clamp(1.5rem, 5vw, 3rem); color: var(--panel-soft); font-size: 0.9375rem; }

/* ---------- reveal: the static page IS the design ----------
   Hidden only while JS is present AND IntersectionObserver exists (the head script sets
   .has-js only then). Without either, and in print, everything is simply visible. */
.reveal { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.has-js .reveal { opacity: 0; transform: translateY(16px) rotate(var(--tilt-in, 0deg)); }
.has-js .is-in .reveal, .has-js .reveal.is-in { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.card-raw.reveal { --tilt-in: var(--tilt-start, -5deg); }
.is-in > .reveal:nth-child(2) { transition-delay: 0.08s; }
.is-in > .reveal:nth-child(3) { transition-delay: 0.16s; }
.is-in > .reveal:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
  .has-js .seam path { stroke-dashoffset: 0; }
}

/* ================================================================ hero */

.hero { position: relative; z-index: 1; padding-block: clamp(1.75rem, 5vw, 4rem) clamp(2.5rem, 6vw, 3.5rem); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; row-gap: 1.5rem; }
.hero-head { grid-area: head; }
.hero-stack { grid-area: stage; }
.hero-body { grid-area: body; }
.hero-body .lede { max-width: 30rem; }
.hero-body .price-mark { margin-top: 1.4rem; }
.hero-body .actions { margin-top: 1.25rem; }
@media (max-width: 559px) { .hero-body .actions .btn { flex: 1 1 100%; } }

/* --- phone and tablet: the mess on the left, the finished phone on the right, the seam
   curling from one into the other. Composed, not stacked — and the whole thing sits on
   the first screen, above the explanation. --- */
/* The pile is IN FLOW here, with negative margins for the overlap, so its height is
   whatever its cards need: it cannot spill into the copy below at any width, in any
   system font, or at 200% text size. The phone is centred against it and paints above;
   the cards tuck slightly under its left edge. */
.hero-stack { position: relative; display: grid; grid-template-columns: 47% 53%; align-items: center; width: 100%; max-width: 30rem; margin-inline: auto; }
.hero-stack .stage-cards { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding-block: 0.25rem; }
.hero-stack .card-raw { position: relative; }
.hero-stack .card-raw--logo  { width: 70%; --tilt: -6deg; --tilt-start: -13deg; }
.hero-stack .card-raw--photo { width: 64%; margin: -1.9rem 0 0 40%; z-index: 1; --tilt: 5deg; --tilt-start: 11deg; }
.hero-stack .card-raw--notes { width: 100%; margin-top: -1.4rem; z-index: 2; --tilt: -2.5deg; --tilt-start: -8deg; }
.hero-stack .card-raw--hours { display: none; }
.hero-stack .card-raw__hand { font-size: 0.875rem; }
.hero-stack .seam--c { position: absolute; left: 38%; top: 6%; width: 14%; height: 22%; z-index: 1; }
.hero-stack .seam--h { display: none; }
.hero-stack .frame--hero { grid-column: 2; grid-row: 1; position: relative; z-index: 3; width: 94%; justify-self: end;
  border-radius: 24px; border: 6px solid #111A28; background: #111A28; box-shadow: 0 30px 50px -24px rgba(12,19,32,0.7); }
.hero-stack .frame--hero .frame__bar { display: none; }
.hero-stack .frame--hero .frame__shot { border-radius: 18px; overflow: hidden; }

/* The bakery is fictional and the hero must not let it pass for a customer. */
.stage-caption { grid-column: 1 / -1; grid-row: 2; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--panel-soft); text-align: right; }

@media (min-width: 560px) {
  .hero-stack { max-width: 36rem; }
  .hero-stack .card-raw__hand { font-size: 1rem; }
  .hero-stack .frame--hero { width: 86%; }
}

/* --- phone and tablet: the offer before the picture. The price and the buy button sit
   directly under the headline, so a visitor sees $149 and can tap it without scrolling;
   the transformation follows immediately, then the one-line explanation. hero-body's
   children become grid items here so they can sit either side of the stage; its markup
   is unchanged, and so is the desktop layout below. --- */
@media (max-width: 979px) {
  .hero-grid { grid-template-areas: "head" "price" "actions" "stage" "lede"; }
  .hero-body { display: contents; }
  .hero-body .price-mark { grid-area: price; margin-top: 0; }
  .hero-body .actions { grid-area: actions; margin-top: -0.25rem; }
  .hero-body .lede { grid-area: lede; }
}

/* --- desktop: copy left, the pile top-right, the finished site large and breaking out of
   its column, over the hero's bottom edge and into the next section. --- */
@media (min-width: 980px) {
  :root { --hero-overhang: 150px; }
  .hero { padding-bottom: 0; }
  .hero-grid {
    grid-template-columns: minmax(0, 7.2fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head stage" "body stage";
    column-gap: clamp(2rem, 3vw, 3rem); row-gap: 1.25rem;
  }
  .hero-body { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
  .hero-stack { display: block; max-width: none; margin: 0; min-height: 28rem; }
  .hero-stack .stage-cards { position: absolute; inset: 0; display: block; padding: 0; }
  .hero-stack .card-raw { position: absolute; margin: 0; }
  .hero-stack .card-raw--logo  { left: 0;   top: 0;      width: 29%; --tilt: -6deg; --tilt-start: -13deg; }
  .hero-stack .card-raw--photo { left: 26%; top: 0.9rem; width: 25%; --tilt: 4deg;  --tilt-start: 10deg; }
  .hero-stack .card-raw--hours { display: block; left: 56%; top: 0.4rem; width: 30%; --tilt: 5deg; --tilt-start: 11deg; }
  .hero-stack .card-raw--notes { left: 6%;  top: 9.25rem; width: 46%; --tilt: -3deg; --tilt-start: -8deg; }
  .hero-stack .card-raw__hand { font-size: 0.9375rem; }
  .hero-stack .seam--c { display: none; }
  /* The seam starts at the notes card and must END ON the frame's top edge — whose
     height changes with the viewport, because the frame breaks out of its column by as
     much room as the screen has. So its bottom is computed from the frame's own size:
     width (95% of the stage + the break-out) × the screenshot's 860/1400 ratio + 38px of
     chrome. Browsers without container units get a fixed seam that meets the frame at
     the common 1280–1920 widths. */
  /* The break-out: as much room as the screen has, capped so a wide monitor gets the
     same composition as a laptop instead of a frame that swallows the mess. */
  .hero-stack { container-type: inline-size; --breakout: min(max(0px, var(--edge) - 28px), 9rem); }
  .hero-stack .seam--h { display: block; position: absolute; left: 44%; top: 12.75rem; width: 40%; height: 8rem; z-index: 3; }
  /* An <svg> is a replaced element: with top AND bottom it keeps its intrinsic height and
     ignores bottom. So the height is explicit — the stage's height, minus where the seam
     starts, minus how far above the stage's bottom the frame's top edge sits. */
  @supports (width: 1cqw) {
    .hero-stack .seam--h {
      --frame-h: calc((95cqw + var(--breakout)) * 0.6143 + 38px);
      height: calc(100% - 12.75rem - (var(--frame-h) - var(--hero-overhang) - 14px));
    }
  }
  .hero-stack .frame--hero {
    display: block; position: absolute; z-index: 4; width: auto;
    border-radius: 7px; border: 1px solid var(--panel-rule); background: #0A101B;
    box-shadow: 0 40px 70px -34px rgba(12,19,32,0.65);
    left: 5%; right: calc(-1 * var(--breakout));
    bottom: calc(-1 * var(--hero-overhang));
    transform: rotate(-1.25deg); transform-origin: 50% 100%;
  }
  .hero-stack .frame--hero .frame__bar { display: flex; }
  .hero-stack .frame--hero .frame__shot { border-radius: 0; }
  .hero-stack .frame--hero.reveal { --tilt: -1.25deg; --tilt-in: -1.25deg; }
  /* Under the overhanging frame, on the cream of the next section — within the padding
     that section already reserves for the overhang. */
  .hero-stack .stage-caption { position: absolute; margin: 0; right: calc(-1 * var(--breakout)); bottom: calc(-1 * var(--hero-overhang) - 2.25rem); color: var(--ink-soft); }
}

/* The section after the hero makes room for the overhang, measured from the same
   variable. On a phone there is no overhang; a navy wedge carries the hero's edge. */
/* overflow-x: clip, like the hero: a tilted card rotates a few pixels past its box, and
   at large text sizes that must not become a sideways scroll. */
#mess { position: relative; overflow-x: clip; padding-top: calc(var(--hero-overhang) + clamp(3rem, 7vw, 5.5rem)); }
#mess::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--panel); clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); }
@media (min-width: 980px) { #mess::before { display: none; } }

/* ================================================================ mess → website */

.mess-grid { display: grid; gap: 1.25rem; }
.went-in__label, .came-out__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }
.went-in__label { color: var(--mess-text); }
.went-in__label::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--mess); }
.came-out__label { color: var(--accent-text); }
.came-out__label::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--accent); border-radius: 50%; }
/* Notes across the top; photo and prices side by side beneath. Three cards, no hole. */
.went-in__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; align-items: start; max-width: 26rem; }
.went-in__cards .card-raw--notes { grid-column: 1 / -1; --tilt: -1.5deg; --tilt-start: -6deg; }
.went-in__cards .card-raw--photo { --tilt: 2.5deg; --tilt-start: 8deg; }
.went-in__cards .card-raw--prices { --tilt: -1.5deg; --tilt-start: -6deg; margin-top: 0.6rem; }
.mess-seam-wrap .seam--v { width: 44px; height: 4.5rem; margin: 0 auto; }
.mess-seam-wrap .seam--h { display: none; }
.came-out .frame--desktop { display: none; }
.came-out .frame--phone { width: 68%; max-width: 17rem; margin-inline: auto; }
.mess-caption { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--ink-soft); max-width: 34rem; }
.mess-caption b { color: var(--ink); font-weight: 700; }
/* Stacked (phone and tablet), "went in" and "came out" share one centred column, so the
   cards, the seam and the phone line up as one sequence rather than drifting apart. */
@media (max-width: 899px) { .went-in, .came-out { max-width: 26rem; margin-inline: auto; } }
@media (min-width: 900px) {
  /* The output must dominate: the widest column, a lift, the heavier shadow. */
  .mess-grid { grid-template-columns: minmax(0, 4.2fr) minmax(0, 1.5fr) minmax(0, 7fr); gap: 1rem; align-items: center; }
  .mess-seam-wrap .seam--v { display: none; }
  .mess-seam-wrap .seam--h { display: block; width: 100%; height: 7rem; }
  .came-out .frame--desktop { display: block; transform: rotate(0.75deg); box-shadow: 0 50px 80px -34px rgba(12,19,32,0.7); }
  .came-out .frame--desktop.reveal { --tilt: 0.75deg; --tilt-in: 0.75deg; }
  .came-out .frame--phone { display: none; }
}

/* ================================================================ sample */

.sample-shots { display: grid; gap: 1px; background: var(--panel-rule); }
.sample-shots .shot-desktop { display: none; }
@media (min-width: 760px) {
  .sample-shots { grid-template-columns: 1.9fr 1fr; align-items: start; }
  .sample-shots .shot-desktop { display: block; }
}
.sample-shots img { width: 100%; min-width: 0; background: var(--panel); }
.sample-actions { margin-top: 1.75rem; display: grid; gap: 1rem; justify-items: start; }
.sample-note { font-size: 0.875rem; color: var(--panel-soft); max-width: 40rem; }

/* ================================================================ how */

.steps-row { display: grid; gap: 1.25rem; list-style: none; counter-reset: step; }
.step5 { border-top: 2px solid var(--rule); padding-top: 1rem; }
.step5 h3 { display: flex; gap: 0.7rem; align-items: baseline; font-size: 1.25rem; }
.step5 h3::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--accent-text); letter-spacing: 0.06em; }
.step5 p { margin-top: 0.45rem; color: var(--ink-soft); font-size: 0.96875rem; }
@media (min-width: 640px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .steps-row { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } }

/* ================================================================ why */

.why-grid { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .why-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.why-col h3 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 720; margin-bottom: 0.9rem; color: var(--accent-text); }

/* ---------- tick / cross lists ---------- */

.ticks { list-style: none; display: grid; gap: 0.7rem; }
.ticks li { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.7rem; align-items: start; }
.ticks svg { margin-top: 0.3rem; flex: none; }
.ticks .tick { color: var(--accent-text); }
/* Crosses are ink, not vermilion: vermilion means raw input and nothing else. */
.ticks .cross { color: var(--ink-soft); }
.ticks li b { font-weight: 680; }
.ticks li span { color: var(--ink-soft); display: block; }
.ticks--compact { gap: 0.6rem; }
.ticks--compact li b { font-weight: 640; }
/* align-items: start — each list is a grid, and a shorter list stretched to its taller
   neighbour's height spreads its rows apart, so the two columns stop lining up. */
.included-grid { display: grid; gap: 0.6rem 2rem; align-items: start; }
@media (min-width: 640px) { .included-grid { grid-template-columns: 1fr 1fr; } }
.fine { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-soft); }
.section-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.section-cta .fine { margin-top: 0; }

/* ================================================================ compare */

.compare { display: grid; gap: 1px; background: var(--panel-rule); border: 1px solid var(--panel-rule); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .compare { grid-template-columns: repeat(4, 1fr); } }
.compare__card { background: var(--panel); padding: clamp(1.25rem, 3vw, 1.75rem); }
.compare__card h3 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-soft); font-weight: 720; margin-bottom: 0.9rem; }
.compare__card p { font-size: 1.125rem; line-height: 1.35; color: var(--panel-ink); font-weight: 600; }
.compare__card p + p { margin-top: 0.3rem; color: var(--panel-soft); font-weight: 500; }
.compare__card--express { box-shadow: inset 0 0 0 2px var(--accent); }
.compare__card--express h3 { color: var(--accent-on-panel); }
.compare__card--express p + p { color: var(--panel-ink); }

/* ================================================================ proof (real customers only) */

.proof-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.proof-card { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); margin: 0; }
.proof-card figcaption { padding: 0.9rem 1rem; font-size: 0.9375rem; }
.proof-card figcaption b { display: block; }
.proof-card figcaption span { color: var(--ink-soft); }

/* ================================================================ faq */

.faq { border-top: 1px solid var(--rule); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 640; font-size: 1.0625rem; position: relative; text-wrap: balance; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 1.5rem; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(45deg); transition: transform 0.18s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq .answer { padding: 0 0 1.35rem; color: var(--ink-soft); max-width: var(--measure); }
.faq .answer p + p { margin-top: 0.75rem; }

/* ================================================================ final cta + sticky */

.buy-row { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 760px) { .buy-row { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.buy-lede { margin-top: 1rem; }
#buy .actions { margin-top: 1.25rem; }

/* Hidden with visibility as well as transform, so an off-screen bar is out of the Tab
   order and the accessibility tree — not a focusable link below the fold. */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--panel); color: var(--panel-ink); border-top: 1px solid var(--panel-rule);
  padding: 0.45rem max(var(--gutter), env(safe-area-inset-right)) calc(0.45rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  transform: translateY(110%); visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.sticky-buy.is-on { transform: translateY(0); visibility: visible; transition: transform 0.28s ease, visibility 0s linear 0s; }
.sticky-buy__price { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.15; color: var(--panel-ink); }
.sticky-buy__price small { display: block; font-weight: 640; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-on-panel); white-space: nowrap; }
.sticky-buy .btn { min-height: 46px; padding: 0.6rem 1rem; }
@media (max-width: 979px) { .has-js .sticky-buy { display: flex; } }
@media (prefers-reduced-motion: reduce) { .sticky-buy, .sticky-buy.is-on { transition: none; } }

/* ================================================================ Care, on the landing page
   Optional and calm: a plain card on the alternate band. No vermilion (that means raw
   input), no badge, no pill, no button — Care is chosen on the order page. */

.care-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 900px) {
  .care-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; }
  .care-row .section-intro { margin-bottom: 0; }
}
.care-card { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(1.25rem, 3vw, 1.75rem); }
.care-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-bottom: 1.1rem; }
.care-price__amount { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.care-price__per { font-weight: 640; color: var(--ink-soft); }
.care-price__tag { margin-left: auto; font-size: 0.75rem; font-weight: 720; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.care-card .fine { margin-top: 1.1rem; font-size: 0.875rem; }
.care-note { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; max-width: 30rem; }

/* ================================================================ order page
   Two questions and a choice. The summary sits on navy with the same price treatment
   as the landing page; the choice sits on cream, Express first and primary. */

.order-top { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
/* A product label here, not the landing page's poster: the choice below should be close. */
.order-head h1 { font-size: clamp(1.6rem, 9.4vw, 3.3rem); overflow-wrap: anywhere; }
@media (min-width: 560px) { .order-head h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); } }
.order-included .ticks--compact { gap: 0.45rem; }
#choose { padding-top: clamp(2.25rem, 5vw, 3.5rem); }
#choose .section-intro { margin-bottom: 1.5rem; }
#choose h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); }
/* minmax(0, 1fr): a bare grid track grows to its longest word, and at 200% text
   NORTHSTAR is wider than a phone — it pushed the whole column 66px off screen. */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) { .order-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: start; } }
.order-head .price-mark { margin-top: 1.25rem; }
.order-head .lede { margin-top: 1.25rem; }
.order-included h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 720; color: var(--accent-on-panel); margin-bottom: 1rem; }
.order-included__cols { display: grid; gap: 0.6rem 2rem; align-items: start; }
/* Two short columns only while the summary spans the full width; beside the headline on a
   desktop, one column reads better than two cramped ones. */
@media (min-width: 560px) and (max-width: 899px) { .order-included__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.panel .ticks .tick { color: var(--accent); }
.panel .ticks li b { color: var(--panel-ink); }
.order-delivery { margin-top: 1.25rem; font-size: 0.9375rem; }

/* align-items: start — each card is as tall as what it says. Stretching Express to match
   Care's longer terms left it a mostly empty box, which made the $149 option look like
   the lesser one. */
.options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 760px) {
  .options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .options--single { grid-template-columns: minmax(0, 32rem); }
}
.option { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(1.25rem, 3vw, 1.75rem); }
.option__tag { font-size: 0.75rem; font-weight: 720; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.option h3 { margin-top: 0.4rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.option__price { margin-top: 0.6rem; color: var(--ink-soft); font-weight: 600; }
.option__price b { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); margin-right: 0.15rem; }
.option__line { margin-top: 0.6rem; font-weight: 600; }
.option .ticks { margin-top: 1rem; }
.option__fine { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-soft); }
.option__billing { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink); font-weight: 600; }
.option__action { padding-top: 1.4rem; }
.option__action .btn { width: 100%; }
.order-foot { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* care.html — where a finished intake lands. A confirmation first, calm, so the headline
   is the order page's product-label size rather than the landing page's poster. */
.care-top { padding-block: clamp(2rem, 5vw, 3.25rem); }
.care-top h1 { font-size: clamp(1.9rem, 8vw, 3.1rem); overflow-wrap: anywhere; }
@media (min-width: 560px) { .care-top h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); } }
.care-top .lede { margin-top: 1rem; }

/* The second buy button: the same size and shape as the gold one, in ink, so it reads as
   a real choice and not a disabled one — just not the primary one. */
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--paper-alt); }
.option .btn-unavailable { color: var(--ink-soft); border-color: var(--rule); }
.option .unavailable-note { color: var(--ink-soft); }

/* ---------- footer ---------- */

.site-footer { background: var(--panel); color: var(--panel-soft); padding-block: 3rem 2.25rem; border-top: 1px solid var(--panel-rule); }
.footer-top { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.footer-brand { color: var(--panel-ink); font-weight: 700; font-size: 1.0625rem; display: flex; align-items: center; gap: 0.6rem; }
.footer-brand .star { color: var(--accent); }
.footer-meta { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.8; }
.footer-meta a { overflow-wrap: anywhere; color: var(--accent-on-panel); display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
.footer-nav h2 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-soft); font-weight: 720; margin-bottom: 0.5rem; }
.footer-nav ul { list-style: none; display: grid; gap: 0; font-size: 0.9375rem; }
/* 44px rows; the visual rhythm is the same as before. */
.footer-nav a { color: var(--panel-ink); text-decoration: none; display: inline-block; padding-block: 0.7rem; }
.footer-nav a:hover { text-decoration: underline; }
.footer-credit { margin-top: 1.75rem; font-size: 0.8125rem; line-height: 1.6; max-width: 48rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--panel-rule); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* ---------- legal pages: headings held where they were before the redesign ---------- */

.legal { padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal .doc { max-width: 42rem; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); text-transform: none; letter-spacing: -0.025em; line-height: 1.08; font-weight: 760; }
.legal .updated { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-soft); }
.legal .doc > section { padding-block: 0; margin-top: 2.6rem; }
.legal h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 0.4rem; letter-spacing: -0.02em; line-height: 1.15; font-weight: 700; }
.legal h3 { margin-top: 1.7rem; margin-bottom: 0.3rem; }
.legal .doc p { margin-top: 0.9rem; }
.legal .doc ul { margin-top: 0.9rem; padding-left: 1.2rem; list-style: disc; display: grid; gap: 0.55rem; }
.legal .doc li::marker { color: var(--accent-text); }
.legal .summary-box { margin-top: 1.7rem; border-left: 3px solid var(--accent); background: var(--paper-alt); padding: 1.2rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0; }
.legal .summary-box p { margin-top: 0; }
.legal .summary-box p + p { margin-top: 0.75rem; }
.legal .back { margin-top: 3rem; display: inline-block; font-size: 0.9375rem; }

/* ---------- print: everything visible, nothing floating ---------- */

@media print {
  .site-header, .site-footer, .actions, .skip, .sticky-buy, .sample-actions { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .has-js .reveal { opacity: 1 !important; transform: rotate(var(--tilt, 0deg)) !important; }
  .has-js .seam path { stroke-dashoffset: 0 !important; }
  .faq details { border-color: #999; }
}