/* ============================================================================
   SnapPOS design system
   ----------------------------------------------------------------------------
   Brand blue (#014E99) is lifted straight from the logo SVG, so the site and
   the product's own "Glass" theme stay in the same family.

   Structure: 1. tokens  2. reset/base  3. layout  4. components  5. sections
   6. utilities  7. responsive  8. print

   The page is predominantly light — that's what Lightspeed, Toast and GoDaddy
   all do, and it reads as mainstream business software rather than a dev tool.
   Dark is used deliberately, as a *band* (hero, CTA, footer), not as the theme.
   A full dark mode still ships for visitors whose OS asks for it.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* Brand ---------------------------------------------------------------- */
  --brand:          #014E99;   /* logo blue — primary actions, headings accent */
  --brand-deep:     #01356A;   /* pressed states, dark band base               */
  --brand-bright:   #0A84FF;   /* links + focus; brand blue is too dark for it */
  --brand-tint:     #E8F1FA;   /* section washes                               */
  --brand-ink:      #014E99;   /* brand used as TEXT — see the dark override   */
  --brand-tint-2:   #D3E4F6;   /* borders on tinted surfaces                   */

  /* Support -------------------------------------------------------------- */
  --gain:           #0F7B5A;   /* "you keep this" — savings, checkmarks        */
  --gain-tint:      #E4F4EE;
  --warn:           #B4530A;   /* subscription costs, footnotes                */
  --warn-tint:      #FDF0E4;

  /* Neutrals ------------------------------------------------------------- */
  --ink:            #0C1524;   /* body text                                    */
  --ink-2:          #3B4A61;   /* secondary text                               */
  --ink-3:          #6B7A91;   /* captions, meta                               */
  --line:           #DFE5EE;   /* hairlines                                    */
  --line-2:         #EDF1F6;   /* subtle dividers                              */
  --surface:        #FFFFFF;
  --surface-2:      #F6F8FB;   /* alternating band                             */
  --surface-3:      #EFF3F8;   /* cards on tinted bands                        */

  /* Dark band (hero / CTA / footer) -------------------------------------- */
  --dark:           #061426;
  --dark-2:         #0A2039;
  --dark-line:      rgba(255, 255, 255, 0.13);
  --dark-ink:       #F2F6FB;
  --dark-ink-2:     #9FB3CC;

  /* Type ----------------------------------------------------------------- */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero:   clamp(2.4rem, 5.2vw, 4rem);
  --t-h1:     clamp(2.1rem, 4.6vw, 3.3rem);
  --t-h2:     clamp(1.7rem, 3.4vw, 2.5rem);
  --t-h3:     clamp(1.2rem, 1.9vw, 1.45rem);
  --t-lede:   clamp(1.05rem, 1.7vw, 1.3rem);
  --t-body:   1rem;
  --t-small:  0.9rem;
  --t-micro:  0.79rem;

  /* Space ---------------------------------------------------------------- */
  --maxw:     1200px;
  --maxw-txt: 760px;          /* readable measure for prose                   */
  --gut:      clamp(20px, 5vw, 44px);
  --sect:     clamp(60px, 8.5vw, 116px);

  /* Form ----------------------------------------------------------------- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(12, 21, 36, .06), 0 2px 8px rgba(12, 21, 36, .04);
  --shadow:    0 4px 12px rgba(12, 21, 36, .07), 0 12px 32px rgba(12, 21, 36, .07);
  --shadow-lg: 0 8px 24px rgba(12, 21, 36, .10), 0 28px 64px rgba(12, 21, 36, .13);

  --ease: cubic-bezier(.22, .68, .36, 1);
}

/* Full dark mode. The dark *bands* keep their own colours regardless — these
   variables only repaint the light surfaces so the page inverts coherently. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* #014E99 on a dark surface is 1.9:1. This is 7.2:1. */
    --brand-ink:  #6FB4FF;
    --ink:        #EAF0F8;
    --ink-2:      #A8B8CE;
    --ink-3:      #7C8CA3;
    --line:       #1C2C42;
    --line-2:     #15243A;
    --surface:    #08182B;
    --surface-2:  #061426;
    --surface-3:  #0D2138;
    --brand-tint:   #0C2440;
    --brand-tint-2: #17355A;
    --gain-tint:  #0A2A20;
    --warn-tint:  #2C1B08;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow:    0 4px 12px rgba(0, 0, 0, .34);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --brand-ink:  #6FB4FF;
  --ink:        #EAF0F8;
  --ink-2:      #A8B8CE;
  --ink-3:      #7C8CA3;
  --line:       #1C2C42;
  --line-2:     #15243A;
  --surface:    #08182B;
  --surface-2:  #061426;
  --surface-3:  #0D2138;
  --brand-tint:   #0C2440;
  --brand-tint-2: #17355A;
  --gain-tint:  #0A2A20;
  --warn-tint:  #2C1B08;
}

