:root {
  --cream:#fff8ea; --ink:#211335; --muted:#6e5b7b; --gold:#d9a833; --gold-light:#f7dc8b;
  --indigo:#21194f; --violet:#5a287f; --plum:#7b235e; --teal:#0f7c78; --emerald:#226b55;
  --peach:#f1a06f; --lav:#c9b7ef; --copper:#b86a3f; --rose-gold:#c9828d;
  --panel:rgba(255,248,234,.90); --panel2:rgba(255,248,234,.78);
  --active1:#f1a06f; --active2:#c9b7ef; --active3:#d9a833;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; font-family: Georgia, 'Times New Roman', serif; color:var(--cream);
  background:
    radial-gradient(circle at 15% 9%, rgba(241,160,111,.34), transparent 22%),
    radial-gradient(circle at 75% 12%, rgba(201,183,239,.38), transparent 26%),
    radial-gradient(circle at 20% 75%, rgba(15,124,120,.28), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(123,35,94,.30), transparent 30%),
    linear-gradient(145deg,#0d0b2a 0%, #21194f 36%, #4e1d66 68%, #0f403e 100%);
  overflow-x:hidden;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.65; z-index:0;
  background:
    radial-gradient(ellipse at 10% 15%, rgba(255,192,150,.27) 0 12%, transparent 34%),
    radial-gradient(ellipse at 90% 20%, rgba(202,180,255,.22) 0 10%, transparent 34%),
    radial-gradient(ellipse at 75% 65%, rgba(255,218,130,.16) 0 8%, transparent 30%),
    radial-gradient(ellipse at 18% 88%, rgba(68,165,150,.22) 0 12%, transparent 32%);
  filter: blur(1px);
}
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.75;
  background-image:
    radial-gradient(circle, rgba(255,233,151,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.65) 0 1px, transparent 1.4px),
    linear-gradient(110deg, transparent 0 38%, rgba(255,214,102,.16) 40%, transparent 43% 100%),
    linear-gradient(25deg, transparent 0 58%, rgba(255,214,102,.12) 59%, transparent 62% 100%);
  background-size: 78px 78px, 124px 124px, 100% 100%, 100% 100%;
  animation: shimmer 10s ease-in-out infinite alternate;
}
@keyframes shimmer { from{opacity:.42; transform:translateY(0)} to{opacity:.78; transform:translateY(-8px)} }
.magic-swirl { position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:.35; filter:blur(.2px);
  background: conic-gradient(from 210deg at 50% 50%, transparent 0 18%, rgba(217,168,51,.22) 20%, transparent 25%, rgba(241,160,111,.13) 35%, transparent 42%, rgba(201,183,239,.20) 52%, transparent 61%, rgba(15,124,120,.14) 75%, transparent 82%);
  animation: breathe 16s ease-in-out infinite alternate;
}
@keyframes breathe { from{transform:rotate(-3deg) scale(1)} to{transform:rotate(5deg) scale(1.05)} }
.app { width:min(1060px,100%); margin:0 auto; padding:22px 16px 88px; position:relative; z-index:1; }
.view { display:none; animation:fadeUp .45s ease both; }
.view.active { display:block; }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.topbar { text-align:center; margin:6px 0 18px; }
.eyebrow { color:var(--gold-light); letter-spacing:.24em; font-size:.68rem; text-transform:uppercase; margin-bottom:8px; }
h1 { margin:0; font-size:clamp(2.1rem,7vw,4.3rem); line-height:.92; text-shadow:0 8px 28px rgba(0,0,0,.28); font-weight:500; }
h2 { margin:0 0 12px; font-size:clamp(1.65rem,4.7vw,2.8rem); line-height:1.05; color:var(--ink); font-weight:500; }
h3 { margin:0 0 8px; color:var(--violet); font-size:1.12rem; letter-spacing:.03em; }
p { line-height:1.58; }
.subtitle { max-width:690px; margin:10px auto 0; font-size:1.02rem; color:rgba(255,248,234,.9); }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; margin-top:24px; }
@media(max-width:780px){.hero-grid{grid-template-columns:1fr}}
.glass { background:rgba(255,248,234,.12); border:1px solid rgba(247,220,139,.38); border-radius:28px; backdrop-filter:blur(10px); box-shadow:0 22px 55px rgba(0,0,0,.24); }
.home-card { padding:24px; text-align:center; }
.compass-hero { width:min(330px,78vw); display:block; margin:0 auto 12px; filter:drop-shadow(0 18px 22px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(247,220,139,.24)); animation: compassPulse 5s ease-in-out infinite alternate; }
@keyframes compassPulse { from{transform:scale(1)} to{transform:scale(1.018)} }
.home-headline { font-size:clamp(1.75rem,6vw,3.2rem); margin:10px 0 4px; }
.home-kicker { color:#ffe7a3; font-size:1.05rem; margin:0 0 4px; }
.home-sub { max-width:470px; margin:0 auto 18px; color:rgba(255,248,234,.82); }
.action-stack { display:grid; gap:10px; max-width:390px; margin:18px auto 0; }
button,.btn { border:1px solid rgba(247,220,139,.52); border-radius:999px; padding:12px 18px; font-size:.92rem; letter-spacing:.04em; color:var(--cream); background:linear-gradient(135deg,rgba(90,40,127,.92),rgba(123,35,94,.92)); box-shadow:0 9px 20px rgba(0,0,0,.22); cursor:pointer; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; gap:8px; font-family: Georgia,'Times New Roman',serif; }
button:hover,.btn:hover { transform:translateY(-1px); filter:brightness(1.08); }
.btn.gold { background:linear-gradient(135deg,#b87528,#d9a833); color:#fff7e8; }
.btn.teal { background:linear-gradient(135deg,#0f7c78,#226b55); }
.btn.light { background:rgba(255,248,234,.18); color:var(--cream); }
.panel { background:var(--panel); color:var(--ink); border-radius:28px; border:1px solid rgba(217,168,51,.35); box-shadow:0 26px 60px rgba(0,0,0,.24); padding:24px; }
.deck-photo { width:100%; border-radius:24px; display:block; box-shadow:0 18px 38px rgba(0,0,0,.22); border:1px solid rgba(255,248,234,.35); }
.directions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
@media(max-width:560px){.directions{grid-template-columns:1fr}}
.dir-card { padding:14px; border-radius:18px; background:rgba(255,248,234,.9); color:var(--ink); border-left:5px solid var(--gold); box-shadow:0 10px 25px rgba(0,0,0,.12); }
.dir-card b { display:block; color:var(--violet); font-size:1rem; }
.dir-card small { color:#70506e; }
.dir-card.east { border-color:#f1a06f; } .dir-card.south { border-color:#0f7c78; } .dir-card.north { border-color:#5a287f; } .dir-card.west { border-color:#b86a3f; }
.draw-shell { display:grid; grid-template-columns:minmax(290px,390px) 1fr; gap:26px; align-items:start; }
@media(max-width:800px){.draw-shell{grid-template-columns:1fr}}
.draw-shell:not(.guidance-ready){ grid-template-columns:1fr; }
.draw-shell:not(.guidance-ready) .card-stage{ width:min(100%,430px); margin:0 auto; }
.draw-shell:not(.guidance-ready) #guidancePanel{ display:none; }
.draw-shell.guidance-ready #guidancePanel{ display:block; animation:fadeUp .45s ease both; }
.card-stage { position:sticky; top:14px; }
.card-frame { width:min(100%,380px); aspect-ratio:3.5/5; margin:0 auto; perspective:1200px; }
.flip-card { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.75,.2,1); cursor:pointer; }
.flip-card.revealed { transform:rotateY(180deg); }
.face { position:absolute; inset:0; backface-visibility:hidden; border-radius:24px; overflow:hidden; box-shadow:0 30px 65px rgba(0,0,0,.45),0 0 0 1px rgba(247,220,139,.42); background:#21194f; }
.face img { width:100%; height:100%; object-fit:cover; display:block; }
.front { transform:rotateY(180deg); }
.card-prompt { text-align:center; margin-top:14px; color:rgba(255,248,234,.86); font-style:italic; }
.reveal-message { opacity:0; transform:translateY(6px); pointer-events:none; transition:all .45s ease; margin:16px auto 0; display:flex; justify-content:center; }
.reveal-message.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.guidance-card { min-height:520px; position:relative; overflow:hidden; }
.guidance-card::before { content:""; position:absolute; inset:0 0 auto; height:7px; background:linear-gradient(90deg,var(--active1),var(--active2),var(--active3)); }
.progress { display:flex; gap:6px; margin:8px 0 18px; }
.dot { width:8px; height:8px; border-radius:99px; background:#d7c3d0; }
.dot.active { width:32px; background:linear-gradient(90deg,var(--active1),var(--active3)); }
.step-label { color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; margin:8px 0 8px; }
.card-title-line { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.thumb { width:76px; border-radius:12px; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.badge { display:inline-flex; padding:7px 12px; border-radius:999px; background:rgba(241,160,111,.18); color:#8b3a23; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.step-panel { display:none; animation:fadeUp .35s ease both; } .step-panel.active { display:block; }
.guide-copy { font-size:1.06rem; color:#2d2140; }
.affirm { font-size:1.55rem; line-height:1.38; color:#4d226d; font-style:italic; text-align:center; padding:28px 12px; }
textarea { width:100%; min-height:170px; resize:vertical; border-radius:20px; border:1px solid rgba(217,168,51,.4); padding:16px; background:rgba(255,255,255,.78); color:var(--ink); font:1.03rem/1.55 Georgia,'Times New Roman',serif; box-shadow:inset 0 4px 18px rgba(60,30,60,.06); }
.step-actions { display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; margin-top:22px; }
.subtle { color:#6e5b7b; font-size:.92rem; }
.compass-layout { display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:24px; align-items:center; }
@media(max-width:780px){.compass-layout{grid-template-columns:1fr}}
.compass-panel-img { width:min(330px,80vw); display:block; margin:0 auto; filter:drop-shadow(0 20px 26px rgba(0,0,0,.24)); }
.journal-list { display:grid; gap:12px; margin-top:14px; }
.journal-entry { padding:14px; border-radius:16px; background:rgba(255,248,234,.78); color:var(--ink); border:1px solid rgba(217,168,51,.25); }
.more-grid { display:grid; grid-template-columns:160px 1fr; gap:18px; align-items:center; }
@media(max-width:560px){.more-grid{grid-template-columns:1fr;text-align:center}}
.nancy { width:155px; aspect-ratio:1/1; border-radius:999px; object-fit:cover; box-shadow:0 14px 28px rgba(0,0,0,.22); border:3px solid rgba(247,220,139,.6); }
.bottom-nav { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); width:min(650px,calc(100% - 24px)); z-index:20; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:8px; border-radius:22px; background:rgba(255,248,234,.88); backdrop-filter:blur(12px); box-shadow:0 18px 45px rgba(0,0,0,.28); border:1px solid rgba(217,168,51,.32); }
.nav-item { border:0; background:transparent; box-shadow:none; color:#5b4b66; padding:8px 4px; border-radius:16px; display:flex; flex-direction:column; gap:2px; font-size:.72rem; letter-spacing:0; }
.nav-item span { font-size:1.05rem; } .nav-item.active { background:linear-gradient(135deg,rgba(90,40,127,.18),rgba(217,168,51,.16)); color:#4b1464; }
.controls { display:flex; gap:10px; justify-content:center; margin:16px 0; flex-wrap:wrap; }
select { border:1px solid rgba(247,220,139,.52); border-radius:999px; padding:11px 15px; background:rgba(255,248,234,.16); color:var(--cream); font-family:Georgia,'Times New Roman',serif; } option { color:#211335; }

/* HOME PAGE V5 — Creative Sanctuary final design pass */
.home-v5 {
  position:relative;
  overflow:hidden;
  border-radius:0 0 34px 34px;
  padding:12px 0 24px;
}
.home-v5::before {
  content:"";
  position:absolute;
  inset:-80px -40px -40px;
  z-index:-2;
  background:
    radial-gradient(ellipse at 10% 12%, rgba(38,32,94,.65) 0 12%, transparent 33%),
    radial-gradient(ellipse at 88% 10%, rgba(241,160,111,.50) 0 13%, transparent 34%),
    radial-gradient(ellipse at 10% 65%, rgba(15,124,120,.42) 0 13%, transparent 35%),
    radial-gradient(ellipse at 84% 70%, rgba(123,35,94,.45) 0 12%, transparent 34%),
    linear-gradient(180deg, rgba(255,248,234,.90), rgba(255,248,234,.72) 50%, rgba(255,248,234,.58));
  filter:saturate(1.16);
}
.home-v5::after {
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  background:
    conic-gradient(from 120deg at 18% 10%, transparent 0 9%, rgba(217,168,51,.30) 10%, transparent 14% 100%),
    conic-gradient(from 290deg at 84% 16%, transparent 0 8%, rgba(217,168,51,.26) 10%, transparent 15% 100%),
    conic-gradient(from 20deg at 15% 88%, transparent 0 9%, rgba(217,168,51,.18) 11%, transparent 16% 100%),
    radial-gradient(circle, rgba(255,236,168,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.5px);
  background-size:100% 100%,100% 100%,100% 100%,78px 78px,132px 132px;
  opacity:.75;
  animation:sanctuaryBreathe 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes sanctuaryBreathe { from{transform:scale(1) rotate(-1deg); opacity:.58} to{transform:scale(1.045) rotate(1.8deg); opacity:.88} }
.sanctuary-wash {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.82;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(201,183,239,.62), transparent 28%),
    radial-gradient(ellipse at 75% 24%, rgba(255,186,148,.55), transparent 30%),
    radial-gradient(ellipse at 26% 82%, rgba(46,135,130,.45), transparent 32%),
    radial-gradient(ellipse at 80% 72%, rgba(177,78,117,.38), transparent 31%);
  filter:blur(6px);
}
.home-hero-v5 { text-align:center; padding:18px 10px 6px; color:var(--ink); }
.home-brand-v5 {
  color:#3d1857;
  font-size:clamp(2rem,7vw,4.15rem);
  letter-spacing:.05em;
  line-height:.95;
  text-shadow:0 1px 0 rgba(255,248,234,.9),0 9px 26px rgba(70,24,92,.14);
}
.home-hero-v5 h1 {
  color:#3b2156;
  font-size:clamp(1.55rem,5.4vw,2.85rem);
  margin:7px 0 4px;
  line-height:1.05;
  text-shadow:none;
}
.home-lead { margin:0 auto; max-width:720px; color:#3e2d52; font-size:clamp(.99rem,2.5vw,1.16rem); line-height:1.42; }
.home-tag { margin:4px auto 8px; color:#9b612d; font-style:italic; font-size:1.02rem; }
.compass-float-wrap { position:relative; width:min(430px,84vw); margin:2px auto 6px; display:grid; place-items:center; }
.compass-hero-v5 { width:100%; position:relative; z-index:2; filter:drop-shadow(0 20px 22px rgba(58,24,72,.20)) drop-shadow(0 0 18px rgba(217,168,51,.26)); animation:compassFloat 6s ease-in-out infinite alternate; }
.compass-glow { position:absolute; width:62%; aspect-ratio:1; border-radius:999px; background:radial-gradient(circle, rgba(247,220,139,.42), rgba(241,160,111,.20) 36%, transparent 68%); filter:blur(13px); z-index:1; }
@keyframes compassFloat { from{transform:translateY(0)} to{transform:translateY(-7px)} }
.primary-draw {
  margin:2px auto 0;
  min-width:220px;
  background:linear-gradient(135deg,#4d1769,#7b235e 54%,#b86a3f);
  color:#fff8ea;
  border-color:rgba(247,220,139,.7);
  box-shadow:0 13px 28px rgba(75,20,100,.22);
}
.ritual-card-v5 {
  width:min(760px,calc(100% - 24px));
  margin:16px auto 22px;
  display:grid;
  grid-template-columns:auto 1fr 1.8fr;
  gap:16px;
  align-items:center;
  padding:17px 20px;
  border-radius:24px;
  background:rgba(255,248,234,.77);
  color:var(--ink);
  border:1px solid rgba(217,168,51,.33);
  box-shadow:0 16px 38px rgba(67,31,75,.13);
  backdrop-filter:blur(8px);
}
.ritual-icon { color:var(--gold); font-size:2rem; text-shadow:0 0 12px rgba(217,168,51,.5); }
.ritual-title { font-size:clamp(1.35rem,4.5vw,2.05rem); color:#4d1769; line-height:1.05; }
.ritual-copy { color:#3e2d52; line-height:1.45; border-left:1px solid rgba(184,106,63,.32); padding-left:16px; }
.section-title-v5 {
  text-align:center;
  color:#4d1769;
  font-size:clamp(1.35rem,4.7vw,2.15rem);
  font-style:italic;
  margin:8px auto 14px;
}
.direction-grid-v5 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 auto 18px; width:min(1000px,100%); }
.direction-tile {
  min-height:174px;
  border:1px solid rgba(217,168,51,.30);
  border-radius:24px;
  padding:18px 13px;
  color:var(--ink);
  background:rgba(255,248,234,.74);
  box-shadow:0 15px 34px rgba(58,24,72,.13);
  backdrop-filter:blur(8px);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  white-space:normal;
  letter-spacing:0;
}
.direction-tile span { font-size:1.35rem; color:#4d1769; }
.direction-tile b { font-size:.99rem; line-height:1.12; color:#2d2140; }
.direction-tile em { font-size:.89rem; line-height:1.32; color:#594566; font-style:normal; }
.direction-tile.north { background:linear-gradient(145deg,rgba(90,40,127,.20),rgba(201,183,239,.56),rgba(255,248,234,.82)); }
.direction-tile.east { background:linear-gradient(145deg,rgba(241,160,111,.25),rgba(201,183,239,.36),rgba(255,248,234,.84)); }
.direction-tile.south { background:linear-gradient(145deg,rgba(15,124,120,.22),rgba(247,220,139,.32),rgba(255,248,234,.84)); }
.direction-tile.west { background:linear-gradient(145deg,rgba(123,35,94,.22),rgba(184,106,63,.22),rgba(255,248,234,.84)); }
.deck-showcase-v5 {
  width:min(1000px,100%);
  margin:16px auto;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  background:rgba(255,248,234,.72);
  border:1px solid rgba(217,168,51,.32);
  box-shadow:0 18px 46px rgba(58,24,72,.16);
}
.deck-showcase-v5 img { width:100%; height:100%; object-fit:cover; display:block; min-height:230px; }
.deck-copy-v5 { display:flex; flex-direction:column; justify-content:center; padding:22px; color:#3b2156; gap:14px; }
.deck-copy-v5 span { font-size:clamp(1.25rem,4vw,2rem); line-height:1.12; }
.deck-copy-v5 button { align-self:flex-start; background:rgba(77,23,105,.88); color:#fff8ea; }
.action-cards-v5 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:min(1000px,100%); margin:18px auto; }
.action-card-v5 {
  border-radius:24px;
  padding:15px 16px;
  background:rgba(255,248,234,.78);
  color:var(--ink);
  border:1px solid rgba(217,168,51,.30);
  box-shadow:0 14px 32px rgba(58,24,72,.14);
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  align-items:center;
  text-align:left;
  letter-spacing:0;
  white-space:normal;
}
.action-card-v5 img { width:70px; height:70px; object-fit:cover; border-radius:18px; }
.action-card-v5 span { display:block; font-size:1.18rem; color:#4d1769; margin-bottom:3px; }
.action-card-v5 em { display:block; font-style:normal; color:#5c4b67; font-size:.91rem; line-height:1.3; }
.action-card-v5.draw { background:linear-gradient(135deg,rgba(201,183,239,.55),rgba(255,248,234,.82)); }
.action-card-v5.compass { background:linear-gradient(135deg,rgba(15,124,120,.22),rgba(247,220,139,.22),rgba(255,248,234,.82)); }
.action-card-v5.journal { background:linear-gradient(135deg,rgba(241,160,111,.24),rgba(255,248,234,.82)); }
.quote-orbit-v5 {
  width:min(1000px,100%);
  margin:10px auto 4px;
  border-radius:24px;
  padding:17px 18px;
  text-align:center;
  background:rgba(255,248,234,.74);
  border:1px solid rgba(217,168,51,.32);
  color:#4d1769;
  box-shadow:0 12px 28px rgba(58,24,72,.12);
}
.quote-text-v5 { font-size:clamp(1.25rem,4.5vw,2.05rem); font-style:italic; animation:quoteGlow 5s ease-in-out infinite alternate; }
@keyframes quoteGlow { from{opacity:.86} to{opacity:1; text-shadow:0 0 14px rgba(217,168,51,.18)} }
.quote-dots-v5 { margin-top:8px; display:flex; gap:8px; justify-content:center; }
.quote-dots-v5 span { width:7px; height:7px; border-radius:99px; background:rgba(217,168,51,.45); }
.quote-dots-v5 span:first-child { background:#b86a3f; }
.bottom-nav {
  background:linear-gradient(180deg, rgba(31,21,70,.94), rgba(24,14,50,.97));
  border:1px solid rgba(247,220,139,.38);
  box-shadow:0 18px 45px rgba(0,0,0,.30), 0 0 24px rgba(217,168,51,.10);
  padding:7px 8px;
}
.nav-item { color:#f7e9ca; gap:0; padding:4px 3px 6px; font-size:.7rem; }
.nav-item .nav-icon { width:36px; height:36px; object-fit:cover; border-radius:12px; display:block; margin:0 auto 2px; box-shadow:0 0 0 1px rgba(247,220,139,.22); }
.nav-item.active { background:rgba(255,248,234,.12); color:#ffe7a3; }
.nav-item.active .nav-icon { box-shadow:0 0 0 1px rgba(247,220,139,.55),0 0 14px rgba(217,168,51,.24); transform:translateY(-1px); }
@media(max-width:780px) {
  .direction-grid-v5 { grid-template-columns:repeat(2,1fr); }
  .deck-showcase-v5 { grid-template-columns:1fr; }
  .action-cards-v5 { grid-template-columns:1fr; }
  .ritual-card-v5 { grid-template-columns:1fr; text-align:center; gap:8px; }
  .ritual-copy { border-left:0; border-top:1px solid rgba(184,106,63,.25); padding-left:0; padding-top:10px; }
}
@media(max-width:460px) {
  .direction-grid-v5 { grid-template-columns:1fr; }
  .home-brand-v5 { font-size:2.25rem; }
  .compass-float-wrap { width:min(360px,92vw); }
}


/* ===== Creative Flow Oracle V6 Enhancements ===== */
body { background:#110d2e; }
body::before { opacity:.92; background:
  radial-gradient(ellipse at 8% 10%, rgba(37,29,92,.82) 0 8%, transparent 28%),
  radial-gradient(ellipse at 92% 18%, rgba(241,160,111,.38) 0 9%, transparent 32%),
  radial-gradient(ellipse at 15% 55%, rgba(15,124,120,.35) 0 10%, transparent 34%),
  radial-gradient(ellipse at 78% 70%, rgba(123,35,94,.43) 0 12%, transparent 34%),
  linear-gradient(135deg, rgba(13,11,42,.98), rgba(33,25,79,.94) 44%, rgba(88,31,100,.88));
}
body::after { opacity:.82; background-image:
  radial-gradient(circle, rgba(255,230,151,.9) 0 1px, transparent 1.5px),
  radial-gradient(circle, rgba(255,255,255,.54) 0 1px, transparent 1.5px),
  linear-gradient(115deg, transparent 0 26%, rgba(217,168,51,.18) 28%, transparent 31%),
  linear-gradient(26deg, transparent 0 62%, rgba(247,220,139,.16) 64%, transparent 67%);
  animation: starDrift 7s ease-in-out infinite alternate;
}
@keyframes starDrift { from{transform:translate3d(0,0,0);opacity:.55} to{transform:translate3d(-8px,-10px,0);opacity:.9} }
.magic-swirl { opacity:.58; background:
  conic-gradient(from 215deg at 50% 45%, transparent 0 12%, rgba(217,168,51,.22) 14%, transparent 20%, rgba(201,183,239,.22) 30%, transparent 42%, rgba(15,124,120,.16) 55%, transparent 68%, rgba(241,160,111,.20) 78%, transparent 88%);
  animation: waterBreathe 18s ease-in-out infinite alternate;
}
@keyframes waterBreathe { from{transform:rotate(-5deg) scale(1); filter:blur(.5px)} to{transform:rotate(6deg) scale(1.08); filter:blur(1.3px)} }
.home-v6 { position:relative; overflow:hidden; padding-bottom:24px; }
.home-bg-motion span { position:absolute; border-radius:45% 55% 52% 48%; filter:blur(1.2px); opacity:.35; pointer-events:none; mix-blend-mode:screen; }
.home-bg-motion span:nth-child(1){ width:620px;height:340px;left:-250px;top:40px;background:rgba(71,166,165,.34);animation:floatWash 13s ease-in-out infinite alternate;}
.home-bg-motion span:nth-child(2){ width:520px;height:380px;right:-220px;top:150px;background:rgba(241,160,111,.28);animation:floatWash 16s ease-in-out infinite alternate-reverse;}
.home-bg-motion span:nth-child(3){ width:700px;height:300px;left:20%;bottom:15%;background:rgba(201,183,239,.25);animation:floatWash 19s ease-in-out infinite alternate;}
@keyframes floatWash{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-24px) rotate(5deg)}}
.home-hero-v6 { text-align:center; padding:22px 0 8px; position:relative; }
.brand-mark-v6 { font-size:clamp(2.3rem,8vw,5rem); line-height:.92; color:#fff8ea; text-shadow:0 8px 32px rgba(0,0,0,.3); }
.home-hero-v6 h1 { font-size:clamp(1.75rem,5vw,3.3rem); color:#fff8ea; margin:12px 0 6px; }
.home-lead-v6 { color:rgba(255,248,234,.92); margin:0; font-size:1.08rem; }
.home-tag-v6 { color:#f7dc8b; font-style:italic; margin:4px 0 0; font-size:1.05rem; }
.compass-orbit-v6 { margin:22px auto 0; width:min(360px,84vw); position:relative; min-height:360px; display:flex; align-items:center; justify-content:center; }
.direction-glow-v6 { position:absolute; inset:8%; border-radius:999px; filter:blur(18px); opacity:.72; transition:background 700ms ease; background:radial-gradient(circle, rgba(241,160,111,.55), rgba(201,183,239,.24), transparent 68%); }
.real-compass-v6 { position:relative; z-index:2; width:min(300px,72vw); filter:drop-shadow(0 16px 24px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(247,220,139,.28)); animation:compassBreath 5s ease-in-out infinite alternate; }
@keyframes compassBreath{from{transform:scale(1)}to{transform:scale(1.025)}}
.direction-pill-v6 { position:absolute; z-index:3; bottom:12px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:9px 16px; border-radius:999px; background:rgba(255,248,234,.82); color:#3d2452; border:1px solid rgba(217,168,51,.42); box-shadow:0 12px 30px rgba(0,0,0,.14); font-size:.92rem; }
.home-v6[data-dir="north"] .direction-glow-v6{background:radial-gradient(circle,rgba(90,40,127,.65),rgba(201,183,239,.28),transparent 70%)}
.home-v6[data-dir="east"] .direction-glow-v6{background:radial-gradient(circle,rgba(241,160,111,.58),rgba(247,220,139,.30),transparent 70%)}
.home-v6[data-dir="south"] .direction-glow-v6{background:radial-gradient(circle,rgba(15,124,120,.58),rgba(247,220,139,.24),transparent 70%)}
.home-v6[data-dir="west"] .direction-glow-v6{background:radial-gradient(circle,rgba(123,35,94,.62),rgba(184,106,63,.30),transparent 70%)}
.ritual-v6 { max-width:760px; margin:0 auto 28px; padding:18px 22px; border-radius:22px; background:rgba(255,248,234,.82); color:#2c1840; border:1px solid rgba(217,168,51,.34); display:grid; grid-template-columns:86px 1fr; gap:18px; align-items:center; box-shadow:0 18px 42px rgba(0,0,0,.14); }
.ritual-icon-v6 { font-size:3.2rem; color:#d9a833; text-align:center; }
.ritual-v6 h2,.section-title-v6 h2 { color:#3d2452; margin:0; }
.ritual-v6 p { margin:4px 0 0; font-size:1.08rem; }
.section-title-v6 { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0; color:#fff8ea; }
.section-title-v6 span { height:1px; width:110px; background:linear-gradient(90deg,transparent,#f7dc8b,transparent); }
.section-title-v6 h2 { color:#fff8ea; font-style:italic; font-size:clamp(1.4rem,4vw,2rem); }
.direction-tiles-v6 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 22px; }
.direction-tile-v6 { border-radius:22px; padding:18px 14px; color:#2c1840; border:1px solid rgba(217,168,51,.35); background:rgba(255,248,234,.8); box-shadow:0 18px 40px rgba(0,0,0,.14); text-align:center; white-space:normal; letter-spacing:0; }
.direction-tile-v6 h3 { font-size:1.6rem; margin:4px 0; color:#3d2452; }
.direction-tile-v6 b { display:block; min-height:42px; }
.direction-tile-v6 p { margin:8px 0; font-size:.92rem; }
.direction-tile-v6 small { color:#6b2a78; font-weight:bold; }
.direction-tile-v6.north{background:linear-gradient(145deg,rgba(201,183,239,.82),rgba(255,248,234,.86));}
.direction-tile-v6.east{background:linear-gradient(145deg,rgba(241,160,111,.32),rgba(255,248,234,.88));}
.direction-tile-v6.south{background:linear-gradient(145deg,rgba(15,124,120,.28),rgba(255,248,234,.88));}
.direction-tile-v6.west{background:linear-gradient(145deg,rgba(184,106,63,.30),rgba(255,248,234,.88));}
.tile-star { color:#d9a833; font-size:1.3rem; }
.deck-showcase-v6 { display:grid; grid-template-columns:1.25fr .75fr; gap:0; overflow:hidden; border-radius:26px; background:rgba(255,248,234,.84); color:#2c1840; border:1px solid rgba(217,168,51,.36); box-shadow:0 20px 50px rgba(0,0,0,.18); margin:24px 0; }
.deck-showcase-v6 img { width:100%; height:100%; object-fit:cover; min-height:250px; }
.deck-showcase-v6 div { padding:24px; align-self:center; }
.deck-showcase-v6 h2 { color:#3d2452; font-size:clamp(1.45rem,4vw,2.2rem); }
.action-cards-v6 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0; }
.action-cards-v6 button { border-radius:22px; background:rgba(255,248,234,.82); color:#2c1840; padding:14px; display:flex; gap:12px; align-items:center; text-align:left; border:1px solid rgba(217,168,51,.34); white-space:normal; }
.action-cards-v6 img { width:66px;height:66px;object-fit:cover;border-radius:16px; }
.action-cards-v6 h3 { margin:0; font-size:1.25rem; }
.action-cards-v6 p { margin:3px 0 0; font-size:.9rem; }
.quote-v6 { padding:18px; border-radius:24px; background:rgba(255,248,234,.80); color:#4d1769; border:1px solid rgba(217,168,51,.35); text-align:center; margin:16px 0; }
.quote-flourish { color:#d9a833; letter-spacing:.22em; margin-bottom:6px; }
.compass-v6 .dir-tabs-v6 { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:18px 0 22px; }
.dir-tab { border-radius:999px; padding:10px 16px; background:rgba(255,248,234,.15); }
.dir-tab.active { background:rgba(255,248,234,.86); color:#3d2452; }
.direction-panel-v6 { display:none; max-width:980px; margin:0 auto; grid-template-columns:260px 1fr; gap:22px; align-items:start; padding:24px; border-radius:28px; background:rgba(255,248,234,.88); color:#211335; border:1px solid rgba(217,168,51,.36); box-shadow:0 24px 55px rgba(0,0,0,.18); }
.direction-panel-v6.active { display:grid; }
.direction-panel-v6.north{background:linear-gradient(145deg,rgba(255,248,234,.90),rgba(201,183,239,.72));}
.direction-panel-v6.east{background:linear-gradient(145deg,rgba(255,248,234,.92),rgba(241,160,111,.30));}
.direction-panel-v6.south{background:linear-gradient(145deg,rgba(255,248,234,.92),rgba(15,124,120,.23));}
.direction-panel-v6.west{background:linear-gradient(145deg,rgba(255,248,234,.92),rgba(184,106,63,.27));}
.direction-orb-v6 { position:sticky; top:20px; border-radius:999px; padding:18px; background:rgba(255,248,234,.55); box-shadow:inset 0 0 35px rgba(217,168,51,.18); }
.direction-orb-v6 img{width:100%;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.16));}
.kicker-v6 { color:#8b6a18; font-style:italic; margin:0 0 4px; }
.direction-copy-v6 h2 { font-size:clamp(2.4rem,8vw,4rem); color:#c9991d; font-style:italic; }
.direction-copy-v6 h3 { font-size:1.35rem; }
.direction-copy-v6 p { font-size:1.08rem; color:#231934; }
.direction-copy-v6 blockquote { margin:18px 0; padding:16px 20px; border-left:4px solid #d9a833; background:rgba(255,255,255,.38); font-style:italic; font-size:1.15rem; }
.direction-actions-v6 { display:flex; flex-wrap:wrap; gap:10px; }
.journal-layout-v6 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.journal-v6 label { display:block; margin:14px 0 6px; color:#5a287f; font-weight:bold; }
.mood-row-v6 { display:flex; gap:8px; flex-wrap:wrap; }
.mood-row-v6 button { padding:8px 12px; background:rgba(90,40,127,.10); color:#3d2452; border-color:rgba(90,40,127,.25); }
.mood-row-v6 button.active { background:#5a287f; color:#fff8ea; }
.journal-input-v6 { width:100%; border-radius:16px; border:1px solid rgba(217,168,51,.38); padding:12px; font:1rem Georgia,serif; background:rgba(255,255,255,.72); color:#211335; }
.save-status-v6 { margin-left:10px; color:#0f7c78; }
.explore-grid-v6 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.explore-card-v6 { border-radius:24px; background:rgba(255,248,234,.88); color:#211335; border:1px solid rgba(217,168,51,.34); padding:22px; box-shadow:0 18px 42px rgba(0,0,0,.15); overflow:hidden; }
.explore-card-v6.wide { grid-column:1/-1; display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:center; padding:0; }
.explore-card-v6.wide img { width:100%; height:100%; min-height:360px; object-fit:cover; }
.explore-card-v6.wide div { padding:24px; }
.explore-card-v6 h2 { color:#5a287f; }
.link-row-v6 { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.link-row-v6 a { color:#fff8ea; text-decoration:none; background:#5a287f; padding:10px 14px; border-radius:999px; border:1px solid rgba(217,168,51,.35); }
.bottom-nav { grid-template-columns:repeat(5,1fr); }
.nav-item { cursor:pointer; }
.nav-item .nav-icon { object-fit:cover; }
@media(max-width:820px){.direction-tiles-v6,.action-cards-v6,.journal-layout-v6,.explore-grid-v6{grid-template-columns:1fr}.deck-showcase-v6,.direction-panel-v6,.explore-card-v6.wide{grid-template-columns:1fr}.direction-orb-v6{position:relative;top:auto;max-width:260px;margin:0 auto}.compass-orbit-v6{min-height:310px}.real-compass-v6{width:min(260px,72vw)}.direction-tiles-v6{gap:10px}.ritual-v6{grid-template-columns:1fr;text-align:center}.deck-showcase-v6 img{min-height:220px}.explore-card-v6.wide img{min-height:280px}}
@media(max-width:520px){.app{padding:14px 12px 92px}.brand-mark-v6{font-size:2.45rem}.home-hero-v6 h1{font-size:1.9rem}.direction-pill-v6{font-size:.78rem}.direction-tile-v6 h3{font-size:1.4rem}.action-cards-v6 button{padding:12px}.action-cards-v6 img{width:54px;height:54px}.bottom-nav{bottom:8px;width:calc(100% - 14px);border-radius:18px}.nav-item .nav-icon{width:32px;height:32px}.nav-item{font-size:.64rem}.direction-panel-v6{padding:18px}.journal-prompt-v6,.journal-history-v6{padding:18px}}



/* ===== V7 refinement: premium creative home + compass sections ===== */
body {
  background:
    linear-gradient(135deg, #130d2f 0%, #251855 34%, #6b1f6a 62%, #0f5c68 100%);
}
.magic-swirl { display:none; }
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.82;
  background:
    url("images/ui/ui-044-75c7bbd058.jpg") center 6%/min(860px,120vw) auto no-repeat,
    radial-gradient(ellipse at 8% 18%, rgba(33,25,79,.62) 0 22%, transparent 56%),
    radial-gradient(ellipse at 95% 22%, rgba(241,160,111,.30) 0 20%, transparent 52%),
    radial-gradient(ellipse at 18% 88%, rgba(15,124,120,.34) 0 18%, transparent 48%);
  filter:saturate(1.08);
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.72;
  background-image:
    radial-gradient(circle, rgba(255,225,137,.95) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.70) 0 .9px, transparent 1.3px),
    linear-gradient(114deg, transparent 0 38%, rgba(225,174,57,.12) 39%, transparent 45% 100%),
    linear-gradient(28deg, transparent 0 56%, rgba(225,174,57,.10) 57%, transparent 63% 100%);
  background-size:70px 70px, 126px 126px, 100% 100%, 100% 100%;
  animation:v7Sparkle 9s ease-in-out infinite alternate;
}
@keyframes v7Sparkle { from{opacity:.48; transform:translateY(0)} to{opacity:.80; transform:translateY(-7px)} }
.home-bg-motion { display:none !important; }
.home-v7 { position:relative; color:#fff8ea; padding-bottom:10px; }
.home-v7::before {
  content:""; position:absolute; inset:-20px -10px auto; height:420px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,248,234,.34), transparent 45%),
    radial-gradient(ellipse at 20% 75%, rgba(201,183,239,.26), transparent 45%),
    radial-gradient(ellipse at 82% 75%, rgba(241,160,111,.20), transparent 45%);
  border-radius:0 0 44px 44px;
}
.brand-mark-v7 { font-size:clamp(2.2rem,8vw,4.6rem); color:#fff8ea; letter-spacing:.02em; line-height:1; text-shadow:0 8px 30px rgba(0,0,0,.22); margin-top:14px; }
.home-hero-v7 { text-align:center; max-width:920px; margin:0 auto; padding:20px 0 8px; }
.home-hero-v7 h1 { font-size:clamp(1.75rem,5vw,3rem); color:#fff8ea; margin:10px 0 6px; font-weight:500; }
.home-lead-v7 { font-size:1.08rem; max-width:640px; margin:0 auto; color:rgba(255,248,234,.90); }
.home-tag-v7 { margin:6px auto 0; color:#f7dc8b; font-style:italic; font-size:1.08rem; }
.compass-stage-v7 { margin:24px auto 16px; display:grid; place-items:center; position:relative; min-height:330px; }
.compass-stage-v7::before { content:""; position:absolute; width:min(520px,86vw); height:min(520px,86vw); border-radius:50%; background:radial-gradient(circle, rgba(255,248,234,.46) 0 28%, rgba(247,220,139,.16) 42%, transparent 68%); filter:blur(4px); }
.compass-stage-v7::after { content:""; position:absolute; width:min(580px,96vw); height:min(580px,96vw); border-radius:50%; background:conic-gradient(from 220deg, rgba(90,40,127,.28), rgba(241,160,111,.22), rgba(15,124,120,.20), rgba(184,106,63,.24), rgba(90,40,127,.28)); opacity:.34; filter:blur(18px); animation:v7CompassAura 12s ease-in-out infinite alternate; }
@keyframes v7CompassAura { from{ transform:rotate(-5deg) scale(.97); opacity:.30 } to{ transform:rotate(8deg) scale(1.04); opacity:.50 } }
.real-compass-v7 { position:relative; z-index:2; width:min(245px,58vw); filter:drop-shadow(0 18px 24px rgba(0,0,0,.24)); }
.direction-pulse-v7 { position:absolute; z-index:3; bottom:12px; left:50%; transform:translateX(-50%); padding:9px 16px; border-radius:999px; background:rgba(255,248,234,.78); color:#3a2352; border:1px solid rgba(217,168,51,.38); box-shadow:0 12px 25px rgba(0,0,0,.12); font-size:.88rem; letter-spacing:.05em; }
.home-v7[data-dir="north"] .direction-pulse-v7{color:#4b2372} .home-v7[data-dir="east"] .direction-pulse-v7{color:#a45b29} .home-v7[data-dir="south"] .direction-pulse-v7{color:#0f6a61} .home-v7[data-dir="west"] .direction-pulse-v7{color:#8a3156}
.ritual-v7 { max-width:760px; margin:6px auto 24px; padding:18px 22px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; background:rgba(255,248,234,.82); color:#211335; border:1px solid rgba(217,168,51,.38); border-radius:24px; box-shadow:0 18px 38px rgba(0,0,0,.12); }
.ritual-v7 .ritual-icon { font-size:2.3rem; color:#d9a833; }
.ritual-v7 h2 { margin:0; font-size:1.45rem; color:#5a287f; }
.ritual-v7 p { margin:2px 0 0; line-height:1.45; }
.section-title-v7 { text-align:center; color:#fff8ea; margin:30px 0 16px; font-size:1.9rem; font-style:italic; font-weight:500; text-shadow:0 3px 18px rgba(0,0,0,.2); }
.direction-tiles-v7 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 auto 24px; }
.dir-tile-v7 { position:relative; min-height:310px; border-radius:24px; overflow:hidden; border:1px solid rgba(255,248,234,.42); box-shadow:0 18px 42px rgba(0,0,0,.18); color:#211335; background:#fff8ea; display:flex; align-items:flex-end; }
.dir-tile-v7::before { content:""; position:absolute; inset:0; background-image:var(--art); background-size:cover; background-position:center; opacity:.92; transition:transform .5s ease; }
.dir-tile-v7::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(255,248,234,.95) 0 45%, rgba(255,248,234,.56) 62%, transparent 100%); }
.dir-tile-v7:hover::before { transform:scale(1.04); }
.dir-content-v7 { position:relative; z-index:1; padding:20px; width:100%; text-align:center; }
.dir-kicker-v7 { font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:#8a6a22; }
.dir-content-v7 h3 { margin:3px 0 5px; font-size:1.75rem; color:#5a287f; }
.dir-content-v7 .sub { display:block; font-weight:bold; color:#3a2352; line-height:1.24; margin-bottom:8px; }
.dir-content-v7 p { margin:0 0 14px; color:#3a3044; line-height:1.36; font-size:.96rem; }
.dir-tile-v7 button { padding:9px 14px; font-size:.82rem; background:rgba(90,40,127,.86); }
.dir-tile-v7.east button{background:#b87528} .dir-tile-v7.south button{background:#0f7c78} .dir-tile-v7.west button{background:#9a4158}
.deck-showcase-v7 { display:grid; grid-template-columns:1.25fr .75fr; gap:0; overflow:hidden; border-radius:28px; border:1px solid rgba(255,248,234,.38); background:rgba(255,248,234,.82); box-shadow:0 24px 55px rgba(0,0,0,.20); color:#211335; margin:24px auto; }
.deck-showcase-v7 img { width:100%; height:100%; min-height:340px; object-fit:cover; display:block; }
.deck-copy-v7 { padding:28px; align-self:center; }
.deck-copy-v7 h2 { color:#5a287f; margin-bottom:8px; }
.action-cards-v7 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px auto; }
.action-card-v7 { border:0; border-radius:24px; padding:18px; justify-content:flex-start; text-align:left; min-height:118px; background:rgba(255,248,234,.88); color:#211335; box-shadow:0 16px 34px rgba(0,0,0,.14); border:1px solid rgba(217,168,51,.32); }
.action-card-v7 img { width:58px; height:58px; border-radius:14px; object-fit:cover; margin-right:12px; }
.action-card-v7 strong { display:block; color:#5a287f; font-size:1.15rem; }
.action-card-v7 span { display:block; color:#58465e; font-size:.92rem; margin-top:4px; line-height:1.3; }
.quote-v7 { margin:22px auto 4px; padding:20px; border-radius:26px; background:rgba(255,248,234,.80); color:#5a287f; text-align:center; border:1px solid rgba(217,168,51,.32); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.quote-v7 .quote-text-v7 { font-size:clamp(1.35rem,4vw,2.2rem); font-style:italic; transition:opacity .28s ease; }
.compass-v7 .topbar h1 { color:#fff8ea; }
.direction-tabs-v7 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0 22px; }
.dir-tab-v7 { border-radius:18px; padding:14px 10px; background:rgba(255,248,234,.82); color:#211335; border:1px solid rgba(217,168,51,.32); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.dir-tab-v7.active { color:#fff8ea; background:linear-gradient(135deg,#5a287f,#b86a3f); }
.direction-panel-v6 { display:none; }
.direction-panel-v6.active { display:grid; }
.direction-panel-v7 { grid-template-columns:390px 1fr; gap:24px; align-items:center; border-radius:30px; overflow:hidden; background:rgba(255,248,234,.88); color:#211335; border:1px solid rgba(217,168,51,.36); box-shadow:0 24px 60px rgba(0,0,0,.20); }
.direction-art-v7 { min-height:520px; background-image:var(--art); background-size:cover; background-position:center; display:grid; place-items:center; padding:28px; }
.direction-art-v7 img { width:150px; opacity:.90; filter:drop-shadow(0 10px 18px rgba(0,0,0,.22)); }
.direction-copy-v7 { padding:28px 30px; }
.direction-copy-v7 .kicker-v7 { color:#b4892f; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }
.direction-copy-v7 h2 { color:#5a287f; font-size:clamp(2rem,5vw,3.4rem); }
.direction-copy-v7 h3 { color:#5a287f; font-size:1.35rem; }
.direction-copy-v7 p { color:#2a1e36; font-size:1.04rem; }
.direction-copy-v7 blockquote { margin:16px 0; padding:14px 18px; border-left:4px solid #d9a833; background:rgba(255,255,255,.42); font-style:italic; }
@media(max-width:980px){ .direction-tiles-v7{grid-template-columns:repeat(2,1fr)} }
@media(max-width:780px){
  .direction-tiles-v7,.action-cards-v7,.direction-tabs-v7{grid-template-columns:1fr;}
  .deck-showcase-v7,.direction-panel-v7{grid-template-columns:1fr;}
  .direction-art-v7{min-height:320px;}
  .deck-showcase-v7 img{min-height:240px;}
  .ritual-v7{grid-template-columns:1fr;text-align:center;}
}
@media(max-width:520px){
  .brand-mark-v7{font-size:2.3rem;}
  .home-hero-v7 h1{font-size:1.85rem;}
  .compass-stage-v7{min-height:285px;}
  .real-compass-v7{width:min(205px,62vw);}
  .dir-tile-v7{min-height:270px;}
  .deck-copy-v7{padding:20px;}
  .action-card-v7{min-height:102px;}
}


/* ===== V7.5 FINAL LOCKDOWN FIXES ONLY ===== */
.compass-v7 .topbar .eyebrow,
#compass .topbar .eyebrow {
  color:#D4A64A !important;
  opacity:1 !important;
  font-weight:700 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
}
#cardPrompt,
.draw-shell #cardPrompt {
  color:#D4A64A !important;
  opacity:1 !important;
  text-shadow:0 1px 2px rgba(55,24,67,.22) !important;
}
.copyright-v75,
.static-copyright {
  display:block !important;
  visibility:visible !important;
  text-align:center !important;
  color:#4D1769 !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
  font-family:inherit !important;
  font-weight:500 !important;
  margin:22px auto 96px !important;
  padding:8px 16px 0 !important;
  opacity:.94 !important;
  position:relative !important;
  z-index:12 !important;
  max-width:1000px !important;
}
.direction-art-v7 {
  background-image:var(--art) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
@media(max-width:780px){
  .copyright-v75,
  .static-copyright { font-size:.72rem !important; margin-bottom:92px !important; }
}


.cfo-disclaimer {
  margin-top: 28px;
  padding: 0 18px 22px;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(33,19,53,.58);
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}


.home-pause-v93 {
  text-align: center;
  margin: 26px auto 34px;
  max-width: 640px;
  padding: 0 18px;
}
.home-pause-v93 h2 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  color: #4D1769;
  letter-spacing: .02em;
}
.home-pause-v93 p {
  margin: 0 auto;
  text-align: center;
  color: rgba(33,19,53,.78);
  line-height: 1.55;
  font-size: 1rem;
}
.cfo-disclaimer {
  display: block !important;
  visibility: visible !important;
  max-width: 900px;
  margin: 34px auto 110px !important;
  padding: 0 22px !important;
  text-align: center !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
  color: rgba(33,19,53,.58) !important;
  position: relative !important;
  z-index: 12 !important;
}


/* ===== V9.3.1 HOME SPACING POLISH ===== */
#home .home-tag-v7 {
  margin-bottom: 0 !important;
}
#home .home-pause-v93 {
  margin-top: 42px !important;
  margin-bottom: 18px !important;
}
#home .compass-stage-v7 {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}
#home .section-title-v7 {
  margin-top: 4px !important;
}


/* ===== V10 FULL DECK HOME UPDATE ===== */
#home .home-lead-v7 {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#home .compass-stage-v7 {
  min-height: 430px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#home .real-compass-v7 {
  width: min(420px, 82vw) !important;
  max-width: 420px !important;
}
@media(max-width:780px){
  #home .compass-stage-v7 { min-height: 350px !important; }
  #home .real-compass-v7 { width: min(315px, 82vw) !important; }
}


/* ===== V10.1 HOME COPY + COMPASS SCALE ===== */
#home .home-lead-v7 {
  max-width: 780px !important;
  font-size: clamp(1.08rem, 2.2vw, 1.28rem) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}
#home .compass-stage-v7 {
  min-height: 410px !important;
  margin-top: 24px !important;
  margin-bottom: 2px !important;
}
#home .real-compass-v7 {
  width: min(330px, 72vw) !important;
}
#home .compass-stage-v7::before {
  width: min(610px, 94vw) !important;
  height: min(610px, 94vw) !important;
}
#home .section-title-v7 {
  margin-top: 0 !important;
}
@media (max-width: 780px) {
  #home .compass-stage-v7 {
    min-height: 360px !important;
  }
  #home .real-compass-v7 {
    width: min(285px, 76vw) !important;
  }
}


/* ===== V10.2 HOME RITUAL + COMPASS REFINEMENT ===== */
#home.home-v7 {
  padding-bottom: 150px !important;
}
#home .home-hero-v7 {
  padding: 14px 0 0 !important;
}
#home .brand-mark-v7 {
  margin-top: 4px !important;
  line-height: .95 !important;
}
#home .home-hero-v7 h1 {
  margin: 6px 0 8px !important;
  line-height: .98 !important;
}
#home .home-lead-v7 {
  max-width: 700px !important;
  margin: 0 auto 8px !important;
  font-size: clamp(1.02rem, 1.85vw, 1.2rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: rgba(33,19,53,.88) !important;
  text-shadow: none !important;
}
#home .home-tag-v7 {
  max-width: 720px !important;
  margin: 0 auto 22px !important;
  font-size: clamp(.98rem, 1.7vw, 1.14rem) !important;
  line-height: 1.35 !important;
  font-style: italic !important;
  color: #9b6f18 !important;
}
#home .home-pause-v93 {
  margin: 10px auto 8px !important;
  padding: 0 18px !important;
}
#home .home-pause-v93 h2 {
  margin: 0 0 6px !important;
  font-size: clamp(1.18rem, 2.1vw, 1.55rem) !important;
  line-height: 1.1 !important;
}
#home .home-pause-v93 p {
  font-size: clamp(.92rem, 1.45vw, 1.02rem) !important;
  line-height: 1.32 !important;
}
#home .compass-stage-v7 {
  min-height: 260px !important;
  margin: 2px auto 0 !important;
  padding: 0 !important;
}
#home .real-compass-v7 {
  width: min(320px, 56vw) !important;
}
#home .compass-stage-v7::before {
  width: min(430px, 76vw) !important;
  height: min(430px, 76vw) !important;
}
#home .compass-stage-v7::after {
  width: min(470px, 82vw) !important;
  height: min(470px, 82vw) !important;
}
#home .cfo-compass-question-v102 {
  margin: 4px auto 8px !important;
  padding: 0 18px !important;
  text-align: center !important;
  color: #4D1769 !important;
  font-size: clamp(1.04rem, 1.8vw, 1.24rem) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}
#home .section-title-v7 {
  margin: 8px 0 12px !important;
  line-height: 1.1 !important;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem) !important;
}
#home .direction-tiles-v7 {
  margin-bottom: 120px !important;
}
#home .dir-tile-v7 {
  min-height: 230px !important;
}
.bottom-nav {
  bottom: 18px !important;
}
textarea {
  min-height: 190px !important;
  resize: none !important;
  overflow: hidden !important;
}
@media (max-height: 840px) and (min-width: 900px) {
  #home .brand-mark-v7 { font-size: clamp(2.4rem, 5vw, 4.1rem) !important; }
  #home .home-hero-v7 h1 { font-size: clamp(1.65rem, 4.2vw, 2.5rem) !important; }
  #home .home-tag-v7 { margin-bottom: 16px !important; }
  #home .compass-stage-v7 { min-height: 230px !important; }
  #home .real-compass-v7 { width: min(290px, 48vw) !important; }
  #home .dir-tile-v7 { min-height: 215px !important; }
}
@media (max-width: 780px) {
  #home .compass-stage-v7 {
    min-height: 235px !important;
  }
  #home .real-compass-v7 {
    width: min(275px, 72vw) !important;
  }
  #home .direction-tiles-v7 {
    margin-bottom: 130px !important;
  }
}

/* ===== V10.3 HOMEPAGE REFINEMENT ===== */
#home .home-hero-v7 {
  padding-bottom: 0 !important;
}
#home .home-tag-v7 {
  margin-bottom: 14px !important;
}
#home .home-pause-v93 {
  display: none !important;
}
#home .compass-stage-v7 {
  min-height: 300px !important;
  margin: 0 auto 0 !important;
}
#home .real-compass-v7 {
  width: min(345px, 62vw) !important;
}
#home .cfo-compass-question-v102 {
  display: none !important;
}
#home .cfo-compass-prompt-v103 {
  margin: 2px auto 12px !important;
  padding: 0 18px !important;
  text-align: center !important;
}
#home .cfo-compass-prompt-v103 p {
  margin: 0 !important;
}
#home .cfo-compass-prompt-v103 .pause-line {
  color: rgba(33,19,53,.78) !important;
  font-size: clamp(.98rem, 1.5vw, 1.08rem) !important;
  line-height: 1.35 !important;
}
#home .cfo-compass-prompt-v103 .question-line {
  margin-top: 5px !important;
  color: #4D1769 !important;
  font-size: clamp(1.08rem, 1.85vw, 1.3rem) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}
#home .section-title-v7 {
  display: none !important;
}
#home .direction-tiles-v7 {
  margin-top: 8px !important;
  gap: 18px !important;
}
#home .dir-tile-v7 {
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  box-shadow: 0 16px 36px rgba(75,20,100,.13) !important;
}
#home .dir-tile-v7::before {
  inset: -10px !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
  transition: transform .5s ease !important;
}
#home .dir-tile-v7:hover::before {
  transform: scale(1.16) !important;
}
#home .dir-tile-v7::after {
  inset: 0 !important;
}
.static-copyright, .copyright-v75 {
  margin-bottom: 8px !important;
}
.cfo-disclaimer {
  margin-top: 8px !important;
  margin-bottom: 110px !important;
  padding-top: 0 !important;
}
.cfo-disclaimer p {
  margin: 0 auto 8px !important;
}
.cfo-disclaimer p:last-child {
  margin-bottom: 0 !important;
}
@media (max-height: 840px) and (min-width: 900px) {
  #home .compass-stage-v7 {
    min-height: 275px !important;
  }
  #home .real-compass-v7 {
    width: min(320px, 54vw) !important;
  }
}


/* ===== V10.3.1 DISCLAIMER VISIBILITY ===== */
body{
  padding-bottom:180px !important;
}
#home{
  padding-bottom:220px !important;
}
.cfo-disclaimer{
  display:block !important;
  position:relative !important;
  z-index:5 !important;
  margin:10px auto 180px !important;
  max-width:760px !important;
  text-align:center !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
  color:rgba(33,19,53,.72) !important;
}
.cfo-disclaimer p{
  margin:0 0 10px !important;
}
.cfo-disclaimer p:last-child{
  margin-bottom:0 !important;
}
.bottom-nav{
  z-index:1000 !important;
}


/* ===== V10.3.2 FOOTER + DIRECTION TILE ALIGNMENT ===== */
body {
  padding-bottom: 220px !important;
}
#home {
  padding-bottom: 260px !important;
}
.static-copyright, .copyright-v75 {
  display: block !important;
  visibility: visible !important;
  margin: 34px auto 6px !important;
  padding: 0 20px !important;
  text-align: center !important;
  color: rgba(33,19,53,.70) !important;
  position: relative !important;
  z-index: 6 !important;
}
.cfo-disclaimer {
  display: block !important;
  visibility: visible !important;
  max-width: 820px !important;
  margin: 6px auto 170px !important;
  padding: 0 22px !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: rgba(33,19,53,.64) !important;
  position: relative !important;
  z-index: 6 !important;
}
.cfo-disclaimer p {
  margin: 0 auto 8px !important;
}
.cfo-disclaimer p:last-child {
  margin-bottom: 0 !important;
}
#home .dir-content-v7 {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
#home .dir-content-v7 h3 {
  margin-bottom: 8px !important;
}
#home .dir-content-v7 .sub {
  min-height: 2.5em !important;
  line-height: 1.12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#home .dir-content-v7 p:not(.sub) {
  min-height: 3.1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 10px !important;
}
#home .dir-content-v7 .btn {
  margin-top: 12px !important;
}
.bottom-nav {
  bottom: 18px !important;
  z-index: 1000 !important;
}
/* ===== V10.3.1 DISCLAIMER VISIBILITY ===== */
body{
  padding-bottom:180px !important;
}
#home{
  padding-bottom:220px !important;
}
.cfo-disclaimer{
  display:block !important;
  position:relative !important;
  z-index:5 !important;
  margin:10px auto 180px !important;
  max-width:760px !important;
  text-align:center !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
  color:rgba(33,19,53,.72) !important;
}
.cfo-disclaimer p{
  margin:0 0 10px !important;
}
.cfo-disclaimer p:last-child{
  margin-bottom:0 !important;
}
.bottom-nav{
  z-index:1000 !important;
}


/* ===== V10.3.2 FOOTER + DIRECTION TILE ALIGNMENT ===== */
body {
  padding-bottom: 220px !important;
}
#home {
  padding-bottom: 260px !important;
}
.static-copyright, .copyright-v75 {
  display: block !important;
  visibility: visible !important;
  margin: 34px auto 6px !important;
  padding: 0 20px !important;
  text-align: center !important;
  color: rgba(33,19,53,.70) !important;
  position: relative !important;
  z-index: 6 !important;
}
.cfo-disclaimer {
  display: block !important;
  visibility: visible !important;
  max-width: 820px !important;
  margin: 6px auto 170px !important;
  padding: 0 22px !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: rgba(33,19,53,.64) !important;
  position: relative !important;
  z-index: 6 !important;
}
.cfo-disclaimer p {
  margin: 0 auto 8px !important;
}
.cfo-disclaimer p:last-child {
  margin-bottom: 0 !important;
}
#home .dir-content-v7 {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
#home .dir-content-v7 h3 {
  margin-bottom: 8px !important;
}
#home .dir-content-v7 .sub {
  min-height: 2.5em !important;
  line-height: 1.12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#home .dir-content-v7 p:not(.sub) {
  min-height: 3.1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 10px !important;
}
#home .dir-content-v7 .btn {
  margin-top: 12px !important;
}
.bottom-nav {
  bottom: 18px !important;
  z-index: 1000 !important;
}
/* ===== V10.3.2 FOOTER + DIRECTION TILE ALIGNMENT ===== */
body {
  padding-bottom: 220px !important;
}
#home {
  padding-bottom: 260px !important;
}
.static-copyright, .copyright-v75 {
  display: block !important;
  visibility: visible !important;
  margin: 34px auto 6px !important;
  padding: 0 20px !important;
  text-align: center !important;
  color: rgba(33,19,53,.70) !important;
  position: relative !important;
  z-index: 6 !important;
}
.cfo-disclaimer {
  display: block !important;
  visibility: visible !important;
  max-width: 820px !important;
  margin: 6px auto 170px !important;
  padding: 0 22px !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: rgba(33,19,53,.64) !important;
  position: relative !important;
  z-index: 6 !important;
}
.cfo-disclaimer p {
  margin: 0 auto 8px !important;
}
.cfo-disclaimer p:last-child {
  margin-bottom: 0 !important;
}
#home .dir-content-v7 {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
#home .dir-content-v7 h3 {
  margin-bottom: 8px !important;
}
#home .dir-content-v7 .sub {
  min-height: 2.5em !important;
  line-height: 1.12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#home .dir-content-v7 p:not(.sub) {
  min-height: 3.1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 10px !important;
}
#home .dir-content-v7 .btn {
  margin-top: 12px !important;
}
.bottom-nav {
  bottom: 18px !important;
  z-index: 1000 !important;
}
/* ===== V10.3.3 MERGE SAFETY OVERRIDES ===== */
#home .home-pause-v93,
#home .section-title-v7 {
  display: none !important;
}
#home .cfo-compass-prompt-v103 {
  display: block !important;
}
#home .direction-tiles-v7 {
  margin-top: 8px !important;
  margin-bottom: 120px !important;
}
#home .dir-tile-v7 {
  border: 0 !important;
}
#home .dir-tile-v7::before {
  inset: -10px !important;
  transform: scale(1.06) !important;
}
#home .dir-tile-v7:hover::before {
  transform: scale(1.16) !important;
}


/* ===== Extracted from V10.3.4 source, order preserved ===== */


/* ===== Creative Flow Oracle v7.5 locked refinement overrides ===== */
:root {
  --cf-purple:#4b1464;
  --cf-deep:#2a153f;
  --cf-gold:#b4892f;
  --cf-gold-light:#d9a833;
  --cf-cream:#fff8ea;
  --cf-ink:#24152f;
}
html, body { max-width:100%; overflow-x:hidden; }
body {
  color:var(--cf-ink) !important;
  background-color:#fff4df !important;
  background-image:url("images/ui/ui-020-5ddbefeab0.png") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body::before, body::after, .magic-swirl, .home-v7::before, .home-v7::after, .home-bg-motion {
  content:none !important;
  display:none !important;
  background:none !important;
}
.app { width:min(1080px,100%); }
.home-v7 { color:var(--cf-purple) !important; }
.brand-mark-v7 { color:var(--cf-purple) !important; text-shadow:none !important; }
.home-hero-v7 h1 { color:var(--cf-purple) !important; text-shadow:none !important; }
.home-lead-v7 { color:#3f2a4f !important; }
.home-tag-v7 { color:var(--cf-gold) !important; }
.compass-stage-v7 { min-height:310px !important; margin:16px auto 8px !important; }
.compass-stage-v7::before, .compass-stage-v7::after { display:none !important; content:none !important; }
.real-compass-v7 { width:min(270px,60vw) !important; max-height:280px; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(55,24,67,.18)) !important; }
.direction-pulse-v7 {
  bottom:-18px !important;
  background:rgba(255,248,234,.88) !important;
  color:var(--cf-purple) !important;
  border-color:rgba(180,137,47,.40) !important;
  box-shadow:0 10px 26px rgba(75,20,100,.14) !important;
}
.ritual-v7 {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--cf-purple) !important;
  padding:8px 22px 4px !important;
}
.ritual-v7 .ritual-icon { display:none !important; }
.ritual-v7 h2 { color:var(--cf-purple) !important; }
.ritual-v7 p { color:#3f2a4f !important; }
.section-title-v7, .compass-v7 .topbar h1 { color:var(--cf-purple) !important; text-shadow:none !important; }
.subtitle, .topbar p { color:#3f2a4f !important; }
.action-cards-v7 { display:none !important; }
/* Meet Your Compass: refined, full bleed tile backgrounds */
.direction-tiles-v7 { gap:18px !important; }
.dir-tile-v7 {
  min-height:250px !important;
  align-items:center !important;
  border:1px solid rgba(180,137,47,.36) !important;
  box-shadow:0 16px 36px rgba(75,20,100,.13) !important;
  background:transparent !important;
}
.dir-tile-v7::before {
  inset:0 !important;
  background-size:cover !important;
  background-position:center !important;
  opacity:1 !important;
}
.dir-tile-v7::after {
  background:linear-gradient(to bottom, rgba(255,248,234,.16) 0%, rgba(255,248,234,.70) 62%, rgba(255,248,234,.90) 100%) !important;
}
.dir-content-v7 { padding:22px 18px !important; text-align:center !important; align-self:center !important; }
.dir-kicker-v7 { display:none !important; }
.dir-content-v7 h3 { color:var(--cf-purple) !important; font-size:clamp(1.7rem,2.6vw,2.25rem) !important; line-height:1.02 !important; margin:0 0 8px !important; }
.dir-content-v7 .sub { color:var(--cf-deep) !important; font-size:1rem !important; margin-bottom:12px !important; }
.dir-content-v7 p { color:#3e2b48 !important; font-size:.96rem !important; }
.dir-tile-v7 button { box-shadow:0 8px 18px rgba(75,20,100,.15) !important; }
.deck-showcase-v7, .quote-v7, .panel, .journal-entry, .more-card, .direction-panel-v7 {
  background:rgba(255,248,234,.88) !important;
  color:var(--cf-ink) !important;
  border-color:rgba(180,137,47,.34) !important;
}
.deck-copy-v7 h2, .quote-v7 .quote-text-v7, .direction-copy-v7 h2, .direction-copy-v7 h3, .panel h2, .panel h3 { color:var(--cf-purple) !important; }
/* Direction detail pages: use approved assets left, copy right */
.direction-panel-v7 {
  grid-template-columns:minmax(320px,420px) 1fr !important;
  gap:0 !important;
  overflow:hidden !important;
}
.direction-art-v7 {
  min-height:520px !important;
  background-size:cover !important;
  background-position:center !important;
  padding:0 !important;
}
.direction-art-v7 img { display:none !important; }
.direction-copy-v7 { padding:34px 34px !important; }
.direction-copy-v7 p { color:#2e1e38 !important; }
.direction-actions-v6 { display:flex; flex-wrap:wrap; gap:10px; }
.direction-actions-v6 button::before { content:"✦ "; }
.direction-actions-v6 button.light::before { content:""; }
/* Draw controls spoiler fix */
#draw select { color:var(--cf-purple) !important; background:rgba(255,248,234,.88) !important; border-color:rgba(180,137,47,.45) !important; }
#draw .controls button.light { color:var(--cf-purple) !important; background:rgba(255,248,234,.75) !important; }
/* Journal polish */
#journal .panel { position:relative; overflow:hidden; }
#journal .panel::before { content:"✒"; position:absolute; right:28px; top:20px; font-size:3rem; color:rgba(180,137,47,.23); transform:rotate(-12deg); pointer-events:none; }
#journal .panel::after { content:"✦ ✧ ✦"; position:absolute; right:24px; bottom:16px; color:rgba(180,137,47,.42); pointer-events:none; }
textarea, input { background:rgba(255,252,244,.86) !important; color:var(--cf-ink) !important; }
.copyright-v75 {
  text-align:center;
  color:var(--cf-purple);
  font-size:.84rem;
  margin:24px auto 4px;
  padding:12px 12px 0;
  opacity:.95;
}
.bottom-nav { background:rgba(255,248,234,.92) !important; }
.nav-item { color:#4d3f57 !important; }
.nav-item.active { color:var(--cf-purple) !important; }
img, .direction-art-v7, .dir-tile-v7 { -webkit-user-drag:none; user-drag:none; }
.protected-art, .face img, .thumb, .deck-showcase-v7 img, .real-compass-v7 { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
@media(max-width:780px){
  body { background-attachment:scroll !important; background-position:center top !important; }
  .direction-panel-v7 { grid-template-columns:1fr !important; }
  .direction-art-v7 { min-height:420px !important; }
  .direction-copy-v7 { padding:24px 22px !important; }
  .direction-tiles-v7 { grid-template-columns:1fr !important; }
  .dir-tile-v7 { min-height:225px !important; }
  .compass-stage-v7 { min-height:290px !important; }
  .real-compass-v7 { width:min(230px,72vw) !important; }
  .brand-mark-v7 { font-size:2.55rem !important; }
}
@media(max-width:480px){
  .app { padding-left:12px !important; padding-right:12px !important; }
  .direction-art-v7 { min-height:360px !important; }
  .copyright-v75 { font-size:.74rem; padding-bottom:8px; }
}


/* ===== Extracted from V10.3.4 source, order preserved ===== */


/* ===== V7.5 FINAL POLISH FIXES ONLY ===== */
#draw .topbar h1,
#journal .topbar h1,
#explore .topbar h1 {
  color:#4b1464 !important;
  text-shadow:none !important;
}
#draw .topbar .eyebrow,
#journal .topbar .eyebrow,
#explore .topbar .eyebrow,
#compass .topbar .eyebrow {
  color:#D4A64A !important;
  opacity:1 !important;
  font-weight:700 !important;
}
.direction-art-v7 {
  background-image:var(--art) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}


/* ===== Extracted from V10.3.4 source, order preserved ===== */


/* ===== V7.5.1 UI LOCK: ONLY TWO FIXES ===== */
/* Fix 1: force approved directional artwork to display in existing left-side image panels. */
#dir-north .direction-art-v7 { background-image:url('images/ui/ui-011-b641fcabdf.png') !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; }
#dir-east .direction-art-v7 { background-image:url('images/ui/ui-012-4d047c5d9c.png') !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; }
#dir-south .direction-art-v7 { background-image:url('images/ui/ui-013-77a5e607ff.png') !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; }
#dir-west .direction-art-v7 { background-image:url('images/ui/ui-014-dab92d6116.png') !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; }

/* Fix 2: make all small section labels match the main headline purple for readability. */
.topbar .eyebrow,
#draw .topbar .eyebrow,
#compass .topbar .eyebrow,
#journal .topbar .eyebrow,
#explore .topbar .eyebrow {
  color:#4b1464 !important;
  opacity:1 !important;
  text-shadow:none !important;
}


/* ===== Extracted from V10.3.4 source, order preserved ===== */


  #draw select { display:none !important; }
  #directionDrawControls, #directionDrawControlsV8Working { display:none !important; }
  .guide-copy { white-space: normal !important; }


/* ===== Extracted from V10.3.4 source, order preserved ===== */


  #draw select { display:none !important; }
  #directionDrawControls, #directionDrawControlsV8, #directionDrawControlsV8Working { display:none !important; }
  .guide-copy { white-space: normal !important; }
  .production-status-v9 {font-size:.72rem; color:rgba(44,24,64,.7); text-align:center; margin-top:6px;}






/* ===== V11 RC1c HOME FOOTER SPACING POLISH ===== */
#home .deck-showcase-v7,
#home .home-quote-v7,
#home .rotating-affirmation,
#home #homeQuote {
  margin-bottom: 18px !important;
}
#home .static-copyright,
#home .copyright-v75,
#home .cfo-disclaimer {
  margin-top: 14px !important;
}
#home {
  padding-bottom: 130px !important;
}



/* ===== V11 RC1d FOOTER COPYRIGHT + DISCLAIMER FIX ===== */
.cfo-required-disclaimer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 900px !important;
  margin: 8px auto 125px !important;
  padding: 0 24px !important;
  text-align: center !important;
  color: rgba(33,19,53,.70) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  position: relative !important;
  z-index: 20 !important;
}
.cfo-footer-required {
  max-width: 900px !important;
  margin: 34px auto 125px !important;
  text-align: center !important;
}
.cfo-footer-required .cfo-footer-copy {
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  color: rgba(33,19,53,.72) !important;
}
.bottom-nav {
  z-index: 1000 !important;
}
@media (max-width: 640px) {
  .cfo-required-disclaimer {
    margin-bottom: 145px !important;
    font-size: 10px !important;
  }
}


/* ===== V11 RC5 PERFORMANCE HINTS ===== */
.view:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}
img {
  max-width: 100%;
}



/* ===== V11 RC7 COMPLETE LAYOUT POLISH ===== */

:root {
  --cfo-nav-safe-area: 132px;
}

/* A wider stage gives the artwork and guidance room to breathe. */
.app {
  width: min(1320px, 100%) !important;
  padding-bottom: calc(var(--cfo-nav-safe-area) + 34px) !important;
}

/* Every page respects the fixed navigation safe zone. */
.view {
  padding-bottom: var(--cfo-nav-safe-area);
  scroll-padding-bottom: var(--cfo-nav-safe-area);
}
#home,
#draw,
#compass,
#journal,
#explore {
  min-height: calc(100vh - 24px);
}
#home .direction-tiles-v7,
#home .action-cards-v7,
#home .quote-v7,
#compass .direction-panel-v7,
#journal > :last-child,
#explore > :last-child {
  margin-bottom: 38px;
}

/* HOME — direction cards can always scroll completely above the menu. */
#home {
  padding-bottom: calc(var(--cfo-nav-safe-area) + 70px) !important;
}
#home .direction-tiles-v7 {
  scroll-margin-bottom: calc(var(--cfo-nav-safe-area) + 28px);
}

/* DRAW — large artwork remains the hero. */
#draw {
  padding-bottom: calc(var(--cfo-nav-safe-area) + 48px) !important;
}
#draw .draw-shell {
  width: min(100%, 1220px);
  margin: 0 auto;
  gap: 30px;
  align-items: start;
}

/* Before guidance: large card on left, next action on right. */
#draw .draw-shell:not(.guidance-ready) {
  display: grid !important;
  grid-template-columns: minmax(390px, 480px) minmax(230px, 300px) !important;
  justify-content: center;
  align-items: center;
}
#draw .draw-shell:not(.guidance-ready) .card-stage {
  width: 100% !important;
  max-width: 790px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, 480px) minmax(220px, 280px);
  grid-template-areas:
    "card prompt"
    "card reveal";
  column-gap: 30px;
  row-gap: 14px;
  align-items: center;
  position: relative !important;
  top: auto !important;
}
#draw .draw-shell:not(.guidance-ready) .card-frame {
  grid-area: card;
  width: min(100%, 450px) !important;
  max-width: 450px;
  margin: 0 auto;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt {
  grid-area: prompt;
  align-self: end;
  margin: 0 0 2px !important;
  text-align: left;
  color: #a9761f;
  font-size: 1.05rem;
}
#draw .draw-shell:not(.guidance-ready) .reveal-message {
  grid-area: reveal;
  align-self: start;
  justify-content: flex-start;
  margin: 4px 0 0 !important;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.25,1);
}
#draw .draw-shell:not(.guidance-ready) .reveal-message.show {
  opacity: 1;
  transform: translateY(0);
}
#draw .draw-shell:not(.guidance-ready) #guidancePanel {
  display: none !important;
}

