/* ==========================================================================
   Secure60.io website refresh — shared stylesheet
   --------------------------------------------------------------------------
   For Claude Code: copy these tokens & component classes directly into Hugo.
   Variables follow the Secure60 design system (--s60-*).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:"Nunito Sans"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/NunitoSans-Light.ttf") format("truetype"); }
@font-face { font-family:"Nunito Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/NunitoSans-Regular.ttf") format("truetype"); }
@font-face { font-family:"Nunito Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/NunitoSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"Nunito Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/NunitoSans-Bold.ttf") format("truetype"); }
@font-face { font-family:"Nunito Sans"; font-weight:800; font-style:normal; font-display:swap; src:url("../fonts/NunitoSans-ExtraBold.ttf") format("truetype"); }

/* ---------- Design tokens (single source of truth) ---------- */
:root {
  /* Brand */
  --s60-aqua:#60EFFF;
  --s60-blue:#0061FF;
  --s60-portal-blue:#109CFF;
  --s60-hover-blue:#63BEFF;
  --s60-gradient: linear-gradient(97deg,#60EFFF 0%,#0061FF 100%);
  --s60-gradient-vertical: linear-gradient(180deg,#60EFFF 0%,#0061FF 100%);
  --s60-gradient-pricing: linear-gradient(135deg,#60EFFF 0%,#0061FF 100%);
  --s60-gradient-soft: linear-gradient(135deg,rgba(96,239,255,0.10) 0%,rgba(0,97,255,0.10) 100%);

  /* Slates / neutrals */
  --s60-slate-900:#1F2937;     /* slightly deeper than design-system #485160 for legibility */
  --s60-slate-800:#2E3744;
  --s60-slate-700:#485160;
  --s60-slate-600:#606C80;
  --s60-slate-500:#8FA2BF;
  --s60-slate-400:#B6C2D6;
  --s60-slate-200:#E5EAF2;
  --s60-slate-100:#EEF1F6;
  --s60-slate-50:#F6F8FB;
  --s60-slate-15: rgba(72,81,96,0.15);
  --s60-slate-10: rgba(72,81,96,0.10);
  --s60-slate-05: rgba(72,81,96,0.05);

  /* Dark surfaces (deck dark hero) */
  --s60-ink-0:#0B1220;       /* page bg dark */
  --s60-ink-1:#101A2D;       /* card on dark */
  --s60-ink-2:#162338;       /* elevated card on dark */
  --s60-ink-3:#1E2D45;       /* border on dark */

  --s60-white:#FFFFFF;
  --s60-off-white:#F9FAFC;

  /* Status */
  --s60-success:#0E9F6E;
  --s60-warning:#EDB117;
  --s60-danger:#E33232;

  /* Type */
  --s60-font-sans:"Nunito Sans","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --s60-font-mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;

  /* Radii */
  --s60-r-sm:6px; --s60-r-md:10px; --s60-r-lg:14px; --s60-r-xl:20px; --s60-r-pill:999px;

  /* Shadows */
  --s60-shadow-sm:0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --s60-shadow-md:0 8px 24px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
  --s60-shadow-lg:0 24px 48px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
  --s60-shadow-cta:0 15px 30px rgba(0,97,255,0.30);
  --s60-shadow-glow: 0 0 0 1px rgba(0,97,255,0.10), 0 20px 60px -10px rgba(0,97,255,0.25);

  /* Spacing rhythm */
  --s60-space-1:4px; --s60-space-2:8px; --s60-space-3:12px; --s60-space-4:16px;
  --s60-space-5:24px; --s60-space-6:32px; --s60-space-7:48px; --s60-space-8:64px;
  --s60-space-9:80px; --s60-space-10:120px;

  /* Layout */
  --s60-container:1200px;
  --s60-container-wide:1320px;
  --s60-container-narrow:960px;
  --s60-header:72px;

  /* Motion */
  --s60-dur-fast:0.15s; --s60-dur-base:0.25s; --s60-dur-slow:0.4s;
  --s60-ease:cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--s60-font-sans);
  font-size:16px;
  line-height:1.55;
  color:var(--s60-slate-700);
  background:var(--s60-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,picture { display:block; max-width:100%; }
button,input,textarea,select { font:inherit; color:inherit; }
hr { border:0; border-top:1px solid var(--s60-slate-15); margin:var(--s60-space-7) 0; }

/* ---------- Type ---------- */
h1,h2,h3,h4,h5,h6 { color:var(--s60-slate-900); margin:0; font-weight:700; line-height:1.15; letter-spacing:-0.01em; }
.s60-eyebrow {
  font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--s60-blue); margin:0 0 16px;
}
.s60-eyebrow.on-dark { color:var(--s60-aqua); }
.s60-h-display { font-size:clamp(40px,5.2vw,68px); line-height:1.05; font-weight:800; letter-spacing:-0.02em; }
.s60-h-hero    { font-size:clamp(36px,4.6vw,56px); line-height:1.08; font-weight:800; letter-spacing:-0.02em; }
.s60-h1        { font-size:clamp(32px,3.6vw,44px); line-height:1.12; font-weight:800; letter-spacing:-0.015em; }
.s60-h2        { font-size:clamp(26px,2.6vw,34px); line-height:1.2; font-weight:700; }
.s60-h3        { font-size:clamp(20px,1.6vw,22px); line-height:1.3; font-weight:700; }
.s60-h4        { font-size:18px; line-height:1.35; font-weight:700; }
.s60-lead      { font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--s60-slate-600); }
.s60-body      { font-size:16px; line-height:1.6; color:var(--s60-slate-700); }
.s60-small     { font-size:14px; line-height:1.55; color:var(--s60-slate-600); }
.s60-micro     { font-size:12px; font-weight:600; letter-spacing:0.04em; }

.s60-gradient-text {
  background:var(--s60-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

p { margin:0 0 16px; color:var(--s60-slate-700); }
a { color:var(--s60-blue); text-decoration:none; transition:color var(--s60-dur-fast) var(--s60-ease); }
a:hover { color:var(--s60-portal-blue); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Layout helpers ---------- */
.s60-wrap { max-width:var(--s60-container); margin:0 auto; padding:0 24px; }
.s60-wrap-wide { max-width:var(--s60-container-wide); margin:0 auto; padding:0 24px; }
.s60-wrap-narrow { max-width:var(--s60-container-narrow); margin:0 auto; padding:0 24px; }
.s60-section { padding:96px 0; }
.s60-section-sm { padding:64px 0; }
.s60-section-lg { padding:128px 0; }
@media (max-width:768px) {
  .s60-section { padding:64px 0; }
  .s60-section-sm { padding:48px 0; }
  .s60-section-lg { padding:80px 0; }
  .s60-wrap, .s60-wrap-wide, .s60-wrap-narrow { padding:0 20px; }
}

.s60-grid { display:grid; gap:var(--s60-space-5); }
.s60-grid-2 { grid-template-columns:repeat(2,1fr); }
.s60-grid-3 { grid-template-columns:repeat(3,1fr); }
.s60-grid-4 { grid-template-columns:repeat(4,1fr); }
.s60-grid-5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:1024px) {
  .s60-grid-4, .s60-grid-5 { grid-template-columns:repeat(2,1fr); }
  .s60-grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .s60-grid-2,.s60-grid-3,.s60-grid-4,.s60-grid-5 { grid-template-columns:1fr; }
}

.s60-stack { display:flex; flex-direction:column; gap:var(--s60-space-5); }
.s60-row   { display:flex; gap:var(--s60-space-4); align-items:center; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.s60-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; font-size:15px; font-weight:700; line-height:1;
  border:0; border-radius:var(--s60-r-sm); cursor:pointer;
  transition:transform var(--s60-dur-base) var(--s60-ease),
             box-shadow var(--s60-dur-base) var(--s60-ease),
             background var(--s60-dur-base) var(--s60-ease),
             color var(--s60-dur-base) var(--s60-ease);
  text-decoration:none; white-space:nowrap;
}
.s60-btn-primary {
  background:var(--s60-gradient); color:#fff;
  box-shadow:0 6px 16px rgba(0,97,255,0.20);
}
.s60-btn-primary:hover { transform:translateY(-2px); box-shadow:var(--s60-shadow-cta); color:#fff; text-decoration:none; }
.s60-btn-secondary {
  background:#fff; color:var(--s60-slate-900); border:1px solid var(--s60-slate-15);
}
.s60-btn-secondary:hover { transform:translateY(-2px); border-color:var(--s60-blue); color:var(--s60-blue); box-shadow:var(--s60-shadow-md); text-decoration:none; }
.s60-btn-dark {
  background:var(--s60-slate-900); color:#fff;
}
.s60-btn-dark:hover { transform:translateY(-2px); color:#fff; text-decoration:none; box-shadow:var(--s60-shadow-md); }
.s60-btn-ghost-light {
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.5);
}
.s60-btn-ghost-light:hover { background:rgba(255,255,255,0.10); border-color:#fff; color:#fff; text-decoration:none; }
.s60-btn-lg { padding:16px 28px; font-size:16px; }
.s60-btn-sm { padding:9px 16px; font-size:13px; }

.s60-btn-link {
  display:inline-flex; align-items:center; gap:6px; color:var(--s60-blue);
  font-weight:700; font-size:14px; text-decoration:none;
}
.s60-btn-link::after { content:"→"; transition:transform var(--s60-dur-base) var(--s60-ease); }
.s60-btn-link:hover { text-decoration:none; }
.s60-btn-link:hover::after { transform:translateX(4px); }

/* ---------- Header / Nav ---------- */
.s60-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.95); backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--s60-slate-15);
}
.s60-header-inner {
  max-width:var(--s60-container-wide); margin:0 auto;
  display:flex; align-items:center; gap:32px;
  padding:14px 24px;
}
.s60-logo img { height:30px; width:auto; }
.s60-nav { display:flex; gap:6px; flex:1; }
.s60-nav a {
  position:relative; padding:8px 14px; border-radius:var(--s60-r-sm);
  font-size:14.5px; font-weight:600; color:var(--s60-slate-900);
  text-decoration:none;
}
.s60-nav a:hover { color:var(--s60-blue); background:var(--s60-slate-05); text-decoration:none; }
.s60-nav a.is-active { color:var(--s60-blue); background:var(--s60-slate-05); }
.s60-nav .has-menu::after {
  content:""; display:inline-block; width:6px; height:6px; margin-left:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.s60-header-actions { display:flex; gap:10px; align-items:center; }
.s60-portal-link { font-size:14px; font-weight:600; color:var(--s60-slate-700); padding:8px 12px; }
.s60-portal-link:hover { color:var(--s60-blue); text-decoration:none; }

.s60-mobile-toggle { display:none; background:none; border:0; padding:8px; cursor:pointer; }
.s60-mobile-toggle svg { width:22px; height:22px; stroke:var(--s60-slate-900); }

/* Mega-menu dropdowns */
.s60-nav-dropdown { position:relative; display:inline-flex; align-items:center; }
.s60-nav-dropdown > .has-menu { cursor:default; }
.s60-mega-panel {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  min-width:220px; padding:12px 0; margin-top:4px;
  background:#fff; border:1px solid var(--s60-slate-15); border-radius:12px;
  box-shadow:var(--s60-shadow-lg); z-index:100;
}
.s60-mega-panel a {
  display:block; padding:10px 20px; font-size:14px; font-weight:600;
  color:var(--s60-slate-700); text-decoration:none; white-space:nowrap;
}
.s60-mega-panel a:hover { color:var(--s60-blue); background:var(--s60-slate-05); }
.s60-nav-dropdown:hover .s60-mega-panel { display:block; }

/* Mobile drawer */
.s60-mobile-drawer { display:none; }
.s60-mobile-drawer.is-open { display:block; }
.s60-mobile-drawer-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:998;
}
.s60-mobile-drawer-panel {
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 85vw);
  background:#fff; z-index:999; padding:24px;
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(0); box-shadow:-8px 0 32px rgba(0,0,0,0.15);
}
.s60-mobile-drawer-close {
  align-self:flex-end; background:none; border:0; padding:8px; cursor:pointer;
  margin-bottom:16px;
}
.s60-mobile-drawer-close svg { width:22px; height:22px; stroke:var(--s60-slate-700); }
.s60-mobile-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.s60-mobile-nav a {
  display:block; padding:14px 16px; font-size:16px; font-weight:600;
  color:var(--s60-slate-900); text-decoration:none; border-radius:10px;
}
.s60-mobile-nav a:hover { background:var(--s60-slate-05); color:var(--s60-blue); }
.s60-mobile-nav-group { margin:4px 0; }
.s60-mobile-nav-label {
  display:block; padding:10px 16px 6px; font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--s60-slate-500);
}
.s60-mobile-nav-group a { padding-left:28px; font-size:15px; }
.s60-mobile-drawer-actions {
  display:flex; flex-direction:column; gap:10px;
  padding-top:20px; border-top:1px solid var(--s60-slate-15); margin-top:auto;
}
.s60-mobile-drawer-actions .s60-portal-link {
  text-align:center; padding:14px; font-size:15px; font-weight:600;
  color:var(--s60-slate-700); text-decoration:none;
}
.s60-mobile-drawer-actions .s60-btn { text-align:center; width:100%; }

@media (max-width:920px) {
  .s60-nav, .s60-header-actions .s60-portal-link { display:none; }
  .s60-mobile-toggle { display:block; }
  .s60-mega-panel { display:none !important; }
}

/* ---------- Hero patterns ---------- */
.s60-hero-dark {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0B1220 0%, #0F1A30 100%);
  color:#fff;
  padding:120px 0 96px;
}
.s60-hero-dark::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(0,97,255,0.20), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(96,239,255,0.12), transparent 60%);
  pointer-events:none;
}
.s60-hero-dark h1 { color:#fff; }
.s60-hero-dark p  { color:rgba(255,255,255,0.78); }
.s60-hero-dark .s60-eyebrow { color:var(--s60-aqua); }

.s60-hero-light {
  padding:96px 0 72px;
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(96,239,255,0.08), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(0,97,255,0.05), transparent 60%),
    #fff;
}

