/* ===== Direction C · "The Planning Desk" ===== */
body.doc.dir-a{background:#FBFAF4;}
.compare{position:fixed; right:16px; bottom:16px; z-index:120; display:flex; align-items:center; gap:0; background:#fff; border:var(--bd); border-radius:999px; box-shadow:var(--sh); overflow:hidden; font-family:var(--font-d); font-weight:600; font-size:13px;}
.compare span{padding:9px 12px; color:var(--ink-soft); background:#F1EFFA;}
.compare a{padding:9px 13px; border-left:2px solid var(--ink); transition:.14s; white-space:nowrap;}
.compare a.on{background:var(--ink); color:#fff;}
.compare a:not(.on):hover{background:var(--yellow);}

/* hero */
.scene-hero{position:relative; background:#5DB7E6; border-bottom:var(--bdw); overflow:hidden;}
.scene-intro{position:relative; z-index:5; max-width:1280px; margin:0 auto; padding:26px 28px 0; text-align:center; pointer-events:none;}
.scene-intro .eyebrow{display:inline-flex; align-items:center; gap:8px; background:#fff; border:var(--bd); border-radius:999px; padding:7px 16px; font-family:var(--font-d); font-weight:600; font-size:14px; box-shadow:var(--sh-sm); pointer-events:auto;}
.scene-intro h1{font-family:var(--font-d); font-weight:700; font-size:clamp(30px,4.4vw,52px); line-height:.98; letter-spacing:-.02em; color:#fff; margin:16px auto 0; max-width:20ch; text-shadow:3px 3px 0 rgba(23,48,73,.45);}
.scene-intro p{font-family:var(--font-b); font-weight:800; font-size:clamp(15px,1.6vw,18px); color:#fff; margin:12px auto 0; max-width:46ch; text-shadow:2px 2px 0 rgba(23,48,73,.35);}

.scene-stage{position:relative; max-width:1320px; margin:0 auto; padding:6px 0 0;}
.scene-stage svg{display:block; width:100%; height:auto;}

/* hotspot behaviour */
.scene-stage .spot{cursor:pointer;}
.scene-stage .lift{transition:transform .22s cubic-bezier(.34,1.4,.5,1); transform-box:fill-box; transform-origin:center bottom;}
.scene-stage .spot:hover .lift,
.scene-stage .spot:focus-visible .lift{transform:translateY(-12px) scale(1.025);}
.scene-stage .spot:focus{outline:none;}
.scene-stage .tag{opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; pointer-events:none;}
.scene-stage .spot:hover .tag,
.scene-stage .spot:focus-visible .tag{opacity:1; transform:translateY(0);}
.scene-stage .tag text{font-family:'Fredoka',sans-serif; font-weight:600; font-size:23px; fill:#173049;}
.scene-stage .ring{opacity:0; transition:opacity .18s;}
.scene-stage .spot:hover .ring,
.scene-stage .spot:focus-visible .ring{opacity:1;}
.spark{transform-box:fill-box; transform-origin:center; animation:spark 2.4s ease-in-out infinite;}
.spark2{animation-delay:.8s;}
@keyframes spark{0%,100%{opacity:.25; transform:scale(.6) rotate(0deg)}50%{opacity:1; transform:scale(1.1) rotate(45deg)}}
.cloud-drift{animation:drift 26s linear infinite;}
.cloud-drift2{animation:drift 34s linear infinite;}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(34px)}100%{transform:translateX(0)}}
.bob{transform-box:fill-box; transform-origin:center; animation:bob 4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-2deg)}}
@media (prefers-reduced-motion: reduce){ .spark,.cloud-drift,.cloud-drift2,.bob{animation:none;} }

/* helper hint */
.scene-hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:6; background:#fff; border:var(--bd); border-radius:999px; padding:8px 16px; font-family:var(--font-d); font-weight:600; font-size:13.5px; box-shadow:var(--sh-sm); display:flex; align-items:center; gap:8px;}
.scene-hint .pt{animation:tap 1.6s ease-in-out infinite;}
@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* crawlable category grid */
.cat-explore{max-width:1180px; margin:0 auto; padding:64px 28px 0;}
.cat-explore .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; border-bottom:var(--bd); padding-bottom:14px;}
.cat-explore .sec-head h2{font-size:32px; letter-spacing:-.01em;}
.cat-explore .sec-head p{font-family:var(--font-b); font-weight:700; font-size:14px; color:var(--ink-soft); margin-top:4px;}
.ce-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.ce-card{display:flex; flex-direction:column; gap:8px; border:var(--bd); border-top:4px solid var(--card-accent,var(--accent)); border-radius:18px; box-shadow:var(--sh-sm); padding:18px 16px; background:#fff; transition:transform .14s, box-shadow .14s;}
.ce-card:hover{transform:translate(-3px,-3px); box-shadow:var(--sh);}
.ce-card .ic{width:54px; height:54px; border-radius:14px; border:var(--bd2); overflow:hidden; flex-shrink:0;}
.ce-card h3{font-family:var(--font-d); font-weight:600; font-size:17px; line-height:1.05;}
.ce-card p{font-family:var(--font-s); font-weight:500; font-size:13.5px; color:var(--ink-soft); line-height:1.4;}
.ce-card .ct{margin-top:auto; font-family:var(--font-b); font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}

/* ===== "Where to next" band (feed + trending + matchup) ===== */
.wn{background:#F1EFFA; border-top:var(--bdw); border-bottom:var(--bdw); margin-top:66px; padding:54px 0 64px; position:relative; overflow:hidden;}
.wn::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(99,102,241,.12) 2px,transparent 2px); background-size:26px 26px; opacity:.5;}
.wn-head{position:relative; text-align:center; max-width:780px; margin:0 auto; padding:0 28px;}
.wn-head .eyebrow{display:inline-flex; align-items:center; gap:9px; background:var(--indigo); border:var(--bd); color:#fff; border-radius:999px; padding:8px 18px; font-family:var(--font-d); font-weight:600; font-size:14px; box-shadow:var(--sh-sm);}
.wn-head .eyebrow .dot{width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block;}
.wn-head h2{font-family:var(--font-d); font-weight:700; font-size:clamp(30px,4.2vw,48px); line-height:.96; letter-spacing:-.02em; margin:16px auto 0;}
.wn-head h2 em{font-style:normal; color:var(--indigo-deep); position:relative; white-space:nowrap;}
.wn-head h2 em::after{content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.3em; background:var(--yellow); z-index:-1; border-radius:4px; transform:rotate(-1deg);}
.wn-head p{font-family:var(--font-b); font-weight:700; font-size:17px; color:var(--ink-soft); margin:12px auto 0; max-width:48ch;}

/* vibe selector */
.vibebar{position:relative; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px auto 0; max-width:820px; padding:0 28px;}
.vibe-chip{display:inline-flex; align-items:center; gap:8px; background:#fff; border:var(--bd); border-radius:999px; padding:10px 18px; font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; box-shadow:0 4px 0 var(--ink); transition:transform .1s, box-shadow .1s, background .15s;}
.vibe-chip:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--ink);}
.vibe-chip:active{transform:translateY(2px); box-shadow:0 2px 0 var(--ink);}
.vibe-chip.on{background:var(--yellow);}
.vibe-chip .em{font-size:18px;}

/* feed results */
.feedwrap{position:relative; max-width:1120px; margin:0 auto; padding:0 28px;}
.feed-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:30px 0 18px; flex-wrap:wrap;}
.feed-head h2{font-size:24px; display:flex; align-items:center; gap:10px;}
.feed-head .count{font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--ink-soft); background:#fff; border:2px solid var(--ink); border-radius:999px; padding:5px 13px;}
.feed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.fcard{position:relative; background:#fff; border:var(--bd); border-radius:20px; box-shadow:0 6px 0 var(--ink); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .12s, box-shadow .12s;}
.fcard:hover{transform:translateY(-3px); box-shadow:0 9px 0 var(--ink);}
.fcard .top{height:128px; display:grid; place-items:center; border-bottom:var(--bd); position:relative;}
.fcard .top img{width:84px; height:84px; object-fit:contain;}
.fcard .vibe-tag{position:absolute; top:10px; left:10px; font-family:var(--font-d); font-weight:600; font-size:11px; background:var(--ink); color:#fff; border-radius:999px; padding:3px 10px;}
.fcard .save{position:absolute; top:9px; right:9px; width:32px; height:32px; border-radius:50%; background:#fff; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); display:grid; place-items:center; cursor:pointer; font-size:14px; transition:.12s;}
.fcard .save:hover{background:var(--yellow);}
.fcard .save.on{background:var(--pink);}
.fcard .bd{padding:15px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.fcard .ct{font-family:var(--font-b); font-weight:800; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo-deep);}
.fcard h3{font-size:18px; line-height:1.08;}
.fcard .meta{margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:10px; font-family:var(--font-b); font-weight:800; font-size:11.5px; color:var(--ink-soft);}
.fcard .meta .fire{color:var(--orange);}
.fcard.hide{display:none;}

/* trending leaderboard */
.lead-sec{position:relative; max-width:1120px; margin:0 auto; padding:56px 28px 0;}
.panel{background:#fff; border:var(--bdw); border-radius:26px; box-shadow:var(--sh-lg); overflow:hidden;}
.panel-h{background:var(--ink); color:#fff; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.panel-h h2{color:#fff; font-size:24px; display:flex; align-items:center; gap:10px;}
.panel-h .live{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:600; font-size:12px; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.3); border-radius:999px; padding:5px 12px;}
.panel-h .live .dot{width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.board{padding:14px 18px 20px;}
.brow{display:flex; align-items:center; gap:14px; padding:13px 8px; border-bottom:2px solid rgba(23,32,54,.08);}
.brow:last-child{border-bottom:none;}
.medal{width:36px; height:36px; border-radius:50%; border:var(--bd); display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:16px; flex-shrink:0;}
.brow .flag{width:46px; height:46px; border-radius:12px; border:var(--bd2); display:grid; place-items:center; font-size:25px; flex-shrink:0; background:var(--mint-soft);}
.brow .info{flex:1; min-width:0;}
.brow .info b{font-family:var(--font-d); font-weight:600; font-size:17px; display:block;}
.brow .bar{height:11px; background:#E8E6F5; border:2px solid var(--ink); border-radius:999px; overflow:hidden; margin-top:6px;}
.brow .bar i{display:block; height:100%; border-right:2px solid var(--ink); border-radius:0 999px 999px 0; transition:width 1s cubic-bezier(.3,.7,.4,1);}
.brow .pct{font-family:var(--font-d); font-weight:700; font-size:16px; color:var(--green-deep); white-space:nowrap; flex-shrink:0;}

/* matchup */
.matchup{position:relative; max-width:1120px; margin:0 auto; padding:56px 28px 0;}
.vs-card{background:var(--yellow); border:var(--bdw); border-radius:26px; box-shadow:var(--sh-lg); padding:26px; position:relative; overflow:hidden;}
.vs-card::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(23,32,54,.08) 2px,transparent 2px); background-size:24px 24px;}
.vs-head{position:relative; text-align:center; margin-bottom:20px;}
.vs-head h2{font-size:28px;}
.vs-head p{font-family:var(--font-b); font-weight:700; font-size:14px; color:var(--ink); opacity:.7; margin-top:4px;}
.vs-grid{position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center;}
.vs-opt{background:#fff; border:var(--bd); border-radius:20px; box-shadow:var(--sh); padding:20px; text-align:center; cursor:pointer; transition:transform .12s, box-shadow .12s;}
.vs-opt:hover{transform:translate(-2px,-3px); box-shadow:var(--sh-lg);}
.vs-opt .big{font-size:54px; line-height:1;}
.vs-opt b{font-family:var(--font-d); font-weight:600; font-size:22px; display:block; margin-top:8px;}
.vs-opt span{font-family:var(--font-b); font-weight:700; font-size:13px; color:var(--ink-soft);}
.vs-opt .vbtn{margin-top:14px; display:inline-block; font-family:var(--font-d); font-weight:600; font-size:14px; background:var(--indigo); color:#fff; border:var(--bd2); border-radius:999px; padding:8px 20px; box-shadow:0 4px 0 var(--ink);}
.vs-opt.picked{background:var(--mint-soft);}
.vs-opt.picked .vbtn{background:var(--green-deep);}
.vs-mid{width:54px; height:54px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:18px; border:var(--bd); box-shadow:var(--sh-sm);}
.vs-tallies{position:relative; display:flex; justify-content:space-between; margin-top:16px; font-family:var(--font-d); font-weight:700; font-size:14px;}

@media(max-width:960px){ .ce-grid{grid-template-columns:repeat(3,1fr);} .dnav-links{display:none;} }
@media(max-width:900px){ .feed-grid{grid-template-columns:1fr 1fr;} .vs-grid{grid-template-columns:1fr;} .vs-mid{margin:0 auto;} }
@media(max-width:600px){ .ce-grid{grid-template-columns:1fr 1fr;} .scene-hint{display:none;} .feed-grid{grid-template-columns:1fr;} }

/* WordPress: real featured photos fill the feed-card top; illustrations stay contained */
.fcard .top.photo{padding:0;}
.fcard .top.photo img{width:100%; height:100%; object-fit:cover;}

/* --------------------------------------------------------------------------
   Theme-conflict guard for the hero.
   The hero is a full-bleed illustrated block. Some active themes apply global
   rules to generic wrappers (e.g. `header`, `section`, `#main`, a fixed/absolute
   site header, forced heights or backgrounds) that would override the hero and
   make it collapse or disappear. These !important guards keep the hero laid out
   and visible regardless of the active theme's CSS. Scoped only to .scene-hero,
   so nothing else on the site is affected.
   -------------------------------------------------------------------------- */
.scene-hero{
  position:relative !important;
  display:block !important;
  float:none !important;
  clear:both !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  inset:auto !important;
  transform:none !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#5DB7E6 !important;
  overflow:hidden !important;
}
.scene-hero .scene-stage svg{display:block !important; width:100% !important; height:auto !important; max-width:none !important;}
.scene-hero .scene-intro{display:block !important; visibility:visible !important; opacity:1 !important;}
.scene-hero .scene-intro h1,
.scene-hero .scene-intro p{color:#fff !important;}