/* Adapton - page.css
   Loads on the OFFER and CASE-STUDY pages, after core.css. Also 404.

   THIS FILE IS THE OFFER-PAGE ARCHITECTURE. Every offer page -- med-spa included -- is the same
   six moves in the same order:

     hero (five elements, with the system running beside it) · ribbon · WHAT IT IS · THE SYSTEM,
     numbered · DELIVERY · PRICING · QUESTIONS · NEXT STEP

   The shape lives here so a fix lands on four pages at once. offer.css then adds only the three
   objects the med-spa page alone owns: the phone thread, the calculator, the night-shift figure.
   Med-spa is also the only page with a seventh section -- the calculator -- because it is the
   only offer whose arithmetic a buyer can answer in one breath. The rest state their dollar
   argument as the second paragraph of "What it is"; a slider producing an "hours saved" figure
   would invent exactly the outcome number every scope document here refuses to promise.

   The type scale is core.css's and is NOT re-stated here:
     .eyebrow      display mono, orange     the section NAME, one or two words
     .section__tag one line, medium         the claim
     .section__lede / body                  everything else
   A section that opens with a small kicker and a big <h2> is a page that has drifted from the
   home page. Fix the page, not this file.

   No tokens, no font-face - every colour is a var() from core.css.
   ORANGE is only what Adapton catches or does. GREY is everything lost, manual, or not yet
   built. Red is not in this palette and is never added. */

/* ── Offer hero: the home hero's composition, with the system in the right column ──
   Same three groups as the home page -- identity, statement, action -- so a visitor who has
   read the home page already knows how to read this one. */

/* The headline carries its own <br>. The cap is a safety net for a long first line,
   not the thing that decides where the line breaks -- at 15ch it was breaking every headline
   into three lines and stranding a word. */
.hero--offer .hero__h1 { max-width: 22ch; }
.hero--offer .lede { max-width: 46ch; }

/* FIVE ELEMENTS, and that is the whole hero: who it is for, what goes wrong, what we install,
   what it costs, what to do next. The mono kicker, the goal block and the reassurance note all
   came out on 2026-08-19 -- eight elements made the left column read as a wall of text beside
   an object, and every one of the three says something the page says better further down. The
   goal block's sentence is now the .section__tag of "What it is".

   TOP-ALIGNED, not centred. The home hero centres because its object -- the revolving mark --
   is shorter than the copy, so centring costs nothing. Here the object is taller than the copy
   beside it, and centring pushed the headline 75px down the screen for no reason a reader could
   see. Both columns start at the top; the taller one simply runs on. */
.hero--offer { align-items: start; padding-top: clamp(.4rem, 1vw, 1rem); padding-bottom: clamp(2.4rem, 4vw, 4rem); }
.hero--offer .lede         { margin-top: 1.5rem; }
.hero--offer .phero__price { margin-top: 1.1rem; }
.hero--offer .hero__cta    { margin-top: 1.2rem; }

/* The right column holds whatever this offer's system is: the phone thread on med-spa, the
   sequence player everywhere else, the shape diagram on a case study. All three are objects
   rather than decoration, so all three get the column. */
.hero__demo, .hero__object { position: relative; z-index: 1; }
.hero__object { display: flex; justify-content: center; }

/* A case-study hero carries a disclosure line where an offer hero carries a price -- same slot,
   same job: the thing a reader would otherwise have to hunt for. On these pages it is the
   sentence saying whose system this is and whether it is running, which is the one claim on the
   page most worth being unmissable. */
.hero--case .disclose { margin-top: 1.5rem; }
.hero--case .dia figcaption { max-width: 42ch; }

/* The price, stated in the hero. A buyer who has to hunt for it assumes it is bad news. */
.phero__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-top: 1.6rem;
}
.phero__price b {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 640; letter-spacing: -.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.phero__price span { color: var(--text-dim); font-size: .95rem; }

/* ── Case-study and 404 hero: narrower and calmer, single column ─────── */

.phero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.phero .hero__h1 { max-width: 20ch; }
.phero .lede { max-width: 56ch; }

/* An offer that is not built yet says so in GREY and dashed - never in orange,
   which on this site means something that already runs. */
.buildnote {
  margin-top: 1.4rem; padding: .85rem 1rem;
  border: 1px dashed var(--line-strong); border-radius: 10px;
  color: var(--text-dim); font-size: .9rem; max-width: 62ch;
}
.buildnote b {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
  margin-right: .5rem;
}

.disclose {
  margin-top: 1.6rem; padding: 1rem 1.1rem;
  background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-dim); font-size: .92rem; max-width: 62ch;
}
.disclose b { color: var(--text-head); }

