/* ═══════════════════════════════════════════════════════════════════════════
   POS Pilot — marketing site design system
   One stylesheet, shared by every page. Tokens first, then a small component
   layer. Pages compose from these; they never invent their own colours or
   spacing, which is what keeps eight pages feeling like one product.

   Brand values are lifted from the app itself so the site and the software
   look like the same thing.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── surface & ink ───────────────────────────────────────────────────
     Midnight navy, four steps, darkest at the back — the same ramp the app
     ships as its default theme (`pospilot-blue`, index.html:1486). */
  --bg:            #05101F;
  --bg-raised:     #0A1A2E;
  --panel:         #0C2038;
  --panel-hi:      #102844;
  --line:          rgba(125,180,255,.13);
  --line-strong:   rgba(125,180,255,.30);
  --bg-rgb:        5,16,31;          /* for the translucent sticky header */

  --text:          #EAF2FB;
  --text-dim:      #93A9C4;
  /* Quietest ink tier, measured rather than chosen by eye. Tuned against
     --panel-hi (the LIGHTEST surface it lands on, inside the receipt), not
     against --bg — a value that passes on the dark background alone drops to
     4.16:1 up there. 4.73:1 on panel-hi, 6.05:1 on --bg. */
  --text-faint:    #7E93AD;

  /* ── brand: electric blue ────────────────────────────────────────────
     The app's primary-accent slot. Blue is the product's identity — the
     sidebar's active state, the PLUS badge and every primary button. */
  --accent:        #3B9EFF;
  --accent-soft:   #86C8FF;
  --accent-hi:     #A9DCFF;
  --accent-deep:   #2179D2;
  --accent-rgb:    59,158,255;
  --accent-glow:   rgba(59,158,255,.16);
  --on-accent:     #04121F;          /* ink ON the accent */

  /* The app's primary button is a gradient with a copper inner edge, not a
     flat fill. Reproduced exactly so the site's CTA is the product's CTA. */
  --btn-hi:        #8FCEFF;
  --btn-mid:       #2E90F5;
  --btn-lo:        #2A84DD;
  --btn-edge:      rgba(200,129,63,.50);

  --green:         #3DDC84;

  /* ── type scale ─────────────────────────────────────────────────────
     Ratio ~1.25, tuned by hand at the display sizes. Large text gets
     negative tracking; small text gets positive. That single detail does
     more for perceived quality than any amount of decoration.          */
  --f-display:  clamp(2.6rem, 6.2vw, 4.5rem);
  --f-h1:       clamp(2.1rem, 4.4vw, 3.1rem);
  --f-h2:       clamp(1.65rem, 3vw, 2.25rem);
  --f-h3:       1.2rem;
  --f-lead:     clamp(1.02rem, 1.55vw, 1.2rem);
  --f-body:     1rem;
  --f-sm:       .9rem;
  --f-xs:       .8rem;

  /* ── rhythm ─────────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 136px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 28px 70px -24px rgba(0,0,0,.75);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .34s;

  --page:  1140px;   /* content column */
  --prose: 720px;    /* reading column — legal pages, long copy */
}

/* ═══ reset ═══ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--f-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

/* ═══ layout ═══ */
.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--s-5) }
.prose{ max-width:var(--prose) }
section{ padding-block:var(--s-9) }
/* 860px is the one "compact" switch for the whole site — nav, strip and footer
   all turn over here together. 760 was leaving iPad portrait (768) on the wide
   layout, with four footer columns squeezed into ~150px each. */
@media (max-width:860px){ section{ padding-block:var(--s-8) } }

/* ═══ typography ═══ */
h1,h2,h3,h4{ line-height:1.15; font-weight:700; letter-spacing:-.022em }
.display{ font-size:var(--f-display); font-weight:800; letter-spacing:-.035em; line-height:1.04 }
h1{ font-size:var(--f-h1) } h2{ font-size:var(--f-h2) } h3{ font-size:var(--f-h3); letter-spacing:-.01em }
.lead{ font-size:var(--f-lead); color:var(--text-dim); line-height:1.6 }
.dim{ color:var(--text-dim) } .faint{ color:var(--text-faint) }
.tabnum{ font-variant-numeric:tabular-nums }

/* Small uppercase label above a heading. Used sparingly — it loses all
   meaning the moment it appears on every block. */
