/* Shared styling for the free tools.
   One file so four calculators cannot drift into four different designs, and
   so a fix to the form controls lands on all of them at once. */

:root{
  --t-bg:#120A1F; --t-card:#1C1130; --t-card2:#2A1A45; --t-line:#3A2560;
  --t-purple:#9333EA; --t-purple2:#C05AF5; --t-ink:#F0EBFA; --t-sub:#C9BFE0;
}

main{max-width:840px;}
.lede{font-size:17px;line-height:1.6;color:var(--t-ink);max-width:620px;}
.sub{color:var(--muted);font-size:14.5px;margin:-4px 0 22px;}

/* ------------------------------------------------------------- the form */
.calc{padding:22px 23px;border-radius:18px;border:1px solid var(--t-line);
  background:linear-gradient(165deg,rgba(58,37,96,.5),rgba(28,17,48,.92));
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -24px rgba(0,0,0,.9);}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;}
.f{margin:0 0 15px;}
.f label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--t-ink);}
.f input,.f select{width:100%;padding:13px;font-size:16px;border-radius:11px;
  border:1px solid var(--t-line);background:rgba(0,0,0,.32);color:inherit;
  box-sizing:border-box;}
.f input:focus,.f select:focus{outline:2px solid var(--t-purple2);outline-offset:1px;}
.f .hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45;}

/* A checkbox that is comfortably tappable and reads as a sentence. */
.chk{display:flex;gap:11px;align-items:flex-start;margin:0 0 13px;padding:12px 13px;
  border-radius:11px;border:1px solid var(--t-line);background:rgba(0,0,0,.22);
  font-size:14.5px;line-height:1.5;color:var(--muted);cursor:pointer;}
.chk input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--t-purple);}
.chk b{color:var(--t-ink);}

.go{width:100%;padding:15px;border:0;border-radius:12px;font-family:"Baloo 2",sans-serif;
  font-weight:700;font-size:16.5px;color:#fff;cursor:pointer;
  /* Both stops at or darker than #9333EA: white on this reads 5.38:1, over
     the 4.5 AA needs at 16.5px. The old light stop (#C05AF5) measured 3.49:1.
     Verified by test/cc3-pending/e2e/contrast-audit.mjs. */
  background:linear-gradient(180deg,var(--t-purple),#7E22CE);
  box-shadow:0 8px 24px -8px rgba(147,51,234,.7);}
.go:active{transform:translateY(1px);}

/* ---------------------------------------------------------- the answer */
.out{margin:20px 0 0;padding:22px 23px;border-radius:18px;
  border:1px solid #6D28D9;
  background:linear-gradient(135deg,rgba(147,51,234,.20),rgba(28,17,48,.8));}
.out .big{font-family:"Baloo 2",sans-serif;font-size:clamp(34px,6vw,50px);font-weight:800;
  line-height:1.05;background:linear-gradient(180deg,#F0EBFA,#C05AF5);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.out .cap{font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-sub);opacity:.85;margin-bottom:4px;}
.out .strap{margin:8px 0 0;font-size:15px;line-height:1.55;color:#D6C9EE;}

table.bands{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:14px;}
table.bands th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-sub);opacity:.8;padding:0 0 7px;font-weight:700;}
table.bands td{padding:8px 0;border-top:1px solid rgba(147,51,234,.28);color:var(--muted);}
table.bands td:last-child{text-align:right;color:var(--t-ink);font-weight:700;
  font-variant-numeric:tabular-nums;}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0 0;}
.fig{padding:14px 15px;border-radius:12px;background:rgba(0,0,0,.26);
  border:1px solid rgba(147,51,234,.3);}
.fig .n{display:block;font-family:"Baloo 2",sans-serif;font-size:23px;color:var(--t-ink);
  font-variant-numeric:tabular-nums;}
.fig .k{display:block;font-size:12px;margin-top:4px;color:var(--t-sub);}

.warn{margin:16px 0 0;padding:13px 15px;border-radius:12px;border:1px solid #C08A2A;
  background:rgba(60,42,10,.5);color:#FFE7BC;font-size:14px;line-height:1.55;}
.small{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);}
.small a{color:var(--t-purple2);}

/* ------------------------------------------------- the lead capture */
.lead{margin:26px 0 0;padding:22px 23px;border-radius:18px;
  border:1px solid var(--t-line);background:var(--t-card);}
.lead h3{font-family:"Baloo 2",sans-serif;font-size:20px;margin:0 0 6px;color:var(--t-ink);}
.lead p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--muted);}
.lead .ok{padding:13px 15px;border-radius:11px;border:1px solid #4ADE80;
  background:rgba(20,60,35,.45);color:#BBF7D0;font-size:14.5px;line-height:1.5;}
.err{margin-top:11px;color:#FF8A7A;font-size:14px;line-height:1.5;}
.hidden{display:none;}

/* --------------------------------------------------------- the tool hub */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:22px 0 0;}
a.tile{display:block;padding:20px 21px;border-radius:16px;text-decoration:none;color:inherit;
  border:1px solid var(--t-line);
  background:linear-gradient(165deg,rgba(58,37,96,.5),rgba(28,17,48,.92));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease;}
a.tile:hover{transform:translateY(-3px);border-color:rgba(192,90,245,.6);}
/* h2 as well as h3: the tiles are top-level items under the page h1, so
   jumping straight to h3 skipped a level and told a screen-reader user a
   section was missing. The SIZE is set here, so the heading level is free to
   be correct. */
a.tile h2,a.tile h3{font-family:"Baloo 2",sans-serif;font-size:18px;margin:0 0 6px;color:var(--t-ink);}
a.tile p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);}
a.tile .free{display:inline-block;margin-top:11px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid #4ADE80;color:#BBF7D0;background:rgba(20,60,35,.45);}

.foot-legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--t-line);
  font-size:12px;line-height:1.6;opacity:.8;}

@media (prefers-reduced-motion:reduce){ a.tile,a.tile:hover{transform:none;transition:none;} }