/* ============================================================================
   GREY SPACE SALES PAGE SYSTEM
   Approved 2026-09-26. Shared by /course, /unscripted-course and /unscripted.

   One file so the three pages cannot drift. Change a number here and it
   changes everywhere, which is the whole point of having agreed it once.

   THE RULES, all checkable:
     1. One width. 720 for everything: headline, lead, video, cards, rows.
     2. Two surfaces. #000000 and #0E0E0F, strictly alternating, never two
        the same in a row.
     3. Two fonts. Serif on headings ONLY. One sans for everything else.
        No mono anywhere.
     4. Five sizes. 56 / 44 / 21 / 17 / 13. Nothing else exists.
     5. Display stack centred, body copy left inside its own block.
     6. ONE run of sub text under a heading. Never a paragraph, a gap, then
        another paragraph.
     7. Proximity. 18 inside a block, 56 between a heading and what follows,
        86 between sections. A group sits closer to itself than to its
        neighbour or the heading looks like it belongs to the card below it.
     8. Under 60 words of body per section. Lists and the offer are exempt.
     9. Gold is the only colour on the page, so the button is the only
        saturated object. That is the isolation effect doing the work.
   ========================================================================= */

:root {
  /* Surfaces */
  --gs-base:    #000000;
  --gs-break:   #0E0E0F;
  --gs-gold:    #D4A03C;
  --gs-gold-hi: #E6B74F;
  --gs-gold-lo: #B5842A;
  --gs-tx:      #F7F7F8;
  --gs-body:    #A8A8AD;
  --gs-sub:     #76767C;
  --gs-line:    rgba(255,255,255,0.11);
  --gs-fill:    rgba(255,255,255,0.045);

  /* Width. One value. */
  --gs-w:       720px;
  --gs-gutter:  30px;

  /* Type */
  --gs-serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --gs-sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gs-hero:  56px;
  --gs-h2:    44px;
  --gs-lead:  21px;
  --gs-text:  17px;
  --gs-label: 13px;

  /* Space */
  --gs-in:      18px;   /* inside a block   */
  --gs-between: 56px;   /* heading to block */
  --gs-section: 86px;   /* section to section */
}

/* ---- ground ------------------------------------------------------------ */
.gs body, body.gs { background: var(--gs-base); color: var(--gs-tx); }

.gs-sec { padding: var(--gs-section) var(--gs-gutter); background: var(--gs-base); }
.gs-sec.alt { background: var(--gs-break); }
.gs-sec.bleed { padding: 0; }

.gs-w, .gs-t { max-width: var(--gs-w); margin-left: auto; margin-right: auto; }

/* ---- type -------------------------------------------------------------- */
.gs h1, .gs h2, .gs-hero, .gs-h2 {
  font-family: var(--gs-serif); font-weight: 700; text-align: center;
  text-wrap: balance; color: var(--gs-tx);
}
.gs-hero { font-size: clamp(34px, 6vw, var(--gs-hero)); line-height: 1.1; }
.gs-h2   { font-size: clamp(28px, 4.6vw, var(--gs-h2)); line-height: 1.18; }

.gs-label {
  font-family: var(--gs-sans); font-size: var(--gs-label); font-weight: 500;
  letter-spacing: 2.6px; text-transform: uppercase; color: var(--gs-gold);
  text-align: center;
}
.gs-lead {
  font-family: var(--gs-sans); font-size: clamp(18px, 2.2vw, var(--gs-lead));
  line-height: 1.5; color: var(--gs-body); text-align: center;
}
.gs-body { font-family: var(--gs-sans); font-size: var(--gs-text); line-height: 1.6; color: var(--gs-body); }
.gs-accent {
  font-family: var(--gs-sans); font-size: clamp(18px, 2.2vw, var(--gs-lead));
  color: var(--gs-gold); text-align: center; line-height: 1.5;
}

/* Rule 5: anything longer than a couple of lines goes left, inside its block. */
.gs-card, .gs-row, .gs-qa, .gs-guar, .gs-bleed-copy { text-align: left; }

/* ---- proximity (rule 7) ------------------------------------------------ */
.gs-label + .gs-hero, .gs-label + .gs-h2 { margin-top: var(--gs-in); }
.gs-hero + .gs-lead, .gs-h2 + .gs-lead   { margin-top: 24px; }
.gs-t + *, .gs-lead + *, .gs-h2 + .gs-w  { margin-top: var(--gs-between) !important; }
.gs-w + .gs-t, .gs-w + .gs-accent        { margin-top: var(--gs-between); }

