/* =========================
   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;
  }
}


/* =============================
   Homepage conversion redesign
   Targeted to / only; preserves calculator page logic.
   ============================= */
.twm-home-main{padding-top:28px;}
.twm-home-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:24px;
  align-items:stretch;
  padding:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(96,165,250,.18), transparent 58%),
    radial-gradient(820px 420px at 86% 12%, rgba(74,222,128,.14), transparent 58%),
    linear-gradient(135deg, rgba(15,23,42,.86), rgba(8,16,30,.74));
  box-shadow:0 34px 90px rgba(0,0,0,.38);
}
.twm-home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.07), transparent 28%, transparent 70%, rgba(255,255,255,.035));
}
.twm-home-hero-copy,.twm-hero-panel{position:relative;z-index:1;}
.twm-eyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:0 0 12px;
  padding:7px 11px;
  border:1px solid rgba(96,165,250,.28);
  border-radius:999px;
  color:#bfdbfe;
  background:rgba(96,165,250,.08);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
.twm-home-hero h1{
  max-width:860px;
  margin:0 0 18px;
  font-size:clamp(42px,6vw,78px);
  line-height:.96;
  letter-spacing:-.055em;
  color:#f8fbff;
  background:none;
  -webkit-text-fill-color:initial;
}
.twm-home-lede{
  max-width:760px;
  color:rgba(226,232,240,.88);
  font-size:clamp(17px,2vw,21px);
  line-height:1.62;
  margin:0 0 20px;
}
.twm-trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.twm-trust-strip span{
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(248,250,252,.88);
  font-size:13px;
  font-weight:700;
}
.twm-hero-panel{
  padding:22px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.24);
}
.twm-panel-label{
  margin-bottom:14px;
  color:#bbf7d0;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.twm-mini-steps{list-style:none;display:grid;gap:14px;margin:0 0 18px;padding:0;}
.twm-mini-steps li{
  display:grid;
  gap:3px;
  padding:13px;
  border-radius:18px;
  background:rgba(2,6,23,.28);
  border:1px solid rgba(255,255,255,.08);
}
.twm-mini-steps strong{font-size:15px;color:#fff;}
.twm-mini-steps span{font-size:13px;color:rgba(226,232,240,.78);}
.twm-panel-link,.twm-tool-card a,.twm-guide-card a{color:#93c5fd;font-weight:800;text-decoration:none;}
.twm-panel-link:hover,.twm-tool-card a:hover,.twm-guide-card a:hover{text-decoration:underline;text-underline-offset:3px;}
.twm-section{margin-top:42px;}
.twm-section-head{max-width:780px;margin-bottom:18px;}
.twm-section-head h2,.twm-split-section h2,.twm-final-cta h2{
  margin:0 0 10px;
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.035em;
  color:#f8fafc;
}
.twm-tool-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.twm-tool-card,.twm-guide-card,.twm-comparison-card{
  position:relative;
  padding:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(15,23,42,.80), rgba(8,16,30,.66));
  box-shadow:0 22px 60px rgba(0,0,0,.26);
}
.twm-tool-card-featured{
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(74,222,128,.14), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,16,30,.68));
  border-color:rgba(74,222,128,.26);
}
.twm-tool-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-bottom:16px;
  border-radius:14px;
  color:#bbf7d0;
  font-size:13px;
  font-weight:900;
  background:rgba(74,222,128,.10);
  border:1px solid rgba(74,222,128,.22);
}
.twm-tool-card h3,.twm-guide-card h3,.twm-comparison-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em;color:#fff;}
.twm-tool-card p,.twm-guide-card p{margin:0 0 16px;color:rgba(226,232,240,.80);}
.twm-split-section{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:20px;
  align-items:start;
  padding:26px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}
