/* =========================================================
   POS Digits — Landing Page
   Palette:  Primary #CA062D  ·  Secondary #3D414A  ·  Third #F1F5EF
   ========================================================= */

:root{
  /* ---- brand ---- */
  --primary:      #CA062D;   /* red — buttons, accents, CTA          */
  --primary-d:    #A80425;   /* darker red — hover                   */
  --primary-l:    #FF8497;   /* light red — accents on dark surfaces */
  --primary-soft: #FBE7EB;   /* red tint — icon chips, soft fills    */

  /* ---- secondary ---- */
  --secondary:    #3D414A;   /* charcoal — dark sections             */
  --sec-deep:     #2E3239;   /* deeper charcoal — hero, footer       */
  --sec-line:     rgba(241,245,239,.15);

  /* ---- third / surfaces ---- */
  --third:        #F1F5EF;   /* page background                      */
  --soft:         #E6EBE3;   /* soft band background                 */
  --card:         #FFFFFF;

  /* ---- text ---- */
  --ink:          #2A2E35;
  --slate:        #6A6F79;
  --mist:         #DEE3DC;
  --on-dark:      #F1F5EF;
  --on-dark-mute: #B4B9C1;

  /* ---- type — same pairing as petpooja.com: headings Poppins, body DM Sans ---- */
  --f-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- layout ---- */
  --shell: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;

  --sh-1: 0 1px 2px rgba(46,50,57,.06), 0 8px 24px -12px rgba(46,50,57,.2);
  --sh-2: 0 12px 34px -14px rgba(46,50,57,.3);
  --sh-3: 0 30px 70px -30px rgba(46,50,57,.5);

  --header-h: 84px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust:100%; }

/* Base text: DM Sans 16px. Change the 16px below if you want a smaller base. */
body{
  margin:0;
  background:var(--third);
  color:var(--ink);
  font:16px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:var(--primary); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.2; letter-spacing:-.015em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--pad); }
.wrap.narrow{ max-width:860px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--primary); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

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

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-body); font-weight:700; font-size:.95rem; line-height:1;
  padding:.85rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn .ico{ width:1.05em; height:1.05em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-wa .ico, .fab-wa svg, .hero-actions .btn-outline .ico,
.btn-ghost-dark .ico{ fill:currentColor; stroke:none; }

.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 10px 24px -12px rgba(202,6,45,.85); }
.btn-primary:hover{ background:var(--primary-d); transform:translateY(-2px); }

.btn-dark{ background:var(--secondary); color:#fff; }
.btn-dark:hover{ background:var(--sec-deep); transform:translateY(-2px); }

.btn-outline{ background:transparent; color:var(--on-dark); border-color:rgba(241,245,239,.35); }
.btn-outline:hover{ background:rgba(241,245,239,.1); border-color:var(--on-dark); transform:translateY(-2px); }

.btn-ghost-dark{ background:transparent; color:var(--secondary); border-color:var(--mist); font-family:var(--f-body); font-weight:700; }
.btn-ghost-dark:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }

.btn-wa{ background:#1FA855; color:#fff; }          /* WhatsApp brand green */
.btn-wa:hover{ background:#188f47; transform:translateY(-2px); }
.btn-mail{ background:var(--secondary); color:#fff; }
.btn-mail:hover{ background:var(--sec-deep); transform:translateY(-2px); }

.btn-lg{ padding:1.05rem 1.9rem; font-size:1rem; }
.btn-block{ width:100%; }

/* ---------------- header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{ background:#fff; border-bottom-color:var(--mist); box-shadow:0 6px 24px -18px rgba(46,50,57,.75); }
.site-header.menu-open{ background:#fff; border-bottom-color:var(--mist); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--header-h); }

/* logo — original artwork (icon + wordmark) */
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img{ display:block; height:62px; width:auto; }

/* nav */
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav-list{ display:flex; align-items:center; gap:1.5rem; }
.nav-list a{
  color:var(--ink); font-size:.94rem; font-weight:600; position:relative; padding:.35rem 0;
  transition:color .2s ease;
}
.nav-list a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--primary);
  transition:width .25s ease; border-radius:2px;
}
.nav-list a:hover{ color:var(--primary); }
.nav-list a:hover::after, .nav-list a.active::after{ width:100%; }
.nav-list a.active{ color:var(--primary); }
.nav-cta{ display:flex; align-items:center; gap:.65rem; }
.nav-cta .btn{ padding:.7rem 1.15rem; font-size:.88rem; }

/* hamburger → close (X) */
.nav-toggle{
  display:none; position:relative; z-index:101;
  width:44px; height:44px; padding:0; cursor:pointer;
  border:1px solid var(--mist); background:var(--card); border-radius:12px;
  transition:border-color .2s ease, background .2s ease;
}
.nav-toggle:hover{ border-color:var(--primary); }
.nav-toggle span{
  position:absolute; left:50%; top:50%; width:20px; height:2px; margin:-1px 0 0 -10px;
  background:var(--secondary); border-radius:2px;
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease, background .2s ease;
}
.nav-toggle span:nth-child(1){ transform:translateY(-7px); }
.nav-toggle span:nth-child(2){ transform:translateY(0); }
.nav-toggle span:nth-child(3){ transform:translateY(7px); }

.nav-toggle[aria-expanded="true"]{ background:var(--primary-soft); border-color:var(--primary); }
.nav-toggle[aria-expanded="true"] span{ background:var(--primary); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg); }

