/* ModernTax use-case pages — shared design system.
   Tokens + component idiom are the canonical ones from index.html (the brand reference).
   Accent: moss green oklch(48% 0.13 155). */

/* ─────────────────────────  TOKENS  ───────────────────────── */
:root{
  --paper:        oklch(98.4% 0.006 80);
  --paper-2:      oklch(96.2% 0.008 80);
  --paper-3:      oklch(93.4% 0.012 80);
  --rule:         oklch(86% 0.014 80);
  --rule-soft:    oklch(91% 0.012 80);

  --ink:          oklch(18% 0.012 60);
  --ink-2:        oklch(34% 0.014 60);
  --ink-3:        oklch(52% 0.012 60);
  --ink-4:        oklch(68% 0.010 60);

  --accent:       oklch(48% 0.13 155);   /* moss green */
  --accent-ink:   oklch(28% 0.10 155);
  --accent-soft:  oklch(94% 0.04 155);

  --bg:           var(--paper);
  --surface:      #ffffff;
  --surface-2:    var(--paper-2);
  --surface-3:    var(--paper-3);

  --serif:    'Instrument Serif', 'Iowan Old Style', 'Georgia', serif;
  --sans:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

html[data-theme="dark"]{
  --paper:     oklch(16% 0.012 70);
  --paper-2:   oklch(20% 0.013 70);
  --paper-3:   oklch(24% 0.014 70);
  --rule:      oklch(32% 0.014 70);
  --rule-soft: oklch(26% 0.013 70);

  --ink:       oklch(96% 0.008 80);
  --ink-2:     oklch(82% 0.010 80);
  --ink-3:     oklch(64% 0.010 80);
  --ink-4:     oklch(48% 0.010 80);

  --accent-soft: oklch(28% 0.05 155);
  --accent-ink:  oklch(82% 0.10 155);

  --surface:   var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
}

/* ─────────────────────────  RESET  ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4,p,li{overflow-wrap:break-word}

.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:12px 20px;font-size:14px;font-weight:500}
.skip:focus{left:14px}

/* ─────────────────────────  TYPE  ───────────────────────── */
.mono{font-family:var(--mono)}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:500}
.display-2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,72px);line-height:1;letter-spacing:-.015em;margin:0}
.display-3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.01em;margin:0}
.italic-em{font-style:italic;color:var(--accent-ink)}
.lede{font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}

/* ─────────────────────────  LAYOUT  ───────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
.br-md{display:none}
@media(min-width:900px){.br-md{display:inline}}

/* ─────────────────────────  NAV  ───────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--rule-soft)}
.nav-inner{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;letter-spacing:-.01em;flex-shrink:0;min-height:44px}
.brand-mark{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}
.brand .tag{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-3);padding-left:10px;border-left:1px solid var(--rule)}

.nav-links{display:none;gap:8px;align-items:center;margin-left:auto}
.nav-cta{display:none;align-items:center;gap:16px;flex-shrink:0}
@media(min-width:1040px){.nav-links,.nav-cta{display:flex}}
.nav-links a,.nav-links .navbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;color:var(--ink-2);font-size:14.5px;font-weight:500;transition:color .18s ease}
.nav-links a:hover,.nav-links .navbtn:hover{color:var(--ink)}
.nav-links .navbtn svg{transition:transform .2s ease;opacity:.7}

.ng{position:relative}
.ng::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.ng-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:288px;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:8px;box-shadow:0 1px 0 0 color-mix(in oklab,var(--ink) 6%,transparent),0 30px 60px -30px color-mix(in oklab,var(--ink) 30%,transparent);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.ng:hover .ng-menu,.ng:focus-within .ng-menu{opacity:1;visibility:visible;transform:none}
.ng:hover .navbtn svg,.ng:focus-within .navbtn svg{transform:rotate(180deg)}
.ng-menu a{display:block;padding:10px 12px;border-radius:12px;font-size:14px}
.ng-menu a:hover{background:var(--surface-2)}
.ng-menu a .t{display:block;font-weight:500;color:var(--ink);font-size:14px}
.ng-menu a .d{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}

.nav-cta .signin{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav-cta .signin:hover{color:var(--ink)}
.menu-btn{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);background:var(--surface);flex-shrink:0}
@media(min-width:1040px){.menu-btn{display:none}}

.mnav{display:none;border-top:1px solid var(--rule-soft);padding:10px 0 22px}
.mnav.open{display:block}
@media(min-width:1040px){.mnav,.mnav.open{display:none}}
.mnav a{display:flex;align-items:center;min-height:44px;padding:2px 2px;font-size:15px;font-weight:500;color:var(--ink-2)}
.mnav a:hover{color:var(--ink)}
.mnav .mh{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);margin:18px 2px 6px;font-weight:500}
.mnav .mcta{display:grid;gap:10px;margin-top:20px}
.mnav .mcta .btn{width:100%;justify-content:center}

/* ─────────────────────────  BUTTONS  ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:500;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,filter .18s ease}
.btn:active{transform:translateY(1px)}
.btn-lg{min-height:52px;padding:0 28px;font-size:15.5px}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--accent-ink);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.arrow{display:inline-block;transition:transform .2s ease}
a:hover .arrow,button:hover .arrow{transform:translateX(3px)}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--rule);border-radius:999px;font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 22%,transparent);animation:dotPulse 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ─────────────────────────  HERO  ───────────────────────── */
.hero{padding:clamp(48px,8vw,100px) 0 clamp(40px,6vw,80px);overflow:hidden}
.hero::before{content:'';position:absolute;inset:-40% 50% auto auto;width:min(120%,1000px);aspect-ratio:1;transform:translateX(50%);background:radial-gradient(circle,color-mix(in oklab,var(--accent) 9%,transparent),transparent 62%);pointer-events:none}
.hero-in{position:relative;max-width:62ch;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{margin:26px 0 0;text-wrap:balance;padding-bottom:.04em}
.hero .lede{margin:24px auto 0;text-align:center}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;justify-content:center}

