/* Guide pages (scripts/build-site-guides.py): the legal page layout from site.css plus an answer box,
   tables, FAQ, the download band, related links and the free tools. */
.guide .crumbs { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.guide .crumbs a { color: inherit; text-decoration: none; }
.guide .crumbs a:hover { color: var(--deep); text-decoration: underline; }
.guide h1 { margin-top: 18px; text-wrap: balance; }
.guide h2 { text-wrap: balance; scroll-margin-top: 90px; }
.guide .lead { font-size: 20px; color: rgba(30,27,51,.78); max-width: 62ch; }
.guide .answer { margin: 8px 0 8px; }
.guide .answer p { font-size: 18.5px; line-height: 1.6; color: var(--deep); }
.guide .box + .box { margin-top: 14px; }
.guide .table { overflow-x: auto; margin: 18px 0; }
.guide .table table { margin: 0; min-width: 520px; }
.guide code { font-family: "Atkinson Mono", ui-monospace, monospace; font-size: .9em; background: var(--paper); padding: 1px 6px; border-radius: 6px; }
.guide ol { padding-left: 22px; }
.guide details { border-bottom: 1px solid var(--hair); padding: 14px 0; }
.guide details summary { cursor: pointer; font-weight: 700; color: var(--deep); font-size: 18px; list-style-position: outside; }
.guide details p { margin: 10px 0 0; }
.guide-cta { background: var(--deep); color: var(--cream); border-radius: var(--radius); padding: 30px 32px; margin: 44px 0; }
.guide-cta p { color: rgba(243,234,224,.82) !important; margin: 0 0 18px; }
.guide-cta .guide-cta-title { color: var(--cream) !important; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.guide-cta .btn { --bg: var(--cream); --fg: var(--deep); }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.related .rel { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--paper); border: 1px solid rgba(30,27,51,.07); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s var(--ease); }
.related .rel:hover, .related .rel:focus-visible { border-color: var(--lilac); transform: translateY(-2px); }
.related .rel b { font-size: 17px; line-height: 1.3; color: var(--deep); }
.related .rel span { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.guide .nav-links a + a { margin-left: 18px; }

/* Free tools */
.tool { background: var(--paper); border: 1px solid rgba(30,27,51,.08); border-radius: var(--radius); padding: 26px 28px; margin: 26px 0; }
.tool .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 18px; }
.tool label { display: grid; gap: 6px; font-size: 15px; font-weight: 700; color: var(--deep); }
.tool label small { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.tool input[type="number"], .tool textarea { font: inherit; font-size: 17px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: #fff; color: var(--ink); width: 100%; }
.tool textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.tool input:focus-visible, .tool textarea:focus-visible { outline: 2px solid var(--lilac); outline-offset: 1px; }
.tool .out { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tool .stat { background: #fff; border-radius: 16px; padding: 16px 18px; border: 1px solid var(--hair); }
.tool .stat b { display: block; font-size: 30px; letter-spacing: -.02em; color: var(--deep); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tool .stat span { font-size: 14px; color: var(--muted); }
.tool .stat.hi { background: var(--deep); border-color: var(--deep); }
.tool .stat.hi b { color: var(--cream); }
.tool .stat.hi span { color: rgba(243,234,224,.75); }
.tool .steps-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 18px; }
.tool button { font: inherit; font-size: 15.5px; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--deep); color: var(--cream); cursor: pointer; }
.tool button.ghost { background: transparent; color: var(--deep); border: 1px solid var(--hair); }
.tool button:disabled { opacity: .4; cursor: default; }
.tool .note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.tool .phase { font-weight: 700; color: var(--lilac); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 600px) {
  .tool { padding: 20px 18px; }
  .guide-cta { padding: 24px 22px; }
}