@import url('../design-tokens.css');
html,body{font-family:var(--dol-font)!important}.tarot-brand{position:relative;padding-left:48px;min-height:40px;display:grid;align-content:center;line-height:1.2;letter-spacing:.12em!important}.tarot-brand::before{content:"";position:absolute;left:0;top:0;width:36px;height:40px;background:url('/canva-logo-original.png') center/contain no-repeat}
.tarot-site-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px clamp(18px,4vw,60px);border-bottom:1px solid var(--dol-line);background:#fff}.tarot-brand{color:var(--dol-navy)!important;font-size:21px;font-weight:800;letter-spacing:.04em;text-decoration:none}.tarot-brand small{display:block;color:var(--dol-muted);font-size:11px;font-weight:500;letter-spacing:0}.tarot-site-nav nav{display:flex;align-items:center;gap:4px}.tarot-site-nav nav a{padding:8px 12px;border-radius:8px;color:var(--dol-navy);font-size:13px;font-weight:650;text-decoration:none}.tarot-site-nav nav a:hover,.tarot-site-nav nav a[aria-current=page]{background:var(--dol-plum-soft);color:var(--dol-plum)}@media(max-width:680px){.tarot-site-nav{display:block}.tarot-site-nav nav{overflow:auto;margin-top:10px}.tarot-site-nav nav a{white-space:nowrap}}
:root{font-family:'IBM Plex Sans Thai',Tahoma,system-ui,sans-serif;color:var(--dol-navy);background:var(--dol-white)}
body{background:var(--dol-white);color:var(--dol-navy)}
main{max-width:1160px;padding:clamp(28px,4vw,54px) clamp(16px,3vw,40px) 80px}
header{max-width:760px}h1,h2,.result-head h2{color:var(--dol-navy-strong)}
header p,.small,.footer,.paid-area>p:not(.eyebrow){color:var(--dol-muted)}
.eyebrow,.step{color:var(--dol-plum)}
.status,.cost,.source-state{background:var(--dol-surface);color:var(--dol-navy);border:1px solid var(--dol-line)}
.panel{border:1px solid var(--dol-line);border-radius:var(--dol-radius);box-shadow:var(--dol-shadow);background:var(--dol-white)}
.modes button,.access-modes button,.suggestions button,.result-head button{border-color:var(--dol-line);background:var(--dol-white);color:var(--dol-navy)}
.modes button.active,.access-modes button.active{border-color:var(--dol-navy);background:var(--dol-navy);color:var(--dol-white)}
.modes button:hover,.access-modes button:hover,.suggestions button:hover,.result-head button:hover{border-color:var(--dol-plum);background:var(--dol-plum-soft);color:var(--dol-plum)}
select,textarea{border-color:#bdcbd8;color:var(--dol-navy)}
#draw,#followup-form button,.paid-area .account-link{background:var(--dol-navy);color:#fff;border-radius:9px}
#draw:hover,#followup-form button:hover,.paid-area .account-link:hover{background:var(--dol-navy-strong)}
.result .interpretation{background:var(--dol-surface);color:var(--dol-navy)}
.card-fan{scrollbar-color:var(--dol-plum) var(--dol-surface)}
.card-back{border-color:#d7c4cf;background:radial-gradient(circle at 50% 50%,#fff 0 28%,transparent 29%),repeating-linear-gradient(45deg,var(--dol-navy) 0 8px,#334d6b 8px 16px)}
.card-back:focus-visible{outline-color:var(--dol-focus)}
.cards .card,.cards.single .card{border-color:var(--dol-line);box-shadow:var(--dol-shadow);color:var(--dol-navy)}
.cards .card strong,.cards.single .card strong{color:var(--dol-navy)}
.footer a{color:var(--dol-plum)}
.tarot-service-promo{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:28px 0 14px;padding:15px 18px;border:1px solid var(--dol-line);border-left:3px solid var(--dol-plum);border-radius:10px;background:#fff}.tarot-service-promo>div{display:grid;gap:3px}.tarot-service-promo small{color:var(--dol-plum);font-size:11px;font-weight:800}.tarot-service-promo strong{font-size:15px;color:var(--dol-navy)}.tarot-service-promo span{color:var(--dol-muted);font-size:12px}.tarot-service-promo a{padding:8px 11px;border-radius:8px;background:var(--dol-navy);color:#fff;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}@media(max-width:680px){.tarot-service-promo{align-items:flex-start;flex-direction:column}}

.result .interpretation{font-size:16px;font-weight:400;line-height:1.95;color:#263c55;background:#f6f8fb;padding:22px;max-width:760px}.free-reading-invite{border-top:1px solid #dce3ed;margin-top:24px;padding-top:18px}.free-reading-invite h3{font-size:18px}.free-reading-invite p{font-size:15px;line-height:1.8}.free-reading-invite a{display:inline-block;color:#fff;background:#233b57;border-radius:8px;padding:10px 16px;text-decoration:none}
