/* Reference-inspired editorial branding, on a consistently white canvas. */
:root {
  --font-display:"Anton",Impact,"Arial Narrow",sans-serif;
  --paper:#fff; --paper-2:#fff; --paper-3:#fff;
  --cream:#fff; --cream-lift:#fff;
  --ink:#071c3a; --body:#364457; --muted:#536174; --muted-2:#667286;
  --accent:#cf1734; --accent-lite:#db2945; --accent-deep:#a50f27;
  --accent-wash:rgba(207,23,52,.055); --accent-on:#fff;
  --line:rgba(7,28,58,.16); --line-soft:rgba(7,28,58,.09);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Keep every section white, including the original tinted bands. */
body,.hero,.tone,.tone-2,.marquee,footer,.cta,.strip {background:#fff}
body::after,.hero::before,.hero::after,.stage-glow,.cta::before {display:none}
.strip {color:var(--muted);border-bottom:1px solid var(--line-soft)}
.strip a {color:var(--navy)}
.strip a:hover,.strip svg {color:var(--accent)}
.strip-social a,.langswitch {background:#fff;border-color:var(--line)}
.strip-social a svg {color:inherit}
.strip-social a:hover {background:var(--navy);color:#fff;border-color:var(--navy)}
.langswitch button {color:var(--muted)}
.langswitch button:hover {color:var(--accent)}
.langswitch button[aria-pressed="true"] {background:var(--navy);color:#fff}
.masthead {border-bottom:1px solid var(--line-soft)}
.masthead.stuck {box-shadow:0 12px 30px -24px rgba(7,28,58,.3)}
.mainnav a::after {background:var(--accent)}
.mainnav a:hover,.mainnav .pos-menu summary:hover {color:var(--accent)}
.display,.tile h3,.product-body h3,.contact-card h3,.pcard h3,
.vcard-body h3,.pos-system-list h3,.ref-form h3 {
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:1.08;text-wrap:balance;
}
.hero {padding-block:clamp(48px,6vw,94px) clamp(60px,7vw,112px)}
.hero h1 {font-size:clamp(46px,6.2vw,82px);line-height:1.02;max-width:13ch;letter-spacing:.005em}
.gold-text {background:none;color:var(--accent);-webkit-text-fill-color:currentColor}
#pos {--accent:#cf1734;--accent-lite:#db2945;--accent-deep:#a50f27;--accent-on:#fff;--accent-wash:rgba(207,23,52,.055);--line:rgba(7,28,58,.16)}
.kicker {color:var(--accent);font-size:11px;letter-spacing:.2em}
.kicker::before {height:2px;width:28px;background:var(--accent)}
.lede {line-height:1.75;text-wrap:pretty}
.hero .lede {font-size:clamp(16px,1.4vw,18px);max-width:49ch}
.section-head {max-width:760px}
.section-head h2 {font-size:clamp(36px,4.5vw,57px);line-height:1.08}
.btn {font-weight:800;letter-spacing:.025em;min-height:46px}
.btn-gold,.masthead .btn-gold {background:var(--accent);color:#fff;box-shadow:0 12px 25px -16px rgba(207,23,52,.5)}
.btn-gold:hover,.masthead .btn-gold:hover {background:var(--accent-deep);box-shadow:0 18px 32px -18px rgba(207,23,52,.5)}
.btn svg {transition:transform .35s var(--ease)}
.btn:hover svg {transform:translateX(3px)}
.badge {box-shadow:none;border-radius:6px;font-size:11px;letter-spacing:.06em}
.assurances {border-top:2px solid var(--navy)}
.assurance {font-size:12px}
.assurance svg {color:var(--accent)}
.tile,.product,.pcard,.trust-card,.pos-system-grid article {transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
@media(hover:hover) {
  .tile:hover,.product:hover,.pcard:hover,.trust-card:hover,.pos-system-grid article:hover {
    transform:translateY(-6px);border-color:rgba(207,23,52,.35);box-shadow:0 22px 44px -28px rgba(7,28,58,.3);
  }
}
.step .idx {font-family:var(--font-display);font-weight:400;color:var(--accent)}
.step h3 {color:var(--navy);font-size:18px}
.cta {border-top:3px solid var(--accent)}
footer {border-top:2px solid var(--navy)}
/* Words keep their original text and nested accent treatment. */
.brand-word {display:inline-block;perspective:900px;vertical-align:baseline}
.brand-word-inner {display:inline-block;transform-origin:50% 100%}
.brand-heading.is-animated .brand-word-inner {
  animation:brand-rise 1.1s var(--ease) both;animation-delay:var(--word-delay,0ms);
}
@keyframes brand-rise {
  from {opacity:0;transform:translateY(.65em) rotateX(-65deg)}
  to {opacity:1;transform:translateY(0) rotateX(0)}
}
@media(max-width:1000px) {
  .hero h1 {max-width:18ch;font-size:clamp(46px,8vw,76px)}
}
@media(max-width:540px) {
  .hero h1 {font-size:clamp(42px,10.7vw,58px)}
  .hero-actions {gap:10px}
  .hero-actions .btn {padding-inline:19px;font-size:13px}
  .assurances {gap:14px}
  .section-head h2 {font-size:36px}
}
@media(prefers-reduced-motion:reduce) {
  .brand-heading.is-animated .brand-word-inner {animation:none}
  .tile:hover,.product:hover,.pcard:hover,.trust-card:hover,.pos-system-grid article:hover {transform:none}
}

/* Original photography and metallic identity, framed on the white canvas. */
.masthead,.masthead.stuck::before {background:rgba(255,255,255,.97)}
.brand {flex:none;border-radius:8px}
.brand img {width:234px;height:54px;max-width:100%;object-fit:contain}
.foot-brand img {width:260px;max-width:100%;height:auto;border-radius:8px}
.product {border-radius:14px;box-shadow:none}
.product-art {height:276px;padding:30px 24px;background:#fff}
.product-art img {max-height:216px;filter:none}
.product:first-child .product-art img {width:100%;max-width:420px}
.product-body {border-top:3px solid var(--navy);padding:24px}
.product-tags .tag {border-radius:5px}
.pcard-logo {height:100px;padding:20px;border-radius:10px}
.pcard-logo img {max-height:60px;max-width:180px;width:auto;object-fit:contain}
.retail-showcase {margin:0 0 32px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.retail-showcase img {width:100%;height:auto;display:block}
#walkthroughs {background:#fff}
#pos .section-head {border-left:3px solid var(--accent);padding-left:24px}
@media(min-width:1061px) {
  .products {grid-template-columns:1.35fr 1fr 1fr}
}
@media(max-width:620px) {
  .brand img {width:190px;height:auto}
  .products {grid-template-columns:1fr}
  .product-art {height:252px}
  .product-art img {max-height:196px}
  #pos .section-head {padding-left:16px}
  .retail-showcase {border-radius:10px;margin-bottom:22px}
}

/* Text-only information stays within reach without extending the page. */
.info-section.pad,.info-section.pad-sm {padding-block:12px}
.info-fold {border:1px solid var(--line);border-radius:12px;background:#fff}
.info-fold > summary {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:16px 22px;cursor:pointer;list-style:none;color:var(--navy);font-size:17px;font-weight:800}
.info-fold > summary::-webkit-details-marker {display:none}
.info-fold > summary::after {content:'+';flex:none;color:var(--accent);font-size:26px;font-weight:400;line-height:1}
.info-fold[open] > summary::after {content:'−'}
.info-fold > summary:hover {color:var(--accent)}
.info-fold > summary:focus-visible {outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
.info-fold[open] > summary {border-bottom:1px solid var(--line-soft)}
.info-body {padding:24px 22px}
.info-fold.pos-system-list {padding:0;margin-top:24px}
.info-fold .pos-system-grid {margin-top:0}
@media(max-width:760px) {
  .pad {padding-block:28px}
  .pad-sm {padding-block:24px}
  .hero {padding-block:22px 28px}
  .hero-grid {gap:20px}
  .section-head {margin-bottom:20px!important}
  .section-head h2 {font-size:30px;margin-bottom:12px}
  .lede {line-height:1.6}
  .info-section.pad,.info-section.pad-sm {padding-block:6px}
  .info-fold > summary {min-height:52px;padding:12px 16px;font-size:16px}
  .info-body {padding:20px 16px}
  .info-body.split {display:grid;gap:22px}
  .product-art {height:180px;padding:16px}
  .product-art img {max-height:148px}
  .product-body {padding:16px}
  .products {gap:12px}
  .cta {padding:24px 18px;gap:20px}
  .contact-grid {gap:18px}
  footer {padding-top:28px}
}

/* A vertical social rail accompanies the opening video. */
.hero-social {
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;margin:0;align-self:center;
}
.hero-social a {
  display:grid;place-items:center;flex:none;width:64px;height:64px;
  border:1px solid rgba(207,23,52,.18);border-radius:18px;
  color:rgba(165,15,39,.82);background:rgba(207,23,52,.055);
  transition:color .25s ease,background .25s ease,transform .25s ease;
}
.hero-social svg {width:32px;height:32px}
.hero-social a:hover {
  color:var(--accent);background:rgba(207,23,52,.12);transform:translateY(-3px);
}
.hero-social a:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:540px) {
  .hero-social {gap:12px;margin:0}
  .hero-social a {width:48px;height:48px;border-radius:14px}
  .hero-social svg {width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-social a {transition:none}
  .hero-social a:hover {transform:none}
}

/* Readable supporting type throughout the site. */
.kicker,.badge,.tag,.device-read .tag,.chip-card .lbl,.ticket-head span,
.ticket-total span,.cline span,.field label,.ref-split,.ref-code span,
.ref-note b,footer h4,.pcard-tag,.rtv-count {
  font-size:13px;letter-spacing:.08em;line-height:1.55;
}
.assurance,.settle b,.settle small,.ticket-foot,.formnote,.err,.legal,
.chat-head small,.chat-legal,.chat-links,.chat-links h4,.chip,.vcard-watch,
.demo-note,.demo-head small,.adminpop p,.adminpop .err {
  font-size:14px;line-height:1.65;
}
.formnote,.legal,.chat-legal,.field label,.cline span,.ref-note p {color:var(--muted)}
.tile p,.product-body p,.step p,.trust-card p,.pcard p,.vcard-body p,
.pos-system-grid p,.ref-steps p,.ref-note p,.svc-foot p,.contact-card > p,
.ref-formsub {font-size:15px;line-height:1.7}
.field input,.field select,.field textarea,.chat-form input,.chat-form textarea {font-size:16px}
.btn-sm,.langswitch button {font-size:14px}
.langswitch button {min-height:38px;padding-inline:12px}
:where(a,button,input,select,textarea):focus-visible {outline:3px solid #cf1734;outline-offset:4px}
.hero .stage {display:grid;grid-template-columns:minmax(0,266px) 64px;gap:24px;justify-content:center;min-width:0}
.hero .device {grid-column:1;width:100%;animation:none}
.hero .hero-social {grid-column:2}
.hero-social a {box-shadow:0 6px 18px -12px rgba(165,15,39,.3)}
.hero-social a:active {transform:scale(.96)}

/* Compact illustrated introductions remain visible above the full details. */
.concept-preview {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-block:30px 24px}
.concept-copy {min-width:0}
.concept-copy .kicker {margin-bottom:12px}
.concept-copy h2 {font-size:clamp(30px,3.5vw,46px);margin:0 0 14px;max-width:20ch}
.concept-copy p {font-size:16px;line-height:1.7;color:var(--body);max-width:49ch;margin:0 0 14px}
.concept-link {display:inline-flex;align-items:center;gap:12px;color:#a50f27;font-size:15px;font-weight:800;min-height:44px;text-underline-offset:5px}
.concept-link:hover {text-decoration:underline}
.concept-link svg {width:20px;height:20px;flex:none}
.concept-art {margin:0;min-width:0}
.concept-art img {display:block;width:100%;height:auto;border:1px solid var(--line-soft);border-radius:20px}
.concept-art figcaption {font-size:14px;line-height:1.6;color:var(--body);text-align:center;margin-top:10px;text-wrap:balance}
#marketing .info-fold,#referrals .info-fold {border-top:2px solid #cf1734}
#marketing-details,#referrals-details {scroll-margin-top:120px}
@media(min-width:1001px) {
  .svc-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid .tile {display:grid;grid-template-columns:54px 1fr;gap:0 18px;align-content:start;padding:26px}
  .svc-grid .iconwell {grid-row:span 2;width:54px;height:54px;margin:0}
  .svc-grid .tile h3 {font-size:23px;margin-bottom:10px}
}
@media(max-width:760px) {
  .hero .stage {grid-template-columns:minmax(0,236px) 56px;gap:16px}
  .hero-social a {width:56px;height:56px}
  .concept-preview {gap:18px;padding-block:20px 16px;grid-template-columns:1fr}
  .concept-copy h2 {font-size:32px;max-width:24ch;margin-bottom:10px}
  .concept-copy p {margin-bottom:8px}
  .concept-art {max-width:520px;width:100%;justify-self:center}
  .concept-art img {max-height:210px;object-fit:contain;background:#faf9fa;border-radius:14px}
  .concept-art figcaption {font-size:13px;margin-top:8px}
  .ref-headline {font-size:23px;gap:12px;padding:18px;margin-bottom:22px}
  .ref-headline i {width:16px}
}
@media(max-width:540px) {
  .hero .stage {grid-template-columns:minmax(0,214px) 48px;gap:14px}
  .hero .device {padding:12px;border-radius:24px}
  .hero .device-screen {width:100%}
  .hero-social a {width:48px;height:48px}
  .hero-social svg {width:27px;height:27px}
  .hero-actions .btn {font-size:14px}
}