/* ============================================================
   WHY MARKETING — WEBSITE DESIGN SYSTEM
   Built on the Brand Foundation v1.0.
   "Commercial logic applied." Consulting rigour + B&W gallery.
   ============================================================ */

:root{
  /* Brand core */
  --midnight:#0F172A;
  --ghost:#F8FAFC;
  --slate:#94A3B8;
  --lime:#DEFF9A;

  /* Supporting greys */
  --slate-800:#1E293B;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748B;
  --slate-400:#94A3B8;
  --slate-300:#CBD5E1;
  --slate-200:#E2E8F0;
  --slate-100:#EEF2F6;
  --slate-50:#F8FAFC;
  --hair:#E2E8F0;
  --hair-strong:#CBD5E1;

  /* Type */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Rhythm */
  --maxw:1240px;
  --gutter:64px;
  --r:3px; /* tight, institutional radius */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--ghost);
  color:var(--midnight);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:17px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--lime);color:var(--midnight);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.wrap-tight{max-width:920px;margin:0 auto;padding:0 var(--gutter);}

/* ---------------- TYPE SYSTEM ---------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate-600);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:24px;height:5px;background:var(--lime);flex:none;}
.eyebrow.bare::before{display:none;}
.eyebrow.on-dark{color:var(--slate-400);}

.mono-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-500);
}

h1,h2,h3,h4{margin:0;letter-spacing:-0.025em;line-height:1.04;font-weight:800;}
.display{font-size:clamp(48px,6.4vw,92px);font-weight:900;letter-spacing:-0.04em;line-height:.98;}
h1,.h1{font-size:clamp(40px,5vw,68px);font-weight:800;}
h2,.h2{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-0.03em;}
h3,.h3{font-size:clamp(21px,2vw,26px);font-weight:700;letter-spacing:-0.02em;}
h4,.h4{font-size:18px;font-weight:700;letter-spacing:-0.01em;}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.65;color:var(--slate-600);font-weight:400;max-width:62ch;}
.body{font-size:17px;line-height:1.65;color:var(--slate-700);}
.small{font-size:14px;line-height:1.6;color:var(--slate-600);}
.tnum{font-variant-numeric:tabular-nums;}

/* lorem placeholder tint — makes dummy copy legible-as-dummy */
.lorem{color:var(--slate-500);}
.lorem-dark{color:var(--slate-400);}

/* ---------------- WORDMARK (CSS, from brand kit) ---------------- */
.wm{font-family:var(--sans);color:var(--midnight);display:inline-flex;flex-direction:column;line-height:1;}
.wm .whywrap{display:inline-block;align-self:flex-start;}
.wm .why{font-weight:800;font-size:var(--fs,28px);letter-spacing:0.0475em;line-height:.98;}
.wm .rule{display:block;height:calc(var(--fs,28px)*.10);background:var(--lime);margin-top:calc(var(--fs,28px)*.16);width:100%;}
.wm .mktg{font-weight:800;font-size:var(--fs,28px);letter-spacing:-0.025em;line-height:.98;margin-top:calc(var(--fs,28px)*.12);display:block;}
.wm .tag{font-weight:500;font-size:calc(var(--fs,28px)*.255);letter-spacing:.005em;margin-top:calc(var(--fs,28px)*.16);color:var(--slate-600);}
.wm.on-dark .why,.wm.on-dark .mktg{color:var(--ghost);}
.wm.on-dark .tag{color:var(--slate-400);}
/* faithful nav lockup — the real stacked mark, no tagline */
.wm-nav{--fs:21px;text-decoration:none;}

/* ---------------- THE DATA-POINT MOTIF ----------------
   One disciplined lime mark. The "precision pointer". */
.dp{display:inline-block;width:22px;height:5px;background:var(--lime);}
.dp-sq{display:inline-block;width:9px;height:9px;background:var(--lime);}
.dp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);}
.dp-tick{display:inline-block;width:5px;height:16px;background:var(--lime);}
/* a number wearing the pointer */
.pointed{position:relative;display:inline-block;}
.pointed::after{content:"";position:absolute;left:0;bottom:-10px;width:100%;height:5px;background:var(--lime);}

/* ---------------- TOP NAV ---------------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(248,250,252,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:74px;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-600);text-decoration:none;position:relative;padding:6px 0;transition:color .15s;}
.nav-links a:hover{color:var(--midnight);}
.nav-links a.active{color:var(--midnight);}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--lime);}
.nav-right{display:flex;align-items:center;gap:22px;}

/* ---------------- BUTTONS ---------------- */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--midnight);background:var(--midnight);color:var(--ghost);border-radius:var(--r);
  padding:14px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  text-decoration:none;transition:opacity .15s,background .15s;}
