/* ==========================================================================
   GS-STANDARD.CSS  —  Galactic Spirit design standard
   --------------------------------------------------------------------------
   One stylesheet. Every module on /gs_standards/modules.php comes from here.
   New pages load THIS file. Old pages keep their existing CSS untouched
   until we are already working in them.

   Contents
     1.  Tokens (colors, type, spacing, radius)
     2.  Base elements
     3.  Layout helpers
     4.  Dividers + section headers
     5.  Buttons
     6.  Cards
     7.  Bonus stack
     8.  Pricing / choose-your-path
     9.  Access + membership bar
     10. Series + library modules
     11. Accordion + FAQ
     12. Alerts + badges
     13. Forms
     14. Media + icons
     15. Coming soon
     16. Free preview banner
     17. LT landing page (Living Transformation series hub)
     18. Print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* brand — single source of truth */
  --gs-blue:        #003c64;   /* official blue   */
  --gs-blue-dark:   #002c4a;
  --gs-purple:      #6b2d8f;   /* official purple */
  --gs-purple-dark: #55246f;
  --gs-gold:        #edb230;   /* official gold   */
  --gs-gold-dark:   #d4a020;
  --gs-gold-light:  #f0d79a;   /* gold, tinted — borders  */
  --gs-gold-soft:   #fdf7e8;   /* gold, palest — fills    */

  /* LT tier ramp — light to deep, five steps, landing on brand purple.
     Tier 4 is pinned to --gs-purple so the deepest tier is the brand color.
     These are the ONLY place tier colors are written. Never type them inline. */
  --gs-tier-0: #c39ae8;   /* Ground   · Free     */
  --gs-tier-1: #ab7fdc;   /* Know     · Gems     */
  --gs-tier-2: #9d72db;   /* Love     · Awaken   */
  --gs-tier-3: #7c49c6;   /* Practice · Initiate */
  --gs-tier-4: var(--gs-purple);  /* Legacy · Mastery */

  /* neutrals */
  --gs-black:  #111111;
  --gs-ink:    #242424;
  --gs-muted:  #666666;
  --gs-border: #e0daea;
  --gs-light:  #f7f5fb;
  --gs-white:  #ffffff;

  /* state */
  --gs-ok:    #2e7d54;
  --gs-warn:  #c0392b;
  --gs-info:  #31708f;

  /* type */
  --gs-font: 'Arimo', 'Century Gothic', Helvetica, Arial, sans-serif;
  --gs-font-accent: 'Caveat', cursive;

  /* spacing scale */
  --gs-s1: 4px;   --gs-s2: 8px;   --gs-s3: 12px;
  --gs-s4: 16px;  --gs-s5: 24px;  --gs-s6: 32px;
  --gs-s7: 48px;  --gs-s8: 64px;

  /* radius + shadow */
  --gs-r-sm: 4px;  --gs-r-md: 8px;  --gs-r-lg: 12px;  --gs-r-pill: 50px;
  --gs-shadow: 0 2px 10px rgba(0,0,0,.06);
  --gs-shadow-lg: 0 6px 24px rgba(0,0,0,.10);
}


/* ==========================================================================
   2. BASE ELEMENTS
   ========================================================================== */
.gs-scope{
  font-family: var(--gs-font);
  background: var(--gs-light);
  color: var(--gs-black);
  line-height: 1.5;
  font-size: 17px;
  margin:0;
}


/*.gs-scope h1, .gs-scope h2, .gs-scope h3,
.gs-scope h4, .gs-scope h5, .gs-scope h6{
  font-family: var(--gs-font);
  font-weight: 700;
  color: var(--gs-blue);
  line-height: 1.25;
  margin: 0 0 var(--gs-s3);
}
.gs-scope h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
.gs-scope h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
.gs-scope h3{ font-size: 1.25rem; }
.gs-scope h4{ font-size: 1.05rem; }
.gs-scope a:not(.gs-btn){ color: var(--gs-purple); text-decoration: underline; }
.gs-scope a:not(.gs-btn):hover{ color: var(--gs-purple-dark); }
.gs-scope strong, .gs-scope b{ color: var(--gs-blue); }
.gs-scope small{ font-size: .85rem; color: var(--gs-muted); }
.gs-scope hr{ border: 0; border-top: 1px solid var(--gs-border); margin: var(--gs-s4) 0; }
*/

.gs-lead{ font-size: 1.12rem; color: var(--gs-muted); }
.gs-accent{ font-family: var(--gs-font-accent); font-size: 1.5rem; color: var(--gs-purple); }
.gs-gold-text{ color: var(--gs-gold); }
.gs-blue-text{ color: var(--gs-blue); }
.gs-center{ text-align: center; }


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.gs-container{ max-width: 1140px; margin: 0 auto; padding: 0 var(--gs-s4); }
.gs-container--narrow{ max-width: 820px; }
.gs-section{ padding: 40px 0; }
.gs-section--alt{ background: var(--gs-light); }
.gs-section--blue{ background: var(--gs-blue); color: var(--gs-white); padding: 56px 0 48px; }
.gs-section--blue h1, .gs-section--blue h2, .gs-section--blue h3{ color: var(--gs-white); }
.gs-section--blue h1{ font-size: clamp(1.6rem, 2.9vw, 2.1rem); line-height: 1.3; max-width: 860px;
  margin-left: auto; margin-right: auto; }
.gs-section--blue h1 em{ color: var(--gs-gold); font-style: italic; }

/* A+I Fast-Track cross-promo banner (Round 14) — solid purple, white body text,
   gold headline + button for contrast, matching the subnav's purple. */
.gs-promo-banner{ background: var(--gs-purple); color: var(--gs-white); }
.gs-promo-banner p{ color: var(--gs-white); }

/* Gradient variant — same purple-to-gold diagonal gradient as the Calendar
   Promo strip (global_includes/gs-blocks/calendar-promo.php), reused here
   for the A+I mini promo placed below the hero. Add alongside
   .gs-promo-banner (don't use alone) so the base block still supplies
   layout/padding/text color; this modifier only swaps the background. */
.gs-promo-banner--gradient{
  background: linear-gradient(120deg, var(--gs-purple-dark) 0%, var(--gs-purple) 55%, var(--gs-gold) 130%);
}

/* 2-column hero standard, approved by Reg 2026-08-18: certificate left
   (40%), headline + CTA right (60%). Grid gives an exact split regardless
   of gap. Stacks to one column, cert on top and centered, under 700px —
   use this for every class sales page, not just this one. For legacy/
   multi-cert programs, put only the single top/final-tier certificate
   here (not the full set) — see gs-buy-now-standard project note. */
.gs-hero-split{
  display: grid; grid-template-columns: 40% 60%; align-items: center;
  gap: 40px;
}
.gs-hero-split__text{ text-align: left; }
.gs-hero-split__text h1{ margin-left: 0; margin-right: 0; }
.gs-hero-split__cert{ text-align: center; }
.gs-hero-split__cert img{ width: 100%; max-width: 280px; background: var(--gs-white); padding: 6px; }
.gs-hero-split__cert-label{
  margin: 10px 0 0; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gs-gold); font-weight: 700;
}
@media (max-width: 700px){
  .gs-hero-split{ grid-template-columns: 1fr; text-align: center; }
  .gs-hero-split__text{ text-align: center; }
}

/* minimal black sales-page footer — see gs-buy-now-standard note,
   2026-08-18. Deliberately just copyright + a couple of legal links,
   not the full site footer. */
.gs-mini-footer{ background: var(--gs-black); padding: var(--gs-s6) 0; }
.gs-mini-footer__text{ margin: 0 0 var(--gs-s2); font-size: .82rem; color: rgba(255,255,255,.7); }
.gs-mini-footer__links{ margin: 0; font-size: .78rem; }
.gs-mini-footer__links a{ color: rgba(255,255,255,.7); text-decoration: none; }
.gs-mini-footer__links a:hover{ color: var(--gs-white); text-decoration: underline; }
.gs-mini-footer__links span{ margin: 0 8px; color: rgba(255,255,255,.35); }

/* the small gold line above a hero headline */
.gs-eyebrow{
  letter-spacing: .22em;
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--gs-gold);
  font-weight: 500;
  margin-bottom: 0;
}

