:root {
  --bg: #f7f4ee;
  --bg-strong: #eee9df;
  --surface: #fffdf8;
  --surface-2: #f2eee5;
  --ink: #17211b;
  --muted: #5f6963;
  --line: rgba(23, 33, 27, 0.13);
  --green: #244f3d;
  --green-dark: #17372a;
  --green-soft: #dce9df;
  --lime: #d8ee78;
  --lime-strong: #c4e55c;
  --violet: #927ee7;
  --violet-soft: #e8e2ff;
  --orange: #ff9460;
  --orange-soft: #ffe2d3;
  --blue: #6d9ce8;
  --blue-soft: #dce9ff;
  --danger: #a64b3e;
  --shadow-sm: 0 8px 24px rgba(23, 33, 27, 0.08);
  --shadow-md: 0 18px 50px rgba(23, 33, 27, 0.12);
  --shadow-lg: 0 32px 90px rgba(23, 33, 27, 0.18);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --container: 1180px;
  --header-height: 78px;
  --transition: 180ms ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 760px;
  margin-bottom: 26px;
  font-size: clamp(3.3rem, 6.1vw, 6.7rem);
  font-weight: 760;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(2.35rem, 4.5vw, 4.6rem);
  font-weight: 740;
}

h3 {
  margin-bottom: 14px;
  font-size: clamp(1.32rem, 2vw, 1.78rem);
  font-weight: 720;
}

h1 em,
h2 em {
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

p {
  color: var(--muted);
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: clamp(84px, 10vw, 144px);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
  transform: translateY(-160%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 87%, transparent);
  backdrop-filter: blur(16px);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.site-header.scrolled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 30px rgba(23, 33, 27, 0.05);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--green);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.brand-mark svg {
  width: 27px;
  height: 27px;
}

.brand > span:last-child {
  display: grid;
  line-height: 1.05;
}

.brand strong {
  font-size: 1.1rem;
  letter-spacing: -0.025em;
}

.brand small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
}

.primary-nav a,
.text-link {
  color: #354039;
  font-size: 0.91rem;
  font-weight: 650;
  transition: color var(--transition);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  color: var(--green);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.menu-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 720;
  line-height: 1.15;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  background: var(--green);
  color: white;
  box-shadow: 0 12px 30px rgba(36, 79, 61, 0.2);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--green-dark);
  box-shadow: 0 16px 36px rgba(36, 79, 61, 0.26);
}

.button-secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(36, 79, 61, .32);
  box-shadow: var(--shadow-sm);
}

.button-dark {
  background: var(--ink);
  color: white;
}

.button-dark:hover,
.button-dark:focus-visible {
  background: #090e0b;
  box-shadow: 0 14px 30px rgba(10, 18, 13, .2);
}

.button-light {
  background: var(--lime);
  color: var(--green-dark);
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--lime-strong);
  box-shadow: 0 16px 36px rgba(216, 238, 120, .2);
}

.button-outline-light {
  border-color: rgba(255,255,255,.28);
  color: white;
}

.button-outline-light:hover,
.button-outline-light:focus-visible {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
}

.button-large {
  min-height: 58px;
  padding: 16px 27px;
}

.button-small {
  min-height: 42px;
  padding: 10px 17px;
  font-size: .88rem;
}

.button-full {
  width: 100%;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-weight: 750;
}

.card-link span {
  transition: transform var(--transition);
}

.card-link:hover span,
.card-link:focus-visible span {
  transform: translateX(5px);
}

/* Shared headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.eyebrow-light {
  color: var(--lime);
}

.section-heading {
  max-width: 790px;
  margin-bottom: 58px;
}

.section-heading > p:last-child {
  max-width: 620px;
  margin-bottom: 0;
  font-size: 1.08rem;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading.centered > p:last-child {
  margin-inline: auto;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: end;
  gap: 50px;
  max-width: none;
}

.split-heading > p {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

/* Hero */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
  padding: clamp(76px, 8vw, 120px) 0 clamp(92px, 10vw, 150px);
}

.hero::before {
  position: absolute;
  top: 4%;
  left: -14%;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 238, 120, .28), transparent 68%);
  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  right: -8%;
  bottom: -20%;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 126, 231, .13), transparent 68%);
  content: "";
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(440px, .98fr);
  align-items: center;
  gap: clamp(46px, 7vw, 96px);
}

.hero-copy {
  padding-top: 12px;
}

.hero-copy h1 em {
  display: block;
}

.hero-lead {
  max-width: 690px;
  margin-bottom: 34px;
  font-size: clamp(1.05rem, 1.5vw, 1.27rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-note {
  margin: 12px 0 0 8px;
  font-size: .78rem;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 36px;
  color: #475249;
  font-size: .88rem;
  font-weight: 650;
}

.trust-strip > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.check {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: .72rem;
  font-weight: 900;
}

.hero-visual {
  position: relative;
  min-height: 620px;
}

.visual-orbit {
  position: absolute;
  border: 1px solid rgba(36, 79, 61, .1);
  border-radius: 50%;
}

.visual-orbit-one {
  top: 2%;
  right: -9%;
  width: 530px;
  height: 530px;
}

.visual-orbit-two {
  top: 15%;
  right: 5%;
  width: 390px;
  height: 390px;
}

.book-mockup {
  position: absolute;
  z-index: 2;
  bottom: 34px;
  left: 0;
  width: 262px;
  height: 390px;
  border-radius: 5px 19px 19px 5px;
  transform: rotate(-7deg) skewY(1deg);
  transform-origin: bottom center;
  filter: drop-shadow(0 28px 34px rgba(23, 33, 27, .24));
}

.book-mockup::after {
  position: absolute;
  right: 2px;
  bottom: -9px;
  left: 11px;
  height: 12px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(to right, #d9d1c4, #fffaf0 55%, #d3cabe);
  content: "";
  transform: skewX(35deg);
}

.book-spine {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 24px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(to right, #152f24, #2d604b);
  box-shadow: inset -2px 0 4px rgba(0,0,0,.18);
}

.book-cover {
  position: absolute;
  inset: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  padding: 26px 25px 25px 33px;
  overflow: hidden;
  border-radius: 0 17px 17px 0;
  background:
    radial-gradient(circle at 84% 24%, rgba(216,238,120,.21), transparent 28%),
    linear-gradient(155deg, #2d604b 0%, #17382a 68%, #10261c 100%);
  color: white;
}

.book-cover::before {
  position: absolute;
  right: -70px;
  bottom: 30px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(216, 238, 120, .23);
  border-radius: 50%;
  content: "";
}

.book-cover::after {
  position: absolute;
  right: -30px;
  bottom: 70px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(216, 238, 120, .21);
  border-radius: 50%;
  content: "";
}

.cover-topline,
.cover-bottom {
  position: relative;
  z-index: 1;
  color: var(--lime);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .15em;
}

.cover-symbol {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  margin: 34px 0 24px;
  color: var(--lime);
}

.cover-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: var(--lime);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .16em;
}

.book-cover h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  color: white;
  font-size: 2rem;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.book-cover > p:not(.cover-kicker) {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  line-height: 1.45;
}

.cover-bottom {
  margin-top: auto;
  color: rgba(255,255,255,.55);
  font-size: .52rem;
}

.app-mockup {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 0;
  width: min(440px, 82%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: rotate(2deg);
}

.app-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #f2efe8;
}

.app-window-bar > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3cdc1;
}

.app-window-bar small {
  margin-left: auto;
  color: #7c857f;
  font-size: .64rem;
  font-weight: 700;
}

.app-body {
  padding: 25px;
}

.app-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.app-welcome > div:first-child {
  display: grid;
}

.app-welcome small,
.progress-card small,
.next-step-card small {
  color: #7c857f;
  font-size: .68rem;
}

.app-welcome strong {
  font-size: 1.05rem;
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--violet-soft);
  color: #604cb5;
  font-size: .82rem;
  font-weight: 800;
}

.progress-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 17px;
  margin-bottom: 15px;
  padding: 18px;
  border-radius: 18px;
  background: var(--green-dark);
  color: white;
}

.progress-card > div:last-child {
  display: grid;
}

.progress-card small {
  color: rgba(255,255,255,.58);
}

.progress-card strong {
  margin: 2px 0 4px;
  font-size: .96rem;
}

.progress-card p {
  margin: 0;
  color: rgba(255,255,255,.67);
  font-size: .66rem;
  line-height: 1.4;
}

.progress-ring {
  --size: 62px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--lime) calc(var(--progress) * 1%), rgba(255,255,255,.12) 0);
}

.progress-ring::after {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-dark);
  content: "";
}

.progress-ring span {
  position: relative;
  z-index: 1;
  font-size: .72rem;
  font-weight: 800;
}

.next-step-card {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(36,79,61,.12);
  border-radius: 15px;
  background: #edf5ef;
}

.next-step-card > div {
  display: grid;
}

.next-step-card strong {
  font-size: .75rem;
}

.next-step-card button {
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: var(--green);
  color: white;
  font-size: .62rem;
  font-weight: 800;
}

.mini-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: .8rem;
  font-weight: 900;
}

.skill-row {
  display: grid;
  grid-template-columns: 61px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}

.skill-row:last-child {
  border-bottom: 0;
}

.skill-row p {
  margin: 0;
  color: #364039;
  font-size: .7rem;
  font-weight: 650;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
}

.status-done {
  background: #dff0e2;
  color: #2d6d45;
}

.status-learning {
  background: var(--violet-soft);
  color: #5f4cac;
}

.status-repeat {
  background: var(--orange-soft);
  color: #99502c;
}

.status-start {
  background: #ece9e2;
  color: #777e78;
}

.floating-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 15px;
  background: rgba(255,253,248,.94);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.floating-card > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--green-dark);
  font-weight: 900;
}

.floating-card > div {
  display: grid;
}

.floating-card strong {
  font-size: .68rem;
}

.floating-card small {
  color: var(--muted);
  font-size: .57rem;
}

.floating-card-one {
  top: 33%;
  left: -5%;
  animation: float 5.6s ease-in-out infinite;
}

.floating-card-two {
  right: -3%;
  bottom: 10%;
  animation: float 6.4s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Choice cards */
.choice-section {
  border-top: 1px solid var(--line);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.choice-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(23,33,27,.03);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.choice-card:hover {
  border-color: rgba(36,79,61,.25);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}

.choice-card h3 {
  margin-top: 28px;
}

.choice-card p {
  margin-bottom: 28px;
}

.choice-card .card-link {
  margin-top: auto;
}

.icon-box {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.icon-lime {
  background: var(--lime);
  color: var(--green-dark);
}

.icon-violet {
  background: var(--violet-soft);
  color: #5c47ad;
}

.icon-orange {
  background: var(--orange-soft);
  color: #9c4e29;
}

/* Problem */
.problem-section {
  background: var(--green-dark);
  color: white;
}

.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
}

.problem-copy h2,
.problem-copy h2 em {
  color: white;
}

.problem-copy h2 em {
  color: var(--lime);
}

.problem-copy p:not(.eyebrow) {
  margin-bottom: 32px;
  color: rgba(255,255,255,.67);
  font-size: 1.08rem;
}

.problem-list {
  display: grid;
  gap: 13px;
}

.problem-item {
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.045);
  transition: background var(--transition), transform var(--transition);
}

.problem-item:hover {
  background: rgba(255,255,255,.075);
  transform: translateX(5px);
}

.problem-item span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: rgba(216,238,120,.13);
  color: var(--lime);
  font-size: 1.05rem;
  font-weight: 900;
}

