/* =========================================================================
   NoteX design system
   ========================================================================= */

:root {
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --background: oklch(0.995 0.002 250);
  --foreground: oklch(0.19 0.02 265);
  --card: oklch(1 0 0);

  --primary: oklch(0.53 0.19 268);
  --primary-foreground: oklch(0.99 0.003 250);
  --primary-glow: oklch(0.66 0.17 288);

  --secondary: oklch(0.965 0.008 265);
  --secondary-foreground: oklch(0.27 0.03 265);

  --muted: oklch(0.965 0.008 265);
  --muted-foreground: oklch(0.53 0.02 265);

  --accent: oklch(0.955 0.02 280);
  --accent-foreground: oklch(0.3 0.06 275);

  --border: oklch(0.918 0.008 265);
  --ring: oklch(0.53 0.19 268);

  --study: oklch(0.6 0.14 158);
  --study-foreground: oklch(0.99 0.003 250);
  --study-soft: oklch(0.955 0.03 158);

  --prepare: oklch(0.56 0.16 250);
  --prepare-foreground: oklch(0.99 0.003 250);
  --prepare-soft: oklch(0.955 0.03 250);

  --grow: oklch(0.55 0.2 300);
  --grow-foreground: oklch(0.99 0.003 250);
  --grow-soft: oklch(0.955 0.035 300);

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow));
  --gradient-surface: linear-gradient(180deg, oklch(0.99 0.008 280), oklch(1 0 0));
  --gradient-hero: radial-gradient(
    80% 60% at 50% 0%,
    color-mix(in oklab, var(--primary) 14%, transparent),
    transparent 70%
  );

  --shadow-soft: 0 1px 2px oklch(0.2 0.03 265 / 0.04), 0 8px 24px -12px oklch(0.2 0.03 265 / 0.12);
  --shadow-lift: 0 2px 4px oklch(0.2 0.03 265 / 0.04), 0 24px 48px -20px oklch(0.2 0.03 265 / 0.22);
  --shadow-glow: 0 20px 60px -24px color-mix(in oklab, var(--primary) 55%, transparent);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);

  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);

  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);

  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);

  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);

  --border: oklch(1 0 0 / 10%);
  --ring: oklch(0.551 0.027 264.364);

  --study: oklch(0.72 0.15 158);
  --study-foreground: oklch(0.16 0.03 158);
  --study-soft: oklch(0.24 0.04 158);

  --prepare: oklch(0.72 0.13 250);
  --prepare-foreground: oklch(0.16 0.03 250);
  --prepare-soft: oklch(0.24 0.04 250);

  --grow: oklch(0.72 0.17 300);
  --grow-foreground: oklch(0.16 0.03 300);
  --grow-soft: oklch(0.24 0.045 300);

  --gradient-surface: linear-gradient(180deg, oklch(0.22 0.045 265), oklch(0.19 0.04 265));
  --gradient-hero: radial-gradient(
    80% 60% at 50% 0%,
    color-mix(in oklab, var(--primary) 22%, transparent),
    transparent 70%
  );
  --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px -12px oklch(0 0 0 / 0.5);
  --shadow-lift: 0 2px 4px oklch(0 0 0 / 0.3), 0 24px 48px -20px oklch(0 0 0 / 0.6);
}

