/* one.bot, www.theone.bot: the app's palette and type (src/web/style.ts), so the site and the app look like one thing. */
:root { --ink: #1f2328; --muted: #656d76; --rule: #e3e6ea; --panel: #ffffff; --page: #f6f7f9; --accent: #1f4e8c; --accent-ink: #ffffff;
  --sky: #e8f0fa; --navy-tint: #e3ecf8; --teal: #0f766e; --teal-tint: #e0f2ef; --amber: #b45309; --amber-tint: #fdf0dd; }
@media (prefers-color-scheme: dark) { :root { --ink: #e6e8eb; --muted: #9aa3ad; --rule: #30363d; --panel: #161a20; --page: #0f1216; --accent: #6ea2e6; --accent-ink: #0f1216;
  --sky: #13233a; --navy-tint: #1a2d47; --teal: #5ec4b6; --teal-tint: #12302c; --amber: #f0b45e; --amber-tint: #33260f; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--page); }
a { color: var(--accent); }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.narrow { padding-top: 2rem; padding-bottom: 3rem; }
.hero { background: linear-gradient(180deg, var(--sky), var(--page)); padding: 3rem 0 2rem; }
.brandline { display: flex; align-items: center; gap: .75rem; }
.badge { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: var(--amber-tint); border-radius: 999px; padding: .2rem .6rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 1rem; }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; }
.card h2 { font-size: 1.05rem; margin: .75rem 0 .4rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.icon { width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: 10px; }
.card.navy .icon { color: var(--accent); background: var(--navy-tint); }
.card.teal .icon { color: var(--teal); background: var(--teal-tint); }
.card.amber .icon { color: var(--amber); background: var(--amber-tint); }
.logo { width: 56px; height: 56px; display: block; }
h1 { font-size: 2rem; line-height: 1.2; margin: 1.25rem 0 .75rem; letter-spacing: -.01em; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.5rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 .75rem; }
main section { padding: 2rem 0; border-bottom: 1px solid var(--rule); }
main section:last-child { border-bottom: 0; }
ul { padding-left: 1.25rem; } li { margin: .25rem 0; }
ul.plain { list-style: none; padding: 0; } ul.plain li { margin: .6rem 0; }
.button, button { display: inline-block; padding: .65rem 1.2rem; font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; text-decoration: none; cursor: pointer; }
.panel { background: var(--panel); border: 1px solid var(--rule) !important; border-radius: 12px; padding: 1.5rem !important; margin: 2rem 0; }
label { display: block; font-weight: 600; margin: .75rem 0 .3rem; }
input[type=email], input[type=text] { width: 100%; padding: .6rem; font: inherit; border: 1px solid var(--rule); border-radius: 8px; background: var(--page); color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 1rem 0; } legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.optional { font-weight: 400; color: var(--muted); }
label.choice { font-weight: 400; display: flex; gap: .5rem; align-items: baseline; margin: .35rem 0; }
label.consent { margin: 1rem 0 1.25rem; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fine { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
footer { color: var(--muted); font-size: .9rem; padding-top: 1rem; padding-bottom: 3rem; }
footer p { margin: .35rem 0; }
.wrap { max-width: 56rem; } .narrow { max-width: 44rem; } .panel { max-width: 34rem; margin-left: auto; margin-right: auto; } .hero h1, .lede { max-width: 40rem; }
.panel .fine { margin-top: 0; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }
@media (max-width: 600px) { h1 { font-size: 1.6rem; } .hero { padding: 2rem 0 1.5rem; } }