/* The site tokens (visual-style.md section 2.5): derived from the 17 px body and the 8 px grid; no colour. */
.site {
  container: site / inline-size;
  --type-hero: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  --type-hero-lede: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  --type-section: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --measure-hero-lede: 34ch;
  --site-panel-w: 18rem;
  --weight-hero: 700;
  --how-num: var(--space-5);
}

/* ---- The bar (section 5 "Site header", the site variant) --------------------------------------------------------------------------------- */
.site .site-header {
  position: relative;
}

/* WP-30.1i (architect R40 section 2.3; HOME-BAR-1 and -2): the bar's row wraps, so a root set to 200% no longer pushes the controls past the window. On one line the brand's auto margin takes the free space before
   justify-content applies, so flex-end changes nothing at normal size; on a wrapped line it keeps the Try Forge group at the right edge, where its right-aligned panel opens leftwards inside the window.
   "safe" (a deviation from R40's plain flex-end, reported in the milestone report): an item wider than its line, the brand at 200% below 80rem, then starts at the left edge as it always did instead of running off it
   to the left, where no scrolling reaches it. A browser that does not know "safe" drops the second line and keeps flex-start, the bar as built. */
.site .site-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-right: calc(var(--gutter) + 6.5rem);
}

.site .site-header .brand {
  margin-right: auto;
}

.site .site-nav {
  display: none;
}

.site ul.site-panel {
  list-style: none;
}

.site .site-nav > ul,
.site .site-panel ul,
.site .menu-try ul,
.site .menu-list,
.site .menu-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site .site-try {
  display: none;
}

.site .site-header summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.35;
}

.site .site-header summary::-webkit-details-marker {
  display: none;
}
/* The disclosure indicator: a CSS-drawn chevron in the text colour, a state cue and not an icon (visual-style.md section 12 point 3). */
.site .site-header summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 var(--space-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms;
}

.site .site-header details[open] > summary::after {
  transform: translateY(0.25rem) rotate(225deg);
}

/* Menu: the phone navigation. The summary sits in the bar's row, the panel is in the page flow under it (no overlay, nothing fixed). */
.site .site-menu > summary {
  position: absolute;
  top: calc((var(--header-h) - var(--control-h)) / 2);
  right: var(--gutter);
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
}

.site .site-menu nav {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-6);
  border-top: 1px solid var(--line);
}

.site .menu-try {
  margin-bottom: var(--space-5);
}

.site .menu-try .action {
  width: 100%;
  margin-bottom: var(--space-3);
}

.site .menu-try p,
.site .site-panel p {
  margin: var(--space-3) 0 0;
  font-size: var(--type-body);
}

.site .menu-item {
  border-top: 1px solid var(--line);
}

.site .menu-group-label {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 600;
}

.site .menu-item a,
.site .menu-try li a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* ---- The hero (P8) ----------------------------------------------------------------------------------------------------------------- */
.site .home-hero {
  padding-block: var(--space-8) var(--space-7);
}

.site .home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.site .home-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-hero);
  font-weight: var(--weight-hero);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.site .home-hero-side {
  min-width: 0;
}

/* The record block: the notice motif of the site, a 0.25rem ink rule at the left. */
.site .home-record {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 0.25rem solid var(--ink);
  max-width: var(--measure-prose);
}

.site .home-record p {
  margin: 0;
}

.site .home-hero-side .home-record,
.site .home-hero-side .home-record p {
  max-width: var(--measure-hero-lede);
  font-family: var(--font-serif);
  font-size: var(--type-hero-lede);
  line-height: 1.45;
}

.site .home-hero-try {
  margin: var(--space-6) 0 0;
}

.site .home-hero-try .action {
  width: 100%;
}

.site .home-notice {
  margin-bottom: var(--space-7);
}

.site .home-notice p {
  margin: 0;
  padding: var(--space-4);
  border-left: 0.25rem solid var(--ink);
  background: var(--surface);
  font-size: var(--type-body);
  color: var(--ink);
}

/* ---- Sections --------------------------------------------------------------------------------------------------------------------- */
.site .home-section {
  padding-block: var(--space-8);
}

.site .home-section-alt {
  background: var(--surface-alt);
}

.site .home-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.site .home-section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-section);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.site .home-section-body {
  min-width: 0;
}

.site .home-section-body p {
  max-width: var(--measure-prose);
  font-size: var(--type-prose);
  line-height: 1.6;
}

