/* Artos lab landing. Identity: the hour block, Geist for UI, Apfel Grotezk Mittel for the mark.
   The hour ramp and the block's anatomy are lifted from the app's src/theme/hourSky.ts so the
   page and the app show the same sky at the same hour. */

@font-face { font-family: 'Geist'; src: url('/fonts/geist-400.woff2?v=1') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-500.woff2?v=1') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-600.woff2?v=1') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Apfel Grotezk'; src: url('/fonts/apfel-mittel-500.woff2?v=1') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ui: Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mark: 'Apfel Grotezk', Geist, ui-sans-serif, -apple-system, sans-serif;

  --paper: #fafbfc;
  --text: #151515;
  --muted: #55606a;
  --hairline: rgba(21, 21, 21, 0.14);
  --card: #eff4f6;
  --accent: #08607f;
  --tile: #3aa8d0;

  /* Paper-surface controls. Without these the footer's buttons inherited the block's
     ink, which is near-white in the evening block and so invisible on paper. */
  --c-btn-bg: #151515;
  --c-btn-ink: #fafbfc;
  --c-btn-line: rgba(21, 21, 21, 0.14);
  --c-btn-text: #151515;
  --c-btn-hover: #eff4f6;

  --radius: 28px;
  --cutoff: 40px;
  --wrap: 1120px;
}

/* ---- the block, per daypart and per appearance ----
   Default is a dark block: correct for evening on light, and for every sky on dark. */
html {
  --sky-a: #070d14;
  --sky-b: #0e1a28;
  --ink: #f5f5f5;
  --ink-mute: #b7c9d4;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-line: rgba(245, 245, 245, 0.14);
  --mark-a: #3aa8d0;
  --mark-b: #ffffff;
  --block-debit: #f7bda9;
  --block-credit: #9fe0bb;
  --btn-bg: #f5f5f5;
  --btn-ink: #12141a;
  --btn-line: rgba(245, 245, 245, 0.32);
}
html[data-appearance='dark'][data-sky='morning'] {
  --sky-a: #0a2230; --sky-b: #143044;
}
html[data-appearance='dark'][data-sky='afternoon'] {
  --sky-a: #0c3040; --sky-b: #1a4a5c;
}

/* The two light blocks: ink goes dark, the mark gradient goes deep so it stays legible. */
html[data-appearance='light'][data-sky='morning'] {
  --sky-a: #7ec8e6; --sky-b: #c5e6f4;
  --ink: #151515; --ink-mute: #2f4a52;
  --panel: rgba(255, 255, 255, 0.60);
  --panel-line: rgba(21, 21, 21, 0.10);
  --mark-a: #0d2b3a; --mark-b: #0f1b22;
  --block-debit: #7a2418; --block-credit: #0d5c34;
  --btn-bg: #151515; --btn-ink: #ffffff; --btn-line: rgba(21, 21, 21, 0.28);
}
html[data-appearance='light'][data-sky='afternoon'] {
  --sky-a: #3aa8d0; --sky-b: #8ecfe6;
  --ink: #151515; --ink-mute: #0d3149;
  --panel: rgba(255, 255, 255, 0.62);
  --panel-line: rgba(21, 21, 21, 0.10);
  --mark-a: #0d2b3a; --mark-b: #0f1b22;
  --block-debit: #7a2418; --block-credit: #0d5c34;
  --btn-bg: #151515; --btn-ink: #ffffff; --btn-line: rgba(21, 21, 21, 0.28);
}
html[data-appearance='light'][data-sky='evening'] {
  --sky-a: #0b1c2c; --sky-b: #17344c;
}

html[data-appearance='dark'] {
  --paper: #12141a;
  --text: #f5f5f5;
  --muted: #9a9aa2;
  --hairline: rgba(245, 245, 245, 0.18);
  --card: #181b22;
  --accent: #8bc9e4;
  --c-btn-bg: #f5f5f5;
  --c-btn-ink: #12141a;
  --c-btn-line: rgba(245, 245, 245, 0.18);
  --c-btn-text: #f5f5f5;
  --c-btn-hover: #181b22;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Content bleeds to the viewport edges, text and controls stay inside the safe areas.
   The block's background runs under the notch; its content does not. */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: calc(24px + env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-right, 0px));
}
.wrap.narrow { max-width: 720px; }

/* ---------------- the hour block ---------------- */

.block {
  position: relative;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 100%);
  color: var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
  padding-bottom: 56px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-start: calc(26px + env(safe-area-inset-top, 0px));
}

.wordmark {
  font-family: var(--mark);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--ink);
}
/* The letter gradient. Guarded so text can never render invisible without it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark {
    background-image: linear-gradient(135deg, var(--mark-a) 0%, var(--mark-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.hero { padding: 72px 0 0; max-width: 46rem; }

/* the hero row: the copy, and the device beside it */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  max-width: 62rem;
  padding: 72px 0 0;
}
.hero-copy { max-width: 34rem; }

