/* Monday Money Tonic. Built on the Oladipupo Clement brand system:
   Prata for display moments, Manrope for everything read, square corners,
   grounds alternating ink and ivory to do the dividing. */
:root{
  --ink:#060C15;--ink2:#0B1523;--ink3:#16283F;
  --ivory:#F8F6F1;--ivory2:#EFEBE1;
  --gold:#DCBB72;--goldlow:#6B5119;--blue:#2E6BD6;--dim:#49535F;
  --mist:#9AA6B4;--line-dark:rgba(248,246,241,.14);--line-light:rgba(6,12,21,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;--gut:clamp(16px,4.5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--ivory);font:400 17px/1.65 Manrope,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.serif{font-family:Prata,Georgia,serif;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:0;cursor:pointer;
  font-weight:800;font-size:15px;letter-spacing:.02em;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--ivory)}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:var(--blue)}
.btn-ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1.5px rgba(248,246,241,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ivory)}
.btn[disabled]{opacity:.6;cursor:wait}

/* top bar */
.top{position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.mark{font-family:Prata,Georgia,serif;font-size:19px;text-decoration:none;letter-spacing:.01em}
.mark sup{font-family:Manrope,sans-serif;font-size:9px;margin-left:2px}
.onair{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--mist)}
.onair i{width:9px;height:9px;background:var(--mist)}
.onair.live{color:var(--ivory)}
.onair.live i{background:#E5484D;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}

/* hero */
.hero{padding:28px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.kicker{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:18px}
.title{font-weight:800;font-size:clamp(56px,9.2vw,124px);line-height:.86;letter-spacing:-.045em;margin-bottom:28px}
.title span{display:block}
.title .m{color:var(--gold)}
.title .t{font-family:Prata,Georgia,serif;font-weight:400;letter-spacing:-.02em;font-size:.92em}
.sub{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:#C8D2DE;max-width:36em;margin-bottom:34px}

/* the slate: next session and countdown */
.slate{background:var(--ink2);padding:22px 24px 24px;max-width:560px}
.slate-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.slate-day{font-size:20px;font-weight:800}
.slate-ep{font-size:13px;font-weight:700;color:var(--gold)}
.zones{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--mist);margin-bottom:18px}
.zones b{color:var(--ivory);font-weight:700}
.zones .you b{color:var(--gold)}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.count div{background:var(--ink3);padding:12px 6px 10px;text-align:center}
.count b{display:block;font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.count small{display:block;margin-top:6px;font-size:11px;font-weight:700;color:var(--mist);text-transform:uppercase;letter-spacing:.08em}
.count.on{grid-template-columns:1fr}
.count.on div{background:#E5484D;color:#fff;font-weight:800;font-size:18px;padding:16px}

/* form card */
.card{background:var(--ivory);color:var(--ink);padding:clamp(24px,3vw,34px);scroll-margin-top:20px}
.card h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.card .lead{font-size:15px;color:var(--dim);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.field .opt{font-weight:500;color:var(--dim)}
.in{width:100%;min-height:52px;padding:12px 14px;background:#fff;border:1.5px solid rgba(6,12,21,.18);border-radius:0;font-size:16px;color:var(--ink);transition:border-color .2s}
.in:focus{outline:none;border-color:var(--blue)}
textarea.in{min-height:84px;resize:vertical}
select.in{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23060C15' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.phone{display:grid;grid-template-columns:auto 1fr;gap:0}
.field label.dial,.dial{position:relative;display:flex;margin:0;align-items:center;gap:6px;min-height:52px;padding:0 30px 0 14px;background:var(--ivory2);border:1.5px solid rgba(6,12,21,.18);border-right:0;font-weight:700;font-size:15px;white-space:nowrap}
.dial::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg)}
.dial select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.dial:focus-within{border-color:var(--blue)}
.field.bad .in,.field.bad .dial{border-color:#B42318}
.err{display:none;font-size:13px;font-weight:600;color:#B42318;margin-top:6px}
.field.bad .err{display:block}
.hp{position:absolute;left:-9999px}
.card .btn{width:100%;margin-top:6px}
.fine{font-size:13px;color:var(--dim);margin-top:14px;line-height:1.55}
.formmsg{display:none;margin-top:14px;padding:12px 14px;font-size:14px;font-weight:600;background:#FDECEC;color:#8A1C14}
.formmsg.show{display:block}

/* sections */
section{padding:clamp(72px,9vw,120px) 0}
.light{background:var(--ivory);color:var(--ink)}
.light2{background:var(--ivory2);color:var(--ink)}
.dark2{background:var(--ink2)}
.h2{font-weight:800;font-size:clamp(34px,4.8vw,60px);line-height:1;letter-spacing:-.035em;margin-bottom:22px;max-width:16em}
.h2 .serif{letter-spacing:-.01em}
.p{font-size:18px;line-height:1.7;max-width:38em}
.light .p,.light2 .p{color:#2A333F}

/* a year of Mondays */
.year-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.year-head .p{max-width:30em}
.grid52{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.wk{position:relative;aspect-ratio:1;background:var(--ivory2);display:flex;flex-direction:column;justify-content:space-between;padding:7px;font-size:11px;font-weight:700;color:var(--dim);transition:background .3s var(--ease),color .3s var(--ease)}
.wk b{font-size:clamp(13px,1.5vw,20px);font-weight:800;color:var(--ink);line-height:1}
.wk.past{background:var(--ink3);color:var(--mist)}
.wk.past b{color:var(--mist)}
.wk.next{background:var(--gold);color:var(--ink)}
.wk:hover{background:var(--ink);color:var(--ivory)}
.wk:hover b{color:var(--ivory)}
.year-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--dim)}
.year-foot b{color:var(--ink)}
.wk-tip{min-height:24px;font-weight:700;color:var(--ink)}

/* registered versus not */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:44px}
.vs{padding:30px}
.vs h3{font-size:20px;font-weight:800;margin-bottom:16px}
.vs ul{list-style:none}
.vs li{padding:10px 0 10px 30px;position:relative;font-size:16px;line-height:1.55}
.vs li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px}
.vs-a{background:var(--ink3)}
.vs-a li{color:var(--mist)}
.vs-a li::before{border:2px solid var(--mist)}
.vs-b{background:var(--gold);color:var(--ink)}
.vs-b li::before{background:var(--ink)}

/* who it is for */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 12px}
.chip{border:0;cursor:pointer;background:#fff;padding:13px 18px;font-weight:700;font-size:15px;color:var(--ink);transition:background .25s var(--ease),color .25s var(--ease)}
.chip:hover,.chip.on{background:var(--ink);color:var(--ivory)}
.chip-note{font-size:14px;color:var(--dim)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:44px}
.pil{background:var(--ink3);padding:30px 26px 34px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:background .35s var(--ease)}
.pil:hover{background:var(--blue)}
.pil h3{font-family:Prata,Georgia,serif;font-weight:400;font-size:clamp(23px,2.2vw,28px);line-height:1.15}
.pil p{font-size:15.5px;color:#C8D2DE;margin-top:18px}
.pil:hover p{color:var(--ivory)}

/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:center}
.about-quote{font-family:Prata,Georgia,serif;font-size:clamp(28px,3.6vw,46px);line-height:1.18;letter-spacing:-.01em}
.about-quote span{color:var(--goldlow)}
.about .p+.p{margin-top:16px}
.about-pic{display:none}
.about-pic.has{display:block;aspect-ratio:4/5;object-fit:cover;width:100%}

/* faq */
.faq{max-width:780px;margin-top:36px}
.faq details{background:var(--ink2);margin-bottom:6px}
.faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px 24px;font-weight:800;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 24px 24px;color:#C8D2DE;max-width:40em}

/* closing band */
.close{background:var(--gold);color:var(--ink);text-align:left}
.close .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.close .h2{margin:0}

footer{padding:36px 0 110px;font-size:14px;color:var(--mist)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--mist)}

/* sticky mobile button */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink);transform:translateY(110%);transition:transform .45s var(--ease);display:none}
.stick.up{transform:none}
.stick .btn{width:100%}

/* consent bar */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink2);color:var(--ivory);padding:16px var(--gut);display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;transform:translateY(110%);transition:transform .5s var(--ease)}
.consent.up{transform:none}
.consent p{font-size:14px;color:#C8D2DE;max-width:62ch}
.consent a{color:var(--gold)}
.consent-btns{display:flex;gap:8px}
.consent .btn{min-height:44px;padding:0 20px;font-size:14px}

/* reveal on scroll, only when JS is running */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}.onair.live i{animation:none}}

