*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --orange: #ff5e00; --black: #1a1a1a; --bg: #f3f4f6; --white: #fff; --border: 2px solid var(--black); --shadow: 5px 5px 0 var(--black); --radius: 12px; --gray600: #4b5563; --mono: 'SF Mono', Menlo, Consolas, monospace; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; color: var(--black); line-height: 1.6; -webkit-font-smoothing: antialiased; background: var(--bg); background-image: linear-gradient(rgba(26,26,26,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,.05) 1px, transparent 1px); background-size: 40px 40px; }
a { color: var(--black); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.bar { background: var(--black); padding: 12px 20px; }
.bar-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 18px; color: var(--white); text-decoration: none; }
.logo img { border-radius: 8px; }
.logo span, .footer span { color: var(--orange); }
.cta { display: inline-block; padding: 8px 18px; background: var(--orange); color: var(--white); font-weight: 700; font-size: 14px; border: 2px solid var(--white); border-radius: var(--radius); text-decoration: none; }
main { max-width: 720px; margin: 0 auto; padding: 40px 20px 56px; }
.kicker { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--orange); }
h1 { font-size: clamp(30px, 6vw, 42px); font-weight: 900; line-height: 1.15; margin: 8px 0 12px; }
h2 { font-size: 22px; font-weight: 900; margin: 32px 0 8px; }
h3 { font-size: 18px; font-weight: 800; margin: 24px 0 4px; }
p, li { font-size: 17px; margin-bottom: 10px; }
ol, ul { padding-left: 22px; }
blockquote { border-left: 4px solid var(--orange); padding-left: 16px; margin: 8px 0 16px; }
.lede { font-size: 19px; }
.card { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 20px 12px; margin: 24px 0; }
.card h2 { margin-top: 0; }
.card .cta { display: inline-block; margin: 4px 0 8px; padding: 12px 20px; font-size: 18px; border-color: var(--black); box-shadow: 3px 3px 0 var(--black); text-decoration: none; }
.card .cta:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.small { font-size: 14px; color: var(--gray600); }
.footer { background: var(--black); color: var(--white); text-align: center; padding: 32px 20px 24px; font-size: 14px; }
.footer a { color: rgba(255,255,255,.75); margin: 0 8px; display: inline-block; }