/* ---- video ------------------------------------------------------------- */
.gs-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px;
            overflow: hidden; border: 1px solid rgba(212,160,60,0.26); background: #000; cursor: pointer; }
.gs-video img, .gs-video video { position: absolute; inset: 0; width: 100%; height: 100%;
                                 object-fit: cover; display: block; border: 0; }
.gs-video .play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px;
                  border-radius: 50%; background: rgba(212,160,60,0.92);
                  display: flex; align-items: center; justify-content: center; }
.gs-video .play::after { content: ""; border-left: 22px solid #1A1206;
                         border-top: 13px solid transparent; border-bottom: 13px solid transparent;
                         margin-left: 6px; }

/* ---- button ------------------------------------------------------------ */
.gs-btn {
  display: block; width: fit-content; margin: 36px auto 0; text-align: center;
  font-family: var(--gs-sans); font-weight: 700; font-size: 28px; letter-spacing: .2px;
  padding: 15px 40px; border-radius: 100px; text-decoration: none; border: 0; cursor: pointer;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--gs-gold-hi), var(--gs-gold-lo)); color: #1A1206;
  box-shadow: 0 12px 32px rgba(212,160,60,.22);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, filter .18s ease;
}
.gs-btn:hover  { transform: translateY(-2px); filter: brightness(1.06);
                 box-shadow: 0 16px 38px rgba(212,160,60,.34); }
.gs-btn:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(212,160,60,.26); }
.gs-btn:focus-visible { outline: 2px solid var(--gs-tx); outline-offset: 3px; }
.gs-fine { font-family: var(--gs-sans); font-size: var(--gs-text); color: var(--gs-sub);
           text-align: center; margin-top: 14px; }

/* ---- cards, rows, questions ------------------------------------------- */
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gs-grid.two { grid-template-columns: repeat(2, 1fr); }
.gs-card, .gs-row, .gs-qa {
  border: 1px solid var(--gs-line); border-radius: 14px; background: var(--gs-fill);
  padding: 28px 26px;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease,
              background-color .2s ease, box-shadow .2s ease;
}
.gs-card:hover, .gs-row:hover, .gs-qa:hover {
  transform: translateY(-3px); border-color: rgba(212,160,60,.38);
  background: rgba(255,255,255,.065); box-shadow: 0 12px 30px rgba(0,0,0,.40);
}
.gs-card h3 { font-family: var(--gs-sans); font-size: var(--gs-lead); font-weight: 600; line-height: 1.3; }
.gs-card p  { font-family: var(--gs-sans); font-size: var(--gs-text); line-height: 1.6;
              color: var(--gs-body); margin-top: 9px; }
.gs-row { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: baseline;
          padding: 22px 26px; margin-top: 12px; }
.gs-row b  { font-family: var(--gs-sans); font-size: var(--gs-lead); font-weight: 600; }
.gs-row em { display: block; font-style: normal; font-size: var(--gs-text);
             color: var(--gs-body); margin-top: 6px; line-height: 1.6; }
.gs-row i  { font-style: normal; font-size: var(--gs-text); color: var(--gs-gold);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-qa { padding: 20px 26px; margin-top: 12px; cursor: pointer; }
.gs-qa .q { display: flex; justify-content: space-between; gap: 16px;
            font-family: var(--gs-sans); font-size: var(--gs-lead); font-weight: 600; }
.gs-qa .q i { color: var(--gs-gold); font-style: normal; }
.gs-qa .a { display: none; font-family: var(--gs-sans); font-size: var(--gs-text);
            line-height: 1.6; color: var(--gs-body); margin-top: 12px; }
.gs-qa.open .a { display: block; }

/* ---- stats ------------------------------------------------------------- */
.gs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: center; }
.gs-stats b { display: block; font-family: var(--gs-sans); font-size: 46px; font-weight: 600;
              color: var(--gs-gold); line-height: 1; font-variant-numeric: tabular-nums; }
.gs-stats span { display: block; font-family: var(--gs-sans); font-size: var(--gs-label);
                 letter-spacing: 2.6px; text-transform: uppercase; color: var(--gs-sub); margin-top: 10px; }

/* ---- guarantee --------------------------------------------------------- */
.gs-guar { border: 1px solid rgba(212,160,60,.36); background: rgba(212,160,60,.055);
           border-radius: 14px; padding: 28px 26px; margin-top: 26px; }
