/* =========================================================================
   cowork24.net — landing page
   -------------------------------------------------------------------------
   Design note: the product is named for being available around the clock, so
   the page is built on a day/night axis. Light theme is daylight on warm
   paper; dark theme is night on deep ink. The hero carries a 24-hour dial.
   Teal is the working accent, amber is the "sun" counterpoint, used sparingly.

   Fonts are self-hosted. Google Fonts is unreliable from Iran, and a webfont
   that silently fails to load takes the page's whole voice with it.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-var.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-var.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-500.woff2) format('woff2');
}

/* --------------------------------------------------------------- tokens -- */
/* The complete light palette lives on bare :root so the un-stamped default
   (system theme) always resolves. Dark redefines TOKENS ONLY, never rules. */
:root {
  --ground:      #f4f2ec;
  --ground-deep: #e9e6dd;
  --surface:     #fffefb;
  --surface-2:   #f8f6f0;
  --line:        #ddd8cc;
  --line-soft:   #e8e4da;

  --ink:         #12212b;
  --ink-2:       #33454f;
  --muted:       #5f7079;
  --faint:       #8a9aa2;

  --brand:       #0d6c66;
  --brand-deep:  #095049;
  --brand-tint:  #dcece9;
  --brand-glow:  rgba(13,108,102,.16);

  --warm:        #b3651a;
  --warm-tint:   #f7e7d4;

  --shadow-sm: 0 1px 2px rgba(18,33,43,.06), 0 2px 6px rgba(18,33,43,.05);
  --shadow-md: 0 2px 6px rgba(18,33,43,.06), 0 12px 28px rgba(18,33,43,.09);
  --shadow-lg: 0 6px 16px rgba(18,33,43,.08), 0 28px 64px rgba(18,33,43,.13);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.7,.3,1);

  color-scheme: light;
}

/* Dark tokens: applied when the OS says dark AND the user has not explicitly
   chosen light. Written as a media block so the un-stamped default works. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0a1219;
    --ground-deep: #060d12;
    --surface:     #0f1c25;
    --surface-2:   #14242e;
    --line:        #233945;
    --line-soft:   #1a2c36;

    --ink:         #e8f0f3;
    --ink-2:       #c3d4db;
    --muted:       #8ba3ae;
    --faint:       #64818e;

    --brand:       #4ecdc0;
    --brand-deep:  #7fe0d6;
    --brand-tint:  #10352f;
    --brand-glow:  rgba(78,205,192,.18);

    --warm:        #f0aa5c;
    --warm-tint:   #3a2a18;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
    --shadow-lg: 0 6px 16px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);

    color-scheme: dark;
  }
}

/* The explicit toggle must win in both directions. */
:root[data-theme="dark"] {
  --ground:      #0a1219;
  --ground-deep: #060d12;
  --surface:     #0f1c25;
  --surface-2:   #14242e;
  --line:        #233945;
  --line-soft:   #1a2c36;

  --ink:         #e8f0f3;
  --ink-2:       #c3d4db;
  --muted:       #8ba3ae;
  --faint:       #64818e;

  --brand:       #4ecdc0;
  --brand-deep:  #7fe0d6;
  --brand-tint:  #10352f;
  --brand-glow:  rgba(78,205,192,.18);

  --warm:        #f0aa5c;
  --warm-tint:   #3a2a18;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brand); }

img, svg { max-width: 100%; }

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

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 560px) { .wrap { padding-inline: 18px; } }

.eyebrow {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}

.lede { color: var(--muted); font-size: 18.5px; max-width: 62ch; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border-radius: var(--r-sm); z-index: 200;
}
.skip:focus { left: 16px; top: 16px; }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--line-soft); }

.header-in {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display);
  font-weight: 600; font-size: 21px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; flex: none;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; display: block; }
.brand em { font-style: normal; color: var(--brand); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-size: 15px; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 8px 13px; border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Icon button (theme toggle) */
.icon-btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; padding: 0;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .i-sun  { display: none; }
.icon-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .i-sun  { display: block; }
  :root:not([data-theme="light"]) .icon-btn .i-moon { display: none; }
}
:root[data-theme="dark"] .icon-btn .i-sun  { display: block; }
:root[data-theme="dark"] .icon-btn .i-moon { display: none; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-size: 15.5px; font-weight: 600;
  padding: 13px 22px; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 6px var(--brand-glow), 0 10px 26px var(--brand-glow);
}
:root[data-theme="dark"] .btn-primary { color: #05221f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #05221f; }
}
.btn-primary:hover { background: var(--brand-deep); box-shadow: 0 4px 10px var(--brand-glow), 0 16px 38px var(--brand-glow); }

