/* =========================================================
   CyberEdge Technologies — SAP-inspired design system
   ========================================================= */

:root{
  --ce-blue:#0a6ed1;
  --ce-blue-dark:#0854a0;
  --ce-blue-darker:#052b4e;
  --ce-navy:#0b1c2c;
  --ce-accent:#1cc8c8;
  --ce-gold:#f0ab00;
  --ce-green:#30914c;
  --ce-red:#bb0000;

  --ink:#1d2d3e;
  --ink-2:#556b82;
  --ink-3:#8396a8;
  --line:#e3e8ee;
  --bg:#ffffff;
  --bg-alt:#f5f6f7;
  --bg-tint:#eaf2fb;

  --radius:4px;
  --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(11,28,44,.08);
  --shadow:0 4px 16px rgba(11,28,44,.10);
  --shadow-lg:0 12px 40px rgba(11,28,44,.16);

  --max:1360px;
  --nav-h:64px;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---- Fluid type scale ----------------------------------------
     Every size interpolates between a 360px phone and a 1360px desktop,
     so text scales smoothly across all devices instead of snapping at
     breakpoints. The small end is deliberately generous: nothing in the
     UI drops below 13px on a phone, and body copy stays at 16px+. */
  --fs-xs:   clamp(0.8rem,   0.76rem + 0.20vw, 0.86rem); /* pills, badges   */
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.94rem); /* meta, captions  */
  --fs-base: clamp(1rem,    0.97rem + 0.15vw, 1.05rem);  /* body copy       */
  --fs-lead: clamp(1.06rem, 1.00rem + 0.30vw, 1.25rem);  /* intro para      */
  --fs-h3:   clamp(1.12rem, 1.05rem + 0.36vw, 1.4rem);
  --fs-h2:   clamp(1.55rem, 1.25rem + 1.5vw,  2.5rem);
  --fs-h1:   clamp(2rem,    1.55rem + 2.2vw,  3.75rem);
  --fs-eyebrow: clamp(0.76rem, 0.73rem + 0.15vw, 0.8rem);

  /* minimum comfortable touch target (WCAG 2.5.8 / Apple HIG) */
  --tap:44px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:"72","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ce-blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:400;letter-spacing:-.02em;color:var(--ce-navy);line-height:1.15}
