/* Formbell site · A2 editorial system
   Rhythm: 8px unit. Body 20/32. Every vertical gap is a multiple of 8.
   Fonts are self-hosted (SIL Open Font License): Newsreader for reading, Inter for small UI text. */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root { --ink:#1b1b1d; --soft:#55585f; --rule:#e5e1d8; --paper:#fbfaf6; --marigold:#ffb300; --serif:"Newsreader", Georgia, "Times New Roman", serif; --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:20px; line-height:32px; }
h1, h2, h3, p, ul, ol, figure, table, blockquote { margin:0; }

/* Top bar */
.top { max-width:1040px; margin:0 auto; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; font:500 14px/24px var(--sans); }
.top a { color:var(--ink); text-decoration:none; }
.top .mark { display:flex; align-items:center; gap:8px; font-weight:600; }
.top .mark img { width:24px; height:24px; display:block; }
.top nav { display:flex; gap:24px; }
.top nav a { color:var(--soft); }
.top nav a[aria-current="page"] { color:var(--ink); }

/* Article column */
main { max-width:640px; margin:0 auto; padding:64px 24px 96px; }
.kicker { font:600 14px/24px var(--sans); color:var(--soft); margin-bottom:16px; }
h1 { font-weight:500; font-size:48px; line-height:56px; letter-spacing:-.015em; margin-bottom:24px; }
.dek { font-size:22px; line-height:32px; color:var(--soft); margin-bottom:16px; }
h2 { font-weight:500; font-size:32px; line-height:40px; letter-spacing:-.01em; margin:64px 0 16px; }
h3 { font:600 14px/24px var(--sans); color:var(--ink); margin:32px 0 8px; }
p { margin-bottom:16px; }
ul, ol { padding-left:24px; margin-bottom:16px; }
li { margin-bottom:8px; padding-left:4px; }
strong, b { font-weight:500; }
a { color:var(--ink); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 4px var(--marigold); border-radius:2px; }
.soft { color:var(--soft); font-size:18px; line-height:32px; }
hr { border:0; border-top:1px solid var(--rule); margin:64px 0 32px; }
code { font:500 15px/24px var(--sans); background:#f1eee6; padding:2px 6px; border-radius:4px; overflow-wrap:anywhere; }

/* Sections with a short marigold marker */
.section { margin-top:80px; padding-top:32px; border-top:1px solid var(--rule); }
.section > h2:first-of-type, .section > .num + h2 { margin-top:0; }
.num { font:600 14px/24px var(--sans); display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.num::before { content:""; width:16px; height:3px; background:var(--marigold); border-radius:2px; }

/* Figures: whole product screens only */
figure { margin:48px 0; }
figure img { display:block; max-width:100%; height:auto; border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 16px 40px -24px rgba(27,27,29,.35); }
figure.narrow img { width:270px; }
figcaption { font:400 14px/24px var(--sans); color:var(--soft); margin-top:16px; }

/* Ruled lists: "You'll need" and simple key/value tables */
.ruled { list-style:none; padding:0; margin:0 0 16px; }
.ruled li { display:flex; gap:16px; margin:0; padding:8px 0 7px; border-bottom:1px solid var(--rule); }
.ruled li:first-child { border-top:1px solid var(--rule); padding-top:7px; }
.ruled .k { flex:0 0 168px; }
.ruled .v { color:var(--soft); }
table { width:100%; border-collapse:collapse; margin-bottom:16px; font-size:18px; line-height:32px; }
th, td { text-align:left; vertical-align:top; padding:8px 16px 7px 0; border-bottom:1px solid var(--rule); }
th { font:600 14px/24px var(--sans); color:var(--ink); padding-top:8px; }
thead th { border-bottom:1px solid var(--ink); }

/* A rule written as one sentence */
.rule { font-size:24px; line-height:32px; margin:24px 0; }

/* Quiet aside instead of boxed callouts */
blockquote { margin:24px 0; padding-left:24px; border-left:1px solid var(--rule); color:var(--soft); }
blockquote p:last-child { margin-bottom:0; }

/* Plan blocks on the landing page */
.plans { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:24px 0 16px; padding-top:24px; border-top:1px solid var(--rule); }
.plans h3 { margin-top:0; }
.plans .price { font-size:24px; line-height:32px; margin-bottom:8px; }

/* Call to action */
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:32px 0 16px; font:500 15px/24px var(--sans); }
.cta a { background:var(--ink); color:#fff; text-decoration:none; padding:12px 24px; border-radius:999px; }
.cta a:hover { background:#000; }
.cta span { color:var(--soft); }

footer { max-width:640px; margin:0 auto; padding:32px 24px 64px; border-top:1px solid var(--rule); font:400 13px/24px var(--sans); color:var(--soft); }
footer a { color:var(--soft); }

/* Phones: a 4px rhythm (18/28 body, 20/28 lead) keeps line length readable. Intended exception to the 8px desktop rhythm. */
@media (max-width:640px) {
  body { font-size:18px; line-height:28px; }
  .top { padding:16px 20px; }
  .top nav { gap:16px; }
  main { padding:40px 20px 80px; }
  h1 { font-size:36px; line-height:44px; }
  h2 { font-size:26px; line-height:32px; margin-top:48px; }
  .dek { font-size:20px; line-height:28px; }
  .rule { font-size:20px; line-height:28px; }
  .ruled li { flex-direction:column; gap:0; }
  .ruled .k { flex:none; }
  .plans { grid-template-columns:1fr; gap:24px; }
  .section { margin-top:56px; }
}

/* Images inside guide paragraphs (whole product screens) */
main p > img { display:block; max-width:100%; height:auto; border-radius:8px; margin:32px 0 0; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 16px 40px -24px rgba(27,27,29,.35); }
main p > img.sidebar-example { width:min(100%, 270px); }
main p:has(> em:only-child) { font:400 14px/24px var(--sans); color:var(--soft); margin-top:16px; margin-bottom:32px; }
main p:has(> em:only-child) em { font-style:normal; }
.muted { color:var(--soft); }