/* ============================================================
   MANAII — COMPONENTS (marketing · content · cards · audio · account)
   Commerce presentation (shop/product/cart/checkout) lives in woocommerce.css.
   Desktop metrics; responsive.css recomposes via data-m hooks.
   ============================================================ */

/* ============================================================
   Hero (homepage)
   ============================================================ */
.hero__grid { display: grid; grid-template-columns: 1fr 470px; gap: 72px; align-items: center; }
.hero__copy { padding-bottom: 120px; }
.hero__meta { display: flex; align-items: center; gap: 28px; margin-top: 48px; font-size: 14px; color: var(--color-muted); }
.hero__meta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border-input); }
.hero__media { position: relative; height: 640px; }
/* Physical offsets, as in the approved design (right = toward the copy in RTL). */
.hero__frame { position: absolute; top: 26px; right: -26px; left: auto; width: 100%; height: 100%; border: 2px solid var(--color-gold); border-radius: var(--radius-media); }
.about-hero .hero__frame { top: -18px; left: -18px; right: auto; }
.hero__img { position: absolute; inset: 0; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__chip { position: absolute; bottom: -34px; right: -34px; left: auto; z-index: 2; background: var(--color-cream); border-radius: var(--radius-media-sm); padding: 18px 22px; box-shadow: var(--shadow-float); display: flex; align-items: center; gap: 14px; }
.hero__chip img { width: 54px; height: 54px; border-radius: 999px; object-fit: cover; }

.section-index { font-size: 14px; font-weight: 700; color: var(--color-muted-light); }
.section-index--on-teal { color: var(--color-green-dark); opacity: .6; }
.section-index--on-dark { color: var(--color-gold); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }

/* ============================================================
   Benefits trail
   ============================================================ */
.benefits { position: relative; margin-top: 72px; }
.benefits__arcs { position: absolute; inset-inline: 0; top: 0; height: 240px; background: url(../images/trail-dashes.svg) no-repeat center top / 100% 240px; }
.benefits__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.benefit { text-align: center; }
.benefit:nth-child(2) { margin-top: 56px; }
.benefit img { width: 170px; height: 170px; display: block; margin: 0 auto; }
.benefit p { max-width: 250px; margin: 24px auto 0; font-size: 17px; line-height: 1.9; font-weight: 600; color: var(--color-green-dark); }

/* ============================================================
   Story section + pull quote
   ============================================================ */
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story__body p { font-size: 17px; line-height: var(--lh-prose-loose); color: rgba(255,246,220,.88); max-width: 540px; margin-top: 28px; }
.pullquote { margin: 36px 0 0; padding-inline-start: 24px; border-inline-start: 3px solid var(--color-gold); max-width: 540px; font-size: 24px; line-height: 1.9; font-weight: 700; color: var(--color-gold); }
.story__art { position: relative; }
.story__art img { display: block; width: 100%; }
.story__chip { position: absolute; bottom: -40px; inset-inline-start: 0; background: var(--color-teal); color: var(--color-cream); border-radius: 18px; padding: 18px 24px; font-size: 15px; font-weight: 600; box-shadow: var(--shadow-float); }

/* Video panel */
.video-panel { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-float); }
.video-panel img { display: block; width: 100%; }
.video-panel__play { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(50%,-50%); width: 88px; height: 88px; border-radius: 999px; background: rgba(255,246,220,.94); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Brand moment */
.brand-moment { text-align: center; }
/* Elementor puts a widget's custom CSS class on its own wrapper element, not
   the inner <img> it renders — these must target the image inside it. */
.brand-moment .badge img { display: block; width: 460px; max-width: 100%; margin: 0 auto; }
.brand-moment p { max-width: 720px; margin: 48px auto 0; font-size: 19px; line-height: var(--lh-prose-loose); color: var(--color-green-dark); }
.brand-moment .worldmap img { display: block; width: 1100px; max-width: 100%; margin: 72px auto 0; }

/* ============================================================
   Generic card + card grids
   ============================================================ */
.card { background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--color-ink); display: block; }
.card-grid { display: grid; gap: 40px; }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (hover: hover) and (min-width: 901px) {
  a.card:hover, .card--liftable:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-2); }
  .card__media img { transition: transform var(--dur-media) var(--ease-out); }
  a.card:hover .card__media img { transform: scale(1.03); }
}
.card__media { position: relative; border-radius: var(--radius-media-sm); overflow: hidden; background: var(--color-media-bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-chip { position: absolute; inset-inline-start: 12px; bottom: 12px; white-space: nowrap; background: rgba(255,246,220,.94); color: var(--color-ink); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; z-index: 2; }
.sale-flag { position: absolute; inset-inline-end: 12px; top: 12px; background: var(--color-danger); color: var(--color-cream); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; z-index: 2; }
.card__rule { border: 0; border-top: var(--rule-dashed); margin: 20px 0; }
.card__pricerow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.card__pricerow .manaii-price, .card__pricerow .price-now { white-space: nowrap; }
.price-strike { color: var(--color-muted-light); text-decoration: line-through; font-size: 15px; }

/* Event card */
.event-card { padding: 20px; }
.event-card .card__media { aspect-ratio: 1/1; }
.event-card__pills { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.event-card h3 { font-size: 19px; line-height: 1.7; font-weight: 800; margin-top: 12px; }
.event-card .speaker { font-size: 14px; color: var(--color-muted); margin-top: 6px; }

/* Audio card */
.audio-card { padding: 20px; }
.audio-card .card__media { aspect-ratio: 1/1; }
.audio-card__play { position: absolute; inset-inline-start: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 999px; background: var(--color-cream); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.audio-card h3 { font-size: 18px; font-weight: 800; margin-top: 14px; }
.audio-card .meta { font-size: 14px; color: var(--color-muted); margin-top: 6px; }
.progress { height: 6px; border-radius: 999px; background: var(--border-row); overflow: hidden; margin-top: 12px; direction: ltr; } /* every progress bar fills left → right */
.progress__fill { height: 100%; background: var(--color-teal-deep); border-radius: 999px; }
.audio-card .status { font-size: 13px; color: var(--color-muted); margin-top: 8px; }

/* State chips for audio */
.chip-state { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.chip-state--new { background: var(--pill-pending-bg); color: var(--pill-pending-fg); }
.chip-state--listening { background: var(--color-tint-sand); color: var(--color-ink-muted); }
.chip-state--done { background: var(--pill-avail-bg); color: var(--pill-avail-fg); }

/* ============================================================
   FAQ / accordion
   ============================================================ */
.topic-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.topic-pill { border: 1px solid var(--border-input); background: var(--color-white); border-radius: 999px; padding: 10px 20px; font-family: inherit; font-size: 15px; cursor: pointer; min-height: 44px; }
.topic-pill[aria-pressed="true"] { background: var(--color-gold); border-color: var(--color-gold); font-weight: 700; }
.accordion { max-width: 820px; }
.acc-row { border-bottom: 1px solid var(--border-row); }
.acc-row__btn { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 0; background: none; border: 0; font-family: inherit; font-size: 18px; font-weight: 700; text-align: start; cursor: pointer; color: var(--color-ink); }
.acc-row__icon { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1.5px solid var(--border-input); display: inline-flex; align-items: center; justify-content: center; position: relative; margin-inline-start: auto; }
.acc-row__icon::before, .acc-row__icon::after { content: ""; position: absolute; background: var(--color-ink); }
.acc-row__icon::before { width: 14px; height: 2px; }
.acc-row__icon::after { width: 2px; height: 14px; transition: transform var(--dur-color) var(--ease); }
.acc-row__btn[aria-expanded="true"] { font-weight: 800; }
.acc-row__btn[aria-expanded="true"] .acc-row__icon { background: var(--color-teal-deep); border-color: var(--color-teal-deep); }
.acc-row__btn[aria-expanded="true"] .acc-row__icon::before, .acc-row__btn[aria-expanded="true"] .acc-row__icon::after { background: var(--color-cream); }
.acc-row__btn[aria-expanded="true"] .acc-row__icon::after { transform: rotate(90deg); }
.acc-row__panel { overflow: hidden; }
.acc-row__panel[hidden] { display: none; }
.acc-row__panel > div { padding: 0 0 24px; font-size: 16px; line-height: 2.1; max-width: 680px; color: var(--color-ink-muted); }

/* ============================================================
   About timeline / chapter cards
   ============================================================ */
.timeline { position: relative; }
/* Dashed centre spine, full height of the section (approved `about` design). */
.about-timeline { position: relative; }
.timeline__axis { position: absolute; top: -80px; bottom: -150px; right: 50%; width: 0; border-right: 2px dashed var(--timeline-axis); pointer-events: none; }
.elementor-widget-html:has(> .elementor-widget-container > .timeline__axis), .elementor-widget-html:has(> .timeline__axis) { position: static; margin: 0 !important; }
/* A chapter: marker + card on a two-column grid; odd chapters flip sides.
   (!important: Elementor paints every container as display:flex.) */
.chapter { position: relative; display: grid !important; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin: 0; }
.chapter > .e-con-inner { display: contents !important; } /* an editor-boxed chapter keeps the grid */
.chapter > .chapter__marker, .chapter > .e-con-inner > .chapter__marker { grid-column: 1; grid-row: 1; text-align: right; }
.chapter > .chapter__card, .chapter > .e-con-inner > .chapter__card { grid-column: 2; grid-row: 1; }
.chapter--flip > .chapter__marker, .chapter--flip > .e-con-inner > .chapter__marker { grid-column: 2; text-align: left; }
.chapter--flip > .chapter__card, .chapter--flip > .e-con-inner > .chapter__card { grid-column: 1; }
.chapter__marker-in { display: inline-flex; flex-direction: column; align-items: flex-end; }
.chapter--flip .chapter__marker-in { align-items: flex-start; }
.chapter__kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--color-teal-deep); }
.chapter__year { font-size: var(--fs-chapter); font-weight: 900; line-height: 1; color: var(--color-ink); opacity: .14; }
.chapter__headline { margin: 12px 0 0; font-size: 22px; line-height: 1.6; font-weight: 800; color: var(--color-ink); max-width: 320px; }
.chapter__card { position: relative; background: var(--color-white); border-radius: 24px; box-shadow: 0 12px 36px rgba(37,37,37,.08); padding: 24px 24px 32px !important; }
.chapter__card .elementor-widget { margin-bottom: 0 !important; }
.chapter__card img { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 20px; background: var(--color-media-bg); }
.chapter__card .elementor-widget-text-editor, .chapter__card .chapter__text p { color: #3F3A2E; }
.chapter__card .chapter__text p, .chapter__text p { margin: 24px 4px 0; font-size: 16px; line-height: 2; }
.elementor-widget-html:has(.chapter__node) { position: static; }
.chapter__node { position: absolute; top: 50%; left: -46px; width: 14px; height: 14px; background: var(--color-gold); border-radius: 3px; transform: translateY(-50%) rotate(45deg); }
.chapter--flip .chapter__node { left: auto; right: -46px; }
.timeline-closer { text-align: center; padding-top: 16px; }
.timeline-closer__pill { display: inline-block; background: var(--color-teal); color: var(--color-cream); font-size: 24px; font-weight: 800; padding: 20px 44px; border-radius: 999px; }
.about-hero .elementor-widget-text-editor p { max-width: 560px; font-size: 18px; line-height: 2; color: rgba(255,246,220,.85); }

/* ============================================================
   Panels (event, contact, about, account)
   ============================================================ */
.panel { background: var(--color-white); border-radius: var(--radius-card); padding: 48px; box-shadow: var(--shadow-panel); }
.panel--sand { background: var(--color-tint-sand); }
.tint-card { background: var(--color-tint-sand); border-radius: var(--radius-chip); padding: 28px; }
.person { display: flex; align-items: center; gap: 20px; }
.person img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; flex: none; }

/* ============================================================
   Account — band, sidebar, order row/timeline, address, support
   ============================================================ */
.account-band { background: var(--color-green-dark); color: var(--color-cream); }
.account-band__inner { max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter) 0; display: flex; align-items: center; gap: 24px; }
.account-avatar { width: 72px; height: 72px; border-radius: 999px; background: var(--color-gold); color: var(--color-ink); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; flex: none; }
.account-band__greet { font-size: 30px; font-weight: 800; }
.account-band__stats { margin-inline-start: auto; display: flex; gap: 32px; }
.account-stat { text-align: center; }
.account-stat b { display: block; font-size: 24px; font-weight: 800; color: var(--color-gold); }
.account-stat span { font-size: 13px; color: rgba(255,246,220,.8); }

.account-layout { display: grid; grid-template-columns: 262px 1fr; gap: 40px; }
.account-nav { background: var(--color-white); border-radius: var(--radius-card); padding: 12px; position: sticky; top: 24px; box-shadow: var(--shadow-card); align-self: start; }
/* .account-nav.account-nav (class repeated) bumps specificity past Elementor's sitewide
   `.elementor-kit-11 a` global-color rule, which otherwise ties and wins by load order. */
.account-nav.account-nav a { display: flex; align-items: center; gap: 12px; height: 46px; padding-inline: 16px; border-radius: var(--radius-row); color: var(--color-ink); font-size: 15px; }
.account-nav a .badge { margin-inline-start: auto; background: var(--color-tint-sand); color: var(--color-ink-muted); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.account-nav a[aria-current="page"] { background: var(--color-tint-sand); color: var(--color-teal-deep); font-weight: 800; }
.account-nav hr { border: 0; border-top: 1px solid var(--border-row); margin: 8px 0; }
.account-nav a.logout { color: var(--color-muted); }

.order-row { background: var(--color-white); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-card); display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-bottom: 16px; }
.order-row__thumbs { display: flex; gap: 8px; }
.order-row__thumbs img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.order-row__id { font-size: 17px; font-weight: 800; }
.order-row__meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 14px; color: var(--color-muted); }
.order-row__total { text-align: end; }
.order-row__total b { font-size: 19px; font-weight: 800; color: var(--color-teal-deep); }

.order-timeline { display: flex; align-items: flex-start; justify-content: space-between; position: relative; margin: 32px 0; }
.order-timeline::before { content: ""; position: absolute; top: 11px; inset-inline: 12px; height: 3px; background: var(--timeline-axis); }
.tl-node { position: relative; z-index: 1; text-align: center; flex: 1; }
.tl-node .dot { width: 22px; height: 22px; border-radius: 999px; border: 3px solid var(--timeline-axis); background: var(--color-cream); margin: 0 auto 10px; }
.tl-node.is-done .dot { background: var(--color-teal-deep); border-color: var(--color-teal-deep); }
.tl-node.is-current label { font-weight: 800; }
.tl-node label { font-size: 14px; color: var(--color-ink-muted); }
/* Order status stepper (own class names — .tl-node belongs to the About timeline). */
.order-steps { display: flex; list-style: none; margin: 8px 0; padding: 0; }
.order-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-width: 0; }
.order-step + .order-step::before { content: ""; position: absolute; top: 13px; inset-inline-end: 50%; width: 100%; height: 3px; background: var(--timeline-axis); z-index: 0; }
.order-step.is-done + .order-step::before, .order-step.is-done + .order-step.is-done::before { background: var(--color-teal-deep); }
.order-step__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 999px; border: 3px solid var(--timeline-axis); background: var(--color-white); display: flex; align-items: center; justify-content: center; color: var(--color-cream); flex: none; }
.order-step.is-done .order-step__dot { background: var(--color-teal-deep); border-color: var(--color-teal-deep); }
.order-step.is-current .order-step__dot { border-color: var(--color-teal-deep); box-shadow: 0 0 0 5px rgba(14,156,136,.16); }
.order-step__label { display: block; font-size: 14px; line-height: 1.6; color: var(--color-ink-muted); padding-inline: 4px; }
.order-step.is-done .order-step__label { color: var(--color-ink); }
.order-step.is-current .order-step__label { font-weight: 800; color: var(--color-ink); }
.order-state { border-radius: 16px; padding: 16px 20px; font-weight: 700; background: var(--pill-unavail-bg); color: var(--pill-unavail-fg); }
.order-state--refunded { background: var(--pill-pending-bg); color: var(--pill-pending-fg); }
.order-item__thumb img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; display: block; }
@media (max-width: 600px) {
  .order-steps { flex-direction: column; gap: 22px; }
  .order-step { flex-direction: row; text-align: start; gap: 12px; }
  .order-step + .order-step::before { top: -22px; inset-inline-end: auto; inset-inline-start: 12.5px; width: 3px; height: 22px; }
}
.tracking-note { background: var(--color-tint-sand); border-radius: 16px; padding: 16px 20px; font-size: 15px; }
.tracking-note .code { direction: ltr; unicode-bidi: isolate; font-weight: 700; }