.nav-backdrop{ position:fixed; inset:0; background:rgba(46,50,57,.5); z-index:98; backdrop-filter:blur(2px); }

/* ---------------- shared type ---------------- */
.eyebrow{
  font-family:var(--f-body); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin:0;
}
.band-deep .eyebrow, .hero .eyebrow{ color:var(--primary-l); }
.cta .eyebrow{ color:rgba(255,255,255,.85); }

.sec-title{ font-size:clamp(1.65rem, 3.6vw, 2.5rem); margin:.6rem 0 0; text-wrap:balance; }
.sec-title.sm{ font-size:clamp(1.35rem, 2.6vw, 1.7rem); }
.sec-lede{ margin:.85rem 0 0; color:var(--slate); font-size:1.05rem; max-width:56ch; }
.band-deep .sec-lede{ color:var(--on-dark-mute); }
.sec-head{ margin-bottom:clamp(1.8rem, 4vw, 2.8rem); }
.sec-head.center{ text-align:center; }
.center-lede{ margin-left:auto; margin-right:auto; }

.section{ padding:clamp(3.2rem, 7vw, 5.5rem) 0; }
.band-soft{ background:var(--soft); }
.band-deep{ background:var(--secondary); color:var(--on-dark); }
.band-deep .sec-title{ color:var(--on-dark); }

kbd{
  font-family:var(--f-body); font-size:.78rem; font-weight:700; letter-spacing:.03em;
  background:var(--secondary); color:#fff; border-radius:5px; padding:.16rem .45rem; white-space:nowrap;
}
.band-deep kbd{ background:var(--primary); color:#fff; }
.tick{ color:#56C88E; font-weight:700; }

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--sec-deep); color:var(--on-dark);
  padding:calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3rem, 7vw, 5rem);
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 380px at 12% 8%, rgba(61,65,74,.95), transparent 62%),
    radial-gradient(520px 320px at 88% 18%, rgba(202,6,45,.28), transparent 60%),
    radial-gradient(700px 420px at 72% 100%, rgba(202,6,45,.16), transparent 65%);
}
.hero-inner{ position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4rem); align-items:center; }

.hero h1{ font-size:clamp(2.1rem, 5vw, 3.5rem); margin:1rem 0 0; font-weight:700; line-height:1.14; letter-spacing:-.025em; }
.hero h1 em{ font-style:normal; color:var(--primary-l); }
.hero-lede{ margin:1.3rem 0 0; max-width:52ch; color:var(--on-dark-mute); font-size:clamp(1rem,1.5vw,1.1rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0 0; }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin:2rem 0 0; }
.chips li{
  font-family:var(--f-body); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--sec-line); border-radius:999px; padding:.45rem .85rem; color:var(--on-dark);
  background:rgba(255,255,255,.04);
}

/* hero mock */
.hero-visual{ position:relative; }
.mock{
  background:rgba(255,255,255,.05); border:1px solid var(--sec-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden;
  backdrop-filter:blur(6px);
  animation:floaty 7s ease-in-out infinite;
}
.mock-bar{ display:flex; align-items:center; gap:.4rem; padding:.75rem 1rem; border-bottom:1px solid var(--sec-line); background:rgba(0,0,0,.22); }
.mock-bar .dot{ width:9px; height:9px; border-radius:999px; }
.d1{ background:var(--primary); } .d2{ background:rgba(255,255,255,.45); } .d3{ background:rgba(255,255,255,.22); }
.mock-title{ margin-left:.6rem; font-family:var(--f-body); font-size:.72rem; color:var(--on-dark-mute); letter-spacing:.04em; }
.mock-body{ padding:1.1rem 1.1rem 1.25rem; }

.zone{
  font-family:var(--f-body); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-mute); display:flex; align-items:center; gap:.7rem; margin:0 0 .7rem;
}
.zone::after{ content:""; height:1px; flex:1; background:var(--sec-line); }
.zone + .tables + .zone{ margin-top:1.2rem; }
.tables{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.t{
  border-radius:10px; padding:.55rem .35rem; text-align:center; min-height:4.2rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12rem;
  font-variant-numeric:tabular-nums;
}
.t .num{ font-weight:800; font-size:.9rem; font-family:var(--f-display); }
.t .ord,.t .amt,.t .st{ font-family:var(--f-body); font-size:.64rem; }
.t-free{ background:rgba(255,255,255,.07); color:var(--on-dark-mute); border:1px dashed rgba(255,255,255,.14); }
.t-busy{ background:var(--primary); color:#fff; box-shadow:0 8px 18px -12px var(--primary); }
.t-billed{ background:var(--third); color:var(--sec-deep); box-shadow:0 8px 18px -12px rgba(241,245,239,.6); }

.legend{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.1rem 0 0; }
.legend li{ display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--on-dark-mute); }
.ldot{ width:.62rem; height:.62rem; border-radius:999px; flex:none; }
.l-free{ background:rgba(255,255,255,.28); } .l-busy{ background:var(--primary); } .l-billed{ background:var(--third); }

.kot-float{
  position:absolute; left:-2.2rem; bottom:-1.5rem; width:212px;
  background:var(--card); color:var(--ink); border-radius:14px; padding:.85rem .95rem;
  box-shadow:var(--sh-3); border:1px solid var(--mist);
  animation:floaty 6s ease-in-out .8s infinite;
}
.kot-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-bottom:.5rem; border-bottom:1px dashed var(--mist); }
.kot-tag{ font-family:var(--f-body); font-size:.65rem; font-weight:700; letter-spacing:.14em; background:var(--secondary); color:#fff; padding:.15rem .45rem; border-radius:4px; }
.kot-no{ font-family:var(--f-body); font-size:.7rem; color:var(--slate); }
.kot-items{ display:grid; gap:.3rem; padding:.6rem 0; font-size:.8rem; }
.kot-items li{ display:flex; gap:.5rem; }
.kot-items span{ font-family:var(--f-body); font-weight:700; color:var(--primary); }
.kot-foot{ display:flex; align-items:center; gap:.45rem; font-family:var(--f-body); font-size:.7rem; color:var(--primary); border-top:1px dashed var(--mist); padding-top:.5rem; }
.pulse{ width:.5rem; height:.5rem; border-radius:999px; background:var(--primary); animation:pulse 1.6s ease-in-out infinite; }

.print-float{
  position:absolute; right:-1rem; top:-1.4rem; display:flex; align-items:center; gap:.6rem;
  background:var(--card); color:var(--ink); border:1px solid var(--mist); border-radius:12px;
  padding:.6rem .85rem; box-shadow:var(--sh-2);
  animation:floaty 6.5s ease-in-out .3s infinite;
}
.print-float .pf-ico{ font-size:1.15rem; }
.print-float strong{ display:block; font-family:var(--f-display); font-size:.82rem; }
.print-float small{ font-family:var(--f-body); font-size:.68rem; color:var(--slate); }

@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }

