/* ArcComplete — inner pages: page hero, editorial rows, product gallery, loop, sub-nav, features */

/* ---------------------------------------------------------------- page hero */
.page-hero { position: relative; min-height: 72svh; display: grid; align-items: end; padding: 200px 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.page-hero--short { min-height: 0; padding-top: 180px; }
.page-hero__arc { position: absolute; right: -24vw; top: 2vw; width: clamp(520px, 64vw, 1000px); aspect-ratio: 1; pointer-events: none; opacity: 0.75; }
.page-hero__light { position: absolute; right: -10vw; top: -20vw; width: 70vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(0, 116, 252, 0.14), rgba(0, 116, 252, 0) 100%); pointer-events: none; }
.page-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.page-hero__copy .t-hero { max-width: 14ch; }
.page-hero__copy .t-lead { max-width: 36rem; }
.page-hero__eyebrow { animation: rise 600ms var(--ease-out) 200ms both; }
.page-hero__title { animation: rise 700ms var(--ease-out) 300ms both; }
.page-hero__lead { animation: rise 600ms var(--ease-out) 460ms both; }
.page-hero__actions { animation: rise 600ms var(--ease-out) 580ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- section head + editorial rows */
.section-head { display: flex; flex-direction: column; gap: 20px; max-width: var(--measure-wide); }
.rows { margin-top: 56px; border-top: 1px solid var(--s-line); }
.row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--s-line); }
.row--num { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); }
.row__num { font-size: 13px; color: var(--s-fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; padding-top: 10px; }
.row h3, .row h2 { font-size: clamp(24px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.row p { color: var(--s-fg-2); font-size: var(--t-lead); line-height: 1.5; max-width: 34rem; text-wrap: pretty; }
.row p.serif-i, .pull { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; letter-spacing: -0.005em; }
.row p + p { margin-top: 14px; }
.row ul { display: flex; flex-direction: column; gap: 10px; color: var(--s-fg-2); font-size: var(--t-lead); }
.row li { display: flex; gap: 12px; }
.row li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 12px; border-radius: 50%; border: 1px solid var(--s-fg-3); }

/* ---------------------------------------------------------------- product gallery */
.gallery { padding-top: 0; }
.product { position: relative; min-height: 88svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(64px, 8vw, 120px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.product__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.product__copy .t-editorial { font-size: clamp(44px, 5.6vw, 88px); }
.product__copy .status { margin-top: 4px; }
.product__visual { position: relative; display: grid; place-items: center; min-height: 420px; gap: 18px; }
.product__caption { font-size: 13px; color: var(--fg-3); text-align: center; }
.product__systems { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 4px; }
.product__systems div { padding-top: 10px; border-top: 1px solid var(--line); }
.product__systems dt { font-size: 14px; font-weight: 500; color: var(--fg); margin-bottom: 3px; }
.product__systems dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.product__visual .device--sm { position: relative; }
.product__ring { position: relative; width: min(100%, 460px); aspect-ratio: 1; display: grid; place-items: center; }
.product__ring svg.arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.product__ring .word { position: relative; font-size: clamp(64px, 8vw, 120px); font-weight: 500; letter-spacing: -0.05em; color: var(--fg-4); line-height: 1; transition: color 500ms var(--ease-out); }
.product:hover .product__ring .word { color: var(--fg-3); }
.product__ring .icon { position: absolute; width: 56px; height: 56px; right: 14%; top: 14%; }
.product__ring .icon svg { width: 100%; height: 100%; }
.product--current .product__ring .icon { color: var(--arc-bright); }
.product__ring .word--body::after {
  /* hovering the product faintly traces a partial Arc behind the word */
  content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(0, 116, 252, 0.0); border-right-color: transparent; transition: border-color 500ms var(--ease-out);
}
.product:hover .product__ring .word--body::after { border-color: rgba(0, 116, 252, 0.35); border-right-color: transparent; }

/* ---------------------------------------------------------------- philosophy loop */
.loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; margin-top: 64px; }
.loop__ring { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.loop__ring svg { width: 100%; height: 100%; overflow: visible; }
.loop__ring .track { stroke: rgba(245, 244, 239, 0.07); stroke-width: 1; }
.loop__label { position: absolute; transform: translate(-50%, -50%); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); padding: 6px 10px; background: var(--bg); border-radius: 999px; }
.loop__steps { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.loop__step { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.loop__step b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.loop__step p { color: var(--fg-2); }

/* ---------------------------------------------------------------- roadmap (company) */
.roadmap { position: relative; margin-top: 64px; padding: 48px 0 0; }
.roadmap svg { width: 100%; height: auto; overflow: visible; }
.roadmap path { fill: none; }
.roadmap .track { stroke: rgba(245, 244, 239, 0.08); stroke-width: 1; }
.roadmap .lit { stroke: var(--arc); stroke-width: 2; }
.roadmap .stop { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1.2; }
.roadmap .stop--lit { fill: var(--arc); stroke: var(--arc); }
.roadmap__labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.roadmap__labels div { font-size: 14px; color: var(--fg-3); }
.roadmap__labels .app-icon { margin-bottom: 10px; }
.roadmap__labels b { display: block; color: var(--fg-2); font-weight: 500; font-size: 15px; }
.roadmap__labels div:first-child b { color: var(--fg); }
.roadmap__note { margin-top: 24px; font-size: 14px; color: var(--fg-3); }

/* founder (company) */
.founder { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); margin-top: 56px; align-items: start; }
.founder--text { grid-template-columns: minmax(0, 1fr); }
.founder__rows { margin-top: 0; }
.row[data-accent] h3 .app-icon { margin-right: 10px; }

/* ---------------------------------------------------------------- journal */
.journal__intro { max-width: 40rem; }
.journal__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; margin-top: 72px; }
.journal__group h2 { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-3); font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.entry { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.entry h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.01em; line-height: 1.2; }
.entry small { font-size: 13px; color: var(--fg-3); }

/* ---------------------------------------------------------------- arcbody: sub-nav + features */
.subnav { position: sticky; top: 0; z-index: 60; background: rgba(7, 8, 11, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 56px; }
.subnav__brand { font-weight: 500; font-size: 15px; display: inline-flex; gap: 10px; align-items: center; }
.subnav__brand a { color: var(--fg-3); transition: color var(--micro) var(--ease-out); }
.subnav__brand a:hover { color: var(--fg); }
.subnav__brand em { font-style: normal; color: var(--fg-3); }
.subnav__brand i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--arc); border-right-color: transparent; }
.subnav__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav__links a { padding: 8px 12px; font-size: 14px; color: var(--fg-2); border-radius: var(--r-xs); white-space: nowrap; transition: color var(--micro) var(--ease-out); }
.subnav__links a:hover { color: var(--fg); }
.subnav__links { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.subnav__links::-webkit-scrollbar { display: none; }
/* On a phone this row overflowed: the section links were clipped and the trailing button
   sat half off-screen, unreachable. Give the links the whole width as a scrolling rail and
   drop the two things the phone already has — the brand (in the navigation above) and the
   waitlist button (in the sticky bar below). */
@media (max-width: 700px) {
  .subnav__inner { gap: 0; }
  .subnav__brand, .subnav__inner > .btn { display: none; }
  .subnav__links { flex: 1; min-width: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .subnav__links a { padding: 10px 12px; }
}

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; padding: clamp(72px, 9vw, 140px) 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.feature--flip .feature__copy { order: 2; }
.feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.feature__copy .t-section { max-width: 14ch; }
.feature__copy ul { display: flex; flex-direction: column; gap: 10px; color: var(--fg-2); margin-top: 8px; }
.feature__copy li { display: flex; gap: 12px; }
.feature__copy li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; border: 1px solid var(--fg-3); }
.feature__visual { display: grid; place-items: center; position: relative; }
.feature__visual .glow { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(0, 116, 252, 0.10), rgba(0, 116, 252, 0) 100%); pointer-events: none; }
.feature__visual .device { position: relative; }
.feature__modules { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 460px); }
.feature__modules .card { padding: 16px 18px; font-size: 13px; }
.feature__modules .ui-label { margin-bottom: 8px; }
.feature__modules .ui-value { font-size: 22px; }
.feature__flow { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 6px; font-size: 14px; color: var(--fg-3); }
.feature__flow svg { width: 28px; height: 12px; }
.feature__flow b { color: var(--fg); font-weight: 500; }

.arcbody-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.arcbody-hero .device { margin: 0 auto; }

.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.pricing .card { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pricing h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.pricing .price { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; }
.pricing ul { display: flex; flex-direction: column; gap: 8px; color: var(--fg-2); font-size: 15px; }

/* ---------------------------------------------------------------- generic CTA band */
.cta-band { text-align: center; }
.cta-band .t-editorial { margin-inline: auto; max-width: 16ch; }
.cta-band .waitlist { margin: 32px auto 0; }
.cta-band .waitlist__tester { align-self: center; }
.cta-band .cluster { justify-content: center; margin-top: 28px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .page-hero { padding-top: 140px; min-height: 0; }
  .page-hero__arc { right: -30vw; top: -20vw; width: 110vw; opacity: 0.6; }
  .row, .row--num { grid-template-columns: 1fr; gap: 12px; }
  .row--num { grid-template-columns: 56px 1fr; }
  .row--num p, .row--num ul { grid-column: 2; }
  .product, .loop, .feature, .arcbody-hero { grid-template-columns: 1fr; }
  .product { min-height: 0; }
  .feature--flip .feature__copy { order: 0; }
  .roadmap__labels { grid-template-columns: repeat(3, 1fr); }
  .feature__modules { overscroll-behavior-x: contain; }
  .journal__groups { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .loop__step { grid-template-columns: 96px 1fr; }
  .founder { grid-template-columns: 1fr; }
  .product__systems { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feature__modules { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; width: auto; scrollbar-width: none; }
  .feature__modules::-webkit-scrollbar { display: none; }
  .feature__modules .card { flex: 0 0 64vw; scroll-snap-align: center; }
  .feature__flow { flex: 0 0 100%; }
}

/* ================================================================ colour round additions */
.page-hero__glow { --gx: 82%; --gy: 22%; --gw: min(80vw, 1000px); --go: 0.5; }
.page-hero__glow--b { --gx: 20%; --gy: 90%; --gw: min(50vw, 600px); --go: 0.3; }

/* products: tinted sections + index rail */
.gallery { position: relative; }
.rail { position: sticky; top: 50%; transform: translateY(-50%); float: right; margin-right: 22px; width: 0; height: 0; z-index: 5; }
.rail ul { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; transform: translateX(-100%); }
.rail a { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); transition: color 300ms var(--ease-out); white-space: nowrap; }
.rail a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.rail a.is-current { color: var(--accent); }
.rail a.is-current::before { transform: scale(1.4); box-shadow: 0 0 0 4px var(--accent-soft); }
.rail a span { opacity: 0; transform: translateX(4px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.rail a.is-current span, .rail:hover a span { opacity: 1; transform: none; }
.product { position: relative; }
.product__glow { --gx: 78%; --gy: 50%; --gw: min(56vw, 720px); --go: 0.5; }
.product__ring .word { color: var(--accent); opacity: 0.55; }
.product:hover .product__ring .word { opacity: 0.9; color: var(--accent); }
.product__ring .icon { color: var(--accent); }
.product__ring .icon path, .product__ring .icon circle { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1200ms var(--ease-out); }
.product__visual.is-in .icon path, .product__visual.is-in .icon circle { stroke-dashoffset: 0; }
.product__ring svg.arc-svg .arc-faint { stroke: var(--accent); opacity: 0.4; }
.product__copy .status--tint { color: var(--accent); }

/* philosophy loop + company roadmap: coloured stops */
.loop__label { color: var(--accent); }
.roadmap .stop--lit { fill: var(--c-body); stroke: var(--c-body); }
.roadmap .stop[data-accent] { stroke: var(--accent); }
.roadmap__labels div b { color: var(--accent); }

/* journal: entry cards + reading progress */
.journal__groups { gap: 32px 32px; }
.journal__group h2 { color: var(--accent); border-bottom-color: var(--accent-soft); }
.entry { padding: 20px; border-radius: var(--r-md); border: 1px solid var(--line); margin-top: 10px; transition: transform var(--interface) var(--ease-out), border-color var(--interface) var(--ease-out), background var(--interface) var(--ease-out); }
.entry:hover { transform: translateY(-3px); border-color: var(--accent-soft); background: var(--accent-soft); }
.entry small { display: inline-flex; align-items: center; gap: 8px; }
.entry small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.read { position: sticky; top: 92px; float: right; width: 44px; height: 44px; z-index: 5; margin-right: calc(-1 * var(--gutter) + 16px); }
.read svg { width: 44px; height: 44px; }
.read .arc-core { stroke: var(--accent); stroke-width: 2; }
.read .arc-faint { stroke-width: 2; }

/* intelligence rows: product colour per row */
.row[data-accent] h3 { display: flex; align-items: center; gap: 12px; }
.row[data-accent] h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* arcbody: tinted feature sections */
.feature__visual .glow { background: radial-gradient(circle closest-side, var(--accent-soft), transparent 100%); }
.feature__modules .card { transition: transform var(--interface) var(--ease-out), border-color var(--interface) var(--ease-out); }
.feature__modules .card:hover { transform: translateY(-2px); border-color: var(--accent-soft); }
@media (max-width: 900px) { .rail, .read { display: none; } }

/* ---------------------------------------------------------------- status page */
.status-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 18px 0 0; border-top: 1px solid var(--line); margin-top: 8px; }
.status-facts div { display: flex; flex-direction: column; gap: 4px; }
.status-facts b { font-weight: 500; font-size: 15px; }
.stages { display: flex; flex-direction: column; border-left: 1px solid var(--line); margin-left: 8px; }
.stage { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 0 0 40px; }
.stage__marker { position: absolute; left: -7px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--fg-4); }
.stage--done .stage__marker { background: var(--accent); border-color: var(--accent); }
.stage--current .stage__marker { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); animation: status-pulse 2.6s var(--ease-in-out) infinite; }
.stage__body { grid-column: 2; display: flex; flex-direction: column; gap: 8px; max-width: 46rem; }
.stage__state { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-mono); }
.stage--done .stage__state, .stage--current .stage__state { color: var(--accent); }
.stage--done .t-title { color: var(--fg-2); }
.stage p:not(.stage__state) { color: var(--fg-2); }
.next-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.next-list li { padding: 20px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--s-line); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.row__date { display: block; font-size: 13px; font-weight: 400; color: var(--s-fg-3); margin-top: 6px; letter-spacing: 0; }
.rows--nested { margin-top: 0; border-top: 0; }
.rows--nested .row { padding: 18px 0; }
.rows--nested .row:last-child { border-bottom: 0; }
.row h4 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }

