.landing-body { background: #f5f7fb; }
.landing-body main { overflow: hidden; }
.landing-topbar { grid-template-columns: minmax(230px,1fr) auto minmax(230px,1fr); }
.landing-topbar .topbar-actions { justify-self: end; }
.landing-nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.landing-nav a { color: #c7d0df; font-size: .82rem; font-weight: 760; text-decoration: none; }
.landing-nav a:hover { color: #ffca58; }
.landing-hero,
.subject-entry,
.how-it-works,
.pricing-section { width: min(1240px,calc(100% - 2rem)); margin: 0 auto; }
.landing-hero { min-height: 610px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); gap: clamp(2rem,7vw,6rem); align-items: center; padding: clamp(4rem,9vw,7.5rem) 0; }
.hero-copy h1 { max-width: 820px; margin: 0; color: #101a34; font: 500 clamp(3.2rem,7vw,6.7rem)/.91 Georgia,serif; letter-spacing: -.058em; }
.hero-copy h1 span { color: #177f94; }
.hero-copy > p:not(.eyebrow) { max-width: 710px; margin: 1.4rem 0 0; color: #59677d; font-size: clamp(1rem,1.4vw,1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.65rem; }
.landing-primary,.landing-secondary,.plan-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; border-radius: 10px; font-size: .86rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.landing-primary,.plan-button { border: 1px solid #101a34; background: #101a34; color: white; }
.landing-secondary,.plan-button.secondary { border: 1px solid #c7d0de; background: white; color: #101a34; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; color: #6b778b; font-size: .74rem; }
.hero-proof span { display: flex; align-items: baseline; gap: .36rem; }
.hero-proof strong { color: #101a34; font: 500 1.1rem Georgia,serif; }
.rank-preview { position: relative; padding: clamp(1.2rem,3vw,1.7rem); border: 1px solid #ced7e4; border-radius: 22px; background: #101a34; color: white; box-shadow: 0 28px 70px rgba(16,26,52,.18); }
.rank-preview::before { content: ""; position: absolute; inset: -10px 22px auto; height: 10px; border-radius: 10px 10px 0 0; background: #ffca58; }
.rank-preview-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.rank-preview-head span { color: #8fa0bd; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.rank-preview-head strong { color: #ffca58; font-size: .72rem; }
.rank-line { display: grid; grid-template-columns: 105px 1fr 70px; gap: .65rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .78rem; }
.rank-line > div { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.rank-line i { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: #41c4d7; }
.rank-line strong { color: #d7dfec; font-size: .7rem; text-align: right; }
.mastery-preview { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: center; margin-top: 1rem; padding: .85rem; border-radius: 11px; background: rgba(255,255,255,.07); font-size: .76rem; }
.mastery-scale { display: flex; gap: .25rem; }
.mastery-scale i { width: 24px; height: 8px; border-radius: 99px; background: #ffca58; }
.mastery-scale i.empty { background: rgba(255,255,255,.18); }
.rank-preview > p { margin: 1rem 0 0; color: #aeb9cb; font-size: .72rem; }
.subject-entry,.how-it-works,.pricing-section { padding: clamp(3.5rem,7vw,6rem) 0; border-top: 1px solid #dce2eb; }
.landing-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.landing-section-head h2 { max-width: 720px; margin: 0; color: #101a34; font: 500 clamp(2rem,4vw,3.6rem)/.98 Georgia,serif; letter-spacing: -.045em; }
.landing-section-head > p { max-width: 450px; margin: 0; color: #68758a; font-size: .88rem; }
.subject-entry-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
.subject-entry-card { --card-accent:#b47800; min-height: 225px; display: grid; grid-template-columns: auto 1fr auto; gap: .95rem; align-items: start; padding: 1.25rem; border: 1px solid #dce2ea; border-radius: 16px; background: white; color: #101a34; text-decoration: none; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.subject-entry-card.physics { --card-accent:#087a96; }
.subject-entry-card.chemistry { --card-accent:#14765b; }
.subject-entry-card:hover { transform: translateY(-3px); border-color: var(--card-accent); box-shadow: 0 18px 40px rgba(20,35,70,.1); }
.subject-entry-symbol { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb,var(--card-accent) 12%,white); color: var(--card-accent); font: 800 1.15rem Georgia,serif; }
.subject-entry-card small { color: var(--card-accent); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.subject-entry-card h3 { margin: .25rem 0 .45rem; font: 500 1.65rem Georgia,serif; }
.subject-entry-card p { margin: 0; color: #69768a; font-size: .82rem; }
.entry-arrow { color: var(--card-accent); font-size: 1.3rem; }
.system-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #d8dfe9; border-radius: 16px; background: white; overflow: hidden; }
.system-steps li { min-height: 190px; padding: 1.2rem; border-right: 1px solid #dfe4ec; }
.system-steps li:last-child { border-right: 0; }
.system-steps span { display: block; color: #17839a; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.system-steps strong { display: block; margin-top: 2rem; font: 500 1.45rem Georgia,serif; }
.system-steps p { margin: .45rem 0 0; color: #677488; font-size: .8rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 1.2rem; border: 1px solid #d9e0e9; border-radius: 16px; background: white; }
.price-card.featured { border: 2px solid #137c91; box-shadow: 0 18px 48px rgba(17,108,127,.11); }
.popular-label { position: absolute; top: -13px; right: 14px; padding: .28rem .55rem; border-radius: 99px; background: #137c91; color: white; font-size: .66rem; font-weight: 900; }
.plan-kicker { color: #758196; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.price-card h3 { margin: .35rem 0; color: #101a34; font: 500 1.5rem Georgia,serif; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; margin: .55rem 0; }
.plan-price strong { font: 500 2.25rem Georgia,serif; letter-spacing: -.04em; }
.plan-price span { color: #748196; font-size: .72rem; }
.price-card ul { flex: 1; margin: .65rem 0 1.2rem; padding-left: 1.05rem; color: #59677d; font-size: .78rem; }
.price-card li + li { margin-top: .45rem; }
.plan-button { width: 100%; }
.pricing-note { margin: 1rem 0 0; color: #6e7a8e; font-size: .76rem; }
.landing-footer { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 1rem; align-items: center; padding: 2rem max(1rem,calc((100% - 1240px)/2)); background: #101a34; color: #aeb9cb; font-size: .74rem; }
.landing-footer p { margin: 0; text-align: center; }
.landing-footer > a:last-child { justify-self: end; color: #d8dfeb; }

@media (max-width:980px) {
  .landing-topbar { grid-template-columns: 1fr auto; }
  .landing-nav { display: none; }
  .landing-hero { grid-template-columns: 1fr; min-height: 0; }
  .rank-preview { width: min(620px,100%); }
  .subject-entry-grid { grid-template-columns: 1fr; }
  .subject-entry-card { min-height: 0; }
  .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-steps { grid-template-columns: repeat(2,1fr); }
  .system-steps li:nth-child(2) { border-right: 0; }
  .system-steps li:nth-child(-n+2) { border-bottom: 1px solid #dfe4ec; }
}
@media (max-width:640px) {
  .landing-hero,.subject-entry,.how-it-works,.pricing-section { width: min(100% - 1.2rem,1240px); }
  .landing-hero { padding-top: 3rem; }
  .hero-copy h1 { font-size: clamp(2.75rem,14vw,4.4rem); }
  .landing-section-head { display: grid; gap: .75rem; }
  .rank-line { grid-template-columns: 92px 1fr; }
  .rank-line strong { display: none; }
  .pricing-grid,.system-steps { grid-template-columns: 1fr; }
  .system-steps li { min-height: 150px; border-right: 0; border-bottom: 1px solid #dfe4ec; }
  .system-steps li:last-child { border-bottom: 0; }
  .landing-footer { grid-template-columns: 1fr; text-align: left; }
  .landing-footer p { text-align: left; }
  .landing-footer > a:last-child { justify-self: start; }
}