/* ---------------- stats strip ---------------- */
.strip{ background:var(--primary); color:#fff; padding:clamp(1.6rem,3vw,2.2rem) 0; }
.strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.strip-item{ text-align:center; padding:0 .5rem; border-left:1px solid rgba(255,255,255,.2); }
.strip-item:first-child{ border-left:0; }
.strip-num{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.3rem); color:#fff; letter-spacing:-.03em; }
.strip-num small{ font-size:.42em; margin-left:.15em; color:rgba(255,255,255,.8); font-weight:700; }
.strip-lbl{ display:block; font-size:.85rem; color:rgba(255,255,255,.88); margin-top:.2rem; }

/* ---------------- value cards ---------------- */
.val-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(4,1fr); }
.val{
  background:var(--card); border:1px solid var(--mist); border-radius:var(--r);
  padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.6rem;
  box-shadow:var(--sh-1); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.val:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:#EBD2D8; }
.val-ico{
  width:46px; height:46px; border-radius:13px; background:var(--primary-soft);
  display:grid; place-items:center; margin-bottom:.3rem;
}
.val-ico svg{ width:23px; height:23px; fill:none; stroke:var(--primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.val h3{ font-size:1.1rem; }
.val p{ color:var(--slate); font-size:.94rem; }

/* ---------------- segments ---------------- */
.seg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.seg{
  background:var(--card); border:1px solid var(--mist); border-radius:var(--r-sm);
  padding:.95rem 1.1rem; font-weight:600; font-size:.94rem;
  display:flex; align-items:center; gap:.65rem;
  transition:transform .2s ease, border-color .2s ease;
}
.seg span{ font-size:1.15rem; }
.seg:hover{ transform:translateY(-3px); border-color:var(--primary); }

/* ---------------- journey chain (5 steps) ---------------- */
.sec-title em{ font-style:italic; color:var(--primary); }
.band-deep .sec-title em{ color:var(--primary-l); }

.chain{
  position:relative; margin-top:.5rem;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(2.5rem, 7vw, 6rem);
  row-gap:clamp(2.4rem, 4vw, 3.6rem);
}
.chain-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.chain-path{ stroke-dasharray:1; stroke-dashoffset:1; }
.chain-dot{ opacity:0; transition:opacity .35s ease; }
.chain.is-live .chain-dot{ opacity:1; }

.chain-card{
  position:relative; background:#464B55;
  border:1px solid rgba(255,255,255,.09); border-radius:16px;
  padding:1.5rem 1.6rem 1.6rem;
  box-shadow:0 18px 44px -28px rgba(0,0,0,.95);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .6s ease;
}
.chain-card:hover{ transform:translateY(-4px); border-color:rgba(255,132,151,.45); }
.chain-card:nth-of-type(1){ grid-area:1 / 1; }
.chain-card:nth-of-type(2){ grid-area:2 / 2; }
.chain-card:nth-of-type(3){ grid-area:3 / 1; }
.chain-card:nth-of-type(4){ grid-area:4 / 2; }
.chain-card:nth-of-type(5){ grid-area:5 / 1; }

.cc-n{
  position:absolute; top:-1.15rem; left:1.5rem;
  width:2.7rem; height:2.7rem; border-radius:999px;
  background:var(--primary); color:#fff; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:1.15rem; line-height:1;
  border:3px solid var(--secondary); box-shadow:0 12px 24px -12px rgba(202,6,45,.95);
}
.chain-card h3{ font-size:1.14rem; margin:.85rem 0 .5rem; }
.chain-card p{ color:var(--on-dark-mute); font-size:.96rem; }
.chain-card p + p{ margin-top:.55rem; }

/* ---------------- onboarding track (4 steps) ---------------- */
.track{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.5vw,2rem); margin-top:1rem;
}
.track-rail{
  position:absolute; top:32px; left:12.5%; right:12.5%; height:3px;
  background:rgba(255,255,255,.13); border-radius:3px; overflow:hidden;
}
.track-fill{
  display:block; width:100%; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--primary-l), var(--primary));
  transform:scaleX(var(--p, 0)); transform-origin:left center;
  transition:transform .18s linear;
}

