/* Hallmark · shape: kept, recomposed · genre: modern-minimal · theme: brand (Accordo) · redesign: full
 * paper: oklch(98.3% 0.004 320) · accent: oklch(39.2% 0.148 321) · display: Funnel Display · body: Figtree · hero: Stage (/, platform pages), Banner (/pricing) · nav: three-part bar · footer: mast · signature: the Silverframe deal followed through the real product
 * axes: light/grotesk-sans/warm-violet · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S4 R3 V3 · weakest: R (the copy is long for one idea a screen), kept as the owner's words; sections carry it with mass and rhythm instead */
/* Hallmark · waive 80 · the illustrations are Accordo's commissioned brand art, kept as found */

/* Accordo site components. Every value comes from tokens.css; see DESIGN.md for the rules. */

/* ---------- Canvas ---------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(52rem + 2 * var(--gutter)); }
main { display: block; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-tooltip); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }
.section { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); }
.section-head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.section-head.split-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-3xl); align-items: end; }
.section-head.split-head > :only-child { grid-column: 1 / -1; }
.section-head.stacked { max-width: 52rem; }
.section-head > div { display: grid; gap: var(--space-lg); justify-items: start; }
.lead, .intro { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 58ch; margin: 0; text-wrap: pretty; }
.lead-in { font-weight: var(--weight-strong); color: var(--color-ink); }
.quiet { font-size: var(--text-sm); color: var(--color-muted); }
h2 + p:not([class]) { margin-top: var(--space-md); }
p:not([class]) + p:not([class]) { margin-top: var(--space-md); }

/* ---------- Controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font: var(--weight-strong) var(--text-md)/1.1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button:hover { background: var(--color-accent-hover); }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.button.small { min-height: var(--control-h-s); padding: 0 var(--space-md); font-size: var(--text-sm); }
.button.secondary { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.button.secondary:hover { border-color: var(--color-ink); background: var(--color-paper); }
.button.light { background: var(--color-band-ink); color: var(--color-band); }
.button.light:hover { background: var(--color-paper-2); }
.text-link, .link-button { display: inline-flex; align-items: center; min-height: var(--control-h-s); padding: 0; border: 0; background: none; color: var(--color-ink); font: var(--weight-strong) var(--text-md)/1.3 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
.text-link:hover, .link-button:hover { color: var(--color-accent); }
.text-link:active, .link-button:active { opacity: 0.8; }
p .link-button, p a { display: inline; min-height: 0; font-size: inherit; }
p a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
p a:hover { color: var(--color-accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; min-height: var(--control-h-s); }
.wordmark .brand { width: 124px; height: auto; }
#navigation { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
#navigation > a, .platform-overview { color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-sm); transition: color var(--dur-micro) var(--ease-out); }
#navigation > a:hover, .platform-overview:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.platform-menu { position: relative; padding-block: var(--space-sm); }
.platform-links { position: absolute; top: 100%; left: calc(-1 * var(--space-lg)); z-index: var(--z-dropdown); display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-lg); width: 520px; padding: var(--space-md) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-float); }
.platform-menu:not(.dismissed):hover .platform-links, .platform-menu:not(.dismissed):focus-within .platform-links { display: grid; }
.platform-links a { padding: var(--space-xs) 0; color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); }
.platform-links a:hover { color: var(--color-accent); }
.nav-actions { display: flex; align-items: center; gap: var(--space-md); }
.login { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); padding-block: var(--space-sm); }
.login:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.4em; }
.theme, .menu, .close { display: inline-grid; place-items: center; min-width: var(--control-h-s); height: var(--control-h-s); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
.theme:hover, .menu:hover, .close:hover { border-color: var(--color-ink); }
.menu { display: none; font: var(--weight-strong) var(--text-sm)/1 var(--font-body); }
.mobile-demo { display: none; }

/* ---------- Heroes ---------- */
.hero { padding-block: var(--space-3xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.home-hero .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(calc(100svh - 72px - 2 * var(--space-3xl)), 760px); }
.home-hero h1 { font-size: clamp(2.75rem, 4vw + 1rem, 4.5rem); max-width: 18ch; }
.product-hero h1 { font-size: var(--text-display-s); max-width: 18ch; }
.hero-copy { display: grid; justify-items: start; }
.hero-copy h1 + .lead { margin-top: var(--space-lg); }
.hero-copy .quiet { margin-top: var(--space-lg); }
.new-pill { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 36px; margin-bottom: var(--space-xl); padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out); }
.new-pill:hover { border-color: var(--color-accent); }
.new-pill span { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--weight-strong); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.crumbs a { color: var(--color-muted); text-underline-offset: 0.25em; }
.crumbs a:hover { color: var(--color-ink); }
.crumbs [aria-current] { color: var(--color-ink); font-weight: var(--weight-strong); }
.brand-art { margin: 0; display: grid; gap: var(--space-sm); }
.brand-art img, .paired-art img, .illo-wrap img { width: 100%; height: auto; }
.brand-art figcaption { font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.art-dark { display: none !important; }
[data-theme="dark"] .art-light { display: none !important; }
[data-theme="dark"] .art-dark { display: block !important; }
.pricing-hero { padding-block: var(--space-3xl) var(--space-xl); }
.pricing-hero h1 { max-width: 16ch; }
.pricing-hero .intro { margin-top: var(--space-lg); }

/* ---------- The walkthrough (signature) ---------- */
.walkthrough-instruction { margin: 0 0 var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.story-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: start; }
.story-steps { display: grid; gap: var(--space-sm); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; width: 100%; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.step:hover { border-color: var(--color-rule-strong); }
.step:active { transform: translateY(1px); }
.step[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-rule-strong); font: var(--display-weight) var(--text-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.step[aria-pressed="true"] .step-number { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.step-text { display: grid; gap: var(--space-2xs); }
.step-text strong { font-size: var(--text-lg); line-height: 1.3; }
.step-text small { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.demo-note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.workflow-panel { margin: 0; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); display: grid; gap: var(--space-md); }
.screen-title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.sample { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--weight-strong); white-space: nowrap; }
.workflow-panel a { display: block; border-radius: calc(var(--radius-card) - 6px); overflow: hidden; border: 1px solid var(--color-rule); }
.workflow-panel img { width: 100%; height: auto; }
.workflow-panel figcaption { padding-inline: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.walkthrough-controls { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 0 var(--space-xs) var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.folio-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.folio-strip img { width: 120px; height: auto; }
[data-theme="dark"] .folio-strip img { background: var(--color-band-ink); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input); }
.folio-strip p { margin: 0; color: var(--color-ink-2); }
.folio-strip .text-link { margin-left: auto; }

/* ---------- Item sets ---------- */
.pillar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-2xl) var(--gap-columns); counter-reset: item; }
.pillar-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar-card { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); counter-increment: item; }
.pillar-card h3 { font-size: var(--text-title); }
.pillar-card p { color: var(--color-ink-2); }
.pillar-card .text-link { margin-top: auto; align-self: flex-start; }
.numbered > li::before { content: counter(item, decimal-leading-zero); font: var(--display-weight) var(--text-sm)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.product-grid article { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.product-grid p { color: var(--color-ink-2); }
.product-grid .text-link { margin-top: auto; align-self: flex-start; }

/* Rows: a head block beside full-width rows. */
.rows-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.rows-grid .section-head { position: sticky; top: calc(72px + var(--space-xl)); margin: 0; justify-items: start; }
.rows-list { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.rows-list > li { display: grid; gap: var(--space-xs); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule-strong); counter-increment: item; }
.rows-list > li:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.rows-list p { color: var(--color-ink-2); }
.rows-list.check-list > li { font-size: var(--text-lg); color: var(--color-ink-2); padding-left: 0; }
.rows-list.check-list > li::before { display: none; }
.rows-list.check-list strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); letter-spacing: var(--tracking-display); line-height: 1.2; margin-bottom: var(--space-2xs); }

/* Split: copy beside a picture. */
.split-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.split-grid.reverse > .split-copy { order: 2; }
.split-copy { display: grid; gap: var(--space-lg); justify-items: start; }
.illo-wrap { margin: 0; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.check-item { position: relative; padding-left: var(--space-xl); color: var(--color-ink-2); }
.check-item::before { content: ""; position: absolute; left: 4px; top: 0.4em; width: 7px; height: 12px; border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-item strong { color: var(--color-ink); }

/* Evidence: copy beside a real product screen. */
.evidence-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.evidence-copy { display: grid; gap: var(--space-md); justify-items: start; }
.evidence-copy h2 { margin-bottom: var(--space-xs); }
.evidence-copy p { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 52ch; }
.link-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); }
.screen { margin: 0; display: grid; gap: var(--space-sm); }
.screen a { display: block; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.screen img { width: 100%; height: auto; border-radius: calc(var(--radius-card) - var(--space-xs)); }
.screen figcaption { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- What Accordo replaces ---------- */
.replaces-visual { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--space-2xl); align-items: center; }
.replaces-visual figcaption { grid-column: 1 / -1; font-size: var(--text-md); color: var(--color-ink-2); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.replaces-visual figcaption strong { color: var(--color-ink); }
.tool-stack { columns: 2 260px; column-gap: var(--gap-columns); }
.tool-group { break-inside: avoid; margin-bottom: var(--space-lg); }
.tool-group-name { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink); }
.tool-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tool-tile { padding: var(--space-2xs) var(--space-sm); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.accordo-card { --color-focus: var(--color-band-ink); display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-band); color: var(--color-band-ink); }
.accordo-card img { width: 52px; height: 52px; padding: var(--space-xs); border-radius: var(--radius-input); background: var(--color-band-ink); }
.accordo-card h3 { color: var(--color-band-ink); font-size: var(--text-2xl); }
.accordo-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.accordo-card li { position: relative; padding-left: var(--space-lg); }
.accordo-card li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 6px; height: 11px; border: solid var(--color-band-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.accordo-card p { margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-band-muted); font-weight: var(--weight-strong); }
.time-moments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-3xl); }
.time-moments article { display: grid; gap: var(--space-xs); align-content: start; }
.time-moments h3 { font-size: var(--text-lg); line-height: 1.25; }
.time-moments p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- The event cycle ---------- */
.cycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: item; }
.cycle li { position: relative; display: grid; gap: var(--space-2xs); padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-strong); counter-increment: item; }
.cycle li:first-child { border-top-color: var(--color-accent); }
.cycle li::before { content: counter(item, decimal-leading-zero); font: var(--display-weight) var(--text-3xl)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; margin-bottom: var(--space-sm); }
.cycle strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); letter-spacing: var(--tracking-display); }
.cycle span { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- Audiences ---------- */
.audience-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.audience-grid li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.audience-grid h3 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-title); }
.audience-grid svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-accent); }
.audience-grid p { color: var(--color-ink-2); }

