/* RealignED Wellness Academy: one stylesheet for the public site and for the
   Blog desk's preview of a post. The first two parts are the brand's design
   system as published (its tokens, then components/bundle.css), copied here
   word for word; change them there first. The last part lays out pages. */
:root {
  --paper: #fffdf8; --ink: #17132b; --body: #2b2740; --muted: #5e5a72; --line: #ddd8e8;
  --violet: #6c3bff; --rose: #ff1d58; --gold: #ffb703; --lagoon: #00b3ad; --lagoon-deep: #007a77;
  --violet-tint: #ece6ff; --rose-tint: #ffe6ec; --gold-tint: #fff1cc; --lagoon-tint: #d9f3f1;
  --violet-hover: #5627e6; --on-violet: #ffffff; --on-ink: #edeaf5;
  --wrap: 1160px; --measure: 780px; --space-gutter: 48px; --space-gutter-min: 20px; --space-section: 104px; --space-section-min: 56px; --space-split: 88px;
  --gap-stack: 20px; --gap-grid: 16px; --gap-head: 14px; --gap-tight: 12px;
  --pad-card-y: 28px; --pad-card-x: 26px; --pad-tile-y: 26px; --pad-tile-x: 24px; --pad-button-y: 14px; --pad-button-x: 24px; --rule-section: 10px; --rule-step: 6px;
  --radius-pill: 999px; --radius-card: 14px; --radius-field: 12px; --radius-letter: 16px; --radius-focus: 4px;
  --font-serif: "Besley", Georgia, "Times New Roman", serif;
  --font-sans: "Lexend", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Brush Script MT", cursive;
  color-scheme: light;
}

/* RealignED Wellness Academy: component styles.
   Put class="ra" on the body or on one wrapper. Every component class starts with ra-.
   Colors, spacing, radii, and font stacks come from the tokens (tokens.css). */

.ra { margin: 0; background: var(--paper); color: var(--body); font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.6; -webkit-text-size-adjust: 100% }
:where(.ra), :where(.ra) *, :where(.ra) *::before, :where(.ra) *::after { box-sizing: border-box }
:where(.ra) h1, :where(.ra) h2, :where(.ra) h3, :where(.ra) p, :where(.ra) ul, :where(.ra) ol, :where(.ra) dl, :where(.ra) dd, :where(.ra) figure { margin: 0 }
:where(.ra) ul, :where(.ra) ol { padding: 0; list-style: none }
:where(.ra) a { color: var(--violet); text-underline-offset: 3px }
:where(.ra) a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: var(--radius-focus) }
.ra-btn:focus-visible, .ra-chip:focus-visible, .ra-input:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px }
.ra-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(var(--space-gutter-min), 5vw, var(--space-gutter)) }

/* Headings and text */
:where(.ra) h1, :where(.ra) h2, :where(.ra) h3 { font-family: var(--font-serif); color: var(--ink); line-height: 1.08; text-wrap: balance }
:where(.ra) h1 { font-weight: 800; font-size: clamp(42px, 7.2vw, 88px); letter-spacing: -0.01em }
:where(.ra) h2 { font-weight: 700; font-size: clamp(32px, 4.4vw, 52px) }
:where(.ra) h3 { font-weight: 700; font-size: 24px; line-height: 1.2 }
:where(.ra) h1 em, :where(.ra) h2 em { font-style: italic; font-weight: 700 }
.ra-label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--muted) }
.ra-hand { font-family: var(--font-hand); font-weight: 700; line-height: 1.05 }
.ra-lede { font-size: clamp(19px, 2.1vw, 23px); max-width: 34em }
.ra-pull { font-size: clamp(34px, 4.4vw, 54px); color: var(--ink) }
.ra-sig { font-family: var(--font-hand); font-weight: 700; font-size: 52px; line-height: 1; color: var(--violet); margin-top: 6px }
.ra-tell { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 62ch }

