/* The site stylesheet.

   Rewritten after the static build shipped visually plain. The first version
   solved the crawlability problem and lost the design doing it: the brand
   gradient, the card treatments, the photography and the product imagery all
   stayed behind in the React build. This restores them against the real tokens.

   Design rules held here, from Part 5 of the standards checklist:
     · Two grounds. Dark for chrome, hero and close; light for the body. Never
       two dark bands adjacent \u2014 the close is always separated from the footer.
     · Accents are points of attention, never decoration. Mint means act here.
     · No colour defined in this file. Every value comes from tokens/.
     · One focus ring, authored once. One motion curve.
     · Grid and flex with gap, so reordering survives.

   Fonts are self-hosted from assets/fonts/. Until those binaries exist the
   stack falls through to the system UI face, which renders immediately and
   fetches nothing from a third party. */

@import url("/tokens/colors.css");
@import url("/tokens/typography.css");
@import url("/tokens/spacing.css");
@import url("/tokens/radius.css");
@import url("/tokens/elevation.css");
@import url("/tokens/gradients.css");
@import url("/tokens/motion.css");
@import url("/tokens/fonts.css");

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night-900, #0A1120);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── One focus ring, correct on both grounds ─────────────────────────────── */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--aivin-mint, #00F8C4);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.on-light :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--aivin-blue);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--aivin-mint, #00F8C4); color: #04121C;
  font: 600 15px/1 var(--font-body); padding: 15px 22px;
  border-radius: 0 0 var(--radius-sm) 0; text-decoration: none;
  min-height: 48px; display: flex; align-items: center;
}
.skip:focus { left: 0; }
#main:focus { outline: none; }

/* ── Grounds ─────────────────────────────────────────────────────────────── */
.ground {
  /* Deliberately not --gradient-hero. That token is the bright brand wash and it
     reads as generic SaaS behind long-form copy. This is the same family taken
     down to near-black, with the blue present as a low bloom rather than a
     field — the register a room charging $180 for Chablis expects. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(31, 63, 168, .28) 0%, rgba(31, 63, 168, 0) 58%),
    radial-gradient(90% 80% at 88% 6%, rgba(15, 165, 184, .16) 0%, rgba(15, 165, 184, 0) 62%),
    linear-gradient(168deg, #101A2E 0%, #0C1424 58%, #080F1C 100%);
  position: relative;
}
/* A hairline of brand colour where the dark meets the light, so the join is a
   decision rather than an edge. */
.ground::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(0, 152, 225, .5) 0%, rgba(0, 248, 196, .32) 46%, rgba(0, 152, 225, 0) 100%);
}
header.ground::after { display: none; }
.body { background: var(--white, #FFFFFF); color: var(--text-body); }

header.ground, main > article, aside.close, footer.ground { padding: clamp(18px, 3vh, 26px) clamp(20px, 5vw, 40px); }
header.ground > *, main > article > *, aside.close > *, footer.ground > *, .body > .sec > * { max-width: 68rem; margin-inline: auto; }
main > article.hero { padding-block: clamp(34px, 7vh, 76px) clamp(40px, 8vh, 84px); }
.body > .sec { padding: clamp(38px, 6vh, 68px) clamp(20px, 5vw, 40px); }
.body > .sec + .sec { border-top: 1px solid var(--border-subtle); }
/* Alternating section treatment, so a long page has rhythm rather than a
   repeating card. Every third section takes the tint. */
.body > .sec:nth-of-type(3n) { background: var(--surface-card); }
aside.close { padding-block: clamp(46px, 8vh, 84px); }

/* ── Chrome ──────────────────────────────────────────────────────────────── */
header.ground {
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: saturate(120%);
}
.brand { line-height: 0; min-height: 48px; display: inline-flex; align-items: center; }
.brand img { height: 26px; width: auto; }
nav[aria-label="Primary"] { margin-left: auto; }
nav[aria-label="Primary"] ul { display: flex; flex-wrap: wrap; gap: 2px 24px; list-style: none; margin: 0; padding: 0; }
nav[aria-label="Primary"] a {
  display: flex; align-items: center; min-height: 48px;
  font-size: 13.5px; letter-spacing: var(--ls-nav, .06em); text-transform: uppercase;
  color: #FFFFFF; text-decoration: none; border-bottom: 1px solid transparent;
  transition: color var(--motion-fast, 150ms) ease;
}
nav[aria-label="Primary"] a:hover { color: var(--aivin-mint); }
nav[aria-label="Primary"] a[aria-current="page"] { color: var(--aivin-mint); border-bottom-color: var(--aivin-mint); }

.crumbs { display: flex; flex-wrap: wrap; gap: 2px 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 12.5px; letter-spacing: .04em; color: rgba(255, 255, 255, 0.58); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, 0.32); }
.crumbs a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.crumbs a:hover { color: var(--aivin-mint); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em; text-wrap: pretty; }
h1 { font-size: clamp(29px, 4.6vw, 52px); line-height: 1.06; margin: 0; color: #FFFFFF; max-width: 19ch; font-weight: 400; letter-spacing: -.018em; }
.open { font-size: clamp(17px, 1.85vw, 20.5px); line-height: 1.58; color: rgba(255, 255, 255, 0.88); margin: 20px 0 0; max-width: 42rem; }
.byline { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); margin: 16px 0 0; letter-spacing: .01em; }
.byline a { color: rgba(255, 255, 255, 0.84); }

/* ── Hero photography ─────────────────────────────────────────────────────
   Ported from the application's HeroShell so the two builds stop disagreeing.
   The photograph is the ground the hero copy stands on, not a card beneath it.
   Two scrims: the vertical pass holds the h1's contrast and closes the band into
   the section below; the horizontal pass deepens the copy column so the frame
   opens toward the right. Both in brand navy — a neutral scrim washed the
   palette out of the hero entirely. --pos is authored per image in build.js,
   because one centre crop suits neither a room nor a rack. */
.hero.has-photo { position: relative; isolation: isolate; overflow: hidden; }
.hero.has-photo .hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: saturate(.82) contrast(1.06) brightness(.92); }
.hero.has-photo .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(9,18,40,.92) 0%, rgba(10,20,44,.74) 34%, rgba(10,20,44,.62) 58%, rgba(7,14,30,.95) 100%), linear-gradient(96deg, rgba(9,18,40,.93) 0%, rgba(9,18,40,.74) 42%, rgba(9,18,40,.26) 72%, rgba(9,18,40,.06) 100%); }
.hero.has-photo h1, .hero.has-photo .open { text-shadow: 0 1px 30px rgba(6, 12, 26, .55); }
.hero.has-photo .hero-copy { position: relative; z-index: 2; }
.hero-credit { position: absolute; z-index: 2; right: clamp(20px, 5vw, 40px); bottom: 11px; margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
/* A product screen stays a framed card: a screenshot behind type is unreadable. */
.hero-art { margin: clamp(28px, 4.5vh, 46px) 0 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); border: 1px solid rgba(255, 255, 255, .1); }
.hero-art img { display: block; width: 100%; height: clamp(240px, 40vh, 440px); object-fit: cover; }
@media (max-width: 620px) { .hero-credit { right: 14px; bottom: 8px; font-size: 10px; } }