/* ---------- FAQ ---------- */
.faq-grid, .pricing-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.faq-grid .section-head, .faq-intro { position: sticky; top: calc(72px + var(--space-xl)); margin: 0; display: grid; gap: var(--space-lg); }
.faq-intro p { color: var(--color-ink-2); }
.faq-contact { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.faq details { border-bottom: 1px solid var(--color-rule-strong); }
.faq details:first-of-type { border-top: 1px solid var(--color-rule-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: var(--control-h); padding-block: var(--space-lg); font-size: var(--text-lg); font-weight: var(--weight-strong); line-height: 1.35; cursor: pointer; list-style: none; transition: color var(--dur-micro) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 12px; height: 12px; border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover { color: var(--color-accent); }
.faq details > p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 65ch; }

/* ---------- Closing band ---------- */
.closing { --color-focus: var(--color-band-ink); padding-block: var(--section-gap-s); background: var(--color-band); color: var(--color-band-ink); }
.closing-inner { display: grid; justify-items: start; gap: var(--space-lg); }
.closing h2 { color: var(--color-band-ink); font-size: var(--text-display-s); max-width: 30ch; }
.closing .lead { color: var(--color-band-muted); }
.closing .text-link { color: var(--color-band-ink); text-decoration-color: var(--color-band-muted); }
.closing .text-link:hover { color: var(--color-band-muted); }
.closing .actions { margin-top: var(--space-md); }
.closing p a { color: var(--color-band-ink); }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-rule); }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.footer-mast { display: grid; gap: var(--space-md); align-content: start; }
.footer-mast .brand { width: 160px; height: auto; }
.footer-mast p { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 24ch; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.footer-links div { display: grid; align-content: start; gap: var(--space-2xs); }
.footer-links h2 { font: var(--weight-strong) var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-xs); }
.footer-links a, .footer-bottom a { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); padding-block: var(--space-2xs); }
.footer-links a:hover, .footer-bottom a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.25em; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer-bottom span:last-child { display: flex; gap: var(--space-lg); }

