/* ==========================================================================
   SoftSystem — "Apple" design experiment
   Standalone stylesheet for index-apple.html ONLY.
   Does not touch assets/styles.css or any live page.

   Built on the Apple design foundations: purpose, agency, responsibility,
   familiarity, flexibility, simplicity, craft, delight.
   Every value below is deliberate. Motion is compositor-only
   (transform + opacity), interruptible, and respects user settings.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  color-scheme: light;   /* light theme only */

  /* Neutral Apple-ish greys */
  --ink:        #1d1d1f;
  --ink-2:      #424245;
  --muted:      #6e6e73;
  --bg:         #ffffff;
  --bg-soft:    #f5f5f7;
  --bg-deep:    #000000;
  --hairline:   rgba(0,0,0,.10);
  --hairline-2: rgba(0,0,0,.055);

  /* Accents — brand orange survives as a small accent only */
  --accent:     #0071e3;   /* action blue */
  --accent-ink: #0066cc;
  --brand:      #f39019;   /* SoftSystem orange */
  --green:      #25d366;

  /* Surface + depth */
  --card:       rgba(255,255,255,.72);
  --card-solid: #ffffff;
  --r-sm:  12px;
  --r:     18px;
  --r-lg:  28px;
  --r-xl:  36px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.10);
  --shadow-3: 0 4px 12px rgba(0,0,0,.08), 0 40px 90px rgba(0,0,0,.16);

  /* Rhythm */
  --maxw: 1024px;
  --maxw-wide: 1240px;
  --pad: clamp(22px, 5vw, 40px);

  /* Motion — critically damped by default (damping 1.0, response ~0.4s) */
  --ease-out: cubic-bezier(.25,.1,.25,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);      /* Apple sheet curve */
  --spring: cubic-bezier(.2,.9,.25,1.02);       /* slight momentum bounce */
  --t-press: 100ms;
  --t-ui: 400ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font: 100%/1.5 var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
section{scroll-margin-top:112px}
::selection{background:color-mix(in srgb, var(--accent) 25%, transparent)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--pad)}

/* ---------- TYPE SCALE ----------
   Weight drives hierarchy; tracking goes negative as text grows. */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.06;font-optical-sizing:auto}
.display{
  font-size:clamp(2.6rem, 7vw, 5.5rem);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.025em;
}
.title{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.022em;line-height:1.07}
.subtitle{font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:400;line-height:1.35;letter-spacing:-.01em;color:var(--muted)}
.eyebrow{
  display:block;font-size:.8125rem;font-weight:600;letter-spacing:.012em;
  color:var(--accent);margin-bottom:.7em;
}
.brand-accent{color:var(--brand)}
p{line-height:1.5}
.lede{font-size:1.0625rem;line-height:1.55;color:var(--ink-2)}
small,.small{font-size:.8125rem;letter-spacing:.01em}   /* positive tracking when small */

.section-head{max-width:720px;margin:0 auto clamp(38px,6vw,68px);text-align:center}
.section-head p{margin-top:.6em;color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.45;letter-spacing:-.005em}

/* ---------- LINK CHEVRON (Apple's blue link) ---------- */
.link{
  display:inline-flex;align-items:center;gap:.28em;
  color:var(--accent);font-size:1.0625rem;letter-spacing:-.01em;
  transition:opacity var(--t-press) var(--ease-out);
}
.link::after{content:"›";font-size:1.28em;line-height:0;transform:translateY(-.03em);
  transition:transform 300ms var(--ease-soft)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link:hover::after{transform:translate(3px,-.03em)}

/* ---------- BUTTONS (pill, press-down feedback at 100ms) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  padding:12px 23px;border-radius:980px;border:1px solid transparent;
  font-size:1.0625rem;font-weight:400;letter-spacing:-.01em;cursor:pointer;
  transition:background-color 200ms var(--ease-out),
             color 200ms var(--ease-out),
             border-color 200ms var(--ease-out),
             transform var(--t-press) ease-out;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);filter:brightness(1.06)}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn-quiet{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.btn-quiet:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.btn-onDark{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(12px)}
.btn-onDark:hover{background:rgba(255,255,255,.26)}
.btn-wa{background:var(--green);color:#08301a}
.btn-wa:hover{filter:brightness(1.06)}
.btn-sm{padding:8px 17px;font-size:.9375rem}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;
}

/* ==========================================================================
   NAV — translucent material, 48px, Apple global bar
   ========================================================================== */
.nav-shell{position:sticky;top:0;z-index:900}
.navbar{
  height:64px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline-2);
}
.navbar .wrap-wide{display:flex;align-items:center;gap:6px;height:100%}
.nav-logo{display:flex;align-items:center;padding-right:14px}
.nav-logo img{height:36px;width:auto}
.nav-logo .word{font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-links>li>button{
  display:block;padding:8px 12px;font-size:.8125rem;line-height:1;letter-spacing:.01em;
  color:var(--ink);opacity:.86;background:none;border:0;cursor:pointer;border-radius:8px;
  transition:opacity 200ms var(--ease-out);
}
.nav-links>li>a:hover,.nav-links>li>button:hover{opacity:1}
.nav-cta{margin-left:10px}

/* Full-width drop panel, originates from the bar (transform-origin: top) */
.drop{
  position:absolute;left:0;right:0;top:64px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid var(--hairline-2);
  box-shadow:var(--shadow-2);
  overflow:hidden;
  transform-origin:top center;
  opacity:0;visibility:hidden;
  transform:translateY(-8px) scale(.995);
  transition:opacity 260ms var(--ease-soft), transform 400ms var(--ease-soft), visibility 0s 400ms;
}
.drop.open{opacity:1;visibility:visible;transform:none;transition:opacity 200ms var(--ease-soft), transform 400ms var(--ease-soft), visibility 0s}
.drop-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 40px;padding:34px var(--pad) 40px}
.drop h5{font-size:.75rem;font-weight:400;color:var(--muted);letter-spacing:.01em;margin-bottom:12px}
.drop a{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.015em;line-height:1.5;
  transition:color 160ms var(--ease-out)}
.drop a:hover{color:var(--accent)}
.drop a span{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);letter-spacing:0;line-height:1.4;margin-top:-2px}

/* Announcement strip under the bar */
.ribbon{
  background:var(--bg-soft);text-align:center;font-size:.875rem;color:var(--muted);
  padding:11px var(--pad);letter-spacing:-.005em;border-bottom:1px solid var(--hairline-2);
}
.ribbon a{color:var(--accent)}
.ribbon a:hover{text-decoration:underline;text-underline-offset:3px}

.nav-toggle{display:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;text-align:center;
  padding:clamp(70px,11vw,132px) 0 clamp(56px,8vw,96px);
  overflow:hidden;
}
.hero>.wrap{position:relative;z-index:1}
.hero .display{margin-bottom:.22em}
.hero .subtitle{max-width:620px;margin:0 auto}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.hero-links{display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:center;margin-top:26px}
.hero-note{margin-top:34px;color:var(--muted);font-size:.8125rem;letter-spacing:.01em}

/* Soft aurora behind the hero — slow, low-contrast, disabled for reduced motion */
.aurora{position:absolute;left:-8%;right:-8%;top:-90px;height:640px;pointer-events:none;z-index:0;
  filter:blur(80px);opacity:.26}
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora i:nth-child(1){width:460px;height:460px;left:8%;top:0;background:radial-gradient(circle,#f39019,transparent 68%)}
.aurora i:nth-child(2){width:520px;height:520px;right:6%;top:40px;background:radial-gradient(circle,#0071e3,transparent 68%)}
.aurora i:nth-child(3){width:380px;height:380px;left:44%;top:120px;background:radial-gradient(circle,#ff5e8a,transparent 68%)}

/* Hero device panel */
.hero-stage{margin-top:clamp(38px,6vw,64px)}
.panel{
  position:relative;border-radius:var(--r-xl);padding:clamp(30px,5vw,60px);
  background:linear-gradient(165deg,#1d3557,#0b1c33 62%,#050d18);
  color:#fff;box-shadow:var(--shadow-3);overflow:hidden;
}
.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.10);pointer-events:none}
.panel-logo{height:34px;width:auto;margin:0 auto 26px;opacity:.95}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chips span{
  padding:8px 16px;border-radius:980px;font-size:.8125rem;letter-spacing:.01em;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);color:#fff;font-weight:500;
}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,32px);
  padding:clamp(46px,7vw,80px) 0;border-top:1px solid var(--hairline-2)}
.stat{text-align:center}
.stat b{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.025em;line-height:1}
.stat span{display:block;margin-top:.55em;font-size:.875rem;color:var(--muted);letter-spacing:-.005em;line-height:1.35}

/* ==========================================================================
   SECTIONS & SURFACES
   ========================================================================== */
.pad{padding:clamp(64px,10vw,128px) 0}
.soft{background:var(--bg-soft)}
.dark{background:var(--bg-deep);color:#f5f5f7}
.dark h1,.dark h2,.dark h3,.dark h4{color:#f5f5f7}
.dark .section-head p,.dark .muted{color:#a1a1a6}
.dark .eyebrow{color:#2997ff}

.grid{display:grid;gap:clamp(16px,2.2vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* Cards — a light material never stacked on another light material:
   cards sit on the soft grey band, or solid on white. */
.card{
  position:relative;background:var(--card-solid);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-1);
  transition:transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
  will-change:transform;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.card:active{transform:translateY(-1px) scale(.995);transition-duration:var(--t-press)}
.card .tag{
  display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hairline);border-radius:980px;padding:4px 11px;margin-bottom:16px;
}
.card .tag.is-brand{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.card h3{font-size:1.5rem;margin-bottom:.35em}
.card p{color:var(--muted);font-size:.9375rem;line-height:1.5}
.card ul{list-style:none;margin:18px 0 0}
.card ul li{position:relative;padding-left:22px;font-size:.9375rem;color:var(--ink-2);margin-bottom:8px;line-height:1.45}
.card ul li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75}
.card .price{margin-top:20px;font-size:.9375rem;font-weight:600}
.card .price small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.card .link{margin-top:16px}

.group{margin-bottom:clamp(34px,5vw,58px)}
/* Groups hold 1–2 cards; centred tracks keep the row deliberate rather than
   leaving an accidental hole on the right. */
.group .grid{grid-template-columns:repeat(auto-fit,minmax(0,340px));justify-content:center}
.group-head{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--hairline-2);text-align:center}
.group-head h3{font-size:1.3125rem}
.group-head span{display:block;font-size:.875rem;color:var(--muted);margin-top:4px;letter-spacing:-.005em}

/* ---------- COMPARE TABLE ---------- */
.table-shell{overflow-x:auto;border-radius:var(--r);border:1px solid var(--hairline-2);background:var(--card-solid)}
table.compare{width:100%;border-collapse:collapse;min-width:720px;font-size:.9375rem}
table.compare th{
  text-align:left;padding:16px 20px;font-size:.75rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hairline-2);
}
table.compare td{padding:16px 20px;border-bottom:1px solid var(--hairline-2);color:var(--ink-2)}
table.compare tr:last-child td{border-bottom:0}
table.compare tbody tr{transition:background-color 200ms var(--ease-out)}
table.compare tbody tr:hover{background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
table.compare a{color:var(--accent);font-weight:500}

/* ---------- INDUSTRIES ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,18px)}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  aspect-ratio:1/.82;border-radius:var(--r-lg);background:var(--card-solid);
  border:1px solid var(--hairline-2);font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  transition:transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
  will-change:transform;text-align:center;padding:12px;
}
.tile em{font-style:normal;font-size:2rem;line-height:1;transition:transform 500ms var(--spring)}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.tile:hover em{transform:scale(1.14) translateY(-2px)}
.tile:active{transform:translateY(-1px) scale(.98);transition-duration:var(--t-press)}

/* ---------- SEGMENTED CONTROL + SERVICE PANELS ---------- */
.segmented{
  display:flex;gap:2px;padding:3px;border-radius:980px;margin:0 auto 40px;width:max-content;max-width:100%;
  background:color-mix(in srgb,var(--ink) 7%,transparent);overflow-x:auto;
}
.segmented button{
  position:relative;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  padding:9px 20px;border-radius:980px;font-size:.9375rem;letter-spacing:-.01em;color:var(--ink);
  transition:color 200ms var(--ease-out), transform var(--t-press) ease-out;
}
.segmented button:active{transform:scale(.97)}
.segmented button[aria-selected="true"]{
  background:var(--card-solid);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:500;
}
.svc-panel{display:none;text-align:center;max-width:760px;margin:0 auto}
.svc-panel.active{display:block;animation:fadeUp 420ms var(--ease-soft) both}
.svc-panel h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.4em}
.svc-panel p{color:var(--muted);font-size:1.0625rem;line-height:1.5}
.pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:26px 0 24px}
.pills span{padding:7px 15px;border-radius:980px;background:color-mix(in srgb,var(--ink) 6%,transparent);
  font-size:.8125rem;letter-spacing:.005em;color:var(--ink-2)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- SERVICES panel, split layout (variant C, chosen 20 Aug) ----------
   The segmented control and .svc-panel above are unchanged; .is-split widens
   one panel to the wide rail and turns it into copy + situation card. */
.svc-panel.is-split{max-width:var(--maxw-wide);text-align:left}
.csplit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);align-items:start}
.csplit h3{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.4em}
.csplit .c-left>p{color:var(--muted);font-size:1.0625rem;line-height:1.55;max-width:48ch}
.csplit .c-left .link{margin-top:18px}

/* Pills that are actually links — each lands on its own line in the sub-page. */
.plinks{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.plinks a{
  padding:7px 14px;border-radius:980px;font-size:.8125rem;letter-spacing:.005em;
  color:var(--ink-2);background:color-mix(in srgb,var(--ink) 6%,transparent);
  transition:background 180ms var(--ease-out), color 180ms var(--ease-out),
             transform var(--t-press) ease-out;
}
.plinks a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink)}
.plinks a:active{transform:scale(.97)}

/* The situation card — the visitor's own words, then the recommendation. */
.sitq{
  padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);
  background:var(--card-solid);border:1px solid var(--hairline-2);box-shadow:var(--shadow-1);
}
.sitq .said{
  font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--hairline-2);
}
.sitq .lab{
  display:block;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.sitq .stack{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sitq .stack span{
  padding:6px 13px;border-radius:980px;font-size:.8125rem;font-weight:600;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-ink);
}
.sitq .stack span.alt{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);font-weight:400}
.sitq .why{font-size:.9375rem;line-height:1.6;color:var(--muted)}
.sitq .why b{color:var(--ink)}


