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

/* ============================================================
   elements.css — Atomic element styles
   No colours: every colour the delivered design set here was
   moved to zones.css, because an Element must survive being
   dropped into a different Zone. Borders declare width and
   style only; their colour comes from the Zone.

   max-width appears only as a `ch` text measure, which scales
   with the font and shrinks with the accordion. No px/rem
   layout caps (checklist C1).
   ============================================================ */

/* currentColor on these dividers is deliberate and load-bearing. It is not a
   colour choice — it resolves to whatever the Zone set as its text colour, so
   the Zone still owns the value. Substituting a grey token here made every one
   of them paler than the delivered design (caught by scripts/colourdiff.py,
   17 Aug 2026). Zone rules with higher specificity still override where the
   design intended a specific rule colour. */

.text-link {
  font-weight: var(--weight-semibold);
}

/* Both are below the fold on both pages, so the hover lives here rather than
   in critical — which also keeps each class inside a single layer (B3). */
/* ⛔ Underline, not `opacity` — see the matching note in the shared base.
   A8 bans the opacity property on text, tokens included. */
.text-link,
.footer-grid a {
  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);
}

.text-link:hover,
.footer-grid a:hover {
  text-decoration-color: currentColor;
}

/* Reveal transition. The hidden state is in the critical files — if it
   lived here, revealed blocks would paint visible then snap to hidden. */
.will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--speed-slow) var(--ease-default),
              transform var(--speed-slow) var(--ease-default);
}

/* --- Zone: degrees --- */

.degrees-heading {
  margin-bottom: var(--space-lg-xl);
}

.degrees-heading h2 {
  max-width: 34ch;
  margin: var(--space-lg-xl) 0 0;
  text-wrap: balance;
}

