/* ScubaOS site — visual system per DESIGN.md. Dark-first, aqua accent, technical grotesque + tabular mono. */

:root {
  --bg:        #0B1117;
  --surface:   #121B23;
  --surface-2: #1A2530;
  --hairline:  #26333F;
  --text:      #EAF1F4;
  --text-2:    #94A6B3;
  --text-3:    #5E7180;
  --accent:    #34D6C4;
  --accent-dim:#1E8C82;
  --caution:   #F2B544;

  --btn-fg:    #08231F;   /* text on a primary (accent) button */
  --nav-bg:    rgba(11,17,23,0.82);

  --maxw: 1080px;
  --radius: 12px;
  --radius-sm: 8px;
  --ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Deliberate light palette (DESIGN.md §10): warm off-white, the aqua deepened for contrast on light. */
  --l-bg:        #F3F1EB;
  --l-surface:   #FCFBF7;
  --l-surface-2: #EBE7DE;
  --l-hairline:  #DCD7CC;
  --l-text:      #16202A;
  --l-text-2:    #4A5A66;
  --l-text-3:    #7C8893;
  --l-accent:    #0E8C7E;
  --l-accent-dim:#0B6F64;
}

/* Dark is the default and the showcase (DESIGN.md §10). Light is a deliberate opt-in via the toggle, which
   sets data-theme="light" and persists it; the OS preference is intentionally not auto-applied. */
:root[data-theme="light"] { --bg:var(--l-bg); --surface:var(--l-surface); --surface-2:var(--l-surface-2);
  --hairline:var(--l-hairline); --text:var(--l-text); --text-2:var(--l-text-2); --text-3:var(--l-text-3);
  --accent:var(--l-accent); --accent-dim:var(--l-accent-dim); --btn-fg:#FFFFFF; --nav-bg:rgba(243,241,235,0.85); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- numerals: tabular mono, dive-computer style ---- */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.unit { font-family: var(--mono); font-size: 0.62em; color: var(--text-2); letter-spacing: 0.12em;
        text-transform: uppercase; margin-left: 0.35em; vertical-align: 0.1em; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); font-weight: 600; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline); color: var(--text-2);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-3); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--text); }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--text-2); font-size: 15px; }
.nav-links a:hover { color: var(--text); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 600; font-size: 15px;
  padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.btn-primary { background: var(--accent); color: var(--btn-fg); }
.btn-primary:hover { color: var(--btn-fg); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); }

