/* clawback.capital static site — the few rules that are the site's own, on top of
 * ui/tokens.css + ui/ui.css (gh-634 / UI system U6). Tokens only, never hex. */

/* Skip link (a11y) — hidden until focused */
.skip { position: absolute; top: -100px; inset-inline-start: var(--space-4); z-index: 100; padding: 8px 12px; border-radius: var(--radius-control); background: var(--primary); color: var(--primary-foreground); font: var(--text-body-md); }
.skip:focus { top: var(--space-4); }

/* ── Marketing root ─────────────────────────────────────────────────── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-4); min-height: 72px; padding: 0 var(--space-7); background: var(--background); border-bottom: 1px solid var(--border); }
.site-nav .brand-row { flex: none; }
.site-links { display: flex; align-items: center; gap: var(--space-5); margin-inline-start: auto; }
.site-links a { font: var(--text-body-md); color: var(--muted-foreground); }
.site-links a:hover { color: var(--foreground); text-decoration: none; }
.site-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.site-main { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8) var(--space-7); }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-8) 0 var(--space-6); }
.hero h1 { font: 700 44px/52px var(--font-sans); letter-spacing: -.02em; max-width: 900px; }
.hero-lede { font: 400 16px/24px var(--font-sans); color: var(--muted-foreground); max-width: 680px; }
.hero .actions { justify-content: center; margin-top: var(--space-2); }
.products .card-title { font: var(--text-h3); }
.products .card p { font: var(--text-small); color: var(--muted-foreground); }
.site-footer { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border); font: var(--text-caption); font-weight: 400; color: var(--muted-foreground); }
.site-footer a { color: var(--muted-foreground); }
@media (max-width: 767.98px) {
  .site-nav { flex-wrap: wrap; min-height: 0; padding: var(--space-3) var(--space-4); }
  .site-links { order: 3; width: 100%; margin-inline-start: 0; gap: var(--space-4); }
  .site-actions { margin-inline-start: auto; }
  .site-main { padding: var(--space-6) var(--space-4); gap: var(--space-6); }
  .hero { padding-top: var(--space-5); }
  .hero h1 { font: var(--text-h1); letter-spacing: -.01em; }
  .site-footer { flex-direction: column; padding: var(--space-4); }
}

/* ── Centred card (coming soon · 404) — the auth-card pattern ───────── */
.site-card { gap: var(--space-4); }
.site-card h1 { font: 700 28px/34px var(--font-sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.site-card h1.t-display { font: var(--text-display); letter-spacing: -.02em; }
.site-card p { color: var(--muted-foreground); }
.site-card .actions { margin-top: var(--space-1); }

/* ── Legal prose inside cards (terms · privacy) ─────────────────────── */
.legal { display: flex; flex-direction: column; gap: var(--space-4); max-width: 960px; }
/* .prose + the guide's service art (gh-863) live in packages/ui/ui.css since gh-866 — one source for the site's /docs/
   + legal pages and GENKAN's Farsi guide. */

/* ── Brand font everywhere (operator 2026-09-26): every text on every page is Amifer via the Typekit kit
   (weights 400 · 500 · 700 · 800 · 900); Inter stays the fallback while the kit loads. ── */
:root { --font-sans: "amifer", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "amifer", "Inter", ui-monospace, monospace; }
body { font-family: var(--font-sans); font-feature-settings: normal; }
.cs-ticker-track { font-family: var(--font-sans); letter-spacing: .04em; }

/* ── gh-660: the public site proper (landing · features · resources · library · pricing) ── */
.t-brand { font-family: "amifer", var(--font-sans); font-weight: 900; letter-spacing: -.02em; }
.wordmark { font: 900 20px/1 "amifer", var(--font-sans); letter-spacing: -.02em; color: var(--foreground); }
.wordmark-sm { font-size: 17px; }
.brand-row { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-row:hover { text-decoration: none; }
.brand-mark { flex: none; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--background) 86%, transparent); backdrop-filter: blur(8px) saturate(140%); border-bottom: 1px solid var(--border); }
.site-header-in { display: flex; align-items: center; gap: var(--space-6); min-height: 72px; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6); }
.site-menu { display: flex; align-items: center; gap: var(--space-5); }
.site-menu > a { font: var(--text-body-md); color: var(--muted-foreground); padding: 6px 2px; border-radius: 6px; }
.site-menu > a:hover { color: var(--foreground); text-decoration: none; }
.site-menu > a[aria-current="page"] { color: var(--foreground); }
.site-menu-mobile { display: none; }
.site-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.site-auth { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-avatar { display: inline-flex; }
.site-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; }
.site-burger span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }

/* the live tape sits under the header (operator 2026-09-26), in flow, not fixed */
.site-tape.cs-ticker { position: sticky; top: 72px; bottom: auto; z-index: 29; border-top: 0; border-bottom: 1px solid var(--border); width: 100%; min-width: 0; max-width: 100vw; }   /* a flex item: min-width 0 or the nowrap track widens the whole page */
.site-header, .site-main, .site-footer { min-width: 0; max-width: 100vw; }
.cs-fx.site { padding-bottom: 0; }
.cs-fx .site-header { z-index: 30; }
.cs-fx .site-main, .cs-fx .site-footer { position: relative; z-index: 2; }

/* main + sections */
.site-main { max-width: 1240px; gap: 0; padding: 0 var(--space-6); }
.site-main-wide { max-width: 1280px; }
.hero { position: relative; gap: var(--space-4); padding: var(--space-9, 96px) 0 var(--space-8); }
.hero h1 { font-size: 56px; line-height: 64px; max-width: 900px; }
.hero-lede { font: 400 18px/28px var(--font-sans); max-width: 760px; }
.section { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) 0; }
.section-tint { position: relative; }
/* gh-895: the band reaches both edges of the screen through a box-shadow (paint, never layout); the old `inset: 0 -100vw` box
   laid the landing out 100vw wider than the screen (748 px on a 390 px phone) */
.section-tint::before { content: ""; position: absolute; inset: 0; z-index: -1; --tint: color-mix(in srgb, var(--card) 50%, transparent);
  background: var(--tint); box-shadow: 0 0 0 100vmax var(--tint); clip-path: inset(0 -100vmax); }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.section-head h2 { font-size: 36px; line-height: 44px; }
.section-sub { font: 400 16px/24px var(--font-sans); color: var(--muted-foreground); }
.section-title-center { text-align: center; font-size: 28px; line-height: 36px; }
.section-flat { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) 0; }
.page-head { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) 0 var(--space-4); }
.page-head h1 { font-size: 36px; line-height: 44px; }
.t-label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }

/* service cards — five halls: three to a row on desktop (DOJO · KAGAMI · TAIKO, then GENKAN · TORII), two on a tablet,
   one on a phone; min() keeps a narrow phone from overflowing */
.card-grid.services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.service .badge { align-self: flex-start; }
.service-name { font-size: 24px; line-height: 30px; }
.service-why { font: italic 400 13px/18px var(--font-sans); color: var(--muted-foreground); margin-top: -8px; }
.service p { font: var(--text-body); }

/* pricing */
.plan { gap: var(--space-4); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan-head h3 { font: 600 18px/24px var(--font-sans); }
.plan .price { font-size: 40px; line-height: 48px; letter-spacing: -.02em; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font: var(--text-body); }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; }
.plan-list li::before { content: "✓"; color: var(--link); font-weight: 700; flex: none; }
.plan.is-highlight { border-width: 2px; }
.matrix th[scope="row"] { font: var(--text-body-md); text-transform: none; letter-spacing: 0; color: var(--foreground); background: none; height: 48px; padding: 0 16px; }
.matrix td { color: var(--foreground); }
.matrix .tick { color: var(--link); font-weight: 700; }
.matrix .dash { color: var(--muted-foreground); }

/* CTA band */
.band { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); background: var(--accent); color: var(--accent-foreground); border-color: transparent; padding: var(--space-7); }
.band-text { display: flex; flex-direction: column; gap: var(--space-2); }
.band h2 { font-size: 28px; line-height: 36px; }
.band p { font: 400 15px/22px var(--font-sans); }

/* features */
.feature { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; padding: var(--space-6) 0; border-top: 1px solid var(--border); }
.feature .badge { align-self: flex-start; }
.feature h2 { font-size: 28px; line-height: 36px; }
.feature p { font: 400 16px/26px var(--font-sans); }
.card-link { color: inherit; }
.card-link:hover { text-decoration: none; border-color: var(--primary); }

/* library */
.segmented { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--secondary); align-self: flex-start; margin-top: var(--space-3); }
.seg-btn { border: 0; background: none; color: var(--foreground); font: var(--text-body-md); padding: 6px 14px; border-radius: 999px; }
.seg-btn.is-active { background: var(--accent); color: var(--accent-foreground); }
.samples { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sample-chart { height: 110px; border-radius: var(--radius-control); background: var(--secondary); }
.sample .card-header h3 { font: var(--text-body-md); }

/* footer */
.site-footer { display: block; padding: var(--space-8) var(--space-6) var(--space-6); margin-top: auto; background: var(--card); border-top: 1px solid var(--border); color: var(--foreground); font: var(--text-body); }
.site-footer-in { display: flex; flex-direction: column; gap: var(--space-7); max-width: 1240px; margin: 0 auto; }
.site-map { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-6); }
.site-map-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.site-map-brand p { color: var(--muted-foreground); max-width: 300px; }
.site-map-col { display: flex; flex-direction: column; gap: 10px; }
.site-map-col a { color: var(--foreground); font: var(--text-body); }
.site-disclaimer { color: var(--muted-foreground); max-width: 1200px; }
.site-footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--muted-foreground); }
.site-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }   /* gh-895: wraps on a phone */
.site-footer-legal a { color: var(--muted-foreground); }
.notfound { min-height: 50vh; }
/* gh-893: the disclosure line (who runs the site, from the facts file) — under the disclaimer on every page; in the /docs/
   page footer it takes a row of its own. Long emails and addresses break rather than widen a phone's page. */