h1{font-size:var(--fs-h1);line-height:1.1}
h2{font-size:var(--fs-h2);line-height:1.18}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.25}
h4{font-size:var(--fs-base);font-weight:700}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.15rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
/* visually hidden, still announced — used for labels on self-evident controls */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.narrow{max-width:860px;margin:0 auto}
.center{text-align:center}
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ce-blue);margin:0 0 .75rem;display:block;
}
.lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.6}
section{padding:clamp(56px,7vw,96px) 0}
.sec-alt{background:var(--bg-alt)}
.sec-tint{background:var(--bg-tint)}
.sec-dark{background:var(--ce-navy);color:#dfe7ef}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark .lead{color:#a9bccf}
.sec-tight{padding:clamp(40px,4vw,60px) 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.4rem;border-radius:var(--radius);
  font-size:.94rem;font-weight:700;border:1px solid transparent;
  cursor:pointer;transition:.18s var(--ease);text-decoration:none!important;
}
.btn-primary{background:var(--ce-blue);color:#fff;border-color:var(--ce-blue)}
.btn-primary:hover{background:var(--ce-blue-dark);border-color:var(--ce-blue-dark)}
.btn-ghost{background:transparent;color:var(--ce-blue);border-color:var(--ce-blue)}
.btn-ghost:hover{background:var(--bg-tint)}
.btn-light{background:#fff;color:var(--ce-blue-darker);border-color:#fff}
.btn-light:hover{background:#e9eef4}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-lg{padding:.9rem 1.9rem;font-size:1rem}
.arrow-link{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;
  color:var(--ce-blue);text-decoration:none!important;
}
.arrow-link span{transition:transform .18s var(--ease)}
.arrow-link:hover span{transform:translateX(4px)}

/* ---------- Top utility bar ---------- */
.utility{
  background:var(--ce-blue-darker);color:#c3d4e6;font-size:.78rem;
}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:34px}
.utility a{color:#c3d4e6}
.utility a:hover{color:#fff}
.utility-tags{display:flex;gap:14px;flex-wrap:wrap}
.utility-tags span{display:inline-flex;align-items:center;gap:5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ce-accent);display:inline-block}

/* ---------- Skip link (a11y) ----------
   Hidden using the clip pattern rather than an off-screen offset. An
   offset only works if an ancestor clips it; the sticky header does not,
   so the link stayed visible over the utility bar. Clipping to a 1px box
   removes it visually while keeping it focusable for keyboard users. */
.skip-link{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link:focus{
  position:fixed;
  left:12px;top:12px;
  width:auto;height:auto;
  margin:0;padding:.75rem 1.15rem;
  overflow:visible;
  clip:auto;
  clip-path:none;
  z-index:1100;
  background:var(--ce-blue);color:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  font-size:.92rem;font-weight:700;
  text-decoration:none!important;
}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--ce-blue);outline-offset:2px;border-radius:2px;
}
.hero a:focus-visible,.page-hero a:focus-visible,
.sec-dark a:focus-visible,.site-footer a:focus-visible,.cta-band a:focus-visible{
  outline-color:#fff;
}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:900;background:#fff;
  border-bottom:1px solid var(--line);
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:8px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none!important;margin-right:22px}
.brand-mark{
  width:34px;height:34px;border-radius:6px;flex:0 0 34px;
  background:linear-gradient(135deg,var(--ce-blue) 0%,var(--ce-blue-darker) 100%);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem;letter-spacing:-.03em;
}
.brand-text{line-height:1.05}
.brand-text b{display:block;font-size:1.05rem;color:var(--ce-navy);letter-spacing:-.02em}
.brand-text small{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

.nav-links{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-links > li > a{
  display:flex;align-items:center;height:var(--nav-h);padding:0 13px;
  font-size:.92rem;color:var(--ink);text-decoration:none!important;
  border-bottom:3px solid transparent;transition:.15s;
  /* multi-word labels such as "Demo Software" must not wrap and make the
     header two lines tall */
  white-space:nowrap;
}
.nav-links > li > a:hover{color:var(--ce-blue)}
.nav-links > li > a.active{color:var(--ce-blue);border-bottom-color:var(--ce-blue);font-weight:700}
/* tighten the run between the mobile breakpoint and a comfortable desktop,
   where seven items plus a two-word label would otherwise crowd the CTA */
@media (max-width:1160px){
  .nav-links > li > a{padding:0 9px;font-size:.88rem}
}
.nav-spacer{flex:1}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-icon{
  width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;
  color:var(--ink-2);background:transparent;border:none;cursor:pointer;
}
.nav-icon:hover{background:var(--bg-alt);color:var(--ce-blue)}

/* mega menu */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.18s var(--ease);z-index:950;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{
  max-width:var(--max);margin:0 auto;padding:32px 24px 36px;
  display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:32px;
}
.mega h5{
  margin:0 0 12px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.mega ul{list-style:none;margin:0;padding:0}
.mega ul li{margin-bottom:9px}
.mega ul a{color:var(--ink);font-size:.9rem;text-decoration:none!important}
.mega ul a:hover{color:var(--ce-blue)}
.mega-promo{
  background:var(--bg-tint);border-radius:var(--radius-lg);padding:22px;
}
.mega-promo p{font-size:.88rem;color:var(--ink-2)}

.burger{display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.mobile-panel{display:none}
.mobile-panel[hidden]{display:none!important}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1000px 480px at 82% 12%,rgba(28,200,200,.20),transparent 62%),
    radial-gradient(760px 460px at 10% 88%,rgba(10,110,209,.42),transparent 60%),
    linear-gradient(120deg,#04121f 0%,#062744 46%,#0a4c8a 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 70% 40%,#000 0%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
  padding:clamp(64px,8vw,120px) 0;
}
.hero h1{color:#fff;margin-bottom:1rem}
.hero p.lead{color:#c3d7ea;max-width:56ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:2.4rem}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:.4rem .85rem;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font-size:.76rem;letter-spacing:.05em;color:#d9e7f4;background:rgba(255,255,255,.06);
}
.hero-panel{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);padding:26px;backdrop-filter:blur(9px);
}
.hero-panel h4{color:#fff;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ce-accent)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.13);border-radius:var(--radius);overflow:hidden;margin-top:14px}
.hero-stats div{background:#08243d;padding:18px 16px}
.hero-stats b{display:block;font-size:1.75rem;font-weight:300;color:#fff;letter-spacing:-.03em}
.hero-stats small{font-size:var(--fs-xs);color:#9db6cc;letter-spacing:.05em}
/* the scorecard footnote is inline-styled at .83rem in the page markup */
.hero-panel > p[style]{font-size:var(--fs-sm)!important;line-height:1.55}

/* page banner (inner pages) */
.page-hero{
  color:#fff;padding:clamp(56px,7vw,90px) 0 clamp(48px,6vw,72px);
  background:
    radial-gradient(700px 380px at 88% 8%,rgba(28,200,200,.18),transparent 60%),
    linear-gradient(120deg,#04121f 0%,#083357 60%,#0a5d9e 100%);
}
.page-hero h1{color:#fff;margin-bottom:.6rem}
.page-hero p{color:#bcd2e6;max-width:70ch;font-size:1.08rem}
.crumbs{font-size:.8rem;color:#8fb0cc;margin-bottom:1.2rem;letter-spacing:.03em}
.crumbs a{color:#8fb0cc}
.crumbs a:hover{color:#fff}

/* ---------- Section headers ---------- */
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Cards ---------- */
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;transition:.2s var(--ease);display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cfdcea}
.card .ico{
  width:44px;height:44px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-tint);color:var(--ce-blue);margin-bottom:16px;flex:0 0 auto;
}
.card .ico svg{width:22px;height:22px}
.card p{color:var(--ink-2);font-size:var(--fs-base);flex:1;line-height:1.6}
.card .arrow-link{margin-top:6px}
.card-flat{border:none;background:var(--bg-alt);}
.card-flat:hover{background:#eef1f4;transform:none;box-shadow:none}
.card-dark{background:#102a41;border-color:#1c3d5c}
.card-dark h3{color:#fff}
.card-dark p{color:#a9bccf}
.card-dark .ico{background:rgba(28,200,200,.14);color:var(--ce-accent)}

.card-top{border-top:3px solid var(--ce-blue)}

/* feature row */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.feature.rev .feature-media{order:-1}
.feature-media{
  border-radius:var(--radius-lg);overflow:hidden;min-height:320px;
  background:linear-gradient(135deg,#0a6ed1,#052b4e);
  display:grid;place-items:center;color:#fff;padding:36px;position:relative;
}
.feature-media::after{
  content:"";position:absolute;inset:0;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:40px 40px;
}
.tick{list-style:none;padding:0;margin:0 0 1.4rem}
.tick li{position:relative;padding-left:30px;margin-bottom:.7rem;color:var(--ink-2)}
.tick li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:var(--ce-blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center/13px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center/13px no-repeat;
}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.stats > div{background:#fff;padding:28px 24px;text-align:center}
.stats b{display:block;font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:300;color:var(--ce-blue);letter-spacing:-.03em;line-height:1.1}
.stats small{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-2);letter-spacing:.03em}
.sec-dark .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.sec-dark .stats > div{background:#0f2537}
.sec-dark .stats b{color:var(--ce-accent)}
.sec-dark .stats small{color:#9db6cc}

/* ---------- Tables ---------- */
.table-tools{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px;
}
.table-tools input,.table-tools select{
  font:inherit;font-size:.9rem;padding:.55rem .8rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);min-width:180px;
}
.table-tools input:focus,.table-tools select:focus{outline:2px solid var(--ce-blue);outline-offset:-1px;border-color:var(--ce-blue)}
.table-tools .count{margin-left:auto;font-size:.85rem;color:var(--ink-2)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px}
table.data thead th{
  background:var(--bg-alt);text-align:left;padding:14px 16px;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.data thead th.sortable{cursor:pointer;user-select:none}
table.data thead th.sortable:hover{color:var(--ce-blue)}
table.data tbody td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:#f8fbff}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data td.idx{color:var(--ink-3);width:48px}
.pill{
  display:inline-block;padding:.24rem .65rem;border-radius:999px;font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.03em;white-space:nowrap;
}
.pill-done{background:#e7f3ea;color:var(--ce-green)}
.pill-prog{background:#fdf3e0;color:#a76a00}
.pill-dept{background:var(--bg-tint);color:var(--ce-blue-dark)}
.pill-cat{background:#eee9f7;color:#5b34a8}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 26px 38px}
.timeline li::before{
  content:"";position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--ce-blue);
}
.timeline h4{margin-bottom:.25rem}
.timeline small{color:var(--ink-3);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.timeline p{color:var(--ink-2);font-size:.94rem;margin:.3rem 0 0}

/* ---------- Logos / clients ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.logos div{
  background:#fff;padding:26px 18px;display:grid;place-items:center;text-align:center;
  font-weight:700;color:var(--ink-2);font-size:.88rem;letter-spacing:.02em;min-height:96px;
}
.logos div small{display:block;font-weight:400;color:var(--ink-3);font-size:.74rem;margin-top:4px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Brand logo image ---------- */
.brand-mark-img{
  width:38px;height:38px;flex:0 0 38px;object-fit:contain;
}
.site-footer .brand-mark-img{filter:brightness(1.7) saturate(.85)}

/* ---------- Leadership / team ---------- */
.person{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s var(--ease);
}
.person:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.person-top{
  padding:26px 24px 20px;display:flex;gap:16px;align-items:center;
  background:linear-gradient(135deg,#f3f7fc,#e7f0f9);border-bottom:1px solid var(--line);
}
.avatar{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ce-blue),var(--ce-blue-darker));
  color:#fff;font-size:1.25rem;font-weight:700;letter-spacing:.02em;
}
.avatar.gold{background:linear-gradient(135deg,#f0ab00,#a06e00)}
.avatar.teal{background:linear-gradient(135deg,#1cc8c8,#0b6b6b)}
.avatar.plum{background:linear-gradient(135deg,#7a52c8,#3a2f6b)}
.avatar.green{background:linear-gradient(135deg,#30914c,#125a2a)}
.person-top h3{margin:0 0 2px;font-size:1.12rem}
.person-top .role{
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ce-blue);
}
.person-body{padding:22px 24px;flex:1}
.person-body p{color:var(--ink-2);font-size:.93rem}
.creds{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.creds span{
  font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:.22rem .55rem;
  background:var(--bg-tint);color:var(--ce-blue-dark);border-radius:3px;
}
.person.feature-person{grid-column:span 2}
@media (max-width:900px){.person.feature-person{grid-column:span 1}}

/* competence blocks */
.comp{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--ce-blue);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:24px 26px;
}
.comp.alt{border-left-color:var(--ce-accent)}
.comp.gold{border-left-color:var(--ce-gold)}
.comp.green{border-left-color:var(--ce-green)}
.comp h3{margin-bottom:14px}
.cert-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cert-list li{
  font-size:var(--fs-sm);padding:.5rem .8rem;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);
}
.cert-list li b{color:var(--ce-blue-dark)}
.sec-dark .cert-list li{background:#0f2537;border-color:#1c3d5c;color:#cfe0ef}
.sec-dark .cert-list li b{color:var(--ce-accent)}

/* ---------- Client logo wall ---------- */
.logo-wall{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.logo-wall figure{
  background:#fff;margin:0;padding:24px 16px 20px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:12px;text-align:center;min-height:170px;
  transition:.2s var(--ease);
}
.logo-wall figure:hover{background:var(--bg-tint)}
/* Client artwork is a mix of transparent PNG and JPG crests at varying
   aspect ratios. `contain` keeps every one whole and correctly proportioned
   inside a fixed box, so the wall stays on a consistent grid. */
.logo-wall img{
  width:auto;height:64px;max-width:100%;object-fit:contain;
  mix-blend-mode:multiply;   /* hides the white box on JPG crests */
}
.sec-dark .logo-wall img{mix-blend-mode:normal}
.logo-wall figcaption{font-size:.78rem;line-height:1.35;color:var(--ink-2);font-weight:700}
.logo-wall figcaption small{display:block;font-weight:400;color:var(--ink-3);font-size:.7rem;margin-top:3px;letter-spacing:.04em}
.sec-dark .logo-wall{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.sec-dark .logo-wall figure{background:#0f2537}
.sec-dark .logo-wall figure:hover{background:#143049}
.sec-dark .logo-wall figcaption{color:#cfe0ef}
.sec-dark .logo-wall figcaption small{color:#8ba3ba}

/* partner lockup */
.partner-lockup{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
}
.partner-lockup img{height:52px;width:auto}
.partner-lockup .pl-text{font-size:.9rem;color:var(--ink-2);max-width:46ch}
.partner-lockup .pl-text strong{color:var(--ce-navy);display:block;font-size:1rem}

/* ---------- Product / spec components ---------- */
.prod{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s var(--ease);
}
.prod:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.prod-head{
  padding:22px 24px;background:linear-gradient(135deg,#0a6ed1,#052b4e);color:#fff;
}
.prod-head h3{color:#fff;margin:0}
.prod-head span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#a9d4ff}
.prod-head.alt{background:linear-gradient(135deg,#123a6b,#1cc8c8)}
.prod-head.dark{background:linear-gradient(135deg,#1d2d3e,#0a5aa8)}
.prod-body{padding:22px 24px;flex:1}
.prod-body p{color:var(--ink-2);font-size:.94rem}
.prod-body ul{padding-left:1.1rem;color:var(--ink-2);font-size:.9rem;margin-bottom:0}
.prod-body ul li{margin-bottom:.35rem}

.spec-list{list-style:none;margin:0;padding:0;font-size:.9rem}
.spec-list li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.spec-list li:last-child{border-bottom:none}
.spec-list b{color:var(--ce-navy);font-weight:700;text-align:right}

.model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.model-grid span{
  display:block;padding:.6rem .4rem;text-align:center;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:.84rem;font-weight:700;color:var(--ce-navy);letter-spacing:.04em;
}
.sec-dark .model-grid span{background:#0f2537;border-color:#1c3d5c;color:#cfe0ef}

.edition-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.edition-table th,.edition-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.edition-table thead th{background:var(--bg-alt);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.edition-table td:first-child{font-weight:700;color:var(--ce-navy)}
.edition-table .yes{color:var(--ce-green);font-weight:700}
.edition-table .no{color:var(--ink-3)}

.notice{
  border-left:4px solid var(--ce-gold);background:#fdf6e6;padding:16px 20px;
  border-radius:0 var(--radius) var(--radius) 0;font-size:.9rem;color:#6b4e00;
}
.notice strong{display:block;color:#4a3600;margin-bottom:3px}

/* ---------- Reviews ---------- */
.rv-summary{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px);
}
.rv-score{text-align:center;min-width:180px}
.rv-score b{display:block;font-size:clamp(3rem,6vw,4.4rem);font-weight:300;color:var(--ce-navy);line-height:1;letter-spacing:-.04em}
.rv-score small{display:block;color:var(--ink-2);font-size:.85rem;margin-top:8px}
.star{color:#d9e0e8;font-size:1.15rem;letter-spacing:1px}
.star.full{color:var(--ce-gold)}
.star.half{background:linear-gradient(90deg,var(--ce-gold) 50%,#d9e0e8 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rv-bars{display:grid;gap:10px}
.rv-bar-row{display:grid;grid-template-columns:96px 1fr 92px;gap:14px;align-items:center;font-size:.86rem}
.rv-bar-row span:first-child{font-weight:700;color:var(--ce-navy)}
.rv-track{height:9px;background:var(--bg-alt);border-radius:99px;overflow:hidden}
.rv-fill{height:100%;border-radius:99px;transition:width .8s var(--ease)}
.rv-fill.excellent{background:var(--ce-green)}
.rv-fill.very-good{background:var(--ce-blue)}
.rv-fill.good{background:var(--ce-gold)}
.rv-bar-row span:last-child{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}

.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;display:flex;flex-direction:column;transition:.2s var(--ease);
}
.review:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.review-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.review h3{font-size:1.03rem;margin-bottom:.5rem}
.review p{color:var(--ink-2);font-size:.93rem;flex:1}
.rating{
  display:inline-block;padding:.22rem .65rem;border-radius:3px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.rating-excellent{background:#e7f3ea;color:var(--ce-green)}
.rating-very-good{background:var(--bg-tint);color:var(--ce-blue-dark)}
.rating-good{background:#fdf3e0;color:#a76a00}
.review-stars .star{font-size:.95rem}
.sample-badge{
  margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#fdf3e0;color:#a76a00;border:1px dashed #e0b45c;padding:.16rem .45rem;border-radius:3px;
}
.review-meta{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  /* the name is a single line and the side block is two, so centre them
     against each other rather than letting the name sit at the top */
  align-items:center;
  border-top:1px solid var(--line);margin-top:16px;padding-top:14px;font-size:.82rem;
}
.review-meta strong{display:block;color:var(--ce-navy);font-size:.88rem}
.review-meta small{color:var(--ink-3);display:block;margin-top:2px}
.review-side{text-align:right}
.review-side small{margin-top:6px}

.sample-banner{
  border-left:4px solid var(--ce-gold);background:#fdf6e6;padding:18px 22px;
  border-radius:0 var(--radius) var(--radius) 0;font-size:.9rem;color:#6b4e00;
}
.sample-banner strong{display:block;color:#4a3600;margin-bottom:4px;font-size:1rem}

@media (max-width:720px){
  .rv-summary{grid-template-columns:1fr}
  .rv-bar-row{grid-template-columns:84px 1fr 78px;gap:10px;font-size:.8rem}
  .review-meta{flex-direction:column}
  .review-side{text-align:left}
}

/* ---------- Accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:none}
.acc summary{
  padding:18px 22px;cursor:pointer;font-weight:700;color:var(--ce-navy);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;font-size:1.4rem;color:var(--ce-blue);line-height:1}
.acc details[open] summary::after{content:"–"}
.acc summary:hover{background:var(--bg-alt)}
.acc .acc-body{padding:0 22px 20px;color:var(--ink-2);font-size:.95rem}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(110deg,var(--ce-blue-darker) 0%,var(--ce-blue) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:clamp(34px,5vw,56px);
  display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cta-band h2{color:#fff;margin-bottom:.4rem}
.cta-band p{color:#cfe3f6;margin:0;max-width:60ch}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:700;color:var(--ink-2);letter-spacing:.03em}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;padding:.7rem .85rem;border:1px solid #cfd8e3;
  border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ce-blue);outline-offset:-1px;border-color:var(--ce-blue)}
.form-note{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}
.form-msg{
  display:none;padding:14px 16px;border-radius:var(--radius);font-size:.92rem;
  background:#e7f3ea;color:#1e6b34;border:1px solid #bfe0c9;margin-top:14px;
}
.form-msg.show{display:block}
.form-msg.error{background:#fdeaea;color:#8b1a1a;border-color:#f0c0c0}
[aria-invalid="true"]{border-color:var(--ce-red)!important;background:#fffafa}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ce-navy);color:#a9bccf;font-size:var(--fs-sm);padding:clamp(48px,6vw,72px) 0 0}
.site-footer h5{
  color:#fff;font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:700;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1.25fr;gap:28px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:2px}
.site-footer ul a{
  color:#a9bccf;text-decoration:none;
  display:inline-flex;align-items:center;min-height:36px;padding:2px 0;
}
.site-footer a{color:#a9bccf;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-brand .brand-text b{color:#fff}
.footer-brand p{margin-top:14px;color:#8ba3ba;font-size:.88rem;max-width:34ch}
.footer-contact{margin-top:16px!important;font-size:var(--fs-sm)}
.footer-contact li{margin-bottom:7px;color:#8ba3ba;max-width:36ch}
.social{display:flex;gap:10px;margin-top:16px}
.social a{
  width:34px;height:34px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#a9bccf;
}
.social a:hover{background:rgba(255,255,255,.1);color:#fff}
.social svg{width:16px;height:16px}
.footer-bottom{
  margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#7f97ae;
}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Back to top ---------- */
#toTop{
  position:fixed;right:20px;bottom:20px;width:42px;height:42px;border-radius:50%;
  background:var(--ce-blue);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.2s;z-index:800;
}
#toTop.show{opacity:1;visibility:visible}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .mega-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .feature{grid-template-columns:1fr}
  .feature.rev .feature-media{order:0}
  .g-3{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------
   Navigation breakpoint — deliberately 1000px, not 900px.
   With eight top-level items the desktop bar stops fitting
   below roughly 1000px, so the burger takes over slightly
   earlier than the rest of the mobile layout. Keep this in
   step with the resize handler in assets/js/main.js.
   --------------------------------------------------------- */
@media (max-width:1000px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .mobile-panel{
    display:block;position:fixed;inset:calc(var(--nav-h) + 34px) 0 0 0;background:#fff;
    transform:translateX(100%);transition:transform .25s var(--ease);overflow-y:auto;z-index:899;padding:16px 24px 40px;
  }
  .mobile-panel.open{transform:none}
  .mobile-panel a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.02rem;text-decoration:none}
  .mobile-panel a:hover{color:var(--ce-blue)}
  .mobile-panel a.sub{padding-left:18px;font-size:.94rem;color:var(--ink-2)}
  .mobile-panel a.sub::before{content:"— ";color:var(--ink-3)}
  .mobile-panel .btn{margin-top:20px;width:100%;justify-content:center}
  body.nav-open{overflow:hidden}
  .mega{display:none}          /* mega menus are desktop-only */
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .utility .wrap{height:auto;padding-top:6px;padding-bottom:6px}
  .utility-tags{display:none}
  .hero-stats{grid-template-columns:1fr 1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
}
/* =========================================================
   MOBILE REFINEMENTS
   Applied below 900px. The desktop layout was tuned for large
   screens; these rules restore comfortable reading size, give
   every control a 44px touch target, and even out the visual
   weight between the home hero and inner page heroes.
   ========================================================= */
@media (max-width:900px){

  /* ---- touch targets ---- */
  .nav-icon,.burger{min-width:var(--tap);min-height:var(--tap)}
  .btn{min-height:var(--tap);padding:.8rem 1.4rem}
  .btn-lg{min-height:48px}
  .arrow-link{min-height:var(--tap);align-items:center}
  .table-tools input,.table-tools select,.field input,
  .field select,.field textarea{min-height:var(--tap);font-size:16px}
  .acc summary{min-height:var(--tap);padding:16px 20px}
  .footer-bottom nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px}
  .social a{width:var(--tap);height:var(--tap)}

  /* 16px on inputs stops iOS Safari zooming the page on focus */

  /* ---- heroes: even out home vs inner pages ----
     The home hero carries a stat panel that stacks on mobile, making it
     roughly three times taller than an inner page hero. Compress it so
     visitors reach real content within one scroll. */
  .hero-grid{padding:40px 0 40px;gap:24px}
  .hero-panel{padding:20px}
  .hero-panel h4{margin-bottom:4px}
  .hero-stats{margin-top:12px}
  .hero-stats div{padding:14px 12px}
  .hero-stats b{font-size:1.6rem}
  .hero p.lead{max-width:none}
  .page-hero{padding:44px 0 40px}
  .page-hero p{font-size:var(--fs-lead)}
  /* Full-width stacked CTAs: larger tap targets and a clearer primary
     action than two cramped buttons sharing a 375px row. */
  .hero-actions{gap:10px;margin-top:1.4rem;flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-badges{gap:6px;margin-top:1.3rem}
  .chip{font-size:var(--fs-xs);padding:.34rem .68rem;letter-spacing:.02em}
  .crumbs{font-size:var(--fs-sm);margin-bottom:1rem}

  /* ---- rhythm ---- */
  section{padding:44px 0}
  .sec-tight{padding:32px 0}
  .sec-head{margin-bottom:26px}
  .grid{gap:16px}
  .card,.prod-body,.person-body,.comp{padding:20px}
  .review{padding:20px}

  /* ---- readable small text ---- */
  .card p,.prod-body p,.person-body p,.review p{font-size:var(--fs-base)}
  .prod-body ul,.tick li,.spec-list,.cert-list li{font-size:var(--fs-sm)}
  .tick li{padding-left:28px;margin-bottom:.85rem}
  .stats small,.hero-stats small{font-size:var(--fs-xs);letter-spacing:.04em}
  .brand-text small{font-size:.66rem}
  .logo-wall figcaption{font-size:var(--fs-sm)}
  .logo-wall figcaption small{font-size:var(--fs-xs)}
  .review-meta{font-size:var(--fs-sm)}
  .form-note,.count{font-size:var(--fs-sm)}

  /* ---- utility bar: readable and tappable ---- */
  .utility{font-size:var(--fs-xs)}
  .utility .wrap{flex-direction:column;gap:2px;height:auto;padding-top:4px;padding-bottom:4px}
  .utility a{display:inline-flex;align-items:center;min-height:38px;padding:0 4px}

  /* ---- breadcrumbs and inline links ---- */
  .crumbs a{display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
  /* any inline link in body copy gets a comfortable touch target */
  .card p a,.pl-text a,.acc-body a,.person-body a,.prod-body a,
  .lead a,.sec-head a,.form-note a,.notice a,.sample-banner a{
    display:inline-block;min-height:36px;line-height:36px;
    text-decoration:underline;text-underline-offset:3px;
  }
  /* Stat captions inside feature panels are inline-styled at .74rem in the
     page markup. Bump just the caption (the last child) — never the big
     number above it — so it stays legible on small screens. */
  .feature-media > div > div:last-child:not(:first-child){
    font-size:var(--fs-xs)!important;letter-spacing:.08em!important;line-height:1.5;
  }
  .site-footer ul a{min-height:40px}

  /* ---- footer: single readable column stack ---- */
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
  .footer-brand{grid-column:1/-1}
  .footer-contact li{max-width:none}
  .footer-bottom{flex-direction:column;gap:12px;align-items:flex-start}

  /* ---- tables scroll rather than squash ---- */
  .table-scroll{-webkit-overflow-scrolling:touch}
  .table-tools{gap:10px}
  .table-tools input,.table-tools select{min-width:0;flex:1 1 100%}
  .table-tools .count{margin-left:0;flex:1 1 100%}
  #f-reset,#rv-reset{flex:1 1 auto}
}

@media (max-width:640px){
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats b{font-size:1.5rem}
  .stats > div{padding:20px 14px}
  .footer-grid{grid-template-columns:1fr}
  .cta-band{padding:26px 22px}
  .cta-band .btn{width:100%;justify-content:center}
  .rv-summary{gap:20px}
  .review-grid{grid-template-columns:1fr}
  .mega{display:none}          /* mega menus are desktop-only */
  .utility .wrap{justify-content:center;text-align:center}
  .feature-media{min-height:220px;padding:26px}
}

/* ---------------------------------------------------------
   Touch devices at ANY width — tablets in landscape, touch
   laptops, large phones. Width alone is not a reliable proxy
   for input type, so give every control a real touch target
   whenever the primary pointer is coarse.
   --------------------------------------------------------- */
@media (pointer:coarse){
  .site-footer ul a,.footer-bottom nav a,.crumbs a{
    display:inline-flex;align-items:center;min-height:40px;
  }
  .utility a{display:inline-flex;align-items:center;min-height:36px;padding:0 4px}
  .btn{min-height:var(--tap)}
  .nav-links > li > a{min-height:var(--tap)}
  .acc summary{min-height:var(--tap)}
  .social a{width:var(--tap);height:var(--tap)}
  .table-tools input,.table-tools select,
  .field input,.field select,.field textarea{min-height:var(--tap);font-size:16px}
  .card p a,.lead a,.pl-text a,.acc-body a,.person-body a,.prod-body a{
    display:inline-block;min-height:36px;line-height:36px;
  }
  /* hover-only mega menus are unusable on touch — tapping the parent
     link navigates to the section page instead, which is the better UX */
  .mega{display:none}
}

/* very small phones (e.g. iPhone SE at 320px).
   Kept at 360px so 375px devices (iPhone 12/13 mini, SE3) still fit two
   buttons side by side rather than stacking and lengthening the hero. */
@media (max-width:360px){
  .wrap{padding:0 16px}
  .hero-actions .btn{width:100%;min-width:0}
  .brand-text b{font-size:.98rem}
  .card,.review,.comp{padding:17px}
}

/* ---------------------------------------------------------
   Demo application promos
   Used wherever the site points at the 100 demo applications
   in demos/<slug>/ — home, solutions, services, product pages.
   --------------------------------------------------------- */
.demo-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.demo-tile{
  display:flex;flex-direction:column;gap:5px;padding:16px 18px;
  border-radius:var(--radius-lg);background:#0f2537;border:1px solid #1c3d5c;
  transition:.16s var(--ease);text-decoration:none!important;
}
.demo-tile:hover{transform:translateY(-3px);border-color:var(--ce-accent);background:#123049}
.demo-tile b{color:#fff;font-size:.97rem;font-weight:600;line-height:1.3}
.demo-tile span{color:#9db6cc;font-size:.82rem;line-height:1.45}
.demo-tile i{
  font-style:normal;color:var(--ce-accent);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-top:2px;
}
/* light-background variant, for use outside .sec-dark */
.demo-tiles.light .demo-tile{background:#fff;border-color:var(--line)}
.demo-tiles.light .demo-tile:hover{background:var(--bg-tint);border-color:var(--ce-blue)}
.demo-tiles.light .demo-tile b{color:var(--ce-navy)}
.demo-tiles.light .demo-tile span{color:var(--ink-2)}
.demo-tiles.light .demo-tile i{color:var(--ce-blue)}

.demo-creds{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:center;
  margin-top:24px;padding:14px 20px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06);border:1px solid #1c3d5c;
  font-size:.86rem;color:#cfe0ee;text-align:center;
}
.demo-creds b{color:#fff}
.demo-creds code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;
  color:var(--ce-accent);background:rgba(0,0,0,.25);padding:.15rem .45rem;border-radius:3px;
}
.cta-band .demo-creds{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.22);color:#dbeaf9}
.cta-band .demo-creds code{color:#fff}

@media print{
  .demo-tiles,.demo-creds{display:none}
  .site-header,.utility,.site-footer,#toTop,.table-tools{display:none}
  .hero,.page-hero{background:#052b4e!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}