.site .home-block + .home-block {
  margin-top: var(--space-6);
}

.site .home-journey {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.site .home-journey li {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--type-prose);
  line-height: 1.5;
  /* WP-30.1i finding 1 (HOME-LIST-1; WCAG 1.4.4): a long word may break, so the text's min-content width never pushes the page sideways at 200% text on a phone. */
  overflow-wrap: anywhere;
  counter-increment: step;
}

.site .home-journey li::before {
  content: counter(step);
  flex: 0 0 2rem;
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
}

.site .home-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site .home-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* ---- How it works, the journey form (WP-30.1e; architect R38 section 2.4; visual-style.md section 9.3 S20). Tokens only, no accent, no motion. -------------------------------- */
.site .how-kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--ink);
}

.site .how-title {
  max-width: 24ch;
  margin: 0 0 var(--space-5);
}

.site .how-lede {
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-6);
  font-family: var(--font-serif);
  font-size: var(--type-lede);
  line-height: 1.5;
  color: var(--ink);
}

/* The flow strip (R38 section 3): five boxes of text joined by 2 px rules, aria-hidden, never moving. STRIP-PHONE-1 (Addendum AH G-AH-1): the whole strip is not displayed below 48rem and shows from it; only the whole strip is ever hidden. */
.site .how-strip {
  display: none;
  margin: 0 0 var(--space-6);
}
.site .how-strip ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site .how-node {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-l);
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.site .how-node + .how-node {
  margin-top: var(--space-4);
}

.site .how-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: var(--space-4);
  margin-left: -1px;
  background: var(--line-strong);
}

.site .how-node-mark {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-body);
  font-weight: 400;
}

.site .how-journey {
  margin: 0 0 var(--space-7);
}

.site .how-sub {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.25;
}

/* WP-30.1i (architect R40 section 3; HOW-RULE-1 and -2): the step number is a CSS counter in a fixed box (--how-num wide, the same font, size and line height as the step title, so one baseline), and the 2 px rule joining the
   numbers is the step's ::after centred on that same box. Nothing is measured: no native ::marker, whose box the browser places, and no offset found by eye, so it holds at any text size. The indent is the old 32 px (24 + 8). */
.site .how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: how-n;
}

.site .how-steps > li {
  position: relative;
  padding: 0 0 var(--space-5) calc(var(--how-num) + var(--space-2));
  counter-increment: how-n;
}

.site .how-steps > li::before {
  content: counter(how-n);
  position: absolute;
  top: 0;
  left: 0;
  width: var(--how-num);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* The rule starts a --space-2 under the number's line box, ends a --space-2 above the next step, and stops at the last step. */
.site .how-steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--type-h3) * 1.3 + var(--space-2));
  bottom: var(--space-2);
  left: calc(var(--how-num) / 2 - 1px);
  width: 2px;
  background: var(--line-strong);
}

.site .how-step-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* The closed mark: text at body size (17 px, H-15 point 7) in ink with a 1 px border, so it is never colour alone. */
.site .how-mark {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  vertical-align: middle;
}

.site .how-steps p {
  margin: 0;
  max-width: var(--measure-prose);
  font-family: var(--font-serif);
  font-size: var(--type-prose);
  line-height: 1.6;
}

/* Step 3's download line (HOW-DL-1, dev only) is the second paragraph of the step. */
.site .how-steps p + p {
  margin-top: var(--space-3);
}

/* What each agreed requirement gets (WP-30.1g; architect R39 section 1.2 (2)): the heading, a list of three and the closing line. Stacked below 64rem; at 64rem the heading is the left four twelfths and the list and the line the right eight, as the journey above it. */
.site .how-gets {
  margin: 0 0 var(--space-7);
}

.site .how-gets ul {
  margin: 0 0 var(--space-4);
  padding: 0 0 0 var(--space-5);
  max-width: var(--measure-prose);
  font-family: var(--font-serif);
  font-size: var(--type-prose);
  line-height: 1.6;
}

.site .how-gets li + li {
  margin-top: var(--space-2);
}

.site .how-gets p {
  margin: 0;
  max-width: var(--measure-prose);
  font-family: var(--font-serif);
  font-size: var(--type-prose);
  line-height: 1.6;
}

/* The models line (HOW-MODELS-1): its own paragraph after the Agent Factory paragraph, in ink, nothing else in it, never a badge. */
.site .how-models {
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-6);
  font-family: var(--font-serif);
  font-size: var(--type-prose);
  line-height: 1.6;
  color: var(--ink);
}

