/* ==========================================================================
   MobContact - public site
   Single stylesheet. No framework, no CDN, no web fonts.
   Light + dark, fluid from 360px up.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------- */

:root {
  --paper: #F1F3F1;
  --paper-2: #E8EBE8;
  --card: #FAFBFA;

  --ink: #15191A;
  --ink-2: #4A524F;
  --ink-3: #75867D;

  --line: #CBD1CC;
  --line-2: #DDE1DD;

  --green: #1F8A5B;
  --green-ink: #14603F;
  --green-wash: #E4EFE9;
  --on-green: #fff;

  --r-1: 6px;
  --r-2: 12px;
  --r-3: 14px;
  --r-pill: 999px;

  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-1: 0 1px 2px rgba(21, 25, 26, .05);
  --shadow-2: 0 12px 32px -18px rgba(21, 25, 26, .35);

  --wrap: 1140px;
  --gutter: clamp(16px, 4vw, 40px);

  color-scheme: light;
}

/* dark for people on the system default (no explicit choice stored) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C1311;
    --paper-2: #131C18;
    --card: #101915;

    --ink: #E9F1EC;
    --ink-2: #A8BBB0;
    --ink-3: #79817D;

    --line: #26352E;
    --line-2: #1D2A24;

    --green: #2FA76F;
    --green-ink: #52C795;
    --green-wash: #15291F;
    --on-green: #06130D;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 12px 32px -18px rgba(0, 0, 0, .8);

    color-scheme: dark;
  }
}

/* dark chosen explicitly - wins in both directions */
:root[data-theme="dark"] {
  --paper: #0C1311;
  --paper-2: #131C18;
  --card: #101915;

  --ink: #E9F1EC;
  --ink-2: #A8BBB0;
  --ink-3: #79817D;

  --line: #26352E;
  --line-2: #1D2A24;

  --green: #2FA76F;
  --green-ink: #52C795;
  --green-wash: #15291F;
  --on-green: #06130D;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 12px 32px -18px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* --- reset --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--green-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }

button { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line-2); margin: 0; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- layout primitives --------------------------------------------------- */

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

.section { padding-block: clamp(56px, 9vw, 104px); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line-2); }

.section-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.5rem);
  margin-bottom: 14px;
}
.section-head p {
  color: var(--ink-2);
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  max-width: 40rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--green);
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 100;
  background: var(--green);
  color: var(--on-green);
  padding: 10px 18px;
  border-radius: var(--r-1);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: var(--on-green); }

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--primary { background: var(--green); border-color: var(--green); color: var(--on-green); }
.btn--primary:hover { background: var(--green-ink); border-color: var(--green-ink); color: var(--on-green); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--green); color: var(--green-ink); background: var(--green-wash); }

.btn--quiet { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.btn--quiet:hover { border-color: var(--line); color: var(--ink); }

.btn--wide { width: 100%; }

.btn-note { font-size: .84rem; color: var(--ink-3); }

/* --- site header --------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-head[data-stuck="true"] { border-bottom-color: var(--line-2); }

@supports not (backdrop-filter: blur(4px)) {
  .site-head { background: var(--paper); }
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand svg { height: 30px; width: auto; display: block; }
.brand:hover { color: var(--ink); }

.site-nav { margin-inline-start: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: .93rem;
  font-weight: 550;
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); background: var(--paper-2); }

/* the call to action is a real button in the header bar on wide screens, so
   the duplicate nav entry only exists in the collapsed mobile menu */
.site-nav .nav-cta { display: none; }

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

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--line); }
.icon-btn svg { width: 18px; height: 18px; }

.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
}