.problem-item p {
  margin: 0;
  color: rgba(255,255,255,.85);
  font-weight: 650;
}

/* How */
.how-section {
  position: relative;
}

.steps-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.steps-line {
  position: absolute;
  z-index: 0;
  left: 50%;
  width: min(calc(100% - 160px), 1040px);
  height: 1px;
  margin-top: 47px;
  background: linear-gradient(to right, transparent, rgba(36,79,61,.24) 12%, rgba(36,79,61,.24) 88%, transparent);
  transform: translateX(-50%);
}

.step-card {
  position: relative;
  padding: 0 8px;
}

.step-number {
  position: absolute;
  top: -11px;
  right: 10px;
  color: rgba(36,79,61,.12);
  font-family: Georgia, serif;
  font-size: 3.7rem;
  line-height: 1;
}

.step-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 30px;
  border: 1px solid rgba(36,79,61,.15);
  border-radius: 24px;
  background: var(--surface);
  color: var(--green);
  box-shadow: var(--shadow-sm);
}

.step-icon svg {
  width: 32px;
  height: 32px;
}

.step-card p {
  margin: 0;
  font-size: .95rem;
}

/* Progress section */
.progress-section {
  background: var(--surface-2);
}

.progress-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(54px, 8vw, 110px);
}

.progress-demo {
  padding: 28px;
  border: 1px solid rgba(23,33,27,.1);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 27px;
}

.demo-toolbar > div {
  display: grid;
}

.demo-toolbar small,
.module-head span,
.module-head small,
.topic-item small,
.readiness-card small {
  color: #7b837e;
  font-size: .73rem;
}

.demo-toolbar strong {
  font-size: 1.15rem;
}

.demo-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf5ef;
  color: var(--green);
  font-size: .64rem;
  font-weight: 800;
}

.module-progress {
  margin-bottom: 24px;
  padding: 18px;
  border-radius: 17px;
  background: var(--green-dark);
}

.module-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  color: white;
}

.module-head span,
.module-head small {
  color: rgba(255,255,255,.58);
}

.module-head strong {
  font-size: .88rem;
}

.module-bar {
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.module-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
}

.topic-list {
  display: grid;
  gap: 2px;
}

.topic-item {
  display: grid;
  grid-template-columns: 15px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 15px 5px;
  border-bottom: 1px solid var(--line);
}

.topic-item > div {
  display: grid;
}

.topic-item strong {
  font-size: .82rem;
}

.topic-item.muted strong {
  color: #8c928e;
}

.topic-dot {
  width: 10px;
  height: 10px;
  border: 2px solid #cbc8c0;
  border-radius: 50%;
}

.topic-dot.done {
  border-color: #5a9b6c;
  background: #5a9b6c;
}

.topic-dot.active {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(146,126,231,.13);
}

.topic-dot.repeat {
  border-color: var(--orange);
  background: var(--orange);
}

.readiness-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding: 17px;
  border-radius: 17px;
  background: #f5f1dc;
}

.readiness-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--lime);
  color: var(--green-dark);
  font-weight: 900;
}

.readiness-card > div:last-child {
  display: grid;
}

.readiness-card strong {
  font-size: .92rem;
}

.readiness-card p {
  margin: 1px 0 0;
  font-size: .72rem;
}

.progress-copy > p:not(.eyebrow) {
  margin-bottom: 30px;
  font-size: 1.08rem;
}

.audience-switch {
  display: inline-flex;
  gap: 5px;
  margin-bottom: 24px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.audience-switch button {
  min-width: 115px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
}

.audience-switch button.active {
  background: var(--green);
  color: white;
  box-shadow: 0 5px 15px rgba(36,79,61,.2);
}

.benefit-list {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.benefit-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 11px;
  color: #3d4841;
}

.benefit-list li span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .68rem;
  font-weight: 900;
}

/* Paths */
.paths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.path-card {
  display: flex;
  min-height: 400px;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform var(--transition), box-shadow var(--transition);
}

.path-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}

.path-card-featured {
  background:
    radial-gradient(circle at 95% 10%, rgba(216,238,120,.16), transparent 33%),
    var(--green-dark);
  color: white;
}

.path-card-featured h3,
.path-card-featured .path-category {
  color: white;
}

.path-card-featured > p:not(.path-category),
.path-card-featured li {
  color: rgba(255,255,255,.68);
}

.path-top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.path-label,
.availability {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.label-soft {
  background: #ede9df;
  color: #5e665f;
}

.path-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: rgba(216,238,120,.14);
  color: var(--lime);
  font-size: .74rem;
  font-weight: 850;
}

.path-symbol-violet {
  background: var(--violet-soft);
  color: #5c47ae;
}

.path-symbol-orange {
  background: var(--orange-soft);
  color: #984b28;
}

.path-symbol-blue {
  background: var(--blue-soft);
  color: #3d67ae;
}

.path-category {
  margin-bottom: 9px;
  color: var(--green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.path-card h3 {
  max-width: 480px;
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
}

.path-card > p:not(.path-category) {
  max-width: 530px;
}

.path-card ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 5px 0 28px;
  list-style: none;
  color: var(--muted);
  font-size: .88rem;
}

.path-card li::before {
  margin-right: 9px;
  color: var(--lime);
  content: "✓";
  font-weight: 900;
}

.path-card .button,
.path-card .card-link {
  margin-top: auto;
}

.availability {
  margin: 8px 0 27px;
  background: #f1eee7;
  color: #69716b;
}

/* Pricing */
.offer-section {
  background: var(--surface-2);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 18px;
}

.pricing-card {
  position: relative;
  display: flex;
  min-height: 525px;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(23,33,27,.03);
}

.pricing-card.pricing-featured {
  border-color: rgba(36,79,61,.32);
  box-shadow: var(--shadow-md);
  transform: translateY(-13px);
}

.popular-label {
  position: absolute;
  top: -14px;
  left: 50%;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}

.pricing-head > p:first-of-type {
  margin-bottom: 6px;
  color: var(--green);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-head h3 {
  font-size: 2rem;
}

.pricing-icon {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  margin-bottom: 27px;
  border-radius: 17px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 900;
}

.pricing-note {
  min-height: 54px;
  font-size: .92rem;
}

.pricing-card ul {
  display: grid;
  gap: 14px;
  padding: 22px 0 28px;
  margin: 15px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pricing-card li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  color: #465049;
  font-size: .88rem;
}

.pricing-card li span {
  color: var(--green);
  font-weight: 900;
}

.pricing-card .button {
  margin-top: auto;
}

.launch-form-card {
  display: grid;
  grid-template-columns: 1fr minmax(360px, .8fr);
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  padding: 34px 38px;
  border-radius: var(--radius-md);
  background: var(--green-dark);
  color: white;
}

.launch-form-card h3 {
  margin: 8px 0 10px;
  color: white;
  font-size: 1.65rem;
}

.launch-form-card p {
  margin-bottom: 0;
  color: rgba(255,255,255,.62);
}

.launch-label {
  color: var(--lime);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.inline-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.inline-form input {
  min-width: 0;
  height: 52px;
  padding: 0 17px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  outline: 0;
  background: rgba(255,255,255,.08);
  color: white;
}

.inline-form input::placeholder {
  color: rgba(255,255,255,.45);
}

.inline-form input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216,238,120,.12);
}

.inline-form .button {
  min-height: 52px;
  background: var(--lime);
  color: var(--green-dark);
  box-shadow: none;
}

.inline-form .form-message {
  position: absolute;
  top: calc(100% + 5px);
  left: 15px;
  margin: 0;
  font-size: .68rem;
}

/* Tutoring */
.tutoring-section {
  background: var(--green-dark);
  color: white;
}

.tutoring-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(420px, .72fr);
  align-items: start;
  gap: clamp(50px, 8vw, 112px);
}

.tutoring-copy h2,
.tutoring-copy h2 em {
  color: white;
}

.tutoring-copy h2 em {
  color: var(--lime);
}

.tutoring-copy > p:not(.eyebrow) {
  color: rgba(255,255,255,.68);
  font-size: 1.05rem;
}

.tutoring-points {
  display: grid;
  gap: 15px;
  margin: 34px 0 30px;
}

.tutoring-points > div {
  display: grid;
  grid-template-columns: 33px 1fr;
  gap: 12px;
  align-items: start;
}

.tutoring-points span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: rgba(216,238,120,.13);
  color: var(--lime);
  font-size: .72rem;
  font-weight: 850;
}

.tutoring-points p {
  margin: 2px 0 0;
  color: rgba(255,255,255,.68);
}

.tutoring-points strong {
  color: white;
}

.subject-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subject-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.67);
  font-size: .72rem;
  font-weight: 650;
}

.tutoring-form-card {
  padding: 32px;
  border-radius: 26px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 60px rgba(0,0,0,.2);
}

