/* ============================================================
   Rudra Yogpeeth — local overrides on top of the template CSS.
   Keep site-specific tweaks here rather than editing the
   template's own stylesheets, so they stay easy to find.
   ============================================================ */

/* The single-column dropdown is fixed at 280px, which wraps the
   longer course names onto two lines. Let it size to its content. */
@media (min-width: 992px) {
  .site-header nav.main-navbar .main-ul-menu li.nav-item .mega-col-wrapper.mega-col-single {
    width: max-content;
    min-width: 280px;
    max-width: min(92vw, 560px);
  }
  .site-header nav.main-navbar .main-ul-menu li.nav-item .mega-col-wrapper.mega-col-single .mega-col .sub-menu li a {
    white-space: nowrap;
  }
  /* keep the last item's panel from running off the right edge */
  .site-header nav.main-navbar .main-ul-menu li.nav-item:last-child .mega-col-wrapper.mega-col-single {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
  }
}

/* ------------------------------------------------------------------
   Fees: Dormitory is the headline option, not Private.
   The template hard-codes its "featured" treatment (dark green card +
   "Most Booked" flag) onto .df-fee--private, so move it across.
   ------------------------------------------------------------------ */

/* 1. strip the template's featured treatment off the Private row */
.dates-fees-section .df-fee--private:not(.df-fee--private~.df-fee--private) {
  padding: 12px 14px;
  background: #fff;
  border-color: #e4e9e7;
  box-shadow: none;
}
.dates-fees-section .df-fee--private:not(.df-fee--private~.df-fee--private) .df-fee-type,
.dates-fees-section .df-fee--private:not(.df-fee--private~.df-fee--private) .df-fee-current,
.dates-fees-section .df-fee--private:not(.df-fee--private~.df-fee--private) .df-fee-original {
  color: inherit;
}
.dates-fees-section .df-fee--private:not(.df-fee--private~.df-fee--private) .df-fee-type::before {
  content: none;
}
.dates-fees-section .df-fee--private:not(.df-fee--private~.df-fee--private)::before {
  background: rgba(27, 112, 97,.10);
}

/* 2. the dark treatment now follows the SELECTED room, not the dormitory.
      The dormitory simply starts selected, and keeps its "Most Popular"
      badge whichever room the visitor ends up choosing. */