.cta { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin: 28px 0 0; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px;
  background: var(--aivin-mint); color: #04121C;
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  padding: 12px 26px; border-radius: var(--radius-pill); text-decoration: none;
  transition: transform var(--motion-fast, 150ms) ease, box-shadow var(--motion-fast, 150ms) ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0, 248, 196, .22); color: #04121C; }
.lnk { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.42); }
.lnk:hover { color: var(--aivin-mint); border-bottom-color: var(--aivin-mint); }

/* ── Body type ───────────────────────────────────────────────────────────── */
.body h2 { font-size: clamp(22px, 2.7vw, 31px); line-height: 1.15; margin: 0 0 6px; color: var(--text-primary); max-width: 24ch; font-weight: 400; letter-spacing: -.016em; }
.body h2::before {
  content: ""; display: block; width: 26px; height: 1.5px;
  background: var(--aivin-blue); margin-bottom: 20px;
}
.body h3 { font-size: clamp(17px, 1.85vw, 19.5px); line-height: 1.3; margin: 0; color: var(--text-primary); }
.body p { margin: 14px 0 0; max-width: 42rem; font-size: 16.5px; }
.sub { font-size: 15px; color: var(--text-muted); margin: 4px 0 0 !important; letter-spacing: .01em; }
.note { font-size: 15px; color: var(--text-muted); }

/* ── Figures keep their source in one block (1.3) ────────────────────────── */
.fig {
  margin: 22px 0 0; padding: 18px 22px;
  border-left: 3px solid var(--aivin-blue); background: var(--surface-card);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.fig .fval { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text-primary); margin: 0; }