/* The USP row (HOW-USP-1; architect R39 section 1.2 (1)): five cells of one component, one column below 48rem, two from 48rem, three from 64rem, so the three headline cells share the first row at 1,280 and chat and
   ownership sit in the second, never at greater weight. minmax(0, 1fr) keeps a long word from widening a track (HOW-A11Y-1: no sideways scroll at 320 px or 200% text). */
.site .how-usp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site .how-usp-cell {
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--surface-alt);
}

.site .how-usp-cell h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.25;
}

.site .how-usp-cell p {
  margin: 0;
  font-size: var(--type-prose);
  line-height: 1.55;
}

.site .how-usp-cell p + p {
  margin-top: var(--space-3);
}

/* ---- Footer ----------------------------------------------------------------------------------------------------------------------- */
.site .site-footer {
  margin-top: 0;
}

/* The copyright line (FOOTER-COPY-1 and -2): the last paragraph of the footer, at body size (H-15 point 7's floor) in ink. */
.site .footer-copy {
  margin: var(--space-5) 0 0;
  font-size: var(--type-body);
  color: var(--ink);
}

.site .footer-map ul {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.site .footer-map a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site .footer-group {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-weight: 600;
}

/* The bar's 30rem, in root units (architect R43): Try Forge, its toggle and every dropdown panel. */
@container site (min-width: 30rem) {
  .site .site-try {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .site .menu-try,
  .site .home-hero-try {
    display: none;
  }

  .site .site-try-more {
    position: relative;
  }

  .site .site-try-more > summary {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--surface);
    color: var(--ink);
  }

  .site .site-try-more > summary::after {
    margin-left: 0;
  }

  .site .site-try-more .site-panel {
    right: 0;
    left: auto;
  }

  .site .site-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 2;
    min-width: var(--site-panel-w);
    margin-top: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    background: var(--page);
  }

  .site .site-panel a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
  }
}

@media (min-width: 48rem) {
  .site .home-hero {
    padding-block: var(--space-8) var(--space-7);
  }

  /* The strip shows from here, as one row of five equal boxes, a horizontal 2 px rule between neighbours. */
  .site .how-strip {
    display: block;
  }

  .site .how-strip ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .site .how-node + .how-node {
    margin-top: 0;
  }

  .site .how-node:not(:last-child)::after {
    top: 50%;
    left: 100%;
    width: var(--space-5);
    height: 2px;
    margin-top: -1px;
    margin-left: 0;
  }

  .site .how-usp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site .home-hero {
    padding-block: var(--space-9) var(--space-7);
  }

  .site .home-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: start;
  }

  /* The right column is bottom-aligned against the headline (visual-style.md section 9.2 P8): the h1 starts at the top of the hero, the record blocks end at its foot. */
  .site .home-hero-side {
    align-self: end;
  }

  .site .home-section {
    padding-block: var(--space-9);
  }

  .site .home-section-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-8);
    align-items: start;
  }

  .site .footer-map > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-5);
  }

  .site .home-links {
    flex-direction: row;
    gap: var(--space-5);
  }

  /* The journey: the R36 section grid, the sub-heading at the left four twelfths and the steps at the right eight (stacked below 64rem). */
  .site .how-journey {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-8);
    align-items: start;
  }

  /* What each requirement gets: the same 4/12 + 8/12 grid; the heading spans the list and the closing line. */
  .site .how-gets {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-8);
    align-items: start;
  }

  .site .how-gets > h3 {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .site .how-gets > ul,
  .site .how-gets > p {
    grid-column: 2;
  }

  .site .how-usp {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* From 80rem of the page's own width, in root units, the navigation is inline and "Menu" goes (R42 section 1). */
@container site (min-width: 80rem) {
  .site .site-header .container {
    padding-right: var(--gutter);
    gap: var(--space-5);
  }

  .site .site-nav {
    display: block;
  }

  /* The inline navigation's items wrap inside the nav (HOME-BAR-1 and -2). */
  .site .site-nav > ul {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .site .site-nav a,
  .site .site-nav summary {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  .site .site-nav li {
    position: relative;
  }

  .site .site-menu {
    display: none;
  }
}

@media (min-width: 80rem) {
  .site .home-journey {
    columns: 2;
    column-gap: var(--space-7);
  }

  .site .home-journey li {
    break-inside: avoid;
  }

  .site .footer-map > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    transition: none;
    animation: none;
  }
}