/* Site developed and built by sitethreesixty.com */

/* ============================================================
   inner-critical.css — System base + inner-page Zone 1 (banner / hosting hero)
   Everything needed for first paint on this page type.
   ============================================================ */

/*
   SHARED BASE
   Byte-for-byte identical in home-critical.css and inner-critical.css.
   Generated from one source fragment — do not hand-edit either copy.
*/

/* --- Reset ---
   box-sizing only. The delivered design relies on default margins for `p`
   and on UA list padding for anything that doesn't zero it explicitly, so a
   blanket `* { margin: 0; padding: 0 }` would reflow both pages. */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--leading-normal);
  /* ⛔ -webkit-font-smoothing: antialiased REMOVED — owner report 22 Aug, text
     rendering "faded or splotchy". It disables SUBPIXEL antialiasing and forces
     grayscale, which thins every stroke and is worst on dark-on-light body copy
     and on non-Retina screens. The browser default renders these faces properly;
     do not put it back. */
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* --- Heading base ---
   h1 carries no size here: both page types set their own display size in
   their Zone 1 block, and a base size would only be overridden. h4–h6 are
   declared for completeness; neither page currently uses them. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  margin-bottom: var(--space-lg);
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-snug);
}

h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-h5); }
h6 { font-size: var(--font-h6); }

:focus-visible {
  outline: var(--border-thick) solid var(--brand-accent);
  outline-offset: var(--border-thick);
}

/* --- Skip link ---
   Always visible on focus, so its colours belong in critical. */

.skip-link {
  position: fixed;
  top: var(--space-sm-md);
  left: var(--space-sm-md);
  z-index: var(--z-overlay);
  padding: var(--space-sm-md) var(--space-md);
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Frame --- */

.frame {
  width: 100%;
  padding-inline: var(--container-pad);
}

/* --- Framework --- */

.framework {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  /* Query container for card grids — see the "even rows" note in containers.css.
     It has to be the Framework: .zone is a subgrid, and container-type there
     applies containment that collapses it from 12 tracks to 2 (measured). */
  container-type: inline-size;
  container-name: frame;
}

/* --- Zone base (subgrid) --- */

.zone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--zone-pad);
}

/* --- Positions ---
   width: 100% on pos-content / pos-narrow is a deliberate, measured
   deviation from Build Lesson #10. Removing it lets these Containers size
   to fit-content instead of filling their column span, which moves 7.2% of
   the hosting page's pixels. Recorded in COMPLETION-DECLARATION.md. */

.pos-full    { grid-column: 1 / -1; }
.pos-wide    { grid-column: 2 / -2; }
.pos-content { grid-column: 3 / -3; justify-self: center; max-width: 90rem; width: 100%; }
.pos-narrow  { grid-column: 4 / -4; justify-self: center; max-width: 58rem; width: 100%; }
.pos-left    { grid-column: 1 / 7; }
.pos-right   { grid-column: 7 / -1; }

/* --- Fixture: Header ---
   Sticky, so its own styling and its mobile drawer's hidden state must both
   be here — a deferred sheet setting either would flash the wrong one. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--bg-dark) 12%, transparent);
  background-color: color-mix(in srgb, var(--bg-light) 94%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* 1.65rem is a fixed-size UI strip, not a spacing decision — the permitted
   structural exception for critical files (Build Lesson #11). */
.header-compass {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1.65rem;
  color: var(--grey-mid);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
}

.header-compass::before {
  position: absolute;
  top: .32rem;
  right: 0;
  left: 0;
  height: var(--border-thin);
  background-color: color-mix(in srgb, var(--bg-dark) 13%, transparent);
  content: "";
}

.header-compass span {
  position: relative;
  padding-top: .78rem;
}

.header-compass span::before {
  position: absolute;
  top: .05rem;
  left: 50%;
  width: var(--border-thin);
  height: .58rem;
  background-color: color-mix(in srgb, var(--bg-dark) 34%, transparent);
  content: "";
}

.header-compass .is-active {
  color: var(--brand-primary);
}

.header-compass .is-active::before {
  height: .82rem;
  background-color: var(--brand-accent);
}

.header-grid {
  min-height: 4.6rem;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  align-items: center;
  gap: var(--space-md);
}

.header-grid .wordmark {
  grid-column: 1 / 4;
}

.primary-nav {
  grid-column: 4 / 9;
  display: flex;
  justify-content: center;
  gap: var(--gap-2xs);
}

.header-actions {
  grid-column: 9 / 13;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-md-lg);
}

.nav-toggle {
  display: none;
}

/* --- Portable elements that render above the fold on every page ---
   These carry colour here rather than in elements.css for two reasons: they
   paint before the deferred sheets land, and their colour does not vary by
   Zone, so there is no Zone override to inherit. Anything Zone-dependent
   (.section-label, .btn-primary fills, .text-link) still lives in zones.css.
   Moving these out of the deferred sheet is the same fix Build Lesson #14
   describes — an above-fold class defined only in a deferred file flashes. */

.wordmark {
  font-family: var(--font-heading);
  font-size: var(--font-h6);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.primary-nav,
.header-login,
.header-cta {
  font-size: var(--font-small);
  /* --weight-regular, NOT --weight-medium. These are body-font, and --weight-medium is 300
     because that is where Jakarta Round's Light is set for the headings — the nav was only
     ever riding along, and it went thin when the owner chose Light. The token cannot move:
     Jakarta Round ships 300 and 600 only, so 400 there would synthesise. The design had
     these at 500; the frozen set has no 500, and 400 and 600 sit equidistant from it, so
     400 wins on the grounds that 600 reads as bold in a nav. Owner ruling 29. */
  font-weight: var(--weight-regular);
}

/* ⛔ Hover is an UNDERLINE, never `opacity`. A8 bans the opacity property on a
   text element outright, and says so of tokens explicitly: `opacity:
   var(--opacity-half)` is exactly as banned as `opacity: .58`. Underline is
   ground-independent, so it needs no per-Zone rule and cannot drift out of
   contrast the way a dimmed colour does. Inspection finding 2, 19 Aug 2026. */
/* The nav declared no family, so it inherited --font-body — a SYSTEM stack.
   It therefore rendered in whatever face the OS supplied, beside a wordmark set
   in Jakarta Round: mismatched, and on some systems faded or patchy because the
   OS face was being synthesised at a weight it does not ship. Owner ruling
   22 Aug: the nav is Jakarta.
   ⚠️ weight 300 is deliberate — Jakarta Round ships ONLY 300 and 600. Asking for
   400 or 500 makes the browser fake it, which is exactly the splotchy rendering
   this fixes. See this repo's CLAUDE.md: "--weight-bold does not exist here." */
.primary-nav a,
.header-login {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--speed-fast) var(--ease-default);
}

