/* ============================================================================
   VIPS V2 — information & legal pages
   (about us, contact, privacy, terms, disclaimer, refunds, cookies, EULA, download)

   These pages used to load /assets/css/index.css plus pages/info-pages.css,
   pages/public-auth.css and p-about.css. index.css re-declares :root and
   html/body AFTER v2.css, so on every footer page it replaced the V2 palette
   with a fixed light one. Two things followed:

     - the header rendered differently from every other page, because .btn and
       the base type came from the legacy sheet rather than from v2.css; and
     - the theme toggle in the header did nothing visible, because the page's
       colours were literals rather than tokens — so there was, in effect, no
       dark mode on any footer page.

   This file is those four stylesheets ported onto the V2 tokens. The design is
   deliberately unchanged — same layout, same structure, same spacing. What
   changed is that colour, elevation and type now come from the same place as
   the rest of the site, which is what makes light and dark work here.

   Everything is scoped with :is(.page-info,.page-about,.page-public--auth) so
   it applies to these pages and cannot reach the rest of the site, and so that
   where a class name collides with v2.css (.hero, .card, .container, .section)
   the info-page meaning wins here and only here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Compatibility shims. The ported rules refer to token names from the legacy
   sheet; each is re-pointed at its V2 equivalent so it follows the theme
   instead of redefining it. Scoped to :root because this file is only ever
   loaded by the pages above.
   --------------------------------------------------------------------------- */
:root{
  --primary:var(--brand-strong);
  --primary-hover:var(--brand-hover);
  --primary-text:var(--text-heading);
  --accent:var(--brand);
  --accent-50:var(--brand-tint);
  --accent-200:var(--brand-line);
  --accent-text:var(--brand-strong);
  --orange:var(--brand);
  --orange-50:var(--brand-tint);
  --orange-200:var(--brand-line);
  --orange-text:var(--brand-strong);
  --navy-600:var(--text-heading);
  --text-dark:var(--text);
  --text-light:var(--text-secondary);
  --text-faint:var(--text-disabled);
  --text-info:var(--info);
  --text-link:var(--link);
  --text-warm:var(--brand-strong);
  --border:var(--line);
  --border-soft:var(--line);
  --border-subtle:var(--line);
  --border-info:var(--info-line);
  --bg-soft:var(--surface-2);
  --surface-muted:var(--surface-2);
  --surface-soft:var(--surface-3);
  --surface-info:var(--info-bg);
  --surface-warm:var(--brand-tint);
  --surface-warm-strong:var(--brand-line);
  --danger-soft:var(--danger-bg);
  --success-soft:var(--success-bg);
  --warning-soft:var(--warning-bg);
  --overlay-dark:rgba(8,28,56,.75);
  --radius:var(--r-m);
  --shadow-sm:var(--sh-1);
  --shadow-md:var(--sh-2);
  --shadow-panel:var(--sh-2);
  --shadow-hero:var(--sh-3);
  --shadow-float:var(--sh-2);
  --elev-3:var(--sh-2);
  --transition:all .2s ease-in-out;
  --app-content-max:980px;

  /* type scale — the legacy names, on the V2 font stack */
  --font-display:clamp(28px,4.4vw,40px);
  --font-page-title:clamp(22px,3vw,28px);
  --font-section-title:clamp(18px,2vw,20px);
  --font-card-title:17px;
  --font-body-lg:16px;
  --font-body:14px;
  --font-label:14px;
  --font-button:14px;
  --font-helper:13px;
  --font-caption:12px;
  --font-eyebrow:11px;
  --lh-display:1.08;
  --lh-page-title:1.15;
  --lh-section-title:1.2;
  --lh-card-title:1.25;
  --lh-body:1.65;
  --lh-body-loose:1.7;
  --lh-button:1.2;
  --lh-helper:1.55;
  --lh-caption:1.45;
}

/* index.css supplied the page background and the shared container. */
body.page-info, body.page-about, body.page-public--auth{ background:var(--bg); color:var(--text); }
:is(.page-info,.page-about,.page-public--auth) .container{
  width:100%; max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,28px);
}