.gs-guar b { display: block; font-family: var(--gs-sans); font-size: var(--gs-lead);
             font-weight: 600; color: var(--gs-gold); }
.gs-guar p { font-family: var(--gs-sans); font-size: var(--gs-text); line-height: 1.6;
             color: var(--gs-body); margin-top: 11px; }

/* ---- full bleed image -------------------------------------------------- */
.gs-bleed { position: relative; overflow: hidden; }
.gs-bleed img { display: block; width: 100%; height: clamp(320px, 46vh, 460px); object-fit: cover; }
.gs-bleed .cover { position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.80) 34%,
                                     rgba(0,0,0,.20) 64%, rgba(0,0,0,0) 100%); }
.gs-bleed .in { max-width: var(--gs-w); margin: 0 auto; padding: 0 var(--gs-gutter); width: 100%; }
.gs-bleed h2 { text-align: left; max-width: 16ch; margin: 0; }
.gs-bleed p  { text-align: left; font-family: var(--gs-sans); font-size: var(--gs-text);
               line-height: 1.6; color: var(--gs-body); max-width: 38ch; margin-top: 14px; }

@media (max-width: 700px) {
  :root { --gs-section: 64px; --gs-between: 40px; --gs-gutter: 22px; }
  .gs-grid, .gs-grid.two, .gs-stats { grid-template-columns: 1fr; }
  .gs-row { grid-template-columns: 1fr; gap: 10px; }
  .gs-btn { font-size: 22px; padding: 13px 32px; }
  .gs-bleed .cover { align-items: flex-end;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.92) 100%); }
  .gs-bleed .in { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-btn, .gs-card, .gs-row, .gs-qa,
  .gs-btn:hover, .gs-card:hover, .gs-row:hover, .gs-qa:hover { transition: none; transform: none; }
}

/* ---- form controls -----------------------------------------------------
   input, select and textarea do not inherit font-family or font-size, so
   without this the application modal quietly introduces a third typeface. */
input, select, textarea, button {
  font-family: var(--gs-sans);
  font-size: var(--gs-text);
  line-height: 1.5;
  color: var(--gs-tx);
}
label, legend { font-family: var(--gs-sans); font-size: var(--gs-text); }
::placeholder { font-family: var(--gs-sans); color: var(--gs-sub); }

/* ---- application modal ------------------------------------------------
   Carried over from the old page, which styled these with rules that no
   longer exist here, so they were falling back to browser defaults. */
.modal-box h2 { font-family: var(--gs-serif); font-size: var(--gs-h2);
                line-height: 1.18; text-align: left; }
.modal-box .lead { font-family: var(--gs-sans); font-size: var(--gs-text);
                   line-height: 1.6; color: var(--gs-body); text-align: left; margin-top: 12px; }
.modal-box p, .modal-box label, .modal-box a,
.modal-box .afhint, .modal-box .aferr, .modal-box span {
  font-family: var(--gs-sans); font-size: var(--gs-text); line-height: 1.6;
}
.modal-box .afhint { color: var(--gs-sub); }
.modal-close { font-family: var(--gs-sans); font-size: var(--gs-lead); }

/* ---- legacy token aliases ---------------------------------------------
   Markup carried over from the old pages styles itself with the previous
   token names. Rather than rewrite that CSS, the old names point at the new
   scale, so anything inherited lands on the system automatically. */
:root {
  --t-label: var(--gs-label);
  --t-fine:  var(--gs-label);
  --t-small: var(--gs-text);
  --t-body:  var(--gs-text);
  --t-card:  var(--gs-lead);
  --t-sub:   var(--gs-lead);
  --t-head:  var(--gs-h2);
  --lh-small: 1.6;
  --lh-body:  1.6;
  --lh-head:  1.18;
  --font-display: var(--gs-serif);
  --font-body:    var(--gs-sans);
  --font-mono:    var(--gs-sans);
  --text:         var(--gs-tx);
  --text-muted:   var(--gs-body);
  --text-subtle:  var(--gs-sub);
  --border:       var(--gs-line);
  --surface:      var(--gs-fill);
  --gold:         var(--gs-gold);
  --void:         var(--gs-base);
}

/* ---- card diagrams -----------------------------------------------------
   The cards ARE the diagram. A flow joins them with a rail and numbers them,
   a loop adds the return, and a versus faces two of them off across a
   divider. Built from the cards so the words stay words. */