.primary-nav a:hover,
.header-login:hover {
  text-decoration-color: currentColor;
}

/* ⚠️ font-weight is DECLARED, never inherited — owner ruling 30, 19 Aug 2026.
   This rule previously set font-family and font-size but no weight, so all 143
   eyebrows on the site took whatever the cascade happened to hand them: 136 at
   400, three at 600 and four at other values, purely by position. That is
   Lesson #21 exactly — switch the family, forget the weight, and the element
   silently inherits one. 600 is now stated, so an eyebrow reads the same
   wherever it lands.

   Size floor: --font-label is 14.08px, comfortably over the owner's stated
   13px minimum. The floor is not re-declared here because the token IS the
   floor; if it ever drops below 13, scripts/legibility.py fails first. */
/* ─── The label family ────────────────────────────────────────────────────────
 *
 * ONE definition of mono-uppercase label type. Before this existed, ~55 rules
 * across the site hand-copied the same four declarations, and ~50 of them
 * omitted font-weight and silently inherited w300 — Lesson #21, fifty times.
 *
 * ⚠️ Do NOT write `font-family: var(--font-mono)` in a new rule. Add the class
 *    and, if it needs a different size, one of the modifiers. Gate E1c fails
 *    the build on a fresh hand-copy.
 *
 * Size modifiers exist because the family genuinely spans three sizes; they
 * carry NO other difference. --font-micro is absent on purpose: it is
 * instrument chrome only and never a label (ruling 29).
 *
 * ⚠️ Shape is not the same thing as role. A rule that merely LOOKS like this
 *    (a pending-asset note, a caption) is not a label and must not take the
 *    class — .media-placeholder-label took it once and inherited a colour that
 *    measured 3.17:1. Ask what it IS, not what it looks like.
 */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
}

.section-label.is-caption { font-size: var(--font-caption); }
.section-label.is-sm      { font-size: var(--font-label-sm); }

/* The orange full stop closing most headings, plus the wordmark's and the
   watermark's. A real typeset period again, now that the font carries a round
   one — which also removes the line-breaking problem a drawn dot caused: an
   inline-block counts as U+FFFC, whose line-break class permits a break before
   it, so the dot kept getting orphaned onto its own line.

   Ground-bound: the light value is the default because the header and Zone 1 are
   light on both pages; zones.css swaps in the brighter accent on dark. */
.signal-dot {
  color: var(--brand-accent-on-light);
}

.btn-primary,
.btn-secondary {
  /* Buttons declared no family, so they inherited --font-body — a SYSTEM stack —
     and rendered in a different face from the Jakarta around them. Same root
     cause as the nav (fixed 22 Aug). Weight 600 is real in Jakarta Round; 400
     and 500 are not, and asking for them makes the browser synthesise. */
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  min-height: 3.25rem;
  padding: var(--space-sm-md) var(--space-md-plus);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-flush);
  transition: transform var(--speed-fast) var(--ease-default),
              opacity var(--speed-fast) var(--ease-default);
}

.btn-secondary {
  background-color: transparent;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm-md);
}

/* --- Scroll-reveal initial state ---
   Hidden state is critical; the transition to visible is not. Without this
   here, revealed blocks paint visible then snap to hidden when the deferred
   sheet lands. */

.will-reveal {
  opacity: 0;
  transform: translateY(1.1rem);
}

/* --- Responsive: the single breakpoint --- */