.dates-fees-section .df-fee.is-selected {
  padding: 12px 14px;
  background: linear-gradient(155deg, #175f52, #1b7061);
  border-color: #175f52;
  box-shadow: 0 10px 24px rgba(23, 95, 82,.26);
}
.dates-fees-section .df-fee.is-selected::before { background: rgba(255,255,255,.16); }
.dates-fees-section .df-fee--dorm::after {
  background-image: url("../images/icons/price-icon/6-shared.webp");
}
.dates-fees-section .df-fee.is-selected .df-fee-type,
.dates-fees-section .df-fee.is-selected .df-fee-current { color: #fff; }
.dates-fees-section .df-fee.is-selected .df-fee-original { color: rgba(255,255,255,.7); }
.dates-fees-section .df-fee--dorm .df-fee-type small {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  background: #c9a96e;
  color: #14332c;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}
.dates-fees-section .df-fee.is-selected:hover {
  border-color: #175f52;
  box-shadow: 0 14px 28px rgba(23, 95, 82,.32);
}

/* the rows are a radio group now, so they have to look and behave like one */
.dates-fees-section .df-fee[role="radio"] { cursor: pointer; }
.dates-fees-section .df-fee[role="radio"]:focus-visible {
  outline: 3px solid #175f52;
  outline-offset: 3px;
}
.dates-fees-section .df-fee[role="radio"]::after { z-index: 1; }
.dates-fees-section .df-fee-type,
.dates-fees-section .df-fee-prices { position: relative; z-index: 1; }

/* a tick on the chosen row, so the choice does not rest on colour alone */
.dates-fees-section .df-fee.is-selected .df-fee-prices::after {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-left: 10px;
  vertical-align: -4px;
  border-radius: 50%;
  background: #c9a96e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314332c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/11px;
}

/* 3. the "same fee" flag is longer than the template's "25% Off",
      so let it sit above the title instead of overlapping it */
.dates-fees-section .df-fees>.df-fee-discount {
  position: static;
  display: inline-block;
  margin: 0 0 10px;
}
.dates-fees-section .df-fees:has(>.df-fee-discount) .df-fees-title {
  margin-right: 0;
}

/* single duration tab — deliberate, not a dead control */
.tab-btn-wrapper .tab-btn:only-child { cursor: default; pointer-events: none; }

/* ------------------------------------------------------------------
   Logo — the RYP lockup is 2.16:1, the template's slot assumed a
   squarer mark, so let width follow the aspect instead of being forced.
   ------------------------------------------------------------------ */
.site-header .middle-box .box:nth-child(2) .logo-wrap img {
  width: auto;
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
}
.site-footer .footer-logo {
  width: auto;
  height: clamp(46px, 5vw, 62px);
  object-fit: contain;
}

/* Hero: the new banner photo is brighter than the video it replaced, so the
   scrim needs a little more weight to keep the heading readable. */
.hero-banner-section::before {
  background: linear-gradient(to bottom,
              rgba(0,0,0,.55) 0%,
              rgba(0,0,0,.48) 45%,
              rgba(0,0,0,.68) 100%);
}

/* Batch cards state when each batch runs; they are not links, so nothing
   about them should invite a click. (position: relative is still needed —
   the "Next Batch" flag is positioned against the card.) */
.dates-fees-section .df-date {
  position: relative;
  cursor: default;
}

.dates-fees-section .df-date:hover {
  transform: none;
  box-shadow: none;
  border-color: #e5f2f0;
  background: #f8fbfa;
}

.dates-fees-section .df-date.is-next:hover {
  transform: translateY(-2px);
  background: linear-gradient(150deg, #175f52, #1b7061);
  border-color: #175f52;
  box-shadow: 0 10px 26px -10px rgba(23, 95, 82, .55), 0 0 0 3px rgba(201, 169, 110, .35);
}

/* The rating badges are display only — no link, so no lift on hover. */
.home-reviews-section .review-card-wrap .review-card:hover {
  transform: none;
}

/* ── Enquiry form feedback ─────────────────────────────────────────────
   contact-mail.php answers with .form-alert markup; the template never
   shipped styles for it, so success and error messages rendered as bare
   text under the button. */
.success-message .form-alert,
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: "Figtree", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
}

.form-alert strong {
  flex: none;
  font-size: 16px;
  line-height: 1.5;
}

.form-alert-success {
  background: rgba(46, 131, 120, .1);
  border-color: rgba(23, 95, 82, .3);
  color: #175f52;
}

.form-alert-error {
  background: #fdf1de;
  border-color: rgba(184, 146, 78, .45);
  color: #8a5a0b;
}

/* The submit button spans the form and shows it is working. */
.ryp-form .theme-button {
  width: 100%;
  justify-content: center;
}

.ryp-form .theme-button[disabled] {
  opacity: .65;
  cursor: progress;
}

/* Fields flag themselves when the browser rejects them. */
.ryp-form .form-control:focus,
.ryp-form .form-select:focus {
  border-color: #1b7061;
  box-shadow: 0 0 0 3px rgba(70, 165, 152, .18);
  outline: none;
}

.ryp-form .form-control:not(:placeholder-shown):invalid,
.ryp-form .form-control.is-invalid {
  border-color: #c94f4f;
}

/* intl-tel-input has to fill the field it sits in. */
.ryp-form .iti { width: 100%; }

/* ── Lineage strip ─────────────────────────────────────────────────────
   The founder card was removed, so the second row holds three masters in a
   grid built for four. Centre that row instead of leaving a gap on the end. */
.idol-vinyasa-section .idol-rows-wrapper > .idol-grid:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.idol-vinyasa-section .idol-rows-wrapper > .idol-grid:last-child > .idol-card {
  flex: 0 1 calc(25% - 18px);
}

.idol-vinyasa-section .idol-rows-wrapper > .idol-grid:last-child > .idol-row-dot {
  display: none;
}

@media (max-width: 991px) {
  .idol-vinyasa-section .idol-rows-wrapper > .idol-grid:last-child > .idol-card {
    flex: 0 1 calc(50% - 16px);
  }
}

@media (max-width: 575px) {
  .idol-vinyasa-section .idol-rows-wrapper > .idol-grid:last-child > .idol-card {
    flex: 0 1 100%;
  }
}


/* ── Contact page: enquiry form ───────────────────────────────────────
   The shared .ryp-form sizing is built for the narrow sidebar and popup
   forms (12px labels, 13px inputs). On a full-width page that reads as
   unfinished, and a 13px input makes iOS zoom the page on focus, so the
   .ct-form scope resizes everything without touching the other forms. */

.ct-card {
  background: #fff;
  border: 1px solid rgba(23, 95, 82, .1);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 18px 40px -26px rgba(23, 95, 82, .45), 0 2px 6px rgba(23, 95, 82, .05);
}
.ct-card__title {
  margin: 0 0 8px;
  font: 400 clamp(22px, 2.2vw, 28px)/1.25 "Belleza", sans-serif;
  color: #17231f;
}
.ct-card__sub {
  margin: 0 0 22px;
  font: 400 14.5px/1.7 "Figtree", sans-serif;
  color: #4b5a55;
}
.ct-card__sub a {
  color: #175f52; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(23, 95, 82, .32);
}
.ct-card__sub a:hover { color: #175f52; border-bottom-color: #175f52; }

.ct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.ct-grid__full { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .ct-grid { grid-template-columns: 1fr; } }

.ct-form .ryp-field { margin-bottom: 0; }
.ct-form .ryp-field label {
  display: block; margin-bottom: 7px;
  font: 600 13px/1.4 "Figtree", sans-serif;
  color: #2d3c37;
}
.ct-req { color: #c0392b; }

.ct-form .form-control,
.ct-form .form-select {
  width: 100%;
  min-height: 50px;                 /* clears the 44px touch minimum */
  padding: 12px 15px;
  font: 400 16px/1.5 "Figtree", sans-serif;   /* 16px stops iOS zooming on focus */
  color: #17231f;
  background-color: #fff;
  border: 1px solid #d8e0dd;
  border-radius: 11px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-form .form-control::placeholder { color: #9aa8a3; }
.ct-form .form-control:hover,
.ct-form .form-select:hover { border-color: #b9c9c4; }
.ct-form .form-control:focus,
.ct-form .form-select:focus {
  border-color: #175f52;
  box-shadow: 0 0 0 3px rgba(70, 165, 152, .22);
  outline: none;
}
.ct-form .form-select { padding-right: 40px; cursor: pointer; }
.ct-form textarea.form-control { min-height: 130px; resize: vertical; }

/* the country selector has to match the taller input it sits in */
.ct-form .iti { width: 100%; }
.ct-form .iti--separate-dial-code .iti__selected-flag {
  background: #f3f8f6;
  border-radius: 10px 0 0 10px;
}
.ct-form .iti--separate-dial-code .iti__selected-dial-code {
  font: 400 15px/1 "Figtree", sans-serif; color: #2d3c37;
}

.ct-help {
  margin: 7px 0 0;
  font: 400 12.5px/1.5 "Figtree", sans-serif;
  color: #6b7a75;
}

.ct-form .theme-button {
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  font-size: 16px;
}

.ct-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 9px 22px;
  margin: 18px 0 0; padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid rgba(23, 95, 82, .1);
}
.ct-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 12.8px/1.4 "Figtree", sans-serif;
  color: #5d6b66;
}
.ct-trust svg { flex: none; color: #2f8c7a; }

/* ── Contact page: the column beside the form ─────────────────────── */

.ct-aside { display: grid; gap: 14px; }

.ct-quick {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(23, 95, 82, .1);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 10px 24px -22px rgba(23, 95, 82, .55);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ct-quick:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 95, 82, .3);
  box-shadow: 0 16px 30px -20px rgba(23, 95, 82, .55);
}
.ct-quick:focus-visible { outline: 3px solid #175f52; outline-offset: 3px; }
.ct-quick__icon {
  display: grid; place-items: center;
  flex: none; width: 46px; height: 46px;
  border-radius: 13px;
  background: #eaf4f1; color: #175f52;
}
.ct-quick--wa .ct-quick__icon { background: #e7f6ec; color: #1f8a3b; }
.ct-quick__label {
  display: block; margin-bottom: 3px;
  font: 600 11.5px/1.3 "Figtree", sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  color: #7c8a85;
}
.ct-quick__value {
  display: block;
  font: 600 15.5px/1.35 "Figtree", sans-serif;
  color: #17231f;
}

.ct-map {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(23, 95, 82, .1);
  border-radius: 16px;
  box-shadow: 0 14px 30px -26px rgba(23, 95, 82, .5);
}
.ct-map__label {
  margin: 0;
  padding: 14px 18px;
  font: 600 13px/1.3 "Figtree", sans-serif;
  color: #2d3c37;
  border-bottom: 1px solid rgba(23, 95, 82, .1);
}
.ct-map iframe { display: block; width: 100%; height: 300px; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ct-quick { transition: none; }
  .ct-quick:hover { transform: none; }
}


/* ── Enquiry popup: narrow screens ────────────────────────────────────
   .eq-ya-logo is pinned to the bottom-right of the header, which works
   while the tagline is short. Under ~520px the tagline wraps to three
   lines and runs underneath it, so the badge drops into the flow. */
@media (max-width: 520px) {
  #enquiryPopup .eq-ya-logo {
    position: static;
    display: block;
    height: 30px;
    margin: 12px 0 0;
  }
  #enquiryPopup .eq-tagline { max-width: 100%; }
}


/* ── "Who Can Join" section ───────────────────────────────────────────
   This used to be a two-column grid with a photo filling the left half.
   The photo is gone and the section now reads like the Accommodation &
   Food block below it: centred heading, then the copy full width. The
   grid rules in style.css are undone here rather than edited there,
   since .join-section is used on these seven pages only. */
.join-section {
  display: block;
}
.join-section .common-content-wrap {
  max-width: none;
  padding: 0;
}
.join-section .multi-btn-wrap {
  width: 100%;              /* it is sized to its content elsewhere, so centring needs the full row */
  justify-content: center;
  margin-top: 26px;
}


/* ── Curriculum cards: real Rudra Yogpeeth photos ─────────────────────
   The card paints its image into a strip across the right 62%, with
   background-size: cover and background-position: right center. Each file
   is already cropped to that strip's shape (~2.15), so cover has nothing
   left to trim and the subject holds whatever the card height does. The
   left side of the strip is masked out, so the telling part of each photo
   — the temple and hills, the adjusted pose, the two whiteboards — sits on
   the right. The scrape's ceremony1/3/5/7 files are no longer used. */
.curriculum-section .ch-card--techniques::after,
.faq-section .ch-card--techniques::after {
  --ch-card-image: url("../images/ryp-curriculum/techniques.webp");
}
.curriculum-section .ch-card--anatomy::after,
.faq-section .ch-card--anatomy::after {
  --ch-card-image: url("../images/ryp-curriculum/anatomy.webp");
}
.curriculum-section .ch-card--humanities::after,
.faq-section .ch-card--humanities::after {
  --ch-card-image: url("../images/ryp-curriculum/humanities.webp");
}
.curriculum-section .ch-card--professional::after,
.faq-section .ch-card--professional::after {
  --ch-card-image: url("../images/ryp-curriculum/professional.webp");
}


/* ── Overview video tile keeps the cover's 16:9 ───────────────────────
   The tile sits in the middle column of .overview-triple, whose height is
   set by the two stacked photo cards either side — about 4:3. With
   object-fit: cover that cropped a quarter of the width off a 16:9 cover,
   taking the logo on one edge and the photos on the other. The tile is
   already align-self: center, so giving it the cover's own ratio simply
   makes it shorter and centres it, and the whole banner shows. */
.overview-triple .new-video-iframe {
  aspect-ratio: 16 / 9;
  align-self: center;
}


/* ── Next batch gets the attention ────────────────────────────────────
   The first card was already dark green; this makes it read as the one to
   act on — a gold "Next Batch" flag, a lift off the grid, a ring, and a
   status dot that breathes. The countdown under it is a real figure
   (days to the 1st), not an invented scarcity line. */
.dates-fees-section .df-date.is-next {
  position: relative;
  margin-top: 9px;                       /* room for the flag */
  padding-top: 14px;
  box-shadow: 0 10px 26px -10px rgba(23, 95, 82, .55), 0 0 0 3px rgba(201, 169, 110, .35);
  transform: translateY(-2px);
}
.dates-fees-section .df-date.is-next:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -12px rgba(23, 95, 82, .6), 0 0 0 3px rgba(201, 169, 110, .55);
}

.dates-fees-section .df-date-flag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 11px;
  border-radius: 999px;
  background: #c9a96e;
  color: #14332c;
  font: 700 9.5px/1.4 "Figtree", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(20, 51, 44, .45);
}

.dates-fees-section .df-date-note {
  font: 600 10.5px/1.3 "Figtree", sans-serif;
  letter-spacing: .02em;
  color: #ffdfa6;
}

/* the dot on the next batch keeps a slow pulse so the eye lands there */
.dates-fees-section .df-date.is-next .df-date-status::before {
  animation: ryp-batch-pulse 2.4s ease-in-out infinite;
}
@keyframes ryp-batch-pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(189, 242, 223, .55); }
  50%      { opacity: .75; box-shadow: 0 0 0 5px rgba(189, 242, 223, 0); }
}

/* an amber card when a batch really is down to its last few seats —
   only ever shown for a month listed in ryp_batch_seats() */
.dates-fees-section .df-date-status--limited {
  background: #fdf1de;
  color: #8a5a0b;
  font-weight: 700;
}
.dates-fees-section .df-date-status--limited::before { background: #d08b16; }
.dates-fees-section .df-date-status--full {
  background: #f3e7e6;
  color: #9a3f36;
}
.dates-fees-section .df-date-status--full::before { background: #c0564a; }

@media (prefers-reduced-motion: reduce) {
  .dates-fees-section .df-date.is-next .df-date-status::before { animation: none; }
}

/* ── About page: intro section (#ryp-highlight-homepage) ───────────────── */
/* .common-content-wrapper has no styles in style.css, so stacked <p> run
   together. Scoped spacing + a readable measure for the full-width block.  */
#ryp-highlight-homepage .heading-wrapper > p.text-center {
    max-width: 78ch;
    margin-left: auto;
    margin-right: auto
}

.ab-stats {
    list-style: none;
    margin: 36px 0 0;
    padding: 24px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: #f8fbfa;
    border: 1px solid #e5f2f0;
    border-radius: 14px
}

.ab-stats li {
    text-align: center;
    padding: 0 8px;
    border-right: 1px solid #e5f2f0
}

.ab-stats li:last-child {
    border-right: 0
}

.ab-stats strong {
    display: block;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    color: #1b7061
}

.ab-stats strong em {
    font-style: normal;
    color: #c9a96e
}

.ab-stats span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #1e2422;
    opacity: .75
}

.ab-grid {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px
}

.ab-block {
    position: relative;
    padding-left: 18px;
    border-left: 3px solid #e5f2f0
}

.ab-block .small-heading {
    margin-bottom: 10px
}

.ab-block p {
    margin-bottom: 12px
}

.ab-block p:last-child {
    margin-bottom: 0
}







@media(max-width: 991px) {
    .ab-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 28px
    }
    .ab-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 28px;
        row-gap: 20px
    }
    .ab-stats li:nth-child(2n) {
        border-right: 0
    }
}

@media(max-width: 479px) {
    .ab-stats {
        grid-template-columns: 1fr
    }
    .ab-stats li {
        border-right: 0;
        border-bottom: 1px solid #e5f2f0;
        padding-bottom: 14px
    }
    .ab-stats li:last-child {
        border-bottom: 0;
        padding-bottom: 0
    }
}






/* ── Footer: "Popular Searches" keyword tags ───────────────────────────── */
/* Visually quieter than .footer-chips so the Quick Links stay the primary
   nav and the tags read as secondary, which is also how they should rank. */
.site-footer .footer-tags-heading {
    margin: clamp(20px, 2.4vw, 32px) 0 12px;
    text-align: center;
    font-size: clamp(12px, .35vw + 11px, 14px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(242, 240, 236, .55)
}

.site-footer .footer-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px
}

.site-footer .footer-tags a {
    display: inline-flex;
    align-items: center;
    padding: clamp(2px, .4vw, 6px) clamp(6px, 1vw, 13px);
    font-size: clamp(10px, .3vw + 9px, 12px);
    font-weight: 400;
    color: rgba(242, 240, 236, .72);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(242, 240, 236, .18);
    border-radius: 999px;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease
}

.site-footer .footer-tags a:hover,
.site-footer .footer-tags a:focus-visible {
    color: #fff;
    background: hsla(0, 0%, 100%, .06);
    border-color: #46a598
}

@media(max-width: 767px) {
    .site-footer .footer-tags {
        justify-content: flex-start;
        gap: 6px
    }
    .site-footer .footer-tags-heading {
        text-align: left
    }
}

/* ── Back to top ───────────────────────────────────────────────────────── */
/* Bottom-RIGHT: .bottom-box owns bottom-left on desktop and the full width
   under 768px, so this never overlaps it. */
.ryp-to-top {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(242, 240, 236, .25);
    border-radius: 50%;
    background: #1b7061;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(23, 95, 82, .32);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 240ms ease, transform 240ms ease, background 240ms ease
}

.ryp-to-top[hidden] {
    display: none
}

.ryp-to-top.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.ryp-to-top:hover,
.ryp-to-top:focus-visible {
    background: #175f52;
    transform: translateY(-3px)
}

.ryp-to-top:focus-visible {
    outline: 2px solid #c9a96e;
    outline-offset: 3px
}

.ryp-to-top svg {
    display: block
}

/* under 768px .bottom-box is a full-width sticky bar — clear it */
@media(max-width: 768px) {
    .ryp-to-top {
        right: 12px;
        bottom: 60px;
        width: 42px;
        height: 42px
    }
}

@media(prefers-reduced-motion: reduce) {
    .ryp-to-top {
        transition: opacity 240ms ease
    }
    .ryp-to-top.is-visible,
    .ryp-to-top:hover,
    .ryp-to-top:focus-visible {
        transform: none
    }
}

/* ── Recent enrolments toast ───────────────────────────────────────────── */
/* Sits ABOVE .bottom-box on the left. Desktop: .bottom-box occupies the
   bottom 15–71px, so this clears it at 86px. Mobile: the sticky bar takes
   0–42px and the back-to-top button 60–102px, so this clears both at 112px. */
.ryp-enrol-toast {
    position: fixed;
    left: 15px;
    bottom: 86px;
    z-index: 9997;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(330px, calc(100vw - 30px));
    padding: 13px 34px 13px 14px;
    background: #fff;
    border: 1px solid #e5f2f0;
    border-left: 4px solid #1b7061;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(30, 36, 34, .16);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 320ms ease, transform 320ms ease
}

.ryp-enrol-toast[hidden] {
    display: none
}

.ryp-enrol-toast.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.ryp-enrol-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5f2f0;
    color: #1b7061
}

