/* ShiftTakeHome homepage — editorial composition to match the mockup */
/* Loaded after the inline <style> so these win. Pure CSS; calculator logic untouched. */

/* Masthead bar: left label + right label, like the mockup's .top-bar */
body::before{
  content:"Take-home pay, made clear";
  display:block; text-align:center;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--surface);
  border-bottom:1px solid var(--line); padding:8px 16px;
}

/* App: single column (the hero-row is the only 2-col band) */
.app{ display:block !important; max-width:980px; margin:0 auto; padding:40px 24px 64px; }
.app > .header{ display:none !important; }

/* ---- Hero row: text left, result card right ---- */
.hero-row{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
@media (max-width:820px){ .hero-row{ grid-template-columns:1fr; gap:28px; } }
.intro{ margin:0; }
.hero-kicker{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.intro h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(34px,4.6vw,52px); line-height:1.0; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink); }
.intro h1 em{ font-style:italic; font-weight:400; color:var(--accent); }
.hero-sub{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin:0 0 24px; }
.hero-cta{ display:inline-block; background:var(--ink); color:#fbf7ef !important; font-family:var(--font-ui); font-weight:600; font-size:14.5px; padding:13px 26px; text-decoration:none; letter-spacing:.01em; border:1px solid var(--ink); }
.hero-cta:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- Result card: clean hairline, header row, line-item breakdown ---- */
.hero-card .result-card, .result-card{
  border:1px solid var(--line-strong); border-radius:4px; box-shadow:none;
  background:var(--surface); padding:0; overflow:hidden; margin:0;
}
.result-card::before{ display:none !important; }
.result-label{
  background:var(--surface-2); border-bottom:1px solid var(--line-strong);
  padding:11px 22px; margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}
.result-amount{ font-family:var(--font-display); font-weight:900; padding:18px 22px 2px; }
.result-period{ padding:0 22px 4px; color:var(--ink-mute); font-size:13.5px; }
.result-lines{ padding:8px 22px 18px; }
.rl{ display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--ink-soft); padding:7px 0; font-variant-numeric:tabular-nums; }
.rl span:last-child{ font-variant-numeric:tabular-nums; }
.rl.total{ border-top:1px solid var(--line-strong); margin-top:6px; padding-top:11px; font-weight:600; color:var(--ink); font-size:15px; }
.hero-card .disclaimer{ margin-top:12px; font-size:12px; color:var(--ink-mute); display:flex; gap:8px; align-items:flex-start; }

/* ---- "Enter your numbers" divider + persona chips above inputs ---- */
.calc-intro{ font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--ink); margin:44px 0 14px; padding-top:26px; border-top:1px solid var(--line-strong); scroll-margin-top:16px; }
.calc-intro .num{ color:var(--accent); margin-right:6px; }
.presets{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.preset-chip{ font-family:var(--font-ui); font-size:13px; color:var(--ink-soft); background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .12s; }
.preset-chip:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }

/* Input sections — editorial hairline panels */
.section{ border:1px solid var(--line); border-radius:4px; box-shadow:none; background:var(--surface); }
.section-title{ font-family:var(--font-display); font-weight:600; }
.field input, .field select, input[type=text], input[type=number]{ border-radius:3px; border:1px solid var(--line-strong); }

/* Static guide section + app footer */
.guide{ max-width:980px; margin:0 auto; padding:40px 24px; border-top:1px solid var(--line-strong); }
.guide h2, .guide h3{ font-family:var(--font-display); font-weight:600; }
.app .footer{ border-top:1px solid var(--line); color:var(--ink-mute); font-size:12.5px; margin-top:8px; }

/* Force editorial green accent over the app's runtime design-tweaks injection (which re-sets --accent to coral) */
:root{ --accent:#1c5d43 !important; --accent-ink:#163f30 !important; --accent-soft:#e7eee8 !important; }
.hero-kicker{ color:#1c5d43 !important; }
.intro h1 em{ color:#1c5d43 !important; font-style:italic; }
.calc-intro .num{ color:#1c5d43 !important; }