:root {
  --draft-font-display: 'PT Serif', Georgia, serif;
  --draft-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --draft-heading-size: clamp(2.25rem, 3.8vw, 3.5rem);
  --draft-heading-size-mobile: clamp(2.1rem, 8.5vw, 2.5rem);
  --draft-body-size: 1rem;
  --draft-intro-size: 1.0625rem;
  --draft-label-size: .75rem;
  --draft-ink: #172934;
  --draft-muted: #52636d;
  --draft-blue: #3069df;
  --draft-blue-dark: #214eb0;
  --draft-violet: #8b53df;
  --draft-orange: #ec8a51;
  --draft-yellow: #f4b52c;
  --draft-blue-soft: #f2f6ff;
  --draft-violet-soft: #f7f3ff;
  --draft-orange-soft: #fff5ed;
  --draft-yellow-soft: #fff9e8;
  --draft-cream: #fff8eb;
  --draft-paper: #fbfaf7;
  --draft-line: #dfe5e6;
}

html, body { scroll-behavior: smooth; }
body.design-draft { color: var(--draft-ink); background: var(--draft-paper); font-family: var(--draft-font-ui); }
body.design-draft h1, body.design-draft h2, body.design-draft h3 { color: var(--draft-ink); }
body.design-draft .page { height: auto; min-height: 0; overflow: visible; scroll-snap-type: none; }
body.design-draft .section { height: auto; min-height: 0; overflow: visible; scroll-snap-align: none; }

.draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 36px; padding: 7px max(22px, calc((100vw - 1180px)/2));
  background: #1b3140; color: #fff; font-size: .72rem; letter-spacing: .02em;
}
.draft-banner strong { color: #ffd09c; }
.draft-banner a { color: #fff; font-weight: 700; text-underline-offset: 3px; }

/* A quiet first screen, with one clear action and a little brand warmth. */
.hero-zone { background: radial-gradient(circle at 8% 69%, #f6d6c3a8, transparent 33%), radial-gradient(circle at 89% 67%, #d7d5ffbf, transparent 43%), #fff; }
body.design-draft .velorah-hero {
  min-height: 0; background: transparent;
  color: var(--draft-ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.design-draft .velorah-hero__overlay, .design-draft .velorah-hero__video { display: none; }
.design-draft .velorah-hero__nav {
  max-width: 1180px; padding: 16px 24px; border-bottom: 1px solid #e9e9e6;
}
.design-draft .velorah-hero__logo img { height: 72px !important; filter: brightness(0); }
.design-draft .velorah-hero__nav-pill {
  gap: 5px; border: 0; background: none; box-shadow: none; backdrop-filter: none;
}
.design-draft .velorah-hero__nav-link { padding: 11px 15px; color: #334954; font-size: .87rem; font-weight: 700; }
.design-draft .velorah-hero__nav-link:hover { color: var(--draft-blue); }
.design-draft .liquid-glass-btn { border: 0; border-radius: 12px; background: var(--draft-blue); color: #fff; box-shadow: 0 10px 20px #245ac029; backdrop-filter: none; }
.design-draft .liquid-glass-btn::before { display: none; }
.design-draft .liquid-glass-btn:hover { background: var(--draft-blue-dark); transform: translateY(-2px); }
.design-draft .velorah-hero__nav-btn { padding: 12px 19px; font-weight: 800; }
.design-draft .velorah-hero__content { min-height: 0; padding: clamp(70px, 7vw, 108px) 24px 88px; }
.design-draft .velorah-hero__eyebrow {
  margin: 0 0 18px; padding: 8px 13px; border: 1px solid #d9e3f8; border-radius: 99px;
  background: #f4f7ff; color: #3153a6; font-size: .72rem; font-weight: 800; text-shadow: none;
}
.design-draft .velorah-hero__h1 {
  max-width: 930px; color: var(--draft-ink); font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 1.04; letter-spacing: -.04em; text-shadow: none;
}
.design-draft .velorah-hero__h1 em { color: #171b20; }
.design-draft .velorah-hero__subtext {
  max-width: 640px; margin: 23px auto 0; color: #43545c; font-size: 1.08rem;
  font-weight: 500; line-height: 1.62; text-shadow: none;
}
.design-draft .velorah-hero__actions { margin-top: 30px; gap: 17px; }
.design-draft .velorah-hero__cta { padding: 17px 28px; font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.design-draft .velorah-hero__secondary { color: #2f5182; font-size: .94rem; text-decoration: none; }
.design-draft .velorah-hero__secondary:hover { text-decoration: underline; }
.draft-mobile-menu { display: none; }

/* The existing Learnzy content stays visible, but the rhythm is lighter. */
.design-draft .section-eyebrow { color: #3863b2; font-size: .69rem; letter-spacing: .16em; }
.design-draft .chapter-loop { padding: 105px 24px 93px; background: #f5f7fb; }
.design-draft .chapter-loop__container { max-width: 1140px; }
.design-draft .chapter-loop__intro { max-width: 780px; margin: 0 auto 37px; text-align: center; }
.design-draft .chapter-loop__intro h2 { text-align: center; }
.design-draft .chapter-loop__intro > p:last-child { color: var(--draft-muted); }
.design-draft .chapter-loop h2,
.design-draft .support-heading h2,
.design-draft .journey-copy h2,
.design-draft .testimonials__header h2,
.design-draft .beyond-intro h2 {
  font-family: 'PT Serif', Georgia, serif; font-weight: 400; letter-spacing: -.035em;
  line-height: 1.05;
}
.design-draft .chapter-loop__visuals { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 20px; }
.design-draft .chapter-tree, .design-draft .practice-loop { border-color: #dce4eb; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px #12334a0c; }
.design-draft .practice-loop { color: var(--draft-ink); }
.design-draft .practice-loop li > span { border-color: #8ca9dc; color: #4167b1; }
.design-draft .practice-loop li:not(:last-child) > span::after { border-color: #a8bce1; }
.design-draft .practice-loop li small { color: #64737d; }
.design-draft .practice-loop__repeat { border-color: #b9cce7; background: #f4f7fd; color: #435c83; }
.design-draft .chapter-tree__root { border-color: #385cb0; background: #edf3ff; }
.design-draft .chapter-tree__set { border-radius: 12px; }
.design-draft .chapter-tree__set--first { border-color: #e7a475; background: #fff3e7; }
.design-draft .practice-loop__eyebrow { color: #315db4; }
.design-draft .question-mix { margin-top: 23px; border: 1px solid #dce4ec; border-radius: 20px; background: #fff; }
.design-draft .question-mix h3 { font-family: 'PT Serif', Georgia, serif; font-weight: 400; }
.design-draft .question-mix li { border-color: #e5e9ed; }
.design-draft .journey-section { padding: 90px 24px; background: #fff; }
.design-draft .journey-section:nth-of-type(even) { background: #f9fafc; }
.design-draft .journey-grid { max-width: 1130px; }
.design-draft .journey-copy h2 { font-size: clamp(2.7rem, 4.8vw, 4.5rem); }
.design-draft .journey-copy > p:not(.section-eyebrow), .design-draft .support-heading > p:last-child,
.design-draft .extras-shell p:not(.section-eyebrow) { color: var(--draft-muted); }
.design-draft .journey-note { border-color: #dde6ee; }
.design-draft .problem-solution:not(.problem-solution--answer) { border-color: #e9bd9e; border-left-color: var(--draft-orange); background: #fff7ef; box-shadow: none; }
.design-draft .problem-solution--answer { border-color: #b8d4e2; border-left-color: #3e8fa7; background: #f0f9fc; box-shadow: none; }
.design-draft .sample-phone, .design-draft .single-stage .phone { box-shadow: 0 26px 50px #1f3a572b; }
.design-draft .product__stage, .design-draft .sample-phone { z-index: 1; }
.design-draft .journey-action .button, .design-draft .offer-shell .button { border-radius: 11px; background: var(--draft-blue); border-color: var(--draft-blue); box-shadow: none; }
.design-draft .journey-action .button:hover, .design-draft .offer-shell .button:hover { background: var(--draft-blue-dark); }
.design-draft .support-section { padding: 92px 24px; background: #eff7fa; }
.design-draft .wellness-section { background: #fbf5f9; }
.design-draft .support-heading { max-width: 840px; }
.design-draft .support-list li { border-color: #bfd8e2; }
.design-draft .screen-pair figure, .design-draft .wellness-screens figure { border-color: #dbe3e9; box-shadow: 0 14px 35px #17395016; }
.design-draft .extras-section { background: #fff; padding: 90px 24px; }
.design-draft .extras-shell > div { border-color: #dfe6ec; border-radius: 20px; }
.design-draft .extras-shell h2, .design-draft .extras-shell h3 { font-family: 'PT Serif', Georgia, serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; }
.design-draft .testimonials { background: #f7f9fc; }
.design-draft .testimonials__header h2 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); }

/* A distinct side-tool panel, inspired by the useful live example on SuperKalam's challenge page. */
.beyond-section { padding: 62px 24px 90px; background: #f5f7fb; }
.beyond-shell { width: min(1140px, 100%); margin: auto; }
.beyond-intro { max-width: 740px; margin: 0 auto 34px; text-align: center; }
.beyond-intro h2 { margin: 0 0 15px; font-size: clamp(2.7rem, 4.6vw, 4.5rem); }
.beyond-intro > p:last-child { color: var(--draft-muted); line-height: 1.6; }
.beyond-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 20px; }
.beyond-card { min-width: 0; padding: 30px; border: 1px solid #dbe3ec; border-radius: 20px; background: #fff; }
.beyond-card h3 { margin: 12px 0 12px; font-family: 'PT Serif', Georgia, serif; font-size: clamp(2.2rem, 3.3vw, 3.1rem); font-weight: 400; line-height: 1.03; }
.beyond-card p { max-width: 450px; color: var(--draft-muted); font-size: .94rem; line-height: 1.6; }
.beyond-kicker { color: #5069b2; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.beyond-card--duel { display: grid; grid-template-columns: 1fr 240px; align-items: center; gap: 22px; background: #17344c; color: #fff; border-color: #17344c; }
.design-draft .beyond-card--duel h3, .beyond-card--duel p { color: #fff; }
.beyond-card--duel p { color: #d9e6ed; }
.beyond-card--duel .beyond-kicker { color: #ffc188; }
.draft-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 11px 17px; border-radius: 10px; background: var(--draft-blue); color: #fff; font-weight: 800; text-decoration: none; }
.draft-button:hover { background: var(--draft-blue-dark); }
.draft-button--light { background: #f8b16e; color: #162e40; }
.draft-button--light:hover { background: #ffcb91; }
.duel-visual { padding: 13px; border: 1px solid #84a0b5; border-radius: 17px; background: #f7fbff; color: #233b49; transform: rotate(3deg); box-shadow: 0 15px 28px #081a2970; }
.duel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .65rem; font-weight: 800; }
.duel-top b { padding: 5px 7px; border-radius: 5px; background: #ffe7d6; color: #b6532e; }
.duel-faceoff { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 20px 0; }
.duel-faceoff span { padding: 8px 10px; border-radius: 8px; background: #e5effe; color: #315fa7; font-size: .67rem; font-weight: 800; }
.duel-faceoff span:last-child { background: #fbe9df; color: #aa6441; }
.duel-faceoff strong { font-family: 'PT Serif', Georgia, serif; font-size: 1.45rem; }
.duel-question { margin-bottom: 10px; font-size: .85rem; font-weight: 800; }
.duel-answers { display: flex; gap: 5px; }
.duel-answers span { display: grid; width: 34px; height: 32px; place-items: center; border: 1px solid #cad9e7; border-radius: 6px; background: #fff; font-size: .68rem; font-weight: 800; }
.duel-answers span:nth-child(3) { border-color: #52a982; background: #d8f5e6; }
.duel-visual small { display: block; margin-top: 14px; color: #647c88; font-size: .56rem; }
.beyond-card--blog { background: #fffaf1; border-color: #eadfc9; }
.blog-link-list { display: grid; margin: 25px 0 20px; border-top: 1px solid #e8dcc9; }
.blog-link-list a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e8dcc9; color: #263c47; font-size: .85rem; font-weight: 750; text-decoration: none; }
.blog-link-list a:hover, .blog-more:hover { color: var(--draft-blue); }
.blog-more { color: #315bb0; font-size: .86rem; font-weight: 850; text-decoration: none; }

.design-draft .offer-section { padding: 68px 24px 95px; background: #fff; }
.design-draft .offer-shell { border: 0; border-radius: 22px; background: radial-gradient(circle at 91% 10%, #3664a5, transparent 40%), #1a344a; box-shadow: 0 20px 50px #17344c29; }
.design-draft .offer-shell::before, .design-draft .offer-shell::after { display: none; }
.design-draft .offer-shell h2 { color: #fff; font-family: 'PT Serif', Georgia, serif; font-weight: 400; }
.design-draft .offer-shell__purchase { border-color: #d8e0e8; border-radius: 17px; background: #fff; box-shadow: none; }
.design-draft .offer-shell__purchase::before { background: linear-gradient(90deg, #4380f0, #f5ad75); }
.design-draft .offer-shell__prices strong { color: #194fae; }
.design-draft .offer-shell__price-label { color: #4a6095; }
.design-draft .offer-shell__details span { background: #eaf1ff; color: #355488; }
.offer-plan-link { display: block; margin: 0 0 16px; color: #2b5cb2; font-size: .85rem; font-weight: 800; text-decoration: none; }
.offer-plan-link:hover { text-decoration: underline; }
.design-draft .footer { background: #f8fafc; border-color: #e2e8ee; }
.design-draft .whatsapp-float { width: 56px; height: 56px; min-height: 0; justify-content: center; padding: 10px; background: #21a35d; }
.design-draft .whatsapp-float span { display: none; }

/* Two access periods, one shared set of features. */
.pricing-draft { min-height: 100vh; background: #fff; }
.pricing-top { padding-bottom: 68px; background: radial-gradient(circle at 8% 80%, #f6d6c3a8, transparent 33%), radial-gradient(circle at 89% 72%, #d7d5ffbf, transparent 43%), #fff; }
.pricing-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(1180px, calc(100% - 48px)); margin: auto; padding: 13px 0; border-bottom: 1px solid #e9e9e6; }
.pricing-header a { color: #334954; font-size: .87rem; font-weight: 700; text-decoration: none; }
.pricing-header a:hover { color: var(--draft-blue); }
.pricing-brand { display: flex; align-items: center; height: 58px; overflow: hidden; }
.pricing-brand img { display: block; width: auto; height: 72px; max-width: none; filter: brightness(0); }
.pricing-nav { display: flex; align-items: center; gap: 26px; }
.pricing-header .pricing-nav__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 12px; background: var(--draft-blue); color: #fff; font-size: .86rem; font-weight: 800; box-shadow: 0 10px 20px #245ac029; }
.pricing-header .pricing-nav__cta:hover { background: var(--draft-blue-dark); color: #fff; }
.pricing-intro { max-width: 1160px; margin: auto; padding: clamp(48px, 4.5vw, 64px) 20px 47px; text-align: center; }
.pricing-intro h1 { margin: 0 auto 17px; color: var(--draft-ink); font-family: var(--draft-font-display); font-size: clamp(3rem, 4vw, 3.85rem); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; text-shadow: none; }
.pricing-intro h1 strong, .pricing-intro h1 span { display: block; }
.pricing-intro h1 strong { font-size: 1.12em; font-weight: 700; }
.pricing-intro > p:last-child { max-width: 680px; margin: auto; color: var(--draft-muted); font-size: var(--draft-intro-size); line-height: 1.6; }
.pricing-intro .hero-social-proof { margin: 0 0 22px; }
.pricing-main { width: 100%; margin: 0; padding: 0 0 100px; }
.pricing-plans { width: min(1000px, calc(100% - 40px)); margin: auto; }
.pricing-plans-label { margin: 0 0 22px; color: var(--draft-violet); font-size: var(--draft-label-size); font-weight: 850; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.pricing-eyebrow { display: inline-block; padding: 8px 12px; border: 1px solid #d6e2f3; border-radius: 99px; background: #f3f7ff; color: #345cab; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.pricing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pricing-card { display: flex; flex-direction: column; min-width: 0; padding: 36px; border: 1px solid #dce5ee; border-radius: 22px; background: #fff; box-shadow: 0 14px 42px #1b3b5f0c; }
.pricing-card--monthly { border-top: 5px solid var(--draft-orange); }
.pricing-card--featured { border: 2px solid var(--draft-violet); border-top-width: 5px; box-shadow: 0 17px 48px #744fb421; }
.pricing-label { color: #6840b2; font-size: var(--draft-label-size); font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.pricing-card--monthly .pricing-label { color: #a34e20; }
.pricing-card h2 { margin: 15px 0 9px; font-family: var(--draft-font-display); font-size: clamp(2.15rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
.pricing-card > p { margin: 0; color: var(--draft-muted); font-size: 1rem; line-height: 1.55; }
.pricing-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 29px 0 14px; color: var(--draft-ink); }
.pricing-number strong { font-size: clamp(3rem, 4vw, 3.7rem); letter-spacing: -.05em; line-height: 1; }
.pricing-number span { color: var(--draft-muted); font-size: 1rem; font-weight: 650; }
.pricing-number del { color: #84909b; font-size: 1.3rem; }
.pricing-card .pricing-card__term { min-height: 51px; margin: 0 0 23px; color: var(--draft-muted); font-size: .95rem; }
.pricing-card .draft-button { width: 100%; min-height: 52px; margin-top: auto; background: var(--draft-blue); font-size: 1rem; border-radius: 12px; }
.pricing-card .draft-button:hover { background: var(--draft-blue-dark); }
.pricing-card .draft-button--outline { border: 1px solid var(--draft-blue); background: #fff; color: var(--draft-blue-dark); }
.pricing-card .draft-button--outline:hover { background: var(--draft-blue-soft); }
.pricing-disclaimer { max-width: 740px; margin: 29px auto 0; color: #5d6e78; font-size: .85rem; line-height: 1.55; text-align: center; }
.pricing-benefits { width: min(1000px, calc(100% - 40px)); margin: 96px auto 0; text-align: center; }
.pricing-benefits h2 { max-width: 700px; margin: 15px auto 32px; font-family: var(--draft-font-display); font-size: var(--draft-heading-size); font-weight: 400; line-height: 1.16; letter-spacing: -.025em; }
.pricing-benefits__intro { margin: -15px 0 31px; color: var(--draft-muted); font-size: .9rem; }
.pricing-benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; }
.pricing-benefits-grid a { display: flex; align-items: flex-start; gap: 16px; min-height: 94px; padding: 22px; border: 1px solid #eef0f6; border-radius: 17px; background: #f7f8fa; color: #202e3d; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.pricing-benefits-grid a:hover { transform: translateY(-3px); border-color: #b395f0; }
.pricing-benefits-grid > a > span:first-child { display: grid; flex: none; width: 34px; height: 34px; place-items: center; color: var(--draft-violet); font-size: 1.65rem; line-height: 1; }
.pricing-benefits-grid > a > span:last-child { display: grid; gap: 5px; }
.pricing-benefits-grid strong { font-size: .98rem; line-height: 1.35; }
.pricing-benefits-grid small { color: #66747e; font-size: .8rem; line-height: 1.5; }
.pricing-proof { width: min(1000px, calc(100% - 40px)); margin: 93px auto 0; }
.pricing-proof h2 { margin: 0 0 30px; font-family: var(--draft-font-display); font-size: var(--draft-heading-size); font-weight: 400; text-align: center; }
.pricing-proof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pricing-proof blockquote { display: flex; flex-direction: column; min-height: 198px; margin: 0; padding: 27px; border: 1px solid #dfe3ef; border-radius: 19px; background: #f8f8fb; }
.pricing-proof blockquote p { margin: 0 0 23px; color: #233647; font-size: 1rem; font-weight: 650; line-height: 1.6; }
.pricing-proof blockquote footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: auto; color: var(--draft-muted); font-size: .77rem; }
.pricing-proof blockquote a { color: var(--draft-blue-dark); font-weight: 750; text-decoration: none; }
.pricing-proof blockquote a:hover { text-decoration: underline; }
.pricing-faq { width: min(820px, calc(100% - 40px)); margin: 78px auto 0; }
.pricing-faq h2 { margin: 0 0 26px; font-family: 'PT Serif', Georgia, serif; font-size: 3rem; font-weight: 400; text-align: center; }
.pricing-faq details { padding: 20px 4px; border-bottom: 1px solid #dbe3eb; }
.pricing-faq summary { cursor: pointer; color: #213848; font-weight: 800; }
.pricing-faq details p { max-width: 690px; margin: 12px 0 0; color: var(--draft-muted); font-size: .9rem; line-height: 1.6; }
.pricing-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 31px max(24px, calc((100% - 1180px) / 2)); border-top: 1px solid var(--draft-line); color: var(--draft-muted); font-size: .8rem; }
.pricing-footer div { display: flex; flex-wrap: wrap; gap: 18px; }
.pricing-footer a { color: #315bb0; font-weight: 700; text-decoration: none; }
.pricing-footer a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .beyond-grid { grid-template-columns: 1fr; }
  .pricing-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .draft-banner { padding-inline: 17px; font-size: .66rem; }
  .design-draft .velorah-hero__nav { padding: 11px 18px; }
  .design-draft .velorah-hero__logo img { height: 63px !important; }
  .design-draft .velorah-hero__nav-pill .velorah-hero__nav-link { display: none; }
  .draft-mobile-menu { display: block; position: relative; }
  .draft-mobile-menu summary { list-style: none; cursor: pointer; padding: 9px 8px; color: #16384d; font-size: .75rem; font-weight: 700; }
  .draft-mobile-menu summary::-webkit-details-marker { display: none; }
  .draft-mobile-menu__links { position: absolute; z-index: 20; top: calc(100% + 12px); right: -100px; width: 190px; padding: 8px; border: 1px solid #dce5ea; border-radius: 14px; background: #fff; box-shadow: 0 15px 35px #12334a24; }
  .draft-mobile-menu__links a { display: block; padding: 10px 12px; color: #17384b; text-decoration: none; font-size: .8rem; font-weight: 650; }
  .draft-mobile-menu__links a:hover, .draft-mobile-menu__links a:focus-visible { border-radius: 8px; background: #eff5ff; }
  .design-draft .velorah-hero__nav-btn { padding: 10px 12px; font-size: .75rem; }
  .design-draft .velorah-hero__content { padding: 70px 20px 78px; }
  .design-draft .velorah-hero__h1 { font-size: clamp(3.4rem, 12vw, 4.8rem); }
  .design-draft .velorah-hero__subtext { margin-top: 21px; font-size: .97rem; }
  .design-draft .velorah-hero__actions { flex-direction: column; width: 100%; }
  .design-draft .velorah-hero__cta { width: min(100%, 330px); }
  .design-draft .chapter-loop { padding: 78px 18px; }
  .design-draft .chapter-loop__intro h2 { font-size: clamp(2.8rem, 9vw, 3.6rem); }
  .design-draft .chapter-loop__visuals { grid-template-columns: 1fr; }
  .design-draft .question-mix { grid-template-columns: 1fr; }
  .design-draft .journey-section, .design-draft .support-section { padding: 75px 18px; }
  .design-draft .journey-copy h2, .design-draft .support-heading h2 { font-size: clamp(2.7rem, 9vw, 3.7rem); }
  .design-draft .screen-pair figure, .design-draft .wellness-screens figure { flex-basis: min(72vw, 300px); width: min(72vw, 300px); }
  .beyond-section { padding: 75px 18px; }
  .beyond-intro h2 { font-size: clamp(2.7rem, 9vw, 3.7rem); }
  .beyond-card { padding: 22px; }
  .beyond-card--duel { grid-template-columns: 1fr; }
  .duel-visual { width: min(100%, 300px); margin: 5px auto 0; transform: rotate(0); }
  .pricing-header { width: calc(100% - 36px); padding: 9px 0; }
  .pricing-brand img { height: 63px; }
  .pricing-nav { gap: 13px; }
  .pricing-nav > a:not(.pricing-nav__cta) { display: none; }
  .pricing-nav .draft-mobile-menu { display: block; }
  .pricing-nav .draft-mobile-menu__links { right: -100px; }
  .pricing-header .pricing-nav__cta { padding: 9px 12px; font-size: .75rem; }
  .pricing-top { padding-bottom: 56px; }
  .pricing-intro { padding: 58px 18px 45px; }
  .pricing-plans { width: calc(100% - 36px); }
  .pricing-cards { grid-template-columns: 1fr; }
  .pricing-card { padding: 25px; }
  .pricing-intro h1 { font-size: clamp(2.45rem, 9.2vw, 3.3rem); line-height: 1.15; }
  .pricing-intro > p:last-child { font-size: .96rem; }
  .pricing-benefits h2, .pricing-proof h2, .pricing-faq h2 { font-size: var(--draft-heading-size-mobile); }
  .pricing-benefits { margin-top: 74px; }
  .pricing-benefits-grid { grid-template-columns: 1fr; }
  .pricing-benefits-grid a { min-height: 0; }
  .pricing-proof { margin-top: 75px; }
  .pricing-proof__grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .draft-banner a { font-size: .6rem; }
}
@media (max-width: 380px) {
  .pricing-header { gap: 8px; }
  .pricing-brand img { height: 54px; }
  .pricing-nav { gap: 6px; }
  .pricing-header .pricing-nav__cta { padding: 8px 9px; font-size: .69rem; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  .design-draft .liquid-glass-btn:hover { transform: none; }
}

/* One visual system from the opening promise through the final action. */
body.design-draft { background: #fff; color: var(--draft-ink); }
.design-draft .velorah-hero__content { padding: 64px 24px 42px; }
.hero-social-proof { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 15px; color: #30353c; font-size: .91rem; font-weight: 650; }
.hero-social-proof > span { color: var(--draft-yellow); font-size: 1.55rem; line-height: 1; }
.hero-social-proof__stars { letter-spacing: .08em; white-space: nowrap; }
.hero-social-proof small { color: #706b78; font-size: var(--draft-label-size); font-weight: 700; }
.design-draft .velorah-hero__eyebrow { margin-bottom: 13px; background: transparent; border: 0; color: #8656d8; font-size: .72rem; }
.design-draft .velorah-hero__h1 { max-width: 1030px; font-family: 'PT Serif', Georgia, serif; font-size: clamp(3rem, 4.4vw, 4.35rem); font-weight: 400; line-height: 1.14; letter-spacing: -.025em; }
.design-draft .velorah-hero__h1 em { color: var(--draft-ink); font-style: normal; }
.design-draft .velorah-hero__h1 strong { font-weight: 700; }
.design-draft .velorah-hero__subtext { max-width: 710px; margin-top: 23px; color: #656b72; font-size: 1.13rem; font-weight: 400; line-height: 1.58; }
.design-draft .hero-coach-line { max-width: 1000px; margin-top: 22px; color: #414b54; font-size: 1.04rem; font-weight: 500; line-height: 1.6; }
.hero-coach-line sup { margin-left: 1px; font-size: .65em; }
.hero-coach-line strong { color: var(--draft-blue-dark); font-weight: 800; text-decoration: underline; text-decoration-color: #d9e6ff; text-decoration-thickness: 4px; text-underline-offset: 3px; }
.design-draft .velorah-hero__actions { margin-top: 28px; }
.design-draft .velorah-hero__cta { min-width: 265px; }
.design-draft .velorah-hero__secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 200px; min-height: 54px; padding: 14px 24px; border: 1px solid var(--draft-blue); border-radius: 12px; color: var(--draft-blue-dark); font-size: 1rem; font-weight: 800; text-decoration: none; }
.design-draft .velorah-hero__secondary:hover { background: #f1f5ff; text-decoration: none; }
.hero-built-by { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; color: #727b84; font-size: .78rem; line-height: 1; }
.hero-built-by img { display: block; width: 90px; height: 54px; object-fit: cover; object-position: center 60%; opacity: .78; }
.hero-walkthrough { padding: 0 24px 72px; background: transparent; }
.hero-walkthrough__frame { position: relative; width: min(770px, 100%); aspect-ratio: 16 / 9; margin: auto; border: 6px solid #d4cde9; border-radius: 24px; background: #1d2631; box-shadow: 0 20px 52px #47426b26; overflow: hidden; }
.hero-walkthrough__poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #1d2631; color: #fff; font-family: inherit; cursor: pointer; }
.hero-walkthrough__poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-walkthrough__player { display: block; width: 100%; height: 100%; border: 0; background: #111; }
.hero-walkthrough__fallback { display: block; width: fit-content; margin: 12px auto 0; color: #2d59aa; font-size: .78rem; font-weight: 650; text-underline-offset: 3px; }
.hero-walkthrough__fallback[hidden] { display: none; }
.hero-walkthrough__shade { position: absolute; inset: 0; background: linear-gradient(0deg, #121726c9, transparent 48%); }
.hero-walkthrough__play { position: absolute; top: 50%; left: 50%; display: grid; width: 72px; height: 72px; place-items: center; padding-left: 4px; border-radius: 50%; background: #fff; color: #2875ed; font-size: 1.9rem; box-shadow: 0 9px 30px #111a3852; transform: translate(-50%, -50%); transition: transform .2s ease; }
.hero-walkthrough__poster:hover .hero-walkthrough__play { transform: translate(-50%, -50%) scale(1.08); }
.hero-walkthrough__caption { position: absolute; right: 24px; bottom: 22px; left: 24px; color: #fff; font-size: 1.08rem; font-weight: 800; text-align: left; }
.hero-walkthrough__caption span { float: right; }
.college-strip { padding: 40px 0 37px; background: #fff; overflow: hidden; }
.college-strip h2 { margin: 0 18px 28px; color: var(--draft-muted); font-family: var(--draft-font-ui); font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center; }
.college-strip__viewport { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.college-strip__track { --college-gap: clamp(42px, 6vw, 94px); --half-college-gap: clamp(21px, 3vw, 47px); display: flex; align-items: center; gap: var(--college-gap); width: max-content; animation: college-strip-scroll 36s linear infinite; }
.college-strip__viewport:hover .college-strip__track { animation-play-state: paused; }
.college-strip__group { display: flex; flex: 0 0 auto; align-items: center; gap: var(--college-gap); }
.college-strip__item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; min-height: 65px; color: #344252; }
.college-strip__item img { display: block; width: auto; max-width: 82px; height: 52px; object-fit: contain; }
.college-strip__item strong { font-size: .92rem; font-weight: 700; white-space: nowrap; }
@keyframes college-strip-scroll { to { transform: translateX(calc(-50% - var(--half-college-gap))); } }
@media (prefers-reduced-motion: reduce) {
  .college-strip__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .college-strip__track { animation: none; }
  .college-strip__group[aria-hidden="true"] { display: none; }
}
.draft-activity { padding: 25px 24px; background: #f8f8fa; }
.draft-activity__inner { width: min(1130px, 100%); margin: auto; text-align: center; }
.draft-activity p { margin: 0; color: #30343a; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 2.7; }
.draft-activity strong { font-weight: 400; white-space: nowrap; }
.draft-activity b { display: inline-block; margin: 0 4px; padding: 4px 10px; border: 1px solid #e1d5f4; border-radius: 10px; background: #fff; color: #8b56e5; font-weight: 800; box-shadow: 0 3px 8px #6550a216; transform: rotate(-1deg); }
.draft-activity small { display: block; margin-top: 6px; color: #7d8088; font-size: .7rem; }
.design-draft .chapter-loop { padding-top: 93px; background: #fff; }
.design-draft .chapter-loop__visuals { display: block; }
.design-draft .chapter-tree { max-width: 1070px; margin: auto; }
.chapter-tree__scope { display: block; width: 30px; height: 30px; margin: 0 auto 6px; color: #7557cb; }
.design-draft .chapter-tree__root { background: #f2efff; border-color: #9a80db; }
.design-draft .question-mix { margin-top: 20px; background: #fbfbff; }
.design-draft .chapter-loop h2, .design-draft .journey-copy h2, .design-draft .support-heading h2, .design-draft .testimonials__header h2, .design-draft .beyond-intro h2 { font-family: var(--draft-font-display); font-size: var(--draft-heading-size); font-weight: 400; line-height: 1.16; letter-spacing: -.025em; }
.design-draft .journey-section { background: #fff; }
.design-draft .demo-section { background: #f7f8fc; }
.design-draft .support-section { background: #fff; }
.design-draft .wellness-section { background: #f6faf9; }
.design-draft .extras-section { background: #fff; }
.design-draft .extras-shell { display: block; max-width: 960px; }
.design-draft .extras-community { grid-template-columns: minmax(0, 1fr) 180px; background: #f7fbfb; }
.design-draft .beyond-section { background: #fff; }
.design-draft .testimonials { background: #f8f8fb; }
.design-draft .section-eyebrow { color: var(--draft-violet); font-size: var(--draft-label-size); letter-spacing: .13em; }
.design-draft .problem-solution:not(.problem-solution--answer) { border-color: #dfe3eb; border-left-color: #9161e5; background: #fbfaff; }
.design-draft .problem-solution--answer { border-color: #d7e3f5; border-left-color: #3875dc; background: #f5f9ff; }
.design-draft .offer-shell { background: radial-gradient(circle at 85% 10%, #6a58b5, transparent 43%), #202b48; }
.pricing-intro h1, .pricing-card h2, .pricing-benefits h2, .pricing-faq h2 { font-family: 'PT Serif', Georgia, serif; }

@media (max-width: 760px) {
  .draft-banner { align-items: flex-start; line-height: 1.35; }
  .draft-banner span { max-width: 245px; }
  .design-draft .velorah-hero__content { padding: 58px 18px 30px; }
  .hero-social-proof { flex-wrap: wrap; font-size: .75rem; }
  .design-draft .velorah-hero__h1 { font-size: clamp(2.45rem, 9.2vw, 3.3rem); line-height: 1.18; }
  .design-draft .velorah-hero__subtext { font-size: .96rem; }
  .design-draft .hero-coach-line { max-width: 360px; margin-top: 19px; font-size: .94rem; }
  .design-draft .velorah-hero__secondary { width: min(360px, 100%); }
  .hero-built-by { margin-top: 14px; }
  .hero-walkthrough { padding: 0 16px 49px; }
  .hero-walkthrough__frame { border-width: 4px; border-radius: 15px; }
  .hero-walkthrough__play { width: 53px; height: 53px; font-size: 1.4rem; }
  .hero-walkthrough__caption { right: 13px; bottom: 11px; left: 13px; font-size: .72rem; }
  .college-strip { padding: 33px 0 28px; }
  .college-strip h2 { margin-bottom: 19px; font-size: .96rem; }
  .college-strip__track { animation-duration: 31s; }
  .college-strip__item { gap: 8px; min-height: 57px; }
  .college-strip__item img { max-width: 66px; height: 43px; }
  .college-strip__item strong { font-size: .8rem; }
  .draft-activity { padding: 22px 17px; }
  .draft-activity p { font-size: .92rem; line-height: 2.35; }
  .draft-activity strong { white-space: normal; }
  .draft-activity b { padding: 3px 7px; }
  .design-draft .chapter-loop h2, .design-draft .journey-copy h2, .design-draft .support-heading h2, .design-draft .testimonials__header h2, .design-draft .beyond-intro h2 { font-size: var(--draft-heading-size-mobile); }
  .design-draft .extras-community { grid-template-columns: 1fr; }
  .design-draft .extras-community img { margin: auto; }
}

/* Clear journey variant: one interaction area instead of repeated phone sections. */
.design-draft .draft-activity--facts { background: #f6f6fa; }
.draft-activity--facts p { line-height: 2.35; }
.draft-activity--facts b { transform: rotate(0); }
.journey-feature { padding: 92px 24px 105px; background: #f7f8fc; }
.journey-feature__shell { width: min(1140px, 100%); margin: auto; }
.journey-feature__heading { max-width: 870px; margin: 0 auto 46px; text-align: center; }
.journey-feature__heading h2 { margin: 10px 0 17px; font-family: var(--draft-font-display); font-size: var(--draft-heading-size); font-weight: 400; line-height: 1.16; letter-spacing: -.025em; }
.journey-feature__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: 'copy visual' 'action visual'; align-items: start; column-gap: clamp(35px, 6vw, 88px); row-gap: 20px; }
.journey-feature__copy { grid-area: copy; min-width: 0; }
.journey-feature__steps { border-top: 1px solid #d9dfe8; }
.journey-feature__step { display: block; width: 100%; padding: 19px 3px 20px; border: 0; border-bottom: 1px solid #d9dfe8; background: transparent; color: #66717d; font: inherit; text-align: left; cursor: pointer; }
.journey-feature__step-top { display: grid; grid-template-columns: 35px minmax(0, 1fr) 18px; align-items: center; gap: 10px; }
.journey-feature__step-top > span:first-child { color: #885dd5; font-size: .73rem; font-weight: 800; }
.journey-feature__step-top strong { color: inherit; font-size: clamp(1.15rem, 1.65vw, 1.48rem); font-weight: 750; line-height: 1.3; }
.journey-feature__step-top > span:last-child { font-size: 1.1rem; text-align: center; }
.journey-feature__step-detail { display: none; max-width: 440px; margin: 12px 27px 0 45px; color: #546271; font-size: .91rem; line-height: 1.55; }
.journey-feature__step.is-active { color: #263746; }
.journey-feature__step.is-active .journey-feature__step-detail { display: block; }
.journey-feature__step.is-active .journey-feature__step-top > span:last-child { transform: rotate(180deg); }
.journey-feature__step.is-active::after { display: block; width: 23%; height: 2px; margin-top: 15px; background: #865fdd; content: ''; }
.journey-feature__step:focus-visible, .journey-feature__mobile-nav button:focus-visible, .journey-feature__phone-frame button:focus-visible, .journey-feature__phone-frame [role='button']:focus-visible { outline: 3px solid #7092e9; outline-offset: 2px; }
.journey-feature__mobile-current, .journey-feature__mobile-nav { display: none; }

/* Chapter journey: six readable cards, with motion added only as they enter view. */
.design-draft .chapter-journey {
  width: min(1070px, 100%);
  margin: auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #dfe4ec;
  border-radius: 30px;
  background: radial-gradient(circle at 94% 11%, #f3efff 0, transparent 34%),
    radial-gradient(circle at 7% 88%, #fff3e9 0, transparent 30%), #fff;
  box-shadow: 0 18px 50px #23364d0c;
}
.design-draft .chapter-loop__intro h2 span { display: block; }
.chapter-journey__chapter {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: min(350px, 100%);
  margin: 0 auto 28px;
  padding: 16px 24px;
  border: 1px solid #dfd4fa;
  border-radius: 17px;
  background: #faf8ff;
  text-align: center;
}
.chapter-journey__chapter span,
.chapter-journey__chapter small {
  color: #6b5c91;
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.chapter-journey__chapter strong {
  color: #25343d;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
}
.chapter-journey__chapter small { color: #7b4fbd; }
.chapter-journey__types-intro { margin: 0 0 9px; color: #657386; font-size: .86rem; line-height: 1.5; text-align: center; }
.chapter-journey__map { position: relative; width: 100%; }
.chapter-journey__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.chapter-journey__route path { fill: none; stroke: #e5dbf6; stroke-width: 4; stroke-linecap: round; }
.chapter-journey__route .chapter-journey__route-active {
  stroke: #9b77e4;
  stroke-width: 5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .65s ease;
}
.chapter-journey.is-motion-ready .chapter-journey__route-active { stroke-dashoffset: 100; }
.chapter-journey__steps { position: relative; margin: 0; padding: 0; list-style: none; }
.chapter-journey__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  min-height: 180px;
}
.chapter-journey__step::before {
  position: absolute;
  top: 50%;
  left: calc(50% - 48px);
  width: 48px;
  height: 2px;
  background: #d9c8f3;
  content: '';
  transform-origin: right center;
}
.chapter-journey__step:nth-child(even)::before { left: 50%; transform-origin: left center; }
.chapter-journey__step::after {
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 3px solid #8e63dc;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  content: '';
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.chapter-journey__step--start::after { border-color: #e9894d; background: #e9894d; }
.chapter-journey__card {
  grid-column: 1;
  display: grid;
  align-content: center;
  min-height: 126px;
  padding: 19px 22px;
  border: 1px solid #dce3ec;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 25px #25374c0d;
  transition: opacity .38s ease, transform .38s ease, border-color .3s ease;
}
.chapter-journey__step:nth-child(even) .chapter-journey__card { grid-column: 3; }
.chapter-journey__step--start .chapter-journey__card { border-color: #efac7e; background: #fff6ef; }
.chapter-journey__step:nth-child(2) .chapter-journey__card { border-color: #bfa8ee; background: #fcfaff; }
.chapter-journey__card-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 23px; }
.chapter-journey__card-top span { color: #82909e; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.chapter-journey__card-top b { padding: 5px 8px; border-radius: 7px; background: #ffe1cc; color: #994d1f; font-size: .63rem; text-transform: uppercase; }
.chapter-journey__card > strong { margin-top: 4px; color: #243641; font-family: 'PT Serif', Georgia, serif; font-size: 1.85rem; font-weight: 400; line-height: 1.2; }
.chapter-journey__step--start .chapter-journey__card > strong { color: #9c4d20; }
.chapter-journey__card p { margin: 3px 0 0; color: #697888; font-size: .9rem; line-height: 1.4; }
.chapter-journey__after {
  grid-column: 3;
  padding: 17px 19px;
  border-left: 4px solid #6383df;
  border-radius: 10px;
  background: #f0f4ff;
  box-shadow: 0 8px 23px #34466c0a;
  transition: opacity .38s ease .08s, transform .38s ease .08s;
}
.chapter-journey__after span { color: #4262ad; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chapter-journey__after p { margin: 7px 0 0; color: #344b68; font-size: .85rem; line-height: 1.5; }
.chapter-journey__type { grid-column: 3; grid-row: 1; justify-self: center; display: grid; align-content: center; gap: 6px; width: min(82%, 300px); min-height: 86px; margin: 0; padding: 13px 16px; border: 1px solid #dfd4f4; border-left: 3px solid #a887e8; border-radius: 12px; background: #f8f5ff; color: #4e3d72; box-shadow: 0 7px 18px #64478a0d; font-size: .96rem; font-weight: 700; line-height: 1.35; transition: opacity .38s ease .08s, transform .38s ease .08s; }
.chapter-journey__type::before { content: 'In the mix'; color: #6840b2; font-size: var(--draft-label-size); font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.chapter-journey__step:nth-child(even) .chapter-journey__type { grid-column: 1; }
.chapter-journey__next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 12px 16px;
  border-radius: 9px;
  color: #315dc0;
  font-size: .87rem;
  font-weight: 800;
  text-decoration: none;
}
.chapter-journey__next:hover { background: #f0f4ff; }
.chapter-journey__next:focus-visible { outline: 3px solid #6383df; outline-offset: 3px; }
.chapter-journey.is-motion-ready .chapter-journey__step:not(.is-visible) .chapter-journey__card,
.chapter-journey.is-motion-ready .chapter-journey__step:not(.is-visible) .chapter-journey__after,
.chapter-journey.is-motion-ready .chapter-journey__step:not(.is-visible) .chapter-journey__type { opacity: 0; transform: translateY(18px); }
.chapter-journey.is-motion-ready .chapter-journey__step:not(.is-visible)::after { background: #fff; transform: scale(.8); }

@media (max-width: 760px) {
  .design-draft .chapter-journey { padding: 23px 16px 27px; border-radius: 20px; }
  .chapter-journey__chapter { margin-bottom: 28px; }
  .chapter-journey__route { display: none; }
  .chapter-journey__steps::before,
  .chapter-journey__steps::after {
    position: absolute;
    top: 55px;
    left: 17px;
    width: 3px;
    border-radius: 3px;
    content: '';
  }
  .chapter-journey__steps::before { bottom: 55px; background: #e5dbf6; }
  .chapter-journey__steps::after { height: var(--journey-mobile-fill, calc(100% - 110px)); background: #9b77e4; transition: height .55s ease; }
  .chapter-journey.is-motion-ready .chapter-journey__steps::after { height: var(--journey-mobile-fill, 0px); }
  .chapter-journey__step { display: block; min-height: 0; margin-bottom: 18px; padding-left: 45px; }
  .chapter-journey__step:last-child { margin-bottom: 0; }
  .chapter-journey__step::before,
  .chapter-journey__step:nth-child(even)::before { top: 54px; left: 18px; width: 27px; height: 2px; transform-origin: left center; }
  .chapter-journey__step::after { top: 45px; left: 9px; }
  .chapter-journey__card { min-height: 106px; padding: 16px 15px; }
  .chapter-journey__card > strong { font-size: 1.6rem; }
  .chapter-journey__card p { font-size: .83rem; }
  .chapter-journey__after { margin-top: 13px; padding: 14px 15px; }
  .chapter-journey__after p { font-size: .8rem; }
  .chapter-journey__type { width: auto; min-height: 0; margin: 13px 0 0 2px; padding: 10px 13px; font-size: .84rem; }
  .chapter-journey__next { margin-top: 20px; }
}
@media (max-width: 380px) {
  .chapter-journey__card { padding-inline: 12px; }
  .chapter-journey__card p { font-size: .79rem; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-journey__route-active,
  .chapter-journey__card,
  .chapter-journey__after,
  .chapter-journey__step::after,
  .chapter-journey__steps::after { transition: none !important; }
}
.journey-feature__action { grid-area: action; }
.journey-feature__cta { display: inline-flex; margin: 0 0 9px; background: #3069df; color: #fff; }
.journey-feature__action > small { display: block; color: #7b8490; font-size: .78rem; }
.journey-feature__visual { grid-area: visual; display: grid; place-items: center; min-width: 0; min-height: 674px; padding: 24px 18px; border: 1px solid #e8e1f1; border-radius: 34px; background: radial-gradient(circle at 65% 80%, #d8c9f7, transparent 60%), radial-gradient(circle at 15% 8%, #f6e7d8, transparent 50%), #f2f0fb; }
.journey-feature__phone-frame { width: 310px; height: 620px; padding: 5px; border-radius: 49px; background: linear-gradient(145deg, #4b83e5, #986bdc); box-shadow: 0 18px 48px #4e4b9f33, 0 0 25px #9b79e044; transition: box-shadow .24s ease; }
.journey-feature__phone-frame[data-stage-view='analysis'] { box-shadow: 0 18px 48px #4e4b9f33, 0 0 27px #7294ee55; }
.journey-feature__phone-frame .phone { width: 300px; height: 610px; max-width: none; aspect-ratio: auto; border: 4px solid #202b38; background: #202b38; border-radius: 44px; box-shadow: none; }
.journey-feature__phone-frame .app { transition: opacity .24s ease, transform .24s ease, visibility .24s ease; transform: translateY(10px); visibility: hidden; }
.journey-feature__phone-frame .app.is-active { transform: translateY(0); visibility: visible; }
.journey-feature__practice { padding: 66px 15px 26px; background: #f7faff; }
.journey-feature__practice .sample-phone__top { margin-bottom: 23px; }
.journey-feature__practice .sample-phone__progress { font-size: .66rem; }
.journey-feature__practice .sample-phone__meter { margin: 9px 0 20px; }
.journey-feature__practice h3 { min-height: 75px; margin: 0 0 18px; color: #112c40; font-size: 1.1rem; line-height: 1.35; }
.journey-feature__practice .sample-options { min-height: 193px; gap: 8px; }
.journey-feature__practice .sample-option { padding: 10px 12px; font-size: .82rem; }
.journey-feature__practice .sample-feedback { margin: 10px 0; min-height: 43px; }
.journey-feature__practice .sample-next { padding: 11px; }
.sample-replay { display: block; width: 100%; margin-top: 9px; padding: 9px 11px; border: 1px solid #aac1e9; border-radius: 10px; background: #fff; color: #315eb4; font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; }
.sample-replay[hidden], .sample-bridge[hidden] { display: none; }
.sample-bridge { padding: 10px 11px; border-radius: 10px; background: #eef3ff; color: #365682; font-size: .72rem; line-height: 1.45; }
.journey-example-label { margin: 5px 0 11px; color: #4771b5; font-size: .65rem; font-weight: 800; line-height: 1.35; }
.journey-phone-back { padding: 0 7px 0 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1.5rem; cursor: pointer; }
.journey-feature__phone-frame .tag-pill { font: inherit; font-size: .68rem; font-weight: 650; }
.journey-feature__phone-frame .results-tab-revision { border: 0; background: none; color: #4669a0; font: inherit; font-size: .73rem; cursor: pointer; }
.journey-results-jumps { display: flex; gap: 5px; margin: 10px 0; }
.journey-results-jumps button { flex: 1; padding: 5px 3px; border: 1px solid #cddcf3; border-radius: 7px; background: #f3f7ff; color: #3861a9; font: inherit; font-size: .65rem; font-weight: 700; cursor: pointer; }
.journey-result-note { margin: 2px 0 8px; color: #697886; font-size: .62rem; line-height: 1.4; }
.journey-revision-choice { width: 100%; font: inherit; text-align: left; }
.journey-feature__phone-frame .pulsing-target::after { animation: none; display: none; }
.journey-feature__phone-frame .notebook-static { cursor: default; }
.journey-feature__phone-frame .notebook-static:hover, .journey-feature__phone-frame .notebook-static:active { background: rgba(255,255,255,.9); transform: none; }
.journey-feature__phone-frame [data-notebook-next] { cursor: pointer; }
.journey-feature__phone-frame .notebook-detail-label { margin: 3px 0 0; color: #4669a0; font-size: .72rem; font-weight: 800; }

.draft-faq { padding: 94px 24px 100px; background: #fff; }
.draft-faq__shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 85px; width: min(1120px, 100%); margin: auto; }
.draft-faq__intro h2 { margin: 9px 0 18px; font-family: var(--draft-font-display); font-size: var(--draft-heading-size); font-weight: 400; line-height: 1.16; letter-spacing: -.025em; }
.draft-faq__items { border-top: 1px solid #e0e5ed; }
.draft-faq__items details { border-bottom: 1px solid #e0e5ed; }
.draft-faq__items summary { padding: 22px 8px 22px 0; color: #222a33; font-size: 1.05rem; font-weight: 750; cursor: pointer; }
.draft-faq__items details[open] summary { color: #315fc1; }
.draft-faq__items p { max-width: 620px; margin: 0 0 23px; color: #5c6670; line-height: 1.65; }

@media (max-width: 760px) {
  .journey-feature { padding: 69px 17px 75px; }
  .journey-feature__heading { margin-bottom: 28px; }
  .journey-feature__heading h2 { font-size: var(--draft-heading-size-mobile); }
  .journey-feature__grid { grid-template-columns: 1fr; grid-template-areas: 'copy' 'visual' 'controls' 'action'; gap: 17px; }
  .journey-feature__steps { display: none; }
  .journey-feature__mobile-current { display: grid; gap: 5px; margin: 0; padding: 0 3px; scroll-margin-top: 20px; }
  .journey-feature__mobile-current strong { color: #25364a; font-size: 1.18rem; }
  .journey-feature__mobile-current span { color: #667485; font-size: .86rem; line-height: 1.4; }
  .journey-feature__visual { min-height: 0; padding: 15px 6px; border-radius: 22px; }
  .journey-feature__phone-frame { width: min(310px, calc(100vw - 72px)); height: auto; aspect-ratio: 1 / 2; }
  .journey-feature__phone-frame .phone { width: 100%; height: 100%; }
  .journey-feature__mobile-nav { grid-area: controls; display: grid; gap: 12px; }
  .journey-feature__mobile-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.journey-feature__mobile-chips button { min-width: 0; min-height: 40px; padding: 8px 1px; border: 1px solid #dae1ee; border-radius: 9px; background: #fff; color: #435468; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
  .journey-feature__mobile-chips button.is-active { border-color: #8c6ad9; background: #f2edff; color: #59429c; }
  .journey-feature__mobile-arrows { display: flex; justify-content: space-between; gap: 10px; }
  .journey-feature__mobile-arrows button { padding: 9px 12px; border: 1px solid #d6dfed; border-radius: 9px; background: #fff; color: #315db0; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
  .journey-feature__mobile-arrows button:disabled { opacity: .45; cursor: default; }
  #journey-mobile-detail { margin: 0; color: #5f6c7c; font-size: .86rem; line-height: 1.55; }
  .journey-feature__action { text-align: center; }
  .journey-feature__cta { justify-content: center; width: 100%; }
  .draft-faq__shell { grid-template-columns: 1fr; gap: 25px; }
  .draft-faq { padding: 72px 18px 80px; }
  .draft-faq__intro h2 { font-size: var(--draft-heading-size-mobile); }
}
@media (max-width: 350px) {
  .journey-feature__mobile-chips button { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-feature__phone-frame, .journey-feature__phone-frame .app, .journey-feature__step, .journey-feature__practice .sample-phone__meter span { transition: none !important; }
}

/* Shiv and Wellness share one story and one consistent app preview. */
.design-draft .coach-section { padding: 92px 24px 48px; background: #fff; }
.coach-anchor { display: block; height: 0; }
.coach-shell { width: min(1130px, 100%); margin: 0 auto; }
.coach-intro { max-width: 800px; margin: 0 auto 43px; text-align: center; }
.coach-intro .section-eyebrow { margin: 0 0 12px; }
.design-draft .coach-intro h2 { margin: 0; font: 400 var(--draft-heading-size)/1.16 var(--draft-font-display); letter-spacing: -.025em; }
.coach-intro > p:last-child { max-width: 690px; margin: 17px auto 0; color: #52636d; font-size: 1.02rem; line-height: 1.6; }
.coach-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); align-items: start; gap: clamp(36px, 6vw, 92px); }
.coach-copy { min-width: 0; }
.coach-tabs { display: flex; gap: 28px; border-bottom: 1px solid #dbe1ea; }
.coach-tab { position: relative; padding: 15px 1px 17px; border: 0; background: none; color: #687481; font: inherit; font-size: 1.05rem; font-weight: 750; cursor: pointer; }
.coach-tab.is-active { color: #255bb7; }
.coach-tab.is-active::after { position: absolute; right: 0; bottom: -2px; left: 0; height: 3px; border-radius: 3px; background: #316be2; content: ''; }
.coach-panel { padding: 30px 0 8px; }
.coach-panel[hidden] { display: none; }
.coach-problem { margin: 0 0 23px; padding-left: 16px; border-left: 3px solid #f0a36a; color: #47515f; font-size: .96rem; line-height: 1.5; }
.coach-problem span { display: block; margin-bottom: 4px; color: #a7542f; font-size: var(--draft-label-size); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.design-draft .coach-panel h3 { max-width: 480px; margin: 0 0 12px; font: 400 clamp(1.9rem, 2.6vw, 2.65rem)/1.17 'PT Serif', Georgia, serif; letter-spacing: -.025em; }
.coach-panel > p:not(.coach-problem) { max-width: 510px; margin: 0; color: #52636d; font-size: .97rem; line-height: 1.67; }
.coach-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 0; }
.coach-tools span { padding: 7px 10px; border: 1px solid #dbe4f2; border-radius: 8px; background: #f6f9ff; color: #42618a; font-size: .75rem; font-weight: 700; }
.coach-screen-choices { display: flex; flex-wrap: wrap; gap: 7px; margin: 23px 0 0; }
.coach-screen-choices button { padding: 8px 11px; border: 1px solid #dce3ed; border-radius: 999px; background: #fff; color: #5b6876; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.coach-screen-choices button.is-active { border-color: #a8c2f7; background: #eaf1ff; color: #255bb7; }
.coach-tab:focus-visible, .coach-screen-choices button:focus-visible, .coach-cta:focus-visible { outline: 3px solid #83a5ed; outline-offset: 3px; }
.coach-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #265cc2; font-size: .95rem; font-weight: 800; text-decoration: none; }
.coach-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.coach-visual { min-width: 0; }
.coach-visual__stage { display: flex; align-items: center; justify-content: center; min-height: 655px; padding: 26px; border: 1px solid #dfe1f4; border-radius: 38px; background: radial-gradient(circle at 78% 13%, #fbe8d8, transparent 38%), radial-gradient(circle at 20% 86%, #d8d8ff, transparent 47%), #f6f5fd; }
.coach-phone { width: 310px; height: 620px; padding: 5px; overflow: hidden; border: 5px solid #243343; border-radius: 43px; background: #f3f7ff; box-shadow: 0 18px 38px #2b34592e, 0 0 0 5px #9474dd; }
.coach-phone__viewport { width: 100%; height: 100%; overflow: auto; border-radius: 33px; background: #f3f7ff; scrollbar-width: none; overscroll-behavior: contain; }
.coach-phone__viewport::-webkit-scrollbar { display: none; }
.coach-phone img { display: block; width: 100%; height: auto; max-width: none; border-radius: 0; }
.coach-community { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 28px; margin-top: 42px; padding-top: 26px; border-top: 1px solid #dbe1ea; }
.coach-community__copy .section-eyebrow { margin: 0 0 8px; }
.design-draft .coach-community h3 { margin: 0 0 8px; color: #1b2e3b; font-family: inherit; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 750; line-height: 1.25; letter-spacing: -.025em; }
.coach-community__copy > p:not(.section-eyebrow) { max-width: 680px; margin: 0; color: #52636d; font-size: .94rem; line-height: 1.55; }
.coach-community__copy > a { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; color: #265cc2; font-size: .9rem; font-weight: 800; text-decoration: none; }
.coach-community__copy > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.coach-community__copy > a:focus-visible { outline: 3px solid #83a5ed; outline-offset: 3px; }
.coach-community__preview { width: 112px; height: 148px; overflow: hidden; border: 3px solid #243343; border-radius: 18px; box-shadow: 0 9px 20px #2b345920; }
.coach-community__preview img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .coach-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, .85fr); gap: 28px; }
  .coach-visual__stage { min-height: 600px; padding: 20px; }
  .coach-phone { width: 286px; height: 572px; }
}
@media (max-width: 760px) {
  .design-draft .coach-section { padding: 73px 18px 52px; }
  .coach-intro { margin-bottom: 27px; text-align: left; }
  .design-draft .coach-intro h2 { font-size: var(--draft-heading-size-mobile); }
  .coach-intro > p:last-child { margin-top: 14px; font-size: .94rem; }
  .coach-layout { grid-template-columns: 1fr; gap: 24px; }
  .coach-panel { min-height: 0; padding: 24px 0 0; }
  .coach-problem { margin-bottom: 20px; }
  .coach-visual__stage { min-height: 0; padding: 24px 12px; border-radius: 27px; }
  .coach-phone { width: min(286px, calc(100vw - 82px)); height: auto; aspect-ratio: 1 / 2; }
  .coach-community { margin-top: 33px; padding-top: 24px; }
}
@media (max-width: 560px) {
  .coach-community { display: block; }
  .coach-community__preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coach-phone img { animation: none !important; }
}

/* One place for the community action and real student feedback. */
.design-draft .community-section { padding: 94px 24px 96px; background: #fff; }
.community-section .testimonials__container { width: min(1200px, 100%); }
.community-section .testimonials__header { align-items: end; margin-bottom: 30px; }
.community-section .testimonials__header h2 { max-width: 840px; margin-bottom: 16px; font: 400 var(--draft-heading-size)/1.16 var(--draft-font-display); letter-spacing: -.025em; }
.community-section .testimonials__header p:last-child { max-width: 730px; color: #52636d; font-size: 1.08rem; }
.community-section__cta { display: inline-flex; flex: none; align-items: center; gap: 12px; min-height: 49px; padding: 12px 18px; border: 1px solid #2d61cd; border-radius: 11px; color: #2457ba; font-size: .88rem; font-weight: 800; text-decoration: none; }
.community-section__cta:hover { background: #edf3ff; }
.community-section__cta:focus-visible { outline: 3px solid #8caaf1; outline-offset: 3px; }
.community-section__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: start; gap: clamp(28px, 5vw, 74px); }
.community-section__map-column { min-width: 0; }
.community-section__visual { width: min(100%, 620px); overflow: hidden; border: 1px solid #e0e8f2; border-radius: 25px; background: #fff; box-shadow: 0 18px 42px #283b5910; }
.community-section__map { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #fff; }
.community-section__map > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.community-section__marker { position: absolute; display: block; width: clamp(38px, 4vw, 54px); aspect-ratio: 1; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 4px 13px #23333d3d; transform: translate(-50%, -50%); }
.community-section__marker img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-section__marker--one { top: 25%; left: 34%; --marker-bg: #ffe4bc; --marker-ink: #a65429; }
.community-section__marker--two { top: 33%; left: 43%; --marker-bg: #def0ff; --marker-ink: #3967a8; }
.community-section__marker--three { top: 44%; left: 22%; --marker-bg: #f7dce9; --marker-ink: #a63c73; }
.community-section__marker--four { top: 46%; left: 48%; --marker-bg: #dfefdf; --marker-ink: #3b7e59; }
.community-section__marker--five { top: 52%; left: 85%; --marker-bg: #fff1cf; --marker-ink: #9b6c1f; }
.community-section__marker--six { top: 60%; left: 38%; --marker-bg: #e9dfff; --marker-ink: #7047aa; }
.community-section__marker--seven { top: 65%; left: 64%; --marker-bg: #def0ff; --marker-ink: #3967a8; }
.community-section__marker--eight { top: 76%; left: 37%; --marker-bg: #f7dce9; --marker-ink: #a63c73; }
.community-section__marker--nine { top: 88%; left: 43%; --marker-bg: #ffe4bc; --marker-ink: #a65429; }
.community-section__app-note { display: grid; grid-template-columns: minmax(0, 1fr) 195px; align-items: center; gap: 20px; min-height: 340px; padding: 18px 24px 0 28px; overflow: hidden; border-top: 1px solid #e0e8f2; background: linear-gradient(125deg, #f5f8ff, #f8f4ff); }
.community-section__app-note img { display: block; width: 195px; height: 355px; align-self: end; object-fit: cover; object-position: top; border: 6px solid #263546; border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 9px 24px #15283f2c; }
.community-section__app-copy { display: grid; gap: 11px; align-content: center; padding-bottom: 20px; }
.community-section__app-copy .section-eyebrow { margin: 0; color: #8057d3; font-size: var(--draft-label-size); letter-spacing: .13em; }
.community-section__app-copy strong { color: #233543; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.18; }
.community-section__app-copy > span:last-child { color: #52636d; font-size: .93rem; line-height: 1.5; }
.community-section__feedback { min-width: 0; }
.community-section__feedback-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 4px 0 16px; }
.community-section__feedback-heading .section-eyebrow { margin: 0 0 7px; font-size: var(--draft-label-size); }
.community-section__feedback-heading h3 { margin: 0; color: #233543; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.22; }
.community-section .testimonials__controls { gap: 7px; }
.community-section .testimonials__arrow { width: 36px; height: 36px; border-color: #d5dfe7; color: #3e5563; font-size: 1.08rem; }
.community-section .testimonials__rail { display: flex; flex-direction: column; gap: 13px; max-height: 626px; padding: 4px 7px 4px 4px; overflow: auto; scroll-snap-type: y mandatory; scroll-padding-block: 4px; }
.community-section .testimonial-card { flex: none; min-height: 205px; padding: 21px 23px; border: 1px solid #dfe6ea; border-left: 4px solid var(--review-accent, #a9c8ed); border-radius: 17px; background: #fbfcfe; box-shadow: 0 4px 16px #233c3310; scroll-snap-align: start; }
.community-section .testimonial-card--mint { --review-accent: var(--draft-blue); background: var(--draft-blue-soft); }
.community-section .testimonial-card--peach { --review-accent: var(--draft-orange); background: var(--draft-orange-soft); }
.community-section .testimonial-card--lilac { --review-accent: var(--draft-violet); background: var(--draft-violet-soft); }
.community-section .testimonial-card--sky { --review-accent: var(--draft-blue); background: var(--draft-blue-soft); }
.community-section .testimonial-card--cream { --review-accent: var(--draft-yellow); background: var(--draft-yellow-soft); }
.community-section .testimonial-card__topic { padding: 0; border: 0; border-radius: 0; color: #596b79; font-size: var(--draft-label-size); }
.community-section .testimonial-card blockquote { flex: none; margin: 14px 0 15px; color: #263c47; font-size: clamp(.97rem, 1.35vw, 1.08rem); font-weight: 650; line-height: 1.46; }
.community-section .testimonial-card__source { color: #536d79; font-size: var(--draft-label-size); }
@media (max-width: 900px) {
  .community-section__layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 24px; }
  .community-section .testimonials__rail { max-height: 540px; }
}
@media (max-width: 760px) {
  .design-draft .community-section { padding: 75px 18px 80px; }
  .community-section .testimonials__header { align-items: start; gap: 19px; margin-bottom: 23px; }
  .community-section .testimonials__header h2 { font-size: var(--draft-heading-size-mobile); }
  .community-section .testimonials__header p:last-child { font-size: .95rem; }
  .community-section__layout { grid-template-columns: 1fr; gap: 28px; }
  .community-section__visual { margin: auto; }
  .community-section__marker { width: clamp(31px, 8vw, 42px); border-width: 2px; }
  .community-section__app-note { grid-template-columns: minmax(0, 1fr) 145px; gap: 10px; min-height: 265px; padding: 14px 13px 0 18px; }
  .community-section__app-note img { width: 145px; height: 264px; border-width: 5px; border-radius: 17px 17px 0 0; }
  .community-section__app-copy { gap: 8px; padding-bottom: 10px; }
  .community-section__app-copy strong { font-size: 1.18rem; }
  .community-section__app-copy > span:last-child { font-size: .78rem; }
  .community-section__feedback-heading { margin-top: 4px; }
  .community-section .testimonials__rail { flex-direction: row; max-height: none; margin-right: -18px; padding-right: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; }
  .community-section .testimonial-card { flex: 0 0 min(83vw, 330px); min-height: 248px; }
}
@media (max-width: 430px) {
  .community-section__app-note { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px 0; }
  .community-section__app-note img { justify-self: center; width: 155px; height: 230px; }
  .community-section__app-copy { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .community-section__marker { animation: none; }
}

/* A compact view of the supplied Set PYQ–C marks. */
.design-draft .marks-progress { padding: 78px 24px; background: var(--draft-blue-soft); }
.marks-progress__shell { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); align-items: center; gap: clamp(34px, 6vw, 88px); width: min(1120px, 100%); margin: auto; }
.marks-progress__heading .section-eyebrow { margin: 0 0 13px; color: var(--draft-violet); }
.marks-progress__heading h2 { margin: 0; color: var(--draft-ink); font: 400 var(--draft-heading-size)/1.16 var(--draft-font-display); letter-spacing: -.025em; }
.marks-progress__heading > p:last-child { max-width: 410px; margin: 21px 0 0; color: var(--draft-muted); font-size: var(--draft-intro-size); line-height: 1.6; }
.marks-progress__chart { min-width: 0; padding: 29px 30px 23px; border: 1px solid #d9ddf1; border-radius: 24px; background: #fff; box-shadow: 0 16px 42px #52408b16; }
.marks-progress__axis { display: grid; grid-template-columns: 100px minmax(0, 1fr) 72px; margin-bottom: 10px; color: #76847c; font-size: .69rem; font-weight: 600; }
.marks-progress__axis span:first-child { grid-column: 1 / -1; margin-bottom: 17px; color: var(--draft-ink); font-size: .81rem; font-weight: 800; }
.marks-progress__axis span:nth-child(2) { grid-column: 2; grid-row: 2; justify-self: start; }
.marks-progress__axis span:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: center; }
.marks-progress__axis span:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
.marks-progress__rows { display: grid; gap: 14px; }
.marks-progress__row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 72px; align-items: center; gap: 0; min-width: 0; }
.marks-progress__set { color: var(--draft-ink); font-size: .9rem; font-weight: 750; }
.marks-progress__bar { height: 25px; overflow: hidden; border-radius: 7px; background: linear-gradient(90deg, #f1f3fa 49.85%, #dce2f1 50%, #f1f3fa 50.15%); }
.marks-progress__bar span { display: block; width: var(--mark-size); height: 100%; border-radius: inherit; background: var(--draft-violet); }
.marks-progress__row--final .marks-progress__bar span { background: var(--draft-orange); }
.marks-progress__row strong { color: var(--draft-ink); font-size: .88rem; font-variant-numeric: tabular-nums; text-align: right; }
.marks-progress__row--final strong { color: #a34e20; }
.marks-progress__caption { margin: 21px 0 0; color: var(--draft-muted); font-size: .75rem; line-height: 1.5; }
@media (max-width: 760px) {
  .design-draft .marks-progress { padding: 63px 18px; }
  .marks-progress__shell { grid-template-columns: 1fr; gap: 25px; }
  .marks-progress__heading h2 { max-width: 520px; font-size: var(--draft-heading-size-mobile); }
  .marks-progress__heading > p:last-child { margin-top: 14px; font-size: .94rem; }
  .marks-progress__chart { padding: 22px 17px 19px; border-radius: 19px; }
  .marks-progress__axis, .marks-progress__row { grid-template-columns: 72px minmax(0, 1fr) 62px; }
  .marks-progress__set { font-size: .76rem; }
  .marks-progress__bar { height: 23px; }
  .marks-progress__row strong { font-size: .75rem; }
  .marks-progress__caption { font-size: .69rem; }
}

/* A concise, evidence-scoped comparison between the set journey and Shiv. */
.design-draft .comparison-section { padding: 98px 24px 90px; background: #fff; }
.comparison-shell { width: min(1150px, 100%); margin: 0 auto; }
.comparison-heading { max-width: 890px; margin: 0 auto 45px; text-align: center; }
.comparison-heading .section-eyebrow { margin: 0 0 12px; }
.design-draft .comparison-heading h2 { margin: 0; color: var(--draft-ink); font: 400 var(--draft-heading-size)/1.16 var(--draft-font-display); letter-spacing: -.025em; }
.comparison-heading > p:last-child { margin: 15px 0 0; color: #5c6872; font-size: 1.02rem; line-height: 1.5; }
.comparison-chooser__label, .comparison-chooser { display: none; }
.comparison-matrix table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparison-matrix th, .comparison-matrix td { box-sizing: border-box; border-bottom: 1px solid #dce2e8; }
.comparison-matrix thead th { height: 86px; padding: 17px 12px; color: #2c3a44; font-size: .98rem; font-weight: 780; line-height: 1.25; text-align: center; }
.comparison-matrix thead th:first-child { width: 28%; padding-left: 18px; color: #66717d; font-size: .85rem; font-weight: 650; text-align: left; }
.comparison-matrix tbody th { height: 82px; padding: 14px 20px 14px 18px; color: #26343f; font-size: .98rem; font-weight: 690; line-height: 1.38; text-align: left; }
.comparison-matrix tbody th em { color: #315eb5; font-style: normal; }
.comparison-matrix td { height: 82px; padding: 13px 8px; text-align: center; }
.comparison-matrix .comparison-learnzy { border-right: 2px solid var(--draft-violet); border-left: 2px solid var(--draft-violet); background: var(--draft-violet-soft); }
.comparison-matrix thead .comparison-learnzy { border-top: 2px solid var(--draft-violet); border-radius: 20px 20px 0 0; color: #6840b2; font-size: 1.18rem; font-weight: 850; }
.comparison-matrix tbody tr:last-child .comparison-learnzy { border-bottom: 2px solid var(--draft-violet); border-radius: 0 0 20px 20px; }
.comparison-status { display: inline-grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #fff; font-family: Arial, sans-serif; font-size: 1.3rem; font-weight: 750; line-height: 1; }
.comparison-status--yes { background: #19a65a; }
.comparison-status--no { background: #f05252; font-size: 1.45rem; font-weight: 500; }
.comparison-chooser button:focus-visible { outline: 3px solid #83a5ed; outline-offset: 3px; }

@media (max-width: 900px) {
  .comparison-chooser__label { display: block; margin: 0 0 9px; color: #5b6875; font-size: .85rem; font-weight: 700; }
  .comparison-chooser { display: flex; gap: 7px; margin: 0 0 20px; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
  .comparison-chooser button { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #d6dfeb; border-radius: 999px; background: #fff; color: #425268; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
  .comparison-chooser button[aria-pressed="true"] { border-color: #396ddd; background: #eaf0ff; color: #2457bd; }
  .comparison-matrix [data-competitor] { display: none; }
  .comparison-matrix[data-selected="offline"] [data-competitor="offline"],
  .comparison-matrix[data-selected="pw"] [data-competitor="pw"],
  .comparison-matrix[data-selected="neetprep"] [data-competitor="neetprep"],
  .comparison-matrix[data-selected="chatgpt"] [data-competitor="chatgpt"] { display: table-cell; }
  .comparison-matrix thead th:first-child { width: 52%; }
  .comparison-matrix thead th:not(:first-child) { width: 24%; }
}
@media (max-width: 600px) {
  .design-draft .comparison-section { padding: 72px 16px 70px; }
  .comparison-heading { margin-bottom: 28px; text-align: left; }
  .design-draft .comparison-heading h2 { font-size: var(--draft-heading-size-mobile); }
  .comparison-heading > p:last-child { font-size: .93rem; }
  .comparison-matrix thead th { height: 65px; padding: 10px 5px; font-size: .85rem; }
  .comparison-matrix thead th:first-child { padding-left: 4px; font-size: .71rem; }
  .comparison-matrix thead .comparison-learnzy { font-size: .93rem; border-radius: 14px 14px 0 0; }
  .comparison-matrix tbody th { height: 74px; padding: 10px 7px 10px 4px; font-size: .79rem; line-height: 1.28; }
  .comparison-matrix td { height: 74px; padding: 9px 3px; }
  .comparison-matrix tbody tr:last-child .comparison-learnzy { border-radius: 0 0 14px 14px; }
  .comparison-status { width: 28px; height: 28px; font-size: 1.17rem; }
  .comparison-status--no { font-size: 1.3rem; }
}

/* Shared page rhythm; the in-phone demo keeps its own app typography. */
.design-draft :is(.chapter-loop__intro, .journey-feature__heading, .coach-intro, .community-section .testimonials__header, .comparison-heading, .draft-faq__intro) > p:not(.section-eyebrow),
.design-draft .marks-progress__heading > p:last-child {
  color: var(--draft-muted);
  font-size: var(--draft-intro-size);
  line-height: 1.6;
}
.design-draft :is(.velorah-hero__nav-link, .draft-mobile-menu summary, .draft-mobile-menu__links a) {
  font-family: var(--draft-font-ui);
  font-weight: 700;
}
.design-draft :is(.velorah-hero__cta, .velorah-hero__secondary, .velorah-hero__nav-btn, .journey-feature__cta, .community-section__cta, .offer-shell .button, .draft-button) {
  font-family: var(--draft-font-ui);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  border-radius: 12px;
}
.design-draft :is(.velorah-hero__cta, .velorah-hero__secondary, .journey-feature__cta, .community-section__cta, .offer-shell .button, .draft-button) { min-height: 52px; }
.design-draft .velorah-hero__nav-btn { min-height: 44px; }
.design-draft :is(.draft-faq__items p, .coach-panel > p:not(.coach-problem), .community-section__app-copy > span:last-child) { color: var(--draft-muted); font-size: var(--draft-body-size); line-height: 1.6; }

@media (max-width: 760px) {
  .design-draft :is(.chapter-loop__intro, .journey-feature__heading, .coach-intro, .community-section .testimonials__header, .comparison-heading, .draft-faq__intro) > p:not(.section-eyebrow),
  .design-draft .marks-progress__heading > p:last-child { font-size: var(--draft-body-size); }
  .design-draft .velorah-hero__nav-btn { font-size: .75rem; }
}