/* atlasapp.so's landing only (the other public pages keep site.css). Tokens
   mirror the app's Theme.swift; Nunito (SIL OFL 1.1) is served from fonts/. */

@font-face {font-family:Nunito; src:url(fonts/nunito-400.woff2) format('woff2'); font-weight:400 500; font-display:swap;}
@font-face {font-family:Nunito; src:url(fonts/nunito-600.woff2) format('woff2'); font-weight:600; font-display:swap;}
@font-face {font-family:Nunito; src:url(fonts/nunito-700.woff2) format('woff2'); font-weight:700; font-display:swap;}
@font-face {font-family:Nunito; src:url(fonts/nunito-800.woff2) format('woff2'); font-weight:800; font-display:swap;}
/* A metric-matched stand-in while Nunito loads (no shift on swap). */
@font-face {font-family:'Nunito Fallback'; src:local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust:102.28%; ascent-override:98.85%; descent-override:34.51%; line-gap-override:0%;}

:root {
  color-scheme:light dark;
  --background:#fff; --surface-sunken:#f7f7f5; --surface-elevated:#fff;
  --well:#f4f4f2; --well-strong:#eaeae7; --border:#eaeae8; --hairline:#f1f1ef; --border-strong:#d3d2cf;
  --text-primary:#1a1a1a; --text-secondary:#55544f; --text-tertiary:#717069;
  --accent:#1a1a1a; --text-inverse:#fff; --accent-tint:rgba(0, 0, 0, .04);
  --danger:#c03b2b; --premium-gold:#b8912f; --premium-gold-text:#765811; --voice:#0b7b57;
  --shadow-float:0 4px 10px rgba(0, 0, 0, .09);
  --fill:.14;
  --ease-quick:ease-out; --ease-standard:ease-out;
  --gutter:20px; --frame:min(1200px, 100% - 2 * var(--gutter));
  --font:Nunito, 'Nunito Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@supports (transition-timing-function:linear(0,1)) {
  :root {
    --ease-quick:linear(0,.019,.068,.136,.214,.296,.378,.456,.53,.598,.659,.713,.761,.803,.838,.869,.894,.915,.933,.948,.96,.969,.977,.983,.988,.992,.995,.997,.998,1,1,1.001,1.001,1.001,1.002,1.002,1.002,1.001,1.001,1.001,1);
    --ease-standard:linear(0,.021,.075,.148,.233,.321,.409,.493,.57,.641,.703,.758,.805,.845,.879,.907,.93,.948,.963,.975,.984,.99,.996,.999,1.002,1.003,1.004,1.005,1.005,1.005,1.005,1.004,1.004,1.004,1.003,1.003,1.002,1.002,1.002,1.001,1);
 }
}
@media (prefers-color-scheme:dark) {
  :root {
    --background:#191919; --surface-sunken:#141414; --surface-elevated:#2a2a2a;
    --well:#252524; --well-strong:#303030; --border:#2f2f2f; --hairline:#242424; --border-strong:#4f4f4d;
    --text-primary:#f2f1ee; --text-secondary:#a8a7a3; --text-tertiary:#8a8987;
    --accent:#f2f1ee; --text-inverse:#191919; --accent-tint:rgba(255, 255, 255, .06);
    --danger:#f87171; --premium-gold:#d9b45b; --premium-gold-text:#d9b45b; --voice:#31ce9b;
    --shadow-float:none; --fill:.26;
 }
}
@media (min-width:600px) {:root {--gutter:24px;}}
@media (min-width:960px) {:root {--gutter:32px;}}