.form-card-head small {
  color: var(--green);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.form-card-head h3 {
  margin: 8px 0;
  font-size: 1.8rem;
}

.form-card-head p {
  margin-bottom: 24px;
  font-size: .84rem;
}

.tutoring-form,
.field {
  display: grid;
}

.tutoring-form {
  gap: 15px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field label {
  margin-bottom: 6px;
  color: #485149;
  font-size: .74rem;
  font-weight: 750;
}

.field input,
.field select,
.field textarea,
.result-lead input {
  width: 100%;
  border: 1px solid rgba(23,33,27,.15);
  border-radius: 12px;
  outline: 0;
  background: #fbfaf6;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field input,
.field select {
  height: 48px;
  padding: 0 13px;
}

.field textarea {
  min-height: 108px;
  padding: 12px 13px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.result-lead input:focus {
  border-color: var(--green);
  background: white;
  box-shadow: 0 0 0 3px rgba(36,79,61,.08);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--green);
}

.form-message {
  min-height: 1.1em;
  margin: 0;
  color: var(--green);
  font-size: .75rem;
}

.form-message.error {
  color: var(--danger);
}

/* Author */
.author-grid {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(55px, 9vw, 130px);
}

.author-visual {
  position: relative;
  min-height: 500px;
}

.portrait-placeholder {
  position: absolute;
  inset: 0 50px 45px 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border-radius: 180px 180px 34px 34px;
  background:
    radial-gradient(circle at 50% 35%, rgba(216,238,120,.26), transparent 22%),
    linear-gradient(145deg, #2c5d49, #17372a);
  color: white;
  box-shadow: var(--shadow-lg);
}

.portrait-placeholder > span {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(216,238,120,.32);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: 3rem;
}

.portrait-placeholder small {
  color: rgba(255,255,255,.48);
  font-size: .7rem;
}

.author-card-note {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: .82rem;
  line-height: 1.4;
}

.author-copy > p:not(.eyebrow) {
  font-size: 1.02rem;
}

.author-copy > p strong {
  color: var(--ink);
}

.author-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-top: 34px;
}

.author-proof > div {
  display: grid;
  gap: 5px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}

.author-proof strong {
  color: var(--green);
  font-size: .77rem;
}

.author-proof small {
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.4;
}

/* FAQ */
.faq-section {
  background: var(--surface-2);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(50px, 8vw, 115px);
}

.faq-grid .section-heading {
  position: sticky;
  top: calc(var(--header-height) + 40px);
  margin-bottom: 0;
}

.accordion {
  border-top: 1px solid var(--line);
}

.accordion-item {
  border-bottom: 1px solid var(--line);
}

.accordion-item h3 {
  margin: 0;
}

.accordion-item button {
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 1.06rem;
  font-weight: 720;
}

.accordion-item button span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 500;
  transition: transform var(--transition), background var(--transition);
}

.accordion-item button[aria-expanded="true"] span {
  background: var(--green);
  color: white;
  transform: rotate(45deg);
}

.accordion-panel {
  padding: 0 64px 25px 0;
}

.accordion-panel p {
  margin: 0;
}

/* Final CTA */
.final-cta {
  background: var(--surface-2);
  padding-top: 0;
}

.final-cta-card {
  display: grid;
  grid-template-columns: 1.3fr auto;
  align-items: center;
  gap: 50px;
  padding: clamp(38px, 6vw, 72px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 10%, rgba(216,238,120,.13), transparent 28%),
    var(--green-dark);
  color: white;
}

.final-cta-card h2,
.final-cta-card h2 em {
  color: white;
}

.final-cta-card h2 {
  max-width: 800px;
  margin-bottom: 17px;
  font-size: clamp(2.3rem, 4.2vw, 4.4rem);
}

.final-cta-card h2 em {
  color: var(--lime);
}

.final-cta-card p:not(.eyebrow) {
  max-width: 700px;
  margin-bottom: 0;
  color: rgba(255,255,255,.65);
}

.final-actions {
  display: grid;
  gap: 10px;
  min-width: 245px;
}

/* Footer */
.site-footer {
  padding: 70px 0 24px;
  border-top: 1px solid var(--line);
  background: #eeeae1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, .7fr);
  gap: 48px;
  padding-bottom: 55px;
}

.brand-footer {
  margin-bottom: 17px;
}

.footer-grid > div:first-child > p,
.footer-grid > div:last-child p {
  max-width: 300px;
  font-size: .8rem;
}

.footer-grid > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-grid > div:not(:first-child) strong {
  margin-bottom: 5px;
  font-size: .82rem;
}

.footer-grid a,
.footer-grid button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
}

.footer-grid a:hover,
.footer-grid button:hover {
  color: var(--green);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #7a817c;
  font-size: .7rem;
}

/* Diagnostic dialog */
.diagnostic-dialog {
  width: min(1000px, calc(100% - 30px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 30px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 35px 100px rgba(0,0,0,.32);
}

.diagnostic-dialog::backdrop {
  background: rgba(13, 22, 17, .68);
  backdrop-filter: blur(7px);
}

.dialog-shell {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 640px;
}

.dialog-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  transition: background var(--transition), transform var(--transition);
}

.dialog-close:hover,
.dialog-close:focus-visible {
  background: var(--surface-2);
  transform: rotate(8deg);
}

.dialog-sidebar {
  display: flex;
  flex-direction: column;
  padding: 42px 34px;
  background:
    radial-gradient(circle at 15% 85%, rgba(216,238,120,.13), transparent 25%),
    var(--green-dark);
  color: white;
}

.dialog-brand {
  margin-bottom: 5px;
  color: var(--lime);
  font-size: 1.15rem;
  font-weight: 800;
}

.dialog-sidebar > p {
  color: rgba(255,255,255,.57);
  font-size: .78rem;
}

.dialog-progress {
  display: grid;
  gap: 22px;
  padding: 0;
  margin: 55px 0 0;
  list-style: none;
}

.dialog-progress li {
  position: relative;
  display: grid;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.42);
  font-size: .82rem;
  font-weight: 700;
}

.dialog-progress li:not(:last-child)::after {
  position: absolute;
  top: 35px;
  left: 17px;
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.14);
  content: "";
}

.dialog-progress li span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  font-size: .7rem;
}

.dialog-progress li.active,
.dialog-progress li.complete {
  color: white;
}

.dialog-progress li.active span {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--green-dark);
}

.dialog-progress li.complete span {
  border-color: rgba(216,238,120,.35);
  color: var(--lime);
}

.dialog-tip {
  margin-top: auto;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}

.dialog-tip strong {
  color: var(--lime);
  font-size: .74rem;
}

.dialog-tip p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.52);
  font-size: .68rem;
  line-height: 1.5;
}

.dialog-content {
  position: relative;
  min-height: 640px;
  overflow: auto;
  padding: 58px 62px;
}

.diagnostic-screen {
  display: none;
  min-height: 100%;
}

