/* SyncSocialFlow public site — one stylesheet, no build step, no external fonts.

   ONE VISUAL IDENTITY WITH THE PRODUCT.
   Every colour below is a colour the app already paints with. The app itself is
   dark (frontend/src/styles.css); its own public landing page
   (frontend/src/landing.css) carries that palette into a light theme for
   strangers arriving from a forwarded link. This file is the third surface of
   that same system and takes its values from landing.css's --lp-* layer
   verbatim, so crossing from this site into the product is not a change of
   brand — it is the same greens, greys and ink on a different page.

   Light is still the default here, with a full dark mode for people whose OS
   asks for one. There is no toggle on this site — the OS decides — which is
   why both palettes below are complete rather than one being a tint of the
   other. The two palettes are the same two the app's landing page ships.

   Token map to frontend/src/landing.css:
     --paper --surface --surface-2 → --lp-bg  --lp-surface  --lp-band
     --ink   --ink-2   --ink-3     → --lp-ink --lp-dim      --lp-faint
     --rule                        → --lp-line
     --accent --accent-soft        → --lp-accent --lp-accent-soft
     --on-accent                   → --lp-accent-ink
     --focus                       → --lp-violet  (the app's focus ring)
     --flag                        → --lp-amber   (the app's warn colour)
   The two tokens with no counterpart there are noted where they are declared. */

/* ---------- tokens ---------- */
:root {
  --paper:        #fbfaf7;   /* warm paper, not #fff — white glares on a phone */
  --surface:      #ffffff;
  --surface-2:    #f3f2ed;   /* one step off the page: tinted bands, wells */
  --ink:          #111519;
  --ink-2:        #4f5a67;
  --ink-3:        #626c78;
  --rule:         #e3e1da;
  /* No --lp- counterpart: the app has one hairline, this site also needs a
     heavier one for input borders, kbd caps and the dashed setup box. It is a
     step down from --rule in the same warm family, not a new hue. */
  --rule-strong:  #cfcbbf;
  --accent:       #0b7a41;   /* the app green, re-solved for paper: 5.4:1 */
  --accent-hover: #0c6e3c;   /* = accent mixed 88% with --ink, as landing.css */
  --accent-text:  #0b7a41;
  --accent-soft:  #eaf5ee;
  --on-accent:    #ffffff;
  --flag:         #8a6300;   /* the app's amber, re-solved for paper */
  --flag-soft:    #f7f0dd;   /* No --lp- counterpart: amber at band strength. */
  --focus:        #6d3fd4;   /* violet, so a focus ring never reads as accent */

  /* One family, sans, everywhere — the app has no serif and neither does this.
     --font-display still exists so headings keep their own weight and tracking
     without every rule having to restate the stack. */
  --font-display: -apple-system, "Segoe UI", Roboto, Inter, system-ui, Arial, sans-serif;
  --font-sans:    -apple-system, "Segoe UI", Roboto, Inter, system-ui, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1160px;            /* = landing.css --max, so the columns line up */
  --gut:  clamp(1.15rem, 4vw, 2.5rem);

  --radius:     10px;        /* cards and panels — the app's .card / .phone */
  --radius-btn:  8px;        /* the app's <button> */
  --radius-sm:   6px;        /* badges, kbd caps, inline marks */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0d1117;
    --surface:      #151b24;
    --surface-2:    #101620;
    --ink:          #e8edf5;
    --ink-2:        #93a0b2;
    --ink-3:        #838e9e;
    --rule:         #26303f;
    --rule-strong:  #3b4759;  /* = the app's button:hover border */
    --accent:       #3ddc84;
    --accent-hover: #52de92;
    --accent-text:  #3ddc84;
    --accent-soft:  #16241b;
    --on-accent:    #06180e;
    --flag:         #f5c451;
    --flag-soft:    #2a2214;
    --focus:        #b38dff;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0425rem;   /* = landing.css --f-body */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The ramp, the weights and the tracking are landing.css's --f-display /
   --f-h2 / --f-h3 verbatim. Tracking tightens as the size grows, which is why
   each level carries its own rather than the group carrying one. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 0.9rem + 4.2vw, 3.65rem);
     font-weight: 660; line-height: 1.03; letter-spacing: -0.034em; }
