/*
 * Authenticator marketing site.
 *
 * The palette is the app's, transcribed from SPEC.md §3 (the same tokens as Design/Tokens.swift
 * and Tokens.kt), so the site and the product look like the same thing. Light is the default;
 * the dark palette is the same tokens redefined under prefers-color-scheme, and nothing below
 * names a color directly — every rule reads a token, which is what makes the two themes one
 * stylesheet rather than two.
 *
 * Atkinson Hyperlegible Next is the app's family, served here from Google Fonts with the system
 * stack behind it. The structure, and the comments explaining the odd decisions, come from
 * HeartGlance's site, which shipped; where a rule is the same it is the same for the same reason.
 *
 * The only JavaScript is lang.js (the language picker). The contact page has no script yet: its
 * button opens the visitor's own mail app. Nothing here depends on it.
 */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg2: #f5f7fb;
  --ink: #0b1220;
  --ink2: #55607a;
  --ink3: #8a93a8;
  --line: #e6e9f0;
  --accent: #2e5bff;
  --accent2: #1f44d6;
  --tint: #e8eeff;
  --tint2: #f3f6ff;
  --good: #1b8a4c;
  --good-bg: #e4f5eb;
  --warn: #b86a00;
  --warn-bg: #fff1dc;
  --bad: #c1121f;
  --bad-bg: #fde8ea;

  /* Text on an accent ground: white on the light accent, ink on the lighter dark one. */
  --on-accent: #ffffff;
  /* A third step of the tint, between tint and accent: borders on hover and focus rings. */
  --tint3: #b9c8ff;
  --nav-bg: rgba(255, 255, 255, 0.92);

  /* The Premium half of the free / Premium comparison. */
  --paid-bg: var(--accent2);
  --paid-ink: rgba(255, 255, 255, 0.86);
  --paid-head: #ffffff;

  /* The footer: the accent in the light theme, the raised ground in the dark one. */
  --foot-bg: var(--accent);
  --foot-ink: rgba(255, 255, 255, 0.82);
  --foot-head: rgba(255, 255, 255, 0.62);
  --foot-link: rgba(255, 255, 255, 0.88);
  --foot-link-hover: #ffffff;
  --foot-line: rgba(255, 255, 255, 0.24);
  --foot-mark: #ffffff;

  --shadow-card: 0 2px 4px rgba(11, 18, 32, 0.04), 0 12px 32px rgba(11, 18, 32, 0.07);
  --shadow-btn: 0 1px 2px rgba(31, 68, 214, 0.3), 0 10px 24px rgba(46, 91, 255, 0.26);
  --shadow-btn-hover: 0 2px 4px rgba(31, 68, 214, 0.3), 0 16px 32px rgba(46, 91, 255, 0.3);

  /* The chevron on the contact form's select, drawn in ink2. background-image cannot read a
     token, so the two themes each carry their own copy of the picture. */
  --chev: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%2355607a\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"/></svg>");

  --r-lg: 28px;
  --r-md: 20px;
  --r-pill: 999px;
  --page: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f1a;
    --bg2: #131a2a;
    --ink: #f4f6fb;
    --ink2: #a9b2c7;
    --ink3: #6e7891;
    --line: #232b3d;
    --accent: #6c8cff;
    --accent2: #8fa6ff;
    --tint: #1a2340;
    --tint2: #141b2e;
    --good: #4ccb84;
    --good-bg: #14301f;
    --warn: #f0a93b;
    --warn-bg: #3a2a0e;
    --bad: #ff6b78;
    --bad-bg: #3d1418;

    --on-accent: #0b0f1a;
    --tint3: #3a4c86;
    --nav-bg: rgba(11, 15, 26, 0.88);

    --paid-bg: var(--tint);
    --paid-ink: var(--ink2);
    --paid-head: var(--ink);

    --foot-bg: var(--bg2);
    --foot-ink: var(--ink2);
    --foot-head: var(--ink3);
    --foot-link: var(--ink);
    --foot-link-hover: var(--accent2);
    --foot-line: var(--line);
    --foot-mark: var(--accent);

    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(108, 140, 255, 0.22);
    --shadow-btn-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(108, 140, 255, 0.28);

    --chev: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23a9b2c7\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"/></svg>");
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A long word in a language that has them — Malayalam, Tamil, German — wraps inside its
     column rather than widening it; the grid tracks are minmax(0, …) for the same reason. */
  overflow-wrap: break-word;
}

/* height:auto, so the width and height attributes on the store badges reserve their shape
   without being taken literally. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent2); }

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

/* ---------------------------------------------------------------- type */

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1, h2 { font-weight: 800; }