/* thank-you page */
.ty-hero{padding:24px 0 72px}
.ty-hero .kicker{margin-bottom:14px}
.ty-title{font-weight:800;font-size:clamp(40px,6.6vw,88px);line-height:.95;letter-spacing:-.04em;max-width:13em;margin-bottom:24px}
.ty-title span{color:var(--gold)}
.steps{display:grid;gap:6px;margin-top:8px}
.step{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:#fff;padding:24px 26px}
.step h3{font-size:19px;font-weight:800;margin-bottom:4px}
.step p{font-size:15px;color:var(--dim)}
.step.first{background:var(--ink);color:var(--ivory)}
.step.first p{color:var(--mist)}
.step .btn{min-height:48px;padding:0 22px;font-size:14px;white-space:nowrap}
.link-row{display:flex;gap:0;margin-top:12px;max-width:520px}
.link-row input{flex:1;min-width:0;min-height:46px;padding:0 12px;border:1.5px solid rgba(6,12,21,.18);border-right:0;background:var(--ivory);font-size:14px;color:var(--ink)}
.link-row .btn{min-height:46px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .grid52{grid-template-columns:repeat(7,1fr)}
  .wk{font-size:10px;padding:5px}
  .pillars{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .stick{display:block}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{padding-top:12px}
  .pillars{grid-template-columns:1fr}
  .pil{min-height:0}
  .slate{padding:18px}
  .vs{padding:24px}
  .step{grid-template-columns:1fr}
  .step .btn{width:100%}
  .close .btn{width:100%}
}

/* fixes after the first browser check */
[hidden]{display:none !important}
.link-row .btn{width:auto !important;flex:none}
@media (max-width:560px){
  .top .wrap{height:60px}
  .mark{font-size:17px}
  .onair span{display:none}
  .onair::after{content:"Mondays on YouTube";font-size:12px}
  .onair.live::after{content:"Live now"}
}

/* v1.2: the Monday Money Tonic logo, kept centred */
.hero-main{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-main .sub{margin-left:auto;margin-right:auto}
.hero-main .slate{width:100%;text-align:left}
.logo{margin:4px 0 30px;line-height:0}
.mmt-logo{display:block;width:clamp(260px,40vw,540px);height:auto}
.ty-logo{margin:0 0 26px;line-height:0}
.ty-logo .mmt-logo{width:clamp(200px,26vw,320px)}