.site-disclosure { color: var(--muted-foreground); max-width: 1200px; margin: 0; overflow-wrap: anywhere; }
.site-footer-in > .site-disclosure { margin-top: calc(var(--space-4) - var(--space-7)); }   /* sits close under the disclaimer */
.site-disclosure a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-footer .site-disclosure { flex-basis: 100%; }

/* ── gh-893: About + Contact (docs/design/site-about-contact.md § 2) — the inner-page header and section heads start-aligned
   (Figma 1921:1110 · 1922:1250), the company facts block, the inboxes, the complaint steps ── */
.hero-page.hero-start { align-items: flex-start; text-align: start; padding-bottom: var(--space-4); }
.hero-start .hero-lede { max-width: 760px; }
.section-info { padding: var(--space-6) 0; gap: var(--space-4); }
.section-head-start { align-items: flex-start; text-align: start; }
.section-head-start .section-sub { font: var(--text-body); }
.info-title, .section-head .info-title { font: var(--text-h2); letter-spacing: -.01em; }
.info-title-sm { font: var(--text-h3); }
.info-prose { padding: var(--space-5) var(--space-5); }
.info-prose p { font: 400 15px/24px var(--font-sans); }
.about-halls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.about-hall { gap: var(--space-3); }
.about-hall .badge { align-self: flex-start; max-width: 100%; }
.about-hall h3 { font-size: 22px; line-height: 28px; }
.about-hall p { font: var(--text-body); color: var(--muted-foreground); }
.about-hall .card-footer { padding-top: var(--space-2); }
.about-advice { gap: var(--space-2); }
.about-advice .callout { padding: var(--space-4) var(--space-5); }
/* gh-909: the About rewrite (Figma 1921:1110 · 1921:1335) — six principles three to a row, the Japanese-names card, the team
   of two side by side; one column on a phone (min() keeps a narrow phone from overflowing) */
