/*
 * extras.css: live-site additions on top of Anisha's style.css and motion.css.
 * Her files stay as she wrote them; everything the live site needs goes here.
 *
 * 1. Readability. Most of our audience is 40 to 60. A browser measurement of v4 found
 *    150 of 403 text elements under 12px (down to 8px in the product preview) and 99
 *    below WCAG AA contrast. Every text element under 13px is raised to 13px or more,
 *    and greys that failed contrast are darkened. Generated from that measurement, so
 *    the selectors follow her markup one to one.
 * 2. The real-results section, trial note and reveal backstop added for the live site.
 */

/* ---------- 1a. Nothing under 13px ---------- */
body div.hero-copy > a.eyebrow-pill > span{font-size:13px}
body div.hero-copy > div.hero-note > span{font-size:13.5px}
body div.hero-copy > div.hero-note > button.motion-toggle{font-size:13.5px}
body div.workspace > div.window-bar > span.demo-tag{font-size:13px}
body div.workspace > div.window-bar > span.avatar{font-size:13px}
body div.workspace-body > aside.sidebar > span.side-label{font-size:13px}
body aside.sidebar > button > span{font-size:13px}
body #workspace-content > div.preview-top > span{font-size:13px}
body div.thread-ex > div.tx > i{font-size:13px}
body div.tx > div > b{font-size:13px}
body div.tx > div > p{font-size:13px}
body div.tx > div > small{font-size:13px}
body #tilt > div.hero-sequence > button.selected{font-size:13px}
body #tilt > div.hero-sequence > button{font-size:13px}
body div.floating-context > div > b{font-size:13.5px}
body div.floating-context > div > small{font-size:13px}
body #tilt > div.orbit-label{font-size:13.5px}
body #main > div.principles > span{font-size:13.5px}
body div.principles > span > strong{font-size:13.5px}
body #for-you > div.wrap > span.kicker{font-size:13px}
body div.wrap > div.cycle-control > span{font-size:13px}
body div.wrap > div.cycle-control > button.section-pause{font-size:13px}
body #aud-label{font-size:13px}
body div.audience-body > div.audience-example > span{font-size:13px}
body #aud-context{font-size:13.5px}
body #aud-context > b{font-size:13.5px}
body div.section-heading > div > span.kicker{font-size:13px}
body #master-each > div.cycle-control > span{font-size:13px}
body #master-each > div.cycle-control > button.section-pause{font-size:13px}
body div.pillar-grid > button.pillar > span.pillar-number{font-size:13px}
body div.pillar-grid > button.pillar > span.pillar-action{font-size:13.5px}
body div.pillar-example > div > span.kicker{font-size:13px}
body #pillar-label{font-size:13px}
body #pillar-provenance{font-size:13px}
body #master-each > p.pillar-footnote{font-size:13.5px}
body div.wall-grid > figure.wall > span.wall-k{font-size:13px}
body figure.wall > div.wall-stage > span.wall-cap{font-size:13.5px}
body #rules > div.source-note > span.sn-k{font-size:13px}
body div.source-note > div.sn-links > a{font-size:13px}
body #how > div.cycle-control > span{font-size:13px}
body #how > div.cycle-control > button.section-pause{font-size:13px}
body div.journey-nav > button.selected > span{font-size:13.5px}
body div.journey-nav > button > span{font-size:13.5px}
body div.stage-card > div.stage-header > span{font-size:13px}
body #journey-stage > div.stage-card > span.tag{font-size:13px}
body #journey-stage > div.stage-card > div.stage-bottom{font-size:13px}
body div.stage-card > div.stage-bottom > b{font-size:13px}
body #journey-stage > div.stage-card > button{font-size:13.5px}
body div.wrap > div > span.kicker{font-size:13px}
body #context-lab > div.lab-top > span{font-size:13px}
body #context-lab > div.lab-top > button.section-pause{font-size:13px}
body #context-lab > div.source-row > button.source-choice{font-size:13px}
body #context-lab > div.knowledge-core > span{font-size:13px}
body #source-count{font-size:13px}
body div.context-result > div > span{font-size:13px}
body #context-state{font-size:13px}
body #context-lab > div.context-result > small{font-size:13px}
body div.getback-grid > div > span.kicker{font-size:13px}
body div.stand-panel > div.sp-top > span{font-size:13px}
body div.sp-halves > div.half > span{font-size:13.5px}
body div.sp-halves > div.half > small{font-size:13px}
body div.stand-panel > div.sp-block > span.sp-label{font-size:13px}
body div.sp-block > div.sp-faces > i{font-size:13px}
body div.sp-rooms > div > span{font-size:13.5px}
body div.twenty > div.tw-head > span.kicker{font-size:13px}
body article.truth > div.truth-vis > span.fv-a{font-size:13px}
body article.truth > div.truth-vis > span.fv-b{font-size:13px}
body div.truth-grid > article.truth > span.truth-n{font-size:13px}
body article.truth > span.myth > small{font-size:13px}
body article.truth > details.truth-src > summary{font-size:13px}
body article.truth > details.truth-src > p{font-size:13.5px}
body article.truth > details.truth-src > a{font-size:13px}
body div.truth-grid > article.truth > span.truth-tag{font-size:13px}
body div.truth-vis > div.rbar > span{font-size:13.5px}
body div.rbar > span > small{font-size:13px}
body article.truth > div.truth-vis > small.vis-note{font-size:13px}
body div.truth-vis > div.room > span.room-post{font-size:13px}
body div.room > span.room-post > b{font-size:13px}
body div.truth-vis > div.room > span.room-c{font-size:13px}
body div.path-nodes > span > b{font-size:13.5px}
body div.path-nodes > span > small{font-size:13px}
body div.truth-vis > div.path-miss > s{font-size:13px}
body div.truth-vis > div.path-miss > small{font-size:13px}
body div.truth-vis > div.hand-caption > span.hc-a{font-size:13px}
body div.truth-vis > div.hand-caption > span.hc-b{font-size:13px}
body div.pod-rows > div.pod-row > span{font-size:13px}
body div.pod-row > span.pc > i{font-size:13px}
body div.pod-rows > div.pod-row > small{font-size:13px}
body article.truth > div.truth-vis > span.pod-flag{font-size:13px}
body #playbook > div.playbook-meta > span.checked{font-size:13px}
body div.playbook-meta > span.checked > b{font-size:13px}
body #main > section.control > span.kicker{font-size:13px}
body #why-built > div.founder-card > span.kicker{font-size:13px}
body div.plan-grid > article.plan > span.plan-pill{font-size:13px}
body #faq > div > span.kicker{font-size:13px}
body section.final-cta > div.wrap > span.kicker{font-size:13px}
body section.final-cta > div.wrap > p{font-size:13.5px}
body footer.wrap > span{font-size:13.5px}
body footer.wrap > a{font-size:13.5px}
body footer.wrap > small{font-size:13px}

