/* =========================
   TrueWealthMetrics — Global Styles (Premium Dark SaaS — Style D)
   Single shared stylesheet for ALL pages.
   ========================= */

:root{
  /* Updated palette for a more polished dark look */
  --bg1:#0d1730;
  --bg2:#132036;
  --bg3:#162a44;

  /* Subtle glass-card backgrounds */
  --card:rgba(24,35,59,.75);
  --card2:rgba(24,35,59,.60);

  /* Slightly brighter strokes/borders for improved contrast */
  --stroke:rgba(148,163,184,.25);
  --stroke2:rgba(148,163,184,.32);
  --border:rgba(148,163,184,.22);

  /* Crisp typography */
  --text:#f1f5f9;
  --muted:rgba(226,232,240,.85);

  /* Neon accent colours inspired by 2026 colour trends (purple to aqua gradient) */
  --accent:#ae27ff;   /* neon violet */
  --accent2:#00d8ff;  /* neon aqua */
  --danger:#ef4444;

  /* Subtle shadow and generous radius for components */
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --radius: 24px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  margin:0;
  /* Use a modern font stack with Inter first for a professional look */
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  /* Slightly brighter gradient backgrounds for better contrast */
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(0,216,255,.12), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(174,39,255,.12), transparent 62%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
  min-height:100vh;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.95; }

/* =========================
   Layout helpers
   ========================= */
.twm-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 18px 48px;
}
.twm-hero{ padding: 24px 0 6px; }

/* Apply a vibrant gradient to hero headings for a modern, eye-catching look */
.twm-hero h1,
.twm-hero .twm-title {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.twm-title{
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 10px;
}
.twm-subtitle{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 850px;
}

.twm-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.twm-badge{
  font-size: 13px;
  color: var(--muted);
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}

/* Cards / Panels */
.twm-card,
.twm-panel{
  /* Slightly lighter gradient and a more subtle border for cards */
  background: linear-gradient(180deg, rgba(24,35,59,.85), rgba(17,28,47,.65));
  border: 1px solid rgba(148,163,184,.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.twm-panel{ padding: 18px; }

/* Grid */
.twm-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 920px){
  .twm-grid{ grid-template-columns: 1fr; }
}

/* Buttons */
.twm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.twm-btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(148,163,184,.34); }
.twm-btn:active{ transform: translateY(1px); }

.twm-btn-primary{
  border: 1px solid rgba(34,197,94,.35);
  background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(56,189,248,.14));
}
.twm-btn-primary:hover{
  border-color: rgba(34,197,94,.55);
  background: linear-gradient(135deg, rgba(34,197,94,.26), rgba(56,189,248,.18));
}

.twm-btn-ghost{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Inputs */
.twm-input, input, select, textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px 12px;
  border-radius:14px;
  border: 1px solid var(--stroke2);
  background: rgba(24,35,59,.55);
  color: var(--text);
  outline:none;
}
.twm-input:focus, input:focus, select:focus, textarea:focus{
  border-color: rgba(20,182,104,.55);
  /* Add subtle outline on focus for accessibility */
  box-shadow: 0 0 0 2px rgba(20,182,104,.25);
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
::placeholder{ color:rgba(159,176,208,.78); }

label{
  display:block;
  font-weight:700;
  font-size: 13px;
  color: rgba(234,240,255,.92);
  margin: 10px 0 6px;
}

/* Tables */
.tableWrap{ overflow:auto; border-radius:16px; border:1px solid var(--stroke); }
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.16);
}
th, td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
}
th{
  position:sticky;
  top:0;
  color: rgba(234,240,255,.92);
  text-align:left;
  background: rgba(16,26,47,.95);
  backdrop-filter: blur(10px);
}
tr:last-child td{ border-bottom: none; }
tbody td{ color: var(--muted); }

/* =========================
   Shared Header (Injected)
   ========================= */
.twm-header-wrap{
  position:sticky;
  top:0;
  z-index:50;
  /* Match header with the updated darker palette */
  background: linear-gradient(180deg, rgba(24,35,59,.92), rgba(24,35,59,.72));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.twm-header{
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.twm-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 210px;
}
.twm-logo,
.twm-brand img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display:block;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.twm-brand span{
  font-weight: 800;
  letter-spacing: -0.01em;
}
.twm-nav{
  display:flex;
  gap:10px;
  flex:1;
  justify-content:center;
  flex-wrap:wrap;
}
.twm-pill{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border: 1px solid var(--stroke);
  background: rgba(24,35,59,.35);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.twm-pill:hover{
  background: rgba(24,35,59,.45);
  border-color: var(--stroke2);
  transform: translateY(-2px);
}
.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  border-color: rgba(20,182,104,.45);
  background: rgba(20,182,104,.12);
  color: #e9fdf1;
}

/* Mobile nav: scroll instead of squashing */
@media (max-width: 860px){
  .twm-header{ flex-wrap: wrap; }
  .twm-brand{ min-width: auto; }
  .twm-nav{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .twm-nav::-webkit-scrollbar{ display:none; }
}

/* Page spacing so content doesn't feel stuck to header */
main{ display:block; }
.twm-page{ padding-top: 12px; }

/* Small helpers */
.twm-muted{ color: var(--muted); }
.twm-danger{ color: var(--danger); }

/* =========================
   Shared footer
   ========================= */
.site-footer{
  margin-top:38px;
  padding:28px 16px 40px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(226,232,240,.72);
}
.site-footer .container{max-width:1100px;margin:0 auto;padding:0 22px}
.site-footer .footer-row{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.site-footer .footer-brand{font-weight:800;color:rgba(255,255,255,.92)}
.site-footer .footer-note{margin-top:6px;font-size:13px;line-height:1.35;color:rgba(226,232,240,.65);max-width:620px}
.site-footer .footer-links{display:flex;gap:14px;flex-wrap:wrap}
.site-footer .footer-links a{color:rgba(226,232,240,.78);text-decoration:none;border-bottom:1px solid rgba(0,0,0,0)}
.site-footer .footer-links a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}

/* =============================
   SaaS polish + legacy classes
   ============================= */
h1,h2,h3{letter-spacing:-.02em}
h1{font-size:clamp(28px,4vw,44px);line-height:1.08;margin:0 0 10px}
h2{font-size:clamp(18px,2.2vw,24px);line-height:1.2;margin:0 0 10px}
p{margin:0 0 12px;color:var(--muted)}

/* Many calculator pages rely on these legacy names */
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px 54px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr}}

