/* ===== shared .ronin-page design system (see _shared/ronin-shell.css) ===== */

/* Locked typography spec (OTSI_UI_Locked_Typography_Specification.md):
   Inter throughout, self-hosted (no external font-loading dependency). */
@font-face{
  font-family:"Inter";
  src:url("../../fonts/Inter-Variable.woff2") format("woff2-variations"), url("../../fonts/Inter-Variable.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
.ronin-page{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:400;
  font-style:normal;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.ronin-page .numeric,.ronin-page .kpi-value,.ronin-page .stat-value,.ronin-page .rating-value,.ronin-page .percentage,.ronin-page .currency,.ronin-page .date,.ronin-page .time,.ronin-page .table-numeric,.ronin-page .chart-label{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* =========================================================
   RONIN SHARED SHELL — design tokens + reusable components
   (header/topbar/nav, hero-navy, kpi-band, badges, chips,
   check-list, rings, sparks, explain/service cards, quality
   bar, cta-banner, footer, responsive base).
   Used by every page in ronin-reference/*. Do not duplicate
   these rules into a page's own styles.css — only add
   page-specific overrides/extras there.
   Blueprint for OTSI PMS / OTSI-NEO WordPress porting only —
   not a final standalone site, not a duplicate WP page.
   ========================================================= */
.ronin-page{
  --navy-950:#04162c;
  --navy-900:#071d38;
  --navy-800:#0a2547;
  --navy-700:#0f2f57;
  --gold:#eab040;
  --gold-dark:#c9963a;
  --gold-tint:#fdf3e2;
  --green:#1f9d64;
  --green-tint:#eaf7f1;
  --blue:#3568c9;
  --blue-ring:#3f7ee8;
  --blue-tint:#eaf1fd;
  --purple:#7c5cd6;
  --purple-tint:#f2eefb;
  --orange:#e8934a;
  --orange-ring:#f0a028;
  --ink:#0b1f3a;
  --ink-soft:#4a5568;
  --gray-500:#6b7280;
  --gray-200:#e6e9ef;
  --gray-100:#f2f3f6;
  --bg-tint:#f7f8fa;
  --white:#ffffff;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-card:0 1px 2px rgba(10,20,40,.04), 0 8px 24px -12px rgba(10,20,40,.12);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}.ronin-page *, .ronin-page *::before, .ronin-page *::after{box-sizing:border-box;}.ronin-page h1, .ronin-page h2, .ronin-page h3, .ronin-page h4, .ronin-page p, .ronin-page dl, .ronin-page dd{margin:0;}.ronin-page ul{margin:0;padding:0;list-style:none;}.ronin-page a{color:inherit;text-decoration:none;}.ronin-page svg{display:block;}.ronin-page .container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}
/* decorative global-network background layer, shared by hero + footer */
.ronin-page .bg-network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  color:var(--gold);
}.ronin-page .icon{width:24px;height:24px;flex-shrink:0;}.ronin-page .icon-xs{width:14px;height:14px;}.ronin-page .icon-md{width:26px;height:26px;color:var(--ink);}.ronin-page .icon--blue{color:var(--blue-ring);}.ronin-page .icon--green{color:var(--green);}.ronin-page .icon--purple{color:var(--purple);}.ronin-page .icon--gold{color:var(--gold);}
/* ---------- buttons ---------- */
.ronin-page .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:8px;
  font-size:12px;
  line-height:18px;
  font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}.ronin-page .btn--sm{padding:8px 16px;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.03em;}
.ronin-page .btn--ghost-gold{border-color:var(--gold);color:var(--gold);background:transparent;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.ronin-page .btn--ghost-gold svg{color:currentColor;stroke:currentColor;}
.ronin-page .btn--ghost-gold:hover,.ronin-page .btn--ghost-gold:focus-visible{background:var(--gold);color:var(--navy-950);border-color:var(--gold);box-shadow:0 14px 28px rgba(246,182,48,.24);transform:translateY(-1px);}
.ronin-page .btn--gold-solid{background:var(--gold);color:var(--navy-950);transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;}
.ronin-page .btn--gold-solid svg{color:currentColor;stroke:currentColor;}
.ronin-page .btn--gold-solid:hover,.ronin-page .btn--gold-solid:focus-visible{background:#f4bd5c;color:var(--navy-950);box-shadow:0 14px 28px rgba(246,182,48,.24);transform:translateY(-1px);}
.ronin-page .cta-banner .btn--ghost-gold,.ronin-page .network-banner .btn--ghost-gold{color:var(--white);background:rgba(246,182,48,.04);box-shadow:inset 0 0 0 1px rgba(246,182,48,.08);}
.ronin-page .cta-banner .btn--ghost-gold:hover,.ronin-page .cta-banner .btn--ghost-gold:focus-visible,.ronin-page .network-banner .btn--ghost-gold:hover,.ronin-page .network-banner .btn--ghost-gold:focus-visible{color:var(--navy-950);background:var(--gold);}
/* ---------- badges / chips ---------- */
.ronin-page .badge{
  display:inline-block;
  font-size:9px;
  line-height:12px;
  font-weight:600;
  letter-spacing:.045em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:10px;
}.ronin-page .badge--green{background:var(--green-tint);color:var(--green);}.ronin-page .chip{
  display:inline-block;
  font-size:10px;
  line-height:14px;
  font-weight:600;
  letter-spacing:.02em;
  padding:5px 11px;
  border-radius:999px;
  background:var(--gray-100);
  color:var(--ink-soft);
}.ronin-page .chip--gray{background:var(--gray-100);color:var(--ink-soft);}.ronin-page .chip--green{background:var(--green-tint);color:var(--green);}.ronin-page .chip--blue{background:var(--blue-tint);color:var(--blue);}.ronin-page .chip--purple{background:var(--purple-tint);color:var(--purple);}.ronin-page .chip--gold{background:var(--gold-tint);color:var(--gold-dark);}.ronin-page .chip--orange{background:var(--gold-tint);color:#b9691b;}.ronin-page .chip--gold-outline{background:var(--gold-tint);color:#b9691b;border:1px solid #f0d9a8;}.ronin-page .chip--gold-solid-outline{background:transparent;color:var(--gold);border:1px solid var(--gold);}.ronin-page .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
/* ---------- check list ---------- */
.ronin-page .check-list{display:flex;flex-direction:column;gap:9px;margin:16px 0;}.ronin-page .check-list li{
  position:relative;
  padding-left:22px;
  font-size:12px;
  line-height:18px;
  font-weight:400;
  color:var(--ink-soft);
}.ronin-page .check-list li::before{
  content:"";
  position:absolute;left:0;top:3px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--green-tint);
  box-shadow:inset 0 0 0 1px rgba(31,157,100,.25);
}.ronin-page .check-list li::after{
  content:"";
  position:absolute;left:3px;top:6px;
  width:8px;height:5px;
  border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}.ronin-page .check-list--light li{color:#cfd7e3;}
/* =========================================================
   HEADER
   ========================================================= */

/* ---------- hero ---------- */
.ronin-page .hero-navy{
  position:relative;
  overflow:hidden;
  padding-block:36px 66px;
  isolation:isolate;
}.ronin-page .hero-navy::after{
  content:"";
  position:absolute;
  top:-30%;left:2%;
  width:56%;height:150%;
  background:radial-gradient(ellipse at center, rgba(90,140,220,.30), transparent 68%);
  pointer-events:none;
  z-index:0;
}.ronin-page .hero-navy > .container{position:relative;z-index:1;}.ronin-page .breadcrumb{display:flex;align-items:center;gap:6px;font-size:10px;line-height:14px;font-weight:500;letter-spacing:.025em;text-transform:uppercase;color:#8996ad;margin-bottom:18px;}.ronin-page .breadcrumb__current{color:var(--gold);}.ronin-page .breadcrumb .icon-xs{width:10px;height:10px;}.ronin-page .hero__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start;}.ronin-page .hero__title{color:var(--white);font-size:52px;font-weight:800;line-height:1.05;margin-bottom:14px;}.ronin-page .hero__subtitle{color:#b7c1d6;font-size:16px;max-width:44ch;line-height:1.5;margin-bottom:20px;}.ronin-page .hero__checklist{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:34px;}.ronin-page .hero__checklist li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#dbe2ee;}.ronin-page .check-badge{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(234,176,64,.15);color:var(--gold);
}.ronin-page .check-badge--dot{background:rgba(46,174,106,.18);color:#5fd68f;}.ronin-page .purpose-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(234,176,64,.35);
  border-radius:var(--radius-md);
  padding:18px 20px;
  color:#c9d2e2;
}.ronin-page .purpose-box__label{
  display:block;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}.ronin-page .purpose-box p{font-size:13px;line-height:1.6;}
/* ---------- KPI cards ----------
   Sit on the white page; only the card's top edge (icon+title row)
   overlaps up into the navy header via a negative margin "tip". */
.ronin-page .kpi-band{
  position:relative;
  z-index:3;
  margin-top:-58px;
  padding-bottom:8px;
}.ronin-page .kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}.ronin-page .kpi-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:20px 20px 22px;
}.ronin-page .kpi-card__head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}.ronin-page .kpi-card__head .kpi-card__icon{color:var(--ink);}.ronin-page .kpi-card__head h3{font-size:13.5px;font-weight:700;color:var(--ink);}.ronin-page .kpi-card__title{font-size:14.5px;font-weight:700;margin-bottom:12px;}.ronin-page .kpi-card__facts{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}.ronin-page .kpi-card__facts--top{margin-top:2px;}.ronin-page .kpi-card__facts div{display:flex;flex-direction:column;gap:2px;}.ronin-page .kpi-card__facts dt{font-size:11px;color:var(--gray-500);}.ronin-page .kpi-card__facts dd{font-size:13px;font-weight:600;color:var(--ink);margin:0;}.ronin-page .kpi-card__metric{display:flex;align-items:center;gap:14px;padding-top:6px;border-top:1px solid var(--gray-200);margin-top:2px;}.ronin-page .kpi-card__trend{display:flex;flex-direction:column;gap:3px;}.ronin-page .kpi-card__trend-title{font-size:12px;color:var(--ink-soft);font-weight:600;}.ronin-page .kpi-card__trend-sub{font-size:11px;color:var(--gray-500);}.ronin-page .up{color:var(--green);font-weight:700;}.ronin-page .ring{position:relative;width:64px;height:64px;flex-shrink:0;}.ronin-page .ring svg{width:100%;height:100%;transform:rotate(-90deg);}.ronin-page .ring__track{fill:none;stroke:var(--gray-200);stroke-width:8;}.ronin-page .ring__value{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:213.6;stroke-dashoffset:213.6;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);}.ronin-page .ring[data-color="orange"] .ring__value{stroke:var(--orange-ring);}.ronin-page .ring[data-color="blue"] .ring__value{stroke:var(--blue-ring);}.ronin-page .ring[data-color="green"] .ring__value{stroke:var(--green);}.ronin-page .ring[data-color="purple"] .ring__value{stroke:var(--purple);}.ronin-page .ring__label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--ink);
}.ronin-page .spark{width:100%;height:46px;margin-top:14px;}.ronin-page .spark svg{width:100%;height:100%;display:block;}
/* =========================================================
   SECTIONS
   ========================================================= */
