/* Hallmark · shape: Feature Stack (/) and Narrative Workflow (/products/rafit/) · genre: editorial · theme: Ink (by request) · redesign: full
 * hero: Settled (/), Stage (/products/rafit/) · nav: edge-aligned · footer: mast · imagery: the product · signature: a hueless studio that hands each product its own ground · ink: paper, no teal · surface: absolute
 * axes: light/grotesk-sans/neutral · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the home page is short by design; RaFit's tile carries the mass with the real app and console */
/* Hallmark · waive 22 · ink and greys at zero chroma · the studio is printed in plain black so each product's own colour is the only colour */
/* Hallmark · waive 38ii · RaFit's heads are condensed italic capitals · that is the app's own display setting, used only inside RaFit's ground */
/* Hallmark · waive 7b · pure black on RaFit's ground · RaFit's app is drawn on #000000, so its page and tiles use the same black */
/* Hallmark · waive 23 · the black fills the hero picture and the RaFit tile · it is RaFit's own ground, a picture of the product, not a studio accent */
/* Hallmark · waive 77 · the home page has four sections · the owner asked for a plain studio site with RaFit as its one product */
/* Hallmark · dropped the ocean drawing, the incubation steps and the planned locations · the owner asked for a plain studio site that does not describe its strategy */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;600;700&family=Barlow+Condensed:ital,wght@1,700&display=swap');
@import url('./tokens.css');
@import url('./base.css');

body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); }
a { font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
a:not(:hover) { text-decoration: none; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); }
.skip:focus { top: var(--space-md); }

/* Chrome */
.site-header { min-height: 88px; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: var(--space-xs); align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.055em; color: var(--color-ink); }
.brand svg { width: 32px; height: 32px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; }
.site-header nav a[aria-current="page"] { font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border-radius: 10px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn:hover { text-decoration: none; background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.link { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: .25em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; }
.site-footer { padding-block: var(--space-2xl) var(--space-lg); }
.footer-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg) var(--space-xl); }
.footer-wordmark { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 12rem); letter-spacing: -.075em; font-weight: 700; line-height: .9; color: var(--color-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.footer-bottom a { font-weight: 400; display: inline-flex; align-items: center; min-height: 44px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); font-size: var(--text-sm); }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; }
.legal-links a[aria-current="page"] { font-weight: 600; }

/* Home */
.hero { display: grid; grid-template-columns: fit-content(760px) minmax(0, 500px); justify-content: space-between; column-gap: var(--space-2xl); row-gap: var(--space-xl); align-items: center; min-height: calc(100svh - 88px); max-height: 980px; padding-block: var(--space-lg) var(--space-2xl); }
.hero h1 { font-size: clamp(3rem, 6.8vw, 6.75rem); line-height: .98; max-width: 13ch; }
.hero .lead { margin-block: var(--space-lg) var(--space-xl); max-width: 34ch; }
.hero-product { background: var(--rafit-ground); color: var(--rafit-ink); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg) 0; display: flex; justify-content: center; overflow: hidden; }
.hero-product { height: min(620px, calc(100svh - 220px)); align-items: flex-start; }
.hero-product img { width: 84%; max-width: 380px; border-radius: 22px 22px 0 0; }
.hero figcaption, .shot-caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md) var(--space-2xl); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-ink); }
.section-head h2 { font-size: var(--text-section); }
.section-head p { color: var(--color-muted); font-size: var(--text-sm); }
.products { padding-block: var(--space-2xl) var(--section-gap-s); }
.tile { margin-top: var(--space-xl); background: var(--rafit-ground); color: var(--rafit-ink); border-radius: var(--radius-card); overflow: hidden; --color-focus: var(--rafit-volt); }
.tile-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); padding: var(--space-2xl) var(--space-2xl) 0; align-items: end; }
.tile-copy { padding-bottom: var(--space-2xl); }
.tile .rafit-mark { font-size: clamp(4rem, 8vw, 7.5rem); }
.tile-line { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.35; color: var(--rafit-ink); max-width: 24ch; }
.facts { margin: var(--space-xl) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); border-top: var(--rule-hair) solid var(--rafit-line); padding-top: var(--space-md); font-size: var(--text-sm); }
.facts dt { color: var(--rafit-muted); }
.facts dd { margin: var(--space-2xs) 0 0; color: var(--rafit-ink); }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: end; }
.phones img { border-radius: 18px 18px 0 0; }
.phones img:nth-child(2) { transform: translateY(calc(-1 * var(--space-xl))); }
.tile-console { border-top: var(--rule-hair) solid var(--rafit-line); background: var(--rafit-surface); padding: var(--space-2xl) var(--space-2xl) 0; }
.tile-console img { border-radius: 8px 8px 0 0; }
.tile .shot-caption { color: var(--rafit-muted); padding-block: var(--space-md); }
.tile .link { color: var(--rafit-ink); }
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-ink); }
.about h2 { font-size: var(--text-section); }
.about .statement { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.25; letter-spacing: -.025em; color: var(--color-ink); max-width: 28ch; }
.about p + p { margin-top: var(--space-lg); color: var(--color-muted); }

