@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/gabarito-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/gabarito-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; }
:root { --teal: #0DAF9F; --ink: #10201F; --muted: #4A5D5A; --ground: #F5FAF9; --line: #DCE7E5; }
* { box-sizing: border-box; margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: 'Gabarito', 'Avenir Next', 'Trebuchet MS', sans-serif; line-height: 1.65; }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px; }
a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); padding: 12px 0 28px; }
.logo .jo { color: var(--teal); }
h1 { font-size: 32px; letter-spacing: -0.02em; margin-bottom: 24px; }
h2 { font-size: 20px; margin: 28px 0 8px; }
p, li { font-size: 15.5px; color: var(--muted); }
ul { padding-left: 22px; }
.placeholder { background: #FFF3CD; border: 1px dashed #D4A72C; border-radius: 6px; padding: 1px 6px; color: #7A5C00; font-weight: 600; }
.back { display: inline-block; margin-top: 36px; font-weight: 700; }