/* ==========================================================================
   Awakly — awakly.app
   Plain CSS, no build step. Colors are the app's palette (Assets.xcassets/Palette)
   and follow the visitor's system, or the theme picked in the footer:
   light-dark() reads color-scheme, which html[data-theme] pins.
   ========================================================================== */

/* Font
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* page */
  --bg: light-dark(#FBFAFE, #09090B);
  --bg-sunk: light-dark(#F5F3FB, #0D0D10);          /* the app's window color, lifted */
  --surface: light-dark(#FFFFFF, #111114);
  --surface-2: light-dark(#F1EFF8, #18181C);
  --ink: light-dark(#161524, #F0EFF8);              /* label */
  --ink-2: light-dark(rgb(22 21 36 / 0.64), rgb(240 239 248 / 0.64));
  --ink-3: light-dark(rgb(22 21 36 / 0.50), rgb(240 239 248 / 0.46));
  --ink-4: light-dark(rgb(22 21 36 / 0.22), rgb(240 239 248 / 0.20));
  --hair: light-dark(rgb(24 21 52 / 0.08), rgb(255 255 255 / 0.07));
  --hair-2: light-dark(rgb(24 21 52 / 0.14), rgb(255 255 255 / 0.12));
  --nav-bg: light-dark(rgb(251 250 254 / 0.72), rgb(9 9 11 / 0.66));

  /* the icon's horizon, and the app's states */
  --accent: light-dark(#5850E6, #8C84FF);
  --accent-deep: light-dark(#4237C4, #6456F0);
  --accent-hi: light-dark(#7A72FF, #A39CFF);
  --accent-tint: light-dark(rgb(88 80 230 / 0.12), rgb(140 132 255 / 0.16));
  --accent-edge: light-dark(rgb(88 80 230 / 0.32), rgb(140 132 255 / 0.38));
  --accent-shadow: light-dark(rgb(88 80 230 / 0.32), rgb(0 0 0 / 0.24));
  --warning: light-dark(#F37021, #FF8C42);
  --warning-tint: light-dark(rgb(243 112 33 / 0.12), rgb(255 140 66 / 0.15));
  --success: light-dark(#2D9D57, #4FD27D);
  --critical: light-dark(#D7443A, #FF6B5E);

  /* the icon's sun */
  --sun: #FFB57C;
  --sun-deep: #F2894B;
  --glow: light-dark(rgb(255 166 102 / 0.34), rgb(255 138 66 / 0.30));
  --glow-cool: light-dark(rgb(140 132 255 / 0.22), rgb(110 100 255 / 0.20));

  /* the drop-down and Settings, as the app draws them */
  --ui-glass: light-dark(rgb(249 247 255 / 0.74), rgb(12 12 13 / 0.84));
  --ui-glass-edge: light-dark(rgb(255 255 255 / 0.70), rgb(255 255 255 / 0.15));
  --ui-glass-hair: light-dark(rgb(24 21 52 / 0.12), rgb(0 0 0 / 0.6));
  --ui-card: light-dark(rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.06));
  --ui-card-edge: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.11));
  --ui-card-hair: light-dark(rgb(24 21 52 / 0.08), rgb(0 0 0 / 0.32));
  --ui-quiet: light-dark(rgb(24 21 52 / 0.05), rgb(255 255 255 / 0.07));
  --ui-quiet-strong: light-dark(rgb(24 21 52 / 0.09), rgb(255 255 255 / 0.12));
  --ui-sep: light-dark(rgb(24 21 52 / 0.12), rgb(255 255 255 / 0.09));
  --ui-sep-start: light-dark(rgb(24 21 52 / 0.2), #000);   /* the hairline cut into the glass: a line, then its edge */
  --ui-sep-end: light-dark(#fff, rgb(255 255 255 / 0.09));
  --ui-shadow-soft: light-dark(rgb(24 21 52 / 0.08), rgb(0 0 0 / 0.4));
  --ui-switch-off: light-dark(rgb(24 21 52 / 0.12), rgb(255 255 255 / 0.16));
  --ui-label-2: light-dark(rgb(22 21 36 / 0.60), rgb(240 239 248 / 0.60));
  --ui-label-3: light-dark(rgb(22 21 36 / 0.40), rgb(240 239 248 / 0.40));
  --ui-label-4: light-dark(rgb(22 21 36 / 0.25), rgb(240 239 248 / 0.25));
  --ui-separator: light-dark(rgb(24 21 52 / 0.2), rgb(255 255 255 / 0.09));
  --ui-shadow: light-dark(rgb(24 21 52 / 0.18), rgb(0 0 0 / 0.55));

  --shadow-resting: 0 0.5px 1px light-dark(rgb(24 21 52 / 0.06), rgb(0 0 0 / 0.4)), 0 4px 14px light-dark(rgb(24 21 52 / 0.05), rgb(0 0 0 / 0.25));
  --shadow-floating: 0 1px 2px var(--ui-shadow), 0 24px 60px light-dark(rgb(24 21 52 / 0.16), rgb(0 0 0 / 0.6));
  /* lifted, not outlined: a hairline, the faintest contact under it, and a wide shadow that fades out soft */
  --shadow-panel: inset 0 0 0 0.5px var(--hair-2), 0 0.5px 1px light-dark(rgb(24 21 52 / 0.05), rgb(0 0 0 / 0.3)), 0 6px 14px -4px light-dark(rgb(24 21 52 / 0.06), rgb(0 0 0 / 0.3)), 0 28px 56px -18px light-dark(rgb(24 21 52 / 0.16), rgb(0 0 0 / 0.55));
  --shadow-window-near: light-dark(rgb(24 21 52 / 0.1), rgb(0 0 0 / 0.4));
  --shadow-window-far: light-dark(rgb(24 21 52 / 0.16), rgb(0 0 0 / 0.55));
  /* the bento's small cards (Shortcuts actions, battery rows): a ring and a soft drop */
  --shadow-card: inset 0 0 0 1px var(--hair-2), 0 4px 14px light-dark(rgb(24 21 52 / 0.06), rgb(0 0 0 / 0.3));
  --shadow-panel-phone: inset 0 0 0 0.5px var(--hair-2), 0 0.5px 1px light-dark(rgb(24 21 52 / 0.05), rgb(0 0 0 / 0.3)), 0 16px 32px -14px light-dark(rgb(24 21 52 / 0.14), rgb(0 0 0 / 0.5));

  --r-card: 16px;
  --r-tile: 20px;

  /* spacing — the app's (Awakly/Support/Tokens.swift), with its two in-between steps for an icon beside its label
     and a row's tile beside its text, continued past 32 for the page's layout */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-inline-icon: 5px;
  --space-md: 8px;
  --space-row-icon: 10px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxxl: 24px;
  --space-xxxxl: 32px;
  --space-page-40: 40px;
  --space-page-48: 48px;
  --space-page-64: 64px;
  --space-page-96: 96px;
  --space-page-128: 128px;
  --space-page-160: 160px;
  --space-page-192: 192px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* easing — strong ease-outs; springs come from js/motion.js */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);            /* out-expo: reveals, hovers */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);         /* out-quint */
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-press: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Browsers without light-dark() (Safari before 17.5): the same tokens, switched by html[data-scheme],
   which the inline script in each page's head sets from the footer's choice or the system. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #FBFAFE;
    --bg-sunk: #F5F3FB;
    --surface: #FFFFFF;
    --surface-2: #F1EFF8;
    --ink: #161524;
    --ink-2: rgb(22 21 36 / 0.64);
    --ink-3: rgb(22 21 36 / 0.50);
    --ink-4: rgb(22 21 36 / 0.22);
    --hair: rgb(24 21 52 / 0.08);
    --hair-2: rgb(24 21 52 / 0.14);
    --nav-bg: rgb(251 250 254 / 0.72);
    --accent: #5850E6;
    --accent-deep: #4237C4;
    --accent-hi: #7A72FF;
    --accent-tint: rgb(88 80 230 / 0.12);
    --accent-edge: rgb(88 80 230 / 0.32);
    --accent-shadow: rgb(88 80 230 / 0.32);
    --warning: #F37021;
    --warning-tint: rgb(243 112 33 / 0.12);
    --success: #2D9D57;
    --critical: #D7443A;
    --glow: rgb(255 166 102 / 0.34);
    --glow-cool: rgb(140 132 255 / 0.22);
    --ui-glass: rgb(249 247 255 / 0.74);
    --ui-glass-edge: rgb(255 255 255 / 0.70);
    --ui-glass-hair: rgb(24 21 52 / 0.12);
    --ui-card: rgb(255 255 255 / 0.72);
    --ui-card-edge: rgb(255 255 255 / 0.95);
    --ui-card-hair: rgb(24 21 52 / 0.08);
    --ui-quiet: rgb(24 21 52 / 0.05);
    --ui-quiet-strong: rgb(24 21 52 / 0.09);
    --ui-sep: rgb(24 21 52 / 0.12);
    --ui-sep-start: rgb(24 21 52 / 0.2);
    --ui-sep-end: #fff;
    --ui-shadow-soft: rgb(24 21 52 / 0.08);
    --ui-switch-off: rgb(24 21 52 / 0.12);
    --ui-label-2: rgb(22 21 36 / 0.60);
    --ui-label-3: rgb(22 21 36 / 0.40);
    --ui-label-4: rgb(22 21 36 / 0.25);
    --ui-separator: rgb(24 21 52 / 0.2);
    --ui-shadow: rgb(24 21 52 / 0.18);
    --shadow-resting: 0 0.5px 1px rgb(24 21 52 / 0.06), 0 4px 14px rgb(24 21 52 / 0.05);
    --shadow-floating: 0 1px 2px var(--ui-shadow), 0 24px 60px rgb(24 21 52 / 0.16);
    --shadow-panel: inset 0 0 0 0.5px var(--hair-2), 0 0.5px 1px rgb(24 21 52 / 0.05), 0 6px 14px -4px rgb(24 21 52 / 0.06), 0 28px 56px -18px rgb(24 21 52 / 0.16);
    --shadow-window-near: rgb(24 21 52 / 0.1);
    --shadow-window-far: rgb(24 21 52 / 0.16);
    --shadow-card: inset 0 0 0 1px var(--hair-2), 0 4px 14px rgb(24 21 52 / 0.06);
    --shadow-panel-phone: inset 0 0 0 0.5px var(--hair-2), 0 0.5px 1px rgb(24 21 52 / 0.05), 0 16px 32px -14px rgb(24 21 52 / 0.14);
  }
  :root[data-scheme="dark"] {
    --bg: #09090B;
    --bg-sunk: #0D0D10;
    --surface: #111114;
    --surface-2: #18181C;
    --ink: #F0EFF8;
    --ink-2: rgb(240 239 248 / 0.64);
    --ink-3: rgb(240 239 248 / 0.46);
    --ink-4: rgb(240 239 248 / 0.20);
    --hair: rgb(255 255 255 / 0.07);
    --hair-2: rgb(255 255 255 / 0.12);
    --nav-bg: rgb(9 9 11 / 0.66);
    --accent: #8C84FF;
    --accent-deep: #6456F0;
    --accent-hi: #A39CFF;
    --accent-tint: rgb(140 132 255 / 0.16);
    --accent-edge: rgb(140 132 255 / 0.38);
    --accent-shadow: rgb(0 0 0 / 0.24);
    --warning: #FF8C42;
    --warning-tint: rgb(255 140 66 / 0.15);
    --success: #4FD27D;
    --critical: #FF6B5E;
    --glow: rgb(255 138 66 / 0.30);
    --glow-cool: rgb(110 100 255 / 0.20);
    --ui-glass: rgb(12 12 13 / 0.84);
    --ui-glass-edge: rgb(255 255 255 / 0.15);
    --ui-glass-hair: rgb(0 0 0 / 0.6);
    --ui-card: rgb(255 255 255 / 0.06);
    --ui-card-edge: rgb(255 255 255 / 0.11);
    --ui-card-hair: rgb(0 0 0 / 0.32);
    --ui-quiet: rgb(255 255 255 / 0.07);
    --ui-quiet-strong: rgb(255 255 255 / 0.12);
    --ui-sep: rgb(255 255 255 / 0.09);
    --ui-sep-start: #000;
    --ui-sep-end: rgb(255 255 255 / 0.09);
    --ui-shadow-soft: rgb(0 0 0 / 0.4);
    --ui-switch-off: rgb(255 255 255 / 0.16);
    --ui-label-2: rgb(240 239 248 / 0.60);
    --ui-label-3: rgb(240 239 248 / 0.40);
    --ui-label-4: rgb(240 239 248 / 0.25);
    --ui-separator: rgb(255 255 255 / 0.09);
    --ui-shadow: rgb(0 0 0 / 0.55);
    --shadow-resting: 0 0.5px 1px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.25);
    --shadow-floating: 0 1px 2px var(--ui-shadow), 0 24px 60px rgb(0 0 0 / 0.6);
    --shadow-panel: inset 0 0 0 0.5px var(--hair-2), 0 0.5px 1px rgb(0 0 0 / 0.3), 0 6px 14px -4px rgb(0 0 0 / 0.3), 0 28px 56px -18px rgb(0 0 0 / 0.55);
    --shadow-window-near: rgb(0 0 0 / 0.4);
    --shadow-window-far: rgb(0 0 0 / 0.55);
    --shadow-card: inset 0 0 0 1px var(--hair-2), 0 4px 14px rgb(0 0 0 / 0.3);
    --shadow-panel-phone: inset 0 0 0 0.5px var(--hair-2), 0 0.5px 1px rgb(0 0 0 / 0.3), 0 16px 32px -14px rgb(0 0 0 / 0.5);
  }
}

/* Base
   -------------------------------------------------------------------------- */
html {
  font-size: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'cv11' 1;
  font-optical-sizing: auto;
}

::selection { background: var(--accent); color: #fff; }

h1, h2, h3 { text-wrap: balance; font-weight: 640; letter-spacing: -0.03em; line-height: 1.06; }
p { text-wrap: pretty; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code, kbd { font-family: var(--mono); }

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

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-xxxl); }
@media (min-width: 640px) { .wrap { padding: 0 var(--space-page-40); } }

.section { position: relative; padding: var(--space-page-96) 0; }
@media (min-width: 960px) { .section { padding: var(--space-page-160) 0; } }

/* the horizon: every big section opens on a hairline that's brightest in the middle */
.horizon-rule { position: relative; }
.horizon-rule::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-2) 20%, var(--accent-edge) 50%, var(--hair-2) 80%, transparent);
}

/* Section headings
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: var(--space-md);
  font-size: 13px; font-weight: 550; letter-spacing: 0; color: var(--ink-2);
  margin-bottom: var(--space-xxxl);
}
.kicker .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.kicker .pro { margin-left: var(--space-xxs); }

.h2 { font-size: clamp(34px, 2.6vw + 20px, 60px); letter-spacing: -0.035em; }
.h2 .dim { color: var(--ink-3); }
.sub { font-size: clamp(16px, 0.35vw + 14.5px, 19px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; margin-top: var(--space-xxxl); }
.head-center { text-align: center; }
.head-center .sub { margin-inline: auto; }
.note { font-size: 13px; color: var(--ink-3); letter-spacing: 0.005em; }

/* Pro badge: the app's ProBadge, a capsule in the accent tint with semibold accent text, 8 in */
.pro {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-md); border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--accent); background: var(--accent-tint);
}

