/* ATTN's rounded, cyan-accented screen treatment. The print layout stays separate. */
@media screen {
  :root { --paper:#080e12; --cyan:#4dd2ff; }
  body {
    background:#080e12;
    background-image:radial-gradient(ellipse 740px 570px at 72% 140px,rgba(33,142,178,.12),transparent 75%),radial-gradient(ellipse 600px 650px at 5% 800px,rgba(46,150,179,.06),transparent 80%);
    color:#eff7fa;
  }
  .masthead {
    max-width:1182px;
    margin:22px auto 0;
    border:1px solid #ffffff14;
    border-radius:999px;
    background:linear-gradient(115deg,#ffffff0d,#ffffff03);
    box-shadow:0 8px 30px #00000020,inset 0 1px 0 #ffffff08;
  }
  .masthead .nav { height:76px; padding:0 30px; }
  .brand>span { font-size:30px; letter-spacing:-1.4px; }
  .brand small { color:#c7d6de; border-color:#ffffff24; }
  .nav-note { font-size:9px; letter-spacing:1.4px; }
  .intro { padding:51px 0 35px; grid-template-columns:1.25fr 1fr; gap:50px; }
  .intro .eyebrow {
    display:inline-flex;
    padding:8px 12px;
    border:1px solid #4dd2ff2b;
    border-radius:999px;
    background:#4dd2ff08;
    color:#9be5ff;
    font-size:8px;
    letter-spacing:1.3px;
    margin-bottom:19px;
  }
  .intro .eyebrow span { border-radius:50%; width:5px; height:5px; background:#4dd2ff; box-shadow:0 0 12px #4dd2ff88; }
  h1 { font-family:Inter,Arial,sans-serif; font-size:56px; font-weight:800; line-height:1.09; letter-spacing:-2.6px; }
  h1 span { color:#4dd2ff; }
  .intro-copy { padding-bottom:4px; max-width:390px; }
  .intro-copy p:first-child { font-size:17px; font-weight:650; }
  .intro-copy p:nth-child(2) { font-size:14px; color:#a5bac5; }
  .micro { color:#9bc9d8; font-size:10px; }
  .tool-nav { border:0; margin:6px 0 22px; }
  .tabs { padding:5px; gap:4px; border:1px solid #ffffff12; border-radius:999px; background:#101c23; box-shadow:0 3px 12px #00000016; }
  .tab { padding:12px 21px; margin:0; border:0; border-radius:999px; color:#a9bdc8; font-size:12px; transition:background .18s,color .18s,box-shadow .18s; }
  .tab:hover { color:white; background:#ffffff06; }
  .tab.active { background:#dff7ff; color:#0c3546; box-shadow:0 2px 9px #00000020,inset 0 1px 0 #ffffffcc; }
  .text-button { padding:10px 14px; border-radius:999px; color:#9fb5c0; }
  .text-button:hover { color:#e8faff; background:#ffffff08; }
  .workspace { gap:25px; }
  .input-card {
    padding:30px 31px 25px;
    border-radius:26px;
    border:1px solid #dcecf1;
    background:linear-gradient(145deg,#fff,#fbfdff);
    color:#10212b;
    box-shadow:0 16px 48px #0000001c,inset 0 1px 0 white;
  }
  h2 { font-size:21px; letter-spacing:-.6px; font-weight:750; }
  .panel-heading .eyebrow { font-size:9px; color:#63808e; letter-spacing:1.5px; }
  .edit-tag { border-radius:999px; background:#e8f8fe; color:#23718d; padding:7px 10px; }
  .input-hint { font-size:11px; color:#617882; margin-bottom:26px; }
  fieldset { margin-bottom:25px; }
  legend { font-size:12px; margin-bottom:14px; gap:10px; }
  legend span { width:28px; line-height:28px; border-radius:50%; background:#e7f7fd; color:#14718e; font-size:10px; }
  label { font-size:12px; color:#2f4a58; }
  .input-wrap { height:53px; margin-top:8px; border-radius:13px; border-color:#d5e4eb; background:#f4f9fc; padding:0 15px; box-shadow:inset 0 2px 4px #163a501f; }
  .input-wrap:focus-within { border-color:#32b8e3; background:#fff; box-shadow:0 0 0 4px #4dd2ff24,inset 0 1px 2px #163a5008; }
  .input-wrap input { font-weight:650; font-size:21px; letter-spacing:-.4px; }
  .input-wrap span { color:#5d8191; }
  label small { color:#627d8a; font-size:10px; line-height:1.6; }
  .input-card .field-note { color:#637b86; }
  .advanced { padding:16px 17px; margin-top:4px; background:#f0f6f9; border:1px solid #e0ebf0; border-radius:15px; }
  .advanced summary { color:#365b6d; font-size:11px; }
  .advanced summary span { color:#647d89; }
  .advanced select { background:white; border-radius:10px; padding:12px 10px; }
  .advanced .field-trio label { font-size:10px; }
  .advanced .field-trio .input-wrap { padding:0 9px; }
  .errors { border-radius:12px; }
  .result-card {
    container-type:inline-size;
    border-radius:26px;
    border:1px solid #4dd2ff22;
    background:radial-gradient(ellipse at 88% -5%,#21526980,transparent 68%),linear-gradient(135deg,#142b39,#10212c);
    box-shadow:0 16px 44px #00000022,inset 0 1px 0 #ffffff08;
    padding:28px 31px 0;
  }
  .result-card .eyebrow { color:#afcfdd; font-size:9px; letter-spacing:1.4px; }
  .period-switch { padding:4px; border-radius:999px; background:#091b2680; border-color:#ffffff10; }
  .period-switch button { min-height:32px; padding:7px 13px; border-radius:999px; font-size:11px; color:#b6cdd8; }
  .period-switch .active { background:#4dd2ff; color:#073145; box-shadow:0 2px 10px #00000020; }
  .hero-number { margin:21px 0 3px; gap:18px; flex-wrap:wrap; }
  .hero-number>span { font-family:Inter,Arial,sans-serif; font-weight:800; font-size:clamp(64px,22cqw,108px); line-height:1.12; letter-spacing:-.06em; color:#70ddff; text-shadow:0 3px 26px #4dd2ff15; }
  .hero-number>div { font-size:27px; font-weight:650; padding-top:7px; letter-spacing:-.7px; }
  .hero-number>div span { color:#aac4d2; font-size:13px; letter-spacing:0; }
  .result-sentence { color:#bdd2dd; font-size:12px; margin:9px 0 24px; }
  .funnel { padding:18px 16px; border:1px solid #ffffff0d; border-radius:18px; background:#c3ecff09; gap:7px; }
  .funnel strong { font-size:24px; font-weight:700; letter-spacing:-.5px; }
  .funnel>div { column-gap:8px; }
  .funnel>div>span:last-child { color:#bed0db; font-size:10px; }
  .funnel-dot { background:#91b6c9; }
  .funnel-arrow { color:#7fa6b9; }
  .result-money { padding:25px 0; gap:16px; }
  .result-money span { font-size:11px; color:#c4d7e2; }
  .result-money strong { font-size:30px; font-weight:750; letter-spacing:-1px; }
  .result-money small { color:#a4bdcb; font-size:10px; }
  .daily-note { background:#4dd2ff0b; color:#afdeec; border-color:#4dd2ff15; font-size:10px; margin:0 -31px; padding:15px 20px; }
  .plan-details { background:#10212b; border:1px solid #ffffff0b; border-radius:21px; padding:20px 23px; margin-top:16px; box-shadow:0 7px 24px #00000012; }
  .detail-heading { margin-bottom:8px; }
  .detail-heading h3 { font-size:15px; font-weight:700; color:#edf7fb; }
  .detail-heading>span { color:#a6bac5; }
  .detail-row { padding:10px 0; border-color:#ffffff0e; }
  .detail-row>span { color:#aac1ce; font-size:11px; }
  .detail-row strong { color:#edf7fb; font-size:12px; }
  .hint { color:#aac1ce; }
  .plan-details .field-note { color:#92adbd; font-size:10px; line-height:1.7; }
  .plan-details h3 { color:#edf7fb; }
  .explainer-copy { color:#a5bfce; font-size:12px; line-height:1.8; margin-bottom:0; }
  .print-button { margin-top:16px; padding:18px 23px; border-radius:999px; font-size:13px; min-height:54px; font-weight:750; background:#4dd2ff; color:#083247; box-shadow:0 4px 0 #117492,0 8px 25px #4dd2ff14; transition:background .18s,box-shadow .18s,transform .18s; }
  .print-button:hover { background:#83e1ff; transform:translateY(-1px); box-shadow:0 5px 0 #117492,0 12px 30px #4dd2ff20; }
  .print-button:active { transform:translateY(2px); box-shadow:0 2px 0 #117492; }
  .print-button:disabled { transform:none; box-shadow:none; }
  .save-note { margin-top:12px; color:#91adbc; font-size:10px; }
  .how-it-works { border-top:1px solid #ffffff12; margin-top:40px; padding:31px 0 26px; gap:28px; }
  .how-it-works .eyebrow { color:#91bbce; }
  .how-it-works h2 { color:#edf7fb; font-size:18px; letter-spacing:-.5px; }
  .method>span { display:inline-block; color:#99e4fd; background:#4dd2ff0c; border-radius:999px; padding:6px 10px; letter-spacing:.8px; }
  .method p { color:#a6bfce; font-size:11px; line-height:1.9; }
  .method strong { color:#e5f3fa; font-size:12px; }
  .method-notes { background:#ffffff03; border:1px solid #ffffff10; border-radius:16px; padding:17px 21px; color:#b1cad6; margin-bottom:18px; }
  .method-notes summary { font-size:12px; color:#c9e0ec; }
  .method-notes>div { font-size:12px; }
  .method-notes strong { color:#e1f3fc; }
  footer { border-color:#ffffff10; color:#9db4c1; padding:22px 3px 32px; }
  footer strong { color:#d3e9f4; }
  .seasonal-amount { font-family:Inter,Arial,sans-serif; font-weight:800; font-size:clamp(44px,15cqw,76px); letter-spacing:-.05em; color:#70ddff; }
  .seasonal-stats>div { border-color:#ffffff12; padding:16px 0; }
  .seasonal-stats span { color:#b6cdd9; }
  .seasonal-stats strong { font-size:21px; font-weight:700; }
  .negative { color:#ffac9d!important; }
  @media(min-width:1400px) {
    .masthead { max-width:1182px; }
    .intro { padding-top:53px; padding-bottom:39px; }
    h1 { font-size:59px; }
  }
  @media(max-width:1240px) { .masthead { margin-left:44px; margin-right:44px; } }
  @media(max-width:960px) {
    .masthead { margin:18px 28px 0; }
    .intro { gap:30px; }
    h1 { font-size:47px; letter-spacing:-2px; }
    .input-card { padding:25px 22px; }
    .result-card { padding:25px 24px 0; }
    .daily-note { margin-left:-24px; margin-right:-24px; }
    .field-pair { gap:12px; }
    label { font-size:11px; }
    .advanced { padding:15px 13px; }
    .result-top { gap:6px; flex-wrap:wrap; }
    .period-switch button { padding:6px 11px; }
    .result-money strong { font-size:26px; }
    .plan-details { padding:19px; }
    .funnel { padding:17px 12px; }
    .funnel strong { font-size:22px; }
    .how-it-works { gap:20px; }
  }
  @media(max-width:740px) {
    .masthead { margin:14px 16px 0; border-radius:999px; }
    .masthead .nav { height:64px; padding:0 20px; }
    .brand>span { font-size:27px; }
    .brand img { width:27px; height:27px; }
    .nav-note { font-size:7px; letter-spacing:.8px; }
    .intro { display:block; padding:33px 0 24px; }
    .intro .eyebrow { font-size:7px; padding:7px 10px; margin-bottom:16px; }
    h1 { font-size:clamp(37px,8.8vw,52px); letter-spacing:-1.8px; line-height:1.12; }
    .intro-copy { margin-top:21px; max-width:470px; }
    .intro-copy p:first-child { font-size:16px; }
    .intro-copy p:nth-child(2) { font-size:13px; }
    .tool-nav { flex-wrap:wrap; gap:10px; margin:1px 0 20px; }
    .tabs { padding:4px; gap:2px; }
    .tab { font-size:10px; padding:11px 13px; min-height:38px; }
    .text-button { font-size:10px; padding:9px 3px; }
    .input-card { padding:25px 22px; border-radius:24px; }
    .panel-heading h2 { font-size:20px; }
    .input-wrap { height:52px; border-radius:13px; }
    label { font-size:11px; }
    .input-wrap input { font-size:21px; }
    .advanced summary span { display:block; margin:5px 0 0 14px; }
    .result-card { border-radius:24px; padding:25px 25px 0; }
    .daily-note { margin-left:-25px; margin-right:-25px; }
    .hero-number { gap:17px; }
    .hero-number>span { font-size:clamp(64px,24cqw,104px); }
    .result-money strong { font-size:27px; }
    .result-money small { font-size:9px; }
    .plan-details { padding:21px; border-radius:21px; }
    .detail-row strong { font-size:11px; }
    .how-it-works { gap:24px; }
    .how-it-works h2 { font-size:17px; }
    .method p { font-size:10px; }
    .method strong { font-size:11px; }
    .method-notes { padding:16px 18px; }
    footer { padding-bottom:26px; }
  }
  @media(max-width:390px) {
    .masthead { margin-left:12px; margin-right:12px; }
    .masthead .nav { padding:0 17px; }
    .nav-note { font-size:6px; letter-spacing:.5px; }
    .tabs { flex:1; justify-content:center; }
    .tab { padding-left:12px; padding-right:12px; }
    .text-button { width:100%; text-align:right; margin-top:-2px; padding-top:2px; padding-bottom:2px; }
    .text-button span { font-size:10px; }
    .tool-nav { gap:8px; margin-bottom:16px; }
    .input-card { padding:23px 19px; }
    .field-pair { gap:11px; }
    .result-card { padding-left:21px; padding-right:21px; }
    .daily-note { margin-left:-21px; margin-right:-21px; }
    .funnel { padding:16px 10px; }
    .funnel>div { column-gap:6px; }
    .funnel strong { font-size:21px; }
    .hero-number>div { font-size:25px; }
    .detail-row { font-size:10px; }
    .detail-row>span { font-size:10px; }
    .detail-heading>span { font-size:7px; }
  }
}