.gs-grid{ display: grid; gap: var(--gs-s5); }
.gs-grid--2{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.gs-grid--3{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.gs-grid--4{ grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }

.gs-stack > * + *{ margin-top: var(--gs-s4); }
.gs-row{ display: flex; flex-wrap: wrap; gap: var(--gs-s3); align-items: center; }


/* ==========================================================================
   4. DIVIDERS + SECTION HEADERS
   ========================================================================== */
.gs-rainbow{
  width: 100%; height: 8px; border-radius: 5px; border: 0;
  background: linear-gradient(90deg,
    rgba(255,0,0,1) 0%,    rgba(255,154,0,1) 10%,  rgba(208,222,33,1) 20%,
    rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%,
    rgba(28,127,238,1) 60%,rgba(95,21,242,1) 70%,  rgba(186,12,248,1) 80%,
    rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
}
.gs-rule{ border: 0; border-top: 2px solid var(--gs-border); }
.gs-rule--gold{ border-top-color: var(--gs-gold); }

.gs-label{
  display: inline-block;
  background: var(--gs-purple);
  color: var(--gs-white);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: var(--gs-r-sm);
  margin-bottom: var(--gs-s2);
}
.gs-label--gold{ background: var(--gs-gold); color: var(--gs-blue); }
.gs-label--blue{ background: var(--gs-blue); }

/* gold-bullet feature list — the "what you get" list on a sales page */
.gs-list{ list-style: none; padding: 0; margin: 0 0 2rem; }
.gs-list li{
  position: relative;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--gs-border);
  font-size: .95rem;
  color: #333;
}
.gs-list li:last-child{ border-bottom: 0; }
.gs-list li::before{
  content: "\25CF";
  position: absolute; left: 0; top: 14px;
  color: var(--gs-gold); font-size: .8rem; line-height: 1;
}

/* centered "this part is optional" note */
.gs-note{
  max-width: 600px;
  margin: 0 auto 32px;
  padding: 12px 20px;
  background: rgba(107,45,143,.68);
  color: var(--gs-white);
  border-radius: 6px;
  text-align: center;
  font-size: .85rem;
  font-style: italic;
}

.gs-section-head{ margin-bottom: var(--gs-s5); }
.gs-title{ font-size: clamp(1.6rem, 2.8vw, 2rem); margin-bottom: .3rem;margin-top:0; }
.gs-section-head .gs-date{
  color: var(--gs-purple);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  margin-bottom: 2rem;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.gs-btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--gs-r-pill);
  font-family: var(--gs-font);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--gs-shadow);
  transition: background .2s, color .2s, transform .15s, box-shadow .2s, border-color .2s;
}
.gs-btn:hover{
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: var(--gs-shadow-lg);
}
.gs-btn:active{
  transform: translateY(0);
  box-shadow: var(--gs-shadow);
}
.gs-btn:focus-visible{ outline: 3px solid var(--gs-purple); outline-offset: 2px; }
.gs-btn[disabled],
.gs-btn.is-disabled{
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
}

/* Text-colour rule: gold bg = black · purple bg = white · blue bg = white
   gold outline = black · purple outline = black · never underlined */
.gs-btn,
.gs-btn:hover,
.gs-btn:focus,
.gs-btn:active,
.gs-btn:visited{ text-decoration: none; }

.gs-btn--gold  { background: var(--gs-gold);   color: var(--gs-black) !important; }
.gs-btn--gold:hover  { background: var(--gs-gold-dark); color: var(--gs-black) !important; }
.gs-btn--purple{ background: var(--gs-purple); color: var(--gs-white) !important; }
.gs-btn--purple:hover{ background: var(--gs-purple-dark); color: var(--gs-white) !important; }
.gs-btn--blue  { background: var(--gs-blue);   color: var(--gs-white) !important; }
.gs-btn--blue:hover  { background: var(--gs-blue-dark); color: var(--gs-white) !important; }
/* gold outline */
.gs-btn--outline{ background: var(--gs-white); color: var(--gs-black) !important; border-color: var(--gs-gold); }
.gs-btn--outline:hover{ background: var(--gs-gold); color: var(--gs-black) !important; }
/* purple outline */
.gs-btn--ghost { background: var(--gs-white); color: var(--gs-black) !important; border-color: var(--gs-purple); }
.gs-btn--ghost:hover{ background: var(--gs-purple); color: var(--gs-white) !important; }

.gs-btn--sm{ padding: 10px 18px; font-size: .72rem; }
.gs-btn--lg{ padding: 16px 40px; font-size: .95rem; }
.gs-btn--block{ display: flex; width: 100%; }

/* SHAPE
   Rounded is the default. Square is the sales-page shape, from the Awaken
   sales page. Add it to any variant: .gs-btn .gs-btn--gold .gs-btn--square
   One shape per page — don't mix rounded and square on the same screen. */
.gs-btn--square{ border-radius: var(--gs-r-sm); padding: 13px 32px; }
.gs-btn--square.gs-btn--sm{ padding: 10px 18px; }
.gs-btn--square.gs-btn--lg{ padding: 16px 40px; }

/* the one buy-now button — always the same */
.gs-buy{
  background: var(--gs-gold);
  color: var(--gs-black);
  padding: 16px 40px;
  font-size: 1rem;
  box-shadow: var(--gs-shadow);
  text-decoration: none;
}
.gs-buy:hover{ background: var(--gs-gold-dark); color: var(--gs-black); text-decoration: none; }

/* full-width call-to-action strip */
.gs-cta-bar{
  background: var(--gs-blue);
  color: var(--gs-gold);
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  padding: var(--gs-s5);
  border-radius: var(--gs-r-md);
}
.gs-cta-bar a{ color: inherit; text-decoration: none; }
.gs-cta-bar--gold{ background: var(--gs-gold); color: var(--gs-blue); }


/* ==========================================================================
   6. CARDS
   ========================================================================== */
.gs-card{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s5);
  box-shadow: var(--gs-shadow);
}
.gs-card__icon{ font-size: 2rem; color: var(--gs-gold); margin-bottom: var(--gs-s2); }
.gs-card__title{ font-size: 1.15rem; margin-bottom: var(--gs-s2); }
.gs-card__text{ color: var(--gs-muted); font-size: .96rem; }

.gs-card--blue  { border-top: 5px solid var(--gs-blue); }
.gs-card--purple{ border-top: 5px solid var(--gs-purple); }
.gs-card--gold  { border-top: 5px solid var(--gs-gold); }
.gs-card--flat  { box-shadow: none; }
.gs-card--grey  { background: var(--gs-light); box-shadow: none; }

/* featured / highlight box */
.gs-featured{
  background: var(--gs-light);
  border: 2px solid var(--gs-gold);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s5);
}
.gs-featured--blue{ border-color: var(--gs-blue); }
.gs-featured--purple{ border-color: var(--gs-purple); }

/* locked / unlocked state */
.gs-card--locked{ position: relative; opacity: .75; border-style: dashed; }
.gs-card--locked::after{
  content: "\1F512";
  position: absolute; top: 12px; right: 14px;
  font-size: 1.1rem; opacity: .55;
}
.gs-card--unlocked{ border-left: 5px solid var(--gs-ok); }


/* ==========================================================================
   7. BONUS STACK
   --------------------------------------------------------------------------
   Collapsed by default. Five bonuses = five lines. Adding a bonus adds
   one line to the page, never a screen.
   ========================================================================== */
.gs-bonus-stack{
  border: 2px solid var(--gs-gold);
  border-radius: var(--gs-r-md);
  background: #fffdf7;
  overflow: hidden;
}
.gs-bonus-stack__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gs-s3);
  width: 100%;
  background: var(--gs-gold);
  color: var(--gs-black);
  border: 0;
  padding: var(--gs-s4) var(--gs-s5);
  font-family: var(--gs-font);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  text-align: left;
}
.gs-bonus-stack__head:hover{ background: var(--gs-gold-dark); }
.gs-bonus-stack__head::after{ content: "+"; font-size: 1.5rem; line-height: 1; }
.gs-bonus-stack[open] .gs-bonus-stack__head::after{ content: "\2212"; }
.gs-bonus-stack__head::-webkit-details-marker{ display: none; }
.gs-bonus-stack__body{ padding: var(--gs-s3) var(--gs-s5) var(--gs-s5); }

.gs-bonus{
  display: flex;
  gap: var(--gs-s4);
  align-items: baseline;
  padding: var(--gs-s3) 0;
  border-bottom: 1px solid #eee3cc;
}
.gs-bonus:last-child{ border-bottom: 0; }
.gs-bonus__tag{
  flex: 0 0 104px;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gs-white);
  background: var(--gs-purple);
  border-radius: 3px;
  padding: 3px 8px;
  text-align: center;
}
.gs-bonus__tag--vip{ background: var(--gs-gold); color: var(--gs-blue); }
.gs-bonus__body{ flex: 1; }
.gs-bonus__name{ display: block; font-weight: 700; color: var(--gs-blue); }
.gs-bonus__desc{ display: block; color: var(--gs-muted); font-size: .93rem; }
.gs-bonus__value{ flex: 0 0 80px; text-align: right; font-weight: 700; color: var(--gs-ok); }

.gs-bonus-total{
  margin-top: var(--gs-s4);
  padding-top: var(--gs-s4);
  border-top: 2px solid var(--gs-gold);
  text-align: right;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gs-blue);
}

/* single bonus call-out, used outside the stack */
.gs-bonus-card{
  position: relative;
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-left: 4px solid var(--gs-gold);
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 16px;
}
.gs-bonus-card__flag{
  position: absolute; top: -11px; right: 14px;
  background: var(--gs-purple); color: var(--gs-white);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; padding: 2px 9px; border-radius: 3px;
}
.gs-bonus-card__tag{
  display: inline-block;
  background: var(--gs-gold); color: var(--gs-black);
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; padding: 2px 10px; border-radius: 3px;
  margin-bottom: 8px;
}
.gs-bonus-card__title{ font-size: 1.05rem; color: var(--gs-blue); margin: 0 0 .4rem; }
.gs-bonus-card__text{ font-size: .88rem; color: var(--gs-muted); margin: 0; }