/* Decorative grid (subtle, for dark sections) */
.s60-bg-grid::after {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events:none;
}

/* ---------- Cards ---------- */
.s60-card {
  background:#fff; border:1px solid var(--s60-slate-15); border-radius:var(--s60-r-lg);
  padding:28px; transition:transform var(--s60-dur-base) var(--s60-ease), box-shadow var(--s60-dur-base) var(--s60-ease), border-color var(--s60-dur-base) var(--s60-ease);
}
.s60-card:hover { transform:translateY(-3px); box-shadow:var(--s60-shadow-md); border-color:rgba(0,97,255,0.20); }
.s60-card-dark {
  background:var(--s60-ink-1); border:1px solid var(--s60-ink-3); color:#fff;
  border-radius:var(--s60-r-lg); padding:28px;
}
.s60-card-dark h3, .s60-card-dark h4 { color:#fff; }
.s60-card-dark p { color:rgba(255,255,255,0.72); }
.s60-card-flat {
  background:var(--s60-off-white); border:1px solid var(--s60-slate-15);
  border-radius:var(--s60-r-lg); padding:28px;
}
.s60-card-feature {
  background:#fff; border:1px solid var(--s60-slate-15); border-radius:var(--s60-r-lg);
  padding:32px; position:relative; overflow:hidden;
}
.s60-card-feature::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--s60-gradient);
  opacity:0; transition:opacity var(--s60-dur-base) var(--s60-ease);
}
.s60-card-feature:hover::before { opacity:1; }