/* Legal document article — lead, gold rule, H2 sections, list, note, ending CTA. */
.legal-lead { font-size: 19px; line-height: 2.1; color: var(--color-ink-soft); font-weight: 600; }
.legal-rule { height: 2px; width: 90px; background: var(--color-gold); margin: 32px 0; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-size: 24px; line-height: 1.5; }
.legal-section p { margin-top: 16px; max-width: 720px; font-size: 17px; line-height: 2.15; color: var(--color-ink-soft); }
.legal-list { margin: 16px 0 0; padding-inline-start: 24px; max-width: 720px; font-size: 17px; line-height: 2.15; color: var(--color-ink-soft); }
.legal-note { margin-top: 20px; background: var(--color-tint-sand); border-radius: 16px; padding: 18px 24px; max-width: 720px; font-size: 16px; line-height: 2; color: var(--color-muted); }
.legal-cta { margin-top: 8px; padding-top: 28px; border-top: 1px dashed var(--border-card); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.legal-cta span { font-size: 15px; color: var(--color-muted); }
/* Elementor's sitewide `.elementor-kit-11 a` rule ties .btn--primary's specificity and wins by
   load order, turning the CTA into teal text on a teal background. Scope a stronger override here. */
.legal-cta .btn.btn--primary { color: var(--color-cream); }

/* Elementor Button widgets: the Manaii `.btn` classes are set as the widget's
   CSS classes, so they land on the widget WRAPPER, while the rendered anchor is
   `.elementor-button` — which Elementor's own widget CSS paints with its global
   accent (gold), tying the kit's rule on specificity and winning on load order.
   Result before this rule: every Elementor CTA looked like a small gold pill
   inside a ring. The wrapper is neutralised and the variant moves onto the
   anchor (3-class specificity beats Elementor's 2 regardless of order). */
.elementor-widget-button.btn {
  display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; min-height: 0; width: auto;
}
.elementor-widget-button.btn .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1;
  padding: 17px 36px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  transition: background-color var(--dur-color) var(--ease), color var(--dur-color) var(--ease);
}
.elementor-widget-button.btn--primary .elementor-button         { background: var(--color-teal-deep); color: var(--color-cream); }
.elementor-widget-button.btn--primary .elementor-button:hover   { background: #0c8a78; color: var(--color-cream); }
.elementor-widget-button.btn--primary-on-dark .elementor-button { background: var(--color-gold); color: var(--color-ink); }
.elementor-widget-button.btn--secondary .elementor-button       { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.elementor-widget-button.btn--on-dark .elementor-button         { background: transparent; color: var(--color-cream); border-color: var(--color-cream); }
.elementor-widget-button.btn--on-dark-green .elementor-button   { background: transparent; color: var(--color-green-dark); border-color: var(--color-green-dark); }
.elementor-widget-button.btn--ghost-cream .elementor-button     { background: var(--color-cream); color: var(--color-ink); }
.elementor-widget-button.btn--dark .elementor-button            { background: var(--color-ink); color: var(--color-cream); }

/* Elementor colours every Text Editor widget with its global text colour
   (ink), overriding the cream a dark ground sets — the Home story paragraph
   was near-invisible ink on dark green. On dark grounds, inherit instead. */
.ground-green .elementor-widget.elementor-widget-text-editor { color: inherit; }

/* Framed hero images: Elementor's `.elementor img { height: auto }` ties
   `.hero__img img` and wins on load order, defeating object-fit — the image
   sat at its natural height with a blank band under it inside the frame. */
/* About's duo portrait (the in-flow framed hero, identified by its inline
   aspect-ratio): the approved design frames it 420×380 (not square),
   cover-cropped at 50% 80%, on cream. */
.hero__media > .hero__img[style*="aspect-ratio"] { aspect-ratio: 420 / 380 !important; background: var(--color-cream); }
.hero__media > .hero__img[style*="aspect-ratio"] img { height: 100%; object-position: 50% 80%; }

.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.address-card { background: var(--color-white); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 24px; }
.address-card.is-default { border: 2px solid var(--color-teal-deep); }
.address-card__actions { display: flex; gap: 16px; margin-top: 16px; }
.address-card__actions a { font-size: 14px; }

.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.support-card { background: var(--color-white); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-card); }
.support-cta { background: var(--color-tint-sand); border-radius: var(--radius-card); padding: 32px; margin-top: 24px; text-align: center; }

/* ============================================================
   Continue Listening card
   ============================================================ */
.continue-card { background: var(--color-teal); color: var(--color-cream); border-radius: var(--radius-card); padding: 24px; display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; }
.continue-card img { width: 120px; height: 120px; border-radius: var(--radius-media-sm); object-fit: cover; }
.continue-card__title { font-size: 22px; font-weight: 800; }
.continue-card__meta { font-size: 15px; opacity: .9; margin-top: 6px; }
.continue-card .progress { background: rgba(255,246,220,.3); margin-top: 14px; }
.continue-card .progress__fill { background: var(--color-gold); }
.continue-card__play { width: 76px; height: 76px; border-radius: 999px; background: var(--color-cream); color: var(--color-green-dark); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   System state (one component, nine states)
   ============================================================ */
.system-state { text-align: center; max-width: 560px; margin: 0 auto; padding-block: 64px; }
.system-state img { display: block; max-width: 320px; margin: 0 auto 28px; }
.system-state h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
.system-state p { font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--color-ink-muted); margin-bottom: 28px; }
.system-state__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.system-state__hint { margin-top: 24px; font-size: 14px; color: var(--color-muted); background: var(--color-tint-sand); border-radius: 14px; padding: 14px 18px; }

/* ============================================================
   Meta pill (factual metadata)
   ============================================================ */
.meta-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--pill-pending-bg); color: var(--pill-pending-fg); }
.meta-pill--audience { background: var(--pill-audience-bg); color: var(--pill-audience-fg); }
.meta-pill--available { background: var(--pill-avail-bg); color: var(--pill-avail-fg); }