.eyebrow{
  display:inline-block; font-size:var(--f-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s-3);
}
.section-head{ max-width:640px; margin-bottom:var(--s-7) }
.section-head.center{ margin-inline:auto; text-align:center }
.section-head p{ margin-top:var(--s-4) }

/* ═══ buttons ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:48px; padding-inline:var(--s-6);
  border-radius:var(--r-pill);
  font-size:.96rem; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn-primary{
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-mid) 45%,var(--btn-lo));
  color:var(--on-accent);
  box-shadow:0 1px 2px rgba(2,10,22,.45), 0 2px 8px rgba(var(--accent-rgb),.14),
             inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 0 var(--btn-edge);
}
.btn-primary:hover{
  box-shadow:0 2px 4px rgba(2,10,22,.5), 0 6px 18px rgba(var(--accent-rgb),.28),
             inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(200,129,63,.66);
}
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text) }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent) }
.btn-lg{ height:56px; padding-inline:var(--s-7); font-size:1.02rem }
.btn-sm{ height:38px; padding-inline:var(--s-4); font-size:var(--f-sm) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
/* On a 320px phone a large button's 48px side padding — not its label — is what
   sets the minimum width of whatever card contains it, because the label is
   nowrap and grid/flex items floor at min-content. That pushed the download
   cards to 306px inside a 272px column. Trim the padding rather than letting
   the column shrink, which would clip the label instead. */
@media (max-width:420px){ .btn-lg{ padding-inline:var(--s-5) } }

/* ═══ surfaces ═══ */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-6);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.card:hover{ border-color:var(--line-strong); background:var(--panel-hi) }
.card-lift:hover{ transform:translateY(-3px) }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  font-size:var(--f-xs); font-weight:600; letter-spacing:.01em;
  background:var(--accent-glow); color:var(--accent-soft);
  border:1px solid rgba(var(--accent-rgb),.28);
}
.pill-plain{ background:rgba(125,180,255,.06); color:var(--text-dim); border-color:var(--line) }

.rule{ height:1px; background:var(--line); border:0 }

/* ═══ header ═══ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--bg-rgb),.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-head.scrolled{ border-bottom-color:var(--line); background:rgba(var(--bg-rgb),.90) }
.nav{ display:flex; align-items:center; gap:var(--s-6); height:70px }

/* ── full-bleed shell ────────────────────────────────────────────────────────
   The header and footer bars span the viewport; only page content keeps the
   1140px reading column. Both carry .wrap for its defaults and opt out of its
   cap here — on a 1900px monitor that cap was insetting the logo and the CTA
   by 396px each (symmetric, but far too deep for a nav).

   ONE declaration drives both bars and both of their edges, so left and right
   are structurally incapable of drifting apart, and the header can never fall
   out of step with the footer. The 24px floor matches .wrap's own gutter, so on
   phones the logo lines up with the content below it; it opens to 44px on wide
   screens. Keep this as a single rule — splitting it is how the two bars end up
   with different padding six edits from now. */
.site-head .nav,
.site-foot > .wrap{
  max-width:none;
  padding-inline:clamp(24px, 2.4vw, 44px);
}
/* The logo file is a complete lockup — mark + "POS PILOT" + tagline — so it
   stands alone. Any text beside it would just repeat the artwork. Sized by
   height with width:auto; the asset is pre-trimmed to its ink (1271×364), so
   the height set here is the height the mark actually occupies. */
.brand{ display:inline-flex; align-items:center; flex:0 0 auto }
.brand picture{ display:flex }   /* stop <picture>'s inline baseline gap */
.brand img{ height:42px; width:auto; transition:opacity var(--dur) var(--ease) }
.brand:hover img{ opacity:.82 }
.brand:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r-sm) }
@media (max-width:860px){ .brand img{ height:34px } }
.nav-links{ display:flex; align-items:center; gap:var(--s-6); margin-left:auto }
/* :not(.btn) matters — a bare `.nav-links a` outranks `.btn-primary` and was
   repainting the gold Download button's label dim grey (1.05:1, unreadable). */