/* ------------------------------------------------------------ 2. reset/base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;      /* clears the sticky nav on anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-bright); text-underline-offset: 2px; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.13;
  letter-spacing: -.021em;
  font-weight: 800;
  /* Keeps a short trailing word from being stranded on its own line. */
  text-wrap: balance;
}
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
strong { font-weight: 700; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ---------------------------------------------------------------- 3. layout */

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

section { padding-block: var(--sect); }
.band      { background: var(--surface-2); }
.band-tint { background: var(--brand-tint); }
.band-dark { background: var(--dark); color: var(--dark-ink); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: var(--dark-ink-2); }

.grid { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* Section headers ------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: .85em;
}
.band-dark .eyebrow { color: #6FB4FF; }

.sect-head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 58px); }
.sect-head h2 { font-size: var(--t-h2); }
.sect-head p  { font-size: var(--t-lede); color: var(--ink-2); margin-bottom: 0; }
.band-dark .sect-head p { color: var(--dark-ink-2); }
.sect-head.center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------ 4. components */

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: inherit; font-weight: 650; line-height: 1;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s var(--ease), background .15s var(--ease),
              border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-deep); box-shadow: var(--shadow); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }

/* The hero is a dark surface too, but it isn't a .band-dark — it has its own
   gradient. Both need the light-on-dark button treatment, in both themes. */