@media (max-width: 1000px) {
  /* THE MOBILE GUTTER MOVES INSIDE THE BANDS — it is not duplicated.
     Corrected Build Lesson #13 warns against adding padding-inline to .zone while
     .frame keeps its own, because that double-pads and cost three live sites 96px.
     This hands the gutter over instead: main.frame gives its padding up in the
     same breakpoint, so the total is unchanged at one --container-pad.

     Why it is needed: below 1000px every position collapses to 1 / -1, so content
     sits flush against the Zone's edge. On a dark band that edge is visible, and
     the text appeared to touch the side of the card. Zones now run full-bleed to
     the viewport and inset their own content.

     Only safe inside this breakpoint: .zone uses subgrid, and padding on a subgrid
     container shifts its tracks out of line with the Framework. Above 1000px the
     positions do the insetting and the padding must not exist.

     .footer-zone is excluded because .footer-grid carries its own inset at every
     width — it would otherwise be padded twice. */

  main.frame {
    padding-inline: 0;
  }

  .zone:not(.footer-zone) {
    padding-inline: var(--container-pad);
  }

  .pos-full,
  .pos-wide,
  .pos-content,
  .pos-narrow,
  .pos-left,
  .pos-right {
    grid-column: 1 / -1;
    max-width: none;
  }

  .header-compass {
    display: none;
  }

  .header-grid {
    min-height: 4.4rem;
    grid-template-columns: 1fr auto;
  }

  .header-grid .wordmark {
    grid-column: 1;
  }

  /* No-JS fallback: the nav stacks and stays reachable. Only once .js proves
     a script is present does it become a toggle-driven drawer. */
  .primary-nav {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
  }

  /* The drawer slides rather than appearing. Owner feedback 22 Aug: it "opens
     too fast" — because it did not open at all, it switched display none→flex
     with no transition. display cannot be animated, so the drawer stays in flow
     and is moved with transform + opacity, which the compositor can animate.
     visibility keeps it out of the tab order while closed. */
  .js .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    grid-column: auto;
    display: flex;
    padding: var(--space-lg) var(--container-pad);
    border-bottom: var(--border-thin) solid var(--grey-light);
    background-color: var(--bg-light);
    opacity: 0;
    visibility: hidden;
    /* Travels its own full height so the movement is actually visible. At
       -0.75rem the drawer barely moved, which read as "it just appeared".
       --speed-slow (680ms) over that distance is a deliberate, unhurried
       reveal rather than a snap. */
    transform: translateY(-100%);
    transition:
      transform var(--speed-slow) var(--ease-default),
      opacity var(--speed-slow) var(--ease-default),
      visibility 0s linear var(--speed-slow);
  }

  .js .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Dims the page behind the drawer and gives a tap target to close it.
     Sits under the drawer and the header, over everything else. */
  .js .nav-scrim {
    position: fixed;
    inset: 0;
    /* Below the header (--z-header: 20 carries the drawer with it) and above
       everything else. A higher value dims the drawer's own links. */
    z-index: var(--z-above);
    opacity: 0;
    visibility: hidden;
    background-color: var(--bg-dark);
    transition:
      opacity var(--speed-slow) var(--ease-default),
      visibility 0s linear var(--speed-slow);
  }

  .js .nav-scrim.is-open {
    opacity: .55;
    visibility: visible;
    transition-delay: 0s;
  }

  .js .nav-toggle {
    grid-column: 2;
    display: grid;
    min-width: 3rem;
    padding: .6rem;
    gap: .28rem;
    border: 0;
    background-color: transparent;
    color: var(--text-on-light);
    cursor: pointer;
  }

  .nav-toggle span {
    font-size: var(--font-label-sm);
    font-weight: var(--weight-semibold);
  }

  /* Centred with justify-self rather than auto side margins, which a
     Container must never use to centre itself (checklist C1b). */
  .nav-toggle i {
    display: block;
    justify-self: center;
    width: 1.5rem;
    height: var(--border-thin);
    background-color: currentColor;
  }

  .header-actions {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* ⚠️ `*, *::before, *::after` is the reset everyone copies, and it does NOT
     cover any other pseudo-element. `::details-content` animates the FAQ
     disclosures, and it kept animating under reduced motion until it was added
     here — measured, not assumed. `*` matches elements only; each pseudo needs
     naming. ::marker and ::backdrop are listed now so the next component that
     uses one inherits the guard instead of rediscovering this. */
  *,
  *::before,
  *::after,
  *::details-content,
  *::marker,
  *::backdrop {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
   END SHARED BASE
*/


/* <code> carried no styling, so it fell back to the browser's default mono —
   a different face from IBM Plex Mono used by every other mono element.
   Found on 5 pages, 12 instances (.com / .co.uk / .net and similar). */
code {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

/* ============================================================
   Inner-page Zone 1 — Page banner + hosting hero
   Zone 1 colours live here, never in zones.css (Build Lesson #3).
   The 100svh floor the design carried was removed on owner ruling:
   Zone height is content-driven.
   ============================================================ */

/* --- Generic inner-page banner ---
   The default Zone 1 for inner pages that aren't the hosting hero. */

.page-banner-zone {
  color: var(--text-on-light);
  background-color: var(--bg-light);
}

.page-banner-container {
  display: grid;
  gap: var(--space-lg);
}

.page-banner-container h1 {
  font-size: var(--font-h2);
}

/* Type comes from .section-label in the shared base — only layout and colour here. */
/* --- Hosting hero --- */

.hosting-hero-zone {
  align-items: center;
  padding-block: var(--zone-pad-hero);
  color: var(--text-on-light);
  background-image: radial-gradient(circle at 8% 12%,
                      color-mix(in srgb, var(--brand-accent) 7%, transparent),
                      transparent 28rem);
  background-color: var(--bg-light);
}

.hosting-hero-zone .btn-primary {
  background-color: var(--bg-accent);
  color: var(--white);
}

.hosting-hero-zone .btn-secondary {
  border-color: var(--text-on-light);
}

/* Asymmetric by design, so it collapses at the system breakpoint rather than
   reflowing with auto-fit — auto-fit would equalise the columns. */
.hosting-hero-container-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, .8fr);
  gap: var(--gap-4xl);
  align-items: center;
}

.hosting-hero-copy h1 {
  max-width: 9ch;
  margin: var(--space-lg) 0;
  font-size: var(--font-display);
  line-height: var(--leading-solid);
}

.hosting-hero-copy h1 > span {
  display: block;
  opacity: 0;
  transform: translateY(.18em);
  animation: hosting-title-rise 680ms var(--ease-default) forwards;
}

.hosting-hero-copy h1 > span:nth-child(1) { animation-delay: 80ms; }
.hosting-hero-copy h1 > span:nth-child(2) { animation-delay: 170ms; }
.hosting-hero-copy h1 > span:nth-child(3) { animation-delay: 260ms; }

.hosting-hero-lead {
  max-width: 55ch;
  color: var(--text-muted-light);
  font-size: var(--font-body-lg);
}

.hosting-hero-copy > p:not(.section-label, .hosting-hero-lead) {
  max-width: 68ch;
  color: var(--text-muted-light);
}

.hosting-hero-copy .action-row {
  margin-top: var(--space-lg);
}

/* --- Hosting instrument --- */

.hosting-instrument {
  min-height: min(68svh, 44rem);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--gap-sm);
  overflow: hidden;
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  background-color: var(--bg-dark);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(1rem);
  animation: hosting-instrument-settle 800ms var(--ease-default) 220ms forwards;
}

.hosting-instrument-head,
.hosting-instrument-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-caption);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps-lg);
}

.hosting-instrument-head {
  padding-bottom: var(--space-md);
  border-bottom: var(--border-thin) solid var(--grey-darkest);
}

.hosting-instrument-foot {
  padding-top: var(--space-md);
  border-top: var(--border-thin) solid var(--grey-darkest);
}

.hosting-instrument-head span:last-child,
.hosting-instrument-foot span:last-child {
  color: var(--brand-accent);
}

.hosting-core {
  position: relative;
  min-height: 20rem;
  display: grid;
  place-items: center;
}

.hosting-orbit {
  position: absolute;
  aspect-ratio: 1;
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: 50%;
}

.hosting-orbit-one {
  width: min(18rem, 76%);
}

.hosting-orbit-two {
  width: min(12rem, 52%);
  border-color: color-mix(in srgb, var(--brand-accent) 48%, transparent);
  animation: hosting-orbit-pulse 2.6s ease-out 1 both;
}

.hosting-core-mark {
  position: relative;
  z-index: var(--z-above);
  display: grid;
  width: 6.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  place-content: center;
  text-align: center;
  color: var(--text-on-light);
  background-color: var(--bg-light);
}

.hosting-core-mark small,
.hosting-core-mark strong {
  display: block;
}

.hosting-core-mark small {
  color: var(--text-muted-light);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
}

.hosting-core-mark strong {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--weight-semibold);
}

.hosting-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-lg);
  border-top: var(--border-thin) solid var(--grey-darkest);
  border-left: var(--border-thin) solid var(--grey-darkest);
}

.hosting-status-grid div {
  padding: var(--space-md);
  border-right: var(--border-thin) solid var(--grey-darkest);
  border-bottom: var(--border-thin) solid var(--grey-darkest);
}

.hosting-status-grid span,
.hosting-status-grid strong {
  display: block;
}

.hosting-status-grid span {
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.hosting-status-grid strong {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
}

/* --- Zone 1 keyframes --- */

@keyframes hosting-title-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hosting-instrument-settle {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hosting-orbit-pulse {
  0%   { transform: scale(.9);  opacity: .15; }
  45%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: .62; }
}

@media (max-width: 1000px) {
  .hosting-hero-container-grid {
    grid-template-columns: 1fr;
  }

  .hosting-instrument {
    width: min(44rem, 100%);
    min-height: 38rem;
  }
}

/* ============================================================
   Comparison page — Zone 1 (hero)
   ============================================================ */

.inner-hero-zone {
  align-items: center;
  padding-block: var(--gap-4xl);
  color: var(--text-on-light);
  background: radial-gradient(circle at 9% 14%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 29rem), var(--bg-light);
}

.comparison-hero-zone {
  background: radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--brand-accent) 7.0%, transparent), transparent 30rem), var(--bg-light);
}