.diagnostic-screen.active {
  display: block;
  animation: screenIn 240ms ease both;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.diagnostic-screen h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.subject-options {
  display: grid;
  gap: 11px;
  margin-top: 32px;
}

.subject-options button {
  display: grid;
  grid-template-columns: 53px 1fr auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.subject-options button::after {
  content: "→";
  color: var(--green);
  font-weight: 900;
}

.subject-options button:hover,
.subject-options button:focus-visible {
  border-color: rgba(36,79,61,.3);
  background: #fbfcf8;
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.subject-options button > span:nth-child(2) {
  display: grid;
}

.subject-options strong {
  font-size: .94rem;
}

.subject-options small {
  color: var(--muted);
  font-size: .72rem;
}

.subject-code {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: .76rem;
  font-weight: 850;
}

.code-blue {
  background: var(--blue-soft);
  color: #3f67a8;
}

.code-orange {
  background: var(--orange-soft);
  color: #944923;
}

.quiz-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.question-counter {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}

.quiz-progress {
  height: 5px;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e4dc;
}

.quiz-progress span {
  display: block;
  width: 33.33%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width 280ms ease;
}

.question-block h2 {
  margin-bottom: 27px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

.answer-options {
  display: grid;
  gap: 10px;
}

.answer-option {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.answer-option:hover,
.answer-option:focus-visible {
  border-color: rgba(36,79,61,.31);
  background: #f6faf6;
  transform: translateX(3px);
}

.answer-option .answer-letter {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--green);
  font-size: .7rem;
  font-weight: 850;
}

.answer-option.correct-preview {
  border-color: #5a9b6c;
  background: #edf7ef;
}

.result-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 9px 0 25px;
  border-radius: 20px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: 1.5rem;
  font-weight: 900;
}

.result-score {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .74rem;
  font-weight: 800;
}

.result-copy {
  max-width: 580px;
  margin-bottom: 22px;
  font-size: 1rem;
}

.result-recommendation {
  max-width: 590px;
  margin-bottom: 24px;
  padding: 17px 19px;
  border-left: 4px solid var(--lime-strong);
  border-radius: 0 14px 14px 0;
  background: #f5f4e8;
}

.result-recommendation strong {
  display: block;
  margin-bottom: 3px;
  color: var(--green);
}

.result-recommendation p {
  margin: 0;
  font-size: .82rem;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.result-lead {
  max-width: 590px;
  margin-top: 28px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}

.result-lead > label {
  display: block;
  margin-bottom: 8px;
  color: #465149;
  font-size: .75rem;
  font-weight: 750;
}

.result-lead > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.result-lead input {
  height: 50px;
  padding: 0 14px;
}

.result-lead .button {
  min-height: 50px;
}

.result-lead .form-message {
  margin-top: 5px;
}

/* Toast */
.toast {
  position: fixed;
  z-index: 1000;
  right: 22px;
  bottom: 22px;
  max-width: 360px;
  padding: 13px 17px;
  border-radius: 13px;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow-lg);
  font-size: .78rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--transition), transform var(--transition);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Focus */
:focus-visible {
  outline: 3px solid rgba(146,126,231,.48);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 1080px) {
  .header-inner {
    grid-template-columns: auto auto 1fr;
  }

  .primary-nav {
    gap: 18px;
  }

  .primary-nav a {
    font-size: .82rem;
  }

  .header-actions .text-link {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr 480px;
    gap: 36px;
  }

  .hero-visual {
    min-height: 590px;
    transform: scale(.92);
    transform-origin: center right;
  }

  .floating-card-one {
    left: 0;
  }

  .pricing-card {
    padding: 27px;
  }

  .tutoring-grid {
    grid-template-columns: 1fr 430px;
    gap: 48px;
  }

  .author-proof {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.3fr repeat(3, .7fr);
    gap: 30px;
  }
}

@media (max-width: 920px) {
  :root {
    --header-height: 70px;
  }

  .container {
    width: min(calc(100% - 30px), var(--container));
  }

  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 14px;
  }

  .menu-toggle {
    display: block;
    grid-column: 3;
  }

  .header-actions {
    display: none;
  }

  .primary-nav {
    position: fixed;
    top: var(--header-height);
    right: 15px;
    left: 15px;
    display: grid;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--transition), transform var(--transition);
  }

  .primary-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .primary-nav a {
    padding: 13px 14px;
    border-radius: 11px;
    font-size: .9rem;
  }

  .primary-nav a:hover {
    background: var(--surface-2);
  }

  .hero {
    padding-top: 74px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy h1,
  .hero-lead {
    margin-inline: auto;
  }

  .hero-actions,
  .trust-strip {
    justify-content: center;
  }

  .hero-note {
    margin-left: 0;
  }

  .hero-visual {
    width: min(620px, 100%);
    min-height: 590px;
    margin-inline: auto;
    transform: none;
  }

  .choice-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .choice-card {
    min-height: 280px;
  }

  .problem-grid,
  .progress-grid,
  .tutoring-grid,
  .author-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 45px 25px;
  }

  .steps-line {
    display: none;
  }

  .split-heading {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pricing-card,
  .pricing-card.pricing-featured {
    min-height: auto;
    transform: none;
  }

  .launch-form-card {
    grid-template-columns: 1fr;
  }

  .tutoring-form-card {
    width: min(600px, 100%);
    margin-inline: auto;
  }

  .author-visual {
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .author-proof {
    grid-template-columns: repeat(3, 1fr);
  }

  .faq-grid .section-heading {
    position: static;
  }

  .final-cta-card {
    grid-template-columns: 1fr;
  }

  .final-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .dialog-shell {
    grid-template-columns: 230px 1fr;
  }

  .dialog-content {
    padding: 50px 38px;
  }

  .dialog-sidebar {
    padding: 36px 25px;
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  h2 {
    font-size: clamp(2.25rem, 10vw, 3.4rem);
  }

  .section {
    padding-block: 84px;
  }

  .hero-actions,
  .final-actions {
    display: grid;
    width: 100%;
  }

  .hero-actions .button,
  .final-actions .button {
    width: 100%;
  }

  .trust-strip {
    gap: 12px 18px;
  }

  .hero-visual {
    min-height: 520px;
  }

  .app-mockup {
    width: 84%;
  }

  .book-mockup {
    bottom: 22px;
    width: 210px;
    height: 313px;
  }

  .book-cover {
    padding: 20px 18px 20px 28px;
  }

  .cover-symbol {
    width: 48px;
    height: 48px;
    margin: 24px 0 16px;
  }

  .book-cover h2 {
    font-size: 1.55rem;
  }

  .floating-card-one {
    top: 38%;
    left: -2%;
  }

  .floating-card-two {
    right: 0;
    bottom: 4%;
  }

  .floating-card {
    padding: 9px 11px;
  }

  .floating-card strong {
    font-size: .59rem;
  }

  .floating-card small {
    font-size: .5rem;
  }

  .choice-card,
  .path-card,
  .pricing-card {
    padding: 27px;
  }

  .steps-grid,
  .paths-grid {
    grid-template-columns: 1fr;
  }

  .step-card {
    display: grid;
    grid-template-columns: 68px 1fr;
    column-gap: 18px;
  }

  .step-icon {
    grid-row: 1 / span 2;
    width: 65px;
    height: 65px;
    margin: 0;
  }

  .step-number {
    right: 0;
  }

  .step-card h3 {
    margin: 4px 0 7px;
  }

  .progress-demo {
    padding: 19px;
  }

  .topic-item {
    grid-template-columns: 12px 1fr;
  }

  .topic-item .status {
    grid-column: 2;
    margin-top: 4px;
  }

  .launch-form-card {
    padding: 28px 24px;
  }

  .inline-form,
  .result-lead > div {
    grid-template-columns: 1fr;
  }

  .inline-form .form-message {
    position: static;
    grid-column: 1;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .author-visual {
    min-height: 430px;
  }

  .portrait-placeholder {
    right: 28px;
  }

  .author-proof {
    grid-template-columns: 1fr;
  }

  .accordion-item button {
    font-size: .95rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > div:first-child,
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .diagnostic-dialog {
    width: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .dialog-shell {
    display: block;
    min-height: 100dvh;
  }

  .dialog-sidebar {
    display: none;
  }

  .dialog-content {
    min-height: 100dvh;
    padding: 70px 24px 36px;
  }

  .subject-options button {
    grid-template-columns: 47px 1fr auto;
    padding: 14px;
  }

  .subject-code {
    width: 44px;
    height: 44px;
  }

  .result-actions {
    display: grid;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .brand small {
    display: none;
  }

  .hero {
    padding-top: 56px;
  }

  .hero-visual {
    min-height: 460px;
  }

  .app-mockup {
    width: 94%;
  }

  .app-body {
    padding: 18px;
  }

  .book-mockup {
    bottom: 6px;
    left: -5px;
    width: 175px;
    height: 262px;
  }

  .book-cover h2 {
    font-size: 1.2rem;
  }

  .cover-symbol {
    width: 36px;
    height: 36px;
    margin: 16px 0 13px;
  }

  .cover-topline,
  .cover-bottom,
  .book-cover > p:not(.cover-kicker) {
    font-size: .44rem;
  }

  .cover-kicker {
    font-size: .48rem;
  }

  .floating-card-one {
    top: 42%;
  }

  .floating-card-two {
    display: none;
  }

  .problem-item {
    grid-template-columns: 38px 1fr;
    padding: 16px;
  }

  .problem-item span {
    width: 36px;
    height: 36px;
  }

  .progress-card {
    grid-template-columns: 58px 1fr;
  }

  .progress-ring {
    --size: 52px;
  }

  .progress-ring::after {
    width: 40px;
    height: 40px;
  }

  .demo-toolbar {
    align-items: flex-start;
  }

  .demo-badge {
    display: none;
  }

  .module-head {
    grid-template-columns: 1fr auto;
  }

  .module-head span {
    display: none;
  }

  .audience-switch {
    width: 100%;
  }

  .audience-switch button {
    flex: 1;
    min-width: 0;
  }

  .tutoring-form-card {
    padding: 24px 20px;
  }

  .portrait-placeholder {
    inset: 0 10px 60px 0;
  }

  .author-card-note {
    right: 0;
    max-width: 210px;
  }

  .final-cta-card {
    padding: 36px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ========================================================================== 
   Visual refinement v2 — unified scale, spacing and responsive composition
   ========================================================================== */

:root {
  --bg: #f6f3ec;
  --bg-strong: #ece7dc;
  --surface: #fffdf9;
  --surface-2: #f0ece3;
  --ink: #142019;
  --muted: #657068;
  --line: rgba(20, 32, 25, .12);
  --line-strong: rgba(20, 32, 25, .2);
  --green: #245541;
  --green-dark: #123528;
  --green-soft: #dcebe1;
  --lime: #d9ef75;
  --lime-strong: #c9e95b;
  --shadow-sm: 0 8px 24px rgba(20, 32, 25, .07);
  --shadow-md: 0 20px 50px rgba(20, 32, 25, .11);
  --shadow-lg: 0 34px 90px rgba(20, 32, 25, .17);
  --radius-sm: 13px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --container: 1200px;
}

html {
  background: var(--bg);
}

body {
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 380px),
    var(--bg);
}

.container {
  width: min(calc(100% - 48px), var(--container));
}

.section {
  padding-block: clamp(78px, 8.5vw, 116px);
}

h1 {
  max-width: 670px;
  margin-bottom: 24px;
  font-size: clamp(3.45rem, 5.35vw, 5.85rem);
  line-height: .99;
  letter-spacing: -.055em;
}

h2 {
  font-size: clamp(2.35rem, 4.1vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.047em;
}

h3 {
  letter-spacing: -.03em;
}

p {
  text-wrap: pretty;
}

/* Header */
.site-header {
  background: color-mix(in srgb, var(--bg) 91%, transparent);
}

.site-header.scrolled {
  box-shadow: 0 10px 36px rgba(20, 32, 25, .06);
}

.header-inner {
  max-width: var(--container);
}

.brand-mark {
  box-shadow: 0 10px 22px rgba(36, 85, 65, .16);
}

.primary-nav {
  gap: 26px;
}

.primary-nav a {
  position: relative;
  padding-block: 8px;
}

.primary-nav a::after {
  position: absolute;
  right: 50%;
  bottom: 2px;
  left: 50%;
  height: 2px;
  border-radius: 99px;
  background: var(--green);
  content: "";
  transition: right var(--transition), left var(--transition);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  right: 0;
  left: 0;
}

/* Shared headings */
.section-heading {
  max-width: 760px;
  margin-bottom: 48px;
}

.section-heading > p:last-child {
  max-width: 600px;
  font-size: 1.02rem;
}

.split-heading {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .62fr);
  gap: 64px;
}

.eyebrow {
  margin-bottom: 18px;
  font-size: .72rem;
  letter-spacing: .11em;
}

.eyebrow span {
  width: 28px;
}

/* Hero */
.hero {
  min-height: auto;
  padding: clamp(66px, 7vw, 96px) 0 clamp(86px, 8vw, 116px);
}

.hero::before {
  top: -12%;
  left: -18%;
  width: 54vw;
  height: 54vw;
  opacity: .75;
}

.hero::after {
  right: -16%;
  bottom: -38%;
  opacity: .7;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(450px, .98fr);
  gap: clamp(46px, 6vw, 78px);
}

.hero-copy {
  z-index: 2;
  padding-top: 0;
}

.hero-copy h1 em {
  margin-top: 4px;
}

.hero-lead {
  max-width: 620px;
  margin-bottom: 30px;
  font-size: clamp(1.04rem, 1.25vw, 1.18rem);
  line-height: 1.72;
}

.hero-actions {
  gap: 10px;
}

.hero-note {
  margin-top: 10px;
}

.trust-strip {
  gap: 12px;
  margin-top: 30px;
}

.trust-strip > div {
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(36, 85, 65, .08);
  border-radius: 999px;
  background: rgba(255, 253, 249, .64);
}

.hero-visual {
  min-height: 575px;
  border: 1px solid rgba(36, 85, 65, .1);
  border-radius: 40px;
  background:
    linear-gradient(rgba(36,85,65,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,85,65,.035) 1px, transparent 1px),
    radial-gradient(circle at 68% 20%, rgba(217,239,117,.32), transparent 36%),
    radial-gradient(circle at 18% 88%, rgba(146,126,231,.15), transparent 34%),
    rgba(255,253,249,.66);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.hero-visual::before {
  position: absolute;
  z-index: 1;
  top: 25px;
  left: 28px;
  padding: 7px 11px;
  border: 1px solid rgba(36,85,65,.1);
  border-radius: 999px;
  background: rgba(255,253,249,.82);
  color: var(--green);
  content: "książka + portal";
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.visual-orbit {
  opacity: .72;
}

.visual-orbit-one {
  top: 7%;
  right: -22%;
  width: 490px;
  height: 490px;
}

.visual-orbit-two {
  top: 20%;
  right: -4%;
  width: 350px;
  height: 350px;
}

.book-mockup {
  bottom: 38px;
  left: 24px;
  width: 246px;
  height: 367px;
  transform: rotate(-5deg);
}

.app-mockup {
  top: 62px;
  right: 22px;
  width: min(430px, 82%);
  border-radius: 23px;
  transform: rotate(1deg);
}

.app-body {
  padding: 22px;
}

.floating-card {
  border: 1px solid rgba(20,32,25,.08);
  background: rgba(255,253,249,.92);
  backdrop-filter: blur(12px);
}

.floating-card-one {
  top: 47%;
  left: 2%;
}

.floating-card-two {
  right: 4%;
  bottom: 4%;
}

/* Start choices */
.choice-section {
  position: relative;
  background: #fbf9f4;
}

.choice-section::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0, rgba(217,239,117,.16), transparent 32%);
  content: "";
  pointer-events: none;
}

.choice-section .container {
  position: relative;
}

.choice-grid {
  gap: 16px;
}

.choice-card {
  min-height: 290px;
  padding: 30px;
  overflow: hidden;
  border-color: rgba(20,32,25,.1);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(20,32,25,.035);
}

.choice-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--lime-strong);
  content: "";
}

.choice-card:nth-child(2)::before {
  background: var(--violet);
}

.choice-card:nth-child(3)::before {
  background: var(--orange);
}

.choice-card:hover {
  border-color: rgba(36,85,65,.18);
  box-shadow: var(--shadow-md);
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.choice-card h3 {
  max-width: 300px;
  font-size: 1.55rem;
}

.choice-card p {
  max-width: 340px;
  font-size: .94rem;
}

/* Problem section */
.problem-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(76px, 8vw, 108px);
  background:
    radial-gradient(circle at 0 100%, rgba(217,239,117,.08), transparent 32%),
    radial-gradient(circle at 100% 0, rgba(146,126,231,.09), transparent 30%),
    var(--green-dark);
}

.problem-section::after {
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  content: "";
}

.problem-grid {
  grid-template-columns: minmax(0, .92fr) minmax(430px, .78fr);
  gap: clamp(56px, 8vw, 110px);
}

.problem-copy h2 {
  max-width: 650px;
}

.problem-list {
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 25px;
  background: rgba(255,255,255,.035);
}

.problem-item {
  min-height: 64px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.problem-item:hover {
  background: rgba(255,255,255,.08);
}

/* Process */
.how-section {
  background: var(--bg);
}

.steps-line {
  top: 83px;
  right: 9%;
  left: 9%;
  border-top-style: dashed;
}

.steps-grid {
  gap: 14px;
}

.step-card {
  position: relative;
  min-height: 265px;
  padding: 26px 24px 24px;
  border: 1px solid rgba(20,32,25,.1);
  border-radius: 22px;
  background: rgba(255,253,249,.72);
  box-shadow: 0 10px 28px rgba(20,32,25,.035);
}

.step-card:hover {
  border-color: rgba(36,85,65,.2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.step-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(20,32,25,.08);
}

.step-number {
  top: 22px;
  right: 22px;
  color: rgba(36,85,65,.3);
  font-size: .76rem;
}

.step-card h3 {
  margin-bottom: 10px;
  font-size: 1.42rem;
}

.step-card p {
  margin-bottom: 0;
  font-size: .9rem;
}

/* Progress */
.progress-section {
  background:
    radial-gradient(circle at 0 20%, rgba(217,239,117,.14), transparent 28%),
    #fbf9f4;
}

.progress-grid {
  grid-template-columns: minmax(480px, .95fr) minmax(0, .8fr);
  gap: clamp(56px, 8vw, 112px);
}

.progress-demo {
  border: 1px solid rgba(20,32,25,.11);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: rotate(-.45deg);
}

.progress-demo::after {
  position: absolute;
  z-index: -1;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgba(36,85,65,.08);
  border-radius: 28px;
  content: "";
}

.topic-item {
  border-radius: 14px;
}

.readiness-card {
  border: 1px solid rgba(36,85,65,.08);
  border-radius: 17px;
}

.progress-copy h2 {
  max-width: 570px;
}

.audience-switch {
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.audience-switch button {
  min-height: 42px;
  padding: 8px 17px;
}

.benefit-list {
  gap: 13px;
}

.benefit-list li {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(20,32,25,.08);
}

.benefit-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Learning paths */
.paths-section {
  background: var(--bg);
}

.paths-grid {
  grid-auto-rows: 1fr;
  gap: 16px;
}

.path-card {
  min-height: 370px;
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(20,32,25,.035);
}

.path-card:hover {
  border-color: rgba(36,85,65,.2);
  box-shadow: var(--shadow-md);
}

.path-card-featured {
  box-shadow: 0 22px 54px rgba(18,53,40,.18);
}

.path-top {
  margin-bottom: 28px;
}

.path-symbol {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}

.path-card h3 {
  font-size: clamp(1.55rem, 2.1vw, 2.08rem);
}

.path-card > p:not(.path-category) {
  font-size: .94rem;
}

/* Offer */
.offer-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), transparent 300px),
    var(--surface-2);
}

.pricing-grid {
  gap: 16px;
}

.pricing-card {
  min-height: 500px;
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(20,32,25,.04);
}

.pricing-card.pricing-featured {
  border-color: rgba(36,85,65,.28);
  box-shadow: 0 24px 58px rgba(20,32,25,.12);
  transform: translateY(-8px);
}

.pricing-head h3 {
  font-size: 1.82rem;
}

.pricing-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border-radius: 15px;
}

.launch-form-card {
  margin-top: 30px;
  padding: 30px 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(18,53,40,.14);
}

/* Tutoring */
.tutoring-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 90%, rgba(217,239,117,.08), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(146,126,231,.08), transparent 28%),
    var(--green-dark);
}

.tutoring-grid {
  grid-template-columns: minmax(0, .94fr) minmax(410px, .72fr);
  gap: clamp(54px, 7.5vw, 100px);
}

.tutoring-copy h2 {
  max-width: 690px;
}

.tutoring-points {
  gap: 10px;
}

.tutoring-points > div {
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.tutoring-form-card {
  padding: 29px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 24px;
  box-shadow: 0 28px 65px rgba(0,0,0,.22);
}

.field input,
.field select,
.field textarea,
.result-lead input {
  border-radius: 11px;
  background: #f9f8f4;
}

/* Author — custom graphic instead of an empty photo placeholder */
.author-section {
  background: #fbf9f4;
}

.author-grid {
  grid-template-columns: minmax(380px, .82fr) minmax(0, 1.12fr);
  gap: clamp(58px, 8vw, 116px);
}

.author-visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(36,85,65,.1);
  border-radius: 32px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 20% 18%, rgba(217,239,117,.18), transparent 30%),
    var(--green-dark);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: var(--shadow-md);
}

.author-visual::before,
.author-visual::after {
  position: absolute;
  border: 1px solid rgba(217,239,117,.15);
  border-radius: 50%;
  content: "";
}

.author-visual::before {
  top: 80px;
  right: -105px;
  width: 360px;
  height: 360px;
}

.author-visual::after {
  top: 145px;
  right: -35px;
  width: 220px;
  height: 220px;
}

.portrait-placeholder {
  display: none;
}

.author-profile-card {
  position: absolute;
  z-index: 3;
  top: 34px;
  right: 34px;
  left: 34px;
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
}

.author-monogram {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.author-profile-card > div:last-child {
  display: grid;
  gap: 4px;
}

.author-profile-card strong {
  color: white;
  font-size: 1rem;
}

.author-profile-card small {
  color: rgba(255,255,255,.58);
  font-size: .7rem;
}

.method-map {
  position: absolute;
  z-index: 2;
  top: 175px;
  right: 30px;
  left: 30px;
  height: 190px;
}

.method-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background: rgba(255,255,255,.075);
  color: white;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}

.method-node span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--green-dark);
  font-size: .72rem;
  font-weight: 900;
}

.method-node small {
  color: rgba(255,255,255,.72);
  font-size: .69rem;
  font-weight: 750;
}

.method-node-start {
  top: 58px;
  left: 0;
}

.method-node-middle {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.method-node-end {
  top: 58px;
  right: 0;
}

.method-line {
  position: absolute;
  z-index: 1;
  top: 88px;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, rgba(217,239,117,.2), var(--lime), rgba(217,239,117,.2));
}

.method-line::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  content: "";
}

