/* tiktok.budgts.com: the Budgts style (brand/style.css) on a plain reading page. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url("/fonts/InterDisplay-Bold.woff2") format("woff2"); }

:root {
  --ink: #1A1608;
  --text: #37352F;
  --muted: #787774;
  --line: #E9E9E7;
  --block: #F7F6F3;
  --yellow: #FCC82D;
  --yellow-soft: #FBF3DB;
  --mark: #FDE7A6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font: 17px/1.6 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--yellow-soft); }

header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
header .home { display: block; line-height: 0; }
header .home:hover { background: none; }
header img { height: 36px; width: auto; }
header nav { display: flex; gap: 20px; font-size: 15px; font-weight: 600; }
header nav a { text-decoration: none; }
header nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--yellow); }

main { padding-top: 40px; padding-bottom: 56px; }
h1 { margin: 0 0 12px; font: 700 clamp(34px, 7vw, 52px)/1.06 "Inter Display", "Inter", sans-serif; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
h2 { margin: 40px 0 8px; font: 700 24px/1.2 "Inter Display", "Inter", sans-serif; letter-spacing: -0.02em; color: var(--ink); }
p, ul, ol { margin: 0 0 14px; }
li { margin-bottom: 6px; }
strong { color: var(--ink); font-weight: 600; }
mark { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 0.12em; }
.lede { font-size: 20px; color: var(--muted); text-wrap: balance; }
.updated { color: var(--muted); font-size: 15px; }
.callout { margin: 24px 0; padding: 18px 20px; border-radius: 12px; background: var(--yellow-soft); }
.callout p:last-child { margin-bottom: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 14px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--yellow); color: var(--ink); font-weight: 600; display: grid; place-items: center; font-size: 15px; }

.copy { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.copy input { flex: 1 1 260px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--block); color: var(--ink); font: 14px/1.4 ui-monospace, Consolas, monospace; }
.copy button { padding: 12px 18px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: 600 15px "Inter", sans-serif; cursor: pointer; }
.copy button:hover { background: #000; }
.error { color: #9A3412; }

footer { padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 600; }