/* made by tools/build.py: the homepage's colour themes (from index.html), then tools/site.css. Edit those, not this. */
:root { --bg: #f3f1ec; --panel: #fbfaf7; --field: #f0ede6; --ink: #1d1c19; --ink-2: #5d5a52; --ink-3: #6f6c63; --rule: #e2ded4; --rule-2: #cfcabd; --accent: #e8501e; --accent-soft: rgba(232, 80, 30, .11); --ok: #2f7d4f; --bad: #c63d2f; --hover: rgba(29, 28, 25, .05); --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r: 8px; --fs-xs: 11.5px; --fs-sm: 13px; --fs-ctl: 14px; --fs-body: 15px; --fs-lead: 18px; color-scheme: light }
html[data-theme="ink"] { --bg: #121210; --panel: #1a1a17; --field: #22211e; --ink: #ebe8e0; --ink-2: #aaa69b; --ink-3: #86837b; --rule: #2a2925; --rule-2: #3b3934; --accent: #ff6a3d; --accent-soft: rgba(255, 106, 61, .14); --ok: #5cc08a; --bad: #ff6b5b; --hover: rgba(235, 232, 224, .06); color-scheme: dark }
:root { --fade-y: linear-gradient(180deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.012) 5.3%, rgba(0,0,0,0.076) 10.7%, rgba(0,0,0,0.210) 16.0%, rgba(0,0,0,0.397) 21.3%, rgba(0,0,0,0.603) 26.7%, rgba(0,0,0,0.790) 32.0%, rgba(0,0,0,0.924) 37.3%, rgba(0,0,0,0.988) 42.7%, rgba(0,0,0,1.000) 48.0%, rgba(0,0,0,1.000) 52.0%, rgba(0,0,0,0.988) 57.3%, rgba(0,0,0,0.924) 62.7%, rgba(0,0,0,0.790) 68.0%, rgba(0,0,0,0.603) 73.3%, rgba(0,0,0,0.397) 78.7%, rgba(0,0,0,0.210) 84.0%, rgba(0,0,0,0.076) 89.3%, rgba(0,0,0,0.012) 94.7%, rgba(0,0,0,0.000) 100.0%); --fade-x: linear-gradient(90deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.012) 3.8%, rgba(0,0,0,0.076) 7.6%, rgba(0,0,0,0.210) 11.3%, rgba(0,0,0,0.397) 15.1%, rgba(0,0,0,0.603) 18.9%, rgba(0,0,0,0.790) 22.7%, rgba(0,0,0,0.924) 26.4%, rgba(0,0,0,0.988) 30.2%, rgba(0,0,0,1.000) 34.0%, rgba(0,0,0,1.000) 66.0%, rgba(0,0,0,0.988) 69.8%, rgba(0,0,0,0.924) 73.6%, rgba(0,0,0,0.790) 77.3%, rgba(0,0,0,0.603) 81.1%, rgba(0,0,0,0.397) 84.9%, rgba(0,0,0,0.210) 88.7%, rgba(0,0,0,0.076) 92.4%, rgba(0,0,0,0.012) 96.2%, rgba(0,0,0,0.000) 100.0%); --fade-x-narrow: linear-gradient(90deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.012) 2.4%, rgba(0,0,0,0.076) 4.9%, rgba(0,0,0,0.210) 7.3%, rgba(0,0,0,0.397) 9.8%, rgba(0,0,0,0.603) 12.2%, rgba(0,0,0,0.790) 14.7%, rgba(0,0,0,0.924) 17.1%, rgba(0,0,0,0.988) 19.6%, rgba(0,0,0,1.000) 22.0%, rgba(0,0,0,1.000) 78.0%, rgba(0,0,0,0.988) 80.4%, rgba(0,0,0,0.924) 82.9%, rgba(0,0,0,0.790) 85.3%, rgba(0,0,0,0.603) 87.8%, rgba(0,0,0,0.397) 90.2%, rgba(0,0,0,0.210) 92.7%, rgba(0,0,0,0.076) 95.1%, rgba(0,0,0,0.012) 97.6%, rgba(0,0,0,0.000) 100.0%) }
html[data-theme="sand"] { --bg: #efe6d6; --panel: #faf5ec; --field: #f1e8d8; --ink: #2b2217; --ink-2: #6b5c47; --ink-3: #70624f; --rule: #e3d6c0; --rule-2: #d3c3a8; --accent: #c2541b; --accent-soft: rgba(194, 84, 27, .12); --hover: rgba(43, 34, 23, .05) }
html[data-theme="sage"] { --bg: #e8eee6; --panel: #f6f9f4; --field: #e9f0e6; --ink: #18241a; --ink-2: #4c5e4f; --ink-3: #5c6d5f; --rule: #d6e1d3; --rule-2: #c1d0bd; --accent: #2f7d4f; --accent-soft: rgba(47, 125, 79, .12); --hover: rgba(24, 36, 26, .05) }
html[data-theme="rose"] { --bg: #f6e9ea; --panel: #fdf6f6; --field: #f7eaeb; --ink: #2d1a1f; --ink-2: #6e4e56; --ink-3: #7c6168; --rule: #ecd7da; --rule-2: #dfc1c6; --accent: #c93d6b; --accent-soft: rgba(201, 61, 107, .11); --hover: rgba(45, 26, 31, .05) }
html[data-theme="sky"] { --bg: #e7eef7; --panel: #f6f9fd; --field: #e9f0f8; --ink: #142033; --ink-2: #4a5a73; --ink-3: #5b697f; --rule: #d4dfec; --rule-2: #bfcde0; --accent: #2f62e0; --accent-soft: rgba(47, 98, 224, .11); --hover: rgba(20, 32, 51, .05) }
html[data-theme="mono"] { --bg: #ffffff; --panel: #ffffff; --field: #f3f3f3; --ink: #000000; --ink-2: #4d4d4d; --ink-3: #747474; --rule: #e2e2e2; --rule-2: #c9c9c9; --accent: #000000; --accent-soft: rgba(0, 0, 0, .08); --hover: rgba(0, 0, 0, .05) }
html[data-theme="plum"] { --bg: #2a1730; --panel: #351e3c; --field: #40264a; --ink: #f3e8f4; --ink-2: #c3a9c7; --ink-3: #a088a4; --rule: #4a2f52; --rule-2: #5c3d66; --accent: #ecb22e; --accent-soft: rgba(236, 178, 46, .16); --ok: #5cc08a; --bad: #ff7a70; --hover: rgba(243, 232, 244, .07) }
html[data-theme="ocean"] { --bg: #0d1b2a; --panel: #13263a; --field: #1a3048; --ink: #e4eef8; --ink-2: #9db4cc; --ink-3: #7890a9; --rule: #1f3954; --rule-2: #2a4867; --accent: #39c6d6; --accent-soft: rgba(57, 198, 214, .15); --ok: #5cc08a; --bad: #ff7a70; --hover: rgba(228, 238, 248, .06) }
html[data-theme="forest"] { --bg: #102018; --panel: #172b21; --field: #1e362a; --ink: #e5f1e8; --ink-2: #a3bfab; --ink-3: #7b9683; --rule: #23402f; --rule-2: #2e523d; --accent: #8fd16a; --accent-soft: rgba(143, 209, 106, .15); --ok: #8fd16a; --bad: #ff7a70; --hover: rgba(229, 241, 232, .06) }
html[data-theme="ember"] { --bg: #1d1410; --panel: #281b15; --field: #32231b; --ink: #f6e9df; --ink-2: #c8ab97; --ink-3: #9b8270; --rule: #3b2a20; --rule-2: #4d372a; --accent: #ff7b3d; --accent-soft: rgba(255, 123, 61, .15); --ok: #6cc98f; --bad: #ff6b5b; --hover: rgba(246, 233, 223, .06) }
html[data-theme="midnight"] { --bg: #0b0c14; --panel: #12131f; --field: #191b2b; --ink: #e8e9f5; --ink-2: #a2a5c4; --ink-3: #7c7e9b; --rule: #1f2133; --rule-2: #2b2e46; --accent: #a78bfa; --accent-soft: rgba(167, 139, 250, .16); --ok: #5cd6a0; --bad: #ff7187; --hover: rgba(232, 233, 245, .06) }
html[data-theme="contrast"] { --bg: #000000; --panel: #0d0d0d; --field: #1a1a1a; --ink: #ffffff; --ink-2: #d0d0d0; --ink-3: #9a9a9a; --rule: #333333; --rule-2: #4d4d4d; --accent: #ffd400; --accent-soft: rgba(255, 212, 0, .18); --ok: #4dff88; --bad: #ff5c5c; --hover: rgba(255, 255, 255, .08) }
html[data-scheme="dark"] { color-scheme: dark }
:root { --c-orange: #e8501e; --c-amber: #c97a00; --c-yellow: #b38b00; --c-lime: #5b9216; --c-green: #1f9254; --c-teal: #0f8a87; --c-sky: #1786c7; --c-blue: #2f62e0; --c-indigo: #5148d6; --c-violet: #8a46d1; --c-pink: #d6408a; --c-red: #d43f3a; --c-slate: #5b6478; --c-coral: #e0603f; --c-emerald: #0f8f6b; --c-cyan: #0b8fa8; --c-purple: #7a3fc4; --c-fuchsia: #b83fc0; --c-rose: #cf3d62 }
html[data-scheme="dark"] { --c-orange: #ff7a4d; --c-amber: #f2a93b; --c-yellow: #e8c547; --c-lime: #9ccc4a; --c-green: #4cc985; --c-teal: #3cc7c2; --c-sky: #52b7f0; --c-blue: #6e95ff; --c-indigo: #8f88ff; --c-violet: #b98bf2; --c-pink: #f07ab0; --c-red: #ff6b62; --c-slate: #98a1b8; --c-coral: #ff8a68; --c-emerald: #38c99a; --c-cyan: #3cc4dc; --c-purple: #a77ff0; --c-fuchsia: #e07ce8; --c-rose: #ff7e9e }
html[data-theme="mono"], html[data-theme="contrast"] { --c-orange: var(--ink); --c-amber: var(--ink); --c-yellow: var(--ink); --c-lime: var(--ink); --c-green: var(--ink); --c-teal: var(--ink); --c-sky: var(--ink); --c-blue: var(--ink); --c-indigo: var(--ink); --c-violet: var(--ink); --c-pink: var(--ink); --c-red: var(--ink); --c-slate: var(--ink); --c-coral: var(--ink); --c-emerald: var(--ink); --c-cyan: var(--ink); --c-purple: var(--ink); --c-fuchsia: var(--ink); --c-rose: var(--ink) }
:root { --tile: color-mix(in srgb, var(--ink) 90%, var(--accent)); --tile-ink: var(--bg) }
html[data-scheme="dark"] { --tile: color-mix(in srgb, var(--bg) 55%, #000); --tile-ink: var(--ink) }
:root { --g-red: #d43f3a; --g-blue: #2f62e0; --g-yellow: #f2c230 }
html[data-theme="ink"], html[data-theme="plum"], html[data-theme="ocean"], html[data-theme="forest"], html[data-theme="ember"], html[data-theme="midnight"], html[data-theme="contrast"] { --g-red: #ff6b62; --g-blue: #6e95ff }

/* The other pages (pricing, contact, terms, privacy, refunds), in the homepage's look. tools/build.py writes site.css:
   the homepage's colour themes, copied from index.html (so the two can't drift apart), then this. The parts below
   are the homepage's own (top bar, buttons, colour band, cards, questions, footer), plus a few for these pages. */

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; min-height: 100vh; position: relative; overflow-x: hidden; background: var(--bg); color: var(--ink); font: var(--fs-body)/1.55 var(--sans); -webkit-font-smoothing: antialiased }
a { color: inherit }
::selection { background: var(--accent-soft) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.wrap { max-width: 1168px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) }
.wrap > :is(.top, .foot) { max-width: 1072px; margin-inline: auto }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px }
.mark { display: inline-flex; align-items: center; text-decoration: none }
.mark img { height: 21px; width: auto; display: block }
.mark .on-dark { display: none }
html[data-scheme="dark"] .mark .on-light { display: none }
html[data-scheme="dark"] .mark .on-dark { display: block }
.top nav { display: flex; align-items: center; gap: 4px }

/* buttons */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid transparent; background: color-mix(in srgb, var(--ink) 6%, var(--panel)); color: var(--ink); transition: background-color .15s ease, opacity .15s ease, transform .1s ease; font: 500 var(--fs-ctl)/1 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none }
.b:hover { background: color-mix(in srgb, var(--ink) 10%, var(--panel)) }
.b:active { transform: scale(.97) }
.b.primary { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.b.primary:hover { opacity: .88 }
.b.quiet { background: transparent; color: var(--ink-2) }
.b.quiet:hover, .b.quiet[aria-current="page"] { background: var(--hover); color: var(--ink) }
.b.sq { width: 34px; padding: 0 }
.b.big { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 10px }

/* a soft colour band behind the top of the page, drifting slowly, as on the homepage */
/* (in a box that clips it, so it never makes the page scroll sideways) */
.glow-box { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 1100px; overflow: hidden; pointer-events: none }
.glow { position: absolute; left: 50%; top: -300px; width: min(1800px, 170vw); height: 900px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(100deg, var(--c-orange), var(--c-pink), var(--c-violet), var(--c-indigo), var(--c-teal), var(--c-orange)) 0 0 / 300% 100%; opacity: .22;
  animation: glow-drift 40s linear infinite;
  -webkit-mask-image: var(--fade-y), var(--fade-x); -webkit-mask-composite: source-in; mask-image: var(--fade-y), var(--fade-x); mask-composite: intersect }
html[data-scheme="dark"] .glow { opacity: .2 }
@keyframes glow-drift { to { background-position: 150% 0 } }
html[data-theme="mono"] .glow, html[data-theme="contrast"] .glow { display: none }
@media (prefers-reduced-motion: reduce) { .glow { animation: none } }

/* the page's title */
.hero { text-align: center; max-width: 780px; margin: 0 auto; padding: 72px 0 0 }
.hero h1 { font: 600 64px/1.02 var(--sans); letter-spacing: -.05em; margin: 16px 0 18px; text-wrap: balance }
.hero .lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 620px; margin: 0 auto; text-wrap: pretty }
.hero .meta { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--ink-3) }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font: 600 12px var(--sans); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent) }
.eyebrow.plus { color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 13%, transparent) }
.eyebrow .i { width: 14px; height: 14px }

/* sections */
.sec { margin: 96px 0 0 }
.sec > h2 { font: 600 34px/1.1 var(--sans); letter-spacing: -.04em; margin: 0 0 8px; text-align: center }
.sec > .sub { text-align: center; color: var(--ink-2); margin: 0 auto 32px; max-width: 560px }
.small { font-size: var(--fs-sm); color: var(--ink-3) }
.center { text-align: center }
.prose a, .card a, .sub a, .faq a, .small a { color: var(--accent); text-underline-offset: 2px }

/* plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 56px auto 0; max-width: 1072px }
.plan { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--panel); border-radius: 20px; padding: 26px 26px 24px }
.plan.hot { border-color: color-mix(in srgb, var(--c-violet) 30%, var(--rule)); background: linear-gradient(160deg, color-mix(in srgb, var(--c-violet) 10%, var(--panel)), color-mix(in srgb, var(--c-pink) 8%, var(--panel))); box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--c-violet) 60%, transparent) }
.plan-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px }
.plan h3 { margin: 0; font: 600 17px var(--sans); letter-spacing: -.01em }
.price { font: 600 46px/1 var(--sans); letter-spacing: -.045em; margin: 20px 0 4px }
.price-note { margin: 0 0 14px; font: 500 var(--fs-sm) var(--sans); color: var(--ink-3) }
.plan.hot .price-note { color: var(--c-violet) }
.plan .what { color: var(--ink-2); margin: 0 0 20px }
.ticks { list-style: none; padding: 20px 0 0; margin: 0 0 24px; display: grid; gap: 10px; font-size: var(--fs-sm); border-top: 1px solid var(--rule) }
.ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45 }
.ticks .i { width: 15px; height: 15px; margin-top: 1px; color: var(--accent) }
.plan.hot .ticks .i { color: var(--c-violet) }
.plan .b { margin-top: auto; width: 100% }
.plan .after { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-3); text-align: center }
.plus-tag { display: inline-block; padding: 0 7px; border-radius: 99px; font: 600 10.5px/18px var(--sans); color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 13%, transparent) }

/* numbered steps, as on the homepage */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1072px; margin: 0 auto }
.steps .n { font: 500 var(--fs-sm) var(--sans); color: var(--accent) }
.steps h3 { margin: 6px 0 6px; font-size: 18px; letter-spacing: -.02em }
.steps p { margin: 0; color: var(--ink-2) }

/* cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 880px; margin: 0 auto }
.card { border: 1px solid var(--rule); background: var(--panel); border-radius: 14px; padding: 20px 22px 22px }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1072px }
.feature .cta-h { margin: 0; font: 600 34px/1.1 var(--sans); letter-spacing: -.04em }
.card .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 13%, transparent) }
.card .ic .i { width: 18px; height: 18px }
.card h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.01em }
.card p { margin: 0; color: var(--ink-2) }

/* a highlighted panel: the email address, a page's short version */
.feature { max-width: 880px; margin: 56px auto 0; padding: 30px 32px; border-radius: 22px; border: 1px solid var(--rule); background: linear-gradient(135deg, color-mix(in srgb, var(--c-violet) 9%, var(--panel)), color-mix(in srgb, var(--c-pink) 8%, var(--panel))) }
.feature p { margin: 12px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.6 }
.feature p b { color: var(--ink) }
.feature.mail { text-align: center }
.feature .addr { display: inline-block; margin: 14px 0 0; font: 600 clamp(26px, 4vw, 38px)/1.1 var(--sans); letter-spacing: -.035em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere }
.feature .addr:hover { color: var(--accent) }

/* long text: terms, privacy, refunds */
.prose { max-width: 720px; margin: 64px auto 0; font-size: 16px; line-height: 1.7 }
.prose h2 { font: 600 24px/1.2 var(--sans); letter-spacing: -.025em; margin: 52px 0 12px; scroll-margin-top: 24px }
.prose h2:first-child { margin-top: 0 }
.prose p, .prose ul { margin: 0 0 14px }
.prose ul { padding-left: 20px }
.prose li { margin: 6px 0 }
.prose li::marker { color: var(--ink-3) }
.prose h3 { font: 600 18px/1.3 var(--sans); letter-spacing: -.015em; margin: 28px 0 8px }
.prose code { font: 14px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--field) }

/* questions, as on the homepage */
.faq { max-width: 720px; margin: 0 auto; text-align: left }
.faq-list { border-top: 1px solid var(--rule) }
.faq details { border-bottom: 1px solid var(--rule) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 1.75px no-repeat, linear-gradient(currentColor, currentColor) center / 1.75px 12px no-repeat; color: var(--ink-3); transition: transform .2s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq summary:hover { color: var(--accent) }
.faq details p { margin: -6px 2px 18px; color: var(--ink-2); line-height: 1.6; max-width: 640px }

/* the footer, as on the homepage */
footer.foot { margin: 120px 0 28px; font-size: var(--fs-sm); color: var(--ink-3) }
footer.foot a { text-decoration: none; color: var(--ink-2) }
footer.foot a:hover { color: var(--ink); text-decoration: underline }
.sf-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px }
.sf-cols nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px }
.sf-cols h4 { margin: 0 0 4px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.sf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px }
.sf-legal { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--ink-3) }
.sf-legal a { color: var(--ink-2) !important }
@media (pointer: coarse) { .sf-cols nav { gap: 0 } .sf-cols nav a { min-height: 36px; display: inline-flex; align-items: center } }

/* smaller screens */
@media (max-width: 900px) {
  .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 520px }
  .glow { width: 100vw; -webkit-mask-image: var(--fade-y), var(--fade-x-narrow); mask-image: var(--fade-y), var(--fade-x-narrow) }
}
@media (max-width: 640px) {
  .hero { padding-top: 44px }
  .hero h1 { font-size: 44px; letter-spacing: -.045em }
  .hero .lede { font-size: 17px }
  .sec { margin-top: 72px }
  .sec > h2 { font-size: 28px }
  .cards, .cards.three { grid-template-columns: minmax(0, 1fr) }
  .feature .cta-h { font-size: 28px }
  .feature { padding: 24px 22px; margin-top: 40px }
  .prose { margin-top: 44px }
  .prose h2 { font-size: 21px; margin-top: 40px }
  .price { font-size: 40px }
  .sf-cols { grid-template-columns: 1fr 1fr } .sf-brand { grid-column: 1 / -1 }
  footer.foot { margin-top: 88px }
}
@media (max-width: 420px) { .top .b.opt { display: none } .top nav .b.quiet { padding: 0 10px } }