/* AnyTeam site kit · site.css — the layer on top of the design system (tokens.css + bundle.css).
   Shared by every page. Block classes are prefixed hp-; see site/BLOCKS.md.
   Page layer. Every colour, size and space reads a design-system token.
   Layout concept: type and product at the same scale. One towering lockup whose last lines sink into a full-bleed product stage, then the page alternates dense evidence with open, offset statements. */
:root { --hp-line: calc(41px * 1.05); }
@media (min-width: 960px) { :root { --hp-line: calc(190px * 0.99); } }

html, body { background: var(--bg-primary); color: var(--text-primary); }
body { font: var(--text-body-1); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--bg-primary); }
.at-container { padding-left: max(var(--gutter-exterior-s), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-exterior-s), env(safe-area-inset-right, 0px)); }
@media (min-width: 960px) { .at-container { padding-left: max(var(--gutter-exterior-l), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-exterior-l), env(safe-area-inset-right, 0px)); } }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-muted { color: var(--text-secondary); }
.hp-eyebrow { font: var(--text-eyebrow); color: var(--text-secondary); }
.hp-section-heading { font: var(--text-section-heading); letter-spacing: -0.02em; text-wrap: balance; }
.hp-title-2 { font: var(--text-title-2); text-wrap: balance; }
.hp-title-3 { font: var(--text-title-3); }
.hp-title-4 { font: var(--text-title-4); }
.hp-body-2 { font: var(--text-body-2); }
.hp-body-3 { font: var(--text-body-3); }
.hp-strong { font-weight: 500; }
.hp-num { font-variant-numeric: tabular-nums; }
.hp-confirm { font: var(--text-body-3); color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 959px) {
  .hp-section-heading { font: var(--text-title-1); letter-spacing: 0; }
}

/* ---------- Nav ---------- */
.hp-header { position: sticky; top: env(safe-area-inset-top, 0px); width: 100%; left: 0; right: 0; z-index: var(--z-30); background: var(--bg-primary); }
.hp-header .at-nav { padding-left: max(var(--gutter-exterior-s), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-exterior-s), env(safe-area-inset-right, 0px)); width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
@media (min-width: 960px) { .hp-header .at-nav { padding-left: max(var(--gutter-exterior-l), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-exterior-l), env(safe-area-inset-right, 0px)); } }
.hp-header .at-nav__links button { all: unset; display: inline-flex; align-items: center; gap: var(--space-4); font: var(--text-body-1-strong); color: var(--text-primary); padding: var(--space-6) var(--space-12) var(--space-6) var(--space-16); border-radius: var(--radius-rounded); cursor: pointer; transition: background-color var(--duration-150) var(--ease-functional), color var(--duration-150) var(--ease-functional); }
.hp-header .at-nav__links button:hover { background: var(--bg-hover); }
.hp-header .at-nav__links button:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.hp-header .at-nav__links button[aria-expanded="true"] { background: var(--action-primary); color: var(--on-action-primary); }
.hp-header .at-nav__links button svg { transition: transform var(--duration-250) var(--ease-functional); }
.hp-header .at-nav__links button[aria-expanded="true"] svg { transform: rotate(180deg); }
.hp-menu-btn { display: none; }
.hp-header .at-nav__end > a { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1199px) {
  .hp-nav-signin { display: none; }
  .hp-header .at-nav__links a { padding-inline: var(--space-12); }
  .hp-header .at-nav__links button { padding-inline: var(--space-12) var(--space-8); }
}
@media (max-width: 959px) {
  .hp-header .at-nav { grid-template-columns: 1fr auto; }
  .hp-header .at-nav__links, .hp-nav-signin { display: none; }
  .hp-menu-btn { display: inline-grid; }
}

.hp-mega { position: absolute; left: max(var(--gutter-exterior-l), env(safe-area-inset-left, 0px)); right: max(var(--gutter-exterior-l), env(safe-area-inset-right, 0px)); top: calc(var(--nav-height) - var(--space-4)); background: var(--bg-primary); box-shadow: var(--shadow-100); border-radius: var(--radius-8); padding: var(--space-24); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
[data-theme="dark"] .hp-mega { background: var(--bg-secondary); }
/* Panels resolve their own ink: the header can switch theme over a dark hero, and colour inherited from <body> would stay the page's. */
.hp-header, .hp-mega, .hp-drawer { color: var(--text-primary); }
.hp-mega[hidden] { display: none; }
.hp-mega__col { grid-column: span 3; display: flex; flex-direction: column; gap: var(--space-4); }
.hp-mega__col .hp-eyebrow { margin-bottom: var(--space-8); }
.hp-mega__col a { display: block; text-decoration: none; padding: var(--space-6) 0; }
.hp-mega__col a b { display: block; font-weight: 500; transition: color var(--duration-150) var(--ease-functional); }
.hp-mega__col a span { display: block; font: var(--text-body-2); color: var(--text-secondary); }
.hp-mega__col a:hover b { color: var(--text-hover); }
/* Groups fill from the left (3 columns each, a 2-column group spans 6); media sits on the right edge. */
.hp-mega__col--wide { grid-column: span 6; }
.hp-mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
.hp-mega__cols > div { display: flex; flex-direction: column; gap: var(--space-4); }
.hp-mega__strip { grid-column: 7 / span 6; display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-12); min-height: 264px; }
.hp-mega__strip--n1 { grid-column: 10 / span 3; grid-template-columns: 1fr; }
.hp-mega__strip--n3 { grid-column: 4 / span 9; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-mega__callout { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-8); text-decoration: none; min-height: 264px; }
.hp-mega__callout .hp-mega__img > img { transition: transform var(--duration-400) var(--ease-expressive); }
.hp-mega__callout:hover .hp-mega__img > img { transform: scale(1.03); }
.hp-mega__callout-text b { display: block; font-weight: 500; transition: color var(--duration-150) var(--ease-functional); }
.hp-mega__callout-text span { display: block; font: var(--text-body-2); color: var(--text-secondary); }
.hp-mega__callout:hover .hp-mega__callout-text b { color: var(--text-hover); }
.hp-mega__tile { display: flex; flex-direction: column; gap: var(--space-8); text-decoration: none; min-width: 0; }
.hp-mega__img { flex: 1; position: relative; overflow: hidden; background: var(--bg-image); min-height: 200px; }
.hp-mega__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-400) var(--ease-expressive); }
.hp-mega__img > img.hp-pos-left { object-position: 0 0; }
.hp-mega__img--cover > img { object-fit: contain; }
.hp-mega__tile:hover .hp-mega__img > img { transform: scale(1.03); }
.hp-mega__cap { font: var(--text-body-3); color: var(--text-secondary); transition: color var(--duration-150) var(--ease-functional); }
.hp-mega__tile:hover .hp-mega__cap { color: var(--text-primary); }

/* Mobile drawer */
.hp-drawer { position: fixed; inset: calc(var(--nav-height) + env(safe-area-inset-top, 0px)) 0 0; z-index: var(--z-30); background: var(--bg-primary); overflow-y: auto; padding: var(--space-24) max(var(--gutter-exterior-s), env(safe-area-inset-right, 0px)) calc(var(--space-48) + env(safe-area-inset-bottom, 0px)) max(var(--gutter-exterior-s), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--space-24); }
.hp-drawer[hidden] { display: none; }
.hp-drawer details { border-top: 1px solid var(--border-tertiary); padding-top: var(--space-12); }
.hp-drawer summary { font: var(--text-title-3); cursor: pointer; list-style: none; }
.hp-drawer summary::-webkit-details-marker { display: none; }
.hp-drawer ul { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-12); }
.hp-drawer a { text-decoration: none; }
.hp-drawer > a { font: var(--text-title-3); border-top: 1px solid var(--border-tertiary); padding-top: var(--space-12); }
.hp-drawer .hp-drawer__head { font: var(--text-eyebrow); color: var(--text-secondary); padding-top: var(--space-8); }

/* ---------- Mini product surfaces (used in the hero, menus and cards) ---------- */
.hp-win { background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-tertiary); color: var(--text-primary); }
.hp-mini { background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-tertiary); padding: var(--space-10) var(--space-12); font: var(--text-body-3); display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.hp-mini b { font-weight: 500; }
.hp-mini .hp-muted { color: var(--text-secondary); }
.hp-mini .hp-flag { color: var(--text-badge); font-weight: 500; }
.hp-mini hr { border: 0; border-top: 1px solid var(--border-tertiary); margin: var(--space-2) 0; width: 100%; }

/* ---------- Hero ---------- */
.hp-hero { padding-top: var(--space-36); position: relative; }
.hp-hero__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter-grid); row-gap: var(--space-24); }
.hp-hero__eyebrow { grid-column: 1 / -1; font: var(--text-eyebrow); color: var(--text-secondary); letter-spacing: 0.02em; }
.hp-lockup { grid-column: 1 / -1; font: var(--text-display-1-sm); letter-spacing: 0.01em; text-transform: uppercase; position: relative; z-index: 2; }
.hp-lockup span { display: block; }
.hp-hero__copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-8); max-width: 560px; }
.hp-hero__two-beat { font: var(--text-title-4); }
.hp-hero__copy p.hp-muted { margin-bottom: var(--space-16); }
.hp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-12); }
@media (min-width: 960px) {
  .hp-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .hp-lockup { font: var(--text-display-hero); letter-spacing: 0.01em; }
  .hp-hero__copy { grid-column: 1 / span 7; }
}
@media (min-width: 1280px) {
  .hp-lockup { grid-row: 2; }
  .hp-hero__copy { grid-row: 2; grid-column: 8 / span 5; align-self: start; padding-top: calc(var(--hp-line) * 0.62); z-index: 3; }
}

.hp-stage { background: var(--bg-image); position: relative; z-index: 1; padding-block: var(--space-60) var(--space-24); }
.hp-stage__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter-grid); row-gap: var(--space-24); }
.hp-note { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-8); color: var(--text-primary); }
.hp-note p { font: var(--text-footnote-serif); font-style: italic; max-width: 16ch; }
.hp-note svg { width: 120px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.hp-shot { grid-column: 1 / -1; min-width: 0; position: relative; }
.hp-shot > .at-badge { position: absolute; top: calc(var(--space-12) * -1 - 32px); left: 0; }
.hp-caption { grid-column: 1 / -1; font: var(--text-body-3); color: var(--text-secondary); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
@media (min-width: 960px) {
  .hp-stage__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .hp-note { grid-column: 1 / span 3; align-self: start; padding-top: 272px; }
  .hp-note svg { display: block; align-self: flex-end; }
  .hp-shot { grid-column: 4 / span 9; }
  .hp-caption { grid-column: 4 / span 9; }
}
.hp-shot > .at-badge { position: static; margin-bottom: var(--space-12); }

/* Account memory window */
.hp-acct__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8) var(--space-24); padding: var(--space-20) var(--space-24) var(--space-12); }
.hp-acct__top h3 { font: var(--text-title-3); }
.hp-acct__tabs { display: flex; gap: var(--space-24); padding: 0 var(--space-24); border-bottom: 1px solid var(--border-tertiary); overflow-x: auto; }
.hp-acct__tabs span { font: var(--text-body-2-strong); color: var(--text-secondary); padding: var(--space-8) 0 var(--space-10); white-space: nowrap; }
.hp-acct__tabs span[aria-current] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--border-active); }
.hp-acct__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .hp-acct__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.hp-facts { padding: var(--space-8) var(--space-24) var(--space-20); }
.hp-fact { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4) var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid var(--border-tertiary); }
.hp-fact:last-child { border-bottom: 0; }
.hp-fact dt { font: var(--text-body-2-strong); color: var(--text-secondary); padding-top: 2px; }
.hp-fact dd p { line-height: 1.45; }
.hp-fact dd .hp-src { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); margin-top: var(--space-6); font: var(--text-body-3); color: var(--text-secondary); }
.hp-fact--open { position: relative; }
.hp-fact--open::before { content: ""; position: absolute; left: calc(var(--space-24) * -1); top: var(--space-16); bottom: var(--space-16); width: var(--stroke-l); background: var(--border-active); }
.hp-overnight { padding: var(--space-20) var(--space-24); border-top: 1px solid var(--border-tertiary); background: var(--bg-secondary); }
@media (min-width: 760px) { .hp-overnight { border-top: 0; box-shadow: inset 1px 0 0 var(--border-tertiary); } }
.hp-overnight h4 { font: var(--text-body-2-strong); color: var(--text-secondary); margin-bottom: var(--space-8); }
.hp-run { padding: var(--space-12) 0; border-top: 1px solid var(--border-tertiary); display: flex; flex-direction: column; gap: var(--space-2); }
.hp-run__head { display: flex; justify-content: space-between; gap: var(--space-8); }
.hp-run__head b { font-weight: 500; }
.hp-run__head span { font: var(--text-body-2); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hp-run p { font: var(--text-body-2); color: var(--text-secondary); }
.hp-run .hp-status { font: var(--text-body-2-strong); color: var(--text-badge); }

.hp-backers { padding-block: var(--space-24) var(--space-36); }
.hp-backers__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-12) var(--space-36); border-top: 1px solid var(--border-tertiary); padding-top: var(--space-20); }
.hp-backers__row p { font: var(--text-body-2); color: var(--text-secondary); }
.hp-backers__row ul { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-36); }
.hp-backers__row li { font: var(--text-title-4); color: var(--text-secondary); }

/* ---------- Problem (always dark) ---------- */
.hp-band { background: var(--bg-primary); color: var(--text-primary); }
.hp-problem { padding-block: var(--space-120) var(--space-120); }
.hp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter-grid); row-gap: var(--space-48); }
.hp-grid > * { min-width: 0; grid-column: 1 / -1; }
@media (min-width: 960px) { .hp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); } }
.hp-problem__head { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-problem__statement { font: var(--text-statement); letter-spacing: -0.02em; display: flex; flex-direction: column; gap: 1.2em; }
@media (max-width: 959px) { .hp-problem__statement { font-size: 28px; } }
@media (min-width: 960px) {
  .hp-problem__head { grid-column: 1 / span 3; }
  .hp-problem__statement { grid-column: 4 / span 8; }
}
.hp-where { margin-top: var(--space-48); }
@media (min-width: 960px) { .hp-where__label { grid-column: 1 / span 3 !important; } .hp-where__list { grid-column: 4 / span 9 !important; } }
.hp-where__list li { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter-grid-l); padding: var(--space-16) 0; border-top: 1px solid var(--border-tertiary); }
.hp-where__list li:last-child { border-bottom: 1px solid var(--border-tertiary); }
@media (min-width: 600px) { .hp-where__list li { grid-template-columns: 3fr 6fr; } }
.hp-where__list b { font: var(--text-title-4); }
.hp-where__list span { font: var(--text-editorial-body); color: var(--text-secondary); }
.hp-where__list li.hp-where__crm span { color: var(--text-primary); }
.hp-costs { margin-top: var(--space-84); }
.hp-costs__label { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-costs__items { display: grid; grid-template-columns: 1fr; gap: var(--space-36) var(--gutter-grid-l); }
@media (min-width: 960px) {
  .hp-costs__label { grid-column: 1 / span 3 !important; }
  .hp-costs__items { grid-column: 4 / span 9 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hp-cost { display: flex; flex-direction: column; gap: var(--space-12); border-top: 1px solid var(--border-secondary); padding-top: var(--space-16); }
.hp-cost h3 { font: var(--text-title-3); }
.hp-cost p { color: var(--text-secondary); }
.hp-callout { margin-top: var(--space-120); }
.hp-callout h3 { font: var(--text-oversize-3); letter-spacing: -0.02em; text-wrap: balance; }
.hp-callout p { font: var(--text-editorial-body); color: var(--text-secondary); max-width: 62ch; }
@media (max-width: 959px) { .hp-callout h3 { font: var(--text-title-1); } }
@media (min-width: 960px) { .hp-callout h3 { grid-column: 1 / span 10 !important; } .hp-callout p { grid-column: 4 / span 6 !important; } }
.hp-callout.hp-grid { row-gap: var(--space-24); }

/* ---------- Memory ---------- */
.hp-memory { padding-block: var(--space-120) var(--space-84); }
.hp-memory__copy { display: flex; flex-direction: column; gap: var(--space-20); align-self: center; }
.hp-memory__copy p { font: var(--text-dek); color: var(--text-secondary); max-width: 44ch; }
.hp-dial { position: relative; }
.hp-dial svg { display: block; width: 100%; height: auto; max-width: 760px; margin-left: auto; overflow: visible; }
.hp-dial figcaption { font: var(--text-body-3); color: var(--text-secondary); margin-top: var(--space-12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); max-width: 760px; margin-left: auto; }
@media (min-width: 960px) { .hp-memory__copy { grid-column: 1 / span 5 !important; } .hp-dial { grid-column: 6 / span 7 !important; } }
.d-ring { fill: none; stroke: var(--border-tertiary); stroke-width: 1; }
.d-ring--strong { stroke: var(--border-secondary); }
.d-core { fill: var(--action-primary); }
.d-core-text { fill: var(--on-action-primary); font: 500 15px/1 var(--font-sans); }
.d-label { fill: var(--text-secondary); font: 400 14px/1 var(--font-sans); }
.d-label--graph { fill: var(--text-primary); font-weight: 500; }
.d-ringname { fill: var(--text-secondary); font: 400 12px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.d-node { fill: var(--bg-primary); stroke: var(--text-primary); stroke-width: 1.5; }
.d-node.is-lit { fill: var(--text-primary); }
.d-signal { fill: var(--text-primary); }
.d-ripple { fill: none; stroke: var(--text-primary); stroke-width: 1; }

.hp-steps { margin-top: var(--space-84); display: grid; grid-template-columns: 1fr; gap: var(--space-36) var(--gutter-grid-l); }
@media (min-width: 600px) { .hp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-step { border-top: 1px solid var(--border-active); padding-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.hp-step .hp-num { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-step h3 { font: var(--text-title-3); }
.hp-step p { color: var(--text-secondary); }

/* Compounding */
.hp-compound { padding-block: var(--space-84) var(--space-120); }
.hp-compound__head { display: flex; flex-direction: column; gap: var(--space-20); }
.hp-compound__head p { font: var(--text-dek); color: var(--text-secondary); max-width: 52ch; }
@media (min-width: 960px) { .hp-compound__head { grid-column: 1 / span 9 !important; } }
.hp-horizon { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-grid-l); align-items: end; margin-top: var(--space-24); }
/* At 960px+ the three headings share one baseline row and the three lists share the row below,
   so the growing type sits on a common floor and every list starts on the same rule. */
@media (min-width: 960px) {
  .hp-horizon { grid-template-columns: 3fr 4fr 5fr; grid-template-rows: auto auto; row-gap: var(--space-16); align-items: start; }
  .hp-horizon > .hp-horizon__col { display: contents; }
  .hp-horizon__col h3 { grid-row: 1; align-self: last baseline; }
  .hp-horizon__col ul { grid-row: 2; }
  .hp-horizon__col:nth-child(1) > * { grid-column: 1; }
  .hp-horizon__col:nth-child(2) > * { grid-column: 2; }
  .hp-horizon__col:nth-child(3) > * { grid-column: 3; }
}
.hp-horizon__col { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-horizon__col h3 { letter-spacing: -0.02em; white-space: nowrap; }
.hp-horizon__col:nth-child(1) h3 { font: var(--text-title-1); }
.hp-horizon__col:nth-child(2) h3 { font: var(--text-oversize-3); letter-spacing: -0.02em; }
.hp-horizon__col:nth-child(3) h3 { font: var(--text-oversize-1); letter-spacing: -0.03em; }
@media (max-width: 959px) {
  .hp-horizon__col:nth-child(2) h3 { font: var(--text-title-1); }
  .hp-horizon__col:nth-child(3) h3 { font: var(--text-title-1); }
}
.hp-horizon__col ul { border-top: 1px solid var(--border-active); }
.hp-horizon__col li { padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); color: var(--text-secondary); }
.hp-horizon__col:nth-child(3) li { color: var(--text-primary); }

.hp-quote { margin-top: var(--space-120); }
.hp-quote blockquote { font: var(--text-conversation-2); text-wrap: balance; }
.hp-quote figcaption { font: var(--text-body-2); color: var(--text-secondary); margin-top: var(--space-20); }
.hp-quote figcaption b { color: var(--text-primary); font-weight: 500; }
@media (max-width: 959px) { .hp-quote blockquote { font: var(--text-conversation-3); } }
@media (min-width: 960px) { .hp-quote figure { grid-column: 3 / span 8 !important; } }

/* ---------- Agents ---------- */
.hp-agents { padding-block: var(--space-120) var(--space-84); border-top: 1px solid var(--border-tertiary); }
.hp-agents__copy { display: flex; flex-direction: column; gap: var(--space-20); align-items: flex-start; }
.hp-agents__copy p { color: var(--text-secondary); max-width: 44ch; }
@media (min-width: 960px) { .hp-agents__copy { grid-column: 1 / span 4 !important; } .hp-day { grid-column: 6 / span 7 !important; } }
.hp-day__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); margin-bottom: var(--space-16); }
.hp-day__head h3 { font: var(--text-body-1-strong); }
.hp-track { position: relative; height: 56px; margin-bottom: var(--space-12); border-bottom: 1px solid var(--border-secondary); }
.hp-track__tick { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--border-secondary); }
.hp-track__hour { position: absolute; bottom: 12px; transform: translateX(-50%); font: var(--text-body-3); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hp-track__run { position: absolute; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: var(--radius-rounded); background: var(--text-primary); }
.hp-day ol li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4) var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid var(--border-tertiary); }
@media (min-width: 600px) { .hp-day ol li { grid-template-columns: 64px 200px minmax(0, 1fr); } }
.hp-day time { font: var(--text-body-1); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.hp-day ol b { font-weight: 500; }
.hp-day ol span { color: var(--text-secondary); grid-column: 2; }
@media (min-width: 600px) { .hp-day ol span { grid-column: auto; } }

.hp-cards { margin-top: var(--space-120); }
.hp-cards__head { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-cards__head p { color: var(--text-secondary); max-width: 52ch; }
@media (min-width: 960px) { .hp-cards__head { grid-column: 1 / span 6 !important; } }
.hp-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-grid-l); }
@media (min-width: 600px) { .hp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-card-grid .at-card { max-width: none; }
.hp-card-grid .at-card__media { display: block; padding: 0; }
/* Card art: the finished product shots fill the square; the one wide shot is pinned to a top corner */
.hp-cardshot > img { position: absolute; inset: 0; transition: transform var(--duration-400) var(--ease-expressive); }
.hp-cardshot > img.hp-shotpos-left { object-position: 0 0; }
.hp-cardshot > img.hp-shotpos-right { object-position: 100% 0; }
.hp-card-grid .at-card:hover .hp-cardshot > img { transform: scale(1.03); }
/* Layered card art: a background (or the flat art-paper) with a transparent product cutout on top.
   The cutouts carry their own shadow, so nothing is added here. On hover the background moves a touch more than the product, for depth. */
.hp-layered { background: var(--art-paper); } /* Day Arc paper: the default panel behind Cutouts (bg-art-calm and bg-art-neutral retired) */
.hp-layered--neutral { background: var(--art-paper); }
.hp-layered > .hp-layer-bg { z-index: 0; }
.hp-layered > .hp-layer-cut { z-index: 1; }
.hp-layered > .hp-layer-bg--flip { transform: scaleX(-1); }
.hp-card-grid .at-card:hover .hp-layered > .hp-layer-bg { transform: scale(1.06); }
.hp-card-grid .at-card:hover .hp-layered > .hp-layer-bg--flip { transform: scaleX(-1) scale(1.06); }
.hp-card-grid .at-card:hover .hp-layered > .hp-layer-cut { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .hp-card-grid .at-card:hover .hp-layered > .hp-layer-bg, .hp-card-grid .at-card:hover .hp-layered > .hp-layer-cut { transform: none; }
  .hp-card-grid .at-card:hover .hp-layered > .hp-layer-bg--flip { transform: scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .hp-card-grid .at-card:hover .hp-cardshot > img { transform: none; } }
.hp-card-grid .at-card__media .hp-mini { width: 100%; padding: var(--space-16); font: var(--text-body-2); gap: var(--space-6); box-shadow: inset 0 0 0 1px var(--border-tertiary); }
.hp-card-grid .at-card__media .hp-mini .hp-muted { font: var(--text-body-2); }
.hp-card-grid .at-card:hover .at-card__title { color: var(--text-hover); }
.hp-prompt { font: var(--text-title-4); line-height: 1.35; padding-bottom: var(--space-24); }
.hp-also { margin-top: var(--space-72); border-top: 1px solid var(--border-tertiary); padding-top: var(--space-20); display: grid; grid-template-columns: 1fr; gap: var(--space-8) var(--gutter-grid-l); }
@media (min-width: 960px) { .hp-also { grid-template-columns: 3fr 9fr; } }
.hp-also p { color: var(--text-secondary); max-width: 80ch; }
.hp-also p b { color: var(--text-primary); font-weight: 500; }

/* ---------- Compare ---------- */
.hp-compare { padding-block: var(--space-84) var(--space-120); }
.hp-compare__scroll { overflow-x: auto; margin-top: var(--space-48); }
.hp-compare table { width: 100%; min-width: 840px; border-collapse: collapse; text-align: left; }
.hp-compare th, .hp-compare td { padding: var(--space-16) var(--space-16) var(--space-16) 0; vertical-align: top; border-bottom: 1px solid var(--border-tertiary); }
.hp-compare thead th { font: var(--text-body-2-strong); color: var(--text-secondary); border-bottom: 1px solid var(--border-secondary); }
.hp-compare tbody th { font: var(--text-body-1-strong); width: 16%; }
.hp-compare td { color: var(--text-secondary); width: 21%; }
.hp-compare .hp-us { color: var(--text-primary); font-weight: 500; padding-left: var(--space-16); background: var(--bg-secondary); }
.hp-compare thead .hp-us { box-shadow: inset 0 var(--stroke-l) 0 var(--border-active); }

/* ---------- Who it's for ---------- */
.hp-who { padding-block: var(--space-120) var(--space-120); border-top: 1px solid var(--border-tertiary); }
.hp-teams { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-grid-l); margin-top: var(--space-48); }
@media (min-width: 600px) { .hp-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-teams { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-team { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-team__img { aspect-ratio: 4 / 5; max-width: 100%; position: relative; margin-bottom: var(--space-8); overflow: hidden; }
/* Hover: colour photos return to colour; the black-and-white source takes an orange tint instead. Slight zoom on both. */
.hp-team__img img { transition: filter var(--duration-400) var(--ease-expressive), transform var(--duration-400) var(--ease-expressive); }
.hp-team:hover .hp-team__img img, .hp-team:focus-within .hp-team__img img { filter: none; transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .hp-team:hover .hp-team__img img { transform: none; } }
.hp-team__img .at-badge { position: absolute; top: var(--space-12); left: var(--space-12); }
.hp-team h3 { font: var(--text-title-4); }
.hp-team p.hp-strong { font-weight: 500; }
.hp-team p.hp-muted { color: var(--text-secondary); }
.hp-endorse { margin-top: var(--space-120); align-items: end; }
.hp-endorse__portrait { aspect-ratio: 2 / 3; max-width: 100%; position: relative; }
.hp-endorse__portrait .at-badge { position: absolute; top: var(--space-12); left: var(--space-12); }
.hp-endorse blockquote { font: var(--text-conversation-3); text-wrap: balance; }
.hp-endorse figcaption { font: var(--text-body-2); color: var(--text-secondary); margin-top: var(--space-16); }
.hp-endorse figcaption b { color: var(--text-primary); font-weight: 500; }
@media (min-width: 960px) {
  .hp-endorse__portrait { grid-column: 1 / span 3 !important; }
  .hp-endorse figure { grid-column: 3 / span 8 !important; }
  .hp-endorse blockquote { font: var(--text-conversation-2); }
}

/* ---------- Security (always dark) ---------- */
.hp-security { padding-block: var(--space-120) var(--space-90); }
.hp-security__head { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-sec-items { display: grid; grid-template-columns: 1fr; gap: var(--space-36) var(--gutter-grid-l); }
@media (min-width: 600px) { .hp-sec-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-security__head { grid-column: 1 / span 4 !important; } .hp-sec-items { grid-column: 5 / span 8 !important; } }
.hp-sec-item { border-top: 1px solid var(--border-secondary); padding-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.hp-sec-item h3 { font: var(--text-title-4); }
.hp-sec-item p { color: var(--text-secondary); }
.hp-mcp { margin-top: var(--space-84); border-top: 1px solid var(--border-tertiary); padding-top: var(--space-24); display: grid; grid-template-columns: 1fr; gap: var(--space-16) var(--gutter-grid-l); align-items: start; }
@media (min-width: 960px) { .hp-mcp { grid-template-columns: 4fr 5fr 3fr; column-gap: var(--gutter-wide); } }
.hp-mcp h3 { font: var(--text-title-3); text-wrap: balance; }
.hp-mcp p { color: var(--text-secondary); }
.hp-mcp ul { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.hp-mcp li { font: var(--text-body-2-strong); color: var(--text-disabled); box-shadow: inset 0 0 0 1px var(--border-tertiary); border-radius: var(--radius-rounded); padding: var(--space-4) var(--space-12); }

/* ---------- Final CTA ---------- */
.hp-final { padding-block: 0 var(--space-120); }
.hp-final h2 { font: var(--text-oversize-2); letter-spacing: -0.03em; text-wrap: balance; }
@media (max-width: 959px) { .hp-final h2 { font: var(--text-title-1); letter-spacing: 0; } }
@media (min-width: 960px) { .hp-final h2 { grid-column: 1 / span 11 !important; } .hp-final__body { grid-column: 7 / span 6 !important; } }
.hp-final__img--high img { object-position: 50% 12%; }
.hp-final__body { display: flex; flex-direction: column; gap: var(--space-24); }
.hp-final__body p { font: var(--text-dek); color: var(--text-secondary); }
.hp-final .hp-grid { row-gap: var(--space-36); }
.hp-final h2 > span { display: block; } /* headline set on two lines */
/* At 960px+ the two-line headline and the subhead + button share one row, middle-aligned; min-height keeps the section as tall as the stacked layout was */
@media (min-width: 960px) {
  .hp-final .hp-grid { min-height: 358px; align-items: center; }
  .hp-final h2 { grid-column: 1 / span 7 !important; grid-row: 1; font-size: clamp(56px, 6.9vw, 120px); }
  .hp-final__body { grid-column: 8 / span 5 !important; grid-row: 1; }
}
/* Single call to action: one wide primary button, as wide as the old primary + secondary pair; full width on phones */
.hp-final__cta { min-width: 340px; justify-content: center; }
@media (max-width: 599px) { .hp-final__cta { min-width: 0; width: 100%; } }

/* ---------- Imagery ---------- */
.hp-img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; border-radius: var(--radius-0); }
.hp-mono { filter: grayscale(1); }

/* Hero video: full viewport, bleeds under the nav and to both edges, fades to the page ground at the bottom.
   The hero follows the page's colour mode. A wash of the page ground (bg-primary) lightens the footage:
   near-white in light mode with black type, deep grey in dark mode with white type. Keeping the ground far
   from the orange's brightness is what stops MEMORY from vibrating.
   --hp-page-bg is the page's own ground, captured on :root, for the bottom fade. */
:root { --hp-page-bg: var(--bg-primary); }
.hp-header { transition: background-color var(--duration-250) var(--ease-functional); }
.hp-header.is-over-hero, .hp-header.is-over-hero .at-nav { background: transparent; }
.hp-header .at-nav { transition: background-color var(--duration-250) var(--ease-functional); }
/* A header forced light (over the image hero) shows the black wordmark even when the page is dark. */
[data-theme="dark"] .hp-header[data-theme="light"] .at-logo__on-light { display: block !important; }
[data-theme="dark"] .hp-header[data-theme="light"] .at-logo__on-dark { display: none !important; }
.hp-hero { margin-top: calc(var(--nav-height) * -1); min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-height) + var(--space-72)); padding-bottom: max(var(--space-84), 16svh); background: transparent; }
.hp-hero > .at-container { position: relative; z-index: 2; width: 100%; }
.hp-hero .hp-lockup, .hp-hero .hp-hero__copy { will-change: transform; }
.hp-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-image); }
.hp-hero__media video, .hp-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hp-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bg-primary); opacity: 0.58; }
[data-theme="dark"] .hp-hero__media::before { opacity: 0.74; }
.hp-hero .hp-hero__copy p.hp-muted { color: var(--text-primary); }
/* Eyebrow: quiet, a plain label above the lockup */
.hp-hero__eyebrow { color: var(--text-secondary); }
.hp-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--hp-page-bg) 100%); }
/* Pause / play: a round outline icon button over the footage */
.hp-hero .hp-video-btn { position: absolute; z-index: 3; right: max(var(--gutter-exterior-s), env(safe-area-inset-right, 0px)); top: calc(var(--nav-height) + var(--space-24)); width: 40px; height: 40px; background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 var(--stroke-m) var(--border-secondary); transition: box-shadow var(--duration-150) var(--ease-functional), background-color var(--duration-150) var(--ease-functional); }
.hp-hero .hp-video-btn:hover { background: transparent; box-shadow: inset 0 0 0 var(--stroke-m) var(--text-primary); }
@media (min-width: 960px) { .hp-hero .hp-video-btn { right: max(var(--gutter-exterior-l), env(safe-area-inset-right, 0px)); } }

