/* Apprendeu Plus offer page: hero showcase, free and Plus side by side, two feature chapters, steps, FAQ and the closing offer. */
/* Tokens, paper, buttons, notes and reveal come from editorial.css; price, badge and checklist come from billing.css. */
.plus-page .site-footer { margin-top: 0; }
.plus-page [hidden] { display: none !important; }
.plus-main { overflow: clip; color: var(--home-text); }
.plus-main :is(h1, h2, h3) { color: var(--home-text); letter-spacing: -.05em; text-wrap: balance; }
.plus-main h2 > span { color: var(--home-accent); }
.plus-main p { color: var(--home-muted); }
.plus-main [id] { scroll-margin-top: 90px; }
.plus-main :is(a, button, summary):focus-visible { outline: 3px solid var(--home-accent); outline-offset: 3px; }
.plus-head { max-width: 760px; margin-bottom: 52px; }
.plus-head--center { margin-inline: auto; text-align: center; }
.plus-head--center .home-kicker { justify-content: center; }
.plus-head h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.1; }
.plus-summary { display: inline-flex; align-items: center; margin: 18px 0 0; padding: 7px 14px; border-radius: 100px; background: var(--home-cyan-wash); font-size: .9rem; font-weight: 800; }
.plus-main .plus-summary { color: var(--home-blue); }

/* Opening: the pitch beside a living preview of what subscribers see. */
.plus-hero { position: relative; isolation: isolate; padding: 76px 0 104px; border-bottom: 1px solid var(--home-line);
  background:
    repeating-radial-gradient(ellipse at 108% 96%, transparent 0 70px, var(--home-hero-lines) 71px 72px, transparent 73px 124px),
    radial-gradient(circle, var(--home-dot) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(ellipse at 12% 18%, var(--home-cyan-wash), transparent 55%),
    radial-gradient(ellipse at 88% 30%, var(--home-indigo-wash), transparent 58%),
    linear-gradient(180deg, var(--home-canvas), var(--home-blue-wash)); }
.plus-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6%; align-items: center; }
.plus-kicker-mark { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 100px; background: var(--home-surface); border: 1px solid var(--home-line);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--home-accent) 60%, transparent); }
.plus-kicker-mark i { color: var(--home-accent); font-size: 1rem; }
.plus-hero h1 { font-size: clamp(2.6rem, 4.8vw, 4.3rem); font-weight: 600; line-height: 1.06; }
.plus-mark { color: var(--home-rot-ink); background: linear-gradient(transparent 60%, var(--home-highlight) 60% 92%, transparent 92%) 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.plus-main .plus-lead { max-width: 46ch; margin-top: 24px; font-size: 1.1rem; line-height: 1.7; }
.plus-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.plus-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--home-muted); font-size: .88rem; font-weight: 700; }
.plus-trust li { display: inline-flex; align-items: center; gap: 8px; }
.plus-trust i { color: var(--home-ok); font-size: 1.05rem; }
.plus-manage { margin-top: 12px; font-size: .86rem; }