h2 { font-size: clamp(1.68rem, 1.05rem + 2.35vw, 2.65rem);
     font-weight: 640; line-height: 1.1;  letter-spacing: -0.028em; }
h3 { font-size: clamp(1.06rem, 1rem + 0.32vw, 1.22rem);
     font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; }
h4 { font-size: 1rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

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

code, kbd, .mono { font-family: var(--font-mono); font-size: 0.9em; }
kbd {
  border: 1px solid var(--rule-strong); border-bottom-width: 2px;
  border-radius: var(--radius-sm); padding: 0.05em 0.35em; background: var(--surface-2);
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 44rem; }

.section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section-tint { background: var(--surface-2); }

.eyebrow {
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.75rem;
}
.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--ink-2); max-width: 42rem; }
.muted { color: var(--ink-3); }
.small { font-size: 0.9rem; }
.tiny { font-size: 0.82rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--on-accent); }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(8px);
}
.header-inner {
  display: flex; align-items: center; gap: 1rem 1.5rem;
  flex-wrap: wrap; padding-block: 0.85rem;
}
/* The app's wordmark, matched down to size, weight and tracking — see
   landing.css .lp-brand and styles.css .brand. There is no glyph: the mark IS
   the word with its middle third in the accent. (The six-bar grid glyph that
   stood here was a leftover from the old name.) */
.brand {
  font-family: var(--font-sans); font-size: 1.02rem; font-weight: 650;
  color: var(--ink); text-decoration: none; letter-spacing: -0.018em;
  display: inline-flex; align-items: baseline; white-space: nowrap;
  margin-right: auto;
}
.brand span { color: var(--accent-text); }
.brand:hover { color: var(--ink); }
.brand:hover span { color: var(--accent-text); }

.nav { display: flex; align-items: center; gap: 0.35rem 1.25rem; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  padding-block: 0.2rem;
}
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
/* the CTA in the nav is a button first: .nav a would otherwise win on specificity */
.nav a.btn, .nav a.btn:hover { color: var(--ink); text-decoration: none; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--on-accent); text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.2;
  padding: 0.7rem 1.15rem; border-radius: var(--radius-btn);
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-sm { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 1.25rem; }
.hero-note { margin-top: 1.5rem; font-size: 0.92rem; color: var(--ink-3); max-width: 40rem; }

/* ---------- grids and cards ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--ink-2); font-size: 0.95rem; }
.card-flag { border-left: 3px solid var(--accent); }

/* ---------- numbered steps ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.25rem 1rem;
  align-items: start;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.steps h3 { margin: 0.25rem 0 0.3rem; }
.steps p { color: var(--ink-2); font-size: 0.96rem; }

/* ---------- lists ---------- */
.list-check, .list-x { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.list-check > li, .list-x > li { position: relative; padding-left: 1.6rem; color: var(--ink-2); }
.list-check > li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.55em;
  width: 0.5rem; height: 0.28rem; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.list-x > li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.62em;
  width: 0.6rem; height: 0; border-top: 2px solid var(--flag);
}
.list-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; color: var(--ink-2); }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose h2:first-of-type { margin-top: 0; }

/* ---------- callouts ---------- */
.callout {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  background: var(--surface); border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
}
.callout h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 650; }
.callout p { font-size: 0.95rem; color: var(--ink-2); }
.callout-flag { border-left-color: var(--flag); background: var(--flag-soft); }
.callout-accent { border-left-color: var(--accent); background: var(--accent-soft); }