/* Image hero (Home v4): a still composite from the Image Lab instead of video. Always dark so type is white over the photo.
   No wash; a bottom scrim (scrim tokens) carries the copy, and a short fade of the page ground at the top keeps the nav legible
   in both modes. Lockup on two lines at display-1, everything stacked bottom-left. */
.hp-hero--image { background: var(--bg-image); }
.hp-hero--image .hp-hero__media img, .hp-hero--image .hp-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Pause control over dark art: white outline */
.hp-hero--image .hp-video-btn { color: var(--text-on-image); box-shadow: inset 0 0 0 var(--stroke-m) var(--text-on-image); }
.hp-hero--image .hp-hero__media::before { opacity: 1; background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 25%, transparent 65%); }
.hp-hero--image .hp-hero__media::after { background: none; }
/* Copy set to match the Image Lab "card" overlay: everything scales with the hero width
   (eyebrow 1.4vw, headline 7vw, subline 1.8vw, 2vw between; type pulled back from the Lab's 2.2 / 8.2 / 2.8vw), headline runs full width and wraps naturally.
   Floors keep phones readable. */
.hp-hero--image { padding-bottom: max(var(--space-36), 4vw); padding-top: calc(var(--nav-height) + var(--space-36)); min-height: min(100svh, 160vw); }
/* Shorter than the full-viewport video hero: the Image Lab's 16:9 frame on desktop, capped at the viewport. */
@media (min-width: 760px) { .hp-hero--image { min-height: min(100svh, 56.25vw); } }
.hp-hero--image .hp-hero__grid { row-gap: max(var(--space-12), 2vw); }
.hp-hero--image .hp-hero__eyebrow { color: var(--text-on-image); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; font: 500 max(13px, 1.4vw)/1.3 var(--font-sans); }
.hp-hero--image .hp-lockup, .hp-hero--image .hp-hero__two-beat { color: var(--text-on-image); }
.hp-hero--image .hp-lockup { font: 400 max(41px, 7vw)/1.02 var(--font-display); letter-spacing: 0.01em; grid-row: auto; }
.hp-hero--image .hp-lockup span { display: inline; }
.hp-hero--image .hp-hero__copy { grid-column: 1 / -1; grid-row: auto; max-width: none; padding-top: 0; gap: max(var(--space-16), 2vw); }
.hp-hero--image .hp-hero__two-beat { font: 400 max(18px, 1.8vw)/1.35 var(--font-sans); opacity: 0.92; }
.hp-hero--image .hp-hero__copy p.hp-muted { margin: 0; }

/* Problem: full-bleed photograph inside the dark band */
.hp-bleed { margin-block: var(--space-84) 0; aspect-ratio: 16 / 9; max-height: 860px; width: 100%; max-width: 100%; overflow: hidden; }

/* Pause band: quote over a darkened photograph */
.hp-pause { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg-primary); }
.hp-pause > img { position: absolute; inset: 0; }
.hp-pause::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim) 55%, transparent 100%); }
.hp-pause .at-container { position: relative; z-index: 2; padding-block: var(--space-120) var(--space-60); width: 100%; }
.hp-pause blockquote { font: var(--text-conversation-1); color: var(--text-on-image); text-wrap: balance; }
.hp-pause figcaption { font: var(--text-body-2); color: var(--text-on-image); margin-top: var(--space-20); }
.hp-pause figcaption b { font-weight: 500; }
@media (max-width: 959px) { .hp-pause { min-height: 520px; } .hp-pause blockquote { font: var(--text-conversation-3); } }
@media (min-width: 960px) { .hp-pause figure { grid-column: 1 / span 9 !important; } }

/* Agents: one photograph under the copy */
.hp-agents__img { aspect-ratio: 3 / 2; width: 100%; max-width: 100%; margin-top: var(--space-24); overflow: hidden; }

/* Quote carousel: one quote at a time, slides on duration-400 ease-expressive, round carousel arrows from IconButton */
.hp-quotes { margin-top: var(--space-120); display: grid; grid-template-columns: 1fr; row-gap: var(--space-24); }
.hp-quotes__viewport { overflow: hidden; min-width: 0; }
.hp-quotes__track { display: flex; transition: transform var(--duration-400) var(--ease-expressive); }
.hp-quotes__slide { flex: 0 0 100%; min-width: 0; }
.hp-quotes figure { max-width: 900px; }
.hp-quotes blockquote { font: var(--text-conversation-3); text-wrap: balance; }
.hp-quotes figcaption { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-20); font: var(--text-body-2); color: var(--text-secondary); }
.hp-quotes figcaption b { color: var(--text-primary); font-weight: 500; }
.hp-quotes__controls { display: flex; align-items: center; gap: var(--space-8); }
.hp-quotes__controls .hp-num { margin-right: var(--space-8); }
@media (min-width: 960px) {
  .hp-quotes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); align-items: end; }
  .hp-quotes__viewport { grid-column: 3 / span 8; }
  .hp-quotes__controls { grid-column: 11 / span 2; justify-content: flex-end; padding-bottom: var(--space-12); }
  .hp-quotes blockquote { font: var(--text-conversation-2); }
}
@media (prefers-reduced-motion: reduce) { .hp-quotes__track { transition: none; } }

/* Endorsement with avatar */
.hp-endorse figcaption { display: flex; align-items: center; gap: var(--space-12); }
.hp-avatar { width: 64px; height: 64px; border-radius: var(--radius-rounded); object-fit: cover; flex: none; }

/* Final CTA image */
.hp-final__img { aspect-ratio: 16 / 9; max-height: 760px; width: 100%; max-width: 100%; overflow: hidden; margin-bottom: var(--space-84); }

/* Menu tiles with photos */

/* ---------- Footer ---------- */
.hp-footer { padding-block: var(--space-72) calc(var(--space-36) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-tertiary); }
.hp-footer__brand { display: flex; flex-direction: column; gap: var(--space-20); align-items: flex-start; }
.hp-footer__brand p { font: var(--text-title-4); max-width: 26ch; }
.hp-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-36) var(--gutter-grid-l); }
@media (min-width: 600px) { .hp-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-footer__brand { grid-column: 1 / span 3 !important; } .hp-footer__cols { grid-column: 5 / span 8 !important; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-footer h3 { font: var(--text-body-2); color: var(--text-secondary); margin-bottom: var(--space-12); }
.hp-footer li a { text-decoration: none; font: var(--text-body-2-strong); display: inline-block; padding: var(--space-4) 0; }
.hp-footer li a:hover { color: var(--text-hover); }
.hp-footer__legal { margin-top: var(--space-72); display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); font: var(--text-body-3); color: var(--text-secondary); }
.hp-footer__legal a { text-decoration: none; }


/* ==========================================================================
   Blocks introduced by Home v4 (see BLOCKS.md)
   ========================================================================== */

/* Role strip: six role promises as one ruled row of type, straight under the hero */
.hp-roles { padding-block: var(--space-24) var(--space-48); }
.hp-roles__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--gutter-grid); }
@media (min-width: 600px) { .hp-roles__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) { .hp-roles__row { column-gap: var(--space-36); } }
@media (min-width: 1200px) { .hp-roles__row { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter-wide); } }
.hp-roles__row li { display: flex; flex-direction: column; gap: var(--space-6); border-top: 1px solid var(--border-active); padding-top: var(--space-12); }
.hp-roles__row span { font: var(--text-eyebrow); color: var(--text-secondary); }
.hp-roles__row b { font: var(--text-title-4); }

/* Backer strip, many names: label above, names flow in a quieter size */
.hp-backers--many { padding-block: var(--space-12) var(--space-84); }
.hp-backers--many .hp-backers__row { display: grid; grid-template-columns: 1fr; gap: var(--space-16) var(--gutter-grid-l); }
@media (min-width: 960px) { .hp-backers--many .hp-backers__row { grid-template-columns: 3fr 9fr; } .hp-backers--many .hp-confirm { grid-column: 2; } }
.hp-backers--many .hp-backers__row ul { gap: var(--space-8) var(--space-24); }
.hp-backers--many .hp-backers__row li { font: var(--text-body-1-strong); }

/* Six symptoms: ruled thirds of single lines, no paragraphs */
.hp-symptoms { margin-top: var(--space-84); }
.hp-symptoms__items { display: grid; grid-template-columns: 1fr; column-gap: var(--gutter-grid-l); }
@media (min-width: 600px) { .hp-symptoms__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .hp-symptoms__label { grid-column: 1 / span 3 !important; }
  .hp-symptoms__items { grid-column: 4 / span 9 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hp-symptoms__items li { font: var(--text-title-3); border-top: 1px solid var(--border-secondary); padding: var(--space-16) 0 var(--space-36); text-wrap: balance; }

/* Signals-to-work flow: the page's product moment */
.hp-flow { padding-top: var(--space-120); }
.hp-flow__head { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-flow__dek { font: var(--text-dek); color: var(--text-secondary); max-width: 46ch; }
@media (min-width: 960px) { .hp-flow__head { grid-column: 1 / span 7 !important; } .hp-flow__dek { grid-column: 8 / span 5 !important; align-self: end; } }
.hp-flow__panel { background: var(--bg-image); margin-top: var(--space-60); padding-block: var(--space-36) var(--space-24); }
.hp-flow__panel .at-badge { margin-bottom: var(--space-24); }
.hp-flow__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-36); margin-bottom: var(--space-24); }
@media (min-width: 960px) { .hp-flow__grid { grid-template-columns: 4fr 3fr 5fr; column-gap: var(--gutter-wide); } }
.hp-flow__col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.hp-flow__label { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-signals { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-signal { background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-tertiary); padding: var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }
.hp-signal__src { display: flex; justify-content: space-between; gap: var(--space-8); font: var(--text-body-2); }
.hp-signal__src b { font-weight: 500; }
.hp-signal__src span { color: var(--text-secondary); }
.hp-signal p { font: var(--text-body-1); }
.hp-signal q { font-family: var(--font-serif); font-style: italic; font-size: 1.15em; quotes: "\201C" "\201D"; }
.hp-loop { display: flex; flex-direction: column; position: relative; }
.hp-loop li { display: grid; grid-template-columns: 32px 1fr; gap: 0 var(--space-12); padding: var(--space-16) 0; border-top: 1px solid var(--border-secondary); }
.hp-loop li:last-child { border-bottom: 1px solid var(--border-secondary); }
.hp-loop .hp-num { font: var(--text-body-2-strong); color: var(--text-secondary); grid-row: span 2; padding-top: 3px; }
.hp-loop b { font: var(--text-title-3); }
.hp-loop span:last-child { color: var(--text-secondary); }
.hp-done { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-done__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.hp-done__tabs .at-tile span { background: var(--bg-primary); white-space: nowrap; padding: 0 var(--space-6); font: var(--text-body-2-strong); }
@media (min-width: 600px) { .hp-done__tabs .at-tile span { font: var(--text-body-1); } }
.hp-done__win { padding: 0 var(--space-20); }
.hp-done__panel li { padding: var(--space-16) 0; border-top: 1px solid var(--border-tertiary); display: flex; flex-direction: column; gap: var(--space-2); }
.hp-done__panel li:first-child { border-top: 0; }
.hp-done__panel b { font-weight: 500; }
.hp-done__panel p { color: var(--text-secondary); }
.hp-done__panel[hidden] { display: none; }
.hp-flow .hp-caption { display: flex; }

/* Tool sprawl table: AnyTeam's column holds one tall cell per group */
.hp-sprawl { padding-block: var(--space-120); }
.hp-sprawl__title { grid-column: 1 / -1; }
@media (min-width: 960px) { .hp-sprawl__title { grid-column: 1 / span 7 !important; } .hp-sprawl__note { grid-column: 9 / span 4 !important; align-self: end; } }
.hp-sprawl .hp-grid { row-gap: var(--space-12); }
.hp-sprawl__table { width: 100%; border-collapse: collapse; text-align: left; margin-top: var(--space-48); }
.hp-sprawl__table th, .hp-sprawl__table td { padding: var(--space-12) var(--space-16) var(--space-12) 0; vertical-align: top; border-bottom: 1px solid var(--border-tertiary); }
.hp-sprawl__table thead th { font: var(--text-body-2-strong); color: var(--text-secondary); border-bottom: 1px solid var(--border-secondary); }
.hp-sprawl__table tbody th { font: var(--text-body-1-strong); width: 30%; }
.hp-sprawl__table td { color: var(--text-secondary); }
.hp-sprawl__table .hp-us { width: 22%; padding-left: var(--space-16); background: var(--art-sky); color: var(--black); } /* Day Arc sky fill, same in both modes; black text per its token note */
.hp-sprawl__table thead .hp-us { color: var(--black); box-shadow: inset 0 var(--stroke-l) 0 var(--border-active); border-bottom-color: var(--black); }
.hp-sprawl__table td.hp-us { font: var(--text-title-3); vertical-align: top; padding-top: var(--space-12); border-bottom: 1px solid var(--black); } /* dark rules between groups inside the sky fill (black, same in both modes) */
.hp-sprawl__table tbody:last-child td.hp-us { border-bottom-color: var(--border-secondary); }
.hp-sprawl__table tbody tr:last-child th, .hp-sprawl__table tbody tr:last-child td { border-bottom-color: var(--border-secondary); }
@media (max-width: 759px) {
  .hp-sprawl__table, .hp-sprawl__table tbody, .hp-sprawl__table tr, .hp-sprawl__table th, .hp-sprawl__table td { display: block; width: auto !important; }
  .hp-sprawl__table thead { display: none; }
  .hp-sprawl__table td.hp-us { display: none; }
  .hp-sprawl__table tbody { margin-bottom: var(--space-36); }
  .hp-sprawl__table tbody::before { content: "AnyTeam: " attr(data-group); display: block; font: var(--text-title-4); padding: var(--space-12) var(--space-12); background: var(--art-sky); color: var(--black); box-shadow: inset 0 var(--stroke-l) 0 var(--black); }
  .hp-sprawl__table tr { padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); }
  .hp-sprawl__table th, .hp-sprawl__table td { border: 0; padding: 0; }
}

/* Role list: big type list, one black-and-white photo that follows the row you point at */
.hp-rolelist { padding-block: var(--space-120); }
.hp-rolelist__main { display: flex; flex-direction: column; gap: var(--space-48); }
.hp-rolelist__items { border-top: 1px solid var(--border-active); }
.hp-rolelist__items a { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-16); align-items: center; padding: var(--space-20) 0; border-bottom: 1px solid var(--border-tertiary); text-decoration: none; }
.hp-rolelist__items b { font: var(--text-title-2); transition: color var(--duration-150) var(--ease-functional); }
.hp-rolelist__items span { grid-column: 1; color: var(--text-secondary); }
.hp-rolelist__items svg { grid-row: 1 / span 2; grid-column: 2; transition: transform var(--duration-250) var(--ease-functional); }
.hp-rolelist__items a:hover b, .hp-rolelist__items a.is-on b { color: var(--text-primary); }
.hp-rolelist__items a:hover svg, .hp-rolelist__items a:focus-visible svg { transform: translateX(4px); }
@media (hover: hover) and (min-width: 960px) {
  .hp-rolelist__items b { color: var(--text-secondary); }
  .hp-rolelist__items a.is-on span { color: var(--text-primary); }
}
@media (min-width: 960px) {
  .hp-rolelist__items a { grid-template-columns: 5fr 6fr auto; }
  .hp-rolelist__items span { grid-column: 2; }
  .hp-rolelist__items svg { grid-row: 1; grid-column: 3; }
}
.hp-rolelist__media { display: none; }
@media (min-width: 960px) {
  .hp-rolelist__main { grid-column: 1 / span 7 !important; }
  .hp-rolelist__media { display: block; grid-column: 9 / span 4 !important; }
  .hp-rolelist__frame { position: sticky; top: calc(var(--nav-height) + var(--space-36)); aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-image); margin-top: calc(48px * 1.1 + var(--space-48)); }
  .hp-rolelist__frame img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-400) var(--ease-expressive); }
  .hp-rolelist__frame img.is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hp-rolelist__frame img { transition: none; } }

/* Advisors: heading above the QuoteCarousel; the carousel gains a name index for long sets */
.hp-advisors { padding-block: var(--space-120); }
.hp-advisors__head { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-advisors__head p { font: var(--text-dek); max-width: 52ch; }
@media (min-width: 960px) { .hp-advisors__head { grid-column: 1 / span 7 !important; } }
.hp-advisors .hp-quotes { margin-top: var(--space-72); }
.hp-avatar--mono { display: inline-grid; place-items: center; background: var(--bg-image); color: var(--text-primary); font: var(--text-body-2-strong); letter-spacing: 0.04em; }
.hp-quotes__index { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-20); border-top: 1px solid var(--border-tertiary); padding-top: var(--space-16); }
.hp-quotes__index button { all: unset; cursor: pointer; font: var(--text-body-2); color: var(--text-secondary); padding: var(--space-4) 0; transition: color var(--duration-150) var(--ease-functional); }
.hp-quotes__index button:hover { color: var(--text-primary); }
.hp-quotes__index button[aria-current="true"] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--border-active); }
.hp-quotes__index button:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.hp-quotes figure { min-height: 0; }
@media (min-width: 960px) { .hp-quotes__index { grid-column: 3 / span 10; } }

/* Logo ticker: one-ink marks (inline SVG, fill currentColor, so they take text-secondary in both modes) with the tool name, drifting very slowly.
   Two identical sets, the track moves -50% so the loop is seamless. Pauses on hover; static and scrollable under reduced motion. */
.hp-ticker { padding-block: var(--space-24) var(--space-84); }
.hp-ticker__label { font: var(--text-body-2); color: var(--text-secondary); text-align: center; border-top: 1px solid var(--border-tertiary); padding-top: var(--space-24); margin-bottom: var(--space-48); }
.hp-ticker__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.hp-ticker__track { display: flex; width: max-content; animation: hp-ticker 240s linear infinite; }
.hp-ticker:hover .hp-ticker__track { animation-play-state: paused; }
.hp-ticker__set { display: flex; align-items: center; gap: var(--space-48); padding-right: var(--space-48); }
.hp-ticker__set li { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--text-body-1-strong); color: var(--text-secondary); white-space: nowrap; }
.hp-ticker__mark { display: inline-flex; width: 24px; height: 24px; flex: none; color: var(--text-secondary); }
.hp-ticker__mark svg { width: 100%; height: 100%; fill: currentColor; }
/* Customer logos (Logos-customer, single black ink on transparent): sized by area so wide and square marks weigh the same; flipped to white in dark mode */
.hp-ticker__logo { display: block; max-width: none; height: auto; opacity: 0.72; }
[data-theme="dark"] .hp-ticker__logo { filter: invert(1); }
.hp-ticker__set:has(.hp-ticker__logo) { gap: var(--space-60); padding-right: var(--space-60); }
@keyframes hp-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hp-ticker__track { animation: none; }
  .hp-ticker__viewport { overflow-x: auto; }
  .hp-ticker__set[aria-hidden] { display: none; }
}