.nav-toggle { display: none; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .close-glyph { display: none; }
.nav-toggle[aria-expanded="true"] .close-glyph { display: block; }
.nav-toggle[aria-expanded="true"] .open-glyph { display: none; }

@media (max-width: 900px) {
  .head-inner { min-height: 60px; }
  .nav-toggle { display: inline-flex; }
  .head-actions { margin-inline-start: auto; }
  .head-actions .btn { display: none; }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background: var(--card);
    border-block: 1px solid var(--line-2);
    box-shadow: var(--shadow-2);
  }
  .site-nav[hidden] { display: none; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
  }
  .site-nav li + li { border-top: 1px solid var(--line-2); }
  .site-nav a { padding: 14px 4px; border-radius: 0; font-size: 1rem; }
  .site-nav a:hover { background: transparent; }
  .site-nav .nav-cta {
    display: block;
    margin-top: 14px;
    border-top: 0;
  }
  .site-nav .nav-cta a {
    background: var(--green);
    color: var(--on-green);
    border-radius: var(--r-pill);
    text-align: center;
    font-weight: 600;
  }
  .site-nav .nav-cta a:hover { background: var(--green-ink); color: var(--on-green); }
}

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

.hero {
  padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 100px);
  border-bottom: 1px solid var(--line-2);
  background:
    radial-gradient(120% 90% at 88% -10%, var(--green-wash) 0%, transparent 55%),
    var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.1rem, 1.1rem + 4.3vw, 3.6rem);
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--green-ink); }

.hero-lede {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.22rem);
  color: var(--ink-2);
  max-width: 34rem;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  font-size: .88rem;
  color: var(--ink-3);
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts svg { width: 15px; height: 15px; color: var(--green); flex: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-lede { max-width: none; }
}

/* --- the lookup panel (hero visual) -------------------------------------- */

.lookup {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.lookup-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
}
.lookup-bar > svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.lookup-number {
  font-family: var(--mono);
  font-size: clamp(.92rem, .85rem + .3vw, 1.05rem);
  letter-spacing: .01em;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -.18em;
  background: var(--green);
  margin-inline-start: 2px;
  animation: blink 1.15s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.lookup-chip {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-ink);
  background: var(--green-wash);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  flex: none;
}

.lookup-results { list-style: none; }
.lookup-results li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.lookup-results li + li { border-top: 1px solid var(--line-2); }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .02em;
  background: var(--green-wash);
  color: var(--green-ink);
}
.avatar--flag { background: color-mix(in srgb, #C0492F 16%, var(--card)); color: #C0492F; }
:root[data-theme="dark"] .avatar--flag { background: #2A1512; color: #E88A73; }

.res-name { font-weight: 600; font-size: .96rem; }
.res-meta {
  font-size: .8rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--ok { background: var(--green-wash); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green-ink); }
.tag--flag { background: color-mix(in srgb, #C0492F 12%, var(--card)); border-color: color-mix(in srgb, #C0492F 35%, transparent); color: #A83E28; }
:root[data-theme="dark"] .tag--flag { background: #2A1512; border-color: #4A2018; color: #E88A73; }

.lookup-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--line-2);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .78rem;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: .04em;
}

.meter {
  flex: 1 1 90px;
  height: 4px;
  max-width: 140px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

@media (max-width: 420px) {
  .lookup-results li { grid-template-columns: 34px minmax(0, 1fr); }
  .lookup-results .tag { grid-column: 2; justify-self: start; }
  .avatar { width: 34px; height: 34px; font-size: .72rem; }
  .lookup-foot { flex-wrap: wrap; }
}

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

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
  list-style: none;
  counter-reset: step;
}
.steps li {
  background: var(--card);
  padding: clamp(24px, 3vw, 34px);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--green);
  margin-bottom: 18px;
}
.steps h3 { font-size: 1.12rem; margin-bottom: 10px; }
.steps p { color: var(--ink-2); font-size: .95rem; }

@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* --- capability cards ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 18px;
  list-style: none;
}
.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--shadow-1);
}
.card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: .94rem; }