.ryp-enrol-body {
    min-width: 0
}

.ryp-enrol-line {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #1e2422
}

.ryp-enrol-line strong {
    color: #175f52;
    font-weight: 600
}

.ryp-enrol-meta {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #1e2422;
    opacity: .72
}

.ryp-enrol-meta .ryp-enrol-course:not(:empty) + .ryp-enrol-batch:not(:empty)::before {
    content: " · "
}

.ryp-enrol-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1e2422;
    opacity: .45;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease
}

.ryp-enrol-close:hover,
.ryp-enrol-close:focus-visible {
    opacity: 1;
    background: #f2f0ec
}

.ryp-enrol-close:focus-visible {
    outline: 2px solid #c9a96e;
    outline-offset: 2px
}

@media(max-width: 768px) {
    .ryp-enrol-toast {
        left: 12px;
        right: 12px;
        bottom: 112px;
        width: auto;
        padding: 11px 32px 11px 12px;
        border-radius: 10px
    }
    .ryp-enrol-line { font-size: 13px }
    .ryp-enrol-meta { font-size: 11px }
}

@media(prefers-reduced-motion: reduce) {
    .ryp-enrol-toast {
        transition: opacity 320ms ease
    }
    .ryp-enrol-toast.is-visible {
        transform: none
    }
}