/* Project inks (projectText: light x0.82, Finance x0.78; dark x1.18) and bases. */
.p-work {--ink:#2a678b; --rgb:51, 126, 169;}
.p-home {--ink:#386b50; --rgb:68, 131, 97;}
.p-health {--ink:#9e3e71; --rgb:193, 76, 138;}
.p-family {--ink:#765390; --rgb:144, 101, 176;}
.p-finance {--ink:#a95a0a; --rgb:217, 115, 13;}
@media (prefers-color-scheme:dark) {
  .p-work {--ink:#3c95c7;} .p-home {--ink:#509b72;} .p-health {--ink:#e45aa3;}
  .p-family {--ink:#aa77d0;} .p-finance {--ink:#ff870f;}
  html .cap-p {color:color-mix(in srgb, var(--ink, var(--text-secondary)) 70%, var(--text-primary));}
}

*, *::before, *::after {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%; scroll-padding-top:80px;}
@media (prefers-reduced-motion:no-preference) {html {scroll-behavior:smooth;}}
body {
  margin:0; background:var(--background); color:var(--text-primary);
  font:500 16px/1.55 var(--font); -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1, h2, h3, p, ul, ol, figure {margin:0;}
ul, ol {padding:0; list-style:none;}
a {color:inherit;}
img, svg {display:block;}
button {font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer;}
:focus-visible {outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
[hidden] {display:none !important;}
.sr {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.ic {width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.skip {position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--text-inverse); padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none;}
.skip:focus {top:12px;}

/* The grid: a centred frame, its side lines the length of <main>. */
.frame {width:var(--frame); margin-inline:auto;}
main {position:relative; display:block;}
@media (min-width:768px) {
  main::before {content:''; position:absolute; inset:0 auto 0 50%; width:var(--frame); transform:translateX(-50%); border-inline:1px solid var(--border); pointer-events:none; z-index:1;}
  .hdr-in {min-height:calc(100% + 1px); padding-inline:var(--gutter); border-inline:1px solid var(--border);}
}
.band {border-top:1px solid var(--border); padding-block:64px;}
@media (min-width:960px) {.band {padding-block:96px;}}
.hd {text-align:center; max-width:760px; margin:0 auto 40px; padding-inline:4px;}
.kicker {display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; line-height:1; color:var(--text-tertiary); margin-bottom:16px;}
.kicker .ic {width:16px; height:16px;}
h2 {font-size:clamp(30px, 4.2vw, 48px); font-weight:800; letter-spacing:-.03em; line-height:1.08; text-wrap:balance;}
.sub {font-size:clamp(17px, 1.6vw, 20px); line-height:1.5; color:var(--text-secondary); max-width:52ch; margin:16px auto 0; text-wrap:pretty;}
.panel {display:grid; gap:1px; background:var(--border); border-block:1px solid var(--border);}
.panel > * {background:var(--background);}
.band:has(> .panel:last-child) {padding-bottom:0;}
.band > .panel:last-child {border-bottom:0;}

/* Header */
.hdr {position:sticky; top:0; z-index:50; height:64px; background:color-mix(in srgb, var(--background) 85%, transparent); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s;}
.hdr.scrolled {border-bottom-color:var(--border);}
.hdr-in {height:100%; display:flex; align-items:center; gap:8px;}
.brand {display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.02em; text-decoration:none; min-height:44px;}
.tile {display:inline-grid; place-items:center; width:30px; height:30px; border-radius:22%; background:#fff; box-shadow:0 0 0 1px rgba(20, 18, 15, .08); flex:none;}
.tile svg {width:62%; height:62%;}
.hdr nav {margin-left:auto; display:flex; align-items:center; gap:4px;}
.hdr-links {display:none; gap:4px;}
@media (min-width:820px) {.hdr-links {display:flex;}}
.hdr nav a {display:inline-flex; align-items:center; min-height:40px; padding:0 12px; white-space:nowrap; flex:none; border-radius:999px; text-decoration:none; font-weight:700; font-size:15px; color:var(--text-secondary);}
.hdr nav a:hover {color:var(--text-primary); background:var(--accent-tint);}
.hdr nav a.signin {color:var(--text-primary); border:1px solid var(--border-strong); margin-left:8px;}
.hdr nav a.dl {color:var(--background);background:var(--text-primary);margin-left:4px}
.hdr nav a.dl:hover {color:var(--background);background:var(--text-primary);opacity:.85}

/* Buttons */
.actions {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px;}
.badge {display:inline-block; line-height:0; border-radius:10px;}
.badge img {height:54px; width:auto;}
.btn-web {display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 24px; border:1px solid var(--border-strong); border-radius:999px; font-weight:700; font-size:17px; text-decoration:none; color:var(--text-primary); background:var(--background);}
.btn-web:hover, .badge:hover {opacity:.85;}
@media (max-width:599px) {
  .hero .actions {flex-direction:column; align-items:stretch;}
  .hero .badge {align-self:center;}
}

/* Hero */
.hero {text-align:center; padding:72px 0 64px;}
@media (min-width:960px) {.hero {padding:104px 0 88px;}}
.eyebrow {display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; background:var(--well); color:var(--text-secondary); font-size:14px; font-weight:700; text-decoration:none; margin-bottom:28px;}
.eyebrow .ic {width:16px; height:16px;}
h1 {font-size:clamp(40px, 6.4vw, 76px); font-weight:800; letter-spacing:-.035em; line-height:1.04; max-width:15ch; margin-inline:auto; text-wrap:balance;}
.chip {display:inline-block;position:relative;overflow:hidden;width:.86em;height:.86em;border-radius:.24em;background:var(--well);border:1px solid var(--border);vertical-align:-.075em}
.chip .ic {position:absolute;inset:0;margin:auto;width:.52em;height:.52em;stroke-width:2}
.chip-focus .arc {stroke:var(--text-tertiary);}
.hero .sub {margin-top:24px;}
.hero .actions {margin-top:36px;}
.note {margin-top:20px; font-size:13px; font-weight:600; color:var(--text-tertiary); line-height:1.5;}
.note b {color:var(--text-secondary); font-weight:700;}

/* Try it: the live demo */
.try {background:var(--surface-sunken);}
.try-line {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-bottom:24px; font-size:15px; font-weight:600; color:var(--text-secondary); text-align:center;}
.tag {display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--well); border:1px solid var(--border); color:var(--text-secondary); font-size:12px; font-weight:800; letter-spacing:.12em;}
.win {max-width:1080px; margin:0 auto; height:724px; display:grid; grid-template:40px minmax(0,1fr) / minmax(0,1fr); border:1px solid var(--border); border-radius:16px; background:var(--background); overflow:hidden; box-shadow:var(--shadow-float); text-align:left;}
.bar {display:flex; align-items:center; gap:8px; padding:0 8px 0 12px; border-bottom:1px solid var(--border); font-size:13px; font-weight:800;}
.bar .tile {width:22px; height:22px;}
.bar-date {margin-left:auto; color:var(--text-secondary); font-weight:700; min-width:80px; text-align:right;}
@media (max-width:359px) {.bar-date {display:none;} .seg {margin-left:auto;}}
.seg {display:flex; gap:2px; padding:1px; background:var(--well); border-radius:999px;}
.seg button {height:36px; min-width:36px; padding:0 10px; border-radius:999px; font-weight:700; color:var(--text-secondary);}
.seg button[aria-pressed=true] {background:var(--background); color:var(--text-primary); box-shadow:0 0 0 1px var(--border);}
.win-body {display:grid; min-height:0;}
.side {display:none;}
@media (min-width:960px) {
  .win-body {grid-template-columns:220px minmax(0,1fr);}
  .side {display:block; border-right:1px solid var(--border); padding:12px 8px; background:var(--surface-sunken); font-size:15px;}
  .bar .seg {display:none;}
}
.side button, .side .proj {display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border-radius:8px; text-align:left;}
.side button {font-weight:700; color:var(--text-secondary); margin-bottom:4px;}
.side button[aria-pressed=true] {background:var(--accent-tint); color:var(--text-primary);}
.side button[aria-pressed=true] .ic {stroke-width:2.4;}
.side .n {margin-left:auto; font-size:13px; color:var(--text-tertiary); font-weight:700;}
.side [aria-pressed=true] .n {color:var(--text-secondary);}
.side .sh {font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-tertiary); padding:16px 10px 6px;}
.side .proj {color:var(--text-secondary); font-weight:600; min-height:32px;}
.dot {width:8px; height:8px; border-radius:50%; background:var(--ink, var(--text-tertiary)); flex:none;}
.col {overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain; padding:16px 12px 24px;}
@media (min-width:600px) {.col {padding-inline:24px;} .win {max-width:560px;}}
@media (min-width:960px) {.col {padding-inline:32px;} .win {max-width:1080px;}}
.col-in {max-width:560px; margin:0 auto;}

/* Day card, week strip, progress pill */
.day {display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px;}
.day-t {font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2; min-height:27px;}
.day-t span {font-weight:400; color:var(--text-tertiary); margin-left:6px;}
.day-s {font-size:13px; font-weight:700; color:var(--text-secondary); min-height:20px;}
.pill {position:relative; display:inline-grid; place-items:center; width:56px; height:28px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; flex:none;}
.pill svg {position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.pill rect {fill:none; stroke-width:2;}
.pill .bg {stroke:var(--well-strong);}
.pill .fg {stroke:var(--accent); stroke-linecap:round; stroke-dasharray:var(--p, 0) 100; transition:stroke-dasharray .4s var(--ease-quick);}
.pill .ic {position:relative; width:14px; height:14px; stroke-width:2.4;}
.strip {display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); margin:8px -8px 12px;}
.cell {display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0; border-radius:12px; min-height:68px;}
.cell-w {font-size:11px; font-weight:700; color:var(--text-tertiary); line-height:16px;}
.cell-n {display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:17px; font-weight:600; border:1.5px solid transparent;}
.cell.today .cell-n {border-color:var(--text-primary);}
.cell[aria-pressed=true] .cell-n {background:var(--accent); color:var(--text-inverse); border-color:var(--accent);}
.marks {display:flex; gap:3px; height:8px; align-items:center;}
.marks .dot {width:5px; height:5px; animation:fade .2s;}
.marks .ic {width:10px; height:10px; stroke-width:2.6; color:var(--text-tertiary);}
button.cell:hover .cell-n {background:var(--accent-tint);}
button.cell[aria-pressed=true]:hover .cell-n {background:var(--accent);}

/* Lists, rows and the ring */
.well {background:var(--well); border-radius:12px; padding:4px 12px; margin-bottom:12px;}
.lh {display:flex; align-items:center; gap:6px; min-height:36px; font-size:13px; font-weight:700; color:var(--text-secondary);}
.lh .k {font-weight:600;}
.lh .dot {background:var(--danger); width:6px; height:6px;}
.lh .re {margin-left:auto; display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:999px; background:var(--well-strong); color:var(--text-primary);}
.row {position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:6px; align-items:start; padding:6px 0; overflow:hidden;}
.row::after {content:''; position:absolute; left:42px; right:0; bottom:0; border-bottom:1px solid var(--hairline);}
.well .row::after {border-color:var(--border);}
.row:last-child::after {display:none;}
.ring {position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex:none;}
.ring::before {content:''; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--text-tertiary); box-sizing:border-box; grid-area:1 / 1;}
.ring .f {grid-area:1 / 1; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--text-inverse); transform:scale(.4); opacity:0; transition:transform .4s var(--ease-quick), opacity .4s var(--ease-quick);}
.ring .f .ic {width:12px; height:12px; stroke-width:3;}
.done .ring .f {transform:none; opacity:1;}
button.ring:hover::before {background:var(--accent-tint);}
.row-b {padding-top:7px; min-width:0;}
.row-t {font-size:15px; line-height:22px; transition:color .2s; overflow-wrap:anywhere;}
.done .row-t {text-decoration:line-through; color:var(--text-secondary);}
.meta {display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:13px; line-height:20px; color:var(--text-secondary);}
.meta .pj {color:var(--ink); font-weight:700;}
.meta .ic {width:14px; height:14px;}
.meta .g, .meta .pj {display:inline-flex; align-items:center; gap:3px;}
.ic.fd {width:13px; height:13px; stroke-width:2;}
.leaving {transition:.53s var(--ease-standard); transition-property:height, opacity, padding; opacity:0; padding-block:0;}
.fold {display:flex; align-items:center; gap:6px; min-height:40px; margin-top:8px; padding:0 10px; border-radius:8px; font-size:13px; font-weight:700; color:var(--text-secondary);}
.fold .ic {width:14px; height:14px; transition:transform .2s;}
.fold[aria-expanded=true] .ic {transform:rotate(90deg);}
.fold:hover {background:var(--accent-tint);}
.empty {display:grid; justify-items:center; gap:4px; text-align:center; padding:40px 16px;}
.empty .ic {width:30px; height:30px; color:var(--text-tertiary); stroke-width:1.5; margin-bottom:8px;}
.empty b {font-size:17px;}
.empty span {font-size:15px; color:var(--text-secondary);}
.swap {animation:fade .16s;}
@keyframes fade {from {opacity:0;}}

/* Feature blocks: a pane and a list */
.feat {grid-template-columns:minmax(0,1fr);}
.pane {position:relative; background:var(--surface-sunken); min-height:520px; display:grid; place-items:center; padding:32px var(--gutter); overflow:hidden;}
.scene {width:100%; max-width:440px; display:grid; justify-items:center; gap:12px;}
.items {order:2;}
.items li + li {border-top:1px solid var(--border);}
.item {position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:14px 24px; text-align:left; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3; color:var(--text-secondary);}
.item .ic {color:var(--text-tertiary);}
.item[aria-expanded=true] {color:var(--text-primary);}
.item[aria-expanded=true] .ic {color:var(--text-primary); stroke-width:2.4;}
.item[aria-expanded=true]::before {content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px; background:var(--accent);}
.item:hover {color:var(--text-primary);}
.line {padding:0 24px 18px 54px; font-size:15px; color:var(--text-secondary);}
.ptag {display:inline-flex; align-items:center; height:20px; padding:0 8px; margin-left:4px; border-radius:999px; background:color-mix(in srgb, var(--premium-gold) 16%, transparent); color:var(--premium-gold-text); font-size:12px; font-weight:800; letter-spacing:.04em;}
@media (min-width:960px) {
  .feat {grid-template-columns:58fr 42fr;}
  .feat.rev {grid-template-columns:42fr 58fr;}
  .feat.rev .pane {order:3;}
  .pane {min-height:600px;}
  .win {height:724px;}
  .items {align-self:stretch; display:flex; flex-direction:column; justify-content:center;}
}

/* The stills */
.card {width:100%; background:var(--background); border:1px solid var(--border); border-radius:16px; padding:12px 16px; text-align:left;}
.card h3 {font-size:13px; color:var(--text-secondary); margin:0 0 4px;}
.menu {width:min(100%, 300px); background:var(--surface-elevated); border:1px solid var(--border); border-radius:12px; padding:6px; font-size:15px; text-align:left;}
.menu div {display:flex; align-items:center; gap:8px; min-height:36px; padding:0 10px; border-radius:8px;}
.menu .on {background:var(--accent-tint); font-weight:700;}
.menu .on .ic:last-child {margin-left:auto; stroke-width:2.4;}
.cap {font-size:13px; color:var(--text-secondary); text-align:center;}
.notif {width:min(100%, 360px); display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:12px 14px; border-radius:22px; background:color-mix(in srgb, var(--surface-elevated) 88%, transparent); border:1px solid var(--border); text-align:left; font-size:15px; line-height:1.35;}
.notif .tile {width:38px; height:38px; grid-row:span 2; border-radius:9px;}
.notif b {font-weight:700;}
.notif time {font-size:13px; color:var(--text-secondary);}
.notif p {grid-column:2 / 4; color:var(--text-primary);}
.lock {display:grid; justify-items:center; gap:12px; width:100%;}
.lock-t {font-size:56px; font-weight:700; letter-spacing:-.03em; line-height:1;}
.cols {display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;}
.cols .card {min-height:220px; padding:10px 12px;}
.cols > .go {grid-column:1 / -1; justify-self:center;}
.caps {display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.cap-p {display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:999px; background:rgba(var(--rgb, 0, 0, 0), var(--fill)); color:var(--ink, var(--text-secondary)); font-size:13px; font-weight:700;}
.cap-p.on {background:var(--accent); color:var(--text-inverse);}
.mic {display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--voice); color:#fff;}
.mic .ic {color:#fff;}
.stat {display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;}
.stat .card b {display:block; font-size:28px; font-weight:800; letter-spacing:-.02em;}
/* Inbox, Projects, Block apps */
.on .k {opacity:.66;}
.pgrid {display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:4px 0 16px;}
.pcard {display:flex; flex-direction:column; min-height:124px; padding:14px 16px; border-radius:16px; background:rgba(var(--rgb), calc(var(--fill) * .7)); font-size:17px; font-weight:700;}
.pcard b {display:flex; justify-content:space-between; margin-bottom:auto; font-size:28px; line-height:1;}
.pcard i {width:22px; height:22px; padding:2.5px; border-radius:50%; border:1.5px solid var(--ink); background:conic-gradient(var(--ink) calc(var(--p) * 1%), #0000 0) content-box;}
.pcard .desc {display:flex; align-items:center; gap:5px; font-weight:500;}
.pcard .dot {width:5px; height:5px; background:var(--danger);}
.nop {display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 14px; border-radius:18px; background:var(--well); font-size:15px; font-weight:600;}
.nop i {width:18px; height:18px; border-radius:50%; border:1.5px dashed var(--text-tertiary);}
.nop .n {margin-left:auto; color:var(--text-secondary);}
.nop .ic {color:var(--text-tertiary);}
/* Focus setup: one list of rows (2.2) */
.slist {width:100%; max-width:320px; padding:0 14px; border-radius:18px; background:var(--background); border:1px solid var(--border); text-align:left;}
.card .slist {max-width:none; margin-bottom:8px; background:var(--well); border:0;}
.slist div {display:flex; align-items:center; gap:10px; min-height:48px; font-size:15px; font-weight:600;}
.slist div + div {border-top:1px solid var(--hairline);}
.slist .v {margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); font-weight:500;}
.slist .ch {width:14px; height:14px; color:var(--text-tertiary);}
.slist .gold {width:14px; height:14px; margin-left:-4px;}
.presets[hidden] + .slist {display:none;}
.mile {grid-column:1 / -1;}
.mile h3 span {font-weight:500;}
.mile p {display:flex; gap:8px;}
.coin {display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--text-primary); color:var(--text-inverse); font-size:13px; font-weight:800;}
.coin.next {color:var(--text-primary); background:radial-gradient(var(--well) 62%, #0000 64%), conic-gradient(var(--text-primary) 40%, var(--well-strong) 0);}
.sch {display:flex; align-items:center; gap:12px; padding:10px 0;}
.sch + .sch {border-top:1px solid var(--hairline);}
.sch div {margin-right:auto;}
.lvl {display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; margin-top:4px; border-radius:999px; background:var(--surface-sunken); font-size:12px; font-weight:700; color:var(--text-tertiary);}
.lvl .ic {width:12px; height:12px;}
.tog {width:44px; height:26px; padding:2px 2px 2px 20px; border-radius:999px; background:#34c759; flex:none;}
.tog::after {content:''; display:block; height:100%; border-radius:50%; background:#fff;}

/* Focus */
.fring {position:relative; width:210px; height:210px; display:grid; place-items:center;}
.fring svg {position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.fring circle {fill:none; stroke-width:6;}
.fring .bg {stroke:var(--well-strong);}
.fring .fg {stroke:var(--accent); stroke-linecap:round; stroke-dasharray:var(--p, 100) 100; transition:stroke-dasharray .4s var(--ease-quick);}
.ftime {font-size:44px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.presets {display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.presets button, .presets span {display:inline-flex; align-items:center; gap:4px; min-width:52px; height:36px; justify-content:center; padding:0 12px; border-radius:999px; border:1px solid var(--border-strong); font-size:15px; font-weight:700;}
.presets [aria-pressed=true] {background:var(--accent); color:var(--text-inverse); border-color:var(--accent);}
.presets span {color:var(--text-secondary);}
.gold {color:var(--premium-gold-text);}
.go {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 22px; border-radius:999px; background:var(--accent); color:var(--text-inverse); font-weight:700; font-size:15px;}
.go.alt {background:var(--well-strong); color:var(--text-primary);}
.ctl {display:flex; gap:8px; transition:opacity .6s;}
.idle .ctl {opacity:0;}

.tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:28px;}
.tabs span {display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; background:var(--well); color:var(--text-secondary); font-size:14px; font-weight:700;}
.props {display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0;}
.props.nowrap {flex-wrap:nowrap; overflow:hidden; contain:inline-size; margin-right:-16px;} .nowrap > * {flex:none;}
.props > span:not(.cap-p):not(.mic) {display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; background:var(--well); font-size:13px; font-weight:700; color:var(--text-secondary);}
.props .mic {margin-left:auto;}
.desc {font-size:13px; color:var(--text-secondary);}
.live {display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px 12px; border-radius:22px;}
.live .tile {width:32px; height:32px;} .live .lt {display:flex; align-items:center; gap:8px;} .live .ftime {font-size:28px;} .live .caps {grid-column:1 / -1; justify-content:flex-start;}
.story {display:grid; place-items:center; aspect-ratio:9 / 16; max-height:200px; justify-self:center;}
.story .fring {width:90px; height:90px; font-size:13px; font-weight:700;}
.fring.sm {width:36px; height:36px;}
.fring.sm circle {stroke-width:10;}
.mgrid {row-gap:2px; margin-top:8px;} .mgrid .cell {min-height:0;} .mgrid .cell-w {text-align:center;}
.bshape {display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; margin:0; border-radius:8px; font-size:13px; font-weight:700; color:var(--text-secondary);}

/* Small things, steps, Premium */
.cells {grid-template-columns:minmax(0,1fr);}
@media (min-width:600px) {.cells {grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (min-width:960px) {.cells {grid-template-columns:repeat(3, minmax(0,1fr));}}
.cells > * {padding:28px var(--gutter);}
@media (min-width:600px) {.cells > * {padding:32px;}}
.cells h3 {font-size:17px; font-weight:700; letter-spacing:-.01em; margin:14px 0 6px;}
.cells p {font-size:15px; color:var(--text-secondary);}
.it {display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--well); border:1px solid var(--border); color:var(--text-primary);}
.num {display:block; font-size:40px; font-weight:800; color:var(--text-tertiary); letter-spacing:-.03em; line-height:1;}
.mini {display:flex; align-items:center; gap:8px; min-height:56px; margin-top:20px;}
.tour {display:flex; gap:5px;} .tour i {width:6px; height:6px; border-radius:50%; background:var(--text-tertiary);}
.tour i + i {background:var(--border-strong);}
.after {text-align:center; margin-top:32px; font-size:15px; color:var(--text-secondary);}
.prem .kicker {color:var(--premium-gold-text);}
.plans {grid-template-columns:minmax(0,1fr);}
@media (min-width:960px) {.plans {grid-template-columns:2fr 3fr;}}
.plans > div {padding:32px var(--gutter);}
@media (min-width:600px) {.plans > div {padding:40px;}}
.plans h3 {font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:16px;}
.free li {display:flex; gap:10px; padding:7px 0; font-size:16px;}
.free .ic {color:var(--text-tertiary); margin-top:3px;}
.adds li {display:grid; grid-template-columns:22px 1fr; gap:2px 12px; padding:10px 0;}
.adds .ic {color:var(--premium-gold); margin-top:3px; width:20px; height:20px;}
.adds b {font-size:17px;} .adds span {grid-column:2; font-size:15px; color:var(--text-secondary);}
.trial {max-width:640px; margin:32px auto 24px; text-align:center; font-size:16px; color:var(--text-secondary);}
.trial b {color:var(--text-primary);}
.center {display:flex; justify-content:center;}

/* FAQ, closing call, footer */
.faq {max-width:760px; margin:0 auto; border-block:1px solid var(--border);}
.faq details + details {border-top:1px solid var(--border);}
.faq summary {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:16px 4px; cursor:pointer; list-style:none; font-size:17px; font-weight:700;}
.faq summary::-webkit-details-marker {display:none;}
.faq summary .ic {color:var(--text-tertiary);}
.faq .minus, .faq [open] .plus {display:none;}
.faq [open] .minus {display:block;}
.faq details > div {padding:0 4px 20px; font-size:16px; color:var(--text-secondary);}
.faq details > div p + p {margin-top:10px;}
.close {text-align:center; padding-block:96px;}
@media (min-width:960px) {.close {padding-block:128px;}}
.close .actions {margin-top:32px;}
footer {position:relative; z-index:2; background:var(--surface-sunken); border-top:1px solid var(--border); padding:48px 0 32px; font-size:14px; font-weight:600;}
.fgrid {display:grid; grid-template-columns:1fr 1fr; gap:32px 24px;}
.fgrid .fb {grid-column:1 / -1;}
@media (min-width:768px) {.fgrid {grid-template-columns:2fr 1fr 1fr;} .fgrid .fb {grid-column:auto;}}
.fb p {color:var(--text-secondary); margin:12px 0; max-width:32ch;}
footer h2 {font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:8px;}
footer li a, .social, .fbot a {display:inline-flex; align-items:center; gap:8px; min-height:36px; min-width:36px; text-decoration:none; color:var(--text-secondary);}
footer a:hover {color:var(--text-primary);}
.fbot {display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--text-tertiary);}
.fbot a {color:var(--text-secondary); font-weight:700; text-decoration:none;}
.prose a, .after a, .cells a, .trial a {white-space:nowrap; color:var(--text-primary); font-weight:700; text-underline-offset:3px;}

/* No JS: every sub-feature's line shows, and the demo says what it is. */
html:not(.js) .line[hidden] {display:block !important;}
.item:disabled {cursor:default;}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {animation:none !important; transition-duration:0s !important;}
  .marks .dot, .swap {animation:fade .2s !important;}
  .idle .ctl {opacity:1;}
}
@media (forced-colors:active) {
  .ring::before, .pill, .chip, .cell-n, .btn-web, .presets button, .tag, .it {outline:1px solid CanvasText;}
}