.card-grid.about-beliefs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.about-beliefs .card-footer { padding-top: var(--space-2); }
.about-names { gap: var(--space-2); }
.about-names h3 { margin: 0; font: 600 17px/24px var(--font-sans); }
.card-grid.about-team { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.about-person { gap: var(--space-3); }
.about-person .badge { align-self: flex-start; max-width: 100%; }
.about-person h3 { font: 600 17px/24px var(--font-sans); }
.about-person p { font: var(--text-body); color: var(--muted-foreground); }
.callout-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.callout-title { font: var(--text-body-md); font-weight: 600; margin: 0; }
.callout-body p { margin: 0; font: var(--text-small); }
.facts { gap: var(--space-4); }
.facts-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.facts-note { color: var(--muted-foreground); }
.facts-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-7); }
.facts-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.facts-list > div { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: var(--space-3); }
.facts-list dt { font: var(--text-small); color: var(--muted-foreground); }
.facts-list dd { margin: 0; font: var(--text-body); color: var(--foreground); overflow-wrap: anywhere; }
.facts-list dd a, .inbox-address a, .contact-phone a, .contact-customers a:not(.btn) { color: var(--link); }
.contact-customers { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); }
.contact-customers-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.contact-customers-text p { color: var(--muted-foreground); overflow-wrap: anywhere; }
.contact-customers-text p:first-of-type { font: var(--text-body); }
.contact-customers .btn { flex: none; }
.inboxes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.inbox { gap: var(--space-2); }
.inbox h3 { font: var(--text-h3); }
.inbox-address { font: var(--text-body); overflow-wrap: anywhere; }
.inbox-text { font: var(--text-small); color: var(--muted-foreground); }
.inbox-reply { margin-top: auto; padding-top: var(--space-4); color: var(--muted-foreground); }
.complaint-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.complaint-step { gap: var(--space-3); }
.complaint-step .badge { align-self: flex-start; }
.complaint-step p { font: var(--text-body); overflow-wrap: anywhere; }
.contact-note { color: var(--muted-foreground); }
.contact-note a { color: var(--link); }
.contact-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-5); }
.contact-post, .contact-tips { gap: var(--space-3); }
.contact-address { display: flex; flex-direction: column; font: 400 16px/26px var(--font-sans); font-style: normal; overflow-wrap: anywhere; }
.contact-phone { font: 400 16px/26px var(--font-sans); }
.contact-post-note { color: var(--muted-foreground); }
.contact-tip-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: var(--space-2); font: var(--text-body); }
@media (max-width: 767.98px) {
  .facts-cols { grid-template-columns: minmax(0, 1fr); }
  .contact-customers { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
  .contact-customers .btn { flex: initial; }
}
@media (max-width: 419.98px) { .facts-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

@media (max-width: 899.98px) {
  .site-header-in { gap: var(--space-3); padding: 0 var(--space-4); }
  .site-burger { display: inline-flex; order: 3; }
  .site-actions { order: 2; margin-inline-start: auto; }
  .site-auth { min-width: 0; }
  .site-menu { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-pop); }
  .site-menu.is-open { display: flex; }
  .site-menu > a { padding: 10px 12px; font: 500 15px/22px var(--font-sans); color: var(--foreground); }
  .site-menu-mobile { display: flex; gap: var(--space-2); padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--border); }
  .site-menu-mobile .btn { flex: 1; }
  .site-tape.cs-ticker { top: 64px; }
  .hero { padding-top: var(--space-7); }
  .hero h1 { font-size: 36px; line-height: 42px; }
  .section-head h2, .page-head h1 { font-size: 28px; line-height: 34px; }
  .band { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
  .site-map { grid-template-columns: repeat(2, 1fr); }
  .site-map-brand { grid-column: 1 / -1; }
  /* gh-895: once the legal row wraps, the language button can land at either edge of a line; its list opens from the row's
     end edge instead, so it never runs off the screen (both directions) */
  .site-footer-legal { position: relative; }
  .site-footer-legal .menu.lang { position: static; }
}

/* the hero effects outside the centred card (the landing hero, gh-660); gh-886: the shinobi avatar left the heroes — SENSEI's
   art is below (§ the hero's SENSEI) */
.cs-fx .hero .badge { display: inline-flex; align-items: center; gap: 8px; }
.plan-head { flex-wrap: wrap; }

/* the CB mark as a masked shape: indigo on dark, ink on light (brand README) — never the UI-system tile */
.site-mark { display: block; flex: none; width: 34px; height: 38px; color: var(--primary); }   /* inline SVG, currentColor — visible even before the stylesheet loads */
.site-mark-sm { width: 30px; height: 33px; }
:root[data-theme="light"] .site-mark { color: var(--foreground); }
.cs-fx .site-header .site-mark { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 55%, transparent)); }
.why { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.why-card h3 { font: 600 17px/24px var(--font-sans); }
.why-card p { font: var(--text-body); color: var(--muted-foreground); }
.coming { gap: var(--space-3); padding: var(--space-7); background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--primary) 14%, var(--card))); }
.coming h2 { font-size: 30px; line-height: 38px; max-width: 760px; }
.coming p { font: 400 16px/26px var(--font-sans); max-width: 760px; color: var(--muted-foreground); }
.hero .cs-badge { align-self: center; max-width: 100%; }
@media (max-width: 599.98px) { .hero .cs-badge { white-space: normal; padding-block: 3px; } }   /* gh-895: a long badge (de) wraps on a phone */
.feature-lead { font: 400 18px/28px var(--font-sans); color: var(--foreground); }
.site-lockup { display: block; flex: none; height: 44px; width: auto; }
/* gh-896: the lockup is a logo, never mirrored — in an RTL page its SVG <text> inherited direction:rtl, anchored `ClawBack`
   at its right edge and drew it over the CB mark (Arabic). The halls' .brand-lockup carries the same rule (ui.css). */
.site-lockup { direction: ltr; }
.site-lockup-sm { height: 36px; }
.cs-fx .site-header .site-lockup { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 45%, transparent)); }
@media (max-width: 899.98px) { .site-lockup { height: 36px; } }
/* the lockup is inlined so the Typekit kit renders the wordmark (the SVG carries live text in Amifer Black) */
.site-lockup-text { font-family: "amifer", "Amifer", var(--font-sans); font-weight: 900; }

/* ── every page carries the hero vibe (operator 2026-09-26) ── */
.hero-page { padding: var(--space-8) 0 var(--space-6); }
.hero-page h1 { font-size: 44px; line-height: 52px; }
.cs-fx .hero-page h1 { background: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, var(--primary) 55%, var(--foreground)) 40%, var(--primary) 70%, var(--cs-gold) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: csGradient 8s ease-in-out infinite; }
.hero-page .segmented { align-self: center; }
.card-footer-split { justify-content: space-between; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); counter-reset: step; }
.step { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.step-n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-foreground); font: 700 14px/1 var(--font-sans); }
.step p { font: var(--text-body); }
/* L1 menu items with subsets */
.site-menu-item > summary { display: inline-flex; align-items: center; gap: 4px; font: var(--text-body-md); color: var(--muted-foreground); padding: 6px 2px; border-radius: 6px; cursor: pointer; list-style: none; }
.site-menu-item > summary::-webkit-details-marker { display: none; }
.site-menu-item > summary:hover, .site-menu-item[open] > summary, .site-menu-item.is-current > summary { color: var(--foreground); }
.site-menu-item .chev { font-size: 10px; opacity: .7; }
.site-menu-item .menu-list { min-width: 240px; }
.site-menu-item .menu-list a { flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 899.98px) {
  .site-menu-item { width: 100%; }
  .site-menu-item > summary { width: 100%; padding: 10px 12px; font: 500 15px/22px var(--font-sans); color: var(--foreground); }
  .site-menu-item .menu-list { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 12px; min-width: 0; }
  .hero-page h1 { font-size: 32px; line-height: 38px; }
}