.card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-2);
  background: var(--green-wash);
  color: var(--green-ink);
  margin-bottom: 18px;
}
.card-icon svg { width: 19px; height: 19px; }

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

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
  list-style: none;
}
.numbers li {
  background: var(--card);
  padding: clamp(22px, 2.6vw, 32px);
}
.numbers-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.numbers-value {
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.numbers li > p:last-child { margin-top: 10px; font-size: .87rem; color: var(--ink-2); }

/* --- plans --------------------------------------------------------------- */

.plans > li { display: flex; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  list-style: none;
  align-items: start;
}

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.plan--featured {
  border-color: var(--green);
  box-shadow: var(--shadow-2);
}

.plan-flag {
  position: absolute;
  top: -11px;
  left: clamp(24px, 2.6vw, 32px);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--green);
  color: var(--on-green);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.plan-term {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan h3 { font-size: 1.3rem; margin-top: 6px; }

.plan-tiers { list-style: none; display: grid; gap: 12px; }
.plan-tiers li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
}
.plan-tiers li:last-child { border-bottom: 0; padding-bottom: 0; }
.tier-name { font-weight: 600; font-size: .95rem; }
.tier-name small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-3); }
.tier-price {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.tier-price sup { font-size: .7em; font-weight: 500; color: var(--ink-3); }

.plan-foot { margin-top: auto; }

.plan-includes {
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: .9rem;
  color: var(--ink-2);
}
.plan-includes li { display: flex; gap: 10px; align-items: flex-start; }
.plan-includes svg { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 4px; }

/* --- get the app --------------------------------------------------------- */

.get-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.get-card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-1);
}
.get-card h3 { font-size: 1.15rem; }
.get-card p { color: var(--ink-2); font-size: .94rem; }
.get-card .btn { align-self: flex-start; }
.get-meta {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- faq ----------------------------------------------------------------- */

.faq { max-width: 46rem; }
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq details:first-of-type { border-top: 1px solid var(--line-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--green-ink); }
.faq .answer { padding: 0 4px 22px; color: var(--ink-2); max-width: 44rem; }

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

.site-foot {
  background: var(--paper-2);
  border-top: 1px solid var(--line-2);
  padding-block: clamp(44px, 6vw, 72px) 28px;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
/* Three link columns are too narrow beside the brand on a tablet, so the brand
   takes its own row first and the columns keep their width. */
@media (max-width: 980px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-brand { grid-column: auto; }
}

.foot-brand svg { height: 30px; width: auto; color: var(--ink); }
.foot-brand p { margin-top: 14px; color: var(--ink-2); font-size: .92rem; max-width: 30rem; }

.foot-col h2 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.foot-col ul { list-style: none; display: grid; gap: 10px; }
.foot-col a { color: var(--ink-2); text-decoration: none; font-size: .93rem; }
.foot-col a:hover { color: var(--green-ink); text-decoration: underline; }

.foot-bar {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: .85rem;
  color: var(--ink-3);
}

/* ==========================================================================
   Document pages (privacy policy, terms of service)
   Those two templates still carry their own long-form markup and a handful of
   grid/spacing class names.  Neutralise the class names and give the document
   plain, readable typography instead of pulling a framework back in.
   ========================================================================== */

.doc { padding-block: clamp(44px, 6vw, 80px); }

.doc .container {
  width: 100%;
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.doc .row,
.doc .col,
.doc .grid,
.doc .single-news,
.doc .info,
.doc .content {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  text-align: start !important;
}
.doc .content { margin-top: 0 !important; }

.doc h3, .doc h4, .doc h5 { margin-block: 1.6em .5em; }
.doc h4 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); margin-top: 0; }
.doc h3 { font-size: 1.15rem; letter-spacing: 0; }
.doc p { margin-block: 1em; color: var(--ink-2); }
.doc ul, .doc ol { margin-block: 1em; padding-inline-start: 1.3em; color: var(--ink-2); }
.doc li { margin-block: .4em; }
.doc pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
}
.doc a { word-break: break-word; }