/* Alternatives as tags (Home v4): single-ink logo + name in an outlined pill, after the table's own padding from the AnyTeam fill. */
.hp-sprawl__table td.hp-sprawl__alts { padding-left: var(--space-24); padding-block: var(--space-10); }
.hp-sprawl__table thead th:last-child { padding-left: var(--space-24); }
.hp-tags { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); }
.hp-tags li { display: inline-flex; align-items: center; gap: var(--space-6); height: 30px; padding: 0 var(--space-12); border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--border-tertiary); font: var(--text-body-2); color: var(--text-secondary); white-space: nowrap; }
.hp-tag__mark { display: inline-flex; width: 16px; height: 16px; flex: none; }
.hp-tag__mark svg { width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 759px) { .hp-sprawl__table td.hp-sprawl__alts { padding: var(--space-8) 0 0; } }

/* ---------- Text selection ----------
   Highlighted text inverts: text colour as the ground, page ground as the text (type and UI are neutral-only). */
/* Resolved per element (not once on :root), so always-dark bands and dark mode invert correctly. */
::selection { background: var(--text-primary); color: var(--bg-primary); }

/* Symptoms, split (Home v4): half-width 4:5 image left; right column carries the whole problem.
   The headline is the loudest thing in the band, the statement supports it as a dek, the list closes it, bottom-aligned with the image. */
.hp-problem:has(.hp-symptoms--split) { padding-block: var(--space-120); }
.hp-symptoms--split { margin-top: 0; align-items: stretch; row-gap: var(--space-48); }
.hp-symptoms--split .hp-symptoms__img { aspect-ratio: 4 / 5; overflow: hidden; max-width: 100%; }
/* max-width is load-bearing. The row uses align-items: stretch, so this figure
   is stretched to the text column's height (~1057px at 960px wide). With only
   aspect-ratio set, the width is then derived from that height (1057 x 4/5 =
   846px) and the artwork runs straight over the text column. Clamping to the
   grid track keeps it in its own 6 columns; the SVG uses preserveAspectRatio
   "slice", so it crops to fill rather than distorting. */
.hp-symptoms--split .hp-symptoms__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-60); }
.hp-symptoms__head { display: flex; flex-direction: column; gap: var(--space-20); }
.hp-symptoms__title { font: var(--text-title-1); text-wrap: balance; }
.hp-symptoms__dek { font: var(--text-dek); max-width: 44ch; }
.hp-symptoms__list { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-symptoms--split .hp-symptoms__items { grid-template-columns: 1fr !important; }
.hp-symptoms--split .hp-symptoms__items li { font: var(--text-title-4); padding: var(--space-12) 0 var(--space-16); }
@media (min-width: 960px) {
  .hp-symptoms__title { font: var(--text-oversize-3); letter-spacing: -0.02em; }
  .hp-symptoms--split .hp-symptoms__img { grid-column: 1 / span 6 !important; }
  .hp-symptoms--split .hp-symptoms__body { grid-column: 8 / span 5 !important; }
}

/* ==================================================================
   Blocks introduced by the For Sales Reps page (sales-reps.html)
   ================================================================== */

/* ---------- Split hero: type on the page ground, one tall Image Lab photo ---------- */
.hp-shero { padding-block: var(--space-36) var(--space-84); }
.hp-shero__grid { row-gap: var(--space-36); }
.hp-shero__copy { display: flex; flex-direction: column; gap: var(--space-24); }
.hp-shero__title { font: var(--text-display-1); text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-primary); }
.hp-shero__copy .hp-eyebrow { font: var(--text-body-1-strong); }
@media (max-width: 959px) { .hp-shero__title { font: var(--text-display-1-sm); } .hp-shero__title span { display: inline; } .hp-complete__stem, .hp-complete__list li { font: var(--text-title-2); } }
.hp-shero__title span { display: block; }
.hp-shero__title sup { font-size: 0.5em; line-height: 0; vertical-align: 0.72em; margin-left: 0.04em; } /* superscript in a hero headline (e.g. 100%), keeps the line height */
.hp-shero__copy .hp-hero__ctas { margin-top: var(--space-12); }
.hp-shero__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-image); }
.hp-shero__media picture { display: block; width: 100%; height: 100%; }
@media (min-width: 960px) {
  .hp-shero { padding-block: var(--space-24) var(--space-120); }
  .hp-shero__copy { grid-column: 1 / span 7 !important; align-self: end; padding-bottom: var(--space-12); }
  /* Display size scales with the 7-column measure (as the image hero's headline does with the viewport) */
  .hp-shero__title { font-size: clamp(82px, 7.6vw, 150px); line-height: 1.02; }
  .hp-shero__media { grid-column: 8 / span 5 !important; aspect-ratio: auto; height: min(calc(100svh - var(--nav-height) - var(--space-48) * 2), 860px); min-height: 520px; }
  .hp-shero__media img { object-position: 50% 40%; }
}

/* Split hero on a Day Arc fill: solid art-cobalt, or a token-built ambient gradient via data-ambient (no image). Same in both modes.
   Rule: a filled hero runs full bleed under the nav (data-nav-over); the bar stays transparent until the next section. */
.hp-shero--fill { background: var(--art-cobalt) center / cover no-repeat; color: var(--text-on-image); margin-top: calc(var(--nav-height) * -1); padding-block: calc(var(--nav-height) + var(--space-48)) var(--space-48); margin-bottom: var(--space-120); }
/* Page ambients: each role page picks one with data-ambient on <body>. Three palette stops (type side > middle > photo side)
   and three glows, tokens only, no image. The hero paints the gradient; the How it works arc fills sample the same line.
   Every ambient is checked so white type and white line work hold 3:1 or better at all five samples. */
[data-ambient="dusk"]      { --amb-0: var(--art-night);  --amb-1: var(--art-cobalt); --amb-2: var(--art-coral);  --amb-ga: var(--art-ember);  --amb-gb: var(--art-coral);  --amb-gc: var(--art-blush); }
[data-ambient="ember"]     { --amb-0: var(--art-night);  --amb-1: var(--art-ember);  --amb-2: var(--art-cobalt); --amb-ga: var(--art-sky);    --amb-gb: var(--art-cobalt); --amb-gc: var(--art-sun); }
[data-ambient="dawn"]      { --amb-0: var(--art-night);  --amb-1: var(--art-cobalt); --amb-2: var(--art-ember);  --amb-ga: var(--art-sun);    --amb-gb: var(--art-ember);  --amb-gc: var(--art-sky); }
[data-ambient="midnight"]  { --amb-0: var(--art-cobalt); --amb-1: var(--art-night);  --amb-2: var(--art-ember);  --amb-ga: var(--art-ember);  --amb-gb: var(--art-coral);  --amb-gc: var(--art-sky); }
[data-ambient="afterglow"] { --amb-0: var(--art-cobalt); --amb-1: var(--art-night);  --amb-2: var(--art-coral);  --amb-ga: var(--art-coral);  --amb-gb: var(--art-blush);  --amb-gc: var(--art-ember); }
[data-ambient="flare"]     { --amb-0: var(--art-cobalt); --amb-1: var(--art-ember);  --amb-2: var(--art-night);  --amb-ga: var(--art-cobalt); --amb-gb: var(--art-coral);  --amb-gc: var(--art-sun); }
[data-ambient] .hp-shero--fill, .hp-shero--fill[data-ambient] {
  background-color: var(--amb-1);
  background-image:
    radial-gradient(38% 55% at 94% 14%, color-mix(in srgb, var(--amb-ga) 85%, transparent), transparent 72%),
    radial-gradient(42% 60% at 76% 100%, color-mix(in srgb, var(--amb-gb) 80%, transparent), transparent 72%),
    radial-gradient(30% 45% at 60% 40%, color-mix(in srgb, var(--amb-gc) 30%, transparent), transparent 70%),
    radial-gradient(55% 70% at 4% 6%, color-mix(in srgb, var(--art-night) 85%, transparent), transparent 70%),
    linear-gradient(115deg, var(--amb-0) 0%, var(--amb-1) 42%, var(--amb-1) 64%, var(--amb-2) 100%);
}
.hp-shero--fill .hp-shero__title, .hp-shero--fill .hp-eyebrow { color: var(--text-on-image); }
.hp-shero--fill .hp-eyebrow { opacity: 0.85; }
@media (min-width: 960px) { .hp-shero--fill { padding-block: calc(var(--nav-height) + var(--space-48)) var(--space-48); } }

/* ---------- Completion list: a fixed sentence stem, completions in large type ---------- */
.hp-complete { padding-block: 0 var(--space-120); }
.hp-complete .hp-grid { row-gap: var(--space-16); }
.hp-complete__stem { font: var(--text-title-1); color: var(--text-secondary); }
.hp-complete__list li { font: var(--text-title-1); padding-block: var(--space-16); border-top: 1px solid var(--border-tertiary); text-wrap: balance; }
.hp-complete__list li:last-child { border-bottom: 1px solid var(--border-tertiary); }
@media (min-width: 960px) {
  .hp-complete__stem { grid-column: 1 / span 4 !important; font: var(--text-section-heading); letter-spacing: -0.02em; position: sticky; top: calc(var(--nav-height) + var(--space-36)); align-self: start; padding-top: var(--space-20); }
  .hp-complete__list { grid-column: 5 / span 8 !important; }
  .hp-complete__list li { font: var(--text-section-heading); letter-spacing: -0.02em; padding-block: var(--space-20) var(--space-24); }
}

/* Completion list reveal: each ending rises in and its rule draws as it scrolls into view, and reverses on the way back up.
   Script adds .is-armed; without script, or under reduced motion, everything shows. */
.hp-complete.is-armed .hp-complete__list li { position: relative; border-top-color: transparent; opacity: 0; transform: translateY(var(--space-24)); transition: opacity var(--duration-400) var(--ease-expressive), transform var(--duration-400) var(--ease-expressive); }
.hp-complete.is-armed .hp-complete__list li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--border-tertiary); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-expressive); }
.hp-complete.is-armed .hp-complete__list li.is-in { opacity: 1; transform: none; }
.hp-complete.is-armed .hp-complete__list li.is-in::before { transform: scaleX(1); }
.hp-complete.is-armed .hp-complete__stem { transition: color var(--duration-400) var(--ease-functional); }
.hp-complete.is-armed.is-live .hp-complete__stem { color: var(--text-primary); }

/* ---------- Product reel: three product moments cycling on a Paper panel ---------- */
.hp-reel { padding-block: 0 var(--space-120); }
.hp-reel__panel { position: relative; background: var(--art-paper); aspect-ratio: 4 / 5; overflow: hidden; }
.hp-reel__frames li { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--duration-400) var(--ease-expressive); }
.hp-reel__frames li.is-on { opacity: 1; }
.hp-reel__frames img { display: block; height: 90%; width: auto; max-width: 94%; object-fit: contain; }
.hp-reel__pause { position: absolute; right: var(--space-16); top: var(--space-16); z-index: 2; width: 40px; height: 40px; background: transparent; color: var(--black); box-shadow: inset 0 0 0 var(--stroke-m) var(--black); }
.hp-reel__pause:hover { background: var(--art-blush); }
.hp-reel__steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter-grid-l); margin-block: var(--space-16) var(--space-24); }
.hp-reel__steps button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-8); color: var(--text-secondary); transition: color var(--duration-150) var(--ease-functional); }
.hp-reel__steps button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hp-reel__steps button[aria-pressed="true"], .hp-reel__steps button:hover { color: var(--text-primary); }
.hp-reel__steps b { font: var(--text-body-1-strong); }
.hp-reel__steps button > span:last-child { font: var(--text-body-2); }
.hp-reel__bar { display: block; height: var(--stroke-m); background: var(--border-tertiary); margin-bottom: var(--space-8); overflow: hidden; }
.hp-reel__bar i { display: block; height: 100%; width: 0; background: var(--border-active); }
.hp-reel__steps button[aria-pressed="true"] .hp-reel__bar i { width: 100%; }
.hp-reel.is-playing .hp-reel__steps button[aria-pressed="true"] .hp-reel__bar i { animation: hp-reel-fill var(--hp-reel-ms, 4500ms) linear forwards; }
@keyframes hp-reel-fill { from { width: 0; } to { width: 100%; } }
@media (min-width: 600px) { .hp-reel__panel { aspect-ratio: 16 / 9; } .hp-reel__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-reel__pause { right: var(--space-24); top: var(--space-24); } }
@media (prefers-reduced-motion: reduce) { .hp-reel__frames li { transition: none; } .hp-reel.is-playing .hp-reel__steps .hp-reel__bar i { animation: none; width: 100%; } }

/* Product animation: one design-system animation (iframe) rising from the bottom of a paper panel */
.hp-anim { padding-block: 0; }
.hp-anim__panel { --anim-ink: var(--black); position: relative; overflow: hidden; background: var(--art-paper); padding: var(--space-72) var(--space-16) 0; }
.hp-anim__screen { position: relative; max-width: 1100px; margin: 0 auto -14px; aspect-ratio: 1640 / 1000; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px rgb(0 0 0 / 0.06), 0 24px 56px -12px rgb(0 0 0 / 0.22); }
.hp-anim__screen iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.hp-anim__pause { position: absolute; right: var(--space-16); top: var(--space-16); z-index: 2; width: 40px; height: 40px; background: transparent; color: var(--anim-ink); box-shadow: inset 0 0 0 var(--stroke-m) var(--anim-ink); }
.hp-anim__pause:hover { background: rgb(0 0 0 / 0.08); }
.hp-anim__panel[data-bg="paper"] { --tone-ring: var(--black); }
.hp-anim__panel[data-bg="sun"] { background: var(--art-sun); }
.hp-anim__panel[data-bg="sky"] { background: var(--art-sky); }
.hp-anim__panel[data-bg="coral"] { background: var(--art-coral); }
.hp-anim__panel[data-bg="cobalt"] { background: var(--art-cobalt); --anim-ink: var(--white); }
.hp-anim__panel[data-bg="cobalt"] .hp-anim__pause:hover { background: rgb(255 255 255 / 0.14); }
.hp-anim__panel { transition: background-color var(--duration-400) var(--ease-expressive); }
.hp-anim__tone { -webkit-appearance: none; appearance: none; position: absolute; z-index: 2; left: var(--space-16); top: 27px; width: 140px; height: 18px; margin: 0; background: transparent; cursor: pointer; --tone-track: linear-gradient(to right, var(--art-paper) calc(9px + (100% - 18px) * 0), var(--art-sun) calc(9px + (100% - 18px) * 0.25), var(--art-sky) calc(9px + (100% - 18px) * 0.5), var(--art-coral) calc(9px + (100% - 18px) * 0.75), var(--art-cobalt) calc(9px + (100% - 18px) * 1)); }
.hp-anim__tone::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--tone-track); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); }
.hp-anim__tone::-moz-range-track { height: 8px; border-radius: 4px; background: var(--tone-track); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); }
.hp-anim__tone::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -5px; border-radius: 50%; background: var(--tone-now, var(--art-cobalt)); box-shadow: 0 0 0 var(--stroke-m) var(--tone-ring, var(--white)), 0 1px 4px rgb(0 0 0 / 0.25); }
.hp-anim__tone::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--tone-now, var(--art-cobalt)); box-shadow: 0 0 0 var(--stroke-m) var(--tone-ring, var(--white)), 0 1px 4px rgb(0 0 0 / 0.25); }
.hp-anim__tone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 9px; }
.hp-anim__panel[data-bg="cobalt"] .hp-anim__tone::-webkit-slider-runnable-track { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.hp-anim__panel[data-bg="cobalt"] .hp-anim__tone::-moz-range-track { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
@media (min-width: 600px) { .hp-anim__tone { writing-mode: vertical-lr; top: auto; left: var(--space-16); bottom: var(--space-24); width: 18px; height: 140px; --tone-track: linear-gradient(to bottom, var(--art-paper) calc(9px + (100% - 18px) * 0), var(--art-sun) calc(9px + (100% - 18px) * 0.25), var(--art-sky) calc(9px + (100% - 18px) * 0.5), var(--art-coral) calc(9px + (100% - 18px) * 0.75), var(--art-cobalt) calc(9px + (100% - 18px) * 1)); } .hp-anim__tone::-webkit-slider-runnable-track { width: 8px; height: auto; } .hp-anim__tone::-webkit-slider-thumb { margin-top: 0; margin-left: -5px; } .hp-anim__tone::-moz-range-track { width: 8px; height: auto; } }
@media (min-width: 960px) { .hp-anim__tone { left: var(--space-24); bottom: var(--space-24); } }
@media (min-width: 600px) { .hp-anim__panel { padding: var(--space-84) var(--space-48) 0; } }
@media (min-width: 960px) { .hp-anim__panel { padding-inline: var(--space-90); } .hp-anim__pause { right: var(--space-24); top: var(--space-24); } }

/* ---------- Quote over image: avatar beside the attribution (variant of hp-pause) ---------- */
.hp-pause__by { display: flex; align-items: center; gap: var(--space-16); }
.hp-pause__by .hp-avatar { width: 56px; height: 56px; }

/* ---------- Feature stepper: steps scroll on the left, a sticky illustrative window on the right ---------- */
.hp-scrolly { padding-block: var(--space-120) var(--space-120); }
.hp-scrolly__head { row-gap: var(--space-12); margin-bottom: var(--space-60); }
@media (min-width: 960px) { .hp-scrolly__head > * { grid-column: 1 / span 8 !important; } }
.hp-scrolly__steps { display: flex; flex-direction: column; gap: var(--space-72); }
.hp-scrolly__text { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-scrolly__n { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-scrolly__text h3 { font: var(--text-title-2); }
@media (min-width: 960px) { .hp-scrolly__text h3 { font: var(--text-title-1); letter-spacing: -0.01em; } }
.hp-scrolly__text p { font: var(--text-editorial-body); color: var(--text-secondary); max-width: 40em; }
.hp-scrolly__fig { background: var(--bg-image) center / cover no-repeat; padding: var(--space-20) var(--space-16) var(--space-16); margin-top: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
/* Illustration panels: one solid Day Arc fill with white line work, the same in both modes.
   Photographic and gradient art is kept for real product imagery. */
.hp-scrolly__fig[data-fill] { background: var(--art-cobalt); color: var(--white); }
.hp-scrolly__fig[data-fill="night"] { background: var(--art-night); }
/* Arc fills: five evenly spaced samples (10, 30, 50, 70, 90%) of the page ambient's gradient line
   (amb-0 at 0% > amb-1 at 42–64% > amb-2 at 100%), mixed from the same tokens so the page reads as one system.
   The ends are skipped: white lines hold 3.5:1 or better on every sample. */
.hp-page-arc:not([data-ambient]) { --amb-0: var(--art-night); --amb-1: var(--art-cobalt); --amb-2: var(--art-coral); }
.hp-page-arc {
               --hp-arc-1: color-mix(in srgb, var(--amb-1) 23.8%, var(--amb-0));
               --hp-arc-2: color-mix(in srgb, var(--amb-1) 71.4%, var(--amb-0));
               --hp-arc-3: var(--amb-1);
               --hp-arc-4: color-mix(in srgb, var(--amb-2) 16.7%, var(--amb-1));
               --hp-arc-5: color-mix(in srgb, var(--amb-2) 72.2%, var(--amb-1)); }
.hp-scrolly__fig[data-fill="arc-1"] { background: var(--hp-arc-1); }
.hp-scrolly__fig[data-fill="arc-2"] { background: var(--hp-arc-2); }
.hp-scrolly__fig[data-fill="arc-3"] { background: var(--hp-arc-3); }
.hp-scrolly__fig[data-fill="arc-4"] { background: var(--hp-arc-4); }
.hp-scrolly__fig[data-fill="arc-5"] { background: var(--hp-arc-5); }
.hp-scrolly__fig > .hp-win { width: 100%; max-width: 560px; align-self: center; }

/* ---------- Line illustration: single-ink isometric product art (tools/lineart.py) ----------
   The SVG covers its panel (slice), so the stack sits on the panel's middle line and the construction grid runs edge to edge. */
.hp-scrolly__fig:has(.hp-lineart) { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.hp-lineart { position: absolute; inset: 0; color: inherit; }
.hp-lineart svg { display: block; width: 100%; height: 100%; }
.la-s { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.la-em { stroke-width: 2; }
.la-fill, .la-t { fill: currentColor; stroke: none; }
.la-glass { fill: var(--white); }
.la-shade { fill: var(--black); fill-opacity: 0.14; }
.la-dim { opacity: 0.55; }
.la-dash { stroke-dasharray: 3 5; }
.la-hatch { opacity: 0.45; }
.hp-scrolly__fig .at-badge { align-self: flex-start; }
.hp-scrolly__fig .hp-caption { display: flex; }
.hp-scrolly__stage { display: none; }
@media (min-width: 960px) {
  .hp-scrolly { --hp-stage-h: min(760px, calc(100svh - var(--nav-height) - var(--space-72))); }
  .hp-scrolly__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .hp-scrolly__steps { grid-column: 1 / span 6; gap: var(--space-120); }
  .hp-scrolly__fig { padding: var(--space-36) var(--space-36) var(--space-24); }
  /* Once script has copied the windows into the stage, the inline ones step aside. */
  /* Each step is as tall as the stage and centres its copy, so the copy and the art meet on the same middle line */
  .hp-scrolly.is-staged .hp-scrolly__steps { grid-column: 1 / span 5; gap: var(--space-72); }
  .hp-scrolly.is-staged .hp-scrolly__step { min-height: var(--hp-stage-h); display: flex; align-items: center; }
  .hp-scrolly.is-staged .hp-scrolly__step .hp-scrolly__fig { display: none; }
  .hp-scrolly.is-staged .hp-scrolly__text { transition: color var(--duration-250) var(--ease-functional); }
  .hp-scrolly.is-staged .hp-scrolly__step:not(.is-on) h3 { color: var(--text-secondary); }
  .hp-scrolly.is-staged .hp-scrolly__step:not(.is-on) p { color: var(--text-disabled); }
  /* The stage sits centred on the viewport's middle line, under the nav */
  .hp-scrolly.is-staged .hp-scrolly__stage { display: grid; grid-column: 7 / span 6; position: sticky; top: calc(var(--nav-height) + (100svh - var(--nav-height) - var(--hp-stage-h)) / 2); height: var(--hp-stage-h); align-self: start; }
  .hp-scrolly__stage > .hp-scrolly__fig { height: 100%; box-sizing: border-box; aspect-ratio: auto; }
  .hp-scrolly__stage > .hp-scrolly__fig > .hp-win { margin-block: auto; }
  .hp-scrolly__stage > .hp-scrolly__fig { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transition: opacity var(--duration-400) var(--ease-expressive), visibility 0s linear var(--duration-400); }
  .hp-scrolly__stage > .hp-scrolly__fig.is-on { opacity: 1; visibility: visible; transition: opacity var(--duration-400) var(--ease-expressive); }
  .hp-scrolly__stage .hp-win { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .hp-scrolly__stage > .hp-scrolly__fig, .hp-scrolly.is-staged .hp-scrolly__text { transition: none !important; } }

/* Small illustrative app windows used inside the stepper (build on hp-win, hp-run, hp-facts) */
.hp-sw { display: flex; flex-direction: column; }
.hp-sw__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border-tertiary); }
.hp-sw__top b { font-weight: 500; }
.hp-sw__top > span { font: var(--text-body-2); color: var(--text-secondary); }
.hp-sw__body { padding: var(--space-8) var(--space-24) var(--space-16); }
.hp-sw__body .hp-run:first-child { border-top: 0; }
.hp-sw__tabs { justify-content: flex-start; gap: var(--space-20); }
.hp-sw__tabs span { font: var(--text-body-2-strong); color: var(--text-secondary); padding-bottom: var(--space-2); }
.hp-sw__tabs span[aria-current] { color: var(--text-primary); box-shadow: inset 0 calc(var(--stroke-l) * -1) 0 var(--border-active); }
.hp-chat { display: flex; flex-direction: column; gap: var(--space-16); padding-block: var(--space-20); }
.hp-chat__msg { display: flex; flex-direction: column; gap: var(--space-2); }
.hp-chat__msg b { font: var(--text-body-2-strong); }
.hp-chat__msg--agent { padding-left: var(--space-16); box-shadow: inset var(--stroke-l) 0 0 var(--border-active); }
.hp-chat .hp-src { font: var(--text-body-3); color: var(--text-secondary); margin-top: var(--space-4); }
.hp-queue li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-12); padding-block: var(--space-12); border-top: 1px solid var(--border-tertiary); }
.hp-queue li:first-child { border-top: 0; }
.hp-queue li > span { grid-column: 1 / -1; font: var(--text-body-3); color: var(--text-secondary); }
.hp-queue li p { font: var(--text-body-2); }
.hp-queue .hp-status { font: var(--text-body-2-strong); color: var(--text-badge); white-space: nowrap; }
.hp-sw__log { padding: var(--space-16) var(--space-24) var(--space-20); border-top: 1px solid var(--border-tertiary); background: var(--bg-secondary); display: flex; flex-direction: column; gap: var(--space-6); }
.hp-sw__log h4 { font: var(--text-body-3-strong); color: var(--text-secondary); }
.hp-sw__log p { font: var(--text-body-2); display: flex; gap: var(--space-12); }
.hp-sw__log p .hp-num { color: var(--text-secondary); min-width: 44px; }
.hp-sw__log p b { margin-left: auto; font-weight: 500; }
.hp-perm { width: 100%; border-collapse: collapse; font: var(--text-body-2); }
.hp-perm th, .hp-perm td { text-align: left; padding: var(--space-12) var(--space-8) var(--space-12) 0; border-top: 1px solid var(--border-tertiary); }
.hp-perm thead th { font: var(--text-body-3-strong); color: var(--text-secondary); border-top: 0; }
.hp-perm tbody th { font-weight: 500; }
.hp-perm.hp-sw__body { display: table; padding: 0; }
.hp-sw .hp-perm { margin: var(--space-8) var(--space-24) var(--space-16); width: calc(100% - var(--space-48)); }

/* Memory system figure (hp-mem). Ported from the AnyTeam Memory System module onto design-system tokens:
   neutral ink only, square containers, round controls, grotesk type. Introduced by Home (Oct 27). */
.hp-flow__panel--mem { position: relative; padding-block: var(--space-84); }
@media (min-width: 960px) { .hp-flow__panel--mem { padding-block: var(--space-120); } }
/* Morning ground (Day Arc, same in both modes): the panel is scoped data-theme="light" so type, boxes and the drawn lines stay black in dark mode too. */
.hp-flow__panel--mem[data-ambient="morning"] {
  /* Morning time of day: Sky > Paper ground, black text (README, Times of day). Same in both modes. */
  background-color: var(--art-sky);
  background-image: linear-gradient(172deg, var(--art-sky) 0%, color-mix(in srgb, var(--art-sky) 55%, var(--art-paper)) 52%, var(--art-paper) 100%);
}
/* Pause for the figure's motion: matches the hero video control */
.hp-mem__pause { position: absolute; z-index: 3; right: max(var(--gutter-exterior-s), env(safe-area-inset-right, 0px)); bottom: var(--space-24); width: 40px; height: 40px; background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 var(--stroke-m) var(--border-secondary); transition: box-shadow var(--duration-150) var(--ease-functional); }
.hp-mem__pause:hover { background: transparent; box-shadow: inset 0 0 0 var(--stroke-m) var(--text-primary); }
.hp-mem__pause[hidden] { display: none; }
@media (min-width: 960px) { .hp-mem__pause { right: max(var(--gutter-exterior-l), env(safe-area-inset-right, 0px)); bottom: var(--space-36); } }
.hp-mem { container-type: inline-size; color: var(--text-primary); font: var(--text-body-2); }
.hp-mem p { margin: 0; }
.hp-mem__g { position: relative; display: grid; grid-template-columns: minmax(0, 236px) minmax(40px, 1fr) minmax(0, 340px) minmax(40px, 1fr) minmax(0, 380px); align-items: center; }
.hp-mem__cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hp-mem__g > *:not(.hp-mem__cv) { position: relative; z-index: 1; }
.hp-mem__l { grid-column: 1; } .hp-mem__c { grid-column: 3; display: flex; justify-content: center; } .hp-mem__r { grid-column: 5; }
.hp-mem__lab { font: var(--text-eyebrow); color: var(--text-secondary); margin: 0 0 var(--space-10) !important; }
@container (max-width: 940px) {
  .hp-mem__g { grid-template-columns: 1fr; gap: var(--space-36); max-width: 520px; margin: 0 auto; }
  .hp-mem__l, .hp-mem__c, .hp-mem__r { grid-column: 1; }
}
/* signals in */
.hp-mem__src { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-mem__si { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-8) var(--space-10); background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-tertiary); transition: box-shadow var(--duration-400) var(--ease-functional); }
.hp-mem__si.is-ext { box-shadow: inset 0 0 0 1px var(--border-tertiary); background: transparent; }
.hp-mem__si.is-lit { box-shadow: inset 0 0 0 var(--stroke-l) var(--border-active); }
.hp-mem__ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border-tertiary); }
.hp-mem__ic svg, .hp-mem__md .hp-mem__srcs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hp-mem__si b { display: block; font: var(--text-body-2-strong); }
.hp-mem__si em { display: block; font: var(--text-body-3); font-style: normal; color: var(--text-secondary); }
/* the loop */
.hp-mem__ring { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: var(--space-48) 0; }
@container (max-width: 940px) { .hp-mem__ring { width: min(100% - 120px, 300px); } }
.hp-mem__st { position: absolute; z-index: 2; transform: translate(-50%, -50%); white-space: nowrap; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12); border-radius: var(--radius-rounded); background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary); color: var(--text-primary); transition: background-color var(--duration-400) var(--ease-functional), color var(--duration-400) var(--ease-functional); }
.hp-mem__st b { font: var(--text-body-1-strong); }
.hp-mem__st i { width: 6px; height: 6px; border-radius: var(--radius-rounded); background: var(--border-secondary); }
.hp-mem__st--w { left: 0; top: 50%; } .hp-mem__st--n { left: 50%; top: 0; } .hp-mem__st--e { left: 100%; top: 50%; } .hp-mem__st--s { left: 50%; top: 100%; }
.hp-mem__st.is-on { background: var(--action-primary); color: var(--on-action-primary); box-shadow: none; }
.hp-mem__st.is-on i { background: var(--on-action-primary); }
.hp-mem__mark { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; display: grid; place-items: center; }
.hp-mem__mark svg { width: 80px; height: 80px; fill: var(--text-primary); }
/* outputs */
.hp-mem__list { background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-tertiary); padding: var(--space-4) var(--space-10); }
.hp-mem__or { all: unset; box-sizing: border-box; position: relative; width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; gap: var(--space-10); align-items: start; padding: var(--space-12) var(--space-6); border-bottom: 1px solid var(--border-tertiary); cursor: pointer; transition: background-color var(--duration-150) var(--ease-functional); }
.hp-mem__or:last-child { border-bottom: 0; }
.hp-mem__or:hover { background: var(--art-paper); color: var(--black); } /* Day Arc paper on hover, black text per its token note */
.hp-mem__or:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.hp-mem__or b { display: block; font: var(--text-body-1-strong); }
.hp-mem__ck { width: 20px; height: 20px; border-radius: var(--radius-rounded); background: var(--action-primary); display: grid; place-items: center; margin-top: 2px; }
.hp-mem__ck svg { width: 11px; height: 11px; fill: none; stroke: var(--on-action-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-mem__go { width: 14px; height: 14px; margin-top: 5px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .45; transition: transform var(--duration-250) var(--ease-functional), opacity var(--duration-250) var(--ease-functional); }
.hp-mem__or:hover .hp-mem__go, .hp-mem__or:focus-visible .hp-mem__go { opacity: 1; transform: translateX(3px); }
.hp-mem__or.is-fresh::before { content: ""; position: absolute; left: -10px; top: var(--space-12); bottom: var(--space-12); width: var(--stroke-l); background: var(--border-active); animation: hp-mem-fresh 2.6s ease forwards; }
@keyframes hp-mem-fresh { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.hp-mem__hint { margin-top: var(--space-10) !important; font: var(--text-body-3); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .hp-mem__or.is-fresh::before { animation: none; opacity: 0; } }

/* detail sheet: a modal on the scrim, radius-12 as the design system sets for modals */
.hp-lock { overflow: hidden; }
.hp-mem__ov { position: fixed; inset: 0; z-index: var(--z-80, 80); display: flex; align-items: center; justify-content: center; padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); background: var(--scrim-strong); }
.hp-mem__ov[hidden] { display: none; }
.hp-mem__md { width: min(940px, 100%); max-height: 100%; overflow: auto; background: var(--bg-primary); color: var(--text-primary); border-radius: var(--radius-12); box-shadow: var(--shadow-100); font: var(--text-body-2); }
.hp-mem__ov[data-theme="dark"] .hp-mem__md { background: var(--bg-secondary); } /* the sheet follows the page mode, not the dusk panel's */
.hp-mem__md p { margin: 0; }
.hp-mem__mh { padding: var(--space-20) var(--space-24) var(--space-16); border-bottom: 1px solid var(--border-tertiary); }
.hp-mem__mtop { display: flex; align-items: center; gap: var(--space-10); }
.hp-mem__mtop [data-k] { font: var(--text-eyebrow); color: var(--text-secondary); }
.hp-mem__mtop .at-icon-btn { margin-left: auto; }
.hp-mem__md h3 { font: var(--text-title-3); margin: var(--space-6) 0 0; }
.hp-mem__meta { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
.hp-mem__meta span { font: var(--text-body-3); padding: var(--space-4) var(--space-10); border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--border-secondary); color: var(--text-secondary); }
.hp-mem__meta span.is-ink { background: var(--action-primary); color: var(--on-action-primary); box-shadow: none; }
.hp-mem__mb { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-24); padding: var(--space-24); }
@media (max-width: 759px) { .hp-mem__mb { grid-template-columns: 1fr; } }
.hp-mem__side { display: grid; gap: var(--space-16); align-content: start; }
.hp-mem__srcs { display: grid; gap: var(--space-8); }
.hp-mem__srcs div { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-10); align-items: start; }
.hp-mem__srcs i { width: 28px; height: 28px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border-tertiary); }
.hp-mem__srcs b { display: block; font-weight: 500; }
.hp-mem__srcs em { font-style: normal; color: var(--text-secondary); }
.hp-mem__val { background: var(--action-primary); color: var(--on-action-primary); padding: var(--space-16); font: var(--text-body-1); }
.hp-mem__val .hp-mem__lab { color: inherit; opacity: .7; }
.hp-mem__mf { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-16) var(--space-24) var(--space-20); border-top: 1px solid var(--border-tertiary); }
.hp-mem__mf [data-ct] { font: var(--text-body-3); color: var(--text-secondary); margin: 0 auto; }
/* the work itself: a small product mock, square, on the page ground */
.hp-mem__md .art { box-shadow: inset 0 0 0 1px var(--border-tertiary); background: var(--bg-primary); font: var(--text-body-2); }
.hp-mem__md .a-bar, .hp-mem__md .a-ft { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; padding: var(--space-10) var(--space-16); color: var(--text-secondary); font: var(--text-body-3); }
.hp-mem__md .a-bar { border-bottom: 1px solid var(--border-tertiary); background: var(--bg-secondary); }
.hp-mem__md .a-ft { border-top: 1px solid var(--border-tertiary); }
.hp-mem__md .a-bar b { color: var(--text-primary); font-weight: 500; }
.hp-mem__md .r { margin-left: auto; }
.hp-mem__md .a-in { padding: var(--space-16); display: grid; gap: var(--space-12); }
.hp-mem__md .a-note, .hp-mem__md .qa, .hp-mem__md .bt { box-shadow: inset 0 0 0 1px var(--border-tertiary); padding: var(--space-12) var(--space-16); display: grid; gap: var(--space-6); }
.hp-mem__md .a-note h4 { margin: 0; font: var(--text-eyebrow); color: var(--text-secondary); }
.hp-mem__md .a-ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.hp-mem__md .a-ul li { position: relative; padding-left: var(--space-16); }
.hp-mem__md .a-ul li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; background: var(--text-secondary); }
.hp-mem__md .ev { font: var(--text-body-3); color: var(--text-secondary); }
.hp-mem__md .bs { display: inline-block; font: var(--text-body-3-strong); padding: var(--space-4) var(--space-12); border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--border-secondary); color: var(--text-primary); }
.hp-mem__md .bs.dk { background: var(--action-primary); color: var(--on-action-primary); box-shadow: none; }
.hp-mem__md .cr { font: var(--text-body-3-strong); padding: 2px var(--space-8); border-radius: var(--radius-rounded); background: var(--bg-secondary); color: var(--text-primary); white-space: nowrap; }
.hp-mem__md .cr.gap { background: transparent; box-shadow: inset 0 0 0 1px var(--border-active); }
.hp-mem__md .lg { width: 22px; height: 22px; background: var(--action-primary); color: var(--on-action-primary); display: inline-grid; place-items: center; font: var(--text-body-3-strong); flex: none; }
.hp-mem__md .bt { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-10); padding: var(--space-8) var(--space-10); }
.hp-mem__md .bt b { font-weight: 500; } .hp-mem__md .bt span { grid-column: 1; font: var(--text-body-3); color: var(--text-secondary); } .hp-mem__md .bt .cr { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--text-primary); }
.hp-mem__md .qa .q { font-weight: 500; }
.hp-mem__md .qa.flag { box-shadow: inset 0 0 0 var(--stroke-l) var(--border-active); }
.hp-mem__md .sc { display: grid; grid-template-columns: 132px auto minmax(0, 1fr); gap: var(--space-4) var(--space-10); align-items: center; padding: var(--space-8) 0; border-bottom: 1px solid var(--border-tertiary); }
.hp-mem__md .sc:last-child { border-bottom: 0; }
.hp-mem__md .sc b { font-weight: 500; }
@media (max-width: 560px) { .hp-mem__md .sc { grid-template-columns: 1fr auto; } .hp-mem__md .sc .ev { grid-column: 1 / -1; } }