.band-dark .btn-ghost, .hero .btn-ghost { color: #fff; border-color: var(--dark-line); }
.band-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.btn-lg { padding: 18px 34px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: var(--t-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Cards ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 32px);
}
.band .card, .band-tint .card { background: var(--surface); }

/* Cards sitting on a dark band have to be dark themselves — otherwise the
   band's white heading colour lands on the card's white surface. */
.band-dark .card {
  background: rgba(255, 255, 255, .055);
  border-color: var(--dark-line);
}
.band-dark .card h3 { color: #fff; }
.band-dark .card p  { color: var(--dark-ink-2); }
.band-dark .card-icon { background: rgba(255, 255, 255, .1); color: #7CC0FF; }
.card-lift { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { font-size: var(--t-h3); }
.card p:last-child { margin-bottom: 0; }

.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 18px;
}
.card-icon svg { width: 23px; height: 23px; }

/* Pills / chips --------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
.chip {
  font-size: var(--t-small);
  font-weight: 550;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.band-dark .chip {
  background: rgba(255,255,255,.05);
  border-color: var(--dark-line);
  color: var(--dark-ink);
}

/* Badge ----------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--r-pill);
}
.badge-gain { background: var(--gain-tint); color: var(--gain); }
.badge-warn { background: var(--warn-tint); color: var(--warn); }

/* Nav ------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex; align-items: center; gap: 24px;
  height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand img { height: 34px; width: 34px; }
.brand b { font-size: 1.24rem; font-weight: 800; letter-spacing: -.03em; }
.brand b span { color: var(--brand); }

.nav-links { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; }
.nav-links a {
  display: block; padding: 9px 12px;
  font-size: var(--t-small); font-weight: 550;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--r-sm);
  /* Spanish labels run longer than the English ones; without this the nav
     wraps to two rows and grows taller on the /es/ pages. */
  white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav-links a:hover { color: var(--brand-ink); background: var(--brand-tint); }

/* Active state. Pages already set aria-current="page"; site.js adds
   aria-current="true" to an anchor link while its section is on screen, so
   both the current page and the section being read light up the same way. */
.nav-links a[aria-current] {
  position: relative;
  color: var(--brand-ink);
  background: var(--brand-tint);
  font-weight: 650;
}
/* A rule under the label too, so the state survives for anyone who cannot
   pick the tint out of the bar. */
.nav-links a[aria-current]::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--brand-ink);
}

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-tel {
  font-weight: 700; font-size: var(--t-small);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-tel:hover { color: var(--brand-ink); }

/* Language switch — the site ships English and Spanish side by side, so the
   toggle has to survive the mobile breakpoint that hides the rest of the nav. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px; font-size: var(--t-micro); font-weight: 700;
}
.lang-switch a {
  display: block; padding: 4px 9px; border-radius: var(--r-pill);
  color: var(--ink-3); text-decoration: none; letter-spacing: .04em;
}
.lang-switch a:hover { color: var(--brand-ink); }
.lang-switch a[aria-current="true"] { background: var(--brand); color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; color: var(--ink);
}

/* Tables ---------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare {
  width: 100%; min-width: 640px;
  border-collapse: separate; border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  font-size: var(--t-small);
}
table.compare th, table.compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
table.compare thead th {
  background: var(--surface-3);
  font-size: var(--t-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
table.compare thead th.us { color: var(--brand-ink); background: var(--brand-tint); }
table.compare tbody th { font-weight: 600; color: var(--ink); }
table.compare td.us { background: color-mix(in srgb, var(--brand-tint) 55%, transparent); font-weight: 600; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }

/* A table keeps its own light surface on a dark band, which makes the data pop
   — but it must reassert its text colours, or cells inherit the band's
   near-white ink and vanish against the white background. */
.band-dark table.compare { color: var(--ink); }
.band-dark table.compare tbody th { color: var(--ink); }
.band-dark table.compare td { color: var(--ink-2); }
.band-dark table.compare thead th { color: var(--ink-3); }
.band-dark table.compare thead th.us { color: var(--brand); }

.yes { color: var(--gain); font-weight: 700; }
.no  { color: var(--ink-3); }

/* Marquee ----------------------------------------------------------------
   Names scroll rather than logos: reproducing a processor's mark implies a
   relationship we do not have with most of them. Pure CSS, no library. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 4px;
  /* fade the ends so items enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* The track holds the list twice; translating by half its width loops
   seamlessly because the second copy lands exactly where the first began. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee .chip { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  /* the duplicate set is redundant once it is a static list */
  .marquee-track [data-dup] { display: none; }
}

/* Document downloads ----------------------------------------------------- */
.doc { display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: start; }

/* A page-shaped block, so the card reads as "a document" before any text. */
.doc-thumb {
  position: relative;
  aspect-ratio: 8.5 / 11;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--surface), var(--surface-3));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  color: var(--brand-ink);
  overflow: hidden;
}
.doc-thumb::before {                       /* the header band of a printed page */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22%;
  background: var(--brand); opacity: .9;
}
.doc-thumb span {
  position: relative; z-index: 1;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .08em;
  color: var(--brand-ink);
}

.doc-body h3 { font-size: 1.08rem; margin-bottom: .25em; }
.doc-meta { font-size: var(--t-micro); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .8em; }
.doc-body p { color: var(--ink-2); font-size: var(--t-small); margin-bottom: 0; }

.doc-dl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dl {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.dl:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-1px); }
.dl svg { width: 16px; height: 16px; flex: none; }
.dl small { font-weight: 500; color: var(--ink-3); }

@media (max-width: 620px) {
  .doc { grid-template-columns: 52px 1fr; gap: 14px; }
}

/* Flow diagram ----------------------------------------------------------
   Built from HTML boxes rather than an SVG so it reflows on a phone instead
   of scaling down to unreadable type. */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; }
.flow-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 20px;
  margin-right: 26px;                    /* room for the connector */
}
.flow-step:last-child { margin-right: 0; }
/* Connector arrow between steps */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -21px;
  width: 16px; height: 2px;
  background: var(--brand-tint-2);
}
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute; top: 50%; right: -21px;
  transform: translate(13px, -4px);
  border: 5px solid transparent;
  border-left-color: var(--brand-tint-2);
}
.flow-num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: var(--t-micro); font-weight: 700;
  margin-bottom: 12px;
}
.flow-step h3 { font-size: 1rem; margin-bottom: .35em; }
.flow-step p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }

.band-dark .flow-step { background: rgba(255,255,255,.055); border-color: var(--dark-line); }
.band-dark .flow-step h3 { color: #fff; }
.band-dark .flow-step p { color: var(--dark-ink-2); }
.band-dark .flow-step::after, .band-dark .flow-step::before { background: none; }
.band-dark .flow-step:not(:last-child)::after { background: var(--dark-line); }
.band-dark .flow-step:not(:last-child)::before { border-left-color: var(--dark-line); }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 30px; }
  .flow-step { margin-right: 0; }
  /* Rotate the connector to point down when the steps stack. */
  .flow-step:not(:last-child)::after {
    top: auto; bottom: -22px; right: 50%;
    width: 2px; height: 14px;
  }
  .flow-step:not(:last-child)::before {
    top: auto; bottom: -22px; right: 50%;
    transform: translate(4px, 13px);
    border-left-color: transparent;
    border-top-color: var(--brand-tint-2);
  }
  .band-dark .flow-step:not(:last-child)::before { border-left-color: transparent; border-top-color: var(--dark-line); }
}

/* Pricing tiers --------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 28px); align-items: start; }

.tier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column;
}
.tier.featured {
  border-color: var(--brand);
  border-width: 2px;
  box-shadow: var(--shadow);
}
.tier-flag {
  position: absolute; top: -13px; left: clamp(26px, 3vw, 38px);
  background: var(--brand); color: #fff;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-pill);
}
.tier h3 { font-size: var(--t-h3); margin-bottom: .3em; }
.tier-sub { font-size: var(--t-small); color: var(--ink-2); min-height: 2.9em; }

.tier-price { display: flex; align-items: baseline; gap: .4em; margin: 18px 0 4px; }
.tier-price .num { font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.tier-price .per { font-size: var(--t-small); font-weight: 600; color: var(--ink-3); }
.tier-once { font-size: var(--t-micro); color: var(--gain); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.tier-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 11px; font-size: var(--t-small); }
.tier-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.tier-list svg { width: 18px; height: 18px; color: var(--gain); margin-top: 3px; flex: none; }
.tier .btn { margin-top: auto; }
.tier-foot { font-size: var(--t-micro); color: var(--ink-3); margin: 14px 0 0; }

/* Hardware options ------------------------------------------------------ */
.hw-price { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink); margin-bottom: .2em; }
.hw-price.free { color: var(--gain); }

/* Screenshot frame ------------------------------------------------------ */
.shot {
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--surface);
}
.band-dark .shot { border-color: var(--dark-line); }

/* Cost calculator ------------------------------------------------------- */
.calc { display: grid; gap: 28px; grid-template-columns: 340px 1fr; align-items: start; }
.calc-controls { display: grid; gap: 20px; }

.field label { display: block; font-weight: 650; font-size: var(--t-small); margin-bottom: 7px; }
.field-hint { font-size: var(--t-micro); color: var(--ink-3); margin-top: 6px; }

.field input[type="range"] { width: 100%; accent-color: var(--brand); }
.field-val {
  font-size: 1.7rem; font-weight: 800; color: var(--brand-ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.calc-out { display: grid; gap: 14px; }
.calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface);
}
.calc-row.them { border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); }
.calc-row.us   { border-color: color-mix(in srgb, var(--gain) 40%, var(--line)); background: var(--gain-tint); }
.calc-row .lbl { font-weight: 650; }
/* "Starting at, software only" — the qualifier has to sit with the price, not
   in a footnote, or the number reads as the whole cost of getting started. */
.calc-row .lbl small {
  display: block;
  font-weight: 500;
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-top: 3px;
}
.calc-row .amt { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-row.them .amt { color: var(--warn); }
.calc-row.us   .amt { color: var(--gain); }
.calc-note { font-size: var(--t-small); color: var(--ink-2); }

/* Footer ---------------------------------------------------------------- */
footer { background: var(--dark); color: var(--dark-ink-2); padding-block: clamp(48px, 6vw, 76px) 32px; }
footer h4 { color: #fff; font-size: var(--t-small); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1em; }
footer a { color: var(--dark-ink-2); text-decoration: none; }
footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
.foot-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--t-small); }
.foot-bottom {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--dark-line);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: var(--t-micro); color: var(--dark-ink-2);
}

/* ----------------------------------------------------------- 5. sections */

/* Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--dark) 0%, var(--brand-deep) 68%, #04407D 100%);
  color: var(--dark-ink);
  padding-block: clamp(64px, 9vw, 118px);
  overflow: hidden;
}
/* Soft brand glow, keeps the flat gradient from looking like a solid slab. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(52% 60% at 78% 12%, rgba(10,132,255,.34), transparent 66%),
    radial-gradient(40% 46% at 8% 92%, rgba(1,78,153,.42), transparent 70%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(34px, 5vw, 66px); align-items: center; }
.hero h1 { font-size: var(--t-hero); color: #fff; letter-spacing: -.033em; }
.hero h1 em { font-style: normal; color: #7CC0FF; }
.hero-lede { font-size: var(--t-lede); color: #C6D8EE; max-width: 30em; }
.hero .btn-row { margin-top: 32px; }
.hero-note { margin-top: 20px; font-size: var(--t-small); color: #93AECD; }

/* Proof strip ----------------------------------------------------------- */
.proof { border-bottom: 1px solid var(--line); padding-block: 28px; background: var(--surface); }
.proof-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 58px); }
.proof-item { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); font-weight: 550; color: var(--ink-2); }
.proof-item svg { width: 19px; height: 19px; color: var(--gain); flex: none; }

/* Feature / screenshot alternating rows --------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1.14fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.split + .split { margin-top: clamp(48px, 7vw, 96px); }
.split.flip .split-txt { order: 2; }
.split h3 { font-size: var(--t-h2); }
.split p { font-size: 1.03rem; color: var(--ink-2); }

/* Vertical cards -------------------------------------------------------- */
.vert {
  position: relative; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.vert:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vert-img { aspect-ratio: 16 / 10; background: var(--surface-3); }
.vert-img img { width: 100%; height: 100%; object-fit: cover; }
.vert-body { padding: 20px 22px 24px; }
.vert-body h3 { font-size: 1.08rem; margin-bottom: .35em; }
.vert-body p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }

/* Quote ----------------------------------------------------------------- */
.quote { border-left: 3px solid var(--brand); padding-left: 24px; }
.quote blockquote { margin: 0 0 14px; font-size: var(--t-h3); font-weight: 600; line-height: 1.45; letter-spacing: -.015em; }
.quote cite { font-style: normal; font-size: var(--t-small); color: var(--ink-3); }
.quote .stat { font-size: 2.5rem; font-weight: 800; color: var(--brand-ink); letter-spacing: -.03em; line-height: 1; margin-bottom: .3em; }

/* CTA band -------------------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--brand-deep), var(--brand) 62%, #0A6ACB); color: #fff; }
.cta-band h2 { font-size: var(--t-h1); color: #fff; }
.cta-band p { color: #CFE2F7; font-size: var(--t-lede); }
.cta-band .btn-primary { background: #fff; color: var(--brand); }
.cta-band .btn-primary:hover { background: #EAF2FC; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ------------------------------------------------------------ 6. utilities */

.center    { text-align: center; }
.muted     { color: var(--ink-2); }
.small     { font-size: var(--t-small); }
.micro     { font-size: var(--t-micro); color: var(--ink-3); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.nowrap { white-space: nowrap; }
.list-check { list-style: none; padding: 0; display: grid; gap: 12px; }
.list-check li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; }
.list-check svg { width: 20px; height: 20px; color: var(--gain); margin-top: 2px; }

/* Reveal-on-scroll; JS adds .in. Without JS everything stays visible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- 7. responsive */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .calc { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  .tiers { grid-template-columns: 1fr; }
  .tier-flag { left: 50%; transform: translateX(-50%); }
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .nav-in { height: 64px; }

  /* Disclosed by the toggle button. */
  .nav-links.open {
    display: grid; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px var(--gut) 20px;
    box-shadow: var(--shadow);
  }
  .nav-links.open a { padding: 13px 12px; font-size: 1rem; }

  .split, .split.flip .split-txt { grid-template-columns: 1fr; order: 0; }
  .g-3 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .nav-cta .btn { width: auto; }
  .proof-in { justify-content: flex-start; gap: 14px; }
}

/* --------------------------------------------------------------- 8. print */

@media print {
  .nav, .cta-band, .btn-row, .calc-controls, footer .foot-grid { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .hero, .band-dark { background: #fff !important; color: #000 !important; }
  .hero h1, .band-dark h2, .band-dark h3 { color: #000 !important; }
  .hero-lede, .band-dark p { color: #333 !important; }
  section { padding-block: 18px; break-inside: avoid; }
  .card, .vert, table.compare { border-color: #bbb !important; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  @page { margin: .55in; }
}