/* The landing page's own additions, on top of site.css.
 *
 * Only what this page alone has lives here — the hero, the drawn tablet, the ticker, the hardware
 * kit, the sample catalogue and the closing band. Tokens, chrome, typography, buttons, bands,
 * tables, the footer and the motion rules are all in site.css, which every page loads. Two copies
 * of a token set is how a site stops looking like one site.
 *
 * Load order matters: site.css first, then this.
 */
/* ---- hero ------------------------------------------------------------------------------------ */
.hero{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(36px,5vw,64px);overflow:hidden}
/* The mark, blown up and bled off the right edge. It is the loudest thing on the page and carries no
   information, which is the point — it is the sign the shop is looking for. */
.hero .watermark{position:absolute;top:-14%;right:-16%;width:min(760px,72vw);opacity:.055;
                 pointer-events:none;transform:rotate(-8deg)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);
            align-items:center;position:relative}
@media (max-width:940px){.hero .grid{grid-template-columns:1fr}}
.hero h1{margin:18px 0 0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{margin-top:20px}
.hero .actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
.hero .facts{display:flex;flex-wrap:wrap;gap:0;margin-top:32px;border-top:1px solid var(--edge)}
.hero .facts div{flex:1 1 130px;padding:16px 18px 0 0}
.hero .facts b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--gold);
               letter-spacing:-.03em}
.hero .facts span{display:block;margin-top:3px;font-size:.79rem;color:var(--paper-faint);line-height:1.35}

/* The tablet. A drawn bezel round the app's own screenshot rather than a photograph: the screen is
   the real thing, and a rendered device never disagrees with the build the way a photo of last
   year's hardware does. */
.device{position:relative;perspective:1600px}
.device .body{position:relative;padding:13px;border-radius:20px;background:linear-gradient(150deg,#26262B,#0E0E10 60%);
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px #000;
  transform:rotateY(-7deg) rotateX(3deg) rotate(-.6deg);transform-style:preserve-3d}
.device .screen{position:relative;border-radius:9px;overflow:hidden;background:#000;
                box-shadow:0 0 0 1px rgba(0,0,0,.9)}
.device .screen img{width:100%}
/* Glare, drawn across the glass. Kept faint — it should read as glass, not as a swipe of white. */
.device .screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.13) 0 18%,transparent 42%)}
.device .cam{position:absolute;left:50%;top:5.5px;width:5px;height:5px;border-radius:50%;
             background:#000;box-shadow:0 0 0 1px #303036;transform:translateX(-50%)}
/* Two chips floating off the device: the two things the POS does that the screenshot cannot show. */
.chip{position:absolute;z-index:2;padding:12px 15px;background:var(--ink-2);border:1px solid var(--edge);
      box-shadow:0 20px 44px -18px rgba(0,0,0,.95);font-size:.78rem;line-height:1.35}
.chip b{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
        margin-bottom:5px}
.chip.approved{left:-4%;bottom:11%}
.chip.approved b{color:var(--gold)}
.chip.approved .amt{font-family:var(--mono);font-size:1.18rem;font-weight:700;letter-spacing:-.02em}
.chip.offline{right:-3%;top:8%}
.chip.offline b{color:var(--red)}
.chip .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);
           margin-right:6px;vertical-align:middle;animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:620px){.chip.approved{left:0;bottom:-4%}.chip.offline{right:0;top:-4%}}

/* ---- ticker ---------------------------------------------------------------------------------- */
.ticker{border-block:1px solid var(--edge);background:var(--ink-2);overflow:hidden;padding:13px 0}
.ticker .run{display:flex;gap:34px;width:max-content;animation:slide 34s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:34px;font-family:var(--mono);font-size:.74rem;
             font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);
             white-space:nowrap}
.ticker span::after{content:"◆";color:var(--gold);font-size:.6rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- hardware -------------------------------------------------------------------------------- */
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:0;margin-top:clamp(34px,5vw,58px);
     border:1px solid var(--edge)}
.kit article{padding:28px 24px 26px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
             position:relative;transition:background .2s}
.kit article:hover{background:var(--ink-3)}
.kit article::before{content:attr(data-n);position:absolute;top:14px;right:16px;font-family:var(--mono);
  font-size:.66rem;color:var(--paper-faint);letter-spacing:.1em}