.comparison-hero-zone .inner-hero-copy h1 {
  max-width: 13ch;
}

.inner-hero-zone .btn-primary {
  color: var(--white);
  background: var(--brand-primary);
}

.inner-hero-zone .btn-secondary {
  border-color: var(--bg-dark);
}

.inner-hero-container-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(25rem, .8fr);
  gap: var(--gap-4xl);
  align-items: center;
}

.inner-hero-copy h1 {
  max-width: 11ch;
  margin: var(--space-lg) 0;
  font-family: var(--font-heading);
  font-size: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-tight);
}

.inner-hero-copy h1 > span {
  display: block;
  opacity: 0;
  transform: translateY(.18em);
  animation: inner-title-rise 680ms var(--ease-default) forwards;
}

.inner-hero-copy h1 > span:nth-child(2) {
  animation-delay: 110ms;
}

.inner-hero-lead {
  max-width: 57ch;
  color: var(--text-muted-light);
  font-size: var(--font-body-lg);
}

.inner-hero-copy .action-row {
  margin-top: var(--space-lg);
}

.inner-signal-panel {
  min-height: 34rem;
  display: grid;
  padding: var(--gap-sm);
  overflow: hidden;
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: var(--radius-lg);
  align-content: stretch;
  color: var(--text-on-dark);
  background: var(--bg-dark);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(1rem);
  animation: inner-panel-settle 800ms var(--ease-default) 180ms forwards;
}

/* Type comes from .section-label.is-caption — only layout and colour here. */
.inner-signal-head, .inner-signal-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--text-muted-dark);
  line-height: 1.35;
}

.inner-signal-head {
  padding-bottom: var(--space-md);
  border-bottom: var(--border-thin) solid var(--grey-darkest);
}

.inner-signal-foot {
  padding-top: var(--space-md);
  border-top: var(--border-thin) solid var(--grey-darkest);
  align-self: end;
}

.inner-signal-head span:last-child, .inner-signal-foot span:last-child {
  color: var(--brand-accent);
}

.comparison-work-panel {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-md-lg);
}

.workload-scale {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
}

.workload-routes {
  display: grid;
  align-content: center;
}

.workload-route {
  display: grid;
  grid-template-columns: minmax(8.5rem, .8fr) minmax(7rem, 1fr);
  gap: var(--space-md-lg);
  padding-block: clamp(.75rem, 1.5vh, 1.05rem);
  border-bottom: var(--border-thin) solid var(--grey-darkest);
  align-items: center;
  opacity: 0;
  transform: translateY(.45rem);
  animation: comparison-work-rise 520ms var(--ease-default) var(--delay) forwards;
}

.workload-route > div {
  min-width: 0;
}

.workload-route strong, .workload-route small {
  display: block;
}

.workload-route strong {
  color: var(--text-on-dark);
  font-family: var(--font-heading);
  font-size: var(--font-h6);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
}

.workload-route small {
  margin-top: var(--space-xs);
  overflow: hidden;
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--tracking-wide);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.workload-route > span {
  position: relative;
  height: .46rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--grey-darkest);
}

.workload-route > span i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--workload);
  border-radius: inherit;
  background: var(--text-muted-dark);
  transform: translateX(-102%);
  animation: comparison-work-fill 760ms var(--ease-default) calc(var(--delay) + 220ms) forwards;
}

.workload-route.is-degree {
  margin-inline: calc(var(--space-sm-md) * -1);
  padding-inline: var(--space-sm-md);
  border-left: 2px solid var(--brand-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 11.0%, transparent), transparent 76%);
}

.workload-route.is-degree strong {
  color: var(--brand-accent);
}

.workload-route.is-degree > span i {
  background: var(--brand-accent);
}

@media (max-width: 1000px) {

  .inner-hero-container-grid {
    grid-template-columns: 1fr;
  }

  .inner-signal-panel {
    min-height: 30rem;
  }

  .comparison-work-panel {
    width: min(44rem, 100%);
    min-height: 34rem;
  }
}

/* --- Zone 1 keyframes ---
   Must live in the same file as the animation: that calls them, or the
   element sits at its opening frame forever (Build Lesson #8). */

@keyframes comparison-work-fill  {
  to  {
  transform: translateX(0);
 
}
}

@keyframes comparison-work-rise  {
  to  {
  opacity: 1;
  transform: translateY(0);
 
}
}

@keyframes inner-panel-settle  {
  to  {
  opacity: 1;
  transform: translateY(0);
 
}
}

@keyframes inner-title-rise  {
  to  {
  opacity: 1;
  transform: translateY(0);

}
}

/* ============================================================
   360Dash & Ecosystem page — Zone 1 (hero)
   Reuses .inner-hero-zone / .inner-hero-container-grid / .inner-hero-copy /
   .inner-signal-panel / .inner-signal-head / .inner-signal-foot as-is —
   this section only adds what's unique to the connected-system instrument.
   ============================================================ */

.dash-hero-zone {
  background: radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.dash-hero-zone .inner-hero-copy h1 {
  max-width: 12ch;
}

.dash-instrument {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-md-lg);
}

.dash-instrument-core {
  position: relative;
  min-height: 14rem;
  display: grid;
  place-items: center;
}

.dash-orbit {
  position: absolute;
  aspect-ratio: 1;
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: 50%;
}

.dash-orbit-one { width: min(15rem, 74%); }

.dash-orbit-two {
  width: min(9.5rem, 48%);
  border-color: color-mix(in srgb, var(--brand-accent) 48%, transparent);
  animation: dash-orbit-pulse 2.6s ease-out 1 both;
}

.dash-core-mark {
  position: relative;
  z-index: var(--z-above);
  text-align: center;
}

.dash-core-mark strong,
.dash-core-mark small {
  display: block;
}

.dash-core-mark strong {
  font-family: var(--font-heading);
  font-size: var(--font-display-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
  color: var(--brand-accent);
}

.dash-core-mark small {
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-label-sm);
  letter-spacing: var(--tracking-caps-lg);
  color: var(--text-muted-dark);
}

.dash-instrument-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--border-thin) solid var(--grey-darkest);
  border-left: var(--border-thin) solid var(--grey-darkest);
}

.dash-instrument-status div {
  display: flex;
  padding: var(--space-md);
  gap: var(--space-sm-md);
  border-right: var(--border-thin) solid var(--grey-darkest);
  border-bottom: var(--border-thin) solid var(--grey-darkest);
  align-items: center;
}