/* ---- hero ---- */
.hero { position: relative; padding: 84px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.eyebrow { color: var(--accent); }
.hero h1 { font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 18px; }
.hero p.lede { font-size: 19px; color: var(--text-2); max-width: 30ch; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; color: var(--text-3); font-size: 13px; }

/* the dive-profile hero card — the one place a soft accent glow is allowed */
.profile-card {
  position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.profile-card::before {
  content: ""; position: absolute; inset: -40% 10% auto 10%; height: 220px; z-index: 0;
  background: radial-gradient(60% 80% at 50% 100%, rgba(52,214,196,0.16), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
.profile-card > * { position: relative; z-index: 1; }
.profile-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.profile-site { font-weight: 600; }
.profile-date { color: var(--text-3); font-size: 13px; }
.stat-row { display: flex; gap: 28px; margin-top: 18px; }
.stat .big { font-size: 30px; font-weight: 600; }
.stat .big.hero-accent { color: var(--accent); }

/* ---- sections ---- */
.section { padding: 64px 0; border-top: 1px solid var(--hairline); }
.section h2 { font-size: 30px; letter-spacing: -0.01em; margin: 8px 0 14px; }
.section .intro { color: var(--text-2); max-width: 56ch; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px; }
.card .ic { color: var(--accent); margin-bottom: 14px; }
.card h3 { font-size: 17px; margin: 0 0 6px; }
.card p { color: var(--text-2); font-size: 14.5px; margin: 0; }

/* compare + faq */
.compare { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; }
.compare .card h3 { color: var(--accent); font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; }
.compare .card p + p { margin-top: 10px; }
.compare .card .vs { color: var(--text-3); font-size: 13px; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin-top: 32px; }
.faq-item { border-top: 1px solid var(--hairline); padding-top: 16px; }
.faq-item h3 { font-size: 16px; margin: 0 0 6px; }
.faq-item p { color: var(--text-2); font-size: 14.5px; margin: 0; }
.faq-item a { text-decoration: underline; text-underline-offset: 2px; }

/* values strip */
.values { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 8px; }
.values li { list-style: none; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.values .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.values ul { display: contents; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--hairline); padding: 48px 0 40px; margin-top: 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 12px; font-weight: 600; }
.footer a { display: block; color: var(--text-2); font-size: 14.5px; padding: 4px 0; }
.footer a:hover { color: var(--text); }
.footer .fine { color: var(--text-3); font-size: 13px; margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.footer .brand { margin-bottom: 12px; }
.footer .blurb { color: var(--text-3); font-size: 14px; max-width: 34ch; }

/* ---- legal / prose pages ---- */
.legal-head { padding: 56px 0 8px; }
.legal-head .label { margin-bottom: 10px; display: block; }
.legal-head h1 { font-size: 36px; letter-spacing: -0.02em; margin: 0; }
.legal-head .updated { color: var(--text-3); font-size: 14px; margin-top: 10px; }
.prose { max-width: 72ch; padding: 24px 0 72px; }
.prose h2 { font-size: 22px; margin: 40px 0 12px; letter-spacing: -0.01em; }
.prose h3 { font-size: 17px; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-2); }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.placeholder { color: var(--caution); font-family: var(--mono); font-size: 0.92em; }
.callout {
  background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius-sm); padding: 16px 18px; margin: 22px 0; color: var(--text-2); font-size: 14.5px;
}
.legal-index { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; padding: 24px 0 64px; }
.legal-index a.card { display: block; }
.legal-index a.card:hover { border-color: var(--text-3); }
.legal-index .card h3 { color: var(--text); }

.backlink { color: var(--text-3); font-size: 14px; padding: 28px 0 0; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: 38px; }
  .hero p.lede { max-width: none; }
  .features, .compare { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .legal-index { grid-template-columns: 1fr; }
  .nav-links { gap: 16px; }
  .nav-links .hide-sm { display: none; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stat-row { gap: 20px; }
  .hero h1 { font-size: 32px; }
  /* On phones the horizontal nav can't fit every link on one row, so wrap to two: the brand on top, the
     links beneath — nothing gets pushed off-screen (previously "Plans" was cut off). */
  .nav-inner { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 6px; }
  .nav-links { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 18px; }
  .nav-links a { font-size: 15px; }
  .theme-toggle { display: none; }
}

/* ============================================================= atmosphere ===== */
/* Underwater depth: light at the surface fading to the deep. Crafted, not photographic. */
.depth-hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% -8%, #173640 0%, #0E2530 26%, #0B1A23 48%, #0A121A 70%, #070D12 100%);
  border-bottom: 1px solid var(--hairline);
}
:root[data-theme="light"] .depth-hero { /* keep the hero deep even in light mode — it's the "in the water" moment */
  background: radial-gradient(120% 80% at 50% -8%, #173640 0%, #0E2530 26%, #0B1A23 48%, #0A121A 70%, #070D12 100%);
}
:root[data-theme="light"] .depth-hero .eyebrow { color: #4FE3D2; }
:root[data-theme="light"] .depth-hero h1 { color: #EAF1F4; }
:root[data-theme="light"] .depth-hero .lede,
:root[data-theme="light"] .depth-hero .hero-note { color: #A6B6C2; }
:root[data-theme="light"] .depth-hero .btn-ghost { color: #EAF1F4; border-color: #2b3a45; }
.rays { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bubbles { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; }
.bubbles span { position: absolute; display: block; border-radius: 50%; border: 1px solid rgba(127,178,217,0.35); }
.depth-hero .wrap { position: relative; z-index: 1; }
/* a slim depth scale, like a gauge, down the hero edge */
.depthscale { position: absolute; top: 96px; bottom: 40px; left: 18px; width: 1px; background: var(--hairline); z-index: 1; opacity: 0.7; }
.depthscale span { position: absolute; left: 8px; transform: translateY(-50%); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; color: var(--text-3); white-space: nowrap; }
.depthscale span::before { content: ""; position: absolute; left: -8px; top: 50%; width: 5px; height: 1px; background: var(--text-3); }
@media (max-width: 980px) { .depthscale { display: none; } }

/* ============================================================= device mockups ===== */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.showcase.reverse .showcase-media { order: 2; }
.showcase-copy .label { display: block; margin-bottom: 12px; }
.showcase-copy h2 { font-size: 28px; letter-spacing: -0.01em; margin: 0 0 14px; }
.showcase-copy p { color: var(--text-2); max-width: 46ch; }
.showcase-list { list-style: none; padding: 0; margin: 18px 0 0; }
.showcase-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); padding: 6px 0; font-size: 15px; }
.showcase-list svg { color: var(--accent); flex: none; margin-top: 3px; }
.showcase-media { display: flex; justify-content: center; }

/* phone — its screen re-declares the dark app tokens, so the mockup stays the real (dark) app even in site light mode */
.phone {
  width: 268px; border-radius: 38px; padding: 9px;
  background: linear-gradient(160deg, #1b2730, #0a1015);
  border: 1px solid #28333d; box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4);
}
.phone .screen {
  --bg:#0B1117; --surface:#121B23; --surface-2:#1A2530; --hairline:#26333F;
  --text:#EAF1F4; --text-2:#94A6B3; --text-3:#5E7180; --accent:#34D6C4; --caution:#F2B544; --safe:#5BD17B;
  background: var(--bg); color: var(--text); border-radius: 30px; overflow: hidden;
  aspect-ratio: 9 / 18.5; position: relative; display: flex; flex-direction: column;
}
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px;
  font-weight: 600; font-size: 14px; color: var(--text); }
.app-top .muted { color: var(--accent); font-weight: 600; font-size: 13px; }
.app-body { padding: 0 16px 16px; overflow: hidden; }
.m-site { font-weight: 600; font-size: 16px; }
.m-sub { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.m-profile { width: 100%; height: 96px; margin: 14px 0 10px; }
.m-stats { display: flex; gap: 16px; }
.m-stats .s .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.m-stats .s .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; margin-top: 2px; }
.m-stats .s .v.a { color: var(--accent); }
.m-stats .s .v .u { font-size: 0.55em; color: var(--text-2); letter-spacing: 0.1em; }
.m-thumbs { display: flex; gap: 6px; margin-top: 14px; }
.m-thumbs i { display: block; width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--hairline);
  background: linear-gradient(150deg, #16323b, #0f2530); }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-size: 11px; color: var(--text-2); border: 1px solid var(--hairline); background: var(--surface-2);
  border-radius: 50px; padding: 4px 10px; }
.chip.on { color: var(--accent); border-color: var(--accent); background: rgba(52,214,196,0.10); }
.m-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.m-row:last-child { border-bottom: 0; }
.m-row .k { color: var(--text-2); font-size: 13px; }
.m-row .vv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); }
.m-row .vv.a { color: var(--accent); }
.m-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; }
.m-author { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.m-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; font-size: 14px; }
.m-author .nm { font-weight: 600; font-size: 13px; }
.m-author .ct { color: var(--text-3); font-size: 11px; }
.m-wordmark { display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--hairline); }
.m-wordmark b { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: 0.3px; }
.m-wordmark span { color: var(--text-3); font-size: 11px; }
.m-actions { display: flex; gap: 18px; margin-top: 12px; color: var(--text-2); font-size: 12px; }
.m-actions b { color: var(--text-2); font-weight: 500; }
.m-gas { display: flex; gap: 8px; margin: 12px 0 6px; }

/* brand mark in hero */
.brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-mark img { width: 46px; height: 46px; border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.brand-mark .wm { font-weight: 700; letter-spacing: 0.5px; font-size: 20px; color: var(--text); }

@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: 32px; }
  .showcase.reverse .showcase-media { order: 0; }
  .showcase-media { order: -1; }
  .showcase-copy p { max-width: none; }
}

/* hero dive-profile SVG — themed via tokens so it adapts to light/dark */
.p-grid line { stroke: var(--hairline); }
.p-fill { fill: var(--accent); fill-opacity: 0.07; }
.p-line { stroke: var(--accent); }
.p-dot  { fill: var(--accent); }

/* ---- print: clean, light, legal-doc friendly ---- */
@media print {
  :root { --bg:#fff; --surface:#fff; --surface-2:#f4f4f2; --hairline:#cccccc;
          --text:#111111; --text-2:#333333; --text-3:#555555; --accent:#0a6a5e; --nav-bg:#fff; }
  body { background:#fff; color:#000; }
  .nav, .footer, .theme-toggle, .hero-cta, .backlink { display: none !important; }
  .profile-card { box-shadow: none; }
  .profile-card::before { display: none; }
  .callout { border: 1px solid #bbb; }
  .prose { max-width: none; }
  a { color: #000; text-decoration: underline; }
  /* show the destination of links inside legal prose */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .placeholder { color: #000; background: #f1e3bf; padding: 0 2px; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ============================================================= multi-page chrome ===== */
/* Brand lockup uses the standalone mask mark (the logo), not the rounded app icon. Two variants are
   shipped and swapped by theme so the trace keeps contrast on both the dark and the warm-light nav. */
.brand .mark { width: 30px; height: 30px; border-radius: 0; box-shadow: none; }
.brand .mark-light { display: none; }
:root[data-theme="light"] .brand .mark-dark { display: none; }
:root[data-theme="light"] .brand .mark-light { display: inline-block; }
.nav-links a.active { color: var(--text); }

/* Plus / Pro markers — Plus is an outline, Pro is filled (a clear visual hierarchy of paid tiers). */
.badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  border: 1px solid transparent; vertical-align: middle; line-height: 1.4; white-space: nowrap; }
.badge-plus { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.badge-pro  { color: var(--btn-fg); background: var(--accent); border-color: var(--accent); }
h1 .badge, h2 .badge, h3 .badge, li .badge { margin-left: 8px; transform: translateY(-1px); }

/* ---- compact page hero for the feature pages (the home hero stays the tall one) ---- */
.page-hero { padding: 64px 0 56px; }
.page-hero .hero-grid { align-items: center; }
.page-hero h1 { font-size: 40px; line-height: 1.06; }
.page-hero .lede { max-width: 34ch; }
.eyebrow.label { display: inline-block; margin-bottom: 4px; }

/* a large, faint logo mark watermark behind a hero — atmospheric, used sparingly */
.hero-mark { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 460px;
  max-width: 52%; opacity: 0.05; z-index: 0; pointer-events: none; filter: saturate(0.6); }
@media (max-width: 860px) { .hero-mark { display: none; } }

/* ---- closing call-to-action band ---- */
.cta { border-top: 1px solid var(--hairline); position: relative; overflow: hidden;
  background: radial-gradient(120% 130% at 50% -20%, #12303a 0%, #0c1d26 40%, var(--bg) 78%); }
:root[data-theme="light"] .cta { background: radial-gradient(120% 130% at 50% -10%, #e7efe9 0%, var(--surface) 55%, var(--bg) 100%); }
.cta-inner { text-align: center; padding: 72px 0; position: relative; z-index: 1; }
.cta-inner img.mark { width: 56px; height: 56px; margin: 0 auto 20px; }
:root[data-theme="light"] .cta-inner .mark-dark { display: none; }
.cta-inner .mark-light { display: none; }
:root[data-theme="light"] .cta-inner .mark-light { display: block; }
.cta-inner h2 { font-size: 32px; letter-spacing: -0.01em; margin: 0 0 12px; }
.cta-inner p { color: var(--text-2); max-width: 46ch; margin: 0 auto 26px; }
.cta-inner .hero-cta { justify-content: center; }

/* ---- "explore" cards (home → feature pages) ---- */
.explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.explore a.tile { display: block; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px; transition: border-color 180ms ease, transform 180ms ease; }
.explore a.tile:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.explore .tile .label { display: block; margin-bottom: 10px; }
.explore .tile h3 { font-size: 18px; margin: 0 0 6px; color: var(--text); }
.explore .tile p { color: var(--text-2); font-size: 14.5px; margin: 0 0 14px; }
.explore .tile .go { color: var(--accent); font-size: 14px; font-weight: 600; }
@media (max-width: 860px) { .explore { grid-template-columns: 1fr; } }

/* ---- spec rows: an instrument-style key/value list for feature detail ---- */
.specs { margin-top: 28px; border-top: 1px solid var(--hairline); }
.specs .row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0;
  border-bottom: 1px solid var(--hairline); align-items: baseline; }
.specs .row .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); }
.specs .row .v { color: var(--text-2); font-size: 15px; }
.specs .row .v strong { color: var(--text); font-weight: 600; }
@media (max-width: 620px) { .specs .row { grid-template-columns: 1fr; gap: 4px; } }

/* ---- three-up feature cards with a lead icon ---- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.trio .card .ic { color: var(--accent); margin-bottom: 14px; display: block; }
.trio .card h3 { font-size: 16px; margin: 0 0 6px; }
.trio .card p { color: var(--text-2); font-size: 14.5px; margin: 0; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* ============================================================= pricing ===== */
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 26px 24px; display: flex; flex-direction: column; position: relative; }
.plan.featured { border-color: var(--accent-dim); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.plan.featured::before { content: attr(data-flag); position: absolute; top: -11px; left: 24px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--accent); padding: 3px 9px; border-radius: 5px; }
.plan .tier { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
.plan .price { margin: 12px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.plan .price .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; color: var(--text); }
.plan .price .per { color: var(--text-3); font-size: 13px; }
.plan .tagline { color: var(--text-2); font-size: 14px; margin: 8px 0 18px; min-height: 40px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; padding: 7px 0; }
.plan ul li svg { color: var(--accent); flex: none; margin-top: 3px; }
.plan .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) { .plan-cards { grid-template-columns: 1fr; } }

/* feature comparison matrix */
.ptable { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 14.5px; }
.ptable th, .ptable td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--hairline); }
.ptable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3);
  font-weight: 600; border-bottom: 1px solid var(--hairline); }
.ptable thead th:not(:first-child), .ptable td:not(:first-child) { text-align: center; width: 96px; }
.ptable tbody th { font-weight: 500; color: var(--text); }
.ptable tbody tr:hover { background: var(--surface); }
.ptable .grp td { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); padding-top: 26px; border-bottom: 1px solid var(--hairline); }
.ptable td.y { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2334D6C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; }
.ptable td.n { color: var(--text-3); }
.ptable td.n::after { content: "–"; color: var(--text-3); }
.ptable td.note { font-family: var(--mono); font-size: 12px; color: var(--text-2); letter-spacing: -0.01em; }
@media (max-width: 620px) {
  .ptable th, .ptable td { padding: 11px 8px; font-size: 13px; }
  .ptable thead th:not(:first-child), .ptable td:not(:first-child) { width: 54px; }
}

/* ---- a section that gives a screenshot/mockup room to breathe, centered ---- */
.center { text-align: center; }
.center .intro { margin-left: auto; margin-right: auto; }
.gallery { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* hero brand lockup uses the transparent mask mark (logo), not the app-icon tile */
.brand-mark img.mark { width: 48px; height: 48px; border-radius: 0; box-shadow: none; }
.brand-mark img.mark-light { display: none; }
:root[data-theme="light"] .depth-hero .brand-mark img.mark-dark { display: inline-block; } /* hero stays dark → keep white-trace mark */

/* ============================================================= announcement + download ===== */
/* slim sitewide "coming soon" bar, sits above the sticky nav and scrolls away with the page */
.announce { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 24px; font-size: 13px; color: var(--text-2); text-align: center; }
.announce .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--accent); padding: 2px 7px; border-radius: 5px; flex: none; }
.announce a { color: var(--accent); }
.announce a:hover { color: var(--text); }
@media (max-width: 560px) {
  .announce .hide-sm { display: none; }
  /* Normal centred text block so the promo line wraps instead of being clipped on the right. */
  .announce .wrap { display: block; text-align: center; background: #ff0055; padding: 8px 16px; line-height: 1.55; }
  .announce .tag { display: inline-block; margin-right: 6px; vertical-align: middle; }
}

/* store / download buttons — shown in a "coming soon" state until release */
.stores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.store-btn { display: inline-flex; align-items: center; gap: 12px; padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); }
a.store-btn:hover { color: var(--text); border-color: var(--text-3); transform: translateY(-1px);
  transition: transform 180ms ease, border-color 180ms ease; }
.store-btn svg { flex: none; color: var(--text); }
.store-btn .s-l { display: flex; flex-direction: column; line-height: 1.18; text-align: left; }
.store-btn .s-l small { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.store-btn .s-l b { font-size: 15px; font-weight: 600; }
.store-btn.soon { opacity: 0.92; }
.store-btn .soon-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px; padding: 1px 5px; align-self: center; }
.stores-note { color: var(--text-3); font-size: 13px; margin-top: 18px; }
.stores-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- gallery filmstrip: scrollable row of device mockups ---- */
.filmstrip { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 40px -24px 0; padding: 6px 24px 22px; }
.filmstrip .phone { flex: none; scroll-snap-align: center; }
.filmstrip .cap { text-align: center; }
.filmstrip-cap { color: var(--text-3); font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; margin-top: 10px; }
.filmstrip::-webkit-scrollbar { height: 8px; }
.filmstrip::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 50px; }
.filmstrip::-webkit-scrollbar-track { background: transparent; }