/* =====================================================================
   PFX pages, dressed in the homepage's aesthetic
   ---------------------------------------------------------------------
   Loaded after each page's own <style>, so it restates their selectors
   with the homepage's tokens: the campus held behind a dark scrim, ruled
   plates with square corners and hairline rules, small spaced capitals
   for eyebrows, light display type, and the same two buttons as the hero.
   ===================================================================== */
:root{
  --k-ink:#05070a;
  --k-plate:rgba(9,12,16,.74);
  --k-plate-solid:#0b0f13;
  --k-bone:#dfe7e0;
  --k-bone-dim:#aab4ad;
  --k-text:#909b95;
  --k-muted:#78837c;
  --k-line:rgba(223,231,224,.13);
  --k-line-soft:rgba(223,231,224,.07);
  --k-verm:#c00022;
  --k-talk:#c00022;
  --k-talk-hi:#a80f22;
  --k-ease:cubic-bezier(.16,1,.3,1);

  /* the pages' own tokens, remapped */
  --red:#c00022; --red-dark:#a80f22;
  --ink:var(--k-bone); --bg:var(--k-ink); --bg-alt:var(--k-plate-solid);
  --gray:var(--k-text); --line:var(--k-line); --panel:var(--k-plate);
  --panel-solid:var(--k-plate); --section-bg:transparent; --input-bg:transparent;
  --green:var(--k-bone); --red-border:var(--k-line); --hint:var(--k-muted); --muted:var(--k-text);
}

/* ---------------------------------------------------------- ground */
html body{
  font-family:'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background:var(--k-ink); color:var(--k-bone); font-weight:300;
  -webkit-font-smoothing:antialiased;
}
/* the campus, as the chapters see it: lit sky at the top of the page, the
   scrim closing in below it */
html body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url(assets/campus-backdrop.webp) center 30% / cover no-repeat;
}
html body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,7,10,.58) 0%, rgba(5,7,10,.74) 38%, rgba(5,7,10,.9) 72%, rgba(5,7,10,.95) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(210,223,230,.08), transparent 60%);
}
/* the kiosk spec pages stand in front of the landing page's own campus: the
   university at night, captured from the hero (kiosk left out), under a
   lighter scrim so the lit windows read the way they do on the landing */
html body.kiosk-spec::before{
  background:#05070a url(assets/campus-backdrop-night.webp) center 30% / cover no-repeat;
}
html body.kiosk-spec::after{
  background:linear-gradient(180deg, rgba(5,7,10,.18) 0%, rgba(5,7,10,.42) 38%, rgba(5,7,10,.8) 72%, rgba(5,7,10,.92) 100%);
}
/* the three kiosk pages: no campus behind the product, just the night */
html body.kiosk-spec.no-campus::before{ background:#05070a; }
html body.kiosk-spec.no-campus::after{ background:radial-gradient(ellipse at 50% 0%, rgba(210,223,230,.05), transparent 60%); }
/* plain pages (the privacy policy): no campus behind the text, just the ink */
html body.plain-bg::before, html body.plain-bg::after{ display:none; }
/* every page but the landing: a plain black ground — no campus, no glow */
html body{ background:#000 !important; }
html body::before, html body::after{ display:none !important; }
::selection{ background:var(--k-verm); color:#fff; }

/* -------------------------------------------------------- type */
html body h1, html body h2, html body h3{ color:var(--k-bone); letter-spacing:-.01em; }
.k-hero h1, .page-head h1, .calc-inner h1, .admin-wrap h1, .login-card h1, .gate-head h1,
.tm-head h2{
  font-weight:500 !important; letter-spacing:-.02em !important; line-height:1.04; color:var(--k-bone) !important;
}
.k-hero h1, .page-head h1, .calc-inner h1{ font-size:clamp(38px,4.6vw,68px) !important; }
.build-section h2, .deploy-section h2{ font-size:clamp(28px,3.2vw,46px) !important; font-weight:500 !important; letter-spacing:-.02em; }
.k-hero .desc, .page-head p, .calc-inner .sub, .build-section .sub, .deploy-section .sub, .login-card .sub,
.gate-head .sub, .tm-head p{ color:var(--k-text) !important; font-weight:300; }

/* eyebrows: the homepage's "YOUR BRAND. YOUR BUSINESS" — spaced capitals, no rule,
   set like the homepage's "Explore Specs" link at half its strength */
.eyebrow, .cert-eyebrow, .features-eyebrow, .rl, .sec-div, .serp-label, .form-section-title,
.gate-head .eyebrow, .login-card .eyebrow, .form-pane-tab{
  display:flex !important; align-items:center; gap:16px;
  font-size:11px !important; font-weight:500 !important; letter-spacing:.2em !important;
  text-transform:uppercase; color:rgba(223,231,224,.5) !important; border:0 !important; padding-bottom:0 !important;
}
.cert-eyebrow, .features-eyebrow{ justify-content:center; }
.form-pane-tab{ color:var(--k-verm) !important; }

/* ------------------------------------------------------ plates */
.build-card, .feature-pill, .security-bar-inner, .blog-card, .calc-box, .kpi, .login-card,
.preview-pane, .form-pane, .serp-preview, .drafts-box, .gate-modal, .tm-card, .k-hero-image,
.deploy-gallery .g-item, .more-info-panel, .toc{
  background:var(--k-plate) !important; border:1px solid var(--k-line) !important; border-radius:0 !important;
  box-shadow:none !important; backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05);
}
/* ruled grids: cells share their rules, like the Chapter I plates */
.build-cards, .blog-grid, .kpis{
  gap:0 !important; border-top:1px solid var(--k-line); border-left:1px solid var(--k-line);
}
.build-card, .blog-card, .kpi{
  position:relative; border:0 !important; border-right:1px solid var(--k-line) !important; border-bottom:1px solid var(--k-line) !important;
  transition:padding .5s var(--k-ease), background .4s;
}
.build-card::after, .blog-card::after, .feature-pill::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--k-verm);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--k-ease);
}
.build-card:hover, .blog-card:hover{ padding-left:34px !important; background:rgba(14,18,23,.84) !important; }
.build-card:hover::after, .blog-card:hover::after, .feature-pill:hover::after{ transform:scaleX(1); }
.build-card{ padding:26px 28px !important; min-height:150px; }
.build-card h3, .blog-card h3{ font-weight:400 !important; font-size:clamp(17px,1.5vw,22px) !important; color:var(--k-bone) !important; }
.build-card p, .blog-card p{ color:var(--k-text) !important; font-size:13px !important; }
.features-grid{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:0 !important; padding:1px 0 0 1px; }
.feature-pill{
  position:relative; flex:0 0 calc(20% + 1px); margin:-1px 0 0 -1px; display:flex !important; align-items:center; justify-content:center;
  text-align:center; min-height:84px; font-weight:400 !important; color:var(--k-bone-dim) !important;
  border:1px solid var(--k-line) !important;
}
@media (max-width:900px){ .feature-pill{ flex-basis:calc(50% + 1px); } }
.security-bar-inner{ color:var(--k-text) !important; }
.k-hero-image{ padding:0; }
.blog-date{ font-size:11px !important; letter-spacing:.16em; text-transform:uppercase; color:var(--k-muted) !important; }
.blog-card:target{ background:rgba(20,24,30,.9) !important; }
.blog-card{ padding-top:0 !important; overflow:hidden; }
.blog-thumb{ position:relative; margin:0 -28px 22px; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--k-line); }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85) brightness(.88);
  transition:transform 1.1s var(--k-ease), filter .6s; }