/* legacy spacing helpers used by those two documents */
.doc .p-t-1 { padding-top: .5rem; }
.doc .p-t-2 { padding-top: 1rem; }
.doc .p-b-1 { padding-bottom: .5rem; }
.doc .p-b-2 { padding-bottom: 1rem; }
.doc .p-tb-1 { padding-block: .5rem; }
.doc .p-tb-2 { padding-block: 1rem; }
.doc .center-align { text-align: start !important; }
.doc .hide { display: none; }

/* ── language switcher ────────────────────────────────────────────────────
   A <details> element, so it opens without JavaScript and every option is a
   real link. The two-letter chip is a COUNTRY code (English → GB, Arabic → SA),
   which is why it comes from the langs.flag column and not the language code. */
.langsw { position: relative; }
.langsw > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 8px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--card); color: var(--ink);
  font-size: .86rem; font-weight: 600; cursor: pointer; list-style: none;
  user-select: none; transition: border-color .12s, background .12s;
}
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary:hover { border-color: var(--green); }
.langsw > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.langsw[open] > summary { border-color: var(--green); background: var(--green-wash); }
.langsw-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 2px 5px; border-radius: var(--r-1);
  background: var(--green-wash); color: var(--green-ink);
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.langsw-caret { width: 15px; height: 15px; color: var(--ink-3); transition: transform .15s; }
.langsw[open] .langsw-caret { transform: rotate(180deg); }

.langsw-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 232px; margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-3); box-shadow: var(--shadow-2);
  max-height: min(70vh, 460px); overflow-y: auto;
}
.langsw-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-2);
  color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.langsw-menu a:hover { background: var(--green-wash); }
.langsw-menu a.is-on { background: var(--green); color: var(--on-green); font-weight: 650; }
.langsw-menu a.is-on .langsw-code { background: rgba(255,255,255,.22); color: var(--on-green); }

/* right-to-left: mirror the menu and the whole document flow */
[dir="rtl"] .langsw-menu { right: auto; left: 0; }
/* A LOGO NEVER MIRRORS. The lockup is one SVG whose glyphs are drawn
   left to right; inheriting direction:rtl reorders the inline box and
   drops the mark on top of the wordmark - which is exactly what the
   Arabic header did on 2026-09-13. */
.brand, .brand svg, .foot-brand svg { direction: ltr; }
/* Keep the brand from being squeezed out of the header at any width. */
.brand { flex: 0 0 auto; min-width: 0; }
.head-inner { flex-wrap: nowrap; }
[dir="rtl"] .hero-grid, [dir="rtl"] .get-grid { direction: rtl; }
/* ⚠ REMOVED 2026-09-13, and it was actively breaking the Arabic page.
   These two rules were written for an absolutely-positioned step number.
   `.steps li::before` is `display: block` in normal flow, so `right/left` did
   nothing - while `padding-inline: 0 56px` DID override the `padding: clamp()`
   shorthand on the sides, leaving every Arabic step card with zero padding at
   the start edge. A stale override that silently deletes layout. */

/* --- Arabic / RTL typography --------------------------------------------- */

/* ⚠ LETTER-SPACING BREAKS ARABIC. The script is cursive: letters JOIN, and
   adding tracking pulls the joins apart so a word renders as disconnected
   glyphs. Latin eyebrows and labels here carry up to .16em, which is right for
   uppercase Latin and wrong for every Arabic string in the same class. There is
   no way to scope this per-word, so it is scoped per-document: under dir="rtl"
   every tracked class returns to normal. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .numbers-label,
[dir="rtl"] .plan-term,
[dir="rtl"] .get-meta,
[dir="rtl"] .tag,
[dir="rtl"] .plan-flag,
[dir="rtl"] .foot-col h2,
[dir="rtl"] .lookup-chip,
[dir="rtl"] .hero-facts dt,
[dir="rtl"] .steps li::before,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  letter-spacing: normal;
}

/* The mono stack has no Arabic coverage, so a mono label falls back to an
   arbitrary system face and the eyebrows stop matching each other. Arabic text
   in those slots takes the body stack instead. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .numbers-label,
[dir="rtl"] .plan-term,
[dir="rtl"] .get-meta,
[dir="rtl"] .hero-facts dt,
[dir="rtl"] .foot-col h2 {
  font-family: var(--sans);
}

/* uppercase does nothing to Arabic but does strip the visual rhythm the Latin
   design relies on; drop it so the two scripts do not disagree about weight. */