/* Buttons — the app's primary capsule: the accent, lit from above, with a bright rim
   -------------------------------------------------------------------------- */
.btn {
  --h: 44px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-md);
  height: var(--h); padding: 0 var(--space-xl); border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  color: #fff;
  background: linear-gradient(to bottom, var(--accent-hi), var(--accent) 55%, var(--accent-deep));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.14),
    0 0 0 0.5px rgb(30 20 120 / 0.35),
    0 1px 2px rgb(30 20 120 / 0.2),
    0 6px 18px -4px var(--accent-shadow);
  transition: transform 160ms var(--ease-press), box-shadow 200ms ease, filter 200ms ease;
}
.btn::after { /* press darken */
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: rgb(0 0 0 / 0.16); opacity: 0; transition: opacity 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36), inset 0 0 0 0.5px rgb(255 255 255 / 0.16), 0 0 0 0.5px rgb(30 20 120 / 0.35), 0 1px 2px rgb(30 20 120 / 0.2), 0 10px 26px -6px var(--accent-shadow); }
}
.btn:active { transform: scale(0.97); }
.btn:active::after { opacity: 1; }

.btn-ghost {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-md);
  height: var(--h); padding: 0 var(--space-xl); border-radius: 999px;
  font-size: 15px; font-weight: 550; letter-spacing: -0.01em; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-press);
}
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: var(--surface-2); } }
.btn-ghost:active { transform: scale(0.97); }
.btn-ghost svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }

/* Store button: Apple logo, two lines, the arrow slides in on hover */
.store-btn { --h: 54px; padding: 0 var(--space-xxxl) 0 var(--space-xl); gap: var(--space-lg); text-align: left; }
.store-btn .apple { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; margin-top: -2px; }
.store-btn .store-txt { display: flex; flex-direction: column; line-height: 1.12; }
.store-btn .store-txt small { font-size: 11px; font-weight: 500; opacity: 0.8; letter-spacing: 0.01em; }
.store-btn .store-txt strong { font-size: 17px; font-weight: 640; letter-spacing: -0.015em; }
.store-btn .arrow { display: none; width: 14px; height: 14px; margin-left: var(--space-xxs); opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 300ms var(--ease); }
@media (min-width: 480px) { .store-btn .arrow { display: block; } }
@media (hover: hover) and (pointer: fine) { .store-btn:hover .arrow { opacity: 0.9; transform: none; } }

.ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-lg); }
.ctas .btn-ghost { --h: 54px; } /* as tall as the store button beside it */

/* Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow 300ms ease;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-side { flex: 1 1 0; display: flex; align-items: center; }
.nav-right { justify-content: flex-end; }
.logo { display: inline-flex; align-items: center; gap: var(--space-row-icon); font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.logo img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), 0 1px 3px rgb(0 0 0 / 0.18); }
.nav-links { display: none; gap: var(--space-xxxxl); }
.nav-links a { position: relative; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color 200ms ease; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); }
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav .btn { --h: 34px; padding: 0 var(--space-lg); font-size: 13.5px; gap: var(--space-md); }
.nav .btn svg { width: 14px; height: 14px; fill: currentColor; margin-top: -2px; }

/* Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; text-align: center; padding: var(--space-page-128) 0 0; overflow-x: clip; }

/* dawn: a soft wash behind the headline, brightest where the sun comes up */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1100px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 46% at 50% 74%, var(--glow), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, var(--glow-cool), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  opacity: var(--dawn, 1);
}

.pill {
  display: inline-flex; align-items: center; gap: var(--space-md); height: 30px; padding: 0 var(--space-lg) 0 var(--space-md); margin-bottom: var(--space-xxxl);
  border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.04));
  box-shadow: inset 0 0 0 1px var(--hair-2);
}
.pill svg { width: 18px; height: 18px; color: var(--sun-deep); }

.hero h1 {
  font-size: clamp(29px, min(8.5vw, 3.8vw + 18px), 76px);
  font-weight: 650; letter-spacing: -0.045em; line-height: 1.04;
  margin: 0 auto var(--space-xxxl);
}
.hero h1 .line { display: block; white-space: nowrap; transition: color 400ms ease; }
.hero h1 .w { display: inline-block; }
.hero h1 .line-2 { color: var(--ink-3); }
.hero[data-phase="set"] h1 .line-1 { color: var(--ink-3); }
.hero[data-phase="set"] h1 .line-2 { color: var(--ink); }
.hero .lede { font-size: clamp(17px, 0.4vw + 14px, 19px); line-height: 1.55; color: var(--ink-2); max-width: 46ch; margin: 0 auto var(--space-xxxxl); }
.hero .lede .lead { color: var(--ink); }
.hero .note { margin-top: var(--space-xl); }
.hero .note span + span::before { content: '·'; margin: 0 var(--space-md); color: var(--ink-4); }

