/* ==========================================================================
   CardAstrology — page utilities and small components
   --------------------------------------------------------------------------
   Generated by lifting static inline style="…" attributes out of the page
   templates, so a stylesheet edit is no longer outranked by the markup.

   Each selector is written twice (.foo.foo). An inline style outranks every
   stylesheet rule; a single class does not, so without the repeat these rules
   would lose to any existing descendant selector such as `.legal-page p`, and
   the page would shift. Doubling buys that priority back without !important.

   E-mail bodies keep their inline styles on purpose — mail clients strip
   <style> blocks, so lifting those would break the mail.
   ========================================================================== */

/* ---------------------------------------------------- small components */

/* an accent icon before a label */
.accent-icon.accent-icon { color:var(--secondary); margin-right:.5rem; }

/* body copy at 1.55rem */
.body-155.body-155 { font-size:1.55rem; line-height:1.85; }

/* body copy at 1.6rem */
.body-16.body-16 { font-size:1.6rem; color:#555; }

/* body copy at 1.6rem with open leading */
.body-16-loose.body-16-loose { font-size:1.6rem; color:#555; line-height:1.9; }

/* emphasised body copy */
.body-16-strong.body-16-strong { font-size:1.6rem; font-weight:600; }

/* brand-navy text at 1.5rem */
.brand-15.brand-15 { color:#29457D; font-size:1.5rem; }

/* a large brand-navy icon */
.brand-icon-lg.brand-icon-lg { font-size:2.6rem; color:#29457D; }

/* a button that should look like body text */
.btn-bare.btn-bare { background:none; padding:0; font-size:1.5rem; }

/* the row of buttons under a block of copy */
.btn-row.btn-row { display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:2.5rem; }

/* a checkbox and its label on one line */
.check-row.check-row { display:flex; align-items:center; gap:.7rem; font-size:1.5rem; cursor:pointer; font-weight:500; }

/* the label column of a key/value detail row */
.detail-key.detail-key { color:#888; width:10rem; flex-shrink:0; font-weight:700; }

/* one key/value row */
.detail-row.detail-row { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }

/* the value column of a key/value detail row */
.detail-val.detail-val { flex:1; margin-left:1rem; }

/* small muted note under a form field */
.field-hint.field-hint { font-size:1.3rem; color:var(--text-muted); margin-bottom:.3rem; }

/* the small caps label above a value */
.field-label.field-label { font-size:1.2rem; color:#888; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:.4rem; }

/* a full-width rounded photo with the card shadow */
.media-figure.media-figure { width:100%; border-radius:1.2rem; box-shadow:0 .6rem 2.4rem var(--card-shadow); }

/* a section heading pulled left */
.heading-left.heading-left { text-align:left; margin-bottom:2.5rem; }

/* a form control at 1.6rem */
.input-16.input-16 { font-size:1.6rem; border-radius:.8rem; }

/* an icon sitting before body text */
.lead-icon.lead-icon { color:var(--primary); margin-right:.8rem; }

/* a tighter icon before body text */
.lead-icon-sm.lead-icon-sm { color:var(--primary); margin-right:.5rem; }

/* the larger intro paragraph under a section heading */
.lead-text.lead-text { font-size:1.8rem; line-height:1.9; color:var(--text); }

/* the same intro paragraph, one step down */
.lead-text-sm.lead-text-sm { font-size:1.75rem; line-height:1.9; color:var(--text); }

/* a link that takes the colour of its surroundings */
.link-plain.link-plain { color:inherit; text-decoration:none; }

/* a list that keeps its bullets but drops the outer margin */
.list-flush.list-flush { margin:0; padding-left:2rem; }

/* the small cyan icon in a card meta line */
.meta-icon.meta-icon { color:#046C96; margin-right:4px; }

/* the smallest muted meta text */
.meta-sm.meta-sm { font-size:1.2rem; color:#888; }

/* a plain white content panel */
.panel-card.panel-card { background:#fff; border-radius:1.2rem; padding:3rem; box-shadow:0 2px 16px rgba(0,0,0,.06); margin-bottom:2.5rem; }

/* a shorter section band than the default 8rem */
.section-pad-sm.section-pad-sm { padding:4rem 0 3rem; }

/* the big number in a stat tile */
.stat-figure.stat-figure { font-size:3rem; font-weight:bold; color:#000; }

/* centred block with space below */
.u-center-mb.u-center-mb { text-align:center; margin-bottom:2.5rem; }

/* centred block with space above */
.u-center-mt.u-center-mt { margin-top:2.5rem; text-align:center; }

/* centre a row of inline items */
.u-row-center.u-row-center { justify-content:center; display:flex; }

/* centred row with a little space above */
.u-row-center-mt.u-row-center-mt { justify-content:center; display:flex; margin-top:1rem; }

/* a row with a single gap step */
.u-row-gap.u-row-gap { display:flex; gap:1rem; }


/* The two alternating page bands.

   brand.css also matches .section-band and paints a soft gradient there, but
   these sections have always carried a flat background inline, which outranked
   it — so the gradient has never actually been visible. Keeping the flat colour
   here (this sheet loads last) preserves exactly what the page looked like;
   brand.css still supplies the band's top and bottom rules. */
.section-band.section-band { background: var(--light-bg); }
.section-band-tint.section-band-tint { background: var(--primary-bg); }


/* ------------------------------------------------------------ utilities */

.about-div1.about-div1 { font-size:1.6rem; color:#777; padding:3rem 0; }
.ask-astrologer-a2.ask-astrologer-a2 { width:auto; display:inline-block; margin-top:1rem; padding:1.3rem 3rem; }
.ask-astrologer-checkout-div5.ask-astrologer-checkout-div5 { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:.4rem; }
.ask-astrologer-checkout-input6.ask-astrologer-checkout-input6 { width:1.8rem; height:1.8rem; accent-color:var(--aa-maroon); cursor:pointer; }
.ask-astrologer-checkout-select3.ask-astrologer-checkout-select3 { width:110px; flex-shrink:0; }
.ask-astrologer-checkout-small4.ask-astrologer-checkout-small4 { font-size:1.2rem; color:var(--aa-muted); }
.ask-astrologer-checkout-span1.ask-astrologer-checkout-span1 { font-size:1.6rem; opacity:.85; }
.ask-astrologer-checkout-strong2.ask-astrologer-checkout-strong2 { font-size:1.3rem; color:var(--aa-dark); font-weight:700; display:block; margin-bottom:1rem; }
.ask-astrologer-div3.ask-astrologer-div3 { max-width:780px; margin:0 auto; }
.ask-astrologer-p1.ask-astrologer-p1 { font-size:1.5rem; color:var(--aa-muted); margin-bottom:3rem; line-height:1.7; }
.ask-astrologer-thankyou-a1.ask-astrologer-thankyou-a1 { background:transparent; color:var(--aa-maroon); border:2px solid var(--aa-maroon); margin-left:.5rem; }
.astro-cards-div1.astro-cards-div1 { margin-top:2.5rem; display:flex; gap:1.4rem; flex-wrap:wrap; }
.astro-cards-div2.astro-cards-div2 { height:100%; }
.astro-cards-div5.astro-cards-div5 { margin-top:0; height:100%; }
.astro-cards-div7.astro-cards-div7 { text-align:center; background:linear-gradient(150deg,var(--primary) 0%,var(--primary-darker) 100%); border:none; }
.astro-cards-h33.astro-cards-h33 { font-size:2.2rem; font-weight:700; color:var(--primary-dark); margin-bottom:2rem; }
.astro-cards-h38.astro-cards-h38 { font-size:2.6rem; font-weight:800; color:#fff; margin-bottom:1.2rem; }
.astro-cards-li6.astro-cards-li6 { font-size:1.55rem; color:var(--text); line-height:1.85; margin-bottom:.6rem; }
.astro-cards-p4.astro-cards-p4 { font-size:1.6rem; color:var(--text-muted); margin-top:1.8rem; margin-bottom:0; }
.astro-cards-p9.astro-cards-p9 { font-size:1.7rem; color:rgba(255,255,255,.85); margin-bottom:2.5rem; }
.blog-detail-a2.blog-detail-a2 { font-size:1.4rem; width:100%; justify-content:center; }
.blog-detail-h11.blog-detail-h11 { font-size:3.4rem; line-height:1.3; }
.blogs-div1.blogs-div1 { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:4rem; }
.blogs-div10.blogs-div10 { position:absolute; top:1.6rem; left:1.6rem; }
.blogs-div12.blogs-div12 { padding:4rem; display:flex; flex-direction:column; justify-content:center; }
.blogs-div13.blogs-div13 { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.8rem; }
/* Category filter — a dropdown on the right of the count bar. It replaced a
   row of pills that wrapped onto two lines once the blog grew past a handful
   of categories. */
.blogs-filter {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.blogs-filter-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
}
.blogs-filter-select {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 5rem;
    padding: .7rem 3.4rem .7rem 1.8rem;
    cursor: pointer;
    min-width: 20rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2329457D' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4rem center;
    background-size: 1.2rem;
    transition: border-color .25s, box-shadow .25s;
}
.blogs-filter-select:hover  { border-color: var(--primary); }
.blogs-filter-select:focus  { outline: none; border-color: var(--primary); box-shadow: 0 0 0 .3rem var(--primary-light); }
.blogs-filter-go {
    font-size: 1.4rem; font-weight: 600; color: #fff;
    background: var(--primary); border: 0; border-radius: 5rem; padding: .8rem 2rem; cursor: pointer;
}
@media (max-width: 575px) {
    .blogs-filter { width: 100%; margin-left: 0; }
    .blogs-filter-select { flex: 1 1 auto; min-width: 0; }
}
.blogs-div20.blogs-div20 { display:flex; justify-content:center; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:5rem; padding-top:4rem; border-top:1px solid var(--border); }
.blogs-div22.blogs-div22 { text-align:center; padding:8rem 2rem; background:var(--light-bg); border-radius:1.6rem; border:2px dashed var(--border); }
.blogs-div23.blogs-div23 { width:8rem; height:8rem; background:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 2.5rem; box-shadow:0 4px 16px var(--card-shadow); }
.blogs-div5.blogs-div5 { margin-bottom:5rem; border-radius:1.8rem; overflow:hidden; background:var(--white); box-shadow:0 8px 32px var(--card-shadow); border:1px solid var(--border); transition:box-shadow .4s; }
.blogs-div6.blogs-div6 { margin:0; }
.blogs-div7.blogs-div7 { position:relative; height:100%; min-height:340px; overflow:hidden; }
.page-pill.page-pill { padding:1rem 2.2rem; font-size:1.4rem; font-weight:600; border-radius:5rem; background:var(--white); color:var(--text); border:2px solid var(--border); text-decoration:none; transition:all .25s; display:inline-flex; align-items:center; gap:.6rem; }
.blogs-el8.blogs-el8 { display:block; height:100%; }
.blogs-el9.blogs-el9 { width:100%; height:100%; min-height:340px; object-fit:cover; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.blogs-h218.blogs-h218 { font-size:2.8rem; font-weight:800; color:var(--dark); line-height:1.3; margin-bottom:1.5rem; }
.blogs-h325.blogs-h325 { font-size:2.4rem; font-weight:700; color:var(--dark); margin-bottom:1rem; }
.blogs-i15.blogs-i15 { margin-right:.4rem; font-size:1.1rem; }
.blogs-i17.blogs-i17 { color:var(--secondary); margin-right:.4rem; }
.blogs-i24.blogs-i24 { font-size:3.2rem; color:var(--primary); }
.blogs-p19.blogs-p19 { font-size:1.6rem; color:var(--text-muted); line-height:1.8; margin-bottom:2.5rem; }
.blogs-p26.blogs-p26 { font-size:1.6rem; color:var(--text-muted); margin-bottom:3rem; }
.blogs-p4.blogs-p4 { font-size:1.4rem; color:var(--text-muted); margin:0; white-space:nowrap; }
.blogs-span11.blogs-span11 { background:var(--primary); color:#fff; font-size:1.2rem; font-weight:700; padding:.5rem 1.4rem; border-radius:5rem; text-transform:uppercase; letter-spacing:.6px; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.blogs-span14.blogs-span14 { background:var(--primary-light); color:var(--primary); font-size:1.3rem; font-weight:700; padding:.4rem 1.2rem; border-radius:5rem; }
.blogs-span16.blogs-span16 { font-size:1.3rem; color:var(--text-muted); }
.blogs-span3.blogs-span3 { font-size:1.2rem; opacity:.75; }
.card-reading-payment-div1.card-reading-payment-div1 { font-size:1.6rem; margin-top:2.5rem; }
.card-reading-payment-div2.card-reading-payment-div2 { margin-top:3rem; text-align:center; }
.card-reading-payment-p3.card-reading-payment-p3 { font-size:1.55rem; color:var(--text-muted); }
.card-reading-payment-p4.card-reading-payment-p4 { font-size:1.55rem; color:var(--text-muted); text-align:center; }
.card-reading-thankyou-div1.card-reading-thankyou-div1 { font-size:1.55rem; margin-top:2rem; text-align:left; }
.change-password-div1.change-password-div1 { height:.4rem; border-radius:.3rem; background:#eee; margin-top:.6rem; overflow:hidden; }
.change-password-div2.change-password-div2 { height:100%; width:0; transition:width .3s,background .3s; border-radius:.3rem; }
.change-password-div3.change-password-div3 { background:#f3f6f4; border-radius:.9rem; padding:1.4rem 1.8rem; margin-bottom:2rem; font-size:1.35rem; color:#555; }
.change-password-strong4.change-password-strong4 { display:block; margin-bottom:.6rem; color:#222; }
.change-password-ul5.change-password-ul5 { margin:0; padding-left:2rem; line-height:2.2; }
.checkout-a18.checkout-a18 { color:var(--primary); font-weight:600; }
.checkout-div1.checkout-div1 { width:8rem; height:6rem; background:var(--primary-bg); border-radius:.8rem; display:flex; align-items:center; justify-content:center; }
.checkout-div10.checkout-div10 { font-size:1.4rem; font-weight:700; color:var(--primary); margin-bottom:.3rem; }
.checkout-div11.checkout-div11 { font-size:1.25rem; color:#555; line-height:1.6; }
.checkout-div12.checkout-div12 { font-size:1.8rem; font-weight:700; color:#15704A; margin-bottom:.5rem; }
.checkout-div13.checkout-div13 { font-size:1.3rem; color:#666; margin-bottom:1.8rem; }
.checkout-div14.checkout-div14 { color:var(--primary); width:2.6rem; height:2.6rem; }
.checkout-div15.checkout-div15 { background:#FBEDEC; border:1px solid #F0D2D1; color:#A32C2A; padding:1.2rem 1.5rem; border-radius:.8rem; font-size:1.4rem; margin-bottom:2rem; }
.checkout-div17.checkout-div17 { background:#fdf3e2; border:1px solid #e0b34d; border-radius:1rem; padding:1.5rem; font-size:1.4rem; color:#856404; margin-bottom:2rem; }
.checkout-div19.checkout-div19 { background:var(--primary-bg); border-radius:1rem; padding:1.5rem; margin-bottom:2rem; font-size:1.4rem; color:#333; }
.checkout-div20.checkout-div20 { margin-top:2rem; text-align:center; font-size:1.3rem; color:var(--text-muted); }
.checkout-div4.checkout-div4 { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0 0; border-top:2px solid #f0f0f0; margin-top:1rem; }
.checkout-div6.checkout-div6 { border:1.5px dashed var(--primary); background:var(--primary-bg,#f0fff4); }
.checkout-div7.checkout-div7 { display:flex; align-items:center; gap:1.2rem; }
.checkout-div8.checkout-div8 { width:4rem; height:4rem; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.checkout-i2.checkout-i2 { font-size:2.5rem; color:var(--primary); }
.checkout-i9.checkout-i9 { color:#fff; font-size:1.5rem; }
.checkout-p16.checkout-p16 { font-size:1.5rem; color:#555; margin-bottom:2rem; }
.checkout-span3.checkout-span3 { background:var(--primary-light); color:var(--primary); font-size:1.2rem; font-weight:600; padding:.2rem 1rem; border-radius:2rem; }
.checkout-span5.checkout-span5 { font-size:1.6rem; font-weight:600; color:#333; }
.contact-div2.contact-div2 { margin-top:5rem; line-height:0; }
.contact-span1.contact-span1 { font-size:1.4rem; color:var(--text-muted); }
.course-detail-div10.course-detail-div10 { background:var(--primary-bg); border:2px solid var(--primary); border-radius:1rem; padding:1.5rem; text-align:center; font-size:1.5rem; color:var(--primary); font-weight:700; margin-bottom:1.5rem; }
.course-detail-div13.course-detail-div13 { margin-top:2rem; text-align:center; font-size:1.3rem; color:var(--text-muted); }
.course-detail-div2.course-detail-div2 { margin-bottom:3rem; border-radius:1.2rem; overflow:hidden; }
.course-detail-div5.course-detail-div5 { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; font-size:1.6rem; line-height:1.7; color:#555; overflow-wrap:break-word; min-width:0; }
.course-detail-div9.course-detail-div9 { margin:2rem 0 1rem; border-top:1px solid #eee; padding-top:1.5rem; }
.course-detail-el3.course-detail-el3 { width:100%; max-height:40rem; object-fit:cover; }
.course-detail-h34.course-detail-h34 { font-size:2.4rem; font-weight:700; color:#000; margin-bottom:2rem; }
.course-detail-h37.course-detail-h37 { font-size:2.4rem; font-weight:700; color:#000; margin-bottom:1.5rem; }
.course-detail-h412.course-detail-h412 { font-size:1.6rem; font-weight:700; color:#000; margin-bottom:1rem; }
.course-detail-i6.course-detail-i6 { color:var(--primary); margin-top:.35em; flex-shrink:0; }
.course-detail-span1.course-detail-span1 { background:#fff3e0; color:#e65100; font-family:monospace; letter-spacing:.5px; }
.course-detail-ul11.course-detail-ul11 { list-style:none; padding:0; }
.course-detail-ul8.course-detail-ul8 { font-size:1.6rem; color:#555; padding-left:2rem; line-height:1.7; margin-bottom:0; }
.dashboard-a2.dashboard-a2 { font-size:1.4rem; padding:1rem 2.4rem; }
.dashboard-a3.dashboard-a3 { font-size:1.4rem; padding:1rem 2.4rem; background:#046C96; }
.dashboard-a4.dashboard-a4 { font-size:1.4rem; color:var(--primary); font-weight:600; }
.dashboard-code5.dashboard-code5 { font-size:1.2rem; background:#f3f6f4; padding:.2rem .7rem; border-radius:.4rem; }
.dashboard-div1.dashboard-div1 { display:flex; gap:1.2rem; flex-wrap:wrap; }
.dashboard-td6.dashboard-td6 { white-space:nowrap; font-weight:700; }
.dashboard-td7.dashboard-td7 { white-space:nowrap; font-size:1.3rem; color:#888; }
.events-div1.events-div1 { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 3px 15px rgba(0,0,0,.08); display:flex; flex-direction:column; height:100%; }
.events-div3.events-div3 { padding:24px; flex:1; display:flex; flex-direction:column; }
.events-div5.events-div5 { color:#888; font-size:13px; margin-bottom:12px; }
.events-div7.events-div7 { background:#f9f9f9; border-radius:8px; padding:20px; border-left:4px solid #ccc; }
.events-el2.events-el2 { width:100%; height:220px; object-fit:cover; }
.events-h44.events-h44 { font-size:2rem; font-weight:700; color:#000; margin:0 0 10px; }
.events-h58.events-h58 { color:#666; margin:0 0 6px; }
.events-i6.events-i6 { font-size:48px; color:#ddd; display:block; margin-bottom:16px; }
.events-small9.events-small9 { color:var(--text-muted); margin-left:10px; }
.footer-p1.footer-p1 { font-size:1.5rem; color:rgba(255,255,255,.75); margin:1.5rem 0; }
.forgot-password-a7.forgot-password-a7 { color:#29457D; font-weight:600; }
.forgot-password-button9.forgot-password-button9 { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#999; font-size:1.6rem; }
.forgot-password-div1.forgot-password-div1 { width:6.5rem; height:6.5rem; background:#F1F6FC; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.8rem; border:2px solid #29457D; }
.forgot-password-div6.forgot-password-div6 { text-align:center; margin-top:2rem; font-size:1.4rem; color:#666; }
.forgot-password-h22.forgot-password-h22 { font-size:2.6rem; margin-bottom:.6rem; }
.forgot-password-input4.forgot-password-input4 { text-align:center; font-size:2.6rem; font-weight:700; letter-spacing:1rem; padding:1.4rem; border-radius:1rem; }
.forgot-password-input8.forgot-password-input8 { padding-right:42px; }
.forgot-password-label3.forgot-password-label3 { font-size:1.5rem; font-weight:600; }
.forgot-password-small5.forgot-password-small5 { display:block; margin-top:.6rem; color:#999; font-size:1.3rem; }
.index-div3.index-div3 { text-align:center; margin-top:4rem; }
.index-el1.index-el1 { color:var(--secondary); margin-right:.8rem; }
.index-el2.index-el2 { width:100%; max-width:48rem; margin:0 auto; display:block; }
.learn-astrology-p1.learn-astrology-p1 { font-size:1.4rem; color:#555; }
.learn-astrology-p2.learn-astrology-p2 { font-size:1.4rem; color:#777; }
.learn-astrology-p3.learn-astrology-p3 { font-size:1.6rem; font-weight:700; color:var(--primary); margin-bottom:1rem; }
.learn-astrology-p4.learn-astrology-p4 { font-size:1.6rem; font-weight:700; color:#28a745; margin-bottom:1rem; }
.login-a3.login-a3 { color:#666; text-decoration:none; }
.login-a4.login-a4 { color:var(--primary); font-weight:600; }
.login-div2.login-div2 { display:flex; justify-content:space-between; align-items:center; margin-top:1.2rem; font-size:1.3rem; }
.login-div5.login-div5 { font-size:2rem; font-weight:700; color:#15704A; margin-bottom:.5rem; }
.login-div6.login-div6 { font-size:1.35rem; color:#666; margin-bottom:2rem; }
.login-div7.login-div7 { color:var(--primary); width:2.6rem; height:2.6rem; }
.login-input1.login-input1 { padding-right:4.2rem; }
.my-account-a12.my-account-a12 { display:inline-flex; align-items:center; gap:.8rem; font-size:1.45rem; color:var(--primary); font-weight:600; text-decoration:none; }
.my-account-a30.my-account-a30 { display:inline-flex; align-items:center; gap:.8rem; background:#25d366; color:#fff; padding:1.2rem 2.8rem; border-radius:5rem; font-size:1.5rem; font-weight:700; text-decoration:none; box-shadow:0 4px 14px rgba(37,211,102,.35); margin-bottom:1.4rem; }
.my-account-button18.my-account-button18 { font-size:1.3rem; color:var(--primary); }
.my-account-button26.my-account-button26 { margin-top:0; background:#25d366; }
.my-account-div10.my-account-div10 { margin-top:.9rem; font-size:1.2rem; color:var(--text-muted); }
.my-account-div15.my-account-div15 { background:var(--light-bg); border-radius:1rem; padding:1rem 1.5rem; text-align:center; font-size:1.6rem; font-weight:700; color:var(--dark); margin-bottom:1.8rem; word-break:break-all; }
.my-account-div2.my-account-div2 { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.my-account-div21.my-account-div21 { background:var(--light-bg); border-radius:1.2rem; padding:1.6rem 2rem; margin-bottom:1.8rem; border-left:4px solid #25d366; }
.my-account-div22.my-account-div22 { display:flex; flex-direction:column; gap:1rem; font-size:1.4rem; }
.my-account-div25.my-account-div25 { display:flex; gap:1rem; align-items:center; }
.my-account-div27.my-account-div27 { width:7rem; height:7rem; border-radius:50%; background:#E6F6EE; display:flex; align-items:center; justify-content:center; font-size:3rem; margin:0 auto 1.4rem; }
.my-account-div31.my-account-div31 { background:#fff8e1; border:1px solid #f9a825; border-radius:.9rem; padding:1rem 1.4rem; font-size:1.3rem; color:#5d3a00; margin-top:.5rem; }
.my-account-div4.my-account-div4 { display:flex; flex-direction:column; gap:1.6rem; }
.my-account-div5.my-account-div5 { font-size:1.5rem; font-weight:600; color:#222; }
.my-account-div6.my-account-div6 { font-size:1.2rem; color:#888; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:.9rem; }
.my-account-div9.my-account-div9 { margin-top:.9rem; padding:.8rem 1.2rem; background:var(--primary-light); border-radius:.9rem; font-size:1.3rem; font-weight:600; color:var(--primary); text-align:center; }
.my-account-el3.my-account-el3 { background:#F1F6FC; cursor:not-allowed; }
.my-account-h428.my-account-h428 { font-size:1.9rem; font-weight:800; color:var(--dark); margin-bottom:.8rem; }
.my-account-hr11.my-account-hr11 { margin:.5rem 0; }
.my-account-i13.my-account-i13 { color:#046C96; margin-right:.8rem; }
.my-account-i16.my-account-i16 { color:#f9a825; flex-shrink:0; }
.my-account-i19.my-account-i19 { color:#25d366; margin-right:.8rem; }
.my-account-i7.my-account-i7 { color:var(--primary); width:1.6rem; text-align:center; }
.my-account-i8.my-account-i8 { color:#25d366; width:1.6rem; text-align:center; }
.my-account-p14.my-account-p14 { text-align:center; font-size:1.45rem; color:var(--text-muted); margin-bottom:1.4rem; }
.my-account-p20.my-account-p20 { text-align:center; font-size:1.45rem; color:var(--text-muted); margin-bottom:1.6rem; }
.my-account-p29.my-account-p29 { font-size:1.4rem; color:var(--text-muted); margin-bottom:2rem; line-height:1.6; }
.my-account-span1.my-account-span1 { font-size:1.3rem; padding:.5rem 1.4rem; }
.my-account-span23.my-account-span23 { color:var(--dark); font-weight:600; }
.my-account-span24.my-account-span24 { color:var(--dark); font-weight:700; font-size:1.55rem; }
.my-account-strong17.my-account-strong17 { font-size:1.4rem; color:var(--primary); letter-spacing:.3rem; }
.my-courses-a1.my-courses-a1 { font-size:1.4rem; padding:1rem 2.2rem; }
.my-courses-a24.my-courses-a24 { display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; background:#25d366; }
.my-courses-a6.my-courses-a6 { background:#f9a825; border-color:#f9a825; color:#3e2700; font-size:1.4rem; padding:1rem 2.2rem; flex-shrink:0; }
.my-courses-button25.my-courses-button25 { font-size:1.35rem; color:var(--text-muted); }
.my-courses-div15.my-courses-div15 { background:#f5f5f5; color:#aaa; cursor:default; justify-content:center; }
.my-courses-div16.my-courses-div16 { border-radius:1.6rem; overflow:hidden; border:none; box-shadow:0 16px 48px rgba(0,0,0,.18); }
.my-courses-div17.my-courses-div17 { border-bottom:2px solid #fff3cd; padding:1.8rem 2.2rem; background:#fffbf0; }
.my-courses-div2.my-courses-div2 { display:flex; align-items:center; gap:1.5rem; }
.my-courses-div20.my-courses-div20 { padding:2.4rem; text-align:center; }
.my-courses-div21.my-courses-div21 { width:7rem; height:7rem; border-radius:50%; background:#E6F6EE; display:flex; align-items:center; justify-content:center; font-size:3rem; margin:0 auto 1.8rem; }
.my-courses-div7.my-courses-div7 { background:#e7f9ee; border:1.5px solid #25d366; border-radius:1.2rem; padding:1.8rem 2.4rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.my-courses-el11.my-courses-el11 { background:#25d366; color:#fff; padding:1rem 2.2rem; border-radius:3rem; font-size:1.4rem; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.7rem; flex-shrink:0; }
.my-courses-el14.my-courses-el14 { justify-content:center; background:var(--primary); color:#fff; border-color:var(--primary); }
.my-courses-h422.my-courses-h422 { font-size:2rem; font-weight:800; color:#1a1a1a; margin-bottom:1rem; }
.my-courses-h518.my-courses-h518 { font-size:1.8rem; font-weight:800; color:#3e2700; }
.my-courses-i13.my-courses-i13 { color:var(--primary); margin-right:.4rem; }
.my-courses-i19.my-courses-i19 { color:#f9a825; margin-right:.8rem; }
.my-courses-i3.my-courses-i3 { font-size:2.6rem; color:#f9a825; flex-shrink:0; }
.my-courses-i8.my-courses-i8 { font-size:3rem; color:#25d366; flex-shrink:0; }
.my-courses-p12.my-courses-p12 { font-size:1.3rem; color:var(--text-muted); margin-bottom:1.2rem; }
.my-courses-p23.my-courses-p23 { font-size:1.5rem; color:#666; line-height:1.6; margin-bottom:2rem; }
.my-courses-span10.my-courses-span10 { font-size:1.35rem; color:#15704A; }
.my-courses-span5.my-courses-span5 { font-size:1.35rem; color:#5d3a00; }
.my-courses-strong4.my-courses-strong4 { font-size:1.65rem; color:#3e2700; display:block; margin-bottom:.3rem; }
.my-courses-strong9.my-courses-strong9 { font-size:1.6rem; color:#15704A; display:block; }
.my-transactions-code2.my-transactions-code2 { font-size:1.2rem; background:#f3f6f4; padding:.2rem .7rem; border-radius:.4rem; white-space:nowrap; }
.my-transactions-code6.my-transactions-code6 { font-size:1.1rem; background:#f3f6f4; padding:.2rem .5rem; border-radius:.3rem; word-break:break-all; max-width:14rem; display:inline-block; }
.my-transactions-small4.my-transactions-small4 { font-size:1.1rem; color:#888; }
.my-transactions-td1.my-transactions-td1 { color:#aaa; font-size:1.3rem; }
.my-transactions-td3.my-transactions-td3 { white-space:nowrap; font-weight:700; }
.my-transactions-td5.my-transactions-td5 { white-space:nowrap; font-size:1.3rem; color:#888; }
.personal-consultation-div1.personal-consultation-div1 { margin-top:2rem; background:var(--primary-bg); border-color:var(--primary-light); }
.personal-consultation-div3.personal-consultation-div3 { font-size:1.65rem; border-radius:.8rem; }
.personal-consultation-li2.personal-consultation-li2 { font-size:1.55rem; line-height:1.9; }
.podcasts-div1.podcasts-div1 { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.09); }
.podcasts-div2.podcasts-div2 { position:relative; padding-top:56.25%; background:#000; }
.podcasts-div4.podcasts-div4 { background:linear-gradient(135deg,#1e2139,#2d3155); padding-top:56.25%; position:relative; }
.podcasts-div5.podcasts-div5 { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
.podcasts-div8.podcasts-div8 { padding:16px 20px; display:flex; align-items:center; gap:12px; }
.podcasts-el11.podcasts-el11 { margin-left:auto; flex-shrink:0; background:#e03131; color:#fff; padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:600; text-decoration:none; display:flex; align-items:center; gap:5px; }
.podcasts-el3.podcasts-el3 { position:absolute; inset:0; width:100%; height:100%; border:none; }
.podcasts-h413.podcasts-h413 { color:var(--text-muted); font-weight:400; }
.podcasts-h510.podcasts-h510 { margin:0; font-size:15px; font-weight:700; color:#1e2139; line-height:1.4; }
.podcasts-i12.podcasts-i12 { font-size:56px; color:#ddd; display:block; margin-bottom:16px; }
.podcasts-i6.podcasts-i6 { font-size:52px; color:#046C96; opacity:.6; }
.podcasts-i9.podcasts-i9 { color:#046C96; font-size:18px; flex-shrink:0; }
.podcasts-span7.podcasts-span7 { color:rgba(255,255,255,.4); font-size:13px; }
.row-reading-steps-div2.row-reading-steps-div2 { margin-top:2rem; text-align:center; }
.row-reading-steps-span1.row-reading-steps-span1 { font-weight:400; color:var(--text-muted); }
.thankyou-div1.thankyou-div1 { margin:2rem 0; padding:2rem; background:#f0fff4; border-radius:1.2rem; border:1.5px solid #25d366; }
.thankyou-div3.thankyou-div3 { background:#fdf3e2; border:1px solid #e0b34d; border-radius:1rem; padding:1.5rem; margin:2rem 0; font-size:1.5rem; color:#856404; }
.thankyou-div4.thankyou-div4 { text-align:left; margin-top:2rem; }
.thankyou-div8.thankyou-div8 { display:flex; gap:1.5rem; justify-content:center; margin-top:3rem; flex-wrap:wrap; }
.thankyou-h45.thankyou-h45 { font-size:1.8rem; font-weight:700; color:#000; margin-bottom:1.5rem; }
.thankyou-li7.thankyou-li7 { display:flex; align-items:center; gap:1rem; }
.thankyou-p2.thankyou-p2 { font-size:1.6rem; color:#15704A; margin-bottom:1.5rem; }
.thankyou-ul6.thankyou-ul6 { list-style:none; padding:0; font-size:1.5rem; color:#555; }
.u-c-1a7f37.u-c-1a7f37 { color:#1a7f37; }
.u-c-777.u-c-777 { color:#777; }
.u-c-accent.u-c-accent { color:var(--secondary-dark); }
.u-c-b8860b.u-c-b8860b { color:#b8860b; }
.u-c-body.u-c-body { color:var(--text); }
.u-c-ccc.u-c-ccc { color:#ccc; }
.u-c-f9a825.u-c-f9a825 { color:#f9a825; }
.u-c-heading.u-c-heading { color:var(--dark); }
.u-c-muted.u-c-muted { color:var(--text-muted); }
.u-c-primary.u-c-primary { color:var(--primary); }
.u-c-varaadark.u-c-varaadark { color:var(--aa-dark); }
.u-c-varaamaroon.u-c-varaamaroon { color:var(--aa-maroon); }
.u-c-whatsapp.u-c-whatsapp { color:#25d366; }
.u-d-flex.u-d-flex { display:flex; }
.u-flex-1.u-flex-1 { flex:1; }
.u-fw-600.u-fw-600 { font-weight:600; }
.u-fz-1p1.u-fz-1p1 { font-size:1.1rem; }
.u-fz-1p15.u-fz-1p15 { font-size:1.15rem; }
.u-fz-1p2.u-fz-1p2 { font-size:1.2rem; }
.u-fz-1p4.u-fz-1p4 { font-size:1.4rem; }
.u-fz-1p5.u-fz-1p5 { font-size:1.5rem; }
.u-fz-1p6.u-fz-1p6 { font-size:1.6rem; }
.u-fz-1p8.u-fz-1p8 { font-size:1.8rem; }
.u-fz-2.u-fz-2 { font-size:2rem; }
.u-hide.u-hide { display:none; }
.u-maxw-18.u-maxw-18 { max-width:18rem; }
.u-maxw-20.u-maxw-20 { max-width:20rem; }
.u-maxw-46.u-maxw-46 { max-width:46rem; }
.u-maxw-50.u-maxw-50 { max-width:50rem; }
.u-mb-0.u-mb-0 { margin-bottom:0; }
.u-mb-0p4.u-mb-0p4 { margin-bottom:.4rem; }
.u-mb-10px.u-mb-10px { margin-bottom:10px; }
.u-mb-1p5.u-mb-1p5 { margin-bottom:1.5rem; }
.u-mb-1p8.u-mb-1p8 { margin-bottom:1.8rem; }
.u-mb-2.u-mb-2 { margin-bottom:2rem; }
.u-mb-24px.u-mb-24px { margin-bottom:24px; }
.u-mb-2p2.u-mb-2p2 { margin-bottom:2.2rem; }
.u-mb-2p5.u-mb-2p5 { margin-bottom:2.5rem; }
.u-mb-3.u-mb-3 { margin-bottom:3rem; }
.u-mb-30px.u-mb-30px { margin-bottom:30px; }
.u-mb-36px.u-mb-36px { margin-bottom:36px; }
.u-mb-40px.u-mb-40px { margin-bottom:40px; }
.u-mb-5.u-mb-5 { margin-bottom:5rem; }
.u-ml-1.u-ml-1 { margin-left:1rem; }
.u-mr-0p3.u-mr-0p3 { margin-right:.3rem; }
.u-mr-0p4.u-mr-0p4 { margin-right:.4rem; }
.u-mr-0p5.u-mr-0p5 { margin-right:.5rem; }
.u-mr-0p6.u-mr-0p6 { margin-right:.6rem; }
.u-mr-12px.u-mr-12px { margin-right:12px; }
.u-mr-14px.u-mr-14px { margin-right:14px; }
.u-mt-0.u-mt-0 { margin-top:0; }
.u-mt-0p3.u-mt-0p3 { margin-top:.3rem; }
.u-mt-1.u-mt-1 { margin-top:1rem; }
.u-mt-16px.u-mt-16px { margin-top:16px; }
.u-mt-1p2.u-mt-1p2 { margin-top:1.2rem; }
.u-mt-1p4.u-mt-1p4 { margin-top:1.4rem; }
.u-mt-1p5.u-mt-1p5 { margin-top:1.5rem; }
.u-mt-1p8.u-mt-1p8 { margin-top:1.8rem; }
.u-mt-2.u-mt-2 { margin-top:2rem; }
.u-mt-2p5.u-mt-2p5 { margin-top:2.5rem; }
.u-mt-3.u-mt-3 { margin-top:3rem; }
.u-mt-5.u-mt-5 { margin-top:5rem; }
.u-mt-60px.u-mt-60px { margin-top:60px; }
.u-p-0.u-p-0 { padding:0; }
.u-p-3rem-0-2p5rem.u-p-3rem-0-2p5rem { padding:3rem 0 2.5rem; }
.u-p-5rem-0.u-p-5rem-0 { padding:5rem 0; }
.u-p-6rem-0.u-p-6rem-0 { padding:6rem 0; }
.u-pos-relative.u-pos-relative { position:relative; }
.u-pt-5.u-pt-5 { padding-top:5rem; }
.u-ta-center.u-ta-center { text-align:center; }
.u-ta-left.u-ta-left { text-align:left; }
.vedic-card-services-h31.vedic-card-services-h31 { font-size:2.4rem; font-weight:800; color:var(--primary-dark); margin-bottom:1rem; }
.vedic-card-services-p2.vedic-card-services-p2 { font-size:1.7rem; line-height:1.85; color:var(--text); margin:0; }
.verify-email-a10.verify-email-a10 { color:#29457D; font-weight:600; }
.verify-email-div1.verify-email-div1 { max-width:44rem; text-align:center; }
.verify-email-div11.verify-email-div11 { margin-top:2.5rem; background:#f9f9f9; border-radius:1rem; padding:1.8rem; text-align:left; font-size:1.4rem; color:#777; line-height:1.8; }
.verify-email-div2.verify-email-div2 { width:7rem; height:7rem; background:#F1F6FC; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 2rem; border:2px solid #29457D; }
.verify-email-div9.verify-email-div9 { margin-top:2.5rem; font-size:1.5rem; color:#666; }
.verify-email-h24.verify-email-h24 { font-size:2.6rem; margin-bottom:.8rem; }
.verify-email-i3.verify-email-i3 { font-size:3rem; color:#29457D; }
.verify-email-input7.verify-email-input7 { text-align:center; font-size:2.8rem; font-weight:700; letter-spacing:1rem; padding:1.5rem; border-radius:1rem; border:2px solid #ddd; }
.verify-email-label6.verify-email-label6 { font-size:1.5rem; font-weight:600; }
.verify-email-p5.verify-email-p5 { font-size:1.5rem; color:#666; margin-bottom:2.5rem; }
.verify-email-small8.verify-email-small8 { font-size:1.3rem; color:#999; display:block; margin-top:.6rem; }
.verify-email-ul12.verify-email-ul12 { margin:.8rem 0 0 1.5rem; padding:0; }
.webinars-div1.webinars-div1 { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 3px 15px rgba(0,0,0,.08); height:100%; display:flex; flex-direction:column; }
.webinars-div3.webinars-div3 { background:linear-gradient(135deg,#1e2139,#2d3155); height:140px; display:flex; align-items:center; justify-content:center; }
.webinars-div5.webinars-div5 { padding:22px; flex:1; display:flex; flex-direction:column; }
.webinars-div8.webinars-div8 { color:#888; font-size:13px; margin-bottom:12px; }
.webinars-el2.webinars-el2 { width:100%; height:auto; display:block; }
.webinars-h46.webinars-h46 { font-size:2rem; font-weight:700; color:#000; margin:0 0 8px; }
.webinars-i4.webinars-i4 { font-size:48px; color:#046C96; opacity:.7; }
.webinars-i9.webinars-i9 { font-size:48px; color:#ddd; display:block; margin-bottom:16px; }
.webinars-p7.webinars-p7 { color:#888; font-size:12px; margin-bottom:8px; }


/* ==========================================================================
   Page stylesheets, lifted out of each template's <style> block
   --------------------------------------------------------------------------
   The same rules in the same order, just no longer inside the markup.
   Grouped by the template each block came from.
   ========================================================================== */

/* ---------------------------------------------------------------------
   terms.php / privacy-policy.php / refund-policy.php / disclaimer.php
   All four carried this block verbatim; it lives here once.
   --------------------------------------------------------------------- */
.legal-page { padding: 4rem 0 6rem; }
    /* The banner above already carries the page's h1; this title inside the
       card is an h2 so each legal page has exactly one h1. It keeps the
       same look. */
    .legal-page h1,
    .legal-page .legal-title { font-size: 3.2rem; font-weight: 800; color: var(--primary); margin-bottom: .5rem; }
    .legal-page .last-updated { color: var(--text-muted); font-size: 1.35rem; margin-bottom: 3rem; }
    .legal-page h2 { font-size: 2rem; font-weight: 700; color: #1a1a1a; margin: 3rem 0 1rem; border-left: 4px solid var(--primary); padding-left: 1rem; }
    .legal-page p, .legal-page li { font-size: 1.55rem; color: #555; line-height: 1.85; margin-bottom: 1rem; }
    .legal-page ul { padding-left: 2rem; margin-bottom: 1.5rem; }
    .legal-page ul li { list-style: disc; }
    .legal-card { background: #fff; border-radius: 1.6rem; box-shadow: 0 4px 24px rgba(0,107,35,.08); padding: 3.5rem 4rem; }
    @media (max-width: 576px) { .legal-card { padding: 2.5rem 2rem; } }

/* ---------------------------------------------------------------------
   ask-astrologer-checkout.php
   --------------------------------------------------------------------- */
:root {
        --aa-cream:   #F1F6FC;
        --aa-cream2:  #DDE8F6;
        --aa-maroon:  #29457D;
        --aa-gold:    #046C96;
        --aa-dark:    #2c1810;
        --aa-muted:   var(--text-muted);
    }
    body { background: var(--aa-cream); }

    /* ── Page header ─────────────────────────────────────────────────── */
    .ck-page-header {
        background: linear-gradient(135deg, var(--aa-maroon), #132139);
        padding: 3.5rem 0;
        text-align: center;
    }
    .ck-page-header h1 {
        
        font-size: 3rem;
        color: #fff;
        margin: 0;
        font-weight: 700;
    }
    .ck-page-header p {
        color: rgba(255,255,255,.75);
        font-size: 1.5rem;
        margin: .6rem 0 0;
    }

    /* ── Layout ──────────────────────────────────────────────────────── */
    .ck-wrap { padding: 5rem 0 6rem; }

    /* ── Package Summary Card ─────────────────────────────────────────── */
    .pkg-summary {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 6px 30px rgba(44,24,16,.1);
        overflow: hidden;
        position: sticky;
        top: 100px;
    }
    .pkg-summary-header {
        background: linear-gradient(135deg, var(--aa-maroon), #1E3259);
        padding: 2.5rem 2rem;
        text-align: center;
    }
    .pkg-summary-header .icon {
        width: 70px; height: 70px;
        border-radius: 50%;
        background: rgba(255,255,255,.15);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 1.2rem;
        font-size: 2.8rem; color: #fff;
        border: 2px solid rgba(255,255,255,.3);
    }
    .pkg-summary-header h3 {
        
        font-size: 2rem;
        color: #fff; margin-bottom: .3rem;
    }
    .pkg-summary-header .orig { font-size: 1.4rem; color: rgba(255,255,255,.6); text-decoration: line-through; }
    .pkg-summary-header .price { font-size: 3rem; font-weight: 800; color: var(--aa-gold); line-height: 1.1; }
    .pkg-summary-header .price small { font-size: 1.4rem; font-weight: 500; color: rgba(255,255,255,.8); }

    .pkg-summary-body { padding: 2rem; }
    .pkg-summary-body p {
        font-size: 1.4rem; color: var(--aa-muted);
        line-height: 1.7; margin-bottom: 1.5rem;
        border-bottom: 1px solid #f0e6d8; padding-bottom: 1.5rem;
    }
    .pkg-feature-list { list-style: none; padding: 0; margin: 0; }
    .pkg-feature-list li {
        font-size: 1.4rem; color: var(--aa-dark);
        padding: .6rem 0;
        display: flex; align-items: center; gap: .8rem;
        border-bottom: 1px solid #f8f0e8;
    }
    .pkg-feature-list li:last-child { border-bottom: none; }
    .pkg-feature-list li i { color: var(--aa-gold); font-size: 1.3rem; }

    .pkg-rating {
        display: flex; align-items: center; gap: .5rem;
        margin-top: 1.5rem; padding-top: 1.5rem;
        border-top: 1px solid #f0e6d8;
        font-size: 1.3rem; color: var(--aa-muted);
    }
    .pkg-rating .stars { color: var(--aa-gold); font-size: 1.4rem; }

    /* ── Order Form Card ──────────────────────────────────────────────── */
    .order-form-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 6px 30px rgba(44,24,16,.1);
        padding: 3.5rem 3rem;
    }
    .order-form-card h2 {
        
        font-size: 2.4rem;
        color: var(--aa-maroon);
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid var(--aa-cream2);
    }
    .form-section-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--aa-maroon);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin: 2.5rem 0 1.2rem;
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--aa-cream2);
    }
    .form-section-title:first-of-type { margin-top: 0; }
    .aa-input {
        width: 100%;
        border: 1.5px solid #e0cfc0;
        border-radius: 8px;
        padding: 1.2rem 1.4rem;
        font-size: 1.5rem;
        color: var(--aa-dark);
        background: #fffdf9;
        transition: border-color .2s, box-shadow .2s;
        font-family: inherit;
        outline: none;
    }
    .aa-input:focus {
        border-color: var(--aa-maroon);
        box-shadow: 0 0 0 3px rgba(107,26,0,.1);
        background: #fff;
    }
    .aa-label {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--aa-dark);
        margin-bottom: .5rem;
        display: block;
    }
    .aa-label .req { color: var(--aa-maroon); }
    .phone-wrap { display: flex; gap: .8rem; }
    .phone-wrap select { width: 100px; flex-shrink: 0; }

    /* Question textarea */
    .aa-question-box {
        border: 1.5px solid #e0cfc0;
        border-radius: 10px;
        padding: 1.4rem;
        background: #fffdf9;
        margin-bottom: 1.5rem;
    }
    .aa-question-box label {
        font-size: 1.4rem; font-weight: 700;
        color: var(--aa-dark); margin-bottom: .6rem; display: block;
    }
    .aa-question-box label span { color: var(--aa-maroon); font-weight: 400; font-size: 1.2rem; }
    .aa-question-box textarea {
        width: 100%; border: none; background: transparent;
        font-size: 1.5rem; color: var(--aa-dark);
        resize: vertical; min-height: 90px; outline: none;
        font-family: inherit; line-height: 1.6;
    }
    .aa-question-box textarea::placeholder { color: #c0a898; }

    /* Terms */
    .terms-row {
        display: flex; align-items: flex-start; gap: 1rem;
        font-size: 1.4rem; color: var(--aa-muted);
        margin: 2rem 0 2.5rem;
        background: var(--aa-cream2);
        border-radius: 8px; padding: 1.2rem 1.4rem;
    }
    .terms-row input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; margin-top: .1rem; accent-color: var(--aa-maroon); }
    .terms-row a { color: var(--aa-maroon); font-weight: 600; }

    /* Price bar */
    .price-bar {
        display: flex; align-items: center;
        justify-content: space-between; flex-wrap: wrap; gap: 1rem;
        border-top: 2px solid var(--aa-cream2);
        padding-top: 2rem;
    }
    .price-bar .label { font-size: 1.5rem; color: var(--aa-muted); }
    .price-bar .amount { font-size: 2.4rem; font-weight: 800; color: var(--aa-maroon); }
    .price-bar .amount small { font-size: 1.4rem; font-weight: 500; color: var(--aa-muted); }

    .btn-pay {
        background: var(--aa-maroon);
        color: #fff;
        font-size: 1.7rem;
        font-weight: 700;
        padding: 1.4rem 3.5rem;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: all .25s;
        display: inline-flex; align-items: center; gap: .8rem;
        white-space: nowrap;
    }
    .btn-pay:hover { background: #132139; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107,26,0,.3); }

    .secure-note {
        font-size: 1.3rem; color: var(--aa-muted);
        display: flex; align-items: center; gap: .5rem;
        margin-top: 1.2rem;
    }
    .secure-note i { color: #2d9e44; }

    .change-pkg {
        text-align: center; margin-top: 1rem;
        font-size: 1.3rem; color: var(--aa-muted);
    }
    .change-pkg a { color: var(--aa-maroon); font-weight: 600; }

    @media(max-width:768px) {
        .order-form-card { padding: 2rem 1.5rem; }
        .ck-page-header h1 { font-size: 2.2rem; }
        .price-bar { flex-direction: column; }
        .btn-pay { width: 100%; justify-content: center; }
    }

/* ---------------------------------------------------------------------
   ask-astrologer-thankyou.php
   --------------------------------------------------------------------- */
:root {
        --aa-cream:  #F1F6FC;
        --aa-maroon: #29457D;
        --aa-gold:   #046C96;
        --aa-dark:   #2c1810;
        --aa-muted:  var(--text-muted);
    }
    body { background: var(--aa-cream); }
    .ty-section {
        min-height: 70vh;
        display: flex; align-items: center; justify-content: center;
        padding: 6rem 0;
    }
    .ty-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 10px 50px rgba(107,26,0,.1);
        padding: 5rem 4rem;
        text-align: center;
        max-width: 580px;
        width: 100%;
    }
    .ty-icon {
        width: 90px; height: 90px;
        border-radius: 50%;
        background: #E6F6EE;
        border: 3px solid #4caf50;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 2.5rem;
        font-size: 3.8rem;
    }
    .ty-card h1 {
        
        font-size: 3rem; color: var(--aa-dark);
        margin-bottom: .8rem;
    }
    .ty-card p { font-size: 1.6rem; color: var(--aa-muted); line-height: 1.7; margin-bottom: 1.5rem; }
    .ty-ref {
        background: var(--aa-cream);
        border: 2px dashed var(--aa-gold);
        border-radius: 10px;
        padding: 1.5rem;
        margin: 2rem 0;
    }
    .ty-ref small { font-size: 1.3rem; color: var(--aa-muted); display: block; margin-bottom: .3rem; }
    .ty-ref strong { font-size: 2.2rem; color: var(--aa-maroon); letter-spacing: 3px; }
    .ty-steps {
        text-align: left;
        background: #f9f5f0;
        border-radius: 12px;
        padding: 2rem;
        margin: 2rem 0;
    }
    .ty-steps p { font-size: 1.4rem; color: var(--aa-dark); margin-bottom: .8rem; display: flex; gap: 1rem; align-items: flex-start; }
    .ty-steps p i { color: var(--aa-gold); margin-top: .15rem; flex-shrink: 0; }
    .btn-aa {
        display: inline-block;
        background: var(--aa-maroon);
        color: #fff;
        font-size: 1.5rem; font-weight: 700;
        padding: 1.2rem 3rem;
        border-radius: 8px;
        text-decoration: none;
        transition: all .25s;
        margin-top: 1rem;
    }
    .btn-aa:hover { background: #132139; color: #fff; }

/* ---------------------------------------------------------------------
   ask-astrologer.php
   --------------------------------------------------------------------- */
/* ── Page-level warm theme ────────────────────────────────────────── */
    :root {
        --aa-cream:   #F1F6FC;
        --aa-cream2:  #DDE8F6;
        --aa-maroon:  #29457D;
        --aa-maroon2: #8b2500;
        --aa-gold:    #046C96;
        --aa-dark:    #2c1810;
        --aa-muted:   var(--text-muted);
    }

    body { background: var(--aa-cream); }

    /* ── Hero / Package section ───────────────────────────────────────── */
    .aa-hero {
        background: var(--aa-cream);
        padding: 7rem 0 5rem;
        text-align: center;
    }
    .aa-section-sub {
        font-size: 1.4rem;
        color: var(--aa-maroon);
        letter-spacing: .12em;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: .8rem;
    }
    .aa-section-title {
        
        font-size: 4.2rem;
        color: var(--aa-dark);
        font-weight: 700;
        margin-bottom: 1rem;
        line-height: 1.2;
    }
    .aa-section-title span { color: var(--aa-maroon); }
    .aa-section-desc {
        font-size: 1.6rem;
        color: var(--aa-muted);
        max-width: 580px;
        margin: 0 auto 4rem;
        line-height: 1.7;
    }

    /* ── Package Cards ────────────────────────────────────────────────── */
    .pkg-card {
        background: #fff;
        border-radius: 20px;
        padding: 3.5rem 2.8rem;
        text-align: center;
        box-shadow: 0 8px 40px rgba(107,26,0,.09);
        border: 2px solid transparent;
        transition: all .3s ease;
        position: relative;
        height: 100%;
    }
    .pkg-card:hover {
        border-color: var(--aa-gold);
        transform: translateY(-6px);
        box-shadow: 0 16px 50px rgba(107,26,0,.15);
    }
    .pkg-card.popular {
        border-color: var(--aa-maroon);
    }
    .pkg-badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--aa-maroon);
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        padding: 4px 20px;
        border-radius: 20px;
        letter-spacing: .08em;
        white-space: nowrap;
    }
    .pkg-figure {
        width: 130px;
        height: 130px;
        background: var(--aa-cream2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 2rem;
        overflow: hidden;
        border: 3px solid var(--aa-cream2);
    }
    .pkg-figure img { width: 100%; height: 100%; object-fit: cover; }
    .pkg-figure .pkg-icon { font-size: 4.5rem; color: var(--aa-muted); }
    .pkg-name {
        
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--aa-dark);
        margin-bottom: .6rem;
    }
    .pkg-desc {
        font-size: 1.4rem;
        color: var(--aa-muted);
        margin-bottom: 2rem;
        line-height: 1.6;
        min-height: 4.5rem;
    }
    .pkg-price {
        margin-bottom: 2.4rem;
    }
    .pkg-price .original {
        font-size: 1.5rem;
        color: var(--text-muted);
        text-decoration: line-through;
        display: block;
        margin-bottom: .2rem;
    }
    .pkg-price .current {
        font-size: 3.2rem;
        font-weight: 800;
        color: var(--aa-maroon);
        line-height: 1;
    }
    .pkg-price .current small { font-size: 1.6rem; font-weight: 500; }
    .pkg-features {
        list-style: none;
        padding: 0;
        margin: 0 0 2.5rem;
        text-align: left;
    }
    .pkg-features li {
        font-size: 1.4rem;
        color: var(--aa-dark);
        padding: .5rem 0;
        display: flex;
        align-items: center;
        gap: .8rem;
        border-bottom: 1px solid #DDE8F6;
    }
    .pkg-features li:last-child { border-bottom: none; }
    .pkg-features li i { color: var(--aa-gold); font-size: 1.3rem; }
    .btn-aa {
        display: inline-block;
        background: var(--aa-dark);
        color: #fff;
        font-size: 1.5rem;
        font-weight: 700;
        padding: 1.3rem 3.5rem;
        border-radius: 8px;
        text-decoration: none;
        letter-spacing: .05em;
        transition: all .25s;
        border: none;
        cursor: pointer;
        width: 100%;
        text-align: center;
    }
    .btn-aa:hover { background: var(--aa-maroon); color: #fff; transform: translateY(-2px); }
    .btn-aa-outline {
        background: transparent;
        border: 2px solid var(--aa-dark);
        color: var(--aa-dark);
    }
    .btn-aa-outline:hover { background: var(--aa-dark); color: #fff; }

    /* ── How It Works ─────────────────────────────────────────────────── */
    .aa-works {
        background: var(--aa-cream2);
        padding: 7rem 0;
    }
    .works-step {
        text-align: center;
        position: relative;
        padding: 0 1rem;
    }
    .works-step::after {
        content: '';
        position: absolute;
        top: 45px;
        right: -30%;
        width: 60%;
        height: 2px;
        border-top: 2px dashed var(--aa-gold);
        opacity: .5;
    }
    .works-step:last-child::after { display: none; }
    .works-icon-wrap {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--aa-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 2rem;
        box-shadow: 0 4px 20px rgba(201,148,58,.2);
    }
    .works-icon-wrap i { font-size: 3rem; color: var(--aa-maroon); }
    .works-step-num {
        position: absolute;
        top: -10px;
        right: calc(50% - 55px);
        width: 28px;
        height: 28px;
        background: var(--aa-maroon);
        color: #fff;
        border-radius: 50%;
        font-size: 1.2rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .works-step h4 {
        
        font-size: 1.9rem;
        color: var(--aa-dark);
        margin-bottom: .8rem;
        font-weight: 700;
    }
    .works-step p {
        font-size: 1.6rem;
        color: var(--dark);
        line-height: 1.8;
    }

    /* ── Why Choose Us ────────────────────────────────────────────────── */
    .aa-why {
        background: var(--aa-cream);
        padding: 7rem 0;
    }
    .why-img-wrap {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 12px 50px rgba(44,24,16,.15);
        height: 100%;
        min-height: 420px;
        background: var(--aa-cream2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .why-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .why-feature {
        display: flex;
        align-items: flex-start;
        gap: 1.4rem;
        margin-bottom: 2.2rem;
    }
    .why-feature-icon {
        width: 44px;
        height: 44px;
        background: var(--aa-cream2);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid #e8d5c0;
    }
    .why-feature-icon i { color: var(--aa-maroon); font-size: 1.6rem; }
    .why-feature h5 {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--aa-dark);
        margin-bottom: .3rem;
    }
    .why-feature p {
        font-size: 1.4rem;
        color: var(--aa-muted);
        margin: 0;
        line-height: 1.6;
    }

    /* ── Testimonials ─────────────────────────────────────────────────── */
    .aa-testimonials {
        background: var(--aa-cream2);
        padding: 7rem 0;
    }
    .testi-card {
        background: #fff;
        border-radius: 16px;
        padding: 3rem 2.5rem;
        box-shadow: 0 4px 20px rgba(44,24,16,.07);
        text-align: center;
        margin: 1rem;
    }
    .testi-stars { color: var(--aa-gold); font-size: 1.8rem; margin-bottom: 1.5rem; }
    .testi-text {
        font-size: 1.6rem;
        color: var(--aa-dark);
        font-style: italic;
        line-height: 1.8;
        margin-bottom: 1.8rem;
        
    }
    .testi-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--aa-maroon);
    }
    .testi-loc { font-size: 1.3rem; color: var(--aa-muted); }
    .testi-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 3rem;
    }
    .testi-nav button {
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 2px solid var(--aa-maroon);
        background: #fff;
        color: var(--aa-maroon);
        font-size: 1.6rem;
        cursor: pointer;
        transition: all .2s;
        display: flex; align-items: center; justify-content: center;
    }
    .testi-nav button:hover { background: var(--aa-maroon); color: #fff; }

    /* ── FAQ ──────────────────────────────────────────────────────────── */
    .aa-faq { background: var(--aa-cream); padding: 7rem 0; }
    .faq-item {
        border-bottom: 1.5px solid #e8d5c0;
        padding: 0;
    }
    .faq-question {
        width: 100%;
        background: none;
        border: none;
        text-align: left;
        padding: 2rem 0;
        font-size: 1.7rem;
        font-weight: 600;
        color: var(--aa-dark);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        transition: color .2s;
    }
    .faq-question:hover { color: var(--aa-maroon); }
    .faq-question .faq-icon {
        font-size: 2rem;
        color: var(--aa-maroon);
        flex-shrink: 0;
        transition: transform .25s;
    }
    .faq-question.open .faq-icon { transform: rotate(45deg); }
    .faq-answer {
        display: none;
        font-size: 1.5rem;
        color: var(--aa-muted);
        line-height: 1.8;
        padding-bottom: 2rem;
    }
    .faq-answer.show { display: block; }

    /* ── CTA Banner ───────────────────────────────────────────────────── */
    .aa-cta {
        background: linear-gradient(135deg, var(--aa-maroon), #132139);
        padding: 6rem 0;
        text-align: center;
    }
    .aa-cta h2 {
        
        font-size: 3.6rem;
        color: #fff;
        margin-bottom: 1rem;
    }
    .aa-cta p { font-size: 1.6rem; color: rgba(255,255,255,.8); margin-bottom: 2.5rem; }
    .btn-aa-light {
        background: var(--aa-gold);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
        padding: 1.4rem 4rem;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
        transition: all .25s;
    }
    .btn-aa-light:hover { background: #fff; color: var(--aa-maroon); }

    @media(max-width:768px) {
        .aa-section-title { font-size: 3rem; }
        .works-step::after { display: none; }
        .pkg-card { margin-bottom: 2rem; }
    }

/* ---------------------------------------------------------------------
   blog-detail.php
   --------------------------------------------------------------------- */
/* ── Blog Detail Page ──────────────────────────────────── */
    .blog-detail-section {
      padding: 6rem 0 8rem;
      background: var(--light-bg);
    }

    /* Article card */
    .blog-article {
      background: var(--white);
      border-radius: 1.8rem;
      overflow: hidden;
      box-shadow: 0 4px 24px var(--card-shadow);
      border: 1px solid var(--border);
    }
    .blog-article-hero {
      width: 100%;
      max-height: 46rem;
      object-fit: cover;
      display: block;
    }
    .blog-article-body { padding: 3.5rem 4rem 4rem; }

    /* Meta row */
    .blog-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .blog-cat-pill {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: var(--primary-light);
      color: var(--primary);
      font-size: 1.3rem;
      font-weight: 700;
      padding: .4rem 1.3rem;
      border-radius: 5rem;
      text-decoration: none;
      transition: all .2s;
    }
    .blog-cat-pill:hover { background: var(--primary); color: #fff; text-decoration: none; }
    .blog-meta-item {
      font-size: 1.3rem;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }
    .blog-meta-item i { color: var(--secondary); font-size: 1.2rem; }

    /* Title */
    .blog-article-title {
      font-size: 3.2rem;
      font-weight: 800;
      color: var(--dark);
      line-height: 1.3;
      margin-bottom: 2.5rem;
    }

    /* Content typography */
    .blog-body { font-size: 1.7rem; color: #3a3a3a; line-height: 2; }
    .blog-body h2, .blog-body h3, .blog-body h4 {
      font-weight: 800;
      color: var(--dark);
      margin: 3rem 0 1.5rem;
      line-height: 1.3;
    }
    .blog-body h2 { font-size: 2.6rem; }
    .blog-body h3 { font-size: 2.2rem; }
    .blog-body h4 { font-size: 1.9rem; }
    .blog-body p  { margin-bottom: 1.8rem; }
    .blog-body ul, .blog-body ol { padding-left: 2rem; margin-bottom: 1.8rem; }
    .blog-body li { margin-bottom: .6rem; }
    .blog-body blockquote {
      border-left: 4px solid var(--primary);
      margin: 2.5rem 0;
      padding: 1.5rem 2rem;
      background: var(--primary-bg);
      border-radius: 0 1rem 1rem 0;
      font-style: italic;
      font-size: 1.8rem;
      color: var(--dark);
    }
    .blog-body img   { max-width: 100%; border-radius: 1rem; margin: 1.5rem 0; }
    .blog-body a     { color: var(--primary); text-decoration: underline; }
    .blog-body strong { color: var(--dark); }

    /* Tags strip */
    .blog-tags {
      margin-top: 3.5rem;
      padding-top: 2.5rem;
      border-top: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .8rem;
    }
    .blog-tags-label {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .blog-tag {
      display: inline-block;
      padding: .4rem 1.2rem;
      background: var(--light-bg);
      color: var(--text-muted);
      font-size: 1.3rem;
      font-weight: 500;
      border-radius: 5rem;
      border: 1px solid var(--border);
      text-decoration: none;
      transition: all .2s;
    }
    .blog-tag:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary-light); text-decoration: none; }

    /* Share bar */
    .blog-share {
      margin-top: 2.5rem;
      padding-top: 2.5rem;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .blog-share-label { font-size: 1.4rem; font-weight: 700; color: var(--text); }
    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      padding: .7rem 1.8rem;
      border-radius: 5rem;
      font-size: 1.3rem;
      font-weight: 600;
      text-decoration: none;
      transition: all .25s;
      border: 2px solid;
      cursor: pointer;
      background: none;
      font-family: inherit;
    }
    .share-btn:hover { transform: translateY(-2px); text-decoration: none; }
    .share-fb  { background:#1877f2; color:#fff; border-color:#1877f2; }
    .share-fb:hover  { background:#1565d8; color:#fff; border-color:#1565d8; }
    .share-tw  { background:#1da1f2; color:#fff; border-color:#1da1f2; }
    .share-tw:hover  { background:#0d8fd8; color:#fff; border-color:#0d8fd8; }
    .share-wa  { background:#25d366; color:#fff; border-color:#25d366; }
    .share-wa:hover  { background:#1da851; color:#fff; border-color:#1da851; }
    .share-copy { background:var(--white); color:var(--text); border-color:var(--border); }
    .share-copy:hover { background:var(--light-bg); color:var(--dark); }

    /* Author card */
    .blog-author {
      margin-top: 4rem;
      padding: 2.5rem;
      background: var(--primary-bg);
      border-radius: 1.4rem;
      border: 1px solid var(--primary-light);
      display: flex;
      gap: 2rem;
      align-items: flex-start;
    }
    .blog-author-avatar {
      width: 7rem;
      height: 7rem;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 3px solid var(--primary);
    }
    .blog-author-name { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: .3rem; }
    .blog-author-role { font-size: 1.3rem; color: var(--primary); font-weight: 600; margin-bottom: .8rem; }
    .blog-author-bio  { font-size: 1.4rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

    /* Post navigation */
    .blog-nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 4rem;
    }
    .blog-nav-card {
      background: var(--white);
      border-radius: 1.4rem;
      padding: 2rem 2.5rem;
      box-shadow: 0 3px 14px var(--card-shadow);
      border: 1px solid var(--border);
      text-decoration: none;
      transition: all .3s cubic-bezier(.4,0,.2,1);
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }
    .blog-nav-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 28px rgba(11,93,30,.1); transform: translateY(-3px); text-decoration: none; }
    .blog-nav-dir {
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .blog-nav-title { font-size: 1.5rem; font-weight: 700; color: var(--dark); line-height: 1.4; }
    .blog-nav-next { text-align: right; }
    .blog-nav-next .blog-nav-dir { justify-content: flex-end; }

    /* Sidebar */
    .blog-sidebar { position: sticky; top: 2rem; }
    .sidebar-widget {
      background: var(--white);
      border-radius: 1.4rem;
      overflow: hidden;
      box-shadow: 0 3px 14px var(--card-shadow);
      border: 1px solid var(--border);
      margin-bottom: 2.5rem;
    }
    .sidebar-widget-header {
      padding: 1.6rem 2rem;
      border-bottom: 1px solid var(--border);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--dark);
      position: relative;
    }
    .sidebar-widget-header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 1.4rem 1.4rem 0 0;
    }
    .sidebar-widget-body { padding: 0 2rem; }

    /* Recent / related post items */
    .recent-post-item {
      display: flex;
      gap: 1.4rem;
      align-items: flex-start;
      padding: 1.4rem 0;
      border-bottom: 1px solid var(--border);
      text-decoration: none;
      transition: background .15s;
    }
    .recent-post-item:last-child { border-bottom: none; }
    .recent-post-item:hover .recent-post-title { color: var(--primary); }
    .recent-post-item:hover { text-decoration: none; }
    .recent-post-thumb {
      width: 6.5rem;
      height: 5rem;
      object-fit: cover;
      border-radius: .8rem;
      flex-shrink: 0;
    }
    .recent-post-thumb-ph {
      width: 6.5rem;
      height: 5rem;
      border-radius: .8rem;
      flex-shrink: 0;
      background: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: var(--primary);
    }
    .recent-post-title {
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--dark);
      line-height: 1.4;
      margin-bottom: .3rem;
      display: block;
      transition: color .2s;
    }
    .recent-post-date { font-size: 1.2rem; color: var(--text-muted); display: block; }

    /* Sidebar CTA */
    .sidebar-cta {
      background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 100%);
      border-radius: 1.4rem;
      padding: 2.5rem 2rem;
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .sidebar-cta h4 { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 1rem; line-height: 1.4; }
    .sidebar-cta p  { font-size: 1.4rem; color: rgba(255,255,255,.75); margin-bottom: 1.8rem; line-height: 1.6; }

    /* Responsive */
    @media (max-width: 576px) {
      .blog-nav { grid-template-columns: 1fr; }
      .blog-article-body { padding: 2.5rem 2rem; }
      .blog-article-title { font-size: 2.4rem; }
      .blog-author { flex-direction: column; }
    }

/* ---------------------------------------------------------------------
   change-password.php
   --------------------------------------------------------------------- */
.pwd-toggle {
    position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 1.5rem; padding: 0; line-height: 1;
}
.pwd-toggle:hover { color: var(--primary); }

/* ---------------------------------------------------------------------
   checkout.php
   --------------------------------------------------------------------- */
/* ── Checkout Auth Flow Styles ───────────────────────────────────── */
    .co-auth-wrap { padding: .25rem 0; }
    .co-step-title { font-size: 1.55rem; font-weight: 700; color: #222; margin-bottom: .5rem; }
    .co-step-sub   { font-size: 1.3rem; color: #666; margin-bottom: 1.8rem; line-height: 1.65; }
    .co-field { margin-bottom: 1.4rem; }
    .co-field label {
        display: block; font-size: 1.3rem; color: #555; font-weight: 600;
        margin-bottom: .5rem;
    }
    .co-field input,
    .co-field select {
        width: 100%; padding: 1.1rem 1.4rem;
        border: 1.5px solid #ddd; border-radius: .8rem;
        font-size: 1.45rem; outline: none; background: #fff;
        transition: border .2s, box-shadow .2s;
    }
    .co-field input:focus,
    .co-field select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light, rgba(11,93,30,.12));
    }
    .co-btn {
        width: 100%; padding: 1.3rem;
        background: var(--primary); color: #fff;
        border: none; border-radius: .8rem;
        font-size: 1.5rem; font-weight: 700; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: .8rem;
        transition: background .2s, transform .1s;
    }
    .co-btn:hover   { background: var(--primary-dark, #064a19); }
    .co-btn:active  { transform: scale(.98); }
    .co-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .co-msg {
        padding: 1rem 1.4rem; border-radius: .7rem;
        font-size: 1.3rem; margin-bottom: 1.4rem; display: none;
        align-items: center; gap: .6rem;
    }
    .co-msg.error   { background:#FBEDEC; border:1px solid #F0D2D1; color:#A32C2A; }
    .co-msg.success { background:#f0fff4; border:1px solid #BFE3D0; color:#15704A; }
    /* OTP digit boxes */
    .co-otp-row {
        display: flex; gap: .7rem; justify-content: center;
        margin: 1.6rem 0;
    }
    .co-otp-row input {
        width: 4.2rem; height: 4.8rem;
        text-align: center; font-size: 2rem; font-weight: 700;
        border: 2px solid #ddd; border-radius: .7rem;
        outline: none; transition: border .2s, box-shadow .2s;
        background: #fff;
    }
    .co-otp-row input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light, rgba(11,93,30,.12));
    }
    .co-otp-row input.filled {
        border-color: var(--primary);
        background: var(--primary-bg, #f0fff4);
    }
    .co-otp-meta { text-align: center; font-size: 1.25rem; color: #666; margin-top: .6rem; }
    .co-otp-meta a {
        color: var(--primary); font-weight: 600;
        cursor: pointer; text-decoration: none;
    }
    .co-otp-meta a:hover { text-decoration: underline; }
    .co-timer { font-weight: 700; color: var(--primary); }
    .co-spinner {
        width: 1.8rem; height: 1.8rem;
        border: 2.5px solid rgba(255,255,255,.4);
        border-top-color: #fff; border-radius: 50%;
        animation: co-spin .65s linear infinite; display: none;
    }
    @keyframes co-spin { to { transform: rotate(360deg); } }
    .co-divider {
        text-align: center; font-size: 1.2rem; color: var(--text-muted);
        margin: 1.6rem 0; position: relative;
    }
    .co-divider::before,
    .co-divider::after {
        content: ''; position: absolute; top: 50%;
        width: 40%; height: 1px; background: #eee;
    }
    .co-divider::before { left: 0; }
    .co-divider::after  { right: 0; }
    .co-login-link { text-align: center; font-size: 1.3rem; color: #777; }
    .co-login-link a { color: var(--primary); font-weight: 600; }
    .co-verified-wrap {
        text-align: center; padding: 2.5rem 1rem;
    }
    .co-verified-wrap .co-check-icon {
        width: 6rem; height: 6rem; border-radius: 50%;
        background: #f0fff4; border: 2px solid #BFE3D0;
        display: flex; align-items: center; justify-content: center;
        font-size: 2.8rem; margin: 0 auto 1.2rem;
    }

/* ---------------------------------------------------------------------
   contact.php
   --------------------------------------------------------------------- */
.contact-map iframe {
    display: block;
    width: 100% !important;
    height: 45rem;
    border: 0;
}

/* ---------------------------------------------------------------------
   disclaimer.php
   --------------------------------------------------------------------- */
    .disclaimer-box { background: #fff8e1; border: 1.5px solid #f9a825; border-radius: 1rem; padding: 1.8rem 2.2rem; margin: 2rem 0; }
    .disclaimer-box p { margin: 0; font-size: 1.55rem; color: #3e2700; }

/* ---------------------------------------------------------------------
   forgot-password.php
   --------------------------------------------------------------------- */
body{background:#F1F6FC;margin:0;padding:0;}
  .wrap{max-width:540px;margin:30px auto;background:#fff;border-radius:12px;
        overflow:hidden;box-shadow:0 4px 20px rgba(0,107,35,.12);}
  .hdr{background:#29457D;padding:28px 32px;text-align:center;}
  .hdr h1{color:#fff;margin:0;font-size:22px;}
  .body{padding:32px;}
  .body p{color:#444;font-size:15px;line-height:1.7;margin:0 0 16px;}
  .otp-box{background:#F1F6FC;border:2px dashed #29457D;border-radius:10px;
           text-align:center;padding:20px 10px;margin:24px 0;}
  .otp-box .code{font-size:42px;font-weight:800;color:#29457D;
                 letter-spacing:10px;display:block;}
  .otp-box small{color:#777;font-size:13px;}
  .footer{background:#f9f9f9;padding:16px 32px;text-align:center;
          color:#aaa;font-size:12px;}

/* ---------------------------------------------------------------------
   includes/page_sections.php
   --------------------------------------------------------------------- */
.page-content-sections-wrap {
    background: #fdf8f2;
    padding: 5rem 0 4rem;
    border-top: 1px solid #ede3d5;
}
.pcs-block {
    
    margin: 0 auto 4rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid #ede3d5;
}
.pcs-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.pcs-heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: #5a2d0c;
    margin-bottom: 1.8rem;
    line-height: 1.35;
}
.pcs-content {
    font-size: 1.5rem;
    color: #3a2a1a;
    line-height: 1.9;
}
.pcs-content p   { margin-bottom: 1.4rem; }
.pcs-content p:last-child { margin-bottom: 0; }
.pcs-content strong { font-weight: 600; }
.pcs-content a  { color: var(--primary, #29457D); text-decoration: underline; }
.pcs-content ul, .pcs-content ol { padding-left: 2rem; margin-bottom: 1.4rem; }
.pcs-content li { margin-bottom: .5rem; }
.pcs-content h3, .pcs-content h4 { font-weight: 700; color: #5a2d0c; margin: 2rem 0 1rem; }
.pcs-cta { margin: 2.4rem 0 0; text-align: center; }
.pcs-cta .site-btn { text-decoration: none; }

/* ---------------------------------------------------------------------
   includes/slider.php
   --------------------------------------------------------------------- */
/* ════════════════ SITE SLIDER ════════════════ */
.site-slider { width: 100%; overflow: hidden; }

/* Height follows the image's own aspect ratio — full image always visible, no cropping */
#mainCarousel .carousel-item picture,
#mainCarousel .carousel-item a { display: block; width: 100%; }

.sl-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gradient fallback (no image) still needs an explicit height */
.sl-bg-gradient {
    width: 100%;
    min-height: 50rem;
    background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 60%, var(--primary-dark) 100%);
}

/* Indicators */
#mainCarousel .carousel-indicators [data-bs-target] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: none;
    opacity: 1;
    transition: all .3s;
}
#mainCarousel .carousel-indicators .active {
    background: var(--secondary);
    width: 3rem;
    border-radius: .5rem;
}

/* Controls */
#mainCarousel .carousel-control-prev,
#mainCarousel .carousel-control-next {
    width: 5rem;
    height: 5rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
    backdrop-filter: blur(4px);
    transition: all .3s;
    opacity: 1;
}
#mainCarousel .carousel-control-prev { left: 2rem; }
#mainCarousel .carousel-control-next { right: 2rem; }
#mainCarousel .carousel-control-prev:hover,
#mainCarousel .carousel-control-next:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}
#mainCarousel .carousel-control-prev-icon,
#mainCarousel .carousel-control-next-icon { width: 1.6rem; height: 1.6rem; }

/* Responsive: gradient fallback height + control sizing */
@media (max-width: 991px) {
    .sl-bg-gradient { min-height: 42rem; }
}
@media (max-width: 767px) {
    .sl-bg-gradient { min-height: 32rem; }
    #mainCarousel .carousel-control-prev,
    #mainCarousel .carousel-control-next { width: 3.6rem; height: 3.6rem; }
}
@media (max-width: 480px) {
    .sl-bg-gradient { min-height: 26rem; }
    #mainCarousel .carousel-control-prev { left: .8rem; }
    #mainCarousel .carousel-control-next { right: .8rem; }
}

/* ---------------------------------------------------------------------
   login.php
   --------------------------------------------------------------------- */
/* ── Unified Auth Page ─────────────────────────────────────────────── */

    /* Animated step transitions */
    .au-step { animation: au-fadein .25s ease; }
    @keyframes au-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

    /* Email / password inputs */
    .au-input {
        width: 100%; padding: 1.15rem 1.4rem;
        border: 1.5px solid #ddd; border-radius: .8rem;
        font-size: 1.45rem; outline: none; background: #fff;
        transition: border .2s, box-shadow .2s;
    }
    .au-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light, rgba(11,93,30,.12));
    }
    .au-label {
        display: block; font-size: 1.3rem;
        font-weight: 600; color: #555; margin-bottom: .5rem;
    }
    .au-field { margin-bottom: 1.5rem; }

    /* Primary button */
    .au-btn {
        width: 100%; padding: 1.3rem;
        background: var(--primary); color: #fff;
        border: none; border-radius: .8rem;
        font-size: 1.5rem; font-weight: 700; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: .8rem;
        transition: background .2s, transform .1s;
    }
    .au-btn:hover   { background: var(--primary-dark, #064a19); }
    .au-btn:active  { transform: scale(.98); }
    .au-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

    /* Spinner inside button */
    .au-spinner {
        width: 1.8rem; height: 1.8rem;
        border: 2.5px solid rgba(255,255,255,.4);
        border-top-color: #fff; border-radius: 50%;
        animation: au-spin .65s linear infinite; display: none; flex-shrink: 0;
    }
    @keyframes au-spin { to { transform: rotate(360deg); } }

    /* Message banner */
    .au-msg {
        padding: 1rem 1.4rem; border-radius: .8rem;
        font-size: 1.3rem; display: none;
        align-items: flex-start; gap: .7rem;
        margin-bottom: 1.6rem; line-height: 1.5;
    }
    .au-msg.error   { background:#FBEDEC; border:1px solid #F0D2D1; color:#A32C2A; display:flex; }
    .au-msg.info    { background:#e8f4fd; border:1px solid #bee5eb; color:#0c5460;  display:flex; }
    .au-msg.success { background:#f0fff4; border:1px solid #BFE3D0; color:#15704A;  display:flex; }

    /* OTP digit boxes */
    .au-otp-row {
        display: flex; gap: .65rem; justify-content: center;
        margin: 1.6rem 0 .6rem;
    }
    .au-otp-box {
        width: 4.4rem; height: 5rem;
        text-align: center; font-size: 2.2rem; font-weight: 700;
        border: 2px solid #ddd; border-radius: .8rem;
        outline: none; background: #fff;
        transition: border .2s, box-shadow .2s;
        caret-color: transparent;
    }
    .au-otp-box:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light, rgba(11,93,30,.12));
    }
    .au-otp-box.filled {
        border-color: var(--primary);
        background: var(--primary-bg, #F1F6FC);
        color: var(--primary);
    }

    /* Timer & meta links */
    .au-meta {
        text-align: center; font-size: 1.25rem;
        color: #777; margin-top: .5rem;
    }
    .au-meta a {
        color: var(--primary); font-weight: 600;
        cursor: pointer; text-decoration: none;
    }
    .au-meta a:hover { text-decoration: underline; }
    .au-timer { font-weight: 700; color: var(--primary); }

    /* Divider */
    .au-divider {
        text-align: center; font-size: 1.2rem; color: var(--text-muted);
        margin: 1.8rem 0; position: relative;
    }
    .au-divider::before, .au-divider::after {
        content: ''; position: absolute; top: 50%;
        width: 40%; height: 1px; background: #eee;
    }
    .au-divider::before { left: 0; }
    .au-divider::after  { right: 0; }

    /* Password show/hide toggle */
    .au-pw-wrap { position: relative; }
    .au-pw-toggle {
        position: absolute; right: 1.2rem; top: 50%;
        transform: translateY(-50%);
        background: none; border: none; cursor: pointer;
        color: #aaa; font-size: 1.4rem; padding: 0; line-height: 1;
    }
    .au-pw-toggle:hover { color: var(--primary); }

    /* Back link */
    .au-back {
        display: inline-flex; align-items: center; gap: .5rem;
        font-size: 1.3rem; color: #777; cursor: pointer;
        background: none; border: none; padding: 0;
        margin-bottom: 1.6rem;
        transition: color .15s;
    }
    .au-back:hover { color: var(--primary); }

    /* Success step */
    .au-success-wrap { text-align: center; padding: 2rem 1rem; }
    .au-success-icon {
        width: 6.4rem; height: 6.4rem; border-radius: 50%;
        background: #f0fff4; border: 2px solid #BFE3D0;
        display: flex; align-items: center; justify-content: center;
        font-size: 3rem; margin: 0 auto 1.4rem;
    }

    /* Misc */
    .au-toggle-link {
        text-align: center; font-size: 1.3rem; color: #666;
    }
    .au-toggle-link a { color: var(--primary); font-weight: 600; text-decoration: none; }
    .au-toggle-link a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   my-account.php
   --------------------------------------------------------------------- */
/* ── Verification Badges ─────────────────────────────── */
    .vf-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: 1.15rem;
        font-weight: 700;
        padding: .32rem .95rem;
        border-radius: 5rem;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1.4;
    }
    .vf-badge.verified   { background: var(--primary-light); color: var(--primary); }
    .vf-badge.unverified { background: #fce4ec; color: #c62828; }

    .vf-verify-btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: transparent;
        border: 1.5px solid var(--primary);
        color: var(--primary);
        font-size: 1.2rem;
        font-weight: 700;
        padding: .4rem 1.1rem;
        border-radius: 5rem;
        cursor: pointer;
        transition: all .2s;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .vf-verify-btn:hover,
    .vf-verify-btn:focus { background: var(--primary); color: #fff; outline: none; }

    .vf-field-row {
        display: flex;
        align-items: center;
        gap: .8rem;
        flex-wrap: nowrap;
    }
    .vf-field-row .form-control { flex: 1; min-width: 0; }

    /* ── OTP Modals ──────────────────────────────────────── */
    .modal-content  { border-radius: 1.6rem !important; overflow: hidden; border: none; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
    .modal-header   { border-bottom: 2px solid var(--primary-light); padding: 1.8rem 2.2rem; background: var(--white); }
    .modal-body     { padding: 2.2rem; }
    .modal-footer   { border-top: 1px solid var(--border); padding: 1.4rem 2.2rem; background: var(--white); }
    .modal-title    { font-size: 1.8rem; font-weight: 800; color: var(--dark); }

    .otp-modal-icon {
        width: 6.5rem; height: 6.5rem;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 2.8rem;
        margin: 0 auto 1.6rem;
    }
    .otp-modal-icon.email-icon { background: #E2F4FE; color: #046C96; }
    .otp-modal-icon.phone-icon { background: #E6F6EE; color: var(--primary); }

    .otp-step         { display: none; }
    .otp-step.active  { display: block; }

    .otp-input {
        letter-spacing: .6rem;
        font-size: 2.6rem;
        font-weight: 800;
        text-align: center;
        border: 2px solid var(--border);
        border-radius: 1.2rem;
        padding: 1.2rem 1rem;
        width: 100%;
        background: var(--light-bg);
        transition: border-color .2s, box-shadow .2s;
        font-family: monospace;
    }
    .otp-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(11,93,30,.1);
        outline: none;
        background: #fff;
    }
    .otp-timer { font-size: 1.25rem; color: var(--text-muted); text-align: center; margin-top: .9rem; }
    .otp-timer span { font-weight: 700; color: var(--primary); }

    .otp-dev-note {
        background: #fff8e1;
        border: 1px solid #f9a825;
        border-radius: .9rem;
        padding: .9rem 1.3rem;
        font-size: 1.3rem;
        color: #5d3a00;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    /* Verification summary panel */
    .vf-summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .8rem 0;
        border-bottom: 1px solid var(--primary-light);
        font-size: 1.4rem;
    }
    .vf-summary-row:last-child { border-bottom: none; }
    .vf-summary-label { display: flex; align-items: center; gap: .7rem; color: #555; }

/* ---------------------------------------------------------------------
   my-courses.php
   --------------------------------------------------------------------- */
/* ── Locked course card ───────────────────────────── */
    .course-locked-wrap {
        position: relative;
        cursor: pointer;
    }
    .course-locked-wrap .ud-course-card {
        pointer-events: none;
        user-select: none;
    }
    .course-lock-overlay {
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.55);
        backdrop-filter: blur(3px);
        border-radius: 1.4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .7rem;
        z-index: 4;
        transition: background .2s;
    }
    .course-locked-wrap:hover .course-lock-overlay {
        background: rgba(255,255,255,.7);
    }
    .course-lock-overlay i {
        font-size: 2.8rem;
        color: #A32C2A;
    }
    .course-lock-overlay span {
        font-size: 1.35rem;
        font-weight: 700;
        color: #c62828;
        background: #fce4ec;
        padding: .4rem 1.1rem;
        border-radius: 5rem;
        text-align: center;
    }
    /* ── Verify banner ────────────────────────────────── */
    .wa-verify-banner {
        background: linear-gradient(135deg, #fff8e1, #fff3cd);
        border: 1.5px solid #f9a825;
        border-radius: 1.2rem;
        padding: 1.8rem 2.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-bottom: 2.5rem;
    }

/* ---------------------------------------------------------------------
   refund-policy.php
   --------------------------------------------------------------------- */
    .policy-highlight { background: #F1F6FC; border: 1.5px solid #BFE3D0; border-radius: 1rem; padding: 1.8rem 2.2rem; margin: 2rem 0; }
    .policy-highlight p { margin: 0; font-size: 1.55rem; color: #1a5e20; }

/* ---------------------------------------------------------------------
   verify-email.php
   --------------------------------------------------------------------- */
.auth-success {
    background: #d4edda;
    border: 1px solid #BFE3D0;
    color: #15704A;
    padding: 1.2rem 1.5rem;
    border-radius: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}
/* ==========================================================================
   Hero video
   --------------------------------------------------------------------------
   A cover image with a play button that swaps itself for the real player on
   click. Sized by aspect-ratio so it reserves its space before the poster
   arrives and the hero never jumps.
   ========================================================================== */

.hero-video { position: relative; }

.hero-video-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--canvas-alt);
  cursor: pointer;
  box-shadow: 0 3rem 6rem rgba(20,38,63,.16), 0 0 0 1px var(--glow);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.hero-video-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-cover:hover { transform: translateY(-.4rem); }
.hero-video-cover:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }

.hero-video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-video-play svg { width: 8.4rem; height: auto; filter: drop-shadow(0 .4rem 1.2rem rgba(0,0,0,.35)); }
.hero-video-play-bg { fill: #212121; opacity: .82; transition: fill .2s, opacity .2s; }
.hero-video-cover:hover .hero-video-play-bg { fill: #FF0000; opacity: 1; }

.hero-video-caption {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: var(--text-muted);
  text-align: center;
}

/* The player replaces the cover in place, keeping the same frame. */
.hero-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  display: block;
  box-shadow: 0 3rem 6rem rgba(20,38,63,.16), 0 0 0 1px var(--glow);
}

@media (max-width: 991px) {
  .hero-video { margin-top: 1rem; }
  .hero-video-play svg { width: 6.4rem; }
}

/* ==========================================================================
   Shop
   --------------------------------------------------------------------------
   Products, cart and the header cart badge. Every colour comes from the theme
   tokens so the shop matches the rest of the site without its own palette.
   ========================================================================== */

/* One line of categories that scrolls sideways, instead of wrapping onto a
   second row (client, 2026-09-21). */
.shop-filter {
  display: flex; flex-wrap: nowrap; gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: .8rem; margin-bottom: 2rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.shop-filter::-webkit-scrollbar { height: .6rem; }
.shop-filter::-webkit-scrollbar-thumb { background: var(--border); border-radius: 1rem; }
.shop-filter::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.shop-filter .shop-chip { flex: 0 0 auto; }
.shop-chip {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.8rem; border: 1px solid var(--border); border-radius: 5rem;
  background: var(--surface); color: var(--text); font-size: 1.45rem; font-weight: 600;
  text-decoration: none; transition: border-color .2s, color .2s, background .2s;
}
.shop-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.shop-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.shop-chip-n {
  font-size: 1.2rem; font-weight: 700; opacity: .75;
  background: rgba(0,0,0,.08); border-radius: 4rem; padding: .1rem .7rem;
}
.shop-chip.is-on .shop-chip-n { background: rgba(255,255,255,.22); }

.shop-grid {
  display: grid; gap: 2.4rem;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
}
.shop-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1.4rem;
  overflow: hidden; box-shadow: 0 1.2rem 3rem rgba(20,38,63,.07);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}
.shop-card:hover {
  transform: translateY(-.8rem); border-color: var(--accent);
  box-shadow: 0 2rem 4.5rem rgba(20,38,63,.13), 0 0 0 1px var(--glow);
}
.shop-card.is-out { opacity: .72; }
.shop-card-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--canvas-alt); }
.shop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--primary-light); font-size: 4rem;
}
.shop-noimg-lg { aspect-ratio: 4 / 3; border-radius: 1.4rem; border: 1px solid var(--border); }
.shop-badge {
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: var(--accent); color: var(--primary-darker);
  font-size: 1.2rem; font-weight: 700; padding: .4rem 1rem; border-radius: 4rem;
}
.shop-badge-out { background: var(--text-muted); color: #fff; }

.shop-card-body { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.shop-card-body h3 { font-size: 1.9rem; font-weight: 700; margin: 0; }
.shop-card-body p { font-size: 1.45rem; color: var(--text-muted); margin: 0; flex: 1; }
.shop-price { display: flex; align-items: baseline; gap: 1rem; }
.shop-price strong { font-size: 2rem; color: var(--primary); }
.shop-price s { font-size: 1.45rem; color: var(--text-muted); }
.shop-card-body .site-btn { width: 100%; justify-content: center; }

.product-media img { width: 100%; border-radius: 1.4rem; }
.product-price { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.product-price strong { font-size: 3.2rem; color: var(--primary);  }
.product-price s { font-size: 1.8rem; color: var(--text-muted); }
.product-save {
  background: var(--secondary-light); color: var(--secondary-dark);
  font-size: 1.3rem; font-weight: 700; padding: .3rem 1rem; border-radius: 4rem;
}
.product-buy-row { display: flex; gap: 1.2rem; align-items: stretch; flex-wrap: wrap; }
.product-buy-row .cr-input { width: 9rem; flex: 0 0 auto; }
.product-buy-row .site-btn { flex: 1 1 18rem; justify-content: center; }

.cart-table td, .cart-table th { vertical-align: middle; }
.cart-item { display: flex; align-items: center; gap: 1.4rem; }
.cart-item img { width: 6.4rem; height: 6.4rem; object-fit: cover; border-radius: .8rem; flex: 0 0 auto; }
.cart-qty { width: 8rem; text-align: center; margin: 0 auto; }
.cart-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.8rem; line-height: 1; padding: .4rem;
}
.cart-remove:hover { color: var(--danger); }
.tbl-scroll { overflow-x: auto; }

/* Header cart */
.hdr-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; margin-right: 1.2rem; border-radius: 50%;
  color: var(--primary); font-size: 1.9rem; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); transition: all .25s;
}
.hdr-cart:hover { border-color: var(--accent); color: var(--accent-deep); }
.hdr-cart-n {
  position: absolute; top: -.4rem; right: -.4rem; min-width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--primary-darker);
  font-size: 1.15rem; font-weight: 700; border-radius: 2rem; padding: 0 .5rem;
}

@media (max-width: 991px) {
  .hdr-cart { margin-left: auto; margin-right: 1rem; }
}

/* ==========================================================================
   Mobile refinements
   --------------------------------------------------------------------------
   These live at the end of the last stylesheet on purpose: they have to win
   against the per-page rules lifted above, which are written .foo.foo, so they
   are written the same way.

   Sizes here are in px, not rem, deliberately. new-style.css drops the root to
   `html { font-size: 50% }` below 575px, so a rem is 8px on a phone against
   10px everywhere else — every rem value silently shrinks by a fifth exactly
   where text is hardest to read. Fixing that root rule would resize the whole
   phone layout, so these rules opt out of the scale instead and state the size
   they mean.
   ========================================================================== */

@media (max-width: 991px) {

  /* The featured blog image is a 3:2 banner. Its 340px min-height exists so
     that, on desktop, the picture matches the height of the text column beside
     it. Once the columns stack, that same rule squeezes a 3:2 picture into a
     nearly square box and object-fit: cover then crops about a third of the
     width off — which is why the headline in the artwork was cut in half.
     Stacked, the image just keeps its own proportions. */
  .blog-featured-card .blogs-div7.blogs-div7 {
    min-height: 0;
    height: auto;
  }
  .blog-featured-card .blogs-el9.blogs-el9 {
    min-height: 0;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  /* iOS zooms the whole page when a form control smaller than 16px takes
     focus, which throws the user out of the layout mid-form. */
  .cr-input.cr-input,
  .form-control.form-control,
  .au-input.au-input,
  .aa-input.aa-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], select, textarea {
    font-size: 16px;
  }

  /* The burger is the only way into the menu on a phone and measured 30x27,
     under the 44px minimum for a touch target. */
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-btn,
  .contact-btn a,
  .header-div .navigation_bar .contact-btn a { min-height: 44px; }

  /* Labels and captions that computed to 9.6-11.2px on a phone. */
  .au-label.au-label,
  .form-label.form-label,
  .aa-label.aa-label,
  .cr-label.cr-label { font-size: 13px; }

  .au-toggle-link.au-toggle-link,
  .au-toggle-link.au-toggle-link a { font-size: 13px; }

  .m-stat p, .stat-box p, .counter-box p,
  section.mentor-section .mentor-stats .m-stat p,
  .story-section .stat-box p { font-size: 13px; }

  .cr-service-price span,
  .cr-price-note,
  .last-updated.last-updated,
  .cr-blog-more.cr-blog-more { font-size: 13px; }

  .pkg-desc.pkg-desc,
  .aa-section-sub.aa-section-sub,
  .orig.orig,
  .pkg-features li,
  .aa-included li { font-size: 13px; }
}

@media (max-width: 575px) {
  /* The blog category filter is a long wrapping row of small pills; give each
     one a real touch height and readable text. */
  .blogs-page-section .blog-filter a,
  .blogs-section .blog-filter a,
  .blogs-page-section a[href^="blogs.php"],
  .blogs-page-section a[href*="?cat="] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------
   service.php — one bookable service
   --------------------------------------------------------------------- */
.svc-price {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.svc-price strong {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.svc-price-note {
    font-size: 1.4rem;
    color: var(--text-muted);
}
/* service.php and service-checkout.php, second pass (2026-09-13). The client
   asked for a richer service page and for Buy now to open its own checkout:
   picture and price card, how it works, the write-up, FAQs, other services,
   a closing call to action, a sticky Buy now bar on phones; then a checkout
   with the form beside an order summary. */
.svc-wrap { max-width: 116rem; margin-left: auto; margin-right: auto; }

/* ── picture and price card ─────────────────────────────────────────── */
.svc-top { background: var(--canvas-alt); padding: 2.6rem 0 5.6rem; }
.svc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .8rem;
    margin-bottom: 2rem;
    font-size: 1.3rem;
    color: var(--text-muted);
}
.svc-crumbs a { color: var(--text-muted); text-decoration: none; }
.svc-crumbs a:hover { color: var(--primary); }
.svc-crumbs-here { color: var(--heading); font-weight: 600; }

.svc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3.6rem;
    align-items: start;
}
.svc-hero-grid.no-cover { grid-template-columns: minmax(0, 64rem); justify-content: center; }

.svc-cover {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    overflow: hidden;
    border-radius: 1.4rem;
    background: var(--border);
    box-shadow: 0 2rem 4rem rgba(20, 38, 63, .12);
}
.svc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-save-badge {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    padding: .6rem 1.3rem;
    border-radius: 99rem;
    background: #e03131;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 .6rem 1.4rem rgba(224, 49, 49, .32);
}

.svc-price-card {
    position: sticky;
    top: 11rem;
    padding: 3rem 2.8rem;
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    background: var(--white);
    box-shadow: 0 2rem 4rem rgba(20, 38, 63, .08);
}
.svc-kicker {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-deep);
}
.svc-title { margin: 0 0 1.2rem; font-size: 3rem; line-height: 1.2; color: var(--heading); }
.svc-lead { margin: 0 0 2rem; font-size: 1.55rem; line-height: 1.7; color: var(--text-muted); }

.svc-cost {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem 1.2rem;
    margin-bottom: 2.2rem;
    padding: 1.8rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.svc-cost strong { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--heading); }
.svc-cost del { font-size: 1.7rem; color: var(--text-muted); }
.svc-save {
    padding: .3rem .9rem;
    border-radius: 99rem;
    background: #ebfbee;
    color: #2b8a3e;
    font-size: 1.25rem;
    font-weight: 700;
}
.svc-cost-note { flex-basis: 100%; margin: 0; font-size: 1.35rem; color: var(--text-muted); }
.svc-buy { display: flex; width: 100%; justify-content: center; }

.svc-assure { display: grid; gap: 1.1rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.svc-assure li { display: flex; align-items: center; gap: 1rem; font-size: 1.4rem; color: var(--text); }
.svc-assure i {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--accent-deep);
    font-size: 1.25rem;
}

/* ── shared section headings ────────────────────────────────────────── */
.svc-section-title { margin: 0 0 1rem; text-align: center; font-size: 3rem; color: var(--heading); }
.svc-section-title.svc-section-left { text-align: left; font-size: 2.6rem; margin-bottom: 2rem; }
.svc-section-sub { max-width: 60rem; margin: 0 auto 4rem; text-align: center; font-size: 1.55rem; color: var(--text-muted); }

/* ── how it works ───────────────────────────────────────────────────── */
.svc-how { padding: 6.4rem 0; background: var(--primary-bg); }
.svc-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.svc-how-step {
    position: relative;
    padding: 3rem 2.4rem 2.6rem;
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    background: var(--white);
}
.svc-how-no {
    position: absolute;
    top: 1.6rem;
    right: 2.2rem;
    font-size: 4.4rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(20, 38, 63, .07);
}
.svc-how-icon {
    width: 5.2rem;
    height: 5.2rem;
    margin-bottom: 1.8rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--accent-deep);
    font-size: 2.2rem;
}
.svc-how-step h3 { margin: 0 0 .8rem; font-size: 1.9rem; color: var(--heading); }
.svc-how-step p { margin: 0; font-size: 1.45rem; line-height: 1.7; color: var(--text-muted); }

/* ── write-up and FAQs ──────────────────────────────────────────────── */
.svc-main { padding: 6.4rem 0; background: var(--white); }
.svc-main .svc-wrap { max-width: 82rem; }
.svc-body { font-size: 1.6rem; line-height: 1.75; color: var(--text); }
.svc-body > :first-child { margin-top: 0; }
.svc-faq-title { margin: 4.4rem 0 2rem; font-size: 2.6rem; color: var(--heading); }
.svc-wrap > .svc-faq-title:first-child { margin-top: 0; }

.svc-faq { border: 1px solid var(--border); border-radius: .8rem; background: var(--white); }
.svc-faq details + details { border-top: 1px solid var(--border); }
.svc-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.8rem 2rem;
    cursor: pointer;
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--heading);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.svc-faq summary i { flex: 0 0 auto; font-size: 1.3rem; color: var(--text-muted); transition: transform .2s; }
.svc-faq details[open] summary i { transform: rotate(180deg); }
.svc-faq-answer { padding: 0 2rem 1.8rem; font-size: 1.55rem; line-height: 1.75; color: var(--text); }
/* A part the admin has not written yet: a quiet line in its place. */
.svc-empty {
    margin: 0;
    padding: 1.8rem 2rem;
    border: 1px dashed var(--border);
    border-radius: .8rem;
    font-size: 1.55rem;
    line-height: 1.7;
    color: var(--text-muted);
}
.svc-empty a { color: var(--primary); font-weight: 600; }

/* ── other services ─────────────────────────────────────────────────── */
.svc-related { padding: 6.4rem 0; background: var(--canvas-alt); }
.svc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.svc-related-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    background: var(--white);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.svc-related-card:hover { transform: translateY(-.4rem); box-shadow: 0 1.6rem 3.2rem rgba(20, 38, 63, .12); }
.svc-related-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.svc-related-body { display: flex; flex-direction: column; gap: .6rem; padding: 2rem 2.2rem 2.2rem; }
.svc-related-body strong { font-size: 1.8rem; line-height: 1.35; color: var(--heading); }
.svc-related-price { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.svc-related-more { margin-top: .4rem; font-size: 1.35rem; font-weight: 600; color: var(--accent-deep); }

/* ── closing call to action ─────────────────────────────────────────── */
.svc-cta {
    padding: 6.4rem 0;
    text-align: center;
    background: linear-gradient(120deg, var(--primary-darker), var(--primary));
}
.svc-cta h2 { margin: 0 0 1rem; font-size: 3rem; color: #fff; }
.svc-cta p { margin: 0 0 2.6rem; font-size: 1.7rem; color: rgba(255, 255, 255, .82); }
.svc-cta p strong { color: #fff; }
.svc-cta p del { margin-left: .6rem; color: rgba(255, 255, 255, .6); }

/* ── sticky Buy now bar (phones) ────────────────────────────────────── */
.svc-sticky { display: none; }
@media (max-width: 991px) {
    .svc-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        padding: 1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--white);
        box-shadow: 0 -1rem 2.4rem rgba(20, 38, 63, .1);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    .svc-sticky.is-on { transform: translateY(0); visibility: visible; transition: transform .25s ease; }
    .svc-sticky-price { min-width: 0; }
    .svc-sticky-price strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--heading); }
    .svc-sticky-price span {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 1.2rem;
        color: var(--text-muted);
    }
    .svc-sticky .site-btn { flex: none; }
    body.svc-sticky-on { padding-bottom: 8rem; }
}

/* ── checkout ───────────────────────────────────────────────────────── */
.svc-checkout { padding: 3rem 0 7rem; background: var(--canvas-alt); }
.svc-back {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.6rem;
    font-size: 1.4rem;
    color: var(--text-muted);
    text-decoration: none;
}
.svc-back:hover { color: var(--primary); }
.svc-checkout-title { margin: 0 0 1.6rem; font-size: 3.2rem; color: var(--heading); }

.svc-steps { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: 0 0 3rem; padding: 0; list-style: none; }
.svc-steps li { display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; font-weight: 600; color: var(--text-muted); }
.svc-steps li + li::before { content: ''; width: 3rem; height: 2px; margin-right: .6rem; background: var(--border); }
.svc-steps li span {
    width: 2.8rem;
    height: 2.8rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    font-size: 1.25rem;
}
.svc-steps li.is-current { color: var(--heading); }
.svc-steps li.is-current span { border-color: var(--accent-deep); background: var(--accent-deep); color: #fff; }

.svc-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.svc-checkout-submit { display: flex; width: 100%; justify-content: center; margin-top: 2.6rem; }
.svc-checkout-fine { margin: 1.2rem 0 0; text-align: center; font-size: 1.35rem; color: var(--text-muted); }

.svc-summary-card {
    position: sticky;
    top: 11rem;
    padding: 2.6rem;
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    background: var(--white);
    box-shadow: 0 2rem 4rem rgba(20, 38, 63, .08);
}
.svc-summary-title { margin: 0 0 1.8rem; font-size: 1.9rem; color: var(--heading); }
.svc-summary-item { display: flex; align-items: center; gap: 1.4rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--border); }
.svc-summary-item img { flex: none; width: 8.4rem; height: 6.4rem; object-fit: cover; border-radius: .8rem; }
.svc-summary-item strong { display: block; font-size: 1.6rem; line-height: 1.35; color: var(--heading); }
.svc-summary-item span { font-size: 1.3rem; color: var(--text-muted); }
.svc-summary-lines { margin: 1.4rem 0 0; }
.svc-summary-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; font-size: 1.45rem; color: var(--text); }
.svc-summary-lines dt { font-weight: 400; }
.svc-summary-lines dd { margin: 0; font-weight: 600; }
.svc-summary-lines .is-saving dd { color: #2b8a3e; }
.svc-summary-lines .is-total { margin-top: .8rem; padding-top: 1.4rem; border-top: 1px dashed var(--border); font-size: 1.8rem; }
.svc-summary-lines .is-total dd { font-weight: 800; color: var(--heading); }
.svc-summary-card .svc-assure { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--border); }

/* ── smaller screens ────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .svc-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
    .svc-price-card { position: static; }
    .svc-how-grid, .svc-related-grid { grid-template-columns: 1fr; }
    .svc-checkout-grid { grid-template-columns: 1fr; }
    .svc-summary { order: -1; }
    .svc-summary-card { position: static; }
}
@media (min-width: 576px) and (max-width: 991px) {
    .svc-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .svc-top { padding: 1.6rem 0 3.4rem; }
    .svc-price-card { padding: 2.2rem 1.8rem; }
    .svc-title { font-size: 2.5rem; }
    .svc-cost strong { font-size: 3rem; }
    .svc-section-title { font-size: 2.5rem; }
    .svc-how, .svc-main, .svc-related, .svc-cta { padding: 4.4rem 0; }
    .svc-faq summary { padding: 1.6rem; font-size: 1.55rem; }
    .svc-faq-answer { padding: 0 1.6rem 1.6rem; }
    .svc-checkout-title { font-size: 2.6rem; }
    .svc-summary-card { padding: 2rem 1.8rem; }
}

.svc-booking-list { display: grid; gap: 1.6rem; }
.svc-booking {
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    padding: 1.8rem 2rem;
    background: var(--white);
}
.svc-booking-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.svc-booking-head h3 { font-size: 1.7rem; font-weight: 700; margin: 0; color: var(--heading); }
.svc-booking-meta { font-size: 1.3rem; color: var(--text-muted); margin: .6rem 0 0; }
.svc-booking-reply {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 1.5rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

/* A smaller site button, for use inside a line of text. */
.site-btn-sm {
    padding: .8rem 1.8rem;
    font-size: 1.3rem;
}

/* =====================================================================
   about.php — redesign following the layout the client chose
   ---------------------------------------------------------------------
   Structure is taken from the reference: a full-bleed quote hero, a
   two-tone display heading beside an ornament divider, solid vision and
   mission cards, alternating story rows with corner-bracketed photos, a
   full-width quote band, a grid of what we offer, and wide CTA cards.

   The colours stay on this site's own navy and cyan rather than the warm
   browns of the reference, because the header and footer above and below
   are not changing and an amber page between them would read as a
   different website.
   ===================================================================== */

/* -- shared bits ---------------------------------------------------- */
.ab-kicker {
    
    font-size: 2.4rem;
    font-style: italic;
    color: var(--accent-deep);
    text-align: center;
    margin: 0 0 .6rem;
}
.ab-display {
    
    font-weight: 700;
    line-height: 1.12;
    color: var(--heading);
    margin: 0;
}
.ab-display em { font-style: normal; color: var(--accent-deep); }
.ab-display-mid { font-size: clamp(3rem, 4vw, 4.6rem); }

/* The short centred line the reference puts under a section's ornament. */
.ab-intro {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.8;
    color: var(--text);
}

/* The rule that separates a heading from its text: a short line, a diamond,
   then a longer line, laid across rather than down. It reads as a divider at a
   glance, which the stacked vertical version did not — that one looked like a
   stray mark beside the text. */
/* The section ornament: one short solid bar in the accent colour. The footer
   headings already sit on a bar like this, so the page reads as one family.
   The element IS the bar, so the markup is an empty div and anything left
   inside it (an old icon, say) is hidden rather than stacked on top. */
.ab-orn {
    display: block;
    width: 6rem;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
    margin: 2.2rem 0;
}
.ab-orn > * { display: none; }

/* Centred under a section heading. */
.ab-orn.ab-orn-center { margin-left: auto; margin-right: auto; }

/* -- 1. hero -------------------------------------------------------- */
/* As in the reference: the photograph is the background of the whole band and
   bleeds off the right edge, with a gradient across the left so the words sit
   on solid colour.

   The portrait we have is square, so it is sized to the band's height and
   anchored right rather than stretched across the full width — stretching a
   1:1 image over a wide band crops the face in half. The page carries the file
   name in --hero-img so the picture can change without touching this rule. */
.ab-hero {
    position: relative;
    min-height: 56rem;
    display: flex;
    align-items: center;
    background-color: var(--primary-darker);
    background-image: var(--hero-img);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 125%;
    overflow: hidden;
}
/* The gradient is measured from the RIGHT edge, not as a share of the width,
   so the fade always lands across the photograph itself. Anchored to the left
   it left a hard vertical seam where the picture began on wide screens. */
.ab-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--primary-darker) 0,
        var(--primary-darker) calc(100% - 62rem),
        rgba(19,33,57,.92)    calc(100% - 52rem),
        rgba(19,33,57,.55)    calc(100% - 38rem),
        rgba(19,33,57,.10)    calc(100% - 20rem),
        rgba(19,33,57,0)      100%);
}
.ab-hero > .container { position: relative; z-index: 2; }
.ab-hero-inner { max-width: 58rem; }
.ab-hero h1 {
    
    font-size: clamp(3.8rem, 5.6vw, 6.4rem);
    font-weight: 700;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 1.8rem;
}
.ab-hero p {
    font-size: 1.8rem;
    line-height: 1.7;
    color: rgba(255,255,255,.9);
    margin: 0;
    max-width: 46rem;
}

/* -- 2. bands ------------------------------------------------------- */
.ab-band      { padding: 8rem 0; background: var(--canvas); }
.ab-band-tint { padding: 8rem 0; background: var(--primary-bg); }
/* The reference keeps this section deliberately narrow and staggered: the
   heading sits high on the left in a tight measure, and the ornament with its
   paragraph starts well below it on the right. The white space around the block
   is part of the design, so the block is much narrower than the page. */
.ab-phil {
    max-width: 86rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: start;
}
/* Sized so the heading breaks over about three lines, as it does in the
   reference, rather than one word per line. */
.ab-philosophy .ab-display {
    font-size: clamp(3rem, 3.4vw, 4.4rem);
    padding-right: 3rem;
}
.ab-phil-body { padding-top: 9rem; }
.ab-philosophy .ab-orn { margin: 0 0 2.4rem; }
.ab-philosophy p {
    font-size: 1.75rem;
    line-height: 1.8;
    color: var(--text);
    margin: 0;
}
@media (max-width: 767px) {
    .ab-phil { grid-template-columns: 1fr; max-width: none; }
    .ab-phil-body { padding-top: 2.4rem; }
    .ab-philosophy .ab-display { padding-right: 0; }
}

/* -- 3. vision / mission -------------------------------------------- */
.ab-vm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.ab-vm-card {
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: .6rem;
    padding: 3.2rem 3rem;
    min-height: 34rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.ab-vm-card i { font-size: 4.4rem; color: rgba(255,255,255,.92); }
.ab-vm-card h3 {
    
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #fff;
}
.ab-vm-card p { font-size: 1.55rem; line-height: 1.75; margin: 0; color: rgba(255,255,255,.9); }

/* -- 4. story rows with framed photos -------------------------------- */
.ab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ab-row + .ab-row { margin-top: 7rem; }
.ab-row-flip .ab-row-media { order: -1; }
.ab-row h3 {
    
    font-size: clamp(2.8rem, 3.4vw, 4rem);
    font-weight: 700;
    color: var(--heading);
    margin: 0;
    line-height: 1.15;
}
.ab-row p { font-size: 1.6rem; line-height: 1.85; color: var(--text); margin: 0; }

/* corner brackets, as in the reference */
.ab-frame { position: relative; padding: 1.2rem; }
.ab-frame img { width: 100%; height: auto; display: block; border-radius: .3rem; }
.ab-frame::before,
.ab-frame::after {
    content: '';
    position: absolute;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--accent);
    pointer-events: none;
}
.ab-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ab-frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* -- 5. credentials -------------------------------------------------- */
.ab-creds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 3rem;
    margin: 2.6rem 0 0;
    padding: 0;
}
.ab-creds li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--heading);
    list-style: none;
}
.ab-creds i { color: var(--accent); font-size: 1.1rem; margin-top: .45rem; flex: 0 0 auto; }

/* -- 6. quote band --------------------------------------------------- */
.ab-quote {
    position: relative;
    background: linear-gradient(105deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent-deep) 100%);
    overflow: hidden;
    min-height: 46rem;
    display: flex;
    align-items: center;
}
.ab-quote-photo {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 46%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0, #000 38%);
}
.ab-quote-inner { position: relative; z-index: 2; max-width: 56rem; color: #fff; }
.ab-quote-mark {
    
    font-size: 7rem;
    line-height: .6;
    color: rgba(255,255,255,.42);
    display: block;
    margin-bottom: 1.4rem;
}
.ab-quote blockquote {
    font-size: clamp(2rem, 2.4vw, 2.8rem);
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
    color: #fff;
}
.ab-quote .ab-orn { margin: 2.6rem 0 1.4rem; }
.ab-quote .ab-orn { background: #fff; }
.ab-quote cite {
    
    font-style: normal;
    font-weight: 700;
    font-size: 2.2rem;
    color: #fff;
}

/* -- 7. what we offer ------------------------------------------------ */
.ab-offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.ab-offer-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ab-offer-card figure { margin: 0; aspect-ratio: 16 / 11; overflow: hidden; }
.ab-offer-card img { width: 100%; height: 100%; object-fit: cover; }
.ab-offer-body { padding: 2.2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.ab-offer-body h3 {
    
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 .8rem;
}
.ab-offer-body p { font-size: 1.45rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 1.8rem; }
.ab-offer-link {
    margin-top: auto;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: .4rem;
}
.ab-offer-link:hover { color: var(--primary); }

/* -- 8. closing CTA cards -------------------------------------------- */
/* Two cards across, not stacked. */
.ab-cta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.ab-cta-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 26rem;
    align-items: stretch;
    border: 1px solid var(--accent);
    border-radius: .4rem;
    overflow: hidden;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.ab-cta-text { padding: 3.4rem 3rem; color: #fff; align-self: center; }
.ab-cta-text h3 {
    
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
}
.ab-cta-text p { font-size: 1.5rem; line-height: 1.75; color: rgba(255,255,255,.9); margin: 0 0 2rem; }
.ab-cta-text a { color: #fff; font-weight: 600; font-size: 1.5rem; }
.ab-cta-text a i { margin-left: .5rem; font-size: 1.2rem; }
.ab-cta-card figure { margin: 0; height: 22rem; }
.ab-cta-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- responsive ------------------------------------------------------- */
@media (max-width: 991px) {
    .ab-vm, .ab-offer, .ab-row { grid-template-columns: 1fr; }
    /* On a phone the photo would sit behind the words, so the band goes back to
       flat colour and the picture steps aside. */
    .ab-hero { background-image: none; }
    .ab-hero::before {
        background: linear-gradient(105deg,
            var(--primary-darker) 0%, var(--primary-dark) 55%, var(--primary) 100%);
    }
    .ab-row { gap: 3rem; }
    .ab-row + .ab-row { margin-top: 5rem; }
    .ab-row-flip .ab-row-media { order: 0; }
    .ab-band, .ab-band-tint { padding: 6rem 0; }
    .ab-hero { min-height: 46rem; }
    .ab-quote { min-height: 0; padding: 6rem 0; }
    .ab-quote-photo { display: none; }
    .ab-quote-inner { max-width: none; }
    .ab-cta { grid-template-columns: 1fr; }
    .ab-cta-card figure { height: 24rem; }
}
@media (max-width: 575px) {
    .ab-creds { grid-template-columns: 1fr; }
    .ab-vm-card { min-height: 0; padding: 2.6rem 2.2rem; }
    .ab-hero p { font-size: 1.6rem; }
}

/* =====================================================================
   personal-consultation.php — redesign to the layout the client chose
   ---------------------------------------------------------------------
   Reference order: a hero with headline, CTA and a strip of figures; a
   trust strip; "not just a consultation" beside a framed photo; a grid of
   reasons; four life areas with the questions people actually bring; the
   consultation cards with mode / duration / type toggles where the price
   follows the choice; what you get beside a photo; FAQ; and the request
   form the page already had.

   Colours stay on this site's navy and cyan, as on the About page, since
   the header and footer are unchanged.
   ===================================================================== */

/* -- 1. hero --------------------------------------------------------- */
/* Same treatment as the About hero: the photograph is the background of the
   band and bleeds off the right edge, with a gradient across the left so the
   words sit on solid colour. The page names the file in --hero-img. */
.pc-hero {
    position: relative;
    background-color: var(--primary-darker);
    background-image: var(--hero-img);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 125%;
    padding: 7rem 0 5rem;
    overflow: hidden;
}
.pc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--primary-darker) 0,
        var(--primary-darker) calc(100% - 62rem),
        rgba(19,33,57,.92)    calc(100% - 52rem),
        rgba(19,33,57,.55)    calc(100% - 38rem),
        rgba(19,33,57,.10)    calc(100% - 20rem),
        rgba(19,33,57,0)      100%);
}
.pc-hero > .container { position: relative; z-index: 2; }
.pc-hero-grid { max-width: 80rem; }
.pc-hero h1 {
    
    font-size: clamp(3.6rem, 5.2vw, 6rem);
    font-weight: 700;
    line-height: 1.06;
    color: #fff;
    margin: 0 0 1.6rem;
}
.pc-hero-sub {
    font-size: 1.8rem;
    line-height: 1.65;
    color: rgba(255,255,255,.9);
    margin: 0 0 2.6rem;
    max-width: 48rem;
}
.pc-hero-photo {
    width: 100%;
    max-width: 40rem;
    margin-left: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: .4rem;
    -webkit-mask-image: linear-gradient(100deg, transparent 0, #000 24%);
            mask-image: linear-gradient(100deg, transparent 0, #000 24%);
}

/* the figures under the CTA, divided by hairlines as in the reference */
.pc-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 4rem;
}
.pc-figure {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 0 2.6rem;
    border-left: 1px solid rgba(255,255,255,.22);
}
.pc-figure:first-child { padding-left: 0; border-left: 0; }
.pc-figure-ring {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.pc-figure-ring i { color: #fff; font-size: 1.9rem; }
.pc-figure b {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.pc-figure span { font-size: 1.4rem; color: rgba(255,255,255,.82); line-height: 1.35; }

/* -- 2. trust strip --------------------------------------------------- */
.pc-trust {
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border);
    padding: 2.2rem 0;
}
.pc-trust ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.6rem 3rem;
    margin: 0;
    padding: 0;
}
.pc-trust li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--primary);
}
.pc-trust i { color: var(--accent); font-size: 1.3rem; }

/* -- 3. bands and headings -------------------------------------------- */
.pc-band      { padding: 8rem 0; background: var(--canvas); }
.pc-band-tint { padding: 8rem 0; background: var(--primary-bg); }
.pc-h2 {
    
    font-weight: 700;
    font-size: clamp(3rem, 4vw, 4.6rem);
    line-height: 1.14;
    color: var(--heading);
    margin: 0;
}
.pc-h2 em { font-style: normal; color: var(--accent-deep); }
.pc-lead { font-size: 1.7rem; line-height: 1.8; color: var(--text); margin: 0 0 1.6rem; }
.pc-lead:last-of-type { margin-bottom: 2.4rem; }

/* -- 4. reason cards --------------------------------------------------- */
.pc-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.pc-reason {
    background: var(--secondary-light);
    border-radius: .5rem;
    padding: 3rem 2.8rem;
}
.pc-reason-ico {
    width: 6rem; height: 6rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.8rem;
}
.pc-reason-ico i { font-size: 2.4rem; color: var(--accent-deep); }
.pc-reason h3 {
    
    font-size: 2.4rem; font-weight: 700;
    color: var(--heading); margin: 0 0 .9rem;
}
.pc-reason p { font-size: 1.5rem; line-height: 1.75; color: var(--text); margin: 0; }

/* -- 5. life areas ----------------------------------------------------- */
.pc-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.pc-area {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: .5rem;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.pc-area figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.pc-area img { width: 100%; height: 100%; object-fit: cover; }
/* No photo exists for these four themes that is both on-subject and free of
   burnt-in text, so the card leads with an icon instead. Swap back to figures
   once four themed photographs are supplied. */
.pc-area-ico {
    height: 11rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.pc-area-ico i { font-size: 3.6rem; color: #fff; }
.pc-area-body { padding: 2rem 1.8rem; }
.pc-area h3 {
    
    font-size: 2.1rem; font-weight: 700;
    color: var(--heading); margin: 0 0 1.2rem;
}
.pc-area ul { margin: 0; padding: 0; display: grid; gap: 1rem; }
.pc-area li {
    list-style: none;
    display: flex; gap: .8rem;
    font-size: 1.4rem; line-height: 1.6; color: var(--text);
}
.pc-area li i { color: var(--accent); font-size: .9rem; margin-top: .55rem; flex: 0 0 auto; }

/* -- 6. consultation cards --------------------------------------------- */
.pc-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
.pc-plan {
    background: var(--white);
    border: 1px solid var(--accent);
    border-radius: .5rem;
    padding: 2.6rem;
}
.pc-plan + .pc-plan { margin-top: 2.4rem; }
.pc-plan-head { display: flex; align-items: center; gap: 1.4rem; }
.pc-plan-head img {
    width: 6.4rem; height: 6.4rem;
    border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.pc-plan-head h3 {
    
    font-size: 2.6rem; font-weight: 700;
    color: var(--heading); margin: 0;
}
.pc-plan hr { border: 0; border-top: 1px solid var(--accent); margin: 1.8rem 0; }
.pc-plan-note { font-size: 1.45rem; color: var(--text); margin: 0 0 1.8rem; }

.pc-opts { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-bottom: 1.8rem; }
.pc-opt-label {
    display: block;
    font-size: 1.4rem; font-weight: 700;
    color: var(--heading); margin-bottom: .7rem;
}
.pc-pills { display: inline-flex; border: 1px solid var(--accent); border-radius: 2.4rem; overflow: hidden; }
.pc-pills button {
    border: 0; background: transparent;
    font: inherit; font-size: 1.35rem; font-weight: 600;
    color: var(--accent-deep);
    padding: .7rem 1.6rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.pc-pills button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.pc-pills button:not([aria-pressed="true"]):hover { background: var(--secondary-light); }
.pc-pill-static {
    display: inline-block;
    background: var(--primary); color: #fff;
    font-size: 1.35rem; font-weight: 600;
    padding: .7rem 1.6rem; border-radius: 2.4rem;
}

/* What a Zoom call adds, under the Call / Zoom choice (client, 2026-09-23). */
.pc-opt-note { display: block; font-size: 1.25rem; color: var(--muted, #6b6b6b); margin-top: .6rem; }

.pc-includes { margin: 0 0 2rem; padding-left: 1.8rem; }
.pc-includes li { font-size: 1.45rem; line-height: 1.7; color: var(--text); margin-bottom: .5rem; }
.pc-plan-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.6rem; flex-wrap: wrap;
}
.pc-price { font-size: 2rem; font-weight: 700; color: var(--heading); margin: 0; }
.pc-price span { color: var(--accent-deep); }

/* the tall face-to-face card on the right */
.pc-f2f { background: var(--white); border: 1px solid var(--accent); border-radius: .5rem; padding: 2.6rem; }
.pc-f2f figure { margin: 0 0 1.8rem; }
.pc-f2f img { width: 100%; border-radius: .4rem; display: block; }
.pc-f2f h3 {
    
    font-size: 2.4rem; font-weight: 700; color: var(--heading);
    margin: 0 0 .8rem; text-align: center;
}
.pc-f2f > p { font-size: 1.45rem; line-height: 1.7; color: var(--text); text-align: center; margin: 0 0 1.8rem; }
.pc-f2f h4 {
    
    font-size: 1.9rem; font-weight: 700; color: var(--heading); margin: 0 0 1rem;
}
.pc-checks { margin: 0 0 1.8rem; padding: 0; display: grid; gap: .8rem; }
.pc-checks li {
    list-style: none; display: flex; gap: .9rem;
    font-size: 1.45rem; line-height: 1.6; color: var(--text);
}
.pc-checks i { color: var(--success); font-size: 1.2rem; margin-top: .3rem; flex: 0 0 auto; }
.pc-detail { font-size: 1.45rem; color: var(--text); margin: 0 0 .6rem; display: flex; gap: .8rem; }
.pc-detail i { color: var(--accent-deep); margin-top: .3rem; }
.pc-fineprint {
    font-size: 1.35rem; color: var(--text-muted);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 1rem 0; margin: 1.6rem 0;
}

/* -- 7. what you get --------------------------------------------------- */
.pc-get { margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.pc-get li {
    list-style: none; display: flex; gap: 1rem;
    font-size: 1.6rem; line-height: 1.7; color: var(--text);
}
.pc-get i { color: var(--accent); font-size: 1.1rem; margin-top: .55rem; flex: 0 0 auto; }

/* -- 8. FAQ ------------------------------------------------------------ */
.pc-faq { max-width: 82rem; margin-left: auto; margin-right: auto; }
.pc-faq details { border-bottom: 1px solid var(--border); padding: 1.8rem 0; }
.pc-faq summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    cursor: pointer;
    font-size: 1.7rem; font-weight: 600; color: var(--heading);
}
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::after {
    content: '\002B';
    font-size: 2.2rem; font-weight: 400; color: var(--accent-deep);
    line-height: 1; flex: 0 0 auto;
}
.pc-faq details[open] summary::after { content: '\2212'; }
.pc-faq p { font-size: 1.55rem; line-height: 1.8; color: var(--text); margin: 1.2rem 0 0; }

/* -- responsive --------------------------------------------------------- */
@media (max-width: 1199px) {
    .pc-areas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .pc-reasons, .pc-plans { grid-template-columns: 1fr; }
    .pc-hero { background-image: none; }
    .pc-hero::before {
        background: linear-gradient(105deg,
            var(--primary-darker) 0%, var(--primary-dark) 55%, var(--primary) 100%);
    }
    .pc-hero-grid { max-width: none; }
    .pc-band, .pc-band-tint { padding: 6rem 0; }
    .pc-figure { padding: 0 1.8rem; }
}
/* On a phone the page opens straight at the sections that do the selling: the
   hero band and the trust strip are hidden below 768px on the client's
   instruction. They stay in the markup, so the <h1> is still there for a
   crawler -- it is only the phone layout that skips them. */
@media (max-width: 767px) {
    .pc-hero,
    .pc-trust { display: none; }
}
@media (max-width: 575px) {
    .pc-areas { grid-template-columns: 1fr; }
    .pc-figures { gap: 1.8rem; }
    .pc-figure { padding: 0; border-left: 0; flex: 1 1 100%; }
    .pc-trust ul { justify-content: flex-start; }
    .pc-opts { gap: 1.6rem; }
}

/* Free single card readings: who is signed in, or the offer to sign in, above
   the name and email (includes/cr_account_note.php). */
.cr-account {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border: 1px dashed var(--border);
    border-radius: 1rem;
    background: var(--primary-bg);
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--text);
}
.cr-account i { margin-top: .35rem; color: var(--accent-deep); }
.cr-account a { font-weight: 700; color: var(--accent-deep); }
.cr-account-in { border-style: solid; border-color: #b2f2bb; background: #ebfbee; }
.cr-account-in i { color: #2b8a3e; }

/* Paid reading popup, 1 Row or 3 Row (includes/paid_reading_modal.php): opened
   from the homepage hero and the Paid Tarot Reading card. */
.prm .prm-dialog { max-width: 64rem; }
.prm .prm-head { align-items: flex-start; gap: 1.2rem; padding: 2.2rem 2.4rem 1.6rem; }
.prm .prm-title { margin: 0; font-size: 2.2rem; font-weight: 800; color: var(--heading); }
.prm .prm-sub { margin: .4rem 0 0; font-size: 1.45rem; color: var(--text-muted); }
.prm .prm-body { padding: 2.2rem 2.4rem 2.4rem; }
.prm-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.prm-opt {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 2rem;
    border: 1.5px solid var(--border);
    border-radius: 1.4rem;
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.prm-opt:hover,
.prm-opt:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 .9rem 2.4rem rgba(41,69,125,.16);
    transform: translateY(-.3rem);
    color: var(--text);
}
.prm-opt:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
/* A small picture of the spread: one bar per row of cards. */
.prm-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    width: 5.6rem;
    height: 5.6rem;
    padding: 1.1rem;
    border-radius: 1.2rem;
    background: var(--primary-bg);
}
.prm-rows span { display: block; height: .8rem; border-radius: .4rem; background: var(--primary); }
.prm-rows span:nth-child(2) { background: var(--accent-deep); }
.prm-opt-title { display: block; font-size: 1.9rem; font-weight: 700; color: var(--heading); }
.prm-opt-desc { display: block; margin-top: .4rem; font-size: 1.45rem; line-height: 1.6; color: var(--text-muted); }
.prm-opt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
}
.prm-opt-price { font-size: 2.2rem; font-weight: 800; color: var(--primary); }
.prm-opt-go { font-size: 1.45rem; font-weight: 700; color: var(--accent-deep); white-space: nowrap; }
.prm-opt-go i { margin-left: .4rem; transition: transform .2s; }
.prm-opt:hover .prm-opt-go i { transform: translateX(.3rem); }
.prm-note { margin: 1.8rem 0 0; text-align: center; font-size: 1.45rem; color: var(--text-muted); }
.prm-note a { font-weight: 700; color: var(--accent-deep); }
@media (max-width: 575px) {
    .prm-options { grid-template-columns: 1fr; }
    .prm .prm-head,
    .prm .prm-body { padding-left: 1.8rem; padding-right: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .prm-opt, .prm-opt-go i { transition: none; }
    .prm-opt:hover, .prm-opt:focus-visible { transform: none; }
}

/* Course page alignment (course-detail.php; client, 2026-09-14, reported on
   /course/9-coin-predictions/). Checked by tests/course-align-check.js.
   Written .foo.foo like the course rules near the top, which they correct. */

/* About This Course: admin HTML. Long words and pasted links wrap inside the
   card instead of running out of it; pictures and tables stay inside too. */
.cd-desc.cd-desc { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
/* One line-height for the whole write-up: .body-16-loose set 1.9 on the box
   and 1.8 on its paragraphs, so lines sat unevenly (client, 2026-09-21). */
.cd-desc.cd-desc,
.cd-desc.cd-desc p,
.cd-desc.cd-desc li { font-size: 1.6rem; line-height: 1.8; }
.cd-desc.cd-desc p { margin-top: 0; }
.cd-desc.cd-desc p { margin-bottom: 1.2rem; }
.cd-desc.cd-desc > :last-child { margin-bottom: 0; }
.cd-desc.cd-desc img { max-width: 100%; height: auto; border-radius: .8rem; }
.cd-desc.cd-desc table { display: block; max-width: 100%; overflow-x: auto; }

/* What You'll Learn and Requirements now match About This Course: 16px (they
   were 15px and 19px), set on .course-detail-div5 / -ul8 / -i6 at the top.
   Requirements were line-height 2.2, which split one wrapped item into lines as
   far apart as two separate items; the gap now sits between items instead.
   The li needs its own size: new-style.css gives every li 1.9rem. */
.course-detail-ul8.course-detail-ul8 li { font-size: 1.6rem; margin-bottom: .9rem; overflow-wrap: break-word; }
.course-detail-ul8.course-detail-ul8 li:last-child { margin-bottom: 0; }

/* This Course Includes: Font Awesome icons are not all the same width, so each
   label started at a different x. One fixed icon column lines them up, and a
   label that wraps keeps its icon beside the first line. */
.course-enroll-card .course-includes.course-includes { margin-bottom: 0; }
.course-enroll-card .course-includes.course-includes li {
    font-size: 1.6rem;
    line-height: 1.5;
    align-items: flex-start;
    gap: 1rem;
}
.course-enroll-card .course-includes.course-includes li i {
    width: 2rem;
    margin-top: .25em;
    text-align: center;
}
.course-enroll-card .course-includes.course-includes li:last-child { border-bottom: 0; }

/* Phones: the root drops to 8px below 576px (see "Mobile refinements"), which
   shrank this text to 12-13px; state the size meant instead. */
@media (max-width: 575px) {
    .cd-desc.cd-desc,
    .cd-desc.cd-desc p,
    .cd-desc.cd-desc li,
    .course-detail-div5.course-detail-div5,
    .course-detail-ul8.course-detail-ul8 li,
    .course-enroll-card .course-includes.course-includes li { font-size: 15px; }
    .course-detail-div13.course-detail-div13 { font-size: 13px; }
}

/* My Readings (my-readings.php; UX review #2): one account card per reading. */
.mr-list { display: grid; gap: 2rem; }
.mr-card { margin: 0; }
.mr-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mr-body { padding: 2rem 2.4rem 2.4rem; display: grid; gap: 1.4rem; }
.mr-body > p { margin: 0; }
.mr-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: 1.35rem; color: var(--text-muted); }
.mr-meta span:first-child { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.mr-note { font-size: 1.45rem; color: var(--text-muted); line-height: 1.6; }
.mr-result { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.mr-result img { width: 9rem; height: auto; border-radius: .8rem; box-shadow: 0 .3rem 1rem rgba(0,0,0,.12); }
.mr-result h4 { margin: 0 0 .6rem; font-size: 1.8rem; color: var(--heading); }
.mr-result h5 { margin: 1.2rem 0 .4rem; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-deep); }
.mr-result p { margin: 0; font-size: 1.5rem; line-height: 1.7; color: var(--text); }
.mr-reply { border-left: 3px solid var(--accent); background: var(--primary-bg); padding: 1.4rem 1.6rem; border-radius: .8rem; }
.mr-reply h4 { margin: 0 0 .6rem; font-size: 1.6rem; color: var(--heading); }
.mr-reply p { margin: 0; font-size: 1.5rem; line-height: 1.7; color: var(--text); }
@media (max-width: 575px) {
    .mr-body { padding: 1.6rem; }
    .mr-result { grid-template-columns: 1fr; }
    .mr-result img { width: 8rem; }
    .mr-meta, .mr-note { font-size: 13px; }
    .mr-result p, .mr-reply p { font-size: 15px; }
}

/* Contact form (contact.php; UX review #8, #17): visible labels, and what the
   visitor was booking when they arrived from a Book button. */
.ct-label { display: block; margin-bottom: .6rem; font-size: 1.45rem; font-weight: 600; color: var(--heading); }
.ct-label .req { color: #c0392b; }
.ct-label small { font-weight: 400; color: var(--text-muted); }
.ct-about {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1.2rem;
    margin: 0 0 2rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--primary-bg);
}
.ct-about span { font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ct-about strong { font-size: 1.7rem; color: var(--heading); }
@media (max-width: 575px) {
    .ct-label { font-size: 14px; }
    .ct-about span { font-size: 12px; }
    .ct-about strong { font-size: 16px; }
}

/* "Free Reading" chooser (includes/free_reading_modal.php; UX review #20): the
   paid popup's layout, with an icon in place of the row picture. */
.frm-ico {
    display: grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1.2rem;
    background: var(--primary-bg);
    font-size: 2.2rem;
    color: var(--primary);
}

/* Card selection step (includes/row_reading_steps.php, assets/js/card-reading.js;
   UX review #23): the rules before the first click, colour dots matching the
   tiles, and Start again. */
.cr-howto {
    margin: 0 0 2rem;
    padding: 1.6rem 2rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--primary-bg);
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--text);
}
.cr-howto-title { margin: 0 0 .6rem; font-size: 1.6rem; font-weight: 700; color: var(--heading); }
.cr-howto ol { display: grid; gap: .4rem; margin: 0; padding-left: 2rem; }
.cr-howto-note { margin: .8rem 0 0; font-size: 1.4rem; color: var(--text-muted); }
.cr-dot { display: inline-block; width: 1.1rem; height: 1.5rem; margin: 0 .4rem 0 .2rem; border-radius: .25rem; vertical-align: -.15rem; }
.cr-dot.red    { background: var(--tile-red); }
.cr-dot.blue   { background: var(--tile-blue); }
.cr-dot.yellow { background: var(--tile-yellow); }
.cr-restart-wrap { margin: 1.6rem 0 0; text-align: center; }
.cr-restart {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .8rem 1.8rem;
    border: 1.5px solid var(--primary);
    border-radius: 5rem;
    background: transparent;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}
.cr-restart:hover,
.cr-restart:focus-visible { background: var(--primary-light); }
.cr-restart[hidden] { display: none; }

/* The four steps of a paid reading (includes/reading_steps_bar.php; UX review #24). */
.rr-steps {
    display: grid;
    /* One equal column per step, so 3 steps (1 Row / 3 Row) fill the row like 4 did. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .8rem;
    margin: 0 0 2.4rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.rr-steps li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: .9rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--white);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-muted);
}
.rr-step-no {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--primary-bg);
    font-size: 1.3rem;
    color: var(--primary);
}
.rr-steps li.is-current { border-color: var(--primary); background: var(--primary-bg); color: var(--heading); }
.rr-steps li.is-current .rr-step-no { background: var(--primary); color: #fff; }
.rr-steps li.is-done .rr-step-no { background: #D3F9D8; color: #2B8A3E; }
@media (max-width: 575px) {
    .rr-steps { gap: .4rem; }
    .rr-steps li { flex-direction: column; gap: .3rem; padding: .6rem .3rem; font-size: 11px; text-align: center; }
    .rr-step-no { width: 22px; height: 22px; font-size: 11px; }
}
@media (max-width: 575px) {
    .cr-howto { padding: 1.2rem 1.4rem; font-size: 14px; }
    .cr-howto-title { font-size: 15px; }
    .cr-howto-note, .cr-restart { font-size: 13px; }
}

/* "Which reading is right for you?" (vedic-card-services.php; UX review #10).
   A table on wide screens; each reading becomes its own block on a phone. */
.cmp { margin-top: 5rem; }
.cmp-head { max-width: 64rem; margin: 0 auto 2.4rem; text-align: center; }
.cmp-head h2 { margin: 0 0 .8rem; font-size: 3rem; }
.cmp-head p { margin: 0; font-size: 1.6rem; color: var(--text-muted); }
.cmp-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--border); border-radius: 1.2rem; }
.cmp-table { width: 100%; min-width: 76rem; border-collapse: collapse; font-size: 1.5rem; }
.cmp-table th {
    padding: 1.4rem 1.6rem;
    background: var(--primary-bg);
    border-bottom: 2px solid var(--primary-light);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cmp-table td { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.55; color: var(--text); }
.cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table td:first-child { font-weight: 700; color: var(--heading); }
.cmp-price { font-weight: 700; white-space: nowrap; color: var(--primary); }
.cmp-free { display: inline-block; padding: .2rem .9rem; border-radius: 5rem; background: #E2F4FE; font-size: 1.25rem; font-weight: 700; color: #046C96; }
.cmp-go { font-weight: 700; white-space: nowrap; }
.cmp-note { margin: 1.2rem 0 0; font-size: 1.4rem; text-align: center; color: var(--text-muted); }
@media (max-width: 767px) {
    .cmp-wrap { overflow: visible; background: transparent; border: 0; }
    .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; min-width: 0; }
    .cmp-table thead { display: none; }
    .cmp-table tr { margin-bottom: 1.2rem; padding: 1.2rem 1.4rem; background: var(--white); border: 1px solid var(--border); border-radius: 1.2rem; }
    .cmp-table td { padding: .3rem 0; border: 0; font-size: 14px; }
    .cmp-table td:first-child { font-size: 16px; }
    .cmp-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text-muted); }
    .cmp-go { display: inline-block; margin-top: .4rem; min-height: 44px; line-height: 44px; }
    .cmp-note { font-size: 13px; }
}

/* ---------- events: photo gallery + lightbox ---------- */
.evg-cover { position:relative; display:block; cursor:zoom-in; }
.evg-count { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }
.evg-thumbs { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:6px; background:#fff; }
.evg-thumb { position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:6px; cursor:zoom-in; }
.evg-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.evg-thumb:hover img { transform:scale(1.06); }
.evg-more { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; font-size:18px; font-weight:700; }
.evg-past-media { margin:-20px -20px 16px; border-radius:8px 8px 0 0; overflow:hidden; }
.evg-past-img { width:100%; height:180px; object-fit:cover; display:block; }

.evlb { position:fixed; inset:0; z-index:2000; background:rgba(8,12,24,.92); display:flex; align-items:center; justify-content:center; padding:60px 16px; }
.evlb[hidden] { display:none; }
.evlb-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.evlb-btn { position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff; width:46px; height:46px; border-radius:50%; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.evlb-btn:hover, .evlb-btn:focus-visible { background:rgba(255,255,255,.28); outline:none; }
.evlb-close { top:14px; right:14px; font-size:30px; }
.evlb-prev { left:14px; top:50%; transform:translateY(-50%); }
.evlb-next { right:14px; top:50%; transform:translateY(-50%); }
.evlb-count { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#ddd; font-size:14px; }
.evlb-single .evlb-prev, .evlb-single .evlb-next, .evlb-single .evlb-count { display:none; }
@media (max-width: 575px) {
  .evlb-prev, .evlb-next { top:auto; bottom:8px; transform:none; }
  .evlb-count { bottom:22px; }
}

/* events page as a gallery: one block per event with its photos */
.evg-event { margin-bottom:5rem; }
.evg-event:last-child { margin-bottom:0; }
.evg-event-head { margin-bottom:1.6rem; }
.evg-event-title { font-size:2.4rem; font-weight:700; color:var(--heading); margin:0 0 .6rem; }
.evg-event-count { margin-left:14px; }
.evg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr)); gap:1.2rem; }
.evg-tile { display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:10px; cursor:zoom-in; box-shadow:0 3px 12px rgba(0,0,0,.08); }
.evg-tile img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.evg-tile:hover img, .evg-tile:focus-visible img { transform:scale(1.05); }
@media (max-width: 575px) { .evg-grid { grid-template-columns:repeat(2, 1fr); gap:.8rem; } }

/* ── 1 Row / 3 Row reading pages (includes/row_reading_landing.php) ───── */
.rl-page .svc-top { padding-bottom: 8.6rem; }
.rl-hero-grid { align-items: stretch; }
.rl-cover { aspect-ratio: auto; min-height: 36rem; height: 100%; }
.rl-cover img { position: absolute; inset: 0; }
.rl-cover::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(12, 22, 40, .72), rgba(12, 22, 40, 0));
    pointer-events: none;
}
.rl-cover-tags {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}
.rl-cover-tags span {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.4rem;
    border-radius: 99rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
}
.rl-page .svc-buy { gap: 1rem; align-items: center; }
.rl-page .svc-buy i { font-size: 1.3rem; transition: transform .2s; }
.rl-page .svc-buy:hover i { transform: translateX(.3rem); }

/* key points, overlapping the bottom of the hero */
.rl-points-wrap { position: relative; z-index: 2; margin-top: -5rem; }
.rl-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    background: var(--white);
    box-shadow: 0 2rem 4rem rgba(20, 38, 63, .1);
}
.rl-point { display: flex; align-items: flex-start; gap: 1.4rem; padding: 2.4rem 2.2rem; }
.rl-point + .rl-point { border-left: 1px solid var(--border); }
.rl-point-icon {
    flex: 0 0 4.4rem;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--accent-deep);
    font-size: 1.8rem;
}
.rl-point strong { display: block; margin-bottom: .3rem; font-size: 1.55rem; color: var(--heading); }
.rl-point span:not(.rl-point-icon) { display: block; font-size: 1.35rem; line-height: 1.5; color: var(--text-muted); }

/* write-up beside what you get */
.rl-about { padding: 7.2rem 0 6.4rem; background: var(--white); }
.rl-about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5.6rem; align-items: start; }
.rl-h2 { margin: 0 0 2rem; font-size: 3rem; line-height: 1.25; color: var(--heading); }
.rl-about .svc-body p { margin-bottom: 1.6rem; }
.rl-gets {
    position: sticky;
    top: 11rem;
    padding: 2.8rem;
    border-radius: 1.4rem;
    background: var(--primary-bg);
    border: 1px solid var(--border);
}
.rl-gets h3 { margin: 0 0 1.8rem; font-size: 2rem; color: var(--heading); }
.rl-gets ul { display: grid; gap: 1.3rem; margin: 0 0 2.4rem; padding: 0; list-style: none; }
.rl-gets li { display: flex; gap: 1.1rem; font-size: 1.5rem; line-height: 1.5; color: var(--text); }
.rl-gets li i { flex: 0 0 auto; margin-top: .3rem; color: var(--accent-deep); }
.rl-gets-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.rl-gets-foot strong { font-size: 2.6rem; font-weight: 800; color: var(--heading); }

/* FAQs */
.rl-faq-section { padding: 6.4rem 0; background: var(--canvas-alt); }
.rl-narrow { max-width: 82rem; }
.rl-faq-section .svc-section-title { margin-bottom: 3.2rem; }
.rl-faq { border: 0; background: none; display: grid; gap: 1.2rem; }
.rl-faq details {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--white);
    transition: box-shadow .2s, border-color .2s;
}
.rl-faq details + details { border-top: 1px solid var(--border); }
.rl-faq details[open] { border-color: var(--accent); box-shadow: 0 1rem 2.4rem rgba(20, 38, 63, .08); }
.rl-faq details[open] summary { color: var(--primary); }

/* how it works */
.rl-how { background: var(--white); }
.rl-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rl-steps::before {
    content: "";
    position: absolute;
    top: 2.4rem;
    left: 16%;
    right: 16%;
    border-top: 2px dashed var(--border);
}
.rl-steps li { position: relative; text-align: center; padding: 0 1rem; }
.rl-step-no {
    position: relative;
    z-index: 1;
    width: 4.8rem;
    height: 4.8rem;
    margin: 0 auto 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-darker));
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    box-shadow: 0 0 0 .8rem var(--white), 0 .8rem 1.8rem rgba(20, 38, 63, .22);
}
.rl-step-icon { display: block; margin-bottom: 1rem; font-size: 2.4rem; color: var(--accent-deep); }
.rl-steps h3 { margin: 0 0 .8rem; font-size: 1.9rem; color: var(--heading); }
.rl-steps p { margin: 0 auto; max-width: 30rem; font-size: 1.45rem; line-height: 1.7; color: var(--text-muted); }

/* closing call to action: a light button on the dark band */
.rl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3.6rem;
    border-radius: 99rem;
    background: #fff;
    color: var(--primary);
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .25);
    transition: transform .2s, box-shadow .2s;
}
.rl-cta-btn:hover, .rl-cta-btn:focus-visible { color: var(--primary-darker); transform: translateY(-.2rem); box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .3); }

@media (max-width: 991px) {
    .rl-cover { min-height: 0; aspect-ratio: 16 / 10; }
    .rl-points { grid-template-columns: repeat(2, 1fr); }
    .rl-point:nth-child(3) { border-left: 0; }
    .rl-point:nth-child(n+3) { border-top: 1px solid var(--border); }
    .rl-about-grid { grid-template-columns: 1fr; gap: 3.6rem; }
    .rl-gets { position: static; }
}
@media (max-width: 767px) {
    .rl-page .svc-top { padding-bottom: 7rem; }
    .rl-points { grid-template-columns: 1fr; }
    .rl-point + .rl-point { border-left: 0; border-top: 1px solid var(--border); }
    .rl-point { padding: 1.8rem; }
    .rl-steps { grid-template-columns: 1fr; gap: 3.6rem; }
    .rl-steps::before { top: 2.4rem; bottom: 2.4rem; left: 50%; right: auto; border-top: 0; border-left: 2px dashed var(--border); }
    .rl-h2 { font-size: 2.4rem; }
    .rl-gets-foot { flex-direction: column; align-items: stretch; text-align: center; }
}

/* event photo captions */
.evg-fig { margin:0; }
.evg-fig figcaption { margin-top:.6rem; font-size:1.35rem; line-height:1.45; color:var(--text-muted); }
.evlb-foot { position:absolute; bottom:14px; left:70px; right:70px; text-align:center; color:#ddd; }
.evlb-caption { font-size:15px; color:#fff; margin-bottom:4px; }
.evlb-caption:empty { display:none; }
.evlb-foot .evlb-count { position:static; }
.evlb-single .evlb-foot .evlb-count { display:none; }
@media (max-width: 575px) { .evlb-foot { bottom:64px; left:16px; right:16px; } }

/* product page: extra pictures as thumbnails under the main one */
.pd-thumbs { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; }
.pd-thumb { width:8rem; height:8rem; padding:0; border:2px solid var(--border); border-radius:.8rem; overflow:hidden; background:var(--white); cursor:pointer; transition:border-color .2s; }
.pd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover, .pd-thumb:focus-visible { border-color:var(--accent); outline:none; }
.pd-thumb.is-on { border-color:var(--primary); }

/* About this reading: one centred column (client, 2026-09-18). */
.rl-about-center { max-width: 82rem; margin: 0 auto; }

/* numbered Please note on the 1 Row / 3 Row booking pages */
.cr-notes ol { margin: 0; padding-left: 2.2rem; }
/* Booking form headings: same size as the page title above them, red star. */
.rr-h2 .req { color: #d63031; }

/* Videos page: thumbnail opens one popup player (client, 2026-09-21). */
.podcasts-div2.vpop-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #0b1424; cursor: pointer; overflow: hidden; }
.vpop-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s, opacity .3s; }
.vpop-open:hover .vpop-thumb, .vpop-open:focus-visible .vpop-thumb { transform: scale(1.04); opacity: .9; }
.vpop-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 6.4rem; height: 6.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(220, 32, 32, .92); color: #fff; font-size: 2.2rem; padding-left: .4rem;
    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .35); transition: transform .25s, background .25s;
}
.vpop-open:hover .vpop-play, .vpop-open:focus-visible .vpop-play { transform: translate(-50%, -50%) scale(1.08); background: #dc2020; }
.vpop-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.vpop { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 12, 24, .93); display: flex; align-items: center; justify-content: center; padding: 6rem 1.6rem 3rem; }
.vpop[hidden] { display: none; }
.vpop-box { width: min(96rem, 100%); }
.vpop-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: .8rem; overflow: hidden; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .5); }
.vpop-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vpop-title { margin: 1.4rem 0 0; text-align: center; color: #fff; font-size: 1.7rem; }
.vpop-title:empty { display: none; }
.vpop-close { position: absolute; top: 1.4rem; right: 1.6rem; width: 4.6rem; height: 4.6rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 3rem; line-height: 1; cursor: pointer; }
.vpop-close:hover, .vpop-close:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }

/* Events list: one card per event, opening its own page (client, 2026-09-23). */
.evg-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: 2.4rem; }
.evg-album { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 1.2rem; background: var(--white); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.evg-album:hover { transform: translateY(-.4rem); box-shadow: 0 1.6rem 3.2rem rgba(20,38,63,.12); }
.evg-album-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--border); }
.evg-album-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.evg-album:hover .evg-album-pic img { transform: scale(1.05); }
.evg-album-body { flex: 1; display: flex; flex-direction: column; gap: .8rem; padding: 2rem 2.2rem 2.2rem; }
.evg-album-body strong { font-size: 1.9rem; line-height: 1.35; color: var(--heading); }
.evg-album-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: 1.35rem; color: var(--text-muted); }
.evg-album-more { margin-top: auto; padding-top: .6rem; font-size: 1.35rem; font-weight: 600; color: var(--accent-deep); }

/* Event page: the way back sits above the photos, and every photo says it opens
   bigger (client, 2026-09-23). */
.evg-back { margin-top: 3.2rem; }
.evg-tile { position: relative; }
.evg-zoom {
    position: absolute; top: 1rem; right: 1rem;
    width: 3.6rem; height: 3.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 22, 40, .55); color: #fff; font-size: 1.4rem;
    backdrop-filter: blur(4px);
    transition: background .2s, transform .2s;
}
.evg-tile:hover .evg-zoom, .evg-tile:focus-visible .evg-zoom { background: var(--primary); transform: scale(1.08); }
/* Product page, laid out like a reading page (client, 2026-09-23): it borrows
   the rl-* / svc-* blocks, and only the picture column and the buy box differ. */
.pd-page .rl-hero-grid { align-items: start; }
.pd-cover-col { display: flex; flex-direction: column; }
/* The picture keeps its own shape instead of stretching to the buy box. */
.pd-cover-col .rl-cover { height: auto; min-height: 0; aspect-ratio: 1 / 1; background: var(--white); }
/* A product is photographed whole, so it is shown whole rather than cropped. */
.pd-page .rl-cover img { object-fit: contain; }
.pd-page .rl-cover::after { display: none; }
.pd-page .shop-noimg-lg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pd-page .svc-cost strong { font-size: 3rem; }
.pd-page .svc-cost del { color: var(--text-muted); }

.pd-buy { margin: 0; }
.pd-buy .cr-label { display: block; margin-bottom: .6rem; }
.pd-buy-row { display: flex; gap: 1.2rem; align-items: stretch; flex-wrap: wrap; }
.pd-buy-row .cr-input { width: 8.5rem; flex: 0 0 auto; }
.pd-buy-row .site-btn { flex: 1 1 16rem; justify-content: center; }

/* Benefits on white, the questions below on the tinted band, so the two
   never run into one another when a product has no description. */
.pd-benefits { background: var(--white); }
.pd-related { padding: 6.4rem 0; }
.pd-related .svc-section-title { margin-bottom: 3.2rem; }
.pd-page .svc-sticky form { margin: 0; flex: 0 0 auto; }

@media (max-width: 767px) {
  .pd-page .rl-cover { aspect-ratio: 1 / 1; }
}