/* ── pre-launch page (operator 2026-09-26): suspense, full branding, no menu ── */
.cs-page .site-main { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 72px - 32px - 140px); }
.cs-hero { padding: var(--space-8) 0; max-width: 820px; }
.cs-hero h1 { font-size: 52px; line-height: 60px; }
.cs-countdown { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.cs-cd { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 12px 14px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--border); }
.cs-cd-n { font: 900 40px/44px "amifer", var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cs-cd-l { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); margin-top: 4px; }
.cs-footer { padding-top: var(--space-6); }
@media (max-width: 899.98px) { .cs-hero h1 { font-size: 34px; line-height: 40px; } .cs-cd { min-width: 72px; padding: 10px; } .cs-cd-n { font-size: 30px; line-height: 34px; } }

/* ── gh-886: the hero's SENSEI (landing + coming-soon; src/_hero_art.html, docs/design/site.md § 4) ──
   ≥ 1180 px: the 16:9 art fills the hero's height (no vertical crop), anchored to the right edge of the viewport (of an
   1800 px stage on wider screens); its left 26 % eases in from the page, so the mesh shows through; the copy sits on the
   calm left, physically left in every language (the art is never mirrored: a mirrored gi crosses right over left).
   600–1179 px: the same art as a banner above the copy. < 600 px: the square crop (SENSEI only) above the copy.
   SENSEI himself is never faded, darkened or overlaid: the fades stop short of him (sandals end at ~95 % of the height). */
.hero.hero-sensei { position: relative; isolation: isolate; width: 100%; max-width: none; justify-content: center; align-items: stretch; text-align: start;
  gap: 0; min-height: clamp(560px, 48vw, 760px); padding: var(--space-7) 0; }
.hero-sensei .hero-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; max-width: 580px; margin-right: auto; margin-left: 0; }
/* the scrim: a soft wash of the page colour behind the copy only (over the torii, the mist and the dawn glow next to the
   text), so the lede and the headline keep their contrast; it fades out well before SENSEI */
.hero-sensei .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -56px -96px -56px -72px; pointer-events: none;
  --scrim: color-mix(in srgb, var(--background) 80%, transparent);
  background: linear-gradient(to right, transparent, var(--scrim) 72px, var(--scrim) calc(100% - 96px), transparent);
  -webkit-mask-image: linear-gradient(transparent, black 56px, black calc(100% - 56px), transparent);
  mask-image: linear-gradient(transparent, black 56px, black calc(100% - 56px), transparent); }