.twm-proof-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.twm-proof-grid div{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.twm-proof-grid strong,.twm-proof-grid span{display:block;}
.twm-proof-grid strong{color:#fff;margin-bottom:4px;}
.twm-proof-grid span{color:rgba(226,232,240,.78);font-size:14px;}
.twm-journey{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.twm-journey a{
  display:grid;
  gap:5px;
  min-height:132px;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}
.twm-journey span{
  width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.24);color:#bfdbfe;font-weight:900;
}
.twm-journey strong{font-size:18px;color:#fff;}
.twm-journey small{color:rgba(226,232,240,.76);font-size:13px;}
.twm-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.twm-faq-section .twm-card{max-width:900px;margin:0 auto;}
.twm-final-cta{
  text-align:center;
  padding:32px;
  border-radius:30px;
  background:
    radial-gradient(620px 280px at 50% 0%, rgba(74,222,128,.14), transparent 65%),
    linear-gradient(180deg, rgba(15,23,42,.86), rgba(8,16,30,.74));
  border:1px solid rgba(255,255,255,.09);
}
.twm-final-cta .twm-eyebrow{margin-left:auto;margin-right:auto;}
.twm-final-cta p{max-width:720px;margin:0 auto 18px;color:rgba(226,232,240,.82);}
.twm-final-cta .twm-home-cta-row{justify-content:center;}
@media (max-width:980px){
  .twm-home-hero,.twm-split-section{grid-template-columns:1fr;padding:24px;}
  .twm-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .twm-journey,.twm-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .twm-home-main{padding-left:14px;padding-right:14px;}
  .twm-home-hero{padding:22px;border-radius:24px;}
  .twm-home-hero h1{font-size:clamp(36px,12vw,50px);}
  .twm-tool-grid,.twm-journey,.twm-guide-grid,.twm-proof-grid{grid-template-columns:1fr;}
  .twm-home-cta-row{grid-template-columns:1fr;}
  .twm-home-cta{width:100%;}
}


/* =========================================================
   Homepage Premium Finance Product Redesign — 2026-05-19
   Targeted homepage overrides only. Calculator logic untouched.
   ========================================================= */
.twm-premium-home{max-width:1240px;padding-top:26px;}
.twm-premium-home .twm-section{margin-top:64px;}
.twm-premium-home .twm-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;color:#93c5fd;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.twm-premium-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:28px;align-items:center;min-height:620px;padding:56px;border:1px solid rgba(255,255,255,.12);border-radius:34px;background:radial-gradient(900px 440px at 12% 10%,rgba(96,165,250,.20),transparent 58%),radial-gradient(740px 420px at 90% 12%,rgba(74,222,128,.16),transparent 58%),linear-gradient(135deg,rgba(15,23,42,.92),rgba(2,6,23,.76));box-shadow:0 34px 90px rgba(0,0,0,.42);overflow:hidden;position:relative;}
.twm-premium-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 34%),radial-gradient(420px 120px at 72% 20%,rgba(255,255,255,.10),transparent 68%);pointer-events:none;}
.twm-premium-hero .twm-home-hero-copy,.twm-premium-hero .twm-hero-panel{position:relative;z-index:1;}
.twm-premium-hero h1{max-width:820px;margin:0 0 22px;font-size:clamp(46px,6vw,78px);line-height:.98;letter-spacing:-.06em;color:#f8fbff;}
.twm-premium-hero h1:after{content:"";display:block;width:118px;height:4px;margin-top:24px;border-radius:999px;background:linear-gradient(90deg,#4ade80,#60a5fa,#a78bfa);}
.twm-home-lede{max-width:780px;color:rgba(226,232,240,.88);font-size:clamp(17px,1.5vw,20px);line-height:1.72;}
.twm-home-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.twm-home-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:16px;font-weight:900;letter-spacing:-.01em;border:1px solid rgba(255,255,255,.12);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.twm-home-cta:hover{transform:translateY(-2px);}
.twm-home-cta-primary{background:linear-gradient(135deg,#6ee7b7,#60a5fa);color:#03111d;border-color:rgba(255,255,255,.22);box-shadow:0 18px 40px rgba(96,165,250,.24);}
.twm-home-cta-secondary{background:rgba(255,255,255,.06);color:#f8fafc;border-color:rgba(255,255,255,.16);box-shadow:0 16px 34px rgba(0,0,0,.22);}
.twm-trust-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;color:rgba(226,232,240,.86);}
.twm-trust-strip span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.045);font-size:13px;font-weight:750;}
.twm-trust-strip span:before{content:"✓";color:#86efac;font-weight:900;}
.twm-calculator-preview{padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(15,23,42,.90),rgba(8,13,26,.84));border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 70px rgba(0,0,0,.42);}
.twm-panel-topline{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;color:rgba(226,232,240,.74);font-size:13px;}
.twm-panel-topline strong{color:#f8fafc;font-size:15px;}
.twm-preview-screen{padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(96,165,250,.12),rgba(74,222,128,.07));border:1px solid rgba(255,255,255,.10);}
.twm-preview-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09);color:rgba(226,232,240,.82);}
.twm-preview-row:last-of-type{border-bottom:0;}
.twm-preview-row strong{font-size:22px;color:#fff;letter-spacing:-.03em;}
.twm-preview-bar{height:12px;margin-top:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.twm-preview-bar i{display:block;width:68%;height:100%;border-radius:999px;background:linear-gradient(90deg,#4ade80,#60a5fa);box-shadow:0 0 22px rgba(96,165,250,.35);}
.twm-mini-steps{display:grid;gap:12px;margin:18px 0 0;list-style:none;padding:0;}
.twm-mini-steps li{display:grid;gap:2px;padding:12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
.twm-mini-steps strong{color:#fff;font-size:14px;}
.twm-mini-steps span{color:rgba(226,232,240,.72);font-size:13px;}
.twm-panel-link{display:inline-flex;margin-top:16px;color:#93c5fd;font-weight:850;}
.twm-decision-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.twm-decision-strip a{display:grid;gap:4px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 34px rgba(0,0,0,.20);}
.twm-decision-strip a:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.32);}
.twm-decision-strip span{color:#86efac;font-size:12px;font-weight:900;}
.twm-decision-strip strong{font-size:18px;color:#fff;}
.twm-decision-strip small{color:rgba(226,232,240,.70);}
.twm-centered-head{text-align:center;max-width:850px;margin:0 auto 28px;}
.twm-centered-head h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.04em;}
.twm-premium-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.twm-tool-card{display:flex;flex-direction:column;min-height:340px;padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(8,13,26,.78));border:1px solid rgba(255,255,255,.11);box-shadow:0 22px 54px rgba(0,0,0,.27);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.twm-tool-card:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.30);box-shadow:0 30px 70px rgba(0,0,0,.34);}
.twm-tool-card-featured{grid-column:span 1;background:radial-gradient(500px 220px at 18% 0%,rgba(74,222,128,.16),transparent 62%),linear-gradient(180deg,rgba(15,23,42,.92),rgba(8,13,26,.80));border-color:rgba(74,222,128,.28);}
.twm-tool-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.twm-tool-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:24px;}
.twm-card-badge{padding:6px 10px;border-radius:999px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.20);color:#bfdbfe;font-size:12px;font-weight:900;}
.twm-tool-card h3{font-size:24px;line-height:1.12;letter-spacing:-.03em;color:#fff;}
.twm-tool-card p{color:rgba(226,232,240,.76);margin-top:4px;}
.twm-tool-card ul{display:grid;gap:7px;margin:16px 0 18px;padding:0;list-style:none;color:rgba(226,232,240,.78);font-size:14px;}
.twm-tool-card li:before{content:"•";color:#86efac;margin-right:8px;}
.twm-tool-card a{margin-top:auto;color:#dbeafe;font-weight:900;}
.twm-authority-section{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:24px;align-items:stretch;padding:30px;border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.10);}
.twm-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;}
.twm-proof-grid div{padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);}
.twm-proof-grid strong{display:block;color:#fff;margin-bottom:6px;}
.twm-proof-grid span{color:rgba(226,232,240,.72);font-size:14px;line-height:1.55;}
.twm-score-card{padding:24px;border-radius:28px;background:radial-gradient(420px 200px at 100% 0%,rgba(167,139,250,.14),transparent 60%),linear-gradient(180deg,rgba(15,23,42,.9),rgba(8,13,26,.82));border:1px solid rgba(255,255,255,.11);box-shadow:0 24px 60px rgba(0,0,0,.30);}
.twm-score-card h3{font-size:30px;line-height:1.12;}
.twm-score-card p{color:rgba(226,232,240,.75);}
.twm-premium-journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.twm-premium-journey a{display:grid;gap:6px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.10);min-height:142px;}
.twm-premium-journey span{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.22);color:#bbf7d0;font-weight:900;}
.twm-premium-journey strong{font-size:20px;color:#fff;}
.twm-premium-journey small{color:rgba(226,232,240,.72);}
.twm-premium-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.twm-guide-card{padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(8,13,26,.72));border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 42px rgba(0,0,0,.23);}
.twm-guide-card>span{display:inline-flex;margin-bottom:12px;color:#93c5fd;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.twm-guide-card h3{font-size:22px;line-height:1.16;}
.twm-guide-card p{color:rgba(226,232,240,.72);}
.twm-guide-card a{display:inline-flex;margin-top:14px;color:#dbeafe;font-weight:900;}
.twm-premium-faq{padding:30px;border-radius:30px;}
.twm-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;}
.twm-faq-grid>div{padding:18px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
.twm-premium-final{text-align:center;padding:46px;border-radius:34px;background:radial-gradient(640px 280px at 50% 0%,rgba(96,165,250,.18),transparent 65%),linear-gradient(180deg,rgba(15,23,42,.88),rgba(8,13,26,.78));border:1px solid rgba(255,255,255,.11);box-shadow:0 26px 66px rgba(0,0,0,.32);}
.twm-premium-final h2{max-width:850px;margin:0 auto 14px;font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.045em;}
.twm-premium-final p{max-width:760px;margin:0 auto;color:rgba(226,232,240,.78);}
.twm-premium-final .twm-home-cta-row{justify-content:center;}

.twm-methodology-band{display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);gap:22px;align-items:stretch;padding:30px;border-radius:30px;background:linear-gradient(135deg,rgba(15,23,42,.82),rgba(8,13,26,.70));border:1px solid rgba(255,255,255,.11);box-shadow:0 22px 58px rgba(0,0,0,.28);}
.twm-methodology-copy h2{margin:0 0 14px;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.04em;}
.twm-methodology-list{display:grid;gap:12px;}
.twm-methodology-list a{display:grid;gap:6px;padding:18px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);text-decoration:none;}
.twm-methodology-list a:hover{transform:translateY(-1px);border-color:rgba(147,197,253,.34);}
.twm-methodology-list strong{color:#fff;font-size:18px;}
.twm-methodology-list span{color:rgba(226,232,240,.74);line-height:1.55;}
@media (max-width: 1020px){.twm-methodology-band{grid-template-columns:1fr;}}
@media (max-width: 680px){.twm-methodology-band{padding:22px;border-radius:26px;}.twm-methodology-copy h2{font-size:clamp(28px,9vw,40px);}}
.twm-premium-footer{border-radius:28px 28px 0 0;background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(8,13,26,.92));}
@media (max-width: 1020px){.twm-premium-hero,.twm-authority-section{grid-template-columns:1fr;}.twm-premium-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.twm-premium-guide-grid,.twm-decision-strip{grid-template-columns:repeat(2,minmax(0,1fr));}.twm-premium-journey{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width: 680px){.twm-premium-home{padding-left:14px;padding-right:14px;}.twm-premium-home .twm-section{margin-top:42px;}.twm-premium-hero{min-height:auto;padding:26px;border-radius:26px;}.twm-premium-hero h1{font-size:clamp(38px,12vw,54px);}.twm-home-cta-row{display:grid;grid-template-columns:1fr;}.twm-home-cta{width:100%;}.twm-decision-strip,.twm-premium-tool-grid,.twm-proof-grid,.twm-premium-journey,.twm-premium-guide-grid,.twm-faq-grid{grid-template-columns:1fr;}.twm-tool-card{min-height:auto;padding:20px;}.twm-authority-section,.twm-premium-final{padding:22px;border-radius:26px;}.twm-centered-head{text-align:left;}.twm-trust-strip span{width:100%;}.twm-calculator-preview{padding:18px;}.twm-preview-row strong{font-size:18px;}}
@media (prefers-reduced-motion: reduce){.twm-home-cta,.twm-tool-card,.twm-decision-strip a{transition:none}.twm-home-cta:hover,.twm-tool-card:hover,.twm-decision-strip a:hover{transform:none}}

/* =============================
   Site-wide premium platform unification pass
   Purpose: align older calculators, hubs, guide cards, FAQs and trust blocks
   with the improved homepage without changing SEO structure or calculator logic.
   ============================= */
:root{
  --twm-section-gap: clamp(34px, 6vw, 78px);
  --twm-card-pad: clamp(18px, 2.5vw, 28px);
  --twm-copy-max: 78ch;
}

.wrap,
.twm-container,
.hub-shell{
  width:min(1240px, calc(100% - 32px));
  margin-inline:auto;
}

section,
.section{
  margin-top: var(--twm-section-gap);
}

.hero,
.twm-hero,
.hub-hero{
  margin-top: 24px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
}

.hero > .wrap,
.twm-hero > .wrap{
  width:100%;
}

.hero-grid,
.two-col{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(20px,4vw,42px);
  align-items:start;
}

.calc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.hero-points,
.summary-grid,
.links,
.hub-grid,
.hub-card-grid,
.hub-popular-grid,
.hub-stats,
.results{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.hub-grid,
.hub-card-grid,
.hub-popular-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.point,
.stat,
.info-card,
.faq-item,
.hub-panel,
.hub-card,
.hub-faq-item,
.hub-cta,
.hub-popular-card,
.hub-stat,
.links a,
.summary-grid .card,
.related-box,
.method-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:var(--twm-card-pad);
  background:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.84)),
    radial-gradient(460px 170px at 0% 0%, rgba(96,165,250,.11), transparent 62%),
    radial-gradient(360px 150px at 100% 100%, rgba(244,114,182,.08), transparent 66%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.point::before,
.stat::before,
.info-card::before,
.faq-item::before,
.hub-panel::before,
.hub-card::before,
.hub-faq-item::before,
.hub-popular-card::before,
.links a::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none;
}

.point:hover,
.info-card:hover,
.faq-item:hover,
.hub-card:hover,
.hub-popular-card:hover,
.links a:hover,
.summary-grid .card:hover{
  transform:translateY(-3px);
  border-color:rgba(125,211,252,.28);
  box-shadow:0 30px 72px rgba(0,0,0,.36), 0 0 28px rgba(244,114,182,.08);
}

.point strong,
.info-card h2,
.info-card h3,
.faq-item h3,
.hub-card h2,
.hub-card h3,
.links a,
.stat .value{
  color:#f8fbff;
}

.point span,
.info-card p,
.info-card li,
.faq-item p,
.links a span,
.section-intro,
.disclaimer,
.field small,
.stat .sub,
.stat .label{
  color:rgba(226,232,240,.78);
}

.eyebrow,
.hub-kicker,
.breadcrumb,
.author-byline__title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.25);
  background:linear-gradient(180deg, rgba(96,165,250,.12), rgba(96,165,250,.04));
  color:#dff6ff;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.field{display:flex;flex-direction:column;gap:7px}
.field label{margin:0;color:#f8fbff;font-weight:800}

button,
button.primary,
button.secondary{
  font-family:inherit;
}

.chart-wrap{
  min-height:260px;
  margin-top:18px;
  padding:12px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
canvas{max-width:100%}

.mini-table,
.budget-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:14px;
}

.mini-table th,
.mini-table td,
.budget-table th,
.budget-table td{
  padding:12px 11px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}

.mini-table tr:last-child td,
.budget-table tr:last-child td{border-bottom:0}

.faq,
.hub-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.related,
.hub-actions,
.actions,
.btnrow,
.btns{
  gap:12px;
}

.related a,
.hub-btn,
.btn,
.primary,
.secondary,
.smallBtn,
.smallbtn,
.twm-btn{
  min-height:46px;
  border-radius:16px;
  padding:11px 18px;
}

.site-footer,
footer{
  margin-top:var(--twm-section-gap);
  padding:34px 0 54px;
}

.site-footer .wrap,
footer .wrap,
.site-footer .container{
  width:min(1240px, calc(100% - 32px));
  margin-inline:auto;
}

.footer-links{
  margin-top:14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

@media(max-width:980px){
  .hero-grid,.two-col{grid-template-columns:1fr}
  .hero-points,.summary-grid,.links,.hub-grid,.hub-card-grid,.hub-popular-grid,.results,.faq,.hub-faq-grid{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .wrap,.twm-container,.hub-shell{width:min(100% - 24px, 1240px)}
  .hero,.twm-hero,.hub-hero{padding:22px;border-radius:22px}
  section,.section{margin-top:42px}
  .actions,.btnrow,.btns,.hub-actions{flex-direction:column;align-items:stretch}
  .actions button,.btn,.primary,.secondary,.smallBtn,.smallbtn,.twm-btn,.hub-btn{width:100%}
  .site-footer .footer-links, .footer-links{gap:10px;flex-direction:column}
}

/* =========================================================
   Premium desktop navigation refinement
   Keeps all existing links, but groups primary pages and tools
   into a cleaner, balanced fintech-style navigation system.
   ========================================================= */
@media (min-width: 861px){
  html body .twm-header-wrap{
    padding-inline: clamp(14px, 2vw, 24px);
    background:
      linear-gradient(180deg, rgba(8,13,27,.94), rgba(9,15,30,.86));
    border-bottom: 1px solid rgba(255,255,255,.065);
  }

  html body .twm-header{
    width: min(1720px, 100%);
    max-width: 1720px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.6vw, 26px);
    padding: 14px 0;
  }

  html body .twm-header-top{
    flex: 0 0 auto;
    min-width: 0;
  }

  html body .twm-brand{
    min-width: 0;
    width: auto;
    min-height: 58px;
    padding: 8px 18px 8px 10px;
    border-radius: 21px;
    border: 1px solid rgba(255,255,255,.11);
    background:
      linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.024));
    box-shadow:
      0 14px 34px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.045);
  }

  html body .twm-brand .twm-logo,
  html body .twm-brand img{
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  html body .twm-brand-text{
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  html body .twm-nav-desktop{
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    overflow: hidden;
    flex-wrap: nowrap;
    padding: 0;
  }

  html body .twm-nav-group{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.075);
    background:
      linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.014));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 10px 26px rgba(0,0,0,.12);
  }

  html body .twm-nav-main{
    flex: 0 0 auto;
  }

  html body .twm-nav-tools{
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

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

  html body .twm-pill{
    height: 36px;
    min-height: 36px;
    min-width: 58px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    border-radius: 999px;
    font-size: 12.75px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.01em;
    border: 1px solid rgba(255,255,255,.095);
    color: rgba(246,250,255,.90);
    background:
      linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.017));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transform: none;
    transition:
      background .16s ease,
      border-color .16s ease,
      color .16s ease,
      box-shadow .16s ease,
      transform .16s ease;
  }

  html body .twm-nav-main .twm-pill{
    min-width: 70px;
  }

  html body .twm-pill:hover{
    transform: translateY(-1px);
    color: #ffffff;
    border-color: rgba(125,211,252,.28);
    background:
      linear-gradient(180deg, rgba(125,211,252,.105), rgba(255,255,255,.034));
    box-shadow:
      0 10px 22px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  html body .twm-pill.is-active,
  html body .twm-pill[aria-current="page"]{
    color: #f8fffb;
    border-color: rgba(94,234,212,.42);
    background:
      linear-gradient(135deg, rgba(45,212,191,.24), rgba(96,165,250,.16) 55%, rgba(244,114,182,.12));
    box-shadow:
      0 10px 24px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.085);
  }
}

@media (min-width: 861px) and (max-width: 1440px){
  html body .twm-header{
    gap: 14px;
  }

  html body .twm-brand{
    padding-right: 13px;
  }

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

  html body .twm-nav-desktop{
    gap: 10px;
  }

  html body .twm-nav-group{
    gap: 5px;
    padding: 4px;
  }

  html body .twm-pill{
    height: 34px;
    min-height: 34px;
    min-width: 54px;
    padding-inline: 11px;
    font-size: 12.25px;
  }

  html body .twm-nav-main .twm-pill{
    min-width: 64px;
  }
}

@media (max-width: 860px){
  html body .twm-mobile-nav{
    gap: 10px;
  }

  html body .twm-mobile-nav .twm-pill{
    min-height: 54px;
    border-radius: 17px;
    font-size: 17px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.046), rgba(255,255,255,.022));
  }

  html body .twm-mobile-nav .twm-pill.is-active,
  html body .twm-mobile-nav .twm-pill[aria-current="page"]{
    border-color: rgba(94,234,212,.34);
    background:
      linear-gradient(135deg, rgba(45,212,191,.18), rgba(96,165,250,.12) 55%, rgba(244,114,182,.10));
  }
}