/* ─────────────────────────  SECTIONS  ───────────────────────── */
.section{padding:clamp(56px,8vw,120px) 0}
.section.alt{background:var(--surface-2);border-block:1px solid var(--rule-soft)}
.section-head{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:clamp(36px,5vw,64px)}
@media(min-width:900px){.section-head{grid-template-columns:.9fr 1.1fr;align-items:end;gap:64px}}
.section-num{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.section-head .eyebrow{margin-top:10px;display:block}
.section-head h2{margin:0}
.section-head .lede{margin:18px 0 0;font-size:clamp(16px,1.15vw,18.5px);max-width:62ch}

/* flush card grid — the index.html "products" idiom */
.grid-flush{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:18px;overflow:hidden}
@media(min-width:760px){.grid-flush{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.grid-flush.three{grid-template-columns:repeat(3,1fr)}.grid-flush.four{grid-template-columns:repeat(4,1fr)}}
.gcell{background:var(--surface);padding:clamp(26px,3vw,40px)}
.gcell .idx{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.gcell .idx .dotsq{width:6px;height:6px;background:var(--accent);flex-shrink:0}
.gcell h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;margin:16px 0 12px;letter-spacing:-.01em}
.gcell p{color:var(--ink-2);margin:0;font-size:15px;line-height:1.6;max-width:46ch}

/* bordered card grid */
.cards{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--rule);border-radius:18px;padding:clamp(26px,3vw,38px);background:var(--surface);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 60% at 100% 0%,color-mix(in oklab,var(--accent) 8%,transparent),transparent 60%);pointer-events:none}
.card>*{position:relative}
.card .check{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:16px}
.card h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.9vw,27px);line-height:1.12;margin:0 0 12px;letter-spacing:-.01em}
.card p{color:var(--ink-2);margin:0;font-size:15px;line-height:1.6}

/* ─────────────────────────  IRS FORM PILLS  ───────────────────────── */
.forms{display:flex;flex-wrap:wrap;gap:12px}
.fpill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font-family:var(--mono);font-size:13px;color:var(--ink-2);letter-spacing:.01em}
.section.alt .fpill{background:var(--surface)}

/* ─────────────────────────  CTA BAND  ───────────────────────── */
.cta-sec{padding:0 0 clamp(56px,8vw,120px)}
.cta-band{background:var(--ink);color:var(--paper);border-radius:24px;padding:clamp(48px,7vw,96px) clamp(28px,5vw,80px);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:-50% -10% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(circle,color-mix(in oklab,var(--accent) 28%,transparent),transparent 60%);pointer-events:none}
.cta-in{position:relative;max-width:58ch;margin:0 auto;text-align:center}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.015em;color:var(--paper);margin:0;text-wrap:balance}
.cta-band h2 .italic-em{font-style:italic;color:color-mix(in oklab,var(--accent) 62%,white)}
.cta-band p{color:color-mix(in oklab,var(--paper) 70%,transparent);margin:22px auto 0;max-width:48ch;text-wrap:pretty}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px;position:relative}
.cta-band .btn-accent{color:#fff}
.cta-band .btn-ghost{color:var(--paper);border-color:color-mix(in oklab,var(--paper) 30%,transparent)}
.cta-band .btn-ghost:hover{border-color:var(--paper);color:var(--paper)}
.cta-band :focus-visible{outline-color:var(--paper)}

/* ─────────────────────────  FOOTER  ───────────────────────── */
footer{border-top:1px solid var(--rule);padding:clamp(44px,6vw,64px) 0 36px;background:var(--surface)}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr;margin-bottom:clamp(34px,5vw,48px)}
@media(min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}}
.foot-col h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid}
.foot-col a{color:var(--ink-2);font-size:14px;display:flex;align-items:center;min-height:44px}
.foot-col a:hover{color:var(--ink)}
@media(min-width:800px){.foot-col ul{gap:10px}.foot-col a{min-height:0}}
.foot-about p{font-size:14px;color:var(--ink-3);margin:14px 0 0;line-height:1.6;max-width:36ch}
.foot-bottom{border-top:1px solid var(--rule-soft);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-3)}
.foot-bottom p{margin:0}
.foot-bottom .badges{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.foot-bottom .badges .sep{color:var(--ink-4)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* very narrow phones: drop the decorative brand tag */
@media(max-width:390px){
  .brand{font-size:20px;gap:8px}
  .brand .tag{display:none}
}