.btn-ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn-sm { padding: 9px 17px; font-size: 14.5px; }

@media (max-width: 900px) { .nav { display: none; } }

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; padding: 72px 0 84px; overflow: hidden; }

/* Ambient ground: a soft dawn glow behind the dial, plus a faint dot grid.
   Both are decorative and sit behind everything at z-index 0. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 720px;
  background:
    radial-gradient(58% 46% at 74% 26%, var(--brand-glow), transparent 68%),
    radial-gradient(38% 32% at 22% 8%, color-mix(in srgb, var(--warm) 13%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 34px 34px;
  opacity: .5;
  mask-image: radial-gradient(72% 58% at 50% 34%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 58% at 50% 34%, #000 0%, transparent 78%);
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px; align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.05rem);
  margin: 18px 0 0;
}
.hero h1 .accent {
  color: var(--brand);
  font-style: italic;
}
.hero .lede { margin-top: 22px; font-size: clamp(17px, 2.2vw, 20px); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px;
  font-size: 14px; color: var(--faint);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

@media (max-width: 940px) {
  .hero { padding: 44px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { order: -1; }
}

/* --------------------------------------------------- hero visual (dial) -- */
/* A 24-hour dial: 24 ticks, a sweeping arc for the current hour, four service
   nodes on the ring, and a glass card in front showing a miniature inbox.
   The sweep is the only continuous motion on the page. */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 420px; }

.dial { width: min(100%, 460px); aspect-ratio: 1; position: relative; }
.dial svg { width: 100%; height: 100%; display: block; overflow: visible; }

.dial-track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dial-tick  { stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; }
.dial-tick.major { stroke: var(--faint); stroke-width: 2; }
.dial-sweep {
  fill: none; stroke: url(#sweepGrad); stroke-width: 3.5; stroke-linecap: round;
  transform-origin: 50% 50%;
  animation: sweep 48s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.dial-core { fill: var(--surface); stroke: var(--line-soft); stroke-width: 1.5; }
.dial-hours {
  font-family: var(--display); font-weight: 600; font-size: 46px;
  fill: var(--ink); text-anchor: middle; dominant-baseline: central;
  letter-spacing: -.02em;
}
.dial-caption {
  font-family: var(--body); font-size: 11.5px; font-weight: 600;
  fill: var(--faint); text-anchor: middle; letter-spacing: .18em;
}

/* Service nodes sitting on the ring */
.node {
  position: absolute; width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  color: var(--brand);
  animation: bob 7s ease-in-out infinite;
}
.node svg { width: 25px; height: 25px; }
.node[data-warm] { color: var(--warm); }
.node:nth-of-type(2) { animation-delay: -1.7s; }
.node:nth-of-type(3) { animation-delay: -3.4s; }
.node:nth-of-type(4) { animation-delay: -5.1s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.node-label {
  position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}

/* Foreground glass card: a miniature of the real inbox */
.mini {
  position: absolute; right: -6px; bottom: 4px; width: min(74%, 296px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 13px; z-index: 3;
}
.mini-head { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.mini-dot:first-child { background: var(--warm); }
.mini-title {
  margin-left: 5px; font-size: 11.5px; font-weight: 600; color: var(--faint);
  letter-spacing: .1em; text-transform: uppercase;
}
.mini-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.mini-row:first-of-type { border-top: 0; }
.mini-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 600; color: var(--brand);
  background: var(--brand-tint);
}
.mini-av[data-warm] { color: var(--warm); background: var(--warm-tint); }
.mini-lines { flex: 1; min-width: 0; display: grid; gap: 5px; }
.mini-l { height: 6px; border-radius: 3px; background: var(--line); }
.mini-l.short { width: 44%; background: var(--line-soft); }
.mini-l.mid   { width: 72%; }
.mini-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }

@media (max-width: 940px) { .hero-visual { min-height: 380px; } .dial { width: min(100%, 400px); } }
@media (max-width: 560px) {
  .hero-visual { min-height: 330px; }
  .dial { width: min(100%, 320px); }
  .node { width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 15px; }
  .node svg { width: 21px; height: 21px; }
  .node-label { display: none; }
  .mini { right: -10px; bottom: -8px; width: min(80%, 250px); }
}

@media (prefers-reduced-motion: reduce) {
  .dial-sweep { animation: none; }
  .node { animation: none; }
}

/* -------------------------------------------------------------- sections -- */
.section { padding: 92px 0; position: relative; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line-soft); }

.section-head { max-width: 66ch; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); margin: 14px 0 0; }
.section-head .lede { margin-top: 18px; }

@media (max-width: 700px) { .section { padding: 64px 0; } .section-head { margin-bottom: 38px; } }

/* -------------------------------------------------------- atrium section -- */
/* The product's own introduction. The mark keeps its literal colours: it is a
   logo, so it stays the same in both themes and on any ground. */
.atrium-intro { max-width: 68ch; margin-bottom: 46px; }
.atrium-id { display: flex; align-items: center; gap: 18px; }
.atrium-mark {
  width: 64px; height: 64px; flex: none;
  border-radius: 15px; box-shadow: var(--shadow-sm);
}
.atrium-id h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 6px 0 0; letter-spacing: -.01em; }
.atrium-intro .lede { margin-top: 22px; }
.atrium-intro .hero-cta { margin-top: 28px; }