.ronin-page .section{padding-block:32px;}.ronin-page .section--tint{background:var(--bg-tint);}.ronin-page .section__title{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:6px;}.ronin-page .section__subtitle{font-size:14px;color:var(--gray-500);margin-bottom:28px;}
/* ---------- explain cards ---------- */
.ronin-page .explain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px;}.ronin-page .explain-grid--meta{margin-top:0;}.ronin-page .explain-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:var(--shadow-card);
}.ronin-page .explain-card--sm{padding:20px 18px;}.ronin-page .explain-card__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}.ronin-page .explain-card__num{font-size:13px;font-weight:700;color:var(--gray-500);}.ronin-page .explain-card__num--light{color:rgba(255,255,255,.5);}.ronin-page .explain-card h3{font-size:15.5px;font-weight:700;margin-bottom:8px;color:var(--ink);}.ronin-page .explain-card > svg{margin-bottom:16px;}.ronin-page .explain-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;}.ronin-page .explain-card--dark{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));border-color:var(--navy-900);}.ronin-page .explain-card--dark p{color:#b7c1d6;}.ronin-page .text-gold{color:var(--gold) !important;}
/* ---------- service coverage ---------- */
.ronin-page .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}.ronin-page .service-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-card);
}.ronin-page .service-card__icon{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}.ronin-page .service-card__icon svg{width:22px;height:22px;}.ronin-page .service-card__icon--orange{background:var(--gold-tint);color:#c9791b;}.ronin-page .service-card__icon--blue{background:var(--blue-tint);color:var(--blue);}.ronin-page .service-card__icon--green{background:var(--green-tint);color:var(--green);}.ronin-page .service-card h3{font-size:16px;font-weight:700;margin-bottom:6px;}.ronin-page .service-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;min-height:40px;}.ronin-page .stat-row{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--gray-200);}.ronin-page .stat-row div{display:flex;flex-direction:column;gap:3px;}.ronin-page .stat-row dt{font-size:10.5px;color:var(--gray-500);white-space:nowrap;}.ronin-page .stat-row dd{font-size:15px;font-weight:800;color:var(--ink);margin:0;}.ronin-page .spark--area{height:56px;margin-top:14px;}.ronin-page .spark-tooltip{
  position:absolute;
  transform:translate(-50%,-100%);
  background:var(--navy-950);
  color:var(--white);
  font-size:11px;
  font-weight:700;
  padding:3px 7px;
  border-radius:5px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}