/* After guidance: reusable Oracle Stage with large card + reading panel. */
#draw .draw-shell.guidance-ready {
  display: grid !important;
  grid-template-columns: minmax(390px, 460px) minmax(0, 1fr) !important;
  align-items: start;
}
#draw .draw-shell.guidance-ready .card-stage {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  position: sticky;
  top: 18px;
}
#draw .draw-shell.guidance-ready .card-frame {
  width: min(100%, 430px) !important;
  max-width: 430px;
}
#draw .draw-shell.guidance-ready .card-prompt,
#draw .draw-shell.guidance-ready .reveal-message {
  text-align: center;
  justify-content: center;
}
#draw .draw-shell.guidance-ready .reveal-message {
  margin-bottom: 18px;
}
#draw .guidance-card {
  min-width: 0;
  scroll-margin-top: 20px;
  scroll-margin-bottom: calc(var(--cfo-nav-safe-area) + 24px);
}
#draw .step-panel.active {
  animation: cfoStepFade .45s cubic-bezier(.22,.8,.25,1) both;
}
#draw .draw-shell.guidance-ready #guidancePanel {
  animation: cfoPanelArrive .55s cubic-bezier(.22,.8,.25,1) both;
}

/* Subtle, calm movement. */
#draw .card-frame.cfo-card-settle {
  animation: cfoCardSettle 1.3s cubic-bezier(.22,.8,.25,1) both;
}
#draw .card-frame.cfo-card-settle .face {
  animation: cfoBreathingShadow 1.65s ease-in-out 1;
}
@keyframes cfoCardSettle {
  0%   { transform: translateY(-3px) scale(1.006); }
  55%  { transform: translateY(1px) scale(1.002); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes cfoBreathingShadow {
  0%   { box-shadow: 0 30px 65px rgba(0,0,0,.45),0 0 0 1px rgba(247,220,139,.42); }
  45%  { box-shadow: 0 34px 74px rgba(0,0,0,.38),0 0 28px rgba(217,168,51,.27),0 0 0 1px rgba(247,220,139,.62); }
  100% { box-shadow: 0 30px 65px rgba(0,0,0,.45),0 0 0 1px rgba(247,220,139,.42); }
}
@keyframes cfoPanelArrive {
  from { opacity: .35; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cfoStepFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* COMPASS — maintain large artwork and guarantee a scrollable safe ending. */
#compass {
  padding-bottom: calc(var(--cfo-nav-safe-area) + 72px) !important;
}
#compass .direction-panel-v7 {
  grid-template-columns: minmax(390px, 520px) minmax(0, 1fr) !important;
  align-items: stretch;
  scroll-margin-bottom: calc(var(--cfo-nav-safe-area) + 36px);
}
#compass .direction-art-v7 {
  min-height: 560px;
}
#compass .direction-copy-v7 {
  padding-bottom: 56px;
}
#compass .direction-actions-v6 {
  margin-bottom: 16px;
}