/* Two panels in a row are ONE band, not two. Without this they meet on a doubled hairline with
   a full --gap of padding either side of it, which reads as a seam the content does not have.
   The med-spa page is the only page with two — "What it is" and the calculator belong together. */
.section--panel + .section--panel {
  border-top: 0;
  padding-top: calc(var(--gap) * .45);
}

/* One soft bloom off the leading edge of a plain section, so the page reads as composed
   rather than as flat gaps between panels. */
.section:not(.section--panel):not(.section--book)::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 42% at 8% 0%, var(--card-glow), transparent 70%);
  pointer-events: none;
}

/* The price, or the day, riding along with a step's heading. Mono and quiet -- the step is the
   claim, this is its label. On the ladder offer it carries a real figure from the rate card. */
.step__p {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
  margin-left: .5rem;
}

/* ── The arithmetic. Prose, not a widget ─────────────────────────
   Only the med-spa page computes, because only the med-spa page has three inputs a buyer can
   answer in one breath. Everywhere else the argument is stated and the buyer checks it against
   their own numbers on the call -- a slider that produced an "hours saved" figure would be
   inventing exactly the outcome number every scope document here refuses to promise. */

.argue {
  max-width: 58ch; margin-top: 1.6rem;
  font-size: clamp(1.02rem, .99rem + .2vw, 1.12rem);
  line-height: 1.62; color: var(--text-dim);
}
.argue b { color: var(--text-head); }
.argue + .argue { margin-top: 1rem; }

/* ── Included rows ─────────────────────────────────────────── */

.rows { list-style: none; margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows li {
  display: grid; gap: .25rem 1.2rem; padding: 1.15rem 0;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--line);
}
.rows li b { font-weight: 600; color: var(--text-head); }
.rows__p {
  font-family: var(--mono); font-size: .78rem;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rows__d { grid-column: 1 / -1; color: var(--text-dim); font-size: .9rem; max-width: 68ch; }

/* ── Callout: the compliance / conditions block ────────────── */

.callout {
  margin-top: 2.2rem; padding: 1.4rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  max-width: 72ch;
}
.callout__h {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: .6rem;
}
.callout p:last-child { color: var(--text-dim); font-size: .93rem; margin: 0; }
.callout b { color: var(--text-head); }

/* ── Delivery: the days, as a row of stages ─────────────────
   Navy rather than orange. Orange is what the system does once it is running; the build is
   people, and people are navy on this site. */

.how {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.1rem; margin-top: 2.9rem;
}
.how__item { padding-top: 1.4rem; border-top: 2px solid var(--navy); }
.how__day {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .7rem;
}
[data-theme="dark"] .how__day, :root:not([data-theme="light"]) .how__day { color: #6BA6E0; }
.how__h { font-size: 1.26rem; font-weight: 600; letter-spacing: -.012em; margin-bottom: .45rem; color: var(--text-head); }
.how__item p { color: var(--text-dim); font-size: .95rem; }

/* ── Out of scope ──────────────────────────────────────────── */

.nots { list-style: none; margin: 2rem 0 0; padding: 0; }
.nots li {
  position: relative; padding: .5rem 0 .5rem 1.6rem;
  color: var(--text-dim); font-size: .95rem;
  border-bottom: 1px dashed var(--line);
}
.nots li::before {
  content: "—"; position: absolute; left: 0;
  color: var(--text-faint); font-family: var(--mono);
}
.guarantee {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-strong);
  color: var(--text-head); font-weight: 500;
}

/* ── Pricing ────────────────────────────────────────────────
   One card, and every figure in it traces to docs/rate-card-adapton.md. */

.price {
  margin-top: 2.6rem;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 50% -10%, var(--card-glow), transparent 55%),
    var(--bg-card);
  position: relative; overflow: hidden;
}
.price::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.price__head {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3rem); text-align: center;
}
.price__amt {
  font-size: clamp(2rem, 1.7rem + 1.6vw, 2.7rem);
  font-weight: 640; line-height: 1; letter-spacing: -.025em; color: var(--text);
}
.price__lbl {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); margin-top: .6rem;
}
.price__plus { font-size: 1.7rem; font-weight: 300; color: var(--accent); }
.price__terms { text-align: center; margin-top: 1.4rem; font-size: .85rem; color: var(--text-dim); }
/* The ladder offer has four rungs rather than two numbers, so its price card carries the rungs
   instead of a head. Same card, same rule above it, no second component. */
