:root {
  --bg: #F1EEE9;
  --card: #FFFFFF;
  --ink: #2E2F33;
  --muted: #7C7C80;
  --line: #E4E0DA;
  --accent: #F0381F;
  --cta: #2E3035;
  --cta-ink: #FFFFFF;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Lexend", system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.app { max-width: 430px; min-height: 100dvh; margin: 0 auto; padding: 12px 16px 16px; display: flex; flex-direction: column; }

/* header */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 36px; }
.back { justify-self: start; border: 0; background: #E6E2DC; border-radius: 8px; padding: 4px 10px; font-size: 14px; }
.logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.logo .flame { width: 18px; height: 18px; }
.progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 0 10px; }
.seg { position: relative; height: 2px; background: var(--line); }
.seg i { position: absolute; inset: 0; width: 0; background: var(--accent); transition: width .35s ease; }
.seg::after { content: ""; position: absolute; right: -2px; top: -4px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); }
.seg.done::after { content: "✓"; border: 0; color: var(--accent); font-size: 10px; top: -8px; right: -4px; background: transparent; }
.seg.active::after { border-color: var(--accent); }
.section { text-align: center; color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: .06em; }

/* screen body */
.screen { flex: 1; display: flex; flex-direction: column; animation: in .28s ease; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }
h1 { font-size: 22px; line-height: 1.3; text-align: center; margin: 12px 0; font-weight: 600; }
.sub { text-align: center; color: var(--ink); opacity: .85; margin: -4px 0 12px; line-height: 1.5; }
.spacer { flex: 1; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 13px 16px; font-size: 16px; transition: border-color .15s, transform .1s; }
.opt:active { transform: scale(.98); }
.opt.sel { border-color: var(--accent); }
.opt .e { font-size: 20px; width: 24px; text-align: center; }
.opt .r { margin-left: auto; color: var(--muted); }
.opt .box { margin-left: auto; width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 14px; }
.opt.sel .box { background: var(--accent); border-color: var(--accent); }

.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.likert .opt { justify-content: center; padding: 18px 0; font-weight: 600; }
.likert-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: 8px; }

.info { text-align: center; }
.art { font-size: 96px; line-height: 1; margin: 40px 0 28px; filter: drop-shadow(0 8px 16px rgba(240,56,31,.15)); }
.info h2 { font-size: 20px; margin: 0 0 8px; }
.info p { line-height: 1.6; margin: 0; }