.tstep{ position:relative; text-align:center; padding:0 .3rem; }
.ts-node{
  position:relative; z-index:1; display:grid; place-items:center;
  width:66px; height:66px; margin:0 auto 1.3rem; border-radius:999px;
  background:#454A54; border:2px solid rgba(255,255,255,.14);
  transition:background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.34,1.4,.5,1), box-shadow .4s ease;
}
.ts-node svg{
  width:27px; height:27px; fill:none; stroke:var(--on-dark-mute);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s ease;
}
.tstep.on .ts-node{
  background:var(--primary); border-color:var(--primary);
  transform:scale(1.08); box-shadow:0 0 0 8px rgba(202,6,45,.16), 0 16px 30px -14px rgba(202,6,45,.9);
}
.tstep.on .ts-node svg{ stroke:#fff; }
.tstep.on .ts-node::after{
  content:""; position:absolute; inset:-2px; border-radius:999px;
  border:2px solid var(--primary); animation:nodeRing 2.2s ease-out infinite;
}
@keyframes nodeRing{
  0%   { transform:scale(1);   opacity:.7; }
  70%  { transform:scale(1.5); opacity:0; }
  100% { transform:scale(1.5); opacity:0; }
}

.ts-lbl{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-mute); transition:color .4s ease;
}
.tstep.on .ts-lbl b{ color:var(--primary-l); }
.ts-time{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:.22rem .55rem; letter-spacing:.06em; font-weight:600;
  transition:background .4s ease, border-color .4s ease, color .4s ease;
}
.tstep.on .ts-time{ background:rgba(202,6,45,.22); border-color:rgba(255,132,151,.45); color:#fff; }

.tstep h3{ font-size:1.1rem; margin:.7rem 0 .5rem; }
.ts-txt{ color:var(--on-dark-mute); font-size:.92rem; }
.ts-txt em{ color:var(--on-dark); font-style:italic; }
.ts-txt b{ color:var(--on-dark); font-weight:600; }

/* ---------------- screens / modules ---------------- */
.screens{ display:grid; gap:1.3rem; grid-template-columns:repeat(3,1fr); }
.screen{
  background:var(--card); border:1px solid var(--mist); border-radius:18px;
  padding:1.7rem 1.6rem 1.8rem; display:flex; flex-direction:column;
  box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.screen::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--primary), #F0576F);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.screen:hover{ transform:translateY(-7px); box-shadow:0 26px 50px -28px rgba(46,50,57,.45); border-color:#EBD3D8; }
.screen:hover::before{ transform:scaleX(1); }

.screen-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.screen-ico{
  width:52px; height:52px; border-radius:15px; flex:none;
  background:var(--primary-soft); display:grid; place-items:center;
  transition:background .28s ease, transform .28s ease;
}
.screen-ico svg{
  width:25px; height:25px; fill:none; stroke:var(--primary);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .28s ease;
}
.screen:hover .screen-ico{ background:var(--primary); transform:rotate(-4deg) scale(1.05); }
.screen:hover .screen-ico svg{ stroke:#fff; }
.screen-no{
  font-family:var(--f-display); font-weight:800; font-size:2.1rem; line-height:1;
  color:var(--primary); opacity:.13; letter-spacing:-.04em; user-select:none;
}

.screen-tag{
  font-family:var(--f-body); font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--primary); display:flex; align-items:center; gap:.45rem;
}
.screen-tag::before{ content:""; width:14px; height:2px; background:var(--primary); border-radius:2px; flex:none; }
.screen h3{ font-size:1.3rem; margin:.5rem 0 .5rem; }
.screen-sum{ color:var(--slate); font-size:.94rem; }
.screen ul{
  display:grid; gap:.6rem; margin-top:1.1rem; padding-top:1.1rem;
  border-top:1px dashed var(--mist);
}
.screen ul li{ position:relative; padding-left:1.5rem; color:var(--slate); font-size:.89rem; line-height:1.55; }
.screen ul li::before{
  content:""; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:rotate(-45deg); opacity:.85;
}
.screen ul li b{ color:var(--ink); font-weight:700; }

/* ---------------- reports ---------------- */
.rep-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.rep{
  background:var(--card); border:1px solid var(--mist); border-left:4px solid var(--primary);
  border-radius:var(--r-sm); padding:1.4rem 1.5rem; box-shadow:var(--sh-1);
  transition:transform .25s ease, box-shadow .25s ease;
}
.rep:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.rep-name{ font-family:var(--f-display); font-weight:800; font-size:1.1rem; }
.rep-q{ font-family:var(--f-body); font-style:italic; font-weight:500; color:var(--primary); margin:.4rem 0 .55rem; font-size:1rem; }
.rep-d{ color:var(--slate); font-size:.94rem; }

/* ---------------- pricing ---------------- */
.bill-toggle{
  display:inline-flex; gap:.25rem; margin:0 auto 2.2rem; padding:.3rem;
  background:var(--card); border:1px solid var(--mist); border-radius:999px;
  box-shadow:var(--sh-1);
}
.wrap > .bill-toggle{ display:flex; width:max-content; }
.bt-opt{
  font-family:var(--f-body); font-size:.92rem; font-weight:700; color:var(--slate);
  background:transparent; border:0; border-radius:999px; padding:.7rem 1.3rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  transition:background .22s ease, color .22s ease;
}
.bt-opt:hover{ color:var(--ink); }
.bt-opt.is-on{ background:var(--primary); color:#fff; }
.bt-save{
  font-family:var(--f-body); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--primary-soft); color:var(--primary); padding:.22rem .45rem; border-radius:999px;
}
.bt-opt.is-on .bt-save{ background:rgba(255,255,255,.22); color:#fff; }

/* single plan card */
.price-single{
  display:grid; grid-template-columns:.85fr 1.15fr;
  background:var(--card); border:1px solid var(--mist); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-2);
}
.ps-left{
  background:var(--secondary); color:#fff; padding:clamp(1.8rem,3.5vw,2.4rem);
  display:flex; flex-direction:column; position:relative;
}
.price-badge{
  align-self:flex-start; background:var(--primary); color:#fff;
  font-family:var(--f-body); font-weight:700; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.38rem .8rem; border-radius:999px; white-space:nowrap; margin-bottom:1rem;
}
.ps-left h3{ font-size:1.5rem; color:#fff; }
.price-for{ color:var(--on-dark-mute); font-size:.9rem; margin-top:.45rem; }
.price-amt{
  font-family:var(--f-display); font-weight:800; color:#fff;
  margin:1.4rem 0 .25rem; display:flex; align-items:baseline; gap:.1rem; letter-spacing:-.03em;
}
.price-amt .cur{ font-size:1.7rem; font-weight:700; }
.price-amt .num{ font-size:3.1rem; line-height:1; font-variant-numeric:tabular-nums; }
.price-amt .per{ font-family:var(--f-body); font-size:1rem; font-weight:600; color:var(--on-dark-mute); margin-left:.3rem; letter-spacing:0; }
.price-note{ font-size:.85rem; color:var(--on-dark-mute); }
.ps-left .btn{ margin-top:1.8rem; }
.ps-mini{ margin-top:.9rem; font-size:.76rem; color:var(--on-dark-mute); text-align:center; }

.ps-right{ padding:clamp(1.8rem,3.5vw,2.4rem); }
.ps-head{
  font-family:var(--f-body); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin-bottom:1.2rem;
}
.price-list{ display:grid; gap:.7rem; font-size:.94rem; color:var(--slate); }
.ps-cols{ grid-template-columns:1fr 1fr; gap:.75rem 1.6rem; }
.price-list li{ position:relative; padding-left:1.6rem; }
.price-list li::before{
  content:""; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:rotate(-45deg);
}
.price-list li b{ color:var(--ink); font-weight:700; }

.price-extra{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.2rem,3vw,2.5rem); align-items:center;
  background:var(--card); border:1px solid var(--mist); border-radius:var(--r);
  padding:clamp(1.3rem,3vw,1.9rem); margin-top:2.4rem; box-shadow:var(--sh-1);
}
.pe-lbl{ font-family:var(--f-body); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }
.pe-val{ font-family:var(--f-display); font-weight:800; font-size:1.9rem; color:var(--ink); letter-spacing:-.03em; margin-top:.3rem; }
.pe-tag{
  display:inline-block; vertical-align:middle; margin-left:.5rem;
  font-family:var(--f-body); font-size:.76rem; font-weight:700; letter-spacing:0;
  background:var(--soft); color:var(--secondary); border:1px solid var(--mist);
  padding:.28rem .65rem; border-radius:999px;
}
.pe-sub{ margin-top:.55rem; font-size:.84rem; color:var(--slate); max-width:38ch; }
.pe-list{ display:grid; gap:.5rem; font-size:.92rem; color:var(--slate); }
.pe-list li{ position:relative; padding-left:1.6rem; }
.pe-list li::before{
  content:""; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:rotate(-45deg);
}
.price-foot{
  margin:1.6rem auto 0; max-width:70ch; text-align:center;
  font-size:.86rem; color:var(--slate);
}
.price-foot b{ color:var(--ink); }

/* ---------------- two column lists ---------------- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.plain{ display:grid; gap:.9rem; }
.plain li{ display:grid; grid-template-columns:1.1rem 1fr; gap:.7rem; font-size:.97rem; color:var(--slate); }
.plain li b{ color:var(--ink); font-weight:700; }
.plain .mk{ color:var(--primary); font-family:var(--f-body); font-weight:800; line-height:1.6; }

/* ---------------- faq ---------------- */
.faq{ display:grid; gap:.7rem; }
.faq details{
  background:var(--card); border:1px solid var(--mist); border-radius:var(--r-sm);
  padding:0 1.25rem; transition:border-color .2s ease, box-shadow .2s ease;
}
.faq details[open]{ border-color:#E5D2D6; box-shadow:var(--sh-1); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.1rem 2rem 1.1rem 0; position:relative;
  font-family:var(--f-display); font-weight:700; font-size:1.02rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.1rem; top:50%; width:10px; height:10px;
  border-right:2.2px solid var(--primary); border-bottom:2.2px solid var(--primary);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.faq details p{ color:var(--slate); font-size:.96rem; padding:0 0 1.15rem; margin-top:-.2rem; }
.faq details[open] p{ animation:fadeIn .3s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }

/* ---------------- cta / contact ---------------- */
.cta{ background:var(--primary); color:#fff; }
.cta .sec-title{ color:#fff; }
.cta-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.cta-lede{ margin:.9rem 0 0; max-width:46ch; color:rgba(255,255,255,.88); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:2rem 0 0; }
.cta-box{
  border:1px solid rgba(255,255,255,.3); border-radius:var(--r-sm); padding:1rem 1.1rem;
  display:flex; flex-direction:column; gap:.28rem; color:#fff;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
a.cta-box:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform:translateY(-3px); }
.cta-box .lbl{ font-family:var(--f-body); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.cta-box .val-line{ font-family:var(--f-body); font-size:1rem; font-weight:700; }
.cta-box .wrap-any{ font-size:.8rem; overflow-wrap:anywhere; }
.fill{ color:#fff; }

/* form */
.form-card{
  background:var(--card); color:var(--ink); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--sh-3);
}
.form-card h3{ font-size:1.3rem; }
.form-sub{ color:var(--slate); font-size:.92rem; margin-top:.35rem; }
#demoForm{ margin-top:1.3rem; display:grid; gap:.9rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.82rem; font-weight:700; color:var(--ink); }
.field label span{ color:var(--primary); }
.field input, .field textarea{
  font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  background:var(--third); border:1.5px solid var(--mist); border-radius:var(--r-sm);
  padding:.8rem .9rem; width:100%; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#9AA0A8; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(202,6,45,.12);
}
.field input.invalid, .field textarea.invalid{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(202,6,45,.14); }
.field textarea{ resize:vertical; min-height:84px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.form-err{ color:var(--primary); font-size:.85rem; font-weight:600; margin:0; }
.form-actions{ display:grid; gap:.6rem; margin-top:.3rem; }
.form-note{ font-size:.78rem; color:var(--slate); text-align:center; margin-top:.3rem; }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--sec-deep); color:var(--on-dark-mute); padding:clamp(2.6rem,5vw,3.6rem) 0 1.4rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2rem; }
/* logo sits on a white card so the dark part of the artwork stays readable */
.f-logo{
  display:inline-block; background:#fff; border-radius:14px; padding:.85rem 1.1rem;
  box-shadow:0 14px 30px -20px rgba(0,0,0,.9); transition:transform .2s ease;
}
.f-logo:hover{ transform:translateY(-3px); }
.f-logo img{ display:block; width:132px; height:auto; }
.f-brand p{ margin-top:1.1rem; font-size:.9rem; max-width:34ch; line-height:1.7; }
.site-footer h4{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-l); font-family:var(--f-body); font-weight:700; margin-bottom:.9rem; }
.site-footer ul{ display:grid; gap:.55rem; font-size:.9rem; }
.site-footer a{ color:var(--on-dark-mute); transition:color .2s ease; overflow-wrap:anywhere; }
.site-footer a:hover{ color:var(--primary-l); }
/* same look as the header "Book Free Demo" button */
.f-contact .btn{
  margin-top:1.3rem; padding:.7rem 1.15rem; font-size:.88rem;
  box-shadow:none; color:#fff;
}
.f-contact .btn:hover{ color:#fff; background:var(--primary-d); box-shadow:0 10px 22px -12px rgba(202,6,45,.6); }
.f-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--sec-line);
  font-size:.82rem;
}

/* ---------------- inner page (privacy policy) ---------------- */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--sec-deep); color:var(--on-dark);
  padding:calc(var(--header-h) + clamp(2.2rem,5vw,3.4rem)) 0 clamp(2.2rem,5vw,3.2rem);
}
.page-hero .wrap{ position:relative; }
.crumb{ font-size:.85rem; color:var(--on-dark-mute); margin-bottom:1.4rem; }
.crumb a{ color:var(--on-dark-mute); }
.crumb a:hover{ color:var(--primary-l); }
.crumb span{ margin:0 .45rem; color:rgba(255,255,255,.35); }
.page-hero h1{ font-size:clamp(2rem,4.6vw,3rem); margin:.6rem 0 0; }
.page-sub{ margin-top:.6rem; color:var(--on-dark-mute); font-size:1.05rem; }
.page-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.page-meta span{
  font-size:.8rem; color:var(--on-dark); background:rgba(255,255,255,.06);
  border:1px solid var(--sec-line); border-radius:999px; padding:.4rem .85rem;
}