/* Line illustration on a solid panel outside the feature stepper, with optional motion (Home: memory loss). */
.hp-symptoms__img--art { position: relative; background: var(--art-night); color: var(--white); }
.hp-symptoms__img--art .hp-lineart { position: absolute; inset: 0; }
.la-leak { animation: la-leak 7s var(--ease-expressive, ease-in-out) infinite; }
.la-leak-2 { animation-delay: -1.75s; } .la-leak-3 { animation-delay: -3.5s; } .la-leak-4 { animation-delay: -5.25s; }
@keyframes la-leak { 0% { opacity: 0; transform: translateY(24px); } 18% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px); } }
.la-fade { animation: la-fade 7s ease-in-out infinite; }
.la-fade-2 { animation-delay: -1.75s; } .la-fade-3 { animation-delay: -3.5s; } .la-fade-4 { animation-delay: -5.25s; }
@keyframes la-fade { 0%, 40% { opacity: 1; } 75% { opacity: .15; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .la-leak, .la-fade { animation: none; } }
/* On the Day Arc ground the small labels use the primary ink: the secondary grey drops below 4.5:1 on sky */
.hp-flow__panel--mem[data-ambient] .hp-mem__lab, .hp-flow__panel--mem[data-ambient] .hp-mem__hint { color: var(--text-primary); }
/* Translucent cards so the ground shows through (no blur: the design system rules out glassmorphism) */
.hp-flow__panel--mem[data-ambient] .hp-mem__si, .hp-flow__panel--mem[data-ambient] .hp-mem__list { background: color-mix(in srgb, var(--bg-primary) 52%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 14%, transparent); }
.hp-flow__panel--mem[data-ambient] .hp-mem__si.is-ext { background: color-mix(in srgb, var(--bg-primary) 22%, transparent); }
.hp-flow__panel--mem[data-ambient] .hp-mem__si.is-lit { box-shadow: inset 0 0 0 var(--stroke-l) var(--border-active); }
.hp-flow__panel--mem[data-ambient] .hp-mem__or { border-bottom-color: color-mix(in srgb, var(--black) 12%, transparent); }
/* The loop, step by step: four columns under the figure, inside the same panel */
.hp-mem__steps { display: grid; grid-template-columns: 1fr; gap: var(--space-36) var(--gutter-grid-l); margin-top: var(--space-84); }
.hp-mem__steps li { border-top: var(--stroke-m) solid var(--border-active); padding-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.hp-mem__steps h3 { font: var(--text-title-3); color: var(--text-primary); }
.hp-mem__steps p { font: var(--text-body-2); color: var(--text-primary); text-wrap: pretty; }
@media (min-width: 600px) { .hp-mem__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-mem__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-120); } }
.hp-mem__or:hover .hp-mem__ck { background: var(--black); }
.hp-mem__or:hover .hp-mem__ck svg { stroke: var(--white); }
/* One eased fade for the whole row (fill, ink, tick, arrow) instead of a background-only snap */
.hp-mem__or { transition: background-color var(--duration-250) var(--ease-functional), color var(--duration-250) var(--ease-functional); }
.hp-mem__or .hp-mem__ck { transition: background-color var(--duration-250) var(--ease-functional); }
.hp-mem__or .hp-mem__ck svg { transition: stroke var(--duration-250) var(--ease-functional); }
.hp-mem__or .hp-mem__go { transition: opacity var(--duration-250) var(--ease-functional), transform var(--duration-250) var(--ease-functional); }

/* ---------- Product menu callout with video (site-wide) ----------
   Product image offset on a Morning ground (Sky > Paper) so the colour frames its top and left edges, a soft shadow to lift it,
   a light scrim and a round play button. The picture opens the overview video overlay; the text links to the page. */
.hp-mega__callout--video { gap: var(--space-8); }
.hp-mega__play { all: unset; box-sizing: border-box; flex: 1; display: flex; position: relative; cursor: pointer; min-height: 200px; }
.hp-mega__play:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.hp-mega__img--morning { background: linear-gradient(160deg, var(--art-sky) 0%, color-mix(in srgb, var(--art-sky) 50%, var(--art-paper)) 55%, var(--art-paper) 100%); }
.hp-mega__img--morning > img { inset: auto; left: 9%; top: 13%; width: 112%; height: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(20, 32, 74, 0.28)) drop-shadow(0 2px 6px rgba(20, 32, 74, 0.16)); transform-origin: 0 0; }
.hp-mega__play .hp-mega__img::after { content: ""; position: absolute; inset: 0; background: var(--black); opacity: 0.08; transition: opacity var(--duration-250) var(--ease-functional); }
.hp-mega__play:hover .hp-mega__img::after { opacity: 0.02; }
.hp-mega__play:hover .hp-mega__img > img { transform: translate(-1%, -1%); }
.hp-mega__playbtn { position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: var(--radius-rounded); background: color-mix(in srgb, var(--black) 55%, transparent); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); transition: transform var(--duration-250) var(--ease-expressive), background-color var(--duration-250) var(--ease-functional); }
.hp-mega__playbtn svg { width: 24px; height: 24px; margin-left: 3px; fill: var(--white); }
.hp-mega__play:hover .hp-mega__playbtn { transform: scale(1.06); background: color-mix(in srgb, var(--black) 72%, transparent); }
.hp-drawer__play { all: unset; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hp-drawer__play:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }

/* Overview video overlay: above any page and its nav. The player sits on the Home hero's ambient art. */
.hp-vov { position: fixed; inset: 0; z-index: var(--z-90); display: flex; align-items: center; justify-content: center; padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); background: var(--scrim-strong); opacity: 0; transition: opacity var(--duration-250) var(--ease-functional); }
.hp-vov[hidden] { display: none; }
.hp-vov.is-open { opacity: 1; }
.hp-vov__frame { position: relative; width: min(1180px, 100%, calc((100dvh - var(--space-48)) * 1.5)); padding: clamp(var(--space-16), 5vw, var(--space-60)); padding-top: max(clamp(var(--space-16), 5vw, var(--space-60)), 68px); background: var(--art-night) center / cover no-repeat; transform: translateY(12px); transition: transform var(--duration-400) var(--ease-expressive); }
.hp-vov.is-open .hp-vov__frame { transform: none; }
.hp-vov__video { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--white); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.hp-vov__close { position: absolute; z-index: 2; right: var(--space-12); top: var(--space-12); width: 40px; height: 40px; background: transparent; color: var(--white); box-shadow: inset 0 0 0 var(--stroke-m) var(--white); }
.hp-vov__close:hover { background: color-mix(in srgb, var(--white) 16%, transparent); }
@media (min-width: 960px) { .hp-vov__close { right: var(--space-16); top: var(--space-16); } }
@media (prefers-reduced-motion: reduce) { .hp-vov, .hp-vov__frame { transition: none; } }

/* ==========================================================================
   Agents page (Oct 27). Blocks introduced by agents.html; catalogued in BLOCKS.md.
   ========================================================================== */

/* ---------- Lightfield hero: video hero with the lockup left and side copy right, leaving room for a product rise ---------- */
.hp-hero--lightfield { --hp-rise: clamp(120px, 17vw, 330px); justify-content: flex-end; min-height: 85svh; padding-top: calc(var(--nav-height) + var(--space-48)); padding-bottom: calc(var(--hp-rise) + var(--space-60)); }
@media (min-width: 760px) { .hp-hero--lightfield { min-height: max(580px, min(85svh, 53vw)); } } /* 15% shorter than the full-viewport hero (Oct 27) */
.hp-hero--lightfield .hp-hero__media video { object-position: 50% 50%; }
/* Night-side scrim under the type, then the page ground rises in under the product */
.hp-hero--lightfield .hp-hero__media::before { background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 30%, transparent 70%); }
.hp-hero--lightfield .hp-hero__media::after { background: linear-gradient(to bottom, transparent calc(100% - var(--hp-rise) * 0.9), var(--hp-page-bg) 100%); }
.hp-lf__grid { row-gap: var(--space-24); align-items: end; }
.hp-lf__eyebrow { font: 500 max(13px, 1.1vw)/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-image); opacity: 0.9; }
.hp-lf__lockup { font: 400 max(44px, 6vw)/0.98 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-on-image); }
.hp-lf__lockup span { display: block; }
.hp-lf__side { display: flex; flex-direction: column; gap: max(var(--space-32), 2.4vw); color: var(--text-on-image); }  /* Gap sets the hero copy -> CTA spacing (Agents, Memory). Was a flat 24px,
     which read as cramped under the headline on wide screens; now it scales
     with the viewport the way the image hero's copy does. */
.hp-lf__side p { font: 400 max(18px, 1.45vw)/1.4 var(--font-sans); max-width: 30ch; }
@media (min-width: 960px) {
  .hp-lf__eyebrow { grid-column: 1 / span 9 !important; }
  .hp-lf__lockup { grid-column: 1 / span 9 !important; }
  .hp-lf__lockup span { white-space: nowrap; }
  .hp-lf__side { grid-column: 10 / span 3 !important; padding-bottom: 0.4vw; }
}

/* ---------- Product rise: the product animation lifts out of the hero's bottom edge onto the page ground ---------- */
.hp-rise { position: relative; z-index: 2; margin-top: calc(var(--hp-rise, clamp(120px, 17vw, 330px)) * -1); }
.hp-rise__stage { position: relative; max-width: 1180px; margin: 0 auto; }
.hp-rise__clip { position: relative; overflow: hidden; } /* crops the frame's bottom edge so it rises flat out of the page */
.hp-rise .hp-anim__screen { margin: 0 0 -14px; max-width: none; }
.hp-rise__clip::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg-primary) 70%, transparent) 60%, var(--bg-primary)); }
.hp-rise .hp-anim__pause { --anim-ink: var(--text-primary); position: absolute; top: calc(100% + var(--space-16)); right: 0; bottom: auto; left: auto; }
.hp-rise .hp-anim__pause:hover { background: var(--bg-hover); }
.hp-rise + .hp-index { padding-top: calc(var(--space-120) + var(--space-24)); }
@media (max-width: 599px) { .hp-rise .hp-anim__screen { border-radius: 8px; } }

/* ---------- Agent index: numbered chapters, each with a persistent preview block that swaps per agent.
   Blocks stagger left / right / left; heading, description and a compact ruled agent list stack beside it. ---------- */
