/* aidgile.com — site styles (tokens live in aidgile.css) */

/* ---- self-hosted fonts (no third-party requests) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-latin-400-normal.woff2') format('woff2');
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--aidgile-bg);
  color: var(--aidgile-fg);
  font-family: var(--aidgile-font-body);
  font-size: var(--aidgile-text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---- landing: one screen, no scroll ---- */
body.landing {
  height: 100dvh;
  overflow: hidden;
}

.screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(20px, 4dvh, 40px) 24px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.8dvh, 18px);
  margin-top: clamp(8px, 6dvh, 64px);
}

.hero .logo {
  width: clamp(180px, 56vw, 260px);
  height: auto;
  display: block;
}

.hero p.lede {
  color: var(--aidgile-muted);
  font-size: clamp(15px, 2dvh, 17px);
  max-width: 34ch;
}
.hero p.lede strong {
  color: var(--aidgile-fg);
  font-weight: 500;
}

/* ---- products ---- */
.products {
  display: flex;
  flex-direction: column;
}

.products h2 {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  font-weight: 400;
  color: var(--aidgile-muted);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(10px, 1.8dvh, 16px) 0;
  border-top: 1px solid var(--aidgile-border);
}

.product .name {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-fg);
}

.chip {
  background: var(--aidgile-lilac);
  color: var(--aidgile-ink);
  font-family: var(--aidgile-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: var(--aidgile-radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.contact {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: clamp(10px, 1.8dvh, 16px) 0 0;
  border-top: 1px solid var(--aidgile-border);
}
.contact .name {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-muted);
}
.contact a {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-ember);
  text-decoration: none;
  margin-left: auto;
}
.contact a:hover { text-decoration: underline; }

/* ---- footer ---- */
footer.site {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--aidgile-font-mono);
  font-size: 11px;
  color: var(--aidgile-muted);
  padding-top: clamp(12px, 2dvh, 20px);
}
footer.site nav { display: flex; gap: 16px; }
footer.site a { color: var(--aidgile-muted); text-decoration: none; }
footer.site a:hover { color: var(--aidgile-fg); }

/* ---- legal pages (these may scroll) ---- */
body.legal .page {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}
body.legal .page .logo { width: 132px; height: auto; display: block; }
body.legal h1 {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  font-size: clamp(28px, 6vw, 40px);
  margin: 36px 0 8px;
}
body.legal h2 {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  font-size: var(--aidgile-text-lg);
  margin: 32px 0 8px;
}
body.legal p, body.legal li { color: var(--aidgile-muted); margin: 10px 0; }
body.legal p strong { color: var(--aidgile-fg); font-weight: 500; }
body.legal ul { padding-left: 20px; }
body.legal a { color: var(--aidgile-fg); text-underline-offset: 3px; }
body.legal .address {
  font-style: normal;
  color: var(--aidgile-fg);
  line-height: 1.7;
}
body.legal .backlink {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
}
body.legal .backlink:hover { color: var(--aidgile-fg); }
body.legal footer.site { margin-top: 48px; border-top: 1px solid var(--aidgile-border); }

/* footnote device: use the logo's asterisk glyph, not the mono character */
.aidgile-footnote { display: inline-flex; align-items: center; gap: 0.65em; }
.aidgile-footnote::before { content: none; }
.fn-ast { width: 0.95em; height: auto; flex: none; }

/* ---- 404 ---- */
body.notfound .screen { justify-content: space-between; }
.nf-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.nf-code {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  font-size: clamp(88px, 26vw, 140px);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.04em;
}
.nf-ast {
  width: 0.62em;
  height: auto;
  animation: ast-swing 4.8s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  .nf-ast { animation: none; }
}

/* ---- intro loader ----
   Only active when the head script sets html.intro (skipped for
   prefers-reduced-motion, repeat visits, and no-JS — where everything
   below is inert and the page just shows). */
.loader { display: none; }

html.intro .loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--aidgile-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.loader-ast {
  width: clamp(48px, 14vw, 64px);
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: ast-swing 2.4s ease-in-out infinite;
}

@keyframes ast-swing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(150deg); }
  75%  { transform: rotate(-150deg); }
  100% { transform: rotate(0deg); }
}

/* hidden until the asterisk lands */
html.intro .logo-letters,
html.intro #logoAst { opacity: 0; }
html.intro .aidgile-footnote,
html.intro .lede,
html.intro .products,
html.intro footer.site { opacity: 0; transform: translateY(10px); }

/* the reveal, staggered */
html.intro.revealed #logoAst { opacity: 1; }
html.intro.revealed .logo-letters { opacity: 1; transition: opacity 0.55s ease 0.05s; }
html.intro.revealed .aidgile-footnote,
html.intro.revealed .lede,
html.intro.revealed .products,
html.intro.revealed footer.site {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.intro.revealed .aidgile-footnote { transition-delay: 0.15s; }
html.intro.revealed .lede            { transition-delay: 0.25s; }
html.intro.revealed .products        { transition-delay: 0.35s; }
html.intro.revealed footer.site      { transition-delay: 0.45s; }

/* taller phones / desktop get a bit more air */
@media (min-width: 700px) {
  .hero .logo { width: 280px; }
}

/* ============================================================
   kardia product page  —  /products/kardia
   ------------------------------------------------------------
   Flat page on the SAME skeleton as the legal pages: the page
   uses body class="legal" and inherits its container, header,
   prose and footer styles. Only the kardia-specific pieces live
   here. kardia colors come from the kardia CI tokens — on the
   ink canvas the wordmark is the on-dark SVG and the accent is
   kardia's dark-mode pulse #43D58F (per kardia.tokens.json);
   ember stays reserved for the aidgile asterisk.
   ============================================================ */

/* kardia's own brand font — self-hosted, sets ONLY the word "kardia" */
@font-face {
  font-family: 'Betania Patmos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BetaniaPatmos-Regular.woff2') format('woff2');
}
.font-kardia {
  font-family: 'Betania Patmos', var(--aidgile-font-display);
  font-weight: 400;
  font-size: 1.14em;
  letter-spacing: 0;
}