.legal-wrap{ display:grid; grid-template-columns:255px 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }

.toc{ position:sticky; top:calc(var(--header-h) + 1.6rem); }
.toc h2{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin-bottom:.9rem;
}
.toc ol{ display:grid; gap:.1rem; border-left:1px solid var(--mist); }
.toc a{
  display:block; padding:.45rem .8rem; font-size:.87rem; color:var(--slate);
  border-left:2px solid transparent; margin-left:-1px; border-radius:0 8px 8px 0;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.toc a:hover{ color:var(--primary); background:var(--primary-soft); }
.toc a.active{ color:var(--primary); font-weight:600; border-left-color:var(--primary); background:var(--primary-soft); }

.legal{ max-width:72ch; }
.legal .intro{ font-size:1.06rem; color:var(--ink); margin-bottom:1rem; }
.legal .intro em{ font-style:italic; color:var(--primary); font-weight:500; }
.legal h2{
  display:flex; align-items:baseline; gap:.75rem;
  font-size:1.35rem; margin:2.8rem 0 1rem;
  padding-top:1.8rem; border-top:1px solid var(--mist);
  scroll-margin-top:calc(var(--header-h) + 1.2rem);
}
.legal h2:first-of-type{ margin-top:2.2rem; }
.legal h2 .n{
  flex:none; font-size:.78rem; font-weight:800; letter-spacing:.06em; color:var(--primary);
  background:var(--primary-soft); border-radius:8px; padding:.32rem .55rem; line-height:1;
}
.legal p{ color:var(--slate); margin-bottom:1rem; }
.legal ul{ display:grid; gap:.55rem; margin:0 0 1.3rem; }
.legal ul li{ position:relative; padding-left:1.5rem; color:var(--slate); }
.legal ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:2px; background:var(--primary); opacity:.55;
}
.legal-note{
  background:var(--soft); border-left:4px solid var(--primary);
  border-radius:0 10px 10px 0; padding:1rem 1.2rem; color:var(--ink) !important; font-size:.95rem;
}