.method-line-one {
  left: 13%;
  transform: rotate(-13deg);
  transform-origin: left center;
}

.method-line-two {
  right: 13%;
  transform: rotate(13deg);
  transform-origin: right center;
}

.author-card-note {
  position: absolute;
  z-index: 3;
  right: 34px;
  bottom: 34px;
  left: 34px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.075);
  color: white;
  backdrop-filter: blur(12px);
}

.note-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--lime);
  color: var(--green-dark);
  font-weight: 900;
}

.author-card-note strong {
  color: white;
  font-size: .83rem;
  line-height: 1.4;
}

.author-copy h2 {
  max-width: 690px;
}

.author-proof {
  gap: 10px;
}

.author-proof > div {
  min-height: 112px;
  padding: 16px;
  border-radius: 16px;
}

/* FAQ + final CTA */
.faq-section {
  background: var(--surface-2);
}

.faq-grid {
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.22fr);
  gap: clamp(56px, 8vw, 110px);
}

.accordion-item button {
  padding: 22px 0;
}

.final-cta-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  box-shadow: 0 24px 58px rgba(18,53,40,.15);
}

.site-footer {
  background: #ebe7dd;
}

/* Tablet */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(410px, .9fr);
    gap: 36px;
  }

  .hero-visual {
    min-height: 540px;
  }

  .book-mockup {
    left: 10px;
    width: 226px;
    height: 338px;
  }

  .app-mockup {
    right: 10px;
    width: 82%;
  }

  .problem-grid,
  .tutoring-grid {
    gap: 54px;
  }

  .author-grid {
    grid-template-columns: minmax(340px, .75fr) minmax(0, 1fr);
    gap: 58px;
  }
}

@media (max-width: 920px) {
  .container {
    width: min(calc(100% - 36px), var(--container));
  }

  .primary-nav a::after {
    display: none;
  }

  .hero {
    padding-top: 58px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .hero-copy {
    max-width: 760px;
    margin-inline: auto;
  }

  .hero-visual {
    width: min(660px, 100%);
    min-height: 545px;
  }

  .problem-grid,
  .progress-grid,
  .tutoring-grid,
  .author-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .problem-copy,
  .tutoring-copy,
  .author-copy {
    max-width: 720px;
  }

  .problem-list,
  .tutoring-form-card {
    width: min(640px, 100%);
    margin-inline: auto;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-card {
    min-height: 240px;
  }

  .progress-demo {
    width: min(650px, 100%);
    margin-inline: auto;
  }

  .progress-copy {
    max-width: 680px;
  }

  .author-visual {
    width: min(620px, 100%);
    min-height: 480px;
    margin-inline: auto;
  }

  .faq-grid .section-heading {
    max-width: 680px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding-block: 72px;
  }

  h1 {
    max-width: 560px;
    font-size: clamp(2.85rem, 13vw, 4.05rem);
    line-height: 1;
  }

  h2 {
    font-size: clamp(2.15rem, 9.7vw, 3.15rem);
  }

  .hero {
    padding: 44px 0 72px;
  }

  .hero-grid {
    gap: 34px;
  }

  .hero-copy .eyebrow {
    max-width: 320px;
    margin-inline: auto;
  }

  .hero-copy h1 em {
    margin-top: 8px;
  }

  .hero-lead {
    max-width: 540px;
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.65;
  }

  .hero-note {
    margin-top: 9px;
  }

  .trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    margin-top: 24px;
  }

  .trust-strip > div {
    justify-content: center;
    padding: 7px 5px;
    font-size: .68rem;
  }

  .check {
    width: 18px;
    height: 18px;
  }

  .hero-visual {
    min-height: 430px;
    border-radius: 28px;
  }

  .hero-visual::before {
    top: 16px;
    left: 16px;
    font-size: .55rem;
  }

  .visual-orbit-one {
    width: 340px;
    height: 340px;
  }

  .visual-orbit-two {
    width: 240px;
    height: 240px;
  }

  .app-mockup {
    top: 46px;
    right: 10px;
    width: 84%;
    transform: rotate(.7deg) scale(.82);
    transform-origin: top right;
  }

  .book-mockup {
    bottom: 20px;
    left: 12px;
    width: 188px;
    height: 281px;
  }

  .floating-card-one {
    top: 48%;
    left: 4%;
    transform: scale(.86);
    transform-origin: left center;
  }

  .floating-card-two {
    display: none;
  }

  .choice-card {
    min-height: 0;
    padding: 25px;
  }

  .choice-card h3 {
    max-width: none;
  }

  .problem-list {
    padding: 7px;
  }

  .problem-item {
    min-height: 58px;
    padding: 13px 14px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .step-card {
    min-height: 0;
    padding: 20px;
    grid-template-columns: 54px 1fr;
  }

  .step-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .step-number {
    top: 18px;
    right: 18px;
  }

  .progress-demo {
    padding: 16px;
    border-radius: 22px;
    transform: none;
  }

  .progress-demo::after {
    display: none;
  }

  .demo-toolbar {
    gap: 10px;
  }

  .demo-badge {
    display: none;
  }

  .module-head {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }

  .topic-item {
    padding: 12px 9px;
  }

  .paths-grid,
  .pricing-grid {
    gap: 12px;
  }

  .path-card,
  .pricing-card {
    min-height: 0;
    padding: 25px;
    border-radius: 21px;
  }

  .pricing-card.pricing-featured {
    transform: none;
  }

  .launch-form-card {
    padding: 25px;
  }

  .tutoring-form-card {
    padding: 23px;
  }

  .author-visual {
    min-height: 420px;
    border-radius: 26px;
  }

  .author-profile-card {
    top: 22px;
    right: 22px;
    left: 22px;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 13px;
  }

  .author-monogram {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: .72rem;
  }

  .author-profile-card strong {
    font-size: .88rem;
  }

  .author-profile-card small {
    font-size: .61rem;
  }

  .method-map {
    top: 145px;
    right: 22px;
    left: 22px;
  }

  .method-node {
    width: 70px;
    height: 70px;
    border-radius: 20px;
  }

  .method-node small {
    font-size: .59rem;
  }

  .method-line {
    top: 78px;
  }

  .method-node-start,
  .method-node-end {
    top: 48px;
  }

  .author-card-note {
    right: 22px;
    bottom: 22px;
    left: 22px;
    grid-template-columns: 38px 1fr;
    padding: 13px;
  }

  .note-mark {
    width: 38px;
    height: 38px;
  }

  .final-cta-card {
    padding: 28px 23px;
    border-radius: 23px;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: clamp(2.7rem, 12.5vw, 3.35rem);
  }

  .hero-copy .eyebrow {
    font-size: .62rem;
  }

  .hero-visual {
    min-height: 385px;
  }

  .app-mockup {
    top: 42px;
    width: 88%;
    transform: rotate(.6deg) scale(.7);
  }

  .book-mockup {
    bottom: 17px;
    left: 8px;
    width: 165px;
    height: 246px;
  }

  .book-cover h2 {
    font-size: 1.25rem;
  }

  .cover-symbol {
    margin-top: 18px;
  }

  .floating-card-one {
    top: 52%;
    left: 0;
    transform: scale(.75);
  }

  .trust-strip > div {
    display: grid;
    gap: 3px;
    padding: 7px 3px;
    line-height: 1.25;
  }

  .method-map {
    right: 12px;
    left: 12px;
  }

  .method-node {
    width: 64px;
    height: 64px;
  }
}


/* StudyPath portal/book integration */
.subject-options button:disabled,
.subject-options button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  filter: saturate(.45);
  transform: none !important;
  box-shadow: none !important;
}

.question-passage {
  margin: 0 0 1.15rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, var(--green-soft));
  color: var(--ink-soft);
  line-height: 1.7;
}