.draft-banner {
  border: 1px solid var(--flag); border-radius: var(--radius);
  background: var(--flag-soft); color: var(--ink);
  padding: 1rem 1.2rem; margin-bottom: 2.5rem;
}
.draft-banner strong { color: var(--flag); letter-spacing: 0.02em; }
.draft-banner p { font-size: 0.93rem; color: var(--ink-2); }
/* Long TODOs must wrap — some of them are whole paragraphs for the solicitor. */
.todo {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--flag-soft); color: var(--flag);
  border: 1px dashed var(--flag); border-radius: var(--radius-sm); padding: 0 0.3em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- badges and pills ---------- */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid currentColor;
}
.badge-ready { color: var(--accent-text); background: var(--accent-soft); }
.badge-pending { color: var(--flag); background: var(--flag-soft); }

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 0.35rem 0.85rem; font-size: 0.9rem; background: var(--surface);
  color: var(--ink-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pill-pending .dot { background: var(--flag); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
table.data caption { text-align: left; color: var(--ink-3); font-size: 0.88rem; padding-bottom: 0.6rem; }
table.data th, table.data td { text-align: left; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
table.data thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 650; }
table.data td.num, table.data th.num { text-align: right; padding-right: 0; }
table.data tbody tr:last-child td { border-bottom: 0; }

/* ---------- pricing calculator ---------- */
.calc {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: grid; gap: 1.75rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 46rem) { .calc { grid-template-columns: 1fr; } }

.calc-controls { display: grid; gap: 1rem; }
.device-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.device-count {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 660;
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.038em;
}
.device-word { color: var(--ink-2); font-size: 1rem; }
.device-input {
  font: inherit; font-size: 0.95rem; font-variant-numeric: tabular-nums;
  width: 5.5rem; padding: 0.4rem 0.55rem; margin-left: auto;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent; margin: 0.5rem 0 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  border: 1px solid var(--rule);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  border: 1px solid var(--rule);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -11px;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--rule-strong);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--rule-strong);
}
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }

/* Slider tick labels, placed at the value they actually mean.
   These used to be `justify-content: space-between`, which spaces five labels
   EVENLY — so on a linear 1-100 slider the "25" label sat at the halfway point
   of the track while 25 is really a quarter of the way along. Dragging to 32
   then put the thumb visibly to the LEFT of a label reading 25, which makes the
   page look broken and, worse, makes a customer distrust the price next to it.
   Each label now sits at (value - min) / (max - min) of the track.
   The thumb is 26px wide and its CENTRE cannot reach the very edge — it travels
   between 13px and (width - 13px) — so the fraction is applied to the reduced
   travel and offset by half a thumb, which is what keeps a label under the thumb
   rather than a few pixels off at the ends. */
.ticks {
  position: relative;
  height: 1.1em;
  font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
  margin-top: 0.35rem;
  --thumb: 26px;
}
.ticks > span {
  position: absolute;
  left: calc(var(--at, 0) * (100% - var(--thumb)) + (var(--thumb) / 2));
  transform: translateX(-50%);
  white-space: nowrap;
}
/* The first and last are pulled inside the box so they cannot be clipped by
   the container's edge. */
.ticks > span:first-child { transform: translateX(-50%); }
.ticks > span:last-child  { transform: translateX(-50%); }

.calc-result { display: grid; gap: 0.75rem; }
.price {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 4vw, 4.25rem);
  font-weight: 660; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
  overflow-wrap: break-word;
}
.price-contact { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.price-per { color: var(--ink-3); font-size: 0.95rem; margin-top: 0.35rem; }
.plan-line { font-size: 0.98rem; color: var(--ink-2); }
.plan-line strong { color: var(--ink); }
.breakdown { margin-top: 0.5rem; }
.calc-status { font-size: 0.85rem; color: var(--ink-3); min-height: 1.4em; }
.calc-status[data-state="stale"] { color: var(--flag); }
[hidden] { display: none !important; }

/* ---------- plan cards ---------- */
.plan {
  display: flex; flex-direction: column; gap: 0.65rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.4rem;
}
.plan-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 620;
             letter-spacing: -0.014em; }
.plan-tagline { font-size: 0.9rem; color: var(--ink-3); min-height: 2.6em; }
.plan-price { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums;
              letter-spacing: -0.024em; }
.plan-price .per { font-size: 0.85rem; font-weight: 400; color: var(--ink-3); }
.plan-at { font-size: 0.85rem; color: var(--ink-3); }
.plan ul { margin-top: 0.4rem; }
.plan .list-check > li { font-size: 0.9rem; }

/* ---------- platform groups ---------- */
.platform-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
  display: grid; gap: 0.45rem; align-content: start;
}
.platform-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.platform-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
                 letter-spacing: -0.012em; }