.btn:hover{opacity:.88;}
.btn .arw{color:var(--lime);font-weight:700;}
.btn-lg{padding:18px 28px;font-size:13px;}
.btn-ghost{background:transparent;color:var(--midnight);border:1px solid var(--hair-strong);}
.btn-ghost:hover{border-color:var(--midnight);opacity:1;}
.btn-ghost .arw{color:var(--midnight);}
.btn-on-dark{background:var(--ghost);color:var(--midnight);border-color:var(--ghost);}
.btn-on-dark .arw{color:var(--slate-600);}
.btn-lime{background:var(--lime);color:var(--midnight);border-color:var(--lime);}
.btn-lime .arw{color:var(--midnight);}
.link-mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--midnight);text-decoration:none;display:inline-flex;align-items:center;gap:9px;border-bottom:2px solid var(--lime);padding-bottom:3px;}

/* ---------------- SECTIONS ---------------- */
section{padding:108px 0;}
section.tight{padding:72px 0;}
.section-dark{background:var(--midnight);color:var(--ghost);}
.section-dark .lead{color:var(--slate-300);}
.section-dark .body{color:var(--slate-300);}
.rule-row{border-top:1px solid var(--hair);}
.section-dark .rule-row{border-top:1px solid var(--slate-800);}

/* head block */
.shead{display:flex;flex-direction:column;gap:20px;max-width:760px;}
.shead .lead{margin:0;}

/* generic grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.split-wide{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center;}

/* ---------------- B&W PHOTOGRAPHY SLOT ----------------
   Atmospheric monochrome. Not a crude box: a framed,
   hatched, captioned brief telling the shooter what goes here. */
.photo{position:relative;overflow:hidden;background:
   linear-gradient(135deg,#1E293B 0%,#0F172A 55%,#020617 100%);
  border:1px solid var(--midnight);color:var(--ghost);}
.photo::before{content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(58deg,transparent 0 13px,rgba(248,250,252,.045) 13px 14px),
    radial-gradient(120% 90% at 75% 15%,rgba(248,250,252,.10),transparent 60%);}
.photo .pmeta{position:absolute;left:18px;bottom:16px;right:18px;display:flex;flex-direction:column;gap:6px;z-index:2;}
.photo .ptag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:8px;}
.photo .ptag::before{content:"";width:14px;height:4px;background:var(--lime);}
.photo .pbrief{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--slate-300);line-height:1.5;}
.photo .pframe{position:absolute;inset:14px;border:1px solid rgba(248,250,252,.16);z-index:1;pointer-events:none;}
.photo.light{background:linear-gradient(135deg,#E2E8F0,#CBD5E1 60%,#94A3B8);border-color:var(--hair-strong);color:var(--midnight);}
.photo.light::before{background:repeating-linear-gradient(58deg,transparent 0 13px,rgba(15,23,42,.05) 13px 14px);opacity:.7;}
.photo.light .pbrief{color:var(--slate-700);}
.photo.light .ptag{color:var(--slate-700);}
.photo.light .ptag::before{background:var(--midnight);}
.ar-43{aspect-ratio:4/3;}
.ar-11{aspect-ratio:1/1;}
.ar-32{aspect-ratio:3/2;}
.ar-169{aspect-ratio:16/9;}
.ar-34{aspect-ratio:3/4;}
.ar-219{aspect-ratio:21/9;}

/* ---------------- EXHIBIT (DATA DIAGRAM) ----------------
   Consulting-grade figure: white, hairline strokes, mono
   labels, ONE lime data-point. */
.exhibit{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:30px 30px 26px;}
.exhibit .ex-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500);display:flex;justify-content:space-between;align-items:center;}
.exhibit .ex-title{font-weight:700;font-size:16px;letter-spacing:-0.01em;margin:8px 0 22px;}
.exhibit .ex-foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--slate-500);margin-top:18px;border-top:1px solid var(--hair);padding-top:14px;}
.section-dark .exhibit{background:#0B1120;border-color:var(--slate-800);}
.section-dark .exhibit .ex-title{color:var(--ghost);}

/* ratio bar exhibit */
.ratiobar{display:flex;height:54px;border:1px solid var(--midnight);border-radius:2px;overflow:hidden;font-family:var(--mono);font-size:11px;letter-spacing:.06em;}
.ratiobar span{display:flex;align-items:center;padding:0 14px;color:var(--ghost);}

/* gauge / benchmark line */
.gauge{position:relative;height:84px;border-left:1px solid var(--hair);border-bottom:1px solid var(--midnight);}
.gauge .bench{position:absolute;top:0;bottom:0;border-left:2px dashed var(--slate-400);}
.gauge .needle{position:absolute;bottom:0;width:3px;background:var(--lime);}
.gauge .needle::before{content:"";position:absolute;top:-7px;left:-3px;width:9px;height:9px;background:var(--lime);}

/* stat block */
.stat{display:flex;flex-direction:column;gap:6px;}
.stat .n{font-weight:800;font-size:clamp(36px,4vw,56px);letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums;}
.stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);}
.section-dark .stat .k{color:var(--slate-400);}