.hp-index { padding-block: var(--space-120) var(--space-84); }
.hp-index__head { row-gap: var(--space-12); margin-bottom: var(--space-60); }
@media (min-width: 960px) { .hp-index__head > * { grid-column: 1 / span 8; } }
.hp-index__chapter { row-gap: var(--space-24); align-items: center; padding-block: var(--space-48); }
.hp-index__chapter + .hp-index__chapter { margin-top: var(--space-36); }
.hp-index__body { display: flex; flex-direction: column; gap: var(--space-24); }
.hp-index__text { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-index__no { font: var(--text-body-2-strong); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hp-index__text h3 { font: var(--text-title-2); letter-spacing: -0.01em; }
.hp-index__text p { font: var(--text-body-1); color: var(--text-secondary); max-width: 46ch; }
.hp-index__agents > li { border-top: 1px solid var(--border-tertiary); }
.hp-index__agents > li:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-index__agent { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); width: 100%; padding: var(--space-12) 0 var(--space-12) var(--space-16); cursor: pointer; position: relative; }
.hp-index__agent::before { content: ""; position: absolute; left: 0; top: var(--space-12); bottom: var(--space-12); width: var(--stroke-l); background: var(--border-active); transform: scaleY(0); transform-origin: top; transition: transform var(--duration-250) var(--ease-functional); }
.hp-index__agent b { font: var(--text-title-4); font-weight: 500; letter-spacing: -0.01em; color: var(--text-secondary); transition: color var(--duration-150) var(--ease-functional); }
.hp-index__agent span { font: var(--text-body-2); color: var(--text-secondary); max-width: 52ch; }
.hp-index__agent:hover b, .hp-index__agent[aria-pressed="true"] b { color: var(--text-primary); }
.hp-index__agent[aria-pressed="true"]::before { transform: scaleY(1); }
.hp-index__agent[aria-pressed="true"] span { color: var(--text-primary); }
.hp-index__agent:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (min-width: 960px) {
  .hp-index__chapter[data-side="left"] .hp-index__media { grid-column: 1 / span 6 !important; }
  .hp-index__chapter[data-side="left"] .hp-index__body { grid-column: 8 / span 5 !important; }
  .hp-index__chapter[data-side="right"] .hp-index__media { grid-column: 7 / span 6 !important; grid-row: 1; }
  .hp-index__chapter[data-side="right"] .hp-index__body { grid-column: 1 / span 5 !important; grid-row: 1; }
}
/* Preview block: one ground per agent (Day Arc fills, CSS only), card placed differently per agent */
.hp-index__media { container-type: inline-size; min-width: 0; }
/* 4:3 by container width (aspect-ratio plus min-height would widen the block past its columns) */
.hp-index__show { position: relative; overflow: hidden; min-height: max(420px, 75cqw); isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(var(--space-16), 3vw, var(--space-48)); place-items: center;
  background: var(--art-night); transition: background-color var(--duration-400) var(--ease-expressive); }
/* Grounds: only the interim palette's solids and its six time-of-day grounds (Ground column, 115deg like the Image Lab) */
/* Deal Risk uses the page's own Golden ambient, matching the lightfield hero and the Build agents panel */
.hp-index__show[data-ground="lightfield"] { background:
    radial-gradient(65% 75% at 22% 18%, color-mix(in srgb, var(--art-ember) 80%, var(--art-sun)) 0%, transparent 70%),
    radial-gradient(55% 60% at 88% 92%, color-mix(in srgb, var(--art-ember) 55%, var(--art-night)) 0%, transparent 72%),
    linear-gradient(155deg, color-mix(in srgb, var(--art-night) 45%, var(--art-ember)) 0%, color-mix(in srgb, var(--art-night) 78%, var(--art-ember)) 100%); }
.hp-index__show[data-ground="morning"]   { background: linear-gradient(115deg, var(--art-sky), var(--art-paper)); }
.hp-index__show[data-ground="afternoon"] { background: linear-gradient(115deg, var(--art-sun), var(--art-ember)); }
.hp-index__show[data-ground="golden"]    { background: linear-gradient(115deg, var(--art-ember), var(--art-coral)); }
.hp-index__show[data-ground="dusk"]      { background: linear-gradient(115deg, var(--art-cobalt), var(--art-coral)); }
.hp-index__show[data-ground="night"]     { background: linear-gradient(115deg, var(--art-night), var(--art-cobalt)); }
.hp-index__show[data-ground="sun"]         { background: var(--art-sun); }
.hp-index__show[data-ground="coral"]       { background: var(--art-coral); }
.hp-index__show[data-ground="cobalt"]      { background: var(--art-cobalt); }
.hp-index__show[data-ground="night-solid"] { background: var(--art-night); }
/* Mild grain over every ground, barely visible (design system: texture up close, gone at a glance) */
.hp-index__show::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
/* The run card: a white window like the agent builder */
.hp-arun { position: relative; z-index: 1; box-sizing: border-box; width: min(100%, 400px); background: var(--white); color: var(--black); border-radius: var(--radius-12); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); font: var(--text-body-2); box-shadow: 0 2px 6px rgb(0 0 0 / 0.06), 0 24px 56px -12px rgb(0 0 0 / 0.3); animation: hp-run-in var(--duration-400) var(--ease-expressive); }
@keyframes hp-run-in { from { opacity: 0; transform: translateY(8px); } }
.hp-arun__top { display: flex; align-items: center; gap: var(--space-8); }
.hp-arun__name { font-weight: 500; }
.hp-arun__status { margin-left: auto; height: 24px; display: inline-flex; align-items: center; padding: 0 var(--space-10); border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--grey-300); font-size: 13px; color: var(--grey-600); }
.hp-arun__status.is-done { background: var(--black); color: var(--white); box-shadow: none; }
.hp-arun__ctx { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) var(--space-12); background: var(--grey-100); border-radius: var(--radius-8); }
.hp-arun__ctx b { font-weight: 500; }
.hp-arun__ctx span { color: var(--grey-500); text-align: right; }
.hp-arun__steps li { display: flex; align-items: center; gap: var(--space-8); padding: 3px 0; color: var(--grey-500); transition: color var(--duration-250) var(--ease-functional); }
.hp-arun__steps li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--grey-300); transition: background-color var(--duration-250), box-shadow var(--duration-250); }
.hp-arun__steps li.is-on { color: var(--black); }
.hp-arun__steps li.is-on::before { background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: none; }
.hp-arun__out { border-top: 1px solid var(--grey-200); padding-top: var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); opacity: 0; transform: translateY(6px); transition: opacity var(--duration-400) var(--ease-expressive), transform var(--duration-400) var(--ease-expressive); }
.hp-arun__out.is-on { opacity: 1; transform: none; }
.hp-arun__to { color: var(--grey-500); font-size: 13px; }
.hp-arun__head { font-weight: 500; }
.hp-arun__out ul li { padding-left: var(--space-12); position: relative; }
.hp-arun__out ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
@media (max-width: 599px) { .hp-index__show { min-height: 400px; } }
@media (prefers-reduced-motion: reduce) { .hp-arun, .hp-arun__out, .hp-index__show { animation: none; transition: none; } }

@media (min-width: 960px) { .hp-index__show { min-height: max(500px, 75cqw); } .hp-arun { zoom: 1.2; } } /* card about 20% larger on wide screens */

/* ---------- Agent builder: a small builder made of system parts on a flat Sun panel, copy beside it ---------- */
.hp-builder { padding-block: var(--space-84) var(--space-120); }
.hp-index + .hp-builder { padding-top: 0; }
.hp-builder:has(+ .hp-ask) { padding-bottom: var(--space-84); }
.hp-builder + .hp-ask { padding-top: 0; }
.hp-builder + .hp-ask > .at-container > .hp-grid { border-top: 1px solid var(--border-tertiary); padding-top: var(--space-120); }
.hp-index + .hp-builder > .at-container > .hp-grid { border-top: 1px solid var(--border-tertiary); padding-top: var(--space-84); }
.hp-builder .hp-grid { row-gap: var(--space-48); align-items: center; }
.hp-builder__panel { /* Golden ambient, matching the lightfield hero: Night > Ember > Sun, CSS only */
  background:
    radial-gradient(65% 75% at 22% 18%, color-mix(in srgb, var(--art-ember) 80%, var(--art-sun)) 0%, transparent 70%),
    radial-gradient(55% 60% at 88% 92%, color-mix(in srgb, var(--art-ember) 55%, var(--art-night)) 0%, transparent 72%),
    linear-gradient(155deg, color-mix(in srgb, var(--art-night) 45%, var(--art-ember)) 0%, color-mix(in srgb, var(--art-night) 78%, var(--art-ember)) 100%);
  color: var(--black); aspect-ratio: 5 / 4; display: grid; place-items: center; padding: var(--space-24); overflow: hidden; }
.hp-builder__win { width: min(100%, 460px); background: var(--white); color: var(--black); border-radius: var(--radius-12); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); box-shadow: 0 2px 6px rgb(0 0 0 / 0.06), 0 24px 56px -12px rgb(0 0 0 / 0.22); }
.hp-builder__label { font: var(--text-body-2-strong); color: var(--grey-500); }
.hp-builder__field { display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-16); border-radius: var(--radius-8); box-shadow: inset 0 0 0 var(--stroke-m) var(--black); font: var(--text-body-1); margin-bottom: var(--space-8); }
.hp-builder__typed { white-space: nowrap; overflow: hidden; }
.hp-builder__typed.is-placeholder { color: var(--grey-500); }
.hp-builder__caret { width: 1.5px; height: 22px; background: var(--black); margin-left: 2px; animation: hp-caret 1s steps(1) infinite; }
@keyframes hp-caret { 50% { opacity: 0; } }
.hp-builder__templates { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-8); }
.hp-builder__templates li { height: 32px; display: inline-flex; align-items: center; padding: 0 var(--space-12); border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--grey-300); font: var(--text-body-2); transition: box-shadow var(--duration-250) var(--ease-functional); }
.hp-builder__templates li.is-on { box-shadow: inset 0 0 0 var(--stroke-m) var(--black); font-weight: 500; }
.hp-builder__share { display: flex; align-items: center; gap: var(--space-12); padding-top: var(--space-16); border-top: 1px solid var(--grey-200); font: var(--text-body-2); }
.hp-builder__switch { width: 36px; height: 20px; border-radius: var(--radius-rounded); background: var(--grey-300); position: relative; transition: background-color var(--duration-250) var(--ease-functional); flex: none; }
.hp-builder__switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform var(--duration-250) var(--ease-functional); }
.hp-builder__switch.is-on { background: var(--black); }
.hp-builder__switch.is-on i { transform: translateX(16px); }
.hp-builder__status { margin-left: auto; font-weight: 500; opacity: 0; transition: opacity var(--duration-250) var(--ease-functional); }
.hp-builder__status.is-on { opacity: 1; }
.hp-builder__copy { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-builder__dek { font: var(--text-dek); color: var(--text-secondary); margin-top: var(--space-8); }
.hp-builder__features { margin-top: var(--space-24); }
.hp-builder__features div { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter-grid-l); padding: var(--space-16) 0; border-top: 1px solid var(--border-tertiary); }
.hp-builder__features div:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-builder__features dt { font: var(--text-body-1-strong); }
.hp-builder__features dd { font: var(--text-body-1); color: var(--text-secondary); margin: 0; }
@media (min-width: 600px) { .hp-builder__features div { grid-template-columns: 2fr 5fr; } }
@media (min-width: 960px) {
  .hp-builder__panel { grid-column: 1 / span 6 !important; }
  .hp-builder__copy { grid-column: 8 / span 5 !important; }
}
@media (max-width: 599px) { .hp-builder__panel { aspect-ratio: auto; padding: var(--space-48) var(--space-24); } }

/* ---------- MCP band (always dark): pick an assistant, one ask field, the sources it answers from ---------- */
.hp-ask { padding-block: var(--space-120); }
.hp-ask .hp-grid { row-gap: var(--space-48); align-items: end; }
.hp-ask__copy { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-ask__dek { font: var(--text-dek); margin-top: var(--space-8); }
.hp-ask__body { font: var(--text-body-1); color: var(--text-secondary); max-width: 52ch; margin-top: var(--space-12); }
.hp-ask__demo { display: flex; flex-direction: column; gap: var(--space-24); }
.hp-ask__legend { font: var(--text-body-2); color: var(--text-secondary); margin-bottom: var(--space-12); padding: 0; }
.hp-ask__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.hp-ask__ask { position: relative; isolation: isolate; border-radius: var(--radius-24); background: var(--bg-secondary); padding: var(--space-24) calc(var(--space-24) + 48px) var(--space-36) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
/* Glimmer: a gradient light tracing the field's edge, coloured per assistant (user-requested exception to the no-art-colour-on-borders rule) */
@property --hp-ask-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.hp-ask__demo { --g1: var(--art-blush); --g2: var(--art-coral); --g3: var(--art-ember); }
.hp-ask__demo[data-ai="chatgpt"] { --g1: var(--art-sky); --g2: var(--art-paper); --g3: var(--art-sky); }
.hp-ask__demo[data-ai="copilot"] { --g1: var(--art-cobalt); --g2: var(--art-sky); --g3: var(--art-sun); }
.hp-ask__ask::before, .hp-ask__ask::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--hp-ask-a), transparent 0deg 200deg, var(--g1) 255deg, var(--g2) 300deg, var(--g3) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hp-ask-trace 4.5s linear infinite; }
.hp-ask__ask::after { padding: 3px; filter: blur(6px); opacity: 0.55; z-index: -1; }
.hp-ask__ask.is-paused::before, .hp-ask__ask.is-paused::after { animation-play-state: paused; }
@keyframes hp-ask-trace { to { --hp-ask-a: 360deg; } }
.hp-ask__caret { display: inline-block; width: 2px; height: 0.95em; margin-left: 3px; vertical-align: -0.1em; background: currentColor; animation: hp-caret 1s steps(1) infinite; }
.hp-ask__ask.is-paused .hp-ask__caret { animation: none; }
.hp-ask__pause { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 var(--stroke-m) var(--border-secondary); }
.hp-ask__pause:hover { background: var(--bg-hover); }
@media (prefers-reduced-motion: reduce) { .hp-ask__ask::before, .hp-ask__ask::after { animation: none; --hp-ask-a: 120deg; } .hp-ask__caret { display: none; } .hp-ask__pause { display: none; } }
.hp-ask__to { font: var(--text-body-2); color: var(--text-secondary); }
.hp-ask__to b { font-weight: 500; color: var(--text-primary); }
.hp-ask__q { font: var(--text-title-2); font-size: clamp(17px, 2.1vw, 32px); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; }
.hp-ask__from { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-ask__from p { font: var(--text-body-2); color: var(--text-secondary); }
@media (min-width: 960px) {
  .hp-ask__copy { grid-column: 1 / span 5 !important; }
  .hp-ask__demo { grid-column: 7 / span 6 !important; }
}

/* ---------- Trust list: a quiet head plus ruled statements ---------- */
.hp-trust { padding-block: var(--space-120); }
/* In dark mode the always-dark MCP band meets the page ground: separate them with a hairline */
.hp-ask + .hp-trust { border-top: 1px solid var(--border-tertiary); }
.hp-trust__head { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-trust__list li { font: var(--text-title-3); letter-spacing: -0.01em; padding: var(--space-20) 0; border-top: 1px solid var(--border-tertiary); }
.hp-trust__list li:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-trust__confirm { color: var(--text-secondary); }
.hp-trust__tag { font: var(--text-body-2-strong); color: var(--text-primary); }
@media (min-width: 960px) {
  .hp-trust__head { grid-column: 1 / span 4 !important; }
  .hp-trust__list { grid-column: 6 / span 7 !important; }
}

/* ---------- FAQ: head left, native disclosure rows right ---------- */
.hp-faq { padding-block: var(--space-120); }
.hp-faq__head { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-faq__list details { border-top: 1px solid var(--border-tertiary); }
.hp-faq__list details:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); padding: var(--space-20) 0; font: var(--text-title-4); }
.hp-faq__list summary::-webkit-details-marker { display: none; }
.hp-faq__list summary::after { content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 24px no-repeat; transition: transform var(--duration-250) var(--ease-functional); }
.hp-faq__list details[open] summary::after { transform: rotate(45deg); }
.hp-faq__list summary:hover { color: var(--text-hover); }
.hp-faq__list summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hp-faq__list details > div { padding: 0 var(--space-48) var(--space-24) 0; display: flex; flex-direction: column; gap: var(--space-12); }
.hp-faq__list details p { font: var(--text-body-1); color: var(--text-secondary); max-width: 68ch; }
@media (min-width: 960px) {
  .hp-faq__head { grid-column: 1 / span 4 !important; position: sticky; top: calc(var(--nav-height) + var(--space-24)); align-self: start; }
  .hp-faq__list { grid-column: 6 / span 7 !important; }
}
@media (prefers-reduced-motion: reduce) { .hp-builder__caret { animation: none; } }

/* A page locked to one colour mode (html[data-theme-lock], the Agents page is dark only) hides the footer colour toggle */
[data-theme-lock] .at-theme-toggle { display: none; }
@media (max-width: 599px) { .hp-ask__ask { padding: var(--space-20) 52px var(--space-24) var(--space-20); } }

/* ------------------------------------------------------------------
   Legal document (Privacy Policy, Terms of Service)
   Quiet page: no hero. Header, a sticky contents list in the left 3
   columns, the document in columns 4 to 11.
------------------------------------------------------------------ */
.hp-legal { padding-block: var(--space-48) var(--space-120); }
@media (min-width: 960px) { .hp-legal { padding-block: var(--space-84) var(--space-120); } }
.hp-legal__head { display: flex; flex-direction: column; gap: var(--space-12); padding-bottom: var(--space-36); margin-bottom: var(--space-36); border-bottom: 1px solid var(--border-tertiary); }
.hp-legal__title { font: var(--text-title-2); letter-spacing: 0; text-transform: none; }
@media (min-width: 960px) { .hp-legal__title { font: var(--text-title-1); } .hp-legal__head { padding-bottom: var(--space-48); margin-bottom: var(--space-48); } }
.hp-legal__updated { font: var(--text-body-2); color: var(--text-secondary); }
.hp-legal .hp-grid { row-gap: var(--space-24); }

/* Contents: collapsible on phones, open and sticky from 960px */
.hp-legal__toc details { border-bottom: 1px solid var(--border-tertiary); padding-block: 0 var(--space-12); }
.hp-legal__toc summary { font: var(--text-body-2-strong); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.hp-legal__toc summary::-webkit-details-marker { display: none; }
.hp-legal__toc summary::after { content: "+"; font: var(--text-body-1); color: var(--text-secondary); }
.hp-legal__toc details[open] summary::after { content: "\2212"; }
.hp-legal__toc ol { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-12); }
.hp-legal__toc a { display: block; font: var(--text-body-2); color: var(--text-secondary); text-decoration: none; padding: var(--space-4) 0 var(--space-4) var(--space-12); box-shadow: inset 1px 0 0 var(--border-tertiary); transition: color var(--duration-150) var(--ease-functional), box-shadow var(--duration-150) var(--ease-functional); }
.hp-legal__toc a:hover { color: var(--text-primary); }
.hp-legal__toc a[aria-current="true"] { color: var(--text-primary); box-shadow: inset var(--stroke-l) 0 0 var(--border-active); }
.hp-legal__toc a:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
@media (min-width: 960px) {
  .hp-legal__toc { grid-column: 1 / span 3 !important; position: sticky; top: calc(var(--nav-height) + var(--space-24)); align-self: start; max-height: calc(100vh - var(--nav-height) - var(--space-48)); overflow-y: auto; }
  .hp-legal__toc details { border: 0; padding-block: 0; }
  .hp-legal__toc summary { pointer-events: none; font: var(--text-eyebrow); color: var(--text-secondary); }
  .hp-legal__toc summary::after, .hp-legal__toc details[open] summary::after { content: none; }
  .hp-legal__doc { grid-column: 4 / span 8 !important; }
}

/* The document */
.hp-legal__doc { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-16); }
.hp-legal__doc p, .hp-legal__doc li { font: var(--text-body-1); }
.hp-legal__doc .hp-legal__lede { font: var(--text-dek); }
.hp-legal__doc strong { font-weight: 500; }
.hp-legal__doc a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.hp-legal__doc a:hover { color: var(--text-hover); }
.hp-legal__doc h2 { font: var(--text-title-3); margin-top: var(--space-36); padding-top: var(--space-24); border-top: 1px solid var(--border-tertiary); scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.hp-legal__doc h3 { font: var(--text-title-4); margin-top: var(--space-16); scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.hp-legal__doc h4 { font: var(--text-body-1-strong); margin-top: var(--space-8); }
.hp-legal__doc ul, .hp-legal__doc ol { display: flex; flex-direction: column; gap: var(--space-8); padding-left: var(--space-24); list-style: disc; }
.hp-legal__doc ol.hp-legal__alpha { list-style: none; padding-left: 0; }
.hp-legal__doc li ul { margin-top: var(--space-8); list-style: circle; }
.hp-legal__doc li::marker { color: var(--text-secondary); }
/* Callouts: key points, arbitration notice */
.hp-legal__note { background: var(--bg-secondary); box-shadow: inset var(--stroke-l) 0 0 var(--border-active); padding: var(--space-20) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.hp-legal__note h2, .hp-legal__note h3 { margin: 0; padding: 0; border: 0; font: var(--text-body-1-strong); }
/* Data table: hairline rows, scrolls sideways on phones */
.hp-legal__table { overflow-x: auto; margin-block: var(--space-8); border-top: 1px solid var(--border-active); }
.hp-legal__table table { border-collapse: collapse; width: 100%; min-width: 760px; }
.hp-legal__table th, .hp-legal__table td { font: var(--text-body-2); text-align: left; vertical-align: top; padding: var(--space-12) var(--space-16) var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); }
.hp-legal__table th { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-legal__table td:first-child { font: var(--text-body-2-strong); width: 16%; }
.hp-legal__address { font: var(--text-body-1); font-style: normal; }

/* ------------------------------------------------------------------
   Book a demo form (modal). Built by site.js from SITE.demoForm; opened by [data-demo-open].
   Panel radius-12 on the scrim, TextInput fields, one Large primary button.
------------------------------------------------------------------ */
.hp-demo { box-sizing: border-box; width: min(480px, calc(100vw - 2 * var(--space-16))); max-height: calc(100dvh - 2 * var(--space-16)); overflow: auto; margin: auto; padding: var(--space-40) var(--space-32) var(--space-32); border: 0; border-radius: var(--radius-12); background: var(--bg-primary); color: var(--text-primary); z-index: var(--z-90); }
[data-theme="dark"] .hp-demo { background: var(--bg-secondary); }
.hp-demo::backdrop { background: rgba(17, 17, 17, 0.36); background: var(--scrim); }
.hp-demo[open] { animation: hp-demo-in var(--duration-250) var(--ease-functional); }
@keyframes hp-demo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.has-modal { overflow: hidden; }
.hp-demo__close { position: absolute; top: var(--space-16); right: var(--space-16); color: var(--text-primary); }
.hp-demo__title { margin: 0; font: var(--text-title-2); padding-right: var(--space-40); }
.hp-demo__title:focus { outline: none; }
.hp-demo__dek { margin: var(--space-8) 0 0; font: var(--text-body-1); color: var(--text-secondary); }
.hp-demo__form { display: flex; flex-direction: column; gap: var(--space-20); margin-top: var(--space-32); }
.hp-demo .at-field { width: 100%; }
.hp-demo .at-field input::placeholder { color: var(--text-secondary); }
.hp-demo .at-field__msg[hidden] { display: none; }
.hp-demo__select { position: relative; display: block; }
.hp-demo__select select { box-sizing: border-box; width: 100%; height: var(--input-height); padding: 0 var(--space-48) 0 var(--space-16); border: 1px solid var(--border-primary); border-radius: var(--radius-8); background: var(--bg-primary); font-family: var(--font-sans); font-size: 16px; color: var(--text-primary); appearance: none; -webkit-appearance: none; cursor: pointer; transition: box-shadow var(--duration-150) var(--ease-functional), border-color var(--duration-150) var(--ease-functional); }
.hp-demo__select select:invalid { color: var(--text-secondary); }
.hp-demo__select select option { color: var(--text-primary); }
.hp-demo__select select:focus { outline: none; border-color: var(--border-active); box-shadow: var(--shadow-focus); }
.hp-demo .at-field--error select { border-color: var(--border-critical); }
.hp-demo__select .at-icon { position: absolute; right: var(--space-16); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); }
.hp-demo__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hp-demo__failed { margin: 0; font: var(--text-body-2); color: var(--text-critical); }
.hp-demo__submit { width: 100%; margin-top: var(--space-4); }
.hp-demo__submit:disabled { background: var(--bg-disabled); color: var(--text-disabled); cursor: progress; }
.hp-demo__done { padding-block: var(--space-24) var(--space-16); }
.hp-demo__tick { display: inline-grid; place-items: center; width: var(--control-m); height: var(--control-m); margin-bottom: var(--space-24); border-radius: var(--radius-rounded); background: var(--action-primary); color: var(--on-action-primary); }
@media (max-width: 599px) { .hp-demo { padding: var(--space-32) var(--space-20) var(--space-24); } }
@media (prefers-reduced-motion: reduce) { .hp-demo[open] { animation: none; } }

/* ==================================================================
   Blocks introduced by The Selling Economy (selling-economy.html)
   An essay page: numbered chapters, a chapter rail, two-sided ledgers, a number chain, a bar chart.
   ================================================================== */

/* ---------- Chapter: one numbered part of a long-form page ---------- */
.hp-ch { padding-block: var(--space-120); scroll-margin-top: var(--nav-height); }
.hp-ch:not(.hp-band) + .hp-ch:not(.hp-band) { padding-top: var(--space-24); }
.hp-band.hp-ch + .hp-band.hp-ch { box-shadow: inset 0 1px 0 var(--border-tertiary); }
.hp-ch__head { row-gap: var(--space-16); }
.hp-ch__dek { font: var(--text-dek); color: var(--text-secondary); max-width: 62ch; }
.hp-ch__note { font: var(--text-body-3); color: var(--text-secondary); margin-top: var(--space-24); }
.hp-ch__statement { font: var(--text-statement); letter-spacing: -0.02em; text-wrap: balance; }
.hp-ch__pull { font: var(--text-title-2); text-wrap: balance; max-width: 26ch; margin-top: var(--space-72); }
@media (max-width: 959px) { .hp-ch { padding-block: var(--space-84); } .hp-ch__statement { font-size: 28px; } }
@media (min-width: 960px) {
  .hp-ch__head > * { grid-column: 1 / span 9 !important; }
  .hp-ch__statement { grid-column: 4 / span 9 !important; }
}

/* ---------- Contents inside the filled split hero (in place of the photo) ---------- */
.hp-shero--flush { margin-bottom: 0; }
.hp-shero__sub { font: var(--text-dek); color: var(--text-on-image); max-width: 46ch; }
.hp-toc { display: flex; flex-direction: column; gap: var(--space-12); align-self: end; color: var(--text-on-image); }
.hp-toc > p { font: var(--text-body-2-strong); opacity: 0.85; }
.hp-toc ol { border-top: 1px solid color-mix(in srgb, var(--text-on-image) 45%, transparent); }
.hp-toc a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-12) 0; border-bottom: 1px solid color-mix(in srgb, var(--text-on-image) 30%, transparent); text-decoration: none; color: var(--text-on-image); font: var(--text-title-4); }
.hp-toc a span { font: var(--text-body-2-strong); opacity: 0.75; padding-top: 2px; font-variant-numeric: tabular-nums; }
.hp-toc a:hover b, .hp-toc a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
.hp-toc b { font-weight: 500; }
@media (min-width: 960px) { .hp-toc { grid-column: 9 / span 4 !important; } }

/* ---------- Chapter rail: fixed chapter list beside the chapters, 1200px+ only ---------- */
.hp-rail { display: none; }
.hp-rail a { display: flex; gap: var(--space-12); padding: var(--space-8) 0 var(--space-8) var(--space-16); border-left: var(--stroke-l) solid var(--border-tertiary); text-decoration: none; color: var(--text-secondary); font: var(--text-body-2); transition: color var(--duration-150) var(--ease-functional), border-color var(--duration-150) var(--ease-functional); }
.hp-rail a span { font-variant-numeric: tabular-nums; }
.hp-rail a:hover { color: var(--text-primary); }
.hp-rail a[aria-current="true"] { border-left-color: var(--border-active); color: var(--text-primary); font: var(--text-body-2-strong); }
@media (min-width: 1200px) {
  :root { --hp-rail-w: calc((min(100vw, var(--container-max)) - 2 * var(--gutter-exterior-l) - 11 * var(--gutter-grid-l)) / 4 + 3 * var(--gutter-grid-l)); }
  .hp-has-rail .hp-ch > .at-container { padding-left: calc(var(--gutter-exterior-l) + var(--hp-rail-w)); }
  .hp-rail { display: block; position: fixed; z-index: var(--z-10); top: calc(var(--nav-height) + var(--space-48)); left: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--gutter-exterior-l)); width: calc(var(--hp-rail-w) - 2 * var(--gutter-grid-l)); color: var(--text-primary); opacity: 0; visibility: hidden; transition: opacity var(--duration-250) var(--ease-functional), visibility 0s linear var(--duration-250); }
  .hp-rail.is-on { opacity: 1; visibility: visible; transition: opacity var(--duration-250) var(--ease-functional); }
}
@media (prefers-reduced-motion: reduce) { .hp-rail, .hp-rail.is-on { transition: none; } }