h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

h3 {
  font-size: clamp(23px, 2.5vw, 31px);
  line-height: 1.14;
  letter-spacing: -0.022em;
}

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--ink2);
  margin: 20px 0 0;
  max-width: 34em;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 70px;
  /* The language panel hangs off this, so it can span the page rather than the button. */
  position: relative;
}

/* ---------------------------------------------------------------- language picker */

.lang { position: static; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lang-btn:hover { border-color: var(--tint3); color: var(--ink); }
.lang-btn:focus-visible { outline: 3px solid var(--tint3); outline-offset: 2px; }
.lang-btn .chev { transition: transform 0.18s ease; }
.lang-btn[aria-expanded="true"] { border-color: var(--tint3); color: var(--ink); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Full width of the page, not of the button: fifty-nine languages in a column would be a
   scroll bar inside a scroll bar, and five columns puts every one of them on screen at once. */
.lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  z-index: 30;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 16px;
  /*
    Tall enough for all twelve rows of the grid — five columns of 59 languages, at about 53px a
    row, is roughly 670px plus the padding. A scrollbar inside a picker makes the bottom two rows
    look like something went wrong rather than like more choices. overflow-y stays as the floor:
    on a genuinely short window the list has to give somewhere, and scrolling is better than
    clipping the last row off with no way to reach it.
  */
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px 8px;
}

.lang-item {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.lang-item:hover { background: var(--tint2); }
.lang-item:focus-visible { outline: 3px solid var(--tint3); outline-offset: -1px; }

.lang-item .native {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-item .english {
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-item[aria-current="true"] { background: var(--tint); }
.lang-item[aria-current="true"] .native { color: var(--accent2); }
.lang-item[aria-current="true"] .english { color: var(--accent2); opacity: 0.75; }

@media (max-width: 980px) {
  .lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-panel { padding: 12px; max-height: 62vh; }
  .lang-btn { padding: 0 12px; }
  /* The label goes; the globe and the chevron are enough, and the row is tight at this width. */
  .lang-btn #langCurrent { display: none; }
}

/* ---------------------------------------------------------------- the mark */

/* The app's mark: a rounded shield carrying a six-dot code, the same path as AppMark in the
   apps. The shield takes the accent and the dots the text-on-accent color, so it survives both
   themes; the footer swaps them where its ground is the accent itself. */
.mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.mark .shield, .mark .bow { stroke: var(--accent); }
.mark .lock { fill: var(--accent); }

/* Logical, not physical, here and everywhere below that offsets one side: Arabic, Hebrew, Urdu
   and Persian flip the page, and a margin-left in a right-to-left row pushed the links up against
   the wordmark with the empty space on the wrong side. */
.nav-links {
  display: flex;
  gap: 24px;
  margin-inline-start: auto;
  align-items: center;
}

/* Direct children only: the language panel lives inside .nav-links too, and a rule for every link
   in it hid all fifty-nine language entries on any window narrow enough to hide the four page
   links — the panel opened as an empty strip.
   :not(.btn), because `.nav-links a` outranks `.btn` and would paint the call to action's label
   in body gray on an accent pill. */
.nav-links > a:not(.btn) {
  color: var(--ink2);
  text-decoration: none;
  font-size: 15px;
  /* A link that wraps to two lines in the header reads as two links. */
  white-space: nowrap;
}

.nav-links > a:not(.btn):hover { color: var(--ink); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
  cursor: pointer;
  /* A pill has a fixed height, so a label that wraps spills straight out of it. */
  white-space: nowrap;
  box-shadow: var(--shadow-btn);
  transition: transform 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.btn:hover {
  background: var(--accent2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

.btn:focus-visible { outline: 3px solid var(--tint3); outline-offset: 2px; }

.btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}

.btn.ghost:hover { background: var(--tint2); transform: none; box-shadow: none; }

.btn.small { height: 44px; padding: 0 20px; font-size: 15px; }

/* ---------------------------------------------------------------- hero */

/* One flat color, the app's second ground. No screenshots on the site while the app is still
   changing, so the words take the measure on their own. */
.hero {
  position: relative;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
}

.hero .wrap {
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero .wrap > div { max-width: 40em; }

.hero h1 { color: var(--ink); }
.hero .lede { color: var(--ink2); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}

.cta-note {
  font-size: 14.5px;
  color: var(--ink3);
  margin-top: 16px;
}

/* ---------------------------------------------------------------- store badges */

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.badges img { height: 48px; width: auto; }

.badges a {
  display: inline-flex;
  border-radius: 9px;
  transition: transform 130ms ease;
}

.badges a:hover { transform: translateY(-2px); }

/* One point per line. A grid puts every tick on the same left edge at every width, which is the
   whole job of a tick. */
.hero-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.hero-points li {
  display: grid;
  grid-template-columns: 17px auto;
  align-items: start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink2);
}

/* Aligned to the cap height of the first line rather than to the middle of the block, so a point
   that wraps keeps its tick beside the first word instead of floating to the center. */
.hero-points svg { flex: none; margin-top: 3px; }

/* Every tick on the page is drawn in currentColor and colored here, so the dark theme's accent
   reaches it without a second SVG. */
.tick { color: var(--accent); }

/* ---------------------------------------------------------------- sections */

section { padding: 104px 0; }

section.tint { background: var(--bg2); border-block: 1px solid var(--line); }

.section-head { max-width: 40em; }

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

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
  counter-reset: step;
}

.step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 18px;
}

.step h3 { font-size: 21px; letter-spacing: -0.01em; }
.step p { margin: 8px 0 0; color: var(--ink2); font-size: 15.5px; }

/* ---------------------------------------------------------------- features */

.feature { max-width: 40em; }

.feature + .feature { margin-top: 88px; }

.feature p { color: var(--ink2); margin: 18px 0 0; font-size: 17.5px; text-wrap: pretty; }

.feature ul { margin: 22px 0 0; padding: 0; list-style: none; }

.feature li {
  position: relative;
  padding-inline-start: 30px;
  margin-bottom: 11px;
  color: var(--ink2);
  font-size: 16.5px;
  /* Stated rather than inherited, because the two dots below are placed against it. */
  line-height: 1.55;
}

/* Both dots are centered on the first line box: half of 16.5 x 1.55 is 12.8, so the 18px ring
   starts at 12.8 - 9 and the 8px center at 12.8 - 4. Written out because the next person to
   change the font size has to move these with it. */
.feature li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tint);
}

.feature li::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------- gallery */

/* A grid of six short points, one per screen the app has. The screenshots that used to sit above
   them come back when the app stops changing. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 32px;
  margin-top: 56px;
}

.gallery-item {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 26em;
}

.gallery-item b {
  display: block;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
}

.gallery-item span { color: var(--ink2); font-size: 15.5px; }

/* ---------------------------------------------------------------- band */

.band {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
  box-shadow: var(--shadow-card);
}

.band h2 { color: var(--ink); }
.band p { color: var(--ink2); margin: 18px 0 0; font-size: 17.5px; }

.band ul { list-style: none; margin: 0; padding: 0; }

.band li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink2);
}