/* One tile per room. auto-fit rather than a fixed count: seven does not divide
   evenly into any column count that also works on a phone. */
.panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.pane {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 18px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section-alt .pane { background: var(--ground); }
.pane:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}
.pane-ico {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.pane-ico svg { width: 21px; height: 21px; }
.pane-name { font-family: var(--display); font-size: 1.18rem; font-weight: 600; }
.pane-desc { color: var(--muted); font-size: 14px; line-height: 1.45; }

@media (max-width: 620px) {
  .atrium-mark { width: 52px; height: 52px; }
  .panes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --------------------------------------------------------- feature cards -- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }

.feature {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 28px 0;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section-alt .feature { background: var(--ground); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }

.feature-top { display: flex; align-items: center; gap: 12px; }
.feature-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.feature-ico svg { width: 21px; height: 21px; }
.feature[data-warm] .feature-ico { background: var(--warm-tint); color: var(--warm); }
.feature h3 { font-size: 1.5rem; }

.feature p { color: var(--muted); margin-top: 13px; font-size: 16px; }

.feature-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; color: var(--ink-2);
}
.feature-list svg { width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 4px; }

.feature-link {
  margin-top: 18px; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  align-self: flex-start;
}
.feature-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.feature-link:hover svg { transform: translateX(3px); }

/* Each card carries its own illustration, bled to the bottom edge. */
.feature-art { margin: 22px -28px 0; height: 132px; position: relative; }
.feature-art svg { width: 100%; height: 100%; display: block; }

@media (max-width: 820px) { .features { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- the Android app -- */
/* The download card. It is the only genuinely new component here: everything
   inside it — the mark, the check list, the buttons, the note — is a component
   the page already had. */
.app-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 26px 26px 24px;
}
.section-alt .app-card { background: var(--ground); }
.app-id { display: flex; align-items: flex-start; gap: 16px; }
.app-id strong {
  display: block; font-family: var(--display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
}
.app-id span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 7px; }
.app-card .feature-list { margin-top: 20px; }
.app-card .hero-cta { margin-top: 22px; }

@media (max-width: 620px) { .app-card { padding: 22px 20px 20px; } }

/* ---------------------------------------------------------------- setup -- */
/* The section is the heading beside the panels now. The column of server
   settings that used to be here moved into the account portal, which is the
   only place those values should live. */
.setup-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 52px; align-items: start; }
.setup-grid .section-head { margin-bottom: 0; }
.setup-panels { max-width: 66ch; }
@media (max-width: 900px) { .setup-grid { grid-template-columns: 1fr; gap: 34px; } }

.tabs { display: flex; gap: 6px; padding: 5px; background: var(--surface-2); border-radius: 999px; border: 1px solid var(--line-soft); width: fit-content; max-width: 100%; overflow-x: auto; }
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--body); font-size: 14.5px; font-weight: 600; color: var(--muted);
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

.panel { margin-top: 26px; }
.panel[hidden] { display: none; }
.panel h3 { font-size: 1.35rem; }
.panel p { color: var(--muted); margin-top: 12px; font-size: 16px; }

.steps { list-style: none; counter-reset: s; margin: 20px 0 0; padding: 0; display: grid; gap: 15px; }
.steps li {
  counter-increment: s; position: relative; padding-left: 42px;
  font-size: 15.5px; color: var(--ink-2);
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
}

.note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 20px; padding: 15px 17px;
  background: var(--warm-tint); border-radius: var(--r-md);
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
}
.note svg { width: 17px; height: 17px; color: var(--warm); flex: none; margin-top: 3px; }