/* Review variant of the toast */
.ryp-enrol-toast .ryp-ico-review,
.ryp-enrol-toast .ryp-review-stars {
    display: none
}

.ryp-enrol-toast.is-review .ryp-ico-enrol {
    display: none
}

.ryp-enrol-toast.is-review .ryp-ico-review {
    display: block
}

.ryp-enrol-toast.is-review {
    border-left-color: #c9a96e
}

.ryp-enrol-toast.is-review .ryp-enrol-icon {
    background: #f6efe2;
    color: #b8924e
}

.ryp-enrol-toast.is-review .ryp-review-stars {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 2px;
    color: #c9a96e
}

/* the review quote sits in the meta row — give it room to breathe */
.ryp-enrol-toast.is-review .ryp-enrol-meta {
    opacity: .85;
    font-style: italic
}

/* ── eBook modal: phone field ──────────────────────────────────────────── */
/* intl-tel-input wraps the input in .iti, which has no width of its own, so
   the input's width:100% resolved against the page rather than the dialog and
   blew 966px past the modal edge — the field was effectively invisible. */
.ebook-modal .ryp-ebook-field .iti {
    display: block;
    width: 100%
}

.ebook-modal .ryp-ebook-field .iti input,
.ebook-modal .ryp-ebook-field .iti input[type="tel"],
.ebook-modal .ryp-ebook-field .iti .form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box
}