/* load-in cascade: words rise out of a blur (off for reduced motion, and without JS) */
.js .hero .rise {
  opacity: 0; transform: translateY(14px); filter: blur(6px);
  animation: rise 900ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes rise { to { opacity: 1; transform: none; filter: blur(0); } }

/* The sunrise: the app icon's own pieces, rendered from its Blender file, on a horizon
   that runs the width of the page. js/home.js plays the Welcome window's springs on load,
   and sets the sun as the page scrolls.
   Every size is a share of --S, the icon's width, as WelcomeLayout measures it. */
.sunrise {
  --S: clamp(320px, 40vw, 560px);
  position: relative; height: calc(var(--S) * 0.56); margin: calc(var(--S) * 0.09) auto 0;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.sunrise .icon { /* the icon's square, shifted up so its art fills the stage */
  position: absolute; left: 50%; top: calc(var(--S) * -0.24);
  width: var(--S); height: var(--S); margin-left: calc(var(--S) / -2);
}
.sunrise .sky { /* everything above the middle of the line; the sun rises from behind it */
  position: absolute; inset: 0 0 auto; height: calc(var(--S) * 0.704); overflow: hidden;
}
.sunrise .rig, .sunrise .sink, .sunrise .rays { position: absolute; inset: 0; will-change: transform; }
/* scrolled: the sun sinks behind the line, its rays tuck in and roll on (js/home.js sets --set) */
.sunrise .sink { transform: translateY(calc(var(--S) * 0.36 * var(--set, 0))); }
/* the rays tuck all the way into the sun before it is down, as SunAnimation's turning off does */
/* (the origin is the sun's center: 0.574 of the icon down, in a sky 0.704 tall) */
.sunrise .rays { transform-origin: 50% 81.53%; transform: rotate(calc(var(--tuck, 0) * 150deg)) scale(calc(1 - var(--tuck, 0) * 0.82)); }
.sunrise .glow, .sunrise .water { opacity: calc(1 - var(--set, 0)); }
/* at rest each ray sits at its angle, 0.295 icon widths out */
.sunrise .orbit[data-angle="-90"] { transform: rotate(-90deg); }
.sunrise .orbit[data-angle="-45"] { transform: rotate(-45deg); }
.sunrise .orbit[data-angle="45"] { transform: rotate(45deg); }
.sunrise .orbit[data-angle="90"] { transform: rotate(90deg); }
.sunrise .arm { transform: translateY(calc(var(--S) * -0.295)); }
/* before the sunrise plays, nothing shows but the horizon */
.js .sunrise.intro .icon, .js .sunrise.intro .glow, .js .sunrise.intro .water { opacity: 0; }
.sunrise .piece { position: absolute; display: block; }
.sunrise .sun {
  width: calc(var(--S) * 0.312); height: calc(var(--S) * 0.312);
  left: calc(var(--S) * (0.5 - 0.156)); top: calc(var(--S) * (0.574 - 0.156));
  filter: drop-shadow(calc(var(--S) * 0.004) calc(var(--S) * 0.012) calc(var(--S) * 0.012) rgb(0 0 0 / 0.28));
}
/* each ray orbits the sun's center: turn by (angle + rayTurn), reach out, then turn back by angle */
.sunrise .orbit { position: absolute; left: 50%; top: calc(var(--S) * 0.574); width: 0; height: 0; will-change: transform; }
.sunrise .arm { position: absolute; left: 0; top: 0; }
.sunrise .ray {
  position: absolute; left: 0; top: 0;
  translate: -50% -50%;
  filter: drop-shadow(calc(var(--S) * 0.004) calc(var(--S) * 0.012) calc(var(--S) * 0.012) rgb(0 0 0 / 0.24));
}
.sunrise .ray-h { width: calc(var(--S) * 0.146); height: calc(var(--S) * 0.084); }
.sunrise .ray-d { width: calc(var(--S) * 0.156); height: calc(var(--S) * 0.156); }
.sunrise .ray-v { width: calc(var(--S) * 0.084); height: calc(var(--S) * 0.146); }
.sunrise .glow {
  position: absolute; left: 50%; top: calc(var(--S) * 0.314); width: calc(var(--S) * 1.1); height: calc(var(--S) * 1.1);
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), light-dark(rgb(255 166 102 / 0.12), rgb(255 120 50 / 0.12)) 55%, transparent);
}
:root[data-scheme="dark"] .sunrise .glow { mix-blend-mode: plus-lighter; }
/* the glossy line, stretched like the app does it: round caps keep their size */
.sunrise .line {
  position: absolute; left: 50%; top: calc(var(--S) * 0.704); height: calc(var(--S) * 0.1);
  width: calc(var(--S) * 0.52); translate: -50% -50%;
  border-style: solid; border-width: 0 calc(var(--S) * 0.05);
  border-image: url('images/sunrise/line.webp') 0 80 fill / 0 calc(var(--S) * 0.05) stretch;
  filter: drop-shadow(calc(var(--S) * 0.004) calc(var(--S) * 0.012) calc(var(--S) * 0.012) rgb(0 0 0 / 0.22));
  transform-origin: 50% 50%;
}
/* the page's horizon, through the middle of the line */
.sunrise .horizon {
  position: absolute; left: 50%; top: calc(var(--S) * 0.464); width: 100vw; height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--hair-2) 18%, var(--accent-edge) 42%, var(--accent-edge) 58%, var(--hair-2) 82%, transparent);
}
/* Apple's icon grid, drawn in around the pieces as they settle (the Welcome's blueprint) */
.sunrise .blueprint {
  position: absolute; left: 50%; top: calc(var(--S) * -0.24); width: var(--S); height: var(--S); translate: -50% 0; overflow: visible;
  -webkit-mask-image: radial-gradient(closest-side at 50% 57%, #000 55%, transparent); mask-image: radial-gradient(closest-side at 50% 57%, #000 55%, transparent);
  -webkit-mask-size: 160% 160%; mask-size: 160% 160%; -webkit-mask-position: center; mask-position: center;
  opacity: calc(1 - var(--set, 0) * 0.7);
}
.sunrise .blueprint * { fill: none; stroke: var(--hair-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sunrise .blueprint .soft { stroke: var(--hair); }
.js .sunrise .blueprint * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .sunrise.is-drawn .blueprint * { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 40ms); }
/* the reflection below the horizon */
.sunrise .water {
  position: absolute; left: 50%; top: calc(var(--S) * 0.47); width: calc(var(--S) * 0.9); height: calc(var(--S) * 0.18); translate: -50% 0;
  background: radial-gradient(50% 60% at 50% 0%, light-dark(rgb(140 132 255 / 0.18), rgb(140 132 255 / 0.16)), transparent);
  opacity: var(--sunrise, 1);
}
.no-js .sunrise .blueprint * { stroke-dasharray: none; }

/* Problem — ten idle minutes run out on four jobs; with Awakly, the jobs finish and then the Mac sleeps.
   .idle[data-phase]: count (the timer runs) → slept, or awake → rested. .job[data-state]: run, fail, done.
   -------------------------------------------------------------------------- */
.problem { padding-top: var(--space-page-64); }
@media (min-width: 960px) { .problem { padding-top: var(--space-page-96); } }

/* Without / With Awakly: a segmented control, like the footer's theme switch */
.idle-pick {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; height: 38px;
  margin: var(--space-page-40) auto 0; padding: var(--space-xxs); border-radius: 999px; box-shadow: inset 0 0 0 0.5px var(--hair-2);
}
html:not(.js) .idle-pick { display: none; }
.idle-pick button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-md);
  padding: 0 var(--space-xl); border-radius: 999px; font-size: 14px; font-weight: 550; color: var(--ink-3); transition: color 200ms ease;
}
.idle-pick button svg { width: 16px; height: 16px; transition: color 300ms ease; }
@media (hover: hover) and (pointer: fine) { .idle-pick button:hover { color: var(--ink); } }
.idle-pick button[aria-checked="true"] { color: var(--ink); }
.idle-pick button[aria-checked="true"] svg, .idle-pick button.is-nudge svg { color: var(--sun-deep); }
.idle-pick .thumb {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 0.5px var(--hair-2), 0 1px 2px light-dark(rgb(24 21 52 / 0.08), rgb(0 0 0 / 0.4));
  transform: translateX(calc(var(--pick, 0) * 100%)); transition: transform 300ms var(--ease-out);
}

/* the panel: an idle timer over four jobs, its edges and dividers hairlines (a device pixel on Retina) */
.idle {
  max-width: 720px; margin: var(--space-xxxl) auto 0; border-radius: var(--r-tile); background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow-panel);
}
@media (max-width: 959px) { .idle { box-shadow: var(--shadow-panel-phone); } }
.idle-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl); font-size: 13px; color: var(--ink-2); box-shadow: inset 0 -0.5px 0 var(--hair-2); /* a shadow, since Chrome draws thinner borders at 1px */
}
.idle-clock { display: inline-flex; align-items: center; gap: var(--space-md); white-space: nowrap; }
.idle-clock svg { width: 16px; height: 16px; color: var(--ink-3); }
.idle-clock b { font-weight: 600; color: var(--ink); }
.idle-clock .short { display: none; }
.idle-state { display: grid; justify-items: end; }
.idle-state > span {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-inline-icon); height: 26px; padding: 0 var(--space-md);
  border-radius: 999px; font-weight: 600; white-space: nowrap;
  opacity: 0; filter: blur(2px); transform: translateY(4px);
  transition: opacity 220ms ease, filter 220ms ease, transform 320ms var(--ease);
}
.idle-state svg { width: 14px; height: 14px; }
.idle-state .sun { display: inline-grid; width: 16px; height: 16px; color: var(--sun-deep); }
.idle-state .sun svg { width: 16px; height: 16px; }
.idle-state [data-show="count"] { color: var(--ink-3); }
.idle-state [data-show="slept"] { color: var(--warning); background: var(--warning-tint); }
.idle-state [data-show="awake"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair); }
.idle-state [data-show="rested"] { color: var(--ink-2); background: var(--surface-2); }
.idle[data-phase="count"] [data-show="count"], .idle[data-phase="slept"] [data-show="slept"],
.idle[data-phase="awake"] [data-show="awake"], .idle[data-phase="rested"] [data-show="rested"] { opacity: 1; filter: none; transform: none; }

.jobs { list-style: none; }
.job {
  /* the job and its outcome share the room either side of the bar alike, so the bar stands centered between them */
  display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(96px, 168px) minmax(max-content, 1fr); grid-template-areas: "g w b s";
  align-items: center; column-gap: var(--space-xl); padding: var(--space-lg) var(--space-xl);
}
.job + .job { box-shadow: inset 0 0.5px 0 var(--hair-2); }
.job .glyph { grid-area: g; width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 0.5px var(--hair-2); }
.job .glyph svg { width: 18px; height: 18px; }
.job .what { grid-area: w; min-width: 0; line-height: 1.3; } /* the subtitle close under its title */
.job .what b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.job .what span { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job .bar { grid-area: b; height: 4px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.job .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: background-color 300ms ease; }
.job :is(.glyph, .what, .bar) { transition: opacity 600ms var(--ease-out); }
.job .st { grid-area: s; display: grid; justify-items: end; font-size: 13px; font-weight: 550; }
.job .st > span {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-inline-icon); white-space: nowrap;
  opacity: 0; filter: blur(2px); transform: translateY(4px);
  transition: opacity 220ms ease, filter 220ms ease, transform 320ms var(--ease);
}
.job .st svg { width: 14px; height: 14px; }
.job [data-st="run"] { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.job [data-st="fail"] { color: var(--warning); }
.job [data-st="done"] { color: var(--success); }
.job[data-state="run"] [data-st="run"], .job[data-state="fail"] [data-st="fail"], .job[data-state="done"] [data-st="done"] { opacity: 1; filter: none; transform: none; }
.job[data-state="fail"] .bar i { background: var(--warning); }
.job[data-state="done"] .bar i { background: var(--success); }
/* asleep, the screen dims: the jobs fade back and only their outcome stays bright */
.idle:is([data-phase="slept"], [data-phase="rested"]) .job :is(.glyph, .what, .bar) { opacity: 0.45; }

@media (max-width: 639px) {
  .idle-top { padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl); }
  .job { grid-template-columns: 32px minmax(0, 1fr) 140px; grid-template-areas: "g w w" "g b s"; column-gap: var(--space-lg); row-gap: var(--space-md); }
  .job .glyph { align-self: start; width: 32px; height: 32px; border-radius: 9px; }
  .job .glyph svg { width: 16px; height: 16px; }
  .job .st { font-size: 12.5px; }
}
/* the narrowest phones: a shorter clock, and the outcome goes under the bar, so the bar keeps its length */
@media (max-width: 379px) {
  .idle-clock { gap: var(--space-inline-icon); }
  .idle-clock .long { display: none; }
  .idle-clock .short { display: inline; }
  .job { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "g w" "g b" "g s"; row-gap: var(--space-xs); }
  .job .bar { margin-top: var(--space-xs); }
  .job .st { justify-items: start; }
}

