/* StrokeSense website. Built from the app's own pieces: tokens from Assets.xcassets, the
   red B.E. F.A.S.T. hero card, the Stroke Expert card, Learn-style rows and chunky buttons.
   Light only, like the app's default appearance. */
:root {
  color-scheme: light;
  --surface: #FAF8F6;
  --card: #FFFFFF;
  --soft: #F1EDE9;
  --hairline: #E7E2DD;
  --ink: #1F2328;
  --muted: #6B6F76;
  --accent: #D1102E;
  --brand: #D1102E;
  --brand-edge: #920B20;
  --white-edge: #CCCCCC;
  --space-xs: 8px; --space-s: 12px; --space-m: 16px; --space-l: 20px; --space-xl: 28px; --space-xxl: 40px;
  --radius-card: 20px; --radius-hero: 28px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 17px/1.45 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); -webkit-tap-highlight-color: transparent; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.befast :focus-visible { outline-color: #fff; }
img, svg { display: block; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--space-l); }

/* Header */
header { padding: var(--space-m) 0; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px; }
.brand img { width: 36px; height: 36px; border-radius: 22.37%; }
nav { display: flex; gap: 2px; }
nav a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--accent); }

/* Type: one rounded family; hierarchy from size and weight only */
.hero-title { font-size: clamp(38px, 7vw, 64px); line-height: 1.03; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 var(--space-m); }
.section-title { font-size: 28px; line-height: 1.2; font-weight: 700; margin: 0 0 var(--space-m); }
.card-title { font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0; }
.lead { font-size: 21px; color: var(--muted); margin: 0 0 var(--space-xl); max-width: 32ch; }

/* Chunky press-down button (ChunkyButtonStyle) */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 28px;
  background: var(--brand); color: #fff;
  font: inherit; font-weight: 700; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--brand-edge);
  transition: transform .12s, box-shadow .12s;
}
.button:active { transform: translateY(4px); box-shadow: 0 0 0 var(--brand-edge); }
.button.white { background: #fff; color: var(--brand); box-shadow: 0 4px 0 var(--white-edge); width: 100%; }
.button.white:active { box-shadow: 0 0 0 var(--white-edge); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-xxl); align-items: center; padding: var(--space-xxl) 0 56px; }
.hero .icon { width: 100%; max-width: 280px; justify-self: center; border-radius: 22.37%; }

section { margin-bottom: 56px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: stretch; }

/* FeatureBackground: shades of one red, fine grain on top */
.feature-red {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  border-radius: var(--radius-hero);
  background:
    radial-gradient(120% 90% at 0% 0%, #D51D3A 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 100%, #8F0B20 0%, transparent 70%),
    linear-gradient(160deg, #D1102E 40%, #A70D25 100%);
}
.feature-red::after, .feature-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .14; mix-blend-mode: overlay;
}

/* B.E. F.A.S.T. card, as on the app's Home screen */
.befast { padding: var(--space-l); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-l); }
.sign { display: grid; }
.sign-panel {
  grid-area: 1 / 1; display: flex; align-items: center; gap: var(--space-m);
  visibility: hidden; opacity: 0; transform: translateX(16px);
  transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s;
}
.sign-panel.active { visibility: visible; opacity: 1; transform: none; transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.sign-panel svg { width: 60px; height: 60px; flex: none; color: #fff; }
.sign-panel h3 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.sign-panel p { margin: 0; font-size: 15px; font-weight: 500; opacity: .9; }
.letters { display: flex; }
.letters button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 34px; font-weight: 900; line-height: 1.1; color: rgba(0,0,0,.28);
}
.letters button::after { content: ""; width: 20px; height: 4px; border-radius: 2px; background: transparent; }
.letters button[aria-pressed="true"] { color: #fff; }
.letters button[aria-pressed="true"]::after { background: #fff; }

/* Stroke Expert card */
.feature-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(100% 100% at 100% 100%, #F6F3F0 0%, var(--card) 60%);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-hero);
}
.expert { padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-m); }
.corner-glyph { position: absolute; top: -18px; right: -24px; width: 150px; height: 130px; z-index: -1; }
.expert-head { display: flex; align-items: flex-start; gap: var(--space-s); }
.expert-head svg { width: 30px; height: 30px; margin-top: 2px; flex: none; }
.expert-head p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.expert > .button { align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; padding: 12px 24px; }
.ask-field {
  display: flex; align-items: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-xs) 0 var(--space-m);
  background: var(--surface); border: 0.5px solid var(--hairline); border-radius: 999px;
  color: var(--ink); text-decoration: none;
}
.ask-field .typed { flex: 1; white-space: nowrap; overflow: hidden; }
.ask-field .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send { width: 38px; height: 38px; flex: none; margin-right: -3px; }
.suggestions a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-m);
  padding: var(--space-s) 0; color: var(--ink); text-decoration: none;
}
.suggestions a + a { border-top: 0.5px solid var(--hairline); }
.suggestions svg { width: 16px; height: 16px; flex: none; }

/* Learn-style grouped rows */
.list { background: var(--card); border: 0.5px solid var(--hairline); border-radius: var(--radius-card); padding: 0 var(--space-l); }
.list.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xxl); }
.row { display: flex; align-items: center; gap: var(--space-m); min-height: 76px; padding: var(--space-s) 0; }
.row + .row { border-top: 0.5px solid var(--hairline); }
.list.two .row:nth-child(2) { border-top: 0; }
.row svg { width: 28px; height: 28px; flex: none; color: var(--accent); }
.row .title { font-weight: 500; }
.row .subtitle { color: var(--muted); font-size: 15px; }
.row h3 { font-size: 17px; font-weight: 600; margin: 0 0 2px; }
.row p { margin: 0; color: var(--muted); font-size: 15px; }
.row.top { align-items: flex-start; padding: var(--space-m) 0; }
.row.top svg { margin-top: 2px; }

/* Long-form pages */
.page { max-width: 720px; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.page .hero-title { font-size: clamp(34px, 6vw, 46px); }
.prose { background: var(--card); border: 0.5px solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-xl); }
.prose h2 { font-size: 20px; font-weight: 700; margin: var(--space-xl) 0 6px; }
.prose p, .prose li { margin: 6px 0; }
.prose > :first-child { margin-top: 0; }
.updated { color: var(--muted); margin: 0 0 var(--space-l); }

/* Footer */
footer { border-top: 0.5px solid var(--hairline); padding: var(--space-xl) 0 var(--space-xxl); color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); }
footer a { color: var(--muted); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-l); padding-top: var(--space-m); }
  .hero .icon { max-width: 140px; grid-row: 1; justify-self: start; }
  .pair, .list.two { grid-template-columns: 1fr; }
  .list.two .row:nth-child(2) { border-top: 0.5px solid var(--hairline); }
}
@media (max-width: 480px) {
  header .wrap { padding: 0 14px; }
  .brand { font-size: 18px; }
  .brand img { width: 32px; height: 32px; }
  nav a { padding: 6px 8px; font-size: 15px; }
  .letters button { font-size: 30px; }
  .prose { padding: var(--space-l); }
}
@media (prefers-reduced-motion: reduce) {
  .sign-panel, .sign-panel.active { transition: none; }
  .ask-field .caret { animation: none; }
}