.hero-sensei .hero-copy h1 { max-width: none; }
.hero-sensei .hero-lede { color: color-mix(in srgb, var(--muted-foreground) 75%, var(--foreground)); }   /* ≥ 5.5:1 over the art, both themes */
.hero-sensei .hero-copy .cs-badge { align-self: auto; }
.hero-sensei .hero-copy .actions, .hero-sensei .cs-countdown { justify-content: flex-start; margin-top: var(--space-2); }
.hero-art { position: absolute; z-index: -1; top: 0; bottom: 0; left: max(calc(50% - 50vw), calc(50% - 900px)); right: max(calc(50% - 50vw), calc(50% - 900px)); overflow: hidden; pointer-events: none; }
.hero-art picture { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 2752 / 1536;
  -webkit-mask-image: linear-gradient(to right, transparent, black 26%), linear-gradient(black 96%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, black 26%), linear-gradient(black 96%, transparent); mask-composite: intersect; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
@media (min-width: 1800px) {   /* the stage stops at 1800 px: its right edge eases out too */
  .hero-art picture { -webkit-mask-image: linear-gradient(to right, transparent, black 26%, black 97%, transparent), linear-gradient(black 96%, transparent);
    mask-image: linear-gradient(to right, transparent, black 26%, black 97%, transparent), linear-gradient(black 96%, transparent); } }
@media (max-width: 1179.98px) {
  .hero.hero-sensei { min-height: 0; padding: 0 0 var(--space-7); gap: var(--space-5); text-align: center; }
  .hero-art { position: relative; z-index: 0; top: auto; bottom: auto; left: auto; right: auto; margin-inline: calc(50% - 50vw); height: clamp(320px, 50vh, 480px); }
  .hero-art picture { right: auto; left: 50%; transform: translateX(-50%);   /* the banner: centred, both edges eased (the hand ends at 90 %) */
    -webkit-mask-image: linear-gradient(to right, transparent, black 26%, black 92%, transparent), linear-gradient(black 96%, transparent);
    mask-image: linear-gradient(to right, transparent, black 26%, black 92%, transparent), linear-gradient(black 96%, transparent); }
  .hero-sensei .hero-copy { align-items: center; max-width: 680px; margin-inline: auto; }
  .hero-sensei .hero-copy::before { content: none; }   /* the copy sits on the page here, not on the art */
  .hero-sensei .hero-copy .actions, .hero-sensei .cs-countdown { justify-content: center; }
}
@media (max-width: 599.98px) {
  .hero.hero-sensei { gap: var(--space-4); }
  .hero-art { height: auto; aspect-ratio: 1; }
  .hero-art picture { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none;
    -webkit-mask-image: linear-gradient(black 96%, transparent); mask-image: linear-gradient(black 96%, transparent); }
}
/* ── gh-907: the coming-soon hero — SENSEI the gatekeeper standing in a torii gate at night (src/_cs_hero_art.html, site.md § 4b) ──
   One centred column at every width: the headline over the night sky, SENSEI (a cutout, no circle) in the gate's opening,
   the countdown on the stone path below his feet. The box (.cs-keeper) is the figure's; the gate picture (1072 × 1920) is
   positioned FROM it, so he stands in the opening in every language, whatever the headline's height:
   - the gate is 476 px wide on a phone (the whole gate inside a 390 px screen; its outer trees clipped at the screen edge)
     and 524 px above (a centred column whose sides ease into the page, the mesh either side);
   - his box is 27 % of the gate's height (--cs-fig) at the cutout's 906 : 1288; the cutout keeps 24 of its 1288 rows
     under his feet (--cs-fpad) and his body on its centre line;
   - the picture's 72 % line (the stone path at the pillars' feet) sits on his feet, its centre line on his — the opening
     (x 31–68 %, from y 41 % under the plaque down to the path) holds him with room either side, the katana inside the
     right pillar's foot;
   - the box's top margin reaches up to the picture's 30 % line (the top beam): the badge, headline and lede above it lie
     on the night sky.
   Keep --cs-gw / --cs-fig in step with build.py CS_GATE_W / CS_FIG (the srcsets' sizes). */
.cs-page .site-main { overflow-x: clip; }   /* the picture is wider than a phone: clipped at the screen, never a sideways scroll */
.cs-gate-hero { --cs-gw: 524px; --cs-gh: calc(var(--cs-gw) * 1920 / 1072); --cs-fig: .27;
  --cs-fh: calc(var(--cs-gh) * var(--cs-fig)); --cs-fpad: calc(var(--cs-fh) * 24 / 1288);
  position: relative; isolation: isolate; width: 100%; max-width: 820px; padding: var(--space-6) 0 var(--space-7); text-align: center; }
.cs-gate-hero .hero-copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; }
.cs-gate-hero .hero-copy h1 { max-width: none; }
.cs-gate-hero .cs-badge { align-self: center; }
.cs-gate-hero .hero-lede { max-width: 720px; color: color-mix(in srgb, var(--muted-foreground) 70%, var(--foreground)); }
.cs-gate-hero .actions, .cs-gate-hero .cs-countdown { justify-content: center; }
/* the figure's box; the top margin makes room for the gate's beam, plaque and opening above his hood */
.cs-keeper { position: relative; flex: none; width: calc(var(--cs-fh) * 906 / 1288); height: var(--cs-fh);
  margin-top: calc(var(--cs-gh) * (.72 - .30) - var(--cs-fh) + var(--cs-fpad));
  margin-bottom: var(--space-2); }
.cs-gate { position: absolute; z-index: -1; left: 50%; top: calc(100% - var(--cs-fpad)); display: block; width: var(--cs-gw); height: var(--cs-gh);
  transform: translate(-50%, -72%); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 24%, black 76%, transparent), linear-gradient(transparent, black 10%, black 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, black 24%, black 76%, transparent), linear-gradient(transparent, black 10%, black 84%, transparent);
  mask-composite: intersect; }
.cs-gate img { display: block; width: 100%; height: 100%; }
/* the scrim: the page colour over the sky (under the headline and the lede) and over the path (under the countdown); the
   gate, its pillars down to their feet and SENSEI between them stay clear */
.cs-gate::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--background) 90%, transparent) 0%, color-mix(in srgb, var(--background) 86%, transparent) 20%,
    color-mix(in srgb, var(--background) 70%, transparent) 27%, transparent 32%, transparent 71%, color-mix(in srgb, var(--background) 55%, transparent) 80%,
    var(--background) 100%); }