[dir="rtl"] .eyebrow, [dir="rtl"] .numbers-label,
[dir="rtl"] .plan-term, [dir="rtl"] .get-meta,
[dir="rtl"] .hero-facts dt { text-transform: none; }

/* Arabic ascenders/descenders need more room than Latin at the same size. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1 { line-height: 1.35; }
[dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.4; }

/* The eyebrow rule is a decorative leader; it must sit on the start edge. */
[dir="rtl"] .eyebrow { flex-direction: row; }

/* Numerals stay LTR inside RTL text: "1,204" and "+1 415 555 0148" are Latin
   digit runs and the bidi algorithm otherwise reorders the groups. */
[dir="rtl"] .lookup-number,
[dir="rtl"] .tier-price,
[dir="rtl"] .numbers-value,
[dir="rtl"] .lookup-foot { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 720px) {
  .langsw-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
}

/* --- language switcher ---------------------------------------------------
   templates/langswitch.php renders a <details> so it works without
   JavaScript.  Styled here, in the site stylesheet, because it sits inside
   the header this file lays out. */

.langsw { position: relative; flex: none; }

.langsw > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary:hover { border-color: var(--line); }

.langsw-code {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 3px 5px;
  border-radius: var(--r-1);
  background: var(--green-wash);
  color: var(--green-ink);
}
.langsw-cur {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.langsw-caret {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
  transition: transform .18s ease;
}
.langsw[open] > summary .langsw-caret { transform: rotate(180deg); }

.langsw-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  max-height: min(60vh, 380px);
  overflow-y: auto;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
.langsw-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-1);
  color: var(--ink-2);
  font-size: .9rem;
  text-decoration: none;
}
.langsw-menu a:hover { background: var(--paper-2); color: var(--ink); }
.langsw-menu a.is-on { color: var(--green-ink); font-weight: 600; }
.langsw-menu a.is-on .langsw-code { background: var(--green); color: var(--on-green); }

@media (max-width: 480px) {
  .langsw > summary { padding: 0 9px; gap: 5px; }
  .langsw-cur { display: none; }
  /* the menu is wider than the control it hangs off, so on a narrow screen
     pin it to the viewport rather than letting it run off the right edge */
  .langsw-menu { min-width: 0; width: max-content; max-width: calc(100vw - 24px); }
}

/* ── hero spec row ────────────────────────────────────────────────────────
   Four facts as a definition list rather than a tick-list: these are
   specifications, not selling points, and a reader scanning for "does it run on
   my phone" should find it without reading a sentence. */