/* RaFit: the product's own ground */
.rafit-page { background: var(--rafit-ground); color: var(--rafit-muted); --color-focus: var(--rafit-volt); scrollbar-color: var(--rafit-surface-2) var(--rafit-ground); }
.rafit-page h1, .rafit-page h2, .rafit-page h3, .rafit-page .brand, .rafit-page .footer-wordmark { color: var(--rafit-ink); }
.rafit-page .footer-bottom { border-color: var(--rafit-line); color: var(--rafit-muted); }
.rafit-mark, .rafit-page h1, .rafit-page h2 { font-family: var(--font-outlier); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; line-height: 1; }
.rafit-mark { display: block; color: var(--rafit-volt); }
.product-bar { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); align-items: center; border-block: var(--rule-hair) solid var(--rafit-line); font-size: var(--text-sm); }
.product-bar .rafit-mark { font-size: 28px; margin-right: auto; min-height: 48px; display: inline-flex; align-items: center; }
.product-bar a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 400; color: var(--rafit-ink); }
.btn--volt { background: var(--rafit-volt); border-color: var(--rafit-volt); color: var(--rafit-volt-ink); }
.btn--volt:hover { background: var(--rafit-ink); border-color: var(--rafit-ink); }
.rafit-page .link { color: var(--rafit-ink); }
.r-hero { display: grid; grid-template-columns: fit-content(760px) minmax(0, 500px); justify-content: start; column-gap: var(--space-2xl); row-gap: var(--space-xl); align-items: center; min-height: calc(100svh - 160px); max-height: 980px; padding-block: var(--space-lg) var(--space-2xl); }
.r-hero h1 { font-size: clamp(3.5rem, 7.5vw, 7.5rem); max-width: 12ch; }
.r-hero .lead { margin-block: var(--space-md) var(--space-lg); color: var(--rafit-ink); max-width: 32ch; }
.r-hero .soon { margin-top: var(--space-md); font-size: var(--text-sm); }
.r-hero-shot { background: var(--rafit-surface); color: var(--rafit-ink); height: min(620px, calc(100svh - 240px)); align-items: flex-start; border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg) 0; display: flex; justify-content: center; overflow: hidden; }
.r-hero-shot img { width: 84%; max-width: 380px; border-radius: 22px 22px 0 0; }
.r-section { padding-block: var(--section-gap-s); background: linear-gradient(var(--rafit-line), var(--rafit-line)) center top / calc(100% - 2 * var(--gutter)) var(--rule-hair) no-repeat; }
.r-head { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); justify-content: space-between; align-items: end; }
.r-head h2 { font-size: clamp(2.75rem, 6vw, 5.5rem); max-width: 14ch; }
.r-head p { max-width: 46ch; }
.pillars { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.pillars li { border-top: 3px solid var(--rafit-ink); padding-top: var(--space-md); }
.pillars li.lift { border-color: var(--rafit-volt); } .pillars li.fuel { border-color: var(--rafit-fuel); } .pillars li.recover { border-color: var(--rafit-recover); }
.pillars h3 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.pillars p { margin-top: var(--space-xs); }
.screens { margin-top: var(--space-3xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.screens figure { margin: 0; }
.screens .well { background: var(--rafit-surface); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg) 0; display: flex; justify-content: center; overflow: hidden; }
.screens img { width: 78%; max-width: 260px; border-radius: 18px 18px 0 0; }
.screens figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); }
.screens figcaption strong { color: var(--rafit-ink); font-weight: 600; }
.promises { background: var(--rafit-surface); }
.promises .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); padding-block: var(--space-3xl); }
.promises h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); }
.promises ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); }
.promises li { border-top: var(--rule-hair) solid var(--rafit-surface-2); padding-block: var(--space-md); color: var(--rafit-ink); }
.console { margin-top: var(--space-2xl); }
.console img { border-radius: 10px; border: var(--rule-hair) solid var(--rafit-line); }
.console-pair { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.console-pair figure, .console { margin-inline: 0; }
.console-pair figcaption, .console figcaption { margin-top: var(--space-md); }
.console-pair h3 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.console-pair p { margin-top: var(--space-2xs); }
.trust { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.trust li { border-top: var(--rule-hair) solid var(--rafit-ink); padding-top: var(--space-md); }
.trust h3 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.trust p { margin-top: var(--space-xs); }
.join { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; background: var(--rafit-volt); color: var(--rafit-volt-ink); border-radius: var(--radius-card); padding: var(--space-2xl); margin-bottom: var(--section-gap-s); --color-focus: var(--rafit-volt-ink); }
.rafit-page .join h2 { color: var(--rafit-volt-ink); font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 14ch; }
.join p { margin-top: var(--space-md); max-width: 46ch; }
.join .actions { justify-content: flex-end; }
.join .btn--primary { background: var(--rafit-volt-ink); border-color: var(--rafit-volt-ink); color: var(--rafit-volt); }
.join .link { color: var(--rafit-volt-ink); }

/* Legal and support pages */
.legal-head { padding-block: var(--space-2xl) var(--space-xl); }
.legal-head h1 { font-size: var(--text-display-s); }
.legal-head .lead { margin-top: var(--space-lg); }
.legal-meta { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.legal-draft { margin-top: var(--space-md); max-width: 65ch; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; font-size: var(--text-sm); }
.pending { background: var(--color-paper-3); border-radius: 4px; padding-inline: var(--space-2xs); font-weight: 600; }
.legal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-xl); align-items: start; border-top: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-xl) var(--section-gap-s); }
.legal-toc { position: sticky; top: var(--space-lg); font-size: var(--text-sm); }
.legal-toc p { color: var(--color-muted); margin-bottom: var(--space-sm); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 400; }
.prose { max-width: 68ch; }
.prose section + section { margin-top: var(--space-2xl); }
.prose h2 { font-size: var(--text-xl); letter-spacing: -.02em; margin-bottom: var(--space-md); }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p, .prose p + .table-wrap, .prose .table-wrap + p { margin-top: var(--space-md); }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-xs); }
.prose a { text-decoration: underline; text-underline-offset: .2em; }
.prose strong { font-weight: 600; color: var(--color-ink); }
.table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-ink); }
.prose th { text-align: left; font-weight: 600; color: var(--color-muted); padding: var(--space-xs) var(--space-md) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.prose td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: top; }

@media (max-width: 60rem) {
  .hero, .r-hero { min-height: 0; }
  .hero-product, .r-hero-shot { height: auto; max-height: 520px; }
  .hero, .tile-top, .about, .r-hero, .promises .container, .join, .legal { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: var(--space-xl); padding-top: var(--space-lg); }
  .tile-top, .tile-console { padding-inline: var(--space-lg); }
  .tile-top { padding-top: var(--space-xl); gap: var(--space-lg); }
  .tile-copy { padding-bottom: 0; }
  .phones { margin-top: var(--space-md); }
  .phones img:nth-child(2) { transform: none; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust, .console-pair { grid-template-columns: minmax(0, 1fr); }
  .join .actions { justify-content: flex-start; }
  .legal-toc { position: static; }
  .legal-toc ol { column-count: 2; column-gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .site-header { min-height: 72px; }
  .brand { font-size: 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .screens, .promises ul, .pillars { grid-template-columns: minmax(0, 1fr); }
  .screens .well { padding-top: var(--space-lg); }
  .join { padding: var(--space-xl) var(--space-lg); }
  .phones { gap: var(--space-xs); }
  .legal-toc ol { column-count: 1; }
}