/* ---------- Demo dialog ---------- */
dialog { width: min(560px, calc(100% - 2 * var(--space-md))); max-height: min(92dvh, 900px); padding: var(--space-2xl) var(--space-xl) var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-float); overflow: auto; }
dialog::backdrop { background: var(--color-scrim); }
body:has(dialog[open]) { overflow: hidden; }
dialog .close { position: absolute; top: var(--space-md); right: var(--space-md); }
#demo-title { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
dialog > p { color: var(--color-ink-2); }
#demo-form { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
#demo-form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-strong); }
#demo-form input, #demo-form select, #demo-form textarea { width: 100%; min-height: var(--control-h); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-weight: var(--weight-body); transition: border-color var(--dur-micro) var(--ease-out); }
#demo-form input:hover, #demo-form select:hover, #demo-form textarea:hover { border-color: var(--color-ink-2); }
#demo-form input:user-invalid, #demo-form select:user-invalid { border-color: var(--color-error); }
#demo-form input:disabled { opacity: 0.55; }
#demo-form textarea { min-height: 96px; resize: vertical; }
.optional { color: var(--color-muted); font-weight: var(--weight-body); }
.form-note { font-size: var(--text-sm); color: var(--color-muted); }
#demo-form .button { width: 100%; margin-top: var(--space-xs); }
#form-status { font-size: var(--text-sm); color: var(--color-ink-2); min-height: 1.5em; }

