/*
  Wot Mod Manager — site styles.

  One sheet for every page. reset.html and verify-email.html are not in the design, and the
  only way they keep looking like the rest of the site is by inheriting from here rather than
  each carrying its own copy of the palette.

  The colours are the same ones the desktop app uses, read off the V2 design: amber #E8A000 is
  the brand and is never dimmed, while --amber-ink is amber as lettering, which needs to be a
  shade brighter to carry on a near-black ground.
*/

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

:root {
  --bg:          #0F1013;
  --surface:     #14161B;
  --surface-2:   #1A1C22;
  --surface-3:   #1E2128;
  --line:        #23262E;
  --line-strong: #3A3F4A;

  --text:    #F4F3EF;
  --text-2:  #C9CBD1;
  --muted:   #8A8F99;

  --amber:       #E8A000;
  --amber-hover: #FFC03A;
  --amber-ink:   #F2AB0E;
  --on-amber:    #14161B;
  --amber-soft:  rgba(232, 160, 0, .14);

  --green: #4ADE80;
  --red:   #F87171;

  --sans: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* The page gutter. One value so every band lines up down the page. */
  --gutter: 96px;
  --maxw: 1440px;
}

/* Tells the browser the page is dark, so the native checkbox on reset.html and the
   scrollbars stop being white rectangles on a near-black ground. */
html { background: var(--bg); scroll-behavior: smooth; color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* Short pages still put the footer on the bottom edge rather than halfway down. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Width is spelled out because an auto inline margin on a flex item stops it stretching,
   and both `main.wrap` and `main.container` centre themselves that way. */
body > main { flex: 1 0 auto; width: 100%; min-width: 0; }
body > .footer { margin-top: auto; }

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

/* A page that toggles a section with the `hidden` attribute expects it to disappear. Any
   `display` this sheet sets on a class would otherwise win over the browser's own rule, which
   is how share.html briefly showed an empty list beside its "link revoked" message. */
[hidden] { display: none !important; }
a { color: var(--amber); }
a:hover { color: var(--amber-hover); }

::selection { background: var(--amber); color: var(--on-amber); }

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

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

/* ============================================================ shell */

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

.band { border-top: 1px solid var(--line); }
.band--raised { background: var(--surface); }

.band > .wrap { padding-block: 96px; }

/* ============================================================ navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 16, 19, .9);
  backdrop-filter: blur(12px);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand svg { width: 30px; height: 30px; flex: none; }

.nav__links {
  margin-left: auto;
  display: flex;
  gap: 32px;
  font-size: 15px;
}

.nav__links a {
  color: var(--text-2);
  text-decoration: none;
}

.nav__links a:hover { color: var(--text); }

/* Pages without the section links still push the store button to the right edge. */
.nav .btn { margin-left: auto; }
.nav__links + .btn { margin-left: 32px; }

/* ============================================================ buttons */

.btn {
  height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
}

.btn--primary:hover {
  background: var(--amber-hover);
  border-color: var(--amber-hover);
  color: var(--on-amber);
}

.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
  font-weight: 500;
}

.btn--outline:hover {
  border-color: var(--text-2);
  color: var(--text);
}

/* The hero and the download cards use a taller version of the same two buttons. */
.btn--lg {
  height: 54px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 16px;
}

.btn--lg svg { width: 18px; height: 18px; }

.btn--block { width: 100%; height: 52px; border-radius: 12px; font-size: 16px; }