.dash-instrument-status .icon-line {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  color: var(--text-muted-dark);
}

.dash-instrument-status span {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted-dark);
}

.dash-instrument-status .icon-dot {
  fill: var(--brand-accent);
}

@keyframes dash-orbit-pulse {
  0%   { transform: scale(.9);  opacity: .15; }
  45%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: .62; }
}

@media (max-width: 1000px) {
  .dash-instrument {
    min-height: 36rem;
  }
}

/* ============================================================
   360° Booking page — Zone 1 (hero)
   Reuses .inner-hero-zone / .inner-hero-container-grid / .inner-hero-copy /
   .inner-signal-panel / .inner-signal-head / .inner-signal-foot unchanged —
   this section adds only what is unique to the live-appointment instrument.
   ============================================================ */

.booking-hero-zone {
  background: radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

/* "bookings while I work?" is the longer of the two authored lines; the cap
   sits just above it so the explicit line split holds and nothing re-wraps. */
.booking-hero-zone .inner-hero-copy h1 {
  max-width: 21ch;
}

/* The flexible row is the DATE, not the confirmation: the date is the panel's
   focal reading, so the slack collects around it and the confirmation stays
   seated just above the footer line. Putting the 1fr on the confirmation
   instead left a visible void between the times and the tick. */
.booking-instrument {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto 1fr auto auto auto;
  gap: var(--space-md-lg);
}

/* --- Central date --- */

.booking-date {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.booking-date small,
.booking-date strong {
  display: block;
}

.booking-date small {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
  color: var(--text-muted-dark);
}

.booking-date strong {
  margin-block: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--font-display-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
  color: var(--brand-accent);
  /* Settles in once, never loops — spec: "The date and selected time may
     settle into place once. No calendar pages flip and nothing loops." */
  opacity: 0;
  transform: translateY(.12em);
  animation: booking-settle 620ms var(--ease-default) 300ms forwards;
}

/* --- Available times --- */

.booking-times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.booking-times span {
  padding: var(--space-sm-md) var(--space-xs);
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-caption);
  line-height: var(--leading-flush);
  text-align: center;
  color: var(--text-muted-dark);
}

.booking-times .is-selected {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
  background-color: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  opacity: 0;
  animation: booking-settle 620ms var(--ease-default) 460ms forwards;
}

/* --- Confirmation --- */

.booking-confirm {
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-md-lg);
  border-top: var(--border-thin) solid var(--grey-darkest);
  align-items: flex-start;
  align-self: end;
}

.booking-tick {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--brand-accent);
}

.booking-confirm small,
.booking-confirm strong {
  display: block;
}

.booking-confirm small {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
  color: var(--brand-accent);
}

.booking-confirm strong {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
}

.booking-confirm p {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-caption);
  line-height: var(--leading-snug);
  color: var(--text-muted-dark);
}

@keyframes booking-settle {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) {
  .booking-instrument {
    width: min(44rem, 100%);
    min-height: 34rem;
  }
}

/* ============================================================
   360 Publishing Suite page — Zone 1 (hero)
   Reuses the shared inner-hero shell; adds only the draft-to-live instrument.
   ============================================================ */

.publishing-hero-zone {
  background: radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.publishing-hero-zone .inner-hero-copy h1 {
  max-width: 16ch;
}

.publishing-instrument {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-md-lg);
}

/* --- The draft document --- */

.publishing-draft {
  display: grid;
  align-content: center;
  padding: var(--space-lg);
  border: var(--border-thin) solid var(--text-on-dark);
  border-radius: var(--radius-md);
}

.publishing-draft small {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
  color: var(--brand-accent);
}

.publishing-draft strong {
  margin-block: var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--font-h4-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

/* Body-copy indication, not real text — three rules, the last one short. */
.publishing-draft-line {
  height: var(--border-medium);
  margin-bottom: var(--space-sm-md);
  border-radius: var(--radius-full);
  background-color: var(--grey-darkest);
}

.publishing-draft-line-short {
  width: 58%;
  margin-bottom: 0;
}

/* --- Status list --- */

.publishing-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Type comes from .section-label.is-caption — only layout and colour here. */
.publishing-status li {
  position: relative;
  padding-top: var(--space-md);
  border-top: var(--border-thin) solid var(--grey-darkest);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);   /* tighter than the family default */
  color: var(--text-muted-dark);
}

/* Open dot for the two steps already passed; the live one is filled. */
.publishing-status li::before {
  display: block;
  width: .5rem;
  height: .5rem;
  margin-bottom: var(--space-sm);
  border: var(--border-thin) solid var(--text-muted-dark);
  border-radius: 50%;
  content: "";
}

/* Switches on once after the panel settles — no blink, no loop. */
.publishing-status .is-live {
  color: var(--brand-accent);
}

.publishing-status .is-live::before {
  border-color: var(--brand-accent);
  background-color: var(--brand-accent);
  opacity: 0;
  animation: publishing-live 420ms var(--ease-default) 900ms forwards;
}

@keyframes publishing-live {
  to { opacity: 1; }
}

@media (max-width: 1000px) {
  .publishing-instrument {
    width: min(44rem, 100%);
    min-height: 34rem;
  }
}

/* ============================================================
   TEST ONLY — publishing-anim-test.html, added 2026-08-23.
   GSAP-driven "Tap. Type. Done." instrument — a performance comparison
   against the static .publishing-instrument above. Not linked from any page,
   not in the sitemap. Delete this block if the test page is removed.

   Source: design-mockups/autoblog-tap-type-done/components/autoblog-tagline.
   Every --atd-* hook below is remapped to this site's own tokens — no raw
   colour survives the port (gate A1a). It sits above the fold on Zone 1, so
   it lives in critical CSS per the site's own render rule, not in the
   deferred elements.css the source repo's README describes.

   Ground check: .autoblog-tagline is itself a dark box (var(--bg-dark)),
   same pattern as .inner-signal-panel — so --brand-accent (dark-ground-only)
   is the correct accent on its own chrome. Its nested .atd__editor card is a
   LIGHT card (var(--bg-light)) floating inside that dark box — exactly like
   .publishing-draft already does — so --brand-primary (light-ground-only) is
   correct there, never --brand-accent.
   ============================================================ */

.autoblog-tagline {
  --atd-paper: var(--bg-light);
  --atd-ink: var(--bg-dark);
  --atd-signal: var(--brand-accent);
  --atd-signal-deep: var(--brand-primary);
  --atd-muted: var(--text-muted-dark);
  --atd-line: var(--grey-darkest);
  --atd-display: var(--font-heading);
  --atd-mono: var(--font-mono);
  position: relative;
  width: 100%;
  min-height: min(68svh, 44rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gap-sm);
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-line);
  border-radius: var(--radius-lg);
  color: var(--atd-paper);
  background: var(--atd-ink);
  isolation: isolate;
}