/* =========================================================
   Site-wide Design System Cohesion Pass — May 2026
   Purpose: align calculators, hubs, guides, trust pages, header, footer,
   cards, CTAs and mobile layouts with the premium homepage without touching
   SEO copy, schemas, URLs or calculator logic.
   ========================================================= */
:root{
  --twm-page-max: 1320px;
  --twm-card-radius: 24px;
  --twm-card-pad: clamp(18px, 2vw, 26px);
  --twm-section-gap: clamp(18px, 2.2vw, 30px);
  --twm-glass-bg:
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(6,12,24,.86)),
    radial-gradient(520px 180px at 0% 0%, rgba(96,165,250,.11), transparent 62%),
    radial-gradient(420px 160px at 100% 100%, rgba(244,114,182,.085), transparent 66%);
  --twm-glass-border: rgba(255,255,255,.115);
  --twm-soft-shadow: 0 24px 62px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.055);
  --twm-hover-shadow: 0 30px 76px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 28px rgba(125,211,252,.09);
}

html body .wrap,
html body .twm-container,
html body .hub-shell,
html body .site-footer .container,
html body .footer-inner{
  max-width: var(--twm-page-max);
}

html body .section,
html body .hub-section{
  margin-top: var(--twm-section-gap);
}

/* Header: balanced groups, consistent nav pill rhythm, less crowded desktop */
html body .twm-header-wrap{
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

html body .twm-header{
  min-height: 78px;
}

html body .twm-nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

html body .twm-nav-group{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.026);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

html body .twm-nav-main{
  flex: 0 0 auto;
}

html body .twm-nav-tools{
  flex: 1 1 auto;
  justify-content: flex-start;
  overflow-x: auto;
  max-width: 780px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, black calc(100% - 34px), transparent);
}
html body .twm-nav-tools::-webkit-scrollbar{ display:none; }