/* card */
.card{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:34px 32px;display:flex;flex-direction:column;gap:14px;}
.card .cno{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--slate-400);}
.card h3{margin:0;}
.card.flush{padding:0;overflow:hidden;}
.section-dark .card{background:#0B1120;border-color:var(--slate-800);}

/* quote / pull */
.pull{font-weight:700;font-size:clamp(24px,2.6vw,34px);letter-spacing:-0.025em;line-height:1.22;}
.pull .hl{box-shadow:inset 0 -0.35em 0 var(--lime);}

/* chips / filters */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:8px 13px;border:1px solid var(--hair-strong);border-radius:2px;color:var(--slate-700);background:#fff;cursor:pointer;white-space:nowrap;}
.chip.on{background:var(--midnight);color:var(--ghost);border-color:var(--midnight);}
.chip .ct{color:var(--slate-400);margin-left:6px;}
.chip.on .ct{color:var(--slate-400);}

/* gated lock marker */
.lock{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;color:var(--slate-600);}
.lock::before{content:"";width:7px;height:7px;background:var(--lime);display:inline-block;}

/* ---------------- FOOTER ---------------- */
.foot{background:var(--midnight);color:var(--slate-400);padding:84px 0 40px;}
.foot a{color:var(--slate-300);text-decoration:none;}
.foot a:hover{color:var(--ghost);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500);margin:0 0 18px;font-weight:500;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:64px;padding-top:26px;border-top:1px solid var(--slate-800);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate-500);flex-wrap:wrap;}

/* ---------------- CALIBRATE CTA BAND ---------------- */
.calibrate-band{background:var(--midnight);color:var(--ghost);border-top:5px solid var(--lime);}
.calibrate-band .inner{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;}

/* ---------------- UTIL ---------------- */
.mt0{margin-top:0;}.mt8{margin-top:8px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}.mt32{margin-top:32px;}.mt48{margin-top:48px;}.mt64{margin-top:64px;}
.mb0{margin-bottom:0;}
.muted{color:var(--slate-500);}
.center{text-align:center;}
.maxw60{max-width:60ch;}
.divider{height:1px;background:var(--hair);border:0;margin:0;}
.kicker-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.between{display:flex;justify-content:space-between;align-items:center;gap:20px;}
.stack{display:flex;flex-direction:column;}
.fill{flex:1;}

/* numbered list (approach steps) */
.steps-num{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.steps-num li{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--hair);}
.steps-num li .sn{font-family:var(--mono);font-size:13px;color:var(--slate-400);letter-spacing:.1em;}
.steps-num li .st h3{margin:0 0 8px;}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  :root{--gutter:32px;}
  .g3,.g4{grid-template-columns:1fr 1fr;}
  .split,.split-wide,.calibrate-band .inner{grid-template-columns:1fr;gap:40px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:640px){
  body{font-size:16px;}
  :root{--gutter:22px;}
  section{padding:72px 0;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .calibrate-band .inner{gap:28px;}
  .steps-num li{grid-template-columns:1fr;gap:8px;}
}

/* mobile-frame helper (for showing mobile artboards on desktop canvas) */
.mobile-frame{width:390px;border:1px solid var(--hair-strong);border-radius:30px;overflow:hidden;background:var(--ghost);box-shadow:0 24px 60px -28px rgba(15,23,42,.4);}

/* ============================================================
   PROSE — long-form legal/content treatment (Privacy, Terms…).
   Comfortable measure, clear hierarchy. Scoped under .prose.
   ============================================================ */
.prose{max-width:70ch;}
.prose .updated{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);display:inline-flex;align-items:center;gap:10px;margin:0 0 40px;}
.prose .updated::before{content:"";width:22px;height:5px;background:var(--lime);flex:none;}
.prose .lead-in{font-size:19px;line-height:1.6;color:var(--slate-700);margin:0 0 8px;}
.prose h2{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:52px 0 0;padding-top:28px;border-top:1px solid var(--hair);}
.prose h2:first-of-type{border-top:0;padding-top:0;}
.prose h3{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin:30px 0 0;}
.prose p{font-size:16.5px;line-height:1.72;color:var(--slate-700);margin:16px 0 0;}
.prose a{color:var(--midnight);text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:1px;}
.prose ul,.prose ol{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.prose ul li{font-size:16.5px;line-height:1.65;color:var(--slate-700);padding-left:26px;position:relative;}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--slate-300);}
.prose ol{counter-reset:p;}
.prose ol li{counter-increment:p;font-size:16.5px;line-height:1.65;color:var(--slate-700);padding-left:34px;position:relative;}
.prose ol li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;color:var(--slate-400);letter-spacing:.06em;}
.prose .datatable{width:100%;border-collapse:collapse;margin:20px 0 0;}
.prose .datatable td{padding:14px 0;border-top:1px solid var(--hair);font-size:15px;color:var(--slate-700);vertical-align:top;line-height:1.55;}
.prose .datatable td:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);width:34%;padding-right:24px;}