.cover { margin: 8px auto 16px; width: 156px; height: 230px; border-radius: 4px 10px 10px 4px; padding: 18px 14px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; box-shadow: -6px 0 0 rgba(0,0,0,.12) inset, 0 12px 24px rgba(0,0,0,.15); }
.cover b { font-size: 22px; line-height: 1.15; }
.cover small { opacity: .9; }
.cover.round { width: 170px; height: 170px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; }
.swipe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.swipe .opt { flex-direction: column; justify-content: center; padding: 18px 0; font-size: 18px; }
.swipe .opt span:first-child { font-size: 28px; }
.no span:first-child { color: var(--accent); }
.yes span:first-child { color: #1F9D63; }

.cta { width: 100%; border: 0; border-radius: var(--radius); padding: 15px; background: var(--cta); color: var(--cta-ink); font-weight: 600; font-size: 16px; margin-top: 16px; }
.cta.red { background: var(--accent); }
.cta:disabled { background: #A9A9AD; cursor: default; }
.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.8; }
.foot a { color: inherit; text-decoration: none; }

/* landing */
.landing h1 { font-size: clamp(26px, 8vw, 34px); font-weight: 700; line-height: 1.15; margin: 20px 0 16px; }
.landing .strike { position: relative; }
.landing .strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 3px; background: var(--accent); transform: rotate(-3deg); }
.accent { color: var(--accent); }
.badges { display: flex; justify-content: center; gap: 18px; }
.badge { text-align: center; font-size: 12px; font-weight: 600; padding: 8px 18px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); }
.badge strong { display: block; font-size: 18px; }
.hero { position: relative; text-align: center; margin: 28px 0 8px; font-size: 120px; }
.bubble { position: absolute; left: 8px; top: -14px; background: #2B1414; color: #fff; font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: 12px; transform: rotate(-5deg); }
.quote { font-family: "Lora", serif; font-style: italic; text-align: center; font-size: 18px; margin-top: 8px; }

/* loader */
.crafting h1 { font-size: 30px; font-weight: 700; margin-top: 28px; }
.bar { display: flex; justify-content: space-between; font-weight: 600; margin-top: 20px; }
.track { height: 6px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--accent); }
.review { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-top: 12px; line-height: 1.55; font-size: 14px; animation: in .4s ease; }
.review header { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 8px; }
.stars { color: #F6B100; letter-spacing: 2px; }

/* email */
.email h1 { text-align: left; font-size: 22px; margin-top: 24px; }
.lock { color: var(--ink); font-size: 14px; margin-bottom: 16px; }
.field { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border-radius: var(--radius); border: 1.5px solid var(--line); background: #F7F5F2; outline: none; }
.field:focus { border-color: var(--accent); }

.suggest { text-align: center; margin-top: 10px; }
.suggest small { display: block; color: var(--muted); margin-bottom: 4px; }
.suggest button { display: block; margin: 4px auto; border: 0; background: none; color: var(--accent); font-weight: 600; }

/* paywall — layout mirrors the reference get-pro page */
.promo { background: #3A1F12; border: 2px dashed #F7A64A; border-radius: 14px; padding: 12px 14px; color: #fff; margin-top: 8px; }
.promo-title { text-align: center; font-size: 22px; font-weight: 700; }
.promo-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; border-top: 1px dashed #F7A64A; padding-top: 10px; }
.coupon { border: 1.5px solid #fff; border-radius: 10px; padding: 6px 12px; font-weight: 600; }
.clock { background: #fff; color: var(--ink); border-radius: 8px; padding: 4px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sticky { position: fixed; z-index: 5; left: 50%; top: 0; width: min(430px, 100%); transform: translate(-50%, -100%); transition: transform .25s; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: #3A1F12; border-bottom: 2px dashed #F7A64A; }
.sticky.show { transform: translate(-50%, 0); }
.claim { border: 2px solid #F7A64A; background: #FFF4E6; color: #E07A00; font-weight: 700; border-radius: 10px; padding: 8px 14px; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.summary div { background: var(--card); border-radius: var(--radius); padding: 12px; font-size: 13px; color: var(--muted); }
.summary b { display: block; color: var(--ink); font-size: 15px; margin-top: 2px; }
.pw-dark { background: #22201F; color: #fff; border-radius: 18px; padding: 18px 12px; margin: 12px -4px; display: flex; flex-direction: column; gap: 10px; }
.pw-dark h2 { text-align: center; margin: 0 0 4px; font-size: 20px; }
.pw-dark h3 { margin: 14px 4px 0; font-size: 17px; }
.pw-light { margin: 18px 0; }
.pw-light h2 { text-align: center; font-size: 20px; }
.plan { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; width: 100%; background: #2F2C2A; color: #fff; border: 1.5px solid #46413D; border-radius: var(--radius); padding: 14px; text-align: left; }
.plan.pop { padding-top: 34px; }
.plan.sel { border-color: var(--accent); background: #3A2320; }
.dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #6B6560; flex: none; }
.sel > .dot { border: 6px solid var(--accent); background: #fff; }
.pl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pl b { font-size: 18px; font-weight: 500; }
.pl s, .wpd { color: #9C9590; }
.save { align-self: flex-start; background: rgba(240,56,31,.2); color: #FF7A66; border-radius: 6px; padding: 2px 8px; font-weight: 600; font-size: 12px; }
.sel .save { background: var(--accent); color: #fff; }
.wpd { font-size: 13px; color: #FF7A66 !important; }
.big { display: flex; align-items: flex-start; font-size: 58px; font-weight: 300; line-height: .9; }
.big sup { font-size: 15px; font-weight: 400; margin-top: 4px; }
.big > span { display: flex; flex-direction: column; margin-left: 2px; }
.big small { font-size: 9px; letter-spacing: .04em; }
.plan .tag { position: absolute; top: 0; left: 0; right: 0; text-align: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 4px; border-radius: 10px 10px 0 0; }
.method { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; width: 100%; background: #2F2C2A; color: #fff; border: 1.5px solid #46413D; border-radius: var(--radius); padding: 14px; text-align: left; }
.method ul { grid-column: 1 / -1; margin: 0; padding-left: 4px; list-style: none; color: #CFC9C4; font-size: 13px; line-height: 1.7; }
.method li::before { content: "✓ "; color: #3CCB7F; }
.method .pay { grid-column: 1 / -1; margin-top: 4px; text-align: center; background: #fff; color: #111; }
.secure { grid-column: 1 / -1; text-align: center; font-size: 11px; color: #CFC9C4; }
.guarantee { background: #2F2C2A; border-radius: var(--radius); padding: 14px; }
.guarantee h3 { margin: 0 0 6px; }
.guarantee p { margin: 0; line-height: 1.5; color: #E8E2DD; font-size: 14px; }
.benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.benefits li { background: var(--card); border-radius: var(--radius); padding: 12px 14px; }
.benefits li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
details { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: 8px 0 0; line-height: 1.5; color: var(--muted); }
.fine { color: #9C9590; font-size: 11px; line-height: 1.5; text-align: center; margin: 6px 0 0; }

/* Kaapstad Kompas additions */
.cover.place { width: 100%; height: 190px; border-radius: 16px; align-items: flex-start; justify-content: flex-end; gap: 4px; }
.cover .ce { font-size: 56px; margin-bottom: auto; }
.pl .note { color: #CFC9C4; font-size: 11px; }
.art.spin { animation: spin 3s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.track i.indet { width: 35%; animation: indet 1.4s ease-in-out infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.opt .r { font-size: 13px; }

/* language + currency pickers */
.prefs { justify-self: end; display: flex; gap: 4px; }
.prefs select { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 3px 4px; }

/* place pick screens */
.pick-head { text-align: center; }
.pick-art { font-size: 40px; display: block; margin-top: 4px; }
.pick-head h1 { margin: 4px 0 8px; }
.place-opt { align-items: flex-start; }
.pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pinfo small { color: var(--muted); font-size: 12px; }
.pdesc { font-size: 13px; color: var(--ink); opacity: .75; line-height: 1.4; }
.place-opt .box { flex: none; margin-top: 2px; }
.pick-bar { position: sticky; bottom: 0; padding: 8px 0 12px; background: linear-gradient(transparent, var(--bg) 30%); }