/* JOURNAL + EXPLORE — no final action or footer can fall under navigation. */
#journal,
#explore {
  padding-bottom: calc(var(--cfo-nav-safe-area) + 64px) !important;
}

/* Approved journaling language. */
#draw textarea::placeholder {
  color: rgba(77,34,109,.58);
  font-style: italic;
}
#draw .carry-intention {
  margin: 18px 0 2px;
  color: #4d226d;
  font-size: 1.02rem;
  line-height: 1.5;
  text-align: center;
  font-style: italic;
  opacity: .88;
}

/* Medium screens: preserve impact while stacking only when necessary. */
@media (max-width: 1050px) {
  #draw .draw-shell:not(.guidance-ready) {
    grid-template-columns: 1fr !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-stage {
    grid-template-columns: minmax(360px, 440px) minmax(210px, 260px);
  }
  #draw .draw-shell.guidance-ready {
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
  }
  #compass .direction-panel-v7 {
    grid-template-columns: minmax(340px, 440px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px) {
  :root { --cfo-nav-safe-area: 146px; }

  #draw .draw-shell:not(.guidance-ready),
  #draw .draw-shell.guidance-ready {
    grid-template-columns: 1fr !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "card"
      "prompt"
      "reveal";
    width: min(100%, 500px) !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-frame,
  #draw .draw-shell.guidance-ready .card-frame {
    width: min(100%, 420px) !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-prompt,
  #draw .draw-shell:not(.guidance-ready) .reveal-message {
    text-align: center;
    justify-content: center;
  }
  #draw .draw-shell.guidance-ready .card-stage {
    position: relative;
    top: auto;
  }
  #compass .direction-panel-v7 {
    grid-template-columns: 1fr !important;
  }
  #compass .direction-art-v7 {
    min-height: 500px;
  }
}

