/* atlsx.app storefront: pricing, checkout result, and license account pages. No inline styles or scripts.
   Follows the ATLSX Visual Identity (2026) and the ATLSX app: navy #0C1729 and teal #2DA5A2, the mint-to-teal gradient
   only inside the X of the supplied logo files, white ATLSX lettering on navy, Arial, an 8 px spacing grid, right-aligned
   tabular amounts, and a text label on every status. */
:root {
  --navy: #0C1729; --navy-2: #1B2E45; --teal: #2DA5A2; --green: #1E7A78; --mint: #53BA97; --mist: #EEF5F4;
  --slate: #52666B; --border: #D5E0DE; --surface: #FFFFFF; --text: #0C1729; --muted: #52666B; --on-navy: #DCE8E7;
  --on-navy-muted: #9AAFAD; --ok-bg: #DBF1EA; --warn-bg: #FFF4D7; --warn-text: #6B4D0F; --danger-bg: #FBE9E6; --danger: #8A2F22;
  --radius: 10px; --shadow: 0 1px 2px rgba(12, 23, 41, .04), 0 8px 24px rgba(12, 23, 41, .06);
  /* Landing page visuals: the light teal track a green fill runs on (a meter), and the aging buckets' ramp, one teal hue
     from light to dark (lightness steps and contrast checked with the dataviz palette validator, ordinal mode) */
  --track: #C8EAE7; --ramp-1: #68BEBC; --ramp-2: var(--teal); --ramp-3: var(--green); --ramp-4: #195C60; --ramp-5: #133F49;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--mist); color: var(--text); font-size: 16px; line-height: 1.5; }
a { color: var(--green); }
h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -.5px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0 0 8px; }
h3 { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 20px; }
.wrap { max-width: 1152px; margin: 0 auto; padding: 0 16px; }
.eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase; color: var(--slate); margin: 0 0 8px; }

/* Header: white ATLSX lettering on navy, as in the app's sidebar (the footer is footer.css) */
.site-header { background: var(--navy); position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--navy-2); }  /* stays in view while you scroll */
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { display: block; height: 36px; width: auto; }
.brand-sub { color: var(--on-navy-muted); font-size: 12px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase;
  border-left: 1px solid var(--navy-2); padding-left: 12px; line-height: 24px; }