.price .rows { margin-top: 0; }
.price__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.1rem; margin-top: 2.2rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.price__colh {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem;
}
.price__colh--yes { color: var(--accent); }
.price__colh--no  { color: var(--text-dim); }
.list li {
  position: relative; padding-left: 1.5rem; margin-bottom: .62rem;
  font-size: .92rem; color: var(--text-dim);
}
.list li::before { position: absolute; left: 0; top: -.02em; font-family: var(--mono); font-size: .9rem; }
.list--yes li { color: var(--text-head); }
.list--yes li::before { content: "+"; color: var(--accent); }
.list--no  li::before { content: "\2013"; color: var(--text-faint); }

/* ── The booking section ───────────────────────────────────── */

.section--book {
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  padding-block: calc(var(--gap) * 1.02);
}
.ambient {                                /* live circuit traces, desktop only */
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.ambient.is-live { opacity: .16; }
[data-theme="light"] .ambient.is-live { opacity: .07; }
.section--book .btn--lg { margin-top: 2rem; }

/* ── Case study layout ──────────────────────────────────────────
   A case study is the OFFER PAGE'S ARCHITECTURE doing a different job, so it borrows the hero,
   the ribbon, .track, .how, .nots and .callout wholesale and adds exactly two things: the spec
   plate below, and a two-column band that stands a diagram beside the prose.

   .case__layout is used TWICE per page — beside "How it works" and beside "The limits" — with
   the text as the first child and the <figure> as the second. The figure is sticky, so on a
   long numbered list the diagram stays with the step being read. */

.case__layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .case__layout { grid-template-columns: 1fr 460px; } }

/* ── The spec plate ─────────────────────────────────────────────
   THE SIGNATURE OF THE CASE-STUDY PAGES. Every figure a system can honestly state, set in mono
   on a one-pixel grid, the way a machine carries its rating plate. It sits directly under the
   hero because with no client results to show, what IS measurable has to arrive early.

   The hairlines are the grid's own background showing through a 1px gap, not borders on the
   cells — borders leave a doubled edge on the outside and need three override rules to remove
   it, and every one of those rules is a chance for the plate to break at a new column count.

   NUMBERS ARE STEEL, NEVER ORANGE. Orange on this site means the thing Adapton catches or does;
   a count of tests is neither. A plate of orange figures would also be the one place on the
   site where the accent is used decoratively, which is the whole rule. */

.section--plate { padding-block: clamp(2.2rem, 4vw, 3.4rem); }

.plate__note {
  font-family: var(--mono); font-size: .68rem; line-height: 1.7;
  letter-spacing: .04em; color: var(--text-faint);
  max-width: 68ch; margin-bottom: 1.1rem;
}

.plate {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);            /* the hairlines, seen through the gap */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.plate li {
  background: var(--bg-card);
  padding: clamp(1rem, 2vw, 1.35rem);
  display: flex; flex-direction: column; gap: .45rem;
}
.plate b {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 640; line-height: 1.05;
  letter-spacing: -.02em; color: var(--text-head);
  font-variant-numeric: tabular-nums;
}
.plate span {
  font-family: var(--mono); font-size: .58rem; line-height: 1.6;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}

/* ── The diagram system ─────────────────────────────────────────
   FIVE PRIMITIVES AND NOTHING ELSE:
     node box     rx 10, stroke --line-strong, fill --bg-card    a stage
     trace        stroke --trace, orthogonal                     data moving
     hot trace    stroke --accent-line                           ONLY where the automation acts
     refusal      dashed 4 2, stroke --text-dim                  a stop, a cap, a rejection
     junction     r 3, fill --trace                              a branch or checkpoint

   Banned: gradients, filters, drop shadows, any literal hex, any colour not above.

   PORTRAIT, viewBox 420 wide, capped at 460px. The arithmetic forces it: ~350px of usable
   width on a 390px phone against an ~860px desktop column is a 2.4x scale ratio, and SVG text
   scales with the viewBox - one landscape diagram cannot be >=12px on a phone AND <=18px on
   desktop. Test every diagram at 390px: overflow-x is `clip`, so an over-wide SVG clips
   silently instead of showing a scrollbar to warn you. */

/* ── Demo recording ──────────────────────────────────────────────────────────
   A foreground video, unlike .ambient which is a background wash. It carries
   controls and preload="none": the file is 21 MB, and nobody who lands on a
   case study has agreed to download that before they decide to watch. The
   poster reserves the box so the page does not reflow when it loads. */