.degrees-heading > p:last-child {
  max-width: 50ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.inset-panel {
  padding: var(--gap-sm);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
}

.degrees-card-top {
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.degrees-card-top p {
  margin: 0;
}

.degrees-card > .display-lg-main {
  margin: var(--gap-2xl) 0;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.degrees-card h3 {
  margin-bottom: var(--space-md-lg);
}

.rule-top {
  padding-top: var(--space-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

/* .degrees-card-bottom: dual-class with .rule-top (base) — zones.css
   .zone-dark .degrees-card-bottom (+ p span) still matches the bare class. */

.degrees-card-bottom p {
  display: flex;
  margin: 0;
  align-items: flex-end;
  gap: var(--space-sm);
}

.degrees-card-bottom strong {
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flush);
}

.degrees-card-bottom p span {
  max-width: 16ch;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- Shared heading rhythm --- */

.trade-heading h2,
.process-copy h2,
.scope-heading h2,
.examples-heading h2,
.about-container-grid h2 {
  margin-top: var(--space-lg-xl);
}

.trade-heading > p:last-child,
.process-copy > p:not(.section-label),
.examples-heading > p:last-child,
.body-lg-system {
  font-size: var(--font-body-lg);
}

/* .small-system: same minimal pattern as .body-lg-system above — `system`
   family is the inherited default from `body` (font-family: var(--font-body),
   regular weight), so only font-size needs declaring. 41 clear members
   (5 Zone 1 critical excluded), CLASS-NAMING-AND-LOCKDOWN-PROPOSAL.md §9d-I. */
.small-system {
  font-size: var(--font-small);
}

/* --- Shared display type (element-family) ---
   Only the three font properties the naming scheme actually claims —
   family, size, weight. line-height/letter-spacing/margin/display are not
   part of this contract and stay wherever each usage already sits, because
   they genuinely differ member to member (§3b/§9, CLASS-NAMING-AND-
   LOCKDOWN-PROPOSAL.md). */

.display-sm-main {
  font-family: var(--font-heading);
  font-size: var(--font-display-sm);
  font-weight: var(--weight-medium);
}

.display-md-main {
  font-family: var(--font-heading);
  font-size: var(--font-display-md);
  font-weight: var(--weight-medium);
}

.display-lg-main {
  font-family: var(--font-heading);
  font-size: var(--font-display-lg);
  font-weight: var(--weight-medium);
}

.h4-lg-main {
  font-family: var(--font-heading);
  font-size: var(--font-h4-lg);
  font-weight: var(--weight-medium);
}

.h3-sm-main {
  font-family: var(--font-heading);
  font-size: var(--font-h3-sm);
  font-weight: var(--weight-medium);
}

.h5-main {
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--weight-medium);
}

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

/* --- Shared instrument/label type (element-family) ---
   Same contract as the heading family above: family, size, weight only.
   line-height/letter-spacing/margin/text-transform stay at each member's own
   selector because none of them is uniform across any of these four groups
   (§9d-I, CLASS-NAMING-AND-LOCKDOWN-PROPOSAL.md). */

.micro-second {
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  font-weight: var(--weight-semibold);
}

.caption-second {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
}

.label-sm-second {
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  font-weight: var(--weight-semibold);
}

.label-second {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  font-weight: var(--weight-semibold);
}

/* --- Zone: trades --- */

.trade-list {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.trade-list article {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.trade-list article > span {
  line-height: var(--leading-flush);
}

.trade-list article h3,
.trade-list article p {
  margin: 0;
}

.trade-list article p {
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- Zone: process --- */

.process-copy > p:not(.section-label) {
  max-width: 52ch;
}

.process-list {
  margin: var(--space-lg-xl) 0 0;
  padding: 0;
  list-style: none;
}

.process-list li {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.process-list li > span {
  line-height: var(--leading-flush);
}

.process-list h3 {
  margin: 0 0 var(--space-sm-md);
}

.process-list p {
  margin: 0;
}

.process-facts-panel {
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.process-facts-head {
  padding: var(--space-md) var(--space-md-plus);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

.process-facts-head strong {
  /* 11.68px, so 600 like every other label under 13px (owner ruling 28). It was 400 to undo
     <strong>'s UA-default 700; the rule now sets the weight it actually wants. */
  font-weight: var(--weight-semibold);
}

.process-facts-row {
  padding: var(--gap-xs-sm);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.process-facts-row > span {
  line-height: var(--leading-flush);
}

.process-facts-row small,
.process-facts-row strong {
  display: block;
}

.process-facts-row small {
  margin-bottom: var(--space-xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

.process-facts-row strong {
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
}

.process-facts-row i {
  padding: var(--space-xs) var(--space-sm);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-full);
  font-style: normal;
  line-height: var(--leading-flush);
  text-transform: uppercase;
}

.process-facts-output {
  padding: var(--space-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

.process-facts-output strong {
  letter-spacing: var(--tracking-snug);
}

/* --- Zone: scope --- */

.scope-heading h2 {
  max-width: 12ch;
}

.scope-heading > p:last-child {
  max-width: 51ch;
  font-size: var(--font-body-lg);
}

.scope-count {
  align-self: end;
  padding: 0 0 var(--space-md-lg);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.scope-count strong,
.scope-count span {
  display: block;
}

.scope-count strong {
  font-family: var(--font-heading);
  font-size: var(--font-display-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.scope-count span {
  margin-top: var(--space-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.scope-pages {
  margin: 0;
  padding: 0;
  border-top-width: var(--border-thin);
  border-top-style: solid;
  list-style: none;
}

.scope-pages li {
  padding: var(--space-md-lg) var(--space-md);
  border-right-width: var(--border-thin);
  border-bottom-width: var(--border-thin);
  border-right-style: solid;
  border-bottom-style: solid;
}

.scope-pages li span {
  display: block;
  margin-bottom: var(--space-md-lg);
  /* Declared, not inherited. The <li> above sets --weight-medium for its heading-font
     numeral; this mono label switched family but not weight, so it rode along at 300.
     Invisible until the owner chose Light and --weight-medium moved 500 -> 300, at which
     point 9.9px mono went faint. The design set 400 here via the `font:` shorthand, whose
     implicit reset is exactly what expanding to longhands drops. */
  line-height: var(--leading-flush);
}

.scope-note {
  max-width: 142ch;
  margin: 0;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* --- Zone: examples --- */

.examples-heading {
  margin-bottom: var(--space-lg-xl);
}

.examples-heading h2 {
  max-width: 13ch;
}

.examples-heading > p:last-child {
  max-width: 50ch;
  margin: 0;
}

.examples-card {
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
}

.examples-card > div:last-child {
  padding: var(--space-md-lg);
}

.examples-card h3 {
  margin: var(--space-md) 0 var(--space-lg);
}

.examples-card .section-label {
  margin: 0;
}

.examples-window {
  min-height: 22rem;
  padding: var(--space-md);
}

.examples-window > span {
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

.examples-window > div {
  margin-top: var(--space-md);
  padding: var(--gap-sm);
  border-radius: var(--radius-md);
}

.examples-window small {
  display: block;
  margin-bottom: var(--space-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

.examples-window .display-sm-main {
  display: block;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.examples-window i {
  display: block;
  width: 4.5rem;
  height: .85rem;
  margin-top: var(--space-lg);
  border-radius: var(--radius-full);
}

/* --- Zone: about --- */

.about-kicker {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-display-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
  /* nowrap, not break-all: the cqi font-size above is derived from this text's
     own width, so it always fits — and break-all was chopping it mid-word into
     "siteth / reesix / ty." */
  white-space: nowrap;
}

.about-container-grid h2 {
  max-width: 12ch;
}

.about-container-grid > div > p:not(.section-label) {
  max-width: 57ch;
}

.about-container-grid .btn-secondary {
  margin-top: var(--space-md-lg);
}

/* --- Zone: questions --- */

.faq-container-stack > .section-label {
  margin-bottom: var(--space-lg-xl);
}

.faq-container-stack h2 {
  margin-bottom: var(--space-xl);
}

.faq-container-stack details {
  border-top-width: var(--border-thin);
  border-top-style: solid;
  border-top-color: currentColor;
}

.faq-container-stack details:last-child {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  border-bottom-color: currentColor;
}

.faq-container-stack summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md-lg);
  cursor: pointer;
  list-style: none;
}

.faq-container-stack summary::-webkit-details-marker {
  display: none;
}

/* ⚠️ :not(.disclosure-state) is load-bearing. These two rules were written
   when a summary held exactly ONE span — the "+" mark — so a bare `span`
   selector was safe. questions.html adds a second span carrying the written
   "Show answer"/"Hide answer" state, and without the exclusion that label
   rotated 45° along with the mark. Adding an element made a broad existing
   selector start matching, which is the Lesson #15 failure mode; found by
   looking at the render, not by any gate. */
.faq-container-stack summary span:not(.disclosure-state) {
  transition: transform var(--speed-fast) var(--ease-default);
}

.faq-container-stack details[open] summary span:not(.disclosure-state) {
  transform: rotate(45deg);
}

/* Slides open instead of snapping (owner, 18 Aug 2026).
   ::details-content is the only handle native <details> gives on its own
   content box, so this needs neither JS nor a wrapper div in the markup.
   `interpolate-size: allow-keywords` is what makes `block-size: auto` an
   animatable value — without it the keyword cannot be interpolated and the
   panel still jumps. It is an inherited property, set on the details so the
   pseudo-element picks it up; kept off :root to stay out of tokens.css's lane.

   Degrades to exactly the old behaviour: where ::details-content is
   unsupported the selector never matches and the disclosures open instantly,
   still fully correct. Both directions animate, so the accordion module's
   close-the-others still reads as a slide. The global
   prefers-reduced-motion guard already collapses the duration to .01ms. */
.faq-container-stack details {
  interpolate-size: allow-keywords;
}

/* --speed-slow, not --speed-normal (owner, 18 Aug 2026: "think Apple, a
   measured opening"). 320ms read as abrupt on a panel this tall.
   ⚠️ The frozen scale offers 180 / 320 / 680 and nothing between, so this is
   the only slower step available without changing --speed-normal's value
   site-wide — which would also slow every hover and mark rotation. */
.faq-container-stack details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--speed-slow) var(--ease-default),
              content-visibility var(--speed-slow) var(--ease-default);
  transition-behavior: allow-discrete;
}

.faq-container-stack details[open]::details-content {
  block-size: auto;
}

.faq-container-stack details p {
  max-width: 73ch;
  padding-bottom: var(--space-md-lg);
}

/* --- Zone: closing CTA --- */

.final-cta-grid h2 {
  max-width: 13ch;
  margin: var(--space-lg-xl) 0 0;
}

.final-cta-grid > div:last-child > p {
  font-size: var(--font-body-lg);
}

/* --- Zone: footer --- */

.footer-label {
  margin-bottom: var(--space-md);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
}

/* The stacked link columns only. The colophon block is also a direct child div,
   and its attribution link is inline inside a sentence — hence the :not(). */
.footer-grid > div:not(.footer-colophon) a {
  display: block;
  padding-block: var(--space-xs);
}

/* Sits under the colophon line, sharing its voice — the border above already
   separates the block, so this takes no second rule. */
.footer-attribution {
  margin: 0;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

/* .footer-colophon: dual-class with .rule-top (base) — zones.css
   .zone-dark .footer-colophon still matches the bare class. */

.footer-grid small {
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

/* ============================================================
   Hosting page elements
   ============================================================ */

.hosting-split-container-grid h2,
.hosting-statement-container-grid h2,
.hosting-feature-container-grid h2,
.hosting-growth-container-grid h2,
.hosting-zero-container-grid h2,
.hosting-ssl-container-grid h2,
.hosting-resilience-container-grid h2,
.hosting-modern-container-grid h2,
.hosting-managed-container-grid h2,
.hosting-final-container-grid h2 {
  margin-top: var(--space-lg-xl);
}

.hosting-closing-line {
  margin: var(--space-lg-xl) 0 0;
  padding-top: var(--space-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  border-top-color: currentColor;
  font-family: var(--font-heading);
  font-size: var(--font-display-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-snug);
}

.hosting-emphasis {
  margin-top: var(--space-lg);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

.bare-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosting-no-list {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.hosting-no-list li {
  padding-block: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  border-top-color: currentColor;
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
}

.hosting-no-list li span {
  margin-right: var(--space-md);
}

.hosting-check-list {
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.hosting-check-list li {
  position: relative;
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  border-bottom-color: currentColor;
}

.hosting-check-list li::before {
  position: absolute;
  top: 1.45rem;
  left: .2rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  content: "";
}

.hosting-inline-list {
  margin-block: var(--space-md-lg) var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-top-width: var(--border-thin);
  border-left-width: var(--border-thin);
  border-top-style: solid;
  border-left-style: solid;
}

.hosting-inline-list li {
  padding: var(--space-md);
  border-right-width: var(--border-thin);
  border-bottom-width: var(--border-thin);
  border-right-style: solid;
  border-bottom-style: solid;
}

.hosting-feature-grid article,
.hosting-modern-feature-grid article {
  min-height: 11rem;
  padding: var(--space-md-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.hosting-feature-grid article span,
.hosting-modern-feature-grid article span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.hosting-feature-grid article h3,
.hosting-modern-feature-grid article h3 {
  margin: var(--space-lg-xl) 0 0;
  /* Down a step from --font-h4-lg (24px): owner marked these too big. A token swap, not a
     token change — --font-h4-lg still drives the four other places that use it. */
  font-size: var(--font-h4);
}

.hosting-growth-copy p {
  max-width: 70ch;
}

.hosting-growth-track {
  margin-top: var(--space-lg-xl);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.hosting-growth-track i {
  position: relative;
  height: var(--border-thin);
}

.hosting-growth-track i::before,
.hosting-growth-track i::after {
  position: absolute;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.hosting-growth-track i::before { left: 0; }
.hosting-growth-track i::after { right: 0; }

.hosting-zero-mark {
  font-family: var(--font-heading);
  font-size: var(--font-display-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.hosting-ssl-lock {
  position: relative;
  min-height: 30rem;
  display: grid;
  padding: var(--space-lg);
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
  align-content: space-between;
}

.hosting-ssl-lock span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
}

.hosting-ssl-lock strong {
  position: relative;
  z-index: var(--z-above);
  font-family: var(--font-heading);
  font-size: var(--font-display-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

/* Decorative ring — not text, so opacity is legitimate here (A8 is text only). */
.hosting-ssl-lock i {
  position: absolute;
  right: -12%;
  bottom: -22%;
  width: 75%;
  aspect-ratio: 1;
  border-width: clamp(2rem, 5vw, 4rem);
  border-style: solid;
  border-radius: 50%;
  opacity: var(--opacity-heavy);
}

.hosting-resilience-visual {
  min-height: 30rem;
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
}

.hosting-resilience-visual span {
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: 50%;
}

.hosting-resilience-visual span:nth-child(1) { width: 78%; aspect-ratio: 1; }
.hosting-resilience-visual span:nth-child(2) { width: 54%; aspect-ratio: 1; }
.hosting-resilience-visual span:nth-child(3) { width: 28%; aspect-ratio: 1; }

.hosting-resilience-visual strong {
  /* Same missing reset, opposite direction: <strong> carries the UA default 700, so this
     rendered BOLDER than the design, which set 400 through the `font:` shorthand. The tag
     is here for emphasis semantics; the weight is a typographic decision, so state it. */
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps-lg);
}

.hosting-managed-lines {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.hosting-managed-lines li {
  padding-block: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.hosting-managed-lines li span {
  /* Declared, not inherited — same reason as .scope-pages li span above. */
  line-height: var(--leading-flush);
}

.hosting-included-degrees {
  min-height: 18rem;
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.hosting-included-degrees span {
  padding-bottom: var(--space-md-lg);
  border-right-width: var(--border-thin);
  border-right-style: solid;
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-crush);
  text-align: center;
}

.hosting-included-degrees span:last-child {
  border-right-width: 0;
}

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

/* ============================================================
   Comparison page — elements
   ============================================================ */

.zone[id] {
  scroll-margin-top: 6.25rem;
}

.pricing-terms-note, .comparison-note {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md-lg);
  border-top: var(--border-thin) solid currentColor;
  line-height: 1.65;
  letter-spacing: var(--tracking-normal);
}

.comparison-section-heading {
  margin-bottom: var(--space-lg-xl);
}

.comparison-section-heading h2 {
  max-width: 14ch;
  margin: var(--space-lg-xl) 0 0;
}

.comparison-section-heading > p {
  max-width: 53ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.route-card {
  padding: var(--gap-sm);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-lg);
  transition: transform var(--speed-fast) var(--ease-default);
}

.route-card:hover {
  transform: translateY(-2px);
}

.route-card-top {
  line-height: 1.35;
  letter-spacing: var(--tracking-caps);
}

.route-card-top span {
  font-weight: var(--weight-semibold);
}

/* <small> carries the UA default `font-size: smaller` = 83.33% of its parent, which
   COMPOUNDS against the .58rem above and lands at 7.7px. Nobody chose that number — the
   rule two above says .58rem and means it; the tag is here for meaning, not for size. */
.route-card-top small {
  font-size: inherit;
}

.route-card > .display-lg-main {
  margin: clamp(2.7rem, 5vw, 4.5rem) 0 var(--space-lg-xl);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.route-card h3 {
  margin-bottom: var(--space-md-lg);
}

.route-card > p:not(.display-lg-main) {
  margin-bottom: var(--space-lg-xl);
}

.route-card dl {
  margin-bottom: 0;
  border-top: var(--border-thin) solid currentColor;
}

.route-card dl div {
  padding-block: var(--space-md);
  border-bottom: var(--border-thin) solid currentColor;
}

.route-card dt {
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.route-card dd {
  margin: 0;
  line-height: var(--leading-normal);
}

.responsibility-ledger {
  border-top: var(--border-thin) solid currentColor;
}

.ledger-row > * {
  margin: 0;
  padding: var(--space-md-plus);
  border-right: var(--border-thin) solid currentColor;
  border-bottom: var(--border-thin) solid currentColor;
}

.ledger-row > *:first-child {
  border-left: var(--border-thin) solid currentColor;
}

.ledger-head {
  line-height: 1.35;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ledger-row strong {
  line-height: var(--leading-snug);
}

.ledger-row > span {
  line-height: var(--leading-snug);
}

.value-equation-copy h2 {
  max-width: 11ch;
  margin-top: var(--space-lg-xl);
}

.value-equation-lead {
  max-width: 51ch;
  font-size: var(--font-body-lg);
}

.value-points {
  margin-top: var(--space-lg-xl);
  border-bottom: var(--border-thin) solid currentColor;
}

.value-points article {
  padding-block: var(--space-md-lg);
  border-top: var(--border-thin) solid currentColor;
}

.value-points article > span {
  line-height: 1;
  letter-spacing: var(--tracking-caps);
}

.value-points h3, .value-points p {
  margin: 0;
}

.value-points h3 {
  margin-bottom: var(--space-sm-md);
}

.value-equation-instrument {
  min-height: 34rem;
  padding: var(--gap-sm);
  overflow: hidden;
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.value-equation-head {
  padding-bottom: var(--space-md);
  border-bottom: var(--border-thin) solid currentColor;
  line-height: 1.35;
  letter-spacing: var(--tracking-caps);
}

.value-equation-core {
  padding-block: var(--space-lg-xl);
}

.value-equation-core div {
  min-height: 14rem;
  padding: var(--space-md);
  border: var(--border-thin) solid currentColor;
}

.value-equation-core small, .value-equation-core strong, .value-equation-core span {
  display: block;
}

.value-equation-core small {
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-align: center;
}

.value-equation-core .display-lg-main {
  margin-block: var(--space-md-lg);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.value-equation-core span {
  line-height: 1.3;
  letter-spacing: var(--tracking-caps-lg);
}

.value-equation-core > i {
  font-family: var(--font-heading);
  font-size: var(--font-h1);
  font-style: normal;
  font-weight: var(--weight-medium);
}

.value-equation-instrument > p {
  margin: 0;
  padding-top: var(--space-md-lg);
  border-top: var(--border-thin) solid currentColor;
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

.degree-rail {
  min-height: 18rem;
  padding: var(--gap-md);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-lg);
  transition: transform var(--speed-fast) var(--ease-default);
}

.degree-rail:hover {
  transform: translateY(-2px);
}

.degree-rail-number .display-lg-main {
  display: block;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.degree-rail-number small, .degree-rail-price span, .degree-rail-price small {
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.degree-rail-number small {
  margin-top: var(--space-md-lg);
}

.degree-verb {
  margin-bottom: var(--space-md);
  line-height: 1.35;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.degree-rail-copy h3 {
  margin-bottom: var(--space-md);
}

.degree-rail-copy > p:last-child {
  max-width: 57ch;
  margin-bottom: 0;
}

.degree-rail-price strong {
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.degree-rail-price span {
  margin-top: var(--space-sm-md);
  text-align: right;
}

.degree-rail-price small {
  margin-top: var(--space-md-lg);
  padding: var(--space-sm) var(--space-sm-md);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-full);
}

.degree-extras-panel {
  margin-top: var(--space-md);
  padding: var(--gap-md);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-lg);
}

.degree-extras-intro h3 {
  max-width: 12ch;
  margin-block: var(--space-md-lg) var(--space-md);
}

.degree-extras-intro > p:last-child {
  max-width: 48ch;
  margin-bottom: 0;
}

.degree-extras-list li {
  position: relative;
  padding: var(--space-sm-md) 0 var(--space-sm-md) var(--space-md-plus);
  border-top: var(--border-thin) solid currentColor;
}

.degree-extras-list li::before {
  position: absolute;
  left: 0;
  content: "+";
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.degree-extras-note {
  display: block;
  max-width: 93ch;
  margin: var(--space-md) 0 0;
  font-size: var(--font-label);
  line-height: var(--leading-normal);
}

.degree-extras-note strong {
  font-weight: var(--weight-semibold);
}

.degree-extras-note a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.degree-coverage-panel {
  margin-top: var(--space-md);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.degree-coverage-column {
  padding: var(--gap-md);
}

.degree-coverage-column + .degree-coverage-column {
  border-left: var(--border-thin) solid currentColor;
}

.degree-coverage-column h3 {
  max-width: 16ch;
  margin-block: var(--space-md-lg) var(--space-lg);
}

.degree-coverage-lead {
  margin: calc(var(--space-md) * -1) 0 var(--space-md-lg);
}

.degree-coverage-list {
  margin: 0 0 var(--space-md-lg);
  padding: 0;
  list-style: none;
}

.degree-coverage-list li {
  position: relative;
  padding: var(--space-sm-md) 0 var(--space-sm-md) var(--space-md-lg);
  border-top: var(--border-thin) solid currentColor;
}

.degree-coverage-list li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.degree-coverage-column.is-covered .degree-coverage-list li::before {
  content: "+";
}

.degree-coverage-column.is-not-covered .degree-coverage-list li::before {
  content: "–";
}

.degree-coverage-column .text-link {
  margin-top: auto;
  align-self: flex-start;
}

.degrees-shared-line {
  margin-top: var(--space-md);
  padding-block: var(--space-md-lg);
  border-block: var(--border-thin) solid currentColor;
}

.degrees-shared-line > span {
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
}

.degrees-shared-line p {
  margin: 0;
}

.degree-system-links {
  border-top: var(--border-thin) solid currentColor;
  border-left: var(--border-thin) solid currentColor;
}

.degree-system-links a {
  min-height: 7.5rem;
  padding: var(--space-md-lg);
  border-right: var(--border-thin) solid currentColor;
  border-bottom: var(--border-thin) solid currentColor;
  text-decoration: none;
}

.degree-system-links span, .degree-system-links small {
  display: block;
}

.degree-system-links span {
  font-family: var(--font-heading);
  font-size: var(--font-h6);
  font-weight: var(--weight-medium);
}

.degree-system-links small {
  margin-top: var(--space-md);
  line-height: 1.45;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.research-number strong {
  font-family: var(--font-heading);
  font-size: var(--font-display-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.research-number span {
  margin: .2em 0 0 .06em;
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  line-height: var(--leading-flush);
}

.research-copy h2 {
  max-width: 13ch;
  margin-top: var(--space-lg-xl);
}

.research-copy > .body-lg-system {
  max-width: 57ch;
}

.research-copy > p:not(.section-label, .body-lg-system, .research-scope) {
  max-width: 76ch;
}

.research-stats {
  margin-block: var(--space-lg-xl);
  border-top: var(--border-thin) solid currentColor;
  border-left: var(--border-thin) solid currentColor;
}

.research-stats div {
  min-height: 9rem;
  padding: var(--space-md-lg);
  border-right: var(--border-thin) solid currentColor;
  border-bottom: var(--border-thin) solid currentColor;
}

.research-stats strong, .research-stats span {
  display: block;
}

.research-stats strong {
  font-family: var(--font-heading);
  font-size: var(--font-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-tight);
}

.research-stats span {
  margin-top: var(--space-md);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.research-scope {
  margin-block: var(--space-lg);
  line-height: 1.5;
  letter-spacing: var(--tracking-caps);
}

.fit-grid article {
  padding: var(--gap-sm);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-md);
  transition: transform var(--speed-fast) var(--ease-default);
}

.fit-grid article:hover {
  transform: translateY(-2px);
}

.fit-grid article > span {
  line-height: 1;
  letter-spacing: var(--tracking-caps);
}

.fit-grid article > p {
  margin: var(--space-xl) 0 var(--space-lg-xl);
}

.fit-grid h3 {
  margin-bottom: 0;
  font-size: var(--font-h3);
}

/* ============================================================
   360Dash & Ecosystem page — elements
   ============================================================ */

/* Shared line-icon grammar (contract 3.8): 64x64 field, ~1.7px open stroke,
   round joins/ends, no fill body, currentColor main strokes, one Signal dot
   per icon set by the zone (zones.css). Sizing is contextual — 3rem/48px for
   job cards, 4rem/64px for ecosystem cards, per the spec's own two figures. */
.icon-line {
  flex-shrink: 0;
}

.dash-jobs-heading h2 {
  max-width: 15ch;
  margin: var(--space-lg-xl) 0;
}

.dash-jobs-heading > p:last-child {
  max-width: 52ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.job-card-top .icon-line {
  width: 3rem;
  height: 3rem;
}

/* The Bearings icons are a deliberate statement — owner ruling 22 Aug, 3x the
   3rem used on .job-card-top. ⚠️ They shipped with NO size at all: an inline SVG
   with no width attribute and no CSS fills its container, so these rendered at
   365px. That was an unset value, not a design decision. */
.bearings-card-top .icon-line {
  width: 9rem;
  height: 9rem;
}

.job-card-top span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

/* --space-lg, not --gap-sm: the spec asks for "24px radius and 24-36px
   internal space", and --gap-sm is clamp(1.4rem, 2.8vw, 2.4rem), which
   measures 38.4px at the top of its range and 22.4px at the bottom — outside
   the stated band at BOTH ends. --space-lg is a flat 32px, which sits inside
   it at every width, and is the Section 5 resolution for a spacing range
   ("nearest step in the spacing scale, ties upward"). */
.job-card {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.job-card-body h3 {
  margin: var(--gap-2xl) 0 var(--space-sm-md);
  font-size: var(--font-h3);
}

.job-card-body p {
  margin: 0;
}

/* --- Zone: Content Map (light) --- */

.content-map-copy > p:not(.section-label) {
  max-width: 54ch;
}

.content-map-copy h2 {
  margin: var(--space-lg-xl) 0;
}

.content-map-steps li {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.content-map-steps li > span {
  line-height: var(--leading-flush);
}

.content-map-steps h3 {
  margin: 0 0 var(--space-sm-md);
}

.content-map-steps p {
  margin: 0;
}

/* Owner ruling, 18 Aug 2026 (Build Blocker Report, Zones 3 and 6): no coded
   stand-in for the real 360Dash captures the spec calls for — an honest
   "pending" placeholder instead. .media-placeholder is portable: any Zone
   waiting on a real image can reuse it, not just this page's two spots. */
.media-placeholder {
  display: grid;
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: dashed;
  border-radius: var(--radius-lg);
  place-items: center;
}

.content-map-panel {
  min-height: 30rem;
}

.mobile-app-panel {
  min-height: 26rem;
}

/* ⚠️ NOT a .section-label. It looked like one — mono, uppercase, --font-label —
   so the consolidation swept it in, and it inherited the eyebrow's Signal Deep,
   which measured 3.17:1 on Paper: an exposed AA failure. It is a pending-asset
   note, not a section eyebrow, so it keeps its own quiet type and takes the
   muted colour from its Zone. Shape is not the same thing as role. */
.media-placeholder-label {
  margin: 0;
  text-transform: uppercase;
  max-width: 22ch;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-caps);
  text-align: center;
}

.media-placeholder-label small {
  display: block;
  margin-top: var(--space-sm);
  letter-spacing: var(--tracking-wide);
}

/* --- Zone: build progress (muted) --- */

.progress-heading h2 {
  max-width: 14ch;
  margin: var(--space-lg-xl) 0;
}

.progress-heading > p:last-child {
  max-width: 52ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.progress-line li {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

/* The spec's "overscale Signal Deep number" — missed on the first pass, since
   every other numbered list on this page (job cards, Content Map steps) uses
   the small 12px mono numeral instead and this one alone asks for a second,
   larger treatment. Flagged at inspection; fixed here rather than argued. */
.progress-line li > .display-sm-main {
  display: block;
  margin-bottom: var(--space-sm-md);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.progress-line li > span {
  display: block;
  letter-spacing: var(--tracking-caps);
}

.progress-line strong {
  display: block;
  margin: var(--space-md) 0 var(--space-sm-md);
  line-height: var(--leading-flat);
}

.progress-line p {
  margin: 0;
}

/* --- Zone: connected ecosystem (dark) --- */

.dash-ecosystem-heading h2 {
  max-width: 15ch;
  margin: var(--space-lg-xl) 0;
}

.dash-ecosystem-heading > p:last-child {
  max-width: 52ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.ecosystem-card-top .icon-line {
  width: 4rem;
  height: 4rem;
}

.ecosystem-card {
  padding: var(--gap-sm);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.ecosystem-pill {
  display: inline-block;
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-caps);
}

.ecosystem-card-body h3 {
  margin: var(--space-lg) 0 var(--space-sm-md);
  font-size: var(--font-h3);
}

.ecosystem-card-body > p {
  margin: 0 0 var(--space-md);
}

.ecosystem-card-body .text-link {
}

/* --- Zone: mobile app (light) --- */

.mobile-app-copy h2 {
  margin: var(--space-lg-xl) 0;
}

.mobile-app-copy > p:not(.section-label) {
  max-width: 55ch;
}

.mobile-app-list {
  margin: var(--space-lg-xl) 0;
  padding: 0;
  list-style: none;
}

.mobile-app-list li {
  position: relative;
  padding: var(--space-sm-md) 0 var(--space-sm-md) var(--space-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.mobile-app-list li::before {
  position: absolute;
  top: 1.15rem;
  left: .2rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  content: "";
}

.mobile-app-emphasis {
  margin: 0;
  line-height: var(--leading-flat);
}

@media (max-width: 1000px) {

  /* The coverage panel is auto-fit, so it may be one column here; the divider
     moves from the inline edge to the top to follow it. Folded into the system
     breakpoint rather than the 47.99rem one the design shipped — 12 West has
     exactly one breakpoint. */
  .degree-coverage-column + .degree-coverage-column {
    border-top: var(--border-thin) solid currentColor;
    border-left: 0;
  }

  /* Spec Zone 02: "On a handheld, turn the bridge into a vertical reading
     sequence. The directional marks rotate to preserve the flow." Stated in
     viewport terms, so a container query cannot express it — and this is the
     system's one breakpoint, not a new one. It sits here rather than in
     containers.css (which may carry no media query at all); elements.css loads
     after containers.css, so it wins on order with no cascade race. */
  .publishing-bridge {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .publishing-bridge span {
    transform: rotate(90deg);
  }

  .zone[id] {
    scroll-margin-top: 4.4rem;
  }
}

/* The analogy's three parts carry a leading rule. Above the lock point that
   reads as a vertical divider between columns; stacked, a top rule is the
   horizontal equivalent — which is what the spec asks for ("separated by 1px
   Light rules… below the lock point, stack all three with horizontal rules").
   Same property either way, so this is a container query, not a breakpoint. */
@container frame (min-width: 900px) {
  .analogy-part {
    padding-top: 0;
    padding-left: var(--gap-2xl);
    border-top-width: 0;
    border-left-width: var(--border-thin);
    border-left-style: solid;
  }

  .analogy-part:first-of-type {
    padding-left: 0;
    border-left-width: 0;
  }
}

/* Reasserts border-top-width AND padding-top against the @container rule
   above. Pre-merge, .analogy-part's own base declaration (padding-top:
   var(--space-lg); border-top-width: var(--border-thin)) sat AFTER this
   @container block in source order, so at equal specificity it won both
   ties and the "flip to a left rule at 900px+" never actually fired —
   .rule-top now sits earlier in the file (elements.css line ~97), which
   would let the @container rule win instead and change what renders.
   Zero-visual-change requires reproducing the existing (latent-bug)
   cascade exactly, not correcting it. */
.analogy-part {
  padding-top: var(--space-lg);
  border-top-width: var(--border-thin);
}

/* 5 items — 3+2, never 4+1. See the "even rows" note in containers.css */
.hosting-inline-list {
  grid-template-columns: minmax(0, 1fr);
}

@container frame (min-width: 620px) {
  .hosting-inline-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   360° Booking page — elements
   ============================================================ */

/* --- Zone 02: customer booking journey --- */

.booking-journey-heading h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.booking-journey-heading > p:last-child {
  max-width: 52ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* 1px rules between stages, per spec — no arrows, which would imply a stage
   can be skipped. */
.booking-stage {
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

/* The spec's 48-52px for this set; the 360Dash job cards use the same figure. */
.booking-stage .icon-line {
  width: 3rem;
  height: 3rem;
}

.booking-stage-step {
  margin: var(--space-md-lg) 0 var(--space-sm);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.booking-stage h3 {
  margin: 0 0 var(--space-sm-md);
}

.booking-stage > p:last-child {
  margin: 0;
}

/* --- Zone 03: built to order --- */

.booking-custom-copy h2 {
  max-width: 17ch;
  margin: var(--space-lg-xl) 0;
}

.booking-custom-lead {
  max-width: 54ch;
  font-size: var(--font-body-lg);
}

/* One shared ruled field, not three cards — spec Zone 03. */
.booking-capability-list > div {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.booking-capability-list dt {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.booking-capability-list dd {
  margin: 0;
}

.booking-capability-list strong {
  display: block;
  margin-bottom: var(--space-sm-md);
  line-height: var(--leading-flat);
}

.booking-form-example {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.panel-head-flush {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.booking-form-fields > div {
  padding-block: var(--space-md-lg);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.booking-form-fields dt {
  line-height: var(--leading-snug);
}

/* Spec: "must not reduce answer type below 16px" — --font-body-size is a flat
   1rem, so the floor holds at every width rather than clamping under it. */
.booking-form-fields dd {
  margin: var(--space-sm) 0 0;
  line-height: var(--leading-snug);
}

.booking-form-action {
  margin: var(--space-md-lg) 0 0;
  padding: var(--space-md-plus) var(--space-md);
  border-radius: var(--radius-full);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  text-align: center;
}

.booking-form-note {
  margin: var(--space-md) 0 0;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

/* --- Zone 04: included and outside fees --- */

.booking-fees-heading h2 {
  max-width: 16ch;
  margin: var(--space-lg-xl) 0;
}

.booking-fees-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.booking-fee-lines > div {
  padding-block: var(--space-sm-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.booking-fee-lines dt {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Kept on one line-box with its "first 50 free" qualification — spec: "SMS
   prices must never wrap away from the 'first 50 free' qualification." One
   sentence, one <dd>, so a wrap can only ever break inside it, never separate
   the price from the allowance. */
.booking-fee-lines dd {
  margin: var(--space-sm) 0 0;
  line-height: var(--leading-normal);
}

.rule-top-note {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* --- Zone 05: integrated versus a separate tool --- */

.booking-difference-copy h2 {
  max-width: 15ch;
  margin: var(--space-lg-xl) 0;
}

.booking-difference-copy > p:last-child {
  max-width: 48ch;
  margin: 0;
}

.booking-difference-column {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.booking-difference-column ul {
  margin: var(--space-md-lg) 0 0;
  padding: 0;
  list-style: none;
}

.booking-difference-column li {
  padding-block: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-snug);
}

/* ============================================================
   360 Publishing Suite page — elements
   ============================================================ */

/* --- Zone 02: useful inputs --- */

.publishing-inputs-heading h2 {
  max-width: 16ch;
  margin: var(--space-lg-xl) 0;
}

.publishing-inputs-heading > p:last-child {
  max-width: 52ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* "generous blank space", per spec — the panels are the roomiest cards on the
   site, so the padding steps up from --space-lg to --gap-md. */
.panel-md {
  padding: var(--gap-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

/* .input-panel: dual-class with .panel-md (base) — zones.css
   .zone-dark .input-panel (+ related) still matches the bare class. */

.input-panel .icon-line {
  width: 3rem;
  height: 3rem;
}

.input-panel-step {
  margin: var(--gap-2xl) 0 var(--space-sm);
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.input-panel h3 {
  margin: 0 0 var(--space-sm-md);
}

.input-panel > p:last-child {
  margin: 0;
}

.publishing-bridge {
  margin-top: var(--space-md);
  padding-block: var(--space-md-lg);
  border-block-width: var(--border-thin);
  border-block-style: solid;
}

.publishing-bridge p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
}

.publishing-bridge span {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-h5);
  line-height: var(--leading-flush);
}

/* --- Zone 03: the publishing view --- */

.publishing-view-copy h2 {
  max-width: 21ch;
  margin: var(--space-lg-xl) 0;
}

.publishing-view-lead {
  max-width: 55ch;
  font-size: var(--font-body-lg);
}

.publishing-view-panel {
  min-height: 30rem;
}

/* --- Zone 04: publishing outcomes --- */

.publishing-outcomes-heading h2 {
  max-width: 21ch;
  margin: var(--space-lg-xl) 0;
}

.publishing-outcomes-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* 24px radius, per spec — --radius-md exactly, no drift. */
.outcome-card {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.outcome-card h3 {
  margin: var(--space-lg) 0 var(--space-sm-md);
}

.outcome-card > p:last-child {
  margin: 0;
  line-height: var(--leading-normal);
}

/* --- Zone 05: fit and boundary --- */

.publishing-fit-copy h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0;
}

.publishing-fit-copy > p:last-child {
  max-width: 48ch;
  margin: 0;
}

/* 12px qualification inside a ruled field, per spec — a bordered box, not the
   top-rule note the comparison page uses. */
.publishing-scope-note {
  margin: var(--space-md) 0 0;
  padding: var(--space-md-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* --- Zone 06: one useful month --- */

.publishing-month-copy h2 {
  max-width: 17ch;
  margin: var(--space-lg-xl) 0;
}

.publishing-month-copy > p:last-child {
  margin: 0;
  font-size: var(--font-body-lg);
}

.publishing-month-grid article {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.publishing-month-grid h3 {
  margin: var(--space-md) 0 var(--space-sm-md);
}

.publishing-month-grid article > p:last-child {
  margin: 0;
  line-height: var(--leading-normal);
}

.publishing-month-note {
  margin: var(--space-sm) 0 0;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   Zone watermark — portable
   A decorative oversized word cropped by its Zone's edge. Deliberately given a
   PORTABLE name: the specs ask for one on four Zones across three pages, so a
   location prefix would be wrong here (and would add to the rename debt logged
   in CHANGELOG.md rather than avoiding it).

   Positioning a decorative element at a Zone edge is explicitly allowed by the
   layout rules ("Decorative elements sit at zone edges via positioning"); the
   forbidden case is positioning a CONTAINER. The Zone's own
   position/overflow pair lives in zones.css beside the watermark's colour.
   ============================================================ */

.zone-watermark {
  position: absolute;
  inset-block-end: -.16em;
  inset-inline-start: -.03em;
  z-index: var(--z-base);
  margin: 0;
  font-family: var(--font-heading);
  /* --font-display-2xl, not -3xl: the same fix already proven on .about-kicker
     (CHANGELOG.md, eighth pass) for the identical failure. -2xl is the token
     whose own comment says "watermark: fits its column on one line"
     (min(10rem, 17cqi) — shrinks against the Framework's container-type:
     inline-size). -3xl is a vw-based clamp with no shrink-to-fit behaviour;
     on Zone 9's four-word "CHOOSE THE HELP" it ran wider than the column and
     was clipped through the glyph middles by .has-watermark's overflow, which
     read as the watermark overlapping the footer below. It doesn't — the
     zone/footer boundary was never crossed, the text itself was unreadable. */
  font-size: var(--font-display-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
  white-space: nowrap;
  pointer-events: none;
}

/* Sits behind the top of the Zone instead of its foot. Sized a step DOWN from
   the foot variant, not up: at --font-display-4xl the glyphs are taller than
   the band the Zone edge leaves visible, so only their middles showed and the
   word read as three solid rectangles rather than "£22". */
.zone-watermark-lead {
  inset-block-start: -.1em;
  inset-block-end: auto;
  font-size: var(--font-display-3xl);
}

/* Content must clear the watermark — the Container is a grid child of the Zone
   and would otherwise share its stacking position. */
.has-watermark > :not(.zone-watermark) {
  position: relative;
  z-index: var(--z-above);
}

/* ============================================================
   Degrees pricing page — elements
   ============================================================ */

/* --- Zone 02: the Degree rails --- */

.degree-rail-list {
  margin: var(--space-md-lg) 0 0;
  padding: 0;
  list-style: none;
}

.degree-rail-list li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md-plus);
  line-height: var(--leading-snug);
}

.degree-rail-list li::before {
  position: absolute;
  left: 0;
  content: "+";
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.degree-rail-price .btn-primary,
.degree-rail-price .btn-secondary {
  margin-top: var(--space-md-lg);
}

.pricing-rails-heading {
  margin-bottom: var(--space-lg-xl);
}

.pricing-rails-heading h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.pricing-rails-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* --- Zone 03: the shared promise --- */

.promise-container-stack h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0 var(--space-lg);
}

/* The spec's 23–35px spanning statement — --font-h3-sm is 21.6–35.2px, the
   nearest step on the scale to that band. */
.promise-statement {
  max-width: 46ch;
  margin: 0 0 var(--space-2xl);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

.bare-list-ruled {
  margin: 0;
  padding: 0;
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  list-style: none;
}

/* .promise-list: dual-class with .bare-list-ruled (base) — zones.css
   .zone-light .promise-list (+ > li) and containers.css .promise-list > li
   still match the bare class. */

.promise-list > li {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.promise-list > li > span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.promise-close {
  max-width: 62ch;
  margin: var(--space-lg-xl) 0 0;
  font-size: var(--font-body-lg);
}

/* --- Zone 04: support path --- */

.support-path-heading h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.support-path-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* "three restrained ruled fields rather than conventional pricing cards" — a
   top rule and open space, no card border or radius. */
.support-path {
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-medium);
  border-top-style: solid;
}

.support-path > .display-sm-main {
  margin: 0 0 var(--space-md-lg);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

/* A written tag, never colour alone — spec is explicit about this. */
.support-path-tag {
  display: inline-block;
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-caps);
}

.support-path > p:not(.section-label, .display-sm-main, .support-path-tag, .support-path-outcome) {
  margin: 0 0 var(--space-md-lg);
  line-height: var(--leading-normal);
}

.support-path-outcome {
  margin-bottom: 0;
  padding-top: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-flat);
}

/* --- Zone 05: what 360° adds --- */

.pricing-extras-copy h2 {
  max-width: 14ch;
  margin: var(--space-lg-xl) 0;
}

.pricing-extras-copy > p:last-child {
  max-width: 48ch;
  margin: 0;
}

.pricing-booking-inset dl > div {
  padding-block: var(--space-md);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.pricing-booking-inset dl > div:last-child {
  border-bottom-width: 0;
  padding-bottom: 0;
}

.pricing-booking-inset dt {
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

.pricing-booking-inset dd {
  margin: 0;
  line-height: var(--leading-snug);
}

.degree-extras-list code {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: inherit;
}

/* --- Zone 06: covered and outside costs --- */

.pricing-boundary-heading h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0;
}

.pricing-boundary-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* --- Zone 07: guarantees and charter terms --- */

/* .assurance-panel: dual-class with .panel-md (base) — zones.css
   .zone-muted .assurance-panel (+ related) still matches the bare class. */

.assurance-panel > .display-lg-main {
  margin: var(--space-md-lg) 0 var(--space-md);
  line-height: var(--leading-crush);
  letter-spacing: var(--tracking-crush);
}

.assurance-panel h2 {
  margin: 0 0 var(--space-md-lg);
  font-size: var(--font-h3);
}

.assurance-panel > p:last-child {
  margin: 0;
  line-height: var(--leading-normal);
}

/* --- Zone 08: the follow-on question link --- */

.faq-follow-link {
  margin-top: var(--space-lg-xl);
}

/* ============================================================
   Form elements — portable
   The site's first real form. Named without a location prefix because a
   contact form is the same object wherever it lands.
   ============================================================ */

.form-field {
  gap: var(--space-sm);
  margin-bottom: var(--space-md-lg);
}

.form-field label {
  line-height: var(--leading-snug);
}

/* Required and optional are stated in WORDS — never by an asterisk or by
   colour alone, per spec. */
.form-required,
.form-optional {
  letter-spacing: var(--tracking-wide);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-md) var(--space-md-plus);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-sm);
  font-size: var(--font-body-size);
  line-height: var(--leading-snug);
  transition: border-color var(--speed-fast) var(--ease-default);
}

.form-textarea {
  resize: vertical;
}

.form-submit {
  margin-top: var(--space-sm);
  justify-self: flex-start;
}

.form-submit[disabled] {
  cursor: progress;
}

/* Empty until the form reports something, so it must not hold space. */
.form-status:empty {
  display: none;
}

.form-status {
  margin: var(--space-md-lg) 0 0;
  padding: var(--space-md) var(--space-md-plus);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
}

.form-privacy {
  margin: var(--space-md-lg) 0 0;
  line-height: var(--leading-normal);
}

.form-privacy a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ============================================================
   Questions & Contact page — elements
   ============================================================ */

/* --- Disclosure state wording (Zone 04 and Zone 05) ---
   The written label is the primary state cue; the mark is secondary, which is
   what the spec requires. The row target clears the stated 52px minimum. */

.faq-container-stack summary:has(.disclosure-state) {
  min-height: 3.25rem;
  gap: var(--space-md-lg);
  align-items: center;
  flex-wrap: wrap;
}

.disclosure-state {
  margin-left: auto;
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
}

.disclosure-mark {
  transition: transform var(--speed-fast) var(--ease-default);
}

details[open] > summary .disclosure-mark {
  transform: rotate(45deg);
}

.faq-container-stack > .body-lg-system {
  margin-bottom: var(--space-xl);
}

/* --- Zone 02: the client's part --- */

.responsibility-container-stack h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0 var(--space-lg);
}

.responsibility-lead {
  max-width: 52ch;
  margin-bottom: var(--space-2xl);
  font-size: var(--font-body-lg);
}

/* .responsibility-list: dual-class with .bare-list-ruled (base) — zones.css
   .zone-dark .responsibility-list (+ p, > li) and containers.css
   .responsibility-list > li still match the bare class. */

.responsibility-list > li {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.responsibility-list > li > span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.responsibility-list h3 {
  margin: 0 0 var(--space-sm-md);
}

.responsibility-list p {
  margin: 0;
  line-height: var(--leading-normal);
}

.responsibility-close {
  max-width: 58ch;
  margin: var(--space-lg-xl) 0 0;
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

/* --- Zone 03: changes and support --- */

.answer-rails-heading {
  margin-bottom: var(--space-lg-xl);
}

.answer-rails-heading h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.answer-rails-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* .answer-rail: dual-class with .rule-top (base) — zones.css
   .zone-light .answer-rail (+ related) still matches the bare class. */

/* The spec's 42–64px Degree — --font-display-xs is 24–43.2px and
   --font-display-sm is 26.4–48px; --font-h2 lands at 41.6–88px, whose floor is
   the only one that reaches the stated band. Capped by the flex basis so it
   does not run away at the top end. */
.answer-rail > .display-sm-main {
  margin: 0;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.answer-rail-copy h3 {
  margin: 0 0 var(--space-md);
}

.answer-rail-copy > p {
  max-width: 62ch;
  margin: 0 0 var(--space-md);
}

.answer-rail-status {
  letter-spacing: var(--tracking-caps);
}

/* --- Zone 05: before and after launch --- */

.launch-copy h2 {
  max-width: 16ch;
  margin: var(--space-lg-xl) 0;
}

.launch-copy > p:last-child {
  margin: 0;
  font-size: var(--font-body-lg);
}

.launch-stage {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.launch-stage > .display-sm-main {
  margin: 0 0 var(--space-md-lg);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.launch-stage h3 {
  margin: 0 0 var(--space-md);
}

.launch-stage > p:last-child {
  margin: 0;
  line-height: var(--leading-normal);
}

/* --- Zone 06: extra systems --- */

.systems-heading h2 {
  max-width: 22ch;
  margin: var(--space-lg-xl) 0;
}

.systems-heading > p:last-child {
  max-width: 54ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.system-field {
  padding: var(--space-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
}

.system-field .icon-line {
  width: 3rem;
  height: 3rem;
}

.system-field h3 {
  margin: var(--space-lg) 0 var(--space-md);
}

.system-field > p {
  margin: 0 0 var(--space-md);
  line-height: var(--leading-normal);
}

.system-status {
  letter-spacing: var(--tracking-caps);
}

/* --- Zone 07: the signpost --- */

.signpost h2 {
  max-width: 18ch;
  margin: var(--space-md-lg) 0 var(--space-md);
  font-size: var(--font-h3);
}

.signpost > p {
  max-width: 46ch;
  margin: 0 0 var(--space-md-lg);
}

.label-flush {
  margin: 0;
  letter-spacing: var(--tracking-caps);
}

/* .signpost-status: dual-class with .label-flush (base) — zones.css
   .zone-muted .signpost-status still matches the bare class. */

/* --- Zone 08: contact --- */

.contact-direct h2 {
  max-width: 16ch;
  margin: var(--space-lg-xl) 0 var(--space-lg);
}

.contact-direct > .body-lg-system {
  max-width: 46ch;
}

/* ⚠️ Carries ONLY what differs from .section-label, which the element now also
   wears. It was a full copy of that rule under a second name — same mono face,
   same --font-label, same uppercase — which is why it missed the weight fix
   and why the owner spotted it drifting. Tracking is the one real difference.
   Owner ruling 30's lesson, applied: if it looks like an eyebrow, it IS one. */
.contact-qualification {
  margin: 0 0 var(--space-lg-xl);
  letter-spacing: var(--tracking-caps);
}

.contact-rows > div {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.contact-rows > div:last-child {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.contact-rows dt {
  letter-spacing: var(--tracking-caps);
}

.contact-rows dd {
  margin: 0;
}

/* White surface on the Ink Zone, no decorative shadow — spec is explicit. */
.panel-lg {
  padding: var(--gap-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
}

/* .contact-form-panel: dual-class with .panel-lg (base) — zones.css
   .zone-dark .contact-form-panel (+ many descendants) still matches the
   bare class. */

.contact-form-panel h3 {
  margin: 0 0 var(--space-md);
}

.contact-form-intro {
  margin: 0 0 var(--space-lg-xl);
  line-height: var(--leading-normal);
}

.contact-after {
  margin: var(--space-lg-xl) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

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

/* ============================================================
   FAQ behaviour demo — elements (internal page)
   ============================================================ */

.demo-notes-heading h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0;
}

.demo-notes-heading > p:last-child {
  max-width: 56ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.demo-notes > div {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.demo-notes dt {
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.demo-notes dd {
  margin: 0;
  line-height: var(--leading-normal);
}

.demo-notes code {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: .92em;
}

/* ============================================================
   Bearings marks — elements (internal page)
   ============================================================ */

.marks-options-heading h2,
.marks-grid-heading h2,
.marks-states-heading h2,
.marks-sizes-heading h2 {
  max-width: 22ch;
  margin: var(--space-lg-xl) 0 var(--space-md-lg);
}

.marks-options-heading > p:last-child,
.marks-grid-heading > p:last-child,
.marks-states-heading > p:last-child,
.marks-sizes-heading > p:last-child {
  max-width: 62ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--font-body-lg);
}

/* .marks-option: dual-class with .panel-md (base) — zones.css
   .zone-light .marks-option (+ related) and containers.css
   .marks-options-container-grid still match the bare class. */

.marks-option h3 {
  margin: var(--space-md-lg) 0 var(--space-md);
}

.marks-option > p {
  margin: 0 0 var(--space-md-lg);
  line-height: var(--leading-normal);
}

.marks-option code,
.marks-note code,
.demo-notes code {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: .9em;
}

.marks-scores {
  margin-bottom: var(--space-md-lg);
}

.marks-scores dt {
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.marks-scores dd {
  margin: var(--space-xs) 0 0;
  line-height: var(--leading-flush);
}

.marks-verdict {
  margin: 0;
  padding-top: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

.marks-note {
  margin: var(--space-md) 0 0;
  padding: var(--space-md-lg);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
}

.bearing-name {
  margin: var(--space-md) 0 0;
}

/* .bearing-bearing: dual-class with .label-flush (base) — zones.css
   .zone-light/.zone-muted/.zone-dark .bearing-bearing still match the bare
   class. Written by js/pages/bearings-marks.js template literal — that JS
   line updated to add "label-flush" alongside "bearing-bearing". */

/* The site's own focus treatment, shown as a static demonstration. */
.marks-state-stage.is-focus .bearing-mark {
  border-radius: 50%;
  outline: var(--border-thick) solid var(--brand-accent);
  outline-offset: var(--border-thick);
}

.marks-states article > p:last-child,
.marks-sizes article > p:last-child {
  margin: 0;
  line-height: var(--leading-snug);
}

/* ============================================================
   About page — elements
   ============================================================ */

/* --- Zone 02: why we exist --- */

.exists-container-stack h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0 var(--space-lg);
}

/* The spec's 23–35px overscale statement. */
.exists-statement {
  max-width: 48ch;
  margin: 0 0 var(--space-2xl);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

.exists-container-stack > p:not(.section-label, .exists-statement, .exists-close) {
  max-width: 66ch;
  margin: 0 0 var(--space-md-lg);
}

.exists-close {
  max-width: 46ch;
  margin: var(--space-lg-xl) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-flat);
}

/* --- Zone 03: the restaurant analogy --- */

.analogy-heading h2 {
  max-width: 22ch;
  margin: var(--space-lg-xl) 0 0;
}

/* 1px rules between the parts, per spec — a leading edge on each, which the
   1000px block below flips from inline to top when they stack. .analogy-part:
   dual-class with .rule-top (base) — zones.css .zone-light .analogy-part
   (+ related) still matches the bare class. */

/* 42–64px per spec — --font-h2's floor is 41.6px, the only step reaching it. */
.analogy-statement {
  margin: var(--space-md-lg) 0;
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.analogy-part > p:last-child {
  margin: 0;
  line-height: var(--leading-normal);
}

.analogy-close {
  margin: var(--space-lg-xl) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

/* --- Zone 04: the model --- */

.model-copy h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0;
}

.model-copy > p:last-child {
  margin: 0;
  font-size: var(--font-body-lg);
}

/* .model-stages: dual-class with .bare-list-ruled (base) — zones.css
   .zone-muted .model-stages (+ p, > li) and containers.css
   .model-stages > li still match the bare class. */

.model-stages > li {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.model-stages > li > span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.model-stages h3 {
  margin: 0 0 var(--space-sm-md);
}

.model-stages p {
  margin: 0;
  line-height: var(--leading-normal);
}

/* --- Zone 05: the ownership rail --- */

.ownership-heading {
  margin-bottom: var(--space-lg-xl);
}

.ownership-heading h2 {
  max-width: 24ch;
  margin: var(--space-lg-xl) 0;
}

.ownership-heading > p:last-child {
  max-width: 62ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

/* .ownership-rail: dual-class with .panel-lg (base) — zones.css
   .zone-dark .ownership-rail still matches the bare class. */

.ownership-shared {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md-lg);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  letter-spacing: var(--tracking-caps-lg);
}

.ownership-readings .display-sm-main {
  margin: 0 0 var(--space-md);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.ownership-readings h3 {
  margin: 0 0 var(--space-sm-md);
}

.ownership-readings p:last-child {
  margin: 0;
  line-height: var(--leading-normal);
}

.ownership-close {
  max-width: 62ch;
  margin: var(--space-md) 0 0;
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
}

/* Stated in words, never carried by a badge or symbol — spec Zone 05. */
.ownership-exclusive {
  margin: var(--space-md-lg) 0 var(--space-md);
  letter-spacing: var(--tracking-caps);
}

/* --- Zone 06: company standards --- */

.standards-heading h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.standards-heading > p:last-child {
  max-width: 60ch;
  margin: 0 0 var(--space-lg-xl);
  font-size: var(--font-body-lg);
}

/* .standards-list: dual-class with .bare-list-ruled (base) — zones.css
   .zone-light .standards-list (+ p, > li) and containers.css
   .standards-list > li still match the bare class. */

/* "at least 72px vertical space" per spec — --space-lg-xl top and bottom is
   96px total, comfortably clear of the floor at every width. */
.standards-list > li {
  padding-block: var(--space-lg-xl);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.standards-list > li > span {
  line-height: var(--leading-flush);
  letter-spacing: var(--tracking-caps);
}

.standards-list h3 {
  margin: 0 0 var(--space-md);
}

.standards-list p {
  margin: 0;
  max-width: 62ch;
}

/* --- Zone 07: the founder --- */

/* "Maximum displayed width 440px" is a spec instruction, and 27.5rem is that
   figure. It caps an Element's own growth rather than the layout, which the
   rules permit; the flex basis above still lets it shrink. */
.founder-photo {
  max-width: 27.5rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
}

.founder-copy h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.founder-paragraph {
  max-width: 66ch;
  margin: 0 0 var(--space-lg-xl);
  font-size: var(--font-body-lg);
}

.founder-support {
  margin: 0 0 var(--space-md);
  line-height: var(--leading-flat);
}

/* .founder-caption: dual-class with .label-flush (base) — zones.css
   .zone-muted .founder-caption still matches the bare class. */

/* --- Zone 08: proof before promise --- */

.proof-copy h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.proof-copy > p {
  max-width: 56ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--font-body-lg);
}

.proof-index > div {
  padding-block: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.proof-index > div:last-child {
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.proof-index dd {
  margin: var(--space-xs) 0 0;
  letter-spacing: var(--tracking-caps);
}

/* ============================================================
   Our Work page — elements
   ============================================================ */

/* --- Zone 07: test your own website (was Zone 02) ---
   .speedtest-limit dropped with the old inline result block it annotated;
   not replaced, since the field's own qualification line already covers it. */

.speedtest-copy h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.speedtest-copy > p:not(.section-label) {
  margin: 0 0 var(--space-md-lg);
}

/* .speedtest-instrument: dual-class with .panel-lg (base) — zones.css
   .zone-dark .speedtest-instrument (+ .form-input) still matches the bare
   class. */

.speedtest-actions {
  margin-top: var(--space-md-lg);
}

.speedtest-qualification {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

.speedtest-qualification a {
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* --- Zone 02: the Curly Tail spotlight (was Zone 04) ---
   The .scores-* list and the .evidence-* "ledger" (dated before/after table,
   search-position table, "not a guarantee" qualification line) are retired
   together — owner ruling, 19 Aug 2026: the v2 spec's prove-it framing is
   rejected outright, not just its wording. .spotlight-result-* below is what
   replaces the ledger: a plain, confident reading. */

.spotlight-story h2 {
  max-width: 24ch;
  margin: var(--space-lg-xl) 0 var(--space-lg);
}

.spotlight-project {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
}

.spotlight-location {
  margin: var(--space-xs) 0 var(--space-md-lg);
  letter-spacing: var(--tracking-caps);
}

.spotlight-summary {
  margin: 0 0 var(--space-lg);
  max-width: 54ch;
}

.spotlight-image {
  display: block;
  width: 100%;
  margin-bottom: var(--space-lg);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Reuses .research-context-figure's type scale (54–88px Jost numeral, --font-h2)
   rather than a new display size for one section — see A5/reuse-first. */
.spotlight-result-figure {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.spotlight-result-before {
  color: var(--text-muted-dark);
}

.spotlight-result-label {
  margin: 0 0 var(--space-lg);
}

.spotlight-result-list dt {
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flush);
}

.spotlight-result-list dd {
  margin: 0;
  line-height: var(--leading-normal);
}

.spotlight-result-close {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  font-size: var(--font-body-lg);
  line-height: var(--leading-normal);
}

/* --- Zone 03: the portfolio (was Zone 05) --- */

.work-heading {
  margin-bottom: var(--space-lg);
}

.work-heading h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.work-heading > p:last-child {
  max-width: 62ch;
  margin: 0;
  font-size: var(--font-body-lg);
}

.work-rail {
  padding-top: var(--space-lg-xl);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.work-rail-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Status is a written word before the title, never a colour alone. */
.work-status {
  display: inline-block;
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm-md);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-caps);
}

.work-rail-copy h3 {
  margin: 0 0 var(--space-xs);
}

.work-trade {
  margin: 0 0 var(--space-md-lg);
  letter-spacing: var(--tracking-wide);
}

.work-rail-copy > p:not(.work-status, .work-trade, .work-rail-score) {
  margin: 0 0 var(--space-md);
  max-width: 58ch;
  line-height: var(--leading-normal);
}

/* One continuous mono line per the guideline's rail arrangement — replaces
   the old .work-facts bullet list, which this build's rails no longer use.
   Layout only: type comes from .section-label.is-caption in the shared base
   (shared-base.css warns against a new rule re-declaring --font-mono). */
.work-rail-score {
  margin: 0 0 var(--space-md-lg);
}

/* --- Zone 05: designed for phone and desktop (was Zone 06) --- */

.viewports-copy h2 {
  max-width: 20ch;
  margin: var(--space-lg-xl) 0;
}

.viewports-copy > p:not(.section-label) {
  margin: 0 0 var(--space-lg-xl);
  font-size: var(--font-body-lg);
}

.viewports-checklist {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viewports-checklist li {
  padding-block: var(--space-md);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-normal);
}

/* Simple Paper frames — never a stock device photograph (spec Zone 06). */
.viewport-frame {
  margin: 0;
}

.viewport-frame .media-placeholder {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.viewport-frame-phone .media-placeholder { aspect-ratio: 390 / 844; }
.viewport-frame-desktop .media-placeholder { aspect-ratio: 1440 / 900; }

.viewport-frame figcaption {
  margin-top: var(--space-md);
  letter-spacing: var(--tracking-caps);
}

/* --- Zone 04: not everything, not nothing (was Zone 07) ---
   .research-method/.research-qualification dropped — the "not a permanent
   state" hedge they carried is exactly the repeated-hedge pattern the owner
   ruled against (state the top-2%/scores claim once, as fact, not under
   every reading). */

.research-context-copy h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0;
}

.research-context-copy > p:not(.section-label) {
  margin: 0 0 var(--space-md-lg);
}

/* 54–88px per guideline — --font-h2 is 41.6–88px, the only step reaching the
   top of that band. Also reused by .spotlight-result-figure (Zone 02). */
.research-context-figure {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-crush);
}

.research-context-figure span {
  letter-spacing: var(--tracking-normal);
}

.research-context-readings p:last-child {
  margin: 0;
  max-width: 40ch;
  line-height: var(--leading-normal);
}

/* --- Zone 08: compare everything, then choose (was Zone 09) --- */

.proof-degree-copy h2 {
  max-width: 18ch;
  margin: var(--space-lg-xl) 0;
}

.proof-degree-copy > p:not(.section-label, .proof-degree-qualification) {
  max-width: 58ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--font-body-lg);
}

.proof-degree-qualification {
  margin: 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   PageSpeed modal — portable
   Overlays the whole page rather than living in a Zone, so it is named
   without a location prefix. The live site's mechanism (Google's Lighthouse
   Viewer in an iframe, fed by our own API proxy) with Worklight styling.
   ============================================================ */

.pagespeed-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  padding: var(--container-pad);
  place-items: center;
}

.pagespeed-modal.is-open {
  display: grid;
}

/* Stops the page behind scrolling while the panel is open. */
.has-modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  border: 0;
  cursor: pointer;
}

.pagespeed-panel {
  position: relative;
  z-index: var(--z-above);
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(72rem, 100%);
  height: min(88svh, 56rem);
  overflow: hidden;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.pagespeed-modal-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md-lg) var(--gap-sm);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
  align-items: center;
}

.modal-title {
  margin: 0;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.modal-close {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-h5);
  line-height: 1;
}

.pagespeed-body {
  position: relative;
  overflow: hidden;
}

.pagespeed-loading {
  display: grid;
  align-content: center;
  height: 100%;
  padding: var(--gap-md);
  overflow-y: auto;
}

.pagespeed-loading[hidden] {
  display: none;
}

.pagespeed-loading-title {
  margin: 0 0 var(--space-sm);
  line-height: var(--leading-flat);
}

.pagespeed-loading-note {
  margin: 0;
  line-height: var(--leading-normal);
}

/* A restrained sweep, not an invented percentage. */
.pagespeed-progress {
  display: block;
  width: min(24rem, 100%);
  height: var(--border-medium);
  margin-block: var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.pagespeed-progress::after {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  content: "";
  animation: pagespeed-sweep 1.5s var(--ease-default) infinite;
}

@keyframes pagespeed-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

.pagespeed-explainer {
  display: grid;
  gap: var(--space-sm);
  max-width: 46rem;
  margin: 0 0 var(--space-lg);
}

.pagespeed-explainer > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.pagespeed-explainer dt {
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.pagespeed-explainer dd {
  margin: 0;
  line-height: var(--leading-snug);
}

.pagespeed-verify {
  margin: 0;
}

/* Revealed once the Viewer has had time to render. */
.pagespeed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.pagespeed-frame.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.pagespeed-modal-note {
  margin: 0;
  padding: var(--space-md) var(--gap-sm);
  border-top-width: var(--border-thin);
  border-top-style: solid;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* The per-project test control is a <button>, so it needs the text-link's
   button reset — it must not inherit a UA button box. */
.work-test {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
}

.speedtest-note {
  margin: var(--space-md-lg) 0 0;
  line-height: var(--leading-normal);
}

/* ============================================================
   Contact modal — portable
   Reuses the form Elements and the same overlay mechanics as the PageSpeed
   modal, so there is one modal grammar on the site rather than two.
   ============================================================ */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  padding: var(--container-pad);
  place-items: center;
  overflow-y: auto;
}

.contact-modal-panel {
  position: relative;
  z-index: var(--z-above);
  width: min(34rem, 100%);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.contact-modal-head {
  padding: var(--space-md-lg) var(--gap-sm);
  border-bottom-width: var(--border-thin);
  border-bottom-style: solid;
}

.contact-modal-body {
  padding: var(--gap-sm);
}

.contact-modal-intro {
  margin: 0 0 var(--space-lg);
  line-height: var(--leading-normal);
}

.contact-modal-direct {
  margin: var(--space-md-lg) 0 0;
  padding-top: var(--space-md-lg);
  border-top-width: var(--border-thin);
  border-top-style: solid;
}

.contact-modal-direct a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* The enquiry box under the three rails. */
.enquiry-box {
  margin-top: var(--space-md);
  padding: var(--space-md-lg) var(--gap-sm);
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-md);
  text-align: center;
}

.enquiry-box p {
  margin: 0;
  line-height: var(--leading-flat);
}

/* The trigger is a <button> so it needs the text-link button reset. */
.enquiry-box .text-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* ============================================================
   Marquee separator — the only element the strip needed that
   nothing else provided. The link itself reuses .text-link; the
   hidden/reveal state reuses .will-reveal/.is-visible.
   ============================================================ */

.marquee-sep {
  user-select: none;
}

/* Fades in opacity-only — no transform — matching the source
   behaviour: separators are punctuation, not content, so they
   don't travel. Own transition rather than piggybacking
   .will-reveal.is-visible, which also animates transform. */
.marquee-sep.will-reveal {
  transition: opacity var(--speed-slow) var(--ease-default);
}

.marquee-sep.will-reveal.is-visible {
  transform: none;
}

/* ============================================================
   Trade page — article elements
   Long-form body content (h2 sections, inline figures, blockquotes) is a
   new page type for this site — searched .body-lg-system/.h3-sm-main and
   the rest of the type-scale utility family first; the article's own h2/p
   already inherit correctly from the shared base (critical CSS), so no new
   heading utility was needed. Only the pieces the base doesn't cover — the
   figure caption, the pullquote, the share icon — are new here.
   ============================================================ */

/* margin: 0 alone duplicates an existing 17-member group (.viewport-frame and
   others) — accepted as a deliberate +1 to F1 rather than reusing an
   unrelated selector for a figure reset; documented in the build report. */
.article-figure {
  margin: 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.article-pullquote {
  max-width: 42ch;
  margin: 0;
  padding-left: var(--space-lg);
  border-left-width: var(--border-medium);
  border-left-style: solid;
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.share-row-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.share-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  border-width: var(--border-thin);
  border-style: solid;
  border-radius: var(--radius-full);
  place-items: center;
  transition: border-color var(--speed-fast) var(--ease-default);
}

.share-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}