/* ============================================================ type */

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--amber-ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.h-xl {
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.h-lg {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.h-md {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.h-sm {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.lead {
  font-size: 21px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 540px;
}

.prose { font-size: 15px; color: var(--text-2); line-height: 1.55; }
.note  { font-size: 17px; color: var(--muted); line-height: 1.5; max-width: 440px; }
.mono  { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.amber { color: var(--amber); }

/* A band heading: label and title on the left, a sentence of context on the right. */
.band__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}

.band__head > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================ hero */

.hero {
  position: relative;
  overflow: hidden;
}

.hero > .wrap {
  padding-block: 96px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* The amber wash behind the app shot. Decorative, so it never eats a click. */
.hero::before {
  content: "";
  position: absolute;
  right: -200px;
  top: -300px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,160,0,.16), rgba(232,160,0,0) 70%);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.assurances {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}

.assurances li {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.assurances svg { width: 14px; height: 14px; flex: none; }

.hero__shot { position: relative; }

/* A window frame around the screenshot, so it reads as the app and not as a picture. */
.shot {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  overflow: hidden;
}

.shot__bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
}

.shot__bar svg { width: 14px; height: 14px; flex: none; }

/*
  The screenshot is of the whole app window, title bar included, and the frame above already
  draws one. The crop hides the app's own bar rather than shipping a second copy of the image:
  38 of the shot's 1196 pixels, expressed against the width because that is what a percentage
  margin resolves against.
*/
.shot__view { overflow: hidden; }
.shot__view img { width: 100%; height: auto; display: block; margin-top: -3.18%; }

.hero__pill {
  position: absolute;
  left: -40px;
  bottom: -28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  font-size: 14px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* ============================================================ cards */

.card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card--accent { border-color: var(--amber); }

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  display: grid;
  place-items: center;
  flex: none;
}

.icon-tile svg { width: 24px; height: 24px; }

/* How it works: two cards with the sync arrow between them. */
.pair {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 24px;
  align-items: center;
}

/*
  Hairline, arrow, word, hairline - a length of cable between the two cards rather than a glyph
  parked in the gap. The arrow is the only amber thing in the band, which is what makes the eye
  travel left to right across it.
*/
.pair__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.pair__rule { width: 1px; height: 24px; background: var(--line); flex: none; }

.pair__badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber-ink);
  flex: none;
}

.pair__badge svg { width: 18px; height: 18px; }

.step-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* Features: three across, flat cards on the raised band. */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature__icon { color: var(--amber-ink); }
.feature__icon svg { width: 26px; height: 26px; }

.feature h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Download: the app and the extension, side by side. */
.downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.download {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.download--accent { border-color: var(--amber); }

.download--accent::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,160,0,.18), rgba(232,160,0,0) 70%);
  pointer-events: none;
}

.download > * { position: relative; }

.download__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.download__head > div { display: flex; flex-direction: column; gap: 6px; }

.tag {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex: none;
}

.tag--amber { background: var(--amber); color: var(--on-amber); }

.download__shot {
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);
}

.download__shot img { width: 100%; height: auto; display: block; margin-top: -3.18%; }

/* The negative margin above crops the app's own title bar out of the desktop screenshot. The
   extension shot is already cropped to what it needs to show, so it keeps its top edge. */
.download__shot--flush img { margin-top: 0; }

/* Both cards end on their button, whether or not they carry a picture above it. */
.download .btn--block { margin-top: auto; }

/* ============================================================ two-column bands */

/* Get started and FAQ: a heading column, then the rows. */
.split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.split__head { display: flex; flex-direction: column; gap: 16px; }

.steps { display: flex; flex-direction: column; }

.step {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.step:last-child { border-bottom: 0; }

.step__no {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--text);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  flex: none;
}

.step:first-child .step__no { background: var(--amber); color: var(--on-amber); }

.step__body { display: flex; flex-direction: column; gap: 6px; }

.step__body h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.help {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.help h3 { font-size: 17px; font-weight: 600; }

/* ============================================================ FAQ */

.faq { display: flex; flex-direction: column; }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

/* One glyph, rotated. An open question shows a minus, a closed one a plus. */
.faq summary .sign {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.faq summary .sign::before,
.faq summary .sign::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 14px;
  height: 1.75px;
  border-radius: 1px;
  background: currentColor;
}

.faq summary .sign::after { transform: rotate(90deg); }

.faq details[open] summary .sign { color: var(--amber-ink); }
.faq details[open] summary .sign::after { transform: rotate(0deg); }

.faq details > p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 640px;
  padding-bottom: 24px;
}