/* nothing in the dialog may escape it */
.ebook-modal .ebook-modal-dialog {
    overflow-x: hidden
}

/* ── Blog: share buttons ───────────────────────────────────────────────── */
.bl-share {
    margin: 0 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(70, 165, 152, .28)
}

.bl-share__label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1b7061
}

.bl-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.bl-share__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e5f2f0;
    border-radius: 50%;
    background: #f8fbfa;
    color: #175f52;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease
}

.bl-share__btn:hover,
.bl-share__btn:focus-visible {
    color: #fff;
    background: #1b7061;
    border-color: #1b7061;
    transform: translateY(-2px)
}

.bl-share__btn:focus-visible {
    outline: 2px solid #c9a96e;
    outline-offset: 2px
}

.bl-share__btn--whatsapp:hover  { background: #1f6f3e; border-color: #1f6f3e }
.bl-share__btn--facebook:hover  { background: #1877f2; border-color: #1877f2 }
.bl-share__btn--x:hover         { background: #1e2422; border-color: #1e2422 }
.bl-share__btn--linkedin:hover  { background: #0a66c2; border-color: #0a66c2 }
.bl-share__btn--pinterest:hover { background: #bd081c; border-color: #bd081c }

.bl-share__copied {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    border-radius: 6px;
    background: #1e2422;
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none
}

.bl-share__copied[hidden] { display: none }

/* ── Blog: related posts ───────────────────────────────────────────────── */
.bl-related {
    background: #f8fbfa;
    border-top: 1px solid #e5f2f0
}

.bl-related .bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px
}

.bl-related .bl-card__title {
    font-size: clamp(15px, 1.3vw, 17px)
}

@media(max-width: 991px) {
    .bl-related .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
}

@media(max-width: 575px) {
    .bl-related .bl-grid { grid-template-columns: 1fr }
}

/* ── Reviews: initial avatars ──────────────────────────────────────────── */
/* These are real named people. We show their initial the way Google does
   rather than inventing a face for them. */
.testimonial-card .tc-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    flex: 0 0 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b7061, #46a598);
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden
}

.testimonial-card .tc-avatar--initial span {
    display: block;
    transform: translateY(1px)
}


@media(max-width: 575px) {
    .testimonial-card .tc-avatar--initial {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 17px
    }
}


/* ── Video plays in place, in the frame ────────────────────────────────── */
/* The clip is 720x1280 portrait and the frame is 16:9, so it is fitted
   rather than cropped — a cover would cut the top and bottom off. */
.new-video-iframe .ryp-inline-video,
.ovg-item .ryp-inline-video {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 30px;
    background: #10211e;
    object-fit: contain
}

.new-video-iframe {
    position: relative
}

.new-video-iframe .ryp-video-trigger[hidden] {
    display: none
}

@media(max-width: 767px) {
    .new-video-iframe .ryp-inline-video,
    .ovg-item .ryp-inline-video { border-radius: 18px }
}

/* ══ Thank-you page ═══════════════════════════════════════════════════════
   Post-conversion page. The old version was a headline, a paragraph and a row
   of pills on white — it read as a dead end, which is the one thing a
   confirmation page must not be. Rebuilt around three jobs:

     1. confirm, visibly and immediately  (the drawn tick)
     2. say what happens next, with times (nobody has to wonder)
     3. offer somewhere to go             (tiles, not a lone Back link)

   Style follows the "organic biophilic" direction — soft radii, flowing
   shapes, natural shadows — on the site's own green/gold palette and fonts.
   All icons are inline SVG; nothing here is an emoji.
   ════════════════════════════════════════════════════════════════════════ */

.ryp-ty {
  --ty-green: #2e8378;
  --ty-green-d: #1f5b54;
  --ty-teal-d: #0f4247;
  /* Deepened from the brand #c9a96e: the eyebrow is 12px uppercase, and the
     lighter gold measured 2.95:1 on white — below the 4.5:1 AA floor.
     #8f6d15 measures 4.81:1 and still reads as gold. */
  --ty-gold: #886712;
  --ty-gold-l: #e4cfa4;
  --ty-ink: #17231f;
  --ty-muted: #5c6f6a;
  --ty-hair: #e2ece8;
  --ty-cream: #f7f4ee;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 6vw, 86px) 0 clamp(52px, 7vw, 100px);
  background:
    radial-gradient(120% 70% at 50% -10%, #eef7f4 0%, rgba(238, 247, 244, 0) 62%),
    var(--ty-cream);
}

/* Two soft out-of-focus shapes. Decorative, pointer-events off, and behind
   everything — they give the page depth without another image request. */
.ryp-ty-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
}

.ryp-ty-orb--a {
  width: clamp(220px, 32vw, 420px);
  aspect-ratio: 1;
  top: -8%;
  left: -10%;
  background: radial-gradient(circle, rgba(46, 131, 120, .22), rgba(46, 131, 120, 0) 70%);
}

.ryp-ty-orb--b {
  width: clamp(200px, 28vw, 380px);
  aspect-ratio: 1;
  bottom: -12%;
  right: -8%;
  background: radial-gradient(circle, rgba(201, 169, 110, .26), rgba(201, 169, 110, 0) 70%);
}

/* ── Confirmation card ───────────────────────────────────────────────── */

.ryp-ty-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(30px, 4.6vw, 54px) clamp(20px, 4vw, 52px) clamp(26px, 4vw, 44px);
  text-align: center;
  background: #fff;
  border: 1px solid var(--ty-hair);
  border-radius: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 24px 60px -34px rgba(15, 66, 71, .42);
}

.ryp-ty-check {
  display: inline-flex;
  width: clamp(62px, 8vw, 78px);
  height: clamp(62px, 8vw, 78px);
  margin-bottom: 18px;
  color: var(--ty-green);
}

.ryp-ty-check svg { width: 100%; height: 100% }

/* The ring and tick draw themselves once, which is the page confirming the
   submission rather than just stating it. */
.ryp-ty-check-ring {
  opacity: .32;
  stroke-dasharray: 158;
  stroke-dashoffset: 158;
  animation: rypTyRing 820ms cubic-bezier(.22, .61, .36, 1) 120ms forwards;
}

.ryp-ty-check-tick {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: rypTyTick 480ms cubic-bezier(.22, .61, .36, 1) 620ms forwards;
}

@keyframes rypTyRing { to { stroke-dashoffset: 0 } }
@keyframes rypTyTick { to { stroke-dashoffset: 0 } }

.ryp-ty-eyebrow {
  margin: 0 0 10px;
  font-family: "Figtree", sans-serif;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ty-gold);
}

.ryp-ty-title {
  margin: 0 0 14px;
  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-size: clamp(27px, 4.4vw, 48px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ty-teal-d);
}

.ryp-ty-lede {
  max-width: 54ch;          /* keeps the line length readable on wide screens */
  margin: 0 auto;
  font-family: "Figtree", sans-serif;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.72;
  color: var(--ty-muted);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.ryp-ty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

.ryp-ty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;            /* above the 44px touch-target minimum */
  padding: 13px 26px;
  border-radius: 999px;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.ryp-ty-btn:hover { transform: translateY(-2px) }

.ryp-ty-btn:focus-visible {
  outline: 3px solid rgba(46, 131, 120, .55);
  outline-offset: 3px;
}

/* WhatsApp's own #25d366 gives white text only 1.98:1, and the lighter green
   used elsewhere on the site 3.02:1 — both below AA for 15px bold. #178545 is
   the lightest green that reaches 4.69:1 while still reading as WhatsApp. */
.ryp-ty-btn--wa {
  background: #178545;
  color: #fff;
  border: 1px solid #178545;
  box-shadow: 0 10px 26px -12px rgba(23, 133, 69, .7);
}

.ryp-ty-btn--wa:hover {
  background: #13703a;
  border-color: #13703a;
  color: #fff;
  box-shadow: 0 16px 32px -14px rgba(23, 133, 69, .78);
}

.ryp-ty-btn--ghost {
  background: #fff;
  color: var(--ty-green-d);
  border: 1.5px solid rgba(46, 131, 120, .4);
}

.ryp-ty-btn--ghost:hover {
  background: rgba(46, 131, 120, .08);
  border-color: var(--ty-green);
  color: var(--ty-green-d);
}

/* ── Next-batch line ─────────────────────────────────────────────────── */

.ryp-ty-batch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(46, 131, 120, .08);
  border: 1px solid rgba(46, 131, 120, .2);
  font-family: "Figtree", sans-serif;
  font-size: clamp(12.5px, 1.1vw, 14px);
  font-weight: 600;
  color: var(--ty-green-d);
}

.ryp-ty-batch strong { color: var(--ty-teal-d); font-weight: 800 }

.ryp-ty-batch-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ty-green);
  box-shadow: 0 0 0 0 rgba(46, 131, 120, .5);
  animation: rypTyDot 2.4s ease-out infinite;
}

