/* =========================================================
   Totality 360 hybrid look (4 Nov 2026)
   Light page like the original site, with the new Tali art, phone
   screens, reviews and a few dark feature cards. Replaces alive.css
   on every page except /links.html (which keeps its own dark look).
   ========================================================= */

/* Orange fills take dark ink so they pass 4.5:1 */
.btn--primary, a.btn--primary, button.btn--primary, .post-cta-btn, .guide-download, .btn-submit,
.res-cta-btn.primary, .email-btn, .app-btn-totality, .section-num, a.btn.btn--primary, .btn--totality {
  color: #1C1420 !important;
}
.btn[style*="6C3483"], a.btn[style*="6C3483"], a.btn--primary[style*="6C3483"] { background:#6C3483 !important; color:#fff !important; }

/* Tali beside the hero buttons (js/tali-live.js) */
.has-tali-live { position: relative; padding-right: 112px; }
.tali-live { position: absolute; right: 0; bottom: -6px; width: 92px; height: 132px; pointer-events: auto; cursor: pointer; animation: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.tali-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
@media (min-width: 901px) { .has-tali-live { padding-right: 0; } .tali-live { position: relative; right: auto; bottom: auto; align-self: flex-end; margin-left: 10px; height: 110px; width: 76px; } }

/* App screens on the Totality and Nutrition pages */
.app-shots { position: relative; overflow: hidden; }
.app-shots::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(1100px, 120vw); height: 520px; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(80px); opacity: .22; pointer-events: none; }
.app-shots--orange::before { background: radial-gradient(closest-side, #ED8008, transparent); }
.app-shots--blue::before { background: radial-gradient(closest-side, #1565A0, transparent); opacity: .25; }
.app-shots .container { position: relative; }
.app-shots__row { display: flex; gap: 28px; justify-content: center; align-items: flex-start; margin-top: 34px; }
.app-shot { margin: 0; width: 230px; flex: 0 0 auto; text-align: center; }
.app-shot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 28px rgba(39,38,38,.28)); transition: transform .4s; }
.app-shot:hover img { transform: translateY(-8px); }
.app-shot figcaption { margin-top: 16px; }
.app-shot figcaption b { display: block; color: var(--ink); font-size: 1rem; }
.app-shot figcaption span { display: block; color: var(--muted); font-size: .88rem; margin-top: 3px; }
@media (max-width: 900px) {
  .app-shots__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 24px; margin-left: -16px; margin-right: -16px; gap: 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .app-shots__row::-webkit-scrollbar { display: none; }
  .app-shot { width: 66vw; max-width: 260px; scroll-snap-align: center; }
}
/* Hero phone in place of the old video panel */
.hero-phone { margin: 0; position: relative; justify-self: center; width: min(300px, 70vw); }
.hero-phone::before { content: ""; position: absolute; inset: 10% -30%; border-radius: 50%; filter: blur(70px); opacity: .25; z-index: -1; }
.hero-phone--orange::before { background: radial-gradient(closest-side, #ED8008, transparent); }
.hero-phone--blue::before { background: radial-gradient(closest-side, #1565A0, transparent); opacity: .3; }
.hero-phone img { width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 34px rgba(39,38,38,.3)); }
@media (max-width: 900px) { .hero-phone { width: min(260px, 66vw); margin-top: 10px; } }

/* Google reviews */
.reviews__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.review { margin: 0; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #E6E4E1; box-shadow: 0 8px 24px rgba(39,38,38,.06); display: flex; flex-direction: column; gap: 12px; }
.review__stars { color: #ED8008; letter-spacing: 2px; font-size: 1.05rem; }
.review blockquote { margin: 0; color: #272626; font-size: 1.05rem; line-height: 1.55; flex: 1; }
.review figcaption { color: #62605D; font-size: .95rem; font-weight: 600; }
.reviews__score { color: #272626; }
.reviews-home { margin-top: 0; }
@media (max-width: 900px) { .reviews__row { grid-template-columns: 1fr; } }
.reviews__row--4 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .reviews__row--4 { grid-template-columns: 1fr; } }
.page-hero, .app-shots, .reviews { overflow-x: clip; }

/* Calm: no bobbing */
.tali:not(.card), .tali-bubble, .tali-live { animation: none !important; }

/* ---------- Home page: light page, dark feature cards ---------- */
html:has(.hm) body { background: #FBFAF8; }
.hm { --text:#272626; --soft:#45423F; --muted:#62605D; --line:#E6E4E1; color:#272626; }
.hm h1, .hm h2 { color: #272626; }
.hm h1 em, .hm h2 em { background: linear-gradient(90deg,#C46800,#6C3483,#1565A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm .kicker, .hm .label, .hm .fine { color: #62605D; }
.hm .card { backdrop-filter: none; }
.hm .heroimg, .hm .taliband, .hm .hq, .hm .offer { --text:#fff; --soft:#D9D2E0; --muted:#A79BB3; --line:rgba(255,255,255,.14); color:#fff; border:0; }
.hm .heroimg h1, .hm .taliband h2, .hm .hq h2, .hm .offer h2 { color:#fff; }
.hm .heroimg h1 em, .hm .taliband h2 em, .hm .hq h2 em, .hm .offer h2 em { background: linear-gradient(90deg,#FFA53A,#B57AD6,#5AA9E6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm .heroimg { background:#120A18; }
.hm .taliband { background: linear-gradient(160deg,#2A1433,#14253a); }
.hm .taliband .mini { background: rgba(0,0,0,.28); }
.hm .hq { background: radial-gradient(80% 120% at 100% 0%,rgba(108,52,131,.75),transparent 60%),#1a0f22; }
.hm .offer { background:#272626; }
.hm .app { border:0; color:#1C1420; box-shadow: 0 18px 40px rgba(39,38,38,.12); }
.hm .app.tot { background:#ED8008; }
.hm .app.nut { background:#1565A0; color:#fff; }
.hm .app.tot h3, .hm .app.tot p, .hm .app.tot li, .hm .app.tot .price, .hm .app.tot .price small, .hm .app.tot .tag, .hm .app.tot li::before { color:#1C1420; }
.hm .app.nut h3, .hm .app.nut p, .hm .app.nut li, .hm .app.nut .price, .hm .app.nut .price small, .hm .app.nut .tag, .hm .app.nut li::before { color:#fff; }
.hm .app.tot .chip { background: rgba(255,255,255,.55); border-color: rgba(28,20,32,.2); color:#1C1420; }
.hm .app.nut .chip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color:#fff; }
.hm .app.tot .big { background:#272626; border-color:#272626; color:#fff; }
.hm .app.tot .big + .big { background: transparent; border-color:#1C1420; color:#1C1420; }
.hm .app.nut .big { background:#fff; border-color:#fff; color:#0F4F80; }
.hm .app.nut .big + .big { background: transparent; border-color:#fff; color:#fff; }
.hm .heroimg .big.tot, .hm .ctas > .big.tot { color:#1C1420; }
.hm > .hero2 > .ctas .big { color:#fff; }
.hm > .hero2 > .ctas .big.tot { color:#1C1420; }
.hm .proof { margin-top:72px; background:#F5F5F4; border-radius:28px; padding:44px 40px; }
.hm .proof .sub { color:#62605D; }
.hm .pcols { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:28px; }
.hm .pcols h3 { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:22px; margin-bottom:14px; color:#272626; }
.hm .pcols h3::before { content:""; width:14px; height:14px; border-radius:4px; background:#ED8008; }
.hm .pcols .n h3::before { background:#1565A0; }
.hm .pcols ul { list-style:none; display:grid; gap:9px; font-size:15.5px; color:#272626; }
.hm .pcols li::before { content:"\2713"; font-weight:900; margin-right:10px; color:#C46800; }
.hm .pcols .n li::before { color:#1565A0; }
.hm .facts { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px; }
.hm .fact { border-top:2px solid #272626; padding-top:12px; }
.hm .fact b { display:block; font-size:15.5px; line-height:1.35; color:#272626; }
.hm .fact span { display:block; color:#62605D; font-size:14px; margin-top:6px; }
.hm .reviews-home .sub, .hm .reviews-home .sub b { color:#272626; }
@media (max-width: 900px) { .hm .pcols { grid-template-columns:1fr; } .hm .facts { grid-template-columns:1fr 1fr; } .hm .proof { padding:28px 22px; } }

/* ---------- Legibility on the light page (checked against WCAG AA) ---------- */
/* Orange as text uses a darker step; orange stays for fills and rules */
a.link, a.text-link, .text-link, .post-read-more, .post-badge, .guide-badge, p.kicker, .hero-eyebrow,
.table th, .table td a, td a, th a, .get-alt a, .get-note a { color:#A85A00 !important; }
.pill--orange { color:#A85A00; background:#FFF4E8; border-color:#F5C890; }
h1 em, h2 em, .section-title em, .post-title em, .blog-hero em, .hero em { color:#A85A00 !important; }
.hm h1 em, .hm h2 em { color:transparent !important; }
.badge-mindset { color:#5B2A70 !important; } .badge-nutrition, .badge-business { color:#0F4F80 !important; } .badge-training { color:#8A4A00 !important; }
.table .yes, .yes, .pr-save, .thq-toggle small, small.pr-save, .save { color:#17703D !important; }
.review__stars { color:#B35F00 !important; }
.effective-date { color:#62605D !important; }
.launch-offer, .launch-offer * { color:#7A4100 !important; }
/* body links inside reading pages (not buttons) */
.section a:not([class*="btn"]), .content a:not([class*="btn"]), .contact-card a, .intro a, .highlight a, .faq-cta a, .page-hero p a, main p a:not([class*="btn"]):not(.big) { color:#A85A00 !important; }
/* orange fills and the active toggles take dark ink */
.btn--primary, a.btn--primary, button.btn--primary, .post-cta-btn, .guide-download, .btn-submit, .res-cta-btn.primary, .email-btn,
.app-btn-totality, .section-num, a.btn.btn--primary, .btn--totality, .hm .big.tot,
.toggle-btn.active, .toggle-btn[aria-pressed="true"] { color:#1C1420 !important; }
.btn[style*="6C3483"], a.btn[style*="6C3483"], a.btn--primary[style*="6C3483"] { background:#6C3483 !important; color:#fff !important; }
/* legal pages: the orange .hero band takes dark ink */
body > .hero h1, body > .hero p, body > .hero .sub, body.reading .hero h1, body.reading .hero p, main > .hero h1, main > .hero p { color:#1C1420 !important; }
/* white-on-orange page headers (privacy, terms, refund, support) take dark ink */
.hm .app.tot .big.tot { background:#272626 !important; border-color:#272626 !important; color:#fff !important; }
.hm .app.nut .big.nut { background:#fff !important; border-color:#fff !important; color:#0F4F80 !important; }

/* ---------- Tali HQ as the third door on the home page (10 Nov 2026) ---------- */
.hm .big.hqb, .hm > .hero2 > .ctas .big.hqb, .hm .offer .big.hqb { background:#6C3483; border-color:#6C3483; color:#fff !important; }
.hm .app.hqa { background:#6C3483; color:#fff; }
.hm .app.hqa h3, .hm .app.hqa p, .hm .app.hqa li, .hm .app.hqa .price, .hm .app.hqa .price small, .hm .app.hqa .tag, .hm .app.hqa li::before { color:#fff; }
.hm .app.hqa .chip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color:#fff; }
.hm .app.hqa .big { background:#fff !important; border-color:#fff !important; color:#4A2360 !important; }
.hm .app.hqa .big + .big { background: transparent !important; border-color:#fff !important; color:#fff !important; }
@media (min-width: 1101px) {
  .hm .apps { grid-template-columns: repeat(3, 1fr); }
  .hm .apps .app { grid-template-columns: 1fr; min-height: 0; padding: 30px 26px 0; }
  .hm .apps .app .device { width: 210px; justify-self: center; margin: 6px 0 28px; }
  .hm .apps .app .ctas { flex-wrap: wrap; }
  .hm .apps .app h3 { font-size: 30px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .hm .apps { grid-template-columns: 1fr; } .hm .apps .app { grid-template-columns: 1fr 230px; } }
.hm .pcols { grid-template-columns: repeat(3, 1fr); gap: 36px; }
.hm .pcols .h h3::before { background:#6C3483; }
.hm .pcols .h li::before { color:#6C3483; }
.hm .facts { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .hm .pcols { grid-template-columns: 1fr; } .hm .facts { grid-template-columns: 1fr 1fr; } }
.hm .bd { margin-top: 26px; border-radius: 28px; }
.hm .bd-panel h3 { font-family: var(--display); }

/* ---------- Depth on buttons and tiles (10 Nov 2026, asked for by Taj) ---------- */
/* Buttons sit up off the page with a lit top edge and a soft shadow, lift on hover, press on tap. */
.btn:not(.btn--ghost):not(.btn--ghost-light), .hm .big, .thq-btn, .thq-get:not(.thq-get--soon), .post-cta-btn, .guide-download, .res-cta-btn, .email-btn, .btn-submit {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.14), 0 2px 3px rgba(39,38,38,.14), 0 10px 22px -8px rgba(39,38,38,.38);
  transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s;
}
.btn:not(.btn--ghost):not(.btn--ghost-light):hover, .hm .big:hover, .thq-btn:hover, .thq-get:not(.thq-get--soon):hover, .post-cta-btn:hover, .guide-download:hover, .res-cta-btn:hover, .email-btn:hover, .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.14), 0 4px 6px rgba(39,38,38,.14), 0 18px 30px -10px rgba(39,38,38,.45);
}
.btn:not(.btn--ghost):not(.btn--ghost-light):active, .hm .big:active, .thq-btn:active, .thq-get:not(.thq-get--soon):active, .post-cta-btn:active, .guide-download:active, .res-cta-btn:active, .email-btn:active, .btn-submit:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.22), 0 1px 2px rgba(39,38,38,.16);
}
.btn--ghost, .btn--ghost-light { box-shadow: 0 1px 2px rgba(39,38,38,.08), 0 6px 14px -8px rgba(39,38,38,.25); }
/* Outline buttons inside the coloured doors stay flat fills, with a shadow only */
.hm .app .big + .big { box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); }
/* Tiles: a soft two layer shadow and a lit top edge, and they rise a little under the pointer. */
.card:not(.card--flat), .review, .thq-feat, .thq-plan, .thq-card, .hm .mini, .hm .proof, .post-card, .guide-card, .res-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(39,38,38,.06), 0 14px 30px -14px rgba(39,38,38,.22);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:not(.card--flat):hover, .review:hover, .thq-feat:hover, .thq-plan:hover, .post-card:hover, .guide-card:hover, .res-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(39,38,38,.07), 0 24px 44px -18px rgba(39,38,38,.3);
}
.card--dark, .hm .heroimg, .hm .taliband, .hm .offer, .hm .mini { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(39,38,38,.1), 0 26px 50px -20px rgba(39,38,38,.5); }
.hm .app { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.12), 0 2px 4px rgba(39,38,38,.1), 0 28px 50px -22px rgba(39,38,38,.5); transition: transform .25s, box-shadow .25s; }
.hm .app:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.12), 0 4px 8px rgba(39,38,38,.12), 0 38px 60px -24px rgba(39,38,38,.55); }
.hm .chip { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) { .btn, .hm .big, .card, .hm .app, .review, .thq-feat, .thq-plan { transition: none; } .btn:hover, .hm .big:hover, .card:hover, .hm .app:hover, .review:hover, .thq-feat:hover, .thq-plan:hover { transform: none !important; } }
.bd a, .bd p a { color:#fff !important; text-decoration: underline; }
@media (max-width: 480px) { .hm > .hero2 > .ctas .big { font-size: 14px; padding: 0 14px; white-space: nowrap; } }
main .bd p a:not([class*="btn"]):not(.big) { color:#fff !important; }