/* Unstuck AI — Apple-style: system type, black on white, Apple greys, yellow only as a marker. */
:root { --bg:#ffffff; --alt:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --muted:#6e6e73; --rule:#d2d2d7; --hl:#ffe99a; }
@media (prefers-color-scheme: dark) { :root { --bg:#000000; --alt:#111112; --card:#1c1c1e; --ink:#f5f5f7; --muted:#98989d; --rule:#38383a; --hl:#5a4a12; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Arial, sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px; }
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, sans-serif; font-weight: 600; letter-spacing: -0.02em; }
mark { background: var(--hl); color: inherit; padding: 0 3px; border-radius: 3px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap: 12px; border-bottom: 1px solid var(--rule); }
.logo { white-space:nowrap; display:flex; gap:9px; align-items:center; font-weight:600; font-size: 19px; color:var(--ink); text-decoration:none; letter-spacing:-0.01em; }
.logo img { width:30px; height:30px; }
nav { white-space: nowrap; }
nav a { margin-left:22px; color:var(--muted); text-decoration:none; font-size:14px; }
nav a:hover { color: var(--ink); }
.hero { text-align:center; padding: 72px 0 40px; }
.hero img.icon { width: 168px; height: 168px; }
.hero h1 { font-size: clamp(40px, 7vw, 72px); line-height:1.04; margin:18px 0 14px; }
.hero p.lede { color:var(--muted); font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; margin:0 auto; max-width: 720px; }
.cta { display:inline-block; margin-top:28px; background:var(--ink); color:var(--bg); padding:13px 26px; border-radius:980px; text-decoration:none; font-weight:500; font-size: 17px; }
.small { font-size:14px; color:var(--muted); }
.panel { background: var(--alt); border-radius: 28px; padding: 44px; margin: 28px 0; }
.note-card { background: var(--card); border-radius: 18px; padding: 24px 26px; max-width: 640px; margin: 0 auto; box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.note-card .label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight:600; }
.note-card .label.muted { color: var(--muted); }
.note-card .answer { font-size: 24px; font-weight: 600; line-height:1.3; letter-spacing:-0.01em; border-left: 3px solid var(--ink); padding-left: 14px; margin: 8px 0 16px; }
.note-card ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.note-card li { border-left: 2px solid var(--rule); padding-left: 12px; margin: 7px 0; }
.compare { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0; }
.compare div { background: var(--card); border-radius: 18px; padding: 22px; }
.compare h3 { margin: 0 0 6px; font-size: 21px; }
.compare p { margin: 0; color: var(--muted); font-size: 16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin:28px 0; }
.card { background:var(--alt); border-radius:18px; padding:24px; }
.card h3 { margin:0 0 6px; font-size:21px; }
.card p { margin:0; color:var(--muted); font-size:16px; }
section { padding: 20px 0; text-align: center; }
section p { max-width: 680px; margin-left:auto; margin-right:auto; }
h2 { font-size: clamp(30px, 4.5vw, 44px); margin:44px 0 12px; line-height:1.1; }
.price { text-align:center; background:var(--alt); border-radius:28px; padding:40px; }
.price .amount { font-size:56px; font-weight:600; letter-spacing:-0.03em; }
footer { border-top:1px solid var(--rule); margin-top:64px; padding:22px 0 44px; color:var(--muted); font-size:12px; }
footer a { color:var(--muted); margin-right:18px; text-decoration:none; }
.doc { text-align: left; }
.doc h1 { font-size:44px; margin-top:32px; }
.doc h2 { font-size:24px; margin-top:32px; }
.note { background:var(--alt); border-left:3px solid var(--ink); padding:12px 16px; border-radius:8px; }
@media (max-width: 720px) {
  .hero { padding-top: 40px; }
  .hero img.icon { width: 120px; height: 120px; }
  .panel { padding: 24px; border-radius: 22px; }
  .compare { grid-template-columns: 1fr; }
  nav a { margin-left: 14px; }
  nav a:first-child { display: none; }
  .note-card .answer { font-size: 21px; }
}
@media (max-width: 420px) { .logo { font-size: 17px; } .logo img { width: 26px; height: 26px; } nav a:nth-child(2) { display: none; } }
.dl-msg { max-width: 520px; margin: 20px auto 0; text-align: left; font-size: 15px; }