@media (max-width: 560px) {
  #draw .draw-shell:not(.guidance-ready) .card-frame,
  #draw .draw-shell.guidance-ready .card-frame {
    width: min(100%, 360px) !important;
  }
  #home .direction-tiles-v7 {
    grid-template-columns: 1fr;
  }
}

/* Accessibility: preserve meaning without required motion. */
@media (prefers-reduced-motion: reduce) {
  #draw .card-frame.cfo-card-settle,
  #draw .card-frame.cfo-card-settle .face,
  #draw .draw-shell.guidance-ready #guidancePanel,
  #draw .step-panel.active {
    animation: none !important;
  }
  #draw .reveal-message {
    transition: none !important;
  }
}


/* ===== V11.2 FINAL UI POLISH ===== */
/* Keep the Home invitation quiet and uncluttered. */
#home .cfo-compass-prompt-v103 .pause-line {
  margin-bottom: 0;
}

/* A small reflective cue beneath the Compass title. */
#compass .compass-calling-line {
  margin: 7px auto 10px;
  font-size: clamp(.72rem, 1.5vw, .82rem);
  line-height: 1.35;
  letter-spacing: .045em;
  color: rgba(83, 61, 91, .72);
  font-style: italic;
  text-align: center;
}
#compass .compass-calling-line + .subtitle {
  margin-top: 0;
}