.idle-cap { display: grid; max-width: 720px; margin: var(--space-xxxl) auto 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.idle-cap > span { grid-area: 1 / 1; text-wrap: balance; opacity: 0; filter: blur(2px); transform: translateY(4px); transition: opacity 260ms ease, filter 260ms ease, transform 360ms var(--ease); }
.problem:not([data-mode="on"]) [data-cap="off"], .problem[data-mode="on"] [data-cap="on"] { opacity: 1; filter: none; transform: none; }

/* The Mac: a slice of desktop on the MacBook's wallpaper (Blender/screen/wallpaper.jpg), with macOS 26's clear
   menu bar, where the drop-down hangs from the sun. macOS's parts are in the system font, as on a Mac.
   -------------------------------------------------------------------------- */
.mac {
  --mb: 30px;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 18px;
  background: #3A2A2E url('images/wallpaper.webp') center / cover;
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-floating);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, var(--font);
  line-height: normal; letter-spacing: normal;
}
/* white over the wallpaper's dark top, in either theme */
.menubar {
  position: relative; z-index: 2; height: var(--mb);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px;
  color: #fff; text-shadow: 0 0 8px rgb(0 0 0 / 0.25); font-size: 13px;
}
/* the menus stay where they are; when the sun's countdown widens the status items over them, their end fades out
   up to the status items' edge */
.menubar .apps {
  flex: 1 1 auto; min-width: 0; height: var(--mb); display: flex; align-items: center; gap: 18px; white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.menubar .apps > * { flex-shrink: 0; }
.menubar .apps b { font-weight: 700; }
.menubar .apps .apple { width: 13px; height: 15px; fill: currentColor; }
.menubar .tray { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.menubar .tray > * { display: flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 6px; }
.menubar .tray svg { fill: currentColor; }
/* the sun alone, or with the time left (NSStatusItem's insets, measured on macOS 26) */
.menubar .status { gap: 3px; padding: 0 9.5px; border-radius: 999px; transition: background-color 200ms ease; font-variant-numeric: tabular-nums; }
.menubar .status:has(.left:not(:empty)) { padding: 0 12px 0 11.5px; }
.menubar .status.is-open { background: rgb(255 255 255 / 0.2); }
.menubar .status .menu-sun { width: 18px; height: 18px; translate: 0 1px; }
.menubar .status .left:empty { display: none; }
svg.menu-sun { overflow: visible; }
svg.menu-sun path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
svg.menu-sun .disc { fill: currentColor; stroke: none; }
/* as wide as its widest time and right-aligned, so the items left of it never move as the time changes */
.menubar .tray > .clock { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.menubar .clock > * { grid-area: 1 / 1; }
.menubar .clock .sizer { visibility: hidden; }
@media (max-width: 559px) { .menubar .hide-sm { display: none; } }

/* Drop-down
   The app's panel (DropDownView), value for value: 344 wide, its cards and controls 8 in from the glass and
   its parts 12 apart; the colors are the app's palette. State changes swap data-state on the root.
   -------------------------------------------------------------------------- */
.dd {
  position: absolute; z-index: 3; width: 344px; padding: var(--space-md) var(--space-md) 0;
  border-radius: 16px; text-align: left; font-size: 13px;
  background: var(--ui-glass);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 0 0 0.5px var(--ui-glass-hair), 0 2px 4px var(--ui-shadow), 0 18px 48px light-dark(rgb(24 21 52 / 0.18), rgb(0 0 0 / 0.55));
  transform-origin: calc(100% - 40px) 0;
}
/* the glass's rim: bright along the top, fading down the sides */
.dd::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--ui-glass-edge), rgb(255 255 255 / 0.25) 40%, rgb(255 255 255 / 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.dd svg.i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dd .tile {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: var(--ui-quiet); box-shadow: inset 0 0 0 0.5px var(--ui-card-hair); color: var(--ui-label-2);
}
.dd .tile svg { width: 13px; height: 13px; }
.dd .tile.app { background: none; box-shadow: none; }
.dd .tile img { width: 28px; height: 28px; }
.dd .card {
  position: relative; border-radius: 8px; padding: var(--space-lg);
  background: var(--ui-card);
  box-shadow: inset 0 0 0 0.5px var(--ui-card-edge), 0 0 0 0.5px var(--ui-card-hair), 0 1px 2px var(--ui-shadow-soft);
}
.dd .status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 20px; }
.dd .state { display: inline-flex; align-items: center; gap: var(--space-md); height: 16px; font-size: 12px; font-weight: 600; color: var(--accent); }
.dd .state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--accent-tint); }
.dd .mode-pill { display: inline-flex; align-items: center; gap: var(--space-xs); height: 20px; padding: 0 var(--space-md) 0 7px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--ui-label-2); background: var(--ui-quiet); }
.dd .mode-pill svg { width: 12px; height: 12px; }
.dd .count { display: flex; align-items: baseline; gap: var(--space-md); margin-top: var(--space-md); }
.dd .count b { font-size: 40px; font-weight: 600; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.dd .count span { font-size: 15px; font-weight: 500; color: var(--ui-label-3); }
.dd .detail { font-size: 12px; color: var(--ui-label-2); font-variant-numeric: tabular-nums; }
.dd .bar { height: 4px; margin-top: var(--space-lg); border-radius: 2px; background: var(--ui-quiet-strong); }
.dd .bar i { display: block; height: 100%; width: max(4px, calc(var(--left, 1) * 100%)); border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.dd .actions { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.dd .actions .push { margin-left: auto; }
.dd .b {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline-icon); height: 28px; padding: 0 var(--space-lg); border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.dd .b svg { width: 14px; height: 14px; }
.dd .b-tint { color: var(--accent); background: var(--accent-tint); }
.dd .b-plain { font-weight: 500; color: var(--ink); background: var(--ui-card-edge); box-shadow: 0 0 0 0.5px var(--ui-card-hair), 0 1px 2px var(--ui-shadow-soft); }
.dd .b-primary { color: #fff; background: linear-gradient(var(--accent), var(--accent-deep)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 0 0 0.5px var(--accent-deep), 0 2px 6px var(--accent-shadow); }
.dd .b-wide { width: 100%; height: 32px; margin-top: var(--space-lg); }

/* the session card's states share one card; each part shows in its states */
.dd[data-state="idle"] [data-show]:not([data-show~="idle"]),
.dd[data-state="timed"] [data-show]:not([data-show~="timed"]),
.dd[data-state="ending"] [data-show]:not([data-show~="ending"]),
.dd[data-state="auto"] [data-show]:not([data-show~="auto"]) { display: none; }
.dd[data-state="ending"] .state, .dd[data-state="ending"] .count b { color: var(--warning); }
.dd[data-state="ending"] .state::before { box-shadow: 0 0 0 3px var(--warning-tint); }
.dd[data-state="ending"] .bar i { background: var(--warning); }
.dd .idle-head { display: flex; align-items: center; gap: var(--space-lg); }
.dd .idle-head .tile { width: 40px; height: 40px; border-radius: 11px; box-shadow: none; color: var(--ui-label-3); }
.dd .idle-head .tile svg { width: 26px; height: 26px; }
.dd .idle-head .tile img { width: 44px; height: 44px; }
.dd .idle-head b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.dd .idle-head b + span { display: block; margin-top: var(--space-xxs); font-size: 12px; color: var(--ui-label-2); }

.dd .sec { padding: var(--space-lg) var(--space-lg) 0; }
.dd .sec-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); height: 16px; margin-bottom: var(--space-md); font-size: 11px; font-weight: 600; color: var(--ui-label-2); white-space: nowrap; }
.dd .sec-head span { font-weight: 500; color: var(--ui-label-3); }
.dd .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.dd .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 30px; border-radius: 8px;
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--ui-quiet); color: var(--ink);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms var(--ease-press);
}
.dd .chip svg { width: 13px; height: 13px; color: var(--ui-label-2); }
.dd .chip .inf { width: 18px; height: 9px; fill: currentColor; stroke: none; color: inherit; }
.dd .chip.is-on { font-weight: 600; background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.dd .chip.is-pressed { transform: scale(0.95); }
.dd .seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxs); margin-top: var(--space-lg); padding: var(--space-xxs); border-radius: 999px; background: var(--ui-quiet); }
.dd .seg span { display: flex; align-items: center; justify-content: center; gap: var(--space-inline-icon); height: 26px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ui-label-2); }
.dd .seg span svg { width: 14px; height: 14px; color: var(--ui-label-3); }
.dd .seg .on { font-weight: 600; color: var(--ink); background: var(--ui-card-edge); box-shadow: 0 0 0 0.5px var(--ui-card-hair), 0 1px 3px var(--ui-shadow-soft), 0 0 1px var(--ui-shadow-soft); }
.dd .seg .on svg { color: var(--accent); }
.dd .row { display: flex; align-items: center; gap: var(--space-row-icon); height: 40px; }
.dd .row.lid { margin-top: var(--space-lg); }
.dd .row .t { flex: 1; min-width: 0; white-space: nowrap; }
.dd .row .t b { display: block; font-size: 13px; font-weight: 500; }
.dd .row .t span { display: block; margin-top: 1px; font-size: 11px; color: var(--ui-label-2); }
/* the rules under a hairline cut into the glass, their header 2 above them and they 2 apart */
.dd .sec.auto { position: relative; margin-top: var(--space-lg); }
.dd .auto .sec-head { margin-bottom: var(--space-xxs); }
.dd .auto .row + .row { margin-top: var(--space-xxs); }
.dd .auto::before, .dd .foot::before {
  content: ''; position: absolute; top: 0; left: var(--space-lg); right: var(--space-lg); height: 1px;
  background: linear-gradient(var(--ui-sep-start) 50%, var(--ui-sep-end) 50%);
}
.dd .sw {
  position: relative; width: 30px; height: 18px; border-radius: 999px; flex-shrink: 0;
  background: var(--ui-switch-off); box-shadow: inset 0 0.5px 0 var(--ui-shadow-soft); transition: background 200ms ease;
}
.dd .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.06); transition: transform 200ms var(--ease-out); }
.dd .sw.on { background: linear-gradient(var(--accent), var(--accent-deep)); box-shadow: inset 0 0.5px 0 rgb(0 0 0 / 0.08); }
.dd .sw.on::after { transform: translateX(12px); }
.dd .foot { position: relative; display: flex; align-items: center; gap: var(--space-xs); height: 40px; margin-top: var(--space-lg); padding: 0 var(--space-md) 0 var(--space-lg); }
.dd .foot .pw { display: inline-flex; align-items: center; gap: var(--space-inline-icon); font-size: 11px; font-weight: 500; color: var(--ui-label-2); font-variant-numeric: tabular-nums; }
.dd .foot .pw svg { width: 13px; height: 13px; color: var(--success); }
.dd .foot .ic { display: flex; gap: var(--space-xs); margin-left: auto; }
.dd .foot .ic span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ui-label-2); }
.dd .foot .ic svg { width: 16px; height: 16px; }