.band li:last-child { border-bottom: 0; }
.band li svg { flex: none; margin-top: 4px; }

/* ---------------------------------------------------------------- pricing */

/* Two plans — Premium, and Premium+ with the private connection — so two cards, each at the width
   a card has in HeartGlance's row of four and centered as a pair: a card the width of the page
   reads as a banner, not a price. */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  justify-content: center;
  gap: 18px;
  margin-top: 48px;
}

.plan {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.plan.best {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--tint), var(--shadow-card);
}

.plan .name { font-weight: 700; font-size: 17px; }
.plan .price { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.plan .per { color: var(--ink2); font-size: 14.5px; }
.plan .note { color: var(--ink2); font-size: 14.5px; margin-top: 14px; }

.plan .best-tag {
  align-self: flex-start;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.compare {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.compare > div {
  border-radius: var(--r-md);
  padding: 26px 28px;
  font-size: 15.5px;
  color: var(--ink2);
}

.compare .free { background: var(--bg); border: 1px solid var(--line); }
.compare .paid { background: var(--paid-bg); color: var(--paid-ink); }

.compare h4 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.compare .paid h4 { color: var(--paid-head); }

/* The sentence under the two columns. Smaller than them and not in a box: it is the qualifier on
   what they just said, and a third card would read as a third tier. */
.fineprint {
  margin: 18px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink3);
}

/* ---------------------------------------------------------------- disclaimer */

/* No rule down the left edge. A colored bar is the visual language of a warning, and the thing
   it marks is a plain statement of what the app is not. */
.disclaimer {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--tint2);
  padding: 24px 26px;
  color: var(--ink2);
  font-size: 15.5px;
  text-align: start;
}

.disclaimer strong { color: var(--ink); }

/* ---------------------------------------------------------------- footer */

footer {
  background: var(--foot-bg);
  padding: 56px 0 68px;
  color: var(--foot-ink);
  font-size: 15px;
  border-top: 1px solid var(--foot-line);
}

footer .mark { color: var(--foot-link-hover); }

/* On an accent ground the accent shield would vanish, so the footer swaps the two colors: a
   white shield with accent dots in the light theme, the ordinary mark in the dark one. */
footer .mark .shield, footer .mark .bow { stroke: var(--foot-mark); }
footer .mark .lock { fill: var(--foot-mark); }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}