.blog-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(5,7,10,.45)); }
.blog-card:hover .blog-thumb img{ transform:scale(1.04); filter:saturate(1) brightness(1); }
.blog-card:hover .blog-thumb{ margin-left:-34px; }

/* pills and tags: hairline capsules */
.k-pill, .deploy-tag, .blog-tags .tag, .category-tag, .status-pill, .tm-badge{
  border:1px solid var(--k-line) !important; border-radius:999px !important; background:rgba(9,12,16,.45) !important;
  color:var(--k-bone-dim) !important; font-weight:400 !important;
}
.k-pill svg{ color:#fff !important; }
.cert-bar-inner{ border:1px solid var(--k-line) !important; border-radius:0 !important; background:var(--k-plate) !important; }
.cert-bar-inner img{ filter:grayscale(1) brightness(1.6) contrast(.9); opacity:.85; }

/* ------------------------------------------------------ buttons */
.btn-primary, .gate-form .btn-primary, form.inquiry-form .btn-primary, .tm-submit, nav.links a.talk{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--k-talk) !important; color:#fff !important; border:0 !important;
  padding:16px 34px; border-radius:14px !important; font-weight:700 !important; font-size:15px;
  letter-spacing:-.01em; box-shadow:0 10px 30px rgba(192,0,34,.25);
  transition:background .3s, transform .45s var(--k-ease);
}
.btn-primary:hover, .tm-submit:hover{ background:var(--k-talk-hi) !important; transform:translate3d(0,-2px,0); }
.btn-primary:disabled{ opacity:.45; transform:none; }
.btn-outline, .lock-btn{
  border:1px solid var(--k-line) !important; border-radius:14px !important; background:rgba(255,255,255,.06) !important; color:var(--k-bone) !important;
}
.lock-btn img{ filter:invert(1) brightness(1.4); }