html body .twm-pill{
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  font-size: 13px;
  letter-spacing: -.005em;
  box-shadow: none;
}

html body .twm-nav-main .twm-pill{
  font-weight: 850;
}

html body .twm-pill:hover{
  transform: translateY(-1px);
}

html body .twm-pill.is-active,
html body .twm-pill[aria-current="page"]{
  color: #ffffff;
  border-color: rgba(190,242,223,.36) !important;
}

/* Cards/panels: one premium card system across calculators, guides and trust pages */
html body .card,
html body .twm-card,
html body .twm-panel,
html body .author-byline,
html body .authority-intro,
html body .notice,
html body .callout,
html body .banner,
html body .warnBox,
html body .hub-panel,
html body .hub-card,
html body .hub-cta,
html body .hub-popular-card,
html body .hub-faq-item,
html body .hub-stat,
html body section[style*="rgba(6,13,28"]{
  border-radius: var(--twm-card-radius) !important;
  padding: var(--twm-card-pad);
  background: var(--twm-glass-bg) !important;
  border: 1px solid var(--twm-glass-border) !important;
  box-shadow: var(--twm-soft-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

html body .card,
html body .twm-card,
html body .hub-card,
html body .hub-cta,
html body .hub-popular-card,
html body .hub-tool,
html body .related a,
html body .hub-mini-links a{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

html body .card:hover,
html body .twm-card:hover,
html body .hub-card:hover,
html body .hub-cta:hover,
html body .hub-popular-card:hover,
html body .hub-tool:hover{
  transform: translateY(-2px);
  border-color: rgba(125,211,252,.26) !important;
  box-shadow: var(--twm-hover-shadow) !important;
}

/* Hub page: remove old flat feel and align with homepage/calculators */
html body .hub-shell{
  width: min(var(--twm-page-max), calc(100% - 48px));
  padding-top: 28px;
}

html body .hub-hero{
  border-radius: 32px !important;
  padding: clamp(24px, 3vw, 38px) !important;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(96,165,250,.20), transparent 58%),
    radial-gradient(760px 380px at 90% 10%, rgba(244,114,182,.16), transparent 58%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(8,16,30,.76)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html body .hub-hero h1{
  font-size: clamp(40px, 5.5vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

html body .hub-lead{
  font-size: clamp(17px, 1.65vw, 21px) !important;
  line-height: 1.62 !important;
  color: rgba(232,238,248,.86) !important;
}

html body .hub-kicker,
html body .twm-eyebrow{
  border-color: rgba(125,211,252,.28) !important;
  background: rgba(125,211,252,.08) !important;
  color: #dff7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html body .hub-btn,
html body .hub-tool b{
  min-height: 48px;
  border-radius: 16px;
  font-weight: 850;
}
html body .hub-btn-primary{
  color: #06111d !important;
  background: linear-gradient(135deg, #8df7d1 0%, #7dd3fc 52%, #f0abfc 100%) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.26);
}
html body .hub-btn-secondary{
  color: #f8fbff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
}

html body .hub-tool,
html body .related a,
html body .hub-mini-links a{
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.024)),
    radial-gradient(240px 80px at 0% 0%, rgba(125,211,252,.08), transparent 70%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html body .hub-tool:hover,
html body .related a:hover,
html body .hub-mini-links a:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    radial-gradient(260px 90px at 100% 0%, rgba(244,114,182,.10), transparent 70%) !important;
}

/* Calculator forms/results: consistent premium input and output hierarchy */
html body form,
html body .form{
  display: grid;
  gap: 10px;
}

html body label{
  margin: 0 0 6px;
  color: rgba(248,250,252,.90);
  letter-spacing: .005em;
}

html body input,
html body select,
html body textarea,
html body .twm-input{
  min-height: 50px;
  border-radius: 16px;
  padding: 13px 14px;
}

html body .row{
  gap: 12px;
}

html body .kpis,
html body .kpiGrid,
html body .results-grid{
  gap: 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 .hub-stat{
  border-radius: 22px !important;
  padding: clamp(16px, 1.8vw, 22px) !important;
}

html body .kpi .t,
html body .kpi .l,
html body .smallLabel,
html body .hub-popular-tag{
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(226,232,240,.68);
}

/* Educational pages: less plain, better scan rhythm, stronger related blocks */
html body main.wrap > .card + .card,
html body .wrap > .section + .section,
html body .wrap > section.card + section.card{
  margin-top: var(--twm-section-gap);
}

html body .summary-grid,
html body .related-links,
html body .linksGrid,
html body .cards,
html body .tool-grid{
  display: grid;
  gap: 16px;
}

@media (min-width: 780px){
  html body .summary-grid,
  html body .related-links,
  html body .linksGrid,
  html body .cards,
  html body .tool-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

html body .related-links a,
html body .related a,
html body .linkCard{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.035);
  color: #eaf6ff;
  font-weight: 800;
  text-decoration: none;
}

html body .author-byline,
html body .authority-intro{
  border-left: 3px solid rgba(125,211,252,.34) !important;
}

html body details{
  border-radius: 20px;
  padding: 16px 18px;
}

/* Footer: same restrained fintech identity on every page */
html body .site-footer,
html body .footer{
  margin-top: clamp(38px, 5vw, 70px);
  padding: 34px 18px 44px;
}

html body .footer-row,
html body .footer-inner{
  gap: 18px;
  align-items: center;
}

html body .footer-links,
html body .site-footer .footer-links{
  gap: 10px 14px;
}

html body .footer-links a,
html body .site-footer .footer-links a{
  padding: 6px 0;
  font-weight: 700;
}

/* Desktop/tablet layout consistency */
@media (max-width: 1180px){
  html body .twm-nav-tools{
    max-width: 620px;
  }
  html body .twm-pill{
    padding: 0 12px;
  }
}

@media (max-width: 980px){
  html body .hub-shell{
    width: min(var(--twm-page-max), calc(100% - 28px));
  }
  html body .hub-hero-grid,
  html body .hub-row,
  html body .hub-category-grid,
  html body .hub-popular-grid,
  html body .hub-stat-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: professional menu panel, better card spacing, no crowded pills */
@media (max-width: 860px){
  html body .twm-header-wrap{
    padding: 10px 10px 8px;
  }
  html body .twm-header{
    min-height: 0;
  }
  html body .twm-header-top{
    padding: 10px 12px;
    border-radius: 22px;
  }
  html body .twm-mobile-panel{
    border-radius: 24px;
  }
  html body .twm-mobile-nav{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  html body .twm-mobile-nav .twm-pill{
    min-height: 50px;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    padding: 0 12px;
    border-radius: 16px;
  }
  html body .twm-mobile-nav .twm-pill:nth-child(-n+3){
    grid-column: span 2;
  }
  html body .hub-shell{
    width: min(var(--twm-page-max), calc(100% - 24px));
    padding-top: 18px;
  }
  html body .hub-hero{
    border-radius: 24px !important;
    padding: 20px !important;
  }
}

@media (max-width: 560px){
  html body .twm-brand-text{
    font-size: 13px;
  }
  html body .twm-brand .twm-logo-mark{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
  }
  html body .twm-mobile-toggle{
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  html body .twm-mobile-nav{
    grid-template-columns: 1fr;
  }
  html body .twm-mobile-nav .twm-pill:nth-child(-n+3){
    grid-column: auto;
  }
  html body .hub-hero h1,
  html body h1,
  html body .twm-title,
  html body .hero h1{
    letter-spacing: -.035em !important;
  }
  html body .card,
  html body .twm-card,
  html body .twm-panel,
  html body .hub-panel,
  html body .hub-card,
  html body .hub-cta,
  html body .hub-popular-card,
  html body .hub-faq-item,
  html body .hub-stat{
    border-radius: 18px !important;
  }
}

/* =========================================================
   Final benchmark alignment pass — homepage + investment calculator standard
   Targets older calculator, guide, methodology and hub pages without changing
   markup, SEO tags, schema or JavaScript calculator logic.
   ========================================================= */
:root{
  --twm-final-page-max: 1200px;
  --twm-final-wide-max: 1380px;
  --twm-final-radius: 28px;
  --twm-final-gap: clamp(22px, 3vw, 34px);
  --twm-final-pad: clamp(20px, 2.4vw, 34px);
  --twm-final-panel:
    radial-gradient(760px 260px at 0% 0%, rgba(96,165,250,.13), transparent 62%),
    radial-gradient(560px 220px at 100% 0%, rgba(244,114,182,.115), transparent 64%),
    linear-gradient(180deg, rgba(9,17,32,.94), rgba(6,12,24,.87));
  --twm-final-panel-soft:
    radial-gradient(520px 180px at 0% 0%, rgba(96,165,250,.10), transparent 62%),
    radial-gradient(420px 160px at 100% 100%, rgba(244,114,182,.08), transparent 66%),
    linear-gradient(180deg, rgba(10,18,34,.92), rgba(7,14,26,.86));
}

/* More balanced desktop canvas: old pages were visually boxed in compared with the homepage/investment page. */
html body .wrap,
html body .twm-container{
  width: min(var(--twm-final-page-max), calc(100% - 44px));
  max-width: var(--twm-final-page-max);
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

html body .hub-shell,
html body .twm-premium-home,
html body .hero .wrap.hero-grid,
html body .hero-grid{
  width: min(var(--twm-final-wide-max), calc(100% - 44px));
  max-width: var(--twm-final-wide-max);
}

/* Premium hero banner used by older calculator and guide pages. */
html body .wrap > .hero,
html body .twm-hero,
html body .hub-hero{
  width: 100%;
  margin: clamp(20px, 3vw, 36px) auto var(--twm-final-gap);
  padding: clamp(30px, 4.2vw, 56px) clamp(24px, 4vw, 48px);
  border-radius: 30px;
  background: var(--twm-final-panel) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.075) !important;
  overflow: hidden;
}

html body .wrap > .hero::before,
html body .wrap > .hero::after{
  border-radius: inherit;
}

html body .wrap > .hero h1,
html body .twm-hero h1,
html body .hub-hero h1{
  max-width: 920px;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
  margin-bottom: 18px !important;
}

html body .wrap > .hero p,
html body .twm-hero p,
html body .hub-hero p,
html body .lead{
  max-width: 850px;
  font-size: clamp(16px, 1.45vw, 20px) !important;
  line-height: 1.68 !important;
  color: rgba(232,238,248,.86) !important;
}

/* Older calculators: make input/result areas feel like one intentional product module. */
html body .wrap > .grid{
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
  gap: var(--twm-final-gap);
  align-items: stretch;
  margin-top: var(--twm-final-gap);
}

html body .wrap > .grid > .card,
html body .wrap > .card,
html body .wrap > section.card,
html body .wrap > article.card,
html body .two-col > .info-card,
html body .info-card,
html body .faq-item,
html body .point,
html body .stat,
html body .method-card,
html body .related-box{
  border-radius: var(--twm-final-radius) !important;
  padding: var(--twm-final-pad) !important;
  background: var(--twm-final-panel-soft) !important;
  border: 1px solid rgba(255,255,255,.115) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html body .wrap > .grid > .card{
  min-height: 100%;
}

/* Do not let large financial figures clip inside result cards. */
html body .kpis,
html body .kpiGrid,
html body .results,
html body .results-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
}

html body .kpi,
html body .stat,
html body .result-card,
html body .metric,
html body .metricCard,
html body .statCard{
  min-width: 0;
  overflow: hidden;
}

html body .kpi .v,
html body .stat .value,
html body .value,
html body .stat-value,
html body .mono{
  max-width: 100%;
  font-size: clamp(28px, 3.1vw, 46px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

html body .kpi .t,
html body .kpi .l,
html body .label,
html body .smallLabel{
  font-size: 12px !important;
  letter-spacing: .085em !important;
  line-height: 1.2 !important;
}

html body .kpi .s,
html body .stat .sub,
html body .note,
html body .hint,
html body small{
  line-height: 1.55;
}

/* Form rhythm: labels, fields and actions now match the investment calculator’s cleaner product feel. */
html body .form,
html body form{
  gap: 13px !important;
}

html body .form .row,
html body form .row,
html body .field{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

html body label{
  font-size: 13px !important;
  font-weight: 850 !important;
  color: rgba(248,250,252,.92) !important;
}

html body input,
html body select,
html body textarea,
html body .twm-input{
  min-height: 52px;
  border-radius: 17px;
  font-size: 15px;
}

html body .actions{
  margin-top: 18px !important;
}

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 .hub-btn{
  min-height: 48px;
  border-radius: 17px !important;
  padding: 12px 18px !important;
}

/* Educational / support pages: make stacked text blocks feel designed, not template generated. */
html body .wrap > .card:not(.tableCard),
html body .wrap > section.card:not(.tableCard){
  margin-top: var(--twm-final-gap) !important;
}

html body .wrap > .card p,
html body .wrap > section.card p,
html body .info-card p,
html body .authority-intro p,
html body .author-byline p{
  max-width: 82ch;
}

html body .wrap > .card h2,
html body .wrap > section.card h2,
html body .info-card h2{
  font-size: clamp(26px, 2.6vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html body .related,
html body .related-links,
html body .links,
html body .hub-mini-links{
  gap: 12px !important;
}

html body .related a,
html body .related-links a,
html body .links a,
html body .hub-mini-links a,
html body .linkCard{
  border-radius: 18px !important;
  min-height: 48px;
  padding: 12px 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(240px 90px at 0% 0%, rgba(125,211,252,.09), transparent 72%) !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Tables and sticky bars: less cramped and more premium. */
html body .tableWrap,
html body .tablewrap,
html body table{
  border-radius: 22px !important;
}

html body th,
html body td{
  padding: 13px 14px !important;
}

html body .stickyBar{
  left: 0;
  right: 0;
  max-width: min(1180px, calc(100% - 32px));
  border-radius: 22px;
}

/* Header final polish: consistent heights, cleaner spacing, no crowded visual rhythm. */
@media (min-width: 861px){
  html body .twm-header{
    width: min(1500px, calc(100% - 32px));
    max-width: 1500px;
    min-height: 74px;
    gap: 18px;
  }

  html body .twm-brand{
    min-height: 54px;
    padding: 7px 15px 7px 8px;
  }

  html body .twm-brand .twm-logo,
  html body .twm-brand img{
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  html body .twm-nav-desktop{
    justify-content: flex-end;
    gap: 12px;
  }

  html body .twm-nav-tools{
    max-width: 865px;
  }

  html body .twm-nav-group{
    gap: 6px;
    padding: 5px;
  }

  html body .twm-pill{
    height: 36px;
    min-height: 36px;
    padding-inline: 13px;
    font-size: 12.5px;
  }
}

@media (min-width: 861px) and (max-width: 1180px){
  html body .twm-brand-text{ display:none; }
  html body .twm-nav-tools{ max-width: 660px; }
}

@media (max-width: 980px){
  html body .wrap,
  html body .twm-container,
  html body .hub-shell,
  html body .hero .wrap.hero-grid,
  html body .hero-grid{
    width: min(100% - 28px, var(--twm-final-page-max));
  }

  html body .wrap > .grid,
  html body .hero-grid,
  html body .two-col{
    grid-template-columns: 1fr !important;
  }

  html body .kpis,
  html body .kpiGrid,
  html body .results,
  html body .results-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px){
  html body .wrap,
  html body .twm-container,
  html body .hub-shell,
  html body .hero .wrap.hero-grid,
  html body .hero-grid{
    width: min(100% - 22px, var(--twm-final-page-max));
    padding-top: 18px;
  }

  html body .wrap > .hero,
  html body .twm-hero,
  html body .hub-hero{
    margin-top: 14px;
    padding: 22px 18px;
    border-radius: 24px;
  }

  html body .wrap > .hero h1,
  html body h1,
  html body .twm-title,
  html body .hub-hero h1{
    font-size: clamp(34px, 10.5vw, 48px) !important;
    letter-spacing: -.04em !important;
  }

  html body .wrap > .grid,
  html body .wrap > .card,
  html body .wrap > section.card{
    margin-top: 20px !important;
  }

  html body .kpis,
  html body .kpiGrid,
  html body .results,
  html body .results-grid{
    grid-template-columns: 1fr !important;
  }

  html body .kpi .v,
  html body .stat .value,
  html body .value,
  html body .stat-value,
  html body .mono{
    font-size: clamp(27px, 9vw, 38px) !important;
  }

  html body .stickyBar{
    max-width: calc(100% - 20px);
    bottom: 10px;
  }
}

/* =========================================================
   Final premium polish pass — sticky bars, density, and mobile rhythm
   Scope: CSS-only refinements. No markup, SEO, schema or calculator logic changed.
   ========================================================= */
:root{
  --twm-polish-max: 1180px;
  --twm-polish-soft-border: rgba(255,255,255,.105);
}

/* Reduce the remaining boxed-in/heavy feeling on legacy calculator pages while preserving the new premium system. */
html body .wrap > .hero,
html body .twm-hero,
html body .hub-hero{
  margin-top: clamp(18px, 2.4vw, 30px) !important;
  margin-bottom: clamp(20px, 2.8vw, 32px) !important;
  padding-block: clamp(28px, 3.7vw, 48px) !important;
}

html body .wrap > .hero h1,
html body .twm-hero h1,
html body .hub-hero h1{
  max-width: 980px;
}

html body .wrap > .card,
html body .wrap > section.card,
html body .wrap > article.card,
html body .info-card,
html body .authority-intro,
html body .author-byline{
  border-color: var(--twm-polish-soft-border) !important;
}

html body .wrap > .card p,
html body .wrap > section.card p,
html body .info-card p,
html body .authority-intro p,
html body .author-byline p{
  color: rgba(226,232,240,.80);
}

/* Make calculator modules feel connected without forcing every old page into the exact same shape. */
html body .wrap > .grid{
  align-items: start;
}

@media (min-width: 981px){
  html body .wrap > .grid > .card:first-child{
    min-height: 560px;
  }
  html body .wrap > .grid > .card:nth-child(2){
    min-height: 560px;
  }
}

/* Result cards: avoid cramped numbers and keep visual hierarchy consistent across all calculators. */
html body .kpi,
html body .kpiCard,
html body .metric,
html body .metricCard,
html body .statCard,
html body .resultMetric,
html body .result-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

html body .kpi .v,
html body .stat .value,
html body .value,
html body .stat-value,
html body .mono{
  white-space: normal;
  text-wrap: balance;
}

/* Sticky result bars were the main remaining distraction: keep them useful, but calmer and less intrusive. */
html body .stickyBar,
html body #stickyBar{
  position: sticky;
  left: auto;
  right: auto;
  bottom: 16px;
  z-index: 24;
  width: min(var(--twm-polish-max), calc(100% - 36px));
  max-width: var(--twm-polish-max);
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .stickyInner{
  min-height: 64px;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(7,13,25,.84), rgba(6,11,21,.78)),
    radial-gradient(360px 100px at 0% 0%, rgba(96,165,250,.11), transparent 70%),
    radial-gradient(320px 100px at 100% 100%, rgba(244,114,182,.10), transparent 70%) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

html body .stickyMini{
  min-width: 0;
}

html body .stickyMini .l{
  font-size: 11px !important;
  letter-spacing: .08em;
  color: rgba(226,232,240,.62) !important;
}

html body .stickyMini .v{
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.05;
  letter-spacing: -.03em;
}

html body .stickyBtns{
  align-items: center;
  gap: 8px !important;
}

html body .stickyBtns a,
html body .stickyBar .btn,
html body .stickyBar .primary,
html body #stickyBar .btn,
html body #stickyBar .primary{
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  white-space: nowrap;
}

/* Tables/long blocks: cleaner reading rhythm on guide and methodology pages. */
html body .wrap > .card:not(.tableCard),
html body .wrap > section.card:not(.tableCard){
  overflow: hidden;
}

html body .wrap > .card:not(.tableCard) h2 + p,
html body .wrap > section.card:not(.tableCard) h2 + p{
  margin-top: 4px;
}

html body .related,
html body .related-links,
html body .links{
  margin-top: 14px;
}

/* Header: keep the improved pill system but prevent visual crowding on medium desktop widths. */
@media (min-width: 861px) and (max-width: 1320px){
  html body .twm-header{
    width: min(100% - 24px, 1320px);
    gap: 12px;
  }
  html body .twm-nav-desktop{
    gap: 10px;
  }
  html body .twm-nav-tools{
    max-width: 760px;
  }
  html body .twm-pill{
    height: 34px;
    min-height: 34px;
    padding-inline: 11px;
    font-size: 12px;
  }
}

/* Mobile: sticky bars become a compact card and never crowd the screen. */
@media (max-width: 680px){
  html body .wrap > .hero,
  html body .twm-hero,
  html body .hub-hero{
    padding: 22px 16px !important;
  }

  html body .stickyBar,
  html body #stickyBar{
    width: calc(100% - 20px);
    max-width: none;
    bottom: 8px;
    margin-top: 16px;
  }

  html body .stickyInner{
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  html body .stickyMini{
    width: 100%;
  }

  html body .stickyBtns{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  html body .stickyBtns a,
  html body .stickyBar .btn,
  html body .stickyBar .primary,
  html body #stickyBar .btn,
  html body #stickyBar .primary{
    width: 100%;
    min-width: 0;
    min-height: 42px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 420px){
  html body .stickyBtns{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AI-fintech navigation redesign — premium digital control bar
   Updated only the shared navigation/button system.
   ========================================================= */
html body .twm-header-wrap{
  background:
    radial-gradient(900px 180px at 68% 0%, rgba(115, 88, 255, .13), transparent 62%),
    radial-gradient(760px 160px at 28% 0%, rgba(50, 231, 184, .12), transparent 58%),
    linear-gradient(180deg, rgba(5, 10, 23, .94), rgba(6, 10, 22, .82));
  border-bottom: 1px solid rgba(172, 199, 255, .08);
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}

@media (min-width: 861px){
  html body .twm-header{
    min-height: 86px;
    gap: clamp(16px, 2vw, 28px);
  }

  html body .twm-nav-desktop{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.25vw, 18px);
    min-width: 0;
    isolation: isolate;
  }

  html body .twm-nav-group{
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px;
    border-radius: 24px;
    border: 1px solid rgba(185, 215, 255, .12);
    background:
      linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(7, 13, 28, .72);
    box-shadow:
      0 20px 50px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.22);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    overflow: hidden;
  }

  html body .twm-nav-group::before{
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 23px;
    pointer-events: none;
    background:
      radial-gradient(120px 42px at 20% 0%, rgba(91, 241, 198, .16), transparent 70%),
      radial-gradient(140px 46px at 82% 0%, rgba(139, 115, 255, .15), transparent 72%);
    opacity: .9;
  }

  html body .twm-nav-main{
    flex: 0 0 auto;
  }

  html body .twm-nav-tools{
    flex: 1 1 auto;
    max-width: min(57vw, 890px);
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, black 0%, black calc(100% - 36px), transparent 100%);
  }

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

  html body .twm-pill{
    position: relative;
    z-index: 1;
    height: 40px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 16px;
    border: 1px solid rgba(205, 224, 255, .10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    color: rgba(236, 244, 255, .86);
    font-size: 12.75px;
    font-weight: 820;
    letter-spacing: .005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      0 1px 0 rgba(255,255,255,.035);
    transform: translateZ(0);
    transition:
      transform .18s ease,
      color .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }

  html body .twm-pill::before{
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(102, 255, 205, .88), rgba(109, 178, 255, .76));
    box-shadow: 0 0 14px rgba(82, 238, 194, .34);
    opacity: .55;
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  html body .twm-nav-main .twm-pill{
    padding-inline: 17px;
    color: rgba(250, 253, 255, .94);
  }

  html body .twm-nav-main .twm-pill::before{
    width: 7px;
    height: 7px;
    opacity: .72;
  }

  html body .twm-pill:hover{
    transform: translateY(-2px);
    color: #ffffff;
    border-color: rgba(125, 244, 211, .34);
    background:
      radial-gradient(90px 42px at 50% 0%, rgba(117, 244, 214, .18), transparent 72%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    box-shadow:
      0 14px 28px rgba(0,0,0,.22),
      0 0 0 1px rgba(120, 236, 212, .07),
      inset 0 1px 0 rgba(255,255,255,.14);
  }

  html body .twm-pill:hover::before{
    opacity: 1;
    transform: scale(1.18);
    box-shadow: 0 0 20px rgba(82, 238, 194, .58), 0 0 34px rgba(112, 141, 255, .22);
  }

  html body .twm-pill.is-active,
  html body .twm-pill[aria-current="page"]{
    color: #ffffff;
    border-color: rgba(130, 255, 214, .42) !important;
    background:
      radial-gradient(110px 54px at 18% 0%, rgba(119, 255, 213, .30), transparent 72%),
      radial-gradient(120px 54px at 92% 0%, rgba(138, 118, 255, .23), transparent 72%),
      linear-gradient(180deg, rgba(255,255,255,.145), rgba(255,255,255,.045));
    box-shadow:
      0 18px 36px rgba(0,0,0,.26),
      0 0 28px rgba(72, 224, 183, .18),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.16);
  }

  html body .twm-pill.is-active::after,
  html body .twm-pill[aria-current="page"]::after{
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 241, 198, .95), rgba(112, 165, 255, .9), rgba(242, 170, 255, .72));
    box-shadow: 0 0 16px rgba(96, 241, 204, .38);
  }

  html body .twm-pill.is-active::before,
  html body .twm-pill[aria-current="page"]::before{
    opacity: 1;
    box-shadow: 0 0 18px rgba(82, 238, 194, .62), 0 0 34px rgba(112, 141, 255, .22);
  }
}

@media (min-width: 861px) and (max-width: 1320px){
  html body .twm-nav-tools{ max-width: min(55vw, 740px); }
  html body .twm-pill{
    height: 38px;
    min-height: 38px;
    padding-inline: 12px;
    font-size: 12px;
  }
  html body .twm-nav-main .twm-pill{ padding-inline: 14px; }
}

@media (min-width: 861px) and (max-width: 1120px){
  html body .twm-brand-text{ display:none; }
  html body .twm-nav-desktop{ gap: 10px; }
  html body .twm-nav-tools{ max-width: min(58vw, 620px); }
}

@media (max-width: 860px){
  html body .twm-mobile-panel{
    background:
      radial-gradient(420px 240px at 12% 0%, rgba(77, 238, 192, .15), transparent 62%),
      radial-gradient(420px 260px at 92% 12%, rgba(139, 115, 255, .16), transparent 60%),
      linear-gradient(180deg, rgba(12, 20, 38, .98), rgba(5, 10, 22, .98));
    border: 1px solid rgba(189, 216, 255, .11);
    box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  }

  html body .twm-mobile-nav{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  html body .twm-mobile-nav .twm-pill{
    position: relative;
    min-height: 54px;
    border-radius: 18px;
    justify-content: flex-start;
    padding: 0 15px;
    font-size: 14.5px;
    font-weight: 820;
    color: rgba(240, 247, 255, .90);
    border: 1px solid rgba(205, 224, 255, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  html body .twm-mobile-nav .twm-pill::before{
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(102, 255, 205, .95), rgba(109, 178, 255, .84));
    box-shadow: 0 0 16px rgba(82, 238, 194, .38);
  }

  html body .twm-mobile-nav .twm-pill:nth-child(-n+3){
    grid-column: span 2;
  }

  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"]{
    color: #fff;
    border-color: rgba(130, 255, 214, .34);
    background:
      radial-gradient(120px 60px at 20% 0%, rgba(119, 255, 213, .20), transparent 72%),
      linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
    box-shadow: 0 16px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12);
  }
}

@media (max-width: 560px){
  html body .twm-mobile-nav{ grid-template-columns: 1fr; }
  html body .twm-mobile-nav .twm-pill:nth-child(-n+3){ grid-column: auto; }
}

@media (prefers-reduced-motion: reduce){
  html body .twm-pill,
  html body .twm-pill::before{
    transition: none !important;
  }
  html body .twm-pill:hover{
    transform: none !important;
  }
}

/* =========================================================
   Homepage mobile overflow correction — 2026-05-19
   Fixes clipped hero/preview content on narrow phones without
   changing desktop navigation, SEO markup, or calculator logic.
   ========================================================= */
@media (max-width: 680px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  html body .twm-premium-home,
  html body .twm-premium-hero,
  html body .twm-home-hero-copy,
  html body .twm-hero-panel,
  html body .twm-calculator-preview{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  html body .twm-premium-hero{
    padding:22px;
    gap:22px;
  }

  html body .twm-premium-hero h1{
    max-width:100%;
    font-size:clamp(34px,10.2vw,44px) !important;
    line-height:1.04;
    letter-spacing:-.045em;
    overflow-wrap:break-word;
    word-break:normal;
  }

  html body .twm-home-lede{
    max-width:100%;
    overflow-wrap:break-word;
  }

  html body .twm-premium-home .twm-eyebrow{
    width:100%;
    max-width:100%;
    justify-content:center;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
    line-height:1.35;
  }

  html body .twm-panel-topline,
  html body .twm-preview-row{
    min-width:0;
  }

  html body .twm-panel-topline{
    align-items:flex-start;
  }

  html body .twm-panel-topline strong,
  html body .twm-preview-row span,
  html body .twm-preview-row strong,
  html body .twm-mini-steps strong,
  html body .twm-mini-steps span{
    min-width:0;
    overflow-wrap:break-word;
  }
}

@media (max-width: 420px){
  html body .twm-premium-hero{
    padding:18px;
    border-radius:24px;
  }

  html body .twm-premium-hero h1{
    font-size:clamp(31px,9.4vw,38px) !important;
  }

  html body .twm-calculator-preview{
    padding:16px;
  }
}