/* Shared tool page system. Keep tool layout here, not in page-level CSS. */
:root{
  --tool-max:1040px;
  --tool-wide:1160px;
  --tool-gap:clamp(28px,5vw,64px);
  --tool-card:linear-gradient(180deg,rgba(24,24,21,.94),rgba(11,11,10,.94));
  --tool-border:rgba(250,204,21,.22);
  --tool-border-soft:rgba(250,204,21,.14);
  --tool-text:#fafafa;
  --tool-muted:#d4d4d8;
  --tool-faint:#a1a1aa;
  --tool-yellow:#facc15;
}

body{
  font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:16px;
  line-height:1.6;
  color:var(--tool-text);
}

body .display,
body .serif,
body h1,
body h2,
body h3{
  font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:0!important;
}

body p,
body li,
body label,
body input,
body select,
body textarea,
body button{
  font-family:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

body p{color:var(--tool-muted);max-width:72ch}

.mono,
.eyebrow,
.section-label,
.tag,
.proof-pill,
.tool-hero-caption,
.step-tab,
.cost-stat .label,
.cost-stat .sub{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace!important;
}

/* Minimal utility compatibility for tool pages that formerly relied on Tailwind. */
.hidden{display:none!important}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.z-10{z-index:10}
.flex{display:flex}.grid{display:grid}.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.text-center{text-align:center}.text-left{text-align:left}
.uppercase{text-transform:uppercase}.w-full{width:100%}.h-2{height:8px}.mx-auto{margin-left:auto;margin-right:auto}
.gap-1{gap:4px}.gap-3{gap:12px}.gap-4{gap:16px}.space-y-2>*+*{margin-top:8px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mt-12{margin-top:48px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.px-4{padding-left:16px;padding-right:16px}.py-4{padding-top:16px;padding-bottom:16px}.py-6{padding-top:24px;padding-bottom:24px}.py-8{padding-top:32px;padding-bottom:32px}.pt-8{padding-top:32px}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-xl{font-size:20px}.text-2xl{font-size:24px}.text-3xl{font-size:30px}.text-4xl{font-size:clamp(38px,5vw,56px)}.text-5xl{font-size:clamp(44px,6vw,68px)}.text-6xl{font-size:clamp(48px,7vw,76px)}
.leading-none{line-height:1}.leading-tight{line-height:1.12}.tracking-widest{letter-spacing:.12em}
.max-w-md{max-width:520px}.max-w-lg{max-width:620px}.max-w-3xl,.max-w-4xl{max-width:var(--tool-max)}
.grid-cols-1{grid-template-columns:1fr}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.border-b{border-bottom:1px solid var(--tool-border-soft)}.border-\[\#262626\]{border-color:#262626}.bg-\[var\(--bg\)\]{background:var(--bg)}
.text-\[var\(--yellow\)\]{color:var(--tool-yellow)!important}.text-\[var\(--text\)\]{color:var(--tool-text)!important}.text-\[var\(--text-dim\)\]{color:var(--tool-muted)!important}.text-\[var\(--text-faint\)\]{color:var(--tool-faint)!important}.text-\[var\(--green\)\]{color:#4ade80!important}.text-\[var\(--red\)\]{color:#f87171!important}
.text-\[10px\]{font-size:10px!important}
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .md\:py-12{padding-top:48px!important;padding-bottom:48px!important}
  .md\:text-3xl{font-size:30px!important}
  .md\:text-5xl{font-size:56px!important}
  .md\:text-6xl{font-size:64px!important}
  .md\:text-7xl{font-size:76px!important}
}
@media(min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Page chrome */
.page-shell{background:transparent!important}
.stripe-bg{display:none!important}
body > header,
.page-shell > header,
body > section[class*="max-w-"]{
  width:min(var(--tool-max),calc(100% - 40px))!important;
  max-width:var(--tool-max)!important;
  margin:0 auto!important;
  padding:24px 0 0!important;
  background:transparent!important;
  border:0!important;
  position:relative!important;
}

body > section[class*="max-w-"] h1,
.page-shell > header h1{
  font-size:18px!important;
  line-height:1.2!important;
}

/* Shared hero layouts */
main[class*="max-w-"]:has(> #intro + .tool-hero-media),
main.wrap:has(> .page-title + .tool-hero-media),
main > .wrap:has(> .page-title + .tool-hero-media),
main:has(> .page-title.wrap + .tool-hero-media),
.tool-intro-grid{
  width:min(var(--tool-max),calc(100% - 40px))!important;
  max-width:var(--tool-max)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px)!important;
  gap:var(--tool-gap)!important;
  align-items:center!important;
}

main[class*="max-w-"]:has(> #intro + .tool-hero-media){
  padding:48px 0 64px!important;
}

main[class*="max-w-"]:has(> #intro + .tool-hero-media) > #intro,
main.wrap:has(> .page-title + .tool-hero-media) > .page-title,
main > .wrap:has(> .page-title + .tool-hero-media) > .page-title,
main:has(> .page-title.wrap + .tool-hero-media) > .page-title,
.tool-intro-grid > div:first-child{
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}

main[class*="max-w-"]:has(> #intro + .tool-hero-media) > #intro p,
.page-title p,
.tool-intro-grid p{
  margin-left:0!important;
  margin-right:0!important;
}

.page-title{
  padding:48px 0 24px!important;
  max-width:none!important;
}

.page-title h1,
#intro h2{
  font-size:clamp(36px,4.4vw,54px)!important;
  line-height:1.04!important;
  margin:10px 0 16px!important;
  text-wrap:balance;
}

.page-title p,
#intro p{
  font-size:16px!important;
  line-height:1.65!important;
}

main[class*="max-w-"]:has(> #intro + .tool-hero-media) > .tool-hero-media,
main.wrap:has(> .page-title + .tool-hero-media) > .tool-hero-media,
main > .wrap:has(> .page-title + .tool-hero-media) > .tool-hero-media,
main:has(> .page-title.wrap + .tool-hero-media) > .tool-hero-media,
.tool-intro-grid .tool-hero-frame{
  grid-column:2!important;
  width:100%!important;
  max-width:360px!important;
  margin:0!important;
  left:auto!important;
  transform:none!important;
  align-self:start!important;
}

body:has(#intro.hidden) .tool-hero-media{display:none!important}

.tool-hero-frame{
  overflow:hidden!important;
  border:1px solid var(--tool-border)!important;
  border-radius:8px!important;
  background:var(--tool-card)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.32)!important;
}

.tool-hero-frame img{
  display:block!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  object-fit:cover!important;
}

.tool-hero-caption{
  padding:10px 12px!important;
  color:var(--tool-faint)!important;
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}

.tool-intro-support{
  grid-column:1/-1!important;
  width:100%!important;
  margin:0!important;
  padding:0 0 24px!important;
}

#intro > .grid[class*="grid-cols"],
.tool-intro-support > .grid[class*="grid-cols"]{
  margin-top:28px!important;
  gap:10px!important;
}

.tool-intro-support > .grid[class*="grid-cols"]{
  margin-top:0!important;
}

#intro > .grid[class*="grid-cols"] > .question-card,
#intro > .grid[class*="grid-cols"] > .cost-stat,
#intro > .grid[class*="grid-cols"] > div,
.tool-intro-support > .grid[class*="grid-cols"] > .question-card,
.tool-intro-support > .grid[class*="grid-cols"] > .cost-stat,
.tool-intro-support > .grid[class*="grid-cols"] > div{
  min-height:0!important;
  padding:14px!important;
}

#intro > .grid[class*="grid-cols"] h3,
.tool-intro-support > .grid[class*="grid-cols"] h3,
#intro > .grid[class*="grid-cols"] .display,
.tool-intro-support > .grid[class*="grid-cols"] .display{
  font-size:clamp(20px,2.4vw,30px)!important;
  line-height:1.05!important;
  margin:0 0 8px!important;
}

#intro > .grid[class*="grid-cols"] p,
.tool-intro-support > .grid[class*="grid-cols"] p,
#intro > .grid[class*="grid-cols"] .sub,
.tool-intro-support > .grid[class*="grid-cols"] .sub{
  font-size:12px!important;
  line-height:1.4!important;
  margin:0!important;
}

main[class*="max-w-"] > :not(#intro):not(.tool-hero-media),
main.wrap > :not(.page-title):not(.tool-hero-media),
main > .wrap:has(> .page-title + .tool-hero-media) > :not(.page-title):not(.tool-hero-media),
main:has(> .page-title.wrap + .tool-hero-media) > :not(.page-title):not(.tool-hero-media),
.tool-intro-grid ~ *{
  grid-column:1/-1!important;
  width:100%!important;
}

/* Cards, forms, controls */
.card,
.question-card,
.planner-panel,
.calc-card,
.doc-form,
.doc-output,
.tool-shell,
.tool-form,
.tool-output,
.cost-stat,
.cov-card,
.estimate-hero,
.verdict-hero,
.notice{
  border:1px solid var(--tool-border-soft)!important;
  border-radius:8px!important;
  background:var(--tool-card)!important;
  box-shadow:none!important;
}

.card,
.question-card,
.planner-panel,
.calc-card,
.doc-form,
.doc-output,
.tool-form,
.tool-output,
.notice{
  padding:24px!important;
}

.grid2,
.planner-grid,
.calc-grid,
.doc-layout,
.tool-shell,
.grid.grid-cols-2{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:start!important;
}

.grid3,
.grid.grid-cols-3{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}

.section{padding:40px 0!important}
.section[style*="padding-top:0"]{padding-top:24px!important}
.tool-seo-support,
.tool-depth-section{
  padding:24px 0!important;
}

body div[style*="border-top"][style*="rgba(250,204,21"]{
  margin-top:32px!important;
  padding:40px 0!important;
  background:rgba(7,7,6,.72)!important;
}
body div[style*="border-top"][style*="rgba(250,204,21"] .wrap{
  width:min(var(--tool-max),calc(100% - 40px))!important;
  max-width:var(--tool-max)!important;
  margin:0 auto!important;
}
body div[style*="border-top"][style*="rgba(250,204,21"] p,
body div[style*="border-top"][style*="rgba(250,204,21"] div[style*="max-width"]{
  max-width:720px!important;
}

.eyebrow,
.section-label,
.tag{
  display:block;
  margin:0 0 10px!important;
  color:var(--tool-yellow)!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.btn,
.primary-btn,
.ghost-btn,
button,
.option-btn{
  min-height:44px;
  border-radius:6px!important;
  font-size:14px!important;
  line-height:1.25!important;
}

.primary-btn,
.btn:not(.ghost){
  background:var(--tool-yellow)!important;
  color:#111!important;
  border:1px solid var(--tool-yellow)!important;
  font-weight:700!important;
}

.ghost-btn,
.btn.ghost{
  background:rgba(255,255,255,.035)!important;
  color:var(--tool-muted)!important;
  border:1px solid var(--tool-border-soft)!important;
}

.option-btn{
  display:block!important;
  width:100%!important;
  margin:0 0 8px!important;
  padding:12px 14px!important;
  background:rgba(255,255,255,.025)!important;
  color:var(--tool-text)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  text-align:left!important;
}

.option-btn.selected{
  background:var(--tool-yellow)!important;
  border-color:var(--tool-yellow)!important;
  color:#111!important;
}

input,
select,
textarea,
.input{
  width:100%!important;
  min-height:44px!important;
  border-radius:6px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:#080808!important;
  color:var(--tool-text)!important;
  font-size:15px!important;
}

@media(max-width:900px){
  body > header,
  .page-shell > header,
  body > section[class*="max-w-"],
  main[class*="max-w-"]:has(> #intro + .tool-hero-media),
  main.wrap:has(> .page-title + .tool-hero-media),
  main > .wrap:has(> .page-title + .tool-hero-media),
  main:has(> .page-title.wrap + .tool-hero-media),
  .tool-intro-grid{
    width:min(100% - 28px,680px)!important;
    display:block!important;
  }

  main[class*="max-w-"]:has(> #intro + .tool-hero-media){
    padding:36px 0 48px!important;
  }

  .tool-hero-media,
  .tool-intro-grid .tool-hero-frame{
    width:min(100%,360px)!important;
    max-width:360px!important;
    margin:28px auto 0!important;
  }

  .grid2,
  .grid3,
  .planner-grid,
  .calc-grid,
  .doc-layout,
  .tool-shell,
  .grid.grid-cols-2,
  .grid.grid-cols-3{
    grid-template-columns:1fr!important;
  }

  #intro > .grid[class*="grid-cols"],
  .tool-intro-support > .grid[class*="grid-cols"]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:560px){
  body{font-size:15px}
  .page-title h1,
  #intro h2{font-size:34px!important}
  .page-title p,
  #intro p{font-size:15px!important}
  .card,
  .question-card,
  .planner-panel,
  .calc-card,
  .doc-form,
  .doc-output,
  .tool-form,
  .tool-output,
  .notice{padding:18px!important}
  .actions,
  .flex{gap:10px;flex-wrap:wrap}
  .actions .btn,
  .primary-btn.w-full{width:100%!important}
}