.legal-contact{
  background:var(--card); border:1px solid var(--mist); border-left:4px solid var(--primary);
  border-radius:0 14px 14px 0; padding:1.5rem 1.6rem; box-shadow:var(--sh-1); margin:1.4rem 0 1.8rem;
}
.lc-name{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:var(--ink) !important; margin-bottom:1rem !important; }
.lc-list{ display:grid; gap:.8rem; }
.lc-list li{ display:grid; grid-template-columns:5.5rem 1fr; gap:.8rem; align-items:baseline; padding:0 !important; }
.lc-list li::before{ display:none; }
.lc-lbl{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); }
.lc-list a{ font-weight:600; overflow-wrap:anywhere; }
.legal-end{ font-weight:600; color:var(--ink) !important; padding-top:1.4rem; border-top:1px solid var(--mist); }

/* ---------------- floating ---------------- */
.fab-wa{
  position:fixed; right:1.1rem; bottom:1.4rem; z-index:90;
  width:54px; height:54px; border-radius:999px; background:#1FA855; color:#fff;
  display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(31,168,85,.7);
  transition:transform .2s ease;
}
.fab-wa svg{ width:28px; height:28px; }
.fab-wa:hover{ transform:scale(1.08); }

.to-top{
  position:fixed; right:1.1rem; bottom:5.4rem; z-index:90;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--mist);
  background:var(--card); color:var(--primary); display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--sh-2); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.mobile-bar{ display:none; }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1080px){
  .val-grid{ grid-template-columns:repeat(2,1fr); }
  .screens{ grid-template-columns:repeat(2,1fr); }
  .seg-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1.2fr; }
  .f-brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  /* onboarding track turns vertical */
  .track{ grid-template-columns:1fr; gap:1.8rem; padding-left:5rem; }
  .track-rail{
    top:1.6rem; bottom:2.5rem; left:2.05rem; right:auto; width:3px; height:auto;
  }
  .track-fill{ transform:scaleY(var(--p, 0)); transform-origin:top center; }
  .tstep{ text-align:left; padding:0; }
  .ts-node{
    position:absolute; left:-5rem; top:-.2rem; margin:0;
    width:56px; height:56px; box-shadow:0 0 0 7px var(--secondary);
  }
  .tstep.on .ts-node{ box-shadow:0 0 0 7px var(--secondary), 0 0 0 12px rgba(202,6,45,.16); }
  .ts-node svg{ width:23px; height:23px; }
  .ts-lbl{ justify-content:flex-start; }
  .tstep h3{ margin-top:.55rem; }

  /* chain becomes a simple left-rail timeline */
  .chain{ grid-template-columns:1fr; padding-left:2.45rem; row-gap:1.4rem; }
  .chain-svg{ display:none; }
  .chain::before{
    content:""; position:absolute; left:1.1rem; top:1rem; bottom:1rem; width:2px; border-radius:2px;
    background:linear-gradient(180deg, var(--primary-l), var(--primary)); opacity:.45;
  }
  /* needs .chain prefix to beat .chain-card:nth-of-type() above */
  .chain .chain-card{ grid-area:auto; }
  .chain-card{ padding:1.3rem 1.3rem 1.4rem; }
  .chain-card h3{ margin-top:0; font-size:1.08rem; }
  .cc-n{
    top:1.15rem; left:-2.5rem; width:2.4rem; height:2.4rem; font-size:1rem;
    border-color:transparent; box-shadow:0 0 0 6px var(--secondary);
  }
}