/* SENSEI himself — never dimmed or recoloured (the green eyes at full strength): only light round him. An indigo rim (the
   gate's own rim light) parts the dark figure from the dark opening; the ground under his feet takes a soft contact shadow
   in a pool of indigo, so he stands ON the path, not over the picture */
.cs-figure { position: absolute; inset: 0;
  filter: drop-shadow(0 0 1px color-mix(in srgb, #818CF8 75%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--primary) 50%, transparent)); }
.cs-figure img { display: block; width: 100%; height: 100%; }
.cs-keeper::before { content: ""; position: absolute; left: 50%; bottom: var(--cs-fpad); width: 118%; height: calc(var(--cs-fh) * .16);
  transform: translate(-50%, 50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / .62), rgb(0 0 0 / .3) 55%, transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--primary) 30%, transparent), transparent); background-size: 74% 46%, 100% 100%;
  background-position: center; background-repeat: no-repeat; }
/* the light theme keeps the night picture but softens it to a pale, misty portal round SENSEI (an oval that fades into
   the page, the sky above the beam left out), so the copy stays the page's dark ink in both themes — light text on the
   night picture would leave the headline, wider than the picture, on the light page. The figure stays as drawn: dark on
   the pale portal it reads at once; the rim and the shadow soften */
:root[data-theme="light"] .cs-gate { opacity: .5; filter: saturate(.8) brightness(1.25);
  -webkit-mask-image: radial-gradient(50% 30% at 50% 54%, black 62%, transparent); mask-image: radial-gradient(50% 30% at 50% 54%, black 62%, transparent); }
