:root{
  --navy:#0D3E61;
  --navy2:#082F4C;
  --coral:#FB7554;
  --coral2:#FF8C70;
  --sand:#FAF7F1;
  --paper:#ffffff;
  --ink:#0D344F;
  --muted:#647582;
  --line:#dfe7eb;
  --pale:#fff2ed;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--sand);
  color:var(--ink);
}
.top{
  max-width:1120px;margin:auto;padding:18px 24px;
  display:flex;justify-content:space-between;align-items:center;
}
.brand{
  text-decoration:none;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:10px;
}
.brand::before{
  content:"$";
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--coral);
  color:white;
  font-weight:900;
  font-size:21px;
  box-shadow:0 3px 0 rgba(18,59,89,.08);
}
.brandstack{
  display:flex;
  flex-direction:column;
  line-height:.78;
  font-weight:950;
  letter-spacing:-.04em;
}
.brandhawaii,.brandhacks{font-size:18px}
.brandhacks{color:var(--navy2)}
.tag{font-size:13px;color:var(--muted);font-weight:700}
main{max-width:1120px;margin:auto;padding:20px 24px 70px}
.hero{max-width:790px;padding:42px 0 28px}
.eyebrow{font-weight:900;font-size:11px;letter-spacing:.15em;color:var(--coral)}
h1{
  font-size:clamp(42px,7vw,78px);
  line-height:.95;letter-spacing:-.055em;
  margin:12px 0 22px;color:var(--navy2)
}
h1 em{font-style:normal;color:var(--coral)}
.hero p{font-size:19px;line-height:1.55;color:var(--muted);max-width:720px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  box-shadow:0 10px 28px rgba(20,48,64,.06)
}
h2{font-size:28px;letter-spacing:-.03em;margin:0 0 22px;color:var(--navy2)}
label{display:block;font-size:13px;font-weight:800;margin:14px 0;color:#334d5d}
input,select{
  margin-top:7px;width:100%;
  border:1px solid #cad6dc;border-radius:11px;
  padding:13px 12px;background:#fff;
  font-size:16px;color:var(--ink)
}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.suffix{position:relative}.suffix span{position:absolute;right:13px;top:20px;color:var(--muted)}
details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0;padding:14px 0}
summary{cursor:pointer;font-weight:800;font-size:13px;color:var(--navy)}
.advanced{padding-top:4px}
button{
  width:100%;border:0;border-radius:12px;
  background:var(--coral);color:var(--navy2);
  font-weight:900;padding:15px;font-size:16px;cursor:pointer
}
button:hover{background:var(--coral2)}
.micro{font-size:11px;color:#7c898f;line-height:1.4}
.resultcard{background:var(--navy2);color:white}
.resultlabel{color:#b8d1df;font-weight:900;letter-spacing:.13em;font-size:11px}
.big{font-size:58px;font-weight:950;letter-spacing:-.06em;margin:3px 0}
.delta{color:#d5e4eb;min-height:22px}
.breakdown{margin:22px 0;border-top:1px solid #31556c}
.breakdown div{
  display:flex;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid #31556c;font-size:14px
}
.breakdown span{color:#b8cbd6}
.hack{background:var(--pale);color:var(--navy2);padding:18px;border-radius:14px;margin:20px 0;border-left:5px solid var(--coral)}
.hack span{font-size:10px;font-weight:950;letter-spacing:.12em;color:var(--coral)}
.hack h3{font-size:20px;margin:7px 0}
.hack p{font-size:13px;line-height:1.45;margin:0}
.actions{display:grid;gap:9px}
.actions a{
  display:flex;justify-content:space-between;align-items:center;
  text-decoration:none;border-radius:11px;padding:13px 14px;font-weight:850
}
.primary{background:white;color:var(--navy2)}
.secondary{border:1px solid #57768b;color:white}
.actions small{font-size:9px;opacity:.6;font-weight:600}
.disabled{cursor:not-allowed;opacity:.75}
.proof{padding:58px 0}
.proofgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proofgrid article{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}
.proofgrid b{display:block;font-size:27px;color:var(--coral)}
.proofgrid span{font-size:12px;line-height:1.4;color:var(--muted)}
.sources{font-size:11px;color:#7d8988}
.next{border-top:1px solid #d4dfe4;padding-top:38px}
.toolcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.toolcards>div{padding:18px 0;border-top:3px solid var(--coral)}
.toolcards strong{display:block;margin-bottom:7px;color:var(--navy2)}
.toolcards span{font-size:12px;color:var(--muted)}
footer{
  background:var(--paper);border-top:1px solid var(--line);
  padding:26px max(24px,calc((100% - 1072px)/2));
  font-size:12px;color:var(--muted)
}
@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .proofgrid,.toolcards{grid-template-columns:1fr}
  .twocol{grid-template-columns:1fr}
  .hero{padding-top:20px}
  h1{font-size:48px}
  .top .tag{display:none}
  .big{font-size:48px}
}

/* QA hardening */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid rgba(243,111,82,.45);
  outline-offset:3px;
}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* v7: logo-aligned palette + mobile web hardening */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  min-width:320px;
  overflow-x:hidden;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.top{
  gap:16px;
  padding-top:max(16px,env(safe-area-inset-top));
}
.site-nav{
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  max-width:68vw;
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--navy);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}
.site-nav a:hover,.site-nav a:focus-visible{background:#FFF0EB;color:var(--navy2)}
button,.cta,.actions a,.actions span.primary,.actions span.secondary{
  min-height:44px;
}
input,select,button{font-size:16px}
img{max-width:100%;height:auto}
.hero p,.toolbody p,.sources,.micro{overflow-wrap:anywhere}
footer{
  padding-bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));
}
.skip-link{
  position:absolute;left:-999px;top:auto;
}
.skip-link:focus{
  left:12px;top:12px;z-index:9999;
  background:white;color:var(--navy2);
  padding:10px 14px;border-radius:9px;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}
@media(max-width:760px){
  main{padding-left:16px;padding-right:16px;padding-bottom:54px}
  .top{padding-left:16px;padding-right:16px;align-items:flex-start}
  .brandhawaii,.brandhacks{font-size:16px}
  .brand::before{width:32px;height:32px;font-size:18px}
  .site-nav{max-width:70vw;gap:0}
  .site-nav a{font-size:12px;padding:7px 8px}
  .hero{padding-top:16px}
  .hero p{font-size:17px}
  .card{padding:20px;border-radius:18px}
  h2{font-size:25px}
  .proof{padding:42px 0}
}
@media(max-width:420px){
  .top{display:block}
  .site-nav{max-width:100%;margin-top:10px}
  .site-nav a:first-child{padding-left:0}
}

/* v8 SEO + affiliate conversion */
.affiliate-disabled{opacity:.58;cursor:not-allowed!important}
.intent-copy{max-width:860px;margin:52px auto 0}
.intent-copy h2{margin-bottom:12px}
.intent-copy h3{font-size:20px;margin:28px 0 8px;color:var(--navy2)}
.intent-copy p,.intent-copy li{color:var(--muted);line-height:1.6}
.intent-copy ul{padding-left:20px}
.quick-answer{padding:16px 18px;border-left:4px solid var(--coral);background:#fff;border-radius:10px;margin:18px 0 26px;color:var(--navy2);line-height:1.5}
.result-cta{display:grid;gap:10px;margin-top:18px}
.result-cta a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;text-decoration:none;font-weight:900;min-height:48px}
.result-cta .money{background:var(--coral);color:var(--navy2)}
.result-cta .secondary-action{color:white;border:1px solid #587489;background:transparent}
.result-cta small{font-size:10px;opacity:.75;font-weight:750;text-align:right}
.disclosure{font-size:11px;color:var(--muted);line-height:1.45;margin:12px 0}
.mobile-affiliate-bar{display:none}
@media(max-width:760px){
  body:has(.mobile-affiliate-bar a:not([hidden])){padding-bottom:76px}
  .mobile-affiliate-bar{position:fixed;left:0;right:0;bottom:0;z-index:999;padding:9px 12px max(9px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(9,47,76,.12);backdrop-filter:blur(12px)}
  .mobile-affiliate-bar.active{display:block}
  .mobile-affiliate-bar a{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-radius:12px;padding:10px 14px;background:var(--coral);color:var(--navy2);font-weight:950;text-decoration:none}
  .mobile-affiliate-bar small{font-size:10px;font-weight:800;opacity:.7}
}

/* Never display unavailable monetization actions */
a[data-affiliate][hidden]{display:none!important}
.mobile-affiliate-bar:has(a[hidden]){display:none!important}