/* --------------------------------------------------------------------------
   THE BONUS ACCORDION  —  one row per bonus
   Every bonus name stays on the screen. Only the description folds away, so
   five bonuses take about the space of one open card and nothing that sells
   is hidden. This is the standard way to show bonuses on a sales page.
   -------------------------------------------------------------------------- */
.gs-bonus-acc{
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  background: var(--gs-white);
  overflow: hidden;
  margin-bottom: var(--gs-s4);
}
.gs-bonus-acc__head{
  background: var(--gs-blue);
  color: var(--gs-white);
  padding: 13px 20px;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gs-s3);
}
.gs-bonus-acc__head b{ color: var(--gs-white); font-size: .95rem; }
.gs-bonus-acc__head span{
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gs-gold);
}
.gs-bonus-acc__item{ border-bottom: 1px solid var(--gs-border); }
.gs-bonus-acc__item:last-of-type{ border-bottom: 0; }
.gs-bonus-acc__item > summary{
  list-style: none; cursor: pointer;
  padding: 14px 20px 14px 44px; position: relative;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gs-s3);
}
.gs-bonus-acc__item > summary::-webkit-details-marker{ display: none; }
.gs-bonus-acc__item > summary::before{
  content: "\25CF"; position: absolute; left: 20px; top:50%; transform: translateY(-50%);
  color: var(--gs-gold); font-size: .8rem; line-height: 1;
}
.gs-bonus-acc__item[open] > summary::before{ content: "\25BE"; color: var(--gs-purple); }
.gs-bonus-acc__item > summary:hover{ background: var(--gs-light); }
.gs-bonus-acc__name{ font-weight: 700; color: var(--gs-blue); font-size: .95rem; }
.gs-bonus-acc__flag{
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--gs-purple); white-space: nowrap;
}
.gs-bonus-acc__body{ padding: 0 20px 16px 44px; color: var(--gs-muted); font-size: .9rem; }
.gs-bonus-acc__body--stack img{
  width: 100%; max-width: 200px; display: block; margin: 0 0 10px;
  background: var(--gs-white); border: 1px solid var(--gs-border); padding: 5px; border-radius: 4px;
}
.gs-bonus-acc__body--stack p{ margin: 0; }
.gs-bonus-acc__body--col{
  display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center;
}
.gs-bonus-acc__body--col img{
  width: 100%; height: auto;
  background: var(--gs-white); border: 1px solid var(--gs-border); padding: 5px; border-radius: 4px;
}
.gs-bonus-acc__body--col p{ margin: 0; }
@media (max-width: 480px){
  .gs-bonus-acc__body--col{ grid-template-columns: 1fr; }
}

/* small certificate preview inside a plain "What You Get" list (order-stack), e.g. Option 2's card */
.gs-order-stack__cert-preview{
  display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center;
  margin-top: 14px;
}
.gs-order-stack__cert-preview img{
  width: 100%; height: auto;
  background: var(--gs-white); border: 1px solid var(--gs-border); padding: 5px; border-radius: 4px;
}
.gs-order-stack__cert-preview p{ margin: 0; font-size: .87rem; color: var(--gs-muted); }
@media (max-width: 480px){
  .gs-order-stack__cert-preview{ grid-template-columns: 1fr; }
}
.gs-bonus-acc__foot{
  background: var(--gs-gold-soft);
  border-top: 1px solid var(--gs-gold-light);
  padding: 11px 20px; text-align: right;
  font-size: .82rem; font-weight: 700; color: var(--gs-blue);
}

/* the "BONUSES – Lifetime Access!" line above a run of bonus cards */
.gs-bonus-header{
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gs-purple); font-weight: 600; margin-bottom: 1rem;
}

/* the row above an accordion group holding its "Open All" link (Reg,
   2026-08-18). Pairs with the [data-accordion-group] script at the bottom
   of the page: inside a group, opening one row closes the others; this
   link opens (or closes) every row in that group at once. */
.gs-acc-toggle-row{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .5rem;
}
.gs-acc-toggle{
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--gs-purple); text-decoration: none;
  white-space: nowrap;
}
.gs-acc-toggle:hover{ color: var(--gs-purple-dark); text-decoration: underline; }


/* ==========================================================================
   8. PRICING / CHOOSE YOUR PATH
   ========================================================================== */
.gs-pricing{
  display: grid; gap: var(--gs-s4);
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  margin: 0 auto;
}
.gs-price-card{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: 8px;
  padding: 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.gs-price-card--featured{ border: 2px solid var(--gs-purple); }
.gs-price-card__flag{
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gs-purple); color: var(--gs-white);
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; padding: 3px 14px; border-radius: 3px;
  white-space: nowrap;
}
.gs-price-card__tier{ font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gs-purple); font-weight: 600; margin-bottom: .4rem; }
.gs-price-card h3{ font-size: 1.5rem; margin-bottom: .2rem; }
.gs-price-card__price{ color: var(--gs-gold); font-weight: 600; font-size: 1rem;
  margin: 0 0 .2rem; }
.gs-price-card__price small,
.gs-price-card__price del{ font-size: .75rem; color: var(--gs-muted); font-weight: 300; }
.gs-price-card__date{ font-size: .8rem; color: var(--gs-muted); margin-bottom: 1.25rem; }
.gs-path-links{ font-size: .85rem; }
.gs-path-links a{ color: var(--gs-blue); font-weight: 600; text-decoration: none; }
.gs-path-links a:hover{ text-decoration: underline; }
.gs-price-card__desc{ font-size: .88rem; color: var(--gs-muted); font-style: italic;
  margin-bottom: 1.25rem; }
.gs-price-card__list{ list-style: none; padding: 0; margin: 0 0 1.75rem; text-align: left; flex: 1; }
.gs-price-card__list li{ position: relative; padding: 8px 0 8px 16px;
  border-bottom: 1px solid var(--gs-border); font-size: .88rem; color: #333; }
.gs-price-card__list li:last-child{ border-bottom: 0; }
.gs-price-card__list li::before{ content: "\25CF"; position: absolute; left: 0; top: 8px;
  color: var(--gs-gold); font-size: .8rem; line-height: 1.4; }
.gs-price-card__list li.is-sub{ padding-left: 32px; color: var(--gs-muted); font-size: .82rem; }
.gs-price-card__list li.is-sub::before{ left: 14px; }
.gs-price-card__list li.is-off{ color: #aaa; }
.gs-price-card__list li.is-off::before{ content: "\2014"; color: #ccc; }
.gs-price-card__best{ font-size: .75rem; color: var(--gs-purple); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  margin-bottom: 1.25rem; }


/* --------------------------------------------------------------------------
   8b. ORDER STACK  —  the "Buy Now" standard (RJ, 2026-08-17)
   -----------------------------------------------------------------------------
   Lives inside a .gs-price-card. Three closed rows — What You Get, Bonuses,
   Value — stack on top of an always-visible price line, so the value and the
   real price show even if a visitor never opens a single row. No pop-up: this
   whole stack sits directly on the page.

   ONE ACCORDION STANDARD (Reg, 2026-08-18): every accordion on this page —
   this order stack AND the bonus accordion in section 7 — uses the exact
   same row look: a gold dot before the label, a purple caret when open, no
   shaded background, same padding and indent. These rules are copied from
   .gs-bonus-acc__item on purpose so the two never drift apart again.
   -------------------------------------------------------------------------- */
.gs-order-stack{
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  background: var(--gs-white);
  overflow: hidden;
  margin: 0 0 var(--gs-s4);
  text-align: left;
}
.gs-order-stack__row{ border-bottom: 1px solid var(--gs-border); }
.gs-order-stack__row:last-of-type{ border-bottom: 0; }
.gs-order-stack__row > summary{
  list-style: none; cursor: pointer;
  padding: 14px 20px 14px 44px; position: relative;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gs-s3);
}
.gs-order-stack__row > summary::-webkit-details-marker{ display: none; }
.gs-order-stack__row > summary::before{
  content: "\25CF"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: var(--gs-gold); font-size: .8rem; line-height: 1;
}
.gs-order-stack__row[open] > summary::before{ content: "\25BE"; color: var(--gs-purple); }
.gs-order-stack__row > summary:hover{ background: var(--gs-light); }
.gs-order-stack__label{ font-weight: 700; color: var(--gs-blue); font-size: .95rem; }
.gs-order-stack__badge{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--gs-purple); white-space: nowrap;
}
.gs-order-stack__body{ padding: 0 20px 16px 44px; color: var(--gs-muted); font-size: .9rem; }
.gs-order-stack__body .gs-list{ margin: 0; }
.gs-order-stack__body .gs-list li{ padding: 6px 0; font-size: .87rem;padding-left:16px; }
.gs-order-stack__body .gs-bonus-acc{ margin: 0; border-radius: var(--gs-r-sm); }

/* itemized rows inside the "Value" accordion body — not an accordion itself,
   just a plain breakdown list, indented to line up under the row above */
.gs-value-list{ list-style: none; padding: 0; margin: 0; }
.gs-value-list li{
  display: flex; justify-content: space-between; gap: var(--gs-s2);
  padding: 5px 0; border-bottom: 1px solid var(--gs-border); font-size: .87rem;
}
.gs-value-list li:last-child{ border-bottom: 0; }
.gs-value-list__amt{ color: var(--gs-muted); white-space: nowrap; }
.gs-value-list__total{ font-weight: 700; color: var(--gs-blue); border-top: 2px solid var(--gs-gold-light); margin-top: 4px; padding-top: 8px; }

/* the price line — always visible, never hidden inside a closed row */
.gs-order-price{ text-align: center; margin: 0 0 1.25rem; }
.gs-order-price__was{ display: block; font-size: .85rem; color: var(--gs-muted); }
.gs-order-price__was del{ color: var(--gs-muted); }
.gs-order-price__now{ display: block; font-size: 1.7rem; font-weight: 700; color: var(--gs-gold); margin-top: 2px; }

/* --------------------------------------------------------------------------
   THE ORDER BUMP  —  Reg, 2026-08-18: noticeable, but reads as optional.
   A bright dashed box with a checkbox-style opt-in. It sits above the main
   Buy button so the add-on reads as an optional selection attached to the
   order, not as a competing CTA.
   -------------------------------------------------------------------------- */
.gs-order-bump{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 2px dashed var(--gs-gold);
  background: var(--gs-gold-soft);
  border-radius: var(--gs-r-sm);
  padding: var(--gs-s4);
  margin: 0 0 var(--gs-s6);
  text-align: left;
  font-size: .87rem;
  cursor: pointer;
}
.gs-order-bump__checkbox{
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--gs-purple);
}
.gs-order-bump__body{
  min-width: 0;
  display: block;
}
.gs-order-bump__tag{
  display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--gs-purple); margin-bottom: 4px;
}
.gs-order-bump__title{ margin: 0 0 4px; color: var(--gs-blue); font-size: 1.02rem; }
.gs-order-bump__text{ display: block; margin: 0; color: var(--gs-muted); }
.gs-order-bump__spots{ font-weight: 700; color: var(--gs-purple); }