/* ------------------------------------------------------ inputs */
.field input, .field textarea, .field select, .form-group input, .form-group select, .form-group textarea,
.gate-form input[type="text"], .gate-form input[type="email"], .gate-form input[type="tel"], .gate-form select,
.tm-group input, .tm-group select, .tm-group textarea, .toolbar-select, .pf{
  background:rgba(5,7,10,.5) !important; color:var(--k-bone) !important;
  border:1px solid var(--k-line) !important; border-radius:0 !important; font-weight:300;
}
.pf .px{ background:rgba(223,231,224,.05) !important; border-right:1px solid var(--k-line) !important; color:var(--k-muted) !important; }
.pf input{ color:var(--k-bone) !important; background:transparent !important; }
.field input:focus, .field textarea:focus, .field select:focus, .form-group input:focus, .form-group select:focus,
.form-group textarea:focus, .gate-form input:focus, .gate-form select:focus, .tm-group input:focus,
.tm-group select:focus, .tm-group textarea:focus, .toolbar-select:focus{
  outline:0 !important; border-color:var(--k-bone-dim) !important;
}
select option{ background:#0b0f13; color:var(--k-bone); }
.field label, .form-group label, .ig label, .gate-form .form-group label, .tm-group label{
  font-size:10px !important; font-weight:500 !important; letter-spacing:.2em; text-transform:uppercase; color:var(--k-muted) !important;
}
.field .hint, .hint-t, .form-group .hint{ color:var(--k-muted) !important; font-style:normal !important; }
::placeholder{ color:rgba(170,180,173,.45) !important; }

/* ------------------------------------------------------ ROI calculator */
.calc-header{ background:transparent !important; border-bottom:1px solid var(--k-line) !important; }
.calc-header h3{ font-weight:500 !important; letter-spacing:-.01em; color:var(--k-bone) !important; }
.calc-header p{ color:var(--k-text) !important; }
.calc-left{ border-right:1px solid var(--k-line) !important; }
.calc-right{ background:rgba(5,7,10,.35) !important; }
.mbtn{ border-radius:0 !important; background:transparent !important; border:1px solid var(--k-line) !important; color:var(--k-muted) !important; }
.mbtn:hover{ color:var(--k-bone) !important; border-color:var(--k-bone-dim) !important; }
.mbtn.on{ background:var(--k-bone) !important; color:#05070a !important; border-color:var(--k-bone) !important; }
.sr input[type=range]{ background:var(--k-line) !important; height:1px !important; }
.sr input[type=range]::-webkit-slider-thumb{ background:var(--k-bone) !important; width:14px !important; height:14px !important; box-shadow:0 0 0 4px rgba(192,0,34,.0); }
.sr input[type=range]::-moz-range-thumb{ background:var(--k-bone) !important; width:14px !important; height:14px !important; }
.sv, .kpi .kv, .pr .p-v{ color:var(--k-bone) !important; }
.big-v{ font-weight:500 !important; letter-spacing:-.02em; font-size:clamp(40px,4vw,58px) !important; }
.big-v.good{ color:var(--k-bone) !important; }
.big-v.bad{ color:var(--k-verm) !important; }
.kpi .kv{ font-weight:500 !important; }
.kpi .kl, .big-lbl, .bbar-foot{ color:var(--k-muted) !important; letter-spacing:.18em !important; font-weight:500 !important; }
.bbar{ background:var(--k-line) !important; height:2px !important; border-radius:0 !important; }
.bbar-fill{ background:var(--k-verm) !important; border-radius:0 !important; }
.pr{ border-bottom:1px solid var(--k-line-soft) !important; }
.pl, .disc{ border-top:1px solid var(--k-line) !important; }
.disc{ color:var(--k-muted) !important; }
.cr input[type=checkbox], .checkbox-row input{ accent-color:var(--k-verm); }
#btn-usd, #btn-cad{ border-radius:0 !important; letter-spacing:.2em !important; font-weight:500 !important; }
#btn-usd, #btn-cad{ background:transparent !important; color:var(--k-muted) !important; }
#btn-usd[style*="var(--red)"], #btn-cad[style*="var(--red)"]{ background:var(--k-bone) !important; color:#05070a !important; }
/* the lifetime projection panel: a plate with a vermilion rule along its top */
.calc-right div[style*="rgba(192,0,34,0.12)"]{
  background:rgba(9,12,16,.6) !important; border:1px solid var(--k-line) !important; border-top:1px solid var(--k-verm) !important; border-radius:0 !important;
}
.calc-right div[style*="rgba(192,0,34,0.12)"] > div:first-child{ color:var(--k-verm) !important; letter-spacing:.24em !important; font-weight:500 !important; }
#out-lifetime, #out-lifetime-roi{ font-weight:500 !important; letter-spacing:-.01em; }
.calc-header > div > div:last-child{ border:1px solid var(--k-line) !important; border-radius:0 !important; }
.gate-overlay{ background:rgba(3,5,8,.72) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gate-skip{ color:var(--k-muted) !important; letter-spacing:.2em; text-transform:uppercase; font-size:11px !important; }
.gate-skip:hover{ color:var(--k-bone) !important; }

/* ------------------------------------------------------ blog backend */
.admin-bar{ background:rgba(9,12,16,.6) !important; border-bottom:1px solid var(--k-line); color:var(--k-text) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.admin-bar strong{ color:var(--k-bone) !important; }
.admin-bar a{ color:var(--k-verm) !important; font-weight:500 !important; letter-spacing:.06em; }
.image-block{ background:rgba(5,7,10,.45) !important; border:1px dashed var(--k-line) !important; border-radius:0 !important; }
.image-placeholder{ color:var(--k-muted) !important; }
.image-actions button{ background:rgba(223,231,224,.92) !important; border-radius:0 !important; }
.preview-title{ font-weight:500 !important; letter-spacing:-.02em !important; color:var(--k-bone) !important; }
.preview-title:empty:before, .preview-body:empty:before{ color:rgba(170,180,173,.4) !important; }
.editor-toolbar{ border:1px solid var(--k-line) !important; border-radius:0 !important; background:rgba(5,7,10,.4); }
.toolbar-btn{ color:var(--k-bone-dim) !important; border-radius:0 !important; }
.toolbar-btn:hover{ background:rgba(223,231,224,.08) !important; }
.toolbar-btn.active{ border-color:var(--k-verm) !important; color:var(--k-bone) !important; background:rgba(192,0,34,.12) !important; }
.toolbar-btn svg{ stroke:currentColor; }
.toolbar-divider{ background:var(--k-line) !important; }
.preview-body{ color:var(--k-bone-dim) !important; font-weight:300; }
.preview-body h1, .preview-body h2, .preview-body h3, .preview-body h4, .preview-body h5, .preview-body h6{ color:var(--k-bone); font-weight:500 !important; }
.preview-body a{ color:var(--k-bone) !important; text-decoration-color:var(--k-verm) !important; }
.serp-sitename{ color:var(--k-bone); }
.serp-url{ color:#8fb39a !important; }
.serp-title{ color:#a9c3ff !important; }
.serp-desc{ color:var(--k-text) !important; }
.serp-favicon{ background:var(--k-talk) !important; }
.char-count{ color:var(--k-muted) !important; }
.counter-bar{ background:var(--k-line) !important; border-radius:0 !important; }
.status-pill.good{ color:#a9d4b4 !important; border-color:rgba(169,212,180,.35) !important; }
.status-pill.warn{ color:#e8c27a !important; border-color:rgba(232,194,122,.35) !important; }
.draft-item{ border-bottom:1px solid var(--k-line-soft) !important; color:var(--k-bone-dim); }
.draft-item button{ color:var(--k-verm) !important; background:none !important; }
.drafts-box h4{ color:var(--k-bone) !important; font-weight:500 !important; }
.save-msg{ color:#a9d4b4 !important; }
.error-msg, .gate-error{ background:rgba(192,0,34,.12) !important; color:#ffb4ae !important; border:1px solid rgba(192,0,34,.35) !important; border-radius:0 !important; }
.login-wrap{ min-height:calc(100vh - 84px - 220px); display:flex; align-items:center; justify-content:center; }

/* ------------------------------------------------------ contact / policy */
.inquiry, .page-head{ background:transparent !important; }
.service-note, .consent-text, .pre-actions-note{ color:var(--k-text) !important; }
.service-note{ background:var(--k-plate) !important; border:1px solid var(--k-line) !important; border-radius:0 !important; padding:9px 14px !important; }
.policy p, .policy li{ color:var(--k-text) !important; }
/* the policy text sits straight on the page, no plate */
article.policy{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
.policy h2, .policy h3, .policy h4{ font-weight:500 !important; }
.policy a, .toc a.active{ color:var(--k-bone) !important; }
.toc a{ color:var(--k-muted) !important; }

/* ------------------------------------------------------ the Let's Talk overlay */
.tm-overlay{ background:rgba(3,5,8,.78) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tm-close{ color:var(--k-bone) !important; }
/* the pop-up form reads on a near-solid panel, not a see-through plate */
.tm-overlay .tm-card{ background:rgba(14,16,19,.94) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* ------------------------------------------------------ footer */
html body footer{
  background:rgba(5,7,10,.82) !important; border-top:1px solid var(--k-line) !important; margin-top:120px !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
footer .logo img, footer .foot-logo{ height:34px !important; width:auto; }
.footer-links a, .footer-cols a{ color:var(--k-text) !important; font-size:13px !important; transition:color .3s; }
.footer-links a:hover, .footer-cols a:hover{ color:var(--k-bone) !important; }
.footer-legal, .footer-inner .about{ color:var(--k-muted) !important; }
.footer-socials a, .socials div{ border:1px solid var(--k-line) !important; color:var(--k-bone-dim) !important; }
.footer-cols h4{ font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:rgba(223,231,224,.5) !important; font-weight:500 !important; }

/* ===================================================== kiosk pages
   The three-kiosk switcher and the feature showcase, in one language:
   text tabs over a thin rule, the active one white and underlined. */
html body .model-tabs{
  display:grid; position:relative; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 28px;
  max-width:1180px; margin:0 auto; padding:40px 80px 0; justify-content:stretch;
}
html body .model-tabs a{
  display:block; text-transform:none; min-width:0;
  padding:0 0 14px; border:0; border-bottom:1px solid rgba(223,231,224,.16); border-radius:0;
  background:none !important; font-size:20px; font-weight:400; letter-spacing:-.01em; text-align:left;
  color:rgba(223,231,224,.42); transition:color .3s, border-color .3s;
}
html body .model-tabs a:hover{ color:rgba(223,231,224,.8); }
html body .model-tabs a.on{ color:#fff; font-weight:400; border-bottom-color:#fff; }

/* the showcase: three tabs (title, line of copy), two image panels below, a talk bar */
.kshow{ max-width:1180px; margin:0 auto; padding:64px 80px 0; }
.kshow-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 28px; align-items:start; }
.kshow-tab{ all:unset; cursor:pointer; display:block; color:rgba(223,231,224,.38); transition:color .45s; }
.kshow-tab h3{ font-size:22px !important; font-weight:400 !important; line-height:1.25 !important; letter-spacing:-.01em; color:inherit !important; margin:0 0 16px !important; padding:0 !important; }
.kshow-rule{ display:block; position:relative; height:1px; background:rgba(223,231,224,.16); margin-bottom:22px; overflow:hidden; }
.kshow-rule i{ position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }
.kshow-tab p{ font-size:15px !important; line-height:1.55 !important; color:inherit !important; margin:0 !important; max-width:34ch; }
.kshow-tab:hover{ color:rgba(223,231,224,.7); }
.kshow-tab.on{ color:#fff; }
.kshow-tab.on .kshow-rule i{ animation:kshowFill var(--kshow-t, 7s) linear forwards; }
.kshow.paused .kshow-tab.on .kshow-rule i{ animation-play-state:paused; }
.kshow-tab:focus-visible h3{ text-decoration:underline; text-underline-offset:6px; }
@keyframes kshowFill{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .kshow-tab.on .kshow-rule i{ animation:none; transform:none; } }

.kshow-media{ display:grid; margin-top:44px; }
.kshow-set{ grid-area:1 / 1; display:grid; grid-template-columns:minmax(0, .73fr) minmax(0, 1fr); gap:18px; align-items:start;
  opacity:0; visibility:hidden; transition:opacity .6s, visibility 0s linear .6s; }
.kshow-set.on{ opacity:1; visibility:visible; transition-delay:0s; }
/* image slots: drop an <img> inside a .kshow-ph and it fills it */
.kshow-ph{ position:relative; overflow:hidden; background:#232625; outline:1px solid rgba(223,231,224,.08); outline-offset:-1px; aspect-ratio:1 / 1; }
.kshow-ph + .kshow-ph{ aspect-ratio:5 / 4; }
.kshow-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kshow-ph span{ position:absolute; left:18px; bottom:16px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(223,231,224,.4); }
.kshow-ph:has(img) span{ display:none; }
.kshow-desc-m{ display:none; }

.kshow-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:-28px; position:relative;
  padding:22px 48px; background:#2a2d2b; color:#fff; text-decoration:none; font-size:24px; letter-spacing:-.01em; transition:background .3s; }
.kshow-bar svg{ flex:0 0 auto; transition:transform .35s; }
.kshow-bar:hover{ background:#323633; }
.kshow-bar:hover svg{ transform:translateX(4px); }

@media (max-width:820px){
  html body .model-tabs{ padding:28px 24px 0; gap:0 14px; }
  html body .model-tabs a{ font-size:15px; padding-bottom:10px; }
  .kshow{ padding:36px 24px 0; }
  .kshow-tabs{ gap:0 14px; }
  .kshow-tab h3{ font-size:16px !important; margin-bottom:10px; }
  .kshow-tab p{ display:none; }                         /* the active tab's line shows below instead */
  .kshow-rule{ margin-bottom:0; }
  .kshow-desc-m{ display:block; font-size:15px; line-height:1.55; color:#fff; margin:18px 0 0; min-height:3.1em; }
  .kshow-media{ margin-top:24px; }
  .kshow-set{ grid-template-columns:1fr; gap:12px; }
  .kshow-ph, .kshow-ph + .kshow-ph{ aspect-ratio:4 / 3; }
  .kshow-bar{ margin-top:12px; padding:18px 22px; font-size:18px; }
}

/* ============================================= kiosk page layout (.kp)
   One language with the showcase: thin rules, light large type, a title
   column on the left and the content on the right, flat dark panels. */
.kp{ --kp-pad:80px; --kp-rule:rgba(223,231,224,.16); padding-bottom:120px; }
.kp h1, .kp h2{ font-weight:400 !important; letter-spacing:-.02em !important; color:#fff !important; margin:0 !important; }
.kp-head{ max-width:1180px; margin:0 auto; padding:64px var(--kp-pad) 0;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; align-items:end; }
.kp-head h1{ font-size:clamp(44px, 5.4vw, 76px) !important; line-height:1 !important; }
.kp-lede{ margin:0; font-size:16px; line-height:1.6; color:rgba(223,231,224,.62); max-width:52ch; }
.kp .kshow{ padding-top:56px; }

.kp-row{ max-width:1180px; margin:0 auto; padding:120px var(--kp-pad) 0;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:28px; }
.kp-row > :not(.kp-row-head){ grid-column:2; }
.kp-row-head{ grid-column:1; border-top:1px solid #fff; padding-top:20px; }
.kp-row-head h2{ font-size:22px !important; line-height:1.25 !important; }
.kp-row-head p{ margin:10px 0 0; font-size:15px; line-height:1.55; color:rgba(223,231,224,.45); max-width:28ch; }

.kp-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:28px; }
.kp-actions .btn-primary{ margin:0; }
.kp-link{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#dfe7e0; text-decoration:none;
  border-bottom:1px solid rgba(223,231,224,.3); padding-bottom:3px; transition:border-color .3s, color .3s; }
.kp-link:hover{ color:#fff; border-color:#fff; }

.kp-stats{ margin:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 28px; }
.kp-stat{ border-top:1px solid var(--kp-rule); padding:20px 0 26px; }
.kp-stat dt{ font-size:13px; color:rgba(223,231,224,.45); margin-bottom:8px; }
.kp-stat dd{ margin:0; font-size:20px; line-height:1.35; color:#fff; letter-spacing:-.01em; }

.kp-wide{ aspect-ratio:16 / 9 !important; }
.kp-wide img{ object-fit:contain; padding:4%; }

.kp-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 28px; }
.kp-list li{ display:flex; gap:18px; align-items:baseline; border-top:1px solid var(--kp-rule); padding:18px 0 20px;
  font-size:17px; line-height:1.45; color:#dfe7e0; }
.kp-n{ flex:0 0 auto; font-size:12px; letter-spacing:.08em; color:rgba(223,231,224,.35); font-variant-numeric:tabular-nums; }
.kp-list .kp-sec{ grid-column:1 / -1; }
.kp-list .kp-sec b{ font-weight:500; color:#fff; }

/* certifications: each mark with what it covers and why an operator needs it */
.kp-certs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 28px; }
.kp-certs li{ border-top:1px solid var(--kp-rule); padding:28px 0 8px; }
.kp-certs img{ display:block; height:56px; width:auto; margin-bottom:22px; filter:grayscale(1) brightness(1.6) contrast(.9); opacity:.85; }
.kp-certs img[src^="nama-logo"]{ height:40px; margin:8px 0 30px; }
.kp-certs h3{ margin:0 0 16px !important; font-size:20px !important; font-weight:400 !important; line-height:1.3 !important; color:#fff !important; letter-spacing:-.01em; }
.kp-certs dl{ margin:0; }
.kp-certs dt{ font-size:13px; color:rgba(223,231,224,.45); margin-top:14px; }
.kp-certs dd{ margin:4px 0 0; font-size:15px; line-height:1.55; color:rgba(223,231,224,.75); max-width:40ch; }

.kp-tags{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 28px; }
.kp-tags li{ border-top:1px solid var(--kp-rule); padding:16px 0 18px; font-size:17px; color:#dfe7e0; }
.kp-gallery{ grid-column:1 / -1 !important; display:grid; grid-template-columns:minmax(0, .73fr) minmax(0, 1fr) minmax(0, .73fr); gap:18px; margin-top:44px; align-items:start; }
.kp-gallery .kshow-ph{ aspect-ratio:4 / 5; }
.kp-gallery .kshow-ph + .kshow-ph{ aspect-ratio:4 / 5; }

@media (max-width:900px){
  .kp{ --kp-pad:24px; padding-bottom:80px; }
  .kp-head{ grid-template-columns:1fr; padding-top:36px; gap:16px; }
  .kp .kshow{ padding-top:36px; }
  .kp-row{ grid-template-columns:1fr; padding-top:72px; gap:22px; }
  .kp-row > :not(.kp-row-head), .kp-row-head{ grid-column:1; }
  .kp-list, .kp-tags{ grid-template-columns:1fr; }
  .kp-stats{ grid-template-columns:1fr; }
  .kp-stat{ display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding:16px 0; }
  .kp-stat dt{ margin:0; flex:0 0 auto; }
  .kp-stat dd{ font-size:17px; text-align:right; }
  .kp-tags{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kp-gallery{ grid-template-columns:1fr; margin-top:12px; }
  .kp-gallery .kshow-ph, .kp-gallery .kshow-ph + .kshow-ph{ aspect-ratio:4 / 3; }
  .kp-certs{ grid-template-columns:1fr; }
  .kp-certs li + li{ margin-top:12px; }
}

/* kiosk pages: four images, one shape — the hero and one per showcase tab,
   all 16:9 at the full content width */
.kshow-set{ grid-template-columns:1fr !important; }
.kshow-set .kshow-ph, .kshow-set .kshow-ph + .kshow-ph{ aspect-ratio:16 / 9 !important; }
.kp-hero{ display:block; max-width:calc(1180px - 2 * var(--kp-pad)); margin:48px auto 0; aspect-ratio:auto !important;
  width:calc(100% - 2 * var(--kp-pad)); height:auto; }   /* the same width as the showcase images */
.kp-hero::before{ content:''; display:block; padding-top:56.25%; }
.kp-hero img{ object-fit:contain; }   /* the current photo isn't 16:9: shown whole until it's replaced */
@media (max-width:900px){
  .kshow-set .kshow-ph, .kshow-set .kshow-ph + .kshow-ph{ aspect-ratio:4 / 3 !important; }
  .kp-hero{ margin-top:28px; }
  .kp-hero::before{ padding-top:75%; }
}

/* Kiosk page hero (.kh): the name set large on the left — where it fits, a rule,
   what it is — and the photos on the right: one wide image over three. */
.kh{ max-width:1440px; margin:0 auto; padding:56px var(--kp-pad, 80px) 0;
  display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.kh-copy{ container-type:inline-size; min-width:0; }
/* sized to its column, so the longest name (OUTDOOR) always fits beside the photos */
.kh-title{ margin:0 !important; font-size:min(19.5cqw, 140px) !important; line-height:.9 !important; font-weight:400 !important;
  letter-spacing:-.02em !important; text-transform:uppercase; color:#fff !important; }
.kh-ideal{ display:flex; align-items:center; gap:12px; margin:clamp(28px, 3.4vw, 48px) 0 0; padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.85); font-size:16px; line-height:1.4; color:#fff; }
.kh-ideal svg{ flex:0 0 auto; }
.kh-desc{ margin:24px 0 0; font-size:16px; line-height:1.75; color:rgba(255,255,255,.85); max-width:56ch; }
.kh-gallery{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 22px); }
.kh-img{ position:relative; margin:0; overflow:hidden; background:#232625; aspect-ratio:7 / 6; }
.kh-img--hero{ grid-column:1 / -1; aspect-ratio:2.35 / 1; }
.kh-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .kh{ grid-template-columns:1fr; gap:32px; padding-top:32px; }
  .kh-title{ font-size:min(19.5cqw, 96px) !important; }
  .kh-img--hero{ aspect-ratio:16 / 10; }
  .kh-gallery{ gap:8px; }
}

/* ---- product page (.pp): a hero that makes the case, then the line-style rows */
/* one gap before the footer, not the page padding and the footer margin stacked */
main.pp{ padding-bottom:96px !important; }
main.pp + footer{ margin-top:0 !important; }
.pp-hero{ max-width:1180px; margin:0 auto; padding:56px var(--kp-pad, 80px) 0; display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(36px, 5vw, 80px); align-items:center; }
.pp-eyebrow{ margin:0 0 18px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(223,231,224,.55); }
.pp-title{ margin:0 !important; font-size:clamp(38px, 4.6vw, 64px) !important; line-height:1.05 !important; font-weight:500 !important; letter-spacing:-.025em !important; color:#fff !important; }
.pp-lede{ margin:22px 0 0; font-size:17px; line-height:1.65; color:rgba(223,231,224,.72); max-width:46ch; }
.pp-facts{ margin:34px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 20px; }
.pp-facts > div{ border-top:1px solid rgba(223,231,224,.2); padding-top:14px; }
.pp-facts dt{ font-size:12px; color:rgba(223,231,224,.5); margin-bottom:6px; }
.pp-facts dd{ margin:0; font-size:20px; color:#fff; letter-spacing:-.01em; }
.pp-price{ margin:30px 0 0; font-size:30px; letter-spacing:-.02em; color:#fff; }
.pp-price span{ display:block; margin-bottom:4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(223,231,224,.5); }
.pp-price small{ font-size:14px; color:rgba(223,231,224,.6); letter-spacing:.06em; }
.pp-hero .kp-actions{ margin-top:28px; }
.pp-img{ position:relative; margin:0; }
.pp-img .kshow-ph{ aspect-ratio:4 / 3; }
.pp-img--tall .kshow-ph{ aspect-ratio:4 / 5; max-height:78vh; }
/* where the hero photo was taken: a pin and the venue, set into the photo's
   bottom-right corner over a soft fade (no box) */
.pp-img--tall::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
.pp-credit{ position:absolute; right:20px; bottom:18px; z-index:1; display:flex; align-items:flex-start; gap:8px; text-align:right; color:#fff; }
.pp-credit svg{ margin-top:2px; flex:0 0 auto; color:#fff; }
.pp-credit span{ font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.7); letter-spacing:.01em; }
.pp-credit b{ display:block; font-weight:500; font-size:14px; color:#fff; }
.pp-img .kshow-ph span{ left:16px; right:16px; bottom:14px; letter-spacing:.12em; line-height:1.5; }
.pp-why{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 28px; }
.pp-why li{ border-top:1px solid var(--kp-rule); padding:20px 0 28px; }
.pp-why h3, .pp-steps h3, .pp-places h3{ margin:0 0 8px !important; font-size:19px !important; font-weight:400 !important; line-height:1.3 !important; color:#fff !important; letter-spacing:-.01em; }
.pp-why p, .pp-steps p{ margin:0; font-size:14.5px; line-height:1.6; color:rgba(223,231,224,.6); max-width:42ch; }
.pp-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 22px; }
.pp-steps li{ border-top:1px solid var(--kp-rule); padding-top:18px; }
.pp-places{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.pp-places--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.pp-places h3{ margin:12px 0 0 !important; font-size:15px !important; }
.pp-places .pp-img .kshow-ph{ aspect-ratio:4 / 5; }
.pp-places--3 .pp-img .kshow-ph{ aspect-ratio:1 / 1; }
.pp-gap{ margin-top:24px; }
.pp-quote{ margin:0; border-top:1px solid var(--kp-rule); padding-top:24px; }
.pp-quote blockquote{ margin:0; }
.pp-quote p{ margin:0; font-size:clamp(20px, 2vw, 26px); line-height:1.45; letter-spacing:-.01em; color:#fff; }
.pp-quote figcaption{ margin-top:18px; font-size:13px; line-height:1.5; color:rgba(223,231,224,.5); }
.pp-quote figcaption b{ display:block; font-weight:400; font-size:15px; color:#dfe7e0; }
.pp-quote .kp-link{ margin-top:22px; }
.pp-compare-wrap{ overflow-x:auto; }
.pp-compare{ width:100%; min-width:620px; border-collapse:collapse; font-size:14.5px; }
.pp-compare th, .pp-compare td{ text-align:left; padding:14px 16px 14px 0; border-top:1px solid var(--kp-rule); color:rgba(223,231,224,.62); font-weight:400; vertical-align:top; }
.pp-compare thead th{ border-top:0; padding-bottom:16px; font-size:18px; color:#fff; }
.pp-compare thead th a{ color:rgba(223,231,224,.62); border-bottom:1px solid rgba(223,231,224,.3); }
.pp-compare thead th a:hover{ color:#fff; border-color:#fff; }
.pp-compare td:first-child{ color:rgba(223,231,224,.45); font-size:13px; width:20%; }
.pp-compare .on{ color:#fff; }
.pp-compare thead .on{ border-bottom:2px solid #c00022; }
@media (max-width:900px){
  .pp-hero{ grid-template-columns:1fr; padding-top:32px; gap:28px; }
  .pp-img--tall{ order:-1; }
  .pp-img--tall .kshow-ph{ max-height:none; aspect-ratio:4 / 4; }
  .pp-facts dd{ font-size:16px; }
  .pp-price{ font-size:24px; }
  .pp-why, .pp-steps{ grid-template-columns:1fr; }
  .pp-steps li{ padding-bottom:18px; }
  .pp-places, .pp-places--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
}

/* Section heading rule: dim like the others; draws across in white while the section is hovered (same as the bento tiles) */
.kp-row-head{ position:relative; border-top-color:var(--kp-rule); }
.kp-row-head::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.kp-row:hover .kp-row-head::before{ transform:scaleX(1); }

/* ------------------------------------------------------ form fields: the line style
   (as on the Support page): a quiet label, no box, one rule under the field */
.tm-group label, form.inquiry-form .form-group label, .gate-form .form-group label{
  font-size:13px !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important;
  color:#fff !important; margin-bottom:4px; line-height:1.4;
}
.tm-group label .hint, form.inquiry-form .form-group label .hint, .gate-form .form-group label .hint{ font-size:12px !important; color:rgba(223,231,224,.3) !important; text-transform:none !important; letter-spacing:0 !important; }
.tm-group input[type="text"], .tm-group input[type="email"], .tm-group input[type="tel"], .tm-group input[type="number"], form.inquiry-form .form-group input[type="text"], form.inquiry-form .form-group input[type="email"], form.inquiry-form .form-group input[type="tel"], form.inquiry-form .form-group input[type="number"], .gate-form .form-group input[type="text"], .gate-form .form-group input[type="email"], .gate-form .form-group input[type="tel"], .gate-form .form-group input[type="number"], .tm-group select, form.inquiry-form .form-group select, .gate-form .form-group select, .tm-group textarea, form.inquiry-form .form-group textarea, .gate-form .form-group textarea{
  width:100%; box-sizing:border-box; padding:10px 0 !important; background:transparent !important;
  border:0 !important; border-bottom:1px solid rgba(223,231,224,.22) !important; border-radius:0 !important;
  color:#fff !important; font-family:inherit; font-size:16px !important; font-weight:400 !important; outline:0 !important;
  box-shadow:none !important; transition:border-color .2s;
}
.tm-group select, form.inquiry-form .form-group select, .gate-form .form-group select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:22px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dfe7e0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 2px center !important;
}
.tm-group select, form.inquiry-form .form-group select, .gate-form .form-group select option{ background:#0d0e10; color:#fff; }
.tm-group textarea, form.inquiry-form .form-group textarea, .gate-form .form-group textarea{ resize:vertical; min-height:110px; }
.tm-group input:focus, .tm-group select:focus, .tm-group textarea:focus, form.inquiry-form .form-group input:focus, form.inquiry-form .form-group select:focus, form.inquiry-form .form-group textarea:focus, .gate-form .form-group input:focus, .gate-form .form-group select:focus, .gate-form .form-group textarea:focus{ border-bottom-color:#fff !important; outline:0 !important; }
.tm-group input::placeholder, .tm-group textarea::placeholder, form.inquiry-form .form-group input::placeholder, form.inquiry-form .form-group textarea::placeholder, .gate-form .form-group input::placeholder, .gate-form .form-group textarea::placeholder{ color:rgba(223,231,224,.3) !important; }
.tm-row{ gap:18px 28px !important; margin-bottom:18px !important; }
/* consent tick: a plain square, red when ticked */
.tm-checkbox-row input[type="checkbox"]{ width:18px !important; height:18px !important; border-radius:0 !important; background:transparent !important; border:1px solid rgba(223,231,224,.4) !important; }
.tm-checkbox-row input[type="checkbox"]:checked{ background:#c00022 !important; border-color:#c00022 !important; }
.tm-checkbox-row input[type="checkbox"]::after{ width:4px !important; height:9px !important; }
.tm-checkbox-row{ gap:12px !important; align-items:center !important; }