/* entry.flowb.ai landing — Prep Design System v5 tokens (plain CSS, values from tokens/v5-tokens.md) */

@font-face {
  font-family: 'SVN-Poppins';
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/SVN-Poppins-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter_range_5.woff2) format('woff2');
  unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0,
    u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab;
}
@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter_range_7.woff2) format('woff2');
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308,
    u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

:root {
  color-scheme: light;
  --color-canvas: #F2F4F7;          /* base-surface-tertiary */
  --color-surface: #FFFFFF;         /* base-surface-primary */
  --color-hairline: #E8ECF3;        /* border-base-secondary */
  --color-text: #1F242E;            /* text-base-primary */
  --color-text-2: #566681;          /* text-base-secondary */
  --color-icon: #8394AE;            /* text-base-tertiary — icons only */
  --color-brand: #0060FD;           /* brand-primary */
  --logo-filter: none;
  --shadow-card: 0 0 0 1px rgba(31, 36, 46, 0.04), 0 1px 2px 0 rgba(31, 36, 46, 0.05), 0 2px 6px -2px rgba(31, 36, 46, 0.04);
  --shadow-raised: 0 0 0 1px rgba(31, 36, 46, 0.04), 0 2px 4px -2px rgba(31, 36, 46, 0.06), 0 6px 16px -4px rgba(31, 36, 46, 0.1);
  --font-display: 'SVN-Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: 16px;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-canvas: #14181F;
    --color-surface: #1F242E;
    --color-hairline: #343C4B;
    --color-text: #F9FAFB;
    --color-text-2: #B9C4D5;
    --logo-filter: brightness(0) invert(1);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-raised: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  }
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-canvas);
  color: var(--color-text);
  font: 400 16px/24px var(--font-body);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.topbar, .page {
  max-width: 600px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.topbar { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 8px; }
.logo { height: 28px; width: auto; filter: var(--logo-filter); }

.page { padding-top: 24px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 8px; }
.title { margin: 0; font: 600 24px/32px var(--font-display); letter-spacing: -0.012em; }
@media (min-width: 768px) { .title { font-size: 30px; line-height: 38px; } }
/* The brand is never translated; what the test is sits on the line below (Tu 2026-11-12). */
.subtitle { margin: 0; font: 600 16px/24px var(--font-body); color: var(--color-text-2); }
.caption { margin: 0 0 16px; color: var(--color-text-2); }

.choices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.choice {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 16px 20px;
  border-radius: 20px;                 /* radius-l-plus */
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.choice:hover { box-shadow: var(--shadow-raised); }
.choice:active { transform: scale(0.99); }
.choice-text { flex: 1; display: flex; flex-direction: column; }
.choice-title { font: 600 18px/26px var(--font-display); letter-spacing: -0.012em; }
.choice-caption { font-size: 14px; line-height: 20px; letter-spacing: -0.006em; color: var(--color-text-2); }
.chevron { flex: none; width: 24px; height: 24px; color: var(--color-icon); }

@media (prefers-reduced-motion: reduce) {
  .choice { transition: none; }
  .choice:active { transform: none; }
}