/* ---------- Ledger: a two-sided comparison (new way vs old way), with optional row labels ---------- */
.hp-ledger { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: var(--space-72); text-align: left; }
.hp-ledger th, .hp-ledger td { vertical-align: top; text-align: left; }
.hp-ledger thead th { font: var(--text-title-4); color: var(--text-secondary); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border-secondary); vertical-align: bottom; }
.hp-ledger thead th.hp-ledger__new { color: var(--text-primary); background: var(--bg-secondary); box-shadow: inset 0 var(--stroke-l) 0 var(--border-active); }
.hp-ledger thead th.hp-ledger__label { width: 18%; padding-left: 0; }
.hp-ledger tbody th { font: var(--text-body-2-strong); color: var(--text-secondary); padding: calc(var(--space-24) + 2px) var(--space-24) var(--space-24) 0; border-bottom: 1px solid var(--border-tertiary); }
@media (min-width: 960px) { .hp-ledger tbody th { padding-top: calc(var(--space-24) + 5px); } }
.hp-ledger td { font: var(--text-title-4); color: var(--text-secondary); padding: var(--space-24); border-bottom: 1px solid var(--border-tertiary); }
.hp-ledger td.hp-ledger__new { color: var(--text-primary); background: var(--bg-secondary); }
@media (min-width: 960px) { .hp-ledger td { font: var(--text-title-3); } }
@media (max-width: 759px) {
  .hp-ledger, .hp-ledger tbody, .hp-ledger tr, .hp-ledger th, .hp-ledger td { display: block; width: auto; }
  .hp-ledger thead { display: none; }
  .hp-ledger tr { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-16); border-top: 1px solid var(--border-secondary); }
  .hp-ledger tr:last-child { border-bottom: 1px solid var(--border-secondary); }
  .hp-ledger tbody th { padding: 0; border: 0; }
  .hp-ledger td { border: 0; padding: var(--space-12) var(--space-16); font: var(--text-title-4); }
  .hp-ledger td::before { content: attr(data-col); display: block; font: var(--text-body-3-strong); color: var(--text-secondary); margin-bottom: var(--space-4); }
}

/* ---------- Number chain: three figures that lead to each other ---------- */
.hp-chain { display: grid; grid-template-columns: 1fr; gap: var(--space-24); margin-top: var(--space-72); border-top: 1px solid var(--border-active); padding-top: var(--space-24); }
.hp-chain__item { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-chain__n { font: var(--text-oversize-2); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-chain__item p:last-child { font: var(--text-dek); color: var(--text-secondary); max-width: 24ch; }
.hp-chain__arrow { width: 32px; height: 32px; fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
@media (max-width: 959px) { .hp-chain__n { font-size: 64px; } }
@media (min-width: 960px) { .hp-chain { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-36); } .hp-chain__arrow { transform: none; width: 48px; height: 48px; margin-top: var(--space-32); } }

/* ---------- Bar chart: one measure across a few named companies, with an average line ---------- */
.hp-bars { margin-top: var(--space-72); display: flex; flex-direction: column; gap: var(--space-24); max-width: 960px; }
.hp-bars figcaption { font: var(--text-body-1-strong); }
.hp-bars__plot { display: grid; grid-template-columns: minmax(96px, 160px) minmax(0, 1fr); column-gap: var(--space-16); row-gap: var(--space-12); align-items: center; }
.hp-bars__name { font: var(--text-body-1); grid-column: 1; }
.hp-bars__track { grid-column: 2; position: relative; height: 28px; }
.hp-bars__track i { position: absolute; left: 0; top: 8px; height: 12px; width: var(--w); background: var(--text-primary); }
.hp-bars__track b { position: absolute; z-index: 2; top: 50%; left: calc(var(--w) + var(--space-4)); transform: translateY(-50%); padding-inline: var(--space-4); background: var(--bg-primary); font: var(--text-body-1-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .hp-bars__plot { grid-template-columns: 96px minmax(0, 1fr); } }
.hp-bars__avg { grid-column: 2; position: relative; z-index: 1; pointer-events: none; align-self: stretch; margin-block: calc(var(--space-8) * -1); }
.hp-bars__avg::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--avg); border-left: 1px dashed var(--text-secondary); }
.hp-bars__legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-24); font: var(--text-body-2); color: var(--text-secondary); }
.hp-bars__legend i { display: inline-block; width: 20px; border-top: 1px dashed var(--text-secondary); vertical-align: middle; margin-right: var(--space-8); }

/* ---------- Sourced cases: two outside examples, each led by its number ---------- */
.hp-cases { margin-top: var(--space-72); }
.hp-case { border-top: 1px solid var(--border-secondary); padding-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.hp-case__n { font: var(--text-oversize-3); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hp-case p { color: var(--text-secondary); max-width: 60ch; }
.hp-case .hp-ch__note { margin-top: var(--space-4); }
@media (max-width: 959px) { .hp-case__n { font-size: 44px; line-height: 1.1; } }
@media (min-width: 960px) { .hp-case { grid-column: span 6 !important; } }

/* ---------- Ruled thirds: three short lists side by side ---------- */
.hp-thirds { margin-top: var(--space-72); }
.hp-thirds > div { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-thirds h3 { font: var(--text-title-4); }
.hp-thirds ul { border-top: 1px solid var(--border-active); }
.hp-thirds li { padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); color: var(--text-secondary); }
.hp-thirds li b { color: var(--text-primary); font-weight: 500; }
@media (min-width: 960px) { .hp-thirds > div { grid-column: span 4 !important; } }
.hp-ch__foot { margin-top: var(--space-36); display: flex; flex-direction: column; gap: var(--space-8); }
.hp-ch__foot p:first-child { font: var(--text-title-4); }

/* ---------- Final call to action on a Day Arc band, no photo ---------- */
.hp-final-band { background: var(--art-night); color: var(--text-on-image); padding-block: var(--space-120); }
.hp-final-band h2 { font: var(--text-oversize-2); letter-spacing: -0.03em; text-wrap: balance; }
.hp-final-band .hp-grid { row-gap: var(--space-36); }
.hp-final-band__body { display: flex; flex-direction: column; gap: var(--space-24); }
.hp-final-band__body p { font: var(--text-dek); opacity: 0.85; }
@media (max-width: 959px) { .hp-final-band h2 { font: var(--text-title-1); } }
@media (min-width: 960px) { .hp-final-band h2 { grid-column: 1 / span 9 !important; } .hp-final-band__body { grid-column: 4 / span 6 !important; } }

/* ==================================================================
   Blocks introduced by Blog and Guides (blog-and-guides.html)
   An index page: topics in the filled hero, a topic filter, a lead story and a post grid.
   ================================================================== */

/* ---------- Topic contents with counts: hp-toc with the count on the right of each row ---------- */
.hp-toc--counts a { grid-template-columns: minmax(0, 1fr) auto; }
.hp-toc--counts a span { order: 2; }

/* ---------- Topic filter: a full-width TileSelector, one radio per topic ---------- */
.hp-topics-sec { scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.hp-topics { display: flex; flex-wrap: wrap; max-width: none; }
.hp-topics .at-tile span { padding: 0 var(--space-24); white-space: nowrap; }
@media (max-width: 599px) { .hp-topics .at-tile { flex: 1 1 40%; } .hp-topics .at-tile span { padding: 0 var(--space-12); font: var(--text-body-2-strong); } }

/* ---------- Lead story: ArticleCard, image in 7 parts and copy in 5 at 960px+, stacked below ---------- */
.hp-lead { padding-top: var(--space-48); }
.hp-lead[hidden] { display: none; }
.hp-lead__story { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.hp-lead__media { background: var(--bg-image); }
.hp-lead__label { font: var(--text-body-1-strong); }
.hp-lead__story .at-article__copy .hp-eyebrow { margin-top: calc(var(--space-8) * -1); }
.hp-lead__story h2 { font: var(--text-title-1); text-wrap: balance; transition: color var(--duration-150) var(--ease-functional); }
.hp-lead__story:hover h2 { color: var(--text-hover); }
.hp-lead__story .at-article__dek { font: var(--text-dek); }
@media (max-width: 959px) { .hp-lead__story h2 { font: var(--text-title-2); } }
@media (min-width: 960px) { .hp-lead__story { grid-template-columns: 7fr 5fr; gap: var(--gutter-wide); align-items: center; } }

/* ---------- Post grid: stacked ArticleCards, 1 / 2 / 3 across. Format shows in words only. ---------- */
.hp-feed { padding-block: var(--space-84) var(--space-120); }
.hp-feed__label { font: var(--text-body-1-strong); margin-bottom: var(--space-24); }
.hp-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-48) var(--gutter-grid); align-items: start; }
@media (min-width: 600px) { .hp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-60) var(--gutter-grid-l); } }
.hp-post { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; color: var(--text-primary); text-decoration: none; }
.hp-post[hidden] { display: none; }
.hp-post__media { aspect-ratio: 3 / 2; background: var(--bg-image); margin-bottom: var(--space-8); overflow: hidden; }
.hp-post__title { font: var(--text-card-headline); text-wrap: balance; transition: color var(--duration-150) var(--ease-functional); }
.hp-post:hover .hp-post__title { color: var(--text-hover); }
.hp-post__dek { color: var(--text-secondary); }
.hp-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12); margin-top: var(--space-4); font: var(--text-body-2-strong); }
.hp-post__meta time, .hp-post__run { font: var(--text-body-2); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hp-post__meta .at-icon { margin-left: calc(var(--space-8) * -1); }
@media (max-width: 959px) { .hp-post__title { font: var(--text-title-4); } }

/* ==================================================================
   Blocks introduced by the Wall of Love page (wall-of-love.html)
   ================================================================== */

/* ---------- Love card glow: Rylan's cursor glow, on every testimonial card (exact values, locked).
   White at 4.5%, so it shows on dark cards. site.js sets --x / --y. If a card already uses ::before, move this to ::after. ---------- */
.love-card { position: relative; overflow: hidden; }
.love-card::before { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgb(255 255 255 / .045), transparent 65%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.love-card:hover::before { opacity: 1; }

/* ---------- Testimonial wall: a Night band in both modes, cards in columns that flow by height ---------- */
.hp-wall { background: var(--art-night); color: var(--text-primary); padding-block: var(--space-90) var(--space-120); }
.hp-wall__cols { columns: 1; column-gap: var(--gutter-grid); }
.hp-wall__cols > .hp-love { break-inside: avoid; margin-bottom: var(--gutter-grid); }
@media (min-width: 600px) { .hp-wall__cols { columns: 2; } }
@media (min-width: 960px) {
  .hp-wall { padding-block: var(--space-120); }
  .hp-wall__cols { columns: 3; column-gap: var(--gutter-grid-l); }
  .hp-wall__cols > .hp-love { margin-bottom: var(--gutter-grid-l); }
}

/* ---------- Testimonial card: person, quote, links. The bio swaps in for the quote on hover, or while a link has focus.
   Touch screens and coarse pointers show the bio under the quote instead. ---------- */
.hp-love { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); background: color-mix(in srgb, var(--white) 7%, var(--art-night)); color: var(--text-primary); }
.hp-love__person { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.hp-love__person > span { display: flex; flex-direction: column; min-width: 0; }
.hp-love__person b { font: var(--text-body-1-strong); }
.hp-love__person small { font: var(--text-body-2); color: var(--text-secondary); }
.hp-love__av { width: 48px; height: 48px; flex: none; border-radius: var(--radius-rounded); object-fit: cover; background: var(--bg-image); }
.hp-love__av--mono { display: inline-grid; place-items: center; font: var(--text-body-2-strong); letter-spacing: 0.04em; color: var(--text-primary); background: color-mix(in srgb, var(--white) 12%, transparent); }
.hp-love__body { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-love__quote { font: var(--text-conversation-4); text-wrap: pretty; }
.hp-love__bio { font: var(--text-body-2); color: var(--text-secondary); }
.hp-love__links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-20); padding-top: var(--space-16); border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
.hp-love__links a { display: inline-flex; align-items: center; gap: var(--space-4); font: var(--text-body-2); color: var(--text-secondary); text-decoration: none; transition: color var(--duration-150) var(--ease-functional); }
.hp-love__links a:hover, .hp-love__links a:focus-visible { color: var(--text-primary); }
@media (hover: hover) and (pointer: fine) {
  /* Quote and bio share one cell, so the card is as tall as the longer of the two and nothing jumps */
  .hp-love__body { display: grid; }
  .hp-love__body > * { grid-area: 1 / 1; transition: opacity var(--duration-150) var(--ease-functional); }
  .hp-love__bio { font: var(--text-body-1); opacity: 0; }
  .hp-love:hover .hp-love__quote, .hp-love:focus-within .hp-love__quote { opacity: 0; }
  .hp-love:hover .hp-love__bio, .hp-love:focus-within .hp-love__bio { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .love-card::before, .hp-love__body > * { transition: none; } }

/* ---------- Quote in a filled split hero: one testimonial card in place of the photo (columns 9–12) ---------- */
.hp-love--hero { align-self: end; background: color-mix(in srgb, var(--art-night) 55%, transparent); }
.hp-love--hero .hp-love__quote { font: var(--text-conversation-3); text-wrap: balance; }
@media (max-width: 959px) { .hp-love--hero .hp-love__quote { font: var(--text-conversation-4); } }
@media (min-width: 960px) { .hp-love--hero { grid-column: 9 / span 4 !important; } }

/* ---------- Final CTA band on the page's ambient (data-ambient): the same palette-token gradient as its hero, so the page is bookended ---------- */
.hp-final-band[data-ambient] {
  background-color: var(--amb-1);
  background-image:
    radial-gradient(38% 55% at 94% 14%, color-mix(in srgb, var(--amb-ga) 85%, transparent), transparent 72%),
    radial-gradient(42% 60% at 76% 100%, color-mix(in srgb, var(--amb-gb) 80%, transparent), transparent 72%),
    radial-gradient(30% 45% at 60% 40%, color-mix(in srgb, var(--amb-gc) 30%, transparent), transparent 70%),
    radial-gradient(55% 70% at 4% 6%, color-mix(in srgb, var(--art-night) 85%, transparent), transparent 70%),
    linear-gradient(115deg, var(--amb-0) 0%, var(--amb-1) 42%, var(--amb-1) 64%, var(--amb-2) 100%);
}

/* ==================================================================
   Blocks introduced by the Podcast page (podcast.html)
   A show page: the host in the filled hero, Listen on rows, episodes as post cards on a Night band.
   ================================================================== */

/* ---------- Listen on: ruled rows in the filled hero's copy column, one per platform. Not buttons: Get started stays the only primary. ---------- */
.hp-listen { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: 420px; margin-top: var(--space-12); color: var(--text-on-image); }
.hp-listen > p { font: var(--text-body-2-strong); opacity: 0.85; }
.hp-listen ul { border-top: 1px solid color-mix(in srgb, var(--text-on-image) 45%, transparent); }
.hp-listen a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) 0; border-bottom: 1px solid color-mix(in srgb, var(--text-on-image) 30%, transparent); color: var(--text-on-image); text-decoration: none; font: var(--text-title-4); }
.hp-listen b { font-weight: 500; }
.hp-listen a:hover b, .hp-listen a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Host in a filled split hero: a 4:5 photo in colour (Rylan: never black and white) with the host line, columns 10–12 ---------- */
.hp-host { align-self: end; display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: 280px; color: var(--text-on-image); }
.hp-host__img { aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--text-on-image) 12%, transparent); }
.hp-host__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hp-host figcaption { display: flex; flex-direction: column; gap: 2px; }
.hp-host b { font: var(--text-body-1-strong); }
.hp-host small { font: var(--text-body-2); opacity: 0.85; }
@media (min-width: 960px) { .hp-host { grid-column: 10 / span 3 !important; max-width: none; } }

/* ---------- Episode band: Night in both modes. A small label and a one-line lede, then the post grid. ---------- */
.hp-episodes { background: var(--art-night); color: var(--text-primary); padding-block: var(--space-90) var(--space-120); }
.hp-episodes__head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-36); }
.hp-episodes__head .hp-feed__label { margin-bottom: 0; }
.hp-episodes__head p + p { color: var(--text-secondary); }
@media (min-width: 960px) { .hp-episodes { padding-block: var(--space-120); } }

/* ---------- Episode card: the post card with 16:9 show art and a guest row ---------- */
.hp-post__media--wide { aspect-ratio: 16 / 9; }
.hp-guest { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.hp-guest > span { display: flex; flex-direction: column; min-width: 0; }
.hp-guest b { font: var(--text-body-2-strong); }
.hp-guest small { font: var(--text-body-3); color: var(--text-secondary); }
.hp-guest__av { width: 40px; height: 40px; flex: none; border-radius: var(--radius-rounded); object-fit: cover; background: var(--bg-image); filter: grayscale(1); transition: filter var(--duration-400) var(--ease-functional); }
.hp-post:hover .hp-guest__av, .hp-post:focus-visible .hp-guest__av { filter: none; }
.hp-guest__av--mono { display: grid; place-content: center; font: var(--text-body-3-strong); letter-spacing: 0.04em; color: var(--text-primary); background: color-mix(in srgb, var(--white) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .hp-guest__av { transition: none; } }


/* ################################################################
   BATCH 2 · about.html · prefix hp-about-
   ################################################################ */
/* ===========================================================
   site-add/about.css · Blocks introduced by About (about.html)
   Batch 2, Rylan, Oct 27. Every class starts with hp-about-.
   Rylan's picks: L1 H1 T3 K2 C2 A1 R2 I2 F1. Values read tokens only.
   Reused as is (no new CSS): hp-shero--fill (Dusk), table.hp-ledger,
   hp-love.love-card, hp-final-band (Dusk).
   =========================================================== */

/* ---------- Shared ---------- */
.hp-about-sec { padding-block: var(--space-90); }
.hp-about-night { background: var(--art-night); color: var(--text-primary); padding-block: var(--space-90) var(--space-120); }
.hp-about-label { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-about-link { display: inline-flex; align-items: center; gap: var(--space-4); font: var(--text-body-2); color: var(--text-secondary); text-decoration: none; transition: color var(--duration-150) var(--ease-functional); }
.hp-about-link:hover, .hp-about-link:focus-visible { color: var(--text-primary); }

/* ---------- Co-founders photo in a filled split hero (H1) ----------
   figure.hp-about-duo replaces .hp-shero__media when the photo is landscape. */
.hp-about-duo { display: flex; flex-direction: column; gap: var(--space-12); color: var(--text-on-image); align-self: end; }
.hp-about-duo__img { aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in srgb, var(--text-on-image) 12%, transparent); }
.hp-about-duo__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hp-about-duo figcaption { font: var(--text-body-2); opacity: 0.85; }
@media (min-width: 960px) { .hp-about-duo { grid-column: 8 / span 5 !important; } }

/* ---------- Argument as a Ledger (T3) ----------
   Label, intro, one turn line, then table.hp-ledger (reused) and a note. */
.hp-shero--fill + .hp-about-ledger { padding-top: 0; }
.hp-about-ledger .hp-grid { row-gap: var(--space-24); }
.hp-about-ledger__intro { display: flex; flex-direction: column; gap: var(--space-16); font: var(--text-editorial-body); color: var(--text-secondary); max-width: 62ch; }
.hp-about-ledger__intro p:first-child { font: var(--text-title-2); color: var(--text-primary); }
.hp-about-ledger__turn { font: var(--text-section-heading); letter-spacing: -0.02em; margin-top: var(--space-48); }
.hp-about-ledger .hp-ledger { margin-top: var(--space-24); }
.hp-about-ledger__note { font: var(--text-body-2); color: var(--text-secondary); max-width: 80ch; }
@media (min-width: 960px) {
  .hp-about-ledger .hp-about-label { grid-column: 1 / span 3 !important; }
  .hp-about-ledger__intro { grid-column: 4 / span 7 !important; }
  .hp-about-ledger__turn, .hp-about-ledger__table, .hp-about-ledger__note { grid-column: 1 / span 12 !important; }
}

/* ---------- Team head (K2) + founder rows (C2) ---------- */
.hp-about-team .hp-grid { row-gap: var(--space-16); }
.hp-about-team__lede { font: var(--text-dek); color: var(--text-secondary); max-width: 58ch; }
.hp-about-rows { margin-top: var(--space-72); }
.hp-about-rows > article { display: grid; grid-template-columns: 1fr; gap: var(--space-24); padding-block: var(--space-48); border-top: 1px solid var(--border-tertiary); }
.hp-about-rows > article:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-about-rows__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-image); max-width: 420px; }
.hp-about-rows__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hp-about-rows__copy { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-about-rows__copy h3 { font: var(--text-title-1); }
.hp-about-rows__copy .hp-eyebrow { font: var(--text-body-1-strong); color: var(--text-primary); }
.hp-about-rows__meta { font: var(--text-body-1); color: var(--text-secondary); }
.hp-about-rows__bio { font: var(--text-editorial-body); max-width: 60ch; }
@media (min-width: 960px) {
  .hp-about-team .hp-section-heading { grid-column: 1 / span 9 !important; }
  .hp-about-team__lede { grid-column: 7 / span 6 !important; }
  .hp-about-rows > article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .hp-about-rows__img { grid-column: 1 / span 4; max-width: none; }
  .hp-about-rows__copy { grid-column: 6 / span 7; align-self: end; }
}

/* ---------- Two testimonial cards on Night (A1) ----------
   Reuses figure.hp-love.love-card (glow from site.js). The cards have no separate bio,
   so the quote never swaps out on hover. */
.hp-about-cards { display: grid; grid-template-columns: 1fr; gap: var(--gutter-grid); margin-top: var(--space-36); }
.hp-about-cards .hp-love__quote { opacity: 1 !important; }
@media (min-width: 960px) { .hp-about-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-grid-l); } }

/* ---------- Portrait grid, five across (R2) ---------- */
.hp-about-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-36) var(--gutter-grid); margin-top: var(--space-36); }
.hp-about-faces li { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-about-faces__img { aspect-ratio: 1; overflow: hidden; background: var(--bg-image); margin-bottom: var(--space-4); }
.hp-about-faces__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-about-faces__name { display: inline-flex; align-items: center; gap: var(--space-4); font: var(--text-body-1-strong); color: var(--text-primary); text-decoration: none; }
.hp-about-faces__name:hover, .hp-about-faces__name:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.hp-about-faces small { font: var(--text-body-2); color: var(--text-secondary); }
.hp-about-faces p { font: var(--text-body-2); }
@media (min-width: 600px) { .hp-about-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hp-about-faces { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-36) var(--gutter-grid-l); } }

/* ---------- Investors in two tiers (I2) ----------
   Lead investors as single-ink logos (CSS mask in currentColor, so they follow the mode);
   angels as a ruled list of names until logo files exist. */
