/* Guides, tools and sales pages built by tools/pages.mjs. Same look as the homepage: one accent color, lots of air, real numbers. */
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem }   /* anchors and focused links stay clear of the sticky header */
.in { max-width: 68rem; margin: 0 auto; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)) }

/* nav and footer */
.gnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line) }
.gnav .in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.6rem }
.logo { font-weight: 900; font-size: 1.35rem; letter-spacing: -.03em; color: var(--fg); text-decoration: none }
.logo span { color: var(--brand-text) }
.gnav nav { display: flex; gap: 1.4rem; align-items: center; font-size: .92rem }
.gnav nav a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 600 }
.gnav nav a:not(.btn):hover { color: var(--fg) }
@media (max-width: 40rem) { .gnav nav a.opt { display: none } }
.gfoot { border-top: 1px solid var(--line); margin-top: 4rem; padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); font-size: .9rem; color: var(--muted) }
.gfoot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem 2rem }
.gfoot .cols div { display: grid; gap: .45rem; align-content: start }
.gfoot b { color: var(--fg); font-size: .85rem }
.gfoot a { color: var(--muted); text-decoration: none; padding-block: .35rem; white-space: nowrap }
.gfoot a:hover { color: var(--fg); text-decoration: underline }
.gfoot p { margin: 2rem 0 0 }

/* article */
.gmain { padding-top: 3rem }
.g { max-width: 44rem; margin: 0 auto; font-size: 1.06rem; line-height: 1.7 }
body.wide .g { max-width: 60rem }
.ghead { display: grid; gap: .8rem; margin-bottom: 2.5rem }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-text) }
.g h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.035em; line-height: 1.06; font-weight: 800 }
.ghead .lede { font-size: 1.2rem; color: var(--muted); margin: 0; line-height: 1.5 }
.ghead .meta { font-size: .85rem; color: var(--muted); margin: 0 }
.g h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); letter-spacing: -.025em; line-height: 1.15; font-weight: 800; margin: 3rem 0 .8rem }
.g h3 { font-size: 1.15rem; font-weight: 800; margin: 2rem 0 .5rem }
.g p { margin: 0 0 1.1rem }
.g ul, .g ol { margin: 0 0 1.2rem; padding-left: 1.3rem; display: grid; gap: .4rem }
.g a:not(.btn) { color: var(--brand-text) }
.g strong, .g b { font-weight: 700 }
.g .short { font-size: 1.15rem; padding: 1.1rem 0; border-top: 2px solid var(--fg); border-bottom: 1px solid var(--line); margin: 0 0 2rem }
.g .short b { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem }
.g .note { color: var(--muted); font-size: .95rem }
.g hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 }

/* tables */
.tw { overflow-x: auto; margin: 0 0 1.5rem; -webkit-overflow-scrolling: touch;
  /* a soft edge shows there's more to scroll, and disappears at the end */
  background: linear-gradient(to right, var(--bg) 30%, transparent) left / 2rem 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, #0002, transparent) left / .75rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, #0002, transparent) right / .75rem 100% no-repeat scroll }
.g table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45 }
.g table:has(th:nth-child(5)) { min-width: 34rem }   /* only wide tables scroll sideways */
@media (max-width: 40rem) { .g table { font-size: .88rem } .g td.n { white-space: normal } .g th, .g td { padding: .55rem .4rem } }
.g th, .g td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top }
.g thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--fg) }
.g td.n, .g th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.g caption { caption-side: bottom; text-align: left; font-size: .85rem; color: var(--muted); padding-top: .6rem }

/* tools: a neutral panel, inputs on the left, the answer on the right */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin: 0 0 2.5rem }
@media (max-width: 44rem) { .tool { grid-template-columns: minmax(0, 1fr); padding: 1.1rem } }
.tool .in-side { display: grid; gap: 1rem; align-content: start }
.tool .out-side { display: grid; gap: .9rem; align-content: start }
.tool .big { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums }
.tool .lines { display: grid; gap: .4rem; font-size: .95rem }
.tool .lines div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .35rem }
.tool .lines span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.tool .seg { display: inline-flex; flex-wrap: wrap; gap: .4rem }
.tool .seg label { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--fg) }
.tool .seg label:has(input:checked) { border-color: var(--brand); color: var(--brand-text) }
.tool .seg input { margin: 0 }

/* lists of pages */
.glist h2 { font-size: 1.2rem; margin: 2.5rem 0 .5rem }
.glist ul, .related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 }
.glist li a, .related li a { display: grid; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg) }
.glist li a b, .related li a b { font-size: 1.05rem; color: var(--brand-text) }
.glist li a span, .related li a span { color: var(--muted); font-size: .95rem; line-height: 1.5 }
.related { max-width: 44rem; margin: 3rem auto 0 }
.related h2 { font-size: 1.2rem; margin-bottom: .5rem }

/* FAQs and sources */
.gfaq { margin-top: 3rem; display: grid; gap: .5rem }
.gfaq h2 { margin-top: 0 }
.gfaq details { border-bottom: 1px solid var(--line) }
.gfaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 700 }
.gfaq summary::-webkit-details-marker { display: none }
.gfaq summary::after { content: "+"; font-weight: 400; color: var(--muted); font-size: 1.3rem; line-height: 1 }
.gfaq details[open] summary::after { content: "\2212" }
.gfaq p { margin: 0 0 1rem; color: var(--muted) }
.sources { margin-top: 3rem; font-size: .88rem; color: var(--muted) }
.sources h2 { font-size: 1rem; margin: 0 0 .5rem }
.sources ol { gap: .25rem }
.sources a { color: var(--muted); overflow-wrap: anywhere }

/* call to action at the end of guides */
.gcta { max-width: 44rem; margin: 3.5rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.6rem 0; border-top: 2px solid var(--fg); border-bottom: 1px solid var(--line) }
.gcta b { display: block; font-size: 1.15rem; letter-spacing: -.01em }
.gcta span { color: var(--muted); font-size: .95rem }

/* printable things (flyers, plans) */
@media print {
  .gnav, .gfoot, .gcta, .related, .gfaq, .sources, .noprint, .ghead { display: none !important }
  body { background: #fff; color: #000 }
  .gmain { padding: 0 }
  .g { max-width: none }
}

/* plan table (from core.js) */
.g table.plans-t { min-width: 32rem }
.plans-t th:not(:first-child), .plans-t td:not(:first-child) { text-align: center }
.plans-t thead th .num { font-size: .85rem; color: var(--fg); text-transform: none; letter-spacing: 0 }
.plans-t td.yes { color: var(--good); font-weight: 800 }
.plans-t td.no { color: var(--muted) }
@media (max-width: 40rem) {
  .g table.plans-t { min-width: 0; font-size: .8rem; table-layout: fixed }
  .plans-t th, .plans-t td { padding: .55rem .25rem }
  .plans-t th:first-child, .plans-t td:first-child { width: 40% }
  .plans-t thead th { font-size: .68rem; letter-spacing: .03em }
  .plans-t thead th .num { font-size: .72rem }
  .plans-t td.num { font-size: .75rem }
}
.plans-t tbody th { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--fg); border-bottom: 1px solid var(--line) }
/* on phones the answer comes first, so it's visible while typing */
@media (max-width: 44rem) { .tool .out-side { order: -1; padding-bottom: 1rem; border-bottom: 1px solid var(--line) } }