/* ==========================================================================
   9. ACCESS + MEMBERSHIP BAR
   ========================================================================== */
.gs-access{
  display: flex; flex-wrap: wrap; gap: var(--gs-s3);
  justify-content: space-between; align-items: center;
  background: var(--gs-light);
  border: 1px solid var(--gs-border);
  border-left: 5px solid var(--gs-purple);
  border-radius: var(--gs-r-sm);
  padding: var(--gs-s3) var(--gs-s4);
  font-size: .93rem;
}
.gs-access--free  { border-left-color: var(--gs-ok); }
.gs-access--locked{ border-left-color: var(--gs-warn); }
.gs-access__prefix{ color: var(--gs-muted); }
.gs-access__level{
  display: inline-block; min-width: 22px; text-align: center;
  background: var(--gs-purple); color: var(--gs-white);
  border-radius: 3px; padding: 1px 6px; font-weight: 700; font-size: .8rem;
}
.gs-access__badge{
  background: var(--gs-gold); color: var(--gs-blue);
  border-radius: 3px; padding: 1px 7px; font-size: .66rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px;
}
.gs-access__actions{ display: flex; gap: var(--gs-s2); flex-wrap: wrap; }

/* membership-aware hero + unlock strip, derived from Jami's recurring asks
   for a universal hero that shows where content fits, the current layer, and
   what unlocks next. */
.gs-journey-hero{
  background: linear-gradient(135deg, var(--gs-blue) 0%, var(--gs-blue-dark) 100%);
  color: var(--gs-white);
  border-radius: 20px;
  padding: var(--gs-s6);
  box-shadow: var(--gs-shadow-lg);
}
.gs-journey-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gs-s2);
  margin-bottom: var(--gs-s4);
}
.gs-journey-hero__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--gs-r-pill);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.gs-journey-hero__pill--gold{
  background: var(--gs-gold);
  color: var(--gs-blue);
  border-color: var(--gs-gold);
}
.gs-journey-hero__title{ color: var(--gs-white); margin-bottom: var(--gs-s3); }
.gs-journey-hero__lead{
  color: rgba(255,255,255,.92);
  font-size: 1.05rem;
  max-width: 64ch;
  margin-bottom: var(--gs-s4);
}
.gs-journey-hero__body{
  display: grid;
  gap: var(--gs-s5);
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr);
}
.gs-journey-hero__aside{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s4);
}
.gs-journey-hero__aside-title{
  color: var(--gs-gold-light);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--gs-s2);
}
.gs-journey-hero__aside p{
  color: rgba(255,255,255,.9);
  font-size: .93rem;
  margin-bottom: var(--gs-s3);
}

.gs-unlock-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-s3);
  background: var(--gs-gold-soft);
  border: 1px solid var(--gs-gold-light);
  border-left: 5px solid var(--gs-gold);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s4);
}
.gs-unlock-bar__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gs-s2);
  align-items: center;
}
.gs-unlock-bar__label{
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gs-muted);
}
.gs-unlock-bar__title{
  font-weight: 700;
  color: var(--gs-blue);
}
.gs-unlock-bar__text{
  color: var(--gs-muted);
  font-size: .93rem;
}

/* RJ audit extraction: make the membership ladder reusable without bringing
   page-specific tier-switcher code or custom layouts into live pages yet. */
.gs-membership-ladder{
  display: grid;
  gap: var(--gs-s4);
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
}
.gs-membership-step{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s4);
  box-shadow: var(--gs-shadow);
  position: relative;
}
.gs-membership-step::after{
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 24px;
  border-top: 2px solid var(--gs-gold-light);
}
.gs-membership-step:last-child::after{ display: none; }
.gs-membership-step__eyebrow{
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gs-muted);
  font-weight: 700;
  margin-bottom: var(--gs-s2);
}
.gs-membership-step__title{ margin-bottom: var(--gs-s2); }
.gs-membership-step__text{
  color: var(--gs-muted);
  font-size: .92rem;
  margin-bottom: var(--gs-s3);
}
.gs-membership-step--active{
  border-color: var(--gs-gold);
  box-shadow: var(--gs-shadow-lg);
}
.gs-membership-step--next{
  border-style: dashed;
}

/* Jami's spreadsheet locks the system around a five-level by three-substep
   matrix. This module turns that structure into a reusable visual reference. */
.gs-journey-matrix{
  display: grid;
  gap: var(--gs-s4);
}
.gs-journey-row{
  display: grid;
  gap: var(--gs-s4);
  grid-template-columns: 200px 1fr;
  align-items: stretch;
}
.gs-journey-row__level{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-left: 5px solid var(--gs-purple);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s4);
}
.gs-journey-row__eyebrow{
  display: block;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: var(--gs-s2);
}
.gs-journey-row__title{ margin-bottom: var(--gs-s1); }
.gs-journey-row__meaning{
  color: var(--gs-muted);
  font-size: .92rem;
  margin-bottom: 0;
}
.gs-journey-row__steps{
  display: grid;
  gap: var(--gs-s3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gs-journey-step{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s4);
  box-shadow: var(--gs-shadow);
}
.gs-journey-step__kicker{
  display: block;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gs-muted);
  margin-bottom: var(--gs-s2);
}
.gs-journey-step__word{
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gs-blue);
  margin-bottom: var(--gs-s2);
}
.gs-journey-step__text{
  color: var(--gs-muted);
  font-size: .9rem;
  margin-bottom: 0;
}


/* ==========================================================================
   10. SERIES + LIBRARY MODULES
   ========================================================================== */
.gs-series-card{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s5);
  border-top: 5px solid var(--gs-purple);
}
.gs-series-card__kicker{ font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gs-gold); font-weight: 700; }
.gs-series-card__title{ font-size: 1.15rem; margin: var(--gs-s1) 0 var(--gs-s2); }
.gs-series-card__count{ color: var(--gs-muted); font-size: .88rem; }
.gs-series-card__links{ list-style: none; padding: 0; margin: var(--gs-s3) 0 0; }
.gs-series-card__links li{ padding: 5px 0; border-bottom: 1px solid var(--gs-border); font-size: .93rem; }
.gs-series-card__links li:last-child{ border-bottom: 0; }