/* a job on the desktop: its export runs while the session does */
.desk-win {
  position: absolute; z-index: 1; left: 24px; top: calc(var(--mb) + 48px); width: min(34%, 200px);
  border-radius: 12px; overflow: hidden; text-align: left; font-size: 12.5px; line-height: 1.3;
  background: var(--ui-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge), 0 0 0 0.5px var(--ui-glass-hair), 0 16px 40px light-dark(rgb(24 21 52 / 0.16), rgb(0 0 0 / 0.5));
}
.desk-win .tb { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--ui-sep); color: var(--ui-label-2); font-size: 12px; font-weight: 600; }
.desk-win .tb i { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-quiet-strong); }
.desk-win .tb span { margin: 0 auto; padding-right: 40px; }
.desk-win .wb { display: flex; align-items: center; gap: 12px; padding: 14px; }
.desk-win .wb img { width: 40px; height: 40px; }
.desk-win .wb div { flex: 1; min-width: 0; }
.desk-win .wb b { display: block; font-weight: 600; }
.desk-win .wb span { display: block; color: var(--ui-label-2); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.desk-win .wb i { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--ui-quiet-strong); overflow: hidden; }
.desk-win .wb em { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--done, 0.12)); }
@media (max-width: 959px) { .desk-win { display: none; } }

/* the notification, five minutes before the end */
.toast {
  position: absolute; z-index: 4; right: 10px; top: calc(var(--mb) + 8px); width: 330px; padding: 10px 12px 12px; border-radius: 18px;
  display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; text-align: left; font-size: 12.5px; line-height: 1.32;
  background: var(--ui-glass);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge), 0 0 0 0.5px var(--ui-glass-hair), 0 14px 40px light-dark(rgb(24 21 52 / 0.2), rgb(0 0 0 / 0.55));
}
.toast[hidden] { display: none; }
.toast img { width: 34px; height: 34px; border-radius: 8px; grid-row: span 2; }
.toast .top { display: flex; justify-content: space-between; font-size: 12px; }
.toast .top b { font-weight: 650; }
.toast .top span { color: var(--ui-label-3); font-size: 11px; }
.toast p { color: var(--ink); }
.toast .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.toast .acts span { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 550; background: var(--ui-quiet-strong); }

/* One click — a pinned Mac while the steps scroll by
   -------------------------------------------------------------------------- */
.how .head { max-width: 640px; margin-bottom: var(--space-page-64); }
@media (min-width: 960px) { .how .head { margin-bottom: var(--space-page-40); } }
.how-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.how-stage { position: sticky; top: 76px; z-index: 2; height: min(420px, 52svh); margin: 0 calc(-1 * var(--space-md)); }
.how-stage .mac { position: absolute; inset: 0; }
/* 6 under the menu bar and centered under the sun, as the app hangs it (js/home.js places it), but at least 8 from the edge */
.how-stage .dd { right: var(--space-md); top: calc(var(--mb) + 6px); }
.how-steps { position: relative; z-index: 1; }
.step { min-height: 62svh; padding: var(--space-xxxxl) 0; display: flex; flex-direction: column; justify-content: center; }
.step:first-child { min-height: 46svh; }
.step .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair-2); margin-bottom: var(--space-xl); transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease; }
.step h3 { font-size: clamp(24px, 1vw + 18px, 32px); letter-spacing: -0.03em; margin-bottom: var(--space-lg); transition: color 300ms ease; }
.step p { font-size: 17px; color: var(--ink-2); max-width: 40ch; transition: color 300ms ease; }
.step kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 var(--space-xs); margin: 0 1px; border-radius: 5px; font-family: var(--font); font-size: 12.5px; font-weight: 550; color: var(--ink); background: var(--surface); box-shadow: inset 0 -1px 0 var(--hair-2), 0 0 0 1px var(--hair-2); vertical-align: 1px; transition: opacity 300ms ease; }
.js .step:not(.is-current) h3, .js .step:not(.is-current) p { color: var(--ink-4); }
.js .step:not(.is-current) kbd { opacity: 0.25; } /* the keys fade with the text around them */
.js .step:not(.is-current) .n { color: var(--ink-4); }
.step.is-current .n { color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-edge); }
/* phones: the Mac pins under the nav, the steps scroll beneath it; the drop-down shows its top */
@media (max-width: 959px) {
  .how-stage { margin: 0 calc(-1 * var(--space-xxxl)); border-radius: 0; height: 330px; top: 64px; }
  .how-stage .mac { border-radius: 0; box-shadow: none; }
  .how-stage .dd { right: 50%; translate: 50% 0; scale: 0.86; transform-origin: 50% 0; }
  .how-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; background: linear-gradient(transparent, var(--bg)); z-index: 3; pointer-events: none; }
  .step { min-height: 44svh; justify-content: flex-start; padding: var(--space-page-40) 0 0; }
  .step:first-child { min-height: 30svh; }
  .step:last-child { min-height: 52svh; }
  .how-steps { padding-top: var(--space-md); }
}
@media (min-width: 960px) {
  .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-page-64); align-items: start; }
  .how-stage { order: 2; top: calc(50svh - 320px); height: 640px; margin: 0; }
  .how-steps { order: 1; padding: 10svh 0; }
  .step, .step:first-child { min-height: 70svh; }
}

/* Automatic — the card names the rule passing the middle of the screen
   -------------------------------------------------------------------------- */
.auto-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-page-40); margin-top: var(--space-page-48); }
@media (min-width: 960px) { .auto-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-page-64); margin-top: var(--space-page-64); } }
.auto-pin { position: sticky; top: 76px; z-index: 2; align-self: start; }
@media (min-width: 960px) { .auto-pin { top: calc(50svh - 150px); } }
.auto-card {
  position: relative; padding: var(--space-xxxl); border-radius: var(--r-tile); background: var(--surface);
  box-shadow: var(--shadow-panel);
}
@media (max-width: 959px) { .auto-card { padding: var(--space-xl); box-shadow: var(--shadow-panel-phone); } }
.auto-card .state-line { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.auto-card .state { display: inline-flex; align-items: center; gap: var(--space-md); font-weight: 600; color: var(--accent); }
.auto-card .state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--accent-tint); animation: breathe 2.4s var(--ease-in-out) infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px transparent; } }
.auto-card .since { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.auto-card .cause { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); min-height: 52px; }
.auto-card .cause .gl { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.auto-card .cause .gl > * { position: absolute; inset: 0; }
.auto-card .cause .glyph:not(.app) { box-shadow: inset 0 0 0 0.5px var(--hair-2); }
/* the rule's name and condition, set close and centered on its icon; the rules stack there and crossfade */
.auto-card .cause .txt { position: relative; flex: 1; align-self: stretch; }
.auto-card .cause .txt > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.auto-card .cause .txt b { display: block; font-size: 19px; font-weight: 620; letter-spacing: -0.02em; line-height: 1.2; }
.auto-card .cause .txt span { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-2); margin-top: var(--space-xxs); }
.auto-card [data-cause] { opacity: 0; filter: blur(4px); transform: translateY(6px); transition: opacity 260ms ease, filter 260ms ease, transform 360ms var(--ease); }
.auto-card [data-cause].is-on { opacity: 1; filter: none; transform: none; }
.glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glyph.app { background: none; box-shadow: none; }
.glyph.app img { width: 58px; height: 58px; margin: -3px; }
.auto-card .foot { display: flex; gap: var(--space-md); margin-top: var(--space-xxxl); }
.auto-card .foot span { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-lg); border-radius: 999px; font-size: 13px; font-weight: 550; background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--hair-2); }
.auto-card .ticks { display: flex; gap: var(--space-xs); margin-top: var(--space-xl); }
.auto-card .ticks i { flex: 1; height: 3px; border-radius: 2px; background: var(--hair-2); transition: background-color 300ms ease; }
.auto-card .ticks i.on { background: var(--accent); }
@media (max-width: 559px) { .auto-card .foot { display: none; } .auto-card .ticks { margin-top: var(--space-lg); } }
.auto-note { margin-top: var(--space-xxxl); font-size: 14.5px; color: var(--ink-2); max-width: 44ch; }
.auto-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 959px) { .auto-note { display: none; } }

.rules { display: flex; flex-direction: column; gap: var(--space-lg); }
.rule {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--space-xl);
  padding: var(--space-xl); border-radius: 16px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 300ms ease, background-color 300ms ease, transform 500ms var(--ease);
}
.rule .glyph { width: 44px; height: 44px; border-radius: 12px; }
.rule .glyph svg { width: 22px; height: 22px; }
.rule .glyph.app img { width: 50px; height: 50px; }
.rule h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.rule p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; margin-top: var(--space-xxs); }
.rule .sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--ui-switch-off); transition: background-color 300ms ease; }
.rule .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 0 0 0.5px rgb(0 0 0 / 0.04); transition: transform 400ms var(--ease-out); }
.rule.is-on .sw { background: var(--accent); }
.rule.is-on .sw::after { transform: translateX(16px); }
.rule.is-current { box-shadow: inset 0 0 0 1px var(--accent-edge), 0 0 0 4px var(--accent-tint); }
.rule .kind { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--space-xs); }

/* Closed lid — the lid shuts as you scroll, then the sun comes up behind it
   -------------------------------------------------------------------------- */
.lid { overflow: clip; }
/* every size follows --W, the MacBook's width. It's rendered (Blender/Lid Close.blend) in frames --F wide, of which
   it fills 82.5%; Blender/frames.json says where things are in them: the shut lid's back edge, the --horizon the sun
   comes up behind, at 59.1% of a frame's height, and the base's front at 91.0% */