/* FLOW: a sequence. Numbered nodes on a rail running through the cards. */
.gs-flow { display: grid; gap: 20px; position: relative;
           grid-template-columns: repeat(var(--n, 3), 1fr); }
.gs-flow .gs-card { position: relative; padding-top: 46px; text-align: center; }
.gs-flow .gs-card h3, .gs-flow .gs-card p { text-align: center; }
.gs-flow .gs-card::before {                    /* the node */
  content: counter(flow); counter-increment: flow;
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gs-base); border: 1px solid var(--gs-gold);
  color: var(--gs-gold); font-family: var(--gs-sans); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.gs-flow { counter-reset: flow; }
.gs-flow .gs-card::after {                     /* the rail to the next one */
  content: ""; position: absolute; top: 0; left: calc(100% + 1px);
  width: 20px; height: 1px; background: rgba(212,160,60,.38);
}
.gs-flow .gs-card:last-child::after { display: none; }

/* LOOP: a flow that returns. The rail comes back under the row. */
.gs-loop { padding-bottom: 46px; }
.gs-loop::after {
  content: ""; position: absolute; left: 43px; right: 43px; bottom: 22px; height: 24px;
  border: 1px dashed rgba(212,160,60,.42); border-top: 0;
  border-radius: 0 0 12px 12px;
}
.gs-loop .gs-label-return {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-size: var(--gs-label); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gs-gold); background: var(--gs-base); padding: 0 12px;
}

/* VERSUS: two cards facing off across a divider. */
.gs-vs { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; gap: 0; }
.gs-vs .gs-card { margin: 0; }
.gs-vs .gs-vs-mid { display: flex; align-items: center; justify-content: center; position: relative; }
.gs-vs .gs-vs-mid::before {
  content: ""; position: absolute; top: 18px; bottom: 18px; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212,160,60,.5), transparent);
}
.gs-vs .gs-vs-mid span {
  position: relative; z-index: 2; background: var(--gs-base);
  border: 1px solid rgba(212,160,60,.45); border-radius: 100px;
  padding: 7px 12px; font-size: var(--gs-label); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gs-gold);
}
.gs-sec.alt .gs-vs .gs-vs-mid span,
.gs-sec.alt .gs-loop .gs-label-return,
.gs-sec.alt .gs-flow .gs-card::before { background: var(--gs-break); }

@media (max-width: 760px) {
  .gs-flow { grid-template-columns: 1fr; gap: 34px; }
  .gs-flow .gs-card::after { top: calc(100% + 1px); left: 43px; width: 1px; height: 20px; }
  .gs-loop::after, .gs-loop .gs-label-return { display: none; }
  .gs-vs { grid-template-columns: 1fr; }
  .gs-vs .gs-vs-mid { padding: 14px 0; }
  .gs-vs .gs-vs-mid::before { top: 50%; bottom: auto; left: 18px; right: 18px; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,160,60,.5), transparent); }
}

/* FAN: one cause, several effects. A source line above, feeding each card. */
.gs-fan { position: relative; padding-top: 60px; }
.gs-fan .gs-fan-src {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border: 1px solid rgba(212,160,60,.45); border-radius: 100px; padding: 8px 18px;
  font-size: var(--gs-label); letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--gs-gold); background: var(--gs-base); z-index: 2; white-space: nowrap;
}
.gs-fan::before {                                  /* stem down from the source */
  content: ""; position: absolute; top: 34px; left: 50%; width: 1px; height: 14px;
  background: rgba(212,160,60,.45);
}
.gs-fan::after {                                   /* the spreading bar */
  content: ""; position: absolute; top: 48px; left: 12%; right: 12%; height: 12px;
  border: 1px solid rgba(212,160,60,.35); border-bottom: 0; border-radius: 10px 10px 0 0;
}
.gs-fan .gs-grid, .gs-fan.gs-grid { position: relative; z-index: 1; }

/* STACK: a bundle. A bracket down the left tying the items together. */
.gs-stack { position: relative; padding-left: 30px; }
.gs-stack::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 14px;
  border: 1px solid rgba(212,160,60,.45); border-right: 0; border-radius: 12px 0 0 12px;
}
.gs-stack .gs-stack-tag {
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%) rotate(-90deg);
  transform-origin: center; font-size: var(--gs-label); letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gs-gold); background: var(--gs-base); padding: 6px 0;
}
.gs-sec.alt .gs-fan .gs-fan-src, .gs-sec.alt .gs-stack .gs-stack-tag { background: var(--gs-break); }
@media (max-width: 760px) {
  .gs-fan { padding-top: 54px; }
  .gs-fan::after { left: 24%; right: 24%; }
  .gs-stack { padding-left: 22px; }
  .gs-stack .gs-stack-tag { display: none; }
}