/* Button */
.ra-btn { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.6; text-decoration: none; padding: var(--pad-button-y) var(--pad-button-x); border-radius: var(--radius-pill); border: 2px solid var(--violet); background: var(--violet); color: var(--on-violet); cursor: pointer; transition: transform .15s ease, background .15s ease }
.ra-btn:hover { background: var(--violet-hover); border-color: var(--violet-hover); transform: translateY(-1px) }
.ra-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink) }
.ra-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.ra-btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.ra-btn--ink:hover { background: var(--body); border-color: var(--body) }
.ra-actions { display: flex; flex-wrap: wrap; gap: var(--gap-tight) var(--gap-grid); align-items: center }
@media (prefers-reduced-motion: reduce) { .ra-btn { transition: none } .ra-btn:hover { transform: none } }

/* Wordmark and site header */
.ra-wordmark { display: inline-block; font-family: var(--font-serif); font-weight: 800; font-size: 21px; color: var(--ink); text-decoration: none; line-height: 1.1 }
.ra-wordmark span { display: block; margin-top: 5px; font-family: var(--font-sans); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.ra-top { border-bottom: 1px solid var(--line); background: var(--paper) }
.ra-top .ra-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 16px }
.ra-top nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center }
.ra-top nav a { color: var(--ink); text-decoration: none; font-weight: 400; font-size: 16px; padding-block: 6px; display: inline-block }
.ra-top nav a:hover { text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 3px }

/* The four color bands: always rose, gold, violet, lagoon, in that order */
.ra-bands { display: grid; grid-template-columns: repeat(4, 1fr) }
.ra-bands i:nth-child(1) { background: var(--rose) }
.ra-bands i:nth-child(2) { background: var(--gold) }
.ra-bands i:nth-child(3) { background: var(--violet) }
.ra-bands i:nth-child(4) { background: var(--lagoon) }
.ra-bands--rule { height: var(--rule-section) }
.ra-bands--edge { position: absolute; inset-block: 0; right: 0; width: min(24vw, 320px) }
@media (max-width: 900px) { .ra-bands--edge { position: static; width: 100%; height: 14px } }

/* Hero */
.ra-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line) }
.ra-hero .ra-wrap { position: relative; padding-block: clamp(56px, 9vw, 120px) }
.ra-hero__copy { max-width: 760px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start }
.ra-hero__hand { display: block; font-family: var(--font-hand); font-weight: 700; color: var(--violet); font-size: 1.5em; line-height: .9; letter-spacing: 0; margin-top: .06em }
@media (max-width: 900px) { .ra-hero__copy { max-width: none } }

/* Section rhythm */
.ra-block { padding-block: clamp(var(--space-section-min), 8vw, var(--space-section)) }
.ra-head { display: flex; flex-direction: column; gap: var(--gap-head); max-width: var(--measure); margin-bottom: clamp(28px, 4vw, 48px) }
.ra-measure { width: 100%; max-width: var(--measure) }
.ra-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, var(--space-split)); align-items: start }
.ra-split--center { align-items: center }
@media (max-width: 900px) { .ra-split { grid-template-columns: minmax(0, 1fr) } }
.ra-stack { display: flex; flex-direction: column; gap: var(--gap-stack); align-items: flex-start; min-width: 0 }

/* Word cards: three across, then two wider ones */
.ra-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-grid) }
.ra-card { grid-column: span 2; border-radius: var(--radius-card); padding: var(--pad-card-y) var(--pad-card-x) 30px; display: flex; flex-direction: column; gap: var(--gap-tight); color: var(--ink); font-weight: 400; font-size: 18px; line-height: 1.45 }
.ra-card:nth-child(n+4) { grid-column: span 3 }
.ra-card b { font-family: var(--font-serif); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.05 }
.ra-card--rose { background: var(--rose) }
.ra-card--gold { background: var(--gold) }
.ra-card--lagoon { background: var(--lagoon) }
.ra-card--violet { background: var(--violet); color: var(--on-violet) }
.ra-card--ink { background: var(--ink); color: var(--on-ink) }
.ra-card--ink b { color: var(--gold) }
@media (max-width: 900px) { .ra-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } .ra-card, .ra-card:nth-child(n+4) { grid-column: span 1 } .ra-card:last-child { grid-column: span 2 } }
@media (max-width: 520px) { .ra-cards { grid-template-columns: minmax(0, 1fr) } .ra-card, .ra-card:nth-child(n+4), .ra-card:last-child { grid-column: span 1 } }