/* ---------- 1b. Greys that failed contrast ---------- */
body div.workspace > div.window-bar > span.demo-tag,
body div.workspace-body > aside.sidebar > span.side-label,
body aside.sidebar > button > span,
body div.workspace-body > aside.sidebar > div.side-bottom,
body aside.sidebar > div.side-bottom > strong,
body #workspace-content > div.preview-top > span,
body div.floating-context > div > small,
body div.audience-body > div.audience-example > span,
body #master-each > div.section-heading > p,
body div.section-heading > p > strong,
body #master-each > div.cycle-control > span,
body div.pillar-grid > button.pillar > span.pillar-number,
body div.pillar-grid > button.pillar > span.pillar-copy,
body #pillar-explainer,
body #pillar-label,
body #pillar-provenance,
body #master-each > p.pillar-footnote,
body #master-each > div.cta-row > span.cta-note,
body #rules > div.section-heading > p,
body div.wall-grid > figure.wall > span.wall-k,
body #rules > div.cta-row > span.cta-note,
body #how > div.section-heading > p,
body #how > div.cycle-control > span,
body button.selected > div > p,
body div.journey-nav > button > span,
body button > div > p,
body div.stage-card > div.stage-header > span,
body #journey-stage > div.stage-card > p,
body #journey-stage > div.stage-card > div.stage-bottom,
body #how > div.cta-row > span.cta-note,
body div.wrap > div > p.body-copy,
body div.signal-feed > span.skipped > b,
body #context-lab > div.source-row > button.source-choice,
body #context-lab > div.knowledge-core > span,
body #source-count,
body #context-state,
body #context-lab > div.context-result > small,
body div.getback-grid > div > p.body-copy,
body div.stand-panel > div.sp-top > span,
body div.sp-halves > div.half > small,
body div.stand-panel > div.sp-block > span.sp-label,
body #playbook > div.section-heading > p,
body div.truth-grid > article.truth > span.myth,
body #playbook > div.playbook-meta > span.checked,
body section.control > h2 > span.muted,
body section.control > div.cta-row > span.cta-note,
body #pricing > div.section-heading > p,
body div.price-bar > div.cur-toggle > button,
body article.plan > div.plan-price > span,
body div.plan-grid > article.plan > p.plan-reg,
body article.plan > p.plan-reg > s.price,
body div.faq-list > details > p,
body section.final-cta > div.wrap > p,
body footer.wrap > span,
body footer.wrap > small { color: #4b5162; }

body div.tx > div > small,
body div.pillar-grid > button.pillar > span.pillar-action,
body div.signal-feed > span.late > b,
body article.truth > span.myth > small { color: #4b2fb8; }

/* Section intros read at 17px, not 15-16px. */
body .section-heading > p { font-size: 17px; line-height: 1.7; }

/* ---------- 2a. Never fully hidden ----------
 * Her reveals start at opacity 0 and wait for an observer. If it is late (a jump to an
 * anchor, a background tab) whole screens show blank. extras.js reveals anything that
 * has reached the screen on every scroll; this keeps the words visible meanwhile. */
.js .reveal:not(.in) { opacity: 0.35; }

/* ---------- 2b. Real results ---------- */
.mr-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mr-result {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 14px 34px rgba(25, 34, 58, 0.06);
}
.mr-who {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
}
.mr-result strong {
  margin-top: 20px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mr-unit { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.mr-result p { margin: auto 0 0; padding-top: 20px; font-size: 15px; line-height: 1.55; color: #4b5162; }
.mr-founder {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  border-radius: 22px;
  padding: 34px 38px;
  background: linear-gradient(135deg, #19223a 0%, #2b1d55 100%);
  color: #fff;
}
.mr-founder .mr-who { color: #f4a3b4; }
.mr-founder h3 { margin: 12px 0 10px; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.8px; }
.mr-founder p { margin: 0; font-size: 16px; line-height: 1.7; color: #dcdaea; }
.mr-founder-stats { display: grid; gap: 14px; }
.mr-founder-stats > div {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
}
.mr-founder-stats strong {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.2px;
  background: linear-gradient(90deg, #f4a3b4, #c9a7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mr-founder-stats strong b { font-weight: 800; }
.mr-founder-stats > div > span { font-size: 15px; color: #dcdaea; }
.mr-footnote { margin: 18px 0 0; max-width: 760px; font-size: 14px; line-height: 1.6; color: #4b5162; }

/* ---------- 2c. Trial note under the plans ---------- */
.mr-trial-note {
  margin: 28px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .mr-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mr-results-grid { grid-template-columns: 1fr; }
  .mr-founder { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
}

/* ---------- 2d. Phones: no sideways scroll ----------
 * At 390px the four audience tabs ran 17px past the screen ("Agencies & ghostwriters"
 * cut off) and the giant closing word overflowed. Tabs wrap onto two lines; the giant
 * word is a backdrop and is clipped. Both were in v4 as delivered. */
@media (max-width: 760px) {
  body .audience-tabs { flex-wrap: wrap; row-gap: 8px; }
  body .audience-tabs button { font-size: 13px; }
  body section.final-cta { overflow: hidden; }
}

/* ---------- 2e. "What changed": the walls move ----------
 * See extras.js. One 3.2s / 3.4s cycle each, started when the card is revealed. */
.mr-ripple {
  fill: none;
  stroke: #653BD0;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.wall.then.in .mr-ripple-then { animation: mrRippleThen 3.2s ease-out infinite; }
.wall.then.in .w-ring { animation: mrWallHit 3.2s ease-out infinite; }
.wall.then.in .w-node { animation: mrFollowerHeard 3.2s var(--mr-d, 0ms) ease-out infinite; }
.wall.then.in .w-you,
.wall.now.in .w-you { animation: mrYouBeat 3.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.wall.now.in .mr-ripple-now { animation: mrRippleNow 3.4s linear infinite; }
.wall.now.in .w-lit { animation: mrLit 3.4s var(--mr-d, 0ms) ease-out infinite; transform-box: fill-box; transform-origin: center; }
.wall.now.in .w-halo { animation: mrHalo 3.4s var(--mr-d, 0ms) ease-out infinite; transform-box: fill-box; transform-origin: center; }
.wall.now.in .w-dash { animation: mrDashDrift 6s linear infinite; }

/* Then: out to the followers, stopped dead by the wall. */
@keyframes mrRippleThen {
  0% { transform: scale(1); opacity: 0.6; }
  55% { transform: scale(4.27); opacity: 0.55; }
  66% { transform: scale(4.27); opacity: 0; }
  100% { transform: scale(4.27); opacity: 0; }
}
@keyframes mrWallHit {
  0%, 50% { stroke: #a7aebd; stroke-width: 3; }
  56% { stroke: #653BD0; stroke-width: 6; }
  78%, 100% { stroke: #a7aebd; stroke-width: 3; }
}
@keyframes mrFollowerHeard {
  0% { fill: #653BD0; }
  18%, 100% { fill: #8a92a3; }
}

/* Now: through the dotted line, lighting whoever cares about the subject. */
@keyframes mrRippleNow {
  0% { transform: scale(1); opacity: 0.55; }
  65% { transform: scale(8.1); opacity: 0.18; }
  100% { transform: scale(12.5); opacity: 0; }
}
@keyframes mrLit {
  0% { fill: #ef778e; transform: scale(1.35); }
  14% { fill: #653BD0; transform: scale(1); }
  100% { fill: #653BD0; transform: scale(1); }
}
@keyframes mrHalo {
  0% { opacity: 1; transform: scale(1.5); }
  20%, 100% { opacity: 0.45; transform: scale(1); }
}
@keyframes mrDashDrift { to { stroke-dashoffset: -48; } }
@keyframes mrYouBeat {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.08); }
  20% { transform: scale(1); }
}

/* Her "Pause motion" button covers these too; reduced motion gets the still picture. */
.motion-paused .wall *,
.page-hidden .wall * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .wall .mr-ripple { display: none; }
  .wall .w-ring, .wall .w-node, .wall .w-lit, .wall .w-halo, .wall .w-dash, .wall .w-you { animation: none !important; }
}

/* ---------- 2f. The two walls line up ----------
 * The "then" drawing is square and the "now" one is wide, so their boxes came out
 * different sizes (278x310 against 328x275) and the headings under them sat 34px apart.
 * Both boxes now fill the card at one height with the drawing centred in it, so the
 * kickers, boxes, headings and copy line up across the two cards. */
body .wall { display: flex; flex-direction: column; }
body .wall-stage {
  width: 100%;
  height: clamp(250px, 23vw, 310px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body .wall-svg {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}
body .wall figcaption { margin-top: 4px; }

/* The sticky "Analyse my profile" bar: its button never breaks onto two lines, and
 * on narrower screens the label goes so the button keeps its room. */
body .sticky-cta .button { white-space: nowrap; }
@media (max-width: 1100px) {
  body .sticky-cta > span { display: none; }
  body .sticky-cta { padding: 6px; }
}

/* ---------- 2g. Call to action out of the reader's way ----------
 * Her bottom sticky bar covered the page while people read. It is off; extras.js adds
 * a slim header that slides in only on scroll-up past the hero. */
body #sticky-cta { display: none !important; }

.mr-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #ebe6f5;
  box-shadow: 0 10px 30px -22px rgba(25, 34, 58, 0.45);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}
.mr-topbar.show { transform: none; }
body .mr-topbar .mr-topbar-inner { height: 64px; }
body .mr-topbar .brand img { height: 28px; width: auto; }
.mr-topbar .mr-signin {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.mr-topbar .mr-signin:hover { color: var(--blue); }
body .mr-topbar .button { white-space: nowrap; margin: 0; }
@media (prefers-reduced-motion: reduce) { .mr-topbar { transition: none; } }

/* 2h. THE MENU, READABLE ON DESKTOP AND PRESENT ON PHONES.
   Her nav links were 14px at weight 550, dropping to 12px under 1100px, which read
   lighter and smaller than everything around them. And under 760px the nav was hidden
   with no replacement, so a phone visitor had no way to reach Pricing, FAQs or the Blog.
   The links are now 15px semibold in ink, and phones get a menu button (extras.js) that
   opens the same links plus Sign in and the main call to action. */
.nav nav{font-size:15.5px;font-weight:600;gap:30px;letter-spacing:-.1px}
.nav nav a{color:var(--ink)}
.nav nav a:hover{color:var(--blue)}
@media(max-width:1100px){.nav nav{font-size:14.5px;gap:18px}}
.mr-menu-btn,.mr-menu{display:none}
@media(max-width:760px){
  .nav{gap:10px}
  .nav .brand{margin-right:auto}
  .mr-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:1px solid #d9deea;border-radius:10px;background:#fff;color:var(--ink)}
  .mr-menu-btn svg{width:22px;height:22px}
  .mr-menu{position:absolute;top:calc(100% - 6px);left:14px;right:14px;flex-direction:column;background:#fff;border:1px solid #e4e9f1;border-radius:14px;box-shadow:0 18px 44px #19223a26;padding:8px;z-index:30}
  .mr-menu.open{display:flex}
  .mr-menu a{display:block;padding:14px 14px;font-size:17px;font-weight:600;color:var(--ink);border-radius:9px;text-decoration:none}
  .mr-menu a:hover,.mr-menu a:focus-visible{background:#f6f3fb}
  .mr-menu .mr-menu-signin{border-top:1px solid #e4e9f1;border-radius:0;margin-top:4px;padding-top:16px}
  .mr-menu .mr-menu-cta{background:var(--blue);color:#fff;text-align:center;margin-top:6px;border-radius:10px}
  .mr-menu .mr-menu-cta:hover{background:#5630b8}
}
@media(max-width:420px){
  .nav .brand img{width:150px;height:auto}
  .nav > a.button{display:none}
}

/* 2i. LATEST FROM THE BLOG. Three newest articles, read from /blog/rss.xml by extras.js
   and placed before the FAQs, so every approved article also shows on the landing. */
.mr-blog .mr-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mr-blog-card{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid #e4e9f1;border-radius:16px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.mr-blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px #19223a14;border-color:#d7cdf2}
.mr-blog-card b{font-family:Manrope,var(--font);font-size:20px;line-height:1.3;letter-spacing:-.4px}
.mr-blog-card p{margin:0;font-size:15.5px;line-height:1.6;color:#4b5162}
.mr-blog-card span{margin-top:auto;font-size:14px;font-weight:600;color:#4b2fb8}
.mr-blog-all{display:inline-block;margin-top:26px;font-weight:600;color:#4b2fb8;text-decoration:none}
.mr-blog-all:hover{text-decoration:underline}
@media(max-width:900px){.mr-blog .mr-blog-grid{grid-template-columns:1fr}}

/* 2j. COMPANY DETAILS AND LEGAL LINKS IN THE FOOTER. Who sells Mastreach and how to reach
   them, above the small print, wrapping on phones. */
footer .mr-legal{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;font-weight:600}
footer .mr-legal a{color:#4b5162}
footer .mr-legal a:hover,footer .mr-company a:hover{color:var(--blue)}
footer .mr-company{flex-basis:100%;font-size:13px;line-height:1.55;color:#4b5162;text-align:left}
footer .mr-company p{margin:0 0 4px}
footer .mr-company a{color:#4b5162;text-decoration:underline}