/* ---------- Pricing ---------- */
.billing-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); height: var(--control-h); margin-bottom: var(--space-xl); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); }
.billing-toggle label { display: inline-flex; align-items: center; gap: var(--space-xs); height: 100%; padding: 0 var(--space-md); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink-2); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.billing-toggle label:hover { color: var(--color-ink); }
.billing-toggle input:checked + label { background: var(--color-accent); color: var(--color-accent-ink); }
.billing-toggle input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.save-badge { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); }
.billing-toggle input:checked + label .save-badge { background: var(--color-accent-ink); color: var(--color-accent); }
.price-annual { margin-top: var(--space-md); }
.plans:has(#billing-annual:checked) .price-monthly, .plans:has(#billing-monthly:checked) .price-annual { display: none; }
.plans:has(#billing-annual:checked) .price-annual { margin-top: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.plan-featured { border: 2px solid var(--color-accent); }
.plan-badge { position: absolute; top: calc(-1 * var(--space-sm)); left: var(--space-xl); margin: 0; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.plan h2 { font-size: var(--text-2xl); }
.plan-for { color: var(--color-ink-2); min-height: 3.2em; }
.price { margin: 0; display: flex; align-items: baseline; gap: var(--space-2xs); }
.price strong { font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.price span { color: var(--color-muted); }
.billing { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.plan-list { list-style: none; margin: 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-sm); flex-grow: 1; align-content: start; }
.plan-list li { position: relative; padding-left: var(--space-xl); color: var(--color-ink-2); }
.plan-list li::before { content: ""; position: absolute; left: 4px; top: 0.4em; width: 7px; height: 12px; border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan-list strong { color: var(--color-ink); }
.plan-button { width: 100%; margin-top: var(--space-md); }
.info-button { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: var(--space-2xs); padding: 0; border: 1px solid var(--color-rule-strong); border-radius: 50%; background: var(--color-paper); color: var(--color-ink-2); font: var(--weight-strong) var(--text-xs)/1 var(--font-body); vertical-align: middle; cursor: pointer; }
.info-button::after { content: ""; position: absolute; inset: -10px; }
.info-button:hover { border-color: var(--color-ink); color: var(--color-ink); }
.mcp-popover { max-width: min(420px, calc(100% - 2 * var(--space-xl))); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-float); }
.mcp-popover::backdrop { background: var(--color-scrim); }
.mcp-popover p { color: var(--color-ink-2); }
.mcp-popover .mcp-popover-title { color: var(--color-ink); font-weight: var(--weight-strong); font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.mcp-popover-close { margin-top: var(--space-md); min-height: var(--control-h-s); padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font-weight: var(--weight-strong); cursor: pointer; }
.mcp-popover-close:hover { border-color: var(--color-ink); }
.pricing-notes { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.pricing-note { max-width: 75ch; }
.pricing-note { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.pricing-note strong { color: var(--color-ink); }
.pricing-currency { color: var(--color-muted); }
.time-band { padding-block: 0; }
.time-card { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.time-card > div { display: grid; gap: var(--space-md); max-width: 60ch; }
.time-card h2 { font-size: var(--text-3xl); }
.time-card p { color: var(--color-ink-2); }
.compare-section { background: var(--color-paper-2); }
.compare-scroll { position: relative; overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.compare caption { text-align: left; }
.compare th, .compare td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); text-align: center; vertical-align: middle; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); color: var(--color-ink); }
.compare tbody th { text-align: left; font-weight: var(--weight-strong); color: var(--color-ink); }
.compare td { color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.compare th:first-child { width: 32%; }
.compare thead th:nth-child(3), .compare td:nth-child(3) { background: var(--color-accent-soft); }
.compare small { color: var(--color-muted); }
.yes, .no { display: inline-block; vertical-align: middle; }
.yes { width: 7px; height: 12px; border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.no { width: 12px; height: 2px; background: var(--color-rule-strong); }
.fair th:first-child { width: 40%; }
.fair td, .fair thead th { text-align: left; }
.fair td:nth-child(2), .fair thead th:nth-child(2) { background: none; }
.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.more-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.more-card h3 { font-size: var(--text-2xl); }
.more-card p { color: var(--color-ink-2); }
.more-card .plan-list { border-top: 0; padding-top: 0; }
.more-card .button { margin-top: auto; }

/* ---------- About, Powered by, legal ---------- */
.about-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); padding-block: var(--section-gap-s); align-items: start; }
.about-story h2 { position: sticky; top: calc(72px + var(--space-xl)); }
.about-story-body { display: grid; gap: var(--space-lg); }
.about-story-body p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 62ch; }
.about-promise { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.about-promise-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.about-promise-body { display: grid; gap: var(--space-lg); }
.about-promise-body p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 62ch; }
.legal-page { padding-block: var(--space-3xl) var(--section-gap-s); }
.legal-container { max-width: 50rem; }
.legal-container h1 { font-size: var(--text-display-s); max-width: none; }
.legal-container h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-md); max-width: none; }
.legal-container h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
.legal-container p, .legal-container li { color: var(--color-ink-2); max-width: 70ch; }
.legal-container p + p, .legal-container ul, .legal-container p + ul { margin-top: var(--space-md); }
.legal-container li + li { margin-top: var(--space-xs); }
.last-updated { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 75rem) {
  .time-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  #navigation { gap: var(--space-md); }
}
@media (max-width: 60rem) {
  .nav { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); }
  .nav-actions { justify-content: flex-end; }
  .menu { display: inline-grid; }
  .nav-actions .button.small { display: none; }
  #navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown); flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 72px); overflow-y: auto; padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); box-shadow: var(--shadow-float); font-size: var(--text-md); }
  #navigation.open { display: flex; }
  #navigation > a, .platform-overview { display: block; padding-block: var(--space-sm); color: var(--color-ink); }
  .platform-menu { padding: 0; }
  .platform-links, .platform-menu:not(.dismissed):hover .platform-links { position: static; display: grid; grid-template-columns: 1fr; width: auto; padding: 0 0 var(--space-sm) var(--space-md); border: 0; border-left: 2px solid var(--color-rule); border-radius: 0; box-shadow: none; background: none; }
  .mobile-demo { display: inline-flex; margin-top: var(--space-md); }
  .hero { padding-block: var(--space-2xl); }
  .hero-grid, .split-grid, .evidence-grid, .rows-grid, .story-layout, .faq-grid, .pricing-faq, .replaces-visual, .about-story, .about-promise-inner, .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .home-hero .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 0; }
  .split-grid.reverse > .split-copy { order: 0; }
  .section-head.split-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .rows-grid .section-head, .faq-grid .section-head, .faq-intro, .about-story h2 { position: static; }
  .plan-grid, .more-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .plan-for { min-height: 0; }
  .pillar-grid.three { grid-template-columns: minmax(0, 1fr); }
  .time-card { padding: var(--space-xl); }
  .folio-strip .text-link { margin-left: 0; }
}
@media (max-width: 40rem) {
  .login { display: none; }
  .time-moments, .audience-grid { grid-template-columns: minmax(0, 1fr); }
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .tool-stack { columns: 1; }
  .plan, .more-card { padding: var(--space-lg); }
  dialog { padding: var(--space-2xl) var(--space-lg) var(--space-lg); }
  .compare th, .compare td { padding: var(--space-sm); }
  .compare th:first-child { position: sticky; left: 0; z-index: var(--z-base); background: var(--color-surface); }
  .billing-toggle label { padding: 0 var(--space-sm); }
}
.legal-section { margin-top: var(--space-xl); }
.legal-container .last-updated + .legal-section { margin-top: var(--space-lg); }

/* ---------- How Accordo works ---------- */
.cycle-note { margin-top: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-lg); max-width: 60ch; }