/* Pillar section: a rule in the pillar's color over its tint */
.ra-pillar { border-top: var(--rule-section) solid var(--c); background: var(--t) }
.ra-pillar--rose { --c: var(--rose); --t: var(--rose-tint) }
.ra-pillar--gold { --c: var(--gold); --t: var(--gold-tint) }
.ra-pillar--lagoon { --c: var(--lagoon); --t: var(--lagoon-tint) }
.ra-pillar--violet { --c: var(--violet); --t: var(--violet-tint) }

/* Statement: one italic line on a color field */
.ra-statement { background: var(--c, var(--gold)); color: var(--ink); font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; padding: 16px 22px; border-radius: var(--radius-field) }
.ra-statement--rose { --c: var(--rose) }
.ra-statement--gold { --c: var(--gold) }
.ra-statement--lagoon { --c: var(--lagoon) }
.ra-pillar--violet .ra-statement { background: var(--violet); color: var(--on-violet) }

/* Product list and the Free badge */
.ra-list { background: var(--paper); border-radius: var(--radius-card); padding: 8px var(--pad-card-x); width: 100%; min-width: 0 }
.ra-list li { padding-block: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px }
.ra-list li:first-child { border-top: 0 }
.ra-list h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
.ra-list p { font-size: 16.5px }
.ra-free { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; background: var(--lagoon); color: var(--ink); padding: 4px 10px; border-radius: var(--radius-pill) }

/* Audience list */
.ra-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100% }
.ra-who li { background: var(--paper); border-radius: var(--radius-field); padding: 14px 18px; font-size: 16.5px; line-height: 1.45 }
.ra-who b { font-family: var(--font-sans); font-weight: 600; color: var(--ink); display: block }

/* Start tiles */
.ra-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid) }
@media (max-width: 900px) { .ra-three { grid-template-columns: minmax(0, 1fr) } }
.ra-tile { background: var(--paper); border-radius: var(--radius-card); padding: var(--pad-tile-y) var(--pad-tile-x); display: flex; flex-direction: column; gap: var(--gap-tight); align-items: flex-start; min-width: 0 }
.ra-tile__for { color: var(--lagoon-deep); font-weight: 500 }
.ra-tile > p:not(.ra-label) { font-size: 16.5px; flex: 1 }
.ra-tile a { font-weight: 600 }

/* Steps */
.ra-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: ra-step }
@media (max-width: 900px) { .ra-steps { grid-template-columns: minmax(0, 1fr) } }
.ra-steps li { counter-increment: ra-step; border-top: var(--rule-step) solid var(--violet); padding-top: 18px; display: flex; flex-direction: column; gap: 8px }
.ra-steps li::before { content: counter(ra-step); font-family: var(--font-serif); font-weight: 800; font-size: 40px; line-height: 1; color: var(--violet) }

/* Promise band */
.ra-promise { background: var(--ink); color: var(--on-ink) }
.ra-promise h2 { color: var(--paper) }
.ra-promise h2 em { color: var(--gold) }
.ra-promise p { max-width: 40em; font-size: clamp(18px, 2vw, 21px) }
.ra-promise .ra-head { margin-bottom: 0 }

/* Tick list */
.ra-ticks { width: 100% }
.ra-ticks li { padding: 12px 0 12px 34px; border-top: 1px solid var(--line); position: relative }
.ra-ticks li:first-child { border-top: 0 }
.ra-ticks li::before { content: ""; position: absolute; left: 0; top: 19px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold) }

/* Letter card */
.ra-letter { background: var(--violet-tint); border-radius: var(--radius-letter); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0 }
.ra-letter .ra-hand { font-size: clamp(32px, 4vw, 44px); color: var(--ink) }
.ra-mail { font-weight: 600; font-size: clamp(17px, 2.2vw, 21px); overflow-wrap: anywhere }