.kit svg{width:100%;height:82px;margin-bottom:20px;stroke:var(--gold);fill:none;stroke-width:1.5;
         stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke .2s,transform .3s}
.kit article:hover svg{stroke:#fff;transform:translateY(-3px)}
.kit h3{font-size:1rem}
.kit p{margin-top:8px;font-size:.86rem;color:var(--paper-dim);line-height:1.5}
.kit .opt{display:inline-block;margin-top:11px;padding:2px 8px;border:1px solid var(--edge);
          font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
          color:var(--paper-faint)}

/* ---- sample catalogue ------------------------------------------------------------------------ */
.catalogue{margin-top:clamp(30px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
           gap:10px}
.tile{padding:16px 14px 14px;background:var(--ink-3);border:1px solid var(--edge);text-align:left;
      transition:border-color .18s,transform .18s}
.tile:hover{border-color:var(--gold);transform:translateY(-3px)}
.tile svg{width:38px;height:38px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;
          stroke-linejoin:round;margin-bottom:12px}
.tile b{display:block;font-size:.9rem;font-weight:600}
.tile span{display:block;margin-top:3px;font-family:var(--mono);font-size:.86rem;color:var(--gold)}
.tile.tax span::after{content:" +T";color:var(--paper-faint);font-size:.72em}

/* ---- features -------------------------------------------------------------------------------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0;
       margin-top:clamp(34px,5vw,58px);border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.feats article{padding:30px 26px 32px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
               position:relative;overflow:hidden}
.feats article::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
                      transition:width .35s cubic-bezier(.2,.8,.2,1)}
.feats article:hover::after{width:100%}

/* ---- the counter's own numerals ---------------------------------------------------------------
   Everything else about these boxes is the shared .numbered component in site.css. What is not
   shared is the size: this grid is minmax(212px) against the others' 320px, so the same numeral
   crowds the heading onto two lines. Sized to its own column rather than matched by number.

   The drawing is a wider grid too — 120x76 against the 24x24 the drawn icons use — so it is sized
   by that ratio and sits a little larger; a terminal or a drawer has to stay recognisable at this
   weight. It is a ::before and an inline <svg> rather than the component's .n and .mark spans,
   because these boxes already had both and moving them is a smaller change than restating them. */
.kit article{overflow:hidden;isolation:isolate}

.kit article::before{
  top:8px;right:16px;
  font-size:clamp(2.3rem,3.4vw,3.2rem);font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--gold);opacity:.1;pointer-events:none;user-select:none;z-index:0}
@supports (-webkit-text-stroke:1px currentColor){
  .kit article::before{color:transparent;-webkit-text-stroke:1.2px var(--gold);opacity:.2}
}

.kit svg{
  position:absolute;right:-26px;bottom:-20px;width:196px;height:124px;margin:0;
  stroke:var(--gold);opacity:.09;pointer-events:none;z-index:0;transform:none}

.kit h3,.kit p,.kit .opt{position:relative;z-index:1}
.kit h3{padding-right:54px}

.kit article::before,.kit svg{transition:opacity .35s cubic-bezier(.2,.8,.2,1)}
/* The hover no longer lifts the drawing — it is behind the words now, and a moving background is
   a distraction where a moving illustration was a flourish. */
.kit article:hover svg{stroke:var(--gold);transform:none;opacity:.17}
.kit article:hover::before{opacity:.32}
@media (prefers-reduced-motion:reduce){
  .kit article::before,.kit svg{transition:none}
}
.feats p{margin-top:10px;font-size:.9rem;color:var(--paper-dim);line-height:1.58}

/* ---- screens gallery ------------------------------------------------------------------------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:clamp(16px,2.4vw,28px);
       margin-top:clamp(34px,5vw,58px)}
.shots figure{margin:0}
.shots img{border:1px solid var(--edge);transition:border-color .2s,transform .3s}
.shots figure:hover img{border-color:var(--gold);transform:translateY(-4px)}
.shots figcaption{margin-top:11px;font-size:.83rem;color:var(--paper-faint);line-height:1.45}
.shots figcaption b{display:block;color:var(--paper);font-weight:600;font-size:.9rem;margin-bottom:2px}
.shots figure:nth-child(even){margin-top:clamp(0px,3vw,38px)}
@media (max-width:600px){.shots figure:nth-child(even){margin-top:0}}

/* ---- closing --------------------------------------------------------------------------------- */
.close{padding:clamp(72px,10vw,140px) 0;text-align:center;position:relative;overflow:hidden}
/* Hazard stripes, the sign the whole page is built from, used once at the end. */
.close::before{content:"";position:absolute;inset:0 0 auto;height:6px;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 16px,#0A0A0B 16px 32px)}
.close h2{max-width:16ch;margin:0 auto}
.close .lede{margin:22px auto 0;text-align:center}
.close .actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:34px}


/* ---- pricing ---------------------------------------------------------------------------------- */
/* Four plans and a comparison table under them, which is the shape a shop already knows from every
   other POS it has priced. Only one plan can be bought today; the three that cannot say so rather
   than being hidden, because a shop wants to see the ladder before it steps on the first rung. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--edge);
            background:var(--ink-2);font-size:.82rem;color:var(--paper-dim)}
.chips span::before{content:"";width:6px;height:6px;background:var(--gold);flex:0 0 auto}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0;
       margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.plan{display:flex;flex-direction:column;padding:30px 24px 30px;border-right:1px solid var(--edge);
      border-bottom:1px solid var(--edge);position:relative}
.plan.lead{background:var(--ink-2)}
.plan.lead::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold)}
.plan h3{font-family:var(--display);font-size:clamp(1.5rem,1.2rem + .9vw,1.95rem);font-weight:800;
         letter-spacing:-.035em;text-transform:uppercase;color:var(--gold);line-height:1}
.plan h3::after{content:"";display:block;width:26px;height:2px;background:var(--gold);
                margin-top:12px;opacity:.55}
.plan .from{display:block;margin:16px 0 0;font-size:.78rem;color:var(--paper-faint)}
.plan .price{margin:2px 0 0;font-family:var(--display);font-weight:800;letter-spacing:-.04em;
             font-size:2.4rem;line-height:1;color:var(--paper)}
.plan .price small{font-family:var(--sans);font-size:.84rem;font-weight:500;letter-spacing:0;
                   color:var(--paper-dim);margin-left:6px}
.plan .price.quiet{font-size:1.45rem;color:var(--paper-faint)}
.plan .sep{margin:10px 0 0;font-size:.79rem;color:var(--gold);letter-spacing:.01em}
.plan .go{margin:20px 0 0}
.plan .go .btn{width:100%;justify-content:center;padding:13px 18px;font-size:.92rem}
.plan .who{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--edge);
           font-size:.88rem;color:var(--paper-dim);line-height:1.55}
.plan .hw{margin:14px 0 0;font-size:.86rem;color:var(--paper);font-weight:600}
.plan ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.plan li{position:relative;padding-left:20px;font-size:.86rem;color:var(--paper-dim);line-height:1.5}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:var(--gold)}
.plan .all{margin-top:auto;padding-top:20px}
.plan .all a{font-size:.84rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--edge)}

/* The comparison. Collapsed behind a control because it is long and most readers want the four
   cards; opened, it is what somebody comparing two quotes actually reads. */
.compare-toggle{margin-top:clamp(26px,3vw,40px)}
.compare{margin-top:24px;overflow-x:auto}
.compare table{min-width:760px;border-collapse:collapse;width:100%}
.compare th,.compare td{padding:13px 14px;border-bottom:1px solid var(--edge);text-align:left;
                        vertical-align:top;font-size:.87rem}
.compare thead th{position:sticky;top:66px;background:var(--ink);z-index:2;
                  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
                  color:var(--gold);border-bottom:1px solid var(--edge)}
.compare thead th:first-child{color:var(--paper-faint)}
.compare tbody th{font-weight:500;color:var(--paper-dim);width:34%}
.compare td{text-align:center;color:var(--paper);width:16.5%}
.compare tr.group th{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
                     color:var(--paper-faint);padding-top:26px;font-weight:700}
.compare tr.group td{border-bottom:1px solid var(--edge)}
.compare .yes{color:var(--gold);font-size:1rem}
.compare .no{color:var(--paper-faint)}
.compare .soon-mark{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--paper-faint)}
.compare .val{font-family:var(--mono);font-size:.82rem}
@media (max-width:640px){.compare thead th{position:static}}

/* Every figure the shop has still to set. Muted rather than alarming — this is a page a customer
   reads — but monospace and underlined so it cannot be mistaken for a price. */
.tbd{font-family:var(--mono);color:var(--gold);border-bottom:1px dashed var(--gold-dim);padding-bottom:1px}