/* --------------------------------- reset ---------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

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

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
  font-weight: 700;
}

.container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ------------------------------ utilities --------------------------------- */

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.surface-card {
  background: var(--gradient-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}

.tone-study { color: var(--study); }
.tone-prepare { color: var(--prepare); }
.tone-grow { color: var(--grow); }

@keyframes notex-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.animate-rise {
  animation: notex-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------- eyebrow -------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.eyebrow-primary {
  border-color: color-mix(in oklab, var(--primary) 20%, transparent);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  color: var(--primary);
}
.eyebrow-study {
  border-color: color-mix(in oklab, var(--study) 25%, transparent);
  background: var(--study-soft);
  color: var(--study);
}
.eyebrow-prepare {
  border-color: color-mix(in oklab, var(--prepare) 25%, transparent);
  background: var(--prepare-soft);
  color: var(--prepare);
}
.eyebrow-grow {
  border-color: color-mix(in oklab, var(--grow) 25%, transparent);
  background: var(--grow-soft);
  color: var(--grow);
}

/* ---------------------------------- pills --------------------------------- */

.pill {
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.pill-prepare { background: var(--prepare); color: var(--prepare-foreground); }
.pill-grow { background: var(--grow); color: var(--grow-foreground); }
.pill-study { background: var(--study); color: var(--study-foreground); }
.pill-muted { background: var(--muted); color: var(--foreground); }

/* --------------------------------- buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--radius-xl);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--primary) 92%, transparent);
}

.btn-ghost {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
}
.btn-ghost:hover { background: var(--muted); }

.btn-sm { padding: 0.5rem 1rem; }
.btn-block { width: 100%; }

.btn-tone {
  color: var(--primary-foreground);
  box-shadow: var(--shadow-soft);
}
.btn-tone:hover { transform: translateY(-2px); }
.btn-tone-study { background: var(--study); }
.btn-tone-prepare { background: var(--prepare); }
.btn-tone-grow { background: var(--grow); }

/* ---------------------------------- header -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.brand-tag {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .brand-tag { display: inline; }
}

.main-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.main-nav a { transition: color 0.2s ease; }
.main-nav a:hover,
.main-nav a.active { color: var(--foreground); }
.main-nav a.active { font-weight: 500; }
@media (min-width: 768px) {
  .main-nav { display: flex; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: background 0.2s ease;
}
.theme-toggle:hover { background: var(--muted); }
.theme-toggle svg {
  width: 1rem;
  height: 1rem;
  grid-area: 1 / 1;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle.is-dark .icon-moon { display: none; }
.theme-toggle.is-dark .icon-sun { display: block; }

/* ---------------------------------- hero ---------------------------------- */

.hero,
.subjects-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.25rem 4rem;
}
@media (min-width: 640px) {
  .hero,
  .subjects-hero { padding-top: 7rem; }
}
.subjects-hero { padding-bottom: 2.5rem; }

.hero-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}

.hero-inner {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  margin-top: 1.75rem;
  font-size: 2.25rem;
  line-height: 1.05;
  font-weight: 700;
}
@media (min-width: 640px) {
  .hero-title { font-size: 3.75rem; }
}

.hero-sub {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .hero-sub { font-size: 1.125rem; }
}

.hero-ctas {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.hero-footnote {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* --------------------------------- pillars -------------------------------- */

.pillars-grid {
  position: relative;
  margin: 4rem auto 0;
  max-width: 72rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

.pillar-card {
  padding: 1.75rem;
  transition: all 0.3s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.pillar-icon { font-size: 1.5rem; }
.pillar-eyebrow { margin-top: 1rem; }
.pillar-title { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; }

.pillar-tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  border-radius: var(--radius-md);
  background: var(--muted);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* --------------------------------- sections ------------------------------- */

.section { padding: 5rem 1.25rem; }
@media (min-width: 640px) {
  .section { padding-top: 7rem; padding-bottom: 7rem; }
}

.section-secondary { background: color-mix(in oklab, var(--secondary) 60%, transparent); }
.section-tint-prepare { background: color-mix(in oklab, var(--prepare-soft) 60%, transparent); }
.section-tint-grow { background: color-mix(in oklab, var(--grow-soft) 60%, transparent); }
.section-tint-study { background: color-mix(in oklab, var(--study-soft) 60%, transparent); }

.section-heading {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.section-heading h2 { font-size: 1.875rem; font-weight: 600; }
@media (min-width: 640px) {
  .section-heading h2 { font-size: 2.25rem; }
}
.section-heading p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.section-cta { margin-top: 2.5rem; text-align: center; }

/* --------------------------------- college -------------------------------- */

.college-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .college-grid { grid-template-columns: repeat(3, 1fr); }
}

.college-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  transition: all 0.3s ease;
}
.college-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.college-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--muted);
  font-size: 1.125rem;
}

.college-label { font-size: 0.875rem; font-weight: 600; }

/* ------------------------------ split sections ----------------------------- */

.split-grid {
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .split-grid { grid-template-columns: repeat(2, 1fr); }
}

.split-title { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 600; }
@media (min-width: 640px) {
  .split-title { font-size: 2.25rem; }
}

.split-text { margin-top: 1rem; color: var(--muted-foreground); }

.split-cta,
.split-cta-single {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.split-cta-note { font-size: 0.875rem; color: var(--muted-foreground); }

.price-row {
  margin-top: 2rem;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.price-big {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
}

.price-suffix { font-size: 1rem; font-weight: 500; color: var(--muted-foreground); }
.price-label { font-size: 0.875rem; color: var(--muted-foreground); }

.price-divider { width: 1px; height: 2.5rem; background: var(--border); }

.pro-features-card { padding: 2rem; }

.check-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) {
  .check-grid { grid-template-columns: repeat(2, 1fr); }
}
.pricing-features { grid-template-columns: 1fr; flex: 1; }

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
}

.check-icon {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--primary);
}

/* ---------------------------------- exam card ------------------------------ */

.exam-card { padding: 0; overflow: hidden; }

.exam-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  padding: 1rem 1.5rem;
}