.gs-pill{
  display: flex; gap: var(--gs-s3); align-items: center;
  background: var(--gs-white); border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-pill); padding: var(--gs-s2) var(--gs-s4);
  margin-bottom: var(--gs-s2);
}
.gs-pill__index{
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: var(--gs-purple); color: var(--gs-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}
.gs-pill__body{ flex: 1; font-size: .95rem; }

/* sticky anchor sub-nav */
.gs-subnav{
  position: sticky; top: 0; z-index: 100;
  background: var(--gs-purple);
  padding: 13px 0;
  overflow-x: auto;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease;
}
/* subtle lift once the nav locks to the top of the viewport, so it reads
   as "floating" above the page content instead of blending flat into it */
.gs-subnav.is-stuck{ box-shadow: 0 4px 14px rgba(0,0,0,.18); }
/* holds the link list + the persistent Buy Now button on one row. Links
   are CENTERED while the nav is still in its normal (not-yet-stuck)
   position; once it locks to the top of the viewport (.is-stuck, toggled
   by the IntersectionObserver script near </body>), the links shift to
   the left and the Buy Now button fades in on the right — matches Reg's
   2026-08-18 ask so the centered layout doesn't look off-center/awkward
   once the button appears. position:relative so the button (below) can
   be pinned absolutely without ever affecting how the links are
   centered/aligned. */
.gs-subnav__inner{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: var(--gs-s4);
  max-width: 1100px; margin: 0 auto; padding: 0 var(--gs-s4);
}
.gs-subnav.is-stuck .gs-subnav__inner{ justify-content: flex-start; }
.gs-subnav ul{ display: flex; justify-content: center; gap: 32px; list-style: none;
  margin: 0; padding: 0; white-space: nowrap; }
/* absolutely positioned (not a normal flex item) so it never pushes or
   offsets the centered/left-aligned link list — it just fades in over
   the far right once .is-stuck is added. The hero already has its own
   Buy Now button, so this one only appears once the hero has scrolled
   out of view, avoiding two Buy Now buttons on screen at once. See
   gs-buy-now-standard note, 2026-08-18. Opacity/position only — never
   touch color, size, or type styling here, that all needs to come
   untouched from .gs-btn. */
.gs-subnav a.gs-btn[data-subnav-cta]{
  position: absolute; right: var(--gs-s4); top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.gs-subnav.is-stuck a.gs-btn[data-subnav-cta]{
  opacity: 1; pointer-events: auto;
}
/* :not(.gs-btn) keeps this plain-nav-link styling off the Buy Now button
   entirely, so it falls through untouched to .gs-btn/.gs-btn--gold/
   .gs-btn--sm/.gs-btn--square and matches every other button on the page
   pixel-for-pixel — no separate overrides to keep in sync. (2026-08-18:
   this replaced an earlier fix that manually reset letter-spacing/
   text-transform/color on the button, which quietly drifted out of sync
   with the real .gs-btn values — don't redo that, exclude the button
   instead of chasing its properties one by one.) */
.gs-subnav a:not(.gs-btn){
  color: var(--gs-white); text-decoration: none; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  opacity: .9; transition: opacity .2s, color .2s;
}
.gs-subnav a:not(.gs-btn):hover, .gs-subnav a:not(.gs-btn)[aria-current="true"]{
  opacity: 1; color: var(--gs-gold);
}

/* RJ audit extraction: library and calendar pages repeatedly use a centered,
   non-sticky anchor row. Keep it separate from the sticky .gs-subnav. */
.gs-anchor-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gs-s2);
  padding: var(--gs-s3) 0;
  border-top: 1px solid var(--gs-border);
  border-bottom: 1px solid var(--gs-border);
}
.gs-anchor-nav a{
  color: var(--gs-blue);
  text-decoration: none;
  font-size: .95rem;
  font-style: italic;
}
.gs-anchor-nav a:hover{ color: var(--gs-purple); text-decoration: underline; }
.gs-anchor-nav__sep{ color: var(--gs-gold); }

/* RJ audit extraction: normalize feature / unlock grids used in calendar,
   library, and level pages. */