/* ---------- The modules ---------- */
.module-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.module-card, .module-panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xl); align-items: start; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.module-card .paired-art, .module-panel .paired-art { display: block; aspect-ratio: 1; }
.module-card .paired-art img, .module-panel .paired-art img { width: 100%; height: 100%; object-fit: contain; }
.module-body { display: grid; gap: var(--space-md); justify-items: start; }
.module-body h3 { font-size: var(--text-2xl); }
.module-body > p:not(.module-plan) { color: var(--color-ink-2); }
.module-body .check-list { gap: var(--space-xs); font-size: var(--text-sm); }
.module-plan { margin: 0; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.module-switch { display: grid; gap: var(--space-lg); }
.module-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); justify-self: start; }
.module-tabs label { display: inline-flex; align-items: center; min-height: var(--control-h-s); padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink-2); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.module-tabs label:hover { color: var(--color-ink); }
.module-tabs input:checked + label { background: var(--color-accent); color: var(--color-accent-ink); }
.module-tabs input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.module-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; padding: var(--space-2xl); }
.module-panel .module-body h3 { font-size: var(--text-3xl); }
.module-panel .module-body > p:not(.module-plan) { font-size: var(--text-lg); max-width: 54ch; }
@supports selector(:has(*)) {
  .module-switch .module-panel { display: none; }
  .module-switch:has(#module-sponsorships:checked) [data-module="sponsorships"],
  .module-switch:has(#module-program:checked) [data-module="program"],
  .module-switch:has(#module-staffing:checked) [data-module="staffing"],
  .module-switch:has(#module-projects:checked) [data-module="projects"] { display: grid; }
}
.every-plan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-xl); align-items: start; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.every-plan h3 { font-size: var(--text-title); }
.every-plan ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.every-plan a { display: grid; gap: var(--space-2xs); color: var(--color-ink); text-decoration: none; }
.every-plan a strong { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.every-plan a:hover strong { color: var(--color-accent); }
.every-plan a span { font-size: var(--text-sm); color: var(--color-ink-2); }
.time-moments.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.time-moments.four h3 { font-size: var(--text-title); }
.time-moments.four p { font-size: var(--text-md); }

@media (max-width: 75rem) {
  .module-grid { grid-template-columns: minmax(0, 1fr); }
  .every-plan { grid-template-columns: minmax(0, 1fr); }
  .every-plan ul, .time-moments.four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
}
@media (max-width: 60rem) {
  .module-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-xl); }
  .module-tabs { border-radius: var(--radius-card); }
}
@media (max-width: 40rem) {
  .module-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); }
  .module-card .paired-art { max-width: 220px; }
  .every-plan ul, .time-moments.four { grid-template-columns: minmax(0, 1fr); }
  .module-tabs label { padding: 0 var(--space-md); }
}

/* ---------- Relationship cycle artwork ----------
   Inlined at build time (<!--illo-art cycle-->): one copy per composition, coloured by the --illo-* tokens, so
   it follows the theme. illustration.css shows the compact composition when the figure is under 40rem wide. */
.cycle-art { margin: 0 auto; max-width: 1200px; }
@media (max-width: 40rem) { .cycle-art { max-width: 420px; } }