.phone {
  width: 250px;
  padding: 10px;
  border-radius: 42px;
  background: #0d1014;
  /* The ring is what keeps the phone legible on a pale block and on a navy one alike. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 34px 60px -22px rgba(7, 7, 9, 0.55),
              0 4px 10px rgba(7, 7, 9, 0.22);
}
/* The screen holds a real recording of the app. At this width the slot measures
   230x498 CSS px; the shipped files are 420x922. They are cropped to the app screen
   only, so this frame supplies the bezel, and this radius clips the last of the
   recording's backdrop out of the corners. */
.phone-screen {
  position: relative;
  aspect-ratio: 1170 / 2532;
  border-radius: 36px;
  overflow: hidden;
  background: #0b1c2c;
}
.ph-video { display: none; width: 100%; height: 100%; object-fit: cover; }
.ph-video.is-on { display: block; }

/* the chooser over the two recordings */
.demo { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.demo-pick {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--panel);
}
.demo-tab {
  appearance: none;
  margin: 0;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-mute);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
/* the selected tab is the block's own button, so it follows the sky like every other control */
.demo-tab[aria-selected='true'] { background: var(--c-btn-bg); color: var(--c-btn-ink); }

/* The enlarged view, opened by double-clicking a tab. Fixed to the viewport, and a
   direct child of body in the markup, so no ancestor transform can trap it. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 7, 9, 0.96);
}
.viewer.is-open { display: flex; }
/* Sized so the recording is as large as the viewport allows without ever being cropped.
   0.4555 is the recording's own width over height, so the second term is the width at
   which the height exactly fills the screen. */
.viewer-stage {
  position: relative;
  width: min(460px, 88vw, calc((100vh - 48px) * 0.4555));
  width: min(460px, 88vw, calc((100dvh - 48px) * 0.4555));
  aspect-ratio: 420 / 922;
  border-radius: 30px;
  overflow: hidden;
  background: #0b1c2c;
  box-shadow: 0 40px 90px -32px rgba(0, 0, 0, 0.75);
}
.viewer-stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  appearance: none;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(245, 245, 245, 0.32);
  border-radius: 999px;
  background: rgba(7, 7, 9, 0.6);
  color: #f5f5f5;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mute);
}