.lid-track {
  --W: clamp(280px, 64vw, 600px); --F: calc(var(--W) / 0.8248); --FH: calc(var(--F) * 0.82375);
  --horizon: calc(var(--FH) * 0.5911); --stage-h: calc(var(--FH) * 0.9104 + 64px);
  position: relative; height: calc(var(--stage-h) + 80svh); margin-top: var(--space-xxxl);
}
/* pinned in the middle of the screen while the lid shuts and the sun comes up */
.lid-stage {
  position: sticky; top: max(72px, calc(50svh - var(--stage-h) / 2 + 24px));
  height: var(--stage-h); margin: 0 auto; max-width: 1000px;
  --close: 0; --after: 0;
}
.lid-stage .glow-lid {
  position: absolute; left: 50%; top: var(--horizon); width: calc(var(--W) * 1.5); height: calc(var(--W) * 1.1); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  opacity: calc(0.15 + var(--after) * 0.85);
}
/* the app icon's sun comes up behind the closed lid, the MacBook its horizon */
/* its sky is cut a little below the horizon, out of sight behind the shut lid */
.lid-stage .mini-sunrise { --S: calc(var(--W) * 0.62); position: absolute; left: 50%; top: calc(var(--horizon) + var(--FH) * 0.03 - var(--S) * 0.704); width: var(--S); height: var(--S); translate: -50% 0; }
.lid-stage .mini-sunrise .sky { position: absolute; inset: 0 0 auto; height: 70.4%; overflow: hidden; }
.lid-stage .mini-sunrise .rig { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% / 0.704); transform: translateY(calc((1 - var(--after)) * 36%)); }
.lid-stage .mini-sunrise img { position: absolute; display: block; height: auto; }
.lid-stage .mini-sunrise .s-ray { opacity: var(--after); transform: scale(calc(0.8 + var(--after) * 0.2)); }
.mbp {
  position: absolute; left: 50%; top: 0; width: var(--F); height: var(--FH); translate: -50% 0;
  /* the floor shadow fades out below the base, before the frame's edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1%, #000 92.5%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 1%, #000 92.5%, transparent);
}
.mbp > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.lid-stage.is-drawn .mbp-still { visibility: hidden; }
.lid-status {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  display: inline-flex; align-items: center; gap: var(--space-md); height: 32px; padding: 0 var(--space-lg); border-radius: 999px;
  font-size: 13px; font-weight: 550; color: var(--ink-2); white-space: nowrap;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-2), var(--shadow-resting);
}
.lid-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); transition: background-color 300ms ease, box-shadow 300ms ease; }
.lid-status.is-closed { color: var(--ink); }
.lid-status.is-closed .dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.lid-limits { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-page-40); }
@media (min-width: 640px) { .lid-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lid-limits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.limit {
  position: relative; padding: var(--space-xxxl); border-radius: 16px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.limit .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
.limit .glyph { width: 40px; height: 40px; border-radius: 11px; }
.limit .glyph svg { width: 20px; height: 20px; }
.limit .on { display: inline-flex; align-items: center; gap: var(--space-inline-icon); font-size: 12px; font-weight: 600; color: var(--success); }
.limit .on svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.limit h3 { font-size: 17px; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
.limit p { font-size: 14.5px; color: var(--ink-2); margin-top: var(--space-md); line-height: 1.5; }
.lid-foot { margin-top: var(--space-xxxxl); text-align: center; text-wrap: balance; font-size: 14.5px; color: var(--ink-2); }
.lid-foot b { color: var(--ink); font-weight: 600; }

/* Diagnostics — what pmset says, and what Awakly shows
   -------------------------------------------------------------------------- */
.diag-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xxxl); margin-top: var(--space-page-48); align-items: center; }
@media (min-width: 960px) { .diag-grid { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; margin-top: var(--space-page-64); } }
.term {
  position: relative; border-radius: 14px; overflow: hidden; background: #0E0E11; color: #C9C8D6;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), var(--shadow-floating);
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
}
.term .bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.45); font-family: var(--font); font-size: 12px; }
.term .bar i { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.term .bar span { margin-left: auto; margin-right: auto; padding-right: 40px; }
.term pre { padding: 14px 16px 18px; white-space: pre; overflow-x: auto; scrollbar-width: none; font: inherit; }
.term pre::-webkit-scrollbar { display: none; }
.term .cmd { color: #fff; }
.term .cmd::before { content: '$ '; color: #8C84FF; }
.term .dim { color: rgb(201 200 214 / 0.42); }
.term .hl { transition: background-color 300ms ease, color 300ms ease; border-radius: 3px; }
.term .hl.is-lit { background: rgb(140 132 255 / 0.22); color: #fff; }
.term .caret { display: inline-block; width: 7px; height: 14px; background: #C9C8D6; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.diag-arrow { display: grid; place-items: center; color: var(--ink-3); }
.diag-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 959px) { .diag-arrow svg { rotate: 90deg; } }
/* the app's Others section (OthersSection.swift), value for value and in the system font: two group rows, each over
   its opened list of apps behind a hairline in line with the group's tile; on the Automatic card's edge and shadow */
.diag-list {
  position: relative; padding: var(--space-md); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-panel);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, var(--font); font-size: 13px; line-height: normal; letter-spacing: normal;
}
@media (max-width: 959px) { .diag-list { box-shadow: var(--shadow-panel-phone); } }
.diag-list .dd-like { padding: var(--space-xs) 0; }
.diag-list :is(.grp, .app) { display: flex; align-items: center; gap: var(--space-row-icon); height: 40px; }
.diag-list .grp { padding: 0 var(--space-lg); }
.diag-list :is(.grp + .apps, .apps + .grp) { margin-top: var(--space-xxs); }
.diag-list .t { flex: 1; min-width: 0; white-space: nowrap; }
.diag-list .t b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; color: var(--ink); }
.diag-list .t span { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--ui-label-2); }
.diag-list :is(.grp em, .app .r) { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ui-label-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.diag-list .tile {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: var(--ui-quiet); box-shadow: inset 0 0 0 0.5px var(--ui-separator); color: var(--ui-label-2);
}
.diag-list :is(.tile svg, .chev) { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.diag-list .tile svg { width: 14px; height: 14px; }
/* an app's own icon, a little larger than its 24 slot, as macOS draws them */
.diag-list .app img { width: 29.28px; height: 29.28px; margin: -2.64px; flex-shrink: 0; }
.diag-list .chev { width: 12px; height: 12px; margin-left: calc(var(--space-xs) - var(--space-row-icon)); flex-shrink: 0; color: var(--ui-label-4); }
.diag-list .apps { position: relative; padding: 0 var(--space-lg) 0 calc(var(--space-lg) * 2); }
.diag-list .apps::before {
  content: ''; position: absolute; left: var(--space-lg); top: var(--space-xs); bottom: var(--space-xs); width: 1px;
  background: linear-gradient(90deg, var(--ui-sep-start) 50%, var(--ui-sep-end) 50%);
}
.diag-list .app { padding: 0 var(--space-md); margin: 0 calc(-1 * var(--space-md)); border-radius: 8px; transition: background-color 250ms ease; }
.diag-list .app + .app { margin-top: var(--space-xxs); }
.diag-list .app.is-lit { background: var(--accent-tint); }
.diag-foot { margin-top: var(--space-xxxxl); text-align: center; font-size: 14.5px; color: var(--ink-2); }

/* Features — a bento of the smaller things
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-page-48); }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--space-page-64); } .tile-w2 { grid-column: span 2; } .tile-w3 { grid-column: span 3; } .tile-w4 { grid-column: span 4; } }
.ftile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 300px;
  border-radius: var(--r-tile); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.ftile::after { /* pointer-following light */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(360px 260px at var(--mx, 50%) var(--my, 0%), var(--accent-tint), transparent 70%);
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) { .ftile:hover::after { opacity: 1; } }
.ftile .art { position: relative; flex: 1; min-height: 160px; display: grid; place-items: center; padding: var(--space-xxxxl) var(--space-xxxl) 0; overflow: hidden; }
.ftile .copy { padding: var(--space-xxxl); }
.ftile h3 { display: flex; align-items: center; gap: var(--space-md); font-size: 17px; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
.ftile p { font-size: 14.5px; color: var(--ink-2); margin-top: var(--space-md); line-height: 1.5; max-width: 44ch; }
.ftile p code { font-size: 13px; color: var(--ink); }
/* dotted stage under each drawing, faded toward the bottom like the Pro tab's */
.ftile .art::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--hair-2) 1px, transparent 1.2px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%); mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

/* keycaps: pressed in turn when the tile is hovered or scrolls into view */
.keys { display: flex; gap: var(--space-md); }
.keys kbd {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px;
  font-family: var(--font); font-size: 22px; font-weight: 500; color: var(--ink);
  background: linear-gradient(to bottom, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--hair-2), inset 0 -3px 0 var(--hair), 0 2px 0 var(--hair-2), 0 6px 14px light-dark(rgb(24 21 52 / 0.08), rgb(0 0 0 / 0.4));
  transition: transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press), color 200ms ease;
}
.keys kbd.is-down { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--accent-edge), inset 0 -1px 0 var(--hair), 0 0 0 var(--hair-2), 0 2px 6px light-dark(rgb(24 21 52 / 0.08), rgb(0 0 0 / 0.4)); color: var(--accent); }

/* Control Center tile: macOS 26's Control Center as the real control sits in it (AwaklyControl), in the system font,
   the control is a wide toggle, a capsule that turns white when on, its sun in the
   control's tint; under it Wi-Fi, on, and Focus, off, are round and unlabelled, with the system's own SF Symbols
   (their outlines, in the sprite). It sits in the Focus tile's glass, clear of the art's bottom edge. */
.ftile[data-tile="cc"] .art { padding: calc(var(--space-xxxxl) + var(--space-xxxl)) var(--space-xxxl) var(--space-xxxl); } /* centers with its neighbours */
.cc {
  display: grid; grid-template-columns: repeat(2, 52px); gap: 10px; padding: 10px; border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, var(--font); line-height: normal; letter-spacing: normal;
  background: var(--ui-glass); box-shadow: inset 0 1px 0 var(--ui-glass-edge), 0 0 0 0.5px var(--ui-glass-hair), 0 8px 24px light-dark(rgb(24 21 52 / 0.1), rgb(0 0 0 / 0.45));
}
.cc .cc-wide {
  grid-column: span 2; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 15px; border-radius: 999px;
  background: var(--ui-quiet-strong); text-align: left; transition: background-color 300ms ease, box-shadow 300ms ease;
}
.cc .cc-ic { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); transition: color 300ms ease; }
.cc .cc-ic svg { width: 22px; height: 22px; translate: 0 1px; }
.cc .cc-t { min-width: 0; }
.cc .cc-t b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: color 300ms ease; }
.cc .cc-t span { display: block; font-size: 12px; color: var(--ui-label-2); transition: color 300ms ease; }
/* on: white in either theme, as Control Center draws a lit control, with a hairline so it holds on the white card */
.ftile.cc-on .cc-wide, .cc .cc-round { background: #fff; box-shadow: 0 0 0 0.5px var(--hair-2), 0 1px 3px rgb(0 0 0 / 0.12); }
.ftile.cc-on .cc-ic { color: #5850E6; }
.ftile.cc-on .cc-t b { color: #161524; }
.ftile.cc-on .cc-t span { color: rgb(22 21 36 / 0.6); }
.cc .cc-round { display: grid; place-items: center; height: 52px; border-radius: 50%; }
.cc .cc-round.is-off { background: var(--ui-quiet-strong); box-shadow: none; }
.cc .sf { display: block; color: #007AFF; }
.cc .cc-round.is-off .sf { color: var(--ink); }
.cc .sf-wifi { width: 21px; height: 16.66px; }
.cc .sf-focus { width: 18px; height: 18.69px; }

/* Shortcuts action block */
.sc { display: flex; flex-direction: column; gap: var(--space-md); width: min(100%, 300px); }
.sc .act { display: flex; align-items: center; gap: var(--space-row-icon); padding: var(--space-lg); border-radius: 12px; font-size: 13.5px; background: var(--surface); box-shadow: var(--shadow-card); }
.sc .act img { width: 22px; height: 22px; border-radius: 5px; }
.sc .act b { font-weight: 600; }
.sc .act .tok { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-md); border-radius: 6px; font-weight: 550; color: var(--accent); background: var(--accent-tint); }
.sc .act:nth-child(2) { margin-left: var(--space-xl); opacity: 0.7; }
.sc .act:nth-child(3) { margin-left: var(--space-xxxxl); opacity: 0.45; }

/* awakly:// — typed out */
.url {
  width: min(100%, 380px); white-space: nowrap; overflow: hidden; padding: var(--space-lg) var(--space-xl); border-radius: 12px; text-align: left;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-2);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair);
}
.url .k { color: var(--accent); }
.url .typed { color: var(--ink); }
.url .caret { display: inline-block; width: 7px; height: 15px; background: var(--accent); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; }

/* history bars rise in */
.hist { width: min(100%, 360px); padding: var(--space-xl) var(--space-xl) var(--space-lg); border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-2), 0 6px 20px light-dark(rgb(24 21 52 / 0.06), rgb(0 0 0 / 0.3)); text-align: left; }
.hist .top { display: flex; align-items: baseline; gap: var(--space-xs); font-size: 13px; color: var(--ink-3); }
.hist .top b { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hist .top em { margin-left: auto; font-style: normal; }
.hist .bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: var(--space-lg); }
.ftile[data-tile="history"] .art { padding: calc(var(--space-xxxxl) + var(--space-xxxl)) var(--space-xxxl) var(--space-xxxl); } /* its shadow clears the art's edge, and it centers with its neighbours */
.hist .bars i { flex: 1; border-radius: 2px 2px 1px 1px; background: var(--accent); height: calc(var(--h) * 1%); transform-origin: bottom; }
.js .hist .bars i { transform: scaleY(0); transition: transform 900ms var(--ease); transition-delay: calc(var(--i) * 18ms); }
.js .hist.is-in .bars i { transform: none; }

