/* SaaS layout (31 Oct 2026): compact 1140px container, main + 300px sidebar, navy palette, soft cards. */
:root {
  --wrap: 1140px; --side: 300px; --gap: 40px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 14px; --radius-sm: 10px;
  --line: #e6ebf1; --tint: #f4f9fc;
  --shadow: 0 1px 2px rgba(2,35,69,.05), 0 6px 20px rgba(2,35,69,.06);
}
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; color: #1a202c; }
h1, h2, h3, h4 { font-family: Inter, system-ui, sans-serif; color: var(--navy); letter-spacing: -0.015em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.35rem); line-height: 1.18; font-weight: 800; margin: 0 0 var(--s3); }
.prose h2 { font-size: 1.45rem; line-height: 1.25; margin: var(--s6) 0 var(--s3); }
.prose h3 { font-size: 1.12rem; margin: var(--s5) 0 var(--s2); }
.otd-tool, .otd-sheet { font-family: Inter, system-ui, sans-serif; }

/* Header */
.site-header { background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 64px; gap: var(--s4); }
.brand { font-size: 1.02rem; }
.mark { width: 36px; height: 36px; border-radius: 9px; font-size: .64rem; }
.site-nav > a { font-weight: 600; font-size: .9rem; padding: 7px 10px; color: #23364d; }
.site-nav > a[aria-current="page"] { color: var(--navy); }
.nav-search input { width: 180px; }
.header-cta { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.header-login { font-weight: 600; font-size: .9rem; color: var(--navy); text-decoration: none; }
.header-login:hover { text-decoration: underline; }
@media (min-width: 981px) and (max-width: 1180px) { .nav-search { display: none; } }
@media (max-width: 980px) {
  .header-cta { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; margin-left: 0; }
  .header-login { display: none; }
}
@media (max-width: 380px) { .header-cta .btn { padding: 7px 10px; font-size: .8rem; } .brand > span:last-child { font-size: .92rem; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 18px; border-radius: 10px; font-weight: 600; font-size: .92rem; text-decoration: none; line-height: 1.2; border: 1px solid transparent; transition: background .15s, box-shadow .15s; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(2,35,69,.2); }
.btn-primary:hover { background: var(--cqp-primary-80); color: #fff; }
.btn-primary:focus-visible { outline: 3px solid var(--cqp-accent); outline-offset: 2px; }
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: .86rem; }
.btn-block { display: flex; width: 100%; }

/* Bands and heads: lots of white */
.hero, .page-head { background: #fff; }
.hero { padding: var(--s7) 0 var(--s5); background: linear-gradient(180deg, #fff 0%, var(--tint) 100%); }
.hero h1::after, .page-head h1::after { display: none; }
.tool-band, .band { background: #fff; }
.band.alt { background: var(--tint); }
.lede { font-size: 1.06rem; font-weight: 500; color: #3d5470; max-width: 44rem; }

/* Main + sidebar */
.layout-side { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--gap); align-items: start; padding-top: var(--s5); padding-bottom: var(--s7); }
.layout-side .main-col { min-width: 0; }
.layout-side .page-head { padding: 0 0 var(--s4); }
.layout-side .tool-band { padding: 0 0 var(--s5); }
.layout-side .band { padding: var(--s2) 0 var(--s5); }
.layout-side .prose { max-width: none; }
.layout-side .otd-tool, .layout-side .otd-sheet, .layout-side .embed-panel { max-width: 100%; margin-left: 0; margin-right: 0; }
.side-col { display: grid; gap: var(--s4); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s4); box-shadow: var(--shadow); }
.side-cta { background: linear-gradient(160deg, #f4f9fc 0%, #e4f1f5 100%); border-color: #d1e7f0; }
.side-cta p { margin: 0 0 var(--s3); font-size: .92rem; color: #3d5470; line-height: 1.5; }
.side-kicker { margin: 0 0 var(--s2) !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cqp-primary-80) !important; }
.side-title { font-weight: 800; font-size: 1.08rem !important; color: var(--navy) !important; line-height: 1.3 !important; }
.side-cta .side-fine { margin: var(--s3) 0 0; font-size: .82rem; text-align: center; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li + li { border-top: 1px solid #eef2f6; }
.side-list a { display: flex; justify-content: space-between; gap: var(--s2); padding: 7px 4px; font-size: .9rem; line-height: 1.35; color: #1f3a57; text-decoration: none; border-radius: 6px; }
.side-list a:hover { color: var(--navy); background: var(--tint); }
.side-list a[aria-current="page"] { color: var(--navy); font-weight: 700; background: var(--ice); }
.side-list small { color: #6b7280; font-weight: 600; font-size: .75rem; }
.side-states { max-height: 300px; overflow: auto; margin-right: -6px; padding-right: 6px; }
.side-more { display: inline-block; margin-top: var(--s3); font-size: .88rem; font-weight: 600; text-decoration: none; }
@media (max-width: 960px) {
  .layout-side { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .side-col { position: static; max-height: none; overflow: visible; }
}

/* Cards and calculator polish */
.otd-tool { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.embed-panel { border-color: var(--line); border-radius: var(--radius-sm); }
.state-grid a, .plan, .price-card, .card { border-radius: var(--radius-sm); }
.otd-primary { border-radius: 10px; }
.site-footer { background: var(--navy); }
.brand { white-space: nowrap; }
@media (max-width: 420px) { .mark { width: 32px; height: 32px; } .header-inner { gap: 10px; } }
.page-head { padding: 32px 0 8px; }
.page-head + .band { padding-top: 16px; }
.layout-side .band.prose > :first-child, .band .prose > :first-child { margin-top: 0; }
.prose table { font-size: .92rem; }