/* ---------- quality bar ---------- */
.ronin-page .quality-bar{
  margin-top:22px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}.ronin-page .quality-bar__main{display:flex;align-items:center;gap:14px;}.ronin-page .quality-bar__main h3{font-size:14.5px;font-weight:700;margin-bottom:4px;}.ronin-page .quality-bar__main p{font-size:12.5px;color:var(--gray-500);max-width:46ch;}.ronin-page .quality-bar__stats{display:flex;gap:32px;}.ronin-page .quality-bar__stats div{display:flex;flex-direction:column;gap:2px;}.ronin-page .quality-bar__stats dt{font-size:11px;color:var(--gray-500);}.ronin-page .quality-bar__stats dd{font-size:15px;font-weight:800;}
/* ---------- CTA banner ---------- */
.ronin-page .cta-banner{
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
  border-radius:var(--radius-lg);
  padding:26px 30px;
  display:flex;align-items:center;gap:22px;
  flex-wrap:wrap;
  margin-bottom:56px;
}.ronin-page .cta-banner__icon{
  width:52px;height:52px;flex-shrink:0;
  border-radius:50%;
  border:1.5px solid var(--gold);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}.ronin-page .cta-banner__text{flex:1;min-width:240px;}.ronin-page .cta-banner__text h3{color:var(--white);font-size:17px;font-weight:700;margin-bottom:4px;}.ronin-page .cta-banner__text p{color:#b7c1d6;font-size:13px;}.ronin-page .cta-banner__actions{display:flex;gap:12px;flex-wrap:wrap;}
/* =========================================================
   FOOTER
   ========================================================= */

/* footer variant used by pages with a brand+tagline+social first column
   (in place of a plain logo mark) — reused across many pages */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){.ronin-page .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ronin-page .explain-grid{grid-template-columns:repeat(2,1fr);}.ronin-page .service-grid{grid-template-columns:repeat(2,1fr);}.ronin-page .hero__grid{grid-template-columns:1fr;}
}

@media (max-width:720px){.ronin-page .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;transform:none;padding-bottom:0;}.ronin-page .kpi-card{padding:16px 14px 18px;min-height:0;}.ronin-page .hero{padding-bottom:40px;}.ronin-page .explain-grid{grid-template-columns:1fr;}.ronin-page .service-grid{grid-template-columns:1fr;}.ronin-page .hero__title{font-size:38px;}.ronin-page .quality-bar{flex-direction:column;align-items:flex-start;}.ronin-page .cta-banner{flex-direction:column;align-items:flex-start;}
}