/* battery */
.batt { display: flex; flex-direction: column; gap: var(--space-md); width: min(100%, 320px); }
.batt .row { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 13.5px; }
.batt .row .t { flex: 1; }
.batt .row b { font-weight: 560; }
/* the battery as macOS 27 draws it in the menu bar, as the app does (MenuBarBattery): a solid charge, the empty part
   and the cap the same color at half strength, no outline; 1.9 times as wide as tall, its cap 0.1 off it.
   On the power adapter it's full, with the bolt cut out of it. */
.batt .bat {
  --h: 14px; --charge: var(--ink); --spent: color-mix(in srgb, var(--ink) 50%, transparent);
  position: relative; flex-shrink: 0; width: calc(var(--h) * 1.9); height: var(--h); margin-right: calc(var(--h) * 0.25);
  border-radius: calc(var(--h) * 0.3); background: linear-gradient(90deg, var(--charge) var(--lvl, 80%), var(--spent) var(--lvl, 80%));
}
.batt .bat::after {
  content: ''; position: absolute; left: calc(100% + var(--h) * 0.1); top: 30%; width: calc(var(--h) * 0.15); height: 40%;
  border-radius: 0 calc(var(--h) * 0.15) calc(var(--h) * 0.15) 0; background: var(--spent);
}
.batt .bat.is-low { --charge: var(--critical); }
.batt .bat-charging { flex-shrink: 0; width: 30.1px; height: 14px; color: var(--ink); }
.batt .sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.batt .sw::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }

/* Focus */
.focus { display: flex; flex-direction: column; gap: var(--space-md); width: min(100%, 280px); }
.focus .f { display: flex; align-items: center; gap: var(--space-lg); height: 60px; padding: 0 var(--space-lg); border-radius: 16px; background: var(--ui-glass); box-shadow: inset 0 1px 0 var(--ui-glass-edge), 0 0 0 0.5px var(--ui-glass-hair), 0 8px 24px light-dark(rgb(24 21 52 / 0.1), rgb(0 0 0 / 0.45)); text-align: left; }
.focus .f .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-quiet-strong); transition: background-color 400ms ease, color 400ms ease; }
.focus .f .ic svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.focus .f b { display: block; font-size: 14px; font-weight: 600; }
.focus .f span { display: block; font-size: 12px; color: var(--ui-label-2); }
.focus .f .menu-sun { margin-left: auto; width: 22px; height: 22px; color: var(--ink-3); transition: color 400ms ease; }
.ftile.focus-on .focus .f .ic { background: #7D6BEB; color: #fff; }
.ftile.focus-on .focus .f .menu-sun { color: var(--sun-deep); }

/* themes */
.themes { display: flex; gap: var(--space-lg); }
.themes .th { width: 92px; text-align: center; font-size: 12px; color: var(--ink-2); }
.themes .th i { display: block; height: 64px; border-radius: 12px; margin-bottom: var(--space-md); box-shadow: inset 0 0 0 1px var(--hair-2); overflow: hidden; position: relative; }
.themes .th .l { background: linear-gradient(160deg, #F5F3FB, #E4E0F6); }
.themes .th .d { background: linear-gradient(160deg, #1A1A1F, #0C0C0D); }
.themes .th .s { background: linear-gradient(90deg, #F5F3FB 50%, #0C0C0D 50%); }
.themes .th i::after { content: ''; position: absolute; left: 18%; right: 18%; top: 18%; bottom: 0; border-radius: 6px 6px 0 0; background: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.1)); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12); }
.themes .th .d::after { background: rgb(255 255 255 / 0.08); }
.themes .th .s::after { background: linear-gradient(90deg, rgb(255 255 255 / 0.85) 50%, rgb(255 255 255 / 0.1) 50%); }
.themes .th.on i { box-shadow: inset 0 0 0 1.5px var(--accent-edge), 0 0 0 3px var(--accent-tint); }
.themes .th.on { color: var(--accent); }

/* Settings — screenshots of the real windows; the toolbar in the shot switches tabs, and the window
   resizes to each tab like macOS Settings does. Tabs taller than 0.92 of the width fade out at the bottom.
   The shots carry the window's own corners and rim, so nothing clips them; the stage casts the shadow from their
   shape, which keeps it on every tab, fading with the cropped ones.
   -------------------------------------------------------------------------- */
.settings-stage { width: min(100%, 720px); margin: var(--space-page-48) auto 0; container-type: inline-size; filter: drop-shadow(0 1px 2px var(--shadow-window-near)) drop-shadow(0 24px 48px var(--shadow-window-far)); }
@media (min-width: 960px) { .settings-stage { margin-top: var(--space-page-64); } }
.settings-win {
  position: relative; width: 100%; height: calc(min(var(--r, 1), 0.92) * 100cqw); overflow: hidden;
  transition: height 460ms var(--ease-in-out);
}
.settings-win.is-cropped { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
/* the light shots have no rim of their own, so a hairline gives the window an even edge; the dark ones carry macOS's */
:root:not([data-scheme="dark"]) .settings-win::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: calc(100cqw * 30.7 / 1280);
  box-shadow: inset 0 0 0 0.5px var(--hair-2); pointer-events: none;
}
.settings-win .shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity 220ms ease; }
.settings-win .shot.on { opacity: 1; }
:root:not([data-scheme="dark"]) .only-dark, :root[data-scheme="dark"] .only-light { display: none; }
/* each tab's hover is its own frame in the toolbar, as the shot draws it selected */
.settings-win .hots { position: absolute; left: 0; top: calc(100cqw * 64 / 1280); width: 100%; height: calc(100cqw * 96 / 1280); }
.settings-win .hot {
  position: absolute; top: 0; height: 100%; border-radius: calc(100cqw * 16 / 1280);
  font-size: 0; color: transparent; transition: background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .settings-win .hot:hover:not([aria-selected="true"]) { background: var(--ui-quiet); } }
.settings-caps { position: relative; max-width: 560px; min-height: 4.8em; margin: var(--space-xxxxl) auto 0; text-align: center; }
.settings-caps p {
  position: absolute; inset: 0 0 auto; font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
  opacity: 0; transform: translateY(6px); filter: blur(3px); transition: opacity 220ms ease, transform 320ms var(--ease), filter 220ms ease;
}
.settings-caps p.on { opacity: 1; transform: none; filter: none; }
.settings-caps p b { color: var(--ink); font-weight: 600; }
.settings-caps .pro { margin-left: var(--space-xs); vertical-align: 1px; }
.tab-chips { display: none; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xs); }
@media (max-width: 719px) { .tab-chips { display: flex; } .settings-caps { min-height: 6.4em; } }
.tab-chip { height: 32px; padding: 0 var(--space-lg); border-radius: 999px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-2); transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.tab-chip.on { color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-edge); }

/* Trust — calm by design (Hustla's reviews slot; Awakly has none yet)
   -------------------------------------------------------------------------- */
/* four items on the page, split by hairlines; each opens on its stat, its title led by a small accent icon */
.trust-grid { display: grid; grid-template-columns: 1fr; margin-top: var(--space-page-48); overflow: hidden; }
@media (min-width: 720px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* each item draws the hairline on its left and top; the grid clips the ones at its edge */
.trust { position: relative; padding: var(--space-xxxxl) var(--space-xxxl); box-shadow: -0.5px 0 0 var(--hair-2), 0 -0.5px 0 var(--hair-2); }
.trust .big { display: flex; align-items: baseline; margin-bottom: var(--space-xl); font-size: 34px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.trust .big small { margin-left: var(--space-md); font-size: 16px; font-weight: 550; color: var(--ink-3); letter-spacing: -0.01em; }
.trust .big small.plus { margin-left: 1px; }
.trust h3 .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust h3 { display: flex; align-items: center; gap: var(--space-md); font-size: 16.5px; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
.trust p { font-size: 14.5px; color: var(--ink-2); margin-top: var(--space-md); line-height: 1.5; }

/* Pricing
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); max-width: 1000px; margin: var(--space-page-48) auto 0; }
@media (min-width: 860px) { .plans { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--space-page-64); } }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--space-xxxxl); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-panel); }
@media (max-width: 959px) { .plan { box-shadow: var(--shadow-panel-phone); } }
.plan .tier { display: flex; align-items: center; gap: var(--space-md); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.plan .price { display: flex; align-items: baseline; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-md); }
.plan .price b { font-size: 52px; font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price span { font-size: 15px; color: var(--ink-3); }
.plan .blurb { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.plan ul { display: grid; gap: var(--space-lg); margin-top: var(--space-xxxl); padding-top: var(--space-xxxl); border-top: 1px solid var(--hair); }
/* each feature after a check in a purple circle */
.plan li { position: relative; padding-left: calc(20px + var(--space-row-icon)); font-size: 15px; line-height: 1.45; }
.plan li svg { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; padding: var(--space-xs); border-radius: 50%; background: var(--accent-tint); color: var(--accent); }
.plan li.muted { color: var(--ink-2); }
.plan li.muted svg { color: var(--ink-3); }
.plan-pro { isolation: isolate; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plan-pro::before { /* a slow light runs the rim */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--spin), transparent 0 64%, var(--accent) 76%, var(--sun) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 9s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }
.plan-pro .glowbg { position: absolute; inset: 0; border-radius: inherit; z-index: -2; overflow: hidden; }
.plan-pro .glowbg::before { content: ''; position: absolute; right: -20%; top: -40%; width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-tint), transparent); }
/* the Settings window's Pro star (its toolbar icon), large and white over the glow, running off the card's corner */
.plan-pro .glowbg .star {
  position: absolute; right: -9%; top: -16%; width: 42%; aspect-ratio: 1; rotate: 14deg;
  fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
:root[data-scheme="dark"] .plan-pro .glowbg .star { stroke: rgb(255 255 255 / 0.09); }
.plan .cols { display: grid; grid-template-columns: 1fr; gap: var(--space-lg) var(--space-xxxl); }
@media (min-width: 560px) { .plan .cols { grid-template-columns: 1fr 1fr; } }
/* the Pro card ends on the price's fine print */
.plan .fine { margin-top: auto; padding-top: var(--space-xxxxl); font-size: 13px; line-height: 1.45; color: var(--ink-3); }
/* under the cards, the download with how Pro is had under it, both centered */
.pricing .ctas { flex-direction: column; gap: var(--space-xl); margin-top: var(--space-page-48); }
.pricing .ctas p { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-align: center; }
@media (min-width: 380px) { .pricing .ctas p { white-space: nowrap; } } /* one line, wherever it fits */

/* FAQ — accessible accordion
   -------------------------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq .h2 { text-align: center; margin-bottom: var(--space-page-48); }
.faq-items { transform: translateZ(0); }
.faq-item { border-top: 1px solid var(--hair-2); }
.faq-item:last-child { border-bottom: 1px solid var(--hair-2); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xxxl) 0; text-align: left; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .faq-q:hover { color: var(--ink-2); } }
.faq-q .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair-2); transition: transform 400ms var(--ease), background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.faq-q .plus svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; fill: none; }
.faq-q[aria-expanded="true"] .plus { transform: rotate(45deg); background: var(--accent); color: #fff; box-shadow: none; }
.faq-a { height: 0; overflow: hidden; transition: height 350ms var(--ease-out); }
.faq-item.open .faq-a { height: auto; }
.faq-a p { font-size: 16px; color: var(--ink-2); line-height: 1.65; padding: 0 var(--space-page-48) var(--space-xxxl) 0; max-width: 62ch; }
.faq-a a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); transition: text-decoration-color 200ms ease; }
.faq-a a:hover { text-decoration-color: var(--ink); }

/* Final CTA — the sun comes up once more
   -------------------------------------------------------------------------- */
.final { position: relative; text-align: center; padding: var(--space-page-128) 0; overflow: hidden; isolation: isolate; }
.final .h2 { font-size: clamp(40px, 4.4vw + 18px, 88px); letter-spacing: -0.045em; margin-bottom: var(--space-page-40); }
.final .note { margin-top: var(--space-xl); }
.final .sunrise { --S: clamp(220px, 30vw, 380px); margin: 0 auto var(--space-md); }

/* Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; padding: var(--space-page-64) 0 var(--space-page-48); }
.footer .wrap { display: grid; gap: var(--space-xxxxl); }
@media (min-width: 900px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.footer .brand { display: grid; gap: var(--space-lg); }
.footer .tag { font-size: 14px; color: var(--ink-2); }
.footer .links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xxxl); font-size: 14px; color: var(--ink-2); }
.footer .links a { transition: color 200ms ease; }
.footer .links a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .footer .links a:hover { color: var(--ink); } }
.footer .end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); grid-column: 1 / -1; padding-top: var(--space-xxxl); border-top: 1px solid var(--hair); }
.footer .copy { font-size: 13px; color: var(--ink-3); }
.footer .copy a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair-2); }
.footer .right { display: grid; gap: var(--space-xxxl); justify-items: start; }
@media (min-width: 900px) { .footer .right { justify-items: end; } }

/* the theme picker: System, Light, Dark — the picked one slides under */
.theme-switch { position: relative; display: inline-grid; grid-template-columns: repeat(3, 34px); height: 32px; padding: var(--space-xxs); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.theme-switch button { position: relative; z-index: 1; display: grid; place-items: center; border-radius: 999px; color: var(--ink-3); transition: color 200ms ease; }
.theme-switch button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .theme-switch button:hover { color: var(--ink); } }
.theme-switch button[aria-checked="true"] { color: var(--ink); }
.theme-switch .thumb { position: absolute; top: 2px; left: 2px; width: 34px; height: 28px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 2px light-dark(rgb(24 21 52 / 0.08), rgb(0 0 0 / 0.4)); transform: translateX(calc(var(--pick, 0) * 34px)); transition: transform 300ms var(--ease-out); }

/* Scroll reveals — once, early, with a strong ease-out
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.in { opacity: 1; transform: none; }

/* Legal, support and changelog pages
   -------------------------------------------------------------------------- */
.legal { position: relative; isolation: isolate; max-width: 720px; margin: 0 auto; padding: var(--space-page-160) var(--space-xxxl) var(--space-page-96); }
.legal::before { /* a faint dawn over the page title */
  content: ''; position: absolute; left: 50%; top: 0; width: min(1100px, 100vw); height: 520px; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 52% at 50% 18%, var(--glow), transparent 72%), radial-gradient(60% 50% at 50% 0%, var(--glow-cool), transparent 70%);
  opacity: 0.5;
}
@media (min-width: 640px) { .legal { padding: var(--space-page-192) var(--space-page-40) var(--space-page-128); } }
.legal h1 { font-size: clamp(38px, 2.6vw + 22px, 60px); letter-spacing: -0.04em; margin-bottom: var(--space-lg); }
.legal-updated, .legal .legal-sub { font-size: 15px; color: var(--ink-3); margin-bottom: var(--space-page-48); }
.legal .legal-sub { font-size: 17px; line-height: 1.6; }
.legal h2 { font-size: 19px; font-weight: 620; letter-spacing: -0.015em; margin: var(--space-page-48) 0 var(--space-md); line-height: 1.3; }
.legal p { font-size: 16px; color: var(--ink-2); line-height: 1.72; margin-bottom: var(--space-xl); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); transition: text-decoration-color 200ms ease; }
.legal a:hover { text-decoration-color: var(--ink); }
.legal-card { background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-resting); padding: var(--space-xxxxl) var(--space-xxxxl) var(--space-xxxl); margin: var(--space-xxxxl) 0 var(--space-md); }
.legal-card h2 { margin-top: 0; }
.legal ul.dots { display: grid; gap: var(--space-md); margin: var(--space-xs) 0 var(--space-xl); }
.legal ul.dots li { font-size: 16px; color: var(--ink-2); line-height: 1.65; padding-left: var(--space-xxxl); position: relative; }
.legal ul.dots li::before { content: ''; position: absolute; left: 3px; top: calc(0.82em - 2px); width: 5px; height: 5px; border-radius: 2px; background: var(--accent); opacity: 0.7; }
.legal-back { margin-top: var(--space-page-48); font-size: 15px; }
.legal-back a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-md); }
.legal-back a:hover { text-decoration: underline; }
.legal code { font-size: 14px; padding: var(--space-xxs) var(--space-xs); border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.legal .contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); margin: var(--space-xxxl) 0 var(--space-md); }
.legal .contact .btn { text-decoration: none; color: #fff; }
.legal .contact .copy-mail { font-size: 14px; color: var(--ink-3); text-decoration: none; }

/* What's New */
.release + .release { margin-top: var(--space-page-64); padding-top: var(--space-page-64); border-top: 1px solid var(--hair); }
.legal .release-version { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); font-size: clamp(26px, 1vw + 20px, 34px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 var(--space-md); }
.legal .release-date { font-size: 14px; color: var(--ink-3); margin-bottom: var(--space-page-40); }
.legal h3 { font-size: 17px; font-weight: 620; letter-spacing: -0.012em; line-height: 1.35; margin: var(--space-xxxxl) 0 var(--space-md); display: flex; align-items: center; gap: var(--space-md); }
.release-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-md); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--accent); background: var(--accent-tint); }