:root[data-theme="light"] .cs-figure { filter: drop-shadow(0 0 1px color-mix(in srgb, #4F46E5 45%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 32%, transparent)); }
:root[data-theme="light"] .cs-keeper::before { background: radial-gradient(closest-side, rgb(20 22 31 / .34), rgb(20 22 31 / .14) 55%, transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--primary) 18%, transparent), transparent); background-size: 74% 46%, 100% 100%;
  background-position: center; background-repeat: no-repeat; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cs-gate { opacity: .5; filter: saturate(.8) brightness(1.25);
    -webkit-mask-image: radial-gradient(50% 30% at 50% 54%, black 62%, transparent); mask-image: radial-gradient(50% 30% at 50% 54%, black 62%, transparent); }
  :root:not([data-theme="dark"]) .cs-figure { filter: drop-shadow(0 0 1px color-mix(in srgb, #4F46E5 45%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 32%, transparent)); }
  :root:not([data-theme="dark"]) .cs-keeper::before { background: radial-gradient(closest-side, rgb(20 22 31 / .34), rgb(20 22 31 / .14) 55%, transparent),
      radial-gradient(closest-side, color-mix(in srgb, var(--primary) 18%, transparent), transparent); background-size: 74% 46%, 100% 100%;
    background-position: center; background-repeat: no-repeat; }
}
/* the headline's gradient over the night: the brand indigo stop is the lighter tint on the dark theme (#6366F1 is 4.0:1 on
   the page there, #818CF8 is 6:1), so every stop clears 4.5:1 */
:root[data-theme="dark"] .cs-fx .cs-gate-hero h1 { background-image: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, #818CF8 55%, var(--foreground)) 40%, #818CF8 70%, var(--cs-gold-text) 100%); }
@media not all and (prefers-color-scheme: light) {
  :root:not([data-theme="light"]) .cs-fx .cs-gate-hero h1 { background-image: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, #818CF8 55%, var(--foreground)) 40%, #818CF8 70%, var(--cs-gold-text) 100%); } }
/* … and on the light theme the indigo and the gold stops are a shade deeper than the landing's: the mesh behind this
   headline is a lilac (#4F46E5 is 4.2:1 on it, #4338CA 5.6:1; the gold #8A5A00 4.1:1, #6E4600 5.5:1) */
:root[data-theme="light"] .cs-gate-hero { --cs-gold-text: #6E4600; }
:root[data-theme="light"] .cs-fx .cs-gate-hero h1 { background-image: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, #4338CA 55%, var(--foreground)) 40%, #4338CA 70%, var(--cs-gold-text) 100%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cs-gate-hero { --cs-gold-text: #6E4600; }
  :root:not([data-theme="dark"]) .cs-fx .cs-gate-hero h1 { background-image: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, #4338CA 55%, var(--foreground)) 40%, #4338CA 70%, var(--cs-gold-text) 100%); } }
.cs-gate-hero .cs-cd { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(4px); }
.cs-gate-hero .cs-cd-l { color: color-mix(in srgb, var(--muted-foreground) 70%, var(--foreground)); }   /* ≥ 4.5:1 on the box over the path */
@media (max-width: 599.98px) { .cs-gate-hero { --cs-gw: 476px; padding-top: var(--space-5); } }
.site-social { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font: var(--text-caption); }
.site-social:hover { color: var(--foreground); text-decoration: none; }
.site-map-brand .site-social { align-self: flex-start; font: var(--text-small); }
/* gh-997: Instagram then X — side by side under the brand; the X mark is filled (a .btn draws outlined glyphs) */
.site-socials { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.btn svg.icon-x { fill: currentColor; stroke: none; }

/* gh-678: the free chart — TradingView's Advanced Chart widget fills a card-shaped slot */
.tv-chart { height: min(72vh, 760px); min-height: 480px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--card); }
.tv-chart .tradingview-widget-copyright { font: var(--text-caption); padding: 6px 12px; }
.tv-chart .tradingview-widget-copyright a { color: var(--link); text-decoration: none; }
@media (max-width: 767.98px) { .tv-chart { height: 70vh; min-height: 420px; } }
.tv-soon { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 24px 28px; }
.tv-soon-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tv-soon-head h2 { margin: 0; font-size: 26px; line-height: 32px; }
.tv-soon .section-sub { margin: 0; text-align: start; }

/* gh-680: the pricing term toggle */
.term-toggle, .service-toggle { align-self: center; margin: 0 auto var(--space-5); }
.service-toggle { margin-bottom: var(--space-4); flex-wrap: wrap; justify-content: center; }   /* gh-730: the service switch above the plans */
.term-toggle > button, .service-toggle > button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 0; background: none; color: var(--muted-foreground); font: 500 14px/18px var(--font-sans); cursor: pointer; }
.term-toggle > button.is-active, .service-toggle > button.is-active { background: var(--primary); color: var(--primary-foreground); }
.term-toggle > button.is-active .badge { background: var(--primary-foreground); color: var(--primary); }
/* gh-680 r3: every tile has the same skeleton — list grows, footer + terms share one baseline */
.plan { display: flex; flex-direction: column; }
.plan-list { flex: 1; }
.plan .card-footer { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 0; }
.plan .t-caption { min-height: 4.4em; }
.plan-commit-blank { visibility: hidden; }
/* every card = six rows on the SAME grid (head · price · sub-line · list · footer · terms), so the buttons and the
   terms sit on one line across the three tiles whatever the copy length */
/* gh-730 (operator 2026-09-30): the plans sit in ONE row — a column per plan, 300 px wide, the row scrolls sideways when
   more plans than the width holds (snap per tile; the scrollbar is the browser's own). The subgrid rows still align. */
.plans-wrap { position: relative; }
/* the fades: a strip at each end over the row, shown while more plans hide on that side (site.js sets the classes on scroll) */
.plans-wrap::before, .plans-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .25s ease; }
.plans-wrap::before { left: 0; background: linear-gradient(to right, var(--background) 10%, transparent); }
.plans-wrap::after { right: 0; background: linear-gradient(to left, var(--background) 10%, transparent); }
.plans-wrap.fade-left::before, .plans-wrap.fade-right::after { opacity: 1; }
.plans { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--space-5)) / 3.8);   /* 3.8 tiles visible (operator 2026-09-30) */ grid-template-columns: none; justify-content: safe center;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 0 var(--space-4); scrollbar-gutter: stable; }
.plans > .plan { scroll-snap-align: start; }
@supports (grid-template-rows: subgrid) {
  .plans .plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: var(--space-4); align-content: start; }
  .plans .plan > * { min-width: 0; }
  .plans .plan .plan-list { align-self: start; }
  .plans .plan .card-footer { align-self: start; }
  .plans .plan .t-caption { min-height: 0; align-self: start; }
}
.plan-commit { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; }
.plan-commit:hover { color: var(--foreground); }
.term-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin: 0 auto var(--space-3); }
.term-bar .term-toggle { margin: 0; }
.currency-note { text-align: center; margin: 0 auto var(--space-5); min-height: 14px; }
/* gh-993 (CLS): while the catalogue loads, the service switch keeps its place (invisible) and skeleton tiles hold the row's
   height — the real tiles replace them in place, nothing below the row is pulled into view and pushed out again */
.service-toggle[data-pending] { visibility: hidden; min-width: 280px; min-height: 40px; }
.plan-skeleton { pointer-events: none; }
.plan-skeleton .sk { display: block; border-radius: 6px; background: color-mix(in srgb, var(--muted-foreground) 16%, transparent); }
.plan-skeleton .sk-title { width: 62%; height: 24px; }
.plan-skeleton .sk-price { width: 46%; height: 44px; margin-block: 2px; }
.plan-skeleton .sk-text { width: 100%; height: 12px; margin-block: 5px; }
.plan-skeleton .plan-list li::before { content: none; }
.plan-skeleton .plan-list li { display: block; }
.plan-skeleton .sk-btn { width: 100%; height: 40px; border-radius: var(--radius-control); }