/* ---- short token aliases ----------------------------------------------
   Several pages use --display, --mono, --body rather than --font-display and
   friends. Without these, var(--display) resolves to nothing, the whole
   declaration is dropped, and headings silently lose their family. */
:root {
  --display: var(--gs-serif);
  --serif:   var(--gs-serif);
  --body:    var(--gs-sans);
  --sans:    var(--gs-sans);
  --mono:    var(--gs-sans);
  --ink-2:   var(--gs-break);
  --ink-3:   var(--gs-break);
  --acc:     var(--gs-gold);
}

/* ---- the wordmark ------------------------------------------------------
   One rule, whatever the page calls it. This was six different treatments
   across three class names. */
.brand, .gnav-brand, .gnav .brand, nav .brand {
  font-family: var(--gs-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--gs-tx) !important;
  text-decoration: none;
  white-space: nowrap;
}
.brand span, .gnav-brand span, .gnav .brand span, nav .brand span {
  color: var(--gs-sub) !important;
  font-weight: 400 !important;
}

/* ==== THE NAV ============================================================
   One bar, three contents. Before this there were fourteen different navs
   and two spellings of the wordmark, so /course said GREY SPACE HYPNOSIS
   with HYPNOSIS dimmed and /learn said it flat, on a purple bar.
   Everything below is self contained so no page stylesheet can tint it. */
.gsnav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 26px;
  background:var(--gs-base); border-bottom:1px solid var(--gs-line);
  font-family:var(--gs-sans);
}
.gsnav .brand{
  font-family:var(--gs-serif)!important; font-size:17px!important;
  font-weight:700!important; letter-spacing:1.2px!important;
  color:var(--gs-tx)!important; text-decoration:none; white-space:nowrap;
}
.gsnav .brand:hover{ color:var(--gs-gold)!important; }
.gsnav-links{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.gsnav-links a{
  font-family:var(--gs-sans); font-size:13.5px; font-weight:400;
  letter-spacing:.2px; color:var(--gs-body); text-decoration:none;
  white-space:nowrap; transition:color .15s ease;
}
.gsnav-links a:hover,.gsnav-links a.active{ color:var(--gs-tx); }
.gsnav-links a.active{ color:var(--gs-gold); }
.gsnav-cta{
  font-family:var(--gs-sans); font-size:13.5px; font-weight:600;
  letter-spacing:.2px; color:var(--gs-base)!important; background:var(--gs-gold);
  text-decoration:none; white-space:nowrap;
  padding:9px 18px; border-radius:6px; transition:filter .15s ease;
}
.gsnav-cta:hover{ filter:brightness(1.12); }
@media (max-width:640px){
  .gsnav{ padding:12px 16px; gap:12px; }
  .gsnav .brand{ font-size:15px!important; letter-spacing:.8px!important; }
  .gsnav-links{ gap:14px; }
  .gsnav-links a{ font-size:12.5px; }
  .gsnav-links a.nav-hide-sm{ display:none; }
}

/* ---- figures ------------------------------------------------------------
   Diagrams are SVG, drawn at a viewBox about 70% of the rendered width so
   the type inside lands around 1.4x and does not read as weak. */
.gs-fig{
  width:100%; display:block; background:var(--gs-break);
  border:1px solid var(--gs-line); border-radius:14px;
}
.gs-fig text{ font-family:var(--gs-sans); }
.gs-fig .t-h{ font-size:13px; font-weight:700; fill:var(--gs-tx); }
.gs-fig .t-b{ font-size:10.5px; fill:var(--gs-body); }
.gs-fig .t-s{ font-size:9px; fill:var(--gs-sub); letter-spacing:.8px; }
.gs-fig .t-g{ font-size:9px; fill:var(--gs-gold); font-weight:700; letter-spacing:1.3px; }
.gs-fig .t-n{ font-size:15px; font-weight:700; fill:var(--gs-gold); }

/* A gated destination stays hidden until Platform confirms access, so a non
   buyer never sees a link that would only bounce them to the enrol page. */
.gsnav-links a[data-needs]{ display:none; }
.gsnav-links a[data-needs].has-access{ display:inline; }