.diagnostic-loading {
  display: grid;
  min-height: 16rem;
  place-items: center;
  padding: 2rem;
  color: var(--ink-soft);
  font-weight: 700;
  text-align: center;
}

.path-card [data-subject-count] {
  font-variant-numeric: tabular-nums;
}

/* Commerce links are activated only after a valid Empik URL is loaded. */
.button-disabled,
[aria-disabled="true"].button {
  opacity: 0.62;
  cursor: not-allowed;
  pointer-events: none;
}
.path-actions,
.product-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.product-buttons { margin-top: 1rem; }

/* ========================================================================== 
   StudyPath 2026 — cover-aligned visual system
   Premium navy/cobalt palette derived from the published book covers.
   ========================================================================== */
:root {
  --bg: #f3f7fc;
  --bg-strong: #e7eef8;
  --surface: #ffffff;
  --surface-2: #edf3fb;
  --ink: #071a35;
  --muted: #5b6980;
  --line: rgba(14, 54, 105, 0.14);
  --green: #1767d5;
  --green-dark: #082b65;
  --green-soft: #dceaff;
  --lime: #85c9ff;
  --lime-strong: #58b5ff;
  --violet: #5d7fe8;
  --violet-soft: #e6ebff;
  --orange: #53a9f0;
  --orange-soft: #dff2ff;
  --blue: #2e78df;
  --blue-soft: #dceaff;
  --shadow-sm: 0 10px 28px rgba(5, 28, 65, 0.08);
  --shadow-md: 0 22px 58px rgba(5, 28, 65, 0.13);
  --shadow-lg: 0 34px 96px rgba(2, 18, 48, 0.24);
}

body {
  background:
    radial-gradient(circle at 86% 9%, rgba(66, 137, 235, .10), transparent 34rem),
    var(--bg);
}

.site-header,
.site-header.scrolled {
  border-bottom-color: rgba(135, 188, 255, .16);
  background: rgba(4, 19, 44, .94);
  box-shadow: 0 12px 34px rgba(2, 14, 36, .18);
  backdrop-filter: blur(18px);
}

