/* ================= Relationship Alchemy: what this funnel adds =================
   ra.css is the shared IMS contract, carried over from the Inner Matrix book
   pages unchanged — same tokens, same hairlines, same foil rules, same
   Fraunces/Inter stack. That is the point: the 11 August
   decision was that the IMS assessment tokens win across every funnel, so
   this funnel's old navy-and-gold Playfair look comes out entirely.

   This sheet is only the components Relationship Alchemy needs and the book
   funnel has no equivalent of: a four-step progress rail, the two-step
   checkout (the book funnel uses a one-page order dialog), a scheduler, and
   a booked state. Nothing here overrides a token. */

/* ---- progress rail: which of the four steps the buyer is on ---- */
/* The buyer pays on a page they cannot go back to, so the rail is the only
   thing telling them where they are. Squared and hairlined like every other
   surface; it collapses to one "Step 2 of 4" line on a phone rather than
   wrapping four labels onto two rows. */
/* The step rail that used to sit here is gone. It told the buyer there was an
   upgrade coming before they had paid for the book -- "One upgrade" as a
   labelled future step is a spoiler for the one-time offer, and a one-time
   offer that the buyer saw coming is not one. Removed on Nicole's call, 24 Sep.
   The funnel still reads in order; it just does not announce its own shape. */

/* ---- two-step checkout (Edit 01) ---- */
/* Step two reveals in place rather than on a second URL. The point of the
   edit is that the buyer arrives at checkout having already decided; a page
   load between shipping and card is one more chance to leave. Server-side
   this is still one form post. With JS off both steps are simply open — see
   the noscript block on checkout.html. */
.cstep[hidden]{display:none}
.cstep-done{padding:clamp(20px,2.4vw,28px);background:var(--blue-bg);
  border-bottom:1px solid var(--warm-border);display:grid;
  grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.cstep-done .cd-k{font-family:var(--sans);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-deep);display:block;margin-bottom:5px}
.cstep-done .cd-v{font-size:.92rem;color:var(--ink);line-height:1.5}
.cstep-done button{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);
  text-decoration:underline;text-underline-offset:3px}
.cstep-done button:hover{color:var(--navy)}
@media(max-width:520px){.cstep-done{grid-template-columns:1fr}}

/* ---- the order bump, inside the payment step (Edit 02) ---- */
/* Gold hairline: the contract reserves gold for prices and paid upgrades,
   and this is the only one on the page. It has to read as part of the form
   rather than as a section competing with the main offer, which is the
   whole finding — so no card shadow, no rounding, no separate heading. */
.bump{position:relative;border:1px solid var(--cool-border);
  background:var(--blue-bg);margin:20px 0 4px}
.bump::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-gold)}
.bump-k{display:block;font-family:var(--sans);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);padding:16px 18px 0}
.bump label.addon{border:0;background:transparent;margin:0;
  padding:12px 18px 18px;align-items:flex-start}
.bump label.addon:hover{border:0}
.bump .a-why{display:block;font-size:.83rem;line-height:1.55;color:var(--grey);
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--cool-border);
  text-transform:none;letter-spacing:normal;font-weight:400}

/* ---- the scheduler ---- */
.sched{display:grid;grid-template-columns:.52fr .48fr;gap:clamp(24px,3vw,44px);
  align-items:start}
.cal{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(20px,2.4vw,28px);position:relative}
.cal::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.cal-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:18px}
.cal-head .m{font-weight:800;font-size:.98rem;color:var(--navy);letter-spacing:.01em}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:38px;height:38px;min-height:38px;border:1px solid var(--cool-border);
  background:var(--white);color:var(--navy);cursor:pointer;font-size:.9rem;line-height:1}
.cal-nav button:hover:not(:disabled){background:var(--navy);color:var(--white);
  border-color:var(--navy)}