.gs-feature-grid{
  display: grid;
  gap: var(--gs-s5);
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.gs-feature-card{
  display: flex;
  flex-direction: column;
  gap: var(--gs-s3);
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-lg);
  padding: var(--gs-s5);
  box-shadow: var(--gs-shadow);
}
.gs-feature-card--blue{ border-top: 5px solid var(--gs-blue); }
.gs-feature-card--purple{ border-top: 5px solid var(--gs-purple); }
.gs-feature-card--gold{ border-top: 5px solid var(--gs-gold); }
.gs-feature-card__media{
  border-radius: var(--gs-r-md);
  overflow: hidden;
  background: var(--gs-light);
}
.gs-feature-card__media img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.gs-feature-card__title{ margin-bottom: 0; }
.gs-feature-card__text{
  color: var(--gs-muted);
  font-size: .95rem;
  flex: 1;
}
.gs-tier-badge{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--gs-r-pill);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--gs-light);
  color: var(--gs-blue);
}
.gs-tier-badge--free{ background: #eef8f2; color: var(--gs-ok); }
.gs-tier-badge--gems{ background: #f1ecfa; color: var(--gs-tier-1); }
.gs-tier-badge--awaken{ background: #efe8fb; color: var(--gs-tier-2); }
.gs-tier-badge--birthright{ background: #efe6fb; color: var(--gs-tier-3); }
.gs-tier-badge--mastery{ background: #ede3f7; color: var(--gs-tier-4); }

/* RJ audit extraction: cards that advertise portals, guides, or series
   entries with image + body + CTA. */
.gs-resource-grid{
  display: grid;
  gap: var(--gs-s5);
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.gs-resource-card{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-lg);
  overflow: hidden;
  box-shadow: var(--gs-shadow);
}
.gs-resource-card__img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.gs-resource-card__body{
  display: flex;
  flex-direction: column;
  gap: var(--gs-s3);
  padding: var(--gs-s4);
  flex: 1;
}
.gs-resource-card__title{ margin-bottom: 0; }
.gs-resource-card__text{
  color: var(--gs-muted);
  font-size: .94rem;
  flex: 1;
}

/* RJ audit extraction: home-RJ.php uses a recurring two-panel hero with image
   backgrounds and overlaid copy. This version is standardized and tokenized. */
.gs-split-hero{
  display: grid;
  gap: var(--gs-s4);
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}
.gs-split-hero__panel{
  position: relative;
  min-height: 360px;
  border-radius: 24px;
  overflow: hidden;
  padding: var(--gs-s6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--gs-white);
  background-size: cover;
  background-position: center;
  box-shadow: var(--gs-shadow-lg);
}
.gs-split-hero__panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,44,74,.15) 0%, rgba(0,44,74,.82) 100%);
}
.gs-split-hero__panel > *{
  position: relative;
  z-index: 1;
}
.gs-split-hero__eyebrow{
  margin-bottom: var(--gs-s2);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gs-gold-light);
}
.gs-split-hero__title{
  color: var(--gs-white);
  margin-bottom: var(--gs-s3);
}
.gs-split-hero__text{
  color: rgba(255,255,255,.92);
  margin-bottom: var(--gs-s2);
  max-width: 28ch;
}

/* editorial note component — standardized yellow notes, intended for notes
   mode, planning pages, or standards demos rather than public content. */
.gs-editor-note{
  background: #fff6b8;
  border: 1px solid #ead77b;
  border-left: 5px solid var(--gs-gold);
  border-radius: var(--gs-r-sm);
  padding: var(--gs-s3) var(--gs-s4);
  color: #574300;
}
.gs-editor-note__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--gs-s2);
}
.gs-editor-note__flag{
  display: inline-block;
  background: #574300;
  color: #fff6b8;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.gs-editor-note__by{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gs-editor-note p:last-child{ margin-bottom: 0; }


/* ==========================================================================
   11. ACCORDION + FAQ
   ========================================================================== */
.gs-accordion{ border: 1px solid var(--gs-border); border-radius: var(--gs-r-md); overflow: hidden; }
.gs-accordion details{ border-bottom: 1px solid var(--gs-border); }
.gs-accordion details:last-child{ border-bottom: 0; }
.gs-accordion summary{
  padding: var(--gs-s4) var(--gs-s5);
  font-weight: 700; color: var(--gs-blue); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: var(--gs-s3);
  background: var(--gs-white);
}
.gs-accordion summary::-webkit-details-marker{ display: none; }
.gs-accordion summary::after{ content: "+"; color: var(--gs-gold); font-size: 1.3rem; line-height: 1; }
.gs-accordion details[open] summary::after{ content: "\2212"; }
.gs-accordion summary:hover{ background: var(--gs-light); }
.gs-accordion .gs-accordion__body{ padding: 0 var(--gs-s5) var(--gs-s4); color: var(--gs-muted); }


/* ==========================================================================
   12. ALERTS + BADGES
   ========================================================================== */
.gs-alert{
  border-radius: var(--gs-r-sm);
  border-left: 5px solid var(--gs-info);
  background: #eef4f8;
  padding: var(--gs-s4) var(--gs-s5);
  margin-bottom: var(--gs-s4);
}
.gs-alert--warn{ border-left-color: var(--gs-warn); background: #fdf1ef; }
.gs-alert--ok  { border-left-color: var(--gs-ok);   background: #eef8f2; }
.gs-alert--gold{ border-left-color: var(--gs-gold); background: #fdf5e4; }
.gs-alert__title{ font-weight: 700; color: var(--gs-blue); margin-bottom: var(--gs-s1); }

.gs-badge{
  display: inline-block; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  padding: 3px 9px; border-radius: 3px;
  background: var(--gs-purple); color: var(--gs-white);
}
.gs-badge--gold{ background: var(--gs-gold); color: var(--gs-blue); }
.gs-badge--ok  { background: var(--gs-ok);   color: var(--gs-white); }
.gs-badge--warn{ background: var(--gs-warn); color: var(--gs-white); }
.gs-badge--soft{ background: #f0edf7; color: var(--gs-purple); border: 1px solid #d3c8e8; }


/* ==========================================================================
   13. FORMS
   ========================================================================== */
.gs-field{ margin-bottom: var(--gs-s4); }
.gs-field label{
  display: block; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; color: var(--gs-muted);
  margin-bottom: var(--gs-s1);
}
.gs-input, .gs-select, .gs-textarea{
  width: 100%;
  font-family: var(--gs-font);
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-sm);
  background: var(--gs-white);
  color: var(--gs-ink);
}
.gs-input:focus, .gs-select:focus, .gs-textarea:focus{
  outline: none; border-color: var(--gs-purple);
  box-shadow: 0 0 0 3px rgba(107,45,143,.15);
}
.gs-field__help{ font-size: .85rem; color: var(--gs-muted); margin-top: var(--gs-s1); }
.gs-field--error .gs-input{ border-color: var(--gs-warn); }
.gs-field--error .gs-field__help{ color: var(--gs-warn); }

.gs-form-card{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s6) var(--gs-s5);
  box-shadow: var(--gs-shadow);
}


/* ==========================================================================
   14. MEDIA + ICONS
   ========================================================================== */
.gs-img{ max-width: 100%; height: auto; display: block; }
.gs-img--round{ border-radius: var(--gs-r-md); }
.gs-img--center{ margin-left: auto; margin-right: auto; }
.gs-img--framed{ border: 1px solid var(--gs-border); border-radius: var(--gs-r-md);
  box-shadow: var(--gs-shadow); }

.gs-icon-40 { width: 40px;  height: auto; }
.gs-icon-60 { width: 60px;  height: auto; }
.gs-icon-80 { width: 80px;  height: auto; }
.gs-icon-100{ width: 100px; height: auto; }
.gs-icon-150{ width: 150px; height: auto; }
.gs-icon-200{ width: 200px; height: auto; }

.gs-video{
  position: relative; width: 100%; padding-bottom: 56.25%;
  border-radius: var(--gs-r-md); overflow: hidden; box-shadow: var(--gs-shadow);
  background: #000;
}
.gs-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gs-media{ display: grid; gap: var(--gs-s5); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.gs-media--flip > :first-child{ order: 2; }


/* ==========================================================================
   15. COMING SOON
   ========================================================================== */
.gs-soon{
  text-align: center;
  background: var(--gs-light);
  border: 2px dashed var(--gs-border);
  border-radius: var(--gs-r-lg);
  padding: var(--gs-s8) var(--gs-s5);
}
.gs-soon__step{
  display: inline-block; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700;
  color: var(--gs-purple); background: #f0edf7;
  padding: 4px 14px; border-radius: var(--gs-r-pill); margin-bottom: var(--gs-s3);
}
.gs-soon__title{ font-size: clamp(1.6rem,3.5vw,2.3rem); margin-bottom: var(--gs-s2); }
.gs-soon__text{ color: var(--gs-muted); max-width: 520px; margin: 0 auto var(--gs-s5) !important; }
.gs-soon__notify{ display: flex; gap: var(--gs-s2); max-width: 420px; margin: 0 auto var(--gs-s4); }
.gs-soon__notify .gs-input{ flex: 1; }


/* ==========================================================================
   16. FREE PREVIEW BANNER
   --------------------------------------------------------------------------
   For a page that exists and is readable but isn't finished, and will later
   sit behind the paid membership. Rendered by /global_includes/templates/_preview-banner.php,
   which sits at the very top of the page, above the header.

   Permanent — no close button, no JavaScript.

   NOTE: these same rules are duplicated at the bottom of /css/custom.css so
   legacy pages (which do not load this file) style the banner identically.
   Change one, change the other.
   ========================================================================== */
.gs-preview{
  position: relative;
  z-index: 900;
  background: linear-gradient(90deg, #f6c945 0%, var(--gs-gold) 100%);
  color: #2b2000;
  font-family: var(--gs-font);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.gs-preview__inner{
  max-width: 1140px;
  margin: 0 auto;
  padding: 11px 18px;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
}
/* Desktop: one line, always. Measured at 15px Arimo the default copy is
   955px wide, so 1100px up is where forcing one line is safe. Below that it
   wraps rather than overflowing sideways. Keep new copy under ~95 characters
   of message plus a ~20 character link or it will run off the edge. */
@media (min-width: 1100px){
  .gs-preview__inner{ flex-wrap: nowrap; white-space: nowrap; }
}
.gs-preview__badge{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #2b2000;
  color: #f6c945;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.gs-preview__msg{ font-weight: 400; }
.gs-preview__cta{
  display: inline-block;
  color: #2b2000;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.gs-preview__cta:hover,
.gs-preview__cta:focus{ color: #000; }

@media (max-width: 600px){
  .gs-preview__inner{ padding: 10px 14px; font-size: 14px; }
  .gs-preview__msg,
  .gs-preview__cta{ flex-basis: 100%; }   /* stack on small screens */
}

/* Staff note — only rendered when ?notes=1, so nothing to hide from the public. */
.gs-preview-staff{
  max-width: 1140px;
  margin: 8px auto 0;
  padding: 8px 14px;
  border-left: 4px solid var(--gs-gold);
  background: #fffbe9;
  color: #4a4028;
  font-family: var(--gs-font);
  font-size: 13px;
  line-height: 1.5;
}
.gs-preview-staff b{ color: #2b2000; }
.gs-preview-staff a{ color: #8a6a00; }


/* ==========================================================================
   17. LT LANDING PAGE  (Living Transformation series hub)
   --------------------------------------------------------------------------
   The default layout for the landing page of a Living Transformation series.
   Live example this was normalized from:
       /about/enhanceGS/awareness/index-v2.php
   Reference page: /gs_standards/lt-landing-standard.php

   Five parts, always in this order:
     1  .gs-lt-strip     progress strip — series name + one dot per step
     2  .gs-lt-start     the Start Series button
     3  .gs-lt-hero      title + 2-3 sentence promise
     4  .gs-lt-split     tier nav on the left, tier panels on the right
     5  footer (site include)

   Tier colors come from --gs-tier-0..4 only. Panels use the shared
   .gs-accordion, so this layout needs no accordion JavaScript.
   ========================================================================== */

/* ---- 1. progress strip ---------------------------------------------------- */
.gs-lt-strip{ background: var(--gs-blue); padding: var(--gs-s3) 0; }
.gs-lt-strip__in{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--gs-s2);
}
.gs-lt-strip__label{
  font-family: var(--gs-font);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gs-gold);
}
.gs-lt-strip__dots{ display: flex; align-items: center; gap: 6px; }
.gs-lt-dot{
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.65); background: transparent;
  transition: background .3s, border-color .3s;
}
.gs-lt-dot--hub{ width: 14px; height: 14px; background: var(--gs-gold); border-color: var(--gs-gold-light); }
.gs-lt-dot--active{ background: var(--gs-gold); border-color: var(--gs-gold-light); }
.gs-lt-dot--done{ background: rgba(255,255,255,.35); }

/* ---- 2. start button row -------------------------------------------------- */
.gs-lt-start{ padding: var(--gs-s5) var(--gs-s4) 0; }

/* ---- 3. hero -------------------------------------------------------------- */
.gs-lt-hero{ padding-top: var(--gs-s6); padding-bottom: var(--gs-s6); text-align: center; }
.gs-lt-hero h1{ margin-bottom: var(--gs-s3); }
.gs-lt-hero .gs-lead{ margin: 0 auto; max-width: 62ch; }

/* ---- 4. the split --------------------------------------------------------- */
.gs-lt-split{
  display: grid; grid-template-columns: 290px 1fr;
  border: 1px solid var(--gs-border); border-radius: var(--gs-r-md);
  overflow: hidden; background: var(--gs-white);
}

/* left — tier nav */
.gs-lt-nav{ border-right: 1px solid var(--gs-border); background: var(--gs-light); overflow-y: auto; }
.gs-lt-nav__divider{ height: 1px; background: var(--gs-border); margin: var(--gs-s1) var(--gs-s5); }

.gs-lt-tier{
  width: 100%; display: flex; align-items: flex-start; gap: var(--gs-s3);
  padding: var(--gs-s4) var(--gs-s5); min-height: 44px;
  background: none; border: 0; border-left: 3px solid transparent;
  font-family: var(--gs-font); text-align: left; color: inherit; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.gs-lt-tier:hover{ background: var(--gs-white); }
.gs-lt-tier.is-active{ background: var(--gs-white); }
.gs-lt-tier:focus-visible{ outline: 3px solid var(--gs-purple); outline-offset: -3px; }

.gs-lt-tier__icon{
  width: 30px; height: 30px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%;
  background: rgba(255,255,255,.75);
  transition: box-shadow .25s;
}
.gs-lt-tier__icon img{ max-width: 18px; height: auto; }
.gs-lt-tier:hover .gs-lt-tier__icon,
.gs-lt-tier.is-active .gs-lt-tier__icon{ box-shadow: 0 0 12px -2px currentColor; }

.gs-lt-tier__text{ flex: 1; display: block; }
.gs-lt-tier__name{ display: block; font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.gs-lt-tier__mode{
  display: block; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gs-muted);
}
.gs-lt-tier__sub{
  display: block; margin-top: 3px; font-size: .78rem;
  font-style: italic; color: var(--gs-muted); line-height: 1.4;
}

/* tier colors — the ONE place a tier number maps to a color */
.gs-lt-tier[data-tier="0"]{ color: var(--gs-tier-0); }
.gs-lt-tier[data-tier="1"]{ color: var(--gs-tier-1); }
.gs-lt-tier[data-tier="2"]{ color: var(--gs-tier-2); }
.gs-lt-tier[data-tier="3"]{ color: var(--gs-tier-3); }
.gs-lt-tier[data-tier="4"]{ color: var(--gs-tier-4); }
.gs-lt-tier.is-active[data-tier="0"]{ border-left-color: var(--gs-tier-0); }
.gs-lt-tier.is-active[data-tier="1"]{ border-left-color: var(--gs-tier-1); }
.gs-lt-tier.is-active[data-tier="2"]{ border-left-color: var(--gs-tier-2); }
.gs-lt-tier.is-active[data-tier="3"]{ border-left-color: var(--gs-tier-3); }
.gs-lt-tier.is-active[data-tier="4"]{ border-left-color: var(--gs-tier-4); }

/* right — the panels */
.gs-lt-panels{ background: var(--gs-white); overflow-y: auto; }
.gs-lt-panel{ display: none; padding: var(--gs-s7) var(--gs-s7) var(--gs-s8); }
.gs-lt-panel.is-active{ display: block; }

.gs-lt-panel__header{
  position: relative; margin-bottom: var(--gs-s6);
  padding-bottom: var(--gs-s5); border-bottom: 1px solid var(--gs-border);
}
.gs-lt-panel__header::after{
  content: ""; position: absolute; bottom: -1px; left: 0;
  width: 72px; height: 2px; background: currentColor;
}
.gs-lt-panel__title{ font-size: clamp(1.25rem, 3vw, 1.75rem); letter-spacing: .04em; margin-bottom: var(--gs-s2); }
.gs-lt-panel__subtitle{ font-style: italic; color: var(--gs-muted); margin-bottom: var(--gs-s3); }
.gs-lt-panel__intro{ max-width: 66ch; margin-bottom: 0; }
.gs-lt-panel__meta{ margin-top: var(--gs-s6); }

/* the panel takes its tier color; title and rule inherit it */
.gs-lt-panel[data-tier="0"]{ color: var(--gs-tier-0); }
.gs-lt-panel[data-tier="1"]{ color: var(--gs-tier-1); }
.gs-lt-panel[data-tier="2"]{ color: var(--gs-tier-2); }
.gs-lt-panel[data-tier="3"]{ color: var(--gs-tier-3); }
.gs-lt-panel[data-tier="4"]{ color: var(--gs-tier-4); }
.gs-lt-panel__title{ color: currentColor; }
.gs-lt-panel__intro, .gs-lt-panel .gs-accordion{ color: var(--gs-ink); }

/* ---- accordion label + step numbers -------------------------------------- */
.gs-lt-acc-label{
  font-size: .62rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gs-muted); margin-bottom: var(--gs-s3);
}
.gs-lt-acc__num{ width: 22px; flex-shrink: 0; font-size: .7rem; color: var(--gs-muted); }
.gs-lt-acc__title{ flex: 1; }

/* ---- the 2-minute practice box ------------------------------------------- */
.gs-lt-practice{
  background: var(--gs-gold-soft);
  border: 1px solid var(--gs-gold-light);
  border-left: 3px solid var(--gs-gold);
  border-radius: var(--gs-r-sm);
  padding: var(--gs-s3) var(--gs-s4);
  margin-top: var(--gs-s4);
}
.gs-lt-practice__label{
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gs-gold-dark); margin-bottom: var(--gs-s2);
}
.gs-lt-practice__text{ font-style: italic; color: var(--gs-ink); margin-bottom: 0; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 768px){
  .gs-journey-hero__body{ grid-template-columns: 1fr; }
  .gs-membership-step::after{ display: none; }
  .gs-journey-row{ grid-template-columns: 1fr; }
  .gs-journey-row__steps{ grid-template-columns: 1fr; }
  .gs-lt-split{ grid-template-columns: 1fr; }
  .gs-lt-nav{ border-right: 0; border-bottom: 1px solid var(--gs-border); }
  .gs-lt-panel{ padding: var(--gs-s5) var(--gs-s4) var(--gs-s6); }
}


/* ==========================================================================
   18. LEVEL LOCK / UNLOCK HERO
   -----------------------------------------------------------------------------
   One page, two states. Per the 2026-07-27 PM decision, a gated page (Gems,
   Seek, Birthright, Mastery start pages) is no longer two separate files
   that redirect into each other — it's ONE page whose PHP level-check
   either shows the real content or leaves it locked. This block is that
   page's top: a banner, then a two-column locked hero (teaser + sign-in),
   collapsing to one full-width column once the visitor's level unlocks it.

   HOW TO USE (see gs_standards/_level-lock-standard.php for the full demo):
     <?php $locked = !(isset($lvl) && $lvl >= $accessLevel); ?>
     <div class="gs-lock <?php echo $locked ? '' : 'gs-lock--unlocked'; ?>">
       ...banner...
       <div class="gs-lock__grid">
         <div class="gs-lock__teaser">...preview/overview copy...</div>
         <?php if ($locked): ?>
           <div class="gs-lock__teaser-side"><div class="gs-signin-hero gs-signin-hero--light">...</div></div>
         <?php endif; ?>
       </div>
       <div class="gs-lock__body"> ...real page content... </div>
     </div>
   When $locked, .gs-lock__body gets a fade-out overlay and a centered
   "Unlock Now" button; when unlocked, the overlay and button are simply
   left out of the markup (don't just hide them with CSS — the PM decision
   is that gated copy shouldn't ship to a locked-out visitor's HTML at all).
   ========================================================================== */
.gs-lock__banner{ margin-bottom: var(--gs-s5); }
.gs-lock__banner img{ display: block; width: 100%; height: auto; border-radius: var(--gs-r-md); }

/* Clickable "Tap to Unlock" bar — blank background image (unlock-bar_blank.gif)
   with the level icon + text overlaid, instead of a different static banner
   image per level. Tapping it opens the same Sign In dropdown as the rest of
   the .gs-lock component (wire it to onclick="triggerSignInDropdown(event)").
   "Tap to Unlock" prints in white; the level name prints in gold so the eye
   lands on which level is actually required. */
.gs-lock__banner-link{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 74px;
  padding: 14px 20px;
  margin-bottom: var(--gs-s5);
  border-radius: var(--gs-r-md);
  background-image: url('https://galacticspirit.com/art/special/unlock-bar_blank.gif') !important;
  background-size: cover !important;
  background-position: center !important;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}
.gs-lock__banner-link:hover .gs-lock__banner-tap{ text-decoration: underline; }
.gs-lock__banner-icon{
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.gs-lock__banner-text{
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.gs-lock__banner-tap{ color: var(--gs-white); }
.gs-lock__banner-level{ color: var(--gs-gold); }
.gs-lock__banner-or-higher{
  font-weight: 400;
  font-size: .85em;
  color: var(--gs-white);
}

.gs-lock__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gs-s5);
  align-items: stretch;
  margin-bottom: var(--gs-s5);
}
.gs-lock--unlocked .gs-lock__grid{ grid-template-columns: 1fr; }

.gs-lock__teaser{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gs-lock__teaser-eyebrow{
  display: inline-block;
  margin-bottom: var(--gs-s2);
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gs-purple);
}
.gs-lock--unlocked .gs-lock__teaser-eyebrow{ color: var(--gs-ok); }
.gs-lock__teaser h2{ margin-bottom: var(--gs-s2); }
.gs-lock__teaser p{ color: var(--gs-muted); margin-bottom: 0; }
.gs-lock__teaser img{ width: 100%; border-radius: var(--gs-r-sm); margin-top: var(--gs-s3); }

/* the sign-in card, right column when locked — "Hero Light" */
.gs-signin-hero{
  height: 100%;
  padding: var(--gs-s5);
  border-radius: var(--gs-r-md);
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.gs-signin-hero__icon{ width: 44px; height: 44px; object-fit: contain; margin: 0 auto var(--gs-s2); display: block; }
.gs-signin-hero__eyebrow{
  display: block; margin-bottom: var(--gs-s2);
  font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.gs-signin-hero__title{ margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; line-height: 1.3; }
.gs-signin-hero__level{ color: var(--gs-purple); }
.gs-signin-hero__sub{ margin: var(--gs-s2) auto 0; max-width: 44ch; font-size: .92rem; color: var(--gs-muted); }
.gs-signin-hero__actions{ display: flex; align-items: center; justify-content: center; gap: var(--gs-s2); flex-wrap: wrap; margin-top: var(--gs-s3); }

.gs-signin-hero--light{ background: var(--gs-gold-soft); border: 1px solid var(--gs-gold-light); }
.gs-signin-hero--light .gs-signin-hero__eyebrow{ color: #8a6a12; }
.gs-signin-hero--light .gs-signin-hero__title{ color: var(--gs-black); }

/* the deeper/paid-tier version — Mastery and any other level that isn't
   free. Same card, dark blue instead of soft gold, so a higher-tier lock
   reads as a step up rather than a repeat of the free Gems card. */
.gs-signin-hero--blue{ background: linear-gradient(135deg, var(--gs-blue-dark) 0%, var(--gs-blue) 100%); }
.gs-signin-hero--blue .gs-signin-hero__eyebrow{ color: var(--gs-gold-light); }
.gs-signin-hero--blue .gs-signin-hero__title{ color: var(--gs-white); }
.gs-signin-hero--blue .gs-signin-hero__title .gs-signin-hero__level{ color: var(--gs-gold-light); }
.gs-signin-hero--blue .gs-signin-hero__sub{ color: rgba(255,255,255,.85); }
.gs-signin-hero--blue .gs-signin-hero__trigger{ color: var(--gs-gold-light); }
.gs-signin-hero--blue .gs-signin-hero__trigger:hover{ color: var(--gs-gold); }

/* the "word triggers the dropdown" sign-in link — same idea as a normal
   .gs-btn, but inline text, no button chrome, so it reads as part of the
   sentence ("...FREE! Sign In with FREE Membership..."). */
.gs-signin-hero__trigger{ color: var(--gs-purple); font-weight: 700; text-decoration: underline; cursor: pointer; }
.gs-signin-hero__trigger:hover{ color: var(--gs-purple-dark); }

/* body: real page content. Locked = dimmed + fade + centered Unlock Now.
   Unlocked = plain, full-strength, no overlay in the markup at all. */
.gs-lock__body{ position: relative; }
.gs-lock__body-content{ position: relative; }
.gs-lock__body-content--preview-fixed{
  min-height: 420px;
  max-height: 420px;
  overflow: hidden;
}
.gs-lock--unlocked .gs-lock__body-content{ filter: none; }
.gs-lock:not(.gs-lock--unlocked) .gs-lock__body-content{
  filter: blur(1.5px);
  user-select: none;
  pointer-events: none;
}
.gs-lock__overlay{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 40%, var(--gs-white) 75%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--gs-s5);
}
.gs-lock__unlock-row{ text-align: center; }
.gs-lock__unlock-row p{ margin: 0 0 var(--gs-s3); font-weight: 700; color: var(--gs-blue); }

/* the real content that sits inside .gs-lock__body-content — one card per
   piece of gated content (a reading, an activation, etc.). Not a demo-only
   filler: this is the actual block to reuse wherever real content goes,
   locked or unlocked. */
.gs-lock__content-block{
  background: var(--gs-white);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-r-md);
  padding: var(--gs-s5);
  margin-bottom: var(--gs-s4);
}
.gs-lock__content-block h3{ margin-bottom: .4rem; }
.gs-lock__content-block p{ color: var(--gs-muted); margin-bottom: 0; }

@media (max-width: 760px){
  .gs-lock__grid{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   19. PRINT
   ========================================================================== */
@media print{
  .gs-subnav, .gs-cta-bar, .gs-preview, .gs-preview-staff{ display: none !important; }
  .gs-lt-strip, .gs-lt-start, .gs-lt-nav{ display: none !important; }
  .gs-lt-split{ display: block; border: 0; }
  .gs-lt-panel{ display: block !important; padding: 0 0 var(--gs-s5); break-inside: avoid; }
  .gs-scope{ font-size: 11pt; color: #000; }
  .gs-card, .gs-price-card, .gs-bonus-stack{ break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   20. CALENDAR PROMO STRIP
   --------------------------------------------------------------------------
   Small reusable banner for the free Galactic Astro Calendar (a $40 value,
   free to every member, every year). Mockup approved by Reg 2026-08-23:
   purple-to-gold gradient, Ghost (purple) button, two states (signed
   out / signed in).

   HOW TO USE — set $signedIn, then include the shared markup:
     <?php include("$path/global_includes/gs-blocks/calendar-promo.php"); ?>

   Lives in global_includes/gs-blocks/ alongside the Level Lock/Unlock
   pieces (moved there 2026-08-23 — that folder used to be gs-lock/).

   First page it's on: members/seek-RJ.php (which loads css/custom.css, not
   this file — see the matching "STANDARD — CALENDAR PROMO STRIP" section
   there). This copy is for any page that loads css/standards.css instead.
   Change one, change the other.

   Round 2026-08-30 (Reg): dropped the calendar-icon box, added
   .gs-cal-promo__eyebrow and .gs-cal-promo__value for the signed-out
   state's new eyebrow / title(+value) / features-list hierarchy.
   ========================================================================== */
.gs-cal-promo{
  display: flex;
  align-items: center;
  gap: var(--gs-s4);
  flex-wrap: wrap;
  margin: var(--gs-s6) 0;
  padding: var(--gs-s4) var(--gs-s5);
  border-radius: var(--gs-r-lg);
  background: linear-gradient(120deg, var(--gs-purple-dark) 0%, var(--gs-purple) 55%, var(--gs-gold) 130%);
  box-shadow: var(--gs-shadow);
  color: var(--gs-white);
}
.gs-cal-promo__text{
  flex: 1 1 260px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gs-cal-promo__eyebrow{
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gs-gold-light);
}
.gs-cal-promo__title{
  display: block;
  font-size: 1.05rem;
  color: var(--gs-white);
}
.gs-cal-promo__value{
  font-weight: 400;
  opacity: .85;
  font-size: .85em;
}
.gs-cal-promo__sub{
  display: block;
  font-size: .78rem;
  color: var(--gs-gold-light);
  margin-top: 2px;
}
.gs-cal-promo__cta{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 480px){
  .gs-cal-promo{ padding: var(--gs-s3) var(--gs-s4); }
  .gs-cal-promo__cta{ width: 100%; }
}
/* --- End - STANDARD: Calendar Promo Strip --- */

/* ==========================================================================
   21. VIDEO INDICATOR
   --------------------------------------------------------------------------
   Pure-CSS play badge (no SVG/image) in the purple-to-gold gradient — same
   gradient as the Calendar Promo Strip above (section 20). Approved by Reg
   2026-08-23, first used inline inside the "Your SuperPower Activation"
   .gs-btn on members/seek-RJ.php.

   HOW TO USE — drop the span anywhere, standalone or inside a .gs-btn:
     <span class="video-indicator"></span>
     <a class="gs-btn gs-btn--purple"><span class="video-indicator video-indicator--btn"></span> Label</a>

   Two looks:
     .video-indicator            gradient badge, white triangle (default)
     .video-indicator--light     white badge + shadow, gradient triangle
   Two sizes on top of the default:
     .video-indicator--lg        96x68 (bigger standalone use)
     .video-indicator--btn       26x18 (small, sits inline inside a .gs-btn)
     .video-indicator--icon      22x16 (smallest, sits inline before link text)

   This copy is for any page that loads css/standards.css instead of
   css/custom.css — see the matching "VIDEO INDICATOR" section there.
   Change one, change the other.
   ========================================================================== */
.video-indicator{
  display: inline-block;
  width: 72px;
  height: 51px;
  border-radius: var(--gs-r-lg);
  background: linear-gradient(135deg, var(--gs-purple-dark) 0%, var(--gs-purple) 55%, var(--gs-gold) 130%);
  position: relative;
  box-shadow: var(--gs-shadow);
  vertical-align: middle;
}
.video-indicator::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--gs-white);
}
.video-indicator--lg{ width: 96px; height: 68px; border-radius: var(--gs-r-lg); }
.video-indicator--lg::after{ border-width: 14px 0 14px 24px; }

.video-indicator--icon{
  width: 22px;
  height: 16px;
  border-radius: var(--gs-r-sm, 4px);
  box-shadow: none;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
.video-indicator--icon::after{ border-width: 4px 0 4px 6px; }

.video-indicator--btn{
  width: 26px;
  height: 18px;
  border-radius: var(--gs-r-sm);
  box-shadow: none;
}
.video-indicator--btn::after{ border-width: 5px 0 5px 8px; }

.video-indicator--light{
  background: var(--gs-white);
  box-shadow: var(--gs-shadow);
}
.video-indicator--light::after{
  width: 20px;
  height: 24px;
  border: none;
  background: linear-gradient(135deg, var(--gs-purple-dark) 0%, var(--gs-purple) 55%, var(--gs-gold) 130%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-38%, -50%);
}
.video-indicator--light.video-indicator--lg::after{ width: 26px; height: 32px; }
.video-indicator--light.video-indicator--btn::after{ width: 9px; height: 11px; transform: translate(-35%, -50%); }
/* --- End - STANDARD: Video Indicator --- */