.fig figcaption { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

.quote { margin: 26px 0 0; padding: 24px 28px; background: var(--surface-card); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.quote blockquote { margin: 0; padding: 0; border: 0; }
.quote blockquote p { font-family: var(--font-display); font-size: clamp(19px, 2.3vw, 26px); line-height: 1.38; color: var(--text-primary); margin: 0; max-width: 34ch; }
.quote figcaption { font-size: 13.5px; color: var(--text-muted); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }

/* ── Photography ─────────────────────────────────────────────────────────── */
.shot { margin: 24px 0 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-raised); }
.shot img { display: block; width: 100%; height: clamp(220px, 34vh, 380px); object-fit: cover; }
.shot figcaption { font-size: 12px; color: var(--text-muted); padding: 8px 2px 0; letter-spacing: .02em; }
.ground .shot figcaption { color: rgba(255, 255, 255, 0.5); }

/* ── Pairs: the workhorse list. Cards on a light ground. ─────────────────── */
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2px 24px; margin: 26px 0 0; }
.pairs dt {
  font-family: var(--font-display); font-size: 17.5px; font-weight: 500;
  color: var(--text-primary); padding-top: 18px; border-top: 1px solid var(--border-subtle);
  display: flex; align-items: baseline; gap: 10px;
}
.pairs dt::before {
  content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--aivin-blue); transform: translateY(-2px);
}
.pairs dd { margin: 7px 0 20px 17px; font-size: 15.5px; color: var(--text-muted); line-height: 1.62; }
.prices .amt { font-family: var(--font-display); font-weight: 600; color: var(--aivin-blue); margin-left: auto; white-space: nowrap; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { list-style: none; counter-reset: s; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.steps li {
  counter-increment: s; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-subtle);
}
.steps li::before {
  content: "0" counter(s);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .1em;
  color: var(--aivin-blue); padding-top: 3px;
}
.steps b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 17.5px; color: var(--text-primary); margin-bottom: 5px; }
.steps span { font-size: 15.5px; color: var(--text-muted); line-height: 1.62; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.scroll { margin: 24px 0 0; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; background: var(--surface-card); }
table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 15px; }
caption { caption-side: top; text-align: left; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 14px 18px 10px; }
th, td { text-align: left; padding: 12px 18px; border-top: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.5; }
thead th { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
tbody th { font-weight: 500; color: var(--text-primary); font-family: var(--font-display); font-size: 15.5px; }
td { color: var(--text-muted); }

/* ── FAQ: details/summary, so the answer is in the DOM open or closed ────── */
.faq details { border-top: 1px solid var(--border-subtle); }
.faq summary { cursor: pointer; padding: 18px 0; min-height: 48px; display: flex; align-items: center; gap: 14px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--font-display); font-size: 22px;
  color: var(--aivin-blue); flex: 0 0 auto; line-height: 1;
  transition: transform var(--motion-fast, 150ms) ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .ans { padding: 0 0 22px; }
.faq .obj { font-size: 16px; color: var(--text-primary); font-style: italic; margin: 0 0 10px !important; padding-left: 14px; border-left: 2px solid var(--aivin-mint); }

/* ── Close and footer ────────────────────────────────────────────────────── */
aside.close { border-top: 1px solid rgba(255, 255, 255, 0.1); }
aside.close h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.1; color: #FFFFFF; margin: 0; max-width: 22ch; }
aside.close p { color: rgba(255, 255, 255, 0.86); margin: 16px 0 0; max-width: 40rem; font-size: 17px; }
footer.ground { border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13.5px; color: rgba(255, 255, 255, 0.56); }
footer.ground p { margin: 0 0 8px; max-width: 48rem; }
footer.ground a { color: rgba(255, 255, 255, 0.78); }
footer.ground a:hover { color: var(--aivin-mint); }

a { color: var(--aivin-blue); }
.on-light a { color: var(--text-link); }
a:hover { color: var(--aivin-mint); }

/* ── 320px ───────────────────────────────────────────────────────────────── */
@media (max-width: 34rem) {
  table { min-width: 28rem; }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .steps li::before { padding-top: 0; }
  nav[aria-label="Primary"] { margin-left: 0; width: 100%; }
  nav[aria-label="Primary"] ul { gap: 0 18px; }
  .quote { padding: 20px; }
  h1 { max-width: none; }
}

/* ── 3.7 touch floor, authored centrally ─────────────────────────────────── */
@media (pointer: coarse), (max-width: 47.5rem) {
  a[href], button, summary, label[for] { min-height: 48px; }
  a[href] { display: inline-flex; align-items: center; }
  :where(p, li, dd, figcaption, .crumbs, .byline) a[href] { display: inline; min-height: 0; }
}

/* ── One motion curve, and nothing fires unprompted ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  body, .ground, .body { background: #FFFFFF !important; color: #000000; }
  h1, aside.close h2 { color: #000000; }
  .open, aside.close p { color: #222222; }
  .skip, nav[aria-label="Primary"], .hero-art, .shot, .hero-bg, .hero-credit { display: none; }
  .faq details, .faq .ans { display: block !important; }
  .scroll { overflow: visible; }
}