/* The marketing site's own sheet.

   It uses the app's own look: the Blue Light and Blue Dark colours from
   web/src/themes.ts, the Nunito font, and the app's shapes (round-cornered
   white cards on a pale page, pill buttons, pill tags). Nothing is shared
   with web/src/styles.css; the site is a folder of plain files an nginx
   container serves, and it should stay something a person can open in a
   text editor and understand. The only script is site.js (plus the small
   one at the bottom of compare.html for its notes). */

:root {
  color-scheme: light;

  /* Blue Light from web/src/themes.ts (BLUE_LIGHT_TOKENS): a pale page,
     white cards, and one indigo for everything you can press. */
  --surface: #f4f6fb;
  --surface-raised: #ffffff;
  --surface-nav: #eef1f8;
  --surface-sunken: #e7eaf2;
  --text: #16181d;
  --text-soft: #464c57;
  --text-muted: #5f6673;
  --border: #e3e6ec;
  --border-strong: #c9ced8;
  --accent: #3b4fd8;
  --accent-hover: #2f40b8;
  --accent-fill: #3b4fd8;
  --accent-fill-hover: #2f40b8;
  --accent-text: #ffffff;
  --accent-wash: color-mix(in srgb, var(--accent) 11%, transparent);
  --status-ok: #2f7d4a;
  --status-warn: #c48a12;
  --shadow: rgba(22, 28, 60, 0.18);
  --elev-1: 0 1px 2px rgba(22, 28, 60, 0.06);
  --elev-2: 0 1px 3px rgba(22, 28, 60, 0.07), 0 10px 28px rgba(22, 28, 60, 0.08);

  /* The three answers in the comparison table. Each pair clears 4.5:1. */
  --yes-text: #17603a;
  --yes-bg: #dcf0e3;
  --kinda-text: #7a4d00;
  --kinda-bg: #fbeac6;
  --no-text: #8a3b3b;
  --no-bg: #f2e5e5;

  --sun: #f0a20a;

  --font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --page: 1080px;
  --gap: 24px;
  --radius: 16px;      /* the app's --radius-xl */
  --radius-sm: 12px;   /* the app's --radius-lg */
  --header: 64px;
}