.exam-card-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.exam-card-sub { font-size: 0.75rem; color: var(--muted-foreground); }
.exam-card-body { padding: 1.5rem; }

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.progress-value { color: var(--foreground); }

.bar {
  margin-top: 0.5rem;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted);
}
.bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.bar-primary { background: var(--primary); }
.bar-study { background: var(--study); }
.bar-prepare { background: var(--prepare); }
.bar-grow { background: var(--grow); }

.exam-lists {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .exam-lists { grid-template-columns: repeat(2, 1fr); }
}

.list-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.today-list,
.next-list {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.today-list li,
.next-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.today-list .tick { color: var(--study); }
.next-list li { color: var(--muted-foreground); }

/* --------------------------------- pro plus -------------------------------- */

.proplus-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .proplus-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .proplus-grid { grid-template-columns: repeat(4, 1fr); }
}

.proplus-card { padding: 1.5rem; transition: all 0.3s ease; }
.proplus-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.proplus-icon { font-size: 1.5rem; }
.proplus-title { margin-top: 1rem; font-size: 1rem; font-weight: 600; }
.proplus-body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.proplus-price-row {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.proplus-price { text-align: center; }

/* --------------------------------- journey --------------------------------- */

.journey {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .journey { flex-direction: row; justify-content: space-between; }
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media (min-width: 768px) {
  .journey-step { flex: 1; flex-direction: row; width: auto; }
}

.journey-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.journey-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  font-size: 1.5rem;
}

.journey-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.journey-connector {
  margin: 0.75rem 0;
  width: 1px;
  height: 2rem;
  background: var(--border);
}
@media (min-width: 768px) {
  .journey-connector { margin: 0 0.75rem; width: auto; height: 1px; flex: 1; }
}

/* -------------------------------- community --------------------------------- */

.community-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .community-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .community-grid { grid-template-columns: repeat(3, 1fr); }
}

.community-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  transition: all 0.3s ease;
}
.community-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.community-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--grow-soft);
  font-size: 1.125rem;
}

.community-title { font-size: 0.875rem; font-weight: 600; }
.community-meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }

.community-join { display: grid; place-items: center; padding: 1.25rem; }

/* ------------------------------- build together ------------------------------ */

.team-card { padding: 1.75rem; }

.team-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team-card-header h3 { font-size: 1.125rem; font-weight: 600; }

.team-roles { margin-top: 1.5rem; }
.team-roles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}
.team-roles li:first-child { border-top: none; }

.team-role-name { display: flex; align-items: center; gap: 0.5rem; }