/* ============ shared primitives ported from index.css ============ */
:is(.page-info,.page-about,.page-public--auth) :where(
  a,
:is(.page-info,.page-about,.page-public--auth) button,
:is(.page-info,.page-about,.page-public--auth) input,
:is(.page-info,.page-about,.page-public--auth) select,
:is(.page-info,.page-about,.page-public--auth) textarea,
:is(.page-info,.page-about,.page-public--auth) summary,
:is(.page-info,.page-about,.page-public--auth) [tabindex],
:is(.page-info,.page-about,.page-public--auth) .spot-tile,
:is(.page-info,.page-about,.page-public--auth) .saved-plate-trigger,
:is(.page-info,.page-about,.page-public--auth) .pill-link,
:is(.page-info,.page-about,.page-public--auth) .menu-item,
:is(.page-info,.page-about,.page-public--auth) .sub-menu-item
):focus-visible{
  outline:3px solid rgba(194,65,12,.40);
  outline-offset:2px;
  box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 0 0 6px rgba(194,65,12,.18);
}
:is(.page-info,.page-about,.page-public--auth) .app-shell{
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
}
:is(.page-info,.page-about,.page-public--auth) .drawer-nav a.active{
  background: rgba(255, 255, 255, 0.16);
  font-weight: 600;
}
:is(.page-info,.page-about,.page-public--auth) .container{max-width:1200px;margin:0 auto;padding:0 16px;
}
:is(.page-info,.page-about,.page-public--auth) .section{padding:clamp(2rem,5vw,3rem) 0;
}
:is(.page-info,.page-about,.page-public--auth) .section-title{font-size:var(--font-section-title);line-height:var(--lh-section-title);margin:0 0 8px;font-weight:700;
}
:is(.page-info,.page-about,.page-public--auth) .lead{color:var(--text-dark);opacity:.9;font-size:var(--font-body-lg);line-height:var(--lh-body-loose);
}
:is(.page-info,.page-about,.page-public--auth) .check-list{margin:.2rem 0 0;padding-left:1.2rem;
}
:is(.page-info,.page-about,.page-public--auth) .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
@media (max-width:900px){
:is(.page-info,.page-about,.page-public--auth) .grid-2{grid-template-columns:1fr;}
}
:is(.page-info,.page-about,.page-public--auth) .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:900px){
:is(.page-info,.page-about,.page-public--auth) .grid-3{grid-template-columns:1fr;}
}
:is(.page-info,.page-about,.page-public--auth) .card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px;box-shadow:var(--shadow-sm);
}
:is(.page-info,.page-about,.page-public--auth) .hero.hero--sm{
  min-height:46vh;
}
:is(.page-info,.page-about,.page-public--auth) .hero-media{position:absolute;inset:0;overflow:hidden;
}
:is(.page-info,.page-about,.page-public--auth) .hero-img{width:100%;height:100%;object-fit:cover;
}
:is(.page-info,.page-about,.page-public--auth) .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.55));
}
:is(.page-info,.page-about,.page-public--auth) .hero-content.hero--short{position:relative;z-index:1;max-width:1100px;padding:84px 16px 26px;text-align:center;
}
:is(.page-info,.page-about,.page-public--auth) .hero-title.hero--short{margin:0 0 6px;font-weight:800;font-size:var(--font-display);line-height:var(--lh-display);
}
:is(.page-info,.page-about,.page-public--auth) .hero-sub{margin:0 auto 14px;max-width:860px;color:#e6ecf5;
}
:is(.page-info,.page-about,.page-public--auth) .btn:not([class*="btn--"]){display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1px solid transparent;border-radius:12px;font-weight:600;cursor:pointer;font-size:var(--font-button);line-height:1.2;
}
:is(.page-info,.page-about,.page-public--auth) .btn.primary:not([class*="btn--"]){background:var(--surface);color:var(--text-heading);border-color:var(--surface);
}
:is(.page-info,.page-about,.page-public--auth) .btn.secondary:not([class*="btn--"]){background:transparent;color:#ffffff;border-color:rgba(255, 255, 255, 0.6);
}
:is(.page-info,.page-about,.page-public--auth) .local-nav{position:sticky;top:64px;background:var(--surface);border-bottom:1px solid var(--border);z-index:5;
}
:is(.page-info,.page-about,.page-public--auth) .local-nav-wrap{display:flex;gap:10px;padding:10px 0;
}
:is(.page-info,.page-about,.page-public--auth) .pill-link{display:inline-block;padding:6px 12px;border:1px solid var(--border);border-radius:999px;font-weight:600;background:var(--surface);text-decoration:none;color:var(--text-dark);font-size:var(--font-button);line-height:1.2;
}
:is(.page-info,.page-about,.page-public--auth) .pill-link:hover{background:var(--surface-2);
}
:is(.page-info,.page-about,.page-public--auth) .pillars-rail{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px;
}
:is(.page-info,.page-about,.page-public--auth) .rail-pill{border:1px solid var(--border);border-radius:999px;padding:6px 10px;text-decoration:none;color:var(--text-dark);
}
:is(.page-info,.page-about,.page-public--auth) .rail-pill:hover{background:var(--surface-2);
}
:is(.page-info,.page-about,.page-public--auth) .accordion{display:grid;gap:8px;
}
:is(.page-info,.page-about,.page-public--auth) .acc-item{width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);display:flex;justify-content:space-between;align-items:center;font-weight:600;cursor:pointer;font-size:var(--font-button);line-height:1.3;
}
:is(.page-info,.page-about,.page-public--auth) .acc-item:hover{background:var(--surface-2);
}
:is(.page-info,.page-about,.page-public--auth) .acc-panel{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0 14px;max-height:0;overflow:hidden;transition:max-height .25s ease,padding .2s ease;
}
:is(.page-info,.page-about,.page-public--auth) .acc-panel.open{padding:12px 14px;max-height:300px;
}
:is(.page-info,.page-about,.page-public--auth) .menu-item.active{ color:var(--text-heading); font-weight:600;
}
:is(.page-info,.page-about,.page-public--auth) .menu-item.active::after{ transform:scaleX(1); opacity:1;
}
:is(.page-info,.page-about,.page-public--auth) .hero{
  position:relative; min-height:calc(100vh - 72px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
:is(.page-info,.page-about,.page-public--auth) .hero-media{ position:absolute; inset:0
}
:is(.page-info,.page-about,.page-public--auth) .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center
}
:is(.page-info,.page-about,.page-public--auth) .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,28,56,.62), rgba(8,28,56,.62))
}
:is(.page-info,.page-about,.page-public--auth) .hero-content{
  position:relative; z-index:2; max-width:1200px;
  padding: clamp(36px, 6vh, 64px) 24px clamp(28px, 4vh, 48px);
  color:#ffffff; text-align:left;
}
:is(.page-info,.page-about,.page-public--auth) .hero-title{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(28px,4.6vw,42px);
  position:relative;
}
:is(.page-info,.page-about,.page-public--auth) .hero-title::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:0;
  width:60px;
  height:3px;
  background:var(--accent);
  border-radius:20px;
}
:is(.page-info,.page-about,.page-public--auth) .hero-sub{ margin:0 0 18px; font-size:clamp(16px,2vw,20px); color:#e6ecf5
}
@media (max-width:900px){
:is(.page-info,.page-about,.page-public--auth) .hero-content{padding:32px 16px 24px;}
}
@media (max-width:768px){
:is(.page-info,.page-about,.page-public--auth) .hero-title{font-size:26px;}
:is(.page-info,.page-about,.page-public--auth) .hero-sub{font-size:15px;}
}
:is(.page-info,.page-about,.page-public--auth) .pill{
  background: transparent;
  color: var(--white);
  border:1px solid var(--accent-200);
  border-radius:999px; padding:4px 10px; font-size:12px;
}
:is(.page-info,.page-about,.page-public--auth) .option-actions .btn.white:not([class*="btn--"]){
  background:var(--surface); color:var(--primary-text); border:1px solid var(--surface); border-radius:10px; padding:10px 14px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
:is(.page-info,.page-about,.page-public--auth) .option-actions .btn.white:not([class*="btn--"]):hover{ background:var(--surface-3)
}
:is(.page-info,.page-about,.page-public--auth) .option-actions .btn.primary:not([class*="btn--"]){
  background:var(--accent); color:#ffffff; border:1px solid var(--accent); border-radius:10px; padding:10px 14px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
:is(.page-info,.page-about,.page-public--auth) .option-actions .btn.primary:not([class*="btn--"]):hover{ filter:brightness(1.05)
}
:is(.page-info,.page-about,.page-public--auth) .btn:not([class*="btn--"]){
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  font-weight:700; cursor:pointer; transition:var(--transition);
}
:is(.page-info,.page-about,.page-public--auth) .btn.primary:not([class*="btn--"]){ background:var(--primary); color:#ffffff; border-color:var(--primary)
}
:is(.page-info,.page-about,.page-public--auth) .btn.danger:not([class*="btn--"]){ background:var(--surface); color:var(--danger); border-color:var(--danger)
}
:is(.page-info,.page-about,.page-public--auth) .btn:not([class*="btn--"]):disabled{ opacity:.6; cursor:not-allowed
}
:is(.page-info,.page-about,.page-public--auth) .section-title{ font-size:var(--font-section-title); line-height:var(--lh-section-title); font-weight:600; margin-bottom:16px
}
:is(.page-info,.page-about,.page-public--auth) .select-box,
:is(.page-info,.page-about,.page-public--auth) .text-box{
  height:36px; min-width:180px; max-width:240px; border:1px solid var(--border);
  border-radius:6px; padding:0 8px; outline:none; transition:var(--transition); background:var(--surface); font-size:var(--font-body);
}
:is(.page-info,.page-about,.page-public--auth) .text-box{ width:220px
}
:is(.page-info,.page-about,.page-public--auth) .select-box:focus,
:is(.page-info,.page-about,.page-public--auth) .text-box:focus,
:is(.page-info,.page-about,.page-public--auth) .rate-input:focus{
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(233, 166, 118, 0.15);
}
:is(.page-info,.page-about,.page-public--auth) .chip{ background:var(--accent-50); border-radius:14px; padding:3px 10px; display:inline-flex; align-items:center; gap:5px; color:var(--accent-text); font-size:var(--font-caption); line-height:var(--lh-caption)
}
:is(.page-info,.page-about,.page-public--auth) .chip .close{ cursor:pointer; font-weight:600
}
:is(.page-info,.page-about,.page-public--auth) .settings-link.active{ background:var(--accent-50); border-right:3px solid var(--accent); color:var(--accent-text)
}
:is(.page-info,.page-about,.page-public--auth) .settings-panel.active{ display:block
}
:is(.page-info,.page-about,.page-public--auth) #lotTimeRulesSection.compact .text-box.small{ height:30px; min-width:84px; width:96px; font-size:12px; padding:0 6px
}
:is(.page-info,.page-about,.page-public--auth) #lotTimeRulesSection.compact select.text-box.small{ width:120px
}
@media (max-width:768px){
:is(.page-info,.page-about,.page-public--auth) .text-box,
:is(.page-info,.page-about,.page-public--auth) .select-box,
:is(.page-info,.page-about,.page-public--auth) .ss-box{width:100%; max-width:100%}
}
:is(.page-info,.page-about,.page-public--auth) .btn:not([class*="btn--"]){ border-radius:12px; font-weight:700; border:1px solid transparent; transition:.18s ease;
}
:is(.page-info,.page-about,.page-public--auth) .btn:not([class*="btn--"]):active{ transform:translateY(1px);
}
:is(.page-info,.page-about,.page-public--auth) .btn.navy:not([class*="btn--"]){ background:var(--navy); color:#ffffff; border-color:var(--navy);
}
:is(.page-info,.page-about,.page-public--auth) .btn.navy:not([class*="btn--"]):hover{ background:var(--surface); color:var(--text-heading); border-color:var(--navy);
}
:is(.page-info,.page-about,.page-public--auth) .btn.navy-ghost:not([class*="btn--"]){ background:var(--surface); color:var(--text-heading); border-color:var(--navy);
}
:is(.page-info,.page-about,.page-public--auth) .btn.navy-ghost:not([class*="btn--"]):hover{ background:var(--navy); color:#ffffff;
}
:is(.page-info,.page-about,.page-public--auth) .btn.orange:not([class*="btn--"]){ background:var(--orange); color:#ffffff; border-color:var(--orange);
}
:is(.page-info,.page-about,.page-public--auth) .btn.orange:not([class*="btn--"]):hover{ background:var(--surface); color:var(--orange-text);
}
:is(.page-info,.page-about,.page-public--auth) .btn.orange-ghost:not([class*="btn--"]){ background:var(--surface); color:var(--orange-text); border-color:var(--orange);
}
:is(.page-info,.page-about,.page-public--auth) .btn.orange-ghost:not([class*="btn--"]):hover{ background:var(--orange); color:#ffffff;
}
:is(.page-info,.page-about,.page-public--auth) .btn.ghost:not([class*="btn--"]){ background:var(--surface); color:var(--text-dark); border-color:var(--border);
}
:is(.page-info,.page-about,.page-public--auth) .btn.ghost:not([class*="btn--"]):hover{ background:var(--orange-50); border-color:var(--orange-200);
}
:is(.page-info,.page-about,.page-public--auth) .tag,
:is(.page-info,.page-about,.page-public--auth) .chip{
  background:var(--brand-tint);
  color:var(--brand-strong);
  border:1px solid var(--brand-line);
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  display:inline-flex;
  gap:6px;
  align-items:center;
}
:is(.page-info,.page-about,.page-public--auth) .tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange);
}
:is(.page-info,.page-about,.page-public--auth) .card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
:is(.page-info,.page-about,.page-public--auth) .card:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line);
}
:is(.page-info,.page-about,.page-public--auth) .grid-2{ gap:24px;
}
:is(.page-info,.page-about,.page-public--auth) .grid-3{ gap:22px;
}
:is(.page-info,.page-about,.page-public--auth) .section{ padding:clamp(2.4rem, 6vw, 4rem) 0;
}
:is(.page-info,.page-about,.page-public--auth) .section .section-title{ color:var(--text-heading);
}
:is(.page-info,.page-about,.page-public--auth) .lead{ color:var(--text);
}
:is(.page-info,.page-about,.page-public--auth) .local-nav{ position:sticky; top:64px; background:var(--surface); border-bottom:1px solid var(--border); z-index:20;
}
:is(.page-info,.page-about,.page-public--auth) .local-nav.compact{ top:56px;
}
:is(.page-info,.page-about,.page-public--auth) .local-nav-wrap{ display:flex; gap:10px; padding:10px 0;
}
:is(.page-info,.page-about,.page-public--auth) .pill-link{
  background:var(--surface); color:var(--text-dark); border:1px solid var(--border); border-radius:999px;
  padding:8px 12px; font-weight:600;
}
:is(.page-info,.page-about,.page-public--auth) .pill-link:hover{ background:var(--surface-2); border-color:var(--line); color:var(--text-heading);
}
:is(.page-info,.page-about,.page-public--auth) .pill-link.active{ background:var(--orange-50); border-color:var(--orange-200); color:var(--orange-text);
}
:is(.page-info,.page-about,.page-public--auth) .accordion{ display:grid; gap:10px;
}
:is(.page-info,.page-about,.page-public--auth) .acc-item{
  width:100%; text-align:left; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:700; cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
:is(.page-info,.page-about,.page-public--auth) .acc-item:hover{ background:var(--surface-2);
}
:is(.page-info,.page-about,.page-public--auth) .acc-item[aria-expanded="true"]{ border-color:var(--orange-200); box-shadow:var(--sh-2);
}
:is(.page-info,.page-about,.page-public--auth) .acc-caret{ color:var(--text-muted); transition:transform .2s ease;
}
:is(.page-info,.page-about,.page-public--auth) .acc-item[aria-expanded="true"] .acc-caret{ transform:rotate(180deg); color:var(--orange-text);
}
:is(.page-info,.page-about,.page-public--auth) .acc-panel{
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  padding:0 16px; max-height:0; overflow:hidden;
  transition:max-height .26s ease, padding .18s ease, border-color .18s ease;
}
:is(.page-info,.page-about,.page-public--auth) .acc-panel.open{ padding:12px 16px; max-height:360px; border-color:var(--line); color:var(--text);
}
:is(.page-info,.page-about,.page-public--auth) .ind-card{ display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
:is(.page-info,.page-about,.page-public--auth) .ind-icon{
  width:38px; height:38px; border-radius:12px; display:inline-grid; place-items:center;
  background:var(--orange-50); color:var(--orange-text); border:1px solid var(--orange-200);
}
:is(.page-info,.page-about,.page-public--auth) .ind-title{ margin:0; font-size:var(--font-body); color:var(--text-heading);
}
:is(.page-info,.page-about,.page-public--auth) .ind-desc{ margin:0; color:var(--text);
}
:is(.page-info,.page-about,.page-public--auth) :where(input,
:is(.page-info,.page-about,.page-public--auth) select,
:is(.page-info,.page-about,.page-public--auth) textarea,
:is(.page-info,.page-about,.page-public--auth) .text-box,
:is(.page-info,.page-about,.page-public--auth) .select-box){
  border-color:var(--border);
}
:is(.page-info,.page-about,.page-public--auth) :where(input,
:is(.page-info,.page-about,.page-public--auth) select,
:is(.page-info,.page-about,.page-public--auth) textarea,
:is(.page-info,.page-about,.page-public--auth) .text-box,
:is(.page-info,.page-about,.page-public--auth) .select-box):hover{
  border-color:var(--border-control);
}
:is(.page-info,.page-about,.page-public--auth) :where(.filter-chip,
:is(.page-info,.page-about,.page-public--auth) .chip,
:is(.page-info,.page-about,.page-public--auth) .pill,
:is(.page-info,.page-about,.page-public--auth) .radio-pill){
  font-weight:700;
}
:is(.page-info,.page-about,.page-public--auth) :where(.filter-chip,
:is(.page-info,.page-about,.page-public--auth) .chip,
:is(.page-info,.page-about,.page-public--auth) .pill-link,
:is(.page-info,.page-about,.page-public--auth) .radio-pill,
:is(.page-info,.page-about,.page-public--auth) .saved-plate-trigger):hover{
  border-color:var(--border-control);
}
:is(.page-info,.page-about,.page-public--auth) .page-private .section-steps .container{
  max-width: 1120px;
}
:is(.page-info,.page-about,.page-public--auth) .page-private .steps-header .section-title{
  margin-bottom: 6px;
}
:is(.page-info,.page-about,.page-public--auth) .page-private .steps-header .lead{
  margin: 0;
}
:is(.page-info,.page-about,.page-public--auth) .page-private .eyebrow{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange-text);
  margin-bottom: 4px;
}
:is(.page-info,.page-about,.page-public--auth) .text-box,
:is(.page-info,.page-about,.page-public--auth) .select-box,
:is(.page-info,.page-about,.page-public--auth) input.text-box,
:is(.page-info,.page-about,.page-public--auth) textarea.text-box,
:is(.page-info,.page-about,.page-public--auth) select.select-box{
  height:auto;
  min-height:40px;
  border:1px solid var(--border);
  border-radius:7px;
  padding:9px 12px;
  background:var(--surface);
  color:var(--text-dark);
  font-size:14px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
:is(.page-info,.page-about,.page-public--auth) textarea.text-box{ min-height:96px; resize:vertical; line-height:1.5;
}
:is(.page-info,.page-about,.page-public--auth) .text-box:hover,
:is(.page-info,.page-about,.page-public--auth) .select-box:hover,
:is(.page-info,.page-about,.page-public--auth) .rate-input:hover{ border-color:var(--text-muted);
}
:is(.page-info,.page-about,.page-public--auth) .text-box:focus,
:is(.page-info,.page-about,.page-public--auth) .select-box:focus,
:is(.page-info,.page-about,.page-public--auth) .rate-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--accent-50);
}
:is(.page-info,.page-about,.page-public--auth) .text-box::placeholder,
:is(.page-info,.page-about,.page-public--auth) textarea.text-box::placeholder{ color:var(--text-muted);
}
:is(.page-info,.page-about,.page-public--auth) .text-box:disabled,
:is(.page-info,.page-about,.page-public--auth) .select-box:disabled,
:is(.page-info,.page-about,.page-public--auth) input.text-box:disabled{
  background:var(--surface-muted); color:var(--text-muted); cursor:not-allowed;
}
:is(.page-info,.page-about,.page-public--auth) select.select-box,
:is(.page-info,.page-about,.page-public--auth) select.text-box{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238493a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:34px;
}
:is(.page-info,.page-about,.page-public--auth) .field-error,
:is(.page-info,.page-about,.page-public--auth) .auth-error{ color:var(--danger);
}
:is(.page-info,.page-about,.page-public--auth) .btn:not([class*="btn--"]){
  border-radius:8px; padding:9px 16px; font-weight:600; font-size:14px;
  border:1px solid transparent; gap:8px;
}
:is(.page-info,.page-about,.page-public--auth) .btn.primary:not([class*="btn--"]),
:is(.page-info,.page-about,.page-public--auth) .option-actions .btn.primary:not([class*="btn--"]){
  background:var(--primary); color:#ffffff; border-color:var(--primary);
  box-shadow:var(--sh-2);
}
:is(.page-info,.page-about,.page-public--auth) .btn.primary:not([class*="btn--"]):hover,
:is(.page-info,.page-about,.page-public--auth) .option-actions .btn.primary:not([class*="btn--"]):hover{
  background:var(--primary-hover); border-color:var(--primary-hover); filter:none;
}
:is(.page-info,.page-about,.page-public--auth) .btn.ghost:not([class*="btn--"]){ background:var(--surface); color:var(--text-dark); border-color:var(--border); box-shadow:none;
}
:is(.page-info,.page-about,.page-public--auth) .btn.ghost:not([class*="btn--"]):hover{ background:var(--surface-muted); border-color:var(--text-muted);
}
:is(.page-info,.page-about,.page-public--auth) .btn.danger:not([class*="btn--"]){ background:var(--surface); color:var(--danger); border-color:var(--danger-line);
}
:is(.page-info,.page-about,.page-public--auth) .btn.danger:not([class*="btn--"]):hover{ background:var(--danger-soft); color:var(--danger);
}
:is(.page-info,.page-about,.page-public--auth) .chip{
  background:var(--accent-50); color:var(--accent-text);
  border:1px solid var(--accent-200); border-radius:999px;
  padding:4px 11px; font-size:12.5px; font-weight:600;
}