/* ============================================================
   CHECKBOX — opt-in / consent control. Square, lime tick.
   Markup: <label class="ck"><input type="checkbox"><span class="box"></span><span class="lab">…</span></label>
   ============================================================ */
.ck{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;user-select:none;}
.ck input{position:absolute;opacity:0;width:0;height:0;}
.ck .box{width:22px;height:22px;border:1px solid var(--midnight);border-radius:3px;background:#fff;position:relative;flex:none;transition:background .12s,border-color .12s;margin-top:1px;}
.ck .box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--midnight);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transform-origin:center;transition:transform .12s;}
.ck input:checked + .box{background:var(--lime);border-color:var(--midnight);}
.ck input:checked + .box::after{transform:rotate(45deg) scale(1);}
.ck input:focus-visible + .box{box-shadow:0 0 0 3px rgba(222,255,154,.6);}
.ck .lab{font-size:15px;line-height:1.5;color:var(--slate-600);}
.consent-note{font-size:13px;line-height:1.55;color:var(--slate-500);margin:0;}
.consent-note a{color:var(--midnight);text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:1px;}
.consent-block{display:flex;flex-direction:column;gap:16px;margin:6px 0 4px;}

/* ============================================================
   COOKIE BAR — minimal, privacy-first notice. Bottom bar.
   Default informational; extensible to Accept/Essential later.
   ============================================================ */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--midnight);color:var(--ghost);border-top:4px solid var(--lime);transform:translateY(0);transition:transform .25s ease;}
.cookiebar[hidden]{display:none;}
.cookiebar.is-out{transform:translateY(100%);}
.cookiebar .inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;gap:24px;justify-content:space-between;flex-wrap:wrap;}
.cookiebar .msg{font-size:14.5px;line-height:1.5;color:var(--slate-300);display:flex;align-items:center;gap:12px;}
.cookiebar .msg .dp-sq{flex:none;}
.cookiebar .msg a{color:var(--ghost);text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:1px;}
.cookiebar .actions{display:flex;align-items:center;gap:14px;}
.cookiebar .ck-dismiss{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--ghost);color:var(--midnight);border:1px solid var(--ghost);border-radius:var(--r);padding:11px 20px;cursor:pointer;transition:opacity .15s;}
.cookiebar .ck-dismiss:hover{opacity:.88;}
@media (max-width:640px){.cookiebar .inner{gap:14px;}.cookiebar .actions{width:100%;}.cookiebar .ck-dismiss{width:100%;}}

/* ============================================================
   TOOL GLIMPSES — brand-styled views of the Commercial Logic tool.
   All scoped under .tg so nothing collides with site styles.
   ============================================================ */