/* ---- the browser window (takes the h1 slot) ---- */
.browser-frame {
  border: 1px solid var(--aidgile-border);
  border-radius: var(--aidgile-radius-md);
  overflow: hidden; /* the linen card gets its corners from the frame */
  margin-top: 36px;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #26262C; /* one step up from the ink canvas */
  padding: 10px 14px;
}
/* grey, not traffic lights: green belongs to the claim, ember to the asterisk */
.browser-bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--aidgile-graphite);
}
/* ponytail: auto-margins, so it centers in the space left of the dots —
   a few px off true center, same as real chrome */
.browser-bar .url {
  margin-inline: auto;
  font-family: var(--aidgile-font-mono);
  font-size: 11px;
  color: var(--aidgile-muted);
}

/* ---- the product card (kardia tokens, scoped so they never leak) ----
   Selectors carry .card (and body.legal where an element selector
   competes) — body.legal h1/p/a would otherwise outspecify a bare class
   and paint the card in aidgile's dark prose colors. */
.card {
  /* source of truth: kardia CI tokens */
  --k-linen: #F1F0EE;
  --k-ink:   #1A1A17;
  --k-pulse: #007D4D;
  --k-mint:  #D5F0E0;
  --k-stone: #DEDCD6;
  --k-muted: #63625B;

  background: var(--k-linen);
  color: var(--k-ink);
  padding: clamp(20px, 4.5vw, 32px);
}

.card .card-wordmark {
  width: clamp(132px, 34vw, 172px);
  height: auto;
  display: block;
}

.card .card-label {
  font-family: var(--aidgile-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--k-muted);
  margin-top: clamp(18px, 4vw, 26px);
}

body.legal .card .card-claim {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  font-size: clamp(26px, 6.4vw, 34px);
  line-height: 1.1;
  color: var(--k-ink);
  margin: 8px 0 0;
}
/* the single green element on this page */
.card .card-claim .beat { color: var(--k-pulse); }

body.legal .card .card-text {
  color: var(--k-muted);
  font-size: 16px;
  max-width: 46ch;
  margin-top: 12px;
}

body.legal .card .card-cta {
  display: inline-block;
  background: var(--k-ink);
  color: var(--k-linen);
  font-family: var(--aidgile-font-body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--aidgile-radius-pill);
  padding: 12px 22px;
  margin-top: clamp(18px, 4vw, 24px);
}
body.legal .card .card-cta:hover { opacity: 0.86; }

/* the umbrella line: outside the card, so ember never touches the
   product's own surface */
.k-badge {
  font-family: var(--aidgile-font-mono);
  font-size: 12px;
  color: var(--aidgile-muted);
  margin-top: 22px;
}
.k-badge .fn-ast {
  display: inline;
  width: 0.72em;
  vertical-align: -0.02em;
  margin-right: 0.12em;
}

/* ---- pricing ---- */
.pricing { margin-top: clamp(36px, 8vw, 52px); }

/* body.legal h2 outspecifies a bare class — pin the mono label device */
h2.section-label, body.legal h2.section-label {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--aidgile-muted);
  border-top: 1px solid var(--aidgile-border);
  padding-top: 14px;
  margin-bottom: 16px;
}

/* body.legal p outspecifies a bare class — pin it, or this goes muted */
body.legal .big {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.1;
  color: var(--aidgile-fg);
}
.big-sub {
  color: var(--aidgile-muted);
  margin-top: 8px;
}

.asterisk-block {
  border: 1px solid var(--aidgile-border);
  border-radius: var(--aidgile-radius-md);
  padding: clamp(18px, 4.5vw, 26px);
  margin-top: clamp(20px, 4vw, 28px);
}
.asterisk-block h3 {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  font-size: var(--aidgile-text-lg);
  color: var(--aidgile-fg);
  margin-bottom: 10px;
}
.asterisk-block h3 .fn-ast {
  display: inline;
  width: 0.62em;
  vertical-align: -0.02em;
  margin-right: 0.14em;
}
.asterisk-block p { color: var(--aidgile-muted); }
.asterisk-block p strong { color: var(--aidgile-fg); font-weight: 500; }

.giving { margin-top: 18px; }
.giving > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--aidgile-border);
}
.giving dt {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-fg);
}
.giving dd {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-muted);
  white-space: nowrap;
}
.giving .amount {
  background: var(--aidgile-lilac);
  color: var(--aidgile-ink);
  border-radius: var(--aidgile-radius-pill);
  padding: 3px 10px;
  margin-right: 8px;
}

/* the beta status line inside the asterisk block */
.beta-note {
  border-top: 1px solid var(--aidgile-border);
  padding-top: 16px;
  font-size: 15px;
  color: var(--aidgile-muted);
}
.beta-note strong { color: var(--aidgile-fg); font-weight: 500; }

.fineprint {
  font-family: var(--aidgile-font-mono);
  font-size: 12px;
  color: var(--aidgile-muted);
  margin-top: 16px;
}

/* index: a product row that links to its page */
.product-link { text-decoration: none; }
.product-link .arrow { color: var(--aidgile-muted); }
.product-link:hover .name { color: var(--aidgile-ember); }
.product-link:hover .arrow { color: var(--aidgile-ember); }