/* BASE STYLES & VARIABLES */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
:root{
  --orange:#FC5D07;--orange-hover:#e04e00;--orange-light:#FF8C44;--orange-faint:#fff3ed;
  --bg:#fafaf9;--surface:#ffffff;--surface-2:#f7f7f5;--border:#e8e4e0;--divider:#f0ede9;
  --text:#1a1614;--muted:#7a7470;--faint:#c4c0bb;
  --success:#2d7a3a;--success-bg:#edf7ee;
  --warn:#964219;--warn-bg:#fff4ec;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07);--shadow-md:0 4px 16px rgba(0,0,0,.09);--shadow-lg:0 12px 40px rgba(0,0,0,.13);
  --t:180ms cubic-bezier(.16,1,.3,1);
  --font:'Inter','Helvetica Neue',sans-serif;
}
[data-theme="dark"]{
  --bg:#141210;--surface:#1e1c1a;--surface-2:#242220;--border:#2e2c2a;--divider:#252321;
  --text:#e8e4e0;--muted:#8a8480;--faint:#4a4845;
  --orange:#ff7a2e;--orange-hover:#ff6a1a;--orange-light:#ffaa70;--orange-faint:#2a1a10;
  --success-bg:#1a2e1c;--warn-bg:#2a1a0e;
}
body{min-height:100dvh;font-family:var(--font);color:var(--text);background:var(--bg);transition:background var(--t),color var(--t);font-size:1rem;line-height:1.6}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select{font:inherit;color:inherit}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:860px;margin-inline:auto;padding:2rem 1rem}

/* NAV */
nav{background:var(--surface);border-bottom:1px solid var(--border);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
.nav-logo{display:flex;align-items:center;gap:.625rem}
.nc-icon{width:32px;height:32px;background:var(--orange);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-icon svg{color:#fff}
.nav-brand{font-weight:700;font-size:1rem;color:var(--text)}
.nav-brand span{color:var(--orange)}
.theme-btn{width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background var(--t),color var(--t)}
.theme-btn:hover{background:var(--surface-2);color:var(--text)}

/* HERO */
.hero{text-align:center;padding:2.5rem 0 2rem}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;color:var(--text);line-height:1.2;margin-bottom:.75rem}
.hero h1 span{color:var(--orange)}
.hero p{color:var(--muted);font-size:.9375rem;max-width:50ch;margin-inline:auto}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:.35rem;background:var(--orange-faint);color:var(--orange);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:var(--radius-full);margin-bottom:1rem;border:1px solid color-mix(in oklch,var(--orange) 20%,transparent)}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.75rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.card-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:1.25rem}

/* FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:580px){.form-grid{grid-template-columns:1fr}.card{padding:1.25rem}}
.fg{display:flex;flex-direction:column;gap:.4rem}
.fg label{font-size:.875rem;font-weight:500;color:var(--text)}
.fg label .sub{font-weight:400;color:var(--muted);font-size:.75rem;margin-left:.25rem}
input[type="date"],select{padding:.6rem .875rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);font-size:.875rem;width:100%;-webkit-appearance:none;appearance:none;transition:border-color var(--t),box-shadow var(--t)}
input[type="date"]:focus,select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in oklch,var(--orange) 20%,transparent)}

/* PLANS */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.5rem}
@media(max-width:580px){.plans{grid-template-columns:1fr}}
.plan{border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem;cursor:pointer;position:relative;transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.plan:hover{border-color:var(--orange);background:color-mix(in oklch,var(--orange) 4%,var(--surface))}
.plan.sel{border-color:var(--orange);background:color-mix(in oklch,var(--orange) 6%,var(--surface));box-shadow:0 0 0 1px var(--orange)}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan-name{font-weight:600;font-size:.875rem;margin-bottom:.2rem}
.plan-p1{font-size:.75rem;color:var(--orange);font-weight:600}
.plan-p2{font-size:.75rem;color:var(--muted)}
.pop-badge{display:inline-block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--orange);color:#fff;padding:2px 7px;border-radius:var(--radius-full);margin-bottom:.35rem}
.check-ring{position:absolute;top:.75rem;right:.75rem;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background var(--t),border-color var(--t)}
.plan.sel .check-ring{background:var(--orange);border-color:var(--orange)}
.check-ring svg{opacity:0;transition:opacity var(--t)}
.plan.sel .check-ring svg{opacity:1}

/* CTA */
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem 2rem;background:var(--orange);color:#fff;font-size:.9375rem;font-weight:700;border-radius:var(--radius-lg);transition:background var(--t),box-shadow var(--t),transform var(--t);margin-top:.25rem}
.btn:hover{background:var(--orange-hover);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}

/* ERROR */
.err{background:#fef2f2;border:1px solid #fca5a5;border-radius:var(--radius-md);padding:.75rem 1rem;font-size:.875rem;color:#dc2626;display:none;margin-top:.75rem}
.err.show{display:block}

/* RESULTS */
#results{display:none;animation:up .35s cubic-bezier(.16,1,.3,1)}
#results.show{display:block}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.result-hero{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-light) 100%);border-radius:var(--radius-xl);padding:2rem;text-align:center;color:#fff;margin-bottom:1.25rem;box-shadow:var(--shadow-lg)}
.rh-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin-bottom:.75rem}
.rh-amount{font-size:clamp(3rem,8vw,5rem);font-weight:800;line-height:1;margin-bottom:.5rem;letter-spacing:-.02em}
.rh-amount sup{font-size:.4em;font-weight:600;vertical-align:super;opacity:.8}
.rh-desc{font-size:.875rem;opacity:.9}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;margin-bottom:1.25rem}
@media(max-width:580px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;text-align:center}
.stat-val{font-size:1.6rem;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:.2rem;font-variant-numeric:tabular-nums}
.stat-lbl{font-size:.75rem;color:var(--muted)}

.breakdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:1.25rem}
.br-row{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1.25rem;border-bottom:1px solid var(--divider);font-size:.875rem}
.br-row:last-child{border-bottom:none}
.br-row.tot{background:color-mix(in oklch,var(--orange) 6%,var(--surface-2));font-weight:700}
.br-k{color:var(--muted)}
.br-v{color:var(--text);font-variant-numeric:tabular-nums;font-weight:500}
.br-row.tot .br-v{color:var(--orange);font-size:1rem}

.notice{border-radius:var(--radius-lg);padding:.875rem 1rem;display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;margin-bottom:1.25rem}
.notice.warn{background:var(--warn-bg);border:1px solid color-mix(in oklch,var(--warn) 30%,transparent)}
.notice.info{background:var(--orange-faint);border:1px solid color-mix(in oklch,var(--orange) 20%,transparent)}
.notice svg{flex-shrink:0;margin-top:2px}
.notice strong{display:block;margin-bottom:.2rem;color:var(--text)}
.notice p{color:var(--muted);margin:0;max-width:none}

.formula{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;font-size:.8125rem;color:var(--muted);font-family:'Courier New',monospace;line-height:1.9;margin-bottom:1.25rem}
.formula strong{color:var(--orange);font-family:var(--font);font-size:.8125rem}

/* RESOURCES */
.resources{margin-top:2rem;margin-bottom:1.5rem}
.resources h2{font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--text)}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:580px){.res-grid{grid-template-columns:1fr}}
.res-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;display:flex;gap:.75rem;align-items:flex-start;transition:border-color var(--t),box-shadow var(--t)}
.res-card:hover{border-color:var(--orange);box-shadow:var(--shadow-sm);text-decoration:none}
.res-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--orange-faint);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--orange)}
.res-title{font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:.2rem;display:block}
.res-desc{font-size:.75rem;color:var(--muted)}

/* TIPS */
.tips{background:var(--orange-faint);border:1px solid color-mix(in oklch,var(--orange) 20%,transparent);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1.25rem}
.tips h3{font-size:.875rem;font-weight:700;color:var(--orange);margin-bottom:.875rem;text-transform:uppercase;letter-spacing:.05em}
.tip-list{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.tip-list li{font-size:.875rem;color:var(--text);display:flex;gap:.625rem;align-items:flex-start;line-height:1.5}
.tip-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:.45rem}

/* COMPARISON TABLE */
.comp-table{width:100%;border-collapse:collapse;font-size:.8125rem;margin-top:.75rem}
.comp-table th{padding:.625rem .875rem;background:var(--surface-2);border-bottom:2px solid var(--border);text-align:left;font-weight:600;color:var(--text);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.comp-table td{padding:.625rem .875rem;border-bottom:1px solid var(--divider);color:var(--muted)}
.comp-table tr:last-child td{border-bottom:none}
.comp-table td:first-child{color:var(--text);font-weight:500}
.comp-table .yes{color:var(--success);font-weight:600}
.comp-table .hl{background:color-mix(in oklch,var(--orange) 5%,var(--surface))}

/* FAQ SECTION */
.faq-section {margin-top: 2rem; margin-bottom: 2rem;}
.faq-section h2 {font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1rem;}
.faq-item {background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 0.75rem; padding: 1rem 1.25rem; transition: box-shadow var(--t);}
.faq-item:hover {box-shadow: var(--shadow-sm);}
.faq-q {font-weight: 600; color: var(--text); margin-bottom: 0.5rem; font-size: 0.9375rem;}
.faq-a {color: var(--muted); font-size: 0.875rem; line-height: 1.5; margin: 0;}

/* ARTICLE CONTENT */
.article-content {margin-top: 2.5rem; background: var(--surface); padding: 2rem; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-sm);}
.article-content h2 {font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--text);}
.article-content h3 {font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--text);}
.article-content p {color: var(--muted); font-size: 0.9375rem; margin-bottom: 1rem; line-height: 1.6;}
.article-content ul {margin-bottom: 1rem; padding-left: 1.5rem; color: var(--muted); font-size: 0.9375rem;}
.article-content li {margin-bottom: 0.5rem;}

/* AD SENSE CONTAINERS */
.ad-slot {background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-lg); text-align: center; color: var(--muted); font-size: 0.75rem; padding: 1rem; margin: 1.5rem 0; min-height: 90px; display: flex; align-items: center; justify-content: center;}
.ad-slot::after {content: 'Advertisement';}

/* FOOTER */
footer {text-align: center; padding: 2.5rem 0 2rem; font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--divider); margin-top: 2rem;}
.footer-links {display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem;}
.footer-links a {color: var(--text); font-weight: 500;}
.footer-links a:hover {color: var(--orange);}
.footer-copy {font-size: 0.75rem; color: var(--faint);}
.footer-copy a {color: var(--muted);}

/* COOKIE CONSENT */
.cookie-banner {position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; z-index: 9999; box-shadow: 0 -4px 16px rgba(0,0,0,0.05); gap: 1rem; flex-wrap: wrap;}
.cookie-text {font-size: 0.8125rem; color: var(--muted); flex: 1; min-width: 250px;}
.cookie-btn {background: var(--orange); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap;}
.cookie-btn:hover {background: var(--orange-hover);}

/* FORMS (Shared) */
.form-group {margin-bottom: 1.25rem;}
.form-group label {display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem;}
.form-control {width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; font: inherit; background: var(--bg); color: var(--text);}
.form-control:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in oklch, var(--orange) 15%, transparent);}
.success-banner {display: none; background: var(--success-bg); color: var(--success); border: 1px solid color-mix(in oklch, var(--success) 30%, transparent); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; font-weight: 500;}