.tg{--tgr:11px;}
.tg .win{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--midnight);color:var(--midnight);box-shadow:0 36px 80px -44px rgba(15,23,42,.6);}
.tg .chrome{display:flex;align-items:center;gap:8px;padding:13px 18px;background:var(--slate-100);border-bottom:1px solid var(--hair);}
.tg .chrome i{width:11px;height:11px;border-radius:50%;background:var(--slate-300);display:block;}
.tg .chrome .addr{margin-left:16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--slate-500);display:flex;align-items:center;gap:8px;}
.tg .chrome .addr::before{content:"";width:7px;height:7px;background:var(--lime);border-radius:1px;}
.tg .screen{padding:38px 40px;}
.tg .tabs{display:flex;gap:6px;margin-bottom:34px;flex-wrap:wrap;}
.tg .tabs .t{font-family:var(--mono);font-size:12px;letter-spacing:.03em;padding:10px 15px;border-radius:4px;color:var(--slate-500);background:#fff;border:1px solid var(--hair);}
.tg .tabs .t.on{background:var(--midnight);color:#fff;border-color:var(--midnight);}
.tg .ey{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500);}
.tg .scr-title{font-weight:800;font-size:30px;letter-spacing:-0.025em;margin:6px 0 8px;line-height:1.08;}
.tg .scr-sub{font-size:15.5px;color:var(--slate-500);margin:0 0 28px;line-height:1.5;}
.tg .field{margin-bottom:24px;}
.tg .field label{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px;}
.tg .field label .req{color:var(--lime);-webkit-text-stroke:.5px var(--slate-400);}
.tg .field .hint{font-size:13.5px;color:var(--slate-500);margin:6px 0 11px;line-height:1.5;}
.tg .input{border:1px solid var(--hair);border-radius:7px;padding:15px 17px;font-family:var(--mono);font-size:15px;color:var(--slate-400);background:#fff;}
.tg .input.ph{color:var(--slate-300);}
.tg .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.tg .seg{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;}
.tg .seg .opt{border:1px solid var(--hair);border-radius:8px;padding:15px 6px;text-align:center;background:#fff;}
.tg .seg .opt .sym{font-weight:800;font-size:21px;}
.tg .seg .opt .nm{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--slate-500);margin-top:6px;}
.tg .seg .opt.on{background:var(--midnight);border-color:var(--midnight);color:#fff;}
.tg .seg .opt.on .sym{color:var(--lime);}
.tg .seg .opt.on .nm{color:var(--slate-300);}
.tg .callout{border:1px solid var(--hair);border-left:4px solid var(--lime);border-radius:6px;padding:20px 22px;background:var(--slate-50);margin-bottom:28px;}
.tg .callout h4{margin:0 0 8px;font-size:16px;font-weight:800;}
.tg .callout p{margin:0;font-size:14.5px;line-height:1.55;color:var(--slate-600);}
.tg .mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tg .metric{border:1px solid var(--hair);border-radius:10px;padding:26px 24px;background:#fff;position:relative;}
.tg .metric.key{border-color:var(--midnight);border-width:1.5px;}
.tg .metric .mk{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);}
.tg .metric .mv{font-weight:800;font-size:42px;letter-spacing:-0.03em;margin:13px 0 10px;font-variant-numeric:tabular-nums;}
.tg .metric .md{font-size:13px;color:var(--slate-500);line-height:1.45;}
.tg .metric.key .mv{position:relative;display:inline-block;}
.tg .metric.key .mv::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:5px;background:var(--lime);}
.tg .metric .tagtop{position:absolute;top:-10px;right:22px;white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--midnight);background:var(--lime);padding:4px 9px;border-radius:2px;}
.tg .outputs{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch;}
.tg .ratiocard{border:1.5px solid var(--midnight);border-radius:10px;padding:30px;display:flex;flex-direction:column;justify-content:center;}
.tg .ratiocard .mk{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);}
.tg .ratiocard .big{font-weight:900;font-size:84px;letter-spacing:-0.05em;line-height:1;margin:14px 0;font-variant-numeric:tabular-nums;}
.tg .gline{position:relative;height:54px;border-bottom:2px solid var(--midnight);margin-top:6px;}
.tg .gline .bar{position:absolute;bottom:0;left:0;height:15px;background:var(--midnight);}
.tg .gline .bench{position:absolute;top:0;bottom:0;border-left:3px dashed var(--slate-400);}
.tg .gline .needle{position:absolute;bottom:0;width:5px;height:38px;background:var(--lime);}
.tg .gline .needle::before{content:"";position:absolute;top:-9px;left:-5px;width:15px;height:15px;background:var(--lime);}
.tg .gscale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--slate-400);margin-top:13px;}
.tg .tiles{display:flex;flex-direction:column;gap:18px;}
.tg .tile{border:1px solid var(--hair);border-radius:10px;padding:22px;flex:1;display:flex;flex-direction:column;justify-content:center;}
.tg .tile .mk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);}
.tg .tile .tv{font-weight:800;font-size:34px;letter-spacing:-0.03em;margin-top:8px;font-variant-numeric:tabular-nums;}
.tg .tile .td{font-size:12.5px;color:var(--slate-500);margin-top:6px;}
@media (max-width:760px){
  .tg .two,.tg .outputs{grid-template-columns:1fr;}
  .tg .mrow{grid-template-columns:1fr;}
  .tg .seg{grid-template-columns:repeat(3,1fr);}
  .tg .screen{padding:28px 24px;}
  .tg .ratiocard .big{font-size:64px;}
}