.autoblog-tagline::before {
  position: absolute;
  z-index: -1;
  right: -16%;
  bottom: -32%;
  width: min(58vw, 42rem);
  aspect-ratio: 1;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: color-mix(in srgb, var(--atd-line) 78%, transparent);
  border-radius: 50%;
  content: "";
}

.atd__header,
.atd__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--atd-mono);
  font-size: var(--font-micro);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.atd__header {
  padding-bottom: var(--space-md);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  border-bottom-color: var(--atd-line);
  color: var(--atd-muted);
}

.atd__header > :last-child {
  color: var(--atd-signal);
  text-align: right;
}

.atd__body {
  display: grid;
  grid-template-columns: minmax(13.5rem, .72fr) minmax(20rem, 1.28fr);
  gap: var(--gap-md);
  align-items: center;
  padding-block: var(--space-lg-xl);
}

.atd__words {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.atd__word {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-sm-md);
  align-items: start;
  color: var(--atd-muted);
}

.atd__word span {
  padding-top: var(--space-sm-md);
  font-family: var(--atd-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.atd__word strong {
  font-family: var(--atd-display);
  font-size: var(--font-display-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-tight);
}

.atd__word:last-child {
  color: var(--atd-signal);
}

.atd__stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.18 / 1;
  display: grid;
  place-items: center;
}

.atd__orbit {
  position: absolute;
  inset: 4% 1% 2%;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-line);
  border-radius: 50%;
}

.atd__orbit::before {
  position: absolute;
  top: 9%;
  right: 15%;
  width: .65rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--atd-signal);
  box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--atd-signal) 12%, transparent);
  content: "";
}

.atd__editor {
  position: relative;
  width: min(75%, 24rem);
  min-height: 74%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-line);
  border-radius: var(--radius-md);
  color: var(--atd-ink);
  background: var(--atd-paper);
  box-shadow: var(--shadow-lg);
  transform-origin: 50% 50%;
}

.atd__editor-head,
.atd__editor-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm-md);
  padding: var(--space-md);
  font-family: var(--atd-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.atd__editor-head {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  border-bottom-color: var(--grey-light);
  color: var(--text-muted-light);
}

.atd__window-dots {
  display: flex;
  gap: .28rem;
}

.atd__window-dots i {
  width: .34rem;
  aspect-ratio: 1;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: currentColor;
  border-radius: 50%;
}

.atd__editor-body {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-sm-md);
  padding: var(--space-md-lg);
}

.atd__eyebrow {
  margin: 0;
  color: var(--atd-signal-deep);
  font-family: var(--atd-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.atd__title {
  max-width: 12ch;
  margin: 0 0 var(--space-xs);
  font-family: var(--atd-display);
  font-size: var(--font-h3-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

.atd__typing-row {
  --atd-progress: 1;
  position: relative;
  width: 100%;
  height: var(--border-thick);
}

.atd__typing-row--mid { width: 82%; }
.atd__typing-row--short { width: 58%; }

.atd__line {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-full);
  background: var(--grey-light);
  transform: scaleX(var(--atd-progress));
  transform-origin: 0 50%;
}

.atd__caret {
  position: absolute;
  top: 50%;
  left: calc(var(--atd-progress) * 100%);
  width: 2px;
  height: var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--atd-signal);
  transform: translate(-1px, -50%);
}

.atd__editor-foot {
  border-top-width: var(--border-thin);
  border-top-style: solid;
  border-top-color: var(--grey-light);
  color: var(--text-muted-light);
}

.atd__publish-button {
  display: inline-flex;
  min-width: 6.4rem;
  justify-content: center;
  padding: var(--space-sm-md) var(--space-md);
  border-radius: var(--radius-full);
  color: var(--atd-paper);
  background: var(--atd-ink);
}

.atd__tap {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 13%;
  width: clamp(4.5rem, 10vw, 6.5rem);
  aspect-ratio: 1;
  display: grid;
  border: 0;
  border-radius: 50%;
  color: var(--atd-ink);
  background: var(--atd-signal);
  box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--atd-signal) 25%, transparent);
  place-items: center;
}

.atd__tap,
.atd__tap-ripple,
.atd__caret {
  visibility: hidden;
  opacity: 0;
}

.atd__tap::before,
.atd__tap::after {
  position: absolute;
  inset: 0;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-signal);
  border-radius: 50%;
  content: "";
}

.atd__tap::after { inset: 17%; }

.atd__tap svg {
  width: 38%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.atd__tap-ripple {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: 13%;
  width: clamp(4.5rem, 10vw, 6.5rem);
  aspect-ratio: 1;
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-signal);
  border-radius: 50%;
}