/* ===== V1.0 FINAL PRODUCTION UI LOCK ===== */
/* Home: final hierarchy and compact compass-to-directions flow. */
#home .home-hero-v7 {
  padding-top: 10px !important;
}
#home .brand-mark-v7 {
  font-size: clamp(2.7rem, 6vw, 4.7rem) !important;
  margin-top: 0 !important;
}
#home .home-hero-v7 h1 {
  font-size: clamp(1.02rem, 1.8vw, 1.28rem) !important;
  line-height: 1.2 !important;
  margin: 6px 0 4px !important;
}
#home .home-lead-v7 {
  font-size: clamp(.96rem, 1.5vw, 1.08rem) !important;
  line-height: 1.35 !important;
  margin: 0 auto !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
#home .home-tag-v7 { display:none !important; }
#home .compass-stage-v7 {
  min-height: 230px !important;
  height: 230px !important;
  margin: 2px auto 0 !important;
  padding: 0 !important;
}
#home .real-compass-v7 {
  width: min(255px, 48vw) !important;
  max-height: 225px !important;
}
#home .cfo-compass-prompt-v103 {
  margin: 2px auto 8px !important;
  padding: 0 18px !important;
}
#home .cfo-compass-prompt-v103 .pause-line {
  display:block !important;
  color:#9b6f18 !important;
  font-size:clamp(.95rem,1.45vw,1.04rem) !important;
  line-height:1.3 !important;
  font-style:italic !important;
  margin:0 !important;
}
#home .direction-tiles-v7 {
  margin-top: 4px !important;
}

/* Compass: quiet title, concise invitation, compact tabs and higher content. */
#compass .topbar {
  margin: 2px 0 10px !important;
}
#compass .topbar h1 {
  font-size: clamp(1.02rem, 1.8vw, 1.22rem) !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}
#compass .compass-calling-line {
  font-size: clamp(.82rem, 1.35vw, .94rem) !important;
  margin: 5px auto 8px !important;
  line-height: 1.3 !important;
}
#compass .topbar .subtitle { display:none !important; }
#compass .direction-tabs-v7 {
  margin: 8px 0 14px !important;
  gap: 10px !important;
}
#compass .dir-tab-v7 {
  min-height: 48px !important;
  padding: 7px 9px !important;
  border-radius: 16px !important;
  font-size: .88rem !important;
  line-height: 1.05 !important;
}
#compass .dir-tab-v7 small {
  font-size: .68rem !important;
  line-height: 1.05 !important;
}
#compass .direction-panel-v7 {
  grid-template-columns: minmax(340px, 455px) minmax(0, 1fr) !important;
  align-items: stretch !important;
}
#compass .direction-art-v7 {
  min-height: 430px !important;
  max-height: 470px !important;
  background-position: center 42% !important;
}
#compass .direction-copy-v7 {
  padding: 20px 28px 34px !important;
  align-self: start !important;
}
#compass .direction-copy-v7 .kicker-v7 {
  margin: 0 0 5px !important;
}
#compass .direction-copy-v7 h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.55rem) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
#compass .direction-copy-v7 h3 {
  font-size: clamp(1rem, 1.65vw, 1.14rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}
#compass .direction-copy-v7 p {
  font-size: 1rem !important;
  line-height: 1.48 !important;
  margin: 8px 0 !important;
}
#compass .direction-copy-v7 blockquote {
  margin: 12px 0 !important;
}

@media (max-width: 820px) {
  #home .compass-stage-v7 { min-height: 210px !important; height: 210px !important; }
  #home .real-compass-v7 { width:min(225px,62vw) !important; max-height:205px !important; }
  #compass .direction-panel-v7 { grid-template-columns:1fr !important; }
  #compass .direction-art-v7 { min-height:360px !important; max-height:390px !important; }
  #compass .direction-copy-v7 { padding:20px 22px 34px !important; }
}

/* ===== V1.0 FINAL MICRO-POLISH — corrected source override ===== */
/* Home: lift compass/tagline group and add breathing room before direction cards. */
#home .compass-stage-v7 {
  min-height: 215px !important;
  height: 215px !important;
  margin: -10px auto 0 !important;
}
#home .real-compass-v7 {
  width: min(255px, 52vw) !important;
  max-height: 215px !important;
}
#home .cfo-compass-prompt-v103 {
  margin: 0 auto 24px !important;
  padding: 0 18px !important;
}
#home .cfo-compass-prompt-v103 .pause-line {
  margin: 0 !important;
}
#home .direction-tiles-v7 {
  margin-top: 0 !important;
}

/* Compass: centered, compact segmented tabs without squeezing the labels. */
#compass .direction-tabs-v7 {
  grid-template-columns: repeat(4, minmax(170px, 220px)) !important;
  justify-content: center !important;
  gap: 14px !important;
  width: min(100%, 980px) !important;
  margin: 8px auto 16px !important;
}
#compass .dir-tab-v7 {
  width: 100% !important;
  max-width: none !important;
  min-height: 50px !important;
  padding: 8px 12px !important;
}

/* Draw: once guidance is displayed, remove the already-completed reveal controls. */
#draw .draw-shell.guidance-ready #cardPrompt,
#draw .draw-shell.guidance-ready #revealWrap {
  display: none !important;
}

@media (max-width: 900px) {
  #compass .direction-tabs-v7 {
    grid-template-columns: repeat(2, minmax(170px, 240px)) !important;
    width: min(100%, 520px) !important;
  }
}
@media (max-width: 520px) {
  #home .compass-stage-v7 {
    min-height: 195px !important;
    height: 195px !important;
    margin-top: -6px !important;
  }
  #home .real-compass-v7 {
    width: min(220px, 64vw) !important;
    max-height: 190px !important;
  }
  #home .cfo-compass-prompt-v103 {
    margin-bottom: 20px !important;
  }
  #compass .direction-tabs-v7 {
    grid-template-columns: 1fr !important;
    width: min(100%, 300px) !important;
  }
}