@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ max-width:520px; margin:1rem auto 0; width:100%; }
  .kot-float{ left:-.5rem; bottom:-1rem; }
  .print-float{ right:-.2rem; }
  .cta-inner{ grid-template-columns:1fr; }

  .price-single{ grid-template-columns:1fr; }
  .ps-left{ text-align:center; align-items:center; }
  .price-badge{ align-self:center; }
  .price-amt{ justify-content:center; }
  .ps-left .btn{ width:100%; max-width:360px; }
  .price-for{ max-width:44ch; }
  .price-extra{ grid-template-columns:1fr; gap:1.2rem; }

  .strip-grid{ grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; }
  .strip-item:nth-child(3){ border-left:0; }
  .strip-item:nth-child(odd){ border-left:0; }
}

@media (max-width:860px){
  :root{ --header-h:72px; }

  .brand img{ height:52px; }
  .nav-toggle{ display:grid; }

  /* panel opens BELOW the header, so the logo stays visible */
  .nav{
    position:fixed; top:var(--header-h); right:0; z-index:99;
    height:calc(100dvh - var(--header-h)); width:min(86vw, 330px);
    background:var(--card); border-left:1px solid var(--mist); border-top:1px solid var(--mist);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:1.3rem 1.5rem 2rem;
    transform:translateX(105%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 50px -30px rgba(46,50,57,.7); overflow-y:auto;
  }
  .nav.open{ transform:none; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list li + li{ border-top:1px solid var(--mist); }
  .nav-list a{ display:block; padding:.95rem .2rem; font-size:1.02rem; }
  .nav-list a::after{ display:none; }
  .nav-cta{ flex-direction:column; align-items:stretch; margin-top:1.4rem; gap:.7rem; }
  .nav-cta .btn{ width:100%; padding:.9rem 1rem; font-size:.95rem; }

  .legal-wrap{ grid-template-columns:1fr; gap:1.8rem; }
  .toc{
    position:static; background:var(--card); border:1px solid var(--mist);
    border-radius:14px; padding:1.2rem 1.3rem;
  }
  .toc ol{ grid-template-columns:1fr 1fr; gap:.1rem .8rem; border-left:0; }
  .toc a{ padding:.4rem .5rem; border-left:0; border-radius:8px; margin-left:0; }
  .toc a.active{ border-left:0; }
  .legal{ max-width:none; }

  .two{ grid-template-columns:1fr; }
  .rep-grid{ grid-template-columns:1fr; }
  .seg-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .f-brand{ grid-column:1 / -1; }
  .f-contact{ grid-column:1 / -1; }
}

@media (max-width:640px){
  body{ font-size:15.5px; }

  .hero{ padding-top:calc(var(--header-h) + 2rem); }
  .hero h1{ font-size:clamp(1.95rem, 8.4vw, 2.5rem); }
  .hero-actions{ gap:.65rem; }
  .hero-actions .btn{ flex:1 1 100%; }
  .chips li{ font-size:.66rem; padding:.4rem .7rem; }

  .hero-visual{ margin-top:2.4rem; }
  .mock{ animation:none; }
  .kot-float{ position:static; width:100%; margin-top:1rem; animation:none; }
  .print-float{ position:absolute; top:-1.1rem; right:0; animation:none; padding:.5rem .7rem; }
  .tables{ grid-template-columns:repeat(3,1fr); gap:.4rem; }

  .val-grid{ grid-template-columns:1fr; }
  .screens{ grid-template-columns:1fr; }
  .seg-grid{ grid-template-columns:1fr; }

  .track{ padding-left:4.4rem; gap:1.6rem; }
  .track-rail{ left:1.75rem; }
  .ts-node{ left:-4.4rem; width:50px; height:50px; }
  .ts-node svg{ width:21px; height:21px; }

  .cta-grid{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; }

  .toc ol{ grid-template-columns:1fr; }
  .legal h2{ font-size:1.2rem; gap:.6rem; }
  .lc-list li{ grid-template-columns:1fr; gap:.15rem; }

  .ps-cols{ grid-template-columns:1fr; }
  .bt-opt{ padding:.7rem 1rem; font-size:.88rem; }
  .price-amt .num{ font-size:2.6rem; }
  .pe-val{ font-size:1.6rem; }
  .pe-tag{ display:block; margin:.5rem 0 0; width:max-content; }

  .footer-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .f-bottom{ flex-direction:column; text-align:left; }

  /* sticky bottom action bar */
  .mobile-bar{
    display:flex; gap:.55rem; position:fixed; left:0; right:0; bottom:0; z-index:95;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); border-top:1px solid var(--mist);
    backdrop-filter:blur(10px); box-shadow:0 -8px 26px -20px rgba(46,50,57,.8);
  }
  .mb-btn{
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.82rem .6rem; border-radius:12px; font-weight:700; font-size:.92rem;
  }
  .mb-call{ background:var(--primary-soft); color:var(--primary); border:1px solid #F0D2D9; }
  .mb-call svg{ width:16px; height:16px; fill:currentColor; }
  .mb-demo{ background:var(--primary); color:#fff; }

  .fab-wa{ width:48px; height:48px; bottom:5.2rem; right:.9rem; }
  .fab-wa svg{ width:25px; height:25px; }
  .to-top{ bottom:9.4rem; right:.9rem; width:40px; height:40px; }
  .site-footer{ padding-bottom:5.5rem; }
}

@media (max-width:420px){
  .brand img{ height:46px; }
  .print-float{ display:none; }
  .t{ min-height:3.7rem; }
}

/* ---------------- motion / print ---------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.fab-wa,.to-top,.mobile-bar,.hero-visual,.nav-toggle,.form-actions{ display:none !important; }
  body{ background:#fff; color:#000; }
  .hero,.band-deep,.cta,.site-footer,.strip{ background:#fff !important; color:#000 !important; }
  .hero h1 em,.eyebrow,.fill,.strip-num,.cta .sec-title,.ts-lbl b{ color:var(--primary-d) !important; }
  .hero-lede,.sec-lede,.cta-lede,.ts-txt,.chain-card p,.strip-lbl,.site-footer a{ color:#333 !important; }
  .tstep,.chain-card{ break-inside:avoid; }
  .cta-box,.chips li{ border-color:#999 !important; }
  .val,.screen,.rep,.faq details{ break-inside:avoid; border-color:#bbb !important; box-shadow:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}