.atd__live-badge {
  position: absolute;
  z-index: 5;
  top: 12%;
  right: 5%;
  display: flex;
  gap: var(--space-sm-md);
  align-items: center;
  padding: var(--space-sm-md) var(--space-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-line);
  border-radius: var(--radius-full);
  color: var(--atd-paper);
  background: var(--atd-ink);
  font-family: var(--atd-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.atd__live-badge i {
  width: .48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--atd-signal);
}

.atd__done-mark {
  position: absolute;
  z-index: 6;
  right: 3%;
  bottom: 5%;
  width: clamp(4rem, 9vw, 6rem);
  overflow: visible;
  fill: var(--atd-signal);
}

.atd__done-mark path {
  fill: none;
  stroke: var(--atd-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.atd__footer {
  align-items: center;
  padding-top: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  border-top-color: var(--atd-line);
  color: var(--atd-muted);
}

.atd__replay {
  display: none;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-color: var(--atd-line);
  border-radius: var(--radius-full);
  color: var(--atd-paper);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: border-color var(--speed-normal) var(--ease-default), color var(--speed-normal) var(--ease-default), background-color var(--speed-normal) var(--ease-default);
}

.atd-is-ready .atd__replay { display: inline-flex; }

.atd__replay:hover {
  border-color: var(--atd-signal);
  color: var(--atd-signal);
}

.atd__replay:focus-visible {
  outline: var(--border-thick) solid var(--atd-paper);
  outline-offset: var(--border-thick);
}

.atd__replay svg {
  width: .8rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.atd__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1000px) {
  .autoblog-tagline {
    min-height: auto;
  }

  .atd__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .atd__words {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .atd__word {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  .atd__word span {
    padding-top: 0;
  }

  .atd__word strong {
    font-size: var(--font-display-xs);
    line-height: var(--leading-tight);
  }

  .atd__stage {
    width: min(100%, 31rem);
    justify-self: center;
  }

  .atd__editor { width: 78%; }

  .atd__footer > span { display: none; }

  .atd__replay { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .atd__replay { display: none; }
}
/* END TEST ONLY — publishing-anim-test.html */

/* ============================================================
   Degrees pricing page — Zone 1 (hero)
   Reuses the shared inner-hero shell; adds only the three-price instrument.
   ============================================================ */

.pricing-hero-zone {
  background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.pricing-hero-zone .inner-hero-copy h1 {
  max-width: 15ch;
}

.pricing-instrument {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md-lg);
}

/* The three tracks are declared ONCE here and the rows inherit them with
   subgrid. Three independent grids do not share column widths, so the prices
   landed at three different right edges — the "CHARTER · LIMITED" markers are
   wider than "START HERE" and each row sized its own auto track. Subgrid is
   what makes £22, £50 and £100 align. */
.pricing-readings {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-content: center;
}

.pricing-reading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--space-md-lg);
  padding-block: var(--gap-xs);
  border-top: var(--border-thin) solid var(--grey-darkest);
  align-items: baseline;
}

.pricing-reading:first-child {
  border-top: 0;
}

/* ⚠️ Settles by TRANSFORM only, never opacity. The spec requires the prices to
   be "present in the reduced-motion and first-useful-paint states", and an
   opacity-0 start would leave all three prices invisible if the animation
   never ran — which is exactly Build Lesson #8's failure. A translate cannot
   hide anything. */
.pricing-reading strong {
  font-family: var(--font-heading);
  font-size: var(--font-display-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
  text-align: right;
  transform: translateY(.14em);
  animation: pricing-settle 560ms var(--ease-default) forwards;
}

.pricing-reading:nth-child(1) strong { animation-delay: 140ms; }
.pricing-reading:nth-child(2) strong { animation-delay: 240ms; }
.pricing-reading:nth-child(3) strong { animation-delay: 340ms; }

.pricing-reading > span {
  font-family: var(--font-heading);
  font-size: var(--font-h4-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-muted-dark);
}

.pricing-reading small {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted-dark);
}

/* Signal marks the scalable starting route only; 180° and 360° keep Paper
   prices and take Signal on their small charter markers instead. */
.pricing-reading-lead > span,
.pricing-reading-lead strong,
.pricing-reading:not(.pricing-reading-lead) small {
  color: var(--brand-accent);
}

.pricing-reading-lead small {
  color: var(--brand-accent);
}

/* The foot carries one long phrase rather than a pair, so it wraps instead of
   justifying to opposite edges. */
.pricing-instrument .inner-signal-foot {
  flex-wrap: wrap;
}

@keyframes pricing-settle {
  to { transform: translateY(0); }
}

@media (max-width: 1000px) {
  .pricing-instrument {
    width: min(44rem, 100%);
    min-height: 30rem;
  }
}

/* ============================================================
   Questions & Contact page — Zone 1 (hero)
   Reuses the shared inner-hero shell; adds only the open-answer instrument.
   ============================================================ */

.questions-hero-zone {
  background: radial-gradient(circle at 87% 17%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.questions-hero-zone .inner-hero-copy h1 {
  max-width: 15ch;
}

.answer-instrument {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md-lg);
}

.answer-body {
  align-content: center;
  display: grid;
}

/* 23–35px, per spec — --font-h3-sm is 21.6–35.2px, the nearest scale step. */
.answer-question {
  margin: 0 0 var(--space-md-lg);
  font-family: var(--font-heading);
  font-size: var(--font-h3-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

.answer-reply {
  margin: 0;
  font-size: var(--font-body-lg);
  line-height: var(--leading-normal);
  color: var(--text-muted-dark);
}

/* Signal marks the word "No" and the step numbers — nothing else in the
   panel, per spec. <em> carries the emphasis semantically; the italic is
   removed because the emphasis is being shown in colour and weight instead. */
.answer-reply em {
  font-style: normal;
  font-weight: var(--weight-semibold);
  color: var(--brand-accent);
}

.answer-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.answer-steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--border-thin) solid var(--grey-darkest);
  align-items: baseline;
  font-family: var(--font-heading);
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
}

.answer-steps li > span {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  /* --font-label, not --font-micro: this is a step number a customer reads,
     matching .scores-index / .booking-stage-step. Owner-flagged, 19 Aug. */
  font-size: var(--font-label);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  color: var(--brand-accent);
}

@media (max-width: 1000px) {
  .answer-instrument {
    width: min(44rem, 100%);
    min-height: 28rem;
  }
}

/* ============================================================
   FAQ behaviour demo — Zone 1 (internal page, not public)
   ============================================================ */

.demo-hero-zone {
  background: radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.demo-hero-zone .inner-hero-copy h1 {
  max-width: 17ch;
}

.demo-panel {
  min-height: min(56svh, 34rem);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md-lg);
}

.demo-compare {
  display: grid;
  align-content: center;
  margin: 0;
}

.demo-compare > div {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-md-lg);
  padding-block: var(--gap-xs);
  border-top: var(--border-thin) solid var(--grey-darkest);
  align-items: baseline;
}

.demo-compare > div:first-child {
  border-top: 0;
}

.demo-compare dt {
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  color: var(--brand-accent);
}

.demo-compare dd {
  margin: 0;
}

.demo-compare strong,
.demo-compare dd span {
  display: block;
}

.demo-compare strong {
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
}

.demo-compare dd span {
  margin-top: var(--space-xs);
  font-size: var(--font-small);
  line-height: var(--leading-snug);
  color: var(--text-muted-dark);
}

@media (max-width: 1000px) {
  .demo-panel {
    width: min(44rem, 100%);
    min-height: 24rem;
  }
}

/* ============================================================
   Bearings marks — Zone 1 (internal page, not public)
   ============================================================ */

.marks-hero-zone {
  background: radial-gradient(circle at 86% 19%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.marks-hero-zone .inner-hero-copy h1 {
  max-width: 17ch;
}

.marks-panel {
  min-height: min(56svh, 34rem);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md-lg);
}

.marks-figures {
  display: grid;
  align-content: center;
  margin: 0;
}

.marks-figures > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--border-thin) solid var(--grey-darkest);
  align-items: baseline;
}

.marks-figures > div:first-child {
  border-top: 0;
}

.marks-figures dt {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted-dark);
}

.marks-figures dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flush);
}

.marks-figures .is-pass { color: var(--brand-accent); }
.marks-figures .is-fail { color: var(--text-muted-dark); }

.marks-figures .is-fail::after {
  content: " ✕";
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
}

.marks-figures .is-pass::after {
  content: " ✓";
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
}

@media (max-width: 1000px) {
  .marks-panel {
    width: min(44rem, 100%);
    min-height: 26rem;
  }
}