/* ---------- WHY / SPLIT ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.checks{list-style:none;margin-top:28px}
.checks li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--hairline-2)}
.checks li:last-child{border-bottom:1px solid var(--hairline-2)}
.checks .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:.6875rem;margin-top:2px}
.checks b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.checks span{display:block;font-size:.875rem;color:var(--muted);margin-top:2px;line-height:1.45}
.year-card{border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);background:var(--bg-soft);border:1px solid var(--hairline-2)}
.year-card .y{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:600;letter-spacing:-.025em;line-height:1}
.year-card p{margin:16px 0 26px;color:var(--muted);font-size:.9375rem}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mini div{padding:16px;border-radius:var(--r);background:var(--card-solid);border:1px solid var(--hairline-2)}
.mini b{display:block;font-size:1.4rem;font-weight:600;letter-spacing:-.02em}
.mini span{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px}

/* ---------- PROOF ---------- */
body:not(.legacy) .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px)}
body:not(.legacy) .proof div{text-align:center;padding:30px 18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}
body:not(.legacy) .proof em{font-style:normal;display:block;font-size:1.8rem;margin-bottom:12px}
body:not(.legacy) .proof b{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
body:not(.legacy) .proof small{display:block;color:#a1a1a6;margin-top:4px}

/* ---------- DEPLOYMENT CARDS (on dark) ---------- */
.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.dcard{padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}
.dcard .kicker{display:block;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:#a1a1a6}
.dcard h3{font-size:1.375rem;margin:12px 0 10px}
.dcard p{font-size:.9375rem;line-height:1.55;color:#a1a1a6}

/* ---------- FAQ (accordion) ---------- */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--hairline-2)}
.faq details{border-bottom:1px solid var(--hairline-2)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;
  padding:22px 2px;font-size:1.0625rem;font-weight:500;letter-spacing:-.012em;
  transition:color 200ms var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform 400ms var(--ease-soft);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .answer{overflow:hidden}
.faq details[open] .answer p{animation:fadeUp 380ms var(--ease-soft) both}
.faq .answer p{padding:0 2px 24px;color:var(--muted);font-size:.9375rem;line-height:1.6;max-width:66ch}
.faq .answer b{color:var(--ink);font-weight:600}

/* ---------- CONTACT ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.form{background:var(--card-solid);border:1px solid var(--hairline-2);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow-1)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form select,.form textarea{
  width:100%;padding:14px 16px;margin-bottom:12px;border-radius:var(--r-sm);
  border:1px solid var(--hairline);background:var(--bg);color:var(--ink);
  font-size:1rem;letter-spacing:-.01em;
  transition:border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}
.form textarea{min-height:118px;resize:vertical}
.form .btn{width:100%;margin-top:4px}
.form .fine{font-size:.8125rem;color:var(--muted);margin-top:12px;text-align:center}
.next{list-style:none;margin-top:24px}
.next li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--hairline-2)}
.next .n{flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);
  display:grid;place-items:center;font-size:.75rem;font-weight:600}
.next b{display:block;font-size:.9375rem}
.next span{display:block;font-size:.875rem;color:var(--muted)}
.talk{margin-top:26px;padding:24px;border-radius:var(--r-lg);background:var(--bg-soft);border:1px solid var(--hairline-2)}
.talk h4{font-size:1.0625rem;margin-bottom:6px}
.talk p{font-size:.9375rem;color:var(--muted)}
.talk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- FOOTER ---------- */
footer.site{background:var(--bg-soft);padding:52px 0 38px;font-size:.875rem;color:var(--muted);
  border-top:1px solid var(--hairline-2)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:26px;
  border-bottom:1px solid var(--hairline-2)}
footer h5{font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:14px;letter-spacing:0}
footer .cols a{display:block;line-height:2.1;color:var(--muted);transition:color 160ms var(--ease-out)}
footer .cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
footer .about p{line-height:1.7;max-width:38ch}
footer .about img{height:32px;margin-bottom:16px}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:20px;line-height:1.6}

/* ---------- FLOATING WHATSAPP ---------- */
.wa{
  position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;
  background:var(--green);display:grid;place-items:center;font-size:1.4rem;z-index:800;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  transition:transform 420ms var(--spring), box-shadow 300ms var(--ease-out);
  will-change:transform;
}
.wa:hover{transform:scale(1.08)}
.wa:active{transform:scale(.95);transition-duration:var(--t-press)}

/* ==========================================================================
   SCROLL REVEAL — transform + opacity only, compositor friendly
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:60ms}.reveal.d2{transition-delay:120ms}
.reveal.d3{transition-delay:180ms}.reveal.d4{transition-delay:240ms}

/* ==========================================================================
   ACCESSIBILITY FALLBACKS
   ========================================================================== */
/* Brand mark: single navy lockup (light theme only). */
.logo-dark{display:none}

/* Small caption above a list */
.list-label{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:30px 0 -6px}

@media (prefers-reduced-transparency: reduce){
  .navbar,.drop{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .chips span,body:not(.legacy) .proof div{backdrop-filter:none;background:rgba(255,255,255,.14)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:200ms !important;   /* opacity cross-fade only */
  }
  .reveal{transform:none}
  .card:hover,.tile:hover,.wa:hover{transform:none}
  .aurora{display:none}
  .svc-panel.active{animation:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .csplit{grid-template-columns:1fr;gap:26px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  body:not(.legacy) .proof{grid-template-columns:repeat(2,1fr)}
  .dcards{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;padding:12px var(--pad) 22px;
    background:var(--bg);box-shadow:var(--shadow-2);
    border-bottom:1px solid var(--hairline-2)}
  .nav-links.open{display:flex;animation:fadeUp 300ms var(--ease-soft) both}
  .nav-links>li>a,.nav-links>li>button{width:100%;text-align:left;font-size:1.0625rem;padding:13px 2px;
    border-bottom:1px solid var(--hairline-2)}
  .nav-cta{margin:14px 0 0}
  .nav-cta .btn{width:100%}
  .nav-toggle{display:block;position:relative;margin-left:auto;width:34px;height:34px;
    background:none;border:0;cursor:pointer}
  .nav-toggle span{position:absolute;left:50%;top:50%;width:17px;height:1.5px;
    background:var(--ink);border-radius:2px;
    transform:translate(-50%,-50%) translateY(var(--y,0px));
    transition:transform 400ms var(--ease-soft), opacity 200ms var(--ease-out)}
  .nav-toggle span:nth-child(1){--y:-5px}
  .nav-toggle span:nth-child(3){--y:5px}
  .nav-toggle.on span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
  .nav-toggle.on span:nth-child(2){opacity:0}
  .nav-toggle.on span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
  .drop{display:none !important}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px 18px}
  .g2,.g3{grid-template-columns:1fr}
  .split,.contact{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .field-row{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  footer .cols{grid-template-columns:1fr}
}

/* ==========================================================================
   ADDED — restructure: hero variants, chooser, product rail, live demo
   ========================================================================== */

/* ---------- Preview-only hero switcher (delete before launch) ---------- */
.heroswitch{
  position:fixed;left:20px;bottom:20px;z-index:850;
  display:flex;gap:3px;padding:4px;border-radius:980px;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  box-shadow:var(--shadow-2);backdrop-filter:blur(14px);
}
.heroswitch button{
  border:0;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;
  padding:7px 16px;border-radius:980px;font-size:.8125rem;letter-spacing:-.01em;
  transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out);
}
.heroswitch button[aria-pressed="true"]{background:#fff;color:#1d1d1f;font-weight:500}
.heroswitch .lbl{color:rgba(255,255,255,.5);font-size:.75rem;padding:7px 6px 7px 12px;letter-spacing:.02em}

/* ---------- HERO A — wall of real product screens ---------- */
.hero-wall{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 88% at 50% 42%, #000 32%, transparent 78%);
          mask-image:radial-gradient(120% 88% at 50% 42%, #000 32%, transparent 78%);
}
.hero-wall .plate{
  position:absolute;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 50px rgba(15,23,42,.20), 0 2px 6px rgba(15,23,42,.10);
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  will-change:transform;
  animation:drift var(--dur,26s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
}
.hero-wall .plate img{width:100%;height:auto;display:block}
/* Scrim so the headline never fights the screens behind it */
.hero-wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 54% at 50% 44%,
              var(--bg) 30%,
              color-mix(in srgb, var(--bg) 72%, transparent) 55%,
              transparent 78%);
}
@keyframes drift{
  from{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  to{transform:translate3d(0,var(--travel,-16px),0) rotate(var(--rot,0deg))}
}
/* Placement — deliberately uneven, deeper plates smaller and paler */
.hero-wall .p1{left:-4%;  top:6%;   width:26%; --rot:-7deg;  --travel:-20px; --dur:24s; opacity:.85}
.hero-wall .p2{left:11%;  top:48%;  width:21%; --rot:5deg;   --travel:14px;  --dur:30s; --delay:-6s; opacity:.5}
.hero-wall .p3{left:-2%;  top:72%;  width:19%; --rot:9deg;   --travel:-12px; --dur:27s; --delay:-12s; opacity:.45}
.hero-wall .p4{right:-5%; top:4%;   width:27%; --rot:8deg;   --travel:18px;  --dur:26s; --delay:-3s; opacity:.85}
.hero-wall .p5{right:10%; top:46%;  width:21%; --rot:-6deg;  --travel:-15px; --dur:32s; --delay:-9s; opacity:.5}
.hero-wall .p6{right:-2%; top:71%;  width:18%; --rot:-10deg; --travel:12px;  --dur:29s; --delay:-15s; opacity:.44}
.hero-wall .p7{left:40%;  top:88%;  width:20%; --rot:2deg;   --travel:-10px; --dur:34s; --delay:-18s; opacity:.30}
@media (max-width:1100px){.hero-wall .p2,.hero-wall .p5,.hero-wall .p7{display:none}}
@media (max-width:860px){.hero-wall{opacity:.5}.hero-wall .p3,.hero-wall .p6{display:none}}
@media (prefers-reduced-motion: reduce){.hero-wall .plate{animation:none}}

/* ---------- HERO B — single interface panel ---------- */
.hero-panel-b{margin-top:clamp(40px,6vw,68px);perspective:1800px}
.screenframe{
  position:relative;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 4px 12px rgba(15,23,42,.08), 0 44px 90px rgba(15,23,42,.22);
  transform:rotateX(7deg) scale(.985);transform-origin:top center;
}
.screenframe img{width:100%;display:block}
.screenframe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%)}
.screencap{margin-top:16px;text-align:center;font-size:.8125rem;color:var(--muted);letter-spacing:.01em}

.hero-variant{display:none}
.hero-variant.on{display:block}

/* ==========================================================================
   THE CHOOSER
   ========================================================================== */
.chooser{
  max-width:860px;margin:0 auto;background:var(--card-solid);
  border:1px solid var(--hairline-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);padding:clamp(26px,4vw,48px);position:relative;overflow:hidden;
}
.q-progress{display:flex;gap:6px;justify-content:center;margin-bottom:28px}
.q-progress i{width:26px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);
  transition:background-color 300ms var(--ease-out)}
.q-progress i.on{background:var(--accent)}

.step{display:none}
.step.on{display:block;animation:fadeUp 420ms var(--ease-soft) both}
.step h3{font-size:clamp(1.4rem,2.6vw,2rem);text-align:center;margin-bottom:.35em}
.step .hint{text-align:center;color:var(--muted);font-size:.9375rem;margin-bottom:26px;max-width:52ch;
  margin-left:auto;margin-right:auto;line-height:1.5}

.opts{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.opts.one{grid-template-columns:1fr;max-width:520px;margin:0 auto}
.opt{
  display:flex;align-items:flex-start;gap:14px;text-align:left;width:100%;
  padding:20px;border-radius:var(--r);cursor:pointer;
  background:var(--bg-soft);border:1.5px solid transparent;
  transition:border-color 200ms var(--ease-out), background-color 200ms var(--ease-out),
             transform var(--t-press) ease-out;
}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.opt .ico{font-size:1.5rem;line-height:1.1;flex:none}
.opt b{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;margin-bottom:3px}
.opt span{display:block;font-size:.875rem;color:var(--muted);line-height:1.45}
.opt .box{flex:none;width:21px;height:21px;border-radius:6px;border:1.5px solid var(--hairline);
  display:grid;place-items:center;margin-top:2px;font-size:.7rem;color:#fff;
  transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.opt.sel .box{background:var(--accent);border-color:var(--accent)}

.q-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;flex-wrap:wrap}
.q-back{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9375rem;padding:8px 0}
.q-back:hover{color:var(--ink)}
.q-skip{font-size:.875rem;color:var(--muted)}
.q-skip a{color:var(--accent)}
.q-skip a:hover{text-decoration:underline;text-underline-offset:3px}

/* Result */
.result{text-align:center}
.result .rlabel{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.result h3{font-size:clamp(1.9rem,4vw,2.9rem);margin:.25em 0 .3em}
.result .why{font-size:1.0625rem;color:var(--ink-2);max-width:56ch;margin:0 auto;line-height:1.55}
.honest{
  margin:26px auto 0;max-width:60ch;text-align:left;padding:18px 20px;border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  font-size:.9375rem;line-height:1.55;color:var(--ink-2);
}
.honest b{color:var(--ink)}
.addons{margin:16px auto 0;max-width:60ch;text-align:left;font-size:.9375rem;color:var(--muted);line-height:1.6}
.addons li{margin-left:18px}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* Custom-build scoping form */
.scope{max-width:560px;margin:0 auto}
.scope label{display:block;font-size:.875rem;font-weight:600;margin:0 0 6px}
.scope input,.scope textarea,.scope select{
  width:100%;padding:13px 15px;margin-bottom:16px;border-radius:var(--r-sm);
  border:1px solid var(--hairline);background:var(--bg);font-size:1rem;letter-spacing:-.01em;
  transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out);
}
.scope textarea{min-height:96px;resize:vertical}
.scope :is(input,textarea,select):focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ==========================================================================
   PRODUCTS — sticky category rail
   ========================================================================== */
.prod-layout{display:grid;grid-template-columns:236px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.prod-rail{position:sticky;top:96px}
.prod-rail h4{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;padding-left:14px}
.prod-rail button{
  display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:12px 14px;border-radius:10px;font-size:.9375rem;letter-spacing:-.01em;color:var(--ink-2);
  transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out);
}
.prod-rail button small{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px;letter-spacing:0}
.prod-rail button:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.prod-rail button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 9%,transparent);
  color:var(--accent);font-weight:500}
.prod-rail button[aria-selected="true"] small{color:color-mix(in srgb,var(--accent) 72%,var(--muted))}
.prod-pane{display:none}
.prod-pane.on{display:grid;gap:clamp(16px,2.2vw,22px);grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  animation:fadeUp 400ms var(--ease-soft) both}
.prod-pane.on.solo{grid-template-columns:minmax(0,380px)}

@media (max-width:860px){
  .prod-layout{grid-template-columns:1fr}
  .prod-rail{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:none}
  .prod-rail::-webkit-scrollbar{display:none}
  .prod-rail h4{display:none}
  .prod-rail button{width:auto;white-space:nowrap;padding:9px 16px;border-radius:980px;
    background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .prod-rail button small{display:none}
  .prod-pane.on,.prod-pane.on.solo{grid-template-columns:1fr}
}

/* ==========================================================================
   LIVE DEMO — RetailWiz sale invoice, full fidelity
   ========================================================================== */
.demo-shell{max-width:1260px;margin:0 auto}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:14px;flex-wrap:wrap}
.demo-bar .hint{font-size:.875rem;color:var(--muted)}
.annot-toggle{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hairline);
  background:var(--card-solid);border-radius:980px;padding:7px 15px;font-size:.875rem;
  cursor:pointer;color:var(--ink);transition:border-color 200ms var(--ease-out), transform var(--t-press) ease-out}
.annot-toggle:hover{border-color:var(--accent)}
.annot-toggle:active{transform:scale(.97)}
.annot-toggle .sw{width:30px;height:18px;border-radius:980px;background:color-mix(in srgb,var(--ink) 16%,transparent);
  position:relative;transition:background-color 240ms var(--ease-soft);flex:none}
.annot-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform 300ms var(--ease-soft)}
.annot-toggle[aria-pressed="true"] .sw{background:var(--accent)}
.annot-toggle[aria-pressed="true"] .sw::after{transform:translateX(12px)}

.pos-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:6px;border-radius:12px}
.pos{
  min-width:1080px;border-radius:12px;overflow:hidden;background:#fff;position:relative;
  border:1px solid #b9c3d6;box-shadow:0 30px 70px rgba(15,23,42,.26);
  font-size:12.5px;color:#1b2434;line-height:1.35;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.pos *{box-sizing:border-box}

/* title bar + meta strip */
.pos-bar{display:flex;align-items:center;gap:9px;background:#1e2a63;color:#fff;height:38px;padding:0 6px 0 16px;
  font-weight:700;font-size:13.5px;letter-spacing:.3px}
.pos-bar .dot{width:8px;height:8px;border-radius:50%;background:#ffd23f;flex:none}
.pos-bar .wc{margin-left:auto;display:flex;gap:2px;color:#c7d0ee}
.pos-bar .wc span{width:32px;height:24px;display:grid;place-items:center;border-radius:5px;font-size:12px}
.pos-strip{display:flex;align-items:center;gap:9px;padding:7px 16px;border-bottom:1px solid #dce1ea;
  font-size:11.5px;color:#5a6577;flex-wrap:wrap;background:#fff}
.pos-strip .badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;background:#e6f6ec;color:#1e7d47}
.pos-strip .badge.inv{background:#e8f0fe;color:#2563eb}
.pos-strip .sep{width:1px;height:13px;background:#c4ccd9}
.pos-strip b{color:#1b2434}

/* main split: content + action rail */
.pos-main{display:flex;min-height:0;background:#eef1f6}
.pos-content{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pos-rail{flex:none;width:146px;background:#fff;border-left:1px solid #dce1ea;padding:9px 8px;
  display:flex;flex-direction:column;gap:2px;position:relative}
.pos-rail .rl{font-size:9.5px;font-weight:700;letter-spacing:.09em;color:#8a94a6;padding:11px 8px 5px}
.pos-rail .ri{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12px;
  color:#3d485c;cursor:default}
.pos-rail .ri em{font-style:normal;width:17px;height:17px;border-radius:4px;display:grid;place-items:center;
  font-size:10px;flex:none;background:#eef1f6;color:#5a6577}
.pos-rail .ri kbd{margin-left:auto;font-family:"SF Mono",ui-monospace,Consolas,monospace;font-size:9.5px;color:#8a94a6}
.pos-rail .ri.on em{background:#e6f6ec;color:#1e7d47}
.pos-rail .ri.hot{color:#1b2434;font-weight:600}

/* field cards */
.pcard{background:#fff;border:1px solid #dce1ea;border-radius:7px;position:relative}
.fgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px 12px;padding:11px 13px}
.fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld label{font-size:10.5px;color:#5a6577;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.fld .inp{height:27px;border:1px solid #c4ccd9;border-radius:5px;background:#fff;padding:0 8px;
  font-size:12.5px;color:#1b2434;font-family:inherit;width:100%;display:flex;align-items:center}
.fld .inp.ro{background:#f7f9fc;color:#5a6577}
.fld .inp.sel{background:#fff;position:relative;padding-right:22px}
.fld .inp.sel::after{content:"";position:absolute;right:8px;top:11px;border:4px solid transparent;border-top-color:#8a94a6}
.fld input.inp{padding:0 8px}
.fld input.inp:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #e8f0fe}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}

/* barcode entry strip */
.pos-entry{position:relative;display:flex;gap:9px;align-items:flex-end;padding:10px 13px;border-top:1px solid #dce1ea;
  background:#f7f9fc;border-radius:0 0 7px 7px;flex-wrap:wrap}
.pos-entry .fld{flex:1;min-width:180px}
.pos-entry input.inp{background:#fff7d6;border-color:#e7c94a;height:29px}
.pos-entry input.inp:focus{background:#fff}
.pbtn{height:29px;border:1px solid #c4ccd9;background:#fff;border-radius:5px;padding:0 12px;font-size:12px;
  font-weight:600;color:#1b2434;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;transition:background-color 160ms var(--ease-out), transform var(--t-press) ease-out}
.pbtn:hover{background:#f7f9fc}
.pbtn:active{transform:scale(.97)}
.pbtn kbd{font-family:"SF Mono",ui-monospace,Consolas,monospace;font-size:9.5px;color:#8a94a6;
  background:#f7f9fc;border:1px solid #dce1ea;border-radius:3px;padding:0 3px}
.pbtn.pri{background:#2563eb;border-color:#2563eb;color:#fff}
.pbtn.pri kbd{color:#dbe6ff;background:rgba(255,255,255,.16);border-color:transparent}
.pbtn.pri:hover{background:#1d4fd7}
.pbtn:disabled{opacity:.45;cursor:default}

.pos-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 1px}
.pos-quick .lb{font-size:11px;color:#8a94a6;margin-right:2px}
.pos-quick button{border:1px solid #dce1ea;background:#fff;border-radius:980px;padding:5px 12px;font-size:11.5px;
  color:#5a6577;cursor:pointer;font-family:inherit;
  transition:border-color 160ms var(--ease-out),color 160ms var(--ease-out),transform var(--t-press) ease-out}
.pos-quick button:hover{border-color:#2563eb;color:#2563eb}
.pos-quick button:active{transform:scale(.96)}
.pos-quick button:disabled{opacity:.4;cursor:default}

/* line grid */
.gridwrap{background:#fff;border:1px solid #dce1ea;border-radius:7px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;min-height:196px}
table.pgrid{width:100%;border-collapse:collapse;font-size:11.5px}
table.pgrid th{background:#f7f9fc;text-align:right;padding:7px 8px;font-size:9.5px;font-weight:700;color:#5a6577;
  letter-spacing:.05em;border-bottom:1px solid #dce1ea;white-space:nowrap}
table.pgrid th.l,table.pgrid td.l{text-align:left}
table.pgrid td{padding:6px 8px;text-align:right;border-bottom:1px solid #eef1f6;white-space:nowrap;height:30px}
table.pgrid tbody tr:hover{background:#f7f9fc}
table.pgrid tbody tr.sel{background:#e8f0fe}
table.pgrid .code{color:#8a94a6;font-size:11px}
table.pgrid .tot{font-weight:700}
table.pgrid .cost{color:#c0392b}
table.pgrid tbody tr{animation:posrow 320ms var(--ease-soft) both}
@keyframes posrow{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cellin{width:52px;border:1px solid transparent;background:transparent;text-align:right;font:inherit;
  color:inherit;border-radius:4px;padding:2px 4px;font-variant-numeric:tabular-nums}
.cellin:hover{border-color:#c4ccd9;background:#fff}
.cellin:focus{outline:none;border-color:#2563eb;background:#fff7d6;box-shadow:0 0 0 2px #e8f0fe}
.rowx{border:0;background:none;color:#c0392b;cursor:pointer;font-size:13px;line-height:1;opacity:.45;padding:0 2px}
.rowx:hover{opacity:1}
.gridempty{flex:1;display:grid;place-items:center;color:#8a94a6;font-size:12px;padding:30px 16px;text-align:center}
.gridfoot{margin-top:auto;display:flex;gap:14px;padding:6px 10px;background:#f7f9fc;border-top:1px solid #dce1ea;
  font-size:10.5px;color:#8a94a6}

/* bottom: discounts + payment */
.pos-bottom{display:grid;grid-template-columns:1fr 372px;gap:10px}
.dgrid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:7px 10px;padding:11px 13px;align-items:center}
.dgrid label{font-size:11px;color:#5a6577;font-weight:600;text-align:right;white-space:nowrap}
.dgrid .val{height:26px;border:1px solid #c4ccd9;border-radius:5px;background:#f7f9fc;color:#5a6577;
  display:flex;align-items:center;justify-content:flex-end;padding:0 8px;font-size:12px}
.dgrid input.val{background:#fff;color:#1b2434;text-align:right;font-family:inherit}
.dgrid input.val:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #e8f0fe;background:#fff7d6}
.dgrid .val.strong{background:#fff;color:#1b2434;font-weight:700}

.paycard{background:#eef2ff;border:1px solid #d0dafa;border-radius:7px;padding:12px 13px;position:relative}
.payhead{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:10px;
  border-bottom:1px solid #d0dafa;margin-bottom:10px}
.payhead .lb{font-size:11.5px;color:#5a6577;font-weight:600}
.payhead b{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;color:#1e2a63;line-height:1}
.payrow{display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:center;margin-bottom:7px}
.payrow label{font-size:11px;color:#5a6577;font-weight:600;text-align:right}
.payrow .val{height:27px;border:1px solid #c4ccd9;border-radius:5px;background:#fff;text-align:right;
  padding:0 9px;font-size:12.5px;font-family:inherit;color:#1b2434;width:100%;
  display:flex;align-items:center;justify-content:flex-end}
.payrow input.val{background:#fff7d6;border-color:#e7c94a}
.payrow input.val:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #e8f0fe;background:#fff}
.payrow .val.change{background:#e6f6ec;border-color:#a9d9bd;color:#1e7d47;font-weight:700}
.payrow .val.short{background:#fdecea;border-color:#f0b4ad;color:#c0392b;font-weight:700}
.paysave{width:100%;margin-top:10px;height:36px;border:0;border-radius:6px;background:#1e7d47;color:#fff;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.2px;
  transition:background-color 160ms var(--ease-out), transform var(--t-press) ease-out}
.paysave:hover{background:#186439}
.paysave:active{transform:scale(.985)}
.paysave:disabled{background:#c3ccdb;cursor:default}

/* status bar */
.pos-status{display:flex;align-items:center;gap:13px;background:#f7f9fc;border-top:1px solid #dce1ea;
  padding:6px 16px;font-size:10.5px;color:#8a94a6;flex-wrap:wrap}
.pos-status b{color:#5a6577}
.pos-status kbd{font-family:"SF Mono",ui-monospace,Consolas,monospace;background:#fff;border:1px solid #dce1ea;
  border-radius:3px;padding:0 3px;color:#5a6577}
.pos-status .right{margin-left:auto;display:flex;gap:12px}
.pos-status .ok{color:#1e7d47;font-weight:700}
.pos-status .bad{color:#c0392b;font-weight:700}

/* ---------- annotation pins ---------- */
.pin{
  position:absolute;z-index:6;width:21px;height:21px;border-radius:50%;border:2px solid #fff;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;cursor:pointer;
  display:none;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.28);font-family:var(--font);
  padding:0;line-height:1;
}
.pos.annot .pin{display:grid;animation:pinpop 380ms var(--spring) both}
@keyframes pinpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.pin::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);
  width:250px;padding:11px 13px;border-radius:9px;background:#1b2434;color:#fff;
  font-size:11.5px;font-weight:400;line-height:1.45;letter-spacing:0;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.3);
  transition:opacity 200ms var(--ease-out), transform 300ms var(--ease-soft), visibility 0s 300ms;
}
.pin:hover::after,.pin:focus-visible::after{opacity:1;visibility:visible;transform:translateX(-50%);transition-delay:0s}
.pin.down::after{bottom:auto;top:calc(100% + 10px)}
.pin.l::after{left:0;transform:translateX(0) translateY(4px)}
.pin.l:hover::after,.pin.l:focus-visible::after{transform:translateX(0)}
.pin.r::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
.pin.r:hover::after,.pin.r:focus-visible::after{transform:translateX(0)}

.pos-note{margin-top:18px;text-align:center;font-size:.8125rem;color:var(--muted);letter-spacing:.01em}
.demo-fallback{display:none}
@media (max-width:1000px){
  .pos-scroll{overflow-x:auto}
  .demo-bar{display:none}
}
@media (max-width:900px){
  .pos-scroll{display:none}
  .demo-bar{display:none}
  .demo-fallback{display:block}
  .demo-fallback img{width:100%;border-radius:12px;border:1px solid var(--hairline-2);box-shadow:var(--shadow-2)}
}

/* ==========================================================================
   WHY — merged trust section
   ========================================================================== */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,22px);margin-top:clamp(30px,4vw,48px)}
.case{padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);background:var(--card-solid);
  border:1px solid var(--hairline-2);box-shadow:var(--shadow-1)}
.case .ind{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.case h4{font-size:1.1875rem;margin:10px 0 8px}
.case p{font-size:.9375rem;color:var(--muted);line-height:1.55}
.case .fact{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline-2);
  font-size:.9375rem;font-weight:600;color:var(--ink)}
.is-placeholder{position:relative;border-style:dashed;border-color:color-mix(in srgb,var(--brand) 55%,transparent)}
.is-placeholder::before{
  content:"PLACEHOLDER";position:absolute;top:12px;right:14px;font-size:.625rem;font-weight:700;
  letter-spacing:.08em;color:var(--brand);
}
.licensing{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);margin-top:clamp(28px,4vw,44px)}
.lic{padding:20px 22px;border-radius:var(--r);background:var(--bg-soft);border:1px solid var(--hairline-2)}
.lic b{display:block;font-size:1rem;margin-bottom:5px}
.lic span{font-size:.875rem;color:var(--muted);line-height:1.5}
.warranty{
  margin-top:clamp(28px,4vw,44px);padding:26px 30px;border-radius:var(--r-lg);text-align:center;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
}
.warranty p{font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.015em;line-height:1.4;color:var(--ink)}
@media (max-width:860px){.cases,.licensing{grid-template-columns:1fr}}

/* ---- mobile overrides for the added components (must stay last) ---- */
@media (max-width:680px){
  .opts{grid-template-columns:1fr}
  .q-actions{flex-direction:column;align-items:stretch;gap:10px}
  .q-actions .btn{width:100%}
  .q-actions .q-back{text-align:left}
  .result-actions .btn{width:100%}
}
@media (max-width:860px){
  .demo-shell > .pos-note{display:none}
}


/* ==========================================================================
   LEGACY LAYER — product and service page components, retuned to Apple
   --------------------------------------------------------------------------
   Everything below styles class names that already exist in the product and
   service pages. Their markup was NOT rewritten: the audited copy and the
   generated report panels stay exactly as build_panels.py emits them, and only
   their appearance moves. Every selector is scoped to .legacy, so none of it
   can reach the homepage.

   These are styles.css's own token names, redefined to Apple values. Every
   legacy rule that referenced them comes across retuned for free.
   ========================================================================== */
.legacy{
  --navy:       #1d1d1f;
  --navy-2:     #424245;
  --navy-deep:  #000000;
  --orange:     #0071e3;   /* the action colour is blue now; --brand keeps the orange */
  --orange-2:   #0066cc;
  --ink:        #1d1d1f;
  --muted:      #6e6e73;
  --bg:         #ffffff;
  --bg-soft:    #f5f5f7;
  --bg-band:    #f5f5f7;
  --border:     rgba(0,0,0,.055);
  --radius:     18px;
  --shadow:     0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --shadow-lg:  0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.10);
  --maxw:       1240px;
  /* --font is inherited from apple.css's :root — the legacy stack is gone. */
}
/* Product and service pages run wider than the homepage's prose column. */
.legacy .wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.legacy section{scroll-margin-top:112px}

.legacy body:not(.js-nav) .nav>li:hover>.mega{opacity:1;visibility:visible;transform:translateY(0)}
.legacy .svc-list{list-style:none;margin:14px 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.legacy .svc-list li{position:relative;padding-left:15px;color:var(--muted);font-size:.87rem}
.legacy .svc-list li::before{content:"›";position:absolute;left:0;color:var(--orange);font-weight:700}
.legacy .pad-sm{padding:60px 0}
.legacy .g-3{grid-template-columns:repeat(3,1fr)}
.legacy .g-4{grid-template-columns:repeat(4,1fr)}
.legacy .g-2{grid-template-columns:repeat(2,1fr)}
.legacy .badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:20px;margin-bottom:12px}
.legacy .badge.desk{background:#e8f0fb;color:var(--navy-2)}
.legacy .badge.web{background:#fff0e0;color:#c56a12}
.legacy .badge.mod{background:#eafaf0;color:#1a8f4c}
.legacy .price{margin-top:16px;font-weight:700;color:var(--navy);font-size:1.02rem}
.legacy .price small{display:block;font-weight:500;color:var(--muted);font-size:.74rem;margin-top:2px}
.legacy .deploy{background:linear-gradient(135deg,var(--navy-deep),var(--navy-2));color:#fff}
.legacy .deploy .grid{grid-template-columns:repeat(3,1fr);gap:24px}
.legacy .deploy .dcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:26px}
.legacy .deploy .dcard h3{color:#fff}
.legacy .deploy .dcard p{color:#cdddf0;font-size:.92rem;margin-top:8px}
.legacy .deploy .dcard .tag{color:var(--orange);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
@keyframes fade{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
.legacy .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step}
.legacy .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.legacy .quote{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.legacy .quote p{font-style:italic;color:var(--ink)}
.legacy .quote .who{margin-top:16px;display:flex;align-items:center;gap:12px}
.legacy .quote .av{width:42px;height:42px;border-radius:50%;background:var(--bg-band)}
.legacy .quote .who b{color:var(--navy);font-size:.9rem}
.legacy .quote .who span{color:var(--muted);font-size:.8rem}
.legacy .subhead{text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:56px 0 22px}
.legacy .awards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.legacy .award{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 22px;color:var(--navy);font-weight:600;font-size:.9rem;min-width:180px}
.legacy .award .em{font-size:1.4rem}
.legacy .award small{display:block;font-weight:500;color:var(--muted);font-size:.76rem}
.legacy .benefits{list-style:none;margin:18px 0 26px}
.legacy .benefits li{display:flex;gap:12px;padding:9px 0;color:var(--ink);font-size:.95rem}
.legacy .benefits li .ck{color:#1a8f4c;font-weight:800;flex:none}
.legacy .sched{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-top:6px}
.legacy .sched h4{font-size:1.02rem;margin-bottom:6px}
.legacy .sched p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.legacy .sched .sched-actions{display:flex;gap:12px;flex-wrap:wrap}
.legacy .crumbs{background:var(--bg-soft);border-bottom:1px solid var(--border);font-size:.85rem;color:var(--muted)}
.legacy .crumbs .wrap{padding:14px 24px}
.legacy .crumbs a{color:var(--navy-2)}
.legacy .crumbs a:hover{color:var(--orange)}
.legacy .crumbs span{margin:0 8px;opacity:.6}
.legacy .phero{background:linear-gradient(135deg,var(--navy-deep),var(--navy-2));color:#fff;position:relative;overflow:hidden}
.legacy .phero::after{content:"";position:absolute;bottom:-140px;left:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(243,144,25,.28),transparent 70%)}
.legacy .phero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px 24px 78px}
.legacy .phero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.legacy .phero .badges .badge{margin:0}
.legacy .phero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem)}
.legacy .phero .tier{color:#ffd9a8;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;margin-bottom:10px;display:block}
.legacy .phero p.lead{color:#cdddf0;font-size:1.1rem;margin:18px 0 26px;max-width:560px}
.legacy .phero .pprice{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:18px 22px;display:inline-block;margin-bottom:26px}
.legacy .phero .pprice b{color:#fff;font-size:1.6rem}
.legacy .phero .pprice span{color:#cdddf0;font-size:.85rem;display:block}
.legacy .phero .cta{display:flex;gap:14px;flex-wrap:wrap}
.legacy .pshot{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;height:300px;display:flex;align-items:center;justify-content:center;color:#8fa8c9;text-align:center;padding:20px;font-size:.9rem}
.legacy .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.legacy .feat .fcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.legacy .feat .fcard .ico{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--navy-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;margin-bottom:14px;font-size:1.1rem}
.legacy .feat .fcard h3{font-size:1.05rem;margin-bottom:6px}
.legacy .feat .fcard p{color:var(--muted);font-size:.9rem}
.legacy .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.legacy .shot{background:var(--bg-band);border:1px solid var(--border);border-radius:12px;height:210px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:16px;font-size:.85rem}
.legacy .who-for{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.legacy .who-for .wf{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;text-align:center;font-weight:600;color:var(--navy);font-size:.92rem}
.legacy .who-for .wf .em{font-size:1.5rem;display:block;margin-bottom:8px}
.legacy .plic{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.legacy .plic .pbox{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.legacy .plic .pbox h3{font-size:1.15rem;margin-bottom:6px}
.legacy .plic .pbox .big{font-size:2rem;color:var(--navy);font-weight:800;margin:8px 0}
.legacy .plic .pbox .big small{font-size:.85rem;color:var(--muted);font-weight:500}
.legacy .plic ul{list-style:none;margin:16px 0 20px}
.legacy .plic ul li{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);color:var(--ink);font-size:.92rem}
.legacy .plic ul li .ck{color:#1a8f4c;font-weight:800;flex:none}
.legacy .spec{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.legacy .spec th,.legacy .spec td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);font-size:.92rem}
.legacy .spec th{background:var(--bg-soft);color:var(--navy);width:38%;font-weight:700}
.legacy .spec tr:last-child th,.legacy .spec tr:last-child td{border-bottom:none}
.legacy .related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.legacy .ctaband{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--radius);padding:44px;text-align:center}
.legacy .ctaband h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem)}
.legacy .ctaband p{color:#cdddf0;margin:12px auto 24px;max-width:560px}
.legacy .ctaband .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.legacy .compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.legacy .pgroup{margin-top:38px}
.legacy .pgroup:first-of-type{margin-top:14px}
.legacy .pgroup-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.legacy .pgroup-head h3{font-size:1.15rem;color:var(--navy);margin:0}
.legacy .pgroup-head span{color:var(--muted);font-size:.9rem}
.legacy .cfeat{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.legacy .cfeat li{position:relative;padding-left:22px;font-size:.86rem;color:var(--ink);line-height:1.4}
.legacy .cfeat li::before{content:"✔";position:absolute;left:0;top:1px;color:var(--orange);font-size:.78rem;font-weight:700}
@media(max-width:960px){
.legacy .phero .wrap{grid-template-columns:1fr}
.legacy .pshot{display:none}
.legacy .g-4,.legacy .g-3,.legacy .steps,.legacy .quotes,.legacy .deploy .grid,.legacy .feat,.legacy .shots,.legacy .who-for,.legacy .related{grid-template-columns:repeat(2,1fr)}
.legacy .g-2,.legacy .plic{grid-template-columns:1fr}
}
@media(max-width:560px){
.legacy .g-4,.legacy .g-3,.legacy .steps,.legacy .quotes,.legacy .deploy .grid,.legacy .feat,.legacy .shots,.legacy .who-for,.legacy .related{grid-template-columns:1fr}
}
.legacy .fgroup{margin:38px 0 16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:800}
.legacy .fgroup:first-of-type{margin-top:0}
.legacy .steps.three{grid-template-columns:repeat(3,1fr)}
.legacy .xpanel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;text-align:center;box-shadow:var(--shadow)}
.legacy .xpanel h3{font-size:1.15rem;margin-bottom:8px}
.legacy .xpanel p{color:var(--muted);max-width:640px;margin:0 auto 18px}
.legacy .repbox{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.legacy .repnum{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px;text-align:center}
.legacy .repnum b{display:block;font-size:1.9rem;color:var(--navy);font-weight:800;line-height:1}
.legacy .repnum span{display:block;margin-top:6px;color:var(--muted);font-size:.82rem}
@media(max-width:960px){
.legacy .steps.three{grid-template-columns:1fr}
.legacy .repbox{grid-template-columns:repeat(2,1fr)}
}
.legacy .rpanel{margin-top:34px}
.legacy .rpanel h3{font-size:1.15rem;margin-bottom:6px;text-align:center}
.legacy .rpanel p{color:var(--muted);max-width:700px;margin:0 auto 20px;text-align:center;font-size:.93rem}
.legacy .heropick{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:26px}
.legacy .heropick .r{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.legacy .heropick .r:last-child{border-bottom:0;padding-bottom:0}
.legacy .heropick .r .k{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:#ffd9a8;font-weight:700;margin-bottom:6px}
.legacy .heropick .r .v{color:#fff;font-size:1rem;line-height:1.5}
.legacy .heropick .r .v.q{font-style:italic;color:#e6effb}
.legacy .heropick .out{display:inline-block;background:var(--orange);color:#fff;font-weight:700;
  border-radius:20px;padding:6px 15px;font-size:.9rem;margin-top:4px}
.legacy .heropick .note{color:#a9c1de;font-size:.82rem;margin-top:10px;line-height:1.5}
.legacy .sitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.legacy .sitcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.legacy .sitcard .said{font-size:1.02rem;color:var(--navy);font-weight:700;line-height:1.45;
  padding-left:15px;border-left:3px solid var(--orange);margin-bottom:14px}
.legacy .sitcard .need{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.legacy .sitcard .need b{color:var(--ink)}
.legacy .sitcard .rec{margin-top:auto;padding-top:16px;border-top:1px dashed var(--border)}
.legacy .sitcard .rec .lab{display:block;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:7px}
.legacy .sitcard .stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.legacy .sitcard .stack span{background:var(--navy);color:#fff;border-radius:20px;
  padding:5px 13px;font-size:.82rem;font-weight:600}
.legacy .sitcard .stack span.alt{background:var(--bg-band);color:var(--navy);
  border:1px solid var(--border)}
.legacy .sitcard .why{font-size:.88rem;color:var(--muted);line-height:1.55}
.legacy .sitcard .why b{color:var(--ink)}
.legacy .decide{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.legacy .qcard{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;position:relative}
.legacy .qcard .qn{position:absolute;top:-13px;left:24px;width:28px;height:28px;border-radius:50%;
  background:var(--orange);color:#fff;font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center}
.legacy .qcard h3{font-size:1.02rem;margin:8px 0 10px}
.legacy .qcard p{color:var(--muted);font-size:.9rem}
.legacy .qcard .split{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;
  font-size:.86rem;color:var(--muted)}
.legacy .qcard .split div{display:flex;gap:8px;padding:3px 0}
.legacy .qcard .split .a{color:var(--navy);font-weight:700;min-width:74px;flex:none}
.legacy .svcat{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.legacy .svcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)}
.legacy .svcard .top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.legacy .svcard .top .n{width:38px;height:38px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.legacy .svcard .top h3{font-size:1.12rem}
.legacy .svcard > p{color:var(--muted);font-size:.94rem;margin-bottom:16px}
.legacy .svcard ul{list-style:none;display:grid;gap:9px;margin-bottom:16px}
.legacy .svcard ul li{font-size:.9rem;color:var(--ink);padding-left:20px;position:relative;
  line-height:1.5}
.legacy .svcard ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:2px;background:var(--orange)}
.legacy .svcard ul li b{color:var(--navy)}
.legacy .svcard .built{font-size:.82rem;color:var(--muted);border-top:1px solid var(--border);
  padding-top:13px}
.legacy .svcard .built b{color:var(--navy);font-weight:700}
.legacy .gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.legacy .gloss .g{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--border);align-items:baseline}
.legacy .gloss .g .w{font-weight:700;color:var(--navy);font-size:.95rem}
.legacy .gloss .g .d{color:var(--muted);font-size:.9rem;line-height:1.55}
.legacy .svblock{padding:34px 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.legacy .svblock:first-of-type{border-top:0;padding-top:8px}
.legacy .svblock .bh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.legacy .svblock .bh h3{font-size:1.35rem}
.legacy .svblock .bh .tag{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--orange)}
.legacy .svblock > p{color:var(--muted);font-size:1rem;max-width:780px;margin-bottom:14px}
.legacy .svblock > p b{color:var(--ink)}
.legacy .svblock .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;margin-top:16px}
.legacy .svblock .verdict{background:var(--bg-soft);border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;padding:16px 20px;margin-top:18px;max-width:840px}
.legacy .svblock .verdict p{color:var(--navy);font-size:.95rem;margin:0}
.legacy .svblock:target{animation:landed 3s ease-out forwards;border-radius:10px}
.legacy .svblock .sub{padding-top:22px;scroll-margin-top:96px}
.legacy .svblock .sub h4{font-size:1.06rem;margin-bottom:8px}
.legacy .svblock .sub > p{color:var(--muted);font-size:.96rem;max-width:780px;margin-bottom:12px}
.legacy .svblock .sub > p b{color:var(--ink)}
.legacy .svblock .sub:target{animation:landed 3s ease-out forwards;border-radius:10px}
@media(max-width:960px){
.legacy .svblock .cols{grid-template-columns:1fr}
}
.legacy .svcard ul li,.legacy .gloss .g,.legacy .svcard .built{scroll-margin-top:110px}
.legacy .svcard ul li:target,.legacy .gloss .g:target,.legacy .svcard .built:target{border-radius:8px;animation:landed 3s ease-out forwards}
@keyframes landed{
0%,50%{background:#fff7d6;box-shadow:0 0 0 7px #fff7d6}
100%{background:transparent;box-shadow:0 0 0 7px transparent}
}
@media(prefers-reduced-motion:reduce){
.legacy .svcard ul li:target,.legacy .gloss .g:target,.legacy .svcard .built:target{animation:none;background:#fff7d6;box-shadow:0 0 0 7px #fff7d6}
}
@media(max-width:960px){
.legacy .sitgrid,.legacy .decide,.legacy .svcat,.legacy .gloss{grid-template-columns:1fr}
.legacy .gloss .g{grid-template-columns:1fr;gap:4px}
}
.legacy .uiwide .uitable{font-size:10.5px}
.legacy .uiwide .uitable th{padding:0 8px}
.legacy .uiwide .uitable td{padding:0 8px}
.legacy .uisearch{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  padding:11px 13px;background:#f2f6fc;border-bottom:1px solid #dbe3ef}
.legacy .uisearch .f{display:flex;flex-direction:column;gap:3px;min-width:148px}
.legacy .uisearch .f .k{font-size:9px;font-weight:700;letter-spacing:.3px;color:#8a94a6;
  text-transform:uppercase}
.legacy .uisearch .f .b{height:24px;border:1px solid #c4ccd9;border-radius:4px;background:#fff;
  padding:0 8px;display:flex;align-items:center;font-size:10.5px;color:#1b2434;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.legacy .uisearch .f .b.e{background:#fff7d6;border-color:#e7c94a}
.legacy .uisearch .bt{height:24px;padding:0 12px;border:1px solid #c4ccd9;border-radius:4px;
  background:#fff;display:flex;align-items:center;font-size:10.5px;color:#1b2434}
.legacy .uisearch .eng{margin-left:auto;align-self:center;font-weight:800;color:var(--navy);
  font-size:.82rem}
.legacy .shot.has-img{padding:0;height:auto;overflow:hidden;background:#fff;align-items:stretch}
.legacy .shot.has-img img{width:100%;display:block;border-radius:11px}
.legacy .shot-cap{display:block;padding:10px 14px;font-size:.8rem;color:var(--muted);text-align:left;border-top:1px solid var(--border);background:#fff}
.legacy .pshot.has-img{padding:0;height:auto;background:#fff;overflow:hidden;border-radius:14px}
.legacy .pshot.has-img img{width:100%;display:block}
.legacy .uishot{position:relative;perspective:1600px;padding:6px 0}
.legacy .uiwin{position:relative;
  transform:rotateY(-9deg) rotateX(3deg) translateZ(0);
  transform-origin:left center;
  border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 34px 70px rgba(3,12,30,.45),0 2px 0 rgba(255,255,255,.5) inset;
  border:1px solid rgba(255,255,255,.22);}
.legacy .uibar{height:32px;background:#1e2a63;display:flex;align-items:center;gap:8px;padding:0 12px}
.legacy .uibar .dt{width:7px;height:7px;border-radius:50%;background:#ffd23f;flex:none}
.legacy .uibar .tl{color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.3px}
.legacy .uibar .wc{margin-left:auto;display:flex;gap:12px;color:#7f8dc4;font-size:10px;letter-spacing:2px}
.legacy .uimeta{display:flex;align-items:center;gap:9px;padding:7px 12px;border-bottom:1px solid #e3e8f1;background:#fff;flex-wrap:wrap}
.legacy .uimeta .bg{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:4px;background:#e8f0fe;color:#2563eb;letter-spacing:.2px}
.legacy .uimeta .bg.ok{background:#e6f6ec;color:#1e7d47}
.legacy .uimeta .bg.bad{background:#fdf1f0;color:#c0392b}
.legacy .uimeta .mt{font-size:10.5px;color:#5a6577}
.legacy .uimeta .mt b{color:#1b2434}
.legacy .uitable{width:100%;border-collapse:collapse;font-size:11.5px;background:#fff}
.legacy .uitable th{background:#f7f9fc;color:#5a6577;font-size:9px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;text-align:left;padding:6px 12px;border-bottom:1px solid #c4ccd9;}
.legacy .uitable th.r,.legacy .uitable td.r{text-align:right}
.legacy .uitable td{padding:0 12px;height:26px;border-bottom:1px solid #eef1f6;color:#1b2434;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.legacy .uitable td.sn{color:#8a94a6;width:22px}
.legacy .uitable td.cd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:#5a6577}
.legacy .uitable tr.hi td{background:#e8f0fe}
.legacy .uifoot{display:flex;align-items:stretch;border-top:1px solid #c4ccd9;background:#f7f9fc}
.legacy .uifoot .fl{flex:1;padding:9px 12px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.legacy .uifoot .fl .r{display:flex;justify-content:space-between;font-size:10.5px;color:#5a6577;font-variant-numeric:tabular-nums}
.legacy .uifoot .fl .r b{color:#1b2434}
.legacy .uifoot .ft{width:44%;background:#eef2ff;border-left:1px solid #cdd8ff;padding:9px 14px;display:flex;
  flex-direction:column;justify-content:center;gap:1px}
.legacy .uifoot .ft .k{font-size:9.5px;color:#5a6577;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.legacy .uifoot .ft .v{font-size:22px;font-weight:800;color:#1e2a63;line-height:1.05;font-variant-numeric:tabular-nums}
.legacy .uichip{position:absolute;right:-14px;bottom:16px;z-index:3;
  background:#fff;border-radius:12px;padding:11px 16px;
  box-shadow:0 18px 40px rgba(3,12,30,.34);border:1px solid #e4ebf3;
  animation:uifloat 5s ease-in-out infinite;}
.legacy .uichip .k{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:#5c6a7e;font-weight:700}
.legacy .uichip .v{font-size:20px;font-weight:800;color:#1e7d47;line-height:1.15;font-variant-numeric:tabular-nums}
.legacy .uichip.bad .v{color:#c0392b}
@keyframes uifloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
@media(prefers-reduced-motion:reduce){
.legacy .uichip{animation:none}
}
.legacy .uinote{margin-top:16px;font-size:.78rem;color:#9fb6d4;display:flex;align-items:center;gap:7px}
.legacy .uinote .d{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
@media(max-width:1100px){
.legacy .uiwin{transform:none}
.legacy .uichip{right:-6px}
}
@media(max-width:960px){
.legacy .uishot{display:none}
}
.legacy .uiwin.flat{transform:none;box-shadow:0 14px 34px rgba(20,49,94,.15);border:1px solid var(--border)}
.legacy .dayrow{display:grid;grid-template-columns:.82fr 1.18fr;gap:46px;align-items:center}
.legacy .dayrow + .dayrow{margin-top:58px}
.legacy .dayrow.rev .daytext{order:2}
.legacy .dayrow.rev .dayshot{order:1}
.legacy .daystep{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.legacy .daystep .n{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:none}
.legacy .daystep .t{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--orange)}
.legacy .daytext h3{font-size:1.42rem;margin-bottom:12px}
.legacy .daytext p{color:var(--muted);margin-bottom:14px}
.legacy .daypts{list-style:none;display:flex;flex-direction:column;gap:8px}
.legacy .daypts li{position:relative;padding-left:22px;font-size:.92rem;color:var(--ink)}
.legacy .daypts li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.legacy .daycap{margin-top:12px;font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.legacy .daycap .d{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
.legacy .uigrp th{font-size:8.5px !important;letter-spacing:.4px;text-transform:none !important;
  text-align:center !important;padding:4px 8px !important;background:#eef2f9 !important;
  color:#8a94a6 !important;border-bottom:1px solid #e3e8f1 !important;font-weight:700}
.legacy .uigrp th.gc{background:#fdf1f0 !important;color:#9c4b41 !important}
.legacy .uigrp th.gs{background:#eef4ff !important;color:#3b5bab !important}
.legacy .uitable td.c{color:#c0392b}
.legacy .uitable td.rt{color:#1e2a63;font-weight:600}
.legacy .uitable td.mg{color:#1e7d47;font-weight:600}
.legacy .uitable tfoot td{height:30px;background:#eef2ff;border-top:2px solid #cdd8ff;font-weight:800;
  color:#1e2a63;font-variant-numeric:tabular-nums;padding:0 12px}
.legacy .uitable tfoot td.lbl{font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:#5a6577;font-weight:700}
.legacy .uirep{padding:11px 14px 9px;border-bottom:1px solid #e3e8f1;text-align:center;position:relative;background:#fff}
.legacy .uirep .co{font-size:12px;font-weight:800;color:#1e2a63}
.legacy .uirep .ci{font-size:10px;color:#5a6577}
.legacy .uirep .rt{font-size:11px;font-weight:700;color:#1b2434;margin-top:7px}
.legacy .uirep .rr{font-size:10px;color:#5a6577}
.legacy .uirep .lf{position:absolute;left:14px;top:13px;font-size:9.5px;color:#8a94a6}
.legacy .uirep .rg{position:absolute;right:14px;top:13px;font-size:9.5px;color:#8a94a6}
.legacy .uikpi{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #e3e8f1;background:#f7f9fc}
.legacy .uikpi div{padding:8px 12px;border-right:1px solid #e3e8f1}
.legacy .uikpi div:last-child{border-right:none}
.legacy .uikpi .k{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a94a6}
.legacy .uikpi .v{font-size:14px;font-weight:800;color:#1e2a63;font-variant-numeric:tabular-nums;line-height:1.3}
.legacy .uikpi .v.g{color:#1e7d47}
.legacy .uikpi .v.b{color:#2563eb}
.legacy .uitable td.cr{color:#2563eb;font-weight:600}
.legacy .uitot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e3e8f1}
.legacy .uitot .cell{background:#fff;padding:13px 16px}
.legacy .uitot .cell .k{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8a94a6}
.legacy .uitot .cell .v{font-size:17px;font-weight:700;color:#1b2434;font-variant-numeric:tabular-nums;line-height:1.35}
.legacy .uitot .cell.big{grid-column:span 2;background:#eef2ff}
.legacy .uitot .cell.big .v{font-size:34px;font-weight:800;color:#1e2a63;line-height:1.1}
.legacy .uitot .cell.chg{background:#eef7f1}
.legacy .uitot .cell.chg .v{color:#1e7d47;font-size:24px;font-weight:800}
.legacy .uiform{padding:13px 15px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px 12px;background:#fff}
.legacy .uifield{display:flex;flex-direction:column;gap:3px}
.legacy .uifield .k{font-size:9px;font-weight:700;letter-spacing:.3px;color:#8a94a6;text-transform:uppercase}
.legacy .uifield .b{height:26px;border:1px solid #c4ccd9;border-radius:4px;background:#fff;padding:0 8px;
  font-size:11.5px;color:#1b2434;display:flex;align-items:center}
.legacy .uifield .b.e{background:#fff7d6;border-color:#e7c94a}
.legacy .uifield .b.ro{background:#f7f9fc;color:#5a6577}
.legacy .s1{grid-column:span 1}
.legacy .s2{grid-column:span 2}
.legacy .s3{grid-column:span 3}
.legacy .s4{grid-column:span 4}
.legacy .s5{grid-column:span 5}
.legacy .s6{grid-column:span 6}
.legacy .uichecks{grid-column:span 6;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #e3e8f1;padding-top:11px;margin-top:2px}
.legacy .uick{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#5a6577;
  border:1px solid #dce1ea;border-radius:5px;padding:4px 9px;background:#f7f9fc}
.legacy .uick .bx{width:12px;height:12px;border-radius:3px;border:1px solid #c4ccd9;background:#fff;flex:none}
.legacy .uick.on{background:#e6f6ec;border-color:#bfe3cd;color:#1e7d47;font-weight:700}
.legacy .uick.on .bx{background:#1e7d47;border-color:#1e7d47;position:relative}
.legacy .uick.on .bx::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.legacy .uidash{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:#e3e8f1}
.legacy .uidash .t{background:#fff;padding:11px 13px}
.legacy .uidash .t .k{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a94a6}
.legacy .uidash .t .v{font-size:17px;font-weight:800;color:#1e2a63;font-variant-numeric:tabular-nums;line-height:1.3}
.legacy .uidash .t .s{font-size:10px;color:#5a6577}
.legacy .uidash .t .v.g{color:#1e7d47}
.legacy .uidash .t .v.o{color:#c0392b}
.legacy .uilist{background:#fff;padding:9px 0}
.legacy .uilist .h{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a94a6;padding:0 13px 6px}
.legacy .uilist .r{display:flex;align-items:center;gap:9px;padding:5px 13px;font-size:11.5px;color:#1b2434}
.legacy .uilist .r:hover{background:#e8f0fe}
.legacy .uilist .r .ic{width:18px;height:18px;border-radius:4px;background:#e8f0fe;color:#2563eb;
  display:grid;place-items:center;font-size:9px;flex:none}
.legacy .uilist .r .sp{margin-left:auto;font-variant-numeric:tabular-nums;color:#5a6577;font-size:11px}
.legacy .uilist .r .sp.warn{color:#c0392b;font-weight:700}
.legacy .proof{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;margin-top:34px;
  box-shadow:var(--shadow)}
.legacy .proof.rev .proof-t{order:2}
.legacy .proof.rev .proof-s{order:1}
.legacy .proof-t h3{font-size:1.25rem;margin-bottom:10px}
.legacy .proof-t p{color:var(--muted);font-size:.95rem;margin-bottom:12px}
@media(max-width:960px){
.legacy .dayrow,.legacy .proof{grid-template-columns:1fr;gap:26px}
.legacy .dayrow.rev .daytext,.legacy .dayrow.rev .dayshot,.legacy .proof.rev .proof-t,.legacy .proof.rev .proof-s{order:0}
.legacy .uiform{grid-template-columns:repeat(2,1fr)}
.legacy .s3{grid-column:span 2}
.legacy .s2{grid-column:span 1}
.legacy .s6{grid-column:span 2}
.legacy .s4,.legacy .s5{grid-column:span 2}
.legacy .uidash,.legacy .uikpi{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.legacy .uikpi,.legacy .uidash{grid-template-columns:1fr}
.legacy .uitot{grid-template-columns:1fr}
.legacy .uitot .cell.big{grid-column:span 1}
}
.legacy .uitable td.ov{color:#c0392b;font-weight:700}
.legacy .uitable td.nil{color:#c8cfda}
.legacy .uitable tr.more td{color:#8a94a6;font-style:italic}
.legacy .uitable th.grp{text-align:center;font-size:8.5px}
.legacy .uitable th.ovh{color:#9c4b41;background:#fdf1f0}
.legacy .uibs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e3e8f1;font-size:11.5px}
.legacy .uibs .side{background:#fff;padding:0 0 10px}
.legacy .uibs .sh{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:#5a6577;background:#f7f9fc;border-bottom:1px solid #e3e8f1;padding:6px 14px}
.legacy .uibs .sub{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#8a94a6;padding:9px 14px 3px}
.legacy .uibs .r{display:flex;justify-content:space-between;gap:12px;padding:3px 14px;
  color:#1b2434;font-variant-numeric:tabular-nums}
.legacy .uibs .r .v{font-weight:600}
.legacy .uibs .r.key{background:#e8f0fe}
.legacy .uibs .r.key .n,.legacy .uibs .r.key .v{color:#1e2a63;font-weight:700}
.legacy .uibs .r.st{margin:3px 14px 0;padding:5px 0 0;border-top:1px solid #e3e8f1;color:#5a6577;font-weight:700}
.legacy .uibs .r.st .v{color:#1b2434}
.legacy .uibs .tot{display:flex;justify-content:space-between;gap:12px;margin:9px 14px 0;
  padding-top:8px;border-top:2px solid #cdd8ff;font-weight:800;color:#1e2a63;
  font-variant-numeric:tabular-nums;font-size:13px}
.legacy .uibs .side.eq .sub:first-child{padding-top:9px}
.legacy .uibalance{display:flex;align-items:center;justify-content:center;gap:9px;
  background:#eef7f1;border-top:1px solid #cfe6d9;padding:8px 14px;
  font-size:11px;font-weight:700;color:#1e7d47;font-variant-numeric:tabular-nums}
.legacy .uibalance .tick{width:15px;height:15px;border-radius:50%;background:#1e7d47;color:#fff;
  display:grid;place-items:center;font-size:9px;flex:none}
.legacy .uitable td.shortq{color:#c0392b;font-weight:700;background:#fdf1f0}
.legacy .uivar{display:flex;align-items:center;gap:10px;background:#fdf1f0;
  border-top:1px solid #f0d4d0;padding:8px 14px;font-size:11px;color:#9c4b41}
.legacy .uivar .lbl{font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:8.5px}
.legacy .uivar .amt{margin-left:auto;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.legacy .uimenu{display:flex;flex-wrap:wrap;gap:15px;padding:5px 13px;background:#f7f9fc;
  border-bottom:1px solid #e3e8f1;font-size:10px;color:#5a6577}
.legacy .uimenu b{color:#1e2a63;font-weight:700}
.legacy .uitools{display:flex;gap:6px;padding:8px 10px;background:#eef2f9;
  border-bottom:1px solid #dbe2ee;overflow:hidden}
.legacy .uitools .tool{flex:1;min-width:0;text-align:center;padding:7px 4px 5px;border-radius:6px;
  background:#fff;border:1px solid #dce3ee;font-size:9px;color:#5a6577;font-weight:600}
.legacy .uitools .tool .g{display:block;font-size:14px;line-height:1.35;color:#2563eb}
.legacy .uitools .tool.on{background:#1e2a63;border-color:#1e2a63;color:#fff}
.legacy .uitools .tool.on .g{color:#ffd23f}
.legacy .uishellbody{display:grid;grid-template-columns:150px 1fr;background:#fff}
.legacy .uiside{background:#f7f9fc;border-right:1px solid #e3e8f1;padding:9px 0 12px}
.legacy .uiside .sh{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;background:#2563eb;margin:0 9px 6px;padding:3px 8px;border-radius:4px;text-align:center}
.legacy .uiside .sh + .sh{margin-top:11px}
.legacy .uiside .l{display:block;padding:3px 14px;font-size:10.5px;color:#1b2434}
.legacy .uiside .l.act{color:#2563eb;font-weight:700}
.legacy .uiside .l .dot{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#c4ccd9;margin-right:7px;vertical-align:middle}
.legacy .uiside .l.act .dot{background:#2563eb}
.legacy .uimain{padding:0}
@media(max-width:700px){
.legacy .uishellbody{grid-template-columns:1fr}
.legacy .uiside{border-right:none;border-bottom:1px solid #e3e8f1}
.legacy .uitools .tool{font-size:0;padding:6px 2px}
.legacy .uitools .tool .g{font-size:13px}
}
.legacy .uiserial{display:flex;align-items:center;gap:10px;padding:8px 13px;background:#f7f9fc;
  border-bottom:1px solid #e3e8f1;flex-wrap:wrap}
.legacy .uiserial .k{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a94a6}
.legacy .uiserial .box{height:26px;min-width:172px;border:1px solid #e7c94a;border-radius:4px;
  background:#fff7d6;padding:0 9px;display:flex;align-items:center;gap:7px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:#1b2434;
  font-variant-numeric:tabular-nums}
.legacy .uiserial .box .cur{width:1px;height:13px;background:#1b2434;animation:uicaret 1.1s steps(1) infinite}
@keyframes uicaret{
0%,49%{opacity:1}
50%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
.legacy .uiserial .box .cur{animation:none}
}
.legacy .uiserial .hint{margin-left:auto;font-size:9.5px;color:#5a6577;font-variant-numeric:tabular-nums}
.legacy .uiserial .hint b{color:#1b2434}
.legacy .uitable td.imei{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:#1b2434}
.legacy .uitable td.imei.new{background:#fff7d6}
.legacy .uimodal{position:absolute;inset:0;z-index:4;display:flex;align-items:center;
  justify-content:center;padding:14px;background:rgba(16,28,54,.42)}
.legacy .uimodal .mwin{width:100%;max-width:430px;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 22px 48px rgba(3,12,30,.4);border:1px solid #c4ccd9}
.legacy .uimodal .mbar{height:27px;background:#2f3d7a;display:flex;align-items:center;gap:8px;padding:0 11px}
.legacy .uimodal .mbar .tl{color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.legacy .uimodal .mbar .wc{margin-left:auto;color:#9aa6d8;font-size:10px}
.legacy .uimodal .uitable{font-size:10.5px}
.legacy .uimodal .uitable th{font-size:8px;padding:5px 9px}
.legacy .uimodal .uitable td{height:23px;padding:0 9px}
.legacy .uimodal .mfoot{display:flex;align-items:center;gap:9px;padding:8px 11px;background:#f7f9fc;
  border-top:1px solid #e3e8f1}
.legacy .uimodal .mfoot .btns{margin-left:auto;display:flex;gap:7px}
.legacy .uimodal .mfoot .bt{font-size:10px;font-weight:700;padding:4px 14px;border-radius:4px;
  border:1px solid #c4ccd9;background:#fff;color:#5a6577}
.legacy .uimodal .mfoot .bt.pri{background:#1e2a63;border-color:#1e2a63;color:#fff}
.legacy .uimodal .uick{font-size:10px;padding:3px 8px}
.legacy .uimodal .mwin.msg{max-width:340px}
.legacy .uimodal .mbar.bad{background:#8c2f26}
.legacy .uimodal .mbody{padding:15px 16px;display:flex;gap:12px;align-items:flex-start}
.legacy .uimodal .mbody .warn{width:26px;height:26px;border-radius:50%;background:#fdf1f0;color:#c0392b;
  display:grid;place-items:center;font-size:14px;font-weight:800;flex:none}
.legacy .uimodal .mbody p{font-size:11.5px;color:#1b2434;line-height:1.55;margin:0}
.legacy .uimodal .mbody p .sn{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.legacy .uimodal .mbody p .lo{display:block;margin-top:5px;color:#5a6577;font-size:10.5px}
.legacy .uiok{display:flex;align-items:center;justify-content:center;gap:9px;background:#eef7f1;
  border-top:1px solid #cfe6d9;padding:8px 14px;font-size:11px;font-weight:700;color:#1e7d47}
.legacy .uiok .tick{width:15px;height:15px;border-radius:50%;background:#1e7d47;color:#fff;
  display:grid;place-items:center;font-size:9px;flex:none}
.legacy .uiok .plain{font-weight:400;color:#5a6577}
.legacy .uichip.wide{max-width:250px}
.legacy .uichip.wide .v{font-size:15px;color:#1e2a63}
.legacy .uichip .imei{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  color:#5a6577;letter-spacing:-.2px;display:block;margin-bottom:2px}
.legacy .uichip .sub{font-size:10px;color:#1e7d47;font-weight:700;display:block;margin-top:3px}
.legacy .uimodes{display:flex;align-items:center;gap:14px;padding:7px 13px;background:#f7f9fc;
  border-bottom:1px solid #e3e8f1;flex-wrap:wrap}
.legacy .uimodes .lbl{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#8a94a6}
.legacy .uimode{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:#5a6577;
  cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.legacy .uimode .rd{width:11px;height:11px;border-radius:50%;border:1px solid #a8b3c4;background:#fff;
  flex:none;position:relative}
.legacy .uimode[aria-checked="true"]{color:#1e2a63;font-weight:700}
.legacy .uimode[aria-checked="true"] .rd{border-color:#2563eb}
.legacy .uimode[aria-checked="true"] .rd::after{content:"";position:absolute;inset:2px;
  border-radius:50%;background:#2563eb}
.legacy .uimode:hover .rd{border-color:#2563eb}
.legacy .uimode:focus-visible{outline:2px solid #2563eb;outline-offset:3px;border-radius:3px}
.legacy .uimodes.alt{background:#fff;border-bottom:1px solid #e3e8f1}
.legacy .uimodes.alt .uimode{border:1px solid #dce3ee;border-radius:5px;padding:3px 10px;background:#fff}
.legacy .uimodes.alt .uimode[aria-checked="true"]{background:#1e2a63;border-color:#1e2a63;color:#fff}
.legacy .uimodes.alt .uimode .rd{display:none}
.legacy .uiview[hidden]{display:none}
.legacy .uiempty{padding:26px 14px;text-align:center;color:#8a94a6;font-size:11px}
.legacy .uiempty b{display:block;color:#5a6577;font-size:12px;margin-bottom:3px}
.legacy .uiledger .bf td{background:#f7f9fc;color:#5a6577;font-style:italic}
.legacy .uitable td.dr{color:#1b2434}
.legacy .uitable td.crd{color:#1e7d47}
.legacy .uitable td.bal{font-weight:700;color:#1e2a63}
.legacy .uibal{display:flex;align-items:center;gap:10px;background:#eef2ff;border-top:2px solid #cdd8ff;
  padding:9px 14px}
.legacy .uibal .k{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5a6577}
.legacy .uibal .v{margin-left:auto;font-size:17px;font-weight:800;color:#1e2a63;
  font-variant-numeric:tabular-nums}
.legacy .uibal .since{font-size:10px;color:#8a94a6}
.legacy .uirights{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e3e8f1}
.legacy .uirights .col{background:#fff;padding:10px 13px 12px}
.legacy .uirights .gh{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#8a94a6;margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid #eef1f6}
.legacy .uiperm{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#1b2434;padding:2.5px 0}
.legacy .uiperm .bx{width:12px;height:12px;border-radius:3px;border:1px solid #c4ccd9;background:#fff;
  flex:none;position:relative}
.legacy .uiperm.on .bx{background:#1e7d47;border-color:#1e7d47}
.legacy .uiperm.on .bx::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.legacy .uiperm.off{color:#8a94a6}
.legacy .uiperm .more{color:#8a94a6;font-style:italic}
.legacy .uicap{display:flex;align-items:center;gap:12px;background:#fff7d6;border-top:1px solid #e7c94a;
  padding:9px 14px}
.legacy .uicap .k{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#8a6d1f}
.legacy .uicap .v{font-size:15px;font-weight:800;color:#7a5c12;font-variant-numeric:tabular-nums}
.legacy .uicap .note{margin-left:auto;font-size:10px;color:#8a6d1f}
@media(max-width:620px){
.legacy .uirights{grid-template-columns:1fr}
}
.legacy .backed{margin-top:12px;font-size:.78rem;color:var(--muted);display:flex;
  align-items:flex-start;gap:7px;line-height:1.5}
.legacy .backed .d{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none;margin-top:.5em}
.legacy .backed b{color:var(--ink);font-weight:700}
.legacy .repgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.legacy .repcard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.legacy .repcard h4{font-size:.92rem;margin-bottom:4px;display:flex;align-items:baseline;gap:8px}
.legacy .repcard h4 span{margin-left:auto;font-size:.78rem;color:var(--orange);font-weight:800}
.legacy .repcard p{font-size:.82rem;color:var(--muted);line-height:1.55;margin:0}
@media(max-width:960px){
.legacy .repgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
.legacy .repgrid{grid-template-columns:1fr}
.legacy .uibs{grid-template-columns:1fr}
}
.legacy .uitabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px 10px 0;background:#eef2f8;
  border-bottom:1px solid #c4ccd9}
.legacy .uitabs .uimode{font-size:10.5px;color:#41506b;background:#e2e8f2;border:1px solid #c4ccd9;
  border-bottom:0;border-radius:5px 5px 0 0;padding:5px 10px;margin-bottom:-1px;
  line-height:1.15;white-space:nowrap;cursor:pointer}
.legacy .uitabs .uimode .rd{display:none}
.legacy .uitabs .uimode:hover{background:#f7f9fc;color:#1e2a63}
.legacy .uitabs .uimode[aria-checked="true"]{background:#fff;color:#1e2a63;font-weight:700;
  box-shadow:inset 0 2px 0 #2563eb}
.legacy .uitabs .uimode.dis{background:#e6e9ef;color:#8a94a6;cursor:default;box-shadow:none}
.legacy .uitabs .uimode.dis:hover{background:#e6e9ef;color:#8a94a6}
.legacy .uigroup{position:relative;border:1px solid #dce3ee;border-radius:6px;background:#fff;
  padding:15px 12px 12px;display:grid;grid-template-columns:repeat(6,1fr);
  gap:9px 11px;align-content:start}
.legacy .uigroup > .lg{position:absolute;top:-6px;left:11px;background:#fff;padding:0 6px;
  font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#5a6577}
.legacy .uigroup.blue{background:#f3f7fd;border-color:#cfe0f5}
.legacy .uigroup.blue > .lg{background:#fff;border-radius:3px}
.legacy .uifield .b.nil{color:#c8cfda}
.legacy .uiitem .uifield .b{overflow:hidden;white-space:nowrap}
.legacy .uifield .b.cta{justify-content:center;font-weight:700;color:#1e2a63;background:#eef2ff;
  border-color:#c8d3f5}
.legacy .uifield .k .rq{color:#c0392b;font-style:normal}
.legacy .uiform.split{grid-template-columns:1.62fr 1fr;align-items:start}
.legacy .uicol{display:grid;gap:13px;align-content:start;min-width:0}
.legacy .uirow2{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start}
.legacy .uicol .uichecks{grid-column:auto;border-top:0;padding-top:0;margin-top:0;
  flex-direction:column;align-items:flex-start;gap:7px}
.legacy .uicol .uiok{display:block;border-top:0;border-radius:6px;margin-top:2px;text-align:center;line-height:1.6;padding:11px 14px}
.legacy .uicol .uiok .tick{display:inline-grid;vertical-align:-2px;margin-right:6px}
.legacy .uinotbuilt{padding:38px 26px;text-align:center;background:#fbfcfe;min-height:214px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.legacy .uinotbuilt .tb{font-size:13.5px;font-weight:700;color:#1e2a63;letter-spacing:.1px}
.legacy .uinotbuilt p{font-size:11.5px;color:#5a6577;max-width:48ch;margin:8px auto 0;line-height:1.65}
.legacy .uinotbuilt .hint{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  font-size:10px;color:#8a94a6;border:1px dashed #cfd8e6;border-radius:980px;padding:5px 14px}
.legacy .uiacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:9px 11px;
  background:#f7f9fc;border-top:1px solid #c4ccd9}
.legacy .uiacts .bt{font-size:10px;font-weight:700;color:#41506b;background:#fff;
  border:1px solid #c4ccd9;border-radius:4px;padding:4px 10px;white-space:nowrap}
.legacy .uiacts .bt.pri{background:#1e2a63;border-color:#1e2a63;color:#fff}
.legacy .uiacts .nav{margin-left:auto;display:flex;gap:3px}
.legacy .uiacts .nav span{border:1px solid #c4ccd9;border-radius:3px;padding:2px 8px;background:#fff;
  color:#5a6577;font-size:9px;letter-spacing:1px}
@media(max-width:960px){
.legacy .uiform.split{grid-template-columns:1fr}
.legacy .uigroup{grid-template-columns:repeat(2,1fr)}
.legacy .uirow2{grid-template-columns:1fr}
.legacy .uichecks{grid-column:1/-1}
}

/* ==========================================================================
   LEGACY LAYER — hand overrides
   The components above came across on retuned tokens alone. These dozen needed
   more than a colour: they were built for a navy-and-orange gradient design and
   have to be rebuilt as light Apple surfaces. Last in the file, so they win.
   ========================================================================== */

/* ---------- Type scale ----------
   The pages use bare <h1>–<h4>; the homepage uses .title/.display. Give the bare
   tags the same scale. Component rules above are more specific and still win. */
.legacy h1{font-size:clamp(2.2rem,5.2vw,3.6rem);letter-spacing:-.025em;line-height:1.05}
.legacy h2{font-size:clamp(1.8rem,3.8vw,2.9rem);letter-spacing:-.022em;line-height:1.08}
.legacy h3{font-size:1.375rem;letter-spacing:-.015em}
.legacy h4{font-size:1.0625rem;letter-spacing:-.01em}
.legacy .section-head h2{margin-bottom:0}
.legacy p.lead{font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:62ch}

/* ---------- Buttons the pages use that the homepage does not ---------- */
.legacy .btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.legacy .btn-outline:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.legacy .btn-ghost{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);border-color:transparent}
.legacy .btn-ghost:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.legacy .more{
  display:inline-flex;align-items:center;gap:.28em;color:var(--accent);
  font-size:.9375rem;font-weight:400;letter-spacing:-.01em;margin-top:14px;
}
.legacy .more::after{content:"›";font-size:1.28em;line-height:0;transform:translateY(-.03em);
  transition:transform 300ms var(--ease-soft)}
.legacy .more:hover::after{transform:translate(3px,-.03em)}

/* ---------- Breadcrumbs ---------- */
.legacy .crumbs{
  background:transparent;border-bottom:1px solid var(--hairline-2);
  font-size:.8125rem;color:var(--muted);letter-spacing:.005em;
}
.legacy .crumbs .wrap{padding:15px var(--pad)}
.legacy .crumbs a{color:var(--muted);transition:color 160ms var(--ease-out)}
.legacy .crumbs a:hover{color:var(--accent)}
.legacy .crumbs span{margin:0 8px;opacity:.45}

/* ==========================================================================
   PAGE HERO — was a navy gradient with an orange glow. Now a light Apple band:
   the product name is the object, and the type carries it.
   ========================================================================== */
.legacy .phero{
  background:var(--bg-soft);color:var(--ink);position:relative;overflow:hidden;
  border-bottom:1px solid var(--hairline-2);
}
.legacy .phero::after{content:none}
.legacy .phero .wrap{
  position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,64px);align-items:center;
  padding:clamp(56px,8vw,96px) var(--pad) clamp(60px,8vw,104px);
}
.legacy .phero h1{color:var(--ink)}
.legacy .phero .tier{
  display:block;color:var(--accent);font-weight:600;font-size:.8125rem;
  letter-spacing:.012em;text-transform:none;margin-bottom:.7em;
}
.legacy .phero p.lead{color:var(--ink-2);font-size:1.1875rem;margin:20px 0 30px;max-width:52ch}
.legacy .phero .badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.legacy .phero .badge,.legacy .badges .badge{
  background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2);
  border:0;border-radius:980px;padding:6px 14px;font-size:.8125rem;font-weight:400;margin:0;
}
.legacy .phero .badge.desk,.legacy .badges .badge.desk{
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-ink);font-weight:600;
}
.legacy .phero .pprice{
  background:var(--card-solid);border:1px solid var(--hairline-2);box-shadow:var(--shadow-1);
  border-radius:var(--r);padding:18px 22px;display:inline-block;
}
.legacy .phero .pprice b{color:var(--ink);font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.legacy .phero .pprice span{color:var(--muted);font-size:.8125rem;display:block;margin-top:2px}
.legacy .phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

/* The hero's right-hand object. Two cases, and they want opposite treatments:
   a real screenshot sits on white like every other screen on the site, while the
   logo placeholder carries a white mark and has to stay dark to be legible —
   which is fine, because a flat black panel is the contrast device the homepage
   already uses. What it must not be is the old navy-to-blue gradient. */
.legacy .pshot,.legacy .phero .pshot{
  background:var(--bg-deep);border:0;
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  min-height:280px;height:auto;display:flex;align-items:center;justify-content:center;
  color:#a1a1a6;font-size:.875rem;overflow:hidden;
}
.legacy .pshot.has-img,.legacy .phero .pshot.has-img{
  padding:0;background:var(--card-solid);border:1px solid var(--hairline-2);
}
.legacy .pshot.has-img img{width:100%;display:block}

/* The "which one is you" picker that sits in some heroes */
.legacy .heropick{
  background:var(--card-solid);border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-2);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);
}
.legacy .heropick .r{padding:15px 0;border-bottom:1px solid var(--hairline-2)}
.legacy .heropick .r:last-child{border-bottom:0;padding-bottom:0}
.legacy .heropick .r .k{
  display:block;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:6px;
}
.legacy .heropick .r .v{color:var(--ink);font-size:1rem;line-height:1.5}
.legacy .heropick .r .v.q{font-style:normal;color:var(--ink);font-weight:600}
.legacy .heropick .out{
  display:inline-block;background:color-mix(in srgb,var(--accent) 11%,transparent);
  color:var(--accent-ink);font-weight:600;border-radius:980px;padding:6px 15px;font-size:.875rem;
}
.legacy .heropick .note{color:var(--muted);font-size:.8125rem;margin-top:10px;line-height:1.5}

/* ==========================================================================
   CTA BAND — was a navy gradient card. Now a true dark band, the same contrast
   device the homepage uses. Light theme only; this is not a dark mode.
   ========================================================================== */
.legacy .ctaband{
  background:var(--bg-deep);color:#f5f5f7;border-radius:var(--r-xl);
  padding:clamp(44px,6vw,72px) clamp(28px,4vw,56px);text-align:center;
}
.legacy .ctaband h2{color:#f5f5f7}
.legacy .ctaband p{color:#a1a1a6;margin:14px auto 28px;max-width:56ch;font-size:1.0625rem}
.legacy .ctaband .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.legacy .ctaband .btn-outline{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.legacy .ctaband .btn-outline:hover{background:rgba(255,255,255,.26)}
.legacy .ctaband .btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}

/* ==========================================================================
   TABLES — the spec table and the comparison shell
   ========================================================================== */
.legacy .spec{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--card-solid);
  border:1px solid var(--hairline-2);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-1);
}
.legacy .spec th,.legacy .spec td{
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--hairline-2);
  font-size:.9375rem;line-height:1.5;
}
.legacy .spec th{background:var(--bg-soft);color:var(--ink);width:34%;font-weight:600;letter-spacing:-.01em}
.legacy .spec td{color:var(--ink-2)}
.legacy .spec tr:last-child th,.legacy .spec tr:last-child td{border-bottom:0}
.legacy .compare-wrap{
  overflow-x:auto;border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);background:var(--card-solid);
}
/* Cells inside the comparison table. apple.css owns table.compare itself, so
   these four had to be written rather than inherited. */
.legacy .compare .pname{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.legacy .compare .pname small{display:block;font-weight:400;color:var(--muted);font-size:.8125rem;letter-spacing:0}
.legacy .compare td .rs{font-weight:600;color:var(--ink)}
.legacy .compare .go{color:var(--accent);font-weight:400;white-space:nowrap}
.legacy .compare .pill,.legacy .pill{
  display:inline-block;padding:5px 12px;border-radius:980px;font-size:.75rem;
  background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2);
}
.legacy .compare .pill.desk,.legacy .pill.desk{
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-ink);font-weight:600;
}
.legacy .badge{
  display:inline-block;padding:6px 14px;border-radius:980px;font-size:.8125rem;
  background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2);border:0;
}
.legacy .badge.desk{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-ink);font-weight:600}

/* The two-column proof row on the product pages. The homepage's four-up strip
   of the same name is fenced off at the top of this file, so nothing has to be
   undone here — this is just the row. */
.legacy .proof{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,52px);align-items:center}
.legacy .proof-t h3{font-size:1.375rem;margin-bottom:.4em}
.legacy .proof-t p{color:var(--muted);font-size:.9375rem;margin-bottom:14px}
@media (max-width:1000px){.legacy .proof{grid-template-columns:1fr;gap:26px}}

/* ---------- Feature cards ---------- */
.legacy .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,22px)}
.legacy .feat .fcard{
  background:var(--card-solid);border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,30px);box-shadow:var(--shadow-1);
  transition:transform 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
}
.legacy .feat .fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.legacy .feat .fcard .ico{
  width:42px;height:42px;border-radius:11px;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px;
}
.legacy .feat .fcard h3{font-size:1.125rem;margin-bottom:.4em}
.legacy .feat .fcard p{color:var(--muted);font-size:.9375rem;line-height:1.55}
.legacy .cfeat li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.75;font-size:0}
.legacy .cfeat li{padding-left:20px;font-size:.9375rem;color:var(--ink-2);line-height:1.5}

/* ---------- Related / report cards ---------- */
.legacy .related{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,22px)}
.legacy .repcard{
  background:var(--card-solid);border:1px solid var(--hairline-2);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow-1);
}
.legacy .repcard h4 span{margin-left:auto;font-size:.8125rem;color:var(--accent);font-weight:600}
.legacy .repnum{
  background:var(--card-solid);border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  padding:24px 18px;text-align:center;box-shadow:var(--shadow-1);
}
.legacy .repnum b{display:block;font-size:2rem;color:var(--ink);font-weight:600;letter-spacing:-.025em;line-height:1}
.legacy .repnum span{display:block;margin-top:6px;color:var(--muted);font-size:.8125rem}

/* ---------- Situation cards (services hub) ---------- */
.legacy .sitcard{
  background:var(--card-solid);border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,30px);box-shadow:var(--shadow-1);
}
.legacy .sitcard .said{
  font-size:1.0625rem;color:var(--ink);font-weight:600;line-height:1.4;letter-spacing:-.015em;
  padding:0 0 16px;border-left:0;border-bottom:1px solid var(--hairline-2);margin-bottom:16px;
}
.legacy .sitcard .rec{margin-top:auto;padding-top:16px;border-top:1px solid var(--hairline-2)}
.legacy .sitcard .rec .lab{
  display:block;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:9px;
}
.legacy .sitcard .stack span{
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-ink);
  border-radius:980px;padding:6px 13px;font-size:.8125rem;font-weight:600;
}
.legacy .sitcard .stack span.alt{
  background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);
  border:0;font-weight:400;
}

/* ---------- The three questions ---------- */
.legacy .qcard{
  background:var(--card-solid);border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,32px);box-shadow:var(--shadow-1);
}
.legacy .qcard .qn{
  position:static;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.875rem;font-weight:600;margin-bottom:16px;
}
.legacy .qcard h3{font-size:1.1875rem;margin:0 0 .5em}
.legacy .qcard .split{
  display:block;margin-top:18px;border-top:1px solid var(--hairline-2);padding-top:0;
  font-size:.8125rem;color:var(--muted);
}
.legacy .qcard .split div{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline-2)}
.legacy .qcard .split div:last-child{border-bottom:0}
.legacy .qcard .split .a{color:var(--ink);font-weight:600;min-width:74px;flex:none}

/* ---------- Service blocks ---------- */
.legacy .svblock{padding:clamp(30px,4vw,44px) 0;border-top:1px solid var(--hairline-2)}
.legacy .svblock .bh .tag{
  font-size:.8125rem;letter-spacing:.012em;text-transform:none;
  font-weight:600;color:var(--accent);
}
.legacy .svblock .verdict{
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-left-width:1px;
  border-radius:var(--r);padding:18px 20px;margin-top:20px;
}
.legacy .svblock .verdict p{color:var(--ink-2);font-size:.9375rem}

/* ==========================================================================
   THE HERO FACSIMILE PANEL
   The panel itself is a transcription of Khan's screen and its colours are not
   touched. What changes is how it is presented: it was drawn tilted, with a
   heavy shadow, to sit against a navy gradient. On a light band it reads flat
   and straight-on, like every other screen on the site.
   ========================================================================== */
.legacy .uiwin{
  transform:none;
  box-shadow:0 10px 28px rgba(0,0,0,.10), 0 40px 90px rgba(0,0,0,.14);
  border:1px solid var(--hairline);border-radius:12px;
}
/* The chip was covering the total it is meant to sit beside — it overlapped
   "TOTAL RS 9,947.40" in the old design too. Moved clear of the panel. */
.legacy .uichip{right:-18px;bottom:-26px}
.legacy .uinote{margin-top:26px;color:var(--muted);font-size:.8125rem;max-width:calc(100% - 240px)}
.legacy .uinote .d{background:var(--accent)}

/* ---------- Anything still carrying the old gradient text ---------- */
.legacy .grad{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--ink);
}

/* ==========================================================================
   RESPONSIVE
   The facsimile panels are transcriptions of a desktop application: their tables
   carry white-space:nowrap and cannot reflow, which is correct — a screenshot of
   a till does not rewrap. What that costs is a min-content width wider than a
   phone, and a `1fr` track inherits that minimum, so the whole grid grew and the
   page scrolled sideways. minmax(0,1fr) removes the implied minimum and the
   panel scrolls inside its own box instead of pushing the page.
   ========================================================================== */
@media (max-width:1000px){
  .legacy .phero .wrap{grid-template-columns:1fr}
  .legacy .pshot{display:none}
  .legacy .feat,.legacy .related{grid-template-columns:repeat(2,1fr)}
  .legacy .proof,.legacy .dayrow{grid-template-columns:minmax(0,1fr)}
  .legacy .proof>*,.legacy .dayrow>*,.legacy .repgrid>*,.legacy .feat>*,.legacy .related>*{min-width:0}
  .legacy .dayshot,.legacy .proof-s,.legacy .rpanel,.legacy .repbox,.legacy .xpanel{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  /* The panel frame itself becomes the scroll box, so a thirteen-column till
     screen can be read by swiping it rather than by shrinking it into a lie. */
  .legacy .uiwin{max-width:none;overflow-x:auto;overflow-y:hidden}
}
@media (max-width:760px){
  .legacy .feat,.legacy .related{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .legacy .feat .fcard,.legacy .feat .fcard:hover{transform:none;transition:none}
}

/* ==========================================================================
   INTRO BAND — added 21 Aug. It was one paragraph alone in a full-width band
   and read as an empty section. The paragraph is unchanged; it now has a
   shape around it, and four facts the page already makes further down are
   pulled forward beside it. No new claim.
   ========================================================================== */
.legacy .intro{
  display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(30px,4.5vw,64px);
  align-items:center;
}
.legacy .intro-lead{
  font-size:clamp(1.25rem,2.1vw,1.55rem);line-height:1.42;letter-spacing:-.018em;
  color:var(--ink);font-weight:500;margin:0;max-width:30ch;
}
.legacy .intro-lead .n{font-weight:600}
.legacy .intro-sub{
  color:var(--muted);font-size:1.0625rem;line-height:1.55;margin:20px 0 0;max-width:52ch;
}
.legacy .intro-sub a{color:var(--accent)}
.legacy .intro-facts{
  list-style:none;margin:0;padding:0;border:1px solid var(--hairline-2);
  border-radius:var(--r-lg);background:var(--card-solid);overflow:hidden;
  box-shadow:var(--shadow-1);
}
.legacy .intro-facts li{
  display:grid;grid-template-columns:4.9em 1fr;align-items:baseline;gap:14px;
  padding:16px clamp(18px,2vw,24px);margin:0;
}
.legacy .intro-facts li + li{border-top:1px solid var(--hairline-2)}
.legacy .intro-facts b{
  font-size:1.375rem;font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.1;
}
.legacy .intro-facts span{color:var(--muted);font-size:.9375rem;line-height:1.45}
@media (max-width:900px){
  .legacy .intro{grid-template-columns:1fr;gap:32px}
  .legacy .intro-lead{max-width:none}
}

/* ==========================================================================
   CTA BAND — it was a flat black rectangle. Same dark contrast device, but
   lit: a blue wash out of the top-left corner, a hairline along the top edge,
   and the three answers that otherwise only appear in the FAQ.
   Still light theme only; this is a band, not a dark mode.
   ========================================================================== */
.legacy .ctaband{
  position:relative;overflow:hidden;
  background:
    radial-gradient(86% 120% at 6% -18%, rgba(0,122,255,.58), rgba(0,122,255,0) 62%),
    radial-gradient(74% 104% at 100% 116%, rgba(140,86,255,.42), rgba(140,86,255,0) 64%),
    radial-gradient(52% 70% at 74% -8%, rgba(0,196,255,.16), rgba(0,196,255,0) 70%),
    var(--bg-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  padding:clamp(52px,7vw,86px) clamp(28px,4vw,56px);
}
.legacy .ctaband .eyebrow{display:block;color:#7cc4ff;margin-bottom:.8em;font-size:.8125rem;letter-spacing:.01em}
.legacy .ctaband h2{color:#f5f5f7;letter-spacing:-.024em}
.legacy .ctaband p{color:#a1a1a6;margin:16px auto 30px;max-width:54ch;font-size:1.0625rem;line-height:1.55}
.legacy .ctaband .btn-outline,.legacy .ctaband .btn-ghost{
  background:rgba(255,255,255,.15);color:#fff;border-color:transparent;
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
}
.legacy .ctaband .btn-outline:hover,.legacy .ctaband .btn-ghost:hover{background:rgba(255,255,255,.25)}
.legacy .ctaband .ctafacts{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;
  margin:clamp(34px,4.5vw,50px) auto 0;max-width:760px;
  background:rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.legacy .ctaband .ctafacts li{background:rgba(255,255,255,.055);padding:20px 18px;margin:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.legacy .ctaband .ctafacts b{display:block;color:#f5f5f7;font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.legacy .ctaband .ctafacts span{display:block;color:#9d9da3;font-size:.8125rem;margin-top:5px;line-height:1.45}
@media (max-width:700px){.legacy .ctaband .ctafacts{grid-template-columns:1fr}}

/* ---------- .rpanel now also carries the item card ---------- */
.legacy .rpanel .eyebrow{display:block;text-align:center;margin-bottom:.6em}
.legacy .rpanel p.pcap{margin:20px auto 0;font-size:.875rem;max-width:74ch}

/* ==========================================================================
   Demo gates — added 25 Aug 2026.
   Screens on the public site now show a deliberate subset; the withheld parts
   link here rather than being drawn. Three surfaces: a tab that is not opened
   (.uimode.gate), the collapsed POS action rail (.ri.gate), and the note that
   states how much of the product the page is showing (.gate-note).
   ========================================================================== */

/* a tab we do not open in public */
.legacy .uitabs .uimode.gate{
  background:#eef1f6;color:#7b8598;cursor:pointer;box-shadow:none;
  text-decoration:none;position:relative;padding-right:20px}
.legacy .uitabs .uimode.gate::after{
  content:"\2192";position:absolute;right:7px;top:50%;transform:translateY(-50%);
  font-size:10px;opacity:.55}
.legacy .uitabs .uimode.gate:hover{background:var(--brand);color:#fff}
.legacy .uitabs .uimode.gate:hover::after{opacity:1}

/* the collapsed action rail on the billing demo */
.pos-rail .ri.gate{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
  font-size:12px;color:#3d485c;text-decoration:none;cursor:pointer;
  border:1px dashed #c4ccd9;background:#fbfcfe}
.pos-rail .ri.gate em{
  font-style:normal;width:17px;height:17px;border-radius:4px;display:grid;
  place-items:center;font-size:7px;flex:none;background:#eef1f6;color:#5a6577;
  letter-spacing:-1px}
.pos-rail .ri.gate .gk{
  margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--brand)}
.pos-rail .ri.gate:hover{border-color:var(--brand);background:#fff8f0}

/* "you are looking at N% of the product" */
.gate-note{
  margin:26px auto 0;max-width:70ch;text-align:center;
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--card);padding:22px 24px}
.gate-note p{margin:0 0 14px;font-size:.9375rem;line-height:1.6;color:var(--ink)}
.gate-note .gate-sub{
  display:block;margin-top:10px;font-size:.8125rem;color:var(--muted)}
@media (max-width:640px){.gate-note{padding:18px 16px;text-align:left}}

/* ---------- demo request page (demo.html), 25 Aug 2026 ---------- */
.demoreq{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin-top:30px}
.dr-form,.dr-side{border:1px solid var(--hairline);border-radius:var(--r);background:var(--card);padding:28px 26px}
.dr-form h3{margin:0 0 8px;font-size:1.375rem;letter-spacing:-.01em}
.dr-lede{margin:0 0 20px;color:var(--muted);font-size:.9375rem;line-height:1.6}
.dr-form label{display:block;margin:14px 0 6px;font-size:.8125rem;font-weight:600;color:var(--ink)}
.dr-form label .opt{font-weight:400;color:var(--muted)}
.dr-form input,.dr-form select,.dr-form textarea{
  width:100%;font:inherit;font-size:.9375rem;color:var(--ink);background:#fff;
  border:1px solid #d2d2d7;border-radius:10px;padding:11px 13px;outline:none}
.dr-form textarea{resize:vertical;line-height:1.5}
.dr-form input:focus,.dr-form select:focus,.dr-form textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,.15)}
.dr-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.dr-err{margin:12px 0 0;font-size:.875rem;color:#b3261e}
.dr-fine{margin:14px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.55}
.dr-side h4{margin:0 0 12px;font-size:1rem;letter-spacing:-.01em}
.dr-list,.dr-steps{margin:0;padding-left:1.1em;display:grid;gap:10px}
.dr-list li,.dr-steps li{font-size:.9063rem;line-height:1.55;color:var(--muted)}
.dr-list li b,.dr-steps li b{color:var(--ink)}
.dr-alt{margin-top:24px;padding-top:18px;border-top:1px solid var(--hairline)}
.dr-alt p{margin:0;font-size:.9063rem;line-height:1.6;color:var(--muted)}
@media (max-width:880px){.demoreq{grid-template-columns:1fr}}
.pos-rail .ri.gate{flex-wrap:wrap;line-height:1.25}
.pos-rail .ri.gate b{font-weight:700;color:var(--ink)}
.pos-rail .rail-note{margin:12px 2px 0;font-size:10px;line-height:1.5;color:#8a94a6}

/* description panels behind the gated item tabs (25 Aug, second pass) */
.legacy .uinotbuilt{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;min-height:230px;padding:34px 26px}
.legacy .uinotbuilt .tb{font-size:1.0625rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.legacy .uinotbuilt p{margin:0;max-width:54ch;font-size:.9375rem;line-height:1.6;color:#4a5361}
.legacy .uinotbuilt .hint{max-width:52ch;font-size:.8125rem;line-height:1.5;color:#8a94a6}
.legacy .uinotbuilt .btn{margin-top:6px}
.dgrid.one{grid-template-columns:auto 1fr;gap:9px 12px}

/* flow diagrams on the two compliance pages (25 Aug) — not facsimiles of any
   screen, so rule 3 does not apply: they draw a process Khan described. */
.flowdia{margin:26px auto 0;max-width:1000px;overflow-x:auto}
.flowdia svg{display:block;width:100%;min-width:640px;height:auto}
.phero .shotfig{margin:0}
.phero .shotfig img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--hairline);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.phero .shotfig figcaption{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--muted)}


/* ==========================================================================
   Added 29 Aug 2026.

   .repgrid-4 replaces four inline `style="grid-template-columns:repeat(4,1fr)"`
   attributes. An inline style beats every media query, so those four grids
   stayed four columns wide at 390px — bizman-erp.html pushed the page 36px
   sideways because of it. A class can be made responsive; an inline style
   cannot.

   .hide-sm was used on index.html but never defined, so the <br> it sits on
   never collapsed on a phone.

   .memo marks a table row that is deliberately outside the footer's total —
   BizMan's "Sale value" line sits in a table whose footer totals three cost
   heads. check_pages.py skips .memo rows when it sums a column.
   ========================================================================== */
.legacy .repgrid.repgrid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){ .legacy .repgrid.repgrid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .legacy .repgrid.repgrid-4{grid-template-columns:1fr} }
.hide-sm{display:inline}
@media (max-width:560px){ .hide-sm{display:none} }
.legacy .uitable tr.memo td{font-style:italic}


/* ==========================================================================
   The gated demo — demo.html, 29 Aug 2026.

   Five real screens behind a form. The tab strip scrolls rather than wrapping,
   because five labels wrap to two ragged lines at 390px and a wrapped tab strip
   stops reading as a control.

   .dmo-note is the banner that sits over every cut-down screen elsewhere on the
   site. It is deliberately loud: a prospect who thinks the drawn panel is the
   product will judge the product by the panel.
   ========================================================================== */
.legacy .dmo{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.07)}
.legacy .dmo-tabs{display:flex;gap:2px;padding:8px 8px 0;background:#f4f6f9;
  border-bottom:1px solid var(--hairline);overflow-x:auto;-webkit-overflow-scrolling:touch}
.legacy .dmo-tab{flex:none;appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.8125rem;font-weight:600;color:var(--muted);
  padding:10px 15px;border-radius:8px 8px 0 0;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color 140ms ease,background-color 140ms ease}
.legacy .dmo-tab:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.legacy .dmo-tab.is-on{color:var(--accent-ink);background:var(--surface);
  border-bottom-color:var(--accent-ink)}
.legacy .dmo-tab:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
.legacy .dmo-stage{padding:18px}
.legacy .dmo-shot{display:none;margin:0}
.legacy .dmo-shot.is-on{display:block}
.legacy .dmo-shot img{display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--hairline-2)}
.legacy .dmo-cap{margin:14px 2px 2px;font-size:.875rem;line-height:1.6;color:var(--muted)}
.legacy .dmo-cap b{color:var(--ink)}
.legacy .dmo-after{max-width:760px;margin:34px auto 0;text-align:center}
.legacy .dmo-after h3{font-size:1.375rem;margin:0 0 12px}
.legacy .dmo-after p{color:var(--muted);font-size:.9375rem;margin:0 0 12px}
.legacy .dmo-after .cta{justify-content:center;margin-top:18px}
.legacy .dr-ok{margin-top:10px;font-size:.875rem;font-weight:600;color:#1e7d47}
@media (max-width:560px){
  .legacy .dmo-stage{padding:10px}
  .legacy .dmo-tab{padding:9px 12px;font-size:.78125rem}
}

/* the banner over every cut-down screen on the rest of the site */
.legacy .dmo-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:0 0 14px;padding:11px 15px;border-radius:10px;
  background:#fff6e8;border:1px solid #f0c98a;color:#7a4b06;
  font-size:.8125rem;line-height:1.5}
.legacy .dmo-note b{color:#5c3803}
.legacy .dmo-note a{color:#8a4b00;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;margin-left:auto;white-space:nowrap}
.legacy .dmo-note a:hover{color:#5c3803}
@media (max-width:560px){ .legacy .dmo-note a{margin-left:0} }


/* ==========================================================================
   Party Summary panel, and the disabled account types. 29 Aug 2026.

   .uimode.is-off is an account type that exists on the real screen but has no
   view drawn on this page. It renders visibly unavailable rather than being
   dropped: removing it would misrepresent the screen, and leaving it live is
   the bug this panel was reported for.

   .rest is the collapsed "N more accounts" row both summaries end on — the
   report prints it that way rather than listing twenty-three lines.
   ========================================================================== */
.legacy .uimode.is-off{opacity:.42;cursor:default;pointer-events:none}
.legacy .uimode.is-off .rd{border-color:currentColor}
.legacy .uiparty .uikpi{border-bottom:1px solid #e3e8f1}
.legacy .uiparty .uitable td.sn{color:#9aa5b4}
.legacy .uiparty tr.rest td{color:#6b7787;background:#fafbfd}
.legacy .uiparty tr.rest td i{font-style:italic}


/* ==========================================================================
   Browser chrome for the BizView panel. 29 Aug 2026.

   The desktop panels open with a title bar and window controls. BizView does
   not have those, so putting them on its page would be drawing the wrong
   product. Traffic lights and an address bar instead — showing a path and no
   hostname, because every customer's install lives somewhere different and an
   invented domain is a fake screenshot.
   ========================================================================== */
.legacy .uibar.uiweb{display:flex;align-items:center;gap:7px;
  background:#e9edf3;border-bottom:1px solid #d7dee8;padding:9px 13px}
.legacy .uibar.uiweb .wd{width:10px;height:10px;border-radius:50%;flex:none}
.legacy .uibar.uiweb .wd.r{background:#ff5f57}
.legacy .uibar.uiweb .wd.y{background:#febc2e}
.legacy .uibar.uiweb .wd.g{background:#28c840}
.legacy .uibar.uiweb .url{flex:1;margin-left:8px;background:#fff;
  border:1px solid #d7dee8;border-radius:6px;padding:4px 11px;
  font-family:"SF Mono",ui-monospace,Consolas,monospace;font-size:11px;
  color:#5a6577;display:flex;align-items:center;gap:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legacy .uibar.uiweb .url .lk{font-size:9px;opacity:.65}


/* ==========================================================================
   The demo's framed screens. 29 Aug 2026.

   These replaced five JPEGs that were rendered at 760px and displayed at
   about 1150px — a 50% upscale, which is why every one of them was soft.
   The replacements are the HTML the JPEGs were rendered from: no images at
   all, so they stay sharp at any scale, and their controls work.

   The frame scales rather than squashes. JS sets the height and the scale
   because only JS can measure the framed document.
   ========================================================================== */
.legacy .dmo-frame{position:relative;width:100%;overflow:hidden;
  border-radius:8px;border:1px solid var(--hairline-2);background:#fff}
.legacy .dmo-frame iframe{display:block;border:0;transform-origin:top left;
  background:#fff}
/* below the scale floor the screen no longer fits — let it scroll rather
   than shrink into something nobody can read */
.legacy .dmo-frame.is-wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legacy .dmo-open{margin:9px 2px 0;font-size:.75rem;text-align:right}
.legacy .dmo-open a{color:var(--muted);text-decoration:underline;
  text-underline-offset:2px}
.legacy .dmo-open a:hover{color:var(--accent-ink)}

/* The unlock scrolls to the screens; without this the section lands under the
   sticky header and the first thing a prospect sees is a screen with its top
   cut off. */
.legacy #screens{scroll-margin-top:96px}


/* ==========================================================================
   If the reveal script never runs, the site is blank. 31 Aug 2026.

   .reveal is opacity:0 until JavaScript adds .in. That is fine while the
   script loads -- but if apple-nav.js ever 404s, is blocked, or the visitor
   has JS off, every page on this site renders as an empty white column with
   working navigation. On a cold call that is not a degraded page, it is a
   dead company. One rule removes the whole failure mode.
   ========================================================================== */
@media (scripting: none){
  .reveal{opacity:1 !important;transform:none !important}
}