@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");

:root {
  --black: #000;
  --soft-black: #202020;
  --blue: #18409e;
  --brand-blue: #5a78ff;
  --copy-main: #222222;
  --copy-body: #494949;
  --copy-description: #4e4e4e;
  --copy-unselected: #6c6c6c;
  --grey-1: #f2f2f2;
  --grey-2: #efefef;
  --grey-3: #888;
  --line: #d9d9d9;
  --chip: #9d9d9d;
  --story-ink: #cecece;
  --container: 90rem;
  --section-heading-size: 3.5rem;
  --header-height: 5.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--black); background: #fff; font-family: "Wanted Sans", Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { width: min(calc(100% - 3rem), var(--container)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); box-shadow: 0 0 0 rgba(0,0,0,0); backdrop-filter: blur(12px); transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 .6rem 1.65rem rgba(0,0,0,.075); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; width: 7.5rem; height: 2.0625rem; }
.brand img { display: block; width: 7.5rem; height: 2.0625rem; object-fit: contain; }
.primary-nav { display: flex; align-items: center; gap: clamp(1.5rem,2.5vw,2.5rem); font-size: 1rem; font-weight: 400; line-height: 1.2; }
.primary-nav > a:not(.download-button):hover { opacity: .58; }
.download-wrap { position: relative; }
.download-button { width: auto; min-height: 2.6875rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1.125rem; border-radius: 999px; background: #5977fe; color: #fff; font-weight: 700; }
.send-button { min-height: 2.75rem; padding-inline: 1.5rem; border-radius: 999px; background: #000; color: #fff; font-weight: 700; }
.download-menu { position: absolute; top: calc(100% + .75rem); right: 0; width: 21rem; padding-inline: 1.5rem; border: 1px solid var(--line); background: #fff; }
.download-menu a { display: block; padding-block: 1.35rem; font-size: 1rem; font-weight: 700; }
.download-menu a + a { border-top: 1px solid var(--line); }
.menu-button { position: relative; display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; }
.menu-button span { position: absolute; top: 50%; left: 50%; display: block; width: 1rem; height: 1px; margin: 0; background: #777; transform-origin: center; transition: transform .38s cubic-bezier(.22,1,.36,1), background-color .25s ease; }
.menu-button span:first-child { transform: translate(-50%,-.24rem); }
.menu-button span:last-child { transform: translate(-50%,.24rem); }
.menu-button[aria-expanded="true"] span:first-child { transform: translate(-50%,0) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translate(-50%,0) rotate(-45deg); }
.hero { position: relative; min-height: max(54rem,calc(100svh - var(--header-height))); overflow: hidden; isolation: isolate; }
.hero-grid { position: relative; z-index: 3; min-height: max(54rem,calc(100svh - var(--header-height))); display: flex; align-items: flex-start; justify-content: flex-start; padding-top: clamp(6rem,9vh,7.5rem); padding-bottom: clamp(27rem,45vh,31rem); }
.kicker { display: flex; align-items: center; gap: .28em; margin: 0 0 2.4rem; font-size: .78rem; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
.kicker::before { width: .58em; height: 1px; flex: none; background: currentColor; content: ""; }
.kicker.no-line::before { display: none; }
h1,h2,h3,p { margin-top: 0; }
.hero-copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; text-align: center; }
.hero-heading { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hero h1, .rolling-copy span { margin: 0; font-size: clamp(4rem,5.7vw,5.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.2; }
.hero h1 { color: var(--copy-main); }
.rolling-copy { --roll-line: 6.3rem; width: min(100%,76rem); height: var(--roll-line); overflow: hidden; color: var(--blue); }
.rolling-copy-track { animation: roll-copy 17.5s cubic-bezier(.72,0,.28,1) infinite; }
.rolling-copy span { display: block; height: var(--roll-line); white-space: nowrap; }
.hero-text { margin: 2rem 0 0; color: var(--copy-body); font-size: 1rem; font-weight: 400; line-height: 1.2; }
.store-badges { width: min(25rem,100%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 2.5rem; }
.store-badges a { min-height: 2.6875rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1.5rem; border-radius: 999px; background: #5977fe; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.store-badges a:hover, .download-button:hover { background: #4968f3; }
.hero-store-badges { width: auto; display: flex; grid-template-columns: none; align-items: center; gap: .75rem; margin-top: 3rem; }
.hero-store-badges a { min-height: 0; padding: 0; border-radius: 0; background: transparent; }
.hero-store-badges a:hover { background: transparent; opacity: .78; }
.hero-store-badges img { display: block; width: auto; height: 3rem; }
.hero-analysis { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-analysis::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.78) 20%,rgba(255,255,255,.24) 46%,rgba(255,255,255,.06) 72%,rgba(255,255,255,.28) 100%); content: ""; }
.hero-analysis-graph { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .76; filter: blur(.65px); transform-origin: 50% 68%; animation: hero-graph-breathe 10s ease-in-out infinite; }
.hero-feedback { position: absolute; z-index: 2; width: min(33.5rem,46vw); height: auto; opacity: 0; border-radius: 1rem; transform: translate(-50%,1rem) scale(.99); will-change: opacity, transform; }
.hero-feedback-pitch { top: 51%; left: 28%; animation: hero-feedback-pitch 12s ease-in-out infinite; }
.hero-feedback-rhythm { top: 60%; left: 51%; animation: hero-feedback-rhythm 12s ease-in-out infinite; }
.hero-feedback-dynamics { top: 69%; left: 72%; animation: hero-feedback-dynamics 12s ease-in-out infinite; }
@keyframes hero-graph-breathe {
  0%,100% { opacity: .7; transform: scaleY(.99); }
  50% { opacity: .8; transform: scaleY(1.012); }
}
@keyframes hero-feedback-pitch {
  0%,3% { opacity: 0; transform: translate(-50%,.8rem) scale(.99); }
  7%,27% { opacity: .92; transform: translate(-50%,0) scale(1); }
  31%,100% { opacity: 0; transform: translate(-50%,-.35rem) scale(.995); }
}
@keyframes hero-feedback-rhythm {
  0%,34% { opacity: 0; transform: translate(-50%,.8rem) scale(.99); }
  38%,60% { opacity: .92; transform: translate(-50%,0) scale(1); }
  64%,100% { opacity: 0; transform: translate(-50%,-.35rem) scale(.995); }
}
@keyframes hero-feedback-dynamics {
  0%,67% { opacity: 0; transform: translate(-50%,.8rem) scale(.99); }
  71%,93% { opacity: .92; transform: translate(-50%,0) scale(1); }
  97%,100% { opacity: 0; transform: translate(-50%,-.35rem) scale(.995); }
}
@keyframes roll-copy {
  0%, 10% { transform: translateY(0); }
  14%, 24% { transform: translateY(calc(var(--roll-line) * -1)); }
  28%, 38% { transform: translateY(calc(var(--roll-line) * -2)); }
  42%, 52% { transform: translateY(calc(var(--roll-line) * -3)); }
  56%, 66% { transform: translateY(calc(var(--roll-line) * -4)); }
  70%, 80% { transform: translateY(calc(var(--roll-line) * -5)); }
  84%, 94% { transform: translateY(calc(var(--roll-line) * -6)); }
  100% { transform: translateY(calc(var(--roll-line) * -7)); }
}
.media-placeholder { position: relative; overflow: hidden; background: #d3d3d3; }
.media-placeholder::after { position: absolute; inset: 0; display: grid; place-items: center; content: attr(data-label); color: var(--brand-blue); font-size: 1.15rem; }
.section { padding-block: clamp(6rem,11vw,10rem); }
.bordered { border-top: 0; scroll-margin-top: 5rem; }
.section-intro { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.2rem; align-items: start; }
.section-intro h2, .contact-heading h2, .faq-heading h2 { margin-bottom: 0; font-size: clamp(2.25rem,4vw,3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.section-intro h2 strong { font-weight: 760; }
.section-intro > p { max-width: 36rem; margin: 0; color: var(--copy-description); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-align: left; }
.problem-section { --problem-progress: 0; position: relative; min-height: 195svh; overflow: clip; scroll-margin-top: var(--header-height); }
.problem-scroll-space { min-height: 195svh; }
.problem-sticky { position: sticky; top: var(--header-height); min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.5rem,5vw,5rem); }
.problem-intro { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.2rem; align-items: start; }
.problem-intro .kicker { grid-column: 1 / -1; margin-bottom: 2.4rem; color: var(--copy-main); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.problem-intro h2 { margin: 0; color: var(--copy-main); font-size: 3.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.32; }
.problem-intro h2 span { display: block; }
.problem-intro h2 strong { font-weight: 700; }
.problem-statement { opacity: calc(1 - var(--problem-progress) * .5); filter: blur(calc(var(--problem-progress) * 1.15px)); }
.problem-solution { color: var(--brand-blue); opacity: calc(.38 + var(--problem-progress) * .62); filter: blur(calc((1 - var(--problem-progress)) * 2.3px)); }
.problem-intro > p { max-width: 36rem; margin: 0; padding-top: 0; color: var(--copy-description); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-align: left; opacity: calc(1 - var(--problem-progress) * .35); filter: blur(calc(var(--problem-progress) * .48px)); }
.problem-statement, .problem-solution, .problem-intro > p { will-change: opacity, filter, transform; }
.problem-stage { position: relative; width: min(calc(100% - 9rem),67rem); display: grid; grid-template-columns: repeat(2,minmax(0,29.5rem)); gap: 8rem; align-items: start; margin: clamp(3.5rem,6vh,5.5rem) auto 0; }
.problem-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .58rem; }
.problem-card { min-height: 2.75rem; display: flex; align-items: center; width: fit-content; max-width: 100%; padding: .72rem 1.05rem; border: 1px solid #e2e2e2; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 .45rem 1.5rem rgba(0,0,0,.045); color: var(--copy-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; opacity: calc(1 - var(--problem-progress) * .41); filter: blur(calc(var(--problem-progress) * 1.1px)); will-change: opacity, filter; }
.educator-problems { align-items: flex-end; }
.learner-problems { align-items: flex-start; }
.educator-problems .problem-card:nth-of-type(odd), .learner-problems .problem-card:nth-of-type(even) { margin-right: 1.15rem; }
.learner-problems .problem-card:nth-of-type(odd) { margin-left: 1.15rem; }
.problem-audience { position: absolute; z-index: 3; top: 50%; padding: .35rem .55rem; background: #fff; color: #535353; font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; white-space: nowrap; will-change: transform; }
.problem-audience-educators { left: -6rem; transform: translate(calc(var(--problem-progress) * 2.2rem),-50%) scale(calc(1 + var(--problem-progress))); transform-origin: right center; }
.problem-audience-learners { right: -5.35rem; transform: translate(calc(var(--problem-progress) * -2.2rem),-50%) scale(calc(1 + var(--problem-progress))); transform-origin: left center; }
.problem-link { position: absolute; z-index: 0; top: 50%; left: -3.15rem; right: -2.8rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg,#b8c5ff 0%,#8fa4ff 48%,#b8c5ff 100%); opacity: calc(.18 + var(--problem-progress) * .82); transform: translateY(-50%) scaleX(var(--problem-progress)); transform-origin: left center; will-change: opacity, transform; }
.pill-tabs { display: grid; margin-inline: auto; gap: .35rem; }
.pill-tabs button { min-height: 3.2rem; padding-inline: 1.25rem; border-radius: 999px; background: #9d9d9d; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.pill-tabs button[aria-selected="true"] { background: #000; }
.bridge-section { position: relative; overflow: visible; }
.bridge-section .section-intro { grid-template-columns: minmax(0,1fr); gap: 1.2rem; align-items: start; }
.bridge-section .section-intro .kicker { color: var(--copy-main); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.bridge-section .section-intro h2 { color: var(--copy-main); font-size: 3.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.32; }
.bridge-section .section-intro h2 span { display: block; white-space: nowrap; }
.bridge-section .section-intro > p { max-width: 36rem; margin: 0; padding-top: 0; color: var(--copy-description); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-align: left; }
.audience-tabs { position: sticky; z-index: 12; top: var(--header-height); width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,15rem)); justify-content: center; margin: clamp(4rem,7vw,6.5rem) auto 0; padding-inline: 1.5rem; border: 0; border-bottom: 1px solid rgba(34,34,34,.08); border-radius: 0; background: rgba(255,255,255,.97); box-shadow: none; backdrop-filter: blur(12px); }
.audience-tabs button { position: relative; min-height: 3.15rem; color: var(--copy-unselected); font-size: 1rem; font-weight: 600; line-height: 1.2; transition: color .22s ease; }
.audience-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--brand-blue); content: ""; transform: scaleX(0); transition: transform .28s ease; }
.audience-tabs button:hover { color: var(--copy-body); }
.audience-tabs button[aria-selected="true"] { color: var(--copy-main); }
.audience-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.feature-explorer { display: grid; grid-template-columns: minmax(0,.98fr) minmax(28rem,1.02fr); gap: clamp(3rem,7vw,7rem); align-items: start; margin-top: clamp(4rem,6vw,5.5rem); }
.feature-list { background: transparent; }
.feature-item { position: relative; margin-block: .18rem; overflow: hidden; border-radius: 1.1rem; transition: background-color .34s ease, color .34s ease; }
.feature-item[data-open="true"] { background: rgba(235,238,255,.6); }
.feature-trigger { width: 100%; min-height: 6.25rem; display: grid; grid-template-columns: 2.4rem minmax(0,1fr) .8rem; gap: 1rem; align-items: start; padding: 1.55rem 1.1rem 1.45rem 1rem; text-align: left; }
.feature-index { padding-top: .3rem; color: var(--copy-unselected); font-size: .76rem; font-weight: 600; line-height: 1.2; letter-spacing: .04em; }
.feature-trigger .arrow { width: 0; height: 0; margin-top: .38rem; border-left: .29rem solid transparent; border-right: .29rem solid transparent; border-top: .48rem solid currentColor; color: var(--copy-unselected); transform: rotate(-90deg); transition: color .3s ease, transform .42s cubic-bezier(.22,1,.36,1); }
.feature-trigger strong { color: var(--copy-unselected); font-size: clamp(1.05rem,1.5vw,1.28rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.3; transition: color .22s ease; }
.feature-trigger:hover strong { color: var(--copy-body); }
.feature-item[data-open="true"] .feature-trigger strong { color: var(--copy-main); font-weight: 700; }
.feature-item[data-open="true"] .feature-index, .feature-item[data-open="true"] .arrow { color: var(--brand-blue); }
.feature-item[data-open="true"] .arrow { transform: rotate(0); }
.feature-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .48s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.feature-body-inner { min-height: 0; max-width: 38rem; overflow: hidden; padding: 0 2.2rem 0 4.4rem; transition: padding-bottom .48s cubic-bezier(.22,1,.36,1); }
.feature-body p { max-width: 34rem; margin: 0; color: var(--copy-body); font-size: 1rem; font-weight: 400; line-height: 1.62; }
.feature-body p + p { margin-top: 1rem; }
.feature-item[data-open="true"] .feature-body { grid-template-rows: 1fr; opacity: 1; }
.feature-item[data-open="true"] .feature-body-inner { padding-bottom: 2.15rem; }
.feature-media { position: sticky; top: calc(var(--header-height) + 1.45rem); width: 100%; height: auto; min-height: 0; overflow: hidden; margin: 0; aspect-ratio: 1 / 1; background: transparent; isolation: isolate; }
.feature-visual { position: absolute; z-index: 1; inset: 0; height: 100%; opacity: 1; transform: translateY(0) scale(1); transition: opacity .38s ease, transform .5s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.feature-visual.is-entering { z-index: 2; opacity: 0; transform: translateY(.7rem) scale(.996); }
.feature-visual.is-leaving { z-index: 0; opacity: 0; transform: translateY(-.35rem) scale(.998); pointer-events: none; }
.feature-visual-primary { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.reference-section { --reference-top: calc(var(--header-height) + 1.6rem); padding-bottom: clamp(6rem,9vw,9rem); }
.reference-intro { margin-bottom: clamp(3rem,5vw,4.5rem); }
.reference-intro .kicker { margin-bottom: 2.4rem; color: var(--copy-main); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.reference-intro h2 { margin: 0; color: var(--copy-main); font-size: 3.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.32; white-space: nowrap; }
.reference-stack { position: relative; }
.reference-card { position: sticky; top: var(--reference-top); min-height: clamp(23rem,52svh,32rem); margin-bottom: 8svh; }
.reference-card:nth-child(1) { z-index: 1; }
.reference-card:nth-child(2) { z-index: 2; }
.reference-card:nth-child(3) { z-index: 3; }
.reference-card:nth-child(4) { z-index: 4; }
.reference-card:last-child { margin-bottom: 0; }
.reference-card-inner { position: relative; min-height: inherit; display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid rgba(34,34,34,.12); border-radius: 1.75rem; background: #fafafa; }
.reference-gradient { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: .24; pointer-events: none; }
.reference-gradient img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: reference-background 6s step-end infinite; }
.reference-gradient img:nth-child(2) { animation-delay: 2s; }
.reference-gradient img:nth-child(3) { animation-delay: 4s; }
@keyframes reference-background { 0%,32% { opacity: 1; } 33%,100% { opacity: 0; } }
.reference-copy { position: relative; z-index: 1; min-width: 0; min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2.25rem,5vw,4.25rem); text-align: center; }
.reference-index { margin: 0; color: var(--copy-unselected); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; }
.reference-index { position: absolute; top: clamp(1.5rem,3vw,2.5rem); left: clamp(1.5rem,3vw,2.5rem); text-align: left; }
.reference-copy h3 { width: 100%; max-width: 52rem; min-height: max-content; overflow: visible; margin: 0 auto; padding-block: .08em; color: var(--copy-main); font-size: clamp(1.8rem,2.25vw,2.35rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.25; text-align: center; text-wrap: pretty; }
.reference-line { display: block; }
.reference-contrast { width: max-content; max-width: calc(100% - 2rem); margin: 1.2rem auto 0; color: var(--copy-unselected); font-size: clamp(1.05rem,1.15vw,1.15rem); font-weight: 400; letter-spacing: 0; line-height: 1.35; text-align: center; white-space: nowrap; }
.reference-contrast span { color: var(--copy-body); font-weight: 600; }
.reference-connector { position: relative; width: 1px; height: clamp(2.2rem,5vh,3.25rem); margin: .9rem auto; border-left: 1px dashed rgba(73,73,73,.46); }
.reference-connector::before, .reference-connector::after { position: absolute; left: 50%; width: .32rem; height: .32rem; border-radius: 50%; content: ""; transform: translateX(-50%); }
.reference-connector::before { top: -.15rem; background: #b5b5b5; }
.reference-connector::after { bottom: -.15rem; background: var(--brand-blue); }
.reference-arpe { margin: 0 auto .7rem; color: var(--copy-body); font-size: clamp(1.05rem,1.15vw,1.15rem); font-weight: 600; letter-spacing: 0; line-height: 1.35; text-align: center; }
.reference-copy small { max-width: 33rem; margin-top: .7rem; color: var(--copy-unselected); font-size: .75rem; line-height: 1.45; text-align: center; }
.cycle-section { overflow: clip; }
.cycle-intro { margin-bottom: clamp(2.5rem,4.5vw,4rem); }
.cycle-journey { --cycle-progress: 0; position: relative; display: grid; grid-template-columns: minmax(0,1fr) 11.5rem minmax(0,1fr); align-items: stretch; margin-top: clamp(-7rem,-7vw,-5rem); }
.cycle-timeline-wrap { position: relative; z-index: 4; grid-column: 2; grid-row: 1; align-self: stretch; }
.cycle-timeline { position: absolute; inset: 0; width: 100%; }
.cycle-timeline-list { position: relative; height: 100%; display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.cycle-timeline-list li { display: flex; align-items: center; }
.cycle-timeline-list::before, .cycle-timeline-list::after { position: absolute; z-index: 0; top: 16.666%; bottom: 16.666%; left: .3rem; width: 2px; border-radius: 999px; content: ""; }
.cycle-timeline-list::before { background: #dddddd; }
.cycle-timeline-list::after { background: var(--brand-blue); transform: scaleY(var(--cycle-progress)); transform-origin: top; }
.cycle-timeline-list button { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: .75rem minmax(0,1fr); gap: .7rem; align-items: start; color: #a1a1a1; font-size: .86rem; font-weight: 400; line-height: 1.25; text-align: left; transition: color .35s ease; }
.cycle-timeline-list button:hover { color: var(--copy-body); }
.cycle-timeline-list button:focus-visible { outline: 2px solid rgba(90,120,255,.55); outline-offset: .45rem; }
.cycle-marker { position: relative; width: .72rem; height: .72rem; display: block; margin-top: .08rem; border: 1px solid #cfcfcf; border-radius: 50%; background: #fff; transition: border-color .35s ease, background-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.cycle-timeline-list button[aria-current="step"] { color: var(--copy-main); font-weight: 600; }
.cycle-timeline-list button[aria-current="step"] .cycle-marker { border-color: var(--brand-blue); transform: scale(1.08); }
.cycle-timeline-list button.is-passed .cycle-marker { border-color: var(--brand-blue); background: var(--brand-blue); }
.cycle-steps { grid-column: 1 / -1; grid-row: 1; }
.cycle-step { display: grid; grid-template-columns: minmax(0,1fr) 11.5rem minmax(0,1fr); align-items: center; min-height: clamp(42rem,90svh,56rem); padding-block: clamp(2.75rem,5vh,4.5rem); scroll-margin-top: 7rem; }
.cycle-step-spacer { grid-column: 2; }
.cycle-persona { min-width: 0; opacity: .32; transform: translateY(1.25rem); transition: opacity .5s ease-out, transform .55s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.cycle-step.is-active .cycle-persona { opacity: 1; transform: translateY(0); }
.cycle-step.is-active .cycle-learner { transition-delay: .06s; }
.cycle-educator { grid-column: 1; padding-right: clamp(1.5rem,3vw,3rem); }
.cycle-learner { grid-column: 3; padding-left: clamp(1.5rem,3vw,3rem); }
.cycle-image-frame { aspect-ratio: 1672 / 941; overflow: hidden; border: 1px solid rgba(34,34,34,.09); border-radius: .85rem; background: #ececec; }
.cycle-image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cycle-copy { padding-top: 1.35rem; }
.cycle-copy h3 { margin: 0; color: var(--copy-main); font-size: clamp(1.25rem,1.75vw,1.55rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.cycle-copy p { max-width: 34rem; margin: .7rem 0 0; color: var(--copy-description); font-size: 1rem; font-weight: 400; line-height: 1.52; }
.story-section { overflow: hidden; padding-block: clamp(3rem,5vw,5rem); background: #fff; color: var(--story-ink); }
.story-shell { width: 100%; outline: none; }
.story-shell:focus-visible { outline: 1px solid rgba(255,255,255,.42); outline-offset: -1px; }
.story-carousel { position: relative; width: 100%; }
.story-viewport { overflow: hidden; }
.story-track { display: flex; transform: translate3d(0,0,0); transition: transform 1.6s cubic-bezier(.4,0,.2,1); will-change: transform; }
.story-track.is-jumping { transition: none !important; }
.story-slide { position: relative; min-width: 0; min-height: clamp(29rem,48vw,50rem); flex: 0 0 100%; overflow: hidden; isolation: isolate; }
.story-slide[aria-hidden="true"] { pointer-events: none; }
.story-slide::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(15,15,15,.8) 0%,rgba(15,15,15,.55) 34%,rgba(15,15,15,.12) 66%,rgba(15,15,15,.04) 100%); content: ""; pointer-events: none; }
.story-copy { position: absolute; z-index: 2; top: 50%; left: clamp(6rem,7vw,8rem); width: min(52rem,60vw); max-width: calc(100% - 14rem); min-height: max-content; overflow: visible; opacity: .24; filter: blur(1.8px); transform: translate(1.25rem,-50%); transition: opacity 1.1s ease, filter 1.25s ease, transform 1.35s cubic-bezier(.4,0,.2,1); }
.story-slide.is-active .story-copy { opacity: 1; filter: blur(0); transform: translateX(0); }
.story-slide.is-active .story-copy { transform: translate(0,-50%); }
.story-slide h2 { width: 100%; min-height: max-content; overflow: visible; margin: 0; padding-block: .08em; color: #dedede; font-size: clamp(2.25rem,3.45vw,3.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.26; text-wrap: pretty; }
.story-heading-line { display: block; }
.no-break { white-space: nowrap; }
.story-slide p { width: 100%; max-width: 36rem; min-height: max-content; overflow: visible; margin: 1.8rem 0 0; color: #bcbcbc; font-size: clamp(.96rem,1.2vw,1.08rem); line-height: 1.55; }
.story-image { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; transform: none; transition: none; }
.story-arrow { position: absolute; z-index: 3; top: 50%; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(0,0,0,.48); color: #fff; backdrop-filter: blur(10px); transform: translateY(-50%); transition: background-color .25s ease, transform .25s ease; }
.story-arrow:hover { background: rgba(0,0,0,.7); }
.story-arrow:active { transform: translateY(-50%) scale(.96); }
.story-arrow:focus-visible { outline: 2px solid rgba(255,255,255,.82); outline-offset: 3px; }
.story-arrow svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.story-arrow-prev { left: clamp(1rem,2vw,2rem); }
.story-arrow-prev svg { transform: rotate(180deg); }
.story-arrow-next { right: clamp(1rem,2vw,2rem); }
.billing-toggle { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: .2rem; margin: 0; padding: .2rem; border: 1px solid #dedede; border-radius: 999px; background: #f3f3f1; }
.billing-toggle > button { min-height: 2.45rem; padding: .5rem .7rem; border-radius: 999px; color: #6c6c6c; font-size: .78rem; line-height: 1; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.billing-toggle > button span { margin-left: .35rem; color: inherit; font-size: .68rem; }
.billing-toggle > button[aria-pressed="true"] { background: #222; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.16); }
.pricing-comparison { margin-top: clamp(4rem,7vw,6rem); }
.pricing-scroll { overflow-x: visible; padding-bottom: .5rem; }
.pricing-table { display: grid; min-width: 62rem; grid-template-columns: minmax(14rem,1.25fr) repeat(4,minmax(10rem,1fr)); }
.plan-spacer, .compare-plan-head { position: sticky; top: var(--header-height); z-index: 6; min-height: 10.25rem; display: flex; flex-direction: column; justify-content: center; padding: 1.25rem; border-top: 1px solid #d9d9d5; border-bottom: 1px solid #bdbdb9; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.plan-spacer { z-index: 7; align-items: center; color: #222; }
.plan-spacer span { font-size: .92rem; font-weight: 650; }
.plan-spacer small { margin-top: .45rem; color: #6c6c6c; font-size: .7rem; font-weight: 400; }
.compare-plan-head { align-items: center; border-left: 1px solid #e4e4e1; text-align: center; }
.compare-plan-head.is-featured { background: rgba(246,248,255,.96); }
.compare-plan-head h3 { margin: 0 0 .45rem; color: #222; font-size: 1rem; font-weight: 650; }
.compare-plan-head > p { min-height: 2.2rem; max-width: 12rem; margin: 0 0 .65rem; color: #494949; font-size: .78rem; font-weight: 500; line-height: 1.38; }
.compare-plan-price { min-height: 3.45rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.compare-plan-price span { color: #222; font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 700; letter-spacing: -.04em; }
.compare-plan-price small { min-height: .75rem; max-width: 9rem; margin-top: .3rem; color: #6c6c6c; font-size: .58rem; line-height: 1.25; }
.feature-group { grid-column: 1/-1; margin: 3.2rem 0 0; padding: .75rem 0; border-bottom: 1px solid #bdbdb9; color: #222; font-size: .75rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.price-label, .price-value { min-height: 4rem; display: grid; align-items: center; padding: .75rem 1.25rem; border-bottom: 1px solid #dedede; background: #fff; }
.price-label { color: #494949; font-size: .84rem; font-weight: 500; white-space: pre-line; }
.price-value { place-items: center; border-left: 1px solid #eeeeeb; color: #494949; font-size: .84rem; }
.price-value.is-featured { background: rgba(87,118,255,.035); }
.credit-policy { max-width: 50rem; margin-top: 2.25rem; color: var(--copy-unselected); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.credit-policy ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.credit-policy li { position: relative; padding-left: 1rem; }
.credit-policy li::before { position: absolute; top: 0; left: 0; content: "*"; }
.contact-section { padding-block: clamp(6rem,10vw,9rem); background: linear-gradient(180deg,#fff 0%,#fff 18%,#eef2ff 18%,#e7edff 100%); }
.contact-card { padding: clamp(2.5rem,5vw,5rem); border: 1px solid rgba(34,34,34,.08); border-radius: clamp(2rem,4vw,3.5rem); background: #fff; box-shadow: 0 1.5rem 4rem rgba(27,45,100,.1); }
.contact-prompt { min-height: 14rem; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3rem; align-items: center; }
.contact-heading .kicker { margin-bottom: 1.65rem; }
.contact-heading h2 { color: var(--copy-main); font-size: clamp(2.75rem,4vw,3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.contact-toggle { width: 4rem; min-height: 4rem; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 0; border-radius: 50%; background: #f5f5f5; color: var(--copy-main); font-size: 1rem; font-weight: 600; line-height: 1.2; transition: background-color .22s ease, color .22s ease, transform .22s ease; }
.contact-toggle span { display: none; }
.contact-toggle:hover { background: #ececec; transform: translateY(-2px); }
.contact-toggle svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.contact-card[data-open="true"] .contact-toggle { width: auto; gap: 1rem; padding: .85rem 1.35rem .85rem 1.55rem; border-radius: 999px; background: #f1f1f1; color: var(--copy-main); }
.contact-card[data-open="true"] .contact-toggle span { display: inline; }
.contact-close-icon { display: none; }
.contact-card[data-open="true"] .contact-open-icon { display: none; }
.contact-card[data-open="true"] .contact-close-icon { display: block; }
.contact-form-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.contact-card[data-open="true"] .contact-form-panel { grid-template-rows: 1fr; opacity: 1; }
.contact-form-wrap { min-height: 0; overflow: hidden; }
.contact-form { display: grid; gap: 1rem; }
.contact-form { max-width: 70rem; margin: 3rem auto 0; padding-top: 3rem; border-top: 1px solid var(--line); }
.contact-form > label:not(.consent-field), .message-field { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: 1rem; }
.contact-form label > span, .contact-form legend { padding-top: .85rem; color: #5b5b5b; font-size: .88rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; border: 1px solid #eeeeee; border-radius: 1.2rem; outline: 0; background: #f8f8f8; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #969696; }
.contact-form input[type="text"], .contact-form input[type="email"] { height: 3.15rem; padding-inline: 1.2rem; }
.contact-form textarea { min-height: 11rem; padding: 1rem 1.2rem; resize: vertical; line-height: 1.55; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #000; background: #fff; }
.contact-form fieldset { display: grid; grid-template-columns: 8rem repeat(3,auto); align-items: center; justify-content: start; gap: 1rem 1.4rem; margin: 0; padding: 0; border: 0; }
.contact-form legend { grid-column: 1; float: left; }
.contact-form fieldset label { display: inline-flex; align-items: center; gap: .45rem; }
.contact-form fieldset label span { padding: 0; white-space: nowrap; }
.contact-form input[type="radio"] { accent-color: var(--copy-main); }
.consent-field { display: grid; grid-template-columns: 1.125rem minmax(0,1fr); align-items: start; gap: .65rem; margin-left: 9rem; }
.consent-field input { width: 1rem; height: 1rem; margin: .2rem 0 0; }
.consent-field span { padding: 0 !important; line-height: 1.45; }
.send-button { justify-self: end; min-width: 8rem; margin-top: 1.8rem; }
.faq-section { display: grid; grid-template-columns: minmax(16rem,.58fr) minmax(0,1.42fr); gap: clamp(3rem,10vw,10rem); align-items: start; padding-block: clamp(6rem,10vw,9rem); }
.faq-content { padding-top: .25rem; }
.faq-filters { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .55rem; margin-bottom: 2.5rem; }
.faq-filters button { min-height: 2.65rem; padding-inline: 1.2rem; border: 1px solid #d9d9d9; border-radius: 999px; background: #fff; color: var(--copy-unselected); font-size: .9rem; font-weight: 600; line-height: 1.2; transition: border-color .22s ease, background-color .22s ease, color .22s ease; }
.faq-filters button:hover { border-color: #c8c8c8; background: #f5f5f5; color: var(--copy-main); }
.faq-filters button[aria-pressed="true"] { border-color: var(--copy-main); background: var(--copy-main); color: #fff; }
.faq-filters button[aria-pressed="true"]:hover { background: var(--copy-main); color: #fff; }
.faq-filters button:focus-visible, .faq-question:focus-visible, .show-more:focus-visible { outline: 2px solid rgba(90,120,255,.55); outline-offset: 3px; }
.faq-list { display: grid; gap: .35rem; }
.faq-item { overflow: hidden; border-radius: 1.1rem; background: #fff; transition: background-color .34s ease; }
.faq-item:not([data-open="true"]):hover { background: #f7f7f7; }
.faq-item[data-open="true"] { background: transparent; }
.faq-question { width: 100%; min-height: 5.25rem; display: grid; grid-template-columns: minmax(0,1fr) 1.25rem; gap: 1.25rem; align-items: center; padding: 1.4rem 1.35rem; color: var(--copy-unselected); text-align: left; transition: color .25s ease; }
.faq-question-text { font-size: clamp(1rem,1.35vw,1.15rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.35; white-space: pre-line; transition: font-weight .25s ease; }
.faq-arrow { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(0); transition: color .3s ease, transform .42s cubic-bezier(.22,1,.36,1); }
.faq-item[data-open="true"] .faq-question { color: var(--copy-main); }
.faq-item[data-open="true"] .faq-question-text { font-weight: 700; }
.faq-item[data-open="true"] .faq-arrow { color: var(--brand-blue); transform: rotate(90deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .48s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.faq-answer > div { min-height: 0; overflow: hidden; }
.faq-answer p { max-width: 42rem; margin: 0; padding: 0 4rem 1.8rem 2.75rem; color: var(--copy-body); font-size: 1rem; font-weight: 400; line-height: 1.58; white-space: pre-line; opacity: 0; transform: translateY(-.4rem); transition: opacity .3s ease .05s, transform .4s cubic-bezier(.22,1,.36,1) .05s; }
.faq-answer strong { color: var(--copy-main); font-weight: 700; }
.faq-item[data-open="true"] .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-item[data-open="true"] .faq-answer p { opacity: 1; transform: translateY(0); }
.show-more { min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 2.25rem auto 0; padding: .72rem 1.35rem; border: 0; border-radius: 999px; background: #fff; color: var(--copy-main); font-size: 1rem; font-weight: 400; line-height: 1.2; transition: background-color .22s ease, transform .22s ease; }
.show-more:hover { background: #f3f3f3; }
.show-more:active { transform: scale(.98); }
.show-more svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.show-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.show-more[hidden] { display: none; }
.download-section { padding: 1rem .75rem clamp(2.25rem,3vw,3rem); scroll-margin-top: var(--header-height); background: #fff; }
.download-section-inner { min-height: clamp(15rem,20vw,18rem); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2.25rem,4vw,3.5rem) 1.5rem; border-radius: clamp(2rem,4vw,4rem); background: var(--brand-blue); text-align: center; }
.download-section h2 { max-width: 42rem; margin: 0; color: #fff; font-size: clamp(2rem,2.8vw,2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
body main section h2 { font-size: var(--section-heading-size); }
.download-section-badges { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: clamp(1.4rem,2.2vw,1.75rem); }
.download-section-badges a { display: block; line-height: 0; transition: opacity .2s ease, transform .2s ease; }
.download-section-badges a:hover { opacity: .82; transform: translateY(-2px); }
.download-section-badges img { display: block; width: auto; height: 2.75rem; }
.site-footer { border-top: 1px solid rgba(34,34,34,.14); border-bottom: 1px solid rgba(34,34,34,.14); background: #fff; }
.footer-inner { padding-block: clamp(2rem,3.2vw,2.75rem) 1rem; }
.footer-top { display: grid; grid-template-columns: minmax(15rem,1fr) auto; gap: clamp(3rem,7vw,7rem); align-items: start; }
.footer-brand-row { display: block; }
.footer-brand p { max-width: 18rem; margin: 1.75rem 0 0; color: var(--copy-description); font-size: 1rem; font-weight: 400; line-height: 1.45; }
.footer-socials { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; color: var(--copy-unselected); }
.footer-socials span { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; }
.footer-socials svg { display: block; width: 1.4rem; height: 1.4rem; fill: currentColor; }
.footer-socials rect, .footer-socials circle:not(.social-dot) { fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer-socials .social-dot { fill: currentColor; stroke: none; }
.footer-nav { display: grid; grid-template-columns: repeat(3,minmax(7rem,1fr)); gap: clamp(2rem,4vw,4rem); }
.footer-nav div { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.footer-nav p { margin: 0 0 .45rem; color: var(--copy-main); font-size: .82rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; }
.footer-nav a { color: var(--copy-unselected); font-size: .92rem; font-weight: 400; line-height: 1.3; transition: color .2s ease; }
.footer-nav a:hover, .footer-bottom a:hover { color: var(--copy-main); }
.footer-nav { justify-self: end; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(1.75rem,2.5vw,2.25rem); padding-top: .75rem; border-top: 0; color: var(--copy-unselected); font-size: .78rem; line-height: 1.3; }
.footer-bottom p { margin: 0; }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 1.5rem; }

@media (max-width: 1100px) {
  .problem-intro { grid-template-columns: 1fr; gap: 1.2rem; }
  .problem-intro > p { padding-top: 0; }
  .bridge-section .section-intro { grid-template-columns: 1fr; gap: 1.2rem; }
  .bridge-section .section-intro > p { padding-top: 0; }
  .problem-stage { width: min(calc(100% - 7rem),44rem); grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .reference-line { white-space: normal; }
}

@media (min-width: 1101px) {
  .reference-line { white-space: nowrap; }
}

@media (max-width: 900px) {
  .hero, .hero-grid { min-height: max(52rem,calc(100svh - var(--header-height))); }
  .hero-grid { padding-top: 6.25rem; padding-bottom: 26rem; }
  .section-intro { grid-template-columns: 1fr; gap: 1.2rem; }
  .feature-explorer { grid-template-columns: 1fr; gap: 3rem; }
  .feature-media { position: relative; top: auto; height: auto; min-height: 0; }
  .reference-copy h3 { font-size: clamp(1.9rem,4vw,2.4rem); }
  .reference-contrast { width: auto; max-width: 33rem; font-size: 1rem; white-space: normal; }
  .reference-arpe { font-size: 1rem; }
  .story-slide { min-height: clamp(31rem,54vw,42rem); }
  .story-copy { left: 6rem; width: min(40rem,64vw); max-width: calc(100% - 12rem); }
  .story-slide h2 { font-size: clamp(2rem,5vw,3rem); }
  .pricing-scroll { width: 100%; overflow-x: auto; padding-inline: max(1rem,calc((100% - min(calc(100% - 2rem),var(--container))) / 2)); scrollbar-width: thin; }
  .pricing-scroll .pricing-table { width: max-content; }
  .plan-spacer, .compare-plan-head { top: var(--header-height); }
  .faq-section { grid-template-columns: 1fr; }
  .faq-content { padding-top: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1; }
  .footer-nav { grid-column: 2; }
}

@media (max-width: 820px) {
  .cycle-intro { margin-bottom: 1.75rem; }
  .cycle-journey.container { width: 100%; }
  .cycle-journey { display: block; margin-top: 0; }
  .cycle-timeline-wrap { position: sticky; top: var(--header-height); z-index: 12; width: 100%; border-bottom: 1px solid rgba(34,34,34,.08); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
  .cycle-timeline { position: static; width: min(calc(100% - 2rem),var(--container)); margin-inline: auto; padding-block: .9rem .75rem; }
  .cycle-focus-point { display: none; }
  .cycle-timeline-list { height: auto; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: none; gap: 0; padding: 0; }
  .cycle-timeline-list li { display: block; }
  .cycle-timeline-list::before, .cycle-timeline-list::after { top: .34rem; right: 16.666%; bottom: auto; left: 16.666%; width: auto; height: 2px; }
  .cycle-timeline-list::after { transform: scaleX(var(--cycle-progress)); transform-origin: left; }
  .cycle-timeline-list button { grid-template-columns: 1fr; grid-template-rows: .75rem auto; justify-items: center; gap: .55rem; padding-inline: .3rem; font-size: .72rem; line-height: 1.2; text-align: center; }
  .cycle-marker { margin: 0; }
  .cycle-steps { width: min(calc(100% - 2rem),var(--container)); margin-inline: auto; }
  .cycle-step { grid-template-columns: 1fr; gap: 4rem; min-height: 0; padding-block: clamp(4rem,10vw,5.25rem); scroll-margin-top: 9rem; }
  .cycle-step:first-child { padding-top: 2rem; }
  .cycle-step + .cycle-step { border-top: 1px solid rgba(34,34,34,.08); }
  .cycle-step-spacer { display: none; }
  .cycle-educator, .cycle-learner { grid-column: 1; padding: 0; }
  .cycle-persona { opacity: .4; }
  .cycle-copy h3 { font-size: clamp(1.3rem,5vw,1.55rem); }
}

@media (max-width: 680px) {
  :root { --section-heading-size: clamp(1.65rem,7.3vw,2.3rem); --header-height: 4.25rem; }
  .container { width: min(calc(100% - 2rem), var(--container)); }
  .header-inner { min-height: var(--header-height); }
  .brand { width: 6.4rem; height: auto; }
  .brand img { width: 6.4rem; height: auto; }
  .menu-button { display: block; border: 0; background: #fff; }
  .primary-nav { position: absolute; top: 100%; right: 0; left: 0; display: flex; gap: .5rem; max-height: 0; overflow: hidden; padding: 0 1rem; border-bottom: 0 solid var(--line); background: #fff; flex-direction: column; align-items: stretch; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-.5rem); transition: max-height .42s cubic-bezier(.22,1,.36,1), padding .38s cubic-bezier(.22,1,.36,1), border-width .25s ease, opacity .25s ease, transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .42s; }
  .primary-nav.open { max-height: 15rem; padding: .5rem 1rem .75rem; border-bottom-width: 1px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .primary-nav > a { padding: .5rem .75rem; }
  .primary-nav .download-button { width: 100%; min-height: auto; justify-content: flex-start; border-radius: 0; background: transparent; color: inherit; font-weight: 400; }
  .primary-nav .download-button:hover { background: #f6f6f6; }
  .download-section { padding: .5rem .5rem 2.25rem; scroll-margin-top: var(--header-height); }
  .download-section-inner { min-height: 16rem; padding: 2.25rem 1.25rem; border-radius: 2rem; }
  .download-section h2 { font-size: clamp(1.75rem,7vw,2.2rem); }
  .download-section-badges { gap: .625rem; }
  .download-section-badges img { height: 2.5rem; }
  .hero, .hero-grid { min-height: max(43rem,calc(100svh - var(--header-height))); }
  .hero-grid { padding-top: 4.25rem; padding-bottom: 10rem; }
  .hero-copy { gap: 0; }
  .hero h1 { font-size: clamp(2.25rem,10.5vw,3rem); }
  .rolling-copy { --roll-line: 3.4rem; width: calc(100vw - 2rem); }
  .rolling-copy span { font-size: clamp(1.1rem,5.7vw,2.5rem); line-height: var(--roll-line); white-space: nowrap; }
  .hero-text { margin-top: 1.75rem; font-size: .95rem; line-height: 1.35; }
  .store-badges { width: min(100%,24rem); grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 2.25rem; }
  .store-badges a { padding-inline: .75rem; font-size: .92rem; }
  .hero-store-badges { width: auto; display: flex; gap: .625rem; margin-top: 2.5rem; }
  .hero-store-badges a { padding: 0; }
  .hero-store-badges img { height: 2.5rem; }
  .hero-analysis::after { background: linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.86) 28%,rgba(255,255,255,.34) 52%,rgba(255,255,255,.08) 82%,rgba(255,255,255,.3) 100%); }
  .hero-analysis-graph { filter: blur(.5px); }
  .hero-feedback { width: min(calc(100vw - 1rem),26rem); border-radius: .8rem; }
  .hero-feedback-pitch,
  .hero-feedback-rhythm,
  .hero-feedback-dynamics { top: 25.5rem; left: 50%; }
  .problem-section, .problem-scroll-space { min-height: 185svh; }
  .problem-sticky { top: var(--header-height); min-height: calc(100svh - var(--header-height)); padding-block: 2rem; }
  .problem-intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .problem-intro h2, .bridge-section .section-intro h2 { font-size: clamp(2.2rem,10vw,3rem); }
  .bridge-section .section-intro h2 span { white-space: normal; }
  .problem-intro > p { font-size: .92rem; }
  .problem-stage { width: calc(100% - 1rem); grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 2.7rem; padding-top: 2rem; }
  .problem-side { gap: .45rem; }
  .problem-card { width: 100%; padding: .62rem .7rem; border-radius: .9rem; font-size: .875rem; font-weight: 400; }
  .educator-problems .problem-card:nth-of-type(odd), .learner-problems .problem-card:nth-of-type(even), .learner-problems .problem-card:nth-of-type(odd) { margin: 0; }
  .problem-audience { top: 0; padding: .2rem .3rem; font-size: .78rem; }
  .problem-audience-educators { left: 0; transform: translateX(calc(var(--problem-progress) * .7rem)) scale(calc(1 + var(--problem-progress))); transform-origin: left center; }
  .problem-audience-learners { right: 0; transform: translateX(calc(var(--problem-progress) * -.7rem)) scale(calc(1 + var(--problem-progress))); transform-origin: right center; }
  .problem-link { top: .7rem; left: 4.4rem; right: 3.9rem; }
  .pill-tabs { width: calc(100% - 2rem); overflow-x: auto; }
  .audience-tabs { top: var(--header-height); width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 1rem; }
  .cycle-timeline-wrap { top: var(--header-height); }
  .feature-trigger { min-height: 5.5rem; grid-template-columns: 2rem minmax(0,1fr) .7rem; gap: .75rem; padding: 1.3rem .7rem 1.2rem .45rem; }
  .feature-trigger strong { font-size: 1rem; }
  .feature-body-inner { padding-right: .9rem; padding-left: 3.2rem; }
  .feature-body p { font-size: .95rem; line-height: 1.58; }
  .feature-media { height: auto; min-height: 0; }
  .reference-section { padding-bottom: 7rem; overflow: visible; }
  .reference-intro { margin-bottom: 3.5rem; }
  .reference-intro h2 { font-size: clamp(1.65rem,7.3vw,2.3rem); line-height: 1.12; white-space: nowrap; }
  .reference-stack { display: grid; gap: 1rem; }
  .reference-card { position: relative; top: auto; min-height: 22rem; margin: 0; }
  .reference-card-inner { min-height: inherit; grid-template-columns: 1fr; }
  .reference-copy { padding: 1.75rem 1.5rem 2.25rem; }
  .reference-index { top: 1.75rem; left: 1.5rem; }
  .reference-copy h3 { margin: 0 auto; font-size: clamp(1.55rem,6.5vw,2rem); line-height: 1.24; }
  .reference-contrast { width: auto; max-width: 33rem; margin: 4.25rem auto 0; font-size: .95rem; white-space: normal; }
  .reference-arpe { margin-bottom: .65rem; font-size: .95rem; }
  .reference-connector { height: 2.5rem; margin-block: .8rem; }
  .story-slide { min-height: max(38rem,76svh); }
  .story-slide::after { background: linear-gradient(180deg,rgba(14,14,14,.2) 0%,rgba(14,14,14,.76) 58%,rgba(14,14,14,.9) 100%); }
  .story-copy { top: auto; right: 1.5rem; bottom: 5rem; left: 1.5rem; width: auto; max-width: none; transform: translate(0,1rem); }
  .story-slide.is-active .story-copy { transform: translate(0,0); }
  .story-slide h2 { font-size: clamp(2rem,9vw,2.8rem); line-height: 1.2; }
  .story-heading-line { display: inline; }
  .story-heading-line + .story-heading-line::before { content: " "; }
  .story-after-days { display: block; }
  .story-slide p { margin-top: 1.25rem; font-size: .95rem; line-height: 1.5; }
  .story-image { object-position: 60% center; }
  .story-arrow { top: auto; bottom: 1.25rem; width: 2.85rem; height: 2.85rem; transform: none; }
  .story-arrow:active { transform: scale(.96); }
  .story-arrow-prev { left: .75rem; }
  .story-arrow-next { right: .75rem; }
  .billing-toggle > button { padding-inline: .45rem; font-size: .72rem; }
  .billing-toggle > button span { display: block; margin: .3rem 0 0; }
  .pricing-table { min-width: 54rem; grid-template-columns: 12rem repeat(4,10.5rem); }
  .plan-spacer, .compare-plan-head { top: var(--header-height); min-height: 9.6rem; }
  .compare-plan-head > p { min-height: 2.45rem; font-size: .74rem; }
  .plan-spacer, .price-label { position: sticky; left: 0; z-index: 7; box-shadow: 1px 0 0 #dedede; }
  .plan-spacer { z-index: 9; }
  .price-label { background: rgba(255,255,255,.98); }
  .feature-group { padding-top: 1.5rem; }
  .credit-policy { grid-template-columns: 1fr; }
  .contact-card { padding: 2rem 1.25rem; border-radius: 2rem; }
  .contact-prompt { min-height: 15rem; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; align-content: center; }
  .contact-heading h2 { line-height: 1.08; }
  .contact-heading h2 br { display: block; }
  .contact-toggle { width: 3.25rem; min-height: 3.25rem; justify-self: end; }
  .contact-card[data-open="true"] .contact-toggle { width: auto; }
  .contact-card[data-open="true"] .contact-prompt { grid-template-columns: 1fr; gap: 1.25rem; }
  .contact-card[data-open="true"] .contact-toggle { justify-self: start; margin-top: .2rem; }
  .contact-form { margin-top: 2rem; padding-top: 2rem; }
  .contact-form > label:not(.consent-field), .message-field { grid-template-columns: 1fr; gap: .3rem; }
  .contact-form label > span { padding-top: 0; }
  .contact-form fieldset { grid-template-columns: 1fr; }
  .contact-form legend { float: none; margin-bottom: .8rem; }
  .consent-field { margin-left: 0; }
  .send-button { width: 100%; }
  .faq-filters { gap: .4rem; margin-bottom: 2rem; }
  .faq-filters button { min-height: 2.5rem; padding-inline: 1rem; font-size: .85rem; }
  .faq-question { min-height: 4.75rem; gap: 1rem; padding: 1.25rem 1rem; }
  .faq-answer p { padding: 0 3.25rem 1.5rem 2rem; font-size: .95rem; }
  .footer-inner { padding-block: 2rem 1rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer-brand, .footer-nav { grid-column: 1; }
  .footer-brand-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .footer-brand p { margin-top: .9rem; }
  .footer-socials { flex: none; margin-top: .9rem; }
  .footer-nav { width: 100%; grid-template-columns: repeat(2,minmax(7rem,1fr)); gap: 2rem; justify-self: start; }
  .footer-bottom { align-items: flex-start; flex-direction: column-reverse; gap: 1rem; margin-top: 1.75rem; }
}

@media (max-width: 360px) {
  .hero-feedback-pitch,
  .hero-feedback-rhythm,
  .hero-feedback-dynamics { top: 27rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .rolling-copy-track { animation: none; }
  .hero-analysis-graph { animation: none; }
  .hero-feedback { animation: none; }
  .hero-feedback-pitch { opacity: .9; transform: translate(-50%,0); }
  .hero-feedback-rhythm, .hero-feedback-dynamics { opacity: 0; }
  .problem-section { --problem-progress: 1 !important; }
  .problem-card, .problem-statement, .problem-intro > p { filter: none; }
  .reference-gradient img { animation: none; opacity: 0; }
  .reference-gradient img:first-child { opacity: 1; }
  .cycle-persona { transform: none; }
  .story-track, .story-copy, .story-image { transition: none; }
}