/* ---------------------------------------------------------------- legal + posts (long text) */
.legal, .post { max-width: 46rem; font-size: var(--t-lead); line-height: 1.6; color: var(--fg-2); }
.legal h2, .post h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.025em; color: var(--fg); margin: 48px 0 14px; line-height: 1.1; }
.legal h3, .post h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; color: var(--fg); margin: 32px 0 10px; }
.legal p + p, .post p + p { margin-top: 16px; }
.legal ul, .post ul { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; padding-left: 0; }
.legal li, .post li { display: flex; gap: 12px; }
.legal li::before, .post li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 12px; border-radius: 50%; border: 1px solid var(--fg-3); }
.legal a, .post a { color: var(--arc-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal strong, .post strong { color: var(--fg); font-weight: 500; }
.post__cover { width: 100%; border-radius: var(--r-lg); margin-bottom: 32px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--graphite); transition: transform var(--interface) var(--ease-out), border-color var(--interface) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); border-color: var(--accent-soft); }
.post-card__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); }
.post-card .eyebrow { color: var(--accent); }
.post-card h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }

/* ---------------------------------------------------------------- press kit */
.facts { display: grid; gap: 10px; margin: 0; }
.facts div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
.facts dt { color: var(--s-fg-3); font-size: 14px; }
.facts dd { margin: 0; color: var(--s-fg); }
.press-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.press-card { padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 40px rgba(11, 12, 15, 0.06); }
.press-card__preview { position: relative; display: grid; place-items: center; min-height: 160px; border-radius: var(--r-md); background: var(--warm-2); overflow: hidden; margin-bottom: 8px; }
.press-card__preview--dark { background: var(--bg); }
.press-card__preview--photo { aspect-ratio: 4 / 3; }
.press-card__preview--photo img { width: 100%; height: 100%; object-fit: cover; }
.press-card__preview--photo .photo-slot { background: linear-gradient(180deg, #ECE9E1, #E3DFD5); color: var(--warm-fg-3); }
.press-card__preview--photo .photo-slot::before { border-color: rgba(11, 12, 15, 0.18); }
.press-card__preview--photo .photo-slot span { color: var(--warm-fg-2); }
.press-card__icons { display: flex; gap: 10px; flex-wrap: wrap; padding: 24px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px; }
.swatches i { display: block; aspect-ratio: 1; border-radius: var(--r-sm); }


@media (max-width: 900px) {
  .next-list, .posts, .press-grid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* Three roadmap columns on a 390px screen leaves four words per line. The drawn track
   has six stops spaced to sit above six columns, so once the labels wrap it corresponds
   to nothing and reads as a stray squiggle; the labels carry the meaning without it. */
@media (max-width: 520px) {
  .roadmap { margin-top: 40px; padding-top: 0; }
  .roadmap > svg { display: none; }
  .roadmap__labels { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-top: 0; }
}

/* ---------------------------------------------------------------- Food Data: the business block */
.fd-business { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fd-business__points { display: flex; flex-direction: column; gap: 10px; color: var(--s-fg-2); font-size: var(--t-lead); }
.fd-business__points li { display: flex; gap: 12px; }
.fd-business__points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 12px; border-radius: 50%; border: 1px solid var(--s-fg-3); }
.fd-business__form { padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--s-line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 40px rgba(11, 12, 15, 0.06); }
.fd-business__form .t-title { margin-bottom: 18px; }
.fd-business__form .waitlist { max-width: none; }
@media (max-width: 900px) { .fd-business { grid-template-columns: 1fr; } }
/* the sticky bar sells the ArcBody waitlist, which is not what a business reading this page came for */
.page-fooddata .mobile-bar { display: none; }
@media (max-width: 1023px) { .page-fooddata .footer { padding-bottom: 40px; } }

/* ---------------------------------------------------------------- method page (arcbody/method) */
.method-nav { margin-top: 4px; }
.method-nav .chip { height: 34px; padding: 0 14px; font-size: 13px; }
.method-nav .chip:hover { background: var(--accent); color: #fff; }
/* a formula reads as code, set apart from the sentence that explains it */
.formula { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--s-line); background: rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 14px; line-height: 1.65; color: var(--s-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.theme-warm .formula { background: rgba(255, 255, 255, 0.65); }
.row--num > div > p + .formula { margin-top: 12px; }
.example { margin-top: 56px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); border: 1px solid var(--s-line); background: rgba(255, 255, 255, 0.03); }
.theme-warm .example { background: #fff; }
.example h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.example > p { margin-top: 8px; color: var(--s-fg-2); max-width: 44rem; }
.example dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 20px; border-top: 1px solid var(--s-line); }
.example dt, .example dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--s-line); }
.example dt { color: var(--s-fg-2); padding-right: 16px; }
.example dd { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--s-fg); white-space: nowrap; }
.example dd b { font-weight: 600; }
.method-links { margin-top: 32px; }
@media (max-width: 900px) {
  .row--num > div { grid-column: 2; }
  /* on the method page the explanation and its formula take the full width under the title */
  .page-method .row--num > div { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .formula { font-size: 12.5px; padding: 10px 12px; } }
@media (max-width: 420px) { .example dd { white-space: normal; } .formula { font-size: 12px; } }