.hp-about-inv__head { margin-top: var(--space-8); }
.hp-about-logo { display: block; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.hp-about-logo--sf { --logo: url("../media/about-logo-signalfire.png"); aspect-ratio: 731 / 144; width: 220px; }
.hp-about-logo--cl { --logo: url("../media/about-logo-crosslink.png"); aspect-ratio: 416 / 46; width: 260px; }
.hp-about-tiers { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-grid-l); margin-top: var(--space-36); }
.hp-about-tiers h3 { font: var(--text-body-2-strong); color: var(--text-secondary); padding-bottom: var(--space-12); border-bottom: var(--stroke-l) solid var(--border-active); margin-bottom: var(--space-16); }
.hp-about-tiers__leads { display: flex; flex-direction: column; gap: var(--space-36); padding-top: var(--space-12); color: var(--text-primary); }
.hp-about-tiers__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
.hp-about-tiers__list li { font: var(--text-title-4); padding-block: var(--space-12); border-bottom: 1px solid var(--border-tertiary); }
.hp-about-tiers__line { font: var(--text-body-2); color: var(--text-secondary); margin-bottom: var(--space-8); }
.hp-about-tiers__more { font: var(--text-body-2); color: var(--text-secondary); margin-top: var(--space-12); }
@media (min-width: 600px) { .hp-about-tiers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .hp-about-tiers { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hp-about-tiers > div:first-child { grid-column: 1 / span 4; }
  .hp-about-tiers > div:last-child { grid-column: 6 / span 7; }
}
/* The final Dusk band follows the investors straight on. */
.hp-about-inv { padding-bottom: var(--space-120); }

/* ---------- Phones and tablets ---------- */
@media (max-width: 959px) {
  .hp-about-ledger__turn { font: var(--text-title-1); letter-spacing: 0; }
}
.hp-about-rows > .hp-about-label + article { margin-top: var(--space-16); }
.hp-about-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ################################################################
   BATCH 2 · comparison.html · prefix hp-comparison-
   ################################################################ */
/* ==================================================================
   Blocks introduced by Comparison (comparison.html) · prefix hp-comparison-
   A comparison page: the Ledger is the spine (categories, memory, build vs buy),
   with one product moment (one prompt, two replies) and a Night band for pacing.
   ================================================================== */

/* ---------- Section shell for light sections on this page ---------- */
.hp-comparison-sec { padding-block: var(--space-120); scroll-margin-top: var(--nav-height); }
.hp-shero--fill + .hp-comparison-sec { padding-top: 0; }
.hp-comparison-sec + .hp-comparison-sec { padding-top: var(--space-24); }
@media (max-width: 959px) { .hp-comparison-sec { padding-block: var(--space-84); } .hp-comparison-sec + .hp-comparison-sec { padding-top: var(--space-24); } }
.hp-comparison-sec .hp-ch__note { margin-top: var(--space-16); }

/* ---------- Ledger variants ---------- */
.hp-comparison-ledger tr { scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.hp-comparison-ledger thead th.hp-ledger__label { width: 28%; }
.hp-comparison-ledger tbody th { color: var(--text-primary); font: var(--text-title-4); }
.hp-comparison-ledger tbody th span { display: block; font: var(--text-body-2); color: var(--text-secondary); margin-bottom: var(--space-4); }
.hp-comparison-ledger tbody th b { display: block; font-weight: 500; text-wrap: balance; }
@media (min-width: 960px) { .hp-comparison-ledger td { font: var(--text-title-4); } }
/* Cells with a short head and a line under it (memory Ledger) */
.hp-comparison-ledger--pairs { margin-top: var(--space-84); }
.hp-comparison-ledger--pairs tbody th { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-comparison-ledger--pairs td { font: var(--text-body-1); }
.hp-comparison-ledger--pairs td b { display: block; font: var(--text-title-4); color: var(--text-primary); margin-bottom: var(--space-4); }
.hp-comparison-ledger--pairs td:not(.hp-ledger__new) b { color: var(--text-secondary); }
@media (min-width: 960px) { .hp-comparison-ledger--pairs td { font: var(--text-body-1); } .hp-comparison-ledger--pairs thead th.hp-ledger__label { width: 18%; } }
@media (max-width: 759px) { .hp-comparison-ledger__empty { display: none !important; } }
/* Long cells (six problems): dek-size paragraphs */
.hp-comparison-ledger--long { margin-top: var(--space-48); }
.hp-comparison-ledger--long td { font: var(--text-body-1); }
@media (min-width: 960px) { .hp-comparison-ledger--long td { font: var(--text-dek); } }
@media (max-width: 759px) { .hp-comparison-ledger--long td { font: var(--text-body-1); } }

/* ---------- One prompt, two replies (the page's product moment) ---------- */
.hp-comparison-prompt { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-72); padding: var(--space-16) var(--space-24); background: var(--bg-secondary); border-radius: var(--radius-24); }
.hp-comparison-prompt .at-icon { flex: none; color: var(--text-secondary); }
.hp-comparison-prompt p { font: var(--text-title-4); min-height: 24px; }
.hp-comparison-prompt i { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--text-primary); opacity: 0; }
.hp-comparison-ask.is-typing .hp-comparison-prompt i { opacity: 1; animation: hp-comparison-blink 1s steps(1) infinite; }
@keyframes hp-comparison-blink { 50% { opacity: 0; } }
.hp-comparison-replies { margin-top: var(--space-24); row-gap: var(--space-12); column-gap: var(--gutter-grid-l); align-items: stretch; }
.hp-comparison-mail { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-24); background: var(--bg-secondary); color: var(--text-secondary); transition: opacity var(--duration-400) var(--ease-expressive), transform var(--duration-400) var(--ease-expressive); }
.hp-comparison-mail figcaption { display: flex; justify-content: space-between; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-tertiary); }
.hp-comparison-mail figcaption b { font: var(--text-body-1-strong); color: var(--text-primary); }
.hp-comparison-mail figcaption span { font: var(--text-body-2); }
.hp-comparison-mail__body { display: flex; flex-direction: column; gap: var(--space-12); font: var(--text-dek); }
/* AnyTeam's reply on a Paper panel: black type in both modes (token note: black at any size) */
.hp-comparison-mail--any { background: var(--art-paper); color: var(--black); }
.hp-comparison-mail--any figcaption { border-bottom-color: color-mix(in srgb, var(--black) 15%, transparent); }
.hp-comparison-mail--any figcaption b, .hp-comparison-mail--any figcaption span { color: var(--black); }
.hp-comparison-mail--any u { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hp-comparison-mail__files { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin-top: auto; padding-top: var(--space-12); border-top: 1px solid color-mix(in srgb, var(--black) 15%, transparent); }
.hp-comparison-mail__files li { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--text-body-2-strong); }
.hp-comparison-why { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border-active); }
.hp-comparison-why li { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); font: var(--text-body-1); }
.hp-comparison-why .at-icon { flex: none; }
@media (min-width: 600px) { .hp-comparison-why { grid-template-columns: 1fr 1fr; column-gap: var(--gutter-grid); } }
@media (min-width: 960px) {
  .hp-comparison-mail { grid-column: span 6 !important; padding: var(--space-36); }
  .hp-comparison-why { grid-column: 7 / span 6 !important; margin-top: var(--space-12); }
}
/* Script hides the replies until the prompt is typed; without script or with reduced motion they show at once */
.hp-comparison-ask.is-typing .hp-comparison-mail, .hp-comparison-ask.is-typing .hp-comparison-why { opacity: 0; transform: translateY(var(--space-12)); }
.hp-comparison-ask.is-typing .hp-comparison-why { transform: none; }
.hp-comparison-why { transition: opacity var(--duration-400) var(--ease-expressive) 200ms; }
@media (prefers-reduced-motion: reduce) { .hp-comparison-mail, .hp-comparison-why { transition: none; } .hp-comparison-ask.is-typing .hp-comparison-prompt i { animation: none; } }

/* ---------- Built for teams: Night band, head left, four ruled items right ---------- */
.hp-comparison-teams { background: var(--art-night); color: var(--text-primary); padding-block: var(--space-120); }
.hp-comparison-teams__head { display: flex; flex-direction: column; gap: var(--space-16); }
.hp-comparison-teams__head > p:last-child { font: var(--text-dek); color: var(--text-secondary); }
.hp-comparison-teams__items { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-grid-l); }
.hp-comparison-team { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-16); border-top: 1px solid var(--border-active); }
.hp-comparison-team h3 { font: var(--text-title-3); }
.hp-comparison-team p { color: var(--text-secondary); }
.hp-comparison-team p.hp-comparison-team__kicker { margin-top: auto; padding-top: var(--space-12); color: var(--text-primary); font: var(--text-body-1-strong); }
@media (max-width: 959px) { .hp-comparison-teams { padding-block: var(--space-84); } }
@media (min-width: 600px) { .hp-comparison-teams__items { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .hp-comparison-teams__head { grid-column: 1 / span 4 !important; align-self: start; position: sticky; top: calc(var(--nav-height) + var(--space-36)); }
  .hp-comparison-teams__items { grid-column: 6 / span 7 !important; row-gap: var(--space-72); }
}

/* ---------- The 5 / 95 span: a prompt is a sliver, the product is the rest ---------- */
.hp-comparison-span { margin-top: var(--space-72); display: flex; flex-direction: column; gap: var(--space-16); }
.hp-comparison-span__labels { display: flex; justify-content: space-between; gap: var(--space-24); }
.hp-comparison-span__labels p { display: flex; flex-direction: column; font: var(--text-body-2); color: var(--text-secondary); max-width: 24ch; }
.hp-comparison-span__labels p:last-child { text-align: right; }
.hp-comparison-span__labels b { font: var(--text-title-4); color: var(--text-primary); }
.hp-comparison-span__labels p:first-child b { color: var(--text-secondary); }
.hp-comparison-span__bar { display: grid; grid-template-columns: 5fr 95fr; align-items: start; }
.hp-comparison-span__prompt { display: block; height: 4px; margin-top: 2px; background: var(--border-secondary); }
.hp-comparison-span__product { display: grid; grid-template-columns: repeat(6, 1fr); height: auto; border-top: var(--space-8) solid var(--text-primary); }
.hp-comparison-span__product li { border-left: 1px solid var(--bg-primary); }
.hp-comparison-span__product a { display: block; padding: var(--space-8) var(--space-8) 0; font: var(--text-body-2-strong); color: var(--text-secondary); text-decoration: none; font-variant-numeric: tabular-nums; }
.hp-comparison-span__product a:hover, .hp-comparison-span__product a:focus-visible { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }

.hp-comparison-cta { margin-top: var(--space-48); }

/* ---------- Five lines: head sticky left, lines in section-heading type ---------- */
.hp-comparison-lines__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.hp-comparison-lines__head > p:not(.hp-eyebrow) { font: var(--text-dek); color: var(--text-secondary); }
.hp-comparison-lines__list li { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-16) var(--space-20); border-top: 1px solid var(--border-tertiary); font: var(--text-title-2); text-wrap: balance; }
.hp-comparison-lines__list li:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-comparison-lines__list li span { font: var(--text-body-2); color: var(--text-secondary); }
@media (min-width: 960px) {
  .hp-comparison-lines__head { grid-column: 1 / span 4 !important; position: sticky; top: calc(var(--nav-height) + var(--space-36)); align-self: start; }
  .hp-comparison-lines__list { grid-column: 6 / span 7 !important; }
  .hp-comparison-lines__list li { font: var(--text-section-heading); letter-spacing: -0.02em; padding-block: var(--space-20) var(--space-24); }
}


/* ################################################################
   BATCH 2 · contact.html · prefix hp-contact-
   ################################################################ */
/* ==================================================================
   Blocks introduced by the Contact page (contact.html). Append-only; every class starts hp-contact-.
   Black, white and grey only. Picks: L1 H1 Z1 C2 F1, Copy button as on the old page.
   ================================================================== */

/* Section rhythm: the filled hero already ends with a 120px margin, so the first section adds no top padding. */
.hp-contact-sec { padding-block: var(--space-90); }
.hp-shero--fill + .hp-contact-sec, .hp-contact-sec + .hp-contact-sec { padding-top: 0; }

/* Email link inside the hero subline (white on the fill) */
.hp-contact-mail { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hp-contact-mail:hover { text-decoration-thickness: 2px; }

/* ---------- Team clocks: six across, ruled ---------- */
.hp-contact-clocks__head { margin-bottom: var(--space-48); max-width: 20ch; }
.hp-contact-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter-grid); border-top: 1px solid var(--border-active); }
.hp-contact-zone { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-24); border-bottom: 1px solid var(--border-tertiary); min-width: 0; }
.hp-contact-zone__c { font: var(--text-eyebrow); color: var(--text-secondary); }
.hp-contact-zone__city { font: var(--text-title-4); }
.hp-contact-zone__t { font: var(--text-title-2); margin-top: var(--space-12); }
.hp-contact-zone__t small { font: var(--text-body-2); color: var(--text-secondary); margin-left: var(--space-4); letter-spacing: 0; }
/* Status: filled dot = working hours, ring = after hours. No colour. */
.hp-contact-zone__d { display: flex; align-items: center; gap: var(--space-8); font: var(--text-body-2); color: var(--text-secondary); }
.hp-contact-zone__d i { flex: none; width: 8px; height: 8px; border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1.5px var(--text-secondary); }
.hp-contact-zone__d i.is-on { background: var(--text-primary); box-shadow: none; }
@media (min-width: 600px) { .hp-contact-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); } }
@media (min-width: 1200px) { .hp-contact-zones { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hp-contact-zone { border-bottom: 0; } }

/* ---------- Inboxes: big address rows ---------- */
.hp-contact-big { border-top: 1px solid var(--border-active); }
.hp-contact-big li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-24); border-bottom: 1px solid var(--border-tertiary); }
.hp-contact-big h3 { font: var(--text-title-4); }
.hp-contact-big p { color: var(--text-secondary); }
.hp-contact-big__addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); margin-top: var(--space-8); }
.hp-contact-addr { font: var(--text-title-3); color: var(--text-primary); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.hp-contact-addr:hover { text-decoration-thickness: 2px; }
.hp-contact-copy { flex: none; }
@media (min-width: 960px) {
  .hp-contact-big li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); align-items: center; padding-block: var(--space-32); }
  .hp-contact-big h3 { grid-column: 1 / span 2; }
  .hp-contact-big p { grid-column: 3 / span 4; }
  .hp-contact-big__addr { grid-column: 7 / span 6; justify-content: space-between; margin-top: 0; }
  .hp-contact-addr { font: var(--text-title-2); }
}


/* ################################################################
   BATCH 2 · media.html · prefix hp-media-
   ################################################################ */
/* ==================================================================
   Blocks introduced by the Media page (media.html)
   A press page: the coverage listed beside the title on Dusk, then the same coverage as a news rail on Night.
   Every class starts with hp-media-. Every value reads a token. Append to site/site.css.
   ================================================================== */

/* ---------- Coverage in a filled split hero: outlet and date over each headline, ruled in white (like hp-toc) ---------- */
.hp-media-cover { display: flex; flex-direction: column; gap: var(--space-12); align-self: end; color: var(--text-on-image); }
.hp-media-cover > p { font: var(--text-body-2-strong); opacity: 0.85; }
.hp-media-cover ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--text-on-image) 45%, transparent); }
.hp-media-cover a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-12); padding: var(--space-16) 0; border-bottom: 1px solid color-mix(in srgb, var(--text-on-image) 30%, transparent); color: var(--text-on-image); text-decoration: none; }
.hp-media-cover span { font: var(--text-body-3); opacity: 0.8; }
.hp-media-cover b { grid-column: 1; font: var(--text-title-4); font-weight: 500; text-wrap: balance; }
.hp-media-cover .at-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hp-media-cover a:hover b, .hp-media-cover a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 960px) { .hp-media-cover { grid-column: 8 / span 5 !important; } }

/* ---------- Mail link inside a hero subline: takes the subline's ink, underlined ---------- */
.hp-media-mail { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hp-media-mail:hover { opacity: 0.8; }

/* ---------- News rail for press: the design system's NewsRail (at-rail) with real thumbnails; stacks below 960px ---------- */
.hp-media-rail h3 { margin: 0; font: var(--text-rail-headline); text-wrap: balance; transition: color var(--duration-150) var(--ease-functional); }
.hp-media-rail a:hover h3, .hp-media-rail a:focus-visible h3 { color: var(--text-hover); }
.hp-media-rail .at-rail__thumb { overflow: hidden; background: var(--bg-image); }
.hp-media-rail .at-rail__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) { .hp-media-rail { grid-template-columns: 1fr; row-gap: var(--space-16); } }

/* ---------- Logo thumbnail: an outlet's logo on a white plate, contained, not cropped ---------- */
.hp-media-logo { display: flex; align-items: center; justify-content: center; background: var(--white); }
.hp-media-rail .at-rail__thumb.hp-media-logo { background: var(--white); }
.hp-media-rail .at-rail__thumb.hp-media-logo img { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; }


/* ################################################################
   BATCH 2 · security.html · prefix hp-security-
   ################################################################ */
/* ==================================================================
   Blocks introduced by the Security page (security.html). Batch 2, Rylan, Oct 27.
   Every class starts with hp-security-. Reused blocks (filled split hero + hp-toc, Ledger,
   kit Security band, Dusk final CTA band) keep their own styles in site.css.
   ================================================================== */

/* ---------- Section shell: padding and head ---------- */
.hp-security-sec { padding-block: var(--space-120); background: var(--bg-primary); color: var(--text-primary); }
.hp-security-sec--night { background: var(--art-night); }
.hp-security-sec:not(.hp-security-sec--night) + .hp-security-sec:not(.hp-security-sec--night) { padding-top: 0; }
.hp-shero--fill + .hp-security-sec { padding-top: 0; }
.hp-security-head { display: flex; flex-direction: column; gap: var(--space-16); margin-bottom: var(--space-72); max-width: 62rem; }
.hp-security-head .hp-ch__dek { margin-top: var(--space-4); }
.hp-security-label { font: var(--text-body-1-strong); }

/* ---------- Hero: the strong first line of the subline ---------- */
.hp-security-lead { font: var(--text-title-4); color: var(--text-on-image); }

/* ---------- Four rings: figure beside a ruled list ----------
   Without script the rings sit aligned. site-add/security.js adds .is-armed (rings turned out of line),
   then .is-seen when the figure scrolls into view, so the gaps line up once. Nothing moves under reduced motion. */
.hp-security-rings { color: var(--text-primary); display: flex; flex-direction: column; gap: var(--space-16); }
.hp-security-rings svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
.hp-security-rings .r { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hp-security-rings .core { fill: currentColor; }
.hp-security-rings .beam { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.hp-security-rings.is-seen .beam { transition: opacity var(--duration-400) var(--ease-functional) 1.4s; }
.hp-security-rings g.ring { transform-box: view-box; transform-origin: 200px 200px; }
.hp-security-rings.is-seen g.ring { transition: transform 1.4s var(--ease-expressive); }
.hp-security-rings.is-armed:not(.is-seen) g.ring:nth-of-type(1) { transform: rotate(64deg); }
.hp-security-rings.is-armed:not(.is-seen) g.ring:nth-of-type(2) { transform: rotate(-118deg); }
.hp-security-rings.is-armed:not(.is-seen) g.ring:nth-of-type(3) { transform: rotate(146deg); }
.hp-security-rings.is-armed:not(.is-seen) g.ring:nth-of-type(4) { transform: rotate(-52deg); }
.hp-security-rings.is-armed:not(.is-seen) .beam { opacity: 0; }
.hp-security-rings.is-seen g.ring:nth-of-type(2) { transition-delay: 0.1s; }
.hp-security-rings.is-seen g.ring:nth-of-type(3) { transition-delay: 0.2s; }
.hp-security-rings.is-seen g.ring:nth-of-type(4) { transition-delay: 0.3s; }
.hp-security-rings figcaption { font: var(--text-body-2-strong); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .hp-security-rings g.ring, .hp-security-rings .beam { transform: none !important; opacity: 1 !important; transition: none; } }
.hp-security-parts { border-top: 1px solid var(--border-active); }
.hp-security-parts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4) var(--space-12); padding: var(--space-20) 0; border-bottom: 1px solid var(--border-tertiary); }
.hp-security-parts .hp-num { font: var(--text-body-2-strong); color: var(--text-secondary); padding-top: 3px; }
.hp-security-parts b { font: var(--text-title-3); font-weight: 500; }
.hp-security-parts p { grid-column: 2; color: var(--text-secondary); max-width: 52ch; }
.hp-security-m1 { row-gap: var(--space-48); }
@media (min-width: 960px) {
  .hp-security-m1 .hp-security-rings { grid-column: 1 / span 5 !important; }
  .hp-security-m1 .hp-security-parts { grid-column: 7 / span 6 !important; align-self: center; }
}

/* ---------- Principle: the one-line rule leads, large ---------- */
.hp-security-callout { row-gap: var(--space-36); }
.hp-security-callout h2 { font: var(--text-oversize-3); letter-spacing: -0.02em; text-wrap: balance; }
.hp-security-callout__body { display: flex; flex-direction: column; gap: var(--space-24); }
.hp-security-cannot { font: var(--text-title-3); color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--space-4); }
.hp-security-after { font: var(--text-editorial-body); color: var(--text-secondary); max-width: 62ch; }
@media (min-width: 960px) { .hp-security-callout h2 { grid-column: 1 / span 10 !important; } .hp-security-callout__body { grid-column: 4 / span 7 !important; } }

/* ---------- How it works: head stays put, steps scroll past ---------- */
.hp-security-split { row-gap: var(--space-36); }
.hp-security-split__head { display: flex; flex-direction: column; gap: var(--space-16); }
@media (min-width: 960px) {
  .hp-security-split__head { grid-column: 1 / span 4 !important; position: sticky; top: calc(var(--nav-height) + var(--space-36)); align-self: start; }
  .hp-security-split__body { grid-column: 6 / span 7 !important; }
}
.hp-security-rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-8) var(--space-12); padding: var(--space-24) 0; border-top: 1px solid var(--border-tertiary); }
.hp-security-rows li:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-security-rows .hp-num { font: var(--text-body-2-strong); color: var(--text-secondary); padding-top: 4px; }
.hp-security-rows h3 { font: var(--text-title-3); }
.hp-security-rows p { grid-column: 2; color: var(--text-secondary); }

/* ---------- Threat model: Ledger variant with long cells, on Night ---------- */
.hp-ledger.hp-security-ledger { margin-top: 0; }
.hp-security-ledger thead th.hp-ledger__label { width: 24%; }
.hp-security-ledger tbody th { font: var(--text-title-4); color: var(--text-primary); }
.hp-security-ledger tbody th .hp-num { display: block; font: var(--text-body-2-strong); color: var(--text-secondary); margin-bottom: var(--space-4); }
.hp-security-ledger td { font: var(--text-body-1) !important; }
@media (min-width: 960px) { .hp-security-ledger td { font: var(--text-dek) !important; } }

/* ---------- Control register: two columns of ruled lists, SOC 2 tag after the name ---------- */
.hp-security-note { font: var(--text-dek); color: var(--text-secondary); max-width: 62ch; margin: calc(var(--space-48) * -1) 0 var(--space-48); }
.hp-security-tag { display: inline-flex; align-items: center; font: var(--text-body-3-strong); letter-spacing: 0.02em; color: var(--text-primary); white-space: nowrap; padding: 2px var(--space-8); box-shadow: inset 0 0 0 1px var(--border-secondary); }
.hp-security-cols { columns: 1; column-gap: var(--gutter-wide); }
@media (min-width: 960px) { .hp-security-cols { columns: 2; } }
.hp-security-cols > div { break-inside: avoid; margin-bottom: var(--space-48); }
.hp-security-cols h3 { font: var(--text-title-4); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-active); }
.hp-security-cols li { padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); color: var(--text-secondary); }
.hp-security-cols li b { color: var(--text-primary); font-weight: 500; }
.hp-security-cols li .hp-security-tag { margin-left: var(--space-8); vertical-align: 1px; }

/* ---------- Attestation: head left, report sheet right ---------- */
.hp-security-a1 { row-gap: var(--space-48); }
.hp-security-a1__left, .hp-security-a1__right { display: flex; flex-direction: column; gap: var(--space-24); }
@media (min-width: 960px) {
  .hp-security-a1__left { grid-column: 1 / span 4 !important; }
  .hp-security-a1__right { grid-column: 6 / span 7 !important; gap: var(--space-48); }
  .hp-security-a1__right > .hp-security-label { margin-bottom: calc(var(--space-36) * -1); }
}
.hp-security-marks { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.hp-security-mark { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16) var(--space-12) var(--space-12); box-shadow: inset 0 0 0 1px var(--border-tertiary); }
.hp-security-mark__img { width: 56px; height: 56px; border-radius: var(--radius-rounded); background: var(--bg-image); display: grid; place-items: center; font: var(--text-body-3-strong); color: var(--text-secondary); flex: none; }
.hp-security-mark b { display: block; font: var(--text-body-1-strong); }
.hp-security-mark span { font: var(--text-body-2); color: var(--text-secondary); }
.hp-security-mark--hold { opacity: 0.5; }
/* Real badge artwork is taller than it is wide (574x639), so it must fit
   inside the 56px box rather than being stretched square. The placeholder
   styling above still applies to the <span> form. */
img.hp-security-mark__img { object-fit: contain; background: none; border-radius: 0;
  /* Desaturated: the badge artwork is navy and gold, which fights the page's
     restrained palette. Greyscale keeps it legible without shouting. */
  filter: grayscale(1); }
.hp-security-dl > div { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter-grid-l); padding: var(--space-16) 0; border-top: 1px solid var(--border-tertiary); }
.hp-security-dl > div:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-security-dl dt { font: var(--text-body-2-strong); color: var(--text-secondary); }
.hp-security-dl dd small { display: block; font: var(--text-body-2); color: var(--text-secondary); margin-top: var(--space-4); }
@media (min-width: 600px) { .hp-security-dl > div { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } }
.hp-security-pack h3 { font: var(--text-body-2-strong); color: var(--text-secondary); margin-bottom: var(--space-12); }
.hp-security-pack ul { border-top: 1px solid var(--border-active); }
.hp-security-pack li { padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); font: var(--text-title-4); }
.hp-security-body { color: var(--text-secondary); max-width: 62ch; }
.hp-security-body a { color: var(--text-primary); }