.headline {
  margin: 0;
  font-family: var(--mark);
  font-weight: 500;
  font-size: clamp(2.5rem, 7.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.headline span { display: block; }

.sub {
  margin: 22px 0 0;
  max-width: 33rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-mute);
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-ico { width: 17px; height: 17px; flex: none; fill: currentColor; }

/* Control theming follows the surface a control sits on, not the document.
   The page is the base surface; .block re-points these at the sky's palette. */
.block, .bar {
  --c-btn-bg: var(--btn-bg);
  --c-btn-ink: var(--btn-ink);
  --c-btn-line: var(--btn-line);
  --c-btn-text: var(--ink);
  --c-btn-hover: var(--panel);
}

.btn-primary { background: var(--c-btn-bg); color: var(--c-btn-ink); }
.btn-ghost { border: 1px solid var(--c-btn-line); color: var(--c-btn-text); }
.btn-ghost:hover { background: var(--c-btn-hover); }

/* Sits under the hero, not inside it: a tagline below the CTAs is a banned pattern,
   and the middle dot is rationed to one per line, so these are sentences. */
.trust {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* the cutoff bar: half on the block, half on paper */
.cutoff {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--cutoff) / -2);
  display: flex;
  justify-content: center;
  padding: 0 24px;
}
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--cutoff);
  max-width: 100%;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--text);
  font-size: 0.8125rem;
  box-shadow: 0 12px 34px rgba(7, 7, 9, 0.12);
}
.bar-what { color: var(--muted); white-space: nowrap; }
.bar-track {
  width: 104px;
  height: 6px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.bar-fill { display: block; height: 100%; width: var(--fill); border-radius: 999px; background: var(--tile); }
.bar-num { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-of { color: var(--muted); font-weight: 400; }

/* ---------------- paper ---------------- */

.surface { padding-top: 76px; }

.sec { padding: 84px 0; }
.sec.works, .sec.foot { border-top: 1px solid var(--hairline); }

.h2 {
  margin: 0;
  font-size: clamp(1.625rem, 3.4vw, 2.375rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
}
.lede {
  margin: 16px 0 0;
  /* 36rem, not 42: at 42 the line ran to ~84 characters, over the 75 cap */
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}

/* figures */
.figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
  margin-top: 44px;
}
.fig-num {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fig-num .unit { font-size: 0.42em; font-weight: 500; margin-left: 2px; }
.fig-num .pre { font-size: 0.4em; font-weight: 500; color: var(--muted); margin-right: 6px; letter-spacing: 0; }
/* No background track: a filled track is a banned "scoring bar" pattern. */
.fig-bar { height: 6px; margin: 18px 0 12px; }
.fig-fill { display: block; height: 100%; width: var(--fill); border-radius: 999px; background: var(--tile); transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fig-label { font-size: 0.875rem; color: var(--muted); }

/* steps */
/* Numbers removed: a generic 01 / 02 / 03 step label is a banned pattern. The step's
   own title is the label. */
.steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 30px; }
.step-title { margin: 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.step-desc { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }

/* feature grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--card);
}
.cell-wide { grid-column: span 2; }
.mock {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
}
.mock-label { font-size: 0.8125rem; color: var(--muted); }
.mock-amount {
  margin-top: 4px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mock-amount .cur { font-size: 0.5em; font-weight: 500; color: var(--muted); margin-right: 6px; letter-spacing: 0; }
.mock-amount .dec { font-size: 0.6em; color: var(--muted); }
.mock-cap { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
.mock-rows { margin-top: 16px; }
.mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
}
.mrow .debit { color: #9c3a22; }
html[data-appearance='dark'] .mrow .debit { color: #f0a58f; }
.mock-budget { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.mock-budget-head { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* No background track: same reason as .fig-bar. */
.mock-track { height: 6px; margin-top: 10px; }
.mock-fill { display: block; height: 100%; width: var(--fill); border-radius: 999px; background: var(--tile); }

.spark { display: block; width: 100%; height: 62px; }
.spark-axis { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-line { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
}
.cat .up { color: #9c3a22; font-weight: 500; font-variant-numeric: tabular-nums; }
html[data-appearance='dark'] .cat .up { color: #f0a58f; }

.split-body { display: flex; flex-direction: column; gap: 3px; }
.split-name { font-weight: 500; }
.split-meta { font-size: 0.8125rem; color: var(--muted); }
.split-amt { font-weight: 500; color: #0d5c34; font-variant-numeric: tabular-nums; }
html[data-appearance='dark'] .split-amt { color: #8fd7ae; }
.mrow.split { border-top: 0; padding-top: 0; }
.pill {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--hairline);
  font-size: 0.75rem;
}
.flag {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.cell-title { margin: 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
/* 54ch keeps this under the 75-character cap; without it the wide cell ran 1026px */
.cell-desc { margin: 8px 0 0; max-width: 54ch; color: var(--muted); line-height: 1.6; font-size: 0.9375rem; }

/* footer */
.foot { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.foot .cta { margin-top: 28px; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--muted);
}
.foot-links a {
  color: var(--muted);
  /* a link beside static text has to read as a link */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-underline-offset: 3px;
}
.foot-links a:hover { color: var(--text); }

/* ---------------- line breaking ---------------- */
/* Headings share their two lines evenly; descriptions avoid a lone last word. */
.headline, .h2 { text-wrap: balance; }
.sub, .lede, .step-desc, .cell-desc, .trust { text-wrap: pretty; }

/* ---------------- keyboard focus ---------------- */
/* The default ring is invisible on the sky block. --ink is the token that is already
   guaranteed to contrast with whatever the block's current sky is. */
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.block :focus-visible, .bar :focus-visible { outline-color: var(--ink); }

/* ---------------- motion ---------------- */

.load { animation: rise 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .load, .reveal { animation: none; opacity: 1; transform: none; transition: none; }
  .fig-fill { transition: none; }
}

/* ---------------- small screens ---------------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 56px; }
  .hero-copy { max-width: none; }
  .phone { width: 224px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .block { padding-bottom: 44px; }
  .hero { padding-top: 52px; }
  .grid { grid-template-columns: 1fr; }
  .cell-wide { grid-column: span 1; }
  .sec { padding: 64px 0; }
  /* .sec's shorthand above wins on specificity, so the safe-area bottom has to be
     restated here or the home indicator eats the last row. */
  .foot { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .surface { padding-top: 44px; }
  .bar-what { display: none; }
  .bar { gap: 12px; padding: 0 14px; }
  .bar-track { width: 76px; }
}

/* The app's skip link, restyled in this page's tokens. It lives here because the
   landing does not load the app stylesheet, and an unstyled skip link is a visible
   link sitting on top of the hero. */
.skip-link {
  position: absolute;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border: 1px solid var(--c-btn-line);
  border-radius: 12px;
  background: var(--c-btn-bg);
  color: var(--c-btn-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(12px); }

/* The small print under the gate's two buttons. Ported from the lab's coming-soon page,
   which is not shipped, so it has to live here. */
.gate-note {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  max-width: 32rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.gate-note a { color: var(--accent); }