/* 404 — 4 ☀ 4: the zero is the menu bar sun, and it works
   -------------------------------------------------------------------------- */
.nf { text-align: center; padding: var(--space-page-128) 0 var(--space-page-96); }
@media (min-width: 960px) { .nf { padding: var(--space-page-160) 0 var(--space-page-128); } }
.nf-code {
  display: flex; align-items: center; justify-content: center; gap: 0.02em;
  font-size: clamp(112px, 14vw + 48px, 232px); font-weight: 650; letter-spacing: -0.05em; line-height: 1;
  margin-bottom: var(--space-xxxxl); user-select: none; -webkit-user-select: none;
}
.nf-sun {
  position: relative; width: 0.86em; height: 0.86em; margin: 0.04em 0.03em 0; border-radius: 0.18em; color: var(--ink);
  transition: transform 160ms var(--ease-press), color 400ms ease;
}
.nf-sun .menu-sun { display: block; width: 100%; height: 100%; }
.nf-sun svg.menu-sun path { stroke-width: 2.15; }
.nf-sun.is-on { color: var(--sun-deep); }
@media (hover: hover) and (pointer: fine) { .nf-sun:hover { transform: scale(1.03); } }
.nf-sun:active { transform: scale(0.96); }
/* an unlit sun this big begs to be clicked */
@keyframes nf-nudge {
  0%, 84%, 100% { rotate: 0deg; }
  88% { rotate: -4deg; } 92% { rotate: 4deg; } 95% { rotate: -2deg; } 98% { rotate: 1deg; }
}
.nf-sun.is-idle { animation: nf-nudge 5s ease-in-out 3s infinite; }
.nf .lede { font-size: clamp(17px, 0.4vw + 14px, 19px); line-height: 1.55; color: var(--ink-2); max-width: 40ch; margin: 0 auto var(--space-md); }
.nf-hint { font-size: 13px; color: var(--ink-3); margin-bottom: var(--space-page-48); transition: color 300ms ease; }
.nf-hint.is-going { color: var(--ink); }
.nf-card {
  max-width: 420px; margin: 0 auto var(--space-page-48); padding: var(--space-xs) var(--space-md) var(--space-md); border-radius: 16px; text-align: left;
  background: var(--ui-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge), 0 0 0 0.5px var(--ui-glass-hair), var(--shadow-floating);
}
.nf-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xl); padding: var(--space-lg) var(--space-lg) var(--space-md); font-size: 13.5px; border-bottom: 1px solid var(--ui-sep); }
.nf-head b { font-weight: 600; }
.nf-path { font-family: var(--mono); font-size: 12px; color: var(--ink-3); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-rows { padding: var(--space-xs) var(--space-lg); }
.nf-rows li { display: flex; align-items: center; gap: var(--space-lg); min-height: 40px; font-size: 14.5px; transition: color 400ms ease; }
.nf-rows li code { font-size: 13px; }
.nf-rows .tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px var(--ink-4); transition: background-color 250ms ease, box-shadow 250ms ease; }
.nf-rows .tick svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 300ms var(--ease-out) 80ms; }
.nf-rows li.is-done { color: var(--ink-2); }
.nf-rows li.is-done .tick { background: var(--accent); box-shadow: none; }
.nf-rows li.is-done .tick svg { stroke-dashoffset: 0; }
.nf-rows li.is-live .tick { box-shadow: inset 0 0 0 1.5px var(--accent); animation: nf-pulse 1.6s ease-in-out infinite; }
@keyframes nf-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 5px var(--accent-tint); } }
.nf-rows a { color: var(--accent); font-weight: 550; }
@media (hover: hover) and (pointer: fine) { .nf-rows a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.nf-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-md) var(--space-xxxl); margin-bottom: var(--space-xl); }
.nf-actions .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nf-ghost { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .nf-ghost:hover { color: var(--ink); } }
.js .nf-rise {
  opacity: 0; transform: translateY(14px); filter: blur(6px);
  animation: rise 900ms var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms);
}

/* Reduced motion — no movement; reveals become a plain fade, scrubs are off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero .rise, .js .nf-rise { animation: fade 300ms ease forwards; transform: none; filter: none; }
  .nf-sun.is-idle, .nf-rows li.is-live .tick { animation: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .js .reveal { transform: none; transition: opacity 300ms ease; }
  .idle-state > span, .job .st > span, .idle-cap > span { transform: none; filter: none; }
  .idle-pick .thumb { transition: none; }
  .js .sunrise .blueprint * { stroke-dasharray: none; }
  .plan-pro::before, .auto-card .state::before, .term .caret, .url .caret { animation: none; }
  .js .hist .bars i { transform: none; transition: none; }
}