:root{--bg:#0f1117;--panel:#171a23;--ink:#e9ecf3;--muted:#9aa3b5;--line:#262b38;--accent:#f5c451;--accent-ink:#1a1400;--ok:#6fd39a;--err:#ff8f8f;--max:960px;--head:#151a2c;--head-ink:#f3f0e6;--foot:#0a0c12;--foot-ink:#8b93a6;--hero:linear-gradient(180deg,#1a1630 0%,#0f1117 100%)}
@media (prefers-color-scheme: light){:root{--bg:#fbfaf7;--panel:#ffffff;--ink:#181a20;--muted:#5d6472;--line:#e6e2d8;--accent:#c98f00;--accent-ink:#fff;--head:#1d2140;--head-ink:#f6f2e8;--foot:#14172b;--foot-ink:#b9bfd0;--hero:linear-gradient(180deg,#f3ecd9 0%,#fbfaf7 100%)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header{background:var(--head);color:var(--head-ink);border-bottom:3px solid var(--accent)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:.2px;text-decoration:none}
.brand span{color:var(--accent)}
nav a{margin-left:20px;color:var(--head-ink);opacity:.72;text-decoration:none;font-size:15px}
nav a:hover,nav a[aria-current]{opacity:1;border-bottom:2px solid var(--accent)}
.hero{padding:72px 0 40px;position:relative}
body{background:var(--bg)}
main.wrap{position:relative}
main.wrap::before{content:'';position:absolute;left:50%;top:0;width:100vw;height:360px;transform:translateX(-50%);background:var(--hero);z-index:-1}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.12;margin:0 0 16px;letter-spacing:-.5px}
.hero p.lead{font-size:19px;color:var(--muted);max-width:640px;margin:0 0 28px}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:24px 0 48px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
.card h2,.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0 0 14px;color:var(--muted)}
.card .cta{display:inline-block;margin-top:6px;font-weight:600;text-decoration:none;color:var(--accent)}
section{padding:24px 0}
h2.section{font-size:24px;margin:0 0 12px}
ul.plain{padding-left:20px;color:var(--muted)}
ul.plain li{margin:6px 0}
.tiers{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:16px 0 8px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
.tier h3{margin:0 0 4px;font-size:17px}.tier .soon{font-size:12px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.tier p{margin:8px 0 0;color:var(--muted);font-size:15px}
form.waitlist{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;max-width:560px;margin:8px 0 24px}
form.waitlist h3{margin:0 0 6px;font-size:20px}form.waitlist p{margin:0 0 16px;color:var(--muted)}
label{display:block;font-size:14px;color:var(--muted);margin:12px 0 6px}
input[type=email],textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
textarea{min-height:76px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{margin-top:16px;padding:12px 20px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;cursor:pointer}
button[disabled]{opacity:.6;cursor:default}
.msg{margin-top:12px;font-size:15px;min-height:22px}.msg.ok{color:var(--ok)}.msg.err{color:var(--err)}
.fine{font-size:13px;color:var(--muted)}
footer{background:var(--foot);border-top:3px solid var(--accent);margin-top:48px;padding:28px 0;color:var(--foot-ink);font-size:14px}
footer a{color:var(--foot-ink)}
.reading-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;margin:8px 0 24px}
.reading-box h2.section{margin-top:0}
form.reading{max-width:640px}
select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.result{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.playing-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between}
.playing-card .pos{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.playing-card .name{font-weight:600;line-height:1.3}
.playing-card.reversed .name{color:var(--muted)}.playing-card em{font-style:normal;font-size:12px;color:var(--muted)}
.reading-text p{margin:0 0 12px}
.upsell{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--bg);border:1px dashed var(--line);color:var(--muted)}
.upsell a{color:var(--accent);font-weight:600}
.cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:start}
.pc{margin:0;text-align:center}
.pc svg{width:100%;max-width:200px;height:auto;display:block;margin:6px auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.pc .pos{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pc .name{font-weight:600;font-size:14px;line-height:1.3}.pc .name em{font-style:normal;font-size:12px;color:var(--muted)}
.pc-rank{font:700 30px/1 "Avenir Next Condensed","Futura","Helvetica Neue",Arial,sans-serif;letter-spacing:-1px}
.pc-suit{font:28px/1 "Helvetica Neue",Arial,sans-serif}
.pc-label{font:700 12px/1 "Avenir Next Condensed","Futura","Helvetica Neue",Arial,sans-serif;letter-spacing:.16em}
.chat{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding:4px 2px;margin:10px 0 14px}
.bubble{max-width:85%;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.bubble p{margin:0 0 8px}.bubble p:last-child{margin:0}
.bubble.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-color:transparent}
.bubble.bot{align-self:flex-start;border-top-left-radius:4px}
form.consult{max-width:none}form.consult textarea{min-height:64px}
form.consult .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}form.consult .row button{margin-top:12px}form.consult .msg{min-height:0;margin-top:12px}
.contact-hero{display:flex;gap:28px;align-items:flex-start;padding-top:56px}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.25);flex:0 0 auto}
@media (max-width:560px){.contact-hero{flex-direction:column;gap:16px}}
form.contact{max-width:680px}form.contact select{margin-bottom:4px}
textarea[readonly],select[disabled]{background:transparent;border-color:transparent;padding-left:0;color:var(--ink);opacity:1}
select[disabled]{appearance:none;-webkit-appearance:none}
/* Spread layouts, laid out as on a table (Trello 24) */
.cards[data-spread]{display:grid;gap:14px;justify-content:center;justify-items:center;align-items:start;max-width:720px;margin:0 auto 18px}
.cards[data-spread] .pc{width:100%;max-width:200px}
.cards[data-spread=single]{grid-template-columns:minmax(150px,200px)}
.cards[data-spread=two]{grid-template-columns:repeat(2,minmax(120px,200px))}
.cards[data-spread=three]{grid-template-columns:repeat(3,minmax(100px,200px))}
.cards[data-spread=pora]{grid-template-columns:repeat(4,minmax(90px,170px))}
.cards[data-spread=cross]{grid-template-columns:repeat(3,minmax(96px,170px));grid-template-areas:". above ." "left center ." ". below ."}
.cards[data-spread=cross] .pc:nth-child(1){grid-area:center}
.cards[data-spread=cross] .pc:nth-child(2){grid-area:left}
.cards[data-spread=cross] .pc:nth-child(3){grid-area:below}
.cards[data-spread=cross] .pc:nth-child(4){grid-area:above}
.cards[data-spread] .pc .pos{display:block;min-height:1.4em;line-height:1.2;font-size:11px}
@media (max-width:560px){
  .cards[data-spread]{gap:10px}
  .cards[data-spread=pora]{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .cards[data-spread=three]{grid-template-columns:repeat(3,1fr)}
  .cards[data-spread=cross]{grid-template-columns:repeat(3,1fr)}
}
.question-static,.spread-static{margin:0 0 4px;color:var(--ink)}
/* Full-screen deal overlay (Trello 25, 32, 33) */
.deal{--deckw:110px;--deckh:154px;position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 45%,#2a2f52 0%,#12152a 70%);opacity:0;transition:opacity .45s;cursor:pointer;overflow:hidden}
.deal.on{opacity:1}
.deal-stage{position:relative;width:min(760px,100vw);height:100vh;height:100dvh;margin:0 auto}
.deal-msg{position:absolute;top:10px;left:0;right:0;text-align:center;color:#f3d98a;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0;z-index:3}
.deal-skip{position:absolute;top:12px;right:14px;color:#8b93a6;font-size:12px;margin:0;z-index:3}
.deal-deck{position:absolute;left:calc(50% - var(--deckw) / 2);top:calc(50% - var(--deckh) / 2);width:var(--deckw);height:var(--deckh);z-index:2}
.deal-card{position:absolute;inset:0;border-radius:10px;background-size:cover;box-shadow:0 2px 6px rgba(0,0,0,.45);transform:translate(0,0) rotate(0);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.deal-deck.bursting .deal-card{transition:transform .4s cubic-bezier(.6,0,1,1)}
.deal-deck.returning .deal-card{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.deal-deck.breathing{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.deal-slots{position:absolute;left:0;right:0;top:44px;bottom:calc(var(--deckh) / 2 + 28px);visibility:hidden;align-content:center;max-width:680px;margin:0 auto;z-index:1}
.deal-slots .pos{color:#f3d98a;visibility:hidden;opacity:0;transition:opacity .3s}
.deal.dealing .deal-slots .pos{visibility:visible;opacity:1}
.deal-slot-box{width:100%;aspect-ratio:200/280;max-width:150px;margin:0 auto}
.deal-fly{position:absolute;transition:left .45s cubic-bezier(.2,.7,.2,1),top .45s cubic-bezier(.2,.7,.2,1);perspective:900px;z-index:4}
.deal-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease-in-out}
.deal-fly.flipped .deal-inner{transform:rotateY(180deg)}
.deal-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;background-size:cover;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.deal-face.front{transform:rotateY(180deg);background:#f3ecdd}
.deal-face.front figure{margin:0;height:100%}.deal-face.front svg{width:100%;height:100%;display:block;margin:0;filter:none}
/* Interactive dealing (card 45): the deck waits, a triangle bobs above it, the reading grows in a panel. */
.deal.interactive{cursor:default}.deal.interactive .deal-deck{cursor:pointer}
.deal-hint{position:absolute;left:calc(50% - 11px);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:15px solid rgba(243,217,138,.7);z-index:3;animation:bob 1.25s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.deal.interactive .deal-slots{top:40px;bottom:calc(36vh + var(--deckh) / 2 + 20px)}
.deal.interactive .deal-slot-box{max-width:118px}
.deal-panel{position:absolute;left:12px;right:12px;bottom:calc(var(--deckh) / 2 + 14px);max-height:36vh;overflow:auto;background:rgba(18,21,42,.94);border:1px solid #3b3f66;border-radius:12px;padding:12px 14px;color:#e9ecf3;font-size:15px;line-height:1.55;z-index:3;cursor:auto}
.deal-para p{margin:0 0 8px}.deal-para:last-child p:last-child{margin:0}.deal-closing{border-top:1px dashed #3b3f66;padding-top:8px;margin-top:4px}
.deal-react label{display:block;margin:8px 0 0;color:#b9bfd0;font-size:13px}
.deal-react textarea{width:100%;margin-top:6px;min-height:44px;padding:8px 10px;border-radius:8px;border:1px solid #3b3f66;background:#0f1117;color:#e9ecf3;font:inherit;font-size:14px;resize:vertical}
.deal-react .deal-next{margin-top:8px;padding:8px 14px;font-size:14px}
.deal-skip.deal-rest{color:#f3d98a;cursor:pointer;text-decoration:underline}
@media (max-width:560px){.deal{--deckw:84px;--deckh:118px}.deal-slot-box{max-width:104px}.deal-slots{top:40px}.deal.interactive .deal-slot-box{max-width:78px}.deal-panel{max-height:40vh;font-size:14px}.deal.interactive .deal-slots{bottom:calc(40vh + var(--deckh) / 2 + 18px)}
/* Phone width: the top line and "Deal the rest" stack instead of colliding; the slots start below both. */
.deal.interactive .deal-msg{top:8px;font-size:12px;padding:0 12px}.deal.interactive .deal-skip{top:30px;right:auto;left:0;width:100%;text-align:center}.deal.interactive .deal-slots{top:56px;bottom:calc(34vh + var(--deckh) / 2 + 18px);align-content:start}.deal.interactive .deal-panel{max-height:34vh}
/* The cross has three rows; smaller cards so it fits above the panel without spilling under the header. */
.deal.interactive .cards[data-spread=cross] .deal-slot-box{max-width:60px}.deal.interactive .cards[data-spread=cross]{gap:8px}}
@media (prefers-reduced-motion: reduce){.deal-deck .deal-card{transition:none!important}.deal-deck.breathing{animation:none}.deal-fly,.deal-inner{transition:none}}
.legal{max-width:720px}.legal h2{font-size:20px;margin:28px 0 8px}.legal p,.legal li{color:var(--ink)}.legal p.lead{color:var(--muted)}.legal .hero{padding-bottom:8px}
.tier .price{font-size:26px;font-weight:700;margin:6px 0 8px;color:var(--ink)}.tier .price span{font-size:13px;font-weight:400;color:var(--muted)}

/* Beta accounts (card 46) */
.auth-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.auth-grid{grid-template-columns:1fr 1fr}}
form.auth{display:flex;flex-direction:column;gap:.5rem}
form.auth h2{margin:0 0 .25rem}
form.auth input,form.auth select{font:inherit;padding:.6rem .7rem;border:1px solid var(--line,#ccc);border-radius:.5rem;background:var(--bg,#fff);color:inherit}
form.auth button{align-self:flex-start;margin-top:.25rem}
form.auth.inline{flex-direction:row;align-items:center;gap:1rem}
.account .lead strong{font-weight:600}

.tier .price s{opacity:.55;text-decoration-thickness:1px}.tier .price .beta-price{display:inline-block;font-size:14px;font-weight:700;color:#1a1400;background:var(--accent);border-radius:999px;padding:1px 10px;vertical-align:middle}
.consult-account{margin-top:1rem}.consult-account .saved-note{margin:0}.consult-account .request-assessment{margin-top:.5rem}.consult-account .request-msg{margin-top:.5rem}
.journal .entry{border-top:1px solid var(--line,#ddd);padding:1rem 0}.journal .entry header{font-size:.9rem;opacity:.8}.journal .cards-line{margin:.3rem 0}.journal details{margin:.3rem 0}.journal .del{font-size:.85rem;opacity:.7}button.again{margin-top:.5rem}
/* Inline feedback (card 44): selection bar, pick mode, comment panel, corner pill */
.notes-ui[hidden]{display:none!important}
.notes-ui{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
.notes-bar{position:absolute;z-index:60;display:flex;gap:2px;padding:4px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.notes-bar button{margin:0;padding:6px 12px;border-radius:7px;background:transparent;color:var(--ink);font-weight:600;font-size:14px}
.notes-bar button:hover{background:var(--bg)}.notes-bar .notes-comment{background:var(--accent);color:var(--accent-ink)}.notes-bar .notes-x{padding:6px 9px;opacity:.7}
.notes-bar.sheet{position:fixed;left:12px;right:12px;bottom:12px;top:auto;justify-content:center;padding:8px}
.notes-pill{position:fixed;left:14px;bottom:14px;z-index:59;margin:0;padding:8px 14px;border-radius:999px;background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.22);font-size:13px;font-weight:600;opacity:.85}

.notes-pill:hover{opacity:1}
.notes-banner{position:fixed;left:0;right:0;top:0;z-index:61;display:flex;gap:14px;align-items:center;justify-content:center;padding:10px 14px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.notes-banner button{margin:0;padding:6px 12px;font-size:13px;background:rgba(0,0,0,.18);color:inherit}
body.notes-picking main *,body.notes-picking .band *,body.notes-picking footer *{cursor:crosshair!important}
.notes-hover{outline:2px solid var(--accent)!important;outline-offset:3px;border-radius:6px}
.notes-panel{position:fixed;z-index:62;right:16px;bottom:16px;width:min(420px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.35);padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s}
.notes-panel.on{opacity:1;transform:none}
.notes-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.notes-head .notes-x{margin:0;padding:2px 8px;background:transparent;color:var(--muted);font-size:20px}
.notes-ctx{margin:0 0 8px;font-size:13px;color:var(--muted);max-height:4.5em;overflow:hidden}.notes-ctx q{color:var(--ink)}
.notes-panel textarea{width:100%;min-height:72px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;resize:vertical}
.notes-panel label{display:block;margin:8px 0 0;font-size:12px;color:var(--muted)}.notes-panel input[type=email]{width:100%;margin-top:4px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.notes-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notes-row{display:flex;align-items:center;gap:12px}.notes-row button{margin-top:10px;padding:8px 16px;font-size:14px}.notes-msg{font-size:13px;margin-top:10px}.notes-msg.ok{color:var(--ok)}.notes-msg.err{color:var(--err)}
@media (max-width:560px){.notes-panel{left:10px;right:10px;bottom:10px;width:auto}.notes-pill{bottom:10px;left:auto;right:10px;padding:6px 10px;font-size:12px}}
body:has(.deal) .notes-ui{display:none!important} /* nothing of ours over the reading overlay */
@media print{.notes-ui{display:none}}
dl.method{margin:8px 0 20px}dl.method dt{font-weight:600;margin-top:14px}dl.method dd{margin:2px 0 0;color:var(--ink)}.legal h3{font-size:17px;margin:22px 0 0}
.share{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.share-go{font-weight:600}
.share-q{display:block;margin-top:10px;font-size:14px;color:var(--muted)}
.share-q input{margin-right:6px}
.share-out{display:flex;gap:8px;margin-top:10px}
.share-url{flex:1;min-width:0;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted)}
.reading-shared .cards-line{font-weight:600}
/* The shared permalink is step two of the growth loop: someone was sent a reading and may
   draw their own. That was fine print under the text until 2026-10-30; it is the only action
   the page asks for, so it is a button. The link carries utm_source=shared-reading so an
   arrival through the loop is attributable like any other channel. */
.draw-own{margin:22px 0 6px}
.draw-own a{display:inline-block;padding:12px 20px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none}