/* ============================================================ closing call to action */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta > .wrap {
  padding-block: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(232,160,0,.12), rgba(232,160,0,0) 70%);
  pointer-events: none;
}

.cta > .wrap > * { position: relative; }

.cta p { font-size: 19px; color: var(--text-2); max-width: 620px; }

/* ============================================================ footer */

.footer { border-top: 1px solid var(--line); }

.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.footer__brand svg { width: 22px; height: 22px; flex: none; }

.footer__legal { font-size: 13px; color: var(--muted); }

.footer__links {
  margin-left: auto;
  display: flex;
  gap: 24px;
  font-size: 14px;
}

.footer__links a { color: var(--text-2); text-decoration: none; }
.footer__links a:hover { color: var(--text); }

/* ============================================================ document pages */

/* Privacy: a sticky index beside the text. */
/* The band above the two columns: eyebrow, title, and the line saying what this covers. The rule
   under it runs the full width, which is what separates the title from the document proper. */
.doc-band { border-bottom: 1px solid var(--line); }

.doc-head { display: flex; flex-direction: column; gap: 16px; padding-block: 80px 40px; }
.doc-head__sub { font-size: 15px; color: var(--muted); }

/* align-items: start is load-bearing. A sticky grid item travels inside its grid area, not inside
   its own box - so the index has to stay short while the area stays as tall as the document. Let
   it stretch and it fills the area, leaving it nothing to travel through, and the list scrolls
   away with the text. */
.doc { display: grid; grid-template-columns: 260px 1fr; gap: 80px; align-items: start;
       padding-block: 64px 96px; }

.doc__index-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 12px 10px;
}

.doc__index {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc__index a {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
}

.doc__index a:hover { background: var(--surface); color: var(--text); }

/* Where you are. Set by the scroll-spy at the bottom of privacy.html. */
.doc__index a.is-current {
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-weight: 500;
}

.doc__body { display: flex; flex-direction: column; gap: 48px; max-width: 760px; }

.doc__body section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 100px; }

.doc__body h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.doc__body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 8px;
}

.doc__body p,
.doc__body li {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
}

/* The opening summary, boxed and outlined in amber: the one paragraph worth reading if you read
   nothing else on the page. */
.callout {
  border: 1px solid var(--amber);
  border-radius: 16px;
  background: var(--surface);
  padding: 28px 32px;
  gap: 12px;
}

.callout h2 { font-size: 22px; letter-spacing: -0.02em; }
.callout p { font-size: 17px; }

.doc__body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* A labelled table of facts, the shape the privacy design uses for data categories. */
.facts {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.facts__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

.facts__row:last-child { border-bottom: 0; }
.facts__row:nth-child(odd) { background: var(--surface); }
.facts__row dt { color: var(--text); font-weight: 600; }

.facts__tag {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
}

/* ============================================================ narrow forms */

/* reset.html and verify-email.html: one card, centred. */
.form-page {
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  padding: 48px 24px 96px;
}

.form-card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-card h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field label { font-size: 14px; color: var(--text-2); }

.field input {
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.field input:focus {
  outline: none;
  border-color: var(--amber);
}

.msg { font-size: 14px; line-height: 1.5; }
.msg--error { color: var(--red); }
.msg--ok { color: var(--green); }

/* ============================================================ shared list */

.share-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: start;
}

.share-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }

.share-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--muted);
}

.share-meta span { display: flex; align-items: center; gap: 8px; }

.mod-list {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.mod-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.mod-row:last-child { border-bottom: 0; }
.mod-row:hover { background: var(--surface-2); color: inherit; }

.mod-row__thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--line) 0 6px, var(--surface-3) 6px 12px);
  flex: none;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.mod-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.mod-row__thumb .initial {
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
}