/* Showcase pieces are positioned in % of the composition, like the landing chapters. */
.plus-showcase { position: relative; aspect-ratio: 1.08; }
.plus-photo { position: absolute; z-index: 1; display: block; padding: 9px 9px 0; border-radius: 3px; background: #fff; box-shadow: 0 16px 30px -14px rgba(6, 30, 60, .55), 0 2px 4px rgba(6, 30, 60, .12); }
.plus-photo::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -12px; width: 38%; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgba(196, 160, 255, .6);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.plus-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.plus-photo span { display: block; padding: 7px 2px 9px; font: 700 1.3rem/1 var(--home-hand); color: #23344d; text-align: center; }
.plus-board, .plus-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 20px; background: #fff; border: 1px solid #d5e2ee; border-radius: 18px;
  box-shadow: 0 36px 60px -28px rgba(6, 20, 40, .6), 0 2px 6px rgba(6, 20, 40, .08); }
.plus-card { padding: 16px 18px; border-radius: 16px; }
.show-photo { left: 0; top: 0; width: 44%; transform: rotate(-7deg); }
.show-board { position: absolute; z-index: 3; left: 15%; top: 15%; width: 68%; }
.show-class { position: absolute; z-index: 4; left: -4%; bottom: -5%; width: 42%; transform: rotate(3deg); }
.show-mascot { position: absolute; z-index: 5; right: -3%; bottom: -2%; width: 21%; height: auto; filter: drop-shadow(0 18px 18px rgba(6, 30, 60, .25)); }
.plus-seal { position: absolute; z-index: 6; left: 35%; top: -4%; display: grid; place-content: center; justify-items: center; gap: 2px; width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(140deg, #ffd76a, #f2a90f); color: #3d2a00; font: 800 1.05rem/1 var(--font-title); letter-spacing: -.02em; transform: rotate(12deg);
  box-shadow: 0 16px 28px -12px rgba(120, 80, 0, .6), inset 0 0 0 5px rgba(255, 255, 255, .45); }
.plus-seal i { font-size: 1.3rem; }
.note-hero { left: 54%; top: 9%; }

/* Sample dashboard parts, shared by the hero and the feature chapters. Printed objects keep light colors. */
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-title, .card-label { display: inline-flex; align-items: center; gap: 7px; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #3a5371; }
.board-title i, .card-label i { color: #007dba; font-size: .95rem; letter-spacing: 0; }
.board-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; background: linear-gradient(115deg, #0078b4, #0754b8); color: #fff; font-size: .66rem; font-weight: 800; }
.board-tag--quiet { background: #e3f3fc; color: #0754b8; }
.board-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.board-score strong { font: 800 clamp(2.1rem, 3.4vw, 2.8rem)/1 var(--font-title); letter-spacing: -.05em; color: #10233d; }
.board-score > span:not(.board-chip) { font-size: .78rem; font-weight: 700; color: #3a5371; }
.board-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 100px; background: #e2f5ec; color: #1f7f57; font-size: .7rem; font-weight: 800; }
.board-chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { fill: none; stroke: #e3ebf3; stroke-width: 1; }
.chart-line { fill: none; stroke: #0754b8; stroke-width: 3.5; stroke-linecap: round; }
.chart-dot { fill: #fff; stroke: #0754b8; stroke-width: 2.5; }
.chart-dot--last { fill: #f2a90f; stroke: #fff; stroke-width: 3; }
.board-axis { display: flex; justify-content: space-between; padding: 0 2%; margin-top: -4px; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6f839a; }
.board-games, .assess-topics { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.board-games li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: .74rem; font-weight: 700; color: #10233d; }
.board-games b, .assess-topics b { font-weight: 800; }
.board-bar { grid-column: 1 / -1; display: block; height: 7px; border-radius: 6px;
  background: linear-gradient(90deg, #34a6e0, #0754b8) 0 0 / calc(var(--v) * 1%) 100% no-repeat, #e3ebf3; }
.board-bar--focus { background: linear-gradient(90deg, #ffd76a, #f2a90f) 0 0 / calc(var(--v) * 1%) 100% no-repeat, #e3ebf3; }
.v64 { --v: 64; } .v71 { --v: 71; } .v79 { --v: 79; } .v84 { --v: 84; } .v88 { --v: 88; } .v92 { --v: 92; }
.card-title { display: block; font: 700 .95rem/1.25 var(--font-title); letter-spacing: -.03em; color: #10233d; }
.class-avatars { display: flex; padding-left: 8px; }
.class-avatars span, .roster-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: #0078b4; color: #fff; font-size: .62rem; font-weight: 800; }
.class-avatars span { margin-left: -8px; }
.class-avatars span:nth-child(2), .roster li:nth-child(2) .roster-avatar { background: #7a5af5; }
.class-avatars span:nth-child(3), .roster li:nth-child(3) .roster-avatar { background: #1f9d6b; }
.class-avatars span:nth-child(4), .roster li:nth-child(4) .roster-avatar { background: #e0623a; }
.class-avatars .class-more { background: #e3ebf3; color: #3a5371; }
.class-progress { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; font-weight: 800; color: #3a5371; }
.class-track { display: block; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #1f9d6b, #3fcf95) 0 0 / 75% 100% no-repeat, #e3ebf3; }
.assess-ring { --p: 80; flex-shrink: 0; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#0754b8 calc(var(--p) * 1%), #e3ebf3 0); }
.assess-ring--class { --p: 75; background: conic-gradient(#1f9d6b calc(var(--p) * 1%), #e3ebf3 0); }
.assess-ring > span { display: grid; place-content: center; width: 66px; height: 66px; border-radius: 50%; background: #fff; text-align: center; }
.assess-ring strong { font: 800 1.15rem/1 var(--font-title); letter-spacing: -.04em; color: #10233d; }
.assess-ring small { margin-top: 2px; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3a5371; }
.assess-lead, .class-summary { display: flex; align-items: center; gap: 14px; }
.assess-lead small, .class-summary small { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700; color: #3a5371; }
.assess-topics li { display: grid; gap: 4px; font-size: .72rem; font-weight: 700; color: #10233d; }
.assess-topics li > span { display: flex; justify-content: space-between; gap: 6px; }

/* Free and Plus, side by side. */
.plus-compare { padding: 112px 0 120px; background: var(--home-canvas); }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 980px; margin-inline: auto; align-items: center; }
.compare-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 36px; border: 1px solid var(--home-line); border-radius: 24px; background: var(--home-surface); box-shadow: var(--home-card-shadow); }
.compare-card--plus { padding-block: 48px; border: 2px solid transparent;
  background: linear-gradient(160deg, color-mix(in srgb, var(--home-cyan-wash) 70%, var(--home-surface)), var(--home-surface) 55%) padding-box, var(--home-button-fill) border-box;
  box-shadow: 0 34px 60px -30px color-mix(in srgb, var(--home-accent) 70%, transparent), var(--home-card-shadow); }
.compare-ribbon { position: absolute; top: -15px; right: 28px; padding: 7px 13px; border-radius: 6px; background: var(--home-beta); color: var(--home-beta-ink); font-size: var(--type-tag); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(120, 80, 0, .55); transform: rotate(2deg); }
.compare-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 16px; background: var(--home-cyan-wash); color: var(--home-accent); font-size: 1.45rem; }
.compare-card--plus .compare-icon { background: var(--home-button-fill); color: var(--home-button-ink); }
.compare-card h3 { font-size: 1.6rem; font-weight: 650; }
.plus-main .compare-sub { margin-top: 6px; font-size: .96rem; }
.compare-list { display: grid; gap: 13px; margin: 24px 0 26px; padding: 0; list-style: none; }
.compare-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--home-text); font-size: 1rem; font-weight: 650; line-height: 1.45; }
.compare-list i { flex-shrink: 0; color: var(--home-accent); font-size: 1.15rem; line-height: 1.3; }
.compare-card .home-text-link { margin-top: auto; }

/* Feature chapters: one for students, one for teachers, each with its sample screen. */
.plus-feature { position: relative; padding: 116px 0; }
.feature-student { background: radial-gradient(circle, var(--home-dot) 1.2px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(120deg, var(--home-cyan-wash), var(--home-canvas)); }
.feature-teacher { background: radial-gradient(circle, var(--home-dot) 1.2px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(120deg, var(--home-canvas), var(--home-indigo-wash)); }
.feature-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 7%; align-items: center; }
.feature-reverse .feature-copy { order: 2; }
.feature-copy h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 600; line-height: 1.1; }
.plus-main .feature-lead { max-width: 44ch; margin-top: 22px; font-size: 1.06rem; line-height: 1.7; }
.feature-points { display: grid; max-width: 480px; margin: 32px 0 0; padding: 0; list-style: none; }
.feature-points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--home-line); }
.feature-points li:last-child { border-bottom: 1px solid var(--home-line); }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--home-surface); color: var(--home-accent); font-size: 1.15rem; box-shadow: 0 6px 14px -8px rgba(6, 30, 60, .35); }
.feature-points h3 { font-size: 1rem; letter-spacing: -.03em; }
.plus-main .feature-points p { margin-top: 2px; font-size: .92rem; }
.feature-visual { position: relative; padding-top: 10px; }
.visual-student { padding-bottom: 236px; }
.visual-teacher { padding-bottom: 112px; }
.history-card { width: 80%; transform: rotate(-1.5deg); }
.history-list { display: grid; margin: 0; padding: 0; list-style: none; }
.history-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #e3ebf3; }
.history-list img { display: block; width: 58px; height: 34px; border-radius: 6px; object-fit: cover; }
.history-list strong { display: block; font: 700 .86rem/1.2 var(--font-title); letter-spacing: -.02em; color: #10233d; }
.history-list small { font-size: .7rem; font-weight: 700; color: #6f839a; }
.history-list b { font: 800 .92rem/1 var(--font-title); color: #10233d; }
.trend-up { color: #1f9d6b; }
.trend-flat { color: #c98a00; }
.assess-card { position: absolute; z-index: 2; right: 0; bottom: 0; width: 52%; transform: rotate(2.5deg); }
.note-student { left: 8%; bottom: 96px; }
.class-board { width: 84%; margin-left: auto; transform: rotate(1.2deg); }
.roster { display: grid; margin: 0; padding: 0; list-style: none; }
.roster li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #e3ebf3; font-size: .82rem; font-weight: 700; color: #10233d; }
.roster-status { padding: 4px 10px; border-radius: 100px; background: #eef3f8; color: #6f839a; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.roster-status.is-done { background: #e2f5ec; color: #1f7f57; }
.roster-status.is-going { background: #fff3d6; color: #8a5a00; }
.feedback-card { position: absolute; z-index: 2; left: 0; bottom: 0; width: 44%; transform: rotate(-3deg); }
.plus-main .feedback-card p { font-size: .8rem; line-height: 1.5; color: #3a5371; }
.note-teacher { right: 6%; bottom: 26px; }

/* How it works */
.plus-steps-section { padding: 104px 0 112px; background: radial-gradient(circle, var(--home-dot) 1.2px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(180deg, var(--home-canvas), var(--home-blue-wash)); }
.plus-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.plus-steps li { position: relative; padding: 34px 28px 30px; text-align: center; background: var(--home-surface); border: 1px solid var(--home-line); border-radius: 22px; box-shadow: var(--home-card-shadow); }
.plus-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 62px; left: calc(100% + 6px); width: 24px; border-top: 2px dashed var(--home-accent); }
.step-number { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--home-button-fill); color: var(--home-button-ink);
  font: 800 1.35rem/1 var(--font-title); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--home-accent) 70%, transparent); }
.plus-steps h3 { font-size: 1.15rem; font-weight: 650; }
.plus-main .plus-steps p { margin-top: 8px; font-size: .94rem; line-height: 1.6; }

/* Questions */
.plus-faq-section { padding: 104px 0 112px; background: var(--home-canvas); }
.plus-faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 64px; align-items: start; }
.plus-faq-layout .plus-head { margin-bottom: 0; }
.plus-main .plus-faq-contact { margin-top: 18px; font-size: 1rem; }
.plus-faq-contact a, .plus-terms-link a { color: var(--home-accent); font-weight: 800; }
.plus-faq { display: grid; gap: 12px; }
.plus-faq details { border: 1px solid var(--home-line); border-radius: 16px; background: var(--home-surface); transition: border-color .2s, box-shadow .2s; }
.plus-faq details[open] { border-color: color-mix(in srgb, var(--home-accent) 55%, var(--home-line)); box-shadow: var(--home-card-shadow); }
.plus-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; color: var(--home-text); font-size: 1.02rem; font-weight: 800; cursor: pointer; list-style: none; }
.plus-faq summary::-webkit-details-marker { display: none; }
.plus-faq summary::after { content: "\f64d"; flex-shrink: 0; font-family: "bootstrap-icons"; color: var(--home-accent); transition: transform .2s; }
.plus-faq details[open] summary::after { transform: rotate(45deg); }
.plus-main .plus-faq details p { padding: 0 24px 22px; line-height: 1.7; }
.plus-main .plus-terms-link { margin-top: 8px; font-size: .92rem; }
.plus-terms-link i { margin-right: 8px; color: var(--home-accent); }

/* Closing offer: a brand-blue stage in both themes, the call to subscribe and the plan ticket. */
.plus-offer { position: relative; isolation: isolate; overflow: hidden; padding: 116px 0 0; color: #fff;
  background:
    repeating-radial-gradient(ellipse at -10% 110%, transparent 0 70px, rgba(238, 249, 255, .1) 71px 72px, transparent 73px 124px),
    repeating-radial-gradient(ellipse at 110% -10%, transparent 0 90px, rgba(238, 249, 255, .08) 91px 92px, transparent 93px 150px),
    radial-gradient(ellipse at 18% 20%, rgba(103, 206, 255, .32), transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(122, 90, 245, .34), transparent 60%),
    linear-gradient(125deg, #083a6e, #0754b8 55%, #1f3f9a); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 8%; align-items: center; }
.plus-offer .home-kicker { color: #a6edff; }
.plus-main .offer-copy h2 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 600; line-height: 1.06; }
.plus-main .offer-copy h2 > span { color: #ffe17a; }
.plus-main .offer-lead { max-width: 40ch; margin-top: 22px; color: #d8ecff; font-size: 1.12rem; line-height: 1.65; }
.plus-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 76px; margin-top: 36px; padding: 0 40px;
  border-radius: 100px; background: linear-gradient(115deg, #ffe17a, #f5b51f); color: #3d2a00; font: 800 clamp(1.08rem, 1.6vw, 1.25rem)/1.2 var(--font-title); letter-spacing: -.02em;
  box-shadow: 0 22px 44px -16px rgba(255, 200, 61, .75), inset 0 -3px 0 rgba(120, 80, 0, .18); transition: transform .25s, box-shadow .25s; }
.plus-cta i { font-size: 1.25rem; }
.plus-cta i:last-child { transition: transform .25s; }
.plus-cta:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -16px rgba(255, 200, 61, .9), inset 0 -3px 0 rgba(120, 80, 0, .18); }
.plus-cta:hover i:last-child { transform: translateX(4px); }
.plus-cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.plus-cta--quiet { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .5); box-shadow: none; }
.plus-cta--quiet:hover { background: rgba(255, 255, 255, .2); box-shadow: none; }
.plus-main .plus-summary--offer { display: flex; width: fit-content; background: rgba(255, 255, 255, .12); color: #e8f5ff; }
.plus-ticket { position: relative; padding: 40px 36px 32px; border-radius: 22px; background: #fff; transform: rotate(1.5deg);
  box-shadow: 0 1px 0 #e9eef3, 0 3px 0 #e1e8ef, 0 44px 70px -30px rgba(3, 14, 35, .7);
  /* billing.css paints the price with --ui-* tokens; the ticket is paper, so it keeps the light values. */
  --ui-text: #10233d; --ui-muted: #3a5371; --ui-accent: #007dba; --ui-line: #c9d8e6; --brand-button-fill: linear-gradient(115deg, #0078b4, #0754b8); --brand-button-ink: #fff; }
.plus-ticket::before { content: ""; position: absolute; left: 50%; top: -13px; width: 130px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 214, 64, .7);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.plus-ticket .plus-plan-badge { position: absolute; top: 28px; right: 28px; }
.plus-ticket h2 { margin: 0 0 18px; font-size: 1.6rem; font-weight: 650; }
.plus-main .plus-ticket :is(.plus-price-note, .plus-plan-unavailable) { color: var(--ui-muted); }
.plus-main .plus-ticket .plus-plan-unavailable { color: var(--ui-text); }
.plus-main .plus-ticket .plus-plan-secure { padding-top: 18px; border-top: 1px dashed var(--ui-line); color: var(--ui-muted); }
.plus-main .plus-caption { padding: 72px 0 28px; color: rgba(232, 245, 255, .8); font-size: var(--type-caption); text-align: right; }

/* Motion (all of it switches off with prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .plus-mark { animation: marker-fill .9s cubic-bezier(.3, .7, .3, 1) .35s both; }
  .plus-showcase > * { animation: piece-drop .9s cubic-bezier(.2, .8, .25, 1) both; }
  .plus-showcase > .show-photo { animation-delay: .05s; }
  .plus-showcase > .show-board { animation-delay: .15s; }
  .plus-showcase > .show-class { animation-delay: .35s; }
  .plus-showcase > .show-mascot { animation: piece-drop .9s cubic-bezier(.2, .8, .25, 1) .5s both, mascot-float 6s ease-in-out 1.4s infinite; }
  .plus-showcase > .plus-seal { animation: seal-pop .7s cubic-bezier(.3, 1.5, .5, 1) .75s both; }
  .plus-showcase > .home-note { animation: piece-fade .8s ease 1s both; }
  [data-play].is-playing .board-bar, [data-play].is-playing .class-track { animation: bar-fill 1.1s cubic-bezier(.2, .7, .3, 1) .2s both; }
  [data-play].is-playing .chart-line { stroke-dasharray: 1; animation: line-draw 1.4s cubic-bezier(.4, .1, .3, 1) .2s both; }
  [data-play].is-playing .chart-area { animation: piece-fade 1s ease .8s both; }
  [data-play].is-playing .assess-ring { animation: ring-fill 1.2s cubic-bezier(.2, .7, .3, 1) .2s both; }
  .plus-cta:not(.plus-cta--quiet)::after { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 -40%; width: 30%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: cta-shine 3.8s ease-in-out 1s infinite; }
}
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes marker-fill { from { background-size: 0 100%; } }
@keyframes piece-drop { from { opacity: 0; translate: 0 -24px; scale: 1.06; } }
@keyframes piece-fade { from { opacity: 0; } }
@keyframes seal-pop { from { opacity: 0; scale: .4; } }
@keyframes mascot-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes bar-fill { from { background-size: 0 100%, auto; } }
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ring-fill { from { --p: 0; } }
@keyframes cta-shine { 0%, 60% { left: -40%; } 100% { left: 130%; } }

/* Responsive */
@media (max-width: 1000px) {
  .plus-hero { padding: 56px 0 88px; }
  .plus-hero-grid, .feature-grid, .offer-grid, .plus-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .plus-showcase, .feature-visual { width: 100%; max-width: 640px; margin-inline: auto; }
  .feature-reverse .feature-copy { order: 0; }
  .plus-feature { padding: 88px 0; }
  .plus-ticket { width: 100%; max-width: 520px; }
  .plus-faq-layout { gap: 32px; }
}
@media (max-width: 760px) {
  .compare-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .compare-card--plus { padding-block: 40px; }
  .plus-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 480px; }
  .plus-steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 600px) {
  .plus-hero { padding: 40px 0 72px; }
  .plus-hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .plus-hero-actions { flex-direction: column; align-items: stretch; }
  /* The class card returns in the teacher chapter; here it would cover the chart. */
  .plus-showcase { aspect-ratio: .92; }
  .show-photo { width: 52%; }
  .show-board { left: 4%; top: 18%; width: 84%; }
  .show-class { display: none; }
  .show-mascot { right: -5%; width: 22%; }
  .plus-seal { width: 74px; height: 74px; font-size: .9rem; }
  .note-hero { display: none; }
  .board-games li:nth-child(3) { display: none; }
  .plus-compare, .plus-steps-section, .plus-faq-section { padding: 80px 0 88px; }
  .compare-card { padding: 28px 24px; }
  .plus-feature { padding: 72px 0; }
  .visual-student, .visual-teacher { padding-bottom: 44px; }
  .history-card, .class-board { width: 100%; transform: none; }
  .history-list li { grid-template-columns: 46px minmax(0, 1fr) auto 16px; gap: 10px; }
  .history-list img { width: 46px; height: 28px; }
  .assess-card, .feedback-card { position: relative; right: auto; left: auto; bottom: auto; width: 82%; margin: -18px 0 0 auto; }
  .feedback-card { margin: -18px auto 0 0; }
  .home-note { font-size: 1.2rem; }
  .home-note svg { width: 40px; }
  .note-student { bottom: 0; }
  .note-teacher { right: 0; bottom: 0; }
  .plus-offer { padding-top: 80px; }
  .plus-cta { width: 100%; min-height: 68px; padding: 0 24px; }
  .plus-ticket { padding: 36px 24px 28px; transform: none; }
  .plus-ticket .plus-plan-badge { position: static; margin-bottom: 14px; }
  .plus-main .plus-caption { padding-top: 56px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .plus-page *, .plus-page *::before, .plus-page *::after { scroll-behavior: auto; transition: none; animation: none; }
}