.lp {
--lp-ink: #111318;
--lp-sub: #475467;
--lp-line: rgba(15, 23, 42, 0.09);
--lp-card: #ffffff;
--lp-right: #1f9d55;
--lp-right-bg: #eaf8f0;
--lp-wrong: #d93d42;
--lp-wrong-bg: #fdeeee;
display: grid;
gap: clamp(18px, 3vw, 28px);
padding-bottom: 28px;
color: var(--lp-ink);
}
.lp[hidden],
.lp [hidden] {
display: none !important;
}
.lp-nav {
display: none;
}
.workspace-landing-active .site-nav {
padding: 8px 10px 8px 16px;
margin-bottom: 14px;
}
.workspace-landing-active .lp-nav {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.workspace-landing-active #siteNavActions,
.workspace-landing-active .mobile-nav-toggle,
.workspace-landing-active .ft-toggle--compact,
.workspace-landing-active .ss-nav-btn--compact {
display: none !important;
}
.lp-nav .lp-nav-signin {
padding: 9px 12px;
border-radius: 999px;
background: transparent;
box-shadow: none;
color: var(--text);
font: inherit;
font-size: 15px;
font-weight: 650;
}
.lp-nav .lp-nav-signin:focus-visible {
background: rgba(15, 23, 42, 0.05);
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.lp-nav .lp-nav-signin:hover {
background: rgba(15, 23, 42, 0.05);
transform: none;
}
}
.lp-nav .lp-nav-cta {
padding: 10px 16px;
box-shadow: none;
}
.lp .lp-link {
padding: 0;
background: none;
box-shadow: none;
color: var(--accent-strong);
font: inherit;
font-weight: 650;
text-align: left;
}
.lp .lp-link:focus-visible {
text-decoration: underline;
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.lp .lp-link:hover {
text-decoration: underline;
transform: none;
}
}
.lp .lp-cta {
min-height: 50px;
padding: 14px 26px;
font-size: 16px;
}
.lp-section {
min-width: 0;
padding: clamp(22px, 4vw, 40px);
border-radius: 28px;
background: var(--lp-card);
border: 1px solid var(--lp-line);
}
.lp-eyebrow {
margin: 0 0 8px;
color: var(--accent-strong);
font-size: 14px;
font-weight: 700;
}
.lp-eyebrow.is-cav {
color: #be123c;
}
.lp-h2 {
margin: 0;
max-width: 22ch;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.03em;
}
.lp-section-sub {
margin: 10px 0 0;
max-width: 60ch;
color: var(--lp-sub);
font-size: 16px;
line-height: 1.5;
}
.lp-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "copy" "strip" "actions";
gap: 18px;
padding: clamp(4px, 2vw, 24px) clamp(2px, 1vw, 8px) 0;
}
.lp-hero-copy { grid-area: copy; min-width: 0; }
.lp-strip { grid-area: strip; }
.lp-actions { grid-area: actions; }
.lp-beta {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 6px 12px;
border-radius: 999px;
background: #fdf1dc;
border: 1px solid #f6dcaa;
color: #8a5a0b;
font-size: 14px;
font-weight: 700;
}
.lp-beta i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #f2a93b;
}
.lp-proof {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 0;
color: var(--lp-sub);
font-size: 14px;
font-weight: 650;
}
.lp-final .lp-final-proof {
display: inline-flex;
justify-content: center;
margin-top: 14px;
}
.lp-module-dots {
display: inline-flex;
gap: 3px;
}
.lp-module-dots i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--lp-dot);
}
.lp .is-mtma { --lp-dot: #0d9488; }
.lp .is-mtmb { --lp-dot: #65a30d; }
.lp .is-hoad { --lp-dot: #ef4444; }
.lp .is-msk  { --lp-dot: #eab308; }
.lp .is-cav  { --lp-dot: #e11d48; }
.lp .is-rar  { --lp-dot: #0ea5e9; }
.lp .is-gin  { --lp-dot: #f59e0b; }
.lp .is-enr  { --lp-dot: #db2777; }
.lp .is-bab  { --lp-dot: #2563eb; }
.lp-title {
margin: 0;
font-size: clamp(40px, 6.4vw, 72px);
line-height: 0.98;
font-weight: 850;
letter-spacing: -0.045em;
}
.lp-sub {
margin: 14px 0 0;
max-width: 34ch;
color: var(--lp-sub);
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.45;
}
.lp-sub strong {
color: var(--lp-ink);
font-weight: 750;
}
.lp-actions {
display: grid;
justify-items: start;
gap: 10px;
}
.lp-is-finished .lp-actions .lp-cta {
display: none;
}
.lp-actions-note {
margin: 0;
color: var(--lp-sub);
font-size: 15px;
}
.lp-strip {
min-width: 0;
padding: 14px;
border-radius: 24px;
background: var(--lp-card);
border: 1px solid var(--lp-line);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}
.lp-strip-head {
display: flex;
align-items: center;
gap: 10px;
padding: 0 4px 10px;
font-size: 13px;
font-weight: 700;
color: var(--lp-sub);
}
.lp-strip-lead {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--lp-ink);
}
.lp-strip-lead i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e11d48;
}
.lp-strip-progress {
display: inline-flex;
gap: 4px;
margin-left: auto;
}
.lp-strip-progress i {
width: 18px;
height: 5px;
border-radius: 99px;
background: rgba(15, 23, 42, 0.12);
transition: background 0.25s ease;
}
.lp-strip-progress i.is-on {
background: #0d9488;
}
.lp-strip-paper {
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(225, 29, 72, 0.18);
}
.lp-strip-paper canvas {
display: block;
width: 100%;
height: 160px;
}
.lp-strip-body {
padding: 14px 4px 2px;
}
.lp-strip-prompt {
margin: 0 0 10px;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
}
.lp-choices {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lp .lp-choice {
padding: 11px 15px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.14);
box-shadow: none;
color: var(--lp-ink);
font: inherit;
font-size: 15px;
font-weight: 650;
text-align: left;
transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.lp .lp-choice:hover:not(:disabled) {
background: rgba(10, 132, 255, 0.06);
border-color: rgba(10, 132, 255, 0.45);
transform: none;
}
}
.lp .lp-choice:disabled {
cursor: default;
}
.lp .lp-choice.is-right {
background: var(--lp-right-bg);
border-color: var(--lp-right);
color: #126b3a;
}
.lp .lp-choice.is-right::before {
content: "\2713\00a0";
font-weight: 800;
}
.lp .lp-choice.is-wrong {
background: var(--lp-wrong-bg);
border-color: var(--lp-wrong);
color: #a42a2f;
}
.lp .lp-choice.is-faded {
opacity: 0.45;
}
.lp-feedback {
margin-top: 12px;
}
.lp-feedback-title {
margin: 0;
font-size: 17px;
font-weight: 800;
}
.lp-feedback-title.is-right {
color: #126b3a;
}
.lp-feedback-text {
margin: 4px 0 0;
color: var(--lp-sub);
font-size: 15px;
line-height: 1.5;
}
.lp-feedback-text strong {
color: var(--lp-ink);
}
.lp .lp-next {
margin-top: 12px;
padding: 11px 18px;
border-radius: 999px;
background: #111318;
box-shadow: none;
color: #fff;
font: inherit;
font-size: 15px;
font-weight: 700;
}
.lp-finish-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
margin-top: 14px;
}
.lp-lesson .cav-starling-viz {
margin-top: 18px;
}
.lp-lesson .cav-starling-viz-stage {
position: relative;
width: 100%;
aspect-ratio: 1600 / 600;
overflow: hidden;
border-radius: 16px;
}
.lp-lesson .cav-starling-viz-base,
.lp-lesson .cav-starling-viz-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.lp-lesson .cav-starling-viz-base {
object-fit: cover;
}
.lp-lesson .cav-starling-caption {
display: none;
}
.lp-lesson .cav-starling-viz-explainer {
border: 1px solid rgba(10, 132, 255, 0.18);
}
.lp-lesson .cav-starling-viz-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
margin-top: 14px;
}
.lp-lesson .cav-starling-viz-controls button {
width: 100%;
text-align: center;
}
.lp .lp-lesson-more {
display: inline-block;
margin-top: 16px;
font-size: 15px;
}
.lp-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 22px;
}
.lp-tile {
--lp-tone: #0a84ff;
--lp-tone-bg: rgba(10, 132, 255, 0.10);
display: grid;
align-content: start;
gap: 12px;
min-width: 0;
padding: 20px;
border-radius: 22px;
background: #fbfcfe;
border: 1px solid var(--lp-line);
}
.lp-tile.is-questions { --lp-tone: #0a6fd6; --lp-tone-bg: rgba(10, 132, 255, 0.11); }
.lp-tile.is-lessons   { --lp-tone: #be123c; --lp-tone-bg: rgba(225, 29, 72, 0.10); }
.lp-tile.is-sims      { --lp-tone: #0f766e; --lp-tone-bg: rgba(13, 148, 136, 0.12); }
.lp-tile.is-planner   { --lp-tone: #b45309; --lp-tone-bg: rgba(245, 158, 11, 0.14); }
.lp-tile-head {
display: flex;
align-items: center;
gap: 12px;
}
.lp-tile-head h3 {
margin: 0;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
}
.lp-tile-icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--lp-tone-bg);
color: var(--lp-tone);
}
.lp-tile-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp-tile p {
margin: 0;
color: var(--lp-sub);
font-size: 15px;
line-height: 1.5;
}
.lp-tile .lp-tile-stat {
color: var(--lp-ink);
font-size: 15px;
font-weight: 650;
}
.lp-tile-stat strong {
display: block;
color: var(--lp-tone);
font-size: 34px;
line-height: 1.05;
font-weight: 850;
letter-spacing: -0.03em;
}
.lp-mini-question {
display: grid;
gap: 6px;
}
.lp-mini-question span {
position: relative;
height: 14px;
border-radius: 6px;
background: rgba(15, 23, 42, 0.07);
}
.lp-mini-question span:nth-child(1) { width: 82%; }
.lp-mini-question span:nth-child(2) { width: 68%; }
.lp-mini-question span:nth-child(3) { width: 90%; }
.lp-mini-question span:nth-child(4) { width: 60%; }
.lp-mini-question span.is-right {
background: var(--lp-right-bg);
box-shadow: inset 0 0 0 1px rgba(31, 157, 85, 0.45);
}
.lp-mini-question span i {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
color: var(--lp-right);
font-size: 11px;
font-style: normal;
font-weight: 800;
}
.lp-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lp-chip {
padding: 6px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--lp-dot) 12%, #fff);
border: 1px solid color-mix(in srgb, var(--lp-dot) 30%, #fff);
color: color-mix(in srgb, var(--lp-dot) 70%, #111318);
font-size: 14px;
font-weight: 750;
cursor: default;
}
.lp-sim-list {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-size: 15px;
font-weight: 700;
}
.lp-sim-list li {
display: flex;
align-items: center;
gap: 10px;
}
.lp-sim-list svg {
width: 34px;
height: 14px;
fill: none;
stroke: var(--lp-tone);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.lp-mini-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
}
.lp-mini-week i {
height: 26px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.06);
}
.lp-mini-week i.is-study {
background: rgba(13, 148, 136, 0.22);
}
.lp-mini-week i.is-exam {
background: #f59e0b;
}
.lp-final {
display: grid;
justify-items: center;
text-align: center;
}
.lp-final .lp-h2 {
max-width: none;
}
.lp-final .lp-section-sub {
margin-bottom: 18px;
}
.lp .lp-final-try {
margin-top: 14px;
color: var(--lp-sub);
font-weight: 600;
text-align: center;
}
.lp-sticky {
display: none;
}
@media (min-width: 900px) {
.lp-hero {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
grid-template-areas: "copy strip" "actions strip";
grid-template-rows: auto 1fr;
column-gap: clamp(28px, 4vw, 56px);
align-items: end;
padding-top: clamp(20px, 4vw, 48px);
}
.lp-actions {
align-self: start;
margin-top: 8px;
}
.lp-strip {
align-self: center;
padding: 18px;
}
.lp-strip-paper canvas {
height: 200px;
}
}
@media (max-width: 700px) {
.lp {
gap: 16px;
padding-bottom: 96px;
}
.workspace-landing-active .site-nav {
top: 8px;
margin-bottom: 10px;
border-radius: 22px;
}
.workspace-landing-active .brand-wordmark-auc,
.workspace-landing-active .brand-wordmark-companion {
font-size: 21px;
}
.lp-nav .lp-nav-cta {
display: none;
}
.lp-title {
font-size: clamp(36px, 10.4vw, 44px);
}
.lp-sub {
margin-top: 10px;
font-size: 16px;
}
.lp-beta {
margin-bottom: 10px;
font-size: 13px;
}
.lp-proof {
margin-top: 10px;
font-size: 13px;
}
.lp-strip {
padding: 12px;
border-radius: 22px;
}
.lp-strip-prompt {
font-size: 18px;
}
.lp .lp-choice {
padding: 10px 13px;
font-size: 14.5px;
}
.lp-actions {
justify-items: stretch;
text-align: center;
}
.lp-actions .lp-cta {
width: 100%;
}
.lp-section {
padding: 20px;
border-radius: 24px;
}
.lp-tiles {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.lp-tile {
padding: 18px;
}
.lp-final .lp-cta {
width: 100%;
}
.lp-sticky {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
z-index: 30;
display: block;
padding: 8px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--lp-line);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.lp-sticky .lp-cta {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.lp-strip-progress i,
.lp .lp-choice {
transition: none;
}
}