@keyframes rypTyDot {
  0%   { box-shadow: 0 0 0 0 rgba(46, 131, 120, .5) }
  70%  { box-shadow: 0 0 0 8px rgba(46, 131, 120, 0) }
  100% { box-shadow: 0 0 0 0 rgba(46, 131, 120, 0) }
}

/* ── Section headings ────────────────────────────────────────────────── */

.ryp-ty-h2 {
  margin: 0 0 clamp(20px, 3vw, 30px);
  text-align: center;
  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  color: var(--ty-teal-d);
}

/* ── What happens next ───────────────────────────────────────────────── */

.ryp-ty-next { margin-top: clamp(44px, 6vw, 76px) }

.ryp-ty-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ryp-ty-step {
  position: relative;
  padding: clamp(24px, 3vw, 32px) clamp(18px, 2.2vw, 26px);
  background: #fff;
  border: 1px solid var(--ty-hair);
  border-radius: clamp(16px, 2vw, 22px);
  box-shadow: 0 14px 36px -28px rgba(15, 66, 71, .45);
}

/* The connecting thread between the three steps, desktop only. */
.ryp-ty-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  right: calc(-1 * clamp(14px, 2vw, 22px));
  width: clamp(14px, 2vw, 22px);
  height: 1px;
  background: linear-gradient(90deg, rgba(46, 131, 120, .45), rgba(46, 131, 120, .12));
}

.ryp-ty-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ty-green), var(--ty-green-d));
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.ryp-ty-step-title {
  margin: 0 0 7px;
  font-family: "Figtree", sans-serif;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--ty-teal-d);
}

.ryp-ty-step-text {
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: clamp(14px, 1.15vw, 15px);
  line-height: 1.68;
  color: var(--ty-muted);
}

/* ── While you wait ──────────────────────────────────────────────────── */

.ryp-ty-explore { margin-top: clamp(44px, 6vw, 76px) }

.ryp-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  max-width: 1040px;
  margin: 0 auto;
}

.ryp-nav-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(18px, 2.2vw, 24px);
  background: #fff;
  border: 1px solid var(--ty-hair);
  border-radius: clamp(16px, 2vw, 20px);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ryp-nav-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 131, 120, .4);
  box-shadow: 0 20px 40px -26px rgba(15, 66, 71, .5);
}

.ryp-nav-tile:focus-visible {
  outline: 3px solid rgba(46, 131, 120, .55);
  outline-offset: 3px;
}

.ryp-nav-tile-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: rgba(46, 131, 120, .1);
  color: var(--ty-green-d);
  transition: background .25s ease, color .25s ease;
}

.ryp-nav-tile-ico svg { width: 21px; height: 21px }

.ryp-nav-tile:hover .ryp-nav-tile-ico {
  background: var(--ty-green);
  color: #fff;
}

.ryp-nav-tile-label {
  font-family: "Figtree", sans-serif;
  font-size: clamp(15px, 1.25vw, 16px);
  font-weight: 700;
  color: var(--ty-teal-d);
}

.ryp-nav-tile-sub {
  font-family: "Figtree", sans-serif;
  font-size: clamp(13px, 1.05vw, 13.5px);
  line-height: 1.5;
  color: var(--ty-muted);
}

/* ── Closing line ────────────────────────────────────────────────────── */