/* ---------- FAQ: all open, two columns ---------- */
.hp-security-qa { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-wide); }
@media (min-width: 960px) { .hp-security-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-security-qa > div { border-top: 1px solid var(--border-active); padding-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.hp-security-qa h3 { font: var(--text-title-4); }
.hp-security-qa p { color: var(--text-secondary); }

/* Oversize type steps down below 960px so long words never clip */
@media (max-width: 959px) { .hp-security-callout h2 { font: var(--text-title-1); letter-spacing: 0; } }

/* ==================================================================
   Merge (Oct 28): the Day Arc final band (hp-final-band) follows the shared closing CTA:
   two-line headline beside the subhead and one wide Get started button, middle-aligned at 960px+.
   ================================================================== */
.hp-final-band h2 > span { display: block; }
@media (min-width: 960px) {
  .hp-final-band .hp-grid { min-height: 358px; align-items: center; }
  .hp-final-band h2 { grid-column: 1 / span 7 !important; grid-row: 1; font-size: clamp(56px, 6.9vw, 120px); }
  .hp-final-band__body { grid-column: 8 / span 5 !important; grid-row: 1; }
}

/* ==========================================================================
   Memory page (Oct 28). Blocks introduced by memory.html; catalogued in BLOCKS.md.
   Reuses the Lightfield hero, Product rise, Quote over image, FAQ list and the shared final CTA from Agents.
   ========================================================================== */

/* The rise on Memory shows the Memory Graph (anim/memory-graph.html); the hairline below it opens the moments */
.hp-rise + .hp-mo { padding-top: calc(var(--space-120) + var(--space-24)); }

/* ---------- Memory moments: four chapters, each a white app window on a palette ground that plays once and holds,
   staggered left and right, with the chapter's heading stacked above a ruled list that ticks in step with the window ---------- */
.hp-mo { padding-bottom: var(--space-120); }
.hp-mo__head { row-gap: var(--space-12); margin-bottom: var(--space-72); }
@media (min-width: 960px) { .hp-mo__head > * { grid-column: 1 / span 8; } }
.hp-mo__ch { row-gap: var(--space-24); align-items: end; }
.hp-mo__ch + .hp-mo__ch { margin-top: var(--space-120); }
.hp-mo__body { display: flex; flex-direction: column; gap: var(--space-8); }
.hp-mo__no { font: var(--text-body-2-strong); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hp-mo__body h3 { font: var(--text-title-2); letter-spacing: -0.01em; text-wrap: balance; }
.hp-mo__body > p { font: var(--text-body-1); color: var(--text-secondary); max-width: 46ch; }
.hp-mo__steps { margin-top: var(--space-24); }
.hp-mo__steps li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) 0; border-top: 1px solid var(--border-tertiary); font: var(--text-body-2); color: var(--text-secondary); transition: color var(--duration-250) var(--ease-functional); }
.hp-mo__steps li:last-child { border-bottom: 1px solid var(--border-tertiary); }
.hp-mo__steps li::after { content: ""; flex: none; margin-left: auto; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-secondary); transition: background-color var(--duration-250), box-shadow var(--duration-250); }
.hp-mo__steps li.is-on { color: var(--text-primary); }
.hp-mo__steps li.is-on::after { background: var(--text-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: none; }
.hp-mo__out span { color: var(--text-secondary); margin-right: var(--space-4); }
.hp-mo__out::after { display: none; }
.hp-mo__out { opacity: 0.35; }
.hp-mo__out.is-on { opacity: 1; }
@media (min-width: 960px) {
  .hp-mo__ch[data-side="left"] .hp-mo__panel { grid-column: 1 / span 8 !important; }
  .hp-mo__ch[data-side="left"] .hp-mo__body { grid-column: 10 / span 3 !important; }
  .hp-mo__ch[data-side="right"] .hp-mo__panel { grid-column: 5 / span 8 !important; grid-row: 1; }
  .hp-mo__ch[data-side="right"] .hp-mo__body { grid-column: 1 / span 3 !important; grid-row: 1; }
}

/* Panel grounds: only the interim palette (solids, the six time-of-day grounds at 115deg) plus the page's own Night ambient, mild grain over all */
.hp-mo__panel { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; min-width: 0; margin: 0; display: grid; place-items: center; padding: clamp(var(--space-24), 5vw, var(--space-72)) clamp(var(--space-16), 4vw, var(--space-60)); min-height: 520px; background: var(--art-night); }
.hp-mo__panel[data-ground="ambient"] { background: /* Night ambient, matching the Memory hero: Night > Ember > Paper map */
    radial-gradient(60% 70% at 18% 16%, color-mix(in srgb, var(--art-ember) 62%, var(--art-night)) 0%, transparent 70%),
    radial-gradient(55% 65% at 92% 92%, color-mix(in srgb, var(--art-cobalt) 55%, var(--art-night)) 0%, transparent 72%),
    var(--art-night); }
.hp-mo__panel[data-ground="morning"]   { background: linear-gradient(115deg, var(--art-sky), var(--art-paper)); }
.hp-mo__panel[data-ground="afternoon"] { background: linear-gradient(115deg, var(--art-sun), var(--art-ember)); }
.hp-mo__panel[data-ground="golden"]    { background: linear-gradient(115deg, var(--art-ember), var(--art-coral)); }
.hp-mo__panel[data-ground="dusk"]      { background: linear-gradient(115deg, var(--art-cobalt), var(--art-coral)); }
.hp-mo__panel[data-ground="night"]     { background: linear-gradient(115deg, var(--art-night), var(--art-cobalt)); }
.hp-mo__panel[data-ground="sun"]       { background: var(--art-sun); }
.hp-mo__panel[data-ground="coral"]     { background: var(--art-coral); }
.hp-mo__panel[data-ground="cobalt"]    { background: var(--art-cobalt); }
.hp-mo__panel::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }

/* The window: a simplified white AnyTeam app built from system parts. Every element holds its space from the start
   (only opacity and colour change), so nothing reflows while it plays. */
.hp-mowin { position: relative; z-index: 1; width: min(100%, 580px); background: var(--white); color: var(--black); border-radius: var(--radius-12); overflow: hidden; font: var(--text-body-3); box-shadow: 0 2px 6px rgb(0 0 0 / 0.06), 0 24px 56px -12px rgb(0 0 0 / 0.3); }
@media (min-width: 960px) { .hp-mowin { zoom: 1.2; } } /* about 20% larger on wide screens */
.hp-mowin__bar { display: flex; align-items: center; gap: var(--space-12); height: 36px; padding: 0 var(--space-12); border-bottom: 1px solid var(--grey-200); }
.hp-mowin__dots { display: flex; gap: 5px; }
.hp-mowin__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-300); }
.hp-mowin__search { flex: 0 1 200px; height: 22px; display: flex; align-items: center; padding: 0 var(--space-10); border-radius: var(--radius-rounded); background: var(--grey-100); color: var(--grey-500); }
.hp-mowin__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); padding: var(--space-12); background: var(--grey-100); }
.hp-mowin__col { display: flex; flex-direction: column; gap: var(--space-10); }
.hp-mowin__card { background: var(--white); border-radius: var(--radius-8); padding: var(--space-12); box-shadow: inset 0 0 0 1px var(--grey-200); display: flex; flex-direction: column; gap: var(--space-8); }
.hp-mowin b { font-weight: 500; }
.hp-mowin small { display: block; color: var(--grey-500); font-size: 11.5px; }
.hp-mowin__deal { display: flex; align-items: center; gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--grey-200); }
.hp-mowin__deal b { font-size: 14px; }
.hp-mowin__logo { width: 28px; height: 28px; flex: none; border-radius: 6px; background: var(--black); color: var(--white); display: grid; place-items: center; font-weight: 500; font-size: 11px; }
.hp-mowin__row, .hp-mowin__h { display: flex; justify-content: space-between; gap: var(--space-8); }
.hp-mowin__row > span:first-child, .hp-mowin__h > span:last-child { color: var(--grey-500); }
.hp-mowin__h { font-weight: 500; padding-bottom: var(--space-4); border-bottom: 1px solid var(--grey-200); }
.hp-mowin__li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 2px 0; }
.hp-mowin__li + .hp-mowin__li { border-top: 1px solid var(--grey-100); padding-top: var(--space-8); }
.hp-mowin__cap { color: var(--grey-500); margin-top: var(--space-4); }
.hp-mowin__swap { display: inline-grid; justify-items: end; }
.hp-mowin__swap > * { grid-area: 1 / 1; transition: opacity var(--duration-400) var(--ease-expressive); }
.hp-mowin__swap > b { opacity: 0; }
.hp-mowin__swap.is-on > span { opacity: 0; }
.hp-mowin__swap.is-on > b { opacity: 1; }
/* flags and tags: monochrome, round (pills are controls and status here, as in the product) */
.hp-mowin__flag, .hp-mowin__tags span { flex: none; height: 20px; display: inline-flex; align-items: center; padding: 0 var(--space-8); border-radius: var(--radius-rounded); font-size: 11px; white-space: nowrap; }
.hp-mowin__flag.is-bad { background: var(--black); color: var(--white); }
.hp-mowin__flag.is-warn { box-shadow: inset 0 0 0 1px var(--black); }
.hp-mowin__flag.is-ok { background: var(--grey-100); color: var(--grey-600); }
.hp-mowin__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hp-mowin__tags span { box-shadow: inset 0 0 0 1px var(--grey-300); }
.hp-mowin__sig li { display: flex; align-items: center; gap: var(--space-8); padding: 3px 0; }
.hp-mowin__sig li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--black); flex: none; }
/* the memory run card: Watching > Running > Done, three steps */
.hp-mowin__runtop { display: flex; align-items: center; gap: var(--space-8); }
.hp-mowin__st { margin-left: auto; display: inline-grid; }
.hp-mowin__st > span { grid-area: 1 / 1; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-8); border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--grey-300); color: var(--grey-600); font-size: 11px; opacity: 0; transition: opacity var(--duration-250); }
.hp-mowin__st > span:nth-child(1) { opacity: 1; }
.hp-mowin__run.is-busy .hp-mowin__st > span:nth-child(1) { opacity: 0; }
.hp-mowin__run.is-busy .hp-mowin__st > span:nth-child(2) { opacity: 1; }
.hp-mowin__run.is-done .hp-mowin__st > span:nth-child(2) { opacity: 0; }
.hp-mowin__run.is-done .hp-mowin__st > span:nth-child(3) { opacity: 1; background: var(--black); color: var(--white); box-shadow: none; }
.hp-mowin__steps li { display: flex; align-items: center; gap: var(--space-8); padding: 2px 0; color: var(--grey-500); transition: color var(--duration-250); }
.hp-mowin__steps li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--grey-300); transition: background-color var(--duration-250), box-shadow var(--duration-250); }
.hp-mowin__steps li.is-run { color: var(--black); }
.hp-mowin__steps li.is-run::before { box-shadow: inset 0 0 0 1.5px var(--black); }
.hp-mowin__steps li.is-on::before { background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: none; }
/* the message memory sends */
.hp-mowin__to { color: var(--grey-500); }
.hp-mowin__sub { font-weight: 500; font-size: 13px; }
.hp-mowin__why li { display: flex; flex-direction: column; padding: var(--space-4) 0; border-top: 1px solid var(--grey-200); }
.hp-mowin__why span { color: var(--grey-600); }
.hp-mowin__todo li { display: flex; align-items: center; gap: var(--space-8); padding: 3px 0; }
.hp-mowin__todo li::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--grey-400); }
/* timed elements start hidden only once script is running; finished state otherwise */
.hp-mo__ch.is-armed .hp-mowin__msg, .hp-mo__ch.is-armed .hp-mowin__flag[data-t], .hp-mo__ch.is-armed .hp-mowin__tags span, .hp-mo__ch.is-armed .hp-mowin__sig li, .hp-mo__ch.is-armed .hp-mowin__why li, .hp-mo__ch.is-armed .hp-mowin__todo li { opacity: 0; transform: translateY(4px); transition: opacity var(--duration-400) var(--ease-expressive), transform var(--duration-400) var(--ease-expressive); }
.hp-mo__ch.is-armed [data-t].is-on { opacity: 1; transform: none; }
.hp-mo__ch.is-armed .hp-mowin__msg.is-on { opacity: 1; transform: none; }
@container (max-width: 520px) { .hp-mowin__body { grid-template-columns: minmax(0, 1fr); } .hp-mowin__search { display: none; } }
@media (max-width: 959px) { .hp-mo__panel { min-height: 0; } .hp-mo__ch + .hp-mo__ch { margin-top: var(--space-84); } }
@media (prefers-reduced-motion: reduce) { .hp-mowin *, .hp-mo__steps li { transition: none !important; } }
/* Hairline between the Memory Graph rise and the moments, on the grid */
.hp-rise + .hp-mo { padding-top: var(--space-120); }
.hp-rise + .hp-mo .hp-mo__head { border-top: 1px solid var(--border-tertiary); padding-top: var(--space-84); }

/* ==================================================================
   Oct 28 page updates
   ================================================================== */
/* Episode band on the page ground (Podcast episodes, Media coverage): follows the colour mode instead of Night */
.hp-episodes.hp-episodes--ground { background: var(--bg-primary); }
/* Security: the four components as single-ink isometric line art on an arc fill of the page ambient (tools/lineart.py security-layers).
   The plates slide into line once when the figure scrolls into view; static without script or under reduced motion. */
.hp-security-art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hp-arc-2); color: var(--white); margin: 0; }
.hp-security-art .hp-lineart { position: absolute; inset: 0; }
.hp-security-art .la-ring { transition: transform 1.2s var(--ease-expressive), opacity 0.6s var(--ease-functional); }
.hp-security-art .la-beam { transition: opacity var(--duration-400) var(--ease-functional) 1.2s; }
.hp-security-art.is-armed:not(.is-seen) .la-ring-1 { transform: translateX(-56px); }
.hp-security-art.is-armed:not(.is-seen) .la-ring-2 { transform: translateX(48px); }
.hp-security-art.is-armed:not(.is-seen) .la-ring-3 { transform: translateX(-40px); }
.hp-security-art.is-armed:not(.is-seen) .la-ring-4 { transform: translateX(64px); }
.hp-security-art.is-armed:not(.is-seen) .la-beam { opacity: 0; }
.hp-security-art.is-seen .la-ring-2 { transition-delay: 0.1s; }
.hp-security-art.is-seen .la-ring-3 { transition-delay: 0.2s; }
.hp-security-art.is-seen .la-ring-4 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .hp-security-art .la-ring, .hp-security-art .la-beam { transform: none !important; opacity: 1 !important; transition: none; } }
@media (min-width: 960px) { .hp-security-m1 .hp-security-art { grid-column: 1 / span 5 !important; } }
/* Final band on the page ground (neutral, like Home's closing block): no fill, page ink, primary button, hairline above */
.hp-final-band.hp-final-band--ground { background: var(--bg-primary); color: var(--text-primary); border-top: 1px solid var(--border-tertiary); }
.hp-final-band--ground .hp-final-band__body p { color: var(--text-secondary); opacity: 1; }
/* Testimonial wall on the page ground (Wall of Love): neutral in both modes; cards on bg-secondary, hairlines and glow follow the ink */
.hp-wall.hp-wall--ground { background: var(--bg-primary); }
.hp-wall--ground .hp-love { background: var(--bg-secondary); }
.hp-wall--ground .hp-love__links { border-top-color: var(--border-tertiary); }
.hp-wall--ground .hp-love__av--mono { background: var(--bg-primary); }
[data-theme="light"] .hp-wall--ground .love-card::before { background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgb(0 0 0 / .04), transparent 65%); }
/* Memory Graph rise: a shorter fade so the graph's ask field, near the bottom of the frame, stays readable */
.hp-rise--graph .hp-rise__clip::after { height: 9%; }

/* ==================================================================
   Partners page (partners.html), merged Oct 28 · prefix hp-partners-
   ================================================================== */
/* ==================================================================
   Blocks introduced by the Partners page (partners.html)
   Rylan's picks, round 1: L1 flow, H1 hero (kit hp-shero + hp-toc), E2 two halves, F2 Dusk final band (kit).
   Unpicked parts (ground, logos, become a partner) default to the old page: page ground, logos as supplied, email in the hero body.
   Every class starts with hp-partners-. Values come from tokens only.
   ================================================================== */
.hp-partners-sec { background: var(--bg-primary); color: var(--text-primary); padding-block: var(--space-120); }

/* ---------- Partner logos: the files are white only, shown as supplied on a Night panel ---------- */
.hp-partners-logo { display: inline-flex; align-items: center; max-width: 100%; }
.hp-partners-logo img { display: block; height: 40px; width: auto; max-width: 100%; }
.hp-partners-logo--wide img { height: 24px; }

/* Website link under a partner's name */
.hp-partners-site { display: inline-flex; align-items: center; gap: var(--space-4); font: var(--text-body-2-strong); color: inherit; text-decoration: none; }
.hp-partners-site:hover, .hp-partners-site:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* The partners@ link inside a paragraph */
.hp-partners-inline { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hp-partners-inline:hover { text-decoration-thickness: 2px; }

/* ---------- Two halves: logo panel on top ---------- */
.hp-partners-halves { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-72) var(--gutter-grid-l); }
.hp-partners-half { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); min-width: 0; }
.hp-partners-half__media { width: 100%; aspect-ratio: 16 / 9; background: var(--art-cobalt); display: grid; place-items: center; margin-bottom: var(--space-12); }
.hp-partners-half__media .hp-partners-logo { justify-content: center; width: 100%; background: none; padding: 0; }
.hp-partners-half__media .hp-partners-logo img { height: 96px; }
.hp-partners-half__media .hp-partners-logo--wide img { height: auto; width: 62%; }
.hp-partners-half h3 { font: var(--text-title-2); text-wrap: balance; }
.hp-partners-half p { font: var(--text-editorial-body); color: var(--text-secondary); max-width: 60ch; }
@media (max-width: 599px) { .hp-partners-half__media .hp-partners-logo img { height: 64px; } .hp-partners-half__media .hp-partners-logo--wide img { height: auto; } }
@media (min-width: 960px) { .hp-partners-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
   Integrations page (integrations.html), merged Oct 28 · prefix hp-integrations-
   ================================================================== */

/* ==================================================================
   Blocks introduced by Integrations (integrations.html)
   A directory page: how AnyTeam reads from and acts in your tools, then every tool by category.
   Every class starts with hp-integrations-. Values read tokens only.
   ================================================================== */

/* ---------- Tool marks: single ink at rest (kit logo rule), brand colour on row hover (Rylan: I1 + I3) ---------- */
.hp-integrations-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp-integrations-mark { position: relative; width: 28px; height: 28px; flex: none; display: inline-flex; }
.hp-integrations-logo { width: 28px; height: 28px; fill: currentColor; color: inherit; }
.hp-integrations-colour { position: absolute; inset: 0; width: 28px; height: 28px; object-fit: contain; opacity: 0; transition: opacity var(--duration-150) var(--ease-functional); }
.hp-integrations-logo { transition: opacity var(--duration-150) var(--ease-functional); }
@media (hover: hover) {
  .hp-integrations-row:hover .hp-integrations-colour { opacity: 1; }
  .hp-integrations-row:hover .hp-integrations-mark:has(.hp-integrations-colour) .hp-integrations-logo { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hp-integrations-colour, .hp-integrations-logo { transition: none; } }
.hp-integrations-mono { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-rounded); box-shadow: inset 0 0 0 1px var(--border-secondary); font: var(--text-body-3-strong); color: var(--text-secondary); }

/* ---------- Section shell: page ground, or the Night band (data-theme="dark", same in both modes) ---------- */
.hp-integrations-sec { padding-block: var(--space-90) var(--space-120); background: var(--bg-primary); color: var(--text-primary); --hp-integrations-knock: var(--bg-primary); }
.hp-integrations-sec--night { background: var(--art-night); --hp-integrations-knock: var(--art-night); }
@media (min-width: 960px) { .hp-integrations-sec { padding-block: var(--space-120); } }
.hp-integrations-head { display: flex; flex-direction: column; gap: var(--space-12); }
.hp-integrations-head h2 { font: var(--text-section-heading); letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
@media (max-width: 959px) { .hp-integrations-head h2 { font: var(--text-title-2); } }
@media (min-width: 960px) { .hp-integrations-head { grid-column: 1 / span 9 !important; } }

/* ---------- Hub diagram: pulls from, one memory layer, acts across ---------- */
.hp-integrations-hub { margin-top: var(--space-72); display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
.hp-integrations-hub__col > p { font: var(--text-body-2-strong); color: var(--text-secondary); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-active); }
.hp-integrations-hub__col ol li { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-16); border-bottom: 1px solid var(--border-tertiary); justify-content: center; position: relative; }
.hp-integrations-hub__col ol b { font: var(--text-title-4); }
.hp-integrations-hub__col ol span { font: var(--text-body-2); color: var(--text-secondary); }
.hp-integrations-hub__acts ol li { font: var(--text-title-4); }
.hp-integrations-hub__core { background: var(--art-night); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-24); padding: var(--space-24); min-height: 200px; }
.hp-integrations-hub__core img { width: 132px; height: auto; }
.hp-integrations-hub__core p { font: var(--text-dek); max-width: 22ch; }
@media (min-width: 960px) {
  .hp-integrations-hub { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: 0; align-items: stretch; }
  .hp-integrations-hub__col ol li { min-height: 92px; }
  .hp-integrations-hub__core { margin-inline: var(--space-36); margin-top: calc(var(--space-12) + 21px + 1px); }
  /* hairlines run from each row into the core and out again */
  .hp-integrations-hub__pulls ol li::after, .hp-integrations-hub__acts ol li::before { content: ""; position: absolute; top: 50%; width: var(--space-36); border-top: 1px solid var(--border-secondary); }
  .hp-integrations-hub__pulls ol li { padding-right: var(--space-24); }
  .hp-integrations-hub__pulls ol li::after { right: calc(var(--space-36) * -1); }
  .hp-integrations-hub__acts ol li::before { left: calc(var(--space-36) * -1); }
}
/* One moment: rows light up in turn, left side then right, once the diagram is in view (site-add/integrations.js) */
.hp-integrations-hub.is-run .hp-integrations-hub__col ol li { animation: hp-integrations-row var(--duration-400) var(--ease-expressive) both; animation-delay: calc(var(--i) * 120ms + var(--d, 0ms)); }
.hp-integrations-hub.is-run .hp-integrations-hub__acts { --d: 600ms; }
@keyframes hp-integrations-row { from { opacity: 0.25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hp-integrations-hub.is-run .hp-integrations-hub__col ol li { animation: none; } }

/* ---------- Category filter: a full-width TileSelector above the directory ---------- */
.hp-integrations-finder { margin-top: var(--space-48); scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.hp-integrations-finder .at-tiles { display: flex; flex-wrap: wrap; max-width: none; }
.hp-integrations-finder .at-tile span { padding: 0 var(--space-24); white-space: nowrap; }

/* ---------- Directory, ruled rows: category left, tools in hairline rows right ---------- */
.hp-integrations-dir { margin-top: var(--space-48); display: flex; flex-direction: column; gap: var(--space-48); }
.hp-integrations-cat { scroll-margin-top: calc(var(--nav-height) + var(--space-24)); }
.hp-integrations-cat__label { display: flex; align-items: baseline; gap: var(--space-8); font: var(--text-title-3); padding-bottom: var(--space-16); }
.hp-integrations-cat__label span { font: var(--text-body-2-strong); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hp-integrations-rows { border-top: 1px solid var(--border-active); }
.hp-integrations-row { display: grid; grid-template-columns: 1fr; gap: var(--space-8) var(--gutter-grid-l); padding-block: var(--space-16); border-bottom: 1px solid var(--border-tertiary); }
.hp-integrations-row__who { display: flex; align-items: center; gap: var(--space-12); font: var(--text-title-4); }
.hp-integrations-row p { font: var(--text-editorial-body); color: var(--text-secondary); max-width: 60ch; }
@media (max-width: 599px) { .hp-integrations-row p { font: var(--text-body-1); } }
@media (min-width: 600px) { .hp-integrations-row { grid-template-columns: 3fr 6fr; align-items: center; } }
@media (min-width: 960px) {
  .hp-integrations-cat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .hp-integrations-cat__label { grid-column: 1 / span 3; align-self: start; padding: var(--space-16) 0 0; }
  .hp-integrations-rows { grid-column: 4 / span 9; }
}

/* ==================================================================
   Oct 28 · Integrations and Partners updates
   ================================================================== */
/* Morning hero and final band (Day Arc Morning: Sky > Paper, black type per the token notes). Same in both modes. */
.hp-shero--fill[data-ambient="morning"] {
  --text-on-image: var(--black);
  background-color: var(--art-sky);
  background-image:
    radial-gradient(55% 75% at 96% 6%, color-mix(in srgb, var(--art-cobalt) 32%, transparent), transparent 70%),
    linear-gradient(160deg, var(--art-sky) 0%, color-mix(in srgb, var(--art-sky) 55%, var(--art-paper)) 48%, var(--art-paper) 100%);
}
.hp-final-band[data-ambient="morning"] {
  background-color: var(--art-sky); color: var(--black);
  background-image:
    radial-gradient(55% 75% at 96% 94%, color-mix(in srgb, var(--art-cobalt) 32%, transparent), transparent 70%),
    linear-gradient(20deg, var(--art-paper) 0%, color-mix(in srgb, var(--art-sky) 55%, var(--art-paper)) 52%, var(--art-sky) 100%);
}
.hp-final-band[data-ambient="morning"] .hp-final-band__body p { color: var(--black); opacity: 0.8; }
/* Integrations hub: the AnyTeam column on Sky, wordmark and line centred */
.hp-integrations-hub__core { background: var(--art-sky); color: var(--black); justify-content: center; align-items: center; text-align: center; gap: var(--space-16); }
.hp-integrations-hub__core img { width: min(180px, 70%); }
.hp-integrations-hub__core p { font: var(--text-body-1-strong); max-width: none; }
/* Every tool on the page ground, ruled off from the hub above */
.hp-integrations-sec--rule { border-top: 1px solid var(--border-tertiary); }
/* Category filter: a hidden category must stay hidden at 960px+ (its grid display beat the hidden attribute) */
.hp-integrations-cat[hidden] { display: none !important; }
/* Tool marks stay single ink: no brand colour on hover */
.hp-integrations-colour { display: none !important; }
/* Keep a phrase on one line (desktop only, so phones still wrap) */
@media (min-width: 960px) { .hp-nowrap { white-space: nowrap; } }
/* Partners logo panels: cut from the hero's ambient gradient; the second is turned so the two don't match */
.hp-partners-half__media[data-ambient] {
  background-color: var(--amb-1);
  background-image:
    radial-gradient(38% 55% at var(--pp1, 94% 14%), color-mix(in srgb, var(--amb-ga) 85%, transparent), transparent 72%),
    radial-gradient(42% 60% at var(--pp2, 76% 100%), color-mix(in srgb, var(--amb-gb) 80%, transparent), transparent 72%),
    radial-gradient(30% 45% at var(--pp3, 60% 40%), color-mix(in srgb, var(--amb-gc) 30%, transparent), transparent 70%),
    radial-gradient(55% 70% at var(--pp4, 4% 6%), color-mix(in srgb, var(--art-night) 85%, transparent), transparent 70%),
    linear-gradient(var(--ppa, 115deg), var(--amb-0) 0%, var(--amb-1) 42%, var(--amb-1) 64%, var(--amb-2) 100%);
}
.hp-partners-half__media--turn { --ppa: 250deg; --pp1: 10% 88%; --pp2: 34% 0%; --pp3: 46% 64%; --pp4: 98% 90%; }
/* Integrations hub: no connector hairlines (they didn't line up with the AnyTeam column) */
.hp-integrations-hub__pulls ol li::after, .hp-integrations-hub__acts ol li::before { content: none !important; }


/* Footer (Oct 28): social profiles under the tagline, colour-mode toggle at the right end of the legal row. */
.hp-footer__legal { align-items: center; }
.hp-footer__legal .at-theme-toggle { margin-left: auto; margin-top: 0; }
.hp-footer__social { display: flex; gap: var(--space-4); margin-left: calc(var(--space-8) * -1); }
.hp-footer__social .at-icon-btn { color: var(--text-primary); }
.hp-social-icon { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 599px) { .hp-footer__legal .at-theme-toggle { margin-left: 0; } }
/* Blog lead story thumbnail (Oct 28): 16:9 like the post grid, so the thumbnail's wordmark and label stay in frame. */
.hp-lead__media { aspect-ratio: 16 / 9; overflow: hidden; }