/* ---------- Module visuals: real screens where public, the commissioned art otherwise ---------- */
.module-visual { display: grid; place-items: center; aspect-ratio: 1; padding: var(--space-md); border-radius: calc(var(--radius-card) - 4px); background: var(--color-paper-2); overflow: hidden; }
.module-visual.is-screen { place-items: start center; padding: var(--space-md) var(--space-md) 0; }
.module-visual.is-screen img { width: 100%; height: auto; border: 1px solid var(--color-rule); border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: var(--shadow-card); }
.module-visual .paired-art { width: 100%; height: 100%; }
.module-visual .paired-art img { width: 100%; height: 100%; object-fit: contain; }
.module-plan.every { background: var(--color-seal-soft); color: var(--color-seal-ink); }

/* ---------- A good morning ---------- */
.affirm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.affirm-grid .section-head { margin: 0; justify-items: start; }
.affirm-card { position: relative; margin: 0; padding: var(--space-2xl) var(--space-2xl) var(--space-xl); border: 1px solid var(--color-rule); border-top: 4px solid var(--color-seal); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.affirm-card figcaption { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-seal-ink); }
.affirm-card blockquote { margin: var(--space-md) 0 0; font: var(--display-weight) var(--text-3xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }
.affirm-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .affirm-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .affirm-card { padding: var(--space-xl) var(--space-lg); } }

