:root{
    --ink:#141414; --ink-2:#464646; --ink-3:#7a7a7a;
    --paper:#fbfaf7; --paper-2:#f4f1ea; --white:#fff;
    --line:rgba(20,20,20,.11); --line-2:rgba(20,20,20,.19);
    --gold:#c9a200; --gold-deep:#9a7400; --gold-bright:#f5c518;
    --black:#0d0d0d;
    --r:12px; --maxw:1160px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.display{font-family:'Inter',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.1}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}

  /* registration-mark motif — the print_mark SVG, tinted to the surrounding
     accent so it stays visible on any background (deep gold on light, bright
     gold on dark) */
  .regmark{
    width:18px;height:20px;flex:0 0 18px;display:inline-block;vertical-align:middle;
    background-color:currentColor;
    -webkit-mask:url(/assets/print_mark.svg) center/contain no-repeat;
            mask:url(/assets/print_mark.svg) center/contain no-repeat;
  }
  .regmark span{display:none}

  /* buttons — explicit hover colors, never same text/bg */
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:15px;padding:13px 24px;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s;white-space:nowrap}
  .btn-primary{background:var(--black);color:#fff;border-color:var(--black)}
  .btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
  .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .btn-gold{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
  .btn-gold:hover{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-1px)}

  /* header */
  header{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{height:38px;width:auto}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a.navlink{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .15s}
  .nav-links a.navlink:hover{color:var(--gold-deep)}
  @media(max-width:900px){.nav-links .navlink{display:none}}
  /* Mobile top bar: compact, evenly balanced — logo left, tight CTAs right */
  @media(max-width:600px){
    .wrap{padding:0 16px}
    .nav{height:58px}
    .brand img{height:28px}
    .nav-links{gap:8px}
    .nav-links .btn{padding:8px 13px;font-size:13px;border-radius:9px}
  }
  @media(max-width:380px){
    .brand img{height:25px}
    .nav-links .btn{padding:7px 11px;font-size:12px}
  }

  /* hero */
  .hero{padding:32px 0 60px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
  .hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .hero h1{font-size:clamp(36px,5.2vw,58px);font-weight:700}
  .hero h1 .accent{color:var(--gold-deep)}
  .hero p.lede{font-size:19px;color:var(--ink-2);margin:14px 0 12px;max-width:40ch}
  .hero p.sub{font-size:15px;color:var(--ink-3);margin-bottom:16px;max-width:44ch}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-signin{margin-top:16px;font-size:14px;color:var(--ink-3)}
  .hero-signin a{color:var(--gold-deep);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
  .hero-signin a:hover{border-bottom-color:var(--gold-deep)}
  .hero-modules{display:flex;gap:18px;margin-top:34px;flex-wrap:wrap}
  .hero-mod{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
  .hero-mod img{width:30px;height:30px}

  /* mock window */
  .mock{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -26px rgba(20,20,20,.3);overflow:hidden}
  .mock-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper-2)}
  .mock-dot{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
  .mock-url{margin-left:10px;font-size:11px;color:var(--ink-3);font-family:'Inter',system-ui,sans-serif;letter-spacing:.02em}
  .mock-body{padding:18px}
  /* Real JobBuddy dashboard shown in an isolated iframe. Rendered at a fixed
     desktop design size and scaled by JS to the frame width, so the whole
     KPI + parties card is always fully visible and crisp. */
  .mock-frame-wrap{position:relative;width:100%;overflow:hidden;background:var(--white)}
  .mock-frame{position:absolute;top:0;left:50%;width:1000px;height:600px;border:0;
    transform-origin:top left;pointer-events:none}
  /* centred once it stops filling the width */
  .mock-frame-wrap{display:flex;justify-content:center}
  .mock-frame{left:0;position:absolute}
  /* ── hero visual ───────────────────────────────────────────────────────────
     A real screenshot here was too dense to read at hero size and felt like a
     generic SaaS dashboard shot. This is an original piece instead: the same
     five modules as one connected line, with a job's status moving across it
     on a loop — dramatising "one system" rather than showing a data table. */
  .hero-visual{padding:24px 26px 22px}
  .hv-head{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:36px}
  .hv-flow{position:relative}
  .hv-line{position:absolute;left:27px;right:27px;top:27px;height:2px;background:var(--line-2);border-radius:2px}
  .hv-fill{position:absolute;top:0;left:0;height:100%;border-radius:2px;width:0;
    background:var(--gold-deep);animation:hvFill 8s linear infinite}
  .hv-dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
    background:var(--gold-deep);box-shadow:0 0 0 5px rgba(154,116,0,.16);animation:hvDot 8s linear infinite}
  .hv-nodes{position:relative;display:flex;justify-content:space-between;gap:4px}
  .hv-node{display:flex;flex-direction:column;align-items:center;text-align:center;width:20%}
  .hv-ring{width:54px;height:54px;border-radius:50%;background:var(--white);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;box-sizing:border-box;
    animation:hvPulse 8s linear infinite;animation-delay:calc(var(--i) * 2s)}
  .hv-ring img{width:24px;height:24px}
  .hv-node b{font-size:12px;font-weight:600;line-height:1.25;color:var(--ink)}
  .hv-node small{font-size:10.5px;color:var(--ink-3);margin-top:2px}
  .hv-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:28px;
    padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
  .hv-id{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:700;color:var(--ink)}
  .hv-status{font-size:12.5px;color:var(--ink-3)}
  @keyframes hvFill{0%{width:0}100%{width:100%}}
  @keyframes hvDot{0%{left:0}100%{left:100%}}
  @keyframes hvPulse{
    0%{border-color:var(--line);box-shadow:none}
    4%{border-color:var(--gold-deep);box-shadow:0 0 0 6px rgba(154,116,0,.14)}
    16%{border-color:var(--gold-deep);box-shadow:0 0 0 6px rgba(154,116,0,.14)}
    22%,100%{border-color:var(--line);box-shadow:none}
  }
  @media (prefers-reduced-motion: reduce){
    .hv-fill,.hv-dot,.hv-ring{animation:none}
    .hv-fill{width:100%}
  }
  @media(max-width:520px){
    .hv-node b{font-size:10.5px}
    .hv-node small{display:none}
    .hv-ring{width:42px;height:42px}
    .hv-ring img{width:19px;height:19px}
  }

  .mock-row{display:flex;gap:12px;margin-bottom:12px}
  .mock-kpi{flex:1;border:1px solid var(--line);border-radius:8px;padding:12px}
  .mock-kpi .k-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .mock-kpi .k-val{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:22px;margin-top:4px}
  .mock-kpi .k-val.gold{color:var(--gold-deep)}
  .mock-table{border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .mock-th{display:flex;background:var(--paper-2);padding:8px 12px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
  .mock-tr{display:flex;padding:9px 12px;border-top:1px solid var(--line);font-size:12px}
  .mock-th span,.mock-tr span{flex:1}
  .mock-tr span:last-child{text-align:right;font-family:'Inter',system-ui,sans-serif;font-weight:600}

  section{padding:74px 0}
  .sec-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:var(--gold-deep)}
  .problem .sec-head,.why .sec-head{color:var(--gold-bright)}
  .sec-title{font-size:clamp(26px,3.4vw,38px);font-weight:700}
  .sec-sub{color:var(--ink-2);font-size:17px;max-width:62ch;margin-bottom:46px}

  /* problem — dark section */
  .problem{background:var(--black);color:#fff}
  .problem .sec-title{color:#fff}
  .problem .sec-sub{color:rgba(255,255,255,.62)}
  .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media(max-width:700px){.problem-grid{grid-template-columns:1fr}}
  .problem-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:24px}
  .problem-card .pc-ico{width:38px;height:38px;border-radius:9px;background:rgba(245,197,24,.14);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .problem-card .pc-ico span{width:20px;height:20px;background:var(--gold-bright);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
  .problem-card h3{font-size:18px;font-weight:600;margin-bottom:7px}
  .problem-card p{font-size:14px;color:rgba(255,255,255,.6)}

  /* solution */
  .sol-points{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;margin-top:8px}
  @media(max-width:700px){.sol-points{grid-template-columns:1fr}}
  .sol-point{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
  .sol-point .tick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--gold-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}

  /* modules */
  .modules{background:var(--paper-2)}
  .mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.mod-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.mod-grid{grid-template-columns:1fr}}
  .mod{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:box-shadow .16s,border-color .16s}
  .mod:hover{box-shadow:0 16px 40px -22px rgba(20,20,20,.3);border-color:var(--gold)}
  .mod img{width:44px;height:44px;margin-bottom:15px}
  .mod .mod-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
  .mod h3{font-size:20px;font-weight:600;margin-bottom:8px}
  .mod h3 .b{color:var(--gold-deep)}
  .mod p{font-size:14px;color:var(--ink-2)}
  .mod ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
  .mod ul li{font-size:13px;color:var(--ink-2);padding-left:18px;position:relative}
  .mod ul li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold)}

  /* connects flow */
  .flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
  @media(max-width:860px){.flow-steps{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.flow-steps{grid-template-columns:1fr}}
  .flow-step{text-align:center;padding:8px}
  .flow-step .fs-ico{width:52px;height:52px;border-radius:13px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
  .flow-step .fs-ico span{width:26px;height:26px;background:var(--gold-deep);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
  .flow-step h4{font-size:14px;font-weight:700;margin-bottom:5px}
  .flow-step p{font-size:12px;color:var(--ink-3)}

  /* why — comparison */
  .why{background:var(--black);color:#fff}
  .why .sec-title{color:#fff}
  .why .sec-sub{color:rgba(255,255,255,.62)}
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media(max-width:760px){.why-grid{grid-template-columns:1fr}}
  .why-col{border-radius:var(--r);padding:26px}
  .why-generic{border:1px solid rgba(255,255,255,.14)}
  .why-us{background:var(--white);color:var(--ink)}
  .why-col h3{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
  .why-generic h3{color:rgba(255,255,255,.55)}
  .why-us h3{color:var(--gold-deep);display:flex;align-items:center;gap:8px}
  .why-us h3 img{height:18px}
  .why-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .why-col li{font-size:14px;padding-left:26px;position:relative}
  .why-generic li{color:rgba(255,255,255,.6)}
  .why-generic li::before{content:"✕";position:absolute;left:0;color:rgba(255,255,255,.4);font-weight:700}
  .why-us li::before{content:"✓";position:absolute;left:0;color:var(--gold-deep);font-weight:700}

  /* governance */
  .gov-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
  @media(max-width:980px){.gov-grid{grid-template-columns:1fr 1fr 1fr}}
  @media(max-width:640px){.gov-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:400px){.gov-grid{grid-template-columns:1fr}}
  .gov{padding:4px}
  .gov .g-ico{width:42px;height:42px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
  .gov .g-ico span{width:22px;height:22px;background:var(--gold-deep);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
  .gov h4{font-size:16px;font-weight:600;margin-bottom:6px}
  .gov p{font-size:13px;color:var(--ink-2)}

  /* inquiry */
  .cta{background:var(--paper-2)}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  @media(max-width:860px){.cta-grid{grid-template-columns:1fr;gap:36px}}
  .cta h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:14px}
  .cta .lede{color:var(--ink-2);font-size:17px;margin-bottom:24px}
  .cta-points{list-style:none;display:flex;flex-direction:column;gap:12px}
  .cta-points li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
  .cta-points .tick{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--gold-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}

  form{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 12px 40px -26px rgba(20,20,20,.26)}
  form h3{font-size:20px;font-weight:600;margin-bottom:4px}
  form .form-sub{font-size:13px;color:var(--ink-3);margin-bottom:20px}
  .field{margin-bottom:15px}
  .field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:6px}
  .field input,.field textarea,.field select{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(154,116,0,.14)}
  .field textarea{resize:none;line-height:1.45;overflow-y:auto}
  form .btn{width:100%;justify-content:center;margin-top:6px}
  .consent{margin:4px 0 16px;display:flex;flex-direction:column;gap:10px}
  .consent-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45;cursor:pointer}
  .consent-row input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--gold-deep);cursor:pointer}
  .consent-row a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .consent-row a:hover{color:var(--ink)}
  .ts-widget:empty{display:none}
  .ts-widget{margin:0 0 14px;min-height:65px}
  .consent-row.err{color:#b91c1c}
  .consent-row.err input{outline:2px solid rgba(220,38,38,.55);outline-offset:1px}
  .form-privacy{font-size:11.5px;color:var(--ink-3);margin-top:12px;text-align:center}
  .form-success{display:none;text-align:center;padding:14px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);border-radius:8px;color:#15803d;font-size:14px;font-weight:500;margin-bottom:16px}

  footer{background:var(--black);color:rgba(255,255,255,.7);padding:46px 0 32px}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .foot img{height:26px}
  .foot-links{display:flex;gap:24px;font-size:14px;flex-wrap:wrap}
  .foot-links a:hover{color:var(--gold-bright)}
  .foot-copy{font-size:12.5px;color:rgba(255,255,255,.42);margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr .9fr 1.2fr;gap:34px;align-items:start}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
  @media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
  .foot-col h4{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;font-weight:600}
  .foot-col a,.foot-col p{display:block;font-size:14px;color:rgba(255,255,255,.74);margin-bottom:9px;line-height:1.5}
  .foot-col a:hover{color:var(--gold-bright)}
  /* opens-in-a-new-tab marker — same weight as the link text it follows */
  .foot-col a .ext{display:inline-block;vertical-align:-1px;margin-left:6px;opacity:.65}
  .foot-col a:hover .ext{opacity:1}
  .foot-col .ct-sub{font-size:11.5px;color:rgba(255,255,255,.4);letter-spacing:.02em}
  .foot-brand img{height:36px;margin-bottom:14px}
  .foot-brand p{font-size:13.5px;color:rgba(255,255,255,.55);max-width:290px;line-height:1.6}
  .foot-social{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}
  .foot-social a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:rgba(255,255,255,.7);transition:border-color .16s,color .16s,background .16s;margin:0}
  .foot-social a:hover{border-color:var(--gold-bright);color:var(--gold-bright);background:rgba(255,255,255,.05)}
  .foot-social svg{width:19px;height:19px;display:block;fill:currentColor;overflow:visible;flex:0 0 auto}



  /* ── in-page screen previews ───────────────────────────────────────────────
     The same browser frame as the hero, used to show a real screen next to the
     claim it backs up. Non-interactive; it is a picture of the app, made from
     the app. */
  .shots{margin-top:38px;display:grid;gap:26px}
  .shot{background:var(--white);border:1px solid var(--line);border-radius:14px;
    overflow:hidden;box-shadow:0 1px 2px rgba(20,20,20,.04),0 18px 44px -22px rgba(20,20,20,.22)}
  .shot .mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
    border-bottom:1px solid var(--line);background:var(--paper-2)}
  .shot-cap{padding:14px 18px 16px;border-top:1px solid var(--line);background:var(--paper)}
  .shot-cap b{font-family:'Inter',system-ui,sans-serif;font-size:14px;display:block;margin-bottom:3px}
  .shot-cap span{font-size:13.5px;color:var(--ink-2);line-height:1.5}
  @media(min-width:900px){ .shots.two{grid-template-columns:1fr 1fr} }
  /* a single preview should not stretch across the full page — the screen was
     designed at 1000px and looks stranded any wider */
  .shots:not(.two) .shot{max-width:1000px;margin-inline:auto;width:100%}

  /* ── module screens under the slider ───────────────────────────────────────
     One pair per module, stacked in the same spot. Only the pair of the module
     on show takes up space; the others sit on top of it, invisible, so they are
     already laid out and loaded by the time the slider reaches them. */
  .mod-shots{position:relative;margin-top:38px;display:grid}
  .mod-shots > .mod-pair{grid-area:1/1}   /* stacked: height = tallest pair, never changes */
  .mod-shots .shots{margin-top:0}
  .mod-pair .mock-frame-wrap{background:#fbfaf7}   /* the screens' own page colour, so a shorter one sits seamlessly */
  .mod-pair .shot-cap span{display:block;min-height:3em}  /* one or two lines — same card height either way */
  .mod-pair{transition:opacity .5s ease,visibility 0s linear 0s}
  .mod-pair:not(.on){opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .5s ease,visibility 0s linear .5s}
  @media(prefers-reduced-motion:reduce){.mod-pair,.mod-pair:not(.on){transition:none}}

  /* ── module slider ─────────────────────────────────────────────────────────
     One module at a time. The card is split: a tinted rail carries the module's
     identity, the right side lists what it actually does. That gives the card
     height to stand on — as one wide band it read as an afterthought — and lets
     the eye land on the module name before the detail.
     It advances every 5s; using a chevron slows it to 15s, because someone who
     has started steering is reading rather than watching. */
  .slider{position:relative;margin-top:36px}
  .slide-track{position:relative;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(20,20,20,.04),0 12px 34px rgba(20,20,20,.06)}

  /* Every slide sits in the same grid cell, so the card is always as tall as the
     TALLEST slide and never changes height between modules (it used to, and the
     page below — including the demo form — jumped up and down every 5 seconds). */
  .slide-track{display:grid}
  .slide{display:grid;grid-template-columns:300px 1fr;min-height:376px;grid-area:1/1}
  .slide:not(.on){visibility:hidden;pointer-events:none}
  .slide.on{animation:slideIn .5s ease both}
  @keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* identity rail */
  .slide-rail{position:relative;background:var(--paper-2);border-right:1px solid var(--line);
    padding:38px 30px 30px;display:flex;flex-direction:column}
  .slide-rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
  .rail-ico{width:56px;height:56px;display:flex;align-items:center;justify-content:center;
    background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:20px}
  .rail-ico img{width:34px;height:34px;display:block}
  .rail-mark{width:16px;height:16px;border:3px solid var(--gold-deep);border-radius:50%}
  .slide-rail .mod-tag{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold-deep);margin-bottom:8px}
  .slide-rail h3{font-size:clamp(22px,2.1vw,30px);line-height:1.08;letter-spacing:-.5px;
    overflow-wrap:break-word;hyphens:none}
  .slide-rail h3 .b{color:var(--gold-deep)}
  .slide-lead{color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:12px}
  .rail-n{margin-top:auto;padding-top:22px;font-family:'Inter',system-ui,sans-serif;color:var(--ink-3)}
  .rail-n b{font-size:26px;color:var(--ink);letter-spacing:-1px}
  .rail-n span{font-size:13px;margin-left:5px}

  /* capabilities */
  .slide-caps{list-style:none;padding:38px 74px 34px 40px;margin:0;
    display:flex;flex-direction:column;justify-content:center;gap:15px}
  .slide-caps li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
  .slide-caps li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
    border-radius:2px;background:var(--gold);transform:rotate(45deg)}

  /* chevrons — flex-centred around an SVG; the text glyph sat above the middle */
  .s-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-2);
    background:var(--white);color:var(--ink-2);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 10px rgba(20,20,20,.10);
    transition:background .18s,color .18s,border-color .18s,transform .18s}
  .s-nav:hover{background:var(--black);color:#fff;border-color:var(--black)}
  .s-nav:active{transform:translateY(-50%) scale(.94)}
  .s-nav:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
  .s-nav.prev{left:-22px} .s-nav.next{right:-22px}

  /* how far through the dwell we are — makes the auto-advance legible */
  .s-progress{height:2px;background:var(--line);border-radius:2px;margin-top:18px;overflow:hidden}
  .s-progress span{display:block;height:100%;width:0;background:var(--gold)}

  .dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .dot{width:8px;height:8px;padding:0;border-radius:50%;border:0;cursor:pointer;
    background:var(--line-2);transition:background .16s,width .16s}
  .dot:hover{background:var(--gold-deep)}
  .dot.on{background:var(--gold-deep);width:24px;border-radius:4px}

  @media(max-width:960px){
    .slide{grid-template-columns:1fr;min-height:0;align-content:start}   /* spare height goes below the list, not into the rail */
    .slide-rail{border-right:0;border-bottom:1px solid var(--line);padding:28px 24px 22px}
    .slide-rail::before{right:0;bottom:auto;width:auto;height:3px}
    .rail-n{display:none}
    .slide-caps{padding:24px 24px 28px}
    .slide-rail h3{font-size:25px}
    .s-nav{width:38px;height:38px}
    .s-nav.prev{left:8px} .s-nav.next{right:8px}
  }
  @media(prefers-reduced-motion:reduce){.slide.on{animation:none}.s-progress{display:none}}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  :focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
  /* FAQ */
  .faq-list{max-width:820px;margin-top:8px}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item summary{list-style:none;cursor:pointer;padding:20px 44px 20px 2px;position:relative;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:17px;color:var(--ink);}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--gold-deep);transition:transform .2s;font-weight:400}
  .faq-item[open] summary::after{content:"–"}
  .faq-item p{padding:0 44px 20px 2px;margin:0;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:760px;overflow:hidden;transition:height .3s ease, opacity .28s ease, padding-bottom .3s ease}
  @media(max-width:600px){.faq-item summary{font-size:15.5px}.faq-item p{font-size:14px}}
  /* Success overlay — blocks the page behind, with a close control */
  .ov-backdrop{position:fixed;inset:0;background:rgba(10,12,16,.72);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px}
  .ov-backdrop.show{display:flex}
  .ov-card{background:#fff;border:1px solid rgba(22,163,74,.35);border-radius:16px;max-width:460px;width:100%;padding:32px 28px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative}
  .ov-tick{width:56px;height:56px;border-radius:50%;background:rgba(22,163,74,.12);color:#15803d;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px}
  .ov-card h3{margin:0 0 8px;font-size:20px;color:#0f172a}
  .ov-card p{margin:0 0 20px;font-size:14.5px;color:#475569;line-height:1.5}
  .ov-close-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:#94a3b8;cursor:pointer;padding:4px}
  .ov-close-x:hover{color:#0f172a}
  .ov-card-err{border-color:rgba(220,38,38,.35)}
  .ov-cross{background:rgba(220,38,38,.12);color:#dc2626;font-weight:800}
  /* International phone input — make it fill the field like the other inputs */
  .iti{width:100%;}
  .iti input#phone{width:100%;}
  .iti__dropdown-content{font-family:inherit;}
  .iti--separate-dial-code .iti__selected-dial-code{font-weight:500;}
  /* The site's form-input padding was overriding the country-search field,
     so its text/placeholder overlapped the magnifying-glass icon. Restore the
     room the icon needs on the left (and the clear "x" on the right). */
  .iti__search-input{
    padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal)) !important;
    padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal)) !important;
  }
  .pt-skel{display:none}
  html.pt-loading{overflow:hidden}
  html.pt-loading .pt-skel{display:block;position:fixed;inset:0;z-index:9999;background:#fbfaf7;overflow:hidden;
    transition:opacity .35s ease}
  .pt-skel.out{opacity:0;pointer-events:none}
  .pt-skel .sk{background:#ece7dc;border-radius:8px;position:relative;overflow:hidden}
  .pt-skel .sk{animation:ptSk 1.1s ease-in-out infinite alternate}
  @keyframes ptSk{from{opacity:1}to{opacity:.45}}
  @media(prefers-reduced-motion:reduce){.pt-skel .sk{animation:none}}
  .pt-skel .sk-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  .pt-skel .sk-head{height:70px;border-bottom:1px solid rgba(20,20,20,.08);background:rgba(251,250,247,.9)}
  .pt-skel .sk-nav{height:70px;display:flex;align-items:center;justify-content:space-between}
  .pt-skel .sk-links{display:flex;align-items:center;gap:26px}
  .pt-skel .sk-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:44px 0 56px}
  .pt-skel .sk-row{display:flex;gap:12px;flex-wrap:wrap}
  .pt-skel .sk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .pt-skel .sk-lines>.sk{height:14px;margin:0 0 12px}
  @media(max-width:900px){.pt-skel .sk-hero{grid-template-columns:1fr;gap:34px}.pt-skel .sk-cards{grid-template-columns:1fr 1fr}
    .pt-skel .sk-hide-sm{display:none}}
  @media(max-width:600px){.pt-skel .sk-head,.pt-skel .sk-nav{height:58px}.pt-skel .sk-cards{grid-template-columns:1fr}
    .pt-skel .sk-links{gap:8px}.pt-skel .sk-nav>.sk{width:110px!important;flex:0 0 110px}
    .pt-skel .sk-links>.sk{height:34px!important;border-radius:9px!important}
    .pt-skel .sk-links>.sk:nth-last-child(2){width:64px!important}.pt-skel .sk-links>.sk:last-child{width:112px!important}}

  /* =====================================================================
     Website layer: multi-product navigation, product pages, platform
     ===================================================================== */

  /* ── header: product and sign-in menus ──────────────────────────────── */
  .nav-dd{position:relative}
  .nav-dd > button{font:inherit;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 0;transition:color .15s}
  .nav-dd > button:not(.btn){border:0}
  .nav-dd > button.btn{padding:13px 20px;font-weight:600;font-size:15px;color:var(--ink)}
  .nav-dd > button.btn:hover{color:#fff}
  .nav-dd > button:not(.btn):hover,.nav-dd.open > button:not(.btn){color:var(--gold-deep)}
  .nav-dd .chev{transition:transform .2s}
  .nav-dd.open .chev{transform:rotate(180deg)}
  .dd-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);min-width:360px;
    background:var(--white);border:1px solid var(--line);border-radius:14px;padding:10px;
    box-shadow:0 24px 60px -24px rgba(20,20,20,.32);opacity:0;visibility:hidden;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:60}
  .dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .nav-dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .18s ease}
  .dd-panel.right{left:auto;right:0;transform:translate(0,6px);min-width:300px}
  .nav-dd.open .dd-panel.right{transform:none}
  .dd-item{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:10px;transition:background .15s}
  .dd-item:hover{background:var(--paper-2)}
  .dd-item img{width:38px;height:38px;flex:0 0 38px;border-radius:9px}
  .dd-item b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
  .dd-item small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}
  .dd-item .ext{opacity:.5;margin-left:auto}
  .dd-foot{margin-top:6px;padding:12px 12px 6px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px}
  .dd-foot a{color:var(--gold-deep);font-weight:600}
  .navlink.active{color:var(--ink)!important}

  .badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;line-height:1.3;white-space:nowrap}
  .badge-soon{background:rgba(201,162,0,.14);color:var(--gold-deep)}
  .badge-live{background:rgba(22,163,74,.11);color:#15803d}
  .badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a}
  .badge-dark{background:rgba(245,197,24,.16);color:var(--gold-bright)}

  /* mobile menu */
  .menu-btn{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--white);
    align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
  @media(max-width:900px){
    .nav-links .nav-dd{display:none}
    .menu-btn{display:inline-flex}
  }
  .m-sheet{position:fixed;inset:70px 0 auto 0;z-index:49;background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px -30px rgba(20,20,20,.35);padding:10px 16px 22px;transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;max-height:calc(100vh - 70px);overflow:auto}
  .m-sheet.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
  @media(max-width:600px){.m-sheet{inset:58px 0 auto 0;max-height:calc(100vh - 58px)}}
  .m-sheet h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:16px 4px 6px;font-weight:600}
  .m-sheet .dd-item{padding:10px 6px}
  .m-sheet .m-link{display:block;padding:12px 6px;font-weight:500;border-bottom:1px solid var(--line)}
  @media(min-width:901px){.m-sheet{display:none}}

  /* ── generic page bits ──────────────────────────────────────────────── */
  .center{text-align:center}
  .center .sec-sub{margin-left:auto;margin-right:auto}
  .center .sec-head{justify-content:center}
  .alt{background:var(--paper-2)}
  .dark{background:var(--black);color:#fff}
  .dark .sec-title{color:#fff}
  .dark .sec-sub{color:rgba(255,255,255,.62)}
  .dark .sec-head{color:var(--gold-bright)}

  /* ── home hero: the platform ────────────────────────────────────────── */
  .hero h1 .accent{color:var(--gold-deep)}
  .hero-products{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
  .hp-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--line);
    border-radius:999px;background:var(--white);font-size:13px;font-weight:600;color:var(--ink);transition:border-color .16s,transform .16s}
  .hp-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
  .hp-chip img{width:26px;height:26px;border-radius:7px}
  .hp-chip .badge{margin-left:2px}

  /* platform visual: one order travelling across the three apps */
  .pv{padding:24px 24px 20px}
  .pv-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}
  .pv-app{border:1px solid var(--line);border-radius:12px;padding:14px 12px 12px;background:var(--paper);position:relative;
    animation:pvOn 9s linear infinite;animation-delay:calc(var(--i) * 3s)}
  .pv-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .pv-h img{width:24px;height:24px;border-radius:6px}
  .pv-h b{font-size:12px;font-weight:700;letter-spacing:.02em}
  .pv-h .badge{margin-left:auto;font-size:8.5px;padding:2px 6px}
  .pv-line{height:7px;border-radius:4px;background:var(--line);margin-bottom:7px}
  .pv-line.w60{width:60%}.pv-line.w80{width:80%}.pv-line.w40{width:40%}
  .pv-card{margin-top:10px;border:1px solid var(--line-2);border-radius:8px;padding:8px 9px;background:var(--white);font-size:10.5px;line-height:1.35}
  .pv-card b{display:block;font-size:10.5px;font-weight:700;color:var(--ink)}
  .pv-card span{color:var(--ink-3)}
  .pv-card .pv-st{display:inline-block;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
  .pv-db{margin-top:16px;display:flex;align-items:center;gap:12px;border:1px dashed var(--line-2);border-radius:10px;padding:11px 14px;font-size:12px;color:var(--ink-2)}
  .pv-db .db-ico{width:30px;height:30px;border-radius:8px;background:var(--black);display:flex;align-items:center;justify-content:center;flex:0 0 30px}
  .pv-db .db-ico span{width:16px;height:16px;background:var(--gold-bright);-webkit-mask:url(/assets/icons/database.svg) center/contain no-repeat;mask:url(/assets/icons/database.svg) center/contain no-repeat}
  .pv-db b{color:var(--ink)}
  .pv-links{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
  @keyframes pvOn{
    0%{border-color:var(--line);box-shadow:none;background:var(--paper)}
    3%,30%{border-color:var(--gold-deep);box-shadow:0 0 0 5px rgba(154,116,0,.12);background:var(--white)}
    36%,100%{border-color:var(--line);box-shadow:none;background:var(--paper)}
  }
  @media(prefers-reduced-motion:reduce){.pv-app{animation:none}}
  @media(max-width:520px){
    .pv{padding:16px 14px}
    .pv-apps{gap:8px}
    .pv-app{padding:10px 8px}
    .pv-h .badge{display:none}
    .pv-card{font-size:9.5px}
  }

  /* proof strip under the hero */
  .proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);padding:0}
  .proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .proof-item{padding:26px 22px;border-left:1px solid var(--line)}
  .proof-item:first-child{border-left:0}
  .proof-item b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
  .proof-item span{font-size:13px;color:var(--ink-3)}
  @media(max-width:860px){.proof-grid{grid-template-columns:1fr 1fr}.proof-item:nth-child(3){border-left:0}.proof-item:nth-child(n+3){border-top:1px solid var(--line)}}
  @media(max-width:420px){.proof-item{padding:20px 14px}.proof-item b{font-size:21px}}

  /* ── product cards ──────────────────────────────────────────────────── */
  .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:980px){.prod-grid{grid-template-columns:1fr}}
  .prod-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
    transition:border-color .18s,box-shadow .18s,transform .18s}
  .prod-card:hover{border-color:var(--gold);box-shadow:0 26px 56px -30px rgba(20,20,20,.35);transform:translateY(-3px)}
  .prod-top{padding:26px 26px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
  .prod-top .pt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
  .prod-top .lockup{height:34px;width:auto}
  .prod-top .kind{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .prod-top h3{font-size:22px;font-weight:700;margin-top:6px}
  .prod-body{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}
  .prod-body p{font-size:14.5px;color:var(--ink-2)}
  .prod-body ul{list-style:none;margin:16px 0 22px;display:flex;flex-direction:column;gap:9px}
  .prod-body li{font-size:13.5px;color:var(--ink-2);padding-left:22px;position:relative}
  .prod-body li::before{content:"";position:absolute;left:2px;top:6px;width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
  .prod-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink)}
  .prod-link .arr{transition:transform .18s}
  .prod-card:hover .prod-link{color:var(--gold-deep)}
  .prod-card:hover .prod-link .arr{transform:translateX(4px)}

  /* ── platform flow: which app does what ─────────────────────────────── */
  .pf{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:10px}
  .pf::before{content:"";position:absolute;left:10%;right:10%;top:27px;height:2px;background:var(--line-2)}
  .pf-step{position:relative;text-align:center;padding:0 10px}
  .pf-ico{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;background:var(--white);border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;position:relative}
  .pf-ico span{width:24px;height:24px;background:var(--gold-deep);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
  .pf-step h4{font-size:15px;font-weight:700;margin-bottom:6px}
  .pf-step p{font-size:13px;color:var(--ink-3);max-width:24ch;margin:0 auto 10px}
  .app-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);
    background:var(--white);border-radius:999px;padding:3px 9px 3px 4px}
  .app-tag img{width:16px;height:16px;border-radius:4px}
  @media(max-width:900px){
    .pf{grid-template-columns:1fr;gap:22px}
    .pf::before{left:27px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
    .pf-step{display:grid;grid-template-columns:56px 1fr;gap:4px 18px;text-align:left;padding:0}
    .pf-ico{grid-row:1/4;margin:0}
    .pf-step p{margin:0 0 6px;max-width:none}
    .pf-step .app-tag{justify-self:start}
  }

  /* ── product page hero ──────────────────────────────────────────────── */
  .p-hero{padding:46px 0 70px}
  .p-hero .lockup{height:44px;width:auto;margin-bottom:26px}
  @media(max-width:600px){.p-hero .lockup{height:34px}}
  .p-hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}

  /* feature grid */
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
  .feat{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px}
  .dark .feat{background:transparent;border-color:rgba(255,255,255,.14)}
  .feat .f-ico{width:42px;height:42px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .dark .feat .f-ico{background:rgba(245,197,24,.12);border-color:transparent}
  .feat .f-ico span{width:22px;height:22px;background:var(--gold-deep);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
  .dark .feat .f-ico span{background:var(--gold-bright)}
  .feat h3{font-size:17px;font-weight:600;margin-bottom:7px}
  .feat p{font-size:14px;color:var(--ink-2)}
  .dark .feat p{color:rgba(255,255,255,.6)}

  /* numbered steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
  @media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}
  .step{border-top:2px solid var(--ink);padding-top:18px;counter-increment:st}
  .step::before{content:"0" counter(st);display:block;font-size:13px;font-weight:700;color:var(--gold-deep);letter-spacing:.06em;margin-bottom:10px}
  .step h4{font-size:16px;font-weight:600;margin-bottom:6px}
  .step p{font-size:14px;color:var(--ink-2)}

  /* split section */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  @media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
  .check-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:22px}
  .check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
  .check-list .tick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--gold-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}
  .dark .check-list li{color:rgba(255,255,255,.72)}

  /* ── tablet mockup (ShopFloor) ──────────────────────────────────────── */
  .tablet{background:#111;border-radius:28px;padding:14px;box-shadow:0 40px 80px -36px rgba(20,20,20,.55);max-width:560px;margin-inline:auto;width:100%}
  .tab-screen{background:#fbfaf7;border-radius:16px;overflow:hidden;aspect-ratio:16/10.4;display:flex;flex-direction:column;font-size:11px}
  .tab-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff}
  .tab-top img{width:20px;height:20px;border-radius:5px}
  .tab-top b{font-size:11.5px}
  .tab-top .tt-r{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:10px}
  .net{display:inline-flex;align-items:center;gap:5px;font-weight:700;letter-spacing:.06em;font-size:9px;padding:3px 7px;border-radius:999px}
  .net.on{background:rgba(22,163,74,.12);color:#15803d}
  .net.off{background:rgba(201,162,0,.16);color:var(--gold-deep)}
  .net::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .tab-body{flex:1;display:grid;grid-template-columns:1.25fr 1fr;gap:12px;padding:12px 14px}
  .tab-tabs{display:flex;gap:6px;margin-bottom:10px}
  .tab-tabs span{font-size:9px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:999px;color:var(--ink-3)}
  .tab-tabs span.on{background:var(--ink);color:#fff}
  .job{border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 10px;margin-bottom:8px}
  .job.run{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(154,116,0,.1)}
  .job .j-id{font-size:9.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
  .job .j-name{font-size:11.5px;font-weight:700;margin:2px 0}
  .job .j-meta{font-size:9.5px;color:var(--ink-3)}
  .job .j-st{float:right;font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--gold-deep)}
  .run-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;display:flex;flex-direction:column}
  .run-card .rc-l{font-size:8.5px;letter-spacing:.1em;font-weight:700;color:var(--ink-3)}
  .run-card .rc-v{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:2px 0 8px}
  .run-card .rc-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:10px}
  .run-card .rc-bar i{display:block;height:100%;width:62%;background:var(--gold-deep);animation:rcFill 6s ease-in-out infinite alternate}
  @keyframes rcFill{from{width:38%}to{width:78%}}
  @media(prefers-reduced-motion:reduce){.run-card .rc-bar i{animation:none}}
  .run-card .rc-btn{margin-top:auto;display:flex;gap:6px}
  .run-card .rc-btn span{flex:1;text-align:center;font-size:9px;font-weight:700;letter-spacing:.06em;padding:8px 4px;border-radius:8px;border:1px solid var(--line-2)}
  .run-card .rc-btn span.p{background:var(--ink);color:#fff;border-color:var(--ink)}
  .tab-note{font-size:9.5px;color:var(--ink-3);margin-top:8px;line-height:1.4}
  @media(max-width:520px){.tab-screen{font-size:9px}.tab-body{grid-template-columns:1fr}.run-card{display:none}.tablet{border-radius:20px;padding:9px}}

  /* PIN pad mini */
  .pin{color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 24px;max-width:300px;margin-inline:auto;text-align:center;box-shadow:0 24px 50px -30px rgba(20,20,20,.3)}
  .pin .p-t{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-3);margin-bottom:14px}
  .pin .dots4{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
  .pin .dots4 i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink-2)}
  .pin .dots4 i.f{background:var(--ink);border-color:var(--ink)}
  .pin .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .pin .keys span{height:48px;border-radius:50%;width:48px;margin:auto;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;background:var(--paper-2)}
  .pin .keys span.g{background:transparent;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}

  /* ── CRM order form mockup ──────────────────────────────────────────── */
  .order-mock{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(20,20,20,.35);max-width:520px;margin-inline:auto;width:100%}
  .om-letter{padding:18px 20px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:14px}
  .om-logo{width:40px;height:40px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--gold-deep)}
  .om-letter b{display:block;font-size:14px}
  .om-letter span{font-size:11px;color:var(--ink-3)}
  .om-body{padding:18px 20px 20px}
  .om-body .om-t{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
  .om-f{margin-bottom:10px}
  .om-f label{display:block;font-size:10.5px;font-weight:600;margin-bottom:4px;color:var(--ink-2)}
  .om-f div{border:1px solid var(--line-2);border-radius:7px;padding:8px 10px;font-size:12px;color:var(--ink);background:var(--paper)}
  .om-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .om-btn{margin-top:6px;background:var(--ink);color:#fff;border-radius:8px;text-align:center;padding:10px;font-size:12px;font-weight:600}
  .om-link{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:8px;padding:8px 10px;overflow:hidden;white-space:nowrap}
  .om-link code{font-family:inherit;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}

  /* waitlist band */
  .soon-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--ink-3)}

  /* ── closing CTA band ───────────────────────────────────────────────── */
  .band{background:var(--black);color:#fff;border-radius:20px;padding:48px;display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center}
  .band h2{font-size:clamp(24px,3vw,34px);font-weight:700;color:#fff}
  .band p{color:rgba(255,255,255,.62);margin-top:10px;font-size:16px;max-width:52ch}
  .band .btns{display:flex;gap:12px;flex-wrap:wrap}
  .band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
  .band .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
  @media(max-width:800px){.band{grid-template-columns:1fr;padding:34px 24px}}
  .band-sec{padding:0 0 80px}

  /* other products strip on product pages */
  .others{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:760px){.others{grid-template-columns:1fr}}
  .other{display:flex;align-items:center;gap:18px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--white);transition:border-color .16s,transform .16s}
  .other:hover{border-color:var(--gold);transform:translateY(-2px)}
  .other img{width:52px;height:52px;border-radius:12px;flex:0 0 52px}
  .other b{display:flex;align-items:center;gap:8px;font-size:16px}
  .other span{font-size:13.5px;color:var(--ink-3)}
  .other .arr{margin-left:auto;font-size:20px;color:var(--gold-deep)}
  .om-ico{width:13px;height:13px;flex:0 0 13px;background:var(--gold-deep);-webkit-mask:url(/assets/icons/location.svg) center/contain no-repeat;mask:url(/assets/icons/location.svg) center/contain no-repeat}