/* ==========================================================================
   Focus — marketing site
   Design system follows Apple HIG principles (see README "Design system").
   - Type: Inter (licensed, and the font the app itself uses).
   - Spacing: 8px step. Every gap is a multiple of --s.
   - Tap targets: 44px minimum hit region on every interactive element.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand — sampled from the Focus logo */
  --brand: #0C5E5C;            /* logo teal: 7.26:1 on --bg */
  --brand-ink: #FFFFFF;        /* text on brand: 7.58:1 */
  --brand-orange: #E68136;     /* logo orange — decoration only (2.66:1, never text) */
  --orange-text: #B4561A;      /* orange for text: 4.69:1 on --bg */

  /* App accent palette (lib/theme/app_theme.dart) — icon tiles only */
  --c-blue: #2196F3;
  --c-teal: #26C6DA;
  --c-green: #66BB6A;
  --c-orange: #FF7043;
  --c-pink: #EC407A;
  --c-purple: #7E57C2;

  /* Neutrals */
  --bg: #FBFAF7;               /* logo paper white */
  --bg-tint: #F3F1EC;
  --surface: #FFFFFF;
  --text: #1D1D1F;             /* 16.1:1 */
  --text-2: #5E5E63;           /* 6.18:1 */
  --hairline: rgb(0 0 0 / 0.08);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.04), 0 24px 64px rgb(12 94 92 / 0.14);
  --nav-bg: rgb(251 250 247 / 0.72);
  --pos: #1E7A3C;              /* 5.3:1 */
  --neg: #B3261E;              /* 6.1:1 */

  /* Type scale — Apple iOS steps (12–34) + two display steps for marketing */
  --t-caption: 12px;  --lh-caption: 16px;
  --t-footnote: 13px; --lh-footnote: 18px;
  --t-subhead: 15px;  --lh-subhead: 20px;
  --t-body: 17px;     --lh-body: 25px;   /* prose leading; UI uses 22px */
  --t-title3: 20px;   --lh-title3: 28px;
  --t-title1: 28px;   --lh-title1: 34px;
  --t-large: 34px;    --lh-large: 41px;
  --t-display: 48px;  --lh-display: 52px;
  --t-hero: 64px;     --lh-hero: 68px;

  /* Spacing — 8px step */
  --s: 8px;
  --gutter: calc(var(--s) * 2);
  --section: calc(var(--s) * 10);

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #5CC8BC;          /* 9.44:1 on --bg */
    --brand-ink: #04302E;      /* 7.12:1 on brand */
    --orange-text: #F0A065;    /* 8.96:1 */
    --bg: #0D1113;
    --bg-tint: #13181B;
    --surface: #171C1F;
    --text: #F5F5F7;           /* 17.4:1 */
    --text-2: #A1A1A6;         /* 6.68:1 on surface */
    --hairline: rgb(255 255 255 / 0.1);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.5);
    --nav-bg: rgb(13 17 19 / 0.72);
    --pos: #6FD38A;
    --neg: #FF8A80;
  }
}

@media (prefers-contrast: more) {
  :root { --text-2: var(--text); --hairline: rgb(127 127 127 / 0.5); }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--s) * 9);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--brand); text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; }