.card{
  /* Elevate cards with a lighter glass effect and more breathing room */
  background: linear-gradient(180deg, rgba(24,35,59,.82), rgba(24,35,59,.64));
  border: 1px solid var(--stroke2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions button{
  appearance:none;
  border:1px solid rgba(20,182,104,.35);
  cursor:pointer;
  border-radius:999px;
  padding:12px 20px;
  font-weight:800;
  background: linear-gradient(135deg, rgba(20,182,104,.22), rgba(14,150,224,.18));
  color: var(--text);
}
.actions button:hover{ border-color: rgba(20,182,104,.55); transform: translateY(-2px); }

.related{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.related a{
  color:rgba(234,240,255,.90);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.14)
}
.related a:hover{border-color:rgba(34,197,94,.35)}

@media(max-width:520px){
  .twm-brand span{font-size:16px}
  .twm-pill{padding:9px 12px;font-size:13px}
}

/* E‑E‑A‑T Author Byline (Articles/Guides) */
.author-byline{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}
.author-byline__title{
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.author-byline__role{
  font-size: 0.92rem;
  opacity: 0.92;
  margin-bottom: 6px;
}
.author-byline__note{
  font-size: 0.9rem;
  opacity: 0.86;
  margin-bottom: 8px;
}
.author-byline__links{
  font-size: 0.92rem;
  opacity: 0.9;
  line-height: 1.4;
}
.author-byline__links a{
  color: var(--accent2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Breadcrumb (used on /learn/ and other hubs) */
.breadcrumb{
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.breadcrumb ol{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumb li{
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before{
  content: "/";
  color: var(--muted);
}

.breadcrumb a{
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover{
  text-decoration: underline;
}

.breadcrumb ol{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb li + li:before{
  content: "›";
  color: rgba(226,232,240,.45);
}
.breadcrumb a{
  color: var(--accent2);
  text-decoration: none;
}
.breadcrumb a:hover{
  text-decoration: underline;
}


/* Authority introduction block (Learn hub) */
.authority-intro{
  margin-top: 18px;
  margin-bottom: 28px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.65;
  color: var(--muted);
}
.authority-intro p{margin: 0 0 10px 0;}
.authority-intro p:last-child{margin-bottom: 0;}
.authority-intro strong{color: var(--text);}


/* =============================
   2026 Premium UI Upgrade
   Keeps structure intact, lifts perceived quality sitewide
   ============================= */
:root{
  --bg1:#07111f;
  --bg2:#0a1528;
  --bg3:#0d1b33;
  --card:rgba(10,20,35,.80);
  --card2:rgba(8,16,29,.72);
  --stroke:rgba(148,163,184,.14);
  --stroke2:rgba(148,163,184,.22);
  --border:rgba(148,163,184,.18);
  --text:#f4f7fb;
  --muted:rgba(226,232,240,.82);
  --accent:#4ade80;
  --accent2:#60a5fa;
  --shadow:0 26px 80px rgba(0,0,0,.42);
  --radius:22px;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 480px at 10% -8%, rgba(96,165,250,.16), transparent 58%),
    radial-gradient(900px 520px at 88% -4%, rgba(74,222,128,.13), transparent 60%),
    radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.035), transparent 65%),
    linear-gradient(180deg, #0b1730 0%, #081223 38%, #07111f 100%);
  background-attachment: fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
    radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.04), transparent 70%);
  z-index:-1;
}

.twm-header-wrap{
  background:linear-gradient(180deg, rgba(7,16,30,.92), rgba(7,16,30,.78));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}
.twm-header{
  max-width:1240px;
  padding:14px 18px;
}
.twm-brand{
  gap:12px;
}
.twm-brand span{
  font-size:15px;
  font-weight:900;
  color:#f8fafc;
  letter-spacing:-.02em;
}
.twm-logo,
.twm-brand img{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 20px rgba(0,0,0,.24);
}
.twm-pill{
  height:36px;
  padding:0 14px;
  font-size:13px;
  font-weight:700;
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(248,250,252,.90);
}
.twm-pill:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(96,165,250,.28);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  background:linear-gradient(135deg, rgba(74,222,128,.16), rgba(96,165,250,.14));
  border-color:rgba(74,222,128,.34);
  color:#f7fff9;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.twm-container,
.wrap{
  max-width:1240px;
}

.twm-hero,
.hero{
  position:relative;
  padding:34px 0 10px;
}
.twm-hero > :first-child,
.hero > :first-child{
  position:relative;
  z-index:1;
}
.twm-hero::before,
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(96,165,250,.10), transparent 55%),
    radial-gradient(900px 260px at 85% 0%, rgba(74,222,128,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
  pointer-events:none;
}
.twm-title,
h1{
  font-size:clamp(38px,5vw,64px);
  line-height:1.02;
  margin:0 0 14px;
  color:#f8fbff;
}
.twm-subtitle,
.sub,
.lead,
p.sub{
  font-size:18px;
  line-height:1.65;
  color:rgba(226,232,240,.82);
  max-width:900px;
}
p, li{
  font-size:16px;
  line-height:1.68;
}
h2{
  font-size:clamp(24px,2.6vw,34px);
  margin-bottom:14px;
}
h3,.h3{
  font-size:clamp(20px,2vw,28px);
  margin-bottom:10px;
}
.h4{
  font-size:18px;
  margin-bottom:8px;
}

.twm-badges{margin-top:18px}
.twm-badge,
.badge,
.pill,
.tag{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(241,245,249,.84);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.twm-card,
  .card,
  .twm-panel,
  .authority-intro,
  .author-byline,
  .tableWrap,
  table{
  /* Harmonised background and border for cards, panels and tables */
    background:
      linear-gradient(180deg, rgba(24,35,59,.86), rgba(24,35,59,.74));
    border: 1px solid var(--stroke2);
    box-shadow: var(--shadow);
}
.twm-card,
.card{
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.twm-card:hover,
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.22);
  box-shadow:0 26px 60px rgba(0,0,0,.30);
}

.section{
  margin-top:22px;
}
.p-18{padding:22px}
.mt-18{margin-top:18px}
.mt-28{margin-top:28px}
.muted,.twm-muted,p.muted{
  color:rgba(226,232,240,.78);
}
.row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.gap-10{gap:10px}
.list{
  padding-left:22px;
  margin:10px 0 12px;
}
.list li{margin:4px 0}

.twm-link,
  .linkCard,
  a.twm-link,
  .row a{
  color: var(--accent2);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.twm-link:hover,
  .linkCard:hover,
  .row a:hover{
  color: rgba(14,150,224,.92);
  border-bottom-color: rgba(14,150,224,.45);
}

.actions,
.btnrow,
.btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}
.actions button,
  .btn,
  .primary,
  .secondary,
  .smallBtn,
  .smallbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(24,35,59,.35);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.actions button:hover,
.btn:hover,
.primary:hover,
.secondary:hover,
.smallBtn:hover,
.smallbtn:hover{
  transform:translateY(-1px);
}
.twm-btn-primary,
  .actions button,
  .primary{
  background: linear-gradient(135deg, rgba(20,182,104,.22), rgba(14,150,224,.18));
  border-color: rgba(20,182,104,.30);
}
.twm-btn-ghost,
.secondary{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
}

.tableWrap,
.tablewrap{
  border-radius:18px;
  overflow:hidden;
}
table{
  border-radius:18px;
}
th{
  background: rgba(24,35,59,.95);
  color:#f8fafc;
}
td{color:rgba(226,232,240,.78)}

.notice,
.callout,
.banner,
.warnBox{
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(96,165,250,.10), rgba(96,165,250,.04));
  border:1px solid rgba(96,165,250,.18);
}
.good{color:#86efac}
.warn{color:#fbbf24}
.danger,.neg{color:#f87171}
.pos{color:#4ade80}

.site-footer,
.footer{
  margin-top:46px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.site-footer .footer-brand,
.footer-brand{
  color:#f8fafc;
  font-weight:900;
}
.site-footer .footer-links a,
.footer-links a{
  color:rgba(226,232,240,.82);
}
.site-footer .footer-links a:hover,
.footer-links a:hover{
  color:#fff;
}

@media (max-width: 860px){
  .twm-container,
  .wrap{padding:22px 16px 46px}
  .twm-hero::before,
  .hero::before{border-radius:20px}
  .twm-card,
  .card{padding:16px}
  h1,.twm-title{font-size:clamp(34px,9vw,50px)}
}


/* === Elite Upgrade Additions === */
.twm-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.twm-cta .twm-btn{
  padding:12px 18px;
  font-size:14px;
}

.twm-highlight{
  border:1px solid rgba(56,189,248,.35);
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,197,94,.08));
}

.twm-trust{
  margin-top:14px;
  font-size:13px;
  color:var(--muted);
}

.twm-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,189,248,.35);
  transition:all .2s ease;
}



/* =============================
   2026 Elite Authority Refresh
   Stronger premium gradients, richer card hierarchy,
   standout calculator/results sections, and sharper CTAs.
   ============================= */
:root{
  --bg1:#050b17;
  --bg2:#091427;
  --bg3:#0e1d37;
  --card:rgba(9,18,34,.86);
  --card2:rgba(7,14,27,.80);
  --stroke:rgba(148,163,184,.18);
  --stroke2:rgba(148,163,184,.30);
  --border:rgba(255,255,255,.10);
  --text:#f8fbff;
  --muted:rgba(226,232,240,.84);
  --accent:#4ade80;
  --accent2:#60a5fa;
  --accent3:#a78bfa;
  --accent4:#f472b6;
  --gold:#f59e0b;
  --shadow:0 28px 90px rgba(0,0,0,.46);
  --shadow-soft:0 20px 44px rgba(2,8,23,.34);
  --radius:24px;
}

body{
  background:
    radial-gradient(900px 560px at 4% -8%, rgba(96,165,250,.22), transparent 55%),
    radial-gradient(900px 540px at 94% -10%, rgba(74,222,128,.16), transparent 54%),
    radial-gradient(760px 520px at 82% 22%, rgba(167,139,250,.12), transparent 58%),
    radial-gradient(640px 420px at 18% 32%, rgba(244,114,182,.09), transparent 58%),
    linear-gradient(180deg, #0d1a34 0%, #081224 34%, #050b17 100%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 34%, transparent 85%);
  opacity:.18;
  z-index:-1;
}

.twm-header-wrap{
  background:
    linear-gradient(180deg, rgba(6,12,25,.92), rgba(6,12,25,.78)),
    radial-gradient(600px 100px at 50% 0%, rgba(96,165,250,.12), transparent 70%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 36px rgba(0,0,0,.30);
}
.twm-header{
  max-width:1260px;
  padding:15px 18px;
}
.twm-brand{
  position:relative;
  padding:7px 10px 7px 6px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}
.twm-logo,
.twm-brand img{
  box-shadow:
    0 12px 30px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 26px rgba(96,165,250,.14);
}
.twm-brand span{
  font-size:15px;
  font-weight:900;
  background:linear-gradient(90deg, #ffffff, #c7ddff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.twm-pill{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.twm-pill::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.06) 50%, transparent 80%);
  opacity:0;
  transition:opacity .16s ease;
}
.twm-pill:hover::before,
.twm-pill.is-active::before,
.twm-pill[aria-current="page"]::before{ opacity:1; }
.twm-pill:hover{
  border-color:rgba(96,165,250,.34);
  box-shadow:0 14px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(96,165,250,.10) inset;
}
.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  background:
    linear-gradient(135deg, rgba(74,222,128,.20), rgba(96,165,250,.18) 46%, rgba(167,139,250,.14));
  border-color:rgba(125,211,252,.34);
  box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 20px rgba(96,165,250,.10);
}

.twm-hero,
.hero{
  padding:40px 0 12px;
  isolation:isolate;
}
.twm-hero::before,
.hero::before{
  background:
    radial-gradient(950px 320px at 12% 8%, rgba(96,165,250,.16), transparent 56%),
    radial-gradient(820px 280px at 88% 8%, rgba(74,222,128,.12), transparent 58%),
    radial-gradient(780px 260px at 74% 78%, rgba(167,139,250,.11), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.twm-hero::after,
.hero::after{
  content:"";
  position:absolute;
  top:-20px;
  right:7%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.18), rgba(96,165,250,.02) 56%, transparent 70%);
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
}
.twm-title,
.hero h1,
h1{
  background:linear-gradient(180deg, #ffffff 0%, #e7f0ff 48%, #bfd8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.twm-subtitle,
.sub,
.lead,
p.sub,
.hero p{
  color:rgba(232,238,248,.84);
}
.hero p a,
.twm-subtitle a,
p a,
li a{
  color:#bfe4ff;
}
.hero p a:hover,
p a:hover,
li a:hover{
  color:#ffffff;
}
.twm-badge,
.badge,
.pill,
.tag{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 10px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.twm-badge:nth-child(4n+1),
.badge:nth-child(4n+1){ border-color:rgba(96,165,250,.24); }
.twm-badge:nth-child(4n+2),
.badge:nth-child(4n+2){ border-color:rgba(74,222,128,.24); }
.twm-badge:nth-child(4n+3),
.badge:nth-child(4n+3){ border-color:rgba(167,139,250,.24); }
.twm-badge:nth-child(4n+4),
.badge:nth-child(4n+4){ border-color:rgba(244,114,182,.24); }

.twm-card,
.card,
.twm-panel,
.authority-intro,
.author-byline,
.tableWrap,
.tablewrap,
table,
.notice,
.callout,
.banner,
.warnBox{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,18,34,.90), rgba(7,14,26,.82)),
    radial-gradient(600px 180px at 0% 0%, rgba(96,165,250,.06), transparent 60%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
.twm-card::before,
.card::before,
.twm-panel::before,
.notice::before,
.callout::before,
.banner::before,
.warnBox::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none;
}
.twm-card::after,
.card::after,
.twm-panel::after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.08), transparent 68%);
  pointer-events:none;
}
.twm-card:hover,
.card:hover{
  border-color:rgba(125,211,252,.30);
  box-shadow:0 28px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(125,211,252,.06) inset;
}

/* richer hierarchy for card grids */
.twm-grid > .twm-card:nth-child(4n+1),
.grid > .card:nth-child(4n+1){
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(520px 220px at 0% 0%, rgba(96,165,250,.09), transparent 60%);
}
.twm-grid > .twm-card:nth-child(4n+2),
.grid > .card:nth-child(4n+2){
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(520px 220px at 100% 0%, rgba(74,222,128,.08), transparent 60%);
}
.twm-grid > .twm-card:nth-child(4n+3),
.grid > .card:nth-child(4n+3){
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(520px 220px at 100% 0%, rgba(167,139,250,.08), transparent 60%);
}
.twm-grid > .twm-card:nth-child(4n+4),
.grid > .card:nth-child(4n+4){
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(520px 220px at 0% 0%, rgba(244,114,182,.07), transparent 60%);
}

.actions button,
.btn,
.primary,
.secondary,
.smallBtn,
.smallbtn,
.twm-btn{
  position:relative;
  overflow:hidden;
  min-height:48px;
  border-radius:16px;
  transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.actions button::before,
.btn::before,
.primary::before,
.secondary::before,
.smallBtn::before,
.smallbtn::before,
.twm-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 24%, rgba(255,255,255,.15) 48%, transparent 74%);
  transform:translateX(-130%);
  transition:transform .42s ease;
}
.actions button:hover::before,
.btn:hover::before,
.primary:hover::before,
.secondary:hover::before,
.smallBtn:hover::before,
.smallbtn:hover::before,
.twm-btn:hover::before{ transform:translateX(130%); }
.twm-btn-primary,
.actions button,
.primary{
  background:
    linear-gradient(135deg, rgba(74,222,128,.30) 0%, rgba(96,165,250,.24) 45%, rgba(167,139,250,.18) 100%);
  border-color:rgba(125,211,252,.28);
  box-shadow:0 16px 34px rgba(6,10,22,.28), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.twm-btn-primary:hover,
.actions button:hover,
.primary:hover{
  transform:translateY(-2px);
  border-color:rgba(191,219,254,.38);
  box-shadow:0 20px 38px rgba(6,10,22,.34), 0 0 26px rgba(96,165,250,.14);
}
.twm-btn-ghost,
.secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.12);
}
.twm-btn-ghost:hover,
.secondary:hover{
  box-shadow:0 16px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.05) inset;
}

input, select, textarea,
.twm-input{
  background:
    linear-gradient(180deg, rgba(3,10,22,.78), rgba(8,16,29,.68)),
    radial-gradient(260px 80px at 0% 0%, rgba(96,165,250,.05), transparent 65%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
input:hover, select:hover, textarea:hover,
.twm-input:hover{
  border-color:rgba(125,211,252,.26);
}
input:focus, select:focus, textarea:focus,
.twm-input:focus{
  border-color:rgba(125,211,252,.50);
  box-shadow:0 0 0 4px rgba(96,165,250,.12), 0 0 0 1px rgba(125,211,252,.18) inset;
}

/* Calculator results / KPI sections */
.kpis,
.kpiGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 760px){
  .kpis,
  .kpiGrid{ grid-template-columns:1fr; }
}
.kpi{
  position:relative;
  padding:16px 16px 15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(260px 100px at 0% 0%, rgba(96,165,250,.10), transparent 70%);
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.kpi:nth-child(2n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(260px 100px at 100% 0%, rgba(74,222,128,.10), transparent 70%);
}
.kpi:nth-child(3n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(260px 100px at 100% 0%, rgba(167,139,250,.11), transparent 70%);
}
.kpi .t,
.kpi .l,
.smallLabel{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,232,240,.68);
  margin-bottom:8px;
}
.kpi .v,
.v,
.mono{
  font-size:clamp(28px, 3.6vw, 40px);
  line-height:1.02;
  font-weight:900;
  color:#f8fbff;
  letter-spacing:-.03em;
}
.kpi .s,
.small,
.note,
.hint,
.statusLine{
  color:rgba(226,232,240,.74);
}
#resultsCard,
.tableCard,
[id$="resultsCard"],
[id*="resultsCard"],
[id*="Results"],
[id*="results"]{
  border-color:rgba(125,211,252,.18);
  background:
    linear-gradient(180deg, rgba(9,19,37,.94), rgba(7,15,29,.86)),
    radial-gradient(580px 200px at 0% 0%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(520px 180px at 100% 100%, rgba(74,222,128,.10), transparent 60%);
}
#growthTableCard,
.tableCard,
[id*="Table"],
[id*="table"]{
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(580px 180px at 100% 0%, rgba(167,139,250,.10), transparent 60%);
}
.tableActions,
.toolbar,
.topbar,
.tabs,
.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.tableActions .badge,
#tableBadge{
  background:linear-gradient(135deg, rgba(167,139,250,.14), rgba(96,165,250,.12));
}
th{
  background:linear-gradient(180deg, rgba(8,14,26,.98), rgba(11,20,35,.96));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
tr:nth-child(even) td{
  background:rgba(255,255,255,.012);
}

/* FAQ / accordion areas feel more premium */
details,
.accItem,
.faq > div,
.faq-body{
  border-radius:18px;
}
details{
  margin-top:12px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
details[open]{
  border-color:rgba(125,211,252,.26);
  background:linear-gradient(180deg, rgba(96,165,250,.07), rgba(255,255,255,.03));
}
summary{
  cursor:pointer;
  font-weight:800;
  color:#f8fbff;
}

/* Sticky mobile result bars */
.stickyBar{
  position:sticky;
  bottom:14px;
  z-index:30;
  margin:18px auto 0;
  max-width:1240px;
  padding:0 14px;
}
.stickyInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(8,15,29,.90), rgba(7,14,26,.82)),
    radial-gradient(420px 120px at 0% 0%, rgba(96,165,250,.12), transparent 70%);
  box-shadow:0 22px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.stickyMini .l{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(226,232,240,.66); }
.stickyMini .v{ font-size:22px; font-weight:900; }
.stickyBtns{ display:flex; gap:10px; flex-wrap:wrap; }
.stickyBtns a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  font-weight:800;
}
.stickyBtns a.primary{
  background:linear-gradient(135deg, rgba(74,222,128,.24), rgba(96,165,250,.18), rgba(167,139,250,.14));
}

/* Footer feels more authoritative */
.site-footer,
.footer{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    radial-gradient(700px 180px at 50% 0%, rgba(96,165,250,.08), transparent 70%);
}
.site-footer::before,
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}
.footer-small,
.footer-sub{
  color:rgba(226,232,240,.70);
}

/* stronger mobile polish */
@media (max-width: 860px){
  .twm-header{ padding:13px 14px; }
  .twm-brand{ width:100%; justify-content:flex-start; }
  .twm-hero,
  .hero{ padding:28px 0 8px; }
  .twm-card,
  .card{ border-radius:20px; }
  .stickyBar{ bottom:10px; padding:0 10px; }
  .stickyInner{ padding:10px 12px; border-radius:18px; }
  .stickyMini .v{ font-size:18px; }
}


/* =============================
   2026 Final Premium Color Mix Override
   Visible pink + cyan identity across ALL pages
   ============================= */
:root{
  --accent:#35e0c2;
  --accent2:#63b8ff;
  --accent3:#b48cff;
  --accent4:#ff5ca8;
  --accent5:#ff8bd1;
  --pinkGlow: rgba(255,92,168,.22);
  --cyanGlow: rgba(99,184,255,.22);
}

body{
  background:
    radial-gradient(980px 620px at -8% -6%, rgba(99,184,255,.24), transparent 54%),
    radial-gradient(900px 560px at 108% -8%, rgba(53,224,194,.14), transparent 55%),
    radial-gradient(760px 520px at 15% 38%, rgba(255,92,168,.16), transparent 58%),
    radial-gradient(700px 520px at 86% 26%, rgba(180,140,255,.12), transparent 58%),
    linear-gradient(180deg, #0f1d3a 0%, #0a1327 36%, #070d18 100%);
}

body::before{
  background:
    radial-gradient(560px 180px at 18% 0%, rgba(255,92,168,.10), transparent 70%),
    radial-gradient(720px 220px at 82% 0%, rgba(99,184,255,.09), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
}

.twm-header-wrap{
  background:
    radial-gradient(420px 120px at 18% 0%, rgba(255,92,168,.12), transparent 72%),
    radial-gradient(520px 130px at 82% 0%, rgba(99,184,255,.12), transparent 72%),
    linear-gradient(180deg, rgba(7,12,24,.95), rgba(7,12,24,.82));
}

.twm-brand{
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    radial-gradient(110px 60px at 0% 0%, rgba(255,92,168,.12), transparent 70%);
  border-color: rgba(255,255,255,.10);
}

.twm-pill{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(120px 40px at 0% 0%, rgba(99,184,255,.06), transparent 70%);
}
.twm-pill:hover{
  border-color: rgba(255,92,168,.28);
  box-shadow: 0 14px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(255,92,168,.08) inset;
}
.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  color:#fff6fb;
  border-color: rgba(255,142,200,.40);
  background:
    linear-gradient(135deg, rgba(255,92,168,.24) 0%, rgba(99,184,255,.16) 52%, rgba(53,224,194,.12) 100%);
  box-shadow:
    0 14px 30px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 28px rgba(255,92,168,.12);
}

.twm-hero::before,
.hero::before{
  background:
    radial-gradient(900px 300px at 14% 10%, rgba(99,184,255,.18), transparent 56%),
    radial-gradient(760px 260px at 88% 10%, rgba(255,92,168,.16), transparent 58%),
    radial-gradient(640px 220px at 62% 82%, rgba(180,140,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 30px 80px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.03);
}
.twm-hero::after,
.hero::after{
  width:280px;
  height:280px;
  top:-32px;
  right:6%;
  background:radial-gradient(circle, rgba(255,92,168,.20), rgba(255,92,168,.04) 54%, transparent 72%);
  filter:blur(18px);
}

.twm-title,
h1,
.hero h1{
  background:linear-gradient(180deg, #ffffff 0%, #fbe7f2 42%, #c8ddff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.twm-badge,
.badge,
.pill,
.tag{
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    radial-gradient(120px 40px at 0% 0%, rgba(255,92,168,.08), transparent 70%);
}
.twm-badge:nth-child(odd),
.badge:nth-child(odd){ border-color: rgba(255,92,168,.22); }
.twm-badge:nth-child(even),
.badge:nth-child(even){ border-color: rgba(99,184,255,.22); }

.twm-card,
.card,
.twm-panel,
.authority-intro,
.author-byline,
.tableWrap,
.tablewrap,
table,
.notice,
.callout,
.banner,
.warnBox{
  background:
    linear-gradient(180deg, rgba(10,16,31,.92), rgba(6,12,24,.84)),
    radial-gradient(360px 140px at 0% 0%, rgba(99,184,255,.09), transparent 65%),
    radial-gradient(300px 120px at 100% 0%, rgba(255,92,168,.08), transparent 68%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.02);
}
.twm-card::after,
.card::after,
.twm-panel::after{
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(255,92,168,.10), transparent 68%);
}
.twm-card:hover,
.card:hover{
  border-color: rgba(255,130,196,.24);
  box-shadow:
    0 30px 74px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 28px rgba(255,92,168,.08);
}

.twm-grid > .twm-card:nth-child(4n+1),
.grid > .card:nth-child(4n+1){
  background:
    linear-gradient(180deg, rgba(10,16,31,.92), rgba(6,12,24,.84)),
    radial-gradient(420px 180px at 0% 0%, rgba(99,184,255,.12), transparent 62%);
}
.twm-grid > .twm-card:nth-child(4n+2),
.grid > .card:nth-child(4n+2){
  background:
    linear-gradient(180deg, rgba(10,16,31,.92), rgba(6,12,24,.84)),
    radial-gradient(420px 180px at 100% 0%, rgba(255,92,168,.12), transparent 62%);
}
.twm-grid > .twm-card:nth-child(4n+3),
.grid > .card:nth-child(4n+3){
  background:
    linear-gradient(180deg, rgba(10,16,31,.92), rgba(6,12,24,.84)),
    radial-gradient(420px 180px at 100% 0%, rgba(180,140,255,.11), transparent 62%);
}
.twm-grid > .twm-card:nth-child(4n+4),
.grid > .card:nth-child(4n+4){
  background:
    linear-gradient(180deg, rgba(10,16,31,.92), rgba(6,12,24,.84)),
    radial-gradient(420px 180px at 0% 0%, rgba(53,224,194,.10), transparent 62%);
}

.actions button,
.btn,
.primary,
.twm-btn,
.smallBtn,
.smallbtn{
  border-color: rgba(255,144,202,.28);
  color:#fff8fc;
  background:
    linear-gradient(135deg, rgba(255,92,168,.28) 0%, rgba(99,184,255,.22) 54%, rgba(53,224,194,.14) 100%);
  box-shadow:
    0 18px 38px rgba(4,8,18,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 26px rgba(255,92,168,.06);
}
.actions button:hover,
.btn:hover,
.primary:hover,
.twm-btn:hover,
.smallBtn:hover,
.smallbtn:hover{
  border-color: rgba(255,172,214,.40);
  box-shadow:
    0 22px 42px rgba(4,8,18,.34),
    0 0 30px rgba(255,92,168,.12);
}
.twm-btn-ghost,
.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(120px 40px at 100% 0%, rgba(99,184,255,.07), transparent 70%);
  border-color: rgba(255,255,255,.12);
}
.twm-btn-ghost:hover,
.secondary:hover{
  border-color: rgba(99,184,255,.28);
}

input, select, textarea, .twm-input{
  background:
    linear-gradient(180deg, rgba(4,10,20,.82), rgba(8,15,28,.72)),
    radial-gradient(180px 60px at 100% 0%, rgba(255,92,168,.05), transparent 70%),
    radial-gradient(180px 60px at 0% 0%, rgba(99,184,255,.06), transparent 70%);
}
input:focus, select:focus, textarea:focus, .twm-input:focus{
  border-color: rgba(255,130,196,.42);
  box-shadow: 0 0 0 4px rgba(255,92,168,.10), 0 0 0 1px rgba(255,130,196,.14) inset;
}

.kpi{
  border-color: rgba(255,255,255,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    radial-gradient(220px 100px at 0% 0%, rgba(99,184,255,.12), transparent 68%);
}
.kpi:nth-child(2n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    radial-gradient(220px 100px at 100% 0%, rgba(255,92,168,.12), transparent 68%);
}
.kpi:nth-child(3n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    radial-gradient(220px 100px at 100% 0%, rgba(180,140,255,.12), transparent 68%);
}
.kpi:nth-child(4n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    radial-gradient(220px 100px at 0% 0%, rgba(53,224,194,.10), transparent 68%);
}
.kpi .v, .v, .mono{
  background: linear-gradient(180deg, #ffffff 0%, #ffe3f1 44%, #c9e0ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#resultsCard,
[id$="resultsCard"],
[id*="resultsCard"],
[id*="Results"],
[id*="results"]{
  border-color: rgba(255,142,200,.22);
  background:
    linear-gradient(180deg, rgba(10,18,34,.96), rgba(6,12,24,.88)),
    radial-gradient(520px 180px at 0% 0%, rgba(99,184,255,.14), transparent 60%),
    radial-gradient(520px 180px at 100% 0%, rgba(255,92,168,.14), transparent 60%),
    radial-gradient(460px 150px at 50% 100%, rgba(180,140,255,.08), transparent 70%);
  box-shadow:
    0 28px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 32px rgba(255,92,168,.08);
}

#growthTableCard,
.tableCard,
[id*="Table"],
[id*="table"]{
  background:
    linear-gradient(180deg, rgba(10,18,34,.94), rgba(7,13,24,.84)),
    radial-gradient(520px 180px at 100% 0%, rgba(180,140,255,.12), transparent 60%),
    radial-gradient(480px 160px at 0% 100%, rgba(99,184,255,.08), transparent 64%);
}

th{
  background:
    linear-gradient(180deg, rgba(11,18,34,.98), rgba(8,13,24,.96)),
    radial-gradient(220px 60px at 100% 0%, rgba(255,92,168,.09), transparent 70%);
}

.author-byline,
.authority-intro,
.notice,
.callout,
.banner,
.warnBox{
  background:
    linear-gradient(180deg, rgba(11,18,35,.92), rgba(8,14,26,.84)),
    radial-gradient(340px 140px at 0% 0%, rgba(255,92,168,.09), transparent 68%),
    radial-gradient(320px 120px at 100% 0%, rgba(99,184,255,.08), transparent 68%);
}

.breadcrumb a,
.twm-link,
a.twm-link,
.row a{
  color:#ffd0e9;
}
.breadcrumb a:hover,
.twm-link:hover,
a.twm-link:hover,
.row a:hover{
  color:#ffffff;
  border-bottom-color: rgba(255,190,224,.48);
}

.site-footer,
.footer{
  background:
    radial-gradient(420px 120px at 20% 0%, rgba(255,92,168,.08), transparent 70%),
    radial-gradient(520px 140px at 80% 0%, rgba(99,184,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}


/* =============================
   2026 Visual Fix — strong visible pink/cyan identity
   Targets actual visible selectors with higher priority
   ============================= */
:root{
  --accent2:#67e8f9;
  --accent4:#ff6fb4;
  --accent5:#ffa7d6;
}

html body{
  background:
    radial-gradient(980px 620px at 0% 0%, rgba(103,232,249,.20), transparent 58%),
    radial-gradient(880px 560px at 100% 0%, rgba(255,111,180,.18), transparent 54%),
    radial-gradient(760px 520px at 78% 22%, rgba(192,132,252,.16), transparent 56%),
    radial-gradient(820px 540px at 18% 78%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #101a34 0%, #081122 36%, #050b17 100%) !important;
}

html body::before{
  background:
    radial-gradient(720px 260px at 12% 0%, rgba(103,232,249,.12), transparent 70%),
    radial-gradient(720px 260px at 88% 0%, rgba(255,111,180,.11), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%) !important;
}

.twm-header-wrap{
  background:
    linear-gradient(180deg, rgba(7,12,24,.94), rgba(7,12,24,.80)),
    radial-gradient(440px 120px at 16% 0%, rgba(103,232,249,.16), transparent 72%),
    radial-gradient(440px 120px at 84% 0%, rgba(255,111,180,.14), transparent 72%) !important;
}

.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  background:
    linear-gradient(135deg, rgba(103,232,249,.22), rgba(34,197,94,.16) 42%, rgba(255,111,180,.20) 100%) !important;
  border-color: rgba(165,243,252,.40) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 26px rgba(255,111,180,.14) !important;
}

.twm-hero::before,
.hero::before{
  background:
    radial-gradient(920px 320px at 8% 10%, rgba(103,232,249,.19), transparent 56%),
    radial-gradient(900px 300px at 92% 8%, rgba(255,111,180,.18), transparent 58%),
    radial-gradient(720px 240px at 74% 82%, rgba(192,132,252,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 30px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08), 0 0 40px rgba(255,111,180,.06) !important;
}

.twm-hero::after,
.hero::after{
  width: 300px !important;
  height: 300px !important;
  top: -40px !important;
  right: 4% !important;
  background: radial-gradient(circle, rgba(255,111,180,.24), rgba(255,111,180,.04) 58%, transparent 72%) !important;
}

.twm-title,
.hero h1,
h1{
  background: linear-gradient(180deg, #ffffff 0%, #ebf8ff 44%, #ffd3e7 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.twm-card,
.card,
.twm-panel,
.authority-intro,
.author-byline,
.tableWrap,
.tablewrap,
table,
.notice,
.callout,
.banner,
.warnBox{
  background:
    linear-gradient(180deg, rgba(11,19,35,.92), rgba(8,14,26,.86)),
    radial-gradient(540px 220px at 0% 0%, rgba(103,232,249,.10), transparent 60%),
    radial-gradient(500px 180px at 100% 0%, rgba(255,111,180,.08), transparent 62%) !important;
  border:1px solid rgba(255,255,255,.11) !important;
}

.twm-grid > .twm-card:nth-child(4n+1),
.grid > .card:nth-child(4n+1){
  background:
    linear-gradient(180deg, rgba(11,19,35,.92), rgba(8,14,26,.86)),
    radial-gradient(520px 220px at 0% 0%, rgba(103,232,249,.14), transparent 60%) !important;
}
.twm-grid > .twm-card:nth-child(4n+2),
.grid > .card:nth-child(4n+2){
  background:
    linear-gradient(180deg, rgba(11,19,35,.92), rgba(8,14,26,.86)),
    radial-gradient(520px 220px at 100% 0%, rgba(255,111,180,.13), transparent 60%) !important;
}
.twm-grid > .twm-card:nth-child(4n+3),
.grid > .card:nth-child(4n+3){
  background:
    linear-gradient(180deg, rgba(11,19,35,.92), rgba(8,14,26,.86)),
    radial-gradient(520px 220px at 100% 0%, rgba(192,132,252,.13), transparent 60%) !important;
}
.twm-grid > .twm-card:nth-child(4n+4),
.grid > .card:nth-child(4n+4){
  background:
    linear-gradient(180deg, rgba(11,19,35,.92), rgba(8,14,26,.86)),
    radial-gradient(520px 220px at 0% 0%, rgba(74,222,128,.12), transparent 60%) !important;
}

#resultsCard,
.tableCard,
[id$="resultsCard"],
[id*="resultsCard"],
[id*="Results"],
[id*="results"]{
  background:
    linear-gradient(180deg, rgba(10,18,34,.95), rgba(8,14,27,.88)),
    radial-gradient(560px 220px at 0% 0%, rgba(103,232,249,.15), transparent 60%),
    radial-gradient(520px 220px at 100% 100%, rgba(255,111,180,.13), transparent 60%) !important;
  border-color: rgba(165,243,252,.24) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06), 0 0 30px rgba(255,111,180,.05) !important;
}

.kpi{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(260px 100px at 0% 0%, rgba(103,232,249,.14), transparent 70%) !important;
}
.kpi:nth-child(2n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(260px 100px at 100% 0%, rgba(255,111,180,.14), transparent 70%) !important;
}
.kpi:nth-child(3n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(260px 100px at 100% 0%, rgba(192,132,252,.15), transparent 70%) !important;
}

.actions button,
.btn,
.primary,
.secondary,
.smallBtn,
.smallbtn,
.twm-btn,
.twm-btn-primary{
  background:
    linear-gradient(135deg, rgba(103,232,249,.28) 0%, rgba(34,197,94,.14) 38%, rgba(255,111,180,.24) 100%) !important;
  border-color: rgba(165,243,252,.28) !important;
}

.actions button:hover,
.btn:hover,
.primary:hover,
.secondary:hover,
.smallBtn:hover,
.smallbtn:hover,
.twm-btn:hover,
.twm-btn-primary:hover{
  box-shadow: 0 20px 38px rgba(6,10,22,.34), 0 0 26px rgba(255,111,180,.16) !important;
}

.twm-badge:nth-child(4n+4),
.badge:nth-child(4n+4){ border-color:rgba(255,111,180,.30) !important; }

input:focus, select:focus, textarea:focus,
.twm-input:focus{
  border-color:rgba(255,111,180,.34) !important;
  box-shadow:0 0 0 4px rgba(255,111,180,.10), 0 0 0 1px rgba(103,232,249,.16) inset !important;
}

/* =============================
   2026 Rank-1 Elite UI Pass
   Direct component-level overrides for visible hierarchy
   ============================= */
:root{
  --accent5:#fda4af;
}

body{
  background:
    radial-gradient(1100px 700px at 4% 2%, rgba(96,165,250,.24), transparent 52%),
    radial-gradient(960px 640px at 97% 3%, rgba(244,114,182,.20), transparent 48%),
    radial-gradient(760px 520px at 82% 32%, rgba(167,139,250,.17), transparent 54%),
    radial-gradient(760px 520px at 15% 72%, rgba(34,211,238,.09), transparent 60%),
    linear-gradient(180deg, #0d1832 0%, #081326 38%, #050b17 100%);
}

.hero::before,
.twm-hero::before{
  background:
    radial-gradient(1080px 340px at 8% 0%, rgba(125,211,252,.26), transparent 54%),
    radial-gradient(880px 320px at 92% 6%, rgba(244,114,182,.22), transparent 52%),
    radial-gradient(720px 260px at 72% 76%, rgba(167,139,250,.16), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
}

.hero::after,
.twm-hero::after{
  width:280px;
  height:280px;
  top:-30px;
  right:4%;
  background:radial-gradient(circle, rgba(244,114,182,.28), rgba(167,139,250,.10) 48%, transparent 72%);
  filter:blur(18px);
}

h1,
.twm-title,
.hero h1{
  background:linear-gradient(180deg, #ffffff 0%, #ffeaf7 38%, #d6e9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.twm-link,
.linkCard,
.row a,
p a,
li a{
  color:#ffd0e8;
}
.twm-link:hover,
.linkCard:hover,
.row a:hover,
p a:hover,
li a:hover{
  color:#ffffff;
  border-bottom-color:rgba(253,164,175,.55);
}

.twm-card,
.card,
.twm-panel,
.authority-intro,
.author-byline,
.notice,
.callout,
.banner,
.warnBox,
.tableWrap,
.tablewrap,
table{
  background:
    linear-gradient(180deg, rgba(7,14,28,.92), rgba(6,12,24,.84)),
    radial-gradient(520px 180px at 0% 0%, rgba(96,165,250,.11), transparent 60%),
    radial-gradient(420px 160px at 100% 100%, rgba(244,114,182,.09), transparent 64%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}

.twm-grid > .twm-card:nth-child(odd),
.grid > .card:nth-child(odd){
  background:
    linear-gradient(180deg, rgba(7,14,28,.92), rgba(6,12,24,.84)),
    radial-gradient(520px 180px at 0% 0%, rgba(96,165,250,.13), transparent 60%),
    radial-gradient(320px 140px at 100% 100%, rgba(244,114,182,.07), transparent 68%);
}
.twm-grid > .twm-card:nth-child(even),
.grid > .card:nth-child(even){
  background:
    linear-gradient(180deg, rgba(7,14,28,.92), rgba(6,12,24,.84)),
    radial-gradient(520px 180px at 100% 0%, rgba(167,139,250,.14), transparent 58%),
    radial-gradient(320px 140px at 0% 100%, rgba(34,211,238,.06), transparent 68%);
}

.twm-card:hover,
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(244,114,182,.26);
  box-shadow:0 30px 72px rgba(0,0,0,.38), 0 0 0 1px rgba(244,114,182,.07) inset, 0 0 28px rgba(125,211,252,.10);
}

.twm-pill,
.badge,
.pill,
.tag{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  background:linear-gradient(135deg, rgba(45,212,191,.28), rgba(96,165,250,.22) 42%, rgba(244,114,182,.24) 100%);
  border-color:rgba(244,114,182,.30);
  box-shadow:0 14px 28px rgba(0,0,0,.24), 0 0 26px rgba(244,114,182,.08);
}

.actions button,
.btn,
.primary,
.twm-btn-primary{
  background:linear-gradient(135deg, rgba(45,212,191,.38) 0%, rgba(96,165,250,.28) 42%, rgba(244,114,182,.28) 100%);
  border-color:rgba(244,114,182,.22);
  color:#f8fbff;
  box-shadow:0 18px 36px rgba(0,0,0,.28), 0 0 28px rgba(96,165,250,.08);
}
.actions button:hover,
.btn:hover,
.primary:hover,
.twm-btn-primary:hover{
  border-color:rgba(253,164,175,.38);
  box-shadow:0 22px 44px rgba(0,0,0,.34), 0 0 32px rgba(244,114,182,.12);
}
.secondary,
.twm-btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}

input, select, textarea, .twm-input{
  background:
    linear-gradient(180deg, rgba(4,10,20,.84), rgba(7,13,24,.74)),
    radial-gradient(260px 80px at 100% 0%, rgba(244,114,182,.06), transparent 65%);
}
input:focus, select:focus, textarea:focus, .twm-input:focus{
  border-color:rgba(244,114,182,.42);
  box-shadow:0 0 0 4px rgba(244,114,182,.10), 0 0 0 1px rgba(125,211,252,.18) inset;
}

.kpis,
.kpiGrid{
  gap:16px;
}
.kpi,
#resultsCard .kpi,
[id*="results"] .kpi,
[id*="Results"] .kpi{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)),
    radial-gradient(280px 120px at 0% 0%, rgba(96,165,250,.16), transparent 70%),
    radial-gradient(240px 120px at 100% 100%, rgba(244,114,182,.12), transparent 70%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 36px rgba(0,0,0,.20);
}
.kpi:nth-child(2n),
#resultsCard .kpi:nth-child(2n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)),
    radial-gradient(280px 120px at 100% 0%, rgba(244,114,182,.16), transparent 70%),
    radial-gradient(240px 120px at 0% 100%, rgba(167,139,250,.12), transparent 70%);
}
.kpi .v,
.v,
.mono,
#resultsCard .v{
  background:linear-gradient(180deg, #ffffff 0%, #ffeaf7 42%, #d8ebff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#resultsCard,
[id$="resultsCard"],
[id*="resultsCard"],
[id*="Results"],
[id*="results"]{
  background:
    linear-gradient(180deg, rgba(7,14,28,.96), rgba(6,12,24,.88)),
    radial-gradient(580px 220px at 0% 0%, rgba(96,165,250,.16), transparent 60%),
    radial-gradient(520px 200px at 100% 100%, rgba(244,114,182,.16), transparent 62%);
  border-color:rgba(244,114,182,.16);
}

#scheduleCard,
#growthTableCard,
.tableCard,
[id*="scheduleCard"],
[id*="Table"],
[id*="table"]{
  background:
    linear-gradient(180deg, rgba(7,14,28,.94), rgba(6,12,24,.86)),
    radial-gradient(560px 180px at 100% 0%, rgba(167,139,250,.16), transparent 60%);
}

.stickyBar,
[id="stickyBar"]{
  background:linear-gradient(180deg, rgba(5,10,20,.78), rgba(5,10,20,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.stickyBar .primary,
#stickyBar .primary{
  background:linear-gradient(135deg, rgba(45,212,191,.34), rgba(96,165,250,.26), rgba(244,114,182,.28));
}

.hero .actions,
.twm-cta{margin-top:18px}
.hero .actions button,
.twm-cta .twm-btn{min-height:50px;padding:12px 20px}

@media (max-width:860px){
  .hero::before,
  .twm-hero::before{border-radius:22px}
  .hero::after,
  .twm-hero::after{width:180px;height:180px;right:2%;top:-10px}
}

/* =============================
   2026 Phase 3 — Visual Dominance Layer
   Final polish: stronger value emphasis, richer gradients,
   more premium result hierarchy, and better perceived conversion quality.
   ============================= */
:root{
  --accent:#34d399;
  --accent2:#60a5fa;
  --accent3:#a78bfa;
  --accent4:#f472b6;
  --accent5:#fbcfe8;
}

body{
  background:
    radial-gradient(1100px 640px at 3% -10%, rgba(125,211,252,.26), transparent 54%),
    radial-gradient(980px 620px at 97% -8%, rgba(244,114,182,.18), transparent 52%),
    radial-gradient(860px 560px at 84% 28%, rgba(167,139,250,.14), transparent 58%),
    radial-gradient(680px 460px at 18% 58%, rgba(52,211,153,.10), transparent 62%),
    linear-gradient(180deg, #0d1830 0%, #081223 34%, #050b17 100%);
}

.twm-header-wrap{
  background:
    linear-gradient(180deg, rgba(7,12,24,.94), rgba(7,12,24,.82)),
    radial-gradient(700px 120px at 20% 0%, rgba(96,165,250,.12), transparent 70%),
    radial-gradient(700px 120px at 80% 0%, rgba(244,114,182,.08), transparent 70%);
}
.twm-brand{
  box-shadow:0 18px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.twm-pill{
  border-color:rgba(255,255,255,.13);
}
.twm-pill.is-active,
.twm-pill[aria-current="page"]{
  background:
    linear-gradient(135deg, rgba(52,211,153,.24), rgba(96,165,250,.18) 42%, rgba(244,114,182,.20) 100%);
  border-color:rgba(190,242,223,.28);
  box-shadow:0 14px 30px rgba(0,0,0,.24), 0 0 24px rgba(96,165,250,.12), 0 0 18px rgba(244,114,182,.10);
}

.twm-hero::before,
.hero::before{
  background:
    radial-gradient(980px 340px at 10% 6%, rgba(125,211,252,.18), transparent 56%),
    radial-gradient(860px 300px at 88% 8%, rgba(244,114,182,.17), transparent 56%),
    radial-gradient(780px 260px at 68% 84%, rgba(167,139,250,.13), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 90px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -18px 40px rgba(96,165,250,.03);
}
.twm-title,
.hero h1,
h1{
  background:linear-gradient(180deg, #ffffff 0%, #ffe9f5 42%, #dcecff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.twm-badge,
.badge,
.pill,
.tag{
  border-color:rgba(244,114,182,.18);
}

.twm-card,
.card,
.twm-panel,
.authority-intro,
.author-byline,
.notice,
.callout,
.banner,
.warnBox{
  box-shadow:0 24px 64px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -24px 40px rgba(96,165,250,.02);
}

/* stronger hierarchy for alternating cards */
.twm-grid > .twm-card:nth-child(odd),
.grid > .card:nth-child(odd){
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(560px 220px at 0% 0%, rgba(96,165,250,.11), transparent 60%),
    radial-gradient(320px 180px at 100% 100%, rgba(52,211,153,.06), transparent 60%);
}
.twm-grid > .twm-card:nth-child(even),
.grid > .card:nth-child(even){
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.82)),
    radial-gradient(560px 220px at 100% 0%, rgba(244,114,182,.12), transparent 60%),
    radial-gradient(320px 180px at 0% 100%, rgba(96,165,250,.07), transparent 60%);
}

/* result-side cards feel more premium without changing structure */
.grid > .card:nth-child(2),
.grid > .card:nth-child(4),
.twm-grid > .twm-card:nth-child(2),
.twm-grid > .twm-card:nth-child(4),
#resultsCard,
.tableCard,
[id$="resultsCard"],
[id*="resultsCard"],
[id*="Results"],
[id*="results"]{
  border-color:rgba(190,242,223,.16);
  background:
    linear-gradient(180deg, rgba(10,18,34,.95), rgba(8,15,28,.88)),
    radial-gradient(540px 220px at 0% 0%, rgba(96,165,250,.13), transparent 58%),
    radial-gradient(520px 220px at 100% 100%, rgba(244,114,182,.14), transparent 58%);
  box-shadow:0 28px 74px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 28px rgba(244,114,182,.08);
}

.kpi,
.kpiCard,
.metric,
.metricCard,
.statCard,
.resultMetric,
.result-card,
.results .card,
.results-grid > div,
[id*="result"] .card,
[id*="results"] .card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    radial-gradient(260px 120px at 0% 0%, rgba(125,211,252,.14), transparent 70%),
    radial-gradient(260px 120px at 100% 100%, rgba(244,114,182,.12), transparent 70%);
  box-shadow:0 18px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}
.kpi::after,
.kpiCard::after,
.metric::after,
.metricCard::after,
.statCard::after,
.resultMetric::after,
.result-card::after{
  content:"";
  position:absolute;
  inset:auto -30px -34px auto;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,114,182,.14), transparent 68%);
  pointer-events:none;
}
.kpi .v,
.v,
.mono,
.metric-value,
.stat-value,
.result-value{
  text-shadow:0 0 20px rgba(255,255,255,.02);
}
.pos,
.good,
.profit,
.gain,
.green{
  color:#86efac;
}
.neg,
.loss,
.red{
  color:#fca5a5;
}

.actions button,
.btn,
.primary,
.secondary,
.smallBtn,
.smallbtn,
.twm-btn{
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.twm-btn-primary,
.actions button,
.primary{
  background:
    linear-gradient(135deg, rgba(52,211,153,.34) 0%, rgba(96,165,250,.24) 44%, rgba(244,114,182,.24) 100%);
  border-color:rgba(190,242,223,.24);
}
.twm-btn-primary:hover,
.actions button:hover,
.primary:hover{
  box-shadow:0 22px 42px rgba(0,0,0,.34), 0 0 34px rgba(96,165,250,.16), 0 0 26px rgba(244,114,182,.10);
}
.twm-btn-ghost,
.secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

input:focus, select:focus, textarea:focus,
.twm-input:focus{
  box-shadow:0 0 0 4px rgba(96,165,250,.14), 0 0 24px rgba(96,165,250,.10), 0 0 0 1px rgba(125,211,252,.18) inset;
}

th{
  background:linear-gradient(180deg, rgba(7,13,24,.98), rgba(11,20,35,.96));
}
tr:hover td{
  background:rgba(255,255,255,.018);
}

.stickyInner{
  background:
    linear-gradient(180deg, rgba(8,15,29,.92), rgba(7,14,26,.86)),
    radial-gradient(420px 120px at 0% 0%, rgba(96,165,250,.16), transparent 70%),
    radial-gradient(320px 120px at 100% 100%, rgba(244,114,182,.12), transparent 70%);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 24px 54px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05), 0 0 26px rgba(96,165,250,.08);
}

@media (max-width:860px){
  .twm-hero,
  .hero{padding:32px 0 10px}
  .twm-hero::before,
  .hero::before{box-shadow:0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)}
}


/* =============================
   2026 Phase 4 — Mobile + Conversion Fix
   Focus: wider desktop layout, better mobile stacking,
   stronger CTA clarity, less cramped calculators.
   ============================= */
html body .twm-container,
html body .wrap,
html body .twm-header,
html body .site-footer .container{
  max-width: 1360px;
}

html body .twm-container,
html body .wrap{
  padding-left: 24px;
  padding-right: 24px;
}

html body .hero,
html body .twm-hero{
  padding-top: 44px;
}

/* Make primary calculator split breathe more on desktop */
@media (min-width: 1100px){
  html body .grid,
  html body .twm-grid{
    gap: 22px;
  }

  html body .grid > .card,
  html body .twm-grid > .twm-card,
  html body .grid > .card:first-child,
  html body .grid > .card:last-child{
    min-width: 0;
  }

  html body .kpi,
  html body .kpiCard,
  html body .metric,
  html body .metricCard,
  html body .statCard,
  html body .resultMetric,
  html body .result-card{
    min-height: 148px;
  }
}

/* Stronger CTA clarity */
html body .actions button,
html body .btn,
html body .primary,
html body .twm-btn,
html body .smallBtn,
html body .smallbtn{
  min-height: 50px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

html body .secondary,
html body .twm-btn-ghost{
  border-color: rgba(255,255,255,.14);
}

/* Make result values feel like the main payoff */
html body .kpi .v,
html body .v,
html body .mono,
html body .metric-value,
html body .stat-value,
html body .result-value{
  font-size: clamp(30px, 4vw, 46px);
  line-height: .98;
}

html body .kpi .s,
html body .small,
html body .note,
html body .hint,
html body .statusLine{
  font-size: 15px;
  line-height: 1.45;
}

/* Real mobile fix: stop side-by-side layouts from breaking */
@media (max-width: 900px){
  html body .grid,
  html body .twm-grid,
  html body .rowGrid,
  html body .linksGrid,
  html body .kpis,
  html body .kpiGrid{
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 16px;
  }

  html body .row,
  html body .row2,
  html body .tableActions,
  html body .toolbar,
  html body .topbar,
  html body .tabs,
  html body .pillrow,
  html body .btnrow,
  html body .btns,
  html body .actions,
  html body .stickyBtns{
    flex-wrap: wrap;
  }

  html body .twm-container,
  html body .wrap{
    max-width: 100%;
    padding: 18px 14px 40px;
  }

  html body .twm-header{
    max-width: 100%;
    padding: 12px 12px;
  }

  html body .hero,
  html body .twm-hero{
    padding-top: 26px;
  }

  html body .hero::before,
  html body .twm-hero::before,
  html body .hero::after,
  html body .twm-hero::after{
    border-radius: 20px;
  }

  html body h1,
  html body .twm-title,
  html body .hero h1{
    font-size: clamp(32px, 9vw, 46px) !important;
    line-height: 1.04;
    margin-bottom: 12px;
  }

  html body h2{
    font-size: clamp(24px, 6.5vw, 34px);
  }

  html body p,
  html body li,
  html body .twm-subtitle,
  html body .sub,
  html body .lead,
  html body p.sub,
  html body .hero p{
    font-size: 16px;
    line-height: 1.6;
  }

  html body .twm-card,
  html body .card,
  html body .twm-panel,
  html body .authority-intro,
  html body .author-byline,
  html body .notice,
  html body .callout,
  html body .banner,
  html body .warnBox,
  html body .tableWrap,
  html body .tablewrap{
    padding: 16px;
    border-radius: 18px;
  }

  /* Force calculator input/result areas into clean vertical flow */
  html body .grid > .card,
  html body .twm-grid > .twm-card,
  html body .grid > div,
  html body .rowGrid > div,
  html body #resultsCard,
  html body [id$="resultsCard"],
  html body [id*="resultsCard"],
  html body [id*="Results"],
  html body [id*="results"]{
    width: 100% !important;
    min-width: 0 !important;
  }

  html body table{
    min-width: 680px;
  }

  html body .stickyBar{
    padding: 0 10px;
    bottom: 10px;
  }

  html body .stickyInner{
    padding: 10px 12px;
    border-radius: 18px;
    flex-wrap: wrap;
    align-items: stretch;
  }

  html body .stickyMini,
  html body .stickyBtns{
    width: 100%;
  }

  html body .stickyBtns a{
    flex: 1 1 calc(50% - 6px);
    min-width: 130px;
  }
}

/* Small phone polish */
@media (max-width: 640px){
  html body .twm-brand{
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
  }

  html body .twm-brand span{
    font-size: 14px;
  }

  html body .twm-nav{
    gap: 8px;
    padding-bottom: 4px;
  }

  html body .twm-pill{
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  html body .twm-badges,
  html body .related{
    gap: 8px;
  }

  html body .twm-badge,
  html body .badge,
  html body .pill,
  html body .tag{
    font-size: 12px;
    padding: 7px 10px;
  }

  html body .actions button,
  html body .btn,
  html body .primary,
  html body .secondary,
  html body .smallBtn,
  html body .smallbtn,
  html body .twm-btn,
  html body .twm-btn-primary,
  html body .twm-btn-ghost{
    min-height: 48px;
    width: 100%;
    justify-content: center;
  }

  html body .actions,
  html body .btnrow,
  html body .btns,
  html body .twm-cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html body input,
  html body select,
  html body textarea,
  html body .twm-input{
    min-height: 48px;
    font-size: 16px;
  }

  html body .kpi,
  html body .kpiCard,
  html body .metric,
  html body .metricCard,
  html body .statCard,
  html body .resultMetric,
  html body .result-card,
  html body .results .card,
  html body .results-grid > div,
  html body [id*="result"] .card,
  html body [id*="results"] .card{
    min-height: 126px;
    padding: 15px 14px;
  }

  html body .kpi .v,
  html body .v,
  html body .mono,
  html body .metric-value,
  html body .stat-value,
  html body .result-value{
    font-size: clamp(28px, 8vw, 38px);
  }

  html body .site-footer,
  html body .footer{
    padding-bottom: 26px;
  }
}

/* Very small screens */
@media (max-width: 420px){
  html body .twm-container,
  html body .wrap{
    padding-left: 12px;
    padding-right: 12px;
  }

  html body h1,
  html body .twm-title,
  html body .hero h1{
    font-size: clamp(28px, 10vw, 38px) !important;
  }

  html body .twm-card,
  html body .card,
  html body .twm-panel,
  html body .authority-intro,
  html body .author-byline,
  html body .notice,
  html body .callout,
  html body .banner,
  html body .warnBox,
  html body .tableWrap,
  html body .tablewrap{
    padding: 14px;
    border-radius: 16px;
  }
}


/* =========================================================
   Elite mobile header/menu override (v8/v9)
   ========================================================= */
.twm-home-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.twm-home-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}
.twm-home-cta-primary{
  color:#071019;
  background:linear-gradient(135deg,#8df7d1 0%,#58c694 100%);
}
.twm-home-cta-secondary{
  color:#f8fbff;
  background:linear-gradient(135deg,rgba(53,224,194,.18),rgba(255,92,168,.16));
}

.twm-mobile-toggle,
.twm-mobile-panel{ display:none; }

@media (max-width: 860px){
  html body.twm-mobile-nav-open{
    overflow:hidden;
  }
  html body .twm-header-wrap{
    top:0;
    padding:14px 14px 10px;
    background:linear-gradient(180deg,rgba(4,9,20,.96),rgba(4,9,20,.84));
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  html body .twm-header{
    max-width:none;
    display:block;
    padding:0;
  }
  html body .twm-header-wrap.is-mobile-open{
    max-height:100dvh;
    overflow:hidden;
  }
  html body .twm-header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(180deg,rgba(9,16,31,.96),rgba(7,13,27,.92));
    box-shadow:0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  }
  html body .twm-brand{
    display:flex !important;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
  }
  html body .twm-brand img,
  html body .twm-brand .twm-logo{
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.03);
    box-shadow:0 10px 30px rgba(0,0,0,.24);
  }
  html body .twm-brand span{
    font-size:16px;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  html body .twm-nav-desktop{
    display:none !important;
  }
  html body .twm-mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:54px;
    width:54px;
    height:54px;
    padding:0;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.03);
    color:#eef5ff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  html body .twm-mobile-toggle-icon{
    position:relative;
    width:20px;
    height:14px;
    display:inline-block;
  }
  html body .twm-mobile-toggle-icon span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:#eef5ff;
    transition:transform .22s ease, opacity .18s ease, top .22s ease;
  }
  html body .twm-mobile-toggle-icon span:nth-child(1){ top:0; }
  html body .twm-mobile-toggle-icon span:nth-child(2){ top:6px; }
  html body .twm-mobile-toggle-icon span:nth-child(3){ top:12px; }
  html body .twm-header-wrap.is-mobile-open .twm-mobile-toggle-icon span:nth-child(1){ top:6px; transform:rotate(45deg); }
  html body .twm-header-wrap.is-mobile-open .twm-mobile-toggle-icon span:nth-child(2){ opacity:0; }
  html body .twm-header-wrap.is-mobile-open .twm-mobile-toggle-icon span:nth-child(3){ top:6px; transform:rotate(-45deg); }
  html body .twm-mobile-panel{
    display:block;
    margin-top:12px;
    padding:16px;
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    border-radius:26px;
    border:1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(320px 180px at 26% 22%, rgba(76,214,167,.14), transparent 60%),
      radial-gradient(280px 180px at 76% 18%, rgba(124,92,255,.14), transparent 58%),
      linear-gradient(180deg, rgba(15,22,37,.97), rgba(7,12,24,.96));
    box-shadow:0 24px 80px rgba(0,0,0,.45);
    max-height:calc(100dvh - 112px - env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body .twm-mobile-panel::-webkit-scrollbar{ display:none; }
  html body .twm-mobile-panel[hidden]{ display:none !important; }
  html body .twm-mobile-nav{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  html body .twm-mobile-nav .twm-pill{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:56px;
    padding:0 18px;
    border-radius:18px;
    font-size:18px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    box-shadow:none;
  }
  html body .twm-mobile-nav .twm-pill:hover,
  html body .twm-mobile-nav .twm-pill.is-active,
  html body .twm-mobile-nav .twm-pill[aria-current="page"]{
    transform:none;
    color:#fff;
    border-color:rgba(255,255,255,.12);
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  }

  html body .twm-container,
  html body .wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  html body .twm-home-cta-row{ grid-template-columns:1fr; }
  html body .twm-home-cta{ width:100%; }
}

/* =========================
   Enhancements: Micro‑animations & Accessibility
   These styles add subtle interactions to buttons and cards, provide clear focus
   outlines for keyboard navigation, and respect users who prefer reduced motion.
   ========================= */

/* Micro‑animations for buttons and cards */
.twm-btn,
button,
.twm-card,
.card {
  /* Smooth transitions across multiple properties */
  transition-property: transform, box-shadow, border-color, background;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover interactions */
.twm-btn:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
}
.twm-card:hover,
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 48px rgba(0,0,0,.32);
  border-color: rgba(20,182,104,.28);
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.twm-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}



/* =============================
   2026 Header balance fix
   Uses icon + text lockup in header while keeping logo assets for search/share
   ============================= */
html body .twm-header{
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

html body .twm-header-top{
  display: contents;
}

html body .twm-brand{
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: 260px;
  padding: 8px 14px 8px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    radial-gradient(120px 60px at 0% 0%, rgba(99,184,255,.10), transparent 72%);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  text-decoration: none;
}

html body .twm-brand .twm-logo-mark{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
  display: block;
  transform: translateY(-1px);
}

html body .twm-brand-text{
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
  line-height: 1;
}

html body .twm-brand-true{
  color: #f8fafc;
}

html body .twm-brand-wealth{
  color: #38bdf8;
}

html body .twm-brand-metrics{
  color: #86efac;
}

html body .twm-nav{
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-bottom: 0;
}

html body .twm-nav::-webkit-scrollbar{
  display: none;
}

html body .twm-pill{
  white-space: nowrap;
  flex: 0 0 auto;
}

html body .twm-mobile-toggle{
  display: none !important;
}

@media (max-width: 860px){
  html body .twm-header{
    flex-wrap: wrap;
    gap: 12px;
  }

  html body .twm-header-top{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  html body .twm-brand{
    max-width: none;
    flex: 1 1 auto;
    padding: 8px 12px 8px 10px;
  }

  html body .twm-brand .twm-logo-mark{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
  }

  html body .twm-brand-text{
    font-size: 14px;
  }

  html body .twm-nav-desktop{
    display: none !important;
  }

  html body .twm-mobile-toggle{
    display: inline-flex !important;
  }
}