/* Quadro skin for the extra Demo 2 pages (built from the Demo 1 page bodies, which keep their
   tested scripts and CRM forms). Turns them into the Quadro look: Figtree, 900 uppercase display
   type with tight tracking, square cards, cream pill labels, uppercase pill buttons, white header. */
body.q2{--serif:Figtree,"Figtree Placeholder",sans-serif;--sans:Figtree,"Figtree Placeholder",sans-serif;
  --ivory:#fff;--cream:#f7f2e9;--sand:#efe6d6;--muted:rgba(16,29,63,.68);
  --r-xl:0px;--r-lg:0px;--r-md:0px;--r-sm:0px;--shadow:none;font-weight:500;background:#fff}
body.q2 h1,body.q2 h2,body.q2 h3,body.q2 h4{font-family:Figtree,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-variation-settings:normal}
body.q2 h1{font-size:clamp(46px,7vw,104px);letter-spacing:-.04em;line-height:.92}
body.q2 h2{font-size:clamp(36px,4.6vw,58px)}
body.q2 h3{font-size:clamp(20px,2vw,26px);line-height:1.08}
body.q2 h4{font-size:18px}
body.q2 em.g,body.q2 .g{font-style:normal;color:var(--gold)}
body.q2 .eyebrow{background:var(--cream);color:var(--navy);font:800 12px/1 Figtree,sans-serif;letter-spacing:.04em;padding:12px 18px;border-radius:200px;gap:0}
body.q2 .eyebrow::before{display:none}
body.q2 .eyebrow.light,body.q2 .dark .eyebrow,body.q2 .page-hero .eyebrow{background:rgba(255,255,255,.12);color:#fff}
body.q2 .btn{border-radius:200px!important;font:800 14px/1 Figtree,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:16px 28px 15px}
body.q2 .btn.sm{padding:12px 20px 11px;font-size:12px}
body.q2 .card,body.q2 .form,body.q2 .tier,body.q2 .product,body.q2 .post,body.q2 .member .ph,body.q2 .book-wiz,body.q2 .quiz,body.q2 .player,body.q2 .faq details,body.q2 .event{border-radius:0!important}
body.q2 .card{box-shadow:none;border:1px solid rgba(196,154,77,.35)}
body.q2 .statement{font-family:Figtree,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02}
body.q2 .lead{font-family:Figtree,sans-serif}
body.q2 .kicker-num,body.q2 .stat b,body.q2 .price b{font-family:Figtree,sans-serif;font-weight:900}
body.q2 .chip{border-radius:200px}

/* header: white Quadro bar with the official logo */
body.q2 .topbar{display:none}
body.q2 .header{background:#fff;color:var(--navy);box-shadow:0 1px 0 rgba(16,29,63,.08);top:0}
body.q2 .header .logo img{height:24px;width:auto}
body.q2 .header .nav>li>a,body.q2 .header .nav>li>button{font:800 12px/1 Figtree,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
body.q2 .header .login{display:none}
body.q2 .header .btn{background:var(--gold);color:#fff}
body.q2 .burger span,body.q2 .burger span::before,body.q2 .burger span::after{background:var(--navy)}

/* page hero: Quadro gradient band */
body.q2 .page-hero{background:radial-gradient(120% 90% at 85% 10%,rgba(196,154,77,.28),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(174,35,21,.2),transparent 60%),linear-gradient(160deg,#101d3f 0%,#1b2b58 55%,#2a2f4f 100%)}
body.q2 .page-hero h1{color:#fff}

/* dark sections in the same gradient */
body.q2 .sec.dark{background:linear-gradient(160deg,#101d3f 0%,#1b2b58 60%,#26304f 100%)}
body.q2 .card-sec{border-radius:0!important;margin-left:0!important;margin-right:0!important}

/* footer: big Quadro word */
body.q2 .footer{position:relative;overflow:hidden}
body.q2 .footer::after{content:"STÉPH & SHAY —";position:absolute;left:50%;bottom:-.16em;transform:translateX(-50%);font:900 clamp(90px,15vw,240px)/.8 Figtree,sans-serif;letter-spacing:-.05em;color:rgba(255,255,255,.04);white-space:nowrap;pointer-events:none}

/* phones: the official logo is wide (12.7:1) — keep header logo + menu button inside 360px screens */
@media (max-width:900px){body.q2 .header .logo img{height:auto;width:min(200px,52vw)}}

/* grids may shrink below their content on phones (the bolder Figtree headings widened the castle grid) */
body.q2 .castle>*,body.q2 .split>*,body.q2 .grid>*{min-width:0}

/* phones: long button labels wrap inside the screen instead of widening the page */
@media (max-width:600px){body.q2 .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.25;justify-content:center}}

/* events: date tile + text on one row, the chip/button below on phones */
@media (max-width:600px){body.q2 .event{grid-template-columns:76px minmax(0,1fr);gap:16px;padding:18px}body.q2 .event>.chip,body.q2 .event>.btn{grid-column:1/-1;justify-self:start}body.q2 .event h3{font-size:18px}body.q2 .event .dt b{font-size:24px}}