/* Quarterly description: the introductory-video poster heads the copy. */
.manaii-desc-video { margin: 0 0 32px; }
.manaii-desc-video img { display: block; width: 100%; height: auto; border-radius: var(--radius-media); }

/* Digital reader (account → محتوای دیجیتال → مطالعه) */
.reader-card { padding: 40px; margin-top: 16px; }
.reader-card__body { margin-top: 24px; max-width: 760px; }
.reader-card__body img { max-width: 100%; height: auto; border-radius: var(--radius-media); }
.reader-card__body h2, .reader-card__body h3 { margin-top: 28px; }
@media (max-width: 600px) { .reader-card { padding: 24px 18px; } }

/* Legal — one page, six documents (templates/legal.php) */
.legal-header h1 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 900; margin-top: 12px; }
.legal-header__updated { font-size: 15px; color: rgba(255,246,220,.75); margin-top: 10px; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.legal-rail { position: sticky; top: 24px; background: var(--color-white); border-radius: var(--radius-card); padding: 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 2px; }
.legal-rail__title { font-size: 13px; font-weight: 700; color: var(--color-muted); padding: 6px 12px 10px; }
.legal-rail a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--color-ink); font-size: 15px; }
.legal-rail a:hover { background: var(--color-tint-sand); }
.legal-rail a[aria-current="page"] { background: var(--color-tint-sand); color: var(--color-teal-deep); font-weight: 800; }
.legal-rail a.legal-rail__faq { margin-top: 10px; border-top: 1px solid var(--border-row); border-radius: 0; color: var(--color-teal-deep); font-weight: 700; padding-top: 14px; min-height: 52px; }
.legal-doc { max-width: var(--container-read); padding: 40px 48px; }
.legal-doc:focus { outline: none; }
.legal-doc .elementor-heading-title, .legal-doc h2, .legal-doc h3 { color: var(--color-ink) !important; font-size: 20px !important; font-weight: 800; line-height: 1.6; margin-top: 12px; }
.legal-doc .t-lead p, .legal-doc .elementor-widget-text-editor:first-child p { font-weight: 700; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-rail { position: static; flex-direction: row; }
  .legal-rail__title { display: none; }
  .legal-doc { padding: 24px 20px; }
}

/* Club — newsletter page */
.club-page .club-art img { width: 100%; max-width: 480px; height: auto; border-radius: var(--radius-media); box-shadow: var(--shadow-card); display: block; margin-inline: auto; }
.club-page .breadcrumb { margin-bottom: 24px; }
@media (max-width: 900px) { .club-page .club-art { order: -1; } .club-page .club-art img { max-width: 360px; } }
/* Narrow desktops/tablets: the diamonds sit in the gutter, never past the viewport edge. */
@media (min-width: 901px) and (max-width: 1240px) {
  .chapter__node { left: -24px; }
  .chapter--flip .chapter__node { left: auto; right: -24px; }
}