.ryp-ty-foot {
  max-width: 60ch;
  margin: clamp(34px, 4.5vw, 54px) auto 0;
  text-align: center;
  font-family: "Figtree", sans-serif;
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.7;
  color: var(--ty-muted);
}

.ryp-ty-foot a {
  color: var(--ty-green-d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ryp-ty-foot a:hover { color: var(--ty-gold) }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .ryp-ty-steps { grid-template-columns: 1fr; }
  .ryp-ty-step:not(:last-child)::after { display: none }
  .ryp-nav-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 575px) {
  .ryp-nav-grid { grid-template-columns: 1fr }
  .ryp-ty-actions { flex-direction: column }
  .ryp-ty-btn { width: 100% }
  .ryp-ty-batch {
    display: flex;
    text-align: left;
    line-height: 1.5;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ryp-ty-check-ring,
  .ryp-ty-check-tick {
    animation: none;
    stroke-dashoffset: 0;
  }
  .ryp-ty-batch-dot { animation: none }
  .ryp-ty-btn:hover,
  .ryp-nav-tile:hover { transform: none }
}

/* ══ 404 page ═════════════════════════════════════════════════════════════
   The old page was a heading, a paragraph, a green pill and a row of links
   that had lost their styling — they rendered as one run-on line of text.

   Rebuilt around a single animated focal point: a lotus that breathes. The
   UX guidance is explicit that decorative continuous motion is an
   anti-pattern and that a view should animate one or two elements at most,
   so this page animates exactly one thing, and it does a job — it paces a
   real 8-second breath (4s in, 4s out, the standard sama vritti count), so
   a dead end becomes a pause rather than a flashing ornament.

   Tiles are the shared .ryp-nav-tile component, also used on thank-you.
   ════════════════════════════════════════════════════════════════════════ */

.ryp-404 {
  --f-green: #2e8378;
  --f-green-d: #1f5b54;
  --f-teal-d: #0f4247;
  /* 4.79:1 on this page's cream and 5.26:1 on white, so one gold token
     works on both surfaces. #8f6d15 cleared white but only reached
     4.38:1 on cream — short of the 4.5 AA floor for 12px text. */
  --f-gold: #886712;
  --f-muted: #5c6f6a;
  --f-hair: #e2ece8;
  --f-cream: #f7f4ee;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 5vw, 70px) 0 clamp(50px, 7vw, 96px);
  background:
    radial-gradient(130% 70% at 50% -5%, #eef7f4 0%, rgba(238, 247, 244, 0) 60%),
    var(--f-cream);
}

.ryp-404-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
}

.ryp-404-orb--a {
  width: clamp(220px, 32vw, 440px);
  aspect-ratio: 1;
  top: -10%;
  left: -12%;
  background: radial-gradient(circle, rgba(46, 131, 120, .2), rgba(46, 131, 120, 0) 70%);
}

.ryp-404-orb--b {
  width: clamp(200px, 28vw, 380px);
  aspect-ratio: 1;
  bottom: -14%;
  right: -10%;
  background: radial-gradient(circle, rgba(201, 169, 110, .24), rgba(201, 169, 110, 0) 70%);
}

/* ── The breathing lotus ─────────────────────────────────────────────── */

.ryp-404-breath {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(6px, 2vw, 18px);
}

.ryp-404-breath-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(168px, 24vw, 224px);
  aspect-ratio: 1;
}

.ryp-404-ring,
.ryp-404-lotus {
  grid-area: 1 / 1;
}

.ryp-404-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 131, 120, .38);
  /* transform + opacity only — nothing here triggers layout */
  animation: rypBreath 8s cubic-bezier(.42, 0, .58, 1) infinite;
}

.ryp-404-ring--2 {
  width: 74%;
  height: 74%;
  border-color: rgba(46, 131, 120, .5);
  animation-delay: .18s;
}

.ryp-404-ring--3 {
  width: 100%;
  height: 100%;
  border-color: rgba(201, 169, 110, .45);
  animation-delay: .36s;
}

.ryp-404-ring--1 {
  width: 50%;
  height: 50%;
  border-color: rgba(46, 131, 120, .6);
  background: rgba(255, 255, 255, .55);
}

.ryp-404-lotus {
  display: grid;
  place-items: center;
  width: 32%;
  color: var(--f-green-d);
  animation: rypBreathLotus 8s cubic-bezier(.42, 0, .58, 1) infinite;
}

.ryp-404-lotus svg { width: 100%; height: auto }

/* 4s expanding, 4s contracting — the pace of an actual slow breath. */
@keyframes rypBreath {
  0%   { transform: scale(.72); opacity: .5 }
  50%  { transform: scale(1);   opacity: 1 }
  100% { transform: scale(.72); opacity: .5 }
}

@keyframes rypBreathLotus {
  0%   { transform: scale(.88) }
  50%  { transform: scale(1.06) }
  100% { transform: scale(.88) }
}

/* The caption changes with the breath, so the motion reads as instruction
   rather than decoration. Both words occupy the same cell — no reflow. */
.ryp-404-breath-cue {
  display: grid;
  margin: 10px 0 0;
  font-family: "Figtree", sans-serif;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--f-gold);
}

.ryp-404-cue {
  grid-area: 1 / 1;
  animation: rypCue 8s steps(1, end) infinite;
}

.ryp-404-cue--out { animation-delay: 4s }

@keyframes rypCue {
  0%   { opacity: 1 }
  50%  { opacity: 0 }
  100% { opacity: 0 }
}

/* ── Message ─────────────────────────────────────────────────────────── */

.ryp-404-head {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.ryp-404-code {
  margin: 0 0 10px;
  font-family: "Figtree", sans-serif;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--f-gold);
}

.ryp-404-title {
  margin: 0 0 14px;
  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-size: clamp(27px, 4.6vw, 50px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--f-teal-d);
}

