/* ============================================================
   eLunch — design system + page styles
   Vanilla CSS. Brand colour & action colour are driven by
   --brand / --action and tweakable at runtime; all tints and
   shades derive from them via color-mix(), so swapping the two
   roots re-skins the whole site.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Brand (eLunch teal) + single high-contrast action colour for CTAs */
  --brand:#15928F;
  --action:#CF4516;          /* #F0541E before 2026-09-17: white on it was 3.50:1, now 4.65:1 */

  /* Derived brand ramp */
  --brand-ink:    color-mix(in srgb, var(--brand) 82%, #06210f);
  --brand-deep:   color-mix(in srgb, var(--brand) 70%, #04130a);  /* bands: white text 6.24:1 */
  --brand-text:   color-mix(in srgb, var(--brand) 80%, #000);     /* teal text and buttons: 5.51:1 with white */
  --brand-hover:  color-mix(in srgb, var(--brand) 84%, #000);
  --brand-soft:   color-mix(in srgb, var(--brand) 14%, #fff);
  --brand-softer: color-mix(in srgb, var(--brand) 7%,  #fff);
  --brand-line:   color-mix(in srgb, var(--brand) 26%, #fff);

  --action-hover: color-mix(in srgb, var(--action) 86%, #000);
  --action-soft:  color-mix(in srgb, var(--action) 12%, #fff);

  /* Neutrals — green-tinted slate */
  --ink:#0d1a13;
  --text:#384741;
  --muted:#627169;           /* 4.61:1 even on --bg-2 */
  --faint:#65746d;           /* placeholders, optional labels: 4.92:1 on white */
  --line:#e4ebe7;
  --line-2:#eef3f0;
  --surface:#ffffff;
  --bg:#f6f9f7;
  --bg-2:#eef4f0;

  /* Text on the dark teal bands (--brand-deep), all at least 4.5:1 there */
  --on-deep:#e6f3ec;
  --on-deep-2:#e0efe7;       /* also 4.61:1 on the lighter support cards */
  --on-deep-accent:#b8ebcd;
  --on-deep-faint:color-mix(in srgb,#fff 82%,transparent);

  /* Semantic */
  --ok:#16a34a;
  --err:#d92d20;
  --warn:#b88207;

  /* Type */
  --font-head:'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;

  /* Radii */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-btn:13px; --r-pill:999px;

  /* Shadow — soft, green-tinted, layered */
  --sh-1:0 1px 2px rgba(13,26,19,.05), 0 1px 1px rgba(13,26,19,.04);
  --sh-2:0 4px 12px rgba(13,26,19,.06), 0 2px 4px rgba(13,26,19,.04);
  --sh-3:0 18px 40px -12px rgba(13,26,19,.18), 0 8px 16px -8px rgba(13,26,19,.10);
  --sh-4:0 40px 80px -24px rgba(13,26,19,.28), 0 16px 32px -16px rgba(13,26,19,.14);

  --container:1180px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0;line-height:1.06;
  letter-spacing:-.02em;font-weight:700;text-wrap:balance}
p{margin:0}
::selection{background:color-mix(in srgb,var(--brand) 22%,#fff);color:var(--brand-deep)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(56px,8vw,108px)}
.section--tight{padding-block:clamp(40px,6vw,72px)}
.section--bg{background:var(--bg)}
.section--ink{background:var(--brand-deep);color:var(--on-deep)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-text);}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--brand)}
.section-head{max-width:680px;margin-bottom:clamp(32px,4vw,52px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(30px,4.4vw,50px);margin:14px 0 0}
.section-head p{margin-top:18px;font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:56ch}
.section-head.center p{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:600;font-size:16px;line-height:1;
  padding:15px 24px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s var(--ease),
  background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;text-decoration:none}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--action);color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--action) 70%,transparent)}
.btn--primary:hover{background:var(--action-hover);transform:translateY(-1px);
  box-shadow:0 12px 26px -8px color-mix(in srgb,var(--action) 64%,transparent)}
.btn--brand{background:var(--brand-text);color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.btn--brand:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{border-color:var(--brand-line);background:var(--brand-softer);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--bg-2)}
.btn--lg{padding:18px 30px;font-size:18px}
.btn--block{width:100%}
.btn--onink{background:#fff;color:var(--brand-deep)}
.btn--onink:hover{background:#eafaf1;transform:translateY(-1px)}
.btn--ghostink{background:transparent;color:var(--on-deep);border-color:color-mix(in srgb,#fff 28%,transparent)}
.btn--ghostink:hover{background:rgba(255,255,255,.08)}

/* ---------- Top nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.nav[data-scrolled="1"]{border-color:var(--line);box-shadow:var(--sh-1)}
.nav-inner{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);
  font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.brand-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--brand);flex:none;box-shadow:0 4px 10px -3px color-mix(in srgb,var(--brand) 50%,transparent)}
.brand-img{width:29px;height:auto;display:block;transform:translateY(-4.5%)}
.brand-word{font-family:var(--font-head);font-weight:800;color:var(--ink)}
.brand--ftr .brand-word{color:#fff}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav-links a{font-family:var(--font-head);font-weight:550;font-size:15px;color:var(--text);
  padding:9px 12px;border-radius:10px;transition:background .18s,color .18s;white-space:nowrap}
.nav-links a:hover{background:var(--bg-2);color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-call{gap:8px;white-space:nowrap}
.nav-call svg{width:17px;height:17px}
.nav-burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);cursor:pointer;align-items:center;justify-content:center}
.nav-burger svg{width:22px;height:22px;color:var(--ink)}
/* mobile sheet */
.nav-sheet{position:fixed;inset:0;z-index:200;background:rgba(13,26,19,.4);
  opacity:0;visibility:hidden;transition:opacity .25s}
.nav-sheet[data-open="1"]{opacity:1;visibility:visible}
.nav-sheet-panel{position:absolute;top:0;right:0;width:min(86vw,360px);height:100%;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);transition:transform .3s var(--ease);box-shadow:var(--sh-4)}
.nav-sheet[data-open="1"] .nav-sheet-panel{transform:none}
.nav-sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.nav-sheet-panel a{font-family:var(--font-head);font-weight:600;font-size:19px;color:var(--ink);
  padding:14px 12px;border-radius:12px}
.nav-sheet-panel a:hover{background:var(--bg-2)}
.nav-sheet-panel .btn{margin-top:12px}
/* Keep the menu's link colour and hover off its orange button: white on
   --action is 4.65:1, the menu's ink only 3.85:1 */
.nav-sheet-panel a.btn--primary{color:#fff}
.nav-sheet-panel a.btn--primary:hover{background:var(--action-hover)}
.nav-x{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  display:grid;place-items:center;cursor:pointer}
.nav-x svg{width:20px;height:20px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 88% -10%, var(--brand-softer), transparent 60%),
  linear-gradient(180deg,#fff, var(--bg) 96%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-block:clamp(48px,7vw,90px)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:7px 7px 7px 14px;
  font-size:14px;font-weight:550;color:var(--text);box-shadow:var(--sh-1)}
.hero-badge b{font-family:var(--font-head);color:var(--ink);font-weight:650}
.hero-badge .tag{background:var(--brand-soft);color:var(--brand-deep);font-family:var(--font-head);
  font-weight:700;font-size:12px;padding:4px 10px;border-radius:7px}
.hero h1{font-size:clamp(38px,6vw,68px);margin:22px 0 0;letter-spacing:-.03em}
/* The highlight is a background rather than a z-index:-1 pseudo-element:
   that one painted beneath the hero's own background (showing only mid-fade)
   and could not follow the phrase onto a second line on small screens.
   Dark teal on the page is 5.74:1 at worst (the pale teal corner) and 4.70:1
   on the paler highlight band; --brand on a 38% band was 3.79:1 and 2.17:1. */
.hero h1 em{font-style:normal;color:var(--brand-deep);white-space:nowrap;
  background:linear-gradient(color-mix(in srgb,var(--action) 20%,#fff),color-mix(in srgb,var(--action) 20%,#fff))
    no-repeat 0 calc(100% - .04em)/100% .14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-sub{margin-top:22px;font-size:clamp(18px,1.9vw,22px);color:var(--text);max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px;
  font-size:15px;color:var(--muted)}
.hero-trust .dot{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:18px;height:18px;color:var(--brand)}

/* device — phone */
.hero-visual{position:relative}
/* Device frames take their height from the screen inside them, and each screen
   from a padding-top spacer (a percentage of its own width), not from
   aspect-ratio: some browsers, Safari especially, did not recompute an
   aspect-ratio box's height as the window was resized, so the small phones
   stretched into tall slivers. Each percentage is its screenshot's own
   height/width (phones 900x1860 and 700x1447, tablet 4:3, kiosk 3:4), so the
   image fills its screen exactly with nothing cropped; a replacement
   screenshot of a different shape needs its percentage changed here. */
.phone{position:relative;width:min(300px,80%);margin-inline:auto;
  background:#0d1a13;border-radius:42px;padding:11px;box-shadow:var(--sh-4);
  border:1.5px solid #1f2c25}
.phone-screen{position:relative;width:100%;border-radius:32px;overflow:hidden;
  background:#fff}
.phone-screen::before{content:"";display:block;padding-top:206.67%}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.float-card{position:absolute;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh-3);padding:14px 16px;display:flex;align-items:center;gap:12px}
.float-card .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.float-card .ic svg{width:20px;height:20px}
.float-card .t{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:16px;line-height:1.1}
.float-card .s{font-size:13px;color:var(--muted)}
.float-a{top:14%;left:-6%}
.float-a .ic{background:var(--brand-soft);color:var(--brand-deep)}
.float-b{bottom:12%;right:-7%}
.float-b .ic{background:var(--action-soft);color:var(--action)}
.float-c{top:10%;left:-4%}
.c-note{display:block;font-family:var(--font-body);font-weight:450;font-size:13px;color:var(--muted);margin-top:2px}
.float-c .ic{background:var(--brand-soft);color:var(--brand-deep)}

/* hero slider: the slides share one grid cell, so the hero is always as
   tall as its tallest slide and the page below never jumps between slides */
.hero-slides{position:relative;display:grid}
.hero-slide{grid-area:1/1;display:grid;align-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease,visibility .5s;pointer-events:none}
.hero-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero-ctrl{display:flex;align-items:center;gap:14px;padding-bottom:clamp(24px,3.5vw,44px)}
.hero-arrow{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-1);transition:background .18s ease,border-color .18s ease}
.hero-arrow:hover{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.hero-arrow svg{width:20px;height:20px}
.hero-dots{display:flex;align-items:center;gap:9px}
.hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:width .25s ease,background .25s ease}
.hero-dot.is-active{width:30px;border-radius:5px;background:var(--brand)}
.hero-play{width:36px;height:36px;margin-left:6px}
.hero-play svg{width:16px;height:16px}
.hero-play .i-play,.hero-play[data-paused="1"] .i-pause{display:none}
.hero-play[data-paused="1"] .i-play{display:block}

/* device — tablet + handheld */
.hero-visual--pos{padding-block:10px}
.tablet{position:relative;width:min(430px,92%);margin-inline:auto;background:#0d1a13;border-radius:26px;padding:13px;box-shadow:var(--sh-4);border:1.5px solid #1f2c25}
.tablet-screen{position:relative;width:100%;border-radius:14px;overflow:hidden;background:#fff}
.tablet-screen::before{content:"";display:block;padding-top:75%}
.tablet-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.pos-phone{position:absolute;right:-2%;bottom:-9%;width:min(132px,30%);background:#0d1a13;border-radius:22px;padding:6px;border:1.5px solid #1f2c25;box-shadow:-12px -12px 26px -10px rgba(255,255,255,.5),-3px -3px 9px -3px rgba(255,255,255,.38),var(--sh-4)}
.pos-phone-screen{position:relative;width:100%;border-radius:17px;overflow:hidden;background:#fff}
.pos-phone-screen::before{content:"";display:block;padding-top:206.6%}
.pos-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* device — kiosk + customer phone */
.hero-visual--qr{padding-block:10px}
.kiosk{position:relative;width:min(320px,78%);margin-inline:auto;background:#0d1a13;border-radius:22px;padding:14px;box-shadow:var(--sh-4);border:1.5px solid #1f2c25}
.kiosk-screen{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#fff}
.kiosk-screen::before{content:"";display:block;padding-top:133.33%}
.kiosk-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.kiosk-stand{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:38%;height:34px;background:linear-gradient(180deg,#16241d,#0d1a13);border-radius:0 0 12px 12px}
.kiosk-stand::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:210%;height:11px;background:#0d1a13;border-radius:8px;box-shadow:var(--sh-3)}
.qr-phone{position:absolute;right:-3%;bottom:2%;width:min(138px,31%);background:#0d1a13;border-radius:22px;padding:6px;box-shadow:var(--sh-4);border:1.5px solid #1f2c25;transform:translateY(15px);box-shadow:-12px -12px 26px -10px rgba(255,255,255,.5),-3px -3px 9px -3px rgba(255,255,255,.38),var(--sh-4)}
.qr-phone-screen{position:relative;width:100%;border-radius:17px;overflow:hidden;background:#fff}
.qr-phone-screen::before{content:"";display:block;padding-top:206.6%}
.qr-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.float-d{top:8%;left:-6%}
.float-d .ic{background:var(--action-soft);color:var(--action)}

/* ---------- Logo / trust strip ---------- */
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.trust-strip .container{display:flex;align-items:center;gap:24px 40px;flex-wrap:wrap;
  padding-block:22px;justify-content:center}
.trust-strip .lab{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.trust-logos{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;justify-content:center}
.trust-logos .tl{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--faint);
  letter-spacing:-.01em}

/* ---------- Comparison table (signature) ---------- */
.cmp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);overflow:hidden;max-width:920px;margin-inline:auto}
.cmp-head{display:grid;grid-template-columns:1.4fr 1fr 1fr}
.cmp-head>div{padding:24px 22px}
.cmp-head .c-feature{display:flex;align-items:flex-end}
.cmp-head .c-them{background:var(--bg);border-left:1px solid var(--line)}
.cmp-head .c-us{background:var(--brand-deep);color:#fff;position:relative;padding-top:38px}
.cmp-h-tag{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.cmp-head .c-us .cmp-h-tag{color:var(--on-deep-faint)}
.cmp-h-name{font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--ink);margin-top:6px}
.cmp-head .c-us .cmp-h-name{color:#fff;display:flex;align-items:center;gap:10px}
.cmp-head .c-us .cmp-h-name .brand-tile--cmp{width:34px;height:34px;border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 4px 10px -4px rgba(0,0,0,.35)}
.cmp-head .c-us .cmp-h-name .brand-tile--cmp .brand-img{width:25px}
.cmp-pop{position:absolute;top:14px;right:16px;background:var(--action);color:#fff;font-family:var(--font-head);
  font-weight:700;font-size:11px;letter-spacing:.04em;padding:4px 9px;border-radius:7px}
.cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--line)}
.cmp-row>div{padding:18px 22px;display:flex;align-items:center;gap:10px;font-size:15.5px}
.cmp-row .c-feature{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:16px}
.cmp-row .c-them{background:var(--bg);border-left:1px solid var(--line);color:var(--muted)}
.cmp-row .c-us{background:color-mix(in srgb,var(--brand) 6%,#fff);color:var(--ink);font-weight:600;
  border-left:1px solid var(--brand-line)}
.cmp-row .c-us b{font-weight:700;color:var(--muted);font-size:13px;padding:0 1px}
.cmp-ic{width:22px;height:22px;flex:none}
.cmp-ic.no{color:var(--err)}
.cmp-ic.yes{color:var(--brand)}
.cmp-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--line)}
.cmp-foot>div{padding:20px 22px}
.cmp-foot .c-us{background:color-mix(in srgb,var(--brand) 6%,#fff);border-left:1px solid var(--brand-line)}

/* ---------- Calculator (signature) ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.calc-controls{padding:clamp(28px,3.5vw,44px)}
.calc-controls h3{font-size:23px}
.calc-controls .lede{color:var(--muted);font-size:16px;margin-top:8px}
.calc-field{margin-top:26px}
.calc-field .row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.calc-field label,.calc-field .calc-label{font-family:var(--font-head);font-weight:650;color:var(--ink);font-size:16px}
.calc-field .v{font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--brand-deep);
  font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--r-pill);
  background:var(--bg-2);outline:none;cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:50%;background:#fff;border:5px solid var(--brand);box-shadow:var(--sh-2);cursor:grab;
  transition:transform .12s}
.range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08)}
.range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:5px solid var(--brand);
  box-shadow:var(--sh-2);cursor:grab}
.range:focus-visible{outline:3px solid var(--brand-line);outline-offset:4px}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.seg button{flex:1;min-width:fit-content;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--text);
  cursor:pointer;transition:.16s;text-align:center}
.seg button .pct{display:block;font-size:12px;color:var(--muted);font-weight:550;margin-top:2px}
.seg button:hover{border-color:var(--brand-line)}
.seg button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep)}
.seg button[aria-pressed="true"] .pct{color:var(--brand-deep)}
.calc-result{background:var(--brand-deep);color:#eafaf1;padding:clamp(28px,3.5vw,44px);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc-result::after{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 60% at 110% 0%, color-mix(in srgb,var(--action) 30%,transparent),transparent 60%);
  pointer-events:none}
.calc-result .cap{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-deep-faint)}
.calc-big{font-family:var(--font-head);font-weight:800;font-size:clamp(48px,7vw,76px);line-height:1;
  letter-spacing:-.03em;color:#fff;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.calc-big .mo{font-size:.32em;color:var(--on-deep-faint);font-weight:650;letter-spacing:0}
.calc-yr{font-size:17px;color:var(--on-deep-2)}
.calc-yr b{color:#fff}
.calc-note{margin-top:auto;padding-top:22px;font-size:13.5px;color:var(--on-deep-faint);
  border-top:1px solid rgba(255,255,255,.14)}
.calc-result .btn{margin:22px 0 28px;align-self:flex-start;position:relative;z-index:1}

/* ---------- Demo showcase (signature) ---------- */
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.demo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),
  border-color .2s;display:flex;flex-direction:column;text-align:left;cursor:pointer}
.demo-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--brand-line)}
.browser{background:var(--bg);border-bottom:1px solid var(--line)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px}
.browser-bar .dots{display:flex;gap:6px}
.browser-bar .dots i{width:10px;height:10px;border-radius:50%;background:#d6ddd9}
.browser-bar .url{margin-left:8px;flex:1;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;font-size:12px;color:var(--muted);padding:5px 12px;font-family:var(--font-head);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-shot{position:relative;aspect-ratio:16/11;background:var(--bg-2)}
.demo-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.demo-card--soon{cursor:default}
.demo-card--soon:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
.demo-meta .go--soon{color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px;white-space:nowrap}
.demo-meta{padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:1}
.demo-meta .nm{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:17px}
.demo-meta .ty{font-size:13.5px;color:var(--muted)}
.demo-meta .go{margin-top:auto;color:var(--brand-text);display:flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:650;font-size:14px}
.demo-meta .go svg{width:16px;height:16px;transition:transform .2s}
.demo-card:hover .go svg{transform:translate(2px,-2px)}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{position:relative;padding-top:8px}
.step .n{counter-increment:step;font-family:var(--font-head);font-weight:800;font-size:15px;
  width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-deep);
  display:grid;place-items:center;margin-bottom:18px}
.step .n::before{content:"0" counter(step)}
.step h3{font-size:20px;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px);box-shadow:var(--sh-2);display:flex;flex-direction:column}
.quote .mark{font-family:var(--font-head);font-size:60px;line-height:.6;color:var(--brand-line);height:30px}
.quote p{font-family:var(--font-head);font-weight:600;font-size:clamp(19px,2.1vw,26px);color:var(--ink);
  line-height:1.32;letter-spacing:-.01em;margin:18px 0 26px;text-wrap:pretty}
.quote--sm p{font-size:clamp(17px,1.8vw,19px);font-weight:550}
.quote-by{display:flex;align-items:center;gap:14px;margin-top:auto}
.quote-by .nm{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.quote-by .vn{font-size:14px;color:var(--muted)}
.quote .stars{display:flex;gap:3px;color:var(--action)}
.quote .stars svg{width:18px;height:18px}

/* ---------- Support band ---------- */
.support{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.support-points{display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.support-points li{display:flex;gap:16px;align-items:flex-start;list-style:none;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.support-points .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;flex:none;color:#bfe9d0}
.support-points .ic svg{width:20px;height:20px}
.support-points h3{font-family:var(--font-head);color:#fff;font-size:17px;margin:0 0 3px}
.support-points p{color:var(--on-deep-2);font-size:15px}
.support-intro .eyebrow{color:var(--on-deep-accent)}
.support-intro .eyebrow::before{background:var(--on-deep-accent)}
.support-intro h2{color:#fff;font-size:clamp(28px,3.6vw,44px);margin-top:14px}
.support-intro p{color:var(--on-deep-2);margin-top:16px;max-width:46ch;font-size:18px}
.support ul{padding:0;margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;gap:18px;text-align:left;background:none;border:0;
  cursor:pointer;padding:24px 4px;font-family:var(--font-head);font-weight:650;font-size:clamp(17px,1.9vw,20px);
  color:var(--ink)}
.faq-q .ico{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;flex:none;transition:.2s;position:relative}
.faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;background:var(--ink);border-radius:2px}
.faq-q .ico::before{width:12px;height:2px}
.faq-q .ico::after{width:2px;height:12px;transition:transform .25s var(--ease)}
.faq-item[data-open="1"] .faq-q .ico{background:var(--brand);border-color:var(--brand)}
.faq-item[data-open="1"] .faq-q .ico::before,.faq-item[data-open="1"] .faq-q .ico::after{background:#fff}
.faq-item[data-open="1"] .faq-q .ico::after{transform:rotate(90deg)}
/* Answers animate open and shut on grid rows, so their height follows the
   content (fonts loading, resizing) with nothing measured in script. They
   collapse only once app.js has set the accordion up (data-ready), and a
   collapsed answer is hidden from assistive technology as well as the eye. */
.faq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s var(--ease),visibility .28s}
.faq[data-ready="1"] .faq-item[data-open="0"] .faq-a{grid-template-rows:0fr;visibility:hidden}
.faq-a-inner{min-height:0;overflow:hidden;padding:0 4px;color:var(--muted);font-size:16.5px;max-width:64ch}
.faq-a-inner::after{content:"";display:block;height:26px}

/* ---------- Demo request form ---------- */
.cta-band{background:var(--brand-deep);color:var(--on-deep);border-radius:var(--r-xl);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr}
.cta-copy{padding:clamp(32px,4vw,56px)}
.cta-copy h2{color:#fff;font-size:clamp(28px,3.4vw,42px)}
.cta-copy p{color:var(--on-deep-2);margin-top:16px;font-size:17px;max-width:42ch}
.cta-copy .assure{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.cta-copy .assure div{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--on-deep)}
.cta-copy .assure a{color:#fff;text-decoration:underline;text-underline-offset:.15em}
.cta-copy .assure svg{width:19px;height:19px;color:#7fd6a3;flex:none}
.form-wrap{background:var(--surface);color:var(--text);padding:clamp(28px,3.4vw,42px);
  display:flex;flex-direction:column;justify-content:center}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:15px;
  margin-bottom:8px}
.field label .opt{color:var(--faint);font-weight:500}
.input{width:100%;font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;transition:.16s;outline:none}
.input::placeholder{color:var(--faint)}
.input:hover{border-color:var(--brand-line)}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.field[data-state="err"] .input{border-color:var(--err);box-shadow:0 0 0 4px color-mix(in srgb,var(--err) 14%,#fff)}
.field[data-state="ok"] .input{border-color:var(--ok)}
.err-msg{display:none;color:var(--err);font-size:13.5px;margin-top:7px;font-weight:550}
.field[data-state="err"] .err-msg{display:block}
/* Shown by default; app.js collapses it behind the toggle (and makes it inert). */
.field-more{max-height:0;overflow:hidden;opacity:0;visibility:hidden;padding-inline:5px;margin-inline:-5px;
  transition:max-height .3s var(--ease),opacity .3s,visibility .3s,margin .3s}
.field-more[data-show="1"]{max-height:360px;opacity:1;visibility:visible}
.more-toggle:not([hidden])+.field-more .field:first-child{margin-top:16px}
.form-submit{margin-top:6px}
/* Cloudflare Turnstile's box: empty unless the form has a site key, and
   invisible unless Cloudflare needs the visitor to tick it. */
.form-check{display:flex;justify-content:center}
.form-check:not(:empty){margin-bottom:6px}
.form-status:not(:empty){margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.45;
  text-align:center;color:var(--ink);background:color-mix(in srgb,var(--err) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--err) 30%,#fff)}
.form-status a,.form-success-call a{text-decoration:underline;text-underline-offset:.15em;font-weight:650;white-space:nowrap}
.form-foot{font-size:13px;color:var(--muted);margin-top:6px;text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit[data-loading="1"]{opacity:.85;cursor:wait}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.more-toggle{background:none;border:0;color:var(--brand-deep);font-family:var(--font-head);font-weight:600;
  font-size:14.5px;cursor:pointer;padding:4px 0;text-align:left}
.more-toggle:hover{text-decoration:underline}
/* success */
.form-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:14px 0}
.form-wrap[data-sent="1"] .form-live{display:none}
.form-wrap[data-sent="1"] .form-success{display:flex}
.success-mark{width:72px;height:72px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;margin-bottom:20px;animation:pop .4s var(--ease) both}
.success-mark svg{width:36px;height:36px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.form-success h3{font-size:25px}
.form-success p{color:var(--muted);margin-top:10px;max-width:34ch}
.form-success .form-success-call{color:var(--text);font-size:15px}

/* ---------- Footer ---------- */
.footer{background:#0a160e;color:#9db5a8;padding-block:clamp(48px,6vw,72px) 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer .brand{color:#fff}
.footer .brand span{color:color-mix(in srgb,var(--brand) 70%,#fff)}
.footer-about{margin-top:16px;font-size:15px;color:#86a193;max-width:30ch}
.footer-call{margin-top:20px;display:inline-flex;align-items:center;gap:10px;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:19px}
.footer-call svg{width:19px;height:19px;color:#7fd6a3}
.footer-col .footer-h{font-family:var(--font-head);color:#fff;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 16px;font-weight:650;line-height:1.6;text-wrap:wrap}
.footer-col a{display:block;padding:6px 0;font-size:15px;color:#9db5a8;transition:color .16s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;color:#6e887a}

.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:.15em;transition:color .16s}
.footer-bottom a:hover{color:#fff}
.footer-legal{margin-top:12px;font-size:13px;line-height:1.5;color:#6e887a}

/* ---------- Simple content pages (About) ---------- */
.page-hero{padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px);
  background:radial-gradient(120% 90% at 88% -10%, var(--brand-softer), transparent 60%),linear-gradient(180deg,#fff, var(--bg) 96%)}
.page-hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;margin:0}
.page-hero p{margin-top:18px;font-size:clamp(17px,1.8vw,21px);color:var(--text);max-width:52ch}
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.about-body h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;margin:0 0 10px}
.about-body p{color:var(--text);font-size:17px;max-width:60ch}
.about-body p+h2{margin-top:32px}
.about-contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--sh-1)}
.about-contact h2{font-size:22px;margin:0 0 16px}
.about-contact dl{margin:0;display:grid;gap:16px}
.about-contact dt{font-family:var(--font-head);font-weight:650;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.about-contact dd{margin:2px 0 0;color:var(--ink);font-size:16.5px}
.about-contact address{font-style:normal}
.about-contact a{color:var(--brand-text);text-decoration:underline;text-underline-offset:.15em;font-weight:600}
@media (max-width:820px){.about{grid-template-columns:1fr}}

/* ---------- Contact & support (contact/) ----------
   The About page's layout, with the message form where About has its copy.
   The form itself is the demo form's (fields, errors, success panel). */
.form-wrap--card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);justify-content:flex-start}
.form-wrap--card .form-head{margin-bottom:22px}
.form-wrap--card .form-head h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;margin:0}
.form-wrap--card .form-head p{color:var(--text);font-size:16.5px;margin-top:8px;max-width:52ch}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.field-pair{grid-template-columns:1fr}}
textarea.input{min-height:160px;resize:vertical;line-height:1.5}
.form-success .form-success-h{font-size:25px;margin:0}

/* ---------- Error pages (errors/403, 404, 500) ---------- */
.err-page{min-height:100vh;display:flex;flex-direction:column}
body.err-page{padding-bottom:0}
.err{flex:1;display:grid;align-items:center;padding-block:clamp(48px,10vw,120px);
  background:radial-gradient(120% 90% at 88% -10%, var(--brand-softer), transparent 60%),linear-gradient(180deg,#fff, var(--bg) 96%)}
.err h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;margin:14px 0 0}
.err-lede{margin-top:18px;font-size:clamp(17px,1.8vw,21px);color:var(--text);max-width:46ch}
.err-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.err-home{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--text);padding:9px 12px;border-radius:10px}
.err-home:hover{background:var(--bg-2);color:var(--ink)}
.err-call{gap:8px}
.err-call svg{width:17px;height:17px}
.footer--slim{padding-block:26px}
.footer--slim .footer-legal{margin:0}
@media (max-width:480px){.err-call .err-call-num{display:none}.err-call{padding:12px}.err-actions .btn{width:100%}}

/* ---------- Sticky mobile CTA ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:12px 16px
  calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(13,26,19,.2)}
.mobile-bar .btn{flex:1}
.mobile-bar .btn--call{flex:none;width:54px;padding:0;background:var(--surface);border-color:var(--line);color:var(--brand)}
.mobile-bar .btn--call svg{width:22px;height:22px}

/* ---------- Reveal on scroll ---------- */
/* Hidden only once nav.js has marked <html> with "js"; it shows everything
   again if it cannot observe scrolling, so content never stays invisible. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal[data-in="1"]{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1}
  .pos-phone{right:2%;bottom:-6%}
  .qr-phone{right:4%;bottom:4%}
  .hero-visual{width:min(520px,100%);justify-self:center;margin-inline:0}
  .hero-visual--qr{padding-bottom:56px}
  .hero-slide{align-content:start}
  .calc{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .support{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .demos{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:20px}
}
@media (max-width:1080px){
  .nav-cta .nav-call{display:none}
}
@media (max-width:940px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:820px){
  .nav-links,.nav-cta .nav-call{display:none}
  .nav-cta{gap:8px}
  .nav-cta .btn--brand{padding:9px 14px;font-size:14px}
  .nav-burger{display:flex}
  .mobile-bar{display:flex}
  body{padding-bottom:78px}
  .float-card{display:none}
}
@media (max-width:600px){
  .container{padding-inline:18px}
  .demos{grid-template-columns:1fr}
  .hero h1{font-size:clamp(30px,9vw,38px)}
  .hero h1 em{white-space:normal}
  .cmp-head .c-them,.cmp-row .c-them,.cmp-foot .c-them,.cmp-foot .c-feature{display:none}
  .cmp-head,.cmp-row{grid-template-columns:1.2fr 1fr}
  .cmp-head>div,.cmp-row>div{padding-inline:14px}
  .cmp-row>div{gap:8px}
  .cmp-foot{grid-template-columns:1fr}
  .cmp-foot .c-us{border-left:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .seg{flex-direction:column}
  .hero-cta .btn{flex:1}
}

/* ---------- Accessibility ---------- */
.skip-link{position:absolute;left:12px;top:-200px;z-index:300;padding:10px 16px;border-radius:10px;
  background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:650;font-size:15px}
.skip-link:focus{top:12px}
/* Places that take focus only from a link (main, sections, the thank-you panel) */
[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.section--ink :focus-visible,.cta-copy :focus-visible,.calc-result :focus-visible{outline-color:#fff}
.btn:focus-visible{outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Mid-page CTA band ---------- */
.midcta{background:var(--surface);border-block:1px solid var(--line)}
.midcta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-block:clamp(34px,4.5vw,56px)}
.midcta-copy{max-width:46ch}
.midcta-copy h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.025em;margin:0}
.midcta-copy p{margin:10px 0 0;color:var(--text);font-size:17px}
.midcta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){.midcta-actions .btn{width:100%;justify-content:center}}