.s60-icon-tile {
  width:48px; height:48px; border-radius:var(--s60-r-md);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.s60-icon-tile svg { width:22px; height:22px; stroke:#fff; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.s60-icon-tile.is-gradient { background:var(--s60-gradient); }
.s60-icon-tile.is-blue { background:var(--s60-blue); }
.s60-icon-tile.is-aqua { background:var(--s60-aqua); }
.s60-icon-tile.is-aqua svg { stroke:var(--s60-slate-900); }
.s60-icon-tile.is-slate { background:var(--s60-slate-900); }

/* ---------- Pills / chips ---------- */
.s60-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:var(--s60-r-pill);
  background:var(--s60-slate-05); color:var(--s60-slate-900);
  font-size:13px; font-weight:600; letter-spacing:0.02em;
  border:1px solid var(--s60-slate-15);
}
.s60-pill.on-dark { background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.12); }
.s60-pill.is-gradient {
  background:var(--s60-gradient-soft); color:var(--s60-blue);
  border:1px solid rgba(0,97,255,0.20);
}
.s60-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

.s60-tag { font-size:11px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--s60-slate-500); }

/* ---------- Trust strip ---------- */
.s60-trust-strip {
  background:var(--s60-slate-50);
  border-top:1px solid var(--s60-slate-15);
  border-bottom:1px solid var(--s60-slate-15);
  padding:20px 0;
}
.s60-trust-row {
  display:flex; gap:36px; flex-wrap:wrap; justify-content:center; align-items:center;
  font-size:14px; color:var(--s60-slate-700); font-weight:600;
}
.s60-trust-row > span { display:inline-flex; align-items:center; gap:8px; }
.s60-trust-row .sep { color:var(--s60-slate-400); }