/* ===== CREATIVE FLOW RITUAL — GOLD FLOW REVEAL ===== */
#creativeFlowRitual {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}
#creativeFlowRitual.is-active { opacity: 1; }
#draw .card-frame.cfo-ritual-glow {
  animation: cfoRitualCardGlow 1.45s cubic-bezier(.22,.8,.25,1) both;
}
#draw .card-frame.cfo-ritual-glow .face {
  box-shadow: 0 30px 65px rgba(0,0,0,.38),
              0 0 34px rgba(244,197,66,.42),
              0 0 0 1px rgba(255,231,168,.78) !important;
}
@keyframes cfoRitualCardGlow {
  0% { transform: scale(.985); filter: brightness(.96); }
  35% { transform: scale(1.012); filter: brightness(1.06); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  #creativeFlowRitual { display:none !important; }
  #draw .card-frame.cfo-ritual-glow { animation:none !important; }
}

/* ===== V1.0 DRAW PAGE FINAL VIEWPORT POLISH ===== */
/* Compact the header and controls so the full card remains above the floating navigation. */
#draw .topbar {
  margin: 0 0 6px !important;
}
#draw .topbar .eyebrow {
  margin-bottom: 4px !important;
}
#draw .topbar h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.65rem) !important;
  line-height: .95 !important;
}
#draw .controls {
  margin: 8px 0 10px !important;
  gap: 10px !important;
}
#draw .draw-shell {
  margin-top: 0 !important;
}
/* Size the pre-guidance card against the available viewport height, not width alone. */
#draw .draw-shell:not(.guidance-ready) .card-stage {
  align-items: center !important;
  row-gap: 10px !important;
}
#draw .draw-shell:not(.guidance-ready) .card-frame {
  width: min(410px, calc((100vh - 270px) * .70)) !important;
  max-width: 410px !important;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt {
  max-width: 290px !important;
  font-size: 1rem !important;
  line-height: 1.42 !important;
}
#draw .draw-shell:not(.guidance-ready) .reveal-message {
  margin-top: 2px !important;
}
@media (max-height: 820px) and (min-width: 821px) {
  #draw .topbar h1 {
    font-size: clamp(2.15rem, 4.8vw, 3.25rem) !important;
  }
  #draw .controls {
    margin: 6px 0 8px !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-frame {
    width: min(380px, calc((100vh - 245px) * .70)) !important;
  }
}
@media (max-width: 820px) {
  #draw .topbar h1 {
    font-size: clamp(2.15rem, 11vw, 3.2rem) !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-frame {
    width: min(360px, 82vw, calc((100vh - 300px) * .70)) !important;
  }
}


/* ===== V1.0 PRODUCTION DESIGN EDITS — HOME / COMPASS / CIRCLE ===== */
/* Global page-title hierarchy: smaller and consistent throughout the app. */
.view .topbar h1,
#draw .topbar h1,
#compass .topbar h1,
#journal .topbar h1,
#explore .topbar h1 {
  font-size: clamp(1.85rem, 4vw, 2.65rem) !important;
  line-height: 1.04 !important;
  margin: 4px 0 7px !important;
  letter-spacing: -.018em !important;
}
.view .topbar {
  margin: 4px auto 18px !important;
  max-width: 860px;
}
.view .topbar .subtitle,
.view .topbar p {
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(.94rem, 1.5vw, 1.04rem) !important;
  line-height: 1.5 !important;
}
.view h2 { line-height: 1.12; }

/* Home: product experience becomes the first, compact above-the-fold hero. */
#home .home-product-hero {
  order: -1;
  margin: 4px auto 24px !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr) !important;
  max-height: 470px;
}
#home .home-product-hero img {
  min-height: 0 !important;
  height: clamp(310px, 42vw, 450px) !important;
  object-position: center 48%;
}
#home .home-product-hero .deck-copy-v7 {
  padding: clamp(24px, 4vw, 46px) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#home .home-product-hero h2 {
  font-size: clamp(1.72rem, 3.2vw, 2.5rem) !important;
  line-height: 1.08 !important;
  margin: 0 0 13px !important;
}
#home .home-product-hero p {
  font-size: clamp(.96rem, 1.45vw, 1.08rem) !important;
  line-height: 1.52 !important;
  margin: 0 0 20px !important;
}
#home .home-product-hero button { align-self:flex-start; }
#home .home-hero-v7 { padding: 8px 0 4px !important; }
#home .brand-mark-v7 { font-size: clamp(2.35rem, 5vw, 4rem) !important; }
#home .compass-stage-v7 { min-height:190px !important; height:190px !important; margin:-8px auto 0 !important; }
#home .real-compass-v7 { width:min(225px,46vw) !important; max-height:190px !important; }
#home .cfo-compass-prompt-v103 { margin:0 auto 16px !important; }

/* Compass: four illustrated directions are the landing experience. */
#compass .compass-overview-v1 { display:block; }
#compass .compass-detail-v1 { display:none; }
#compass.show-direction-detail .compass-overview-v1 { display:none; }
#compass.show-direction-detail .compass-detail-v1 { display:block; }
#compass .compass-direction-tiles {
  margin: 14px auto 28px !important;
  max-width: 1180px;
}
#compass .compass-direction-tiles .dir-tile-v7 {
  min-height: 360px;
}
#compass .compass-back-v1 {
  display:block;
  width:max-content;
  margin: 2px auto 12px;
}
#compass.show-direction-detail .topbar { margin-bottom:10px !important; }
#compass .direction-copy-v7 h2 {
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
}

/* Circle / Explore: reduce portrait and intro block so more content appears sooner. */
#explore.circle-v1 .topbar { margin-bottom:14px !important; }
#explore.circle-v1 .explore-grid-v6 { gap:14px; }
#explore.circle-v1 .explore-card-v6.wide {
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr) !important;
  min-height:0 !important;
}
#explore.circle-v1 .explore-card-v6.wide img {
  height:260px !important;
  min-height:260px !important;
  object-position:center 35%;
}
#explore.circle-v1 .explore-card-v6.wide div { padding:22px 28px !important; }
#explore.circle-v1 .explore-card-v6.wide h2 {
  font-size:clamp(1.45rem,2.5vw,1.9rem) !important;
  margin:0 0 8px !important;
}
#explore.circle-v1 .explore-card-v6.wide p {
  margin:7px 0 !important;
  line-height:1.48 !important;
}
#explore.circle-v1 .explore-card-v6:not(.wide) { padding:20px !important; }
#explore.circle-v1 .explore-card-v6:not(.wide) h2 {
  font-size:clamp(1.25rem,2vw,1.55rem) !important;
  margin-top:0;
}

@media (max-width: 820px) {
  #home .home-product-hero { grid-template-columns:1fr !important; max-height:none; }
  #home .home-product-hero img { height:260px !important; }
  #home .home-product-hero .deck-copy-v7 { padding:24px !important; }
  #home .home-product-hero h2 { font-size:1.75rem !important; }
  #compass .compass-direction-tiles { grid-template-columns:repeat(2,1fr) !important; }
  #compass .compass-direction-tiles .dir-tile-v7 { min-height:320px; }
  #explore.circle-v1 .explore-card-v6.wide { grid-template-columns:1fr !important; }
  #explore.circle-v1 .explore-card-v6.wide img { height:230px !important; min-height:230px !important; }
}
@media (max-width: 520px) {
  .view .topbar h1,
  #draw .topbar h1,
  #compass .topbar h1,
  #journal .topbar h1,
  #explore .topbar h1 { font-size:1.8rem !important; }
  #home .home-product-hero { margin-top:0 !important; }
  #home .home-product-hero img { height:220px !important; }
  #home .home-product-hero .deck-copy-v7 { padding:21px !important; }
  #home .home-product-hero h2 { font-size:1.55rem !important; }
  #home .brand-mark-v7 { font-size:2.35rem !important; }
  #compass .compass-direction-tiles { grid-template-columns:1fr !important; }
  #compass .compass-direction-tiles .dir-tile-v7 { min-height:300px; }
  #explore.circle-v1 .explore-card-v6.wide img { height:205px !important; min-height:205px !important; }
  #explore.circle-v1 .explore-card-v6.wide div { padding:20px !important; }
}


/* ===== V1.0 RESPONSIVE LAYOUT RESTORATION — 2026-07-21 ===== */
/* This final override restores the proven Draw/Compass proportions while
   retaining the new Home-first product hero and Circle copy. */

/* Shared centering and vertical breathing room. */
#draw .topbar,
#compass .topbar,
#journal .topbar,
#explore .topbar {
  width: 100%;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#draw .topbar { margin-top: 6px !important; margin-bottom: 8px !important; }
#draw .topbar .eyebrow,
#draw .topbar h1 { text-align:center !important; }
#draw .controls {
  width:100%;
  justify-content:center !important;
  align-items:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* HOME — show the complete real photograph without cropping. */
#home .home-product-hero {
  width:min(1180px,100%) !important;
  max-height:none !important;
  grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr) !important;
  align-items:stretch !important;
  background:rgba(255,248,234,.90) !important;
}
#home .home-product-hero img {
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1000 / 882 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:rgba(255,248,234,.58) !important;
}
#home .home-product-hero .deck-copy-v7 {
  min-height:100%;
  padding:clamp(26px,4vw,48px) !important;
}

/* DRAW — centered title and card sized to clear floating navigation. */
#draw .topbar h1 {
  font-size:clamp(2.35rem,5.3vw,3.55rem) !important;
  line-height:.98 !important;
}
#draw .draw-shell:not(.guidance-ready) .card-stage {
  width:100% !important;
  max-width:860px !important;
  display:grid !important;
  grid-template-columns:minmax(245px,340px) minmax(230px,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:46px !important;
  row-gap:8px !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
}
#draw .draw-shell:not(.guidance-ready) .card-frame {
  grid-row:1 / span 2;
  width:min(340px,calc((100vh - 250px) * .70)) !important;
  max-width:340px !important;
  justify-self:end;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt,
#draw .draw-shell:not(.guidance-ready) .reveal-message {
  grid-column:2;
  justify-self:start;
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt {
  align-self:end;
  max-width:300px !important;
  font-size:1rem !important;
}
#draw .draw-shell:not(.guidance-ready) .reveal-message { align-self:start; margin-top:4px !important; }
#draw .draw-shell.guidance-ready {
  grid-template-columns:minmax(250px,330px) minmax(0,1fr) !important;
  gap:24px !important;
  align-items:start !important;
}
#draw .draw-shell.guidance-ready .card-frame {
  width:min(310px,calc((100vh - 235px) * .70)) !important;
  max-width:310px !important;
}

/* COMPASS LANDING — centered, balanced, no white rims. */
#compass:not(.show-direction-detail) {
  min-height:calc(100vh - 116px);
  display:none;
  align-content:center;
  padding-top:clamp(24px,6vh,72px) !important;
  padding-bottom:clamp(100px,12vh,135px) !important;
}
#compass.view.active:not(.show-direction-detail) { display:grid !important; }
#compass:not(.show-direction-detail) .topbar {
  margin:0 auto 22px !important;
  text-align:center !important;
}
#compass:not(.show-direction-detail) .topbar h1 {
  font-size:clamp(2rem,4vw,3rem) !important;
  margin:4px auto 8px !important;
}
#compass .compass-calling-line {
  text-align:center !important;
  margin:6px auto 0 !important;
}
#compass .compass-direction-tiles {
  width:min(1180px,100%) !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:0 auto !important;
}
#compass .compass-direction-tiles .dir-tile-v7 {
  min-height:310px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 18px 42px rgba(50,26,56,.18) !important;
}

/* COMPASS DETAIL — restore clean image-left / copy-right composition. */
#compass.show-direction-detail {
  padding-top:clamp(12px,2.2vh,28px) !important;
  padding-bottom:120px !important;
}
#compass.show-direction-detail > .topbar { display:none !important; }
#compass.show-direction-detail .compass-detail-v1 {
  width:min(1100px,100%) !important;
  margin:0 auto !important;
}
#compass .compass-back-v1 {
  margin:0 0 12px !important;
  width:max-content !important;
}
#compass.show-direction-detail .direction-tabs-v7 { display:none !important; }
#compass.show-direction-detail .direction-panel-v7 {
  grid-template-columns:minmax(330px,430px) minmax(0,1fr) !important;
  gap:0 !important;
  width:100% !important;
  max-width:1040px !important;
  margin:0 auto !important;
  align-items:stretch !important;
  overflow:hidden !important;
}
#compass.show-direction-detail .direction-art-v7 {
  min-height:500px !important;
  max-height:none !important;
  padding:24px !important;
  background-size:cover !important;
  background-position:center !important;
}
#compass.show-direction-detail .direction-copy-v7 {
  padding:clamp(26px,3.2vw,44px) !important;
  align-self:center !important;
}
#compass.show-direction-detail .direction-copy-v7 h2 {
  font-size:clamp(2.1rem,4vw,3rem) !important;
  margin:0 0 8px !important;
}
#compass.show-direction-detail .direction-copy-v7 h3 {
  font-size:clamp(1.05rem,1.8vw,1.3rem) !important;
}
#compass.show-direction-detail .direction-copy-v7 p {
  font-size:clamp(.96rem,1.25vw,1.05rem) !important;
  line-height:1.48 !important;
}
#compass.show-direction-detail .direction-actions-v6 {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

/* MOBILE / TABLET */
@media (max-width: 820px) {
  #home .home-product-hero {
    grid-template-columns:1fr !important;
    width:min(620px,100%) !important;
  }
  #home .home-product-hero img {
    aspect-ratio:1000 / 882 !important;
    max-height:none !important;
  }
  #home .home-product-hero .deck-copy-v7 { padding:24px !important; }

  #draw .draw-shell:not(.guidance-ready) .card-stage {
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    max-width:100% !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-frame {
    width:min(330px,76vw,calc((100vh - 285px) * .70)) !important;
    justify-self:center !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-prompt,
  #draw .draw-shell:not(.guidance-ready) .reveal-message {
    text-align:center !important;
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #draw .draw-shell.guidance-ready { grid-template-columns:1fr !important; }
  #draw .draw-shell.guidance-ready .card-frame {
    width:min(300px,72vw,calc((100vh - 285px) * .70)) !important;
  }

  #compass:not(.show-direction-detail) {
    align-content:start;
    padding-top:24px !important;
  }
  #compass .compass-direction-tiles {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:min(650px,100%) !important;
  }
  #compass .compass-direction-tiles .dir-tile-v7 { min-height:290px !important; }

  #compass.show-direction-detail .direction-panel-v7 {
    grid-template-columns:1fr !important;
    max-width:650px !important;
  }
  #compass.show-direction-detail .direction-art-v7 {
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }
  #compass.show-direction-detail .direction-copy-v7 { padding:24px !important; }
}

@media (max-width: 520px) {
  .app { padding-top:12px !important; padding-bottom:94px !important; }
  #home .home-product-hero { border-radius:22px !important; }
  #home .home-product-hero .deck-copy-v7 { padding:20px !important; }
  #home .home-product-hero h2 { font-size:1.5rem !important; }

  #draw .topbar h1 { font-size:2.25rem !important; }
  #draw .controls { gap:8px !important; margin-bottom:8px !important; }
  #draw .controls button { padding:10px 13px !important; font-size:.78rem !important; }
  #draw .controls select { display:none !important; }
  #draw .draw-shell:not(.guidance-ready) .card-frame {
    width:min(292px,78vw,calc((100vh - 275px) * .70)) !important;
  }
  #draw .draw-shell.guidance-ready .card-frame {
    width:min(270px,72vw,calc((100vh - 275px) * .70)) !important;
  }

  #compass:not(.show-direction-detail) { padding-top:16px !important; }
  #compass:not(.show-direction-detail) .topbar h1 { font-size:1.8rem !important; }
  #compass .compass-direction-tiles {
    grid-template-columns:1fr !important;
    width:min(340px,100%) !important;
    gap:14px !important;
  }
  #compass .compass-direction-tiles .dir-tile-v7 { min-height:270px !important; }
  #compass.show-direction-detail .compass-back-v1 {
    margin:0 auto 12px !important;
  }
  #compass.show-direction-detail .direction-panel-v7 { border-radius:24px !important; }
  #compass.show-direction-detail .direction-copy-v7 { padding:22px 20px 26px !important; }
  #compass.show-direction-detail .direction-actions-v6 { flex-direction:column !important; }
  #compass.show-direction-detail .direction-actions-v6 button { width:100% !important; }
}

/* =========================================================
   V1.0 FINAL POLISH — home clearance, draw alignment, circle story
   ========================================================= */

/* HOME: keep the floating dock clear of the next section. */
#home.home-v7 {
  padding-bottom: 150px !important;
}
#home .home-product-hero {
  margin-bottom: clamp(110px, 13vh, 145px) !important;
}
#home .home-hero-v7 {
  position: relative;
  z-index: 1;
  scroll-margin-top: 120px;
}

/* DRAW: instruction and reveal button live together to the right of the card. */
#draw .draw-shell:not(.guidance-ready) .card-stage {
  width: min(780px, 100%) !important;
  max-width: 780px !important;
  grid-template-columns: minmax(270px, 330px) minmax(250px, 310px) !important;
  column-gap: 54px !important;
}
#draw .draw-shell:not(.guidance-ready) .card-frame {
  width: min(320px, calc((100vh - 260px) * .70)) !important;
  max-width: 320px !important;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt,
#draw .draw-shell:not(.guidance-ready) .reveal-message {
  width: 100% !important;
  max-width: 310px !important;
  justify-self: center !important;
  text-align: center !important;
  margin-left: 0 !important;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt {
  align-self: end !important;
  margin-bottom: 10px !important;
  line-height: 1.35 !important;
}
#draw .draw-shell:not(.guidance-ready) .reveal-message {
  align-self: start !important;
  margin-top: 0 !important;
}
#draw .draw-shell:not(.guidance-ready) .reveal-message button {
  margin-inline: auto !important;
}

/* CIRCLE: one calm narrative card with stacked content beside the portrait. */
#explore.circle-v1 {
  padding-bottom: 140px !important;
}
#explore.circle-v1 .circle-story-v2 {
  display: block !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
}
#explore.circle-v1 .circle-story-card-v2 {
  display: grid !important;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  overflow: hidden !important;
  padding: 0 !important;
}
#explore.circle-v1 .circle-story-card-v2 > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 610px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
}
#explore.circle-v1 .circle-story-copy-v2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: clamp(24px, 3vw, 40px) !important;
  align-content: center !important;
}
#explore.circle-v1 .circle-story-copy-v2 section {
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(111, 58, 108, .14);
}
#explore.circle-v1 .circle-story-copy-v2 section:nth-child(odd) {
  border-right: 1px solid rgba(111, 58, 108, .14);
}
#explore.circle-v1 .circle-story-copy-v2 section:nth-last-child(-n+2) {
  border-bottom: 0;
}
#explore.circle-v1 .circle-story-copy-v2 h2 {
  margin: 0 0 8px !important;
  font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
}
#explore.circle-v1 .circle-story-copy-v2 p {
  margin: 0 0 10px !important;
  line-height: 1.48 !important;
}
#explore.circle-v1 .circle-story-copy-v2 p:last-child {
  margin-bottom: 0 !important;
}
#explore.circle-v1 .continue-journey-v2 .link-row-v6 {
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
}