/* -------------------------------------------------------------- account -- */
/* Shared with the app section above: the same "copy beside a card" layout. */
.account-grid, .app-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: center; }

.acct-list { display: grid; gap: 4px; margin-top: 8px; }
.acct {
  display: flex; gap: 16px; padding: 18px; border-radius: var(--r-md);
  transition: background .2s var(--ease);
}
.acct:hover { background: var(--surface-2); }
.acct-ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.acct-ico svg { width: 18px; height: 18px; }
.acct h3 { font-family: var(--body); font-size: 16.5px; font-weight: 600; letter-spacing: 0; }
.acct p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* Portal preview card */
.portal-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.portal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 17px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.portal-url {
  flex: 1; font-family: var(--mono); font-size: 12.5px; color: var(--faint);
  background: var(--ground); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 5px 13px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-body { padding: 22px; display: grid; gap: 15px; }
.portal-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--ground); }
.portal-row strong { font-size: 14.5px; font-weight: 600; }
.portal-row p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pill {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; flex: none;
  background: var(--brand-tint); color: var(--brand);
}
.pill[data-warm] { background: var(--warm-tint); color: var(--warm); }

@media (max-width: 900px) { .account-grid, .app-grid { grid-template-columns: 1fr; gap: 38px; } }

/* ---------------------------------------------------------------- trust -- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.trust-item { text-align: center; padding: 22px 14px; }
.trust-ico {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.trust-ico svg { width: 21px; height: 21px; }
.trust-item strong { display: block; font-size: 15px; font-weight: 600; }
.trust-item p { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .trust { grid-template-columns: 1fr; } .trust-item { display: flex; gap: 15px; text-align: left; padding: 14px 0; } .trust-ico { margin: 0; } }

/* ------------------------------------------------------------------ cta -- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--brand); border-radius: var(--r-xl);
  padding: 58px 52px; text-align: center;
  box-shadow: 0 20px 60px var(--brand-glow);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.18), transparent 70%);
}
.cta-band h2, .cta-band p { position: relative; color: #fff; }
:root[data-theme="dark"] .cta-band h2, :root[data-theme="dark"] .cta-band p { color: #04211e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-band h2,
  :root:not([data-theme="light"]) .cta-band p { color: #04211e; }
}
.cta-band h2 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
.cta-band p { margin: 15px auto 0; max-width: 52ch; opacity: .9; font-size: 17px; }
.cta-band .hero-cta { position: relative; justify-content: center; margin-top: 30px; }
.cta-band .btn-primary { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-md); }
.cta-band .btn-primary:hover { background: var(--surface); color: var(--brand-deep); }
/* In dark mode the band is light teal while --surface is nearly black, and the
   global `:root[data-theme="dark"] .btn-primary { color:#05221f }` outranks
   `.cta-band .btn-primary` (three classes beat two) -- so the label was dark on
   dark, and only the hover rule, which ties and comes later, made it readable.
   These set BOTH halves of the pair at a specificity nothing else here reaches,
   so the button cannot end up with one theme's text on the other's ground. */
:root[data-theme="dark"] .cta-band .btn-primary { background: #04211e; color: #eaf5f3; }
:root[data-theme="dark"] .cta-band .btn-primary:hover { background: #07312c; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-band .btn-primary { background: #04211e; color: #eaf5f3; }
  :root:not([data-theme="light"]) .cta-band .btn-primary:hover { background: #07312c; color: #fff; }
}
.cta-band .btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; box-shadow: none; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
:root[data-theme="dark"] .cta-band .btn-ghost { border-color: rgba(4,33,30,.4); color: #04211e; }
:root[data-theme="dark"] .cta-band .btn-ghost:hover { background: rgba(4,33,30,.12); border-color: #04211e; color: #04211e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-band .btn-ghost { border-color: rgba(4,33,30,.4); color: #04211e; }
  :root:not([data-theme="light"]) .cta-band .btn-ghost:hover { background: rgba(4,33,30,.12); border-color: #04211e; color: #04211e; }
}
@media (max-width: 620px) { .cta-band { padding: 42px 24px; border-radius: var(--r-lg); } }

/* --------------------------------------------------------------- footer -- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 54px 0 40px; background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { color: var(--muted); font-size: 14.5px; margin-top: 14px; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--brand); }

.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 13.5px; color: var(--faint);
}
.status-dot { display: inline-flex; align-items: center; gap: 8px; }
.status-dot i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow); flex: none;
}

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ reveal-in -- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .feature:hover { transform: none; }
}