.team-status { font-size: 0.75rem; font-weight: 600; }
.team-status.filled { color: var(--study); }
.team-status.looking { color: var(--grow); }

/* --------------------------------- pricing ---------------------------------- */

.pricing-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.pricing-card-popular {
  box-shadow: var(--shadow-lift);
  outline: 2px solid var(--prepare);
  outline-offset: 0;
}

.pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.75rem;
  border-radius: 999px;
  background: var(--prepare);
  color: var(--prepare-foreground);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.pricing-price-row {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.pricing-lead {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.pricing-card .check-grid { margin-top: 1rem; flex: 1; gap: 0.625rem; }
.pricing-card .btn { margin-top: 2rem; }

/* -------------------------------- dashboard ---------------------------------- */

.dashboard-card { margin-top: 3rem; padding: 0; overflow: hidden; }

.dashboard-header {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  padding: 1.25rem 1.75rem;
}
.dashboard-greeting { font-size: 1.125rem; font-weight: 600; }
.dashboard-sub { font-size: 0.875rem; color: var(--muted-foreground); }

.dashboard-grid {
  display: grid;
  gap: 2rem;
  padding: 1.75rem;
}
@media (min-width: 768px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}

.week-metrics { margin-top: 1rem; display: grid; gap: 1rem; }

.week-metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.week-metric-value { font-weight: 600; }
.week-metric .bar { margin-top: 0.375rem; }

.goals-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.goals-list li { display: flex; align-items: center; gap: 0.75rem; }
.goal-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 5px;
  border: 1px solid var(--border);
}

.streak-pill {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.recommend-list { margin-top: 1rem; display: grid; gap: 0.5rem; }
.recommend-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-xl);
  background: var(--muted);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.recommend-list .arrow { color: var(--muted-foreground); }

/* ------------------------------- achievements --------------------------------- */

.achievements-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .achievements-grid { grid-template-columns: repeat(4, 1fr); }
}

.achievement-card { padding: 1.5rem; text-align: center; }
.achievement-value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
}
.achievement-label {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ------------------------------- testimonials ---------------------------------- */

.testimonials-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

.testimonial-card { display: flex; flex-direction: column; padding: 1.5rem; }
.stars { font-size: 0.875rem; letter-spacing: 0.05em; }
.testimonial-card blockquote {
  margin-top: 1rem;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.65;
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
}
.testimonial-card figcaption {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* --------------------------------- final cta ------------------------------------ */

.final-cta {
  position: relative;
  overflow: hidden;
  padding: 6rem 1.25rem;
}

.final-cta-inner {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.final-cta-inner h2 { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 640px) {
  .final-cta-inner h2 { font-size: 3rem; }
}
.final-cta-inner p { margin-top: 1.25rem; color: var(--muted-foreground); }
.final-cta-btn { margin-top: 2.25rem; }
.final-cta-footnote { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------------------------------- footer --------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 1.25rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) {
  .footer-inner { flex-direction: row; }
}

.footer-brand { font-size: 0.875rem; font-weight: 700; }
.footer-brand-tag {
  margin-left: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.footer-copy { font-size: 0.75rem; color: var(--muted-foreground); }

/* ------------------------------ pro / pro plus pages ------------------------------ */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.25rem 4rem;
  text-align: center;
}
@media (min-width: 640px) {
  .page-hero { padding-top: 7rem; }
}

.feature-showcase-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .feature-showcase-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card { padding: 1.75rem; transition: all 0.3s ease; }
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-2xl);
  font-size: 1.5rem;
}
.feature-icon-prepare { background: var(--prepare-soft); }
.feature-icon-grow { background: var(--grow-soft); }
.feature-icon-study { background: var(--study-soft); }
.feature-title { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 600; }
.feature-body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.track-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .track-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .track-grid { grid-template-columns: repeat(3, 1fr); }
}

.track-card { padding: 1.75rem; transition: all 0.3s ease; }
.track-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.track-card .tag { background: var(--grow-soft); color: var(--grow); }