.platform-meta { font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.platform-needs { font-size: 0.85rem; color: var(--ink-2); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  padding-block: 2.5rem 3rem;
  margin-top: 0;
}
.footer-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.footer-grid h4 {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-3); margin-bottom: 0.7rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-grid a { color: var(--ink-2); text-decoration: none; font-size: 0.92rem; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom {
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* ---------- narrow screens ---------- */
@media (max-width: 30rem) {
  body { font-size: 16px; }
  .wrap { padding-inline: 1rem; }
  .header-inner { padding-block: 0.7rem; gap: 0.6rem 1rem; }
  .brand { font-size: 1.05rem; width: 100%; margin-right: 0; }
  .nav { gap: 0.25rem 0.9rem; font-size: 0.9rem; }
  .btn-row .btn { width: 100%; }
  .device-input { margin-left: 0; }
}

@media print {
  .site-header, .site-footer, .btn-row, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TWO PRODUCTS — Cloud and Devices
   Everything below exists because SyncSocialFlow is now two things a customer picks
   between, and the page has to make that choice obvious before it shows a
   price. No new colours: the same paper-and-ink tokens as everything above.
   ══════════════════════════════════════════════════════════════════════════ */

/* the sticky header would otherwise sit on top of any #anchor we jump to */
[id] { scroll-margin-top: 5rem; }

/* read by a screen reader, invisible on screen — used for the empty corner cell
   of the comparison table, which needs a name but must not show one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the two-path chooser (home page) ---------- */
.chooser {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.choice {
  display: grid; gap: 0.5rem; align-content: start;
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  text-decoration: none; color: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.choice:hover { border-color: var(--ink-3); border-top-color: var(--accent); color: inherit; }
.choice-cloud { border-top-color: var(--accent); }
.choice-devices { border-top-color: var(--flag); }
.choice-kicker {
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.choice h3 { margin: 0; font-size: 1.35rem; }
.choice p { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.choice ul { margin-top: 0.35rem; }
.choice .list-check > li, .choice .list-x > li { font-size: 0.9rem; }
.choice-more {
  margin-top: 0.5rem; font-size: 0.92rem; font-weight: 650;
  color: var(--accent-text);
}
.choice:hover .choice-more { text-decoration: underline; }

/* ---------- product columns (pricing page) ---------- */
.product-grid {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.product {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong); border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + 1vw, 1.75rem);
  display: grid; gap: 1.1rem; align-content: start;
}
.product-cloud { border-top-color: var(--accent); }
.product-devices { border-top-color: var(--flag); }
.product-head { display: grid; gap: 0.4rem; }
.product-name { font-size: 1.55rem; margin: 0; }
.product-what { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.product-badge {
  justify-self: start; font-size: 0.72rem; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid currentColor;
  color: var(--ink-3);
}
.product-cloud .product-badge { color: var(--accent-text); background: var(--accent-soft); }
.product-devices .product-badge { color: var(--flag); background: var(--flag-soft); }

/* the calculator inside a product column is stacked, not side by side, and
   borrows every internal from the .calc rules further up this file */
.product .calc {
  grid-template-columns: 1fr; gap: 1.25rem;
  background: none; border: 0; padding: 0; border-radius: 0;
}
.product .price { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.1rem); }
.product .price-contact { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.9rem); }
.product .plan-price { font-size: 1.35rem; }

/* ---------- the one-time setup fee ---------- */
.setup {
  display: grid; gap: 0.35rem;
  background: var(--surface-2); border: 1px dashed var(--rule-strong);
  border-radius: var(--radius); padding: 0.95rem 1.1rem;
}
.setup-label {
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.setup-amount {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 640;
  line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.024em;
}
.setup-note { font-size: 0.88rem; color: var(--ink-2); }
.setup-status { font-size: 0.82rem; color: var(--ink-3); }
.setup-status[data-state="stale"] { color: var(--flag); }
.first-payment { font-size: 0.92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.first-payment strong { color: var(--ink); }

/* ---------- the honest comparison ---------- */
table.compare { min-width: 40rem; }
table.compare th[scope="row"] {
  font-weight: 650; color: var(--ink); width: 13rem;
  vertical-align: top; padding-right: 1.25rem;
}
table.compare thead th {
  font-size: 0.9rem; text-transform: none; letter-spacing: 0;
  color: var(--ink); font-family: var(--font-display); font-weight: 600;
}
table.compare td { vertical-align: top; color: var(--ink-2); padding-right: 1.25rem; }
table.compare td:last-child, table.compare th:last-child { padding-right: 0; }
.yes { color: var(--accent-text); font-weight: 650; }
.no  { color: var(--flag); font-weight: 650; }

/* ---------- fee transparency block ---------- */
.fee-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.fee-figure {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 640;
  font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.026em;
}
.fee-caption { font-size: 0.88rem; color: var(--ink-3); }

/* ---------- how-it-works: the two paths ---------- */
.path { display: grid; gap: 0.4rem; margin-bottom: 1.75rem; }
.path h2 { margin: 0; }
.path .lede { margin: 0; }

/* ---------- narrow screens (375px is the target) ---------- */
@media (max-width: 30rem) {
  .product { padding: 1.1rem 1rem; }
  .product-name { font-size: 1.35rem; }
  .device-row { gap: 0.5rem; }
  .device-count { font-size: 2rem; }
  .device-input { width: 4.75rem; }   /* stays left-aligned per the rule above */
  .choice { padding: 1.15rem 1rem; }
  .setup { padding: 0.8rem 0.9rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DOWNLOAD PAGE — download.html
   Appended, not woven in: everything above is shared by four pages and this
   block is used by one. Two jobs here — the two OS panels (which reorder, and
   never hide each other), and the dialog mocks.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- the two OS panels ---------- */
.os-grid {
  display: grid; gap: 1.25rem; margin-top: 2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.os-panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong); border-radius: var(--radius);
  padding: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  display: grid; gap: 0.85rem; align-content: start;
}
/* the visitor's own platform is marked, never isolated: the other panel keeps
   its full size and content because people download for a second machine */
.os-panel[data-here="yes"] { border-top-color: var(--accent); }
.os-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.os-head h3 { margin: 0; font-size: 1.35rem; }
.os-req { margin: 0; font-size: 0.9rem; color: var(--ink-3); }

.release { display: grid; gap: 0.75rem; }
.release-none { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.release-none strong { color: var(--flag); }
.release-notify { margin: 0; }
.release-notify .btn { width: 100%; }

/* the facts about the bytes: version, size, and the fingerprint */
.release-facts { margin: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.release-fact { display: grid; gap: 0.1rem; }
.release-fact dt {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.release-fact dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* a SHA-256 is 64 characters with no spaces in it — it must be allowed to break
   anywhere or it forces the whole page sideways on a phone */
.checksum {
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5;
  color: var(--ink-2); overflow-wrap: anywhere; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 0.35rem 0.5rem; display: block;
}
.release-unsigned { font-size: 0.85rem; color: var(--flag); margin: 0; }

var {
  font-family: var(--font-mono); font-style: normal;
  color: var(--ink-3); border-bottom: 1px dotted var(--rule-strong);
}

/* ---------- the warnings ---------- */
.warn-stack { display: grid; gap: 2.5rem; margin-top: 2rem; }
.os-warning { display: grid; gap: 1rem; align-content: start; }
.os-warning > h3 { margin: 0; font-size: 1.45rem; }
.warn-step-head {
  margin: 0.75rem 0 0; font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
}
.warn-lede { margin: 0; color: var(--ink-2); }
.mock-pair { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* ordered lists inside a callout, styled like the rest of the prose */
.prose-ol { margin: 0.5rem 0 1em; padding-left: 1.25rem; }
.prose-ol li { margin-bottom: 0.45em; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- dialog mocks ----------
   These imitate somebody else's operating system, so they deliberately do NOT
   use the site palette: a Windows dialog does not turn into warm paper because
   our stylesheet says so, and re-tinting it would make it less recognisable at
   the moment of recognition, which is the only reason it exists. The colours
   below are fixed in both themes for that reason, and are muted on purpose so
   nothing here can be mistaken for a genuine Microsoft or Apple asset.
   Every control inside a mock is a <span>, never a <button>. */
.mock-figure { margin: 0; display: grid; gap: 0.6rem; }
.mock-figure figcaption { font-size: 0.85rem; color: var(--ink-3); }

.mock {
  position: relative;
  --m-bg:     #f3f3f3;
  --m-ink:    #1b1b1b;
  --m-ink-2:  #4a4a4a;
  --m-rule:   #c9c9c9;
  --m-btn:    #e6e6e6;
  --m-link:   #1a5fb4;
  background: var(--m-bg); color: var(--m-ink);
  border: 1px solid var(--m-rule); border-radius: 6px;
  font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
/* belt and braces: the caption says it is an illustration, and so does the
   thing itself, in case one is read without the other */
.mock::before {
  content: "Illustration";
  position: absolute; top: 0; right: 0; z-index: 1;
  font-size: 0.62rem; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  /* fixed, like the rest of the mock: this label sits ON the imitation dialog,
     which does not follow the site theme, so a token that lightens in dark mode
     would put pale amber on pale grey */
  background: #8a4b1e; color: #fff;
  border-bottom-left-radius: 5px;
}
.mock p { margin: 0 0 0.6rem; }
.mock p:last-child { margin-bottom: 0; }
.mock .mono { font-family: var(--font-mono); font-size: 0.85em; }
.mock-strong { font-weight: 650; color: var(--m-ink); }
.mock-sub { color: var(--m-ink-2); font-size: 0.85em; display: block; }
.mock-link { color: var(--m-link); text-decoration: underline; }
.mock-btn {
  display: inline-block; padding: 0.35rem 0.9rem; font-size: 0.85rem;
  border: 1px solid var(--m-rule); border-radius: 4px;
  background: var(--m-btn); color: var(--m-ink);
}
.mock-btn-default { border-color: #7a7a7a; }
/* the one thing on the mock the reader has to find */
.mock-hit {
  outline: 2px solid #8a4b1e; outline-offset: 2px;
  border-radius: 3px; font-weight: 650;
}

/* browser download row */
.mock-browser { padding: 0.85rem 0.9rem; }
.mock-browser-row { display: flex; align-items: center; gap: 0.65rem; }
.mock-file-icon {
  width: 26px; height: 32px; flex: none; border-radius: 3px;
  background: #fff; border: 1px solid var(--m-rule);
  box-shadow: inset -8px 8px 0 -7px var(--m-rule);
}
.mock-browser-text { display: grid; gap: 0.1rem; min-width: 0; }
.mock-browser-text .mock-strong { overflow-wrap: anywhere; }
.mock-kebab { margin-left: auto; color: var(--m-ink-2); font-size: 1.1rem; }
.mock-menu {
  margin-top: 0.6rem; margin-left: auto; width: max-content;
  background: #fff; border: 1px solid var(--m-rule); border-radius: 4px;
  display: grid; min-width: 8rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}
.mock-menu-item { padding: 0.35rem 0.9rem; font-size: 0.85rem; }

/* Windows SmartScreen */
.mock-win-bar {
  background: #2b4a66; color: #fff; padding: 0.7rem 0.9rem;
  font-size: 1rem; font-weight: 600;
}
.mock-win-body { padding: 0.9rem; color: var(--m-ink-2); }
.mock-win-body .mock-meta { color: var(--m-ink); font-size: 0.85rem; }
.mock-win-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap;
  padding: 0.75rem 0.9rem; border-top: 1px solid var(--m-rule); background: #ebebeb;
}

/* macOS alert and the Privacy & Security row */
.mock-mac { border-radius: 10px; text-align: center; }
.mock-mac-body { padding: 1.1rem 1rem 0.9rem; }
.mock-mac-actions {
  display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  padding: 0.75rem 0.9rem 0.9rem;
}
.mock-mac-pane { text-align: left; }
.mock-mac-pane-head {
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--m-rule);
  background: #e9e9e9; font-weight: 650; font-size: 0.85rem;
}
.mock-mac-pane .mock-mac-actions { justify-content: flex-start; padding-top: 0; }

@media (max-width: 30rem) {
  .os-panel { padding: 1.1rem 1rem; }
  .mock { font-size: 0.84rem; }
  .mock-win-actions { justify-content: stretch; }
  .mock-win-actions .mock-btn { flex: 1; text-align: center; }
}