.hero-facts--spec {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.hero-facts--spec > div { padding-inline: 18px; border-left: 1px solid var(--line-2); }
.hero-facts--spec > div:first-child { padding-inline-start: 0; border-left: 0; }
.hero-facts--spec dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.hero-facts--spec dd { margin: 0; }
.hero-facts--spec strong {
  display: block; font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em;
  color: var(--ink); margin-bottom: 4px;
}
.hero-facts--spec span { display: block; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 900px) {
  .hero-facts--spec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hero-facts--spec > div:nth-child(odd) { padding-inline-start: 0; border-left: 0; }
}
@media (max-width: 460px) {
  .hero-facts--spec { grid-template-columns: 1fr; }
  .hero-facts--spec > div { padding-inline: 0; border-left: 0; }
}

/* ==========================================================================
   Forms (templates/pages/report.php)
   The stylesheet had no form styling at all before this, so these are new
   classes rather than a re-use of existing ones.  Everything is built from the
   tokens above; the one thing missing from them was a colour for "this is
   wrong", which is defined here in all three theme states so a field error is
   legible whether the viewer is on light, on dark, or on the system default.
   ========================================================================== */

:root { --danger: #B3261E; --danger-wash: #FBEAE8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --danger: #F2857C; --danger-wash: #2A1614; }
}
:root[data-theme="dark"] { --danger: #F2857C; --danger-wash: #2A1614; }

.report-form { max-width: 54rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
}
.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field > label { font-size: .89rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--green-ink); }
.field .hint { margin: 0; font-size: .82rem; color: var(--ink-3); }
.field-err { margin: 0; font-size: .82rem; font-weight: 600; color: var(--danger); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 11px 12px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }

/* The native arrow is drawn in the OS accent colour and reads as a foreign
   object on a dark page, so draw our own in currentColor instead. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375867D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-3); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-wash);
}

.field.is-bad > label { color: var(--danger); }
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea { border-color: var(--danger); background: var(--danger-wash); }
.field.is-bad input:focus-visible,
.field.is-bad select:focus-visible,
.field.is-bad textarea:focus-visible { box-shadow: 0 0 0 3px var(--danger-wash); }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.form-foot .btn { flex: none; }
.form-note {
  margin: 0;
  flex: 1 1 20rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.form-note .req { color: var(--green-ink); }

/* Honeypot.  Off-screen rather than display:none, because some form fillers
   skip anything that is not rendered - and a trap nothing falls into catches
   nothing.  aria-hidden and tabindex="-1" in the markup keep it away from
   assistive technology and from the tab order. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- notices -------------------------------------------------------------- */

.notice {
  max-width: 54rem;
  margin-bottom: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r-2);
  background: var(--card);
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice h3 { font-size: 1.05rem; margin: 0 0 8px; }
.notice p { margin: 0 0 10px; color: var(--ink-2); font-size: .93rem; }
.notice ul { margin: 0; padding-inline-start: 1.2em; color: var(--ink-2); font-size: .93rem; }
.notice li { margin-block: .3em; }

.notice--ok { border-color: var(--green); background: var(--green-wash); }
.notice--ok h3 { color: var(--green-ink); }
.notice--ok .btn { margin-top: 6px; }

.notice--bad { border-color: var(--danger); background: var(--danger-wash); }
.notice--bad h3 { color: var(--danger); }
.notice--bad a { color: var(--danger); }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-foot .btn { width: 100%; }
}


/* ==========================================================================
   Unlist form (templates/pages/unlist.php)
   Re-uses the form system above.  Only three things were missing from it: a
   checkbox row, a monospace treatment for the number echoed back in the
   confirmation, and two restatements - the unlist page is a document page, so
   `.doc p` (0,1,1) out-specifies `.form-note` and `.field .hint`'s margin and
   colour would be quietly overridden by the document typography.
   ========================================================================== */

.unlist-form { max-width: 54rem; }

.doc .form-note { margin: 0; color: var(--ink-3); }
.doc .field .hint,
.doc .field-err { margin: 0; }
.doc .notice p:last-child { margin-bottom: 0; }

/* A checkbox row: the control keeps its own size and sits on the first line of
   the label, which wraps beside it rather than under it. */
.field > label.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.field > label.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 0;
  flex: none;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--green);
  cursor: pointer;
}
.field.is-bad > label.form-check { color: var(--danger); }
.field.is-bad > label.form-check input[type="checkbox"] { outline: 2px solid var(--danger); outline-offset: 2px; }

/* The number read back on the confirmation.  Monospace and unbreakable, so a
   visitor can check digit by digit that we recorded what they meant. */
.unlist-num {
  font-family: var(--mono);
  font-size: .97em;
  letter-spacing: .02em;
  white-space: nowrap;
  unicode-bidi: isolate;
  direction: ltr;
}