.faq-list {
  margin-top: 3rem;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 1rem;
}
.faq-item { padding: 1.5rem; }
.faq-q { font-size: 1rem; font-weight: 600; }
.faq-a {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.steps-row {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .steps-row { grid-template-columns: repeat(3, 1fr); }
}
.step-card { padding: 1.75rem; }
.step-number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
}
.step-number-prepare { background: var(--prepare); color: var(--prepare-foreground); }
.step-number-grow { background: var(--grow); color: var(--grow-foreground); }
.step-card h3 { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; }
.step-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.compare-table-wrap {
  margin-top: 3rem;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.compare-table th,
.compare-table td {
  padding: 0.875rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.compare-table td:first-child { font-weight: 500; }
.compare-yes { color: var(--study); font-weight: 700; }
.compare-no { color: var(--muted-foreground); }

/* -------------------------------- login page ----------------------------------- */

.login-page {
  position: relative;
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  overflow: hidden;
}

.login-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 60% at 50% 0%,
    color-mix(in oklab, var(--primary) 14%, transparent),
    transparent 70%
  );
}

.login-container {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

.login-card {
  padding: 2rem;
  animation: notex-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-brand .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 1.5rem;
}

.login-tagline {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.login-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-title {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.login-sub {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.login-phone-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 0.5rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-phone-input:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 15%, transparent);
}

.login-country {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border-right: 1px solid var(--border);
  padding-right: 0.75rem;
  user-select: none;
}

.login-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--foreground);
  outline: none;
}

.login-input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.6;
}

.login-hint {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: -0.25rem;
}

.login-otp {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.login-otp-slot {
  width: 3rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  transition: all 0.2s ease;
  caret-color: var(--primary);
}

.login-otp-slot.is-active {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 15%, transparent);
}

.login-otp-slot.has-value {
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.login-resend {
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.login-resend-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-resend-btn:hover {
  color: color-mix(in oklab, var(--primary) 85%, transparent);
}

.login-error {
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--grow) 12%, transparent);
  color: var(--grow);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

.login-change-number {
  align-self: center;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-change-number:hover {
  color: var(--foreground);
}

.login-terms {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.login-terms a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-terms a:hover {
  color: color-mix(in oklab, var(--primary) 85%, transparent);
}

.login-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: login-spin 0.75s linear infinite;
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

.login-success {
  text-align: center;
  padding: 1rem 0;
}

.login-success-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.login-success h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.login-success p {
  margin: 0.5rem 0 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.login-benefits {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
  animation: notex-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}

.login-benefit {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
}

.login-benefit-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--muted);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.login-benefit-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.login-benefit-body {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
}

@media (min-width: 640px) {
  .login-page { padding: 4rem 1.25rem; }
  .login-card { padding: 2.5rem; }
  .login-title { font-size: 1.75rem; }
  .login-otp-slot { width: 3.5rem; height: 4rem; font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  .login-container {
    max-width: 56rem;
    display: grid;
    grid-template-columns: 26rem 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  .login-benefits { margin-top: 0; }
}



/* --------------------------------- billing note ---------------------------------- */

.billing-note {
  position: relative;
  margin-top: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--prepare), var(--grow)) border-box;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.billing-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 120% at 0% 50%,
    color-mix(in oklab, var(--prepare) 10%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.billing-note:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.billing-note-badge {
  position: absolute;
  top: -0.75rem;
  left: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--prepare), var(--grow));
  color: #fff;
  padding: 0.25rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--prepare) 60%, transparent);
}

.billing-note-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--prepare) 12%, var(--muted));
  font-size: 1.5rem;
}

.billing-note-text {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.billing-note-text h4 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.billing-note-text p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.billing-note-text strong {
  color: var(--prepare);
  font-weight: 700;
}

.billing-note-btn {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- mobile ---- */
@media (max-width: 720px) {
  .billing-note {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }
  .billing-note-badge {
    left: 1.25rem;
  }
  .billing-note-icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
  }
  .billing-note-btn {
    width: 100%;
  }
}