/* ============================================================
   About page — Zone 1 (hero)
   Reuses the shared inner-hero shell; adds only the handover instrument.
   ============================================================ */

.about-hero-zone {
  background: radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.about-hero-zone .inner-hero-copy h1 {
  max-width: 17ch;
}

.handover-instrument {
  min-height: min(68svh, 44rem);
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-md-lg);
}

/* --- The transfer: facts in, handled website out --- */

.handover-core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-md-lg);
  align-content: center;
  align-items: center;
}

/* 23–35px per spec — --font-h3-sm is 21.6–35.2px, the nearest scale step. */
.handover-side {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-h3-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

.handover-side-out {
  text-align: right;
  color: var(--brand-accent);
}

/* Draws once, never loops — spec caps it at 650ms. Scales on the X axis from
   the left, so the line reads as a transfer rather than a fade. */
.handover-transfer {
  position: relative;
  display: block;
  width: clamp(2.5rem, 7vw, 5rem);
  height: var(--border-medium);
  background-color: var(--grey-darkest);
}

.handover-transfer i {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--brand-accent);
  animation: handover-draw 640ms var(--ease-default) 260ms forwards;
}

/* The arrowhead sits at the right end, appearing with the line. */
.handover-transfer::after {
  position: absolute;
  top: 50%;
  right: -.1rem;
  width: .5rem;
  height: .5rem;
  border-top: var(--border-medium) solid var(--brand-accent);
  border-right: var(--border-medium) solid var(--brand-accent);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

@keyframes handover-draw {
  to { transform: scaleX(1); }
}

/* --- The four readings, all marked SITETHREESIXTY --- */

.handover-readings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: var(--border-thin) solid var(--grey-darkest);
  border-left: var(--border-thin) solid var(--grey-darkest);
  list-style: none;
}

.handover-readings li {
  padding: var(--space-md);
  border-right: var(--border-thin) solid var(--grey-darkest);
  border-bottom: var(--border-thin) solid var(--grey-darkest);
}

.handover-readings strong,
.handover-readings span {
  display: block;
}

.handover-readings strong {
  font-family: var(--font-heading);
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
}

.handover-readings span {
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  color: var(--brand-accent);
}

@media (max-width: 1000px) {
  .handover-instrument {
    width: min(44rem, 100%);
    min-height: 32rem;
  }
}

/* ============================================================
   Our Work page — Zone 1 (hero)
   Reuses the shared inner-hero shell; adds only the proof index.
   ============================================================ */

.work-hero-zone {
  background: radial-gradient(circle at 87% 18%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.work-hero-zone .inner-hero-copy h1 {
  max-width: 16ch;
}

/* The two challenge paragraphs after the lead — guideline calls for the
   second to sit in a "Mist strip" with a leading rule, semibold, so this
   difference cannot be missed. Selector-scoped rather than a second class:
   :last-of-type carries the strong treatment, keeping one class name for
   both. */
.hero-challenge-line {
  max-width: 54ch;
  margin: 0 0 var(--space-sm-md);
  font-size: var(--font-small);
  line-height: var(--leading-normal);
  color: var(--text-muted-light);
}

.hero-challenge-line:last-of-type {
  padding: var(--space-md-lg);
  margin-bottom: var(--space-lg);
  border-left-width: var(--border-thick);
  border-left-style: solid;
  border-left-color: var(--brand-accent);
  background-color: var(--bg-muted);
  font-size: var(--font-body-size);
  font-weight: var(--weight-semibold);
  color: var(--text-on-light);
}

/* Replaces the retired .proof-instrument/.proof-readings pair (owner
   rejected the "evidence ledger" prove-it framing site-wide, 19 Aug 2026 —
   this hero panel is downstream of the same ruling). Built on the shared
   .inner-signal-panel shell already used by pricing.html/hosting.html rather
   than a new panel pattern. */
.live-test-instrument {
  min-height: min(60svh, 38rem);
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-md-lg);
}

.live-test-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-content: center;
  margin: 0;
}

.live-test-scores > div {
  padding-block: var(--space-sm-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.live-test-scores dt {
  font-size: var(--font-small);
  line-height: var(--leading-snug);
  color: var(--text-muted-dark);
}

.live-test-scores dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-h4-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flush);
  color: var(--brand-accent);
}

.live-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md-lg);
  align-items: center;
}

@media (max-width: 1000px) {
  .live-test-instrument {
    width: min(44rem, 100%);
    min-height: 30rem;
  }
}

/* ============================================================
   What You Get page — Zone 1 (hero)
   Reuses .inner-hero-zone / .inner-hero-container-grid / .inner-hero-copy /
   .inner-signal-panel / .inner-signal-head / .inner-signal-foot as-is —
   this section only adds what's unique to the managed-website instrument.
   Same grammar as .dash-instrument (core mark + surrounding readings),
   adapted from a two-ring orbit to four positioned arc labels because the
   direction calls for four short status labels around the centre, not two
   concentric rings — the shape genuinely differs, so it is a new class
   rather than a reuse of .dash-instrument-core.
   ============================================================ */

.wyg-hero-zone {
  background: radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--brand-accent) 7.5%, transparent), transparent 30rem), var(--bg-light);
}

.wyg-hero-zone .inner-hero-copy h1 {
  max-width: 10ch;
}

.wyg-hero-reassurance {
  margin-top: var(--space-sm-md);
  color: var(--text-muted-light);
}

.wyg-instrument-core {
  min-height: 20rem;
  display: grid;
  grid-template-areas:
    "arc1 arc2"
    "mark mark"
    "arc3 arc4";
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md-lg);
  align-items: center;
  justify-items: center;
  padding-block: var(--space-lg);
}

.wyg-instrument-ring {
  display: none;
}

.wyg-instrument-mark {
  grid-area: mark;
  position: relative;
  z-index: var(--z-above);
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: min(11rem, 60%);
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: var(--radius-full);
  text-align: center;
}

.wyg-instrument-mark strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-normal);
  color: var(--brand-accent);
}

.wyg-instrument-mark .signal-dot {
  color: var(--brand-accent);
}

.wyg-instrument-arc {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm) var(--space-sm-md);
  border: var(--border-thin) solid var(--grey-darkest);
  border-radius: var(--radius-full);
}

.wyg-instrument-arc-1 { grid-area: arc1; }
.wyg-instrument-arc-2 { grid-area: arc2; }
.wyg-instrument-arc-3 { grid-area: arc3; }
.wyg-instrument-arc-4 { grid-area: arc4; }

.wyg-instrument-arc span {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-micro);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted-dark);
}

@media (max-width: 1000px) {
  .wyg-instrument-core {
    min-height: 16rem;
  }

  .wyg-instrument-mark {
    width: min(9rem, 60%);
  }
}

/* https://www.sitethreesixty.com */