footer h4 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foot-head);
  margin: 0 0 14px;
}

footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 10px; }
footer a { color: var(--foot-link); text-decoration: none; }
footer a:hover { color: var(--foot-link-hover); text-decoration: underline; }

.foot-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--foot-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--foot-ink);
}

/* ---------------------------------------------------------------- legal pages */

.legal { padding: 72px 0 100px; }

.legal .wrap { max-width: 760px; }

.legal h1 { font-size: clamp(34px, 4.2vw, 48px); }

.legal .updated { color: var(--ink3); font-size: 15px; margin-top: 12px; }

.legal .intro { margin-top: 26px; font-size: 19px; color: var(--ink); }

.legal h2 { font-size: 26px; margin-top: 48px; }

.legal h3 { font-size: 19px; margin-top: 30px; margin-bottom: 0; }

.legal p, .legal li { color: var(--ink2); }

.legal strong { color: var(--ink); }

.legal ul { padding-inline-start: 22px; }

.legal li { margin-bottom: 9px; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 15px;
}

.legal th, .legal td {
  text-align: start;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal th { color: var(--ink); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.legal td { color: var(--ink2); }

.legal .strong { font-weight: 700; color: var(--ink); }

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 22px;
  margin-top: 14px;
  background: var(--bg);
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 0;
  color: var(--ink);
  list-style: none;
}

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

.faq summary::before {
  content: "+";
  color: var(--accent);
  font-weight: 700;
  margin-inline-end: 12px;
}

.faq[open] summary::before { content: "–"; }

.faq p { margin-top: 0; padding-bottom: 16px; }

/* ---------------------------------------------------------------- contact form */

.contact {
  margin-top: 28px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

.contact .field { margin-top: 18px; }
.contact .field:first-child { margin-top: 0; }

.contact .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.contact .field-row > .field { margin-top: 0; }

.contact label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
}

.contact .optional {
  font-weight: 400;
  color: var(--ink3);
  margin-inline-start: 6px;
}

.contact input,
.contact select,
.contact textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.contact textarea { resize: vertical; min-height: 150px; line-height: 1.5; }

.contact input:focus,
.contact select:focus,
.contact textarea:focus {
  outline: none;
  border-color: var(--tint3);
  box-shadow: 0 0 0 3px var(--tint);
}

.contact select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 44px;
  background-image: var(--chev);
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* background-position has no logical keywords, so the chevron is moved by hand when lang.js has
   turned the page around; otherwise it sat under the first word of the chosen topic. */
[dir="rtl"] .contact select { background-position: left 16px center; }

.contact .actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.contact .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.contact .status { margin: 0; font-size: 15px; color: var(--ink2); }
.contact .status.good { color: var(--good); }
.contact .status.bad { color: var(--bad); }

.contact .how {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: var(--ink3);
}

@media (max-width: 640px) {
  .contact { padding: 22px 18px; }
  .contact .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 64px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .feature + .feature { margin-top: 64px; }
  .band { grid-template-columns: minmax(0, 1fr); padding: 38px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The brand block is wider than a link column, so at two columns it takes the row rather than
     leaving a hole beside Product. */
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  section { padding: 72px 0; }
}

/*
  Below about 880px the four links, the globe and the call to action no longer fit on one line
  beside the mark, and a flex row that runs out of room wraps. The same links are in the footer,
  and the page's own sections carry their own calls to action, so the links go before anything
  else does.
*/
@media (max-width: 880px) {
  .nav-links > a:not(.btn) { display: none; }
}

@media (max-width: 620px) {
  /*
    Hiding the four links is not enough on a phone. What is left — the wordmark, the globe and
    "Get the app" — comes to more than a 375px window can hold at the desktop spacing, and a
    header that overflows pushes the whole page sideways. The savings are taken from the spacing
    rather than from anything you can read.
  */
  .nav .wrap { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .nav-links { gap: 10px; }
  .nav-links .btn.small { padding: 0 13px; }
  .nav .mark { font-size: 17px; gap: 7px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .band { padding: 28px 24px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .cta-row .btn { width: 100%; }
  .badges { justify-content: center; }
}

/*
  The wordmark is the last thing that will not fit, so below 350px the shield goes on alone. It
  is still a link home and still identifies the site, and losing it beats losing the call to
  action or letting the page scroll sideways. The footer keeps its wordmark, where there is room.
*/
@media (max-width: 350px) {
  .nav .mark .wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}