.ryp-404-lede {
  max-width: 54ch;
  margin: 0 auto;
  font-family: "Figtree", sans-serif;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.72;
  color: var(--f-muted);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.ryp-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

.ryp-404-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.ryp-404-btn:hover { transform: translateY(-2px) }

.ryp-404-btn:focus-visible {
  outline: 3px solid rgba(46, 131, 120, .55);
  outline-offset: 3px;
}

.ryp-404-btn--primary {
  background: var(--f-green);
  color: #fff;
  border: 1px solid var(--f-green);
  box-shadow: 0 10px 26px -13px rgba(46, 131, 120, .8);
}

.ryp-404-btn--primary:hover {
  background: var(--f-green-d);
  border-color: var(--f-green-d);
  color: #fff;
}

/* Same AA-safe green as the thank-you page: WhatsApp's own #25d366 gives
   white text 1.98:1. */
.ryp-404-btn--wa {
  background: #fff;
  color: #13703a;
  border: 1.5px solid rgba(23, 133, 69, .45);
}

.ryp-404-btn--wa:hover {
  background: #178545;
  border-color: #178545;
  color: #fff;
}

/* ── Tiles ───────────────────────────────────────────────────────────── */

.ryp-404-explore { margin-top: clamp(40px, 6vw, 72px) }

.ryp-404-h2 {
  margin: 0 0 clamp(20px, 3vw, 30px);
  text-align: center;
  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  color: var(--f-teal-d);
}

/* Eight tiles sit better four-up than three-up. */
@media (min-width: 992px) {
  .ryp-404 .ryp-nav-grid { grid-template-columns: repeat(4, 1fr) }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ryp-404-ring,
  .ryp-404-lotus,
  .ryp-404-cue {
    animation: none !important;
  }
  .ryp-404-ring { transform: scale(1); opacity: 1 }
  .ryp-404-lotus { transform: scale(1) }
  /* With the animation off the two cues would stack; show only "Breathe in". */
  .ryp-404-cue--out { opacity: 0 }
  .ryp-404-btn:hover { transform: none }
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 575px) {
  .ryp-404-actions { flex-direction: column }
  .ryp-404-btn { width: 100% }
}

/* ── Inline pill links ────────────────────────────────────────────────────
   The small row of pills at the foot of each blog article.

   These rules were deleted during the thank-you redesign: the class was then
   called `.ty-links`, the name said "thank you", and I checked only
   thank-you.php before removing it. Six blog posts and the 404 page were also
   using it, and their link rows rendered as one run-on line of plain text
   until this was caught. Renamed to say what it is, not where it was first
   used — which is the whole reason the mistake was possible.

   Distinct from .ryp-nav-tile: that is a card with an icon and a description,
   this is a compact inline row. Both exist on purpose.
   ════════════════════════════════════════════════════════════════════════ */

.ryp-pill-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 34px);
}

.ryp-pill-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(27, 112, 97, .28);
  border-radius: 999px;
  background: rgba(70, 165, 152, .08);
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #175f52;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.ryp-pill-links a:hover {
  background: #175f52;
  border-color: #175f52;
  color: #fff;
}

.ryp-pill-links a:focus-visible {
  outline: 3px solid rgba(46, 131, 120, .55);
  outline-offset: 3px;
}

/* ══ Instagram CTA (thank-you page) ═══════════════════════════════════════
   Sits between "What Happens Next" and "While You Wait" — straight after
   someone converts, while they are still paying attention, and before the
   tiles invite them to wander off.

   On the Instagram gradient: the official brand ramp runs yellow -> orange ->
   pink -> purple, and white text on the yellow end measures 1.35:1. Unusable.
   So the ramp is split by job — the full brand gradient only rings the avatar,
   where no text sits on it, and the button uses the pink-to-purple half
   (#d62976 -> #962fbf -> #4f5bd5), whose every stop clears 4.73:1 for white.
   Still unmistakably Instagram, still readable.
   ════════════════════════════════════════════════════════════════════════ */

.ryp-ig {
  --ig-pink: #d62976;
  --ig-purple: #962fbf;
  --ig-blue: #4f5bd5;

  margin-top: clamp(44px, 6vw, 76px);
}

.ryp-ig-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(26px, 3.6vw, 42px) clamp(22px, 3.4vw, 46px);
  background: #fff;
  border: 1px solid var(--ty-hair, #e2ece8);
  border-radius: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 22px 54px -34px rgba(15, 66, 71, .45);
  overflow: hidden;
}

/* A hairline of the full brand gradient across the top — a hint of Instagram
   without putting text on an unreadable colour. */
.ryp-ig-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* ── Profile ─────────────────────────────────────────────────────────── */

.ryp-ig-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.ryp-ig-avatar-ring {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 3px;
  border-radius: 50%;
  /* here the full brand gradient is fine — nothing reads on top of it */
  background: conic-gradient(from 150deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.ryp-ig-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  display: block;
  background: #fff;
}

.ryp-ig-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ryp-ig-name {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ty-teal-d, #0f4247);
}

.ryp-ig-handle {
  font-family: "Figtree", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b4a7a;          /* 5.9:1 on white — a purple that is still readable */
  word-break: break-all;
}

/* ── Copy ────────────────────────────────────────────────────────────── */

.ryp-ig-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-family: "Figtree", sans-serif;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a12766;          /* 5.6:1 on white */
}

.ryp-ig-title {
  margin: 0 0 10px;
  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.18;
  color: var(--ty-teal-d, #0f4247);
}

.ryp-ig-lede {
  max-width: 56ch;
  margin: 0 0 clamp(18px, 2.4vw, 24px);
  font-family: "Figtree", sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
  color: var(--ty-muted, #5c6f6a);
}

/* ── The button ──────────────────────────────────────────────────────── */

.ryp-ig-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(95deg, var(--ig-pink) 0%, var(--ig-purple) 55%, var(--ig-blue) 100%);
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: clamp(14px, 1.2vw, 15.5px);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(150, 47, 191, .75);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}

.ryp-ig-btn span { word-break: break-all }

.ryp-ig-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 18px 38px -14px rgba(150, 47, 191, .85);
}

.ryp-ig-btn:focus-visible {
  outline: 3px solid rgba(150, 47, 191, .55);
  outline-offset: 3px;
}

/* One slow sheen so the button reads as the thing to press. It is the only
   moving part in this block. */
.ryp-ig-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -35%;
  width: 30%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .3) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: rypIgSheen 4.6s ease-in-out 1.2s infinite;
}

@keyframes rypIgSheen {
  0%   { left: -35% }
  45%  { left: 115% }
  100% { left: 115% }
}

.ryp-ig-note {
  margin: 10px 0 0;
  font-family: "Figtree", sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  /* #6f807c measured 4.15:1 — under AA for 12.5px. This is the page's own
     muted token, which measures 5.33:1. */
  color: var(--ty-muted, #5c6f6a);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .ryp-ig-inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .ryp-ig-lede { margin-left: auto; margin-right: auto }
  .ryp-ig-btn { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
  .ryp-ig-btn::after { animation: none; opacity: 0 }
  .ryp-ig-btn:hover { transform: none }
}