@media (max-width: 820px) {
  #home.home-v7 { padding-bottom: 125px !important; }
  #home .home-product-hero { margin-bottom: 112px !important; }

  #draw .draw-shell:not(.guidance-ready) .card-stage {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-prompt,
  #draw .draw-shell:not(.guidance-ready) .reveal-message {
    width: auto !important;
    max-width: 320px !important;
    margin-inline: auto !important;
  }

  #explore.circle-v1 .circle-story-card-v2 {
    grid-template-columns: 1fr !important;
    width: min(650px, 100%) !important;
    margin: 0 auto !important;
  }
  #explore.circle-v1 .circle-story-card-v2 > img {
    height: auto !important;
    min-height: 0 !important;
    max-height: 430px !important;
    aspect-ratio: 4 / 3 !important;
  }
  #explore.circle-v1 .circle-story-copy-v2 {
    grid-template-columns: 1fr !important;
    padding: 18px 20px 24px !important;
  }
  #explore.circle-v1 .circle-story-copy-v2 section,
  #explore.circle-v1 .circle-story-copy-v2 section:nth-child(odd),
  #explore.circle-v1 .circle-story-copy-v2 section:nth-last-child(-n+2) {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(111, 58, 108, .14) !important;
    padding: 18px 4px !important;
  }
  #explore.circle-v1 .circle-story-copy-v2 section:last-child {
    border-bottom: 0 !important;
  }
}

@media (max-width: 520px) {
  #home .home-product-hero { margin-bottom: 104px !important; }
  #draw .draw-shell:not(.guidance-ready) .card-frame {
    width: min(278px, 74vw, calc((100vh - 292px) * .70)) !important;
  }
  #draw .draw-shell:not(.guidance-ready) .card-prompt {
    font-size: .94rem !important;
    margin-bottom: 6px !important;
  }
  #explore.circle-v1 .circle-story-card-v2 > img {
    max-height: 340px !important;
    aspect-ratio: 1 / 1 !important;
  }
  #explore.circle-v1 .continue-journey-v2 .link-row-v6 {
    flex-direction: column !important;
  }
  #explore.circle-v1 .continue-journey-v2 .link-row-v6 a {
    width: 100% !important;
    text-align: center !important;
  }
}

/* =========================================================
   V1.0 CONTENT + LAYOUT LOCK — July 22 final requested edits
   ========================================================= */

/* HOME */
#home.home-v7 {
  padding-bottom: 138px !important;
}
#home .home-brand-intro {
  max-width: 1120px !important;
  padding: 12px 18px 10px !important;
  margin: 0 auto !important;
}
#home .home-brand-intro .brand-mark-v7 {
  font-size: clamp(2.65rem, 6.3vw, 5.7rem) !important;
  line-height: .98 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--cf-purple) !important;
}
#home .home-brand-intro h1 {
  margin: 8px 0 2px !important;
  font-size: clamp(1.35rem, 2.5vw, 2rem) !important;
  font-weight: 600 !important;
}
#home .home-brand-intro .home-lead-v7 {
  margin: 0 !important;
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
}
#home .home-product-hero {
  width: min(1220px, calc(100% - 30px)) !important;
  grid-template-columns: 1.18fr .82fr !important;
  margin: 12px auto 28px !important;
}
#home .home-product-hero img {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
}
#home .home-product-hero .deck-copy-v7 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(34px, 5vw, 72px) !important;
}
#home .home-product-eyebrow { margin-bottom: 12px !important; }
#home .home-product-hero h2 {
  font-size: clamp(2.2rem, 4.5vw, 4.25rem) !important;
  line-height: 1.02 !important;
  margin: 0 0 26px !important;
}
#home .home-product-hero p {
  font-size: clamp(1rem, 1.65vw, 1.3rem) !important;
  line-height: 1.45 !important;
  max-width: 520px;
}
#home .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
#home .home-compass-callout {
  width: min(1080px, calc(100% - 34px));
  margin: 0 auto 24px;
  padding: clamp(24px, 3.5vw, 42px);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 34px;
  align-items: center;
  border-radius: 28px;
  background: rgba(255,248,234,.88);
  border: 1px solid rgba(217,168,51,.28);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  color: #211335;
}
#home .home-compass-callout img {
  width: min(180px, 100%);
  margin: auto;
}
#home .home-compass-callout h2 {
  color: var(--cf-purple);
  font-size: clamp(1.7rem, 3.25vw, 3rem);
  line-height: 1.05;
  margin: 4px 0 14px;
  white-space: nowrap;
}
#home .home-compass-callout p { margin: 0 0 18px; }
#home .home-theme-bar {
  width: min(1080px, calc(100% - 34px)) !important;
  margin: 0 auto !important;
  padding: 18px 24px !important;
}
#home .home-theme-bar .quote-text-v7 {
  font-size: clamp(1.25rem, 2.7vw, 2rem) !important;
}

/* COMPASS: watercolor art runs cleanly to every edge. */
#compass .compass-direction-tiles .dir-tile-v7 {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: 0 16px 38px rgba(56,25,76,.16) !important;
}
#compass .compass-direction-tiles .dir-tile-v7::before {
  inset: 0 !important;
  opacity: 1 !important;
  background-size: cover !important;
}

/* EXPLORE / CIRCLE */
#explore.circle-v1 { padding-bottom: 145px !important; }
#explore .circle-layout-final {
  width: min(1220px, calc(100% - 28px));
  margin: 0 auto;
  display: grid;
  gap: 22px;
}
#explore .circle-intro-final,
#explore .circle-weekly-final,
#explore .circle-closing-final {
  border-radius: 28px;
  background: rgba(255,248,234,.89);
  border: 1px solid rgba(217,168,51,.27);
  box-shadow: 0 18px 40px rgba(0,0,0,.13);
  color: #211335;
}
#explore .circle-intro-final {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  overflow: hidden;
}
#explore .circle-photo-wrap {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#explore .circle-photo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
}
#explore .circle-intro-copy {
  padding: clamp(24px, 3.5vw, 46px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-content: center;
}
#explore .circle-intro-copy section {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(111,58,108,.14);
}
#explore .circle-intro-copy section:nth-child(odd) { border-right: 1px solid rgba(111,58,108,.14); }
#explore .circle-intro-copy section:nth-last-child(-n+2) { border-bottom: 0; }
#explore .circle-intro-copy h2,
#explore .circle-weekly-final h2,
#explore .circle-closing-final h2 {
  color: var(--cf-purple);
  margin: 0 0 10px;
}
#explore .circle-intro-copy h2 { font-size: clamp(1.55rem, 2.2vw, 2.15rem); }
#explore .circle-intro-copy p { line-height: 1.5; margin: 0 0 10px; }
#explore .circle-cta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
  grid-column: 1 / -1;
}
#explore .circle-cta-row a,
#explore .circle-join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  color: #fff8ea;
  background: linear-gradient(135deg,#6d2b82,#93306c);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 9px 20px rgba(77,24,92,.18);
}
#explore .circle-weekly-final {
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.05fr 1.2fr auto;
  gap: 30px;
  align-items: center;
}
#explore .circle-weekly-final h2 { font-size: clamp(1.65rem, 2.7vw, 2.55rem); line-height: 1.08; }
#explore .circle-weekly-final ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
#explore .circle-weekly-final li { position: relative; padding-left: 24px; line-height: 1.4; }
#explore .circle-weekly-final li::before { content: "✦"; position: absolute; left: 0; color: #b47a18; }
#explore .circle-join-button { white-space: nowrap; padding-inline: 22px; }
#explore .circle-closing-final {
  padding: clamp(34px, 5vw, 62px);
  text-align: center;
}
#explore .circle-closing-final h2 {
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  line-height: 1.04;
  white-space: nowrap;
}
#explore .circle-closing-final p { max-width: 900px; margin: 18px auto 0; line-height: 1.55; }
#explore .circle-closing-final .closing-gold { color: #a36b0b; font-size: clamp(1.2rem, 2vw, 1.65rem); font-style: italic; }

@media (max-width: 980px) {
  #home .home-product-hero { grid-template-columns: 1fr !important; width: min(700px, calc(100% - 28px)) !important; }
  #home .home-product-hero img { min-height: 0 !important; height: auto !important; object-fit: contain !important; }
  #home .home-compass-callout h2 { white-space: normal; }
  #explore .circle-intro-final { grid-template-columns: 1fr; }
  #explore .circle-photo-wrap img { max-height: 560px; width: auto; max-width: 100%; }
  #explore .circle-weekly-final { grid-template-columns: 1fr 1fr; }
  #explore .circle-join-button { grid-column: 1 / -1; justify-self: center; }
  #explore .circle-closing-final h2 { white-space: normal; }
}

@media (max-width: 720px) {
  #home.home-v7 { padding-bottom: 112px !important; }
  #home .home-brand-intro .brand-mark-v7 { font-size: clamp(2.25rem, 12vw, 3.7rem) !important; }
  #home .home-product-hero .deck-copy-v7 { padding: 26px 22px 30px !important; }
  #home .home-product-hero h2 { font-size: clamp(2rem, 10vw, 3rem) !important; }
  #home .home-hero-actions { flex-direction: column; }
  #home .home-hero-actions button { width: 100%; }
  #home .home-compass-callout { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  #home .home-compass-callout img { width: 130px; }
  #home .home-compass-callout h2 { font-size: clamp(1.55rem, 7.6vw, 2.2rem); }
  #explore .circle-intro-copy { grid-template-columns: 1fr; padding: 20px; }
  #explore .circle-intro-copy section,
  #explore .circle-intro-copy section:nth-child(odd),
  #explore .circle-intro-copy section:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid rgba(111,58,108,.14);
    padding: 18px 4px;
  }
  #explore .circle-intro-copy section:last-child { border-bottom: 0; }
  #explore .circle-cta-row { grid-template-columns: 1fr; }
  #explore .circle-weekly-final { grid-template-columns: 1fr; gap: 20px; }
  #explore .circle-join-button { grid-column: auto; width: 100%; }
}

@media (max-width: 480px) {
  #home .home-brand-intro { padding-inline: 8px !important; }
  #home .home-brand-intro h1 { font-size: 1.25rem !important; }
  #home .home-brand-intro .home-lead-v7 { font-size: .96rem !important; }
  #home .home-product-hero,
  #home .home-compass-callout,
  #home .home-theme-bar,
  #explore .circle-layout-final { width: calc(100% - 18px) !important; }
  #explore .circle-photo-wrap { padding: 14px; }
  #explore .circle-photo-wrap img { max-height: none; width: 100%; }
}

/* =========================================================
   V1.0 FINAL TYPOGRAPHY + ABOVE-THE-FOLD POLISH — July 22
   ========================================================= */

/* HOME: compact the brand introduction and hero so the full product image
   and primary action remain visible within a typical desktop viewport. */
#home .home-brand-intro {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  text-align: center !important;
}
#home .home-brand-intro .brand-mark-v7 {
  font-size: clamp(2.35rem, 5.2vw, 4.75rem) !important;
  line-height: .98 !important;
}
#home .home-brand-intro h1 {
  margin: 6px 0 2px !important;
  font-size: clamp(1.25rem, 2.25vw, 1.85rem) !important;
}
#home .home-brand-intro .home-lead-v7 {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#home .home-product-hero {
  width: min(1180px, calc(100% - 30px)) !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  margin-top: 8px !important;
  margin-bottom: 22px !important;
  min-height: 0 !important;
}
#home .home-product-hero img {
  width: 100% !important;
  height: clamp(360px, 48vh, 455px) !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(250, 238, 229, .55) !important;
}
#home .home-product-hero .deck-copy-v7 {
  padding: clamp(28px, 4vw, 54px) !important;
}
#home .home-product-hero h2 {
  max-width: 520px !important;
  font-size: clamp(2.15rem, 3.55vw, 3.45rem) !important;
  line-height: 1.03 !important;
  margin-bottom: 20px !important;
}
#home .home-product-hero p {
  margin-bottom: 12px !important;
}

/* Darker bronze eyebrow labels for stronger contrast. */
#home .home-compass-callout .eyebrow,
#explore .circle-weekly-final .eyebrow {
  color: #9a6814 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* EXPLORE: soften the weekly headline so it supports rather than dominates. */
#explore .circle-weekly-final h2 {
  font-size: clamp(1.45rem, 2.2vw, 2.05rem) !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  max-width: 430px !important;
}

@media (max-width: 980px) {
  #home .home-product-hero {
    grid-template-columns: 1fr !important;
  }
  #home .home-product-hero img {
    height: auto !important;
    max-height: none !important;
  }
  #home .home-product-hero h2 {
    max-width: 620px !important;
  }
}

@media (max-width: 720px) {
  #home .home-brand-intro .brand-mark-v7 {
    font-size: clamp(2.15rem, 11vw, 3.35rem) !important;
  }
  #home .home-product-hero h2 {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    line-height: 1.04 !important;
  }
  #explore .circle-weekly-final h2 {
    max-width: none !important;
    font-size: clamp(1.4rem, 7vw, 1.9rem) !important;
  }
}

/* =========================================================
   V1.0 FINAL EDGE + ALIGNMENT FIXES — July 22
   ========================================================= */

/* HOME: align the hero with the Compass callout and keep one warm
   parchment surface behind both the contained photograph and copy. */
#home .home-product-hero {
  width: min(1080px, calc(100% - 34px)) !important;
  background: rgba(255,248,234,.88) !important;
}
#home .home-product-hero img {
  background: rgba(255,248,234,.88) !important;
}
#home .home-product-hero .deck-copy-v7 {
  background: transparent !important;
}
#home .home-product-eyebrow {
  color: #9a6814 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* COMPASS: apply each watercolor directly to the rounded tile so no
   pale/white seam can show around an inset pseudo-element. */
#compass .compass-direction-tiles .dir-tile-v7 {
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image: var(--art) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-clip: padding-box !important;
}
#compass .compass-direction-tiles .dir-tile-v7::before {
  display: none !important;
  content: none !important;
}
#compass .compass-direction-tiles .dir-tile-v7::after {
  inset: 0 !important;
  border-radius: inherit !important;
}

@media (max-width: 980px) {
  #home .home-product-hero {
    width: min(700px, calc(100% - 28px)) !important;
  }
}

@media (max-width: 480px) {
  #home .home-product-hero {
    width: calc(100% - 18px) !important;
  }
}


/* Final polish overrides */
.compass-teaser h2,.compass-preview h2{
  font-size:clamp(2rem,2.8vw,2.5rem)!important;
}
.hero-eyebrow,.compass-eyebrow,.section-eyebrow{
  color:#A6782D!important;
}
.explore-grid h3{
  white-space:nowrap;
  font-size:clamp(2rem,2.2vw,2.3rem)!important;
}
.explore-grid{
  grid-template-columns:1fr .92fr!important;
}
.scroll-arrow{
 display:flex;justify-content:center;align-items:center;
 color:#A6782D;font-size:2rem;margin:18px auto 26px;
 animation:floatArrow 3s ease-in-out infinite;
}
@keyframes floatArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.direction-card,.compass-direction-card{
 padding:0!important;
 overflow:hidden!important;
 background-clip:border-box!important;
}
.direction-card>*:first-child,.compass-direction-card>*:first-child{
 margin:0!important;
 border:none!important;
 box-shadow:none!important;
 background:transparent!important;
}


/* FINAL POLISH V1.0 */
.compass-teaser h2{font-size:clamp(2rem,2.6vw,2.5rem)!important;}
.hero-eyebrow,.compass-eyebrow,.section-eyebrow{color:#A6782D!important;}
.direction-card,.direction-panel,.compass-direction-card{
 padding:0!important;
 background:none!important;
 overflow:hidden!important;
}
.direction-card>* ,.direction-panel>* ,.compass-direction-card>*{
 margin:0!important;
 border:none!important;
 border-radius:inherit!important;
}
.direction-card .card-bg,.direction-panel .card-bg,.compass-direction-card .card-bg{
 inset:0!important;width:100%!important;height:100%!important;
}
.scroll-arrow{display:flex;justify-content:center;align-items:center;font-size:2rem;color:#A6782D;animation:floatArrow 3s ease-in-out infinite;margin:12px 0 20px;}
@keyframes floatArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}


/* FINAL POSITIONING CORRECTIONS — 2026-07-22 */
#home .home-compass-callout > div {
  min-width: 0;
}
#home .home-compass-callout h2 {
  font-size: clamp(1.65rem, 2.65vw, 2.42rem) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: normal;
  text-wrap: balance;
}
#explore .circle-intro-copy section:last-child .scroll-arrow {
  display: flex !important;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 !important;
  font-size: 1.9rem !important;
  line-height: 1;
  color: #A6782D !important;
  animation: floatArrow 3s ease-in-out infinite;
}
#explore .circle-closing-final .scroll-arrow {
  display: none !important;
}
@media (max-width: 980px) {
  #home .home-compass-callout h2 {
    font-size: clamp(1.55rem, 4.7vw, 2.25rem) !important;
  }
}
@media (max-width: 600px) {
  #home .home-compass-callout h2 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }
}

/* =========================================================
   V1.0 GOLD FINAL — full-bleed Compass art + stardust reveal
   ========================================================= */