/* ---------- Footer ---------- */
.s60-footer {
  background:var(--s60-gradient); color:#fff; margin-top:0;
  position:relative; overflow:hidden;
}
.s60-footer::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(800px 400px at 80% 0%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events:none;
}
.s60-footer-inner {
  position:relative; max-width:var(--s60-container-wide); margin:0 auto;
  padding:72px 24px 28px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px;
}
@media (max-width:920px) {
  .s60-footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .s60-footer-inner { grid-template-columns:1fr; }
}
.s60-footer h5 { color:#fff; font-size:13px; font-weight:700; margin:0 0 16px; letter-spacing:0.06em; text-transform:uppercase; }
.s60-footer a { display:block; color:rgba(255,255,255,0.88); font-size:14px; padding:5px 0; text-decoration:none; }
.s60-footer a:hover { color:#fff; text-decoration:underline; }
.s60-footer-tagline { color:rgba(255,255,255,0.92); font-size:15px; max-width:320px; margin:14px 0 18px; }
.s60-footer-bottom {
  position:relative; max-width:var(--s60-container-wide); margin:0 auto;
  padding:18px 24px 28px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.22);
  font-size:13px; color:rgba(255,255,255,0.85);
}

/* ---------- CTA banner ---------- */
.s60-cta-banner {
  position:relative; overflow:hidden;
  background:var(--s60-slate-900); color:#fff;
  border-radius:var(--s60-r-xl);
  padding:64px 56px; margin:0 auto;
  display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.s60-cta-banner::before {
  content:""; position:absolute; right:-100px; top:-100px; width:480px; height:480px;
  background:var(--s60-gradient); opacity:0.18; filter:blur(60px); border-radius:50%;
  pointer-events:none;
}
.s60-cta-banner > * { position:relative; }
.s60-cta-banner h2 { color:#fff; max-width:540px; }
.s60-cta-banner p { color:rgba(255,255,255,0.78); max-width:540px; }

/* ---------- Page badge (top-right of mockup pages, for handoff context) ---------- */
.s60-mockup-badge {
  position:fixed; bottom:20px; right:20px; z-index:90;
  display:flex; gap:8px; align-items:center;
  padding:10px 14px; border-radius:var(--s60-r-pill);
  background:rgba(15,23,42,0.92); color:#fff;
  font-size:12px; font-weight:600; backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--s60-shadow-md);
}
.s60-mockup-badge a { color:var(--s60-aqua); }

/* ---------- Generic utilities ---------- */
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.mt-0 { margin-top:0; } .mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; }
.mt-5 { margin-top:24px; } .mt-6 { margin-top:32px; } .mt-7 { margin-top:48px; } .mt-8 { margin-top:64px; }
.mb-0 { margin-bottom:0; } .mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:12px; } .mb-4 { margin-bottom:16px; }
.mb-5 { margin-bottom:24px; } .mb-6 { margin-bottom:32px; } .mb-7 { margin-bottom:48px; }