/* ---------- Do the work once: the chaos of separate tools today, beside one calm place ---------- */
.chaos-calm { margin: 0; display: grid; grid-template-columns: minmax(0, 7fr) 64px minmax(0, 4fr); align-items: center; gap: var(--space-lg) 0; }
.cc-label { margin: 0 0 var(--space-md); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink-2); }
.chaos { position: relative; padding: var(--space-lg); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-paper-3); }
.chaos-lines { position: absolute; inset: var(--space-2xl) var(--space-lg) var(--space-lg); width: calc(100% - 2 * var(--space-lg)); height: calc(100% - var(--space-2xl) - var(--space-lg)); pointer-events: none; }
.chaos-lines path { fill: none; stroke: var(--color-muted); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0.55; }
.chaos-grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
.chaos-tile { display: grid; align-content: end; min-height: 76px; padding: var(--space-md) var(--space-sm) var(--space-sm); border: 1px solid var(--color-rule-strong); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-card); font-size: var(--text-xs); line-height: 1.35; color: var(--color-ink-2); }
.chaos-tile.is-app { border-top: 5px solid var(--tile, var(--illo-sky)); }
.chaos-tile.is-sheet { background-color: var(--color-surface); background-image: linear-gradient(var(--color-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-rule) 1px, transparent 1px); background-size: 100% 14px, 28px 100%; background-position: 0 6px, 6px 0; }
.chaos-note { align-self: center; justify-self: center; padding: var(--space-2xs) var(--space-sm); border-radius: 4px; background: var(--color-seal-soft); color: var(--color-seal-ink); font-size: var(--text-xs); font-weight: var(--weight-strong); white-space: nowrap; }
.chaos-grid > :nth-child(1) { transform: rotate(-3deg) translateY(4px); --tile: var(--illo-magenta); }
.chaos-grid > :nth-child(2) { transform: rotate(2.5deg) translate(6px, -4px); }
.chaos-grid > :nth-child(3) { transform: rotate(-1.5deg) translateY(8px); --tile: var(--illo-orange); }
.chaos-grid > :nth-child(4) { transform: rotate(-6deg) translate(-4px, 10px); }
.chaos-grid > :nth-child(5) { transform: rotate(3.5deg) translate(-6px, -2px); --tile: var(--illo-sky); }
.chaos-grid > :nth-child(6) { transform: rotate(-2deg) translateY(6px); }
.chaos-grid > :nth-child(7) { transform: rotate(1.5deg) translate(4px, -6px); --tile: var(--illo-signal); }
.chaos-grid > :nth-child(8) { transform: rotate(-3.5deg) translateY(2px); --tile: var(--illo-peach); }
.chaos-grid > :nth-child(9) { transform: rotate(5deg) translate(-2px, 4px); }
.chaos-grid > :nth-child(10) { transform: rotate(-1deg) translate(8px, -8px); --tile: var(--illo-tint-2); }
.chaos-grid > :nth-child(11) { transform: rotate(2deg) translateY(6px); --tile: var(--illo-orange); }
.chaos-grid > :nth-child(12) { transform: rotate(-2.5deg) translate(-6px, -2px); }
.chaos-grid > :nth-child(13) { transform: rotate(3deg) translateY(-6px); }
.chaos-grid > :nth-child(14) { transform: rotate(-4deg) translate(4px, 6px); }
.chaos-grid > :nth-child(15) { transform: rotate(1deg) translateY(-2px); --tile: var(--illo-magenta); }
.chaos-grid > :nth-child(16) { transform: rotate(-2deg) translate(6px, 4px); }
.cc-arrow { position: relative; justify-self: center; width: 40px; height: 2px; background: var(--color-accent); margin-top: var(--space-xl); }
.cc-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border: solid var(--color-accent); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.calm-card { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-band); color: var(--color-band-ink); box-shadow: var(--shadow-float); }
.calm-brand { display: flex; align-items: center; gap: var(--space-sm); margin: 0; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.calm-brand img { width: 40px; height: 40px; padding: var(--space-2xs); border-radius: var(--radius-input); background: var(--color-band-ink); }
.calm-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.calm-card li { position: relative; padding-left: var(--space-xl); font-weight: var(--weight-strong); }
.calm-card li::before { content: ""; position: absolute; left: 4px; top: 0.3em; width: 7px; height: 12px; border: solid var(--color-band-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.calm-foot { margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-band-muted); color: var(--color-band-muted); font-size: var(--text-sm); }
.chaos-calm figcaption { grid-column: 1 / -1; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.chaos-calm + .time-moments { margin-top: var(--space-2xl); }
@media (max-width: 60rem) {
  .chaos-calm { grid-template-columns: minmax(0, 1fr); }
  .cc-arrow { transform: rotate(90deg); margin: var(--space-sm) 0; }
  .chaos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .chaos { padding: var(--space-md); }
  .chaos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-xs); }
  .chaos-tile { min-height: 64px; }
}


/* ---------- Platform pages: signature diagram, feature grid, good-to-know strip ---------- */
.signature-art { margin: 0 auto; max-width: 1100px; }
.signature-art .paired-art { display: block; width: min(100%, 760px); margin-inline: auto; }
.signature-art .paired-art img { width: 100%; height: auto; }
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.feature-grid li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.feature-grid h3 { font-size: var(--text-title); }
.feature-grid p { color: var(--color-ink-2); }
.also-section { padding-top: 0; }
.also-section .every-plan { margin-top: 0; }
.also-section .every-plan p { display: grid; gap: var(--space-2xs); margin: 0; }
.also-section .every-plan span { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 75rem) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.signature-art.in-section { margin-block: 0 var(--space-2xl); }
.product-grid.with-visuals .module-visual { margin-bottom: var(--space-sm); }

/* ---------- Backstage: the blog, styled like the badge wall at registration ---------- */
.backstage-hero { padding-block: var(--space-3xl) var(--space-2xl); }
.backstage-hero h1 { font-size: clamp(3rem, 6vw + 1rem, 6rem); line-height: 1; }
.backstage-hero .lead { margin-top: var(--space-lg); }
.kind-filter { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ticket { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md) 0 var(--space-lg); border: 1px dashed var(--kind); border-radius: 6px; background: var(--kind-soft); color: var(--kind-ink); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.ticket::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--kind); }
.kind-announcement { --kind: var(--color-accent); --kind-soft: var(--color-accent-soft); --kind-ink: var(--color-accent); }
.kind-field-guide { --kind: var(--color-seal); --kind-soft: var(--color-seal-soft); --kind-ink: var(--color-seal-ink); }
.kind-straight-talk { --kind: var(--color-band); --kind-soft: var(--color-paper-3); --kind-ink: var(--color-ink); }
.backstage-list { padding-top: var(--space-xl); }
.badge-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.badge-card a { position: relative; display: grid; gap: var(--space-sm); padding: var(--space-2xl) var(--space-xl) var(--space-xl); border: 1px solid var(--color-rule); border-bottom: 10px solid var(--kind); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-ink); text-decoration: none; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.badge-card:nth-child(3n+1) a { transform: rotate(-1deg); }
.badge-card:nth-child(3n+2) a { transform: rotate(0.8deg); }
.badge-card:nth-child(3n) a { transform: rotate(-0.4deg); }
.badge-card a:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-float); }
.badge-card a:active { transform: translateY(-1px); }
.badge-hole { position: absolute; top: var(--space-md); left: 50%; width: 44px; height: 8px; margin-left: -22px; border-radius: 999px; background: var(--color-paper-3); box-shadow: inset 0 1px 2px oklch(20% 0.05 270 / 0.2); }
.badge-kind { justify-self: start; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--kind-soft); color: var(--kind-ink); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.badge-title { font: var(--display-weight) var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.badge-dek { color: var(--color-ink-2); }
.badge-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.badge-flag { justify-self: start; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-seal-ink); }
.badge-card.lead { grid-column: span 2; }
.badge-card.lead a { padding: var(--space-3xl) var(--space-2xl) var(--space-2xl); }
.badge-card.lead .badge-title { font-size: var(--text-display-s); }
.badge-wall.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--space-xl); }
.post-head { padding-block: var(--space-3xl) var(--space-xl); }
.post-head h1 { font-size: var(--text-display-s); max-width: 22ch; }
.post-head .lead { margin-top: var(--space-lg); }
.post-meta { display: flex; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.post .crumbs { margin-bottom: var(--space-lg); }
.post-body { padding-bottom: var(--section-gap-s); font-size: var(--text-lg); }
.post-body p, .post-body li { color: var(--color-ink-2); max-width: 68ch; }
.post-body > * + * { margin-top: var(--space-lg); }
.post-body h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); }
.post-lede { font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink) !important; }
.post-list { padding-left: var(--space-lg); display: grid; gap: var(--space-sm); }
.post-list.checklist { list-style: none; padding: 0; }
.post-list.checklist li { position: relative; padding-left: var(--space-xl); }
.post-list.checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border: 1.5px solid var(--color-seal); border-radius: 4px; }
.post-quote { margin: var(--space-2xl) 0; padding: var(--space-lg) var(--space-xl); border-left: 4px solid var(--color-seal); background: var(--color-paper-2); border-radius: 0 var(--radius-card) var(--radius-card) 0; font: var(--display-weight) var(--text-xl)/1.35 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.draft-note, .draft-banner { padding: var(--space-sm) var(--space-md); border: 1px dashed var(--color-seal); border-radius: var(--radius-input); background: var(--color-seal-soft); color: var(--color-seal-ink) !important; font-size: var(--text-sm); }
.draft-banner { display: inline-block; margin-bottom: var(--space-lg); }
.download-card { margin-top: var(--space-3xl) !important; padding: var(--space-2xl); border: 1px solid var(--color-rule); border-top: 6px solid var(--color-seal); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.download-kind { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-seal-ink) !important; }
.download-card h2 { margin: var(--space-xs) 0 var(--space-sm) !important; }
.download-form { display: grid; gap: var(--space-md); margin-top: var(--space-lg); font-size: var(--text-md); }
.download-form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink); }
.download-form input:not([type=checkbox]) { width: 100%; min-height: var(--control-h); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: inherit; font-weight: var(--weight-body); }
.download-form .consent { display: flex; align-items: center; gap: var(--space-sm); font-weight: var(--weight-body); }
.download-form .consent input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.download-form .button { justify-self: start; }
.download-status { font-size: var(--text-sm); color: var(--color-ink-2); min-height: 1.4em; }
@media (max-width: 60rem) { .badge-wall { grid-template-columns: minmax(0, 1fr); } .badge-card.lead { grid-column: auto; } .badge-card a { transform: none !important; } .download-card { padding: var(--space-xl) var(--space-lg); } }
.badge-cover { display: block; aspect-ratio: 16 / 9; margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-xs); border-radius: 8px; background: var(--color-paper-2); overflow: hidden; }
.badge-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-cover { display: block; aspect-ratio: 16 / 9; margin-top: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.download-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.download-form .cf-turnstile { min-height: 65px; }
.download-page .wrap { display: grid; gap: var(--space-lg); padding-block: var(--space-3xl); }
.download-page h1 { font-size: var(--text-display-s); }

/* ---------- Phone spacing: tighter tops and head-to-content gaps ---------- */
@media (max-width: 40rem) {
  :root, [data-theme="dark"] { --section-gap-s: 48px; }
  .hero, .home-hero { padding-block: var(--space-lg) var(--space-xl); }
  .pricing-hero, .backstage-hero { padding-block: var(--space-lg) var(--space-md); }
  .post-head { padding-block: var(--space-lg) var(--space-md); }
  .legal-page, .download-page .wrap { padding-top: var(--space-lg); }
  .crumbs, .post .crumbs { margin-bottom: var(--space-md); }
  .new-pill { margin-bottom: var(--space-lg); }
  .section-head { margin-bottom: var(--space-xl); }
  .section-head.split-head { row-gap: var(--space-sm); }
  .hero-copy h1 + .lead, .post-head .lead, .backstage-hero .lead, .pricing-hero .intro { margin-top: var(--space-md); }
  .actions { margin-top: var(--space-lg); }
  .kind-filter { margin-top: var(--space-lg); }
  .backstage-list { padding-top: var(--space-md); }
  .post-cover { margin-top: var(--space-lg); }
  .signature-section .section-head { margin-bottom: var(--space-lg); }
}

/* Backstage notice bar, shown on every page when a featured notice asks for it (placement hero_and_bar). */
.site-notice { border-bottom: 1px solid var(--color-rule); background: var(--color-accent-soft); }
.site-notice .wrap { display: flex; justify-content: center; padding-block: var(--space-2xs); }
.site-notice-link { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 32px; color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; }
.site-notice-link span { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-accent); font-weight: var(--weight-strong); }
.site-notice-link:hover { text-decoration: underline; }
.site-notice-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Powered by Accordo: the page people reach from "Powered by Accordo" in a portal, program or map. */
.help-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: help; }
.help-grid li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-strong); counter-increment: help; }
.help-grid li:first-child { border-top-color: var(--color-accent); }
.help-grid li::before { content: counter(help); font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.help-grid h3 { font-size: var(--text-title); }
.help-grid p { color: var(--color-ink-2); }
.role-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.role-card { display: grid; gap: var(--space-md); align-content: start; justify-items: start; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); scroll-margin-top: calc(72px + var(--space-lg)); }
.role-card:target { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.role-card h3 { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-2xl); }
.role-card h3 svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-accent); }
.role-card > p { color: var(--color-ink-2); }
.role-card .check-list { gap: var(--space-xs); }
.pb-cycle { margin-bottom: var(--space-2xl); }
.pb-benefits h3 { font-size: var(--text-lg); }
.pb-more { margin-top: var(--space-xl); color: var(--color-ink-2); max-width: 65ch; }
.pb-org-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.pb-org-grid h2 { margin-bottom: var(--space-lg); }
.pb-org-grid .lead { color: var(--color-ink-2); }
#your-part, #how, #organizers { scroll-margin-top: 72px; }
@media (max-width: 64rem) {
  .role-grid { grid-template-columns: minmax(0, 1fr); }
  .help-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .pb-org-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .role-card { padding: var(--space-lg); }
  .role-card h3 { font-size: var(--text-title); }
}