#compass .compass-direction-tiles .dir-tile-v7 {
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--art) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  isolation: isolate;
}
#compass .compass-direction-tiles .dir-tile-v7::before {
  content: none !important;
  display: none !important;
}
#compass .compass-direction-tiles .dir-content-v7 {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}


/* =========================================================
   V1.0 GOLD LOCK — centered receive/flip, guided slide, hero balance
   ========================================================= */

/* HOME: let the product photograph float comfortably in the parchment panel. */
#home .home-product-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr) !important;
  align-items: stretch !important;
}
#home .home-product-hero img {
  align-self: center !important;
  height: auto !important;
  max-height: 430px !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 18px 8px 18px 18px !important;
  box-sizing: border-box !important;
}
#home .home-product-hero .deck-copy-v7 {
  padding: clamp(28px, 3.5vw, 48px) clamp(28px, 3.8vw, 50px) clamp(28px, 3.5vw, 48px) clamp(20px, 2.4vw, 32px) !important;
}

/* DRAW — receiving and first reveal remain centered and undistracted. */
#draw .draw-shell:not(.guidance-ready) {
  display: block !important;
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
}
#draw .draw-shell:not(.guidance-ready) .card-stage {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  position: relative !important;
}
#draw .draw-shell:not(.guidance-ready) .card-frame {
  margin: 0 auto !important;
}
#draw .draw-shell:not(.guidance-ready) .card-prompt {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
  align-self: center !important;
}
#draw .draw-shell:not(.guidance-ready) .reveal-message,
#draw .draw-shell:not(.guidance-ready) .reveal-message.show {
  width: 100% !important;
  margin: 2px auto 0 !important;
  justify-content: center !important;
  align-self: center !important;
  text-align: center !important;
}

/* Guidance uses the final two-column layout immediately.
   No extra rightward jump before the card settles into place. */
@media (min-width: 821px) {
  #draw .draw-shell.guidance-ready .card-stage {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 980px) {
  #home .home-product-hero {
    grid-template-columns: 1fr !important;
  }
  #home .home-product-hero img {
    width: 100% !important;
    max-height: none !important;
    padding: 14px !important;
  }
  #home .home-product-hero .deck-copy-v7 {
    padding: 24px 22px 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #draw .draw-shell.guidance-ready .card-stage { animation: none !important; }
}


/* ===== V1.0 GOLD LOCK — POST-FLIP PROMPT GROUP + BOLDER STARDUST ===== */
#draw .draw-shell:not(.guidance-ready).card-revealed {
  width:min(100%, 1040px) !important;
}
#draw .draw-shell:not(.guidance-ready).card-revealed .card-stage {
  display:grid !important;
  grid-template-columns:minmax(280px, 430px) minmax(280px, 380px) !important;
  grid-template-rows:auto auto !important;
  column-gap:clamp(28px, 4vw, 58px) !important;
  row-gap:14px !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:1040px !important;
}
#draw .draw-shell:not(.guidance-ready).card-revealed .card-frame {
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  justify-self:end !important;
}
#draw .draw-shell:not(.guidance-ready).card-revealed .card-prompt {
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:360px !important;
  margin:0 !important;
  align-self:end !important;
  justify-self:start !important;
  text-align:center !important;
  position:static !important;
}
#draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message,
#draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message.show {
  grid-column:2 !important;
  grid-row:2 !important;
  width:auto !important;
  margin:0 !important;
  align-self:start !important;
  justify-self:center !important;
  display:flex !important;
  position:static !important;
}
#draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message:not(.show) {
  visibility:hidden !important;
  opacity:0 !important;
}
#draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message.show {
  visibility:visible !important;
  opacity:1 !important;
}
#creativeFlowRitual { z-index:10000 !important; }
@media (max-width:820px) {
  #draw .draw-shell:not(.guidance-ready).card-revealed .card-stage {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }
  #draw .draw-shell:not(.guidance-ready).card-revealed .card-frame,
  #draw .draw-shell:not(.guidance-ready).card-revealed .card-prompt,
  #draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message {
    grid-column:auto !important; grid-row:auto !important; justify-self:center !important;
  }
  #draw .draw-shell:not(.guidance-ready).card-revealed .card-prompt {
    max-width:320px !important;
  }
}

/* ===== V1.0 GOLD FINAL — POST-FLIP PROMPT/CTA RESTORE =====
   Keep the revealed card on the left and the prompt + glowing CTA as one
   vertically centered group on the right. No other draw states are changed. */
@media (min-width: 821px) {
  #draw .draw-shell:not(.guidance-ready).card-revealed {
    width: min(100%, 1040px) !important;
    margin-inline: auto !important;
  }

  #draw .draw-shell:not(.guidance-ready).card-revealed .card-stage {
    display: grid !important;
    grid-template-columns: minmax(280px, 430px) minmax(300px, 390px) !important;
    grid-template-rows: 1fr auto auto 1fr !important;
    column-gap: clamp(34px, 5vw, 72px) !important;
    row-gap: 18px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin-inline: auto !important;
  }

  #draw .draw-shell:not(.guidance-ready).card-revealed .card-frame {
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  #draw .draw-shell:not(.guidance-ready).card-revealed .card-prompt {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: center !important;
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  #draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message,
  #draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message.show {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
    justify-self: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    text-align: center !important;
  }
}

/* Restore the clearly visible, softly pulsing Reveal Guidance CTA. */
#draw #revealWrap.show button {
  position: relative !important;
  isolation: isolate;
  border: 1px solid rgba(255, 216, 112, .88) !important;
  box-shadow:
    0 10px 24px rgba(94, 26, 104, .24),
    0 0 0 0 rgba(255, 211, 82, .55),
    0 0 24px rgba(255, 201, 58, .42) !important;
  animation: cfoRevealPulse 2.15s ease-in-out infinite !important;
}

#draw #revealWrap.show button::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 218, 116, .38);
  opacity: .72;
  animation: cfoRevealHalo 2.15s ease-out infinite;
  pointer-events: none;
}

@keyframes cfoRevealPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 10px 24px rgba(94, 26, 104, .24),
      0 0 0 0 rgba(255, 211, 82, .48),
      0 0 20px rgba(255, 201, 58, .34);
  }
  50% {
    transform: translateY(-1px) scale(1.025);
    box-shadow:
      0 14px 30px rgba(94, 26, 104, .30),
      0 0 0 9px rgba(255, 211, 82, 0),
      0 0 34px rgba(255, 201, 58, .72);
  }
}

@keyframes cfoRevealHalo {
  0% { transform: scale(.96); opacity: .62; }
  70%, 100% { transform: scale(1.13); opacity: 0; }
}

@media (max-width: 820px) {
  #draw .draw-shell:not(.guidance-ready).card-revealed .card-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  #draw .draw-shell:not(.guidance-ready).card-revealed .card-prompt {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin: 4px auto 0 !important;
    text-align: center !important;
  }
  #draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message,
  #draw .draw-shell:not(.guidance-ready).card-revealed .reveal-message.show {
    margin: 0 auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #draw #revealWrap.show button,
  #draw #revealWrap.show button::after {
    animation: none !important;
  }
}


/* =========================================================
   CREATIVE FLOW COMPASS — V1.1 DRAW RITUAL + INTEREST LIST
   Production polish: single-focus draw, larger card, magical CTA
   ========================================================= */

/* The two top draw controls were removed from the HTML. Keep any legacy
   injected controls hidden so the ritual remains visually uninterrupted. */
#draw > .controls,
#draw .controls {
  display: none !important;
}

/* Restore intentional breathing room now that the control row is gone. */
#draw .topbar {
  margin-bottom: 26px !important;
}
#draw .draw-shell {
  margin-top: 0 !important;
}

/* Initial card-back state: centered, calm, and slightly larger. */
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) {
  display: block !important;
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  gap: 16px !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-frame {
  width: min(445px, calc((100vh - 235px) * .70)) !important;
  max-width: 445px !important;
  margin: 0 auto !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-prompt {
  width: 100% !important;
  max-width: 310px !important;
  margin: 2px auto 0 !important;
  text-align: center !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .reveal-message {
  display: none !important;
}

/* Flipped-card state: enlarge the artwork and pull the prompt/button closer
   so all three pieces read as one centered composition. */
#draw .draw-shell.card-revealed:not(.guidance-ready) {
  display: block !important;
  width: min(100%, 980px) !important;
  margin-inline: auto !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .card-stage {
  display: grid !important;
  grid-template-columns: minmax(420px, 485px) minmax(220px, 255px) !important;
  grid-template-areas:
    "card prompt"
    "card reveal" !important;
  column-gap: 22px !important;
  row-gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .card-frame {
  grid-area: card !important;
  width: min(100%, 475px) !important;
  max-width: 475px !important;
  margin: 0 !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .card-prompt {
  grid-area: prompt !important;
  align-self: end !important;
  width: 235px !important;
  max-width: 235px !important;
  margin: 0 auto 2px !important;
  text-align: center !important;
  line-height: 1.35 !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .reveal-message {
  grid-area: reveal !important;
  align-self: start !important;
  width: 235px !important;
  margin: 2px auto 0 !important;
  justify-content: center !important;
}

/* Magical reveal button: layered gold halo, subtle crystal shimmer and pulse. */
#draw #revealWrap button {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 222, 116, .92) !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.22), transparent 27%),
    linear-gradient(115deg, #5c237d 0%, #8e2f78 48%, #63247d 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 213, 92, .20),
    0 0 18px rgba(255, 203, 74, .62),
    0 0 38px rgba(150, 57, 151, .38),
    0 14px 28px rgba(75, 29, 85, .26) !important;
  text-shadow: 0 1px 1px rgba(44, 12, 50, .5), 0 0 8px rgba(255,232,168,.35);
  animation: cfoRevealMagicPulse 2.8s ease-in-out infinite !important;
}
#draw #revealWrap button::before {
  content: "";
  position: absolute;
  inset: -45% -30%;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 34%,
    rgba(255,255,255,.08) 43%,
    rgba(255,235,154,.52) 50%,
    rgba(255,255,255,.10) 57%,
    transparent 66%);
  transform: translateX(-75%) rotate(4deg);
  animation: cfoRevealCrystalSweep 3.6s ease-in-out infinite;
}
#draw #revealWrap button::after {
  content: "✦";
  position: absolute;
  right: 14px;
  top: 7px;
  color: rgba(255,231,145,.9);
  font-size: .72rem;
  filter: drop-shadow(0 0 5px rgba(255,220,111,.95));
  animation: cfoRevealTwinkle 1.9s ease-in-out infinite;
}
#draw #revealWrap button:hover,
#draw #revealWrap button:focus-visible {
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow:
    0 0 0 1px rgba(255, 226, 130, .42),
    0 0 24px rgba(255, 207, 80, .88),
    0 0 50px rgba(151, 60, 157, .52),
    0 16px 32px rgba(75, 29, 85, .30) !important;
}
@keyframes cfoRevealMagicPulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.10); }
}
@keyframes cfoRevealCrystalSweep {
  0%,18% { transform: translateX(-85%) rotate(4deg); opacity: 0; }
  34% { opacity: 1; }
  58%,100% { transform: translateX(85%) rotate(4deg); opacity: 0; }
}
@keyframes cfoRevealTwinkle {
  0%,100% { opacity: .35; transform: scale(.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(35deg); }
}

/* Once the guidance panel opens, retain a generously sized card. */
#draw .draw-shell.guidance-ready {
  grid-template-columns: minmax(420px, 490px) minmax(0, 1fr) !important;
  gap: 34px !important;
}
#draw .draw-shell.guidance-ready .card-stage {
  max-width: 490px !important;
}
#draw .draw-shell.guidance-ready .card-frame {
  width: min(100%, 460px) !important;
  max-width: 460px !important;
}

@media (max-width: 900px) {
  #draw .topbar { margin-bottom: 20px !important; }
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-stage {
    grid-template-columns: 1fr !important;
    grid-template-areas: "card" "prompt" "reveal" !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    row-gap: 14px !important;
  }
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-frame {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
  }
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-prompt,
  #draw .draw-shell.card-revealed:not(.guidance-ready) .reveal-message {
    width: min(100%, 290px) !important;
    max-width: 290px !important;
    margin-inline: auto !important;
  }
  #draw .draw-shell.guidance-ready {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #draw .topbar { margin-bottom: 16px !important; }
  #draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-frame,
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-frame,
  #draw .draw-shell.guidance-ready .card-frame {
    width: min(100%, 365px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #draw #revealWrap button,
  #draw #revealWrap button::before,
  #draw #revealWrap button::after {
    animation: none !important;
  }
}

/* =========================================================
   CREATIVE FLOW COMPASS — V1.1.3 FINAL DRAW VIEWPORT FIX
   Definitive last-in-file rules for laptop/desktop draw states.
   ========================================================= */

/* Card-back state: preserve the larger card while bringing the invitation
   immediately beside it as one centered composition. */
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) {
  display: block !important;
  width: min(100%, 790px) !important;
  margin: 0 auto !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 430px) minmax(180px, 220px) !important;
  grid-template-areas: "card prompt" !important;
  column-gap: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 692px !important;
  margin: 0 auto !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-frame {
  grid-area: card !important;
  width: min(430px, calc((100vh - 230px) * .70)) !important;
  max-width: 430px !important;
  margin: 0 !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-prompt {
  grid-area: prompt !important;
  width: 220px !important;
  max-width: 220px !important;
  margin: 0 !important;
  text-align: center !important;
  align-self: center !important;
  transform: translateX(-8px) !important;
}
#draw .draw-shell:not(.card-revealed):not(.guidance-ready) .reveal-message {
  display: none !important;
}

/* Flipped-but-not-guidance state: keep the card fully inside a laptop
   viewport and keep prompt + glowing CTA visible beside it. */
#draw .draw-shell.card-revealed:not(.guidance-ready) {
  display: block !important;
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .card-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 370px) minmax(220px, 245px) !important;
  grid-template-areas:
    "card prompt"
    "card reveal" !important;
  column-gap: 34px !important;
  row-gap: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 auto !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .card-frame {
  grid-area: card !important;
  width: min(370px, calc((100vh - 235px) * .68)) !important;
  max-width: 370px !important;
  margin: 0 !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .card-prompt {
  grid-area: prompt !important;
  align-self: end !important;
  width: 235px !important;
  max-width: 235px !important;
  margin: 0 auto 2px !important;
  text-align: center !important;
  line-height: 1.34 !important;
  transform: none !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) .reveal-message,
#draw .draw-shell.card-revealed:not(.guidance-ready) .reveal-message.show {
  grid-area: reveal !important;
  display: flex !important;
  align-self: start !important;
  justify-content: center !important;
  width: 235px !important;
  max-width: 235px !important;
  margin: 2px auto 0 !important;
  transform: none !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) #revealWrap.show button {
  transform: none !important;
}
#draw .draw-shell.card-revealed:not(.guidance-ready) #revealWrap.show button:hover,
#draw .draw-shell.card-revealed:not(.guidance-ready) #revealWrap.show button:focus-visible {
  transform: translateY(-2px) scale(1.025) !important;
}

/* Short laptop displays receive an extra height safeguard. */
@media (min-width: 901px) and (max-height: 820px) {
  #draw .topbar { margin-bottom: 12px !important; }
  #draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-frame {
    width: min(390px, calc((100vh - 205px) * .70)) !important;
  }
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-frame {
    width: min(335px, calc((100vh - 210px) * .68)) !important;
  }
}

/* Tablet/mobile: stack naturally and keep controls above the floating nav. */
@media (max-width: 900px) {
  #draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-stage,
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-stage {
    grid-template-columns: 1fr !important;
    grid-template-areas: "card" "prompt" "reveal" !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    row-gap: 14px !important;
  }
  #draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-frame {
    width: min(100%, 410px, calc((100vh - 245px) * .70)) !important;
    margin: 0 auto !important;
  }
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-frame {
    width: min(100%, 355px, calc((100vh - 285px) * .68)) !important;
    margin: 0 auto !important;
  }
  #draw .draw-shell:not(.card-revealed):not(.guidance-ready) .card-prompt,
  #draw .draw-shell.card-revealed:not(.guidance-ready) .card-prompt,
  #draw .draw-shell.card-revealed:not(.guidance-ready) .reveal-message,
  #draw .draw-shell.card-revealed:not(.guidance-ready) .reveal-message.show {
    width: min(100%, 290px) !important;
    max-width: 290px !important;
    margin-inline: auto !important;
    transform: none !important;
  }
}



/* V1.1.4 final polish */
#draw .draw-shell.card-revealed.guidance-ready .card-frame{
  width:min(370px,calc((100vh - 235px)*.68)) !important;
  max-width:370px !important;
}
#draw .draw-shell.card-revealed.guidance-ready .card-stage{
  grid-template-columns:minmax(0,370px) 1fr !important;
}
#draw .draw-shell:not(.card-revealed) .card-stage{
  grid-template-columns:minmax(420px,520px) 260px !important;
}
#draw .draw-shell:not(.card-revealed) .card-prompt{
  justify-self:start !important;
  margin-left:-32px !important;
  text-align:left !important;
}
.direction-tile-v6{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.direction-tile-v6 .direction-pill-v6,
.direction-tile-v6 h3,
.direction-tile-v6 p,
.direction-tile-v6 .btn{
  position:relative !important;
  top:18px !important;
}

/* Final compass polish */
.dir-tile-v7{align-items:center!important;}.dir-content-v7{display:flex;flex-direction:column;justify-content:center;height:100%;padding:32px 20px!important;}


/* Responsive background assets */
body{background-image:url('images/ui/bg-desktop.png') !important;background-size:cover;}
@media (max-width:1024px){
 body{background-image:url('images/ui/bg-tablet.png') !important;background-size:cover;}
}
@media (max-width:768px){
 body{background-image:url('images/ui/bg-mobile.png') !important;background-size:cover;}
}