.demo { margin: 0; }
.demo__frame {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.demo__v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.demo figcaption {
  margin-top: .9rem;
  font-size: .85rem; color: var(--text-faint);
  font-family: var(--mono); letter-spacing: .02em;
}

.dia { margin: 0; position: sticky; top: 5.5rem; }

/* The hero diagram is NOT sticky. It is already beside the headline at the top of the page, so
   sticking it does nothing except make it the one element that refuses to scroll away. */
.dia--flat { position: static; }
.dia svg { display: block; width: 100%; max-width: 460px; height: auto; }
.dia figcaption {
  margin-top: .9rem; max-width: 460px;
  font-size: .85rem; color: var(--text-faint);
}
.dia__box { fill: var(--bg-card); stroke: var(--line-strong); stroke-width: 1.25; }
.dia__trace { stroke: var(--trace); stroke-width: 1.5; fill: none; }
.dia__hot { stroke: var(--accent-line); stroke-width: 1.5; fill: none; }
.dia__refuse { stroke: var(--text-dim); stroke-width: 1.25; stroke-dasharray: 4 2; fill: none; }
.dia__dot { fill: var(--trace); }
.dia__t { fill: var(--text-head); font-family: var(--font); font-size: 15px; font-weight: 600; }
.dia__s { fill: var(--text-faint); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

@media (max-width: 899px) {
  .dia { position: static; }
  .dia svg, .dia figcaption { margin-inline: auto; }
}

@media (forced-colors: active) {
  .dia__box, .dia__trace, .dia__hot, .dia__refuse { stroke: CanvasText; }
  .dia__dot { fill: CanvasText; }
  .dia__t, .dia__s { fill: CanvasText; }
}

/* ── The sequence player ───────────────────────────────────────
   Every offer page shows its own system running. Steps arrive one at a time and go ORANGE as
   they complete, because orange on this site is what the automation did. Two exceptions carry
   their own colour and they are the honest ones:
     .seq--refused  grey and dashed — the spend cap stopping. A refusal is not a success.
     .seq--waiting  grey — something held for a human. Also not a success. */

.seq {
  margin: 0; width: 100%; max-width: 460px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.seq__head {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--navy) 12%, transparent);
}
.seq__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: seqpulse 2.4s ease-out infinite;
}
.seq__title { font-family: var(--mono); font-size: .72rem; color: var(--text-head); }
.seq__meta {
  margin-left: auto; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}

/* Held at its finished height from first paint, the way the phone thread is. Steps arrive over
   two seconds and without this the section under the hero walks up the page as they land. */
.seq__list { list-style: none; margin: 0; padding: .3rem 0; }
.seq__list li {
  display: grid; grid-template-columns: 4.6rem 1fr auto;
  align-items: baseline; gap: .8rem;
  padding: .62rem 1.15rem;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .34s ease, transform .34s var(--spring);
}
.seq__list li.is-on { opacity: 1; transform: none; }
.seq__list li + li { border-top: 1px solid var(--line); }
.seq__k {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.seq__v { color: var(--text-dim); font-size: .9rem; }
.seq__ok { font-family: var(--mono); font-size: .7rem; color: var(--accent); }

/* A refusal and a hold are not wins, so they never get the accent. */
.seq--refused .seq__ok, .seq--waiting .seq__ok { color: var(--text-dim); }
.seq--refused .seq__k, .seq--waiting .seq__k { color: var(--text-dim); }
.seq--refused { border-left: 2px dashed var(--text-dim); }
.seq--waiting { border-left: 2px solid var(--line-strong); }
.seq__foot {
  padding: .95rem 1.15rem; border-top: 1px solid var(--line-strong);
  opacity: 0; transition: opacity .4s ease .1s;
}
.seq__foot.is-on { opacity: 1; }
.seq__said { color: var(--text-head); font-weight: 600; font-size: .95rem; }
.seq__note {
  margin: 0; padding: .7rem 1.15rem; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--text-faint);
}

@keyframes seqpulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-line); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Replay ────────────────────────────────────────────────────
   Lives here, not in offer.css: three of the four offer pages carry a sequence player, and
   while this rule sat in the med-spa-only stylesheet their Replay button shipped as a raw
   browser button. */

.replay {
  display: inline-block; margin: .2rem 0 0;
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .42rem .9rem;
  cursor: pointer; transition: color .16s ease, border-color .16s ease;
}
.replay:hover { color: var(--accent); border-color: var(--accent-line); }
.seq .replay { margin: .9rem 1.15rem; }

/* ── Small screens ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero--offer { grid-template-columns: 1fr; }
  .hero--offer .hero__h1, .hero--offer .lede { max-width: none; }
  .seq { max-width: 560px; }
  /* Four columns of mono at phone width would set every label at four words a line. Two keeps
     the labels readable and the figures still scannable down the page. */
  .plate { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .rows li { grid-template-columns: 1fr; }
  .rows__p { justify-self: start; }
  .plate b { font-size: 1.25rem; }
  .price__head { gap: 1.4rem; }
  .seq__list li { grid-template-columns: 4rem 1fr auto; }
  .seq__v { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .replay { display: none; }
  .ribbon__track { animation: none; }
  .ambient { display: none; }
}