.icon {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.icon--xs { width: 12px; height: 12px; vertical-align: -1px; }

.container {
  width: 100%;
  max-width: 1128px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.skip-link {
  position: absolute; min-height: 44px; display: inline-flex; align-items: center; left: var(--s); top: calc(var(--s) * -8);
  z-index: 100; padding: var(--s) calc(var(--s) * 2);
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: var(--s); }

.muted { color: var(--text-2); }
.text-brand { color: var(--brand); }

.eyebrow {
  font-size: var(--t-subhead); line-height: var(--lh-subhead);
  font-weight: 600; color: var(--orange-text);
  margin-bottom: calc(var(--s) * 2);
}

.lead {
  font-size: var(--t-title3); line-height: var(--lh-title3);
  color: var(--text-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s);
  min-height: 44px;
  padding: 0 calc(var(--s) * 2.5);
  border: 0; border-radius: 999px;
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s, box-shadow 0.2s;
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 20px rgb(12 94 92 / 0.25); }
.btn--primary:hover { box-shadow: 0 10px 28px rgb(12 94 92 / 0.32); }
.btn--ghost { background: transparent; color: var(--brand); padding-inline: 0; }
.btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn--ghost.btn--lg { padding-inline: 0; }
.btn--tinted { background: color-mix(in srgb, var(--accent, var(--brand)) 14%, transparent); color: var(--text); }
.btn--tinted:hover { background: color-mix(in srgb, var(--accent, var(--brand)) 22%, transparent); }

.btn--lg { min-height: 52px; padding: 0 calc(var(--s) * 3); font-size: var(--t-body); line-height: 22px; }
.btn--sm { padding: 0 calc(var(--s) * 2); }

/* ---------- Navigation: floating glass layer ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--s) * 2);
  height: calc(var(--s) * 8);
}

.nav__brand {
  display: inline-flex; align-items: center; gap: var(--s);
  min-height: 44px;
  color: var(--text); font-weight: 700; font-size: var(--t-title3); line-height: var(--lh-title3);
}

.nav__links { display: none; gap: var(--s); }
.nav__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 calc(var(--s) * 1.5);
  color: var(--text-2); font-size: var(--t-subhead); font-weight: 500;
  border-radius: 999px;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--text); }

@media (min-width: 768px) {
  .nav__links { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--s) * 6) 0 calc(var(--s) * 8);
  overflow: hidden;
}

.hero__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48rem 32rem at 85% 20%, color-mix(in srgb, var(--brand-orange) 18%, transparent), transparent 70%),
    radial-gradient(40rem 32rem at 10% 90%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
}

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--s) * 8);
  align-items: center;
}

.hero__icon {
  width: 88px; height: 88px;
  margin-bottom: calc(var(--s) * 3);
  filter: drop-shadow(0 12px 24px rgb(12 94 92 / 0.2));
}

.hero__title {
  font-size: var(--t-display); line-height: var(--lh-display);
  font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: calc(var(--s) * 3);
}

.hero .lead { max-width: 34ch; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 1.5);
  margin-top: calc(var(--s) * 4);
}

.hero__device { display: flex; justify-content: center; }

@media (min-width: 1024px) {
  .hero { padding: calc(var(--s) * 10) 0 calc(var(--s) * 12); }
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero__title { font-size: var(--t-hero); line-height: var(--lh-hero); }
}

/* ---------- Phone (generic CSS device) ---------- */
.phone {
  width: 300px; aspect-ratio: 9 / 19.5;
  padding: 12px;
  border-radius: 52px;
  background: linear-gradient(145deg, #2a2d31, #121416);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgb(255 255 255 / 0.08);
}

.phone__screen {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 40px; overflow: hidden;
  background: #F8F9FE; color: #1D1D1F;
}

.phone__island {
  position: absolute; top: 10px; left: 50%; translate: -50% 0;
  width: 88px; height: 26px; border-radius: 20px; background: #000;
}

.statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px 0;
  height: 44px;
  font-size: var(--t-footnote); line-height: var(--lh-footnote); font-weight: 600;
}
.statusbar__dots { width: 24px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.8; }

.app { flex: 1; padding: 16px 18px 0; }
.app__greeting { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.app__sub { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: #5E5E63; margin-bottom: 16px; }

.app__banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2196F3, #26C6DA);
  color: #fff;
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 700;
  box-shadow: 0 8px 20px rgb(33 150 243 / 0.3);
}
.app__banner img { width: 44px; height: 44px; border-radius: 50%; background: #fff; }

.app__section { margin: 16px 0 8px; font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 700; }

.app__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.qa {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px;
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.04);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
}
.qa small { font-size: 11px; line-height: 13px; color: #5E5E63; }
.qa__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 6px;
  border-radius: 10px; color: #fff;
}
.qa__icon .icon { width: 18px; height: 18px; }

.upnext {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px;
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.04);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
}
.upnext::before { content: ""; width: 4px; align-self: stretch; border-radius: 2px; background: #2196F3; }
.upnext small { display: block; font-size: 11px; line-height: 13px; color: #5E5E63; }
.upnext b { font-weight: 600; }

.tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px 22px;
  background: #fff; border-top: 1px solid rgb(0 0 0 / 0.06);
  font-size: 11px; line-height: 13px; color: #6B6B70; font-weight: 600;
}
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabbar .icon { width: 22px; height: 22px; }
.tabbar .is-active { color: #1976D2; }

/* Hero entrance: quick actions settle in once on load */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.qa, .upnext { animation: rise 0.6s var(--ease) both; animation-delay: calc(0.4s + var(--d) * 0.08s); }
.phone { animation: rise 0.9s var(--ease) both 0.1s; }

/* ---------- Gradient tiles (app's per-tool colours) ---------- */
.g-blue   { background: linear-gradient(135deg, #2196F3, #42A5F5); }
.g-green  { background: linear-gradient(135deg, #43A047, #66BB6A); }
.g-orange { background: linear-gradient(135deg, #F4511E, #FF7043); }
.g-purple { background: linear-gradient(135deg, #673AB7, #7E57C2); }
.g-pink   { background: linear-gradient(135deg, #D81B60, #EC407A); }
.g-teal   { background: linear-gradient(135deg, #00ACC1, #26C6DA); }
.g-brand  { background: linear-gradient(135deg, #0C5E5C, #12807C); }

.tile {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px; color: #fff;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}
.tile .icon { width: 26px; height: 26px; }
.tile--sm { width: 32px; height: 32px; border-radius: 9px; }
.tile--sm .icon { width: 18px; height: 18px; }

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section--tint { background: var(--bg-tint); }

.section__head { max-width: 720px; margin-bottom: calc(var(--s) * 6); }
.section__title {
  font-size: var(--t-large); line-height: var(--lh-large);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: calc(var(--s) * 2);
}

@media (min-width: 1024px) {
  :root { --section: calc(var(--s) * 15); }
  .section__title { font-size: var(--t-display); line-height: var(--lh-display); }
}

/* ---------- Tool grid ---------- */
.tool-grid {
  display: grid; gap: calc(var(--s) * 2);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { :root { --gutter: calc(var(--s) * 3); } }
@media (min-width: 640px)  { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }

.tool-card {
  display: flex; flex-direction: column; gap: var(--s);
  height: 100%;
  padding: calc(var(--s) * 3);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  border: 1px solid var(--hairline);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tool-card .tile { margin-bottom: var(--s); }
.tool-card h3 { font-size: var(--t-title3); line-height: var(--lh-title3); font-weight: 600; }
.tool-card p { color: var(--text-2); font-size: var(--t-subhead); line-height: var(--lh-subhead); }
@media (hover: hover) {
  .tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* ---------- Feature rows ---------- */
.feature { padding: calc(var(--section) * 0.8) 0; }
.feature__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--s) * 5); align-items: center; }
.hero__grid > *, .feature__grid > * { min-width: 0; }

.feature__copy .tile { margin-bottom: calc(var(--s) * 3); }
.feature__title {
  font-size: var(--t-large); line-height: var(--lh-large);
  font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: calc(var(--s) * 2);
}
.feature__copy > p { color: var(--text-2); max-width: 52ch; }

.checks { display: grid; gap: var(--s); margin-top: calc(var(--s) * 3); }
.checks li {
  position: relative; padding-left: calc(var(--s) * 4);
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 500;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (prefers-color-scheme: dark) {
  .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E"); }
}

@media (min-width: 1024px) {
  .feature__grid { grid-template-columns: 1fr 1fr; gap: calc(var(--s) * 10); }
  .feature--flip .feature__copy { order: 2; }
  .feature__title { font-size: var(--t-display); line-height: var(--lh-display); }
}

/* Demo canvas */
.demo {
  position: relative;
  display: grid; gap: calc(var(--s) * 2);
  padding: calc(var(--s) * 3);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--bg-tint);
  border: 1px solid var(--hairline);
}
/* Small screens: cards sit directly on the page so the calendar keeps 44px days */
@media (max-width: 639px) {
  .demo { padding: 0; background: none; border: 0; }
  .demo .card { padding: calc(var(--s) * 1.5); }
  .countdown { padding: calc(var(--s) * 3) calc(var(--s) * 1.5); }
}
@media (min-width: 640px) { .demo { padding: calc(var(--s) * 5); } }

.card {
  padding: calc(var(--s) * 2.5);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--hairline);
}

/* Segmented control */
.segmented {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.segmented--full { display: grid; width: 100%; margin: calc(var(--s) * 2) 0; }
.segmented button {
  min-height: 44px; padding: 0 var(--s);
  border: 0; border-radius: 9px; background: transparent;
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 600;
  color: var(--text-2); cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
.segmented [aria-checked="true"], .segmented [aria-selected="true"] {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

/* Calendar demo */
.cal__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--s) * 1.5); }
.cal__head b { font-size: var(--t-title3); line-height: var(--lh-title3); }
.cal__head .muted { font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.cal__dow, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal__dow { font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.cal__days button {
  position: relative;
  height: 44px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 500;
  border-radius: 50%;
  display: grid; place-items: center;
}
.cal__days button span {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}
.cal__days button.has-event::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue);
}
.cal__days button.is-today span { color: var(--c-blue); font-weight: 700; }
.cal__days button[aria-pressed="true"] span { background: #1976D2; color: #fff; }
.cal__days .blank { height: 44px; }
.cal__events { display: grid; gap: var(--s); margin-top: calc(var(--s) * 2); min-height: 112px; }
.cal__events li {
  display: flex; gap: calc(var(--s) * 1.5); align-items: center;
  padding: calc(var(--s) * 1.5);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-blue) 9%, transparent);
  font-size: var(--t-subhead); line-height: var(--lh-subhead);
  animation: rise 0.35s var(--ease) both;
}
.cal__events li::before { content: ""; width: 4px; align-self: stretch; border-radius: 2px; background: var(--c-blue); }
.cal__events small { display: block; color: var(--text-2); font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.cal__events .empty { background: none; color: var(--text-2); }
.cal__events .empty::before { display: none; }

.alarm__label { font-weight: 600; margin-bottom: var(--s); }
.alarm .segmented { width: 100%; display: grid; }
.alarm__hint { margin-top: var(--s); font-size: var(--t-footnote); line-height: var(--lh-footnote); min-height: 36px; }

/* Tasks demo */
.tasks__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: calc(var(--s) * 1.5); }
.tasks__head b { font-size: var(--t-title3); line-height: var(--lh-title3); }
.tasks__head p { font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.pill {
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-green) 16%, transparent);
  font-size: var(--t-footnote); line-height: var(--lh-footnote); font-weight: 600;
}
.tasklist li + li { border-top: 1px solid var(--hairline); }
.task {
  display: flex; align-items: center; gap: calc(var(--s) * 1.5);
  width: 100%; min-height: 56px; padding: var(--s) 0;
  border: 0; background: none; text-align: left; cursor: pointer;
}
.task__box {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  color: #fff;
  transition: background-color 0.25s var(--ease), border-color 0.25s;
}
.task__box .icon { width: 16px; height: 16px; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.35s var(--ease) 0.05s; }
.task__text b { display: block; font-size: var(--t-body); line-height: 22px; font-weight: 500; transition: color 0.25s; }
.task__text small { color: var(--text-2); font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.task[aria-pressed="true"] .task__box { background: #43A047; border-color: #43A047; }
.task[aria-pressed="true"] .task__box .icon { stroke-dashoffset: 0; }
.task[aria-pressed="true"] b { color: var(--text-2); text-decoration: line-through; }

/* Countdown demo */
.countdown { text-align: center; padding: calc(var(--s) * 4) calc(var(--s) * 2); }
.countdown > .muted { font-weight: 600; }
.countdown__digits {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s);
  margin: calc(var(--s) * 2) 0 calc(var(--s) * 3);
}
.countdown__digits b {
  display: block;
  font-size: var(--t-display); line-height: var(--lh-display); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #7E57C2, #B39DDB);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-color-scheme: dark) {
  .countdown__digits b { background-image: linear-gradient(180deg, #D1C4E9, #9575CD); }
}
.countdown__digits span { font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.countdown__bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c-purple) 14%, transparent); overflow: hidden; }
.countdown__bar span { display: block; height: 100%; width: var(--progress, 62%); border-radius: inherit; background: linear-gradient(90deg, #7E57C2, #B39DDB); transition: width 1s linear; }
.countdown__list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s) * 2); }
.mini { display: grid; gap: 2px; font-size: var(--t-subhead); line-height: var(--lh-subhead); }
.mini .muted { font-size: var(--t-footnote); line-height: var(--lh-footnote); }

/* Group Photo demo */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s); }
.mini-phone { display: grid; gap: var(--s); }
.mini-phone__label { font-size: var(--t-footnote); line-height: var(--lh-footnote); font-weight: 600; color: var(--text-2); text-align: center; }
.viewfinder, .controller {
  position: relative; aspect-ratio: 9 / 16;
  border-radius: 24px; overflow: hidden;
  border: 6px solid #1D1F22;
  box-shadow: var(--shadow);
}
.viewfinder { background: linear-gradient(180deg, #9ED3F2 0%, #CDE8F5 55%, #A5D6A7 55%, #81C784 100%); }
.scene { position: absolute; inset: 0; transition: transform 0.4s var(--ease); transform: scale(var(--zoom, 1)); transform-origin: 50% 70%; }
.person { position: absolute; bottom: 22%; width: 18%; aspect-ratio: 1 / 2.1; border-radius: 40% 40% 12% 12%; }
.person::before { content: ""; position: absolute; left: 50%; top: -38%; translate: -50% 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #F1C9A5; }
.p1 { left: 16%; background: #EC407A; }
.p2 { left: 41%; background: #2196F3; bottom: 24%; }
.p3 { left: 66%; background: #FF7043; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.is-on { animation: flash 0.5s ease-out; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.code {
  position: absolute; left: 50%; bottom: 8px; translate: -50% 0;
  padding: 4px 10px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: #fff;
  font-size: 11px; line-height: 13px; font-weight: 600; white-space: nowrap;
}
.controller {
  display: grid; align-content: space-between; justify-items: center;
  padding: calc(var(--s) * 1.5) var(--s);
  background: #111315; color: #fff;
}
.badge-live { font-size: 11px; line-height: 13px; font-weight: 600; color: #7BE495; }
.zoom { font-size: var(--t-title3); line-height: var(--lh-title3); font-weight: 700; font-variant-numeric: tabular-nums; }
.controller__row { display: flex; align-items: center; gap: 4px; }
.round, .shutter {
  display: grid; place-items: center;
  border: 0; cursor: pointer; color: #fff;
  border-radius: 50%;
}
.round { width: 44px; height: 44px; background: rgb(255 255 255 / 0.14); }
.round .icon { width: 18px; height: 18px; }
.shutter { width: 52px; height: 52px; background: transparent; border: 3px solid #fff; }
.shutter span { width: 40px; height: 40px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.shutter:active span { transform: scale(0.86); }
.pair__link { display: grid; gap: 6px; }
.pair__link span { width: 6px; height: 6px; border-radius: 50%; background: var(--c-pink); opacity: 0.3; }
.is-live .pair__link span { animation: pulse 1.4s ease-in-out infinite; }
.pair__link span:nth-child(2) { animation-delay: 0.2s; }
.pair__link span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 50% { opacity: 1; transform: scale(1.3); } }

.toast {
  min-height: 44px; display: grid; place-items: center;
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 500;
  color: var(--text-2); text-align: center;
}
.toast:empty { visibility: hidden; }

/* Scanner demo */
.scanner__stage {
  position: relative;
  height: 240px; border-radius: var(--r-sm);
  background: linear-gradient(160deg, #6D5A4A, #4A3C31);
  display: grid; place-items: center; overflow: hidden;
}
.paper {
  width: 56%; height: 82%;
  padding: 16px 14px; display: grid; align-content: start; gap: 9px;
  background: #FDFCF8; border-radius: 3px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
}
.paper__line { height: 6px; border-radius: 3px; background: #D5D2CA; }
.w40 { width: 40%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; }
.corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--c-orange); }
.corner.tl { top: 16px; left: 21%; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.corner.tr { top: 16px; right: 21%; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.corner.bl { bottom: 16px; left: 21%; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.corner.br { bottom: 16px; right: 21%; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.scanline {
  position: absolute; left: 18%; right: 18%; top: 10%; height: 2px;
  background: var(--c-orange);
  box-shadow: 0 0 16px 4px rgb(255 112 67 / 0.55);
  opacity: 0;
}
.is-live .scanline { animation: scan 2.6s var(--ease) infinite; }
@keyframes scan { 0% { top: 10%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 88%; opacity: 0; } }
.scanner__pages { display: flex; gap: var(--s); margin-top: calc(var(--s) * 2); min-height: 52px; flex-wrap: wrap; }
.scanner__pages span {
  width: 38px; height: 52px; border-radius: 4px;
  background: #FDFCF8 repeating-linear-gradient(180deg, transparent 0 8px, #D5D2CA 8px 10px) content-box;
  padding: 8px 6px; border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  animation: rise 0.4s var(--ease) both;
}
.scanner__count { margin-top: var(--s); font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.scanner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s); margin-top: calc(var(--s) * 2); }

/* Splitly demo */
.split__head { display: flex; justify-content: space-between; align-items: baseline; }
.split__head b { font-size: var(--t-title3); line-height: var(--lh-title3); }
.split__head .muted { font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.expenses li, .balances li {
  display: grid; align-items: center; gap: calc(var(--s) * 1.5);
  padding: calc(var(--s) * 1.5) 0;
  font-size: var(--t-subhead); line-height: var(--lh-subhead);
}
.expenses li { grid-template-columns: auto 1fr auto; }
.expenses li + li, .balances li + li { border-top: 1px solid var(--hairline); }
.expenses small { display: block; color: var(--text-2); font-size: var(--t-footnote); line-height: var(--lh-footnote); }
.avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; font-size: var(--t-subhead); font-weight: 700;
}
.a1 { background: #00838F; } .a2 { background: #0C5E5C; } .a3 { background: #5E35B1; }
.amount { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.balances li { grid-template-columns: 64px 1fr; }
.balances .amount { grid-column: 1 / -1; text-align: left; font-size: var(--t-footnote); line-height: var(--lh-footnote); margin-top: -8px; }
.bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 0.8s var(--ease); }
[role="tabpanel"]:not([hidden]) .bar i { width: var(--w); }
.bar .neg { background: #EF5350; }
.bar .pos { background: #43A047; }
.neg-text { color: var(--neg); }
.pos-text { color: var(--pos); }
@media (min-width: 480px) {
  .balances li { grid-template-columns: 64px 1fr 150px; }
  .balances .amount { grid-column: auto; text-align: right; margin-top: 0; }
}

/* ---------- Widgets ---------- */
.widgets {
  display: grid; gap: calc(var(--s) * 2);
  grid-template-columns: 1fr 1fr;
  padding: calc(var(--s) * 3);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #0C5E5C 0%, #12807C 45%, #E68136 130%);
  margin-bottom: calc(var(--s) * 6);
}
.widget {
  padding: calc(var(--s) * 2);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #1D1D1F;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
}
.widget--tasks { grid-column: 1 / -1; }
.widget__head { display: flex; align-items: center; gap: var(--s); margin-bottom: var(--s); font-size: var(--t-subhead); }
.widget--tasks li { display: flex; align-items: center; gap: var(--s); padding: 6px 0; font-size: var(--t-subhead); line-height: var(--lh-subhead); }
.widget--tasks li + li { border-top: 1px solid rgb(0 0 0 / 0.06); }
.widget--tasks s { color: #5E5E63; }
.box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(0 0 0 / 0.25); color: #fff; flex: none; }
.box.is-done { background: #43A047; border-color: #43A047; }
.box .icon { width: 12px; height: 12px; stroke-width: 3.5; }
.widget--count { display: grid; align-content: start; gap: 2px; }
.widget--count .tile { margin-bottom: var(--s); }
.widget--count .big { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -0.03em; color: #5E35B1; }
.widget--count > span:not(.tile) { color: #5E5E63; }
.widget--siri { display: grid; align-content: start; gap: var(--s); }
.widget--siri .muted { color: #5E5E63; }
.siri-wave { display: flex; align-items: center; gap: 3px; height: 24px; }
.siri-wave i { width: 4px; height: 30%; border-radius: 2px; background: linear-gradient(#0C5E5C, #E68136); }
.is-live .siri-wave i { animation: wave 1.1s ease-in-out infinite; }
.siri-wave i:nth-child(2) { animation-delay: 0.15s; }
.siri-wave i:nth-child(3) { animation-delay: 0.3s; }
.siri-wave i:nth-child(4) { animation-delay: 0.45s; }
.siri-wave i:nth-child(5) { animation-delay: 0.6s; }
@keyframes wave { 50% { height: 100%; } }

@media (min-width: 768px) {
  .widgets { grid-template-columns: 2fr 1fr 1.2fr; padding: calc(var(--s) * 5); }
  .widget--tasks { grid-column: auto; }
}

.feature-list { display: grid; gap: calc(var(--s) * 3); }
.feature-list li { display: flex; gap: calc(var(--s) * 2); }
.feature-list .icon { color: var(--brand); margin-top: 2px; }
.feature-list b { display: block; margin-bottom: 4px; }
.feature-list p { color: var(--text-2); font-size: var(--t-subhead); line-height: var(--lh-subhead); }
@media (min-width: 768px) { .feature-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Details ---------- */
.detail-grid { display: grid; gap: calc(var(--s) * 2); }
@media (min-width: 640px)  { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: repeat(4, 1fr); } }
.detail { padding: calc(var(--s) * 3); }
.detail .icon { width: 28px; height: 28px; color: var(--brand); margin-bottom: calc(var(--s) * 2); }
.detail h3 { font-size: var(--t-body); line-height: 22px; font-weight: 600; margin-bottom: var(--s); }
.detail p { color: var(--text-2); font-size: var(--t-subhead); line-height: var(--lh-subhead); }

.roadmap { margin-top: calc(var(--s) * 8); text-align: center; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s); }
.chips li {
  padding: var(--s) calc(var(--s) * 2); border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--text) 25%, transparent);
  color: var(--text-2);
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 500;
}

/* ---------- CTA ---------- */
.cta {
  padding: var(--section) 0;
  background:
    radial-gradient(40rem 24rem at 50% 0%, color-mix(in srgb, var(--brand-orange) 16%, transparent), transparent 70%),
    var(--bg-tint);
  text-align: center;
}
.cta__inner { display: grid; justify-items: center; gap: calc(var(--s) * 2); }
.cta img { width: 112px; height: 112px; margin-bottom: var(--s); filter: drop-shadow(0 16px 32px rgb(12 94 92 / 0.2)); }
.cta .section__title { margin-bottom: 0; }
.cta .btn { margin-top: calc(var(--s) * 2); }

/* ---------- Footer ---------- */
.footer { padding: calc(var(--s) * 5) 0 calc(var(--s) * 5 + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.footer__inner { display: grid; gap: calc(var(--s) * 2); justify-items: start; }
.footer__brand { display: flex; align-items: center; gap: var(--s); font-weight: 700; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 calc(var(--s) * 3); }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-subhead); font-weight: 500; }
.footer__legal { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-2); }
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: auto 1fr; align-items: center; }
  .footer__links { justify-content: flex-end; }
  .footer__legal { grid-column: 1 / -1; }
}

/* ---------- Scroll reveal (demo panels only) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .scene { transition: none; }
}