.brand strong {
  background: linear-gradient(100deg, #ffffff 0%, #eef5ff 46%, #79b9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.035em;
}

.brand small,
.site-header .text-link,
.site-header .primary-nav a {
  color: rgba(232, 242, 255, .74);
}

.site-header .text-link:hover,
.site-header .text-link:focus-visible,
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus-visible {
  color: #8fcbff;
}

.brand-mark {
  border: 1px solid rgba(134, 197, 255, .26);
  background:
    radial-gradient(circle at 70% 25%, rgba(91, 176, 255, .45), transparent 45%),
    linear-gradient(145deg, #0b397d, #041a3c);
  color: #9bd4ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.2);
}

.button-primary {
  border-color: rgba(120, 190, 255, .2);
  background: linear-gradient(135deg, #2b83ef 0%, #155fd1 58%, #0d48ac 100%);
  color: white;
  box-shadow: 0 12px 28px rgba(20, 91, 205, .24);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: linear-gradient(135deg, #4a9cff 0%, #1b6cdd 60%, #1051bd 100%);
  box-shadow: 0 15px 34px rgba(20, 91, 205, .32);
}

.button-secondary {
  border-color: rgba(22, 88, 174, .22);
  background: rgba(255,255,255,.82);
  color: #0a326f;
}

.eyebrow {
  color: #216fce;
}

.eyebrow span {
  background: linear-gradient(90deg, #2f84ef, #82caff);
}

h1 em,
h2 em {
  color: #1d6acb;
}

/* Cover-like hero */
.hero {
  isolation: isolate;
  background:
    linear-gradient(rgba(53, 127, 229, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 127, 229, .055) 1px, transparent 1px),
    radial-gradient(circle at 84% 24%, rgba(64, 137, 238, .42), transparent 32rem),
    radial-gradient(circle at 64% 85%, rgba(20, 92, 204, .18), transparent 30rem),
    linear-gradient(128deg, #031126 0%, #061c3e 48%, #0a2f69 100%);
  background-size: 40px 40px, 40px 40px, auto, auto, auto;
}

.hero::before {
  top: auto;
  left: auto;
  right: 2%;
  bottom: -28%;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle, rgba(91, 167, 255, .26), transparent 67%);
  opacity: 1;
}

.hero::after {
  right: auto;
  bottom: auto;
  top: -28%;
  left: -18%;
  width: 54vw;
  height: 54vw;
  background: radial-gradient(circle, rgba(16, 72, 153, .36), transparent 68%);
}

.hero-copy {
  color: white;
}

.hero-copy .eyebrow {
  color: #8bcaff;
}

.hero-copy .eyebrow span {
  background: linear-gradient(90deg, #5aafff, #c4e6ff);
}

.hero-copy h1 {
  color: #f6f9ff;
  text-shadow: 0 2px 18px rgba(0,0,0,.16);
}

.hero-copy h1 em {
  background: linear-gradient(100deg, #ffffff 0%, #a8d7ff 38%, #5ca7f8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead,
.hero-note {
  color: rgba(228, 239, 255, .79);
}

.hero .button-secondary {
  border-color: rgba(176, 214, 255, .35);
  background: rgba(7, 32, 72, .54);
  color: #eff7ff;
  backdrop-filter: blur(10px);
}

.hero .button-secondary:hover,
.hero .button-secondary:focus-visible {
  border-color: rgba(176, 214, 255, .58);
  background: rgba(18, 62, 124, .72);
}

.trust-strip {
  color: rgba(230, 241, 255, .88);
}

.trust-strip > div {
  border-color: rgba(143, 199, 255, .18);
  background: rgba(4, 24, 55, .44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.check {
  background: rgba(76, 160, 255, .17);
  color: #9bd3ff;
}

.hero-visual {
  overflow: hidden;
  border-color: rgba(133, 194, 255, .20);
  background:
    linear-gradient(rgba(76, 148, 239, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 148, 239, .07) 1px, transparent 1px),
    radial-gradient(circle at 80% 18%, rgba(79, 158, 255, .34), transparent 33%),
    radial-gradient(circle at 18% 88%, rgba(43, 94, 183, .32), transparent 35%),
    rgba(2, 17, 42, .48);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 80px rgba(0,0,0,.2);
  backdrop-filter: blur(4px);
}

.hero-visual::before {
  border-color: rgba(129, 191, 255, .22);
  background: rgba(4, 27, 61, .72);
  color: #9ed4ff;
  content: "repetytorium + portal";
}

.visual-orbit {
  border-color: rgba(118, 183, 255, .18);
}

.cover-stack {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.cover-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(191, 222, 255, .24);
  border-radius: 8px 18px 18px 8px;
  background: #06152f;
  box-shadow: 0 32px 58px rgba(0, 8, 25, .48), 0 0 42px rgba(42, 119, 226, .12);
  transform-origin: bottom center;
}

.cover-card img {
  width: 100%;
  height: auto;
  display: block;
}

.cover-card-math {
  bottom: 28px;
  left: 24px;
  width: 232px;
  transform: rotate(-6deg);
}

.cover-card-it {
  top: 52px;
  left: 168px;
  width: 195px;
  transform: rotate(5deg);
  opacity: .94;
}

.app-mockup {
  top: 96px;
  right: 16px;
  width: min(380px, 72%);
  border-color: rgba(156, 200, 255, .33);
  border-radius: 22px;
  box-shadow: 0 30px 72px rgba(0, 8, 28, .42);
  transform: rotate(1deg);
}

.app-window-bar {
  border-bottom-color: #d7e3f3;
  background: #eaf1fa;
}

.app-window-bar > span {
  background: #aabbd2;
}

.floating-card {
  border-color: rgba(139, 195, 255, .23);
  background: rgba(5, 28, 62, .88);
  box-shadow: 0 18px 42px rgba(0, 8, 28, .36);
}

.floating-card strong { color: #f2f7ff; }
.floating-card small { color: rgba(216, 233, 255, .70); }
.floating-card > span {
  background: rgba(68, 151, 246, .18);
  color: #9ed5ff;
}

/* Sections and cards */
.choice-section {
  background: #f7faff;
}

.choice-section::before {
  background: radial-gradient(circle at 50% 0, rgba(54, 126, 222, .10), transparent 34%);
}

.choice-card,
.path-card,
.pricing-card,
.tutoring-form-card,
.accordion-item {
  border-color: rgba(13, 69, 139, .12);
  box-shadow: 0 18px 46px rgba(5, 34, 76, .07);
}

.choice-card:hover,
.path-card:hover {
  border-color: rgba(32, 103, 195, .28);
  box-shadow: 0 24px 58px rgba(5, 34, 76, .12);
}

.icon-lime,
.icon-violet,
.icon-orange {
  background: #e4efff;
  color: #125ab7;
}

.problem-section {
  background:
    radial-gradient(circle at 82% 20%, rgba(64, 139, 233, .20), transparent 28rem),
    linear-gradient(130deg, #04142f 0%, #08275a 100%);
}

.problem-section .button-light {
  color: #08275a;
}

.steps-line {
  background: linear-gradient(90deg, rgba(28, 101, 196, .15), #2f7fe1, rgba(28, 101, 196, .15));
}

.step-number,
.step-icon {
  color: #1767d5;
}

.progress-demo {
  border-color: rgba(20, 88, 174, .16);
  background: #ffffff;
  box-shadow: 0 28px 78px rgba(5, 31, 72, .12);
}

.progress-demo::after {
  border-color: rgba(40, 112, 207, .09);
}

.demo-badge,
.path-label,
.availability,
.launch-label,
.popular-label {
  background: #dceaff;
  color: #0d4d9f;
}

.module-bar > span {
  background: linear-gradient(90deg, #1f6fd7, #63b9ff);
}

.path-card-featured,
.pricing-card.pricing-featured {
  border-color: rgba(105, 175, 255, .30);
  background:
    radial-gradient(circle at 90% 5%, rgba(77, 160, 255, .24), transparent 18rem),
    linear-gradient(145deg, #061a3b 0%, #0a3778 100%);
  color: #f6f9ff;
  box-shadow: 0 28px 76px rgba(2, 22, 55, .20);
}

.path-card-featured p,
.path-card-featured li,
.path-card-featured .path-category,
.pricing-card.pricing-featured p,
.pricing-card.pricing-featured li {
  color: rgba(226, 239, 255, .78);
}

.path-card-featured h3,
.pricing-card.pricing-featured h3 {
  color: #ffffff;
}

.path-card-featured .path-label,
.pricing-card.pricing-featured .popular-label {
  background: rgba(130, 195, 255, .16);
  color: #a8d8ff;
}

.path-symbol {
  border-color: rgba(37, 108, 199, .18);
  background: #e4efff;
  color: #0e56b1;
}

.path-card-featured .path-symbol {
  border-color: rgba(152, 207, 255, .22);
  background: rgba(123, 192, 255, .13);
  color: #b8e0ff;
}

.launch-form-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  border-color: rgba(107, 176, 255, .24);
  background:
    radial-gradient(circle at 92% 20%, rgba(69, 153, 255, .26), transparent 18rem),
    linear-gradient(135deg, #06162f 0%, #092b60 100%);
  color: white;
}

.launch-form-card h3 { color: white; }
.launch-form-card p { color: rgba(225, 238, 255, .76); }
.launch-form-card .launch-label {
  background: rgba(121, 190, 255, .17);
  color: #a9d8ff;
}

.launch-cover-miniatures {
  display: flex;
  align-items: flex-end;
  min-width: 205px;
  padding-right: 6px;
}

.launch-cover-miniatures img {
  width: 108px;
  border: 1px solid rgba(205, 230, 255, .25);
  border-radius: 5px 10px 10px 5px;
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
}

.launch-cover-miniatures img:first-child {
  transform: rotate(-5deg);
}

.launch-cover-miniatures img:last-child {
  margin-left: -22px;
  transform: rotate(5deg) translateY(-7px);
}

.consultation-checklist {
  display: grid;
  gap: 12px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.consultation-checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  color: var(--ink);
}

.consultation-checklist span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dceaff;
  color: #125cb9;
  font-size: .75rem;
  font-weight: 900;
}

.author-visual {
  background:
    linear-gradient(rgba(75, 145, 234, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 145, 234, .06) 1px, transparent 1px),
    radial-gradient(circle at 70% 18%, rgba(64, 144, 244, .24), transparent 34%),
    linear-gradient(145deg, #04152f, #0a3775);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.method-node,
.author-profile-card,
.author-card-note {
  border-color: rgba(145, 201, 255, .22);
  background: rgba(7, 30, 66, .78);
  color: white;
}

.method-node small,
.author-profile-card small { color: rgba(222, 237, 255, .68); }
.method-line { background: rgba(105, 177, 255, .5); }

.final-cta-card {
  border: 1px solid rgba(127, 190, 255, .24);
  background:
    radial-gradient(circle at 88% 14%, rgba(79, 161, 255, .28), transparent 20rem),
    linear-gradient(135deg, #04152f 0%, #0a397d 100%);
  box-shadow: 0 30px 76px rgba(2, 22, 55, .22);
}

.site-footer {
  background:
    radial-gradient(circle at 82% 15%, rgba(56, 133, 230, .18), transparent 25rem),
    #031126;
}

.site-footer .brand strong {
  font-size: 1.28rem;
}

/* Diagnostic */
.diagnostic-dialog {
  --dialog-accent: #246fd1;
}

.dialog-sidebar {
  background:
    radial-gradient(circle at 80% 18%, rgba(80, 163, 255, .25), transparent 18rem),
    linear-gradient(155deg, #04152f, #0a3879);
}

.subject-options button:hover,
.subject-options button:focus-visible,
.subject-options button[aria-pressed="true"] {
  border-color: rgba(30, 105, 201, .40);
  box-shadow: 0 12px 28px rgba(10, 70, 150, .12);
}

@media (max-width: 980px) {
  .site-header {
    background: rgba(4, 19, 44, .97);
  }

  .primary-nav.open {
    border-color: rgba(133, 194, 255, .18);
    background: #061b3d;
    box-shadow: 0 20px 42px rgba(0,0,0,.28);
  }

  .header-actions .text-link {
    color: rgba(232, 242, 255, .80);
  }

  .cover-card-math {
    left: 16px;
    width: 218px;
  }

  .cover-card-it {
    left: 150px;
    width: 182px;
  }

  .app-mockup {
    right: 10px;
    width: min(360px, 70%);
  }
}

@media (max-width: 720px) {
  .hero-visual {
    min-height: 525px;
  }

  .cover-card-math {
    bottom: 24px;
    left: 14px;
    width: 190px;
  }

  .cover-card-it {
    top: 46px;
    left: 116px;
    width: 160px;
  }

  .app-mockup {
    top: 118px;
    right: 8px;
    width: 68%;
    transform: rotate(1deg) scale(.88);
    transform-origin: top right;
  }

  .launch-form-card {
    grid-template-columns: 1fr;
  }

  .launch-cover-miniatures {
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .hero-visual {
    min-height: 460px;
  }

  .cover-card-math {
    bottom: 20px;
    left: 8px;
    width: 156px;
  }

  .cover-card-it {
    top: 48px;
    left: 88px;
    width: 132px;
  }

  .app-mockup {
    top: 132px;
    right: -26px;
    width: 80%;
    transform: rotate(1deg) scale(.72);
  }

  .floating-card-one {
    top: 56%;
    left: -6px;
  }
}

/* English product access codes shown on the public landing page. */
.book-code-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.book-code-badges code {
  padding: .3rem .52rem;
  border: 1px solid rgba(66, 137, 235, .28);
  border-radius: 8px;
  background: #eef5ff;
  color: #0d4f9f;
  font-size: .8rem;
  letter-spacing: .035em;
}

/* ============================================================
   StudyPath tutoring + contact — 2026-08-18
   ============================================================ */
.tutoring-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(88, 157, 242, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 157, 242, .055) 1px, transparent 1px),
    radial-gradient(circle at 88% 10%, rgba(74, 159, 255, .26), transparent 30rem),
    linear-gradient(135deg, #031126 0%, #082b62 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  color: #fff;
}

.tutoring-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 0 58%, rgba(124, 194, 255, .07) 58.2% 58.7%, transparent 59%);
}

.tutoring-section > .container {
  position: relative;
  z-index: 1;
}

.tutoring-intro-grid,
.tutoring-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .78fr);
  align-items: start;
  gap: clamp(42px, 7vw, 92px);
}

.tutoring-copy h2,
.tutoring-copy h2 em,
.tutoring-contact-copy h3,
.tutoring-price-heading h3 {
  color: #fff;
}

.tutoring-copy h2 em {
  color: #9ed5ff;
}

.tutoring-copy > p:not(.eyebrow),
.tutoring-contact-copy > p:not(.eyebrow),
.tutoring-price-heading > p {
  color: rgba(225, 238, 255, .76);
}

.tutoring-promo-card {
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(166, 216, 255, .27);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 12%, rgba(154, 216, 255, .25), transparent 14rem),
    rgba(5, 27, 61, .78);
  box-shadow: 0 28px 70px rgba(0, 7, 24, .35);
  backdrop-filter: blur(14px);
}

.promo-label,
.price-type,
.price-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.promo-label,
.price-type {
  border: 1px solid rgba(156, 211, 255, .22);
  background: rgba(91, 171, 255, .13);
  color: #bce2ff;
}

.promo-kicker {
  margin: 26px 0 0;
  color: rgba(222, 238, 255, .66);
  font-size: .86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.promo-discount {
  display: block;
  margin: 4px 0 20px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 6vw, 5.6rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.055em;
  text-shadow: 0 0 30px rgba(113, 192, 255, .22);
}

.tutoring-promo-card h3 {
  color: #fff;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.tutoring-promo-card > p:last-of-type {
  color: rgba(224, 238, 255, .73);
}

.tutoring-price-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
  align-items: end;
  gap: 36px;
  margin-top: clamp(72px, 9vw, 118px);
  margin-bottom: 28px;
  scroll-margin-top: 110px;
}

.tutoring-price-heading h3 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}

.tutoring-price-heading > p {
  margin: 0 0 6px;
}

.tutoring-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.tutoring-price-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(143, 202, 255, .20);
  border-radius: 25px;
  background: rgba(4, 24, 55, .76);
  box-shadow: 0 22px 56px rgba(0, 7, 24, .25);
  backdrop-filter: blur(11px);
}

.tutoring-price-featured {
  border-color: rgba(177, 221, 255, .42);
  background:
    radial-gradient(circle at 80% 5%, rgba(122, 197, 255, .24), transparent 15rem),
    linear-gradient(150deg, rgba(10, 55, 118, .96), rgba(5, 29, 66, .94));
  box-shadow: 0 30px 76px rgba(0, 8, 28, .38);
  transform: translateY(-8px);
}

.price-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #e8f4ff;
  color: #0c4d9b;
}

.tutoring-price-card h3 {
  min-height: 3.3em;
  margin: 20px 0 18px;
  color: #fff;
  font-size: 1.48rem;
}

.price-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 22px;
  color: #fff;
}

.price-value strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
}

.price-value span {
  color: rgba(222, 238, 255, .64);
  font-size: .78rem;
}

.tutoring-price-card ul {
  display: grid;
  flex: 1;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.tutoring-price-card li {
  position: relative;
  padding-left: 19px;
  color: rgba(226, 239, 255, .75);
  font-size: .88rem;
}

.tutoring-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #8fd0ff;
  font-weight: 900;
}

.price-discounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}

.price-discounts span {
  padding: 10px 11px;
  border: 1px solid rgba(152, 207, 255, .14);
  border-radius: 12px;
  background: rgba(122, 191, 255, .08);
  color: rgba(218, 236, 255, .68);
  font-size: .7rem;
  line-height: 1.35;
}

.price-discounts strong {
  display: block;
  color: #fff;
  font-size: .88rem;
}

.package-note {
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(145, 202, 255, .17);
  border-radius: 15px;
  background: rgba(5, 25, 55, .58);
  color: rgba(222, 238, 255, .72);
  font-size: .82rem;
  text-align: center;
}

.package-note strong {
  color: #fff;
}

.tutoring-contact-grid {
  margin-top: clamp(72px, 9vw, 118px);
  scroll-margin-top: 108px;
}

.tutoring-contact-copy h3 {
  margin-bottom: 20px;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
}

.contact-assurances {
  display: grid;
  gap: 13px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.contact-assurances li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  color: rgba(225, 238, 255, .76);
}

.contact-assurances span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(119, 193, 255, .15);
  color: #a8dcff;
  font-size: .72rem;
  font-weight: 900;
}


.direct-contact {
  margin-top: 18px;
  display: grid;
  gap: 7px;
  color: rgba(225, 238, 255, .72);
}

.direct-contact p,
.direct-contact address {
  margin: 0;
  font-style: normal;
}

.direct-contact strong {
  color: rgba(255,255,255,.9);
}

.direct-contact a {
  color: #fff;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(159, 213, 255, .54);
  text-underline-offset: 4px;
}

.direct-email {
  color: rgba(225, 238, 255, .68) !important;
}

.direct-email a {
  color: #fff;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(159, 213, 255, .54);
  text-underline-offset: 4px;
}

.tutoring-form-card {
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid rgba(181, 215, 255, .35);
  background: #fff;
  box-shadow: 0 34px 86px rgba(0, 8, 28, .40);
}

.form-card-head small {
  color: #155eb9;
}

.form-card-head p {
  color: #657187;
}

.tutoring-form {
  gap: 16px;
}

.field label {
  color: #3f4c60;
}

.field input,
.field select,
.field textarea {
  border-color: #d4deeb;
  background: #f8faff;
  color: #172033;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #286fc9;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(40, 111, 201, .11);
}

.optional-label {
  color: #7d899b;
  font-size: .66rem;
  font-weight: 600;
}

.consent {
  color: #657187;
}

.consent input {
  accent-color: #1b65c3;
}

.consent a {
  color: #155eb9;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-status-note {
  margin: -4px 0 0;
  color: #778296;
  font-size: .7rem;
  text-align: center;
}

.honeypot-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.result-actions {
  flex-wrap: wrap;
}

@media (max-width: 1040px) {
  .tutoring-intro-grid,
  .tutoring-contact-grid {
    grid-template-columns: 1fr;
  }

  .tutoring-promo-card {
    max-width: 700px;
  }

  .tutoring-pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tutoring-price-card:last-child {
    grid-column: 1 / -1;
  }

  .tutoring-price-featured {
    transform: none;
  }
}

@media (max-width: 760px) {
  .tutoring-price-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tutoring-pricing-grid {
    grid-template-columns: 1fr;
  }

  .tutoring-price-card:last-child {
    grid-column: auto;
  }

  .tutoring-price-card h3 {
    min-height: 0;
  }

  .field-row,
  .price-discounts {
    grid-template-columns: 1fr;
  }

  .promo-discount {
    font-size: 3.65rem;
  }
}


/* =========================================================
   StudyPath P0 marketing correction — 2026-08-29
   Brand-level education + goal-first tutoring qualification
   ========================================================= */

.hero-diagnostic-link {
  display: inline-flex;
  margin-left: 5px;
  font-size: inherit;
  vertical-align: baseline;
}

.choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-card-primary {
  border-color: rgba(180, 98, 49, .25);
  background:
    radial-gradient(circle at 100% 0, rgba(244, 184, 137, .20), transparent 13rem),
    var(--surface);
  box-shadow: 0 18px 46px rgba(116, 64, 32, .08);
}

.choice-card-primary::before {
  background: var(--orange) !important;
}

.level-price-table {
  overflow: hidden;
  border: 1px solid rgba(148, 207, 255, .19);
  border-radius: 24px;
  background: rgba(4, 24, 55, .72);
  box-shadow: 0 24px 62px rgba(0, 7, 24, .24);
}

.level-price-row {
  display: grid;
  grid-template-columns: minmax(185px, 1.1fr) minmax(210px, 1.35fr) minmax(130px, .72fr) minmax(130px, .72fr);
  gap: 18px;
  align-items: center;
  min-height: 70px;
  padding: 15px 22px;
  border-top: 1px solid rgba(152, 207, 255, .10);
  color: rgba(226, 239, 255, .78);
}

.level-price-row:first-child {
  border-top: 0;
}

.level-price-row strong,
.level-price-row b {
  color: #fff;
}

.level-price-row b {
  font-size: 1.08rem;
}

.level-price-head {
  min-height: 52px;
  background: rgba(111, 184, 255, .10);
  color: #bfe3ff;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.level-price-highlight {
  background:
    linear-gradient(90deg, rgba(66, 151, 239, .13), rgba(66, 151, 239, .04));
}

.price-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border: 1px solid #cfe0f2;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2f8ff, #f9fbff);
}

.price-preview[hidden] {
  display: none;
}

.price-preview > div {
  padding: 12px 13px;
  border: 1px solid #dbe8f5;
  border-radius: 12px;
  background: #fff;
}

.price-preview small {
  display: block;
  margin-bottom: 5px;
  color: #708098;
  font-size: .66rem;
  font-weight: 700;
}

.price-preview strong {
  color: #123b70;
  font-size: 1.03rem;
}

.price-preview p {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748a;
  font-size: .7rem;
}

.field-helper {
  align-content: center;
  min-height: 72px;
  padding: 11px 13px;
  border: 1px dashed #d4deeb;
  border-radius: 12px;
  background: #fbfcff;
}

.field-helper label {
  margin-bottom: 8px;
}

.field-helper .card-link {
  color: #155eb9;
  font-size: .78rem;
  text-align: left;
}

/* Dedicated tutoring landing */
.tutoring-page {
  background: var(--bg);
}

.tutoring-page .site-header {
  background: rgba(251, 249, 244, .94);
}

.tutoring-landing-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 9vw, 132px) 0 clamp(72px, 8vw, 112px);
  background:
    radial-gradient(circle at 88% 12%, rgba(129, 193, 255, .24), transparent 24rem),
    radial-gradient(circle at 8% 92%, rgba(217, 239, 117, .14), transparent 26rem),
    linear-gradient(140deg, #04142f, #082b62);
  color: #fff;
}

.tutoring-landing-hero::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  pointer-events: none;
}

.tutoring-landing-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .72fr);
  align-items: center;
  gap: clamp(46px, 8vw, 104px);
}

.tutoring-landing-copy h1,
.tutoring-landing-copy h1 em {
  color: #fff;
}

.tutoring-landing-copy h1 em {
  display: block;
  color: #a9d9ff;
}

.tutoring-landing-copy > p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(228, 239, 255, .78);
  font-size: clamp(1.04rem, 1.4vw, 1.22rem);
  line-height: 1.7;
}