/* ---------------------------------------------------------------------------
   The hero sits on a photograph behind a dark overlay, in both themes — so its
   type is light in both. .hero-content already said so, but v2.css styles bare
   `h1,h2,h3,h4` with the heading colour, and a declaration on the element
   itself beats a colour inherited from its parent. In light mode that painted
   the hero title navy-on-navy, which is why the legal pages appeared to have a
   photo and no title at all.
   --------------------------------------------------------------------------- */
:is(.page-info,.page-about,.page-public--auth) .hero-content :is(h1,h2,h3,h4),
:is(.page-info,.page-about,.page-public--auth) .hero-title{ color:#ffffff; }
:is(.page-info,.page-about,.page-public--auth) .hero-sub{ color:#e6ecf5; }

/* ---------------------------------------------------------------------------
   A <button> does not inherit colour — it defaults to canvastext. The accordion
   rows never set one, which was invisible while the card behind them was always
   white, and is black-on-near-black now that it follows the theme.
   --------------------------------------------------------------------------- */
:is(.page-info,.page-about,.page-public--auth) .acc-item{ color:var(--text-heading); }
:is(.page-info,.page-about,.page-public--auth) .acc-panel{ color:var(--text); }

/* ---------------------------------------------------------------------------
   Fixed-dark regions.

   A few surfaces are dark in BOTH themes by design — the hero's scrim over its
   photograph, the contact page's brand panel, the app device preview, and the
   about page's image bands. Their contents were written as light-on-dark
   literals; porting them to tokens made them follow the theme, so in light mode
   the light-mode tokens (dark ink, dark tints, dark hairlines) landed on a
   panel that had stayed dark, and the kicker, links and icons went almost
   invisible.

   Rather than special-case each rule, each region pins the tokens it uses to
   their on-dark values. Everything inside then resolves correctly whichever
   theme is active, and the rules themselves stay token-driven.
   --------------------------------------------------------------------------- */
:is(.page-info,.page-about,.page-public--auth) :is(
  .hero-content, .auth-side, .device-preview,
  .overview-media-content, .rfid-combined-content, .image-band-content){
  --text-heading:#f2f5fa;
  --text:#d4dce8;
  --text-secondary:#c3cede;
  --text-muted:#aab6c6;
  --text-disabled:#8a97a8;
  --surface:rgba(255,255,255,.10);
  --surface-2:rgba(255,255,255,.14);
  --surface-3:rgba(255,255,255,.18);
  --line:rgba(255,255,255,.18);
  --border-control:rgba(255,255,255,.34);
  --brand:#f0a173;
  --brand-strong:#f0a173;
  --brand-hover:#f6d6c5;
  --brand-tint:rgba(240,161,115,.16);
  --brand-line:rgba(240,161,115,.45);
  --link:#f0a173;
  --link-hover:#f6d6c5;
  --on-brand:#0a1018;

  /* The legacy aliases must be pinned here too. Each is declared as `var(--v2-token)` on :root,
     and a custom property resolves its var() where it is DECLARED, not where it is used - so
     re-pointing --brand-line on this element alone would never reach --accent-200. */
  --primary:#f0a173;
  --primary-text:#f2f5fa;
  --accent:#f0a173;
  --accent-50:rgba(240,161,115,.16);
  --accent-200:#f0a173;
  --accent-text:#f0a173;
  --orange:#f0a173;
  --orange-50:rgba(240,161,115,.16);
  --orange-200:#f0a173;
  --orange-text:#f0a173;
  --text-dark:#d4dce8;
  --text-light:#c3cede;
  --text-faint:#8a97a8;
  --text-link:#f0a173;
  --border:rgba(255,255,255,.18);
  --border-soft:rgba(255,255,255,.14);
  --border-subtle:rgba(255,255,255,.12);
  --bg-soft:rgba(255,255,255,.08);
  --surface-muted:rgba(255,255,255,.10);
  --surface-soft:rgba(255,255,255,.14);
}

/* ============ info & legal pages ============ */
.page-info{
  background: var(--surface-2);
}
.page-info .info-hero .hero-content{
  max-width: 980px;
}
.page-info .hero-sub{
  max-width: 760px;
  color: rgba(255, 255, 255, 0.92);
}.info-main{
  padding: 40px 0 72px;
}
.info-stack{
  display: grid;
  gap: 24px;
}
.info-card,
.contact-form-card,
.contact-detail-card,
.store-card,
.download-note,
.faq-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--sh-2);
}
.info-card{
  padding: 28px;
}
.info-card--tight{
  padding: 22px 24px;
}
.info-kicker{
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--font-eyebrow);
  font-weight: 800;
  color: var(--brand);
}
.info-card h2,
.info-card h3,
.contact-form-card h2,
.contact-detail-card h3,
.store-card h3,
.download-note h3,
.faq-card h3{
  margin: 0 0 10px;
  color: var(--text-heading);
  font-size: var(--font-section-title);
  line-height: var(--lh-section-title);
}
.info-card p,
.info-card li,
.contact-form-card p,
.contact-detail-card p,
.store-card p,
.download-note p,
.download-note li,
.faq-card p{
  color: var(--text);
  font-size: var(--font-body);
  line-height: var(--lh-body-loose);
}
.info-card ul,
.download-note ul,
.info-card ol{
  margin: 12px 0 0;
  padding-left: 20px;
}
.info-card li,
.download-note li{
  margin-bottom: 10px;
}
.legal-prose{
  display: grid;
  gap: 14px;
}
.legal-prose p{
  margin: 0;
}
.info-grid-2,
.info-grid-3,
.contact-layout,
.download-grid,
.support-grid,
.faq-grid,
.store-grid{
  display: grid;
  gap: 22px;
}
.info-grid-2,
.contact-layout,
.download-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-grid-3,
.support-grid,
.store-grid,
.faq-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.info-stat{
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
}
.info-stat strong{
  font-size: var(--font-section-title);
  color: var(--text-heading);
}
.info-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.info-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-strong);
  border: 1px solid rgba(240, 139, 58, 0.28);
  font-size: var(--font-helper);
  font-weight: 700;
}
.info-highlight{
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.contact-form-card,
.download-note{
  padding: 28px;
}
.contact-detail-card,
.store-card,
.faq-card{
  padding: 24px;
}
.contact-detail-card svg,
.store-card svg,
.faq-card svg{
  width: 34px;
  height: 34px;
  color: var(--brand);
  margin-bottom: 14px;
}
.contact-detail-card a,
.info-card a,
.download-note a{
  color: var(--text-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.info-form{
  display: grid;
  gap: 18px;
}
.info-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.info-field{
  display: grid;
  gap: 8px;
}
.info-field--full{
  grid-column: 1 / -1;
}
.info-field label{
  font-size: var(--font-label);
  font-weight: 700;
  color: var(--text-heading);
}
.info-field input,
.info-field textarea,
.info-field select{
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-control);
  background: var(--surface);
  color: var(--text-heading);
  box-shadow: var(--sh-2);
}
.info-field textarea{
  min-height: 140px;
  resize: vertical;
}
.info-field input:focus,
.info-field textarea:focus,
.info-field select:focus{
  outline: 3px solid rgba(240, 139, 58, 0.18);
  border-color: var(--brand);
}
.info-form-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.info-form-note,
.info-muted{
  font-size: var(--font-body);
  color: var(--text);
}
.contact-success{
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--success-line);
  background: var(--success-bg);
  color: var(--success);
  font-weight: 600;
}
.contact-success.is-visible{
  display: block;
}
.store-card{
  display: grid;
  gap: 14px;
}
.store-badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.store-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--text-heading);
  border: 1px solid var(--info-line);
  font-size: var(--font-helper);
  font-weight: 700;
}
.store-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.store-actions .btn:not([class*="btn--"]){
  min-width: 180px;
  justify-content: center;
}
.page-info--download .download-grid{
  align-items: stretch;
}
.page-info--download .download-note{
  display: grid;
  gap: 20px;
}
.page-info--download .store-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-info--download .device-preview{
  min-height: 380px;
}
.page-info--download .device-preview h2,
.page-info--download .device-preview p,
.page-info--download .device-preview li{
  max-width: 420px;
}
.device-preview{
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #081c38 0%, #163968 56%, var(--brand) 140%);
  color: #ffffff;
  box-shadow: var(--sh-3);
}
.device-preview h2,
.device-preview p,
.device-preview li{
  color: #ffffff;
}
.device-preview ul{
  margin: 14px 0 0;
  padding-left: 18px;
}
.device-preview::after{
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.device-preview__phone{
  position: absolute;
  right: 30px;
  top: 30px;
  width: 150px;
  height: 300px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow: var(--sh-2);
}
.device-preview__phone::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: 60px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}
.device-preview__phone::after{
  content: "VIPS";
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  font-size: var(--font-section-title);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.86);
}
.faq-card{
  min-height: 100%;
}
.legal-anchor-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.legal-anchor-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-heading);
  font-weight: 700;
}
.legal-anchor-nav a:hover{
  border-color: var(--brand);
  color: var(--brand);
}
@media (max-width: 980px){
.info-grid-2,
.contact-layout,
.download-grid,
.info-grid-3,
.support-grid,
.faq-grid{grid-template-columns: 1fr;}
.store-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.device-preview{min-height: 220px;
    padding-right: 190px;}
.device-preview__phone{width: 128px;
    height: 258px;}
}
@media (max-width: 768px){
.info-main{padding: 28px 0 56px;}
.info-card,
.contact-form-card,
.contact-detail-card,
.store-card,
.download-note,
.faq-card{padding: 22px 18px;}
.info-form-grid{grid-template-columns: 1fr;}.info-form-actions,
.store-actions{flex-direction: column;
    align-items: stretch;}
.store-actions .btn:not([class*="btn--"]){width: 100%;}
.device-preview{padding-right: 22px;
    min-height: 0;}
.store-grid,
.page-info--download .store-grid{grid-template-columns: 1fr;}
.device-preview__phone{position: relative;
    right: auto;
    top: auto;
    margin-top: 18px;}
}
.page-info:not(.page-info--contact) .info-stack{
  display:block;
  max-width:860px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--sh-2);
  padding:clamp(22px, 4vw, 40px);
}
.page-info:not(.page-info--contact) .info-card,
.page-info:not(.page-info--contact) .info-stat{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
}
.page-info:not(.page-info--contact) .info-stack > * + *{
  margin-top:22px;
}
.page-info:not(.page-info--contact) .info-stack > .info-card + .info-card,
.page-info:not(.page-info--contact) .info-stack > .info-card + .info-grid-2,
.page-info:not(.page-info--contact) .info-stack > .info-card + .info-grid-3,
.page-info:not(.page-info--contact) .info-stack > .info-grid-2 + .info-card,
.page-info:not(.page-info--contact) .info-stack > .info-grid-3 + .info-card{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--border-subtle);
}
.page-info:not(.page-info--contact) .info-card h2{
  font-size:18px; line-height:1.35; margin:0 0 8px;
}
.page-info:not(.page-info--contact) .info-card h3{
  font-size:16px; line-height:1.35; margin:0 0 6px;
}
.page-info:not(.page-info--contact) .info-kicker{
  font-size:11px; margin-bottom:6px;
}
.page-info:not(.page-info--contact) .info-grid-2,
.page-info:not(.page-info--contact) .info-grid-3{
  grid-template-columns:1fr;
  gap:16px;
}
.page-info:not(.page-info--contact) .info-stat{
  display:block;
  padding-left:14px;
  border-left:3px solid var(--accent-200);
}
.page-info:not(.page-info--contact) .info-stat strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--text-heading);
  margin-bottom:3px;
}
.page-info:not(.page-info--contact) .info-stat span{
  color:var(--text-light);
  font-size:14px;
  line-height:1.6;
}
.page-info .info-kicker{ color:var(--accent-text);
}
/* ============ contact (split panel layout) ============ */
.page-public--auth{
  background: var(--surface);
}
.public-auth-main{
  padding: 0;
}
.public-auth-shell{
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 72px);
}
.auth-side,
.auth-panel{
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.auth-side{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  color: #ffffff;
  background:
    radial-gradient(circle at 82% 0%, rgba(194, 65, 12, 0.30), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.06), transparent 40%),
    linear-gradient(158deg, #0c2747 0%, var(--navy) 58%, #05101f 100%);
}
.auth-kicker{
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--font-eyebrow);
  font-weight: 700;
  color: var(--orange-200);
}
.auth-side h1{
  margin: 0 0 14px;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.1;
  color: #ffffff;
  max-width: 16ch;
}
.auth-side p{
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-body-lg);
  line-height: var(--lh-body-loose);
  max-width: 46ch;
}
.auth-hero-art{
  display: none;
}
.auth-benefits{
  display: grid;
  gap: 20px;
  margin-top: 34px;
  max-width: 440px;
}
.auth-benefit{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.auth-benefit-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--orange-200);
}
.auth-benefit-icon svg{
  width: 22px;
  height: 22px;
  display: block;
}
.auth-benefit strong{
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.3;
  color: #ffffff;
}
.auth-benefit span{
  color: rgba(255, 255, 255, 0.70);
  font-size: 13.5px;
  line-height: 1.55;
}
.auth-panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--surface);
}
.auth-panel > *{
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.auth-panel-head{
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.auth-panel-head h2{
  margin: 0;
  color: var(--primary-text);
  font-size: var(--font-page-title);
  line-height: var(--lh-page-title);
}
.auth-panel-head p{
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-body);
  line-height: var(--lh-body-loose);
}
.auth-tabs{
  display: inline-flex;
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
}
.auth-tab{
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
  color: var(--text-light);
  font-weight: 700;
  cursor: pointer;
}
.auth-tab.is-active{
  background: var(--primary-text);
  color: var(--surface);
}
.auth-form-panel{
  display: none;
}
.auth-form-panel.is-active{
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.auth-form-grid{
  display: grid;
  gap: 16px;
}
.auth-form-grid--card{
  gap: 18px;
}
.auth-field{
  display: grid;
  gap: 8px;
}
.auth-field label{
  color: var(--primary-text);
  font-weight: 700;
  font-size: var(--font-label);
  line-height: 1.4;
}
.auth-field .text-box{
  width: 100%;
  max-width: none;
  min-height: 48px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-2);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.auth-field .select-box{
  width: 100%;
  max-width: none;
}
.auth-field .text-box:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(240, 139, 58, 0.16), var(--sh-2);
}
.auth-error{
  min-height: 18px;
  color: var(--danger);
  font-size: var(--font-helper);
  line-height: var(--lh-helper);
}
.auth-helper{
  color: var(--text-muted);
  font-size: var(--font-helper);
  line-height: var(--lh-helper);
}
.auth-panel-meta{
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-body);
  line-height: var(--lh-body-loose);
}
.auth-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-inline--compact{
  margin-top: 4px;
}
.auth-inline--md{
  margin-top: 14px;
}
.auth-inline--lg{
  margin-top: 18px;
}
.auth-link-btn{
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link-btn:hover{
  color: var(--accent-text);
}
.auth-stage{
  display: none;
}
.auth-stage.is-visible{
  display: grid;
  gap: 16px;
}
.auth-callout{
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-info);
  background: var(--surface-info);
  color: var(--text-info);
  font-size: var(--font-body);
  line-height: var(--lh-body-loose);
}
.auth-otp-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-countdown{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-helper);
  line-height: var(--lh-helper);
  color: var(--text-light);
}
.auth-resend-btn{
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-resend-btn:disabled{
  color: var(--text-faint);
  cursor: default;
  text-decoration: none;
}
.btn.is-loading:not([class*="btn--"]){
  position: relative;
  pointer-events: none;
  opacity: 0.92;
}
.btn.is-loading:not([class*="btn--"])::after{
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: public-auth-spin 0.8s linear infinite;
}
@keyframes public-auth-spin{
  to {
    transform: rotate(360deg);
  }
}
.auth-delivery-grid{
  display: grid;
  gap: 10px;
}
.auth-radio{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.auth-radio input{
  margin-top: 3px;
}
.auth-submit-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.auth-submit-row .btn:not([class*="btn--"]){
  min-height: 46px;
  flex: 1 1 220px;
  justify-content: center;
}
.auth-zone-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-warm);
  border: 1px solid var(--brand-line);
  color: var(--brand-strong);
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  font-weight: 700;
}
.hidden{
  display: none !important;
}
@media (max-width: 980px){
.public-auth-shell{grid-template-columns: 1fr;
    min-height: 0;}
.auth-side{display: none;}
.auth-panel{justify-content: flex-start;
    padding: clamp(24px, 6vw, 40px) 20px 40px;}
}
@media (max-width: 640px){
.public-auth-main{padding: 18px 14px 28px;}
.auth-side,
.auth-panel{padding: 20px;}
.auth-hero-art{grid-template-columns: 1fr;}
.auth-tabs{display: flex;
    width: 100%;}
.auth-tab{flex: 1 1 0;
    text-align: center;}
}
html.a11y-contrast-dark .page-public--auth,
html.a11y-contrast-dark .page-public--auth .auth-side,
html.a11y-contrast-dark .page-public--auth .auth-panel,
html.a11y-contrast-dark .page-public--auth .auth-art-card,
html.a11y-contrast-dark .page-public--auth .auth-benefit,
html.a11y-contrast-dark .page-public--auth .auth-tabs,
html.a11y-contrast-dark .page-public--auth .auth-radio,
html.a11y-contrast-dark .page-public--auth .auth-form-panel,
html.a11y-contrast-dark .page-public--auth .auth-callout,
html.a11y-contrast-dark .page-public--auth .auth-zone-chip{
  background: #0f172a !important;
  border-color: var(--border) !important;
  color: var(--text-dark) !important;
  box-shadow: none !important;
}
html.a11y-contrast-dark .page-public--auth .auth-kicker,
html.a11y-contrast-dark .page-public--auth .auth-panel-head h2,
html.a11y-contrast-dark .page-public--auth .auth-side h1,
html.a11y-contrast-dark .page-public--auth .auth-art-card strong,
html.a11y-contrast-dark .page-public--auth .auth-benefit strong,
html.a11y-contrast-dark .page-public--auth .auth-field label{
  color: #f8fafc !important;
}
html.a11y-contrast-dark .page-public--auth .auth-side p,
html.a11y-contrast-dark .page-public--auth .auth-art-card span,
html.a11y-contrast-dark .page-public--auth .auth-benefit span,
html.a11y-contrast-dark .page-public--auth .auth-panel-head p,
html.a11y-contrast-dark .page-public--auth .auth-helper,
html.a11y-contrast-dark .page-public--auth .auth-panel-meta,
html.a11y-contrast-dark .page-public--auth .auth-countdown,
html.a11y-contrast-dark .page-public--auth .auth-callout{
  color: var(--text-light) !important;
}
html.a11y-contrast-dark .page-public--auth .auth-link-btn,
html.a11y-contrast-dark .page-public--auth .auth-resend-btn{
  color: var(--info-bg) !important;
}
html.a11y-contrast-dark .page-public--auth .auth-link-btn:hover,
html.a11y-contrast-dark .page-public--auth .auth-resend-btn:hover{
  color: var(--brand-line) !important;
}
html.a11y-contrast-dark .page-public--auth .auth-tab{
  color: var(--text-light) !important;
}
html.a11y-contrast-dark .page-public--auth .auth-tab.is-active{
  background: var(--info) !important;
  color: var(--info-bg) !important;
}
html.a11y-contrast-dark .page-public--auth .auth-field .text-box{
  background: #111827 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
html.a11y-contrast-dark .page-public--auth .auth-field .text-box::placeholder{
  color: var(--text-muted) !important;
}
html.a11y-contrast-dark .page-public--auth .auth-art-icon,
html.a11y-contrast-dark .page-public--auth .auth-benefit-icon{
  background: #162033 !important;
  color: #f8fafc !important;
}
.auth-side,
.auth-panel{ justify-content: flex-start;
}
.auth-side{ padding-top: clamp(44px, 7vh, 92px);
}
.auth-panel{ padding-top: clamp(44px, 7vh, 92px);
}
.auth-form-panel.is-active{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 16px;
}
.auth-field{ gap: 6px;
}
.auth-field label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
}
.auth-field .text-box,
.auth-field .select-box{
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
.auth-field .text-box:focus,
.auth-field .select-box:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.auth-field .text-box::placeholder{ color: var(--text-muted);
}
.auth-error{ color: var(--danger);
}
.auth-tabs{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.auth-tab{
  border: 0;
  border-radius: 7px;
  padding: 9px 18px;
  background: transparent;
  color: var(--text-light);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.auth-tab.is-active{
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--sh-1);
}
.auth-submit-row{ display: flex; gap: 10px;
}
.auth-submit-row .btn:not([class*="btn--"]){ flex: 1 1 auto; justify-content: center;
}
.auth-submit-row .btn.ghost:not([class*="btn--"]){ flex: 0 0 auto;
}
.auth-callout{
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-text);
  border-radius: 10px;
}
.page-public--auth{ background: var(--surface-muted);
}
.auth-panel{
  display: block;
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  margin: clamp(44px, 7vh, 92px) 0;
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--sh-2);
}
.auth-panel > *{ max-width: none; margin-inline: 0;
}
.auth-panel-head{ margin-bottom: 16px; gap: 4px;
}
.auth-tabs{ margin-bottom: 16px;
}
.auth-form-panel.is-active{ gap: 12px;
}
.auth-form-grid{ gap: 12px;
}
.auth-field{ gap: 5px;
}
.auth-stage.is-visible{ gap: 12px;
}
.auth-inline--compact{ margin-top: 2px;
}
.auth-inline--md{ margin-top: 8px;
}
.auth-inline--lg{ margin-top: 10px;
}
.auth-submit-row{ margin-top: 4px;
}
.auth-error{ min-height: 0;
}
@media (max-width: 980px){
.auth-panel{margin: 22px auto;}
}
.auth-panel{ max-width: 580px;
}
.auth-form-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 12px;
}
.auth-form-grid > .auth-field:only-child{ grid-column: 1 / -1;
}
#registerVerifyBlock{ grid-template-columns: 1fr;
}
@media (max-width: 560px){
.auth-form-grid{grid-template-columns: 1fr;}
}
.auth-submit-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.auth-submit-row .btn:not([class*="btn--"]){
  flex: 0 0 auto;
  min-width: 150px;
  justify-content: center;
}
.auth-submit-row .btn.ghost:not([class*="btn--"]){ min-width: 0;
}
.auth-form-grid > .auth-submit-row,
.auth-form-grid > .auth-callout,
.auth-form-grid > .auth-otp-meta,
.auth-form-grid > .auth-inline{ grid-column: 1 / -1;
}
.page-info--contact .auth-panel{ max-width: 680px;
}
.page-info--contact .info-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.page-info--contact .info-field--full{ grid-column: 1 / -1;
}
.page-info--contact .info-form-actions{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-info--contact .info-form-note{ flex: 1 1 200px;
}
.page-info--contact .info-form-actions .btn:not([class*="btn--"]){ min-width: 150px;
}
.auth-benefit a{ color: var(--orange-200); text-decoration: underline; text-underline-offset: 2px;
}
.auth-benefit a:hover{ color: #ffffff;
}
@media (max-width: 560px){
.page-info--contact .info-form-grid{grid-template-columns: 1fr;}
}
.auth-field--full{ grid-column: 1 / -1;
}
.auth-field .text-box::placeholder,
.auth-field textarea.text-box::placeholder{ color: var(--text-muted);
}
.auth-field textarea.text-box{ min-height: 110px; resize: vertical; line-height: 1.5;
}
.auth-field.has-error .text-box,
.auth-field.has-error .select-box,
.auth-field.has-error .cselect__trigger{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.page-info--contact .auth-submit-row{ justify-content: space-between; align-items: center;
}
.page-info--contact .auth-submit-row .auth-helper{ flex: 1 1 220px;
}
/* ============ about us ============ */
.page-about main{
  background: var(--bg-soft);
  position: relative;
  z-index: 0;
}
.page-about main::before{
  content: "";
  position: fixed;
  inset: auto;
  top: 40%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(233, 166, 118, 0.16), transparent 60%);
  pointer-events: none;
  opacity: 0.55;
  z-index: -1;
}
.page-about .section{
  padding: clamp(2.6rem, 6vw, 4rem) 0;
}
.page-about .section + .section{
  border-top: 1px solid var(--line);
}
.page-about .local-nav{
  position: sticky;
  top: 72px; /* desktop offset below header */
  z-index: 900;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-2);
  margin-bottom: 8px;
}
.page-about .local-nav-wrap{
  display: flex;
  gap: 10px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-about .pill-link{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.page-about .pill-link:hover{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-heading);
}
.page-about .pill-link.active{
  background: var(--orange-50);
  border-color: var(--orange-200);
  color: var(--orange-text);
  transform: translateY(-1px);
}
body.page-about.scrolled .local-nav{
  box-shadow: var(--sh-2);
}
.page-about .hero.hero--sm{
  min-height: 46vh;
}
.page-about .hero.hero--sm .hero-overlay{
  background: linear-gradient(180deg, rgba(8, 28, 56, 0.52), rgba(8, 28, 56, 0.78));
}
.page-about .hero-title{
  color: #ffffff;
  max-width: 780px;
}
.page-about .hero-sub{
  color: #e8eef9;
  max-width: 820px;
}
.page-about .hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.page-about main .section-title{
  position: relative;
  margin-bottom: 10px;
}
.page-about main .section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-200));
}
.page-about .card .section-title[style*="font-size"]::after{
  display: none;
}
.page-about #overview .card{
  min-height: 100%;
}
.page-about #overview .grid-3{
  gap: 20px;
  margin-top: 22px;
}
.page-about .check-list li{
  margin: 0.35rem 0;
}
.page-about .section--band{
  border-top: none;
  padding-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.page-about .image-band{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.page-about .image-band--invert{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.page-about .image-band--invert .image-band-media{
  order: 2;
}
.page-about .image-band--invert .image-band-content{
  order: 1;
}
.page-about .image-band-media{
  position: relative;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(135deg, rgba(41, 93, 165, 0.25), rgba(41, 93, 165, 0.7)),
    url("../images/hero-parking.jpg");
}
.page-about .image-band-media.media-street{
  background-image:
    linear-gradient(135deg, rgba(41, 93, 165, 0.25), rgba(41, 93, 165, 0.7)),
    url("../images/hero-parking.jpg");
}
.page-about .image-band-media.media-control{
  background-image:
    linear-gradient(135deg, rgba(41, 93, 165, 0.25), rgba(41, 93, 165, 0.7)),
    url("../images/hero-parking.jpg");
}
.page-about .image-band-content{
  background: var(--info);
  color: #ffffff;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.page-about .image-band-content .section-title{
  color: #ffffff;
  margin-bottom: 6px;
}
.page-about .image-band-content .section-title::after{
  background: linear-gradient(90deg, var(--orange-200), var(--surface));
}
.page-about .image-band-content .lead{
  color: #e2e8f0;
  font-size: 0.98rem;
}
.page-about .image-band-content .check-list{
  color: #e5edf7;
  font-size: 0.9rem;
  margin-top: 8px;
}
.page-about .image-band-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.page-about .image-band-badges .chip{
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f9fafb;
}
.page-about .section--band-alt{
  padding-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.page-about #rfid-anpr .grid-2{
  gap: 20px;
}
.page-about #rfid-anpr .card{
  min-height: 100%;
}
.page-about #services .grid-3{
  gap: 20px;
}
.page-about .card--with-image{
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}
.page-about .card--with-image .card-media{
  height: 120px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-about .card--with-image .card-body{
  padding: 14px 16px 16px;
}
.page-about .card--with-image .card-body .section-title{
  margin-bottom: 6px;
  font-size: 1.02rem;
}
.page-about .card--with-image .card-body .section-title::after{
  display: none;
}
.page-about .card--with-image .check-list{
  margin-top: 4px;
}
.page-about .industries .grid-3{
  gap: 20px;
}
.page-about .industries .card{
  padding: 16px 16px 18px;
}
.page-about .industries .tag{
  margin-top: 6px;
}
.page-about #faq .accordion{
  margin-top: 10px;
}
.page-about #faq .acc-panel.open{
  color: var(--text);
}
.page-about .cta-wrap{
  background: linear-gradient(135deg, var(--navy), var(--navy-600));
  color: #ffffff;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--sh-2);
}
.page-about .cta-wrap h3{
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.page-about .cta-wrap p{
  margin: 0;
  opacity: 0.95;
}
.page-about .cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-about .muted{
  color: var(--text-light);
}
.page-about .stat{
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  padding: 18px;
  text-align: center;
}
.page-about .stat-num{
  color: var(--text-heading);
  font-size: 1.5rem;
  font-weight: 700;
}
.page-about .stat-label{
  color: var(--text-secondary);
  font-size: 0.85rem;
}
@media (max-width: 980px){
.page-about .cta-wrap{align-items: flex-start;}
.page-about .image-band,
.page-about .image-band--invert{grid-template-columns: 1fr;}
.page-about .image-band-media{min-height: 220px;}
.page-about .image-band--invert .image-band-media,
.page-about .image-band--invert .image-band-content{order: initial;}
}
@media (max-width: 768px){
.page-about .hero.hero--sm{min-height: 40vh;}
.page-about .hero-ctas{flex-direction: row;
    justify-content: flex-start;}
.page-about .cta-wrap{padding: 18px 16px;}
.page-about .cta-actions{width: 100%;
    justify-content: flex-start;}
}
@media (max-width: 640px){
.page-about .local-nav{top: 56px; /* smaller offset when header is sticky on mobile */}
.page-about .hero-title{font-size: clamp(1.4rem, 5.5vw, 1.8rem);}
.page-about .cta-wrap{flex-direction: column;
    align-items: flex-start;}
.page-about .cta-actions{width: 100%;}
}
.page-about .section-overview{
  position: relative;
  background: radial-gradient(circle at top left, rgba(233, 166, 118, 0.09) 0, transparent 45%),
              radial-gradient(circle at bottom right, rgba(41, 93, 165, 0.06) 0, transparent 50%),
              var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.page-about .overview-header{
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: left;
}
.page-about .overview-header .section-title{
  margin-bottom: 6px;
}
.page-about .eyebrow{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange-text);
  margin-bottom: 4px;
}
.page-about .overview-main{
  gap: 24px;
}
.page-about .overview-card{
  position: relative;
  overflow: hidden;
}
.page-about .overview-card--origins{
  border-left: 4px solid var(--orange-200);
  padding-top: 18px;
  padding-bottom: 20px;
}
.page-about .overview-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.page-about .overview-card-title{
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--text-heading);
}
.page-about .overview-card-text{
  margin: 0 0 8px;
  color: var(--text);
}
.page-about .overview-card--evolution{
  padding: 0;
  display: flex;
  flex-direction: column;
}
.page-about .overview-media-tag{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
}
.page-about .pill.pill-soft{
  background: var(--surface);
  color: var(--text-heading);
  border-color: var(--line);
  opacity: 0.95;
}
.page-about .overview-media{
  position: relative;
  height: 150px;
  margin: 8px 16px 0;
  border-radius: 14px;
  overflow: hidden;
}
.page-about .overview-media-img{
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-parking.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 0.35s ease;
}
.page-about .overview-media-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8, 28, 56, 0.78), rgba(244, 120, 32, 0.65));
  mix-blend-mode: multiply;
}
.page-about .overview-media-content{
  padding: 14px 16px 16px;
}
.page-about .overview-card--evolution:hover .overview-media-img{
  transform: scale(1.06);
}
.page-about .overview-pillars{
  margin-top: 22px;
  gap: 20px;
}
.page-about .overview-pillar{
  padding: 16px 16px 18px;
  position: relative;
}
.page-about .overview-pillar::before{
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--orange), var(--navy));
  opacity: 0.75;
}
.page-about .overview-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 8px;
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  color: var(--orange-text);
}
.page-about .overview-icon svg{
  width: 20px;
  height: 20px;
}
.page-about .overview-pillar-title{
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--text-heading);
}
.page-about .section-overview p{
  color: var(--text);
}
@media (max-width: 980px){
.page-about .overview-main{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
.page-about .overview-header{text-align: left;}
.page-about .overview-media{height: 140px;
    margin-inline: 12px;}
.page-about .overview-media-content{padding-inline: 12px;}
}
.page-about .section-why{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-about .why-header{
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: left;
}
.page-about .why-grid{
  gap: 20px;
}
.page-about .why-card{
  padding: 18px 16px 18px;
  position: relative;
  overflow: hidden;
}
.page-about .why-card::before{
  content: "";
  position: absolute;
  inset-inline: 16px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--navy));
  opacity: 0.8;
}
.page-about .why-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  margin: 6px 0 8px;
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  color: var(--orange-text);
}
.page-about .why-icon svg{
  width: 20px;
  height: 20px;
}
.page-about .why-title{
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--text-heading);
}
.page-about .section-rfid{
  background: radial-gradient(circle at top right, rgba(41, 93, 165, 0.08) 0, transparent 50%),
              var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.page-about .rfid-header{
  max-width: 780px;
  margin: 0 auto 22px;
}
.page-about .rfid-grid{
  gap: 20px;
  margin-bottom: 18px;
}
.page-about .rfid-card{
  padding: 16px 16px 18px;
  border-radius: 14px;
}
.page-about .rfid-card--rfid{
  border-left: 4px solid var(--orange-200);
}
.page-about .rfid-card--anpr{
  border-left: 4px solid var(--navy-600);
}
.page-about .rfid-badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.page-about .rfid-title{
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--text-heading);
}
.page-about .rfid-combined{
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.3fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.page-about .rfid-combined-media{
  position: relative;
  min-height: 160px;
}
.page-about .rfid-combined-img{
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-parking.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 0.35s ease;
}
.page-about .rfid-combined-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(8, 28, 56, 0.9), rgba(244, 120, 32, 0.7));
}
.page-about .rfid-combined-content{
  padding: 18px 18px 18px;
}
.page-about .rfid-combined-title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--text-heading);
}
.page-about .rfid-combined:hover .rfid-combined-img{
  transform: scale(1.06);
}
@media (max-width: 900px){
.page-about .rfid-combined{grid-template-columns: 1fr;}
}
.page-about .section-services{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-about .services-header{
  max-width: 780px;
  margin: 0 auto 22px;
}
.page-about .services-grid{
  gap: 20px;
}
.page-about .service-card{
  position: relative;
  padding: 18px 16px 18px;
}
.page-about .service-card::before{
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-200), var(--navy));
  opacity: 0.8;
}
.page-about .service-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-heading);
}
.page-about .service-icon svg{
  width: 20px;
  height: 20px;
}
.page-about .service-title{
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--text-heading);
}
.page-about .service-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.page-about .section-services .tag{
  background: var(--orange-50);
  color: var(--orange-text);
  border-color: var(--orange-200);
}
.page-about .services-strip{
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(41, 93, 165, 0.07), rgba(233, 166, 118, 0.08));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.page-about .services-strip-item{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-about .services-strip-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-light);
}
.page-about .services-strip-value{
  font-size: 13px;
  color: var(--text-secondary);
}
@media (max-width: 768px){
.page-about .services-strip{grid-template-columns: 1fr;}
}
.page-about .section-industries{
  background: radial-gradient(circle at top left, rgba(233, 166, 118, 0.08) 0, transparent 50%),
              var(--surface-2);
}
.page-about .industries-header{
  max-width: 780px;
  margin: 0 auto 18px;
}
.page-about .industries-rail{
  margin-bottom: 18px;
}
.page-about .industries-grid{
  gap: 20px;
}
.page-about .industries .card{
  padding: 16px 16px 18px;
  position: relative;
  overflow: hidden;
}
.page-about .industries .card:hover{
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.page-about .industries .card::after{
  content: "";
  position: absolute;
  inset-inline: auto 0;
  top: 0;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at top right, rgba(233, 166, 118, 0.28) 0, transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}
.page-about .ind-title{
  margin: 0 0 4px;
}
@media (max-width: 900px){
.page-about .why-grid,
.page-about .services-grid,
.page-about .industries-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px){
.page-about .why-grid,
.page-about .services-grid,
.page-about .industries-grid{grid-template-columns: 1fr;}
}
.page-about .section{
  padding: clamp(2.6rem, 5vw, 3.6rem) 0;
}
.page-about .overview-main > .overview-card,
.page-about .overview-pillars > .overview-pillar,
.page-about .why-grid > .why-card,
.page-about .services-grid > .service-card,
.page-about .industries-grid > .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-about .service-card .check-list,
.page-about .ind-card .ind-desc{
  margin-bottom: 10px;
}
@media (max-width: 1024px){
.page-about .overview-card,
.page-about .overview-pillar,
.page-about .why-card,
.page-about .service-card,
.page-about .industries .card{padding: 16px 14px 16px;}
.page-about .hero.hero--sm{min-height: 40vh;}
}
@media (max-width: 900px) and (min-width: 641px){
.page-about .overview-main,
.page-about .why-grid,
.page-about .services-grid,
.page-about .industries-grid{grid-template-columns: 1fr 1fr;
    gap: 18px;}
.page-about .overview-pillars{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px){
.page-about .overview-main,
.page-about .overview-pillars,
.page-about .why-grid,
.page-about .services-grid,
.page-about .industries-grid{grid-template-columns: 1fr;
    gap: 16px;}
.page-about .container{padding-inline: 14px;}
.page-about .services-strip{padding: 10px 12px;}
.page-about .industries-rail{gap: 6px;}
}
.page-about .overview-card,
.page-about .why-card,
.page-about .service-card,
.page-about .industries .card{
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.page-about .overview-card:hover,
.page-about .why-card:hover,
.page-about .service-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: var(--line);
}
@media (max-width: 768px){
.page-about .why-grid,
.page-about .services-grid,
.page-about .industries-grid{grid-template-columns: 1fr !important;}
}

/* ---------------------------------------------------------------------------
   The legal-page card must not run into the edge of the screen.

   Its markup is <div class="container info-stack">: one element is both the page container and
   the card. The card's own padding therefore REPLACES the container's gutter instead of sitting
   inside it, so on a narrow screen a bordered, rounded card sat flush against both edges — the
   radius curving into nothing and the hairline running off the glass.

   The inset is given back as margin so the card keeps its shape. width:auto because .container
   sets width:100%, which would otherwise push the margins into overflow.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .page-info:not(.page-info--contact) .info-stack {
    width: auto;
    margin-inline: 16px;
  }
}