/* Blue Dark from web/src/themes.ts (BLUE_DARK_TOKENS): deep navy, a lifted
   indigo for links, and a deeper indigo under white for filled buttons.
   It follows the device unless the visitor picked with the sun/moon button,
   which sets data-theme on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #11141d;
    --surface-raised: #191d29;
    --surface-nav: #0d1017;
    --surface-sunken: #1e2331;
    --text: #e9ecf4;
    --text-soft: #b4bbcc;
    --text-muted: #8f97aa;
    --border: #272d3c;
    --border-strong: #384055;
    --accent: #7b8cff;
    --accent-hover: #95a3ff;
    --accent-fill: #4a5ce6;
    --accent-fill-hover: #5466ea;
    --accent-text: #ffffff;
    --accent-wash: color-mix(in srgb, var(--accent) 18%, transparent);
    --status-ok: #5dba7a;
    --status-warn: #e0b33a;
    --shadow: rgba(0, 0, 0, 0.6);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elev-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.5);

    --yes-text: #8ddcaa;
    --yes-bg: #173022;
    --kinda-text: #f0c860;
    --kinda-bg: #33280d;
    --no-text: #e9a7a7;
    --no-bg: #361f1f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #11141d;
  --surface-raised: #191d29;
  --surface-nav: #0d1017;
  --surface-sunken: #1e2331;
  --text: #e9ecf4;
  --text-soft: #b4bbcc;
  --text-muted: #8f97aa;
  --border: #272d3c;
  --border-strong: #384055;
  --accent: #7b8cff;
  --accent-hover: #95a3ff;
  --accent-fill: #4a5ce6;
  --accent-fill-hover: #5466ea;
  --accent-text: #ffffff;
  --accent-wash: color-mix(in srgb, var(--accent) 18%, transparent);
  --status-ok: #5dba7a;
  --status-warn: #e0b33a;
  --shadow: rgba(0, 0, 0, 0.6);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elev-2: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.5);

  --yes-text: #8ddcaa;
  --yes-bg: #173022;
  --kinda-text: #f0c860;
  --kinda-bg: #33280d;
  --no-text: #e9a7a7;
  --no-bg: #361f1f;
}

/* The app's own font, served from this folder (SIL Open Font License,
   fonts/OFL.txt). One file holds every weight from 400 to 700. */
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anything you can press shows a ring when reached by keyboard. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* "Skip to the page", the first thing a keyboard reaches. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0; font-weight: 800; }
h3 { font-weight: 700; }
h1 { font-size: clamp(2.25rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h3 { font-size: 1.0625rem; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- The bar at the top ------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.top .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 18px;
  min-height: var(--header);
}

/* The wordmark, top left: the icon and the name, as in the app. */
.mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mark img { width: 30px; height: 30px; border-radius: 9px; }

/* The wordmark sits four levels below the page colour. Inheriting it meant
   each level eased after the one above, so the word lagged and then snapped
   when the switch ended. Naming the colour here lets it ease with the rest. */
.mark, .mark span { color: var(--text); }

.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Nav links are pills, like the app's own nav: a soft wash on hover and an
   indigo wash on the page you are on. */
.top nav a {
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 999px;
}

.top nav a:hover { color: var(--text); background: var(--surface-sunken); }
.top nav a[aria-current="page"] { color: var(--accent); background: var(--accent-wash); }

/* ---- Buttons ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-text);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--elev-1);
  transition: background 120ms ease, border-color 120ms ease;
}

.button:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }

.button.quiet {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-strong);
}

.button.quiet:hover { background: var(--surface-sunken); border-color: var(--border-strong); }

.top .actions > .button { padding: 8px 17px; color: var(--accent-text); }

/* Small "Sign in" beside the header's "Get started" (item 545). */
.top .signin {
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
}
.top .signin:hover { color: var(--text); background: var(--surface-sunken); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Sections ----------------------------------------------------------- */

section { padding: 80px 0; }
/* Every other band sits on white, like a card on the app's page. */
section.band { background: var(--surface-raised); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.lede {
  max-width: 44ch;
  color: var(--text-soft);
  font-size: 1.0625rem;
  margin-top: 14px;
}

.eyebrow {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ---- Hero --------------------------------------------------------------- */

.hero { padding: 84px 0 0; text-align: center; }
.hero .lede { margin-left: auto; margin-right: auto; font-size: 1.1875rem; max-width: 52ch; }

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.hero-signup {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 460px;
  margin: 30px auto 0;
}

.hero-signup input {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.hero-signup input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.hero-signup .button { cursor: pointer; font: inherit; font-weight: 600; font-size: 0.9375rem; }

.hero-note {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.shot {
  margin: 56px auto 0;
  max-width: 940px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-nav);
  box-shadow: 0 24px 60px -30px var(--shadow);
  overflow: hidden;
}

.shot img { display: block; width: 100%; height: auto; }

.shot figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: left;
}

/* ---- Cards -------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  margin-top: 36px;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
}

.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-soft); font-size: 0.9375rem; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.feature {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
}
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--text-soft); font-size: 0.9375rem; }

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 44px;
  align-items: start;
}

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

/* ---- Code --------------------------------------------------------------- */

pre {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
}

code { font-family: var(--mono); font-size: 0.9em; }
p code, li code, td code {
  background: var(--surface-sunken);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---- Two columns -------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
}

.split .shot { margin: 0; }

/* ---- Plans -------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  margin-top: 36px;
}

.plan {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
}

.plan.lit { border: 2px solid var(--accent); box-shadow: var(--elev-2); }

.plan .name { font-weight: 700; font-size: 1.0625rem; }
.plan .price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.plan .price small { font-size: 0.875rem; font-weight: 500; color: var(--text-soft); letter-spacing: 0; }
.plan p { color: var(--text-soft); font-size: 0.9375rem; }
.plan .tag {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}

.fineprint {
  margin-top: 28px;
  font-size: 0.9375rem;
  color: var(--text-soft);
  max-width: 62ch;
}

/* ---- Questions ---------------------------------------------------------- */

.qa { margin-top: 30px; display: grid; gap: 4px; max-width: 74ch; }

.qa details {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.qa summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--text-muted); font-weight: 400; }
.qa details[open] summary::after { content: "\2013"; }
.qa details p { margin-top: 10px; color: var(--text-soft); font-size: 0.9375rem; }

/* ---- Prose ---------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 46px; }
.prose p, .prose ul { margin-top: 14px; color: var(--text-soft); }
.prose ul { padding-left: 22px; }
.prose li { margin-top: 8px; }
.prose strong { color: var(--text); }
.prose .eyebrow { color: var(--accent); margin-top: 0; }
.prose .eyebrow + h2, .prose > h2:first-child { margin-top: 0; }


/* ---- Foot --------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 60px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
footer a { color: var(--text-soft); text-decoration: none; }
footer a:hover { color: var(--text); }
footer .spacer { margin-left: auto; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 56px 0; }
  .hero { padding-top: 56px; }
  /* The links drop to a second row that scrolls sideways; "Open the app"
     stays beside the mark on the first row. */
  .top .wrap { padding-top: 12px; }
  .top .mark { flex: 1; }
  .top nav {
    flex-basis: 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    padding: 10px 0 12px;
    scrollbar-width: none;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav { order: 2; }
  .top .actions > .button { order: 1; }
  .top .signin { order: 1; }
  .hero-signup { flex-direction: column; }
}

/* ---- Comparison table --------------------------------------------------- */

.table-scroll {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
}

.wrap.wide { max-width: 1400px; }

table.compare {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1100px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

table.compare th, table.compare td {
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

table.compare tr > :last-child { border-right: 0; }
table.compare tbody tr:last-child > * { border-bottom: 0; }

table.compare thead th {
  background: var(--surface-nav);
  font-weight: 650;
  font-size: 0.8125rem;
}

table.compare tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-raised);
  font-weight: 650;
  white-space: nowrap;
  min-width: 8rem;
}

table.compare thead th:first-child { position: sticky; left: 0; z-index: 2; }
table.compare tbody tr.us > * { background: var(--accent-wash); }
table.compare tbody tr.us th { background: color-mix(in srgb, var(--accent) 11%, var(--surface-raised)); }
table.compare td { color: var(--text-soft); min-width: 7.5rem; }
table.compare td small { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 2px; }

/* One word per cell, as a small pill. The glyph stays in front so the colour
   is never the only thing telling Yes, Kinda and No apart. */
.yes, .no, .part {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.yes { color: var(--yes-text); background: var(--yes-bg); }
.part { color: var(--kinda-text); background: var(--kinda-bg); }
.no { color: var(--no-text); background: var(--no-bg); }
.yes::before { content: "✓ "; }
.part::before { content: "~ "; }
.no::before { content: "✗ "; }
table.compare .short { color: var(--text); font-weight: 600; }
.dash { color: var(--text-muted); }

.key {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.scroll-hint { display: none; margin-top: 10px; font-size: 0.8125rem; color: var(--text-muted); }
@media (max-width: 1240px) { .scroll-hint { display: block; } }

/* ---- Install steps ------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  margin-top: 36px;
}

.step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
}

.step h3 { margin-bottom: 10px; }
.step ol { margin: 0; padding-left: 20px; color: var(--text-soft); font-size: 0.9375rem; }
.step li { margin-top: 6px; }
.step li strong { color: var(--text); font-weight: 600; }
.step p { color: var(--text-soft); font-size: 0.9375rem; }
.step p strong { color: var(--text); font-weight: 600; }

/* The phone screenshot, framed like a phone. */
.phone-shot {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 40px auto 0;
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 12px 40px var(--shadow);
  overflow: hidden;
}

/* Each screenshot comes in the app's Blue Light and Blue Dark. The dark one
   sits on top of the light one and shows only in dark mode, so it fades in
   and out with the rest of the page when the button is pressed. */
.duo { display: block; position: relative; }
.duo img { display: block; width: 100%; height: auto; }
.duo .dk { position: absolute; inset: 0; height: 100%; opacity: 0; }
:root[data-theme="dark"] .duo .dk { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .duo .dk { opacity: 1; }
}

/* ---- A page's own header block ----------------------------------------- */

.page-head { padding-bottom: 40px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-head .lede { max-width: 56ch; }

.prose h3 { margin-top: 28px; }
.prose ol { padding-left: 22px; margin-top: 14px; color: var(--text-soft); }
.prose ol li { margin-top: 8px; }

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  margin-top: 28px;
}

.rules .card h3 { font-size: 1rem; }

.plan ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-soft); font-size: 0.9375rem; }
.plan li { margin-top: 4px; }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
  margin-top: 36px;
}

.pagelinks a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--surface-nav);
  text-decoration: none;
}

.pagelinks a:hover { border-color: var(--border-strong); }
.pagelinks a h3 { margin-bottom: 6px; }
.pagelinks a p { color: var(--text-soft); font-size: 0.9375rem; }
.pagelinks a span { display: block; margin-top: 12px; color: var(--accent); font-weight: 600; font-size: 0.9375rem; }


/* ---- Straight answers: question on the left, answer on the right --------- */

.answers { margin: 30px 0 0; max-width: 820px; }

.answers > div {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: 6px 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.answers dt { font-weight: 600; }
.answers dd { margin: 0; color: var(--text-soft); }

@media (max-width: 640px) {
  .answers > div { grid-template-columns: 1fr; }
}

/* ---- The ⓘ button in the comparison table and the note it opens -------- */

.info {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -4px 0 -4px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

/* The markup says ⓘ so it reads right without the stylesheet, but that
   character looks different in every font (a capsule in some), so the
   visible icon is drawn here instead: a small ring with an i in it. */
.info, .i-glyph { font-size: 0; line-height: 0; }
.info::before, .i-glyph::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 11px/1 var(--font);
}
.i-glyph { display: inline-block; vertical-align: -2px; color: var(--text-muted); }
.i-glyph::before { width: 15px; height: 15px; font-size: 10px; }

/* A Yes/Kinda/No and its ⓘ stay on one line; the Platforms text gets the
   room the long notes used to take, so rows stay short. */
table.compare td:has(> .yes, > .part, > .no) { white-space: nowrap; }
table.compare td:last-child { min-width: 14rem; }
table.compare tr > :nth-child(4) { min-width: 11rem; }

.info:hover, .info[aria-expanded="true"] { color: var(--accent); background: var(--accent-wash); }
.info:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tip {
  position: fixed;
  z-index: 50;
  width: max-content;
  max-width: min(22rem, calc(100vw - 16px));
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 10px 30px -10px var(--shadow);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  user-select: text;
}

.tip[hidden] { display: none; }
.tip a { color: var(--accent); }
.tip-close { display: none; }

/* On a phone the note is a sheet along the bottom edge with its own close
   button, instead of a bubble next to a small button. */
@media (max-width: 600px) {
  .tip {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    padding: 16px 52px 18px 18px;
    border-radius: var(--radius);
    box-shadow: 0 -6px 40px -8px var(--shadow);
  }
  .tip-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* ---- The sun/moon button (item 634) ------------------------------------ */

/* A round window onto a wheel that turns clockwise around a point below the
   button. The sun and the moon sit on opposite sides of the wheel, so every
   press turns it half a turn more: one sets down the right side while the
   other rises up the left. The script at the bottom of each page counts the
   half turns in --turns. Light shows the sun, dark shows the moon.

   On a wide screen it sits at the page's far right edge, outside the
   centred bar; narrower, it is the last thing in the bar (on a phone, the
   last thing on the bar's first row). */
.theme-toggle {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  margin-left: -6px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { background: var(--surface-nav); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wide enough that the centred bar leaves a margin of more than
   24px + 46px + 12px: the button moves out to the page's own edge. */
@media (min-width: 1260px) {
  .theme-toggle {
    position: absolute;
    right: 24px;
    top: 50%;
    margin: -23px 0 0;
  }
}

/* Between phone and wide, the bar has the button to fit as well, so its
   gaps close up a little rather than wrapping onto two rows. */
@media (min-width: 641px) and (max-width: 1000px) {
  .top .wrap { gap: 0 12px; }
  .top nav { gap: 14px; }
  .theme-toggle { margin-left: 0; }
}

.theme-toggle .wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  /* The pivot: 34px below the button's centre. */
  transform: translateY(34px) rotate(calc(var(--turns, 0) * 180deg));
  transition: transform 600ms cubic-bezier(0.45, 0, 0.2, 1);
}
.theme-toggle.still .wheel { transition: none; }

.theme-toggle .wheel svg {
  position: absolute;
  width: 26px;
  height: 26px;
  left: -13px;
}
/* One icon on top of the wheel, the other upside down underneath, so it
   arrives the right way up after half a turn. */
.theme-toggle .sun { top: -47px; color: var(--sun); }
.theme-toggle .moon { top: 21px; transform: rotate(180deg); color: var(--accent); }

@media (max-width: 640px) {
  .top .wrap { padding: 12px 16px 0; }
  .theme-toggle { order: 1; margin-left: 0; }
}

/* While the button is pressed everything eases to the new colours at once:
   inputs, borders, placeholders, shadows and the screenshot frames too, not
   just the page behind them. The wheel keeps its own turn. */
html.theme-easing *:not(.wheel),
html.theme-easing *::before,
html.theme-easing *::after,
html.theme-easing ::placeholder {
  transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease,
    box-shadow 500ms ease, outline-color 500ms ease, fill 500ms ease, stroke 500ms ease !important;
}
html.theme-easing .duo .dk { transition: opacity 500ms ease !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle .wheel { transition: none; }
  .theme-toggle.swapped .wheel svg { animation: theme-fade 250ms ease; }
}
@keyframes theme-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- The hero screenshot, stood up off the page (item 642) -------------
   Layered shadows under it, a thin light along its top edge, and a gentle
   lean back that settles flat when the pointer is on it. In dark mode the
   shadow takes a faint indigo glow so the frame lifts off the navy. */
:root {
  --shot-shadow:
    0 1px 2px rgba(22, 28, 60, 0.06),
    0 4px 10px rgba(22, 28, 60, 0.06),
    0 18px 36px -10px rgba(22, 28, 60, 0.16),
    0 48px 90px -28px rgba(22, 28, 60, 0.32);
  --shot-rim: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shot-shadow:
      0 0 0 1px rgba(123, 140, 255, 0.10),
      0 2px 4px rgba(0, 0, 0, 0.45),
      0 16px 34px -8px rgba(0, 0, 0, 0.65),
      0 36px 100px -18px rgba(74, 92, 230, 0.38),
      0 70px 140px -40px rgba(0, 0, 0, 0.9);
    --shot-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}
:root[data-theme="dark"] {
  --shot-shadow:
    0 0 0 1px rgba(123, 140, 255, 0.10),
    0 2px 4px rgba(0, 0, 0, 0.45),
    0 16px 34px -8px rgba(0, 0, 0, 0.65),
    0 36px 100px -18px rgba(74, 92, 230, 0.38),
    0 70px 140px -40px rgba(0, 0, 0, 0.9);
  --shot-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.hero .shot {
  position: relative;
  box-shadow: var(--shot-shadow);
  /* Starts tilted back; the script in index.html eases --tilt from 1 to 0 as
     the page scrolls, so the picture lies flat by the time it is in view. */
  --tilt-max: 7deg;
  transform: perspective(1800px) rotateX(calc(var(--tilt, 1) * var(--tilt-max)));
  transform-origin: 50% 100%;
  will-change: transform;
}
.hero .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shot-rim);
  pointer-events: none;
  z-index: 50;
}
@media (max-width: 640px) {
  .hero .shot { --tilt-max: 5deg; transform: perspective(1200px) rotateX(calc(var(--tilt, 1) * var(--tilt-max))); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .shot { transform: none; will-change: auto; }
}

/* ---- The hero screenshot in every theme (item 640) ----------------------
   Each theme is a layer over the Blue one, light and dark stacked the same
   way as .duo, and fades in on top when its dot is pressed. */
.theme-shots .tl {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.theme-shots .tl.on { opacity: 1; }
html.theme-easing .theme-shots .tl { transition: opacity 700ms ease !important; }

.theme-dots {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 3px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px -4px var(--shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.theme-dot {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.theme-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.theme-dot:hover::before { transform: scale(1.18); }
.theme-dot[aria-pressed="true"]::before {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--dot);
}
.theme-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root[data-theme="dark"] .theme-dot::before { background: var(--dot-dark); }
:root[data-theme="dark"] .theme-dot[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--dot-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-dot::before { background: var(--dot-dark); }
  :root:not([data-theme="light"]) .theme-dot[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--dot-dark); }
}
@media (max-width: 640px) {
  .theme-dots { right: 8px; bottom: 8px; padding: 2px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-shots .tl, html.theme-easing .theme-shots .tl { transition: none !important; }
  .theme-dot::before { transition: none; }
}

/* ---- The app's bubbles, here and there (item 1580) ----------------------- */

/* A soft indigo glow behind the top of the home page. */
.hero {
  background:
    radial-gradient(60rem 26rem at 50% -6rem, var(--accent-wash), transparent 70%);
}

/* Questions open and close inside white cards, like the app's settings rows. */
.qa { gap: 10px; }
.qa details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
  padding: 14px 18px;
}
.qa summary::after { color: var(--accent); font-weight: 700; }

/* Straight answers: one white card holding the rows, thin lines between. */
.answers {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
  padding: 4px 22px;
}
.answers > div:last-child { border-bottom: 0; }

/* What every plan gets, and what the paid plans add: pill tags. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.pills li {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--text-soft);
}
.pills.accent li { background: var(--accent-wash); border-color: transparent; color: var(--accent); }

.plan .renewal { margin: 10px 0 0; font-size: 0.8125rem; color: var(--text-soft); }
.plan .button { margin-top: auto; align-self: stretch; white-space: normal; text-align: center; padding-inline: 16px; }
.plan.free .price { color: var(--text); }

/* Storage add-ons: a small table in a card. */
.addons {
  margin-top: 24px;
  width: 100%;
  max-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
  overflow: hidden;
  font-size: 0.9375rem;
}
.addons th, .addons td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.addons tr:last-child > * { border-bottom: 0; }
.addons thead th { background: var(--surface-nav); font-weight: 700; }
.addons td { color: var(--text-soft); }

/* The foot: the mark and the site's pages on one row, the legal bits under. */
footer { background: var(--surface-raised); }
footer .legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}

/* Phones: roomier taps on the nav pills and the toggle sized to the bar. */
@media (max-width: 640px) {
  .top nav { gap: 2px; padding: 8px 0 10px; }
  .top nav a { padding: 8px 12px; }
  .top nav a:first-child { margin-left: -12px; }
  .theme-toggle { width: 40px; height: 40px; }
  /* Sign in and Get started open the same page; one fits beside the mark. */
  .top .signin { display: none; }
  .theme-toggle .wheel { transform: translateY(30px) rotate(calc(var(--turns, 0) * 180deg)); }
  .theme-toggle .sun { top: -42px; }
  .theme-toggle .moon { top: 18px; }
  .answers { padding: 2px 16px; }
  .addons th, .addons td { padding: 10px 12px; }
}

/* One plan on its own row (Team on the pricing page). */
.plans.single { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.pills + .lede { margin-top: 28px; }
.page-head + section { padding-top: 0; }

/* ---- The top menu (item 5461) ------------------------------------------
   On a computer the four links sit exactly in the middle of the bar (three
   columns: logo side, links, buttons side), and hovering one opens a single
   panel that slides and resizes to the next link's panel. On a phone (and
   anything narrower than 961px) a Menu button opens a sheet that grows out of
   the button; every section starts folded and unfolds when tapped. Without
   the script (no .has-js) the links stay as plain links. */
:root { --menu-dur: 460ms; --menu-ease: cubic-bezier(0.32, 0.72, 0.24, 1); --menu-grow: cubic-bezier(0.34, 1.32, 0.5, 1); }
@media (prefers-reduced-motion: reduce) { :root { --menu-dur: 0ms; } }

/* The bar (.top) is the positioned parent of the panel and, on wide screens, of the theme button. */
.actions { display: flex; align-items: center; gap: 12px; }
.menu-btn, .menu-panel, .menu-dim, .menu-sheet { display: none; }

@media (min-width: 961px) {
  .top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 18px; }
  .top nav { margin-left: 0; position: relative; justify-self: center; }
  .top .actions { justify-self: end; }
  .top .actions > .button { margin-left: 2px; }
}
/* Not enough room beside the centred links for "Sign in" as well; "Get started" opens the same page. */
@media (min-width: 961px) and (max-width: 1099px) { .top .signin { display: none; } }

/* Computer: the sliding highlight and the one morphing panel. */
@media (min-width: 961px) {
  .has-js .top nav a { position: relative; z-index: 1; transition: color var(--menu-dur) var(--menu-ease); }
  .has-js .top nav a:hover { background: none; }
  /* One highlight for the whole row: it rests on the page you are on and
     slides to whichever link you point at, and the link under it takes the
     accent colour (.lit), so the page's own link drops its separate wash. */
  .has-js .top nav a[aria-current="page"] { background: none; color: var(--text-soft); }
  .has-js .top nav a:hover { color: var(--text); }
  .has-js .top nav a.lit { color: var(--accent); }
  .menu-pill {
    position: absolute; top: 0; left: 0; border-radius: 999px; background: var(--accent-wash);
    opacity: 0; pointer-events: none;
    transition: transform var(--menu-dur) var(--menu-ease), width var(--menu-dur) var(--menu-ease),
      height var(--menu-dur) var(--menu-ease), top var(--menu-dur) var(--menu-ease), opacity 230ms;
  }
  .menu-pill.show { opacity: 1; }
  .menu-pill.snap { transition: opacity 230ms; }
  .has-js .menu-panel {
    display: block; position: absolute; top: calc(100% + 8px); left: 0; width: 300px; height: 200px;
    background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 18px 50px var(--shadow); overflow: hidden; z-index: 4;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: left var(--menu-dur) var(--menu-ease), width var(--menu-dur) var(--menu-ease), height var(--menu-dur) var(--menu-ease),
      opacity 280ms, transform var(--menu-dur) var(--menu-ease), visibility 0s linear var(--menu-dur);
  }
  .menu-panel.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  /* Growing to the next link's panel overshoots a little and settles; shrinking does not. */
  .menu-panel.open.grow-w { transition-property: left, width, height, opacity, transform, visibility;
    transition-timing-function: var(--menu-ease), var(--menu-grow), var(--menu-ease), ease, var(--menu-ease), linear; }
  .menu-panel.open.grow-h { transition-property: left, width, height, opacity, transform, visibility;
    transition-timing-function: var(--menu-ease), var(--menu-ease), var(--menu-grow), ease, var(--menu-ease), linear; }
  .menu-panel.open.grow-w.grow-h { transition-timing-function: var(--menu-ease), var(--menu-grow), var(--menu-grow), ease, var(--menu-ease), linear; }
  /* The first opening only fades in; it must not slide in from the last place it was. */
  .menu-panel.fresh { transition: opacity 280ms, transform var(--menu-dur) var(--menu-ease), visibility 0s; }
  .menu-sec {
    position: absolute; top: 0; left: 0; padding: 14px; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(var(--dx, 0));
    transition: opacity var(--menu-dur) var(--menu-ease), transform var(--menu-dur) var(--menu-ease), visibility 0s linear var(--menu-dur);
  }
  .menu-sec.cur { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .menu-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .menu-sec.two ul { grid-template-columns: 1fr 1fr; column-gap: 4px; }
  .menu-sec li a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none; }
  .menu-sec li a:hover, .menu-sec li a:focus-visible { background: var(--surface-sunken); outline: 0; }
  .menu-sec li b { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--text); }
  .menu-sec li span { display: block; font-size: 0.8125rem; color: var(--text-soft); }
  .menu-sec .foot { display: inline-block; margin: 8px 12px 2px; font-size: 0.8125rem; font-weight: 700; color: var(--accent); text-decoration: none; }
  .menu-sec .foot:hover { text-decoration: underline; }
  .has-js .menu-dim {
    display: block; position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
    background: color-mix(in srgb, var(--surface) 55%, transparent); transition: opacity var(--menu-dur) var(--menu-ease);
  }
  .menu-dim.on { opacity: 1; }
}

/* Phone and narrow windows: Menu button + folding sheet. */
@media (max-width: 960px) {
  .top .actions { display: contents; }
  /* No script: the links keep their own scrolling row under the mark, as before. */
  .top nav { flex-basis: 100%; margin-left: 0; order: 2; overflow-x: auto; scrollbar-width: none; padding: 8px 0 10px; }
  .top nav::-webkit-scrollbar { display: none; }
  .top .wrap { padding-top: 12px; }
  .top .mark { flex: 1; }
  .top .actions > .button, .top .signin { order: 1; }
  .theme-toggle { order: 1; margin-left: 0; }
  .top .signin { display: none; }

  .has-js .top nav { display: none; }
  .has-js .top .wrap { padding: 0 16px; flex-wrap: nowrap; gap: 0 10px; }
  .has-js .top .actions > .button { display: none; }
  .has-js .menu-btn {
    display: inline-flex; order: 2; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); color: var(--text);
    font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; position: relative; z-index: 11;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .menu-btn svg { transition: transform var(--menu-dur) var(--menu-ease); }
  .menu-btn[aria-expanded="true"] svg { transform: rotate(90deg); }

  /* The bar melts into the sheet while it is open. */
  html.menu-open { overflow: hidden; }
  html.menu-open .top { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .has-js .menu-sheet {
    display: block; position: fixed; z-index: 9; overflow: hidden; background: var(--surface-raised);
    border: 1px solid var(--border); box-shadow: 0 18px 50px var(--shadow);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: top var(--menu-dur) var(--menu-ease), left var(--menu-dur) var(--menu-ease), width var(--menu-dur) var(--menu-ease),
      height var(--menu-dur) var(--menu-ease), border-radius var(--menu-dur) var(--menu-ease), opacity 170ms linear,
      visibility 0s linear var(--menu-dur);
  }
  .menu-sheet.snap { transition: none; }
  .menu-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .menu-sheet .inner {
    position: absolute; inset: 0; padding: calc(var(--header) + 14px) 16px 28px; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transition: opacity 280ms ease;
  }
  .menu-sheet.open .inner { opacity: 1; transition-delay: 170ms; }
  .sh-head {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 12px;
    border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text);
    font: inherit; font-size: 1.125rem; font-weight: 800; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .sh-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
  .sh-head svg { flex: none; color: var(--text-muted); transition: transform var(--menu-dur) var(--menu-ease); }
  .sh-sec.open .sh-head svg { transform: rotate(180deg); }
  /* Unfolding grows the row's height from 0 to its natural size, so it glides rather than jumps. */
  .sh-body {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--menu-dur) var(--menu-ease), visibility 0s linear var(--menu-dur);
  }
  .sh-sec.open .sh-body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .sh-clip { overflow: hidden; min-height: 0; }
  .sh-clip ul { list-style: none; margin: 0; padding: 6px 0 10px; }
  .sh-clip li a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; }
  .sh-clip li a:active { background: var(--surface-sunken); }
  .sh-clip li b { display: block; font-weight: 700; color: var(--text); }
  .sh-clip li span { display: block; font-size: 0.875rem; color: var(--text-soft); }
  .menu-sheet .sh-cta { display: flex; gap: 10px; margin: 22px 0 0; }
  .menu-sheet .sh-cta .button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-pill, .menu-panel, .menu-sec, .menu-sheet, .menu-sheet .inner, .menu-dim, .menu-btn svg, .sh-body, .sh-head svg { transition: none !important; }
}

/* ---- Help page (support.html) ---------------------------------------------
   The three ways to reach us reuse the plan cards. The path to a setting is
   set apart so it reads as "go here", and the support address is plain text
   anyone can select and copy, for people whose device has no mail app set up
   for the mailto button. */
.help-ways { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.help-ways .plan .button { margin-top: auto; }
.plan .help-path {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.875rem;
}
.plan .help-email {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
}
.qa details p a { color: var(--accent); }