.muted { color:var(--s60-slate-600); }
.on-dark .muted { color:rgba(255,255,255,0.7); }

.s60-divider { height:1px; background:var(--s60-slate-15); margin:48px 0; border:0; }
.s60-divider-dark { height:1px; background:rgba(255,255,255,0.12); margin:48px 0; border:0; }

/* Numbered list as inline counters */
.s60-numbered { counter-reset:s60step; list-style:none; padding:0; margin:0; }
.s60-numbered > li {
  counter-increment:s60step; position:relative; padding-left:48px; margin:0 0 20px;
}
.s60-numbered > li::before {
  content:counter(s60step,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--s60-gradient-soft); color:var(--s60-blue);
  font-size:12px; font-weight:800; letter-spacing:0.05em;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,97,255,0.15);
}

/* Check list */
.s60-checks { list-style:none; padding:0; margin:0; }
.s60-checks li {
  position:relative; padding-left:30px; margin:0 0 12px;
  font-size:15px; color:var(--s60-slate-700);
}
.s60-checks li::before {
  content:""; position:absolute; left:0; top:6px; width:18px; height:18px;
  background:var(--s60-gradient); border-radius:50%;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4 9.5l3 3 7-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/12px no-repeat,
       linear-gradient(#000,#000);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4 9.5l3 3 7-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/12px no-repeat;
}
.s60-checks.on-dark li { color:rgba(255,255,255,0.85); }

/* KPI / stat blocks */
.s60-kpi { display:flex; flex-direction:column; gap:4px; }
.s60-kpi .num {
  font-size:clamp(36px,4vw,56px); font-weight:800; line-height:1; letter-spacing:-0.02em;
  background:var(--s60-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.s60-kpi .label { font-size:13px; font-weight:600; color:var(--s60-slate-600); text-transform:uppercase; letter-spacing:0.08em; }
.on-dark .s60-kpi .label { color:rgba(255,255,255,0.7); }

/* ---------- Print / handoff helpers ---------- */
@media print {
  .s60-mockup-badge, .s60-header, .s60-footer { display:none; }
}