/* ============================================================
   LucidLab Toolkit - per-product theme overlay
   Loads AFTER styles.css. Each product page sets data-theme.
   Contrast rule respected: body copy only ever sits on cream,
   wheat or sand. Blues carry accents, bands, frames and headings.
   ============================================================ */

/* ---- theme tokens ---- */
[data-theme="sky"]{        /* PhD Application Tracker: bright, airy pale sky */
  --accent:var(--sky); --accent-2:var(--dusty); --accent-soft:rgba(174,203,211,.34);
  --btn-shadow:var(--sky); --band:var(--sky);
}
[data-theme="dusty"]{      /* PhD Essentials Toolkit: deeper, cooler periwinkle */
  --accent:var(--dusty); --accent-2:var(--sand); --accent-soft:rgba(179,195,208,.42);
  --btn-shadow:var(--dusty); --band:var(--dusty);
}
[data-theme="sand"]{       /* Project Confidence Kit: warm sand and sage */
  --accent:var(--sand); --accent-2:var(--sage); --accent-soft:rgba(216,195,165,.45);
  --btn-shadow:var(--sand); --band:var(--sand);
}

/* ---- themed components ---- */
.btn{box-shadow:6px 6px 0 var(--btn-shadow)}
.btn:hover{box-shadow:3px 3px 0 var(--btn-shadow)}
.btn:active{box-shadow:1px 1px 0 var(--btn-shadow)}
.btn.alt{box-shadow:6px 6px 0 var(--accent-2)}
.btn.alt:hover{box-shadow:3px 3px 0 var(--accent-2)}
.eyebrow{background:var(--accent-soft);color:var(--deep)}
.badge{background:var(--accent);color:#2f3d44}
[data-theme="sand"] .badge{color:#42351f}
ul.checks li::before{color:var(--deep)}
.card .cicon{color:var(--deep)}

/* ---- logo in header ---- */
.logo .mark{width:40px;height:40px;display:block}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s var(--ease-spring)}
.logo:hover .mark img{transform:rotate(-10deg) scale(1.1)}

/* ---- decorative full-bleed band (headline-scale text only) ---- */
.band{background:var(--band);position:relative;overflow:hidden}
.band h2{color:#2b3a41}
[data-theme="sand"] .band h2{color:#3d3122}
.band .sub{color:#3b4a51;font-weight:500}
[data-theme="sand"] .band .sub{color:#4a3f2c}

/* ---- product gallery: real 4:3 listing slides ---- */
.slides{display:grid;gap:22px}
@media(min-width:700px){.slides.g2{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.slides.g3{grid-template-columns:repeat(3,1fr)}}
.slide-card{border-radius:24px;overflow:hidden;background:#fdfaf4;position:relative;
  box-shadow:0 16px 38px rgba(78,78,78,.18);transition:transform .35s ease,box-shadow .35s ease;
  cursor:zoom-in}
.slide-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(78,78,78,.26)}
.slide-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.slide-card figcaption{padding:14px 18px;font-size:.85rem;font-weight:600;color:var(--deep)}
.slide-card.empty{border:2px dashed var(--deep);cursor:default;
  background:repeating-linear-gradient(45deg,rgba(168,185,163,.16),rgba(168,185,163,.16) 12px,rgba(168,185,163,.05) 12px,rgba(168,185,163,.05) 24px)}
.slide-card.empty .ph4{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:22px;color:var(--deep);font-size:.85rem;font-weight:600;line-height:1.5}

/* hero cover frame */
.cover{border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(78,78,78,.26);
  background:#fdfaf4;position:relative}
.cover img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cover.empty{border:2px dashed var(--deep)}
.cover .ph4{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:28px;color:var(--deep);font-weight:600;font-size:.9rem;line-height:1.6;
  background:repeating-linear-gradient(45deg,rgba(168,185,163,.16),rgba(168,185,163,.16) 12px,rgba(168,185,163,.05) 12px,rgba(168,185,163,.05) 24px)}

/* what's-in-the-box list */
.box-list{display:grid;gap:16px}
.box-item{display:flex;gap:16px;align-items:flex-start;background:#fdfaf4;border-radius:22px;
  padding:20px 24px;box-shadow:0 10px 26px rgba(78,78,78,.1);border-left:8px solid var(--accent)}
.box-item:nth-child(even){border-left-color:var(--accent-2)}
.box-item .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#2f3d44}
.box-item:nth-child(even) .n{background:var(--accent-2)}
[data-theme="sand"] .box-item .n{color:#42351f}
.box-item h3{font-size:1.05rem;margin-bottom:4px}
.box-item p{font-size:.92rem;margin:0;color:#6a6a6a}
.box-item .fmt{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);display:block;margin-bottom:4px}

/* lightbox */
#lb{position:fixed;inset:0;background:rgba(43,43,43,.92);z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#lb.show{display:flex}
#lb img{max-width:96vw;max-height:92vh;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#lb .x{position:absolute;top:18px;right:24px;color:#fff;font-size:2rem;font-weight:300;
  background:none;border:none;cursor:pointer;line-height:1}

/* price note */
.pricenote{font-size:.8rem;color:#8b8b8b;text-align:center;margin-top:14px}

/* ---- additional product themes ---- */
[data-theme="sage"]{        /* Literature Tracker: green-led, blush accents */
  --accent:var(--sage); --accent-2:var(--blush); --accent-soft:rgba(168,185,163,.42);
  --btn-shadow:var(--sage); --band:var(--sage);
}
[data-theme="blossom"]{     /* Milestone Tracker: blush + sand-cream */
  --accent:var(--blush); --accent-2:var(--sand); --accent-soft:rgba(233,166,166,.34);
  --btn-shadow:var(--blush); --band:var(--sand);
}
[data-theme="moss"]{        /* Thesis Defense: warm cream band, sage accents */
  --accent:var(--sage); --accent-2:var(--sand); --accent-soft:rgba(168,185,163,.38);
  --btn-shadow:var(--sage); --band:var(--wheat);
}
[data-theme="sage"] .badge,[data-theme="moss"] .badge{color:#2b3524}
[data-theme="blossom"] .badge{color:#5c3434}
[data-theme="sage"] .band h2,[data-theme="moss"] .band h2,[data-theme="blossom"] .band h2{color:#3a4033}
[data-theme="blossom"] .band h2{color:#4a3f2c}
[data-theme="sage"] .band .sub{color:#3d4738}
[data-theme="moss"] .band .sub,[data-theme="blossom"] .band .sub{color:#4a3f2c}
[data-theme="sage"] .box-item .n,[data-theme="moss"] .box-item .n{color:#2b3524}
[data-theme="blossom"] .box-item .n{color:#5c3434}

/* per-product gallery aspect ratio (some source art is not 4:3) */
.slide-card img,.cover img{aspect-ratio:var(--shot-ar,4/3)}

/* ---- Assignment Planner: sky band, sage accent ---- */
[data-theme="aqua"]{
  --accent:var(--sky); --accent-2:var(--sage); --accent-soft:rgba(174,203,211,.40);
  --btn-shadow:var(--sage); --band:var(--sky);
}
[data-theme="aqua"] .badge{color:#25404a}

/* ---- letterbox mode: show whole image, never crop (mixed source ratios) ---- */
.slides.fit .slide-card img,.cover.fit img{object-fit:contain;background:#fdfaf4;padding:6px}

/* ---- homepage catalogue extras ---- */
.section-label{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:8px}
.pcard .fmt{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--deep)}
.savepill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sage);color:#26301f;border-radius:999px;padding:4px 12px;margin-left:8px}
.compare{width:100%;border-collapse:collapse;margin-top:26px;font-size:.92rem;background:#fdfaf4;
  border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(78,78,78,.13)}
.compare th,.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(78,78,78,.1)}
.compare th{font-family:'Fraunces',serif;font-weight:600;background:rgba(168,185,163,.28)}
.compare tr:last-child td{border-bottom:none}
.compare td.p{font-family:'Fraunces',serif;font-weight:600;color:var(--deep);white-space:nowrap}

/* ---- bundle upsell strip ---- */
.upsell{display:grid;gap:26px;align-items:center;background:#fdfaf4;border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-card);border:2px solid var(--accent-soft)}
@media(min-width:680px){.upsell{grid-template-columns:.8fr 1.2fr}}
.upsell-img{border-radius:20px;overflow:hidden;box-shadow:0 12px 28px rgba(78,78,78,.18)}
.upsell-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s ease}
.upsell:hover .upsell-img img{transform:scale(1.05)}
.upsell h3{margin:6px 0 8px;font-size:1.35rem}
.upsell p{font-size:.95rem;color:#6a6a6a}
.upsell-price{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--deep);margin-bottom:16px}
.upsell-price s{color:#9b9b9b;font-size:.95rem;font-family:'Montserrat',sans-serif;margin-right:6px}
.upsell-price strong{font-weight:600}

/* ============================================================
   LucidLab Toolkit Professional
   Deep sage promoted from a text colour to a surface colour.
   #4a5a3a is already in the palette, this tier just uses it
   at full bleed. Sand and wheat carry the accents.
   Long-form body copy stays on cream, wheat and sand. Deep
   surfaces carry headline-scale text and short copy only.
   ============================================================ */
[data-theme="pro"]{
  --accent:var(--deep); --accent-2:var(--sand); --accent-soft:rgba(74,90,58,.14);
  --btn-shadow:var(--sand); --band:var(--deep);
}
[data-theme="pro"] .badge{background:var(--sand);color:#3d3122}
[data-theme="pro"] .eyebrow{background:rgba(74,90,58,.13);color:#3c4a2e}

/* ---- deep surface, the tier's signature ---- */
.bg-deep{background:var(--deep);color:var(--cream)}
.bg-deep h1,.bg-deep h2,.bg-deep h3{color:#f7f2e8}
.bg-deep p{color:#e3ddcf}
.bg-deep .lede{color:#eee7d9}
.bg-deep .sub{color:#d5cebd}
.bg-deep .eyebrow{background:rgba(244,237,225,.14);color:#f0e9da}
.bg-deep .underlined::after{background:var(--sand)}
.bg-deep .microtrust{color:#cdc5b3}
/* styles.css sets .hero h1 .swap to deep, which is invisible on a deep
   surface. Matched on specificity rather than reached for !important. */
.bg-deep .swap,
.bg-deep.hero h1 .swap{color:var(--wheat)}
.bg-deep ul.checks li::before{color:var(--wheat)}
.bg-deep a:not(.btn){color:var(--wheat)}
/* the button inverts on deep: sand pill, dark text, wheat shadow */
.bg-deep .btn{background:var(--sand);color:#3a2f1e;box-shadow:6px 6px 0 rgba(235,217,173,.55)}
.bg-deep .btn:hover{box-shadow:3px 3px 0 rgba(235,217,173,.55)}
.bg-deep .btn:active{box-shadow:1px 1px 0 rgba(235,217,173,.55)}
.bg-deep .btn:focus-visible{outline:3px solid var(--wheat)}

/* ---- band and footer sit on deep in this tier ---- */
[data-theme="pro"] .band{background:var(--deep)}
[data-theme="pro"] .band h2{color:#f7f2e8}
[data-theme="pro"] .band .sub{color:#d5cebd}
[data-theme="pro"] .band .underlined::after{background:var(--sand)}

/* ---- still strip, replaces the scrolling tape marquee ---- */
.strip{background:#3f4d31;padding:15px 0;text-align:center}
.strip span{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#dcd5c4;margin:0 15px;display:inline-block;line-height:2}

/* ---- compliance block: body copy on off-white, never on the accent ---- */
.scope{background:#fdfaf4;border:2px solid var(--deep);border-left:10px solid var(--deep);
  border-radius:22px;padding:26px 30px;box-shadow:0 10px 26px rgba(78,78,78,.10);margin-top:26px}
.scope h3{font-size:1.05rem;margin:0 0 10px}
.scope p{font-size:.95rem;margin:0 0 8px;color:#4e4e4e}
.scope p:last-child{margin-bottom:0}
.scope .lab{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--deep);display:block;margin-bottom:8px}

/* ---- requirements strip, stated early ---- */
.reqs{display:grid;gap:14px;margin-top:8px}
@media(min-width:760px){.reqs{grid-template-columns:repeat(3,1fr)}}
.req{background:#fdfaf4;border-radius:18px;padding:18px 22px;box-shadow:0 8px 20px rgba(78,78,78,.09);
  border-top:5px solid var(--deep)}
.req:nth-child(2){border-top-color:var(--sand)}
.req .k{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);
  display:block;margin-bottom:5px}
.req .v{font-family:'Fraunces',serif;font-size:1.02rem;color:#4e4e4e;line-height:1.4}

/* ---- upsell without artwork, until the Validation Desk has its own ---- */
.upsell.noart{grid-template-columns:1fr;border-color:var(--sand);border-width:2px}
.upsell.noart .upsell-price{margin-top:14px}

/* ---- footer: this page uses <footer class="band center">, which the
   base stylesheet never styles (it only styles footer.site). On a
   cream band that fell back to readable dark ink by accident; on a
   deep band that same fallback is dark text on dark green. Styled
   properly here instead of patched around. ---- */
footer.band{padding:48px 0 34px}
footer.band .flinks{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
footer.band .flinks a{color:var(--wheat);text-decoration:none;padding:3px 0;
  transition:color .2s,transform .2s;display:inline-block}
footer.band .flinks a:hover{color:#fff;transform:translateY(-1px)}
footer.band .legal{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  border-top:1px solid rgba(244,237,225,.18);padding-top:18px;
  font-size:.8rem;color:#cdc5b3}

/* ---- sticky buy bar picks up the tier's darker register ---- */
[data-theme="pro"] .stickybuy{background:rgba(74,90,58,.96)}
[data-theme="pro"] .stickybuy .p{color:#f4ede1}
[data-theme="pro"] .stickybuy .btn{background:var(--sand);color:#3a2f1e;box-shadow:4px 4px 0 rgba(235,217,173,.5)}

/* ============================================================
   LucidLab Toolkit Professional: the landing page
   Midnight, a deeper cousin of the existing dusty blue, used only
   as a full-bleed surface. Body copy never sits on it, only
   headline-scale text and short supporting lines.
   ============================================================ */
:root{--midnight:#22323f;--midnight-soft:#2c4152}

.bg-midnight{background:var(--midnight);color:#e8e2d6}
.bg-midnight h1,.bg-midnight h2,.bg-midnight h3{color:#f7f2e8}
.bg-midnight p{color:#d9d3c6}
.bg-midnight .eyebrow{background:rgba(244,237,225,.13);color:#eee7d9}
.bg-midnight .underlined::after{background:var(--sand)}
.bg-midnight ul.checks li::before{color:var(--sand)}
.bg-midnight a:not(.btn){color:var(--wheat)}
.bg-midnight .btn{background:var(--sand);color:#2b2419;box-shadow:6px 6px 0 rgba(235,217,173,.5)}
.bg-midnight .btn:hover{box-shadow:3px 3px 0 rgba(235,217,173,.5)}
.bg-midnight .btn:active{box-shadow:1px 1px 0 rgba(235,217,173,.5)}
.bg-midnight .btn.alt{background:transparent;color:#f0e9da;
  box-shadow:inset 0 0 0 2px rgba(240,233,218,.45)}
.bg-midnight .btn.alt:hover{background:rgba(240,233,218,.1);
  box-shadow:inset 0 0 0 2px rgba(240,233,218,.8)}

/* ---- hero: one centred column, deliberately not .hero ---- */
.pro-hero{padding:86px 0 96px}
.pro-lockup{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.02;
  font-size:clamp(2.6rem,8vw,5rem);color:#f7f2e8;letter-spacing:-.025em;margin:18px 0 0}
.pro-lockup .amp{font-style:italic;font-weight:400;color:var(--sand)}
.pro-sub{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,3vw,1.9rem);color:var(--wheat);margin:10px 0 0}
.pro-lede{font-size:1.05rem;line-height:1.65;color:#ebe5d8;max-width:520px;
  margin:26px auto 0}
.pro-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}
@media(max-width:560px){.pro-cta{flex-direction:column;align-items:stretch}}

/* ---- interactive calibration panel ---- */
.calib{background:var(--midnight-soft);border-radius:28px;padding:26px;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.32)}
.calib-plot{position:relative;height:300px;border-radius:18px;
  background:rgba(244,237,225,.04);border:1px solid rgba(244,237,225,.14)}
.calib-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cline{stroke:var(--sand);stroke-width:.7;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity .5s ease}
.cline.show{opacity:.9}
.calib-axis{position:absolute;background:rgba(232,226,214,.3)}
.calib-axis.x{left:8%;right:4%;bottom:8%;height:1px}
.calib-axis.y{left:8%;top:6%;bottom:8%;width:1px}
.calib-pt{position:absolute;width:16px;height:16px;padding:0;border-radius:50%;
  background:#e9a6a6;border:2px solid rgba(255,255,255,.8);cursor:pointer;
  transform:translate(-50%,-50%);
  transition:left .65s var(--ease-spring),top .65s var(--ease-spring),
             background .35s ease,box-shadow .25s ease;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.calib-pt:hover:not(:disabled){box-shadow:0 0 0 6px rgba(233,166,166,.22),0 3px 10px rgba(0,0,0,.4)}
.calib-pt:focus-visible{outline:3px solid var(--wheat);outline-offset:3px}
.calib-pt.fitted{background:var(--sage);cursor:default}
.calib-lbl{position:absolute;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(232,226,214,.5);font-weight:700}
.calib-lbl.x{bottom:2%;left:50%;transform:translateX(-50%)}
.calib-lbl.y{left:-4px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left center}
.calib-read{display:grid;gap:12px;margin-top:20px}
@media(min-width:620px){.calib-read{grid-template-columns:repeat(3,1fr)}}
.calib-cell{background:rgba(244,237,225,.07);border-radius:14px;padding:13px 16px;
  border:1px solid rgba(244,237,225,.12)}
.calib-cell .k{font-size:.63rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(232,226,214,.6);display:block;margin-bottom:5px}
.calib-cell .v{font-family:'Fraunces',serif;font-size:1.15rem;color:#f7f2e8;transition:color .4s ease}
.calib-cell .v.good{color:var(--sage)}
/* the hint sits on the dark panel, so its bold run must be light too.
   styles.css sets strong and b to the dark ink, invisible here. */
.calib-hint{font-size:.88rem;line-height:1.55;color:rgba(232,226,214,.75);
  margin-top:16px;text-align:center;min-height:2.6em}
.calib-hint b,.calib-hint strong{color:var(--wheat);font-weight:700}
.calib-ctrls{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.cbtn{font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;border-radius:999px;padding:10px 22px;cursor:pointer;
  background:var(--sand);color:#2b2419;border:none;transition:transform .2s,box-shadow .2s}
.cbtn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.28)}
.cbtn.ghost{background:transparent;color:#e8e2d6;box-shadow:inset 0 0 0 1.5px rgba(232,226,214,.35)}
.cbtn.ghost:hover{background:rgba(232,226,214,.1)}

/* ---- the first release, on deep green ---- */
.prorel{display:grid;gap:30px;align-items:center;margin-top:30px}
@media(min-width:820px){.prorel{grid-template-columns:.9fr 1.1fr}}
.prorel-img{border-radius:24px;overflow:hidden;box-shadow:0 20px 46px rgba(0,0,0,.34)}
.prorel-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s ease}
.prorel:hover .prorel-img img{transform:scale(1.04)}
.prorel-body h3{margin:12px 0 10px;font-size:1.45rem;color:#f7f2e8}
.prorel-body p{color:#ddd7c9}
.prorel-body ul.checks{margin:16px 0}
.prorel-body ul.checks li{color:#ddd7c9}
.prorel-body ul.checks li::before{color:var(--sand)}
.prorel-price{font-family:'Fraunces',serif;font-size:1.7rem;color:var(--wheat);margin:18px 0 16px}

/* ---- coming soon roadmap ---- */
.roadmap{display:grid;gap:18px;margin-top:30px}
@media(min-width:760px){.roadmap{grid-template-columns:repeat(3,1fr)}}
.rm{background:#fdfaf4;border-radius:22px;padding:24px 26px;
  box-shadow:0 12px 30px rgba(78,78,78,.12);border-top:6px solid var(--deep)}
.rm:nth-child(2){border-top-color:var(--sand)}
.rm:nth-child(3){border-top-color:var(--dusty)}
.rm .stage{font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep);display:block;margin-bottom:8px}
.rm h3{font-size:1.08rem;margin-bottom:7px}
.rm p{font-size:.9rem;color:#6a6a6a;margin:0}

/* ---- the pro pages use footer.site, same as the rest of the shop.
   footer.band styling above is retained for any page still using it. ---- */

/* ---- sand marquee between the midnight and deep-green sections.
   Reuses .tape's structure and animation, sand instead of deep, so
   the two dark surfaces don't sit flush against each other. ---- */
.pro-tape{background:var(--sand);color:#3d3122}
.pro-tape span{color:#3d3122}