.cal-nav button:disabled{color:#C7CDD4;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid .dow{font-family:var(--sans);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:8px}
.cal-grid button{aspect-ratio:1;border:1px solid transparent;background:transparent;
  font-family:var(--sans);font-size:.86rem;
  color:var(--ink);cursor:pointer;min-height:38px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.cal-grid button.free{border-color:rgba(76,159,200,.42);color:var(--navy);font-weight:600}
.cal-grid button.free:hover{background:var(--blue-bg);border-color:var(--blue)}
.cal-grid button[aria-pressed="true"]{background:var(--navy);color:var(--white);
  border-color:var(--navy)}
.cal-grid button:disabled{color:#C7CDD4;cursor:default}
.cal-legend{margin-top:16px;padding-top:14px;border-top:1px solid var(--warm-border);
  font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px}
.slots h3{font-family:var(--sans);font-size:.75rem;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);margin-bottom:6px}
.slots .tz{font-family:var(--sans);font-size:.72rem;
  color:var(--muted);margin-bottom:16px;display:block}
.slot-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.slot-list button{border:1px solid var(--cool-border);background:var(--white);
  padding:14px 10px;font-family:var(--sans);
  font-size:.88rem;color:var(--navy);cursor:pointer;min-height:44px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.slot-list button:hover{border-color:var(--blue);background:var(--blue-bg)}
.slot-list button[aria-pressed="true"]{background:var(--navy);color:var(--white);
  border-color:var(--navy)}
.slots-empty{font-size:.92rem;color:var(--muted);line-height:1.6;
  border:1px dashed var(--cool-border);padding:22px;text-align:center}
@media(max-width:900px){.sched{grid-template-columns:1fr}}
@media(max-width:430px){.slot-list{grid-template-columns:1fr}}

/* ---- booked: the prep list ---- */
.prep{list-style:none;padding:0;margin:0;counter-reset:prep}
.prep li{counter-increment:prep;position:relative;padding:20px 0 20px 58px;
  border-bottom:1px solid var(--warm-border)}
.prep li:last-child{border-bottom:0}
.prep li::before{content:counter(prep,decimal-leading-zero);position:absolute;
  left:0;top:20px;font-family:var(--sans);
  font-size:.7rem;font-weight:600;color:var(--blue-deep);letter-spacing:.08em;
  border:1px solid rgba(76,159,200,.4);padding:5px 9px;background:var(--white)}
.prep h3{font-family:var(--sans);font-size:1.02rem;
  font-weight:800;color:var(--navy);margin-bottom:7px;line-height:1.3}
.prep p{font-size:.95rem;line-height:1.62;color:var(--grey)}
.on-dark .prep li{border-bottom-color:rgba(107,182,216,.22)}
.on-dark .prep li::before{background:transparent;color:var(--blue-bright);
  border-color:rgba(107,182,216,.4)}
.on-dark .prep h3{color:#fff}
.on-dark .prep p{color:#B9CBDC}

/* ---- the booked card ---- */
.booked{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(26px,3vw,40px);position:relative;text-align:center;
  max-width:60ch;margin:0 auto}
.booked::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-gold)}
.booked .when{font-family:var(--serif);
  font-weight:600;font-size:clamp(1.4rem,3vw,2rem);color:var(--navy);
  line-height:1.2;margin:6px 0 10px}
.booked .with{font-size:.95rem;color:var(--grey);margin-bottom:22px}
.booked .ics{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---- "no pitch on the call" ---- */
/* The one line that does most of the work on the confirmation page. It gets
   its own band because inside a paragraph is where it gets missed, and the
   main reason a buyer skips a free call is that they assume it is a sales
   call. Gold rule: it is the page's highest-value claim. */
.notpitch{margin-top:clamp(22px,2.6vw,30px);padding:18px 22px;
  border-left:2px solid var(--gold);background:rgba(255,255,255,.045);
  font-size:1rem;line-height:1.6;color:#DCE8F2}
.notpitch strong{color:#fff;font-weight:700}
.on-ivory .notpitch,.on-white .notpitch{background:var(--blue-bg);
  color:var(--ink);border-left-color:var(--gold-deep)}
.on-ivory .notpitch strong,.on-white .notpitch strong{color:var(--navy)}

/* ---- demo notice ---- */
/* These six pages are a copy-and-design deliverable, not a live funnel. The
   notice says so on every page that would otherwise take a payment or hold a
   calendar slot, so nobody walking the flow thinks a card was charged. */
.demo-note{background:#FDF6E7;border-bottom:1px solid #E8D9A8;
  padding:10px 0;font-size:.8rem;color:#6B5A2E}
.demo-note .wrap{display:flex;gap:10px;align-items:center;justify-content:center;
  text-align:center;flex-wrap:wrap}
.demo-note strong{color:#4A3D1C;font-weight:700}

/* ================= the graphics pass =================
   Nicole, 21 Sep: the book funnel reads as designed work and this one reads
   as an essay. Same finding either way — a cold reader off a Meta ad scrolls
   this page before deciding to read any of it, and there was nothing in the
   middle third to stop a thumb.

   Everything below draws something the page already said. Not one component
   introduces a claim, a number, a name or a proof point that was not already
   in the copy: the 50/50 bars are Joey's own headline, the stack is the four
   layers section, the cycle is the "argument you have had before" paragraph,
   the comparison is the OTO's own ledger. A diagram that asserts something
   the copy does not is a new claim to review, and this pass had none to make.

   Three of these are carried over from the Inner Matrix book pages unchanged
   — proof row, CTA band, promise watermark — because the whole point of the
   11 August decision was that the funnels read as one estate. The rest are
   this funnel's own and have no book-pages equivalent. */

/* ---- hero proof row ---- */
/* The credibility strip was the first thing under the fold and nothing sat
   with the headline itself. These three are the bio's own numbers, moved up
   to where the first CTA is. No star rating: this book does not have a
   checkable one on the page, and Principle 04 does not bend for a graphic. */
.proofrow{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  margin-top:22px;font-family:var(--sans);
  font-size:.74rem;letter-spacing:.05em;color:#9FB6CC}
.proofrow strong{color:#EAF2F8;font-weight:600}
.proofrow .sep{width:1px;height:14px;background:rgba(159,182,204,.4)}
@media(max-width:640px){.proofrow{gap:5px 12px;font-size:.68rem}
  .proofrow .sep{display:none}}

/* ---- mid-page CTA bands ---- */
/* Carried over from the book pages, where Nicole raised the same thing on
   2 Sep: the offer was reachable from the hero, the masthead and the close,
   and nowhere in the long stretch between. Two slim bands re-offer it. Same
   button, same under-line, nothing new to review. */
.cta-band{padding:clamp(34px,4.5vw,58px) 0;text-align:center}
.cta-band .cta-under{margin-left:auto;margin-right:auto}

/* ---- promise watermark ---- */
/* An outlined glyph bled off the bottom-right corner at 6% opacity. It is
   texture, not information — every promise card still reads identically with
   images off, which is why the icons are aria-hidden. */
.promise{position:relative;overflow:hidden}
.promise>.n,.promise>div{position:relative}
.p-ico{position:absolute;right:-10px;bottom:-12px;width:92px;height:92px;
  color:var(--blue-deep);opacity:.06;pointer-events:none}

/* ---- the ghost portrait behind the mirror ---- */
/* The recognition section was three-quarters of a screen of unbroken prose on
   flat ivory. Joey greyscaled at 12% and masked out to the left gives the
   block a horizon without putting anything in the reading path. */
.recog{position:relative;overflow:hidden}
.recog-ghost{position:absolute;top:0;right:0;height:100%;width:min(46vw,560px);
  object-fit:cover;object-position:top center;opacity:.12;filter:grayscale(1);
  pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent);
  mask-image:linear-gradient(to left,#000 55%,transparent)}
.recog .narrow,.recog .wrap{position:relative;z-index:1}

/* ---- 100% / 50%: the headline, drawn ---- */
/* The page's whole thesis was carried by one pull quote most of a screen
   down. It is a proportion claim, so it gets drawn as a proportion: the
   story on top, split down the middle with half of it greyed out and out of
   reach, and what is actually true underneath as one unbroken bar. The two
   figures are the headline's own. */
.halves{margin-top:clamp(32px,4vw,48px);display:grid;gap:clamp(16px,2vw,24px)}
.hv{display:grid;gap:10px}
.hv-k{font-family:var(--sans);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-bright)}
.hv-bars{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(107,182,216,.28)}
.hv-bars.one{grid-template-columns:1fr}
.hv-seg{background:rgba(255,255,255,.05);padding:clamp(20px,2.4vw,28px)
  clamp(18px,2.2vw,26px);display:grid;gap:7px;align-content:center;
  min-height:clamp(112px,13vw,148px)}
.hv-seg .pc{font-family:var(--serif);font-weight:600;
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:.95;color:#fff;
  letter-spacing:-.02em}
.hv-seg .lbl{font-family:var(--sans);font-weight:800;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#EAF2F8}
.hv-seg .note{font-size:.9rem;line-height:1.5;color:#B9CBDC;max-width:36ch}
/* Their half: dimmed, hatched, and explicitly out of reach. This is the
   segment the reader has been waiting on for years, so it is the one that
   has to look unavailable rather than merely second. */
.hv-seg.out{background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px),
  rgba(0,8,31,.35)}
.hv-seg.out .pc{color:#5E7790}
.hv-seg.out .lbl{color:#8FA6BC}
.hv-seg.out .note{color:#7E97AE}
/* What is true: one bar, gold-ruled, the only gold on the section. */
.hv.true .hv-seg{background:rgba(201,162,75,.10);position:relative}
.hv.true .hv-seg::before{content:"";position:absolute;top:0;left:0;right:0;
  height:1px;background:var(--foil-gold)}
.hv.true .hv-k{color:var(--gold-light)}
.hv.true .pc{color:#fff}
.hv.true .note{max-width:54ch}
@media(max-width:620px){.hv-bars{grid-template-columns:1fr}}

/* ---- the cycle: the argument you have had before ---- */
/* Four beats and a return. The return is the finding — the copy's own line is
   that what wears you down is not the argument, it is the return of it — so
   the loop-back rail is drawn at the same weight as the steps rather than as
   a footnote. Ordered list, so it reads in sequence without the graphic. */
.cycle{margin-top:clamp(30px,3.5vw,44px)}
.cycle-k{font-family:var(--sans);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);
  display:block;margin-bottom:14px}
.cy-row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--warm-border);border:1px solid var(--warm-border)}
.cy-node{background:var(--white);padding:clamp(18px,2vw,24px);position:relative;
  display:grid;gap:8px;align-content:start}
.cy-node .cy-n{font-family:var(--sans);font-size:.68rem;
  font-weight:600;letter-spacing:.1em;color:var(--blue-deep)}
.cy-node h3{font-family:var(--sans);font-size:.97rem;
  font-weight:800;line-height:1.3;color:var(--navy)}
.cy-node p{font-size:.88rem;line-height:1.5;color:var(--grey)}
/* Chevron in the hairline between nodes. Decorative, so it is drawn with a
   pseudo-element rather than a character in the markup. */
.cy-node+.cy-node::before{content:"";position:absolute;left:-7px;top:clamp(26px,3vw,34px);
  width:12px;height:12px;border-top:1px solid var(--blue);
  border-right:1px solid var(--blue);transform:rotate(45deg);
  background:var(--white);z-index:2}
.cy-return{display:flex;align-items:center;gap:14px;
  border:1px solid var(--cool-border);border-top:0;background:var(--blue-bg);
  padding:14px clamp(18px,2vw,24px)}
.cy-return .arc{flex:0 0 auto;color:var(--blue-deep)}
.cy-return span{font-family:var(--sans);font-weight:700;
  font-size:.9rem;color:var(--navy);line-height:1.45}
.cy-return em{font-style:normal;color:var(--grey);font-weight:400}
@media(max-width:860px){
  .cy-row{grid-template-columns:1fr}
  .cy-node+.cy-node::before{left:clamp(26px,5vw,34px);top:-7px;
    transform:rotate(135deg)}
}

/* ---- the four layers, as a stack ---- */
/* The list version said which layer runs the pattern in a right-hand note
   that read as metadata. Drawn, the two facts that matter are brackets: one
   layer is where every tool the reader has tried lands, three are where the
   pattern actually lives. Same four rows, same four notes. */
.stackviz{margin-top:clamp(32px,4vw,46px);display:grid;
  grid-template-columns:clamp(96px,13vw,150px) 1fr;gap:0 clamp(12px,1.6vw,18px)}
.sv-k{grid-column:1/-1;font-family:var(--sans);
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-deep);margin-bottom:12px}
/* The two brackets live in the left gutter and are sized by grid-row, so the
   stack can gain or lose a layer without any of this being re-measured. */
.sv-br{position:relative;display:flex;align-items:center;justify-content:flex-end;
  padding-right:14px;text-align:right}
.sv-br::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:9px;
  border:1px solid currentColor;border-right:0}
.sv-br span{font-family:var(--sans);font-size:.62rem;
  line-height:1.4;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.sv-br.aim{grid-row:2;color:var(--muted)}
.sv-br.live{grid-row:3/span 3;color:var(--gold-deep)}
.sv-rows{grid-column:2;grid-row:2/span 4;display:grid;gap:1px;
  background:var(--warm-border);border:1px solid var(--warm-border)}
.sv-row{background:var(--white);padding:clamp(15px,1.8vw,20px) clamp(16px,2vw,22px);
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center}
.sv-row .sv-n{font-family:var(--sans);font-size:.7rem;
  font-weight:600;color:var(--blue-deep);letter-spacing:.08em}
.sv-row .sv-t{font-weight:700;font-size:.99rem;color:var(--navy);
  letter-spacing:.005em;line-height:1.35}
.sv-row .sv-d{font-family:var(--sans);font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
/* Layer 01 is where the advice lands: flat, unmarked, deliberately plain. */
.sv-row.aim{background:#FAFAF8}
/* Layer 03 runs it. Gold rule and a filled marker, the one emphasis in the
   diagram, because the copy spends two paragraphs getting here. */
.sv-row.live{background:var(--blue-bg);position:relative}
.sv-row.live::before{content:"";position:absolute;top:-1px;left:0;right:0;
  height:1px;background:var(--foil-gold)}
.sv-row.live .sv-t{color:var(--navy)}
.sv-row.live .sv-d{color:var(--gold-deep);font-weight:600;display:flex;
  align-items:center;gap:7px}
.sv-row.live .sv-d::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold-deep);flex:0 0 6px}
@media(max-width:760px){
  .stackviz{grid-template-columns:1fr}
  .sv-k{margin-bottom:10px}
  .sv-rows{grid-column:1;grid-row:auto}
  .sv-br{display:none}
  .sv-row{grid-template-columns:auto 1fr;row-gap:5px}
  .sv-row .sv-d{grid-column:2;white-space:normal}
}

/* ---- what happens after you order ---- */
/* The FAQ answered this in two separate questions, several screens apart and
   only for the reader who opened them. Four steps on a rule, so the shape of
   the thing is readable without opening anything. */
.tline{margin-top:clamp(30px,3.5vw,44px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);
  position:relative}
.tline::before{content:"";position:absolute;top:13px;left:6%;right:6%;height:1px;
  background:var(--foil-blue)}
.tl{position:relative;display:grid;gap:9px;align-content:start}
.tl .tl-d{width:27px;height:27px;border:1px solid var(--accent);
  background:var(--ivory);border-radius:50%;display:grid;place-items:center;
  font-family:var(--sans);font-size:.66rem;
  font-weight:600;color:var(--accent-deep);position:relative;z-index:1}
.tl h3{font-family:var(--sans);font-size:.95rem;
  font-weight:800;color:var(--navy);line-height:1.3;margin-top:4px}
.tl p{font-size:.88rem;line-height:1.55;color:var(--grey)}
.tl .tl-w{font-family:var(--sans);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.on-white .tl .tl-d{background:var(--white)}
.on-dark .tline::before{background:rgba(107,182,216,.3)}
.on-dark .tl .tl-d{background:var(--abyss);border-color:var(--blue-bright);
  color:var(--blue-bright)}
.on-dark .tl h3{color:#fff}
.on-dark .tl p{color:#B9CBDC}
.on-dark .tl .tl-w{color:#8FA6BC}
@media(max-width:820px){
  .tline{grid-template-columns:1fr;gap:0}
  .tline::before{top:8px;bottom:8px;left:13px;right:auto;width:1px;height:auto;
    background:var(--cool-border)}
  .tl{grid-template-columns:auto 1fr;gap:4px 16px;padding:14px 0}
  .tl .tl-d{grid-row:1/span 3}
  .tl .tl-w,.tl h3,.tl p{grid-column:2}
  .tl h3{margin-top:0}
}

/* ---- side by side: the book, and the book with the training ---- */
/* The OTO listed four reasons to add the training and never showed the two
   options next to each other, which is the only comparison the buyer is
   actually making on that page. Rows are the OTO's own four ledger lines. */
.compare{margin-top:clamp(26px,3vw,38px);display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--warm-border);
  border:1px solid var(--warm-border)}
.cmp{background:var(--white);display:grid;align-content:start}
.cmp-h{padding:clamp(16px,2vw,22px);border-bottom:1px solid var(--warm-border)}
.cmp-h .cmp-k{font-family:var(--sans);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;
  margin-bottom:7px}
.cmp-h h3{font-family:var(--sans);font-size:1rem;
  font-weight:800;color:var(--navy);line-height:1.3}
.cmp-h .cmp-p{font-family:var(--serif);font-weight:600;
  font-size:1.3rem;color:var(--navy);margin-top:8px;display:block}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start;
  padding:13px clamp(16px,2vw,22px);border-bottom:1px solid var(--warm-border);
  font-size:.91rem;line-height:1.5;color:var(--grey)}
.cmp li:last-child{border-bottom:0}
.cmp li::before{content:"";width:15px;height:1px;margin-top:10px;flex:0 0 15px;
  background:var(--cool-border)}
/* Left column gets a rule, right column a filled mark. Not an empty checkbox
   on the left: those four lines are things the buyer already has, and an
   unticked box next to them says the opposite of what the page means. */
.cmp.plus{background:var(--blue-bg)}
.cmp.plus .cmp-h{border-bottom-color:var(--cool-border)}
.cmp.plus .cmp-h .cmp-p{color:var(--gold-deep)}
.cmp.plus li{border-bottom-color:var(--cool-border);color:var(--ink)}
.cmp.plus li::before{width:15px;height:15px;margin-top:3px;
  border:1px solid var(--blue-deep);background:var(--blue-deep);
  box-shadow:inset 0 0 0 2px var(--blue-bg),inset 0 0 0 3px var(--blue-deep)}
@media(max-width:620px){.compare{grid-template-columns:1fr}}

/* ================= relationship photography (Edit 06) =================
   The page shipped with a single portrait carrying the whole "there is a real
   person here" job. These are Joey and his wife, placed at the two turns where
   the copy moves off the pattern and onto the life on the far side of it, and
   deliberately spread apart rather than gathered into a gallery. Same contract
   as every other surface: squared, hairline-framed, a light grade so colour
   photography sits inside the ivory / navy world instead of punching a hole in
   it. Lifestyle frames on purpose -- a kitchen and a footpath do the "real
   marriage" job that a wall of posed portraits would turn into a wedding
   album. Nothing here overrides a token. */

/* A featured photo shown whole -- no crop, so nobody's head or feet get
   clipped by a fashionable ratio. Narrower than the text column so it reads as
   one image, not a hero. */
.band .narrow{max-width:820px}
.band figure{margin:0}
.band img{width:100%;height:auto;display:block;
  border:1px solid var(--warm-border);filter:saturate(.9) contrast(1.03)}
.band figcaption{font-family:var(--serif);
  font-weight:600;font-size:clamp(1.08rem,1.7vw,1.42rem);line-height:1.4;
  letter-spacing:-.005em;color:var(--navy);max-width:52ch;
  margin:22px auto 0;text-align:center}
.on-dark .band img{border-color:rgba(107,182,216,.34)}
.on-dark .band figcaption{color:#EAF2F8}

/* Joey's note, paired with an everyday photo rather than a posed one. The shot
   fills its column's height (cover) so the two panels line up as a pair. */
.turn-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(18px,2.4vw,32px);align-items:stretch;margin-top:34px}
.turn-grid .turn{margin-top:0}
.turn-shot{position:relative;border:1px solid var(--warm-border);
  overflow:hidden;line-height:0}
.turn-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.03)}
@media(max-width:760px){
  .turn-grid{grid-template-columns:1fr}
  .turn-shot{aspect-ratio:4/3}
}


/* ================= RA's own identity (Edit 07) =================
   The funnel shares the IMS tokens (p1-02) but not the book funnel's
   composition. Three things carry RA's own signature: the accent colour
   (set in ra.css), the four-layer DESCENT as the centrepiece, and a single
   "100% you" statement that pays off the hero. Everything below is squared and
   hairlined like the rest of the contract. */

/* Hero: horizontal strata fading downward, in place of the shared dot grid --
   the descent motif in miniature, behind the headline. */
.hero-ra.on-dark::before{
  background-image:linear-gradient(to bottom,rgba(110,147,232,.11) 1px,transparent 1px);
  background-size:100% 44px;
  -webkit-mask-image:linear-gradient(to bottom,#000 4%,transparent 82%);
          mask-image:linear-gradient(to bottom,#000 4%,transparent 82%);
}
/* "100% you" picked out of the headline in the accent. */
.hl{color:var(--accent-bright)}

/* The payoff. The hero's claim, stated once, right after the reader has
   watched the descent get built -- so it reads as a conclusion, not a slogan. */
.statement{padding:clamp(48px,6.5vw,92px) 0}
.statement .narrow{max-width:900px;text-align:center}
.statement-lead{font-family:var(--serif);
  font-weight:600;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.14;
  letter-spacing:-.012em;color:#EAF2F8}
.statement-lead em{font-style:normal;color:var(--accent-bright)}
.statement-sub{margin:18px auto 0;max-width:54ch;
  font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.55;color:#B9CBDC}

/* ---- the four-layer descent: RA's signature graphic ----
   The section's whole case is spatial ("you were working the wrong layer"), so
   it is drawn as the descent it describes: four strata, each a shade deeper,
   with the one layer the copy says is reachable filled in the accent. */
.strata{margin-top:clamp(32px,4vw,52px);max-width:760px;position:relative}
.strata-k{font-family:var(--sans);font-size:.63rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:14px}
.stratum{display:grid;grid-template-columns:auto 1fr auto;gap:0 18px;
  align-items:center;background:var(--white);border:1px solid var(--warm-border);
  border-top:0;padding:16px 22px;position:relative}
.stratum:first-of-type{border-top:1px solid var(--warm-border)}
/* each deeper stratum a touch darker, so the stack reads as going down. The
   .stratum divs are the 1st-4th divs in .strata (the strata-k label is a
   span, so it does not count); the 3rd, Belief, is the reachable layer
   and takes its own fill below. */
.stratum:nth-of-type(2){background:#FCFBF8}
.stratum:nth-of-type(4){background:#F3F0E9}
.stratum .s-n{font-family:var(--sans);font-size:.7rem;
  font-weight:600;color:var(--muted);letter-spacing:.08em}
.s-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.s-t{font-weight:700;font-size:1.02rem;color:var(--navy);letter-spacing:.005em}
.s-d{font-size:.85rem;color:var(--grey);line-height:1.4}
.s-note{font-family:var(--sans);font-size:.63rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:right;max-width:15ch;line-height:1.4}
/* the reachable layer -- the point of the whole graphic */
.stratum.s-run{background:var(--accent-bg)}
.stratum.s-run::before{content:"";position:absolute;top:-1px;left:0;right:0;
  height:1px;background:var(--foil-blue)}
.s-run .s-n,.s-run .s-t{color:var(--accent-deep)}
.s-run .s-note{color:var(--accent-deep);font-weight:600;
  display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.s-run .s-note::before{content:"";width:6px;height:6px;border-radius:50%;
  flex:0 0 6px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
@media(max-width:560px){
  .stratum{grid-template-columns:auto 1fr;row-gap:5px;padding:14px 16px}
  .s-note{grid-column:2;text-align:left;max-width:none}
  .s-run .s-note{justify-content:flex-start}
}

/* Mobile hero: the shared hero-grid keeps the headline beside the cover on a
   phone, which crushes the headline to ~48% of a 375px screen. RA's hero
   stacks instead -- full-width headline, then a modest cover, then the lede
   and CTA -- so the hook gets the whole width and "100% you" reads at size.
   Scoped to .hero-ra so only the RA landing changes. */
@media(max-width:640px){
  .hero-ra .hero-grid{grid-template-columns:1fr;
    grid-template-areas:"head" "media" "body";gap:0}
  .hero-ra .hero-head{align-self:start}
  .hero-ra .hero-media{max-width:208px;margin:22px 0 0}
  .hero-ra .hero-body{margin-top:22px}
  .hero-ra h1{font-size:clamp(1.6rem,7.4vw,2.1rem);max-width:none;margin:10px 0 0}
}

/* ================= book bonuses: the value stack (Edit 08) =================
   What comes with the copy, drawn as a stack the Inner Matrix book funnel has
   no equivalent of, on the navy ground so the bundle photo (shot on navy) sits
   flush, in the accent. Titles are Joey's five bonuses from joeyklein.com; IMS
   confirms the descriptions and that they carry to the free+shipping offer. */
.bonus-grid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,3.5vw,52px);align-items:center;margin-top:clamp(28px,3.4vw,44px)}
.bonus-list{display:flex;flex-direction:column;gap:1px;
  background:rgba(107,182,216,.18);border:1px solid rgba(107,182,216,.18)}
.bonus{background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start;
  padding:clamp(15px,1.7vw,19px) clamp(17px,1.9vw,22px)}
.bonus .b-n{font-family:var(--sans);font-size:.66rem;
  font-weight:600;letter-spacing:.12em;color:var(--accent-bright);padding-top:3px}
.bonus h3{font-family:var(--sans);font-size:1rem;font-weight:700;
  color:#fff;letter-spacing:-.005em;line-height:1.3}
.bonus p{font-size:.87rem;line-height:1.5;color:#B9CBDC;margin-top:4px}
.bonus-shot{border:1px solid rgba(107,182,216,.34);overflow:hidden;line-height:0;
  position:relative}
.bonus-shot img{width:100%;height:auto;display:block}
.bonus-note{margin-top:clamp(18px,2.2vw,26px);font-family:var(--sans);
  font-size:.68rem;letter-spacing:.06em;color:#7E97AE;line-height:1.5}
@media(max-width:820px){
  .bonus-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,30px)}
  .bonus-shot{order:-1}
}

/* ================= visual lift (Edit 09) =================
   The page read as an essay. Recognition and the "100% you" statement now pair
   their copy with a real photo of Joey and his wife, and the "outside in"
   section is drawn as concentric rings (which rhyme with the cover's circle of
   people) instead of a boring stack. */

/* copy + photo, two columns (recognition on ivory, statement on navy) */
.recog-grid,.statement-grid{display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(22px,3.4vw,48px);align-items:center;margin-top:clamp(24px,3vw,40px)}
.recog-grid .mirror{max-width:none;margin:0;text-align:left}
.recog-shot,.statement-shot{border:1px solid var(--warm-border);overflow:hidden;
  line-height:0}
.recog-shot img,.statement-shot img{width:100%;height:100%;object-fit:cover;
  display:block;aspect-ratio:4/5;filter:saturate(.92) contrast(1.03)}
.statement-shot{border-color:rgba(107,182,216,.34)}
.statement-grid{text-align:left}
.statement-grid .statement-lead,.statement-grid .statement-sub{margin-left:0;margin-right:0}
.statement-grid .statement-sub{max-width:40ch}
@media(max-width:820px){
  .recog-grid,.statement-grid{grid-template-columns:1fr}
  .recog-shot img,.statement-shot img{aspect-ratio:16/10}
  .statement-grid{text-align:center}
  .statement-grid .statement-sub{max-width:54ch;margin-left:auto;margin-right:auto}
}

/* concentric rings: the "inside out" graphic (Edit 09) */
.rings{display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(28px,3.6vw,46px)}
.rings-svg{display:block;width:100%;max-width:404px;height:auto}
.r-lbl{font-family:var(--sans);font-weight:600;
  letter-spacing:.05em}
.rings-cap{margin-top:22px;max-width:48ch;text-align:center;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.06rem,1.6vw,1.34rem);line-height:1.4;letter-spacing:-.005em;
  color:var(--navy)}
.rings-cap em{font-style:normal;color:var(--accent-deep)}

/* relationship-type glyph on each cost domain header (Edit 09) */
.domain h3{display:flex;align-items:center;gap:10px}
.domain .d-ico{width:19px;height:19px;flex:0 0 19px;color:var(--accent-deep)}

/* Light, distinct above-the-fold (Edit 09), so RA does not read as the Inner
   Matrix book funnel's dark hero. Warm light ground, faint concentric circles
   echoing the cover and the rings. Dropping .on-dark reverts eyebrow/lede/btn
   to their light defaults; only the highlight, headline and proof row need a
   light variant. */
.hero-ra{position:relative;overflow:hidden;color:var(--ink);
  background:radial-gradient(125% 90% at 82% 12%,#EBF1FD 0%,var(--ivory) 42%,#FBFAF7 100%)}
.hero-ra .wrap{position:relative;z-index:1}
.hero-ra::before,.hero-ra::after{content:"";position:absolute;border-radius:50%;
  pointer-events:none;z-index:0}
.hero-ra::before{width:660px;height:660px;top:-170px;right:-130px;
  border:1.5px solid rgba(0,61,191,.14)}
.hero-ra::after{width:430px;height:430px;top:-55px;right:-10px;
  border:1.5px solid rgba(0,30,96,.07)}
.hero-ra .hl{color:var(--accent-deep)}
.hero-ra h1{color:var(--navy)}
.hero-ra .proofrow{color:var(--grey)}
.hero-ra .proofrow strong{color:var(--navy)}
.hero-ra .proofrow .sep{background:var(--warm-border)}
@media(max-width:640px){
  .hero-ra::before{width:420px;height:420px;top:-120px;right:-150px}
  .hero-ra::after{display:none}
}

/* ================= reader testimonials (Edit 10) =================
   The three from joeyklein.com, one per relationship type the page is built
   on: marriage, family, work. Set as text (not the source screenshot) so they
   reflow and stay legible on a phone, in the house card style with an accent
   quote mark and a clay domain tag. IMS confirms wording and fuller
   attribution. */
.tstm-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,3.4vw,44px)}
.tstm{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(24px,2.6vw,32px);position:relative;display:flex;flex-direction:column;margin:0}
.tstm::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.tstm-q{font-family:var(--serif);font-size:2.7rem;
  line-height:.5;color:var(--accent);height:22px}
.tstm blockquote{font-family:var(--serif);
  font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.5;color:var(--ink);
  font-weight:400;letter-spacing:-.005em;margin:18px 0 0}
.tstm-who{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:4px}
.tstm-nm{font-weight:700;font-size:.92rem;color:var(--navy);
  font-family:var(--sans)}
.tstm-dom{font-family:var(--sans);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
@media(max-width:760px){.tstm-grid{grid-template-columns:1fr}}

/* ================= light, Joey-Klein-branded masthead (Edit 11) =================
   Lifts the banner off the Inner Matrix "Girl Scout" look toward the direct
   Joey Klein / Relationship Alchemy brand: a white bar with the accent
   line, the book wordmark in place of the Inner Matrix Systems logo, and no
   hanging cover (that overlay was the book funnel's signature, and a white
   cover vanished on a white bar anyway). Scoped to .mast-light so the other RA
   pages keep the dark bar until a funnel-wide pass. */
.mast-light{background:var(--white);border-bottom:1px solid var(--warm-border);
  color:var(--ink);box-shadow:0 2px 0 rgba(0,61,191,.9)}
.mast-light .btn{background:var(--navy);color:#fff}
.mast-light .btn:hover{background:var(--accent-deep);color:#fff}
.mast-wordmark{display:inline-flex;align-items:baseline;gap:.3em;line-height:1;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.16rem,2.2vw,1.55rem);letter-spacing:-.01em;text-decoration:none}
.mast-wordmark .wm-1{color:var(--navy)}
.mast-wordmark .wm-2{color:var(--accent-deep)}
@media(max-width:640px){.mast-wordmark{font-size:1.06rem}}

/* ================= Joey Klein brand lockup (Edit 12) =================
   The banner now carries the Joey Klein mark -- the dragon icon plus the JOEY
   KLEIN wordmark -- in place of the Inner Matrix Systems logo, sized down to
   the bar. Overrides the shared .mark img{height:58px}. */
.jk-lockup{display:inline-flex;align-items:center;gap:11px;line-height:0}
.jk-lockup .jk-ico{height:34px;width:auto;display:block}
.jk-lockup .jk-wm{height:19px;width:auto;display:block}
@media(max-width:640px){
  .jk-lockup{gap:8px}
  .jk-lockup .jk-ico{height:30px}
  .jk-lockup .jk-wm{height:16px}
}

/* Shared Book purchase confirmation, using the RA palette and receipt. */
.book-oto-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.book-oto-copy{padding:12px 0}
.book-oto-receipt{background:var(--ivory);color:var(--navy)}
.book-oto-receipt .sline{font-size:.84rem}
.book-oto-receipt .stotal{font-size:.9rem;padding:16px 0}
.book-oto-receipt .stotal .v{font-size:1.15rem;white-space:nowrap}
.book-oto-new-charge{border-top:1px solid var(--warm-border);margin-top:8px;padding-top:8px}
.book-oto-receipt-note{font-size:.76rem;line-height:1.5;color:var(--muted);margin-top:16px}
@media(max-width:700px){.book-oto-layout{grid-template-columns:1fr;gap:20px}.book-oto-copy{padding:0}}