.nav-links a:not(.btn){ font-size:var(--f-sm); color:var(--text-dim); transition:color var(--dur) var(--ease) }
.nav-links a:not(.btn):hover{ color:var(--text) }
.nav-cta{ margin-left:var(--s-2) }
.nav-toggle{ display:none; margin-left:auto; width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line) }
@media (max-width:860px){
  .nav-links{ display:none; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-raised); border-block:1px solid var(--line); padding:var(--s-3) var(--s-5) var(--s-5) }
  .nav-links.open{ display:flex }
  .nav-links a:not(.btn){ padding-block:var(--s-3); font-size:1rem; border-bottom:1px solid var(--line) }
  .nav-links .btn{ margin-top:var(--s-4) }
  .nav-toggle{ display:grid; place-items:center }
}

/* ═══ footer ═══ */
.site-foot{ border-top:1px solid var(--line); padding-block:var(--s-8) var(--s-7); margin-top:var(--s-8) }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:var(--s-7) }
.foot-col h4{ font-size:var(--f-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint); margin-bottom:var(--s-4); font-weight:700 }
.foot-col a{ display:block; font-size:var(--f-sm); color:var(--text-dim); padding-block:5px; transition:color var(--dur) var(--ease) }
.foot-col a:hover{ color:var(--accent) }
.foot-base{ display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line);
  font-size:var(--f-xs); color:var(--text-faint) }
@media (max-width:860px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--s-6) }
  /* thumb-sized rows once the footer is the only navigation on screen */
  .foot-col a{ padding-block:9px }
  .foot-base a{ display:inline-block; padding-block:6px }
}
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr } }

/* ═══ scroll reveal ═════════════════════════════════════════════════════════
   Gated on html.js, which an inline script in <head> sets. Content is visible
   by default; only a page that has proven JS is running is allowed to hide it.
   Without that gate, a blocked script or a starved IntersectionObserver leaves
   the whole page blank — the failure mode is total, so it is worth the class. */
html.js .reveal{ opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease) }
html.js .reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  html.js .reveal{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ═══ notice — a highlighted summary inside a long page ═══ */
.notice{
  display:flex; gap:var(--s-3); align-items:flex-start;
  background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.26);
  border-radius:var(--r-md); padding:var(--s-4) var(--s-5);
  font-size:var(--f-sm); color:var(--text-dim); margin-bottom:var(--s-7);
}
.notice b{ color:var(--accent-soft) }

/* ═══ long-form pages — about, privacy, terms, refund ════════════════════════
   One reading column at --prose (720px), because line length is the whole job
   on a page someone actually has to read. Body copy sits on --text-dim rather
   than --text: at this length full-strength white is tiring. */
.legal{ max-width:var(--prose) }
.legal h2{ font-size:1.28rem; margin-top:var(--s-8); margin-bottom:var(--s-4); letter-spacing:-.018em }
.legal h2:first-child{ margin-top:0 }
.legal h3{ font-size:1.02rem; margin-top:var(--s-6); margin-bottom:var(--s-3) }
.legal p,.legal li{ color:var(--text-dim); font-size:.97rem; line-height:1.72 }
.legal p{ margin-bottom:var(--s-4) }
.legal ul{ list-style:none; margin:0 0 var(--s-5) }
.legal li{ position:relative; padding-left:20px; margin-bottom:var(--s-2) }
.legal li::before{ content:''; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.6 }
.legal strong{ color:var(--text); font-weight:600 }
.legal a{ color:var(--accent) }
.legal a:hover{ text-decoration:underline }
.legal dl{ margin-bottom:var(--s-5) }
.legal dt{ color:var(--text); font-weight:600; font-size:.97rem; margin-top:var(--s-4) }
.legal dd{ color:var(--text-dim); font-size:.97rem; line-height:1.72 }

.updated{ display:inline-flex; align-items:center; gap:8px; font-size:var(--f-xs);
  color:var(--text-faint); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 14px; margin-top:var(--s-5) }

/* in-page contents for the two long ones */
.toc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-6); margin-bottom:var(--s-8) }
.toc h2{ font-size:var(--f-xs) !important; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-faint); margin:0 0 var(--s-3) !important }
.toc ol{ list-style:none; counter-reset:toc; columns:2; column-gap:var(--s-6) }
.toc li{ counter-increment:toc; padding-block:4px; break-inside:avoid }
.toc a{ font-size:var(--f-sm); color:var(--text-dim) }
.toc a::before{ content:counter(toc) '. '; color:var(--text-faint) }
.toc a:hover{ color:var(--accent) }
@media (max-width:620px){ .toc ol{ columns:1 } }