:root { --bg: #fcf8ec; --ink: #1e212c; --body: #333; --muted: #6b6968; --ph-bg: #fff4c2; --ph-line: #e0b100; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: "Gabarito", Arial, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.draft-bar { background: #1e212c; color: #fff; font-size: 14px; padding: 8px 16px; text-align: center; }
.ph { background: var(--ph-bg); outline: 1px dashed var(--ph-line); border-radius: 4px; padding: 0 3px; }
header.top { padding: 28px 0 0; text-align: center; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo img { width: 60px; height: 60px; object-fit: contain; mix-blend-mode: multiply; }
.logo-word { display: flex; flex-direction: column; font-family: "Fredoka", sans-serif; font-weight: 700; line-height: .95; font-size: 25px; color: var(--ink); text-align: left; }
.logo-word .frei { color: #e8890c; }
.logo-word small { font-size: 12px; color: var(--ink); }
.box { background: #fffefb; border: 1px solid #f0e9d8; border-radius: 28px; padding: 56px 64px; margin: 32px 0; box-shadow: 0 18px 40px rgba(90,70,30,.05); }
h1 { font-family: "Fraunces", Georgia, serif; font-weight: 700; color: var(--ink); font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 0 0 28px; }
h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 32px 0 8px; }
p { margin: 0 0 14px; }
a { color: #456b97; }
.back { margin-top: 36px; }
footer { text-align: center; font-size: 14px; color: var(--muted); padding: 20px 16px 60px; }
footer a { color: var(--muted); margin: 0 8px; }
@media (max-width: 640px) { .box { padding: 36px 22px; border-radius: 22px; } }