.tutoring-landing-proof {
  display: grid;
  gap: 12px;
  padding: 26px;
  border: 1px solid rgba(173, 215, 255, .25);
  border-radius: 24px;
  background: rgba(6, 28, 63, .72);
  box-shadow: 0 28px 76px rgba(0, 5, 22, .34);
}

.tutoring-landing-proof > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.tutoring-landing-proof > div:last-child {
  border-bottom: 0;
}

.tutoring-landing-proof span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(143, 208, 255, .15);
  color: #bce3ff;
  font-weight: 850;
}

.tutoring-landing-proof strong {
  display: block;
  color: #fff;
  font-size: .9rem;
}

.tutoring-landing-proof small {
  color: rgba(224, 238, 255, .6);
}

.tutoring-page-section {
  padding-block: clamp(74px, 8vw, 112px);
}

.tutoring-page-section-dark {
  background:
    radial-gradient(circle at 100% 0, rgba(75, 160, 255, .18), transparent 28rem),
    #061b3d;
  color: #fff;
}

.tutoring-page-section-dark h2,
.tutoring-page-section-dark h3 {
  color: #fff;
}

.tutoring-goal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tutoring-goal-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}

.tutoring-goal-card span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tutoring-goal-card p {
  margin-bottom: 0;
  font-size: .9rem;
}

.tutoring-page .tutoring-contact-grid {
  margin-top: 0;
}

.tutoring-page .level-price-table {
  margin-top: 30px;
}

.tutoring-page-footer {
  padding: 38px 0;
  background: #031126;
  color: rgba(255,255,255,.65);
}

.tutoring-page-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.tutoring-page-footer a {
  color: #fff;
}

@media (max-width: 1180px) {
  .choice-grid,
  .tutoring-goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .level-price-row {
    grid-template-columns: 1.1fr .9fr .8fr;
  }

  .level-price-row > :nth-child(2) {
    display: none;
  }

  .tutoring-landing-grid {
    grid-template-columns: 1fr;
  }

  .tutoring-landing-proof {
    max-width: 680px;
  }
}

@media (max-width: 700px) {
  .choice-grid,
  .tutoring-goal-grid {
    grid-template-columns: 1fr;
  }

  .hero-note {
    display: block;
  }

  .hero-diagnostic-link {
    display: inline-flex;
    margin-top: 5px;
    margin-left: 0;
  }

  .level-price-table {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .level-price-head {
    display: none;
  }

  .level-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    min-height: 0;
    margin-bottom: 10px;
    padding: 17px;
    border: 1px solid rgba(152, 207, 255, .16);
    border-radius: 16px;
    background: rgba(4, 24, 55, .70);
  }

  .level-price-row > :nth-child(2) {
    display: none;
  }

  .level-price-row strong:first-child {
    grid-column: 1 / -1;
  }

  .level-price-row > :nth-child(3)::before {
    display: block;
    margin-bottom: 3px;
    color: rgba(191, 227, 255, .58);
    content: "Standard";
    font-size: .62rem;
    text-transform: uppercase;
  }

  .level-price-row > :nth-child(4)::before {
    display: block;
    margin-bottom: 3px;
    color: rgba(191, 227, 255, .58);
    content: "Pierwsze";
    font-size: .62rem;
    text-transform: uppercase;
  }

  .price-preview {
    grid-template-columns: 1fr;
  }

  .price-preview p {
    grid-column: 1;
  }

  .tutoring-page-footer .container {
    flex-direction: column;
  }
}