/* Site footer */
.ra-footer { border-top: 1px solid var(--line) }
.ra-footer .ra-wrap { padding-block: 36px 48px; display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; font-size: 15px; color: var(--muted) }
.ra-footer p { max-width: 44em }

/* Intentional additions for tools. These are not on the home page; they are built from the same tokens. */
.ra-chips { display: flex; flex-wrap: wrap; gap: 10px }
.ra-chip { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.6; padding: 8px 18px; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer }
.ra-chip:hover { background: var(--violet-tint) }
.ra-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper) }

.ra-field { display: flex; flex-direction: column; gap: 8px; width: 100% }
.ra-field label { font-weight: 500; font-size: 16.5px; color: var(--ink) }
.ra-input { font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-field); padding: 12px 18px; width: 100% }
textarea.ra-input { min-height: 120px; resize: vertical }
.ra-input::placeholder { color: var(--muted); opacity: 1 }
.ra-field__help { font-size: 16.5px; color: var(--muted) }

.ra-practice { background: var(--paper); border-radius: var(--radius-card); padding: var(--pad-tile-y) var(--pad-tile-x); display: flex; flex-direction: column; gap: var(--gap-tight); min-width: 0 }
.ra-practice ol { counter-reset: ra-practice; display: flex; flex-direction: column; gap: 8px }
.ra-practice ol li { counter-increment: ra-practice; position: relative; padding-left: 34px; font-size: 16.5px }
.ra-practice ol li::before { content: counter(ra-practice); position: absolute; left: 0; top: 0; font-family: var(--font-serif); font-weight: 800; font-size: 20px; line-height: 1.35; color: var(--violet) }
.ra-practice__why { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; font-size: 16.5px }

.ra-notice { background: var(--violet-tint); border-radius: var(--radius-field); padding: 14px 18px; font-size: 16.5px; line-height: 1.45; color: var(--body) }
.ra-notice b { font-weight: 600; color: var(--ink) }

/* ─── Pages: a blog post, and the lists of posts and tools ─────────────────────
   Not part of the design system's component set: these lay out the public
   site's own pages and the Blog desk's preview of a post. */
.ra-page { padding-block: clamp(40px, 6vw, 72px) }
.ra-post { width: 100%; max-width: var(--measure) }
.ra-post__head { display: flex; flex-direction: column; gap: var(--gap-head); margin-bottom: 26px }
.ra-post__head h1 { font-size: clamp(34px, 5.4vw, 56px) }
.ra-post__about { font-size: 15px; color: var(--muted); margin: -4px 0 26px }
.ra-lead-img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); margin: 4px 0 26px }
.ra-prose { font-size: 18px }
.ra-prose p { margin: 0 0 18px }
.ra-prose h2 { font-size: 30px; line-height: 1.15; margin: 36px 0 12px }
.ra-prose h3 { font-size: 24px; margin: 28px 0 10px }
.ra-prose ul, .ra-prose ol { margin: 0 0 18px; padding-left: 24px }
.ra-prose ul { list-style: disc }
.ra-prose ol { list-style: decimal }
.ra-prose li { margin-bottom: 6px }
.ra-prose blockquote { margin: 0 0 18px; padding: 14px 18px; background: var(--violet-tint); border-radius: var(--radius-field); color: var(--ink) }
.ra-prose blockquote p:last-child { margin-bottom: 0 }
.ra-prose img { max-width: 100%; height: auto; border-radius: var(--radius-field) }
.ra-prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0 26px }
.ra-prose strong { font-weight: 600; color: var(--ink) }
.ra-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-grid) }
.ra-index .ra-tile { height: 100% }
.ra-index .ra-tile h3 a { color: var(--ink); text-decoration: none }
.ra-index .ra-tile h3 a:hover { text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 3px }
.ra-date { font-size: 13px; color: var(--muted) }
.ra-group + .ra-group { margin-top: clamp(32px, 5vw, 56px) }
.ra-top nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 3px }