.mod-row__name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-row__go {
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.mod-row__go svg { width: 14px; height: 14px; }

.share-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.side-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.side-card h2 { font-size: 16px; font-weight: 600; }

.copy-row { display: flex; gap: 10px; }

.copy-row__url {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-3);
  /* Block rather than flex: text-overflow only ellipsises inline content, and a long share
     URL was being cut off mid-character instead. */
  display: block;
  line-height: 44px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.state { font-size: 16px; color: var(--muted); padding: 64px 0; }
.state--error { color: var(--red); }

/* ============================================================ narrow screens */

@media (max-width: 1180px) {
  :root { --gutter: 48px; }
  .h-xl { font-size: 56px; }
  .hero > .wrap,
  .downloads,
  .share-layout { grid-template-columns: 1fr; }
  .share-side { position: static; }
  .pair { grid-template-columns: 1fr; }
  .pair__link { padding: 8px 0; }
  .pair__badge svg { transform: rotate(90deg); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .doc { grid-template-columns: 1fr; gap: 32px; }
  .doc__index { position: static; flex-direction: row; flex-wrap: wrap; }
  .hero__pill { position: static; margin-top: 16px; }
}

/*
  The five section links plus the store button need about 950px of bar. Below that the links go
  first: they are shortcuts to sections the visitor can still scroll to, while the button is the
  point of the page.
*/
@media (max-width: 980px) {
  .nav__links { display: none; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }

  .band > .wrap,
  .cta > .wrap { padding-block: 56px; }

  .hero > .wrap { padding-block: 48px 56px; gap: 40px; }

  /* The links collapse away on a phone; the store button is the only thing worth the width. */
  /*
    The bar is the brand and nothing else, as the 390px artboard shows. The store button does
    not fit beside the wordmark at this width, and the hero repeats it two screens-worth up.
  */
  .nav__links, .nav .btn { display: none; }
  .nav__inner { height: 64px; gap: 10px; }
  .brand { font-size: 17px; white-space: nowrap; }
  .brand svg { width: 26px; height: 26px; }

  .h-xl { font-size: 38px; letter-spacing: -0.03em; }
  .h-lg { font-size: 30px; }
  .h-md { font-size: 27px; }
  .h-sm { font-size: 23px; }
  .lead { font-size: 17px; }

  .band__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .note { font-size: 15px; }

  .features { grid-template-columns: 1fr; }
  .card, .download { padding: 24px; }
  .download__shot { display: none; }

  .hero__actions .btn { flex: 1 1 100%; }

  .facts__row { grid-template-columns: 1fr; gap: 6px; }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__links { margin-left: 0; flex-wrap: wrap; gap: 16px; }

  .mod-row__go span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================ carried-over page classes */

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
}



.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 8px;
}

.card p:last-child { margin-bottom: 0; }

.lead { font-size: 17px; color: var(--text-2); margin-bottom: 24px; max-width: none; }

.row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.row label,
.show-toggle {
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card input[type="password"],
.card input[type="text"],
.card input[type="email"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.card input:focus { outline: none; border-color: var(--amber); }

.hint { font-size: 13px; color: var(--muted); }

.card button {
  height: 48px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--amber);
  color: var(--on-amber);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.card button:hover { background: var(--amber-hover); }
.card button:disabled { opacity: .5; cursor: default; }

.alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(248, 113, 113, .12);
  color: var(--red);
}

.alert.ok { background: rgba(74, 222, 128, .12); color: var(--green); }
.hidden { display: none; }

.footer-link { margin-top: 24px; font-size: 14px; color: var(--muted); text-align: center; }

/* verify-email's status badge and its wait spinner */
.icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--surface-3);
}

.icon.pending { color: var(--amber-ink); }
.icon.ok { background: rgba(74, 222, 128, .12); color: var(--green); }
.icon.error { background: rgba(248, 113, 113, .12); color: var(--red); }

h1.pending, h1.ok, h1.error {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 12px;
}

.container > p { text-align: center; color: var(--text-2); font-size: 15px; line-height: 1.6; }

.spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* The two single-card pages read as one centred column. */
.container > h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 10px;
}

.container > .lead { text-align: center; }

input[type="checkbox"] { accent-color: var(--amber); width: 16px; height: 16px; }