.site-header nav { margin-left: auto; display: flex; gap: 8px; }
.site-header nav a { color: #B5C7C5; text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 8px; white-space: nowrap; }
.site-header nav a:hover { color: #FFFFFF; }
.site-header nav a[aria-current=page] { background: var(--navy-2); color: #FFFFFF; }
.env-banner { background: var(--warn-bg); color: var(--warn-text); text-align: center; font-size: 13px; font-weight: 700; padding: 8px 16px; }
/* A landing page opened with a staff preview link (seo.py): darker than the staging banner, so the two never read as one */
.env-banner.preview-bar { background: var(--warn-text); color: #FFFFFF; letter-spacing: .4px; }

/* Hero: navy band with the product itself */
.hero-band { background: var(--navy); color: #FFFFFF; padding-bottom: 64px; }
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 56px 0 0; }
.hero .eyebrow { color: var(--mint); }
.hero-line { display: block; }  /* the home tagline: one sentence per line */
.hero h1 { color: #FFFFFF; }
.hero .lead { font-size: 18px; line-height: 28px; color: var(--on-navy); max-width: 520px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.pill { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--on-navy); border: 1px solid var(--navy-2); background: rgba(255, 255, 255, .04);
  border-radius: 6px; padding: 8px 12px; }
.hero-shot { margin: 0; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--navy-2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35), 0 0 0 8px rgba(255, 255, 255, .04); background: var(--mist); }
.hero-shot figcaption { font-size: 12px; color: var(--on-navy-muted); margin-top: 8px; text-align: right; }
.page { padding-top: 16px; }

/* Plan cards: the app's panels. Side by side, every row of one card (title, description, price, note, users included,
   Users, total, breakdown, Buy, features, updates) lines up with the same row of the other, whatever their notes and
   tags: each card spans 13 rows of .plans and lays its 13 children (store.js pricingPage: the same children in every
   card, an empty note slot included) on those shared rows (subgrid), so a row is as tall as in the taller card. The space
   between rows is each child's top margin, not a row gap, so an empty slot takes no room and stacked cards (one column
   on a phone) have no holes; .plans has no row gap either (it would also open between the rows inside each card), so
   stacked cards are kept apart by their bottom margin. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); column-gap: 24px; margin: 32px 0 0; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow);
  margin-bottom: 24px; position: relative; display: grid; grid-row: span 13; grid-template-rows: subgrid; row-gap: 0; }
.plan > :not(:first-child) { margin-top: 16px; }
.plan > .plan-desc { margin-top: 8px; }
.plan > .plan-note:empty { margin-top: 0; }
/* A card without an offer has no ribbon to make room for (below), so its title row is taller than the title: the title
   sits at the foot of the row, level with the other card's */
.plan > .plan-title { align-self: end; }
/* Without subgrid each card is a column of its own: the rows of two cards side by side may not line up, but nothing
   overlaps or leaves a hole */
@supports not (grid-template-rows: subgrid) {
  .plan { display: flex; flex-direction: column; grid-row: auto; }
  .plan > .plan-title { align-self: stretch; }
}
/* The featured card's teal top edge is drawn inside its 1px border (a thicker border would push everything in the card
   down a few pixels, out of line with the other card) */
.plan.featured { border-top-color: var(--teal); box-shadow: inset 0 3px 0 var(--teal), var(--shadow); }
.plan-buy button { width: 100%; }
.plan-buy .error { margin-top: 8px; }
/* Offer prices (store.js planDeal: the automatic discount, or the adopter code): a corner ribbon, the struck-through
   list price and a note saying until when. The room the ribbon needs above the title is the title row's, so the card's
   padding stays the same as the other card's. */
.plan.has-offer { overflow: hidden; }
.plan.has-offer > .plan-title { padding-top: 32px; }
.plan .ribbon { position: absolute; top: 20px; left: -46px; width: 160px; transform: rotate(-45deg); background: var(--teal); color: #FFFFFF;
  text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 6px 0;
  box-shadow: 0 2px 6px rgba(12, 23, 41, .18); pointer-events: none; }
.offer-price .was { color: var(--muted); font-weight: 400; font-size: .6em; text-decoration-thickness: 2px; margin-right: 4px; }
.offer-price.inline .was { font-size: inherit; text-decoration-thickness: 1px; margin-right: 2px; }
/* Both prices and "one-time" need about 350px. A narrower card (two cards side by side on a tablet, or a phone) puts the
   struck list price on a line of its own above the offer price, the same in both cards, and "one-time" never
   breaks at its hyphen. The price row is the container that is measured (the card's width inside its padding): a card
   that was a size container could not share the rows of the grid around it. */
.plan > .price { container-type: inline-size; }
.price small { white-space: nowrap; }
@container (max-width: 380px) {
  .plan.has-offer .price .offer-price .was { display: block; width: max-content; margin: 0; line-height: 28px; }
}
.offer-note { background: var(--ok-bg); color: var(--navy); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 18px; }
.offer-note code { font-weight: 700; letter-spacing: .5px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plan .tag { position: absolute; top: 24px; right: 24px; background: var(--ok-bg); color: var(--navy); font-size: 12px; line-height: 16px;
  font-weight: 700; padding: 4px 8px; border-radius: 6px; }  /* "Most features" on the Business page, "Recommended" on a landing page */
.plan h2 { margin: 0; }
.plan p { margin: 0; }
.price { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.price small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.includes { font-weight: 700; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; align-content: start; }  /* in the taller row of the shorter list */
.features li { padding-left: 24px; position: relative; }
.features li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.features li.plus { font-weight: 700; }
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* Controls: the app's buttons and fields */
button, .button { font: inherit; font-size: 15px; font-weight: 700; border-radius: 8px; padding: 12px 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--navy); cursor: pointer; text-align: center; text-decoration: none; display: inline-block; line-height: 20px; }
button:hover, .button:hover { background: var(--mist); }
button.primary, .button.primary { background: var(--teal); border-color: var(--teal); color: var(--navy); }
button.primary:hover, .button.primary:hover { filter: brightness(1.06); background: var(--teal); }
.button.on-navy { background: transparent; color: #FFFFFF; border-color: #3A4D63; }
.button.on-navy:hover { background: var(--navy-2); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.site-header a:focus-visible, .hero a:focus-visible { outline-color: #FFFFFF; }
label { font-size: 12px; line-height: 16px; color: var(--slate); display: block; margin-bottom: 8px; }
input, select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid #C9D6D4; border-radius: 6px; padding: 10px 12px; width: 100%; }
input:focus, select:focus { outline: 2px solid #40B8B5; outline-offset: 1px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 40px; padding: 8px 0; }
.stepper input { width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; border-top: 2px solid var(--teal); padding-top: 16px; }
.total-row .offer-price { white-space: nowrap; }  /* an upgrade's offer in its dialog: the label wraps, the two prices stay together */
.total-row strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.breakdown { font-size: 13px; color: var(--muted); min-height: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
.error { color: var(--danger); font-size: 14px; }
.notice { border-radius: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); margin: 16px 0; }
.notice.ok { background: var(--ok-bg); border-color: #BFE5D8; }
.notice.danger { background: var(--danger-bg); border-color: #EEC5BF; color: var(--danger); }

/* Compare table and questions: the app's tables */
.compare { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 12px 16px; border-bottom: 1px solid #EBF0F0; text-align: left; font-size: 14px; }
.compare th { font-size: 12px; line-height: 16px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--border); }
.compare td.c, .compare th + th { text-align: right; font-variant-numeric: tabular-nums; }
.compare tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; margin-top: 24px; }
.faq { display: grid; gap: 8px; margin-top: 24px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 24px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 8px 0 0; color: var(--muted); }
section.block { margin-top: 64px; }

/* Checkout result and account pages */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.narrow { max-width: 720px; margin: 48px auto 0; }
.narrow > h1 { font-size: 32px; }
.key { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 24px; }
.key code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(15px, 2.6vw, 20px); background: var(--mist);
  border: 1px dashed #9FC4C0; border-radius: 8px; padding: 8px 16px; user-select: all; word-break: break-all; }
ol.steps { padding-left: 24px; }
ol.steps li { margin-bottom: 8px; }
.spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--teal); animation: spin 1s linear infinite;
  display: inline-block; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0 0 8px; }
.facts dt { padding-right: 24px; }
.facts dt, .facts dd { padding: 12px 0; border-bottom: 1px solid var(--border); margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.actions { display: grid; gap: 16px; margin-top: 24px; }
.action { border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: 8px; padding: 16px 24px; display: grid; gap: 8px; }
.action-row { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.row-form { display: flex; gap: 8px; flex-wrap: wrap; }
.row-form input { flex: 1; min-width: 240px; }

/* Account: sign-in cards */
.auth { max-width: 480px; }
.auth-card { display: grid; gap: 8px; }
.auth-card h1 { font-size: 28px; margin: 0; }
.auth-card label { margin: 8px 0 0; }
.auth-card button[type=submit] { margin-top: 8px; }
.auth-links { text-align: center; margin: 8px 0 0; }
button.link { background: none; border: 0; padding: 0; color: var(--green); font-size: inherit; font-weight: 700; text-decoration: underline; }
button.link:hover { background: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Account dashboard: the app's workspace, with horizontal tabs */
.dashboard { margin-top: 40px; }
.account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.account-head h1 { font-size: 32px; margin: 0 0 8px; }
.account-head p { margin: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 24px; overflow-x: auto; }
.tabs a { color: var(--slate); text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 16px; border-radius: 6px 6px 0 0; white-space: nowrap; }
.tabs a:hover { background: #E4EFED; }
.tabs a.active { color: var(--green); box-shadow: inset 0 -3px 0 var(--teal); }
.tab-panel { outline: none; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; min-width: 0; }
.tile.feature { background: #C8EAE7; border-color: #C8EAE7; }
.tile-label { font-size: 12px; color: var(--muted); }
.tile-value { font-size: 22px; line-height: 30px; font-weight: 700; margin: 8px 0 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.panel h2 { font-size: 20px; line-height: 28px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { margin-bottom: 4px; }
.panel-head p { margin: 0; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 12px 8px; border-bottom: 1px solid #EBF0F0; font-size: 14px; font-variant-numeric: tabular-nums; }
table.data th { font-size: 12px; line-height: 16px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--border); }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; }
td.links { white-space: nowrap; }
td.links a + a { margin-left: 12px; }
.badge { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--mist); color: var(--slate);
  white-space: nowrap; vertical-align: middle; }
.badge.ok { background: var(--ok-bg); color: var(--navy); }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.offers { display: grid; gap: 8px; }
.offer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid #EBF0F0; }
/* Available products (Account > Overview): the offer's terms under the name, the struck list price in the button. An
   offer on an edition upgrade (Licenses tab): its terms under the buttons and in the dialog. */
.offer-terms { color: var(--green); font-weight: 600; }
.offer-row .offer-terms { margin-top: 4px; }
.offer-row .offer-terms code { font-weight: 700; letter-spacing: .5px; }
.license .offer-terms { margin: 8px 0 0; }
.modal-grid .offer-terms { margin: 0; }
.button .offer-price .was, button .offer-price .was { color: inherit; font-weight: 400; }
.button .offer-price, button .offer-price { white-space: nowrap; }  /* a narrow button wraps before the two prices, not between them */
.offer-row:first-child { border-top: 0; padding-top: 0; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.panel .button-row { margin-top: 16px; }
.offer-row .button-row { margin-top: 0; }
button.small, .button.small { font-size: 13px; padding: 8px 12px; }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid #EBF0F0; border-bottom: 1px solid #EBF0F0; padding: 16px 0; margin-top: 8px; }
.facts-row span { display: block; font-size: 12px; color: var(--muted); }
.facts-row strong { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.license .key { margin: 8px 0; }
.settings-form { display: grid; gap: 8px; max-width: 480px; }
.settings-form label { margin: 8px 0 0; }
.settings-form button { justify-self: start; margin-top: 8px; }
/* Account > Settings: the company name with its Save button on one line */
.company-form { max-width: 560px; margin-bottom: 16px; }
.company-form .inline-field { display: flex; gap: 8px; align-items: center; }
.company-form .inline-field button { margin-top: 0; flex: none; }
.company-form .notice { margin: 0; }

/* Overview: the account ID gets the wide tile */
.tiles.overview { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.account-id { font-size: 28px; letter-spacing: 1px; }

/* Downloads */
.download { border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: 8px; padding: 16px 24px; margin-bottom: 8px; }
.download-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.download h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.download p { margin: 0; }
.download details { margin-top: 12px; }
.download summary { cursor: pointer; color: var(--green); font-weight: 700; }
.download details p { margin: 8px 0; }
code.sha { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--mist); border-radius: 6px;
  padding: 8px 12px; word-break: break-all; user-select: all; }

/* Pop-up (Manage seats, confirm a purchase) */
.modal { border: 0; border-radius: 14px; padding: 0; width: min(480px, calc(100% - 32px)); box-shadow: 0 24px 70px rgba(12, 34, 32, .3); color: var(--text); }
.modal::backdrop { background: rgba(12, 23, 41, .55); }
.modal-body { padding: 24px; margin: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-head h2 { margin: 0; font-size: 20px; }
button.icon { border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px 8px; }
.modal-grid { display: grid; gap: 8px; }
.modal-grid label { margin: 8px 0 0; }
.modal-grid .total-row { margin-top: 8px; }
dl.summary { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 16px 0 0; font-size: 15px; }
dl.summary dt, dl.summary dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #EBF0F0; }
dl.summary dd { padding-left: 24px; }
dl.summary dt { color: var(--muted); }
dl.summary dd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
dl.summary .total { border-bottom: 0; border-top: 2px solid var(--teal); padding-top: 12px; font-size: 18px; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Checkout: create the account */
.setup { margin: 24px 0 0; background: var(--mist); border-color: var(--border); }
.setup h2 { margin-bottom: 8px; }
.setup-form { display: grid; gap: 8px; max-width: 420px; }
.setup-form label { margin: 8px 0 0; }
.setup-form button { justify-self: start; margin-top: 8px; }

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tiles.overview .tile.feature { grid-column: 1 / -1; }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .hero-band { padding-bottom: 48px; }
}
/* The header's five links (Products, Industries, Demo, Help, Account) beside the wordmark: narrower links and no Business
   label below 860px, and from 640px the links on a line of their own under the wordmark, smaller, wrapping only on the
   narrowest phones (Account then goes to a second line). */
@media (max-width: 860px) {
  .brand-sub { display: none; }
  .site-header nav a { padding: 8px 12px; }
}
@media (max-width: 640px) {
  .site-header .wrap { height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .site-header nav { margin-left: 0; width: 100%; gap: 0; flex-wrap: wrap; }
  .site-header nav a { padding: 8px 5px; font-size: 13px; }
  .site-header nav a.nav-account { padding: 8px 8px; }
  .menu-top::after { margin-left: 5px; }
  section[id], .block { scroll-margin-top: 128px; }
}
@media (max-width: 560px) {
  .plan, .card { padding: 24px; }
  .plan.has-offer > .plan-title { padding-top: 40px; }  /* the ribbon keeps its 64px from the top */
  .tiles, .tiles.two, .tiles.overview { grid-template-columns: 1fr; }
  .account-id { font-size: 22px; }
  .panel { padding: 16px; }
  .account-head h1 { font-size: 26px; }
}

/* Products and Industries menus in the header: open on hover or keyboard focus; the Products link itself goes to
   /product/, the Industries link to /industry/. The Industries menu (seo.py, only while a landing page is published) lists
   each page with its headline, then All industries under a hairline. */
.menu { position: relative; display: flex; }
.menu-top::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; }
.menu-list { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 16px 40px rgba(12, 23, 41, .22); padding: 8px; display: none; z-index: 30; }
.menu-list::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.menu:hover .menu-list, .menu:focus-within .menu-list { display: grid; gap: 2px; }
.site-header .menu-list a { display: grid; gap: 2px; color: var(--navy); padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.site-header .menu-list a:hover, .site-header .menu-list a:focus-visible { background: var(--mist); color: var(--navy); }
.menu-list span { font-weight: 400; font-size: 12px; color: var(--muted); }
.menu-list.menu-industries { min-width: 320px; max-width: 360px; }
.site-header .menu-list a.menu-all { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 12px; }
section[id], .block { scroll-margin-top: 96px; }
/* With the links on a line of their own (below 640px), an open list spans the screen under that line (without the margin
   it would sit at the top of its menu, over the links) */
@media (max-width: 640px) {
  .menu-list, .menu-list.menu-industries { position: fixed; top: auto; margin-top: 44px; left: 16px; right: 16px; min-width: 0; max-width: none; }
}

/* Hero variants: a slim band without the screenshot, and the breadcrumb on navy */
.hero-slim { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
.hero-slim .lead { max-width: 720px; }
.crumb { font-size: 13px; color: var(--on-navy-muted); margin: 0 0 16px; }
.crumb a { color: var(--on-navy); font-weight: 700; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.soon-badge { font-size: 14px; letter-spacing: 0; vertical-align: middle; background: var(--warn-bg); color: var(--warn-text); margin-left: 8px; }

/* Home and product pages */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.section-head p { margin: 0; }
.section-head .button.small { flex: none; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.product-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.product-card:not(.soon) { border-top: 4px solid var(--teal); }
.product-card:hover { border-color: var(--teal); }
.product-card strong { font-size: 22px; line-height: 30px; }
.product-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.product-cta { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--green); }
.product-card.soon .product-cta { color: var(--slate); }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.module-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: 8px; padding: 16px 20px; }
.module-card h3 { margin: 0 0 4px; font-size: 15px; }
.module-card p { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.block .tiles { margin-top: 24px; }
.families { display: grid; gap: 24px; padding-top: 48px; }
.family h2 { margin-bottom: 4px; }
.family .offers { margin-top: 16px; }
.offer-row h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.offer-row p { margin: 0; }
.soon-card { margin-top: 48px; }
.soon-card h2 { margin-bottom: 8px; }
.soon-card p { margin: 0; }
@media (max-width: 1100px) { .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .product-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .module-grid { grid-template-columns: 1fr; }
  .hero h1 .soon-badge { display: inline-block; margin: 8px 0 0; }
}

/* Account sits in its own box at the end of the header, apart from the page links */
.site-header nav a.nav-account { border: 1px solid #3A4D63; color: #FFFFFF; margin-left: 8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header nav a.nav-account:hover { border-color: var(--teal); background: var(--navy-2); }
.site-header nav a.nav-account[aria-current=page] { border-color: var(--teal); background: var(--navy-2); }
@media (max-width: 640px) { .site-header nav a.nav-account { margin-left: auto; } }  /* the links' own line (above) */

/* First purchase: company and billing address before Stripe Checkout */
.modal:has(.buyer-form) { width: min(600px, calc(100% - 32px)); }
.buyer-form { gap: 4px; }
.buyer-field label, .buyer-region label { margin: 10px 0 6px; }
.buyer-cols { display: grid; gap: 0 12px; }
.buyer-cols.two { grid-template-columns: 1fr 1fr; }
.buyer-cols.three { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 560px) { .buyer-cols.two, .buyer-cols.three { grid-template-columns: 1fr; } }
.buyer-field select { height: 46px; }
/* The company locked to the organization's IRS name after its EIN qualified */
.buyer-field input[readonly] { background: var(--mist); border-color: var(--border); color: var(--navy); cursor: default; }
.buyer-field input[readonly]:focus { outline-color: var(--border); }
.buyer-form #buyer-company-hint { margin: 2px 0 0; color: var(--green); }

/* Eligibility, above the details, for an offer that asks for it (store.js eligibilityBlock): the statement to tick, the
   organization's EIN with Look up on one line, and what the IRS list says about it */
.eligibility { border: 0; border-left: 4px solid var(--teal); border-radius: 8px; background: var(--mist); margin: 0 0 12px; padding: 14px 16px 16px;
  min-width: 0; }
.eligibility legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--navy); }  /* inside the box */
.eligibility legend + * { clear: both; }
.check-field { display: flex; gap: 10px; align-items: flex-start; }
.check-field input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--green); cursor: pointer; }
.check-field label { margin: 0; font-size: 15px; line-height: 22px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.eligibility .buyer-field label { margin: 14px 0 6px; }
.ein-row { display: flex; gap: 8px; align-items: stretch; }
.ein-row input { flex: 0 1 200px; min-width: 0; font-variant-numeric: tabular-nums; }
.ein-row button { flex: none; }
.ein-result { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.ein-result .nowrap { white-space: nowrap; }  /* 501(c)(3) and an EIN never break inside */
.ein-result:empty { display: none; }
.ein-result.ok { color: var(--green); font-weight: 700; }
.ein-result.bad { color: var(--danger); }
.eligibility-only .eligibility { margin-bottom: 4px; }
/* "Not eligible? Pay the regular price" on the left, Cancel and Continue to payment on the right, in a dialog wide enough
   for the three; narrower, one per line with Continue first */
.modal:has(.eligibility) { width: min(640px, calc(100% - 32px)); }
.modal-actions { flex-wrap: wrap; }
.modal-actions .decline { order: -1; margin-right: auto; }
@media (max-width: 640px) {
  .modal-actions:has(.decline:not([hidden])) { flex-direction: column-reverse; align-items: stretch; }
  .modal-actions .decline { order: 0; margin-right: 0; }
}

/* Industry landing pages (/industry/<slug>/, filled in by the backend from storefront/industry/landing.html): kept short.
   The feature tour (seo.py renders each section, store.js landingTour makes them a carousel) comes before the pricing. A section
   has its heading, its first paragraph, its visual, and More details: its further paragraphs and its points as a checked
   list. Its questions use .faq above, the ones after the fourth under More questions. */
.landing-tour { margin-top: 48px; }
.landing-copy > p { max-width: 760px; }
.landing-copy > p:last-child { margin-bottom: 0; }
.landing-more { margin-top: 16px; }
.landing-more > summary { cursor: pointer; color: var(--green); font-weight: 700; width: fit-content; }
.landing-more > p { max-width: 760px; margin: 12px 0 0; }
.landing-points { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.landing-points li { position: relative; padding-left: 28px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.landing-points li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
#pricing > p.muted { max-width: 760px; }

/* A section with a visual: its text, then More details, beside the visual, and stacked below 900px (the visual after the
   text, More details last). The two columns only once store.js has drawn the visual, so a page without the script keeps
   the text full width. */
.landing-section.has-visual:has(.visual-window) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto auto 1fr; grid-template-areas: "copy visual" "more visual" ". visual"; gap: 0 48px; }
.landing-copy { grid-area: copy; min-width: 0; }
.has-visual > .landing-more { grid-area: more; min-width: 0; }
.landing-visual { grid-area: visual; margin: 0; min-width: 0; }
@media (max-width: 900px) {
  .landing-section.has-visual:has(.visual-window) { display: block; }
  .landing-visual { margin-top: 24px; max-width: 560px; }
  .has-visual > .landing-more { margin-top: 24px; }
}

/* The sections as a carousel (store.js landingTour adds .carousel, the stage, the dots, the arrows and Pause tour). The
   slides are stacked in one grid cell, so the carousel is as tall as its tallest slide and the page below never moves;
   only the current one (.is-current) is visible, coming in from the right, or from the left when going back (.back), and
   not with less motion. The stage clips sideways only, so a slide coming in never widens the page. Every slide fills the
   carousel's height, so the dots stay right under it: the visual's card takes what space is left (its note at the
   bottom). Each slide shows its own heading above its text, and its visual is always on the right. */
.tour-stage { display: grid; overflow-x: clip; padding: 4px 8px; margin: 0 -8px; }
.tour-stage > .landing-section { grid-area: 1 / 1; margin-top: 0; min-width: 0; visibility: hidden; }
.tour-stage > .landing-section.is-current { visibility: visible; animation: tour-in .5s ease both; }
.landing-tour.back .tour-stage > .landing-section.is-current { animation-name: tour-in-back; }
@keyframes tour-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes tour-in-back { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.tour-stage .landing-visual, .tour-stage .landing-visual > .visual-window { display: flex; flex-direction: column; }
.tour-stage .landing-visual > .visual-window, .tour-stage .visual-window > .visual-body { flex: 1 1 auto; }
.tour-stage .visual-window > .visual-body { align-content: start; }
.tour-stage > .landing-section:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.landing-tour.carousel .landing-copy > p:first-of-type { font-size: 18px; line-height: 28px; }
/* On a wide screen More details stays beside the visual and never reaches below it: it takes the space under the text
   (contain: size, so its own length does not make the slide taller) and scrolls inside it, its summary staying in sight */
@media (min-width: 901px) {
  .tour-stage > .landing-section.has-visual:has(.visual-window) { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "copy visual" "more visual"; }
  .tour-stage > .has-visual > .landing-more { contain: size; min-height: 48px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding-right: 8px; }
  .tour-stage > .has-visual > .landing-more > summary { position: sticky; top: 0; z-index: 1; background: var(--mist); padding-bottom: 4px; }
}
/* Under the slides: the arrows either side of the dots in the middle, Pause tour / Play tour on the right. A dot is a 24px
   target with a small pip in it; the current one stretches into a bar, which, while the carousel moves on by itself, is a
   light track its progress bar fills (the bar's animation, store.js, times the carousel). On a phone the controls wrap,
   the dots and arrows first. */
.tour-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 24px; }
.tour-nav { grid-column: 2; display: flex; align-items: center; gap: 8px; }
.tour-dots { display: flex; align-items: center; gap: 2px; }
.tour-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: none; }
.tour-dot:hover { background: none; }
.tour-dot[aria-selected=true] { width: 44px; }
.tour-pip { position: relative; display: block; width: 10px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--slate); opacity: .35;
  transition: width .3s ease, opacity .3s ease; }
.tour-dot:hover .tour-pip { opacity: .6; }
.tour-dot[aria-selected=true] .tour-pip { width: 32px; opacity: 1; background: var(--teal); }
.landing-tour.cycling .tour-dot[aria-selected=true] .tour-pip { background: var(--track); }
.tour-progress { position: absolute; inset: 0; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.tour-arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 18px; color: var(--navy); }
.tour-arrow::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.tour-arrow.prev::before { transform: translateX(2px) rotate(135deg); }
.tour-arrow.next::before { transform: translateX(-2px) rotate(-45deg); }
.tour-play { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; line-height: 18px;
  color: var(--slate); white-space: nowrap; }
.tour-play::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.landing-tour.cycling .tour-play::before { width: 3px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
@media (max-width: 900px) {
  .tour-stage > .landing-section, .tour-stage > .landing-section.has-visual:has(.visual-window) { display: flex; flex-direction: column; }
  .tour-stage > .landing-section > .landing-visual { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .tour-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 16px; }
  .landing-tour.carousel .landing-copy > p:first-of-type { font-size: 16px; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-stage > .landing-section.is-current { animation: none; }
  .tour-pip { transition: none; }
}

/* More questions, and a landing page's Compare Standard and Premier under the price cards (closed at first, so the page
   stays short; the Business page shows its table open): a button that opens what it names under it */
.faq-more { margin-top: 16px; }
.compare-more { margin-top: 24px; }
.faq-more > summary, .compare-more > summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 700;
  color: var(--navy); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; }
.faq-more > summary::-webkit-details-marker, .compare-more > summary::-webkit-details-marker { display: none; }
.faq-more > summary::after, .compare-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.faq-more[open] > summary::after, .compare-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.faq-more > summary:hover, .compare-more > summary:hover { background: var(--mist); }
.faq-more > .faq { margin-top: 8px; }
.compare-more > p.muted { max-width: 760px; margin: 16px 0 0; }
.compare-more > .table-scroll { margin-top: 16px; }

/* The visual itself (store.js visualCard and the builders after it): a small ATLSX screen with fictional figures. Text in
   the text colors; marks in green on the light teal track, teal for the part that moves, the reorder point and budget
   level as a dark mark; statuses as the site's labelled badges. */
.visual-window { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--teal); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 13px; line-height: 18px; color: var(--text); container-type: inline-size; }
.visual-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); }
.visual-title { font-size: 14px; font-weight: 700; }
.visual-sub { font-size: 12px; color: var(--muted); }
.visual-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
.visual-note { margin: 0; padding: 0 16px 12px; font-size: 11px; line-height: 16px; color: var(--muted); }
.visual-body p { margin: 0; }
.v-caption { font-size: 11px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.v-meta { font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 400; }
.v-label { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.v-amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.v-strong { font-weight: 700; }
.v-rows { display: grid; gap: 12px; }
.v-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.v-row > svg, .v-row > .v-meta { grid-column: 1 / -1; }
.v-row.v-total { border-top: 2px solid var(--teal); padding-top: 8px; font-weight: 700; }
.v-bar { display: block; overflow: visible; }
.v-fill { fill: var(--green); }
.v-track { fill: var(--track); }
.v-moved { fill: var(--teal); }
.v-gap { fill: var(--surface); }
.v-mark { fill: var(--navy); }
.v-axis { fill: var(--border); }
.v-o1 .v-fill { fill: var(--ramp-1); }
.v-o2 .v-fill { fill: var(--ramp-2); }
.v-o3 .v-fill { fill: var(--ramp-3); }
.v-o4 .v-fill { fill: var(--ramp-4); }
.v-o5 .v-fill { fill: var(--ramp-5); }
.v-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.v-legend li { display: inline-flex; align-items: center; gap: 6px; }
.v-legend svg { flex: none; }
.v-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v-table th, .v-table td { padding: 6px 4px; border-bottom: 1px solid #EBF0F0; text-align: left; font-weight: 400; vertical-align: bottom; }
.v-table th:first-child, .v-table td:first-child { padding-left: 0; }
.v-table th:last-child, .v-table td:last-child { padding-right: 0; }
.v-table thead th { font-size: 11px; line-height: 14px; letter-spacing: .3px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.v-table .num { text-align: right; white-space: nowrap; }
.v-table thead .num { white-space: normal; }
.v-table .v-total th, .v-table .v-total td { font-weight: 700; border-top: 2px solid var(--teal); border-bottom: 0; }
.v-table .v-subtotal th, .v-table .v-subtotal td { font-weight: 700; }
.v-table .v-group th { padding-top: 10px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.v-report tbody tr:not(.v-group):not(.v-subtotal):not(.v-total) th { padding-left: 12px; }  /* a report's accounts under their group */
.v-table .v-new td { background: var(--ok-bg); font-weight: 700; }
.v-facts { display: grid; gap: 4px; margin: 0; }
.v-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #EBF0F0; }
.v-facts dt { color: var(--muted); }
.v-facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.v-stats div { background: var(--mist); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.v-stats dt { font-size: 11px; line-height: 14px; color: var(--muted); }
.v-stats dd { margin: 4px 0 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.v-stats dd.v-meta { margin: 0; font-size: 11px; font-weight: 400; }
.v-columns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.v-col { display: grid; justify-items: center; gap: 2px; }
.v-col svg { display: block; overflow: visible; }
.v-col-label { font-size: 12px; font-weight: 700; margin-top: 4px; }
.v-col-note { font-size: 11px; line-height: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v-col-note.over { color: var(--danger); font-weight: 700; }  /* over budget: the + says it, the color repeats it */
.v-swap { display: inline-grid; justify-items: end; }
.v-swap > * { grid-area: 1 / 1; }
.v-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-status .badge { display: inline-flex; align-items: center; gap: 4px; }
.v-entry { border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.v-entry-head, .v-log-head, .v-recurring-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.v-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--ok-bg); font-size: 12px;
  line-height: 16px; font-weight: 700; color: var(--navy); justify-self: start; }
.v-tag { display: inline-block; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 11px; line-height: 16px; font-weight: 700;
  color: var(--slate); vertical-align: 1px; }
.v-log { list-style: none; margin: 0; padding: 0; display: grid; }
.v-log li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid #EBF0F0; }
.v-log li:first-child { padding-top: 0; }
.v-lock, .v-done, .v-file { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--mist); font-weight: 700;
  color: var(--navy); }
.v-done { background: var(--ok-bg); }
.v-note { font-size: 12px; line-height: 17px; color: var(--muted); border-left: 3px solid var(--track); padding-left: 10px; }
.v-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.v-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid #EBF0F0; }
.v-feed li:first-child { padding-top: 0; }
.v-feed .badge { grid-column: 2 / -1; justify-self: start; }
.v-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-step { position: relative; display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: 12px; text-align: center; }
.v-step + .v-step::before, .v-step + .v-step::after { content: ""; position: absolute; top: 11px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px;
  background: var(--border); }
.v-step + .v-step::after { background: var(--green); transform-origin: 0 50%; }
.v-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #FFFFFF; }
.v-address { display: grid; gap: 0; justify-self: start; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 0 0 2px var(--teal); }
.v-found { display: grid; gap: 8px; background: var(--mist); border-radius: 8px; padding: 10px 12px; }
.v-found-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); }
.v-rates { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v-rates li { display: flex; justify-content: space-between; gap: 12px; }
.v-recurring { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.v-button { display: inline-block; border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 12px; line-height: 18px; font-weight: 700;
  background: var(--surface); color: var(--navy); }
.v-export { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.v-file .v-meta { font-weight: 400; }

/* The motion: each visual plays once as it scrolls into view (store.js playOnce). .will-play holds every part at its first
   frame, .playing runs it to its last, each part after the delay its v-t<n> class gives (--t, 0.3 s a step). Without
   .will-play (less motion asked for, or no IntersectionObserver) the last frame shows at once and nothing moves. Bars
   and columns are drawn at their final size and animated by transforms only. */
.v-t1 { --t: .3s; } .v-t2 { --t: .6s; } .v-t3 { --t: .9s; } .v-t4 { --t: 1.2s; } .v-t5 { --t: 1.5s; } .v-t6 { --t: 1.8s; }
.v-t7 { --t: 2.1s; } .v-t8 { --t: 2.4s; } .v-t9 { --t: 2.7s; } .v-t10 { --t: 3s; } .v-t11 { --t: 3.3s; } .v-t12 { --t: 3.6s; }
.v-grow-x { transform-box: fill-box; transform-origin: 0 50%; }
.v-grow-y { transform-box: fill-box; transform-origin: 50% 100%; }
.v-shrink-x { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }  /* the part that leaves: gone in the last frame */
.v-hide { opacity: 0; }  /* the text that is replaced: gone in the last frame */
.will-play .v-show { opacity: 0; transform: translateY(6px); }
.will-play .v-hide { opacity: 1; }
.will-play .v-grow-x { transform: scaleX(0); }
.will-play .v-grow-y { transform: scaleY(0); }
.will-play .v-shrink-x { transform: none; }
.will-play .v-hl { box-shadow: 0 0 0 2px transparent; }
.will-play .v-step .v-dot { background: var(--border); }
.will-play .v-step .v-icon { opacity: 0; }
.will-play .v-step { color: var(--muted); }
.will-play .v-step + .v-step::after { transform: scaleX(0); }
.will-play.playing .v-show { opacity: 1; transform: none; transition: opacity .45s ease var(--t, 0s), transform .45s ease var(--t, 0s); }
.will-play.playing .v-hide { opacity: 0; transition: opacity .3s ease var(--t, 0s); }
.will-play.playing .v-grow-x, .will-play.playing .v-grow-y { transform: none; transition: transform .9s cubic-bezier(.2, .7, .2, 1) var(--t, 0s); }
.will-play.playing .v-shrink-x { transform: scaleX(0); transition: transform .7s ease-in-out var(--t, 0s); }
.will-play.playing .v-hl { box-shadow: 0 0 0 2px var(--teal); transition: box-shadow .4s ease var(--t, 0s); }
.will-play.playing .v-step { color: var(--text); transition: color .3s ease var(--t, 0s); }
.will-play.playing .v-step .v-dot { background: var(--green); transition: background-color .3s ease var(--t, 0s); }
.will-play.playing .v-step .v-icon { opacity: 1; transition: opacity .3s ease var(--t, 0s); }
.will-play.playing .v-step + .v-step::after { transform: none; transition: transform .6s ease calc(var(--t, 0s) - .6s); }
.will-play.playing .v-press { animation: v-press .5s ease var(--t, 0s) 1 both; }
@keyframes v-press { 40% { transform: scale(.92); background: var(--green); border-color: var(--green); color: #FFFFFF; } }
@media (prefers-reduced-motion: reduce) {
  .landing-visual *, .landing-visual *::before, .landing-visual *::after { transition: none !important; animation: none !important; }
}
/* A narrow card (a phone): tighter padding, and report tables in smaller type with their headings in plain case, so the
   programs' four columns fit side by side */
@container (max-width: 420px) {
  .visual-body { padding: 12px; gap: 12px; }
  .visual-head { padding: 10px 12px; }
  .visual-note { padding: 0 12px 10px; }
  .v-stats { grid-template-columns: 1fr 1fr; }
  .v-stats div:last-child { grid-column: 1 / -1; }
  .v-table { font-size: 12px; line-height: 16px; }
  .v-table th, .v-table td { padding: 5px 3px; }
  .v-table thead th { font-size: 11px; letter-spacing: 0; text-transform: none; }
}
@container (max-width: 300px) {  /* the narrowest phones: smaller still, and a long heading may break */
  .v-table { font-size: 11px; }
  .v-table th, .v-table td { padding: 4px 2px; }
  .v-table thead th { font-size: 10px; hyphens: auto; overflow-wrap: anywhere; }
}

/* Demo video (/demo/): the video first, centered on the navy band at up to 1040px, then the sign-up below it (#try). The
   chapters list says what the video shows, for anyone who cannot watch it. */
.demo-watch { text-align: center; padding: 8px 0 56px; }
.demo-watch .crumb, .demo-watch .lead { margin-left: auto; margin-right: auto; }
.demo-watch .lead { max-width: 720px; }
.demo-video { margin: 32px auto 0; max-width: 880px; }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 14px; background: #0A1F2E;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.demo-video figcaption { margin-top: 12px; color: #B5C7C5; font-size: 14px; }
.demo-watch-next { margin: 28px 0 0; }
#try { scroll-margin-top: 96px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 48px; }
.demo-hero .hero-copy h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 12px; }
/* In the video: eight chapter tiles on the navy band under the video, 4 columns, 2 under 960px, 1 under 560px; still an
   ordered list for screen readers. The time buttons (shown by store.js) play the video from that chapter. */
.demo-contents { margin: 40px auto 0; max-width: 1040px; text-align: left; }
.demo-contents > h2 { color: #FFFFFF; font-size: 22px; margin: 0 0 16px; text-align: center; }
.demo-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.demo-chapter { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; color: var(--text); }
.demo-chapter .chapter-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal); color: #FFFFFF; font-size: 14px; font-weight: 700; }
.demo-chapter h3 { margin: 4px 0 0; font-size: 17px; }
.demo-chapter p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.chapter-jump { align-self: flex-start; margin-top: 6px; border: 1px solid var(--teal); background: transparent; color: var(--green); border-radius: 999px;
  padding: 4px 12px; font-weight: 700; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.chapter-jump:hover { background: var(--teal); color: #FFFFFF; }
.chapter-jump:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 960px) { .demo-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .demo-chapters { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .demo-watch { padding-bottom: 40px; } .demo-video { margin-top: 24px; } }

/* Demo sign-up (/demo/, store.js demoPage): the copy and the form side by side on the navy band, one column below 960px;
   the notes below in three cards. The trap field for bots is out of sight and out of the tab order. */
.hero.demo-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.demo-hero .hero-copy { padding-top: 24px; }
.demo-card { color: var(--text); padding: 32px; }
.demo-card h2 { margin: 0 0 4px; }
.demo-card #demo-signup > p.muted { margin: 0 0 4px; }
.demo-card a:focus-visible { outline-color: var(--teal); }
.demo-form { display: grid; gap: 4px; }
.demo-field label { margin: 12px 0 6px; }
.demo-form .check-field { margin-top: 16px; }
.demo-form .check-field label { font-size: 15px; }
.demo-notice { margin: 12px 0 0; }
.demo-form .error { margin: 8px 0 0; }
.demo-form button[type=submit] { margin-top: 16px; width: 100%; }
.demo-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.notice.warn { background: var(--warn-bg); border-color: #F1DFAE; color: var(--warn-text); margin: 8px 0 16px; }
.demo-card .notice { margin: 8px 0 16px; }
.notice.demo-device { background: var(--mist); border-color: var(--border); border-left: 4px solid var(--teal); }
.demo-notes { margin-top: 48px; }
.module-grid.demo-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .hero.demo-hero { grid-template-columns: 1fr; gap: 24px; }
  .demo-hero .hero-copy { padding-top: 0; }
  .module-grid.demo-facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .demo-card { padding: 24px; } }

/* Release notes on the Downloads tab: a short, readable "What's new" list. */
.release-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink, #0C1729); }
.release-notes h4 { margin: 0 0 8px; font-size: 14px; }
.release-notes p { margin: 0 0 8px; color: var(--muted, #52666B); }
.release-notes ul { margin: 0 0 8px; padding-left: 20px; }
.release-notes li { margin: 4px 0; line-height: 1.5; }
.release-notes li ul { margin: 4px 0 0; }
.release-notes code { font-size: 12px; background: #EEF5F4; border-radius: 4px; padding: 1px 4px; }

/* Legal pages (/privacy/): a table of contents that stays in view beside the text, readable line lengths, and a table
   that stacks into labelled rows on a phone. */
.legal-band .lead { max-width: 640px; }
.legal-dates { margin-top: 8px; }
.legal-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 24px; border: 1px solid var(--navy-2); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.legal-switch a { color: #B5C7C5; text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 7px; }
.legal-switch a:hover { color: #FFFFFF; }
.legal-switch a[aria-current=page] { background: var(--teal); color: #FFFFFF; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 48px; }
.legal-toc { position: sticky; top: 96px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: grid; grid-template-columns: 24px 1fr; padding: 6px 8px; border-radius: 6px; border-left: 3px solid transparent;
  color: var(--slate); font-size: 14px; line-height: 20px; text-decoration: none; }
.legal-toc a::before { content: counter(toc); color: var(--teal); font-weight: 700; font-variant-numeric: tabular-nums; }
.legal-toc a:hover { background: var(--surface); color: var(--navy); }
.legal-toc a.current { background: var(--surface); color: var(--navy); font-weight: 700; border-left-color: var(--teal); }
.legal-body { display: grid; gap: 24px; min-width: 0; }
.legal-glance { border-top: 4px solid var(--teal); }
.glance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.glance-grid > div { background: var(--mist); border-radius: 8px; padding: 16px 20px; }
.glance-grid h3 { margin: 0 0 4px; font-size: 15px; }
.glance-grid p { margin: 0; font-size: 14px; line-height: 22px; color: var(--muted); }
.glance-note { margin: 16px 0 0; }
.legal-text { font-size: 16px; line-height: 28px; }
.legal-text p { max-width: 760px; }
.legal-text h2 { display: flex; align-items: center; gap: 12px; margin: 48px 0 16px; padding-top: 32px; border-top: 1px solid var(--border);
  scroll-margin-top: 96px; }
.legal-sub { display: flex; gap: 8px; font-size: 18px; line-height: 26px; margin: 32px 0 12px; scroll-margin-top: 96px; }
.legal-sub span { color: var(--green); font-variant-numeric: tabular-nums; }
.legal-num { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mist);
  color: var(--green); font-size: 14px; font-variant-numeric: tabular-nums; }
.legal-table-wrap { margin: 0 0 24px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--border); }
.legal-table thead th { border-top: 0; background: var(--navy); color: #FFFFFF; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.legal-table tbody th { width: 24%; font-weight: 700; }
.legal-table td:last-child { width: 30%; color: var(--muted); }
.legal-table tbody tr:nth-child(even) { background: #F7FAF9; }
.legal-callout { background: var(--warn-bg); color: var(--warn-text); border-left: 4px solid #C99A2E; border-radius: 0 8px 8px 0; padding: 12px 16px;
  font-size: 15px; line-height: 24px; }
.legal-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; background: var(--mist); border-radius: 8px; padding: 24px; }
.legal-contact address { font-style: normal; }
.legal-contact dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.legal-contact dt { font-weight: 700; }
.legal-contact dd { margin: 0; }
@media (max-width: 960px) {
  .legal { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .legal-toc ol, .glance-grid, .legal-contact { grid-template-columns: 1fr; }
  .legal-text h2 { font-size: 20px; line-height: 28px; scroll-margin-top: 128px; }
  .legal-sub { scroll-margin-top: 128px; }
  .legal-switch { display: flex; }
  .legal-switch a { flex: 1; text-align: center; padding: 8px; }
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tbody th, .legal-table td:last-child { width: auto; }
  .legal-table tbody th { border-top: 1px solid var(--border); padding-bottom: 4px; }
  .legal-table tbody tr:first-child th { border-top: 0; }
  .legal-table td { border-top: 0; padding-top: 4px; }
  .legal-table td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    font-weight: 700; color: var(--slate); }
}
@media print {
  .site-header, .legal-toc { display: none; }
  .hero-band { background: none; color: var(--navy); padding-bottom: 0; }
  .hero h1, .hero .lead, .hero .eyebrow { color: var(--navy); }
  .legal-switch, .legal-dates, .crumb { display: none; }
  .legal { display: block; }
  .card { box-shadow: none; border: 0; padding: 0; }
}

/* Talk to sales: the dialog (store.js, salesDialog) uses the buyer dialog's columns and the demo form's trap field. */
.modal:has(.sales-form) { width: min(600px, calc(100% - 32px)); }
.sales-field label { margin: 10px 0 6px; }
.sales-field textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid #C9D6D4; border-radius: 6px;
  padding: 10px 12px; width: 100%; resize: vertical; min-height: 96px; }
.sales-field textarea:focus { outline: 2px solid #40B8B5; outline-offset: 1px; }
.sales-field input[type=number] { max-width: 160px; }
.sales-notice { margin: 8px 0 0; }
.sales-form .error { margin: 4px 0 0; }
.sales-line { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 24px 0 8px;
  padding: 16px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sales-line p { margin: 0; }
.hero-sales { margin: -8px 0 24px; }
.hero-sales button { background: none; border: 0; padding: 0; color: var(--on-navy); font-size: 15px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; }
.hero-sales button:hover { background: none; color: #FFFFFF; }
.hero-sales button:focus-visible { outline-color: #FFFFFF; }