:root {
  --green-900: #064f52;
  --green-800: #08666a;
  --green-700: #0c777b;
  --green-600: #0f8a8d;
  --green-100: #d9f1f1;
  --green-50: #effafa;
  --navy: #14213d;
  --ink: #1f2937;
  --muted: #667085;
  --line: #e4e8ec;
  --surface: #ffffff;
  --canvas: #f7f9f8;
  --amber: #f4a825;
  --blue: #3b82f6;
  --purple: #7c5ce7;
  --shadow-sm: 0 8px 24px rgba(15, 40, 32, .07);
  --shadow-lg: 0 24px 64px rgba(7, 38, 29, .14);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.container { max-width: 1180px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1200; padding: .75rem 1rem; color: #fff; background: var(--green-800); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

/* Navigation */
.site-header { position: relative; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.site-header-overlay { position: absolute; inset: 0 0 auto; color: #fff; background: linear-gradient(180deg, rgba(4, 18, 15, .64), transparent); border-bottom: 0; }
.navbar { min-height: 84px; }
.brand-lockup { display: inline-flex; align-items: center; gap: .65rem; color: var(--navy); font-size: 1.35rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; color: #fff; background: var(--green-700); border-radius: .45rem; font-size: 1rem; font-weight: 800; }
.nav-link { padding: .55rem .85rem !important; color: #475467; font-size: .94rem; font-weight: 650; }
.nav-link:hover, .nav-link.active { color: var(--green-700); }
.btn-header { color: #fff; background: var(--green-700); border: 1px solid var(--green-700); }
.btn-header:hover { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.site-header-overlay .brand-lockup, .site-header-overlay .nav-link { color: rgba(255,255,255,.92); }
.site-header-overlay .nav-link:hover, .site-header-overlay .nav-link.active { color: #fff; }
.site-header-overlay .btn-header { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.46); backdrop-filter: blur(8px); }
.site-header-overlay .btn-header:hover { background: var(--green-700); border-color: var(--green-700); }
.site-header-overlay .navbar-toggler { border-color: rgba(255,255,255,.5); }
.site-header-overlay .navbar-toggler-icon { filter: invert(1); }
.navbar-toggler { box-shadow: none !important; }

/* Shared type and actions */
.btn { border-radius: .45rem; font-weight: 750; }
.btn-lg { padding: .9rem 1.35rem; font-size: .98rem; }
.btn-primary { --bs-btn-bg: var(--green-700); --bs-btn-border-color: var(--green-700); --bs-btn-hover-bg: var(--green-800); --bs-btn-hover-border-color: var(--green-800); --bs-btn-active-bg: var(--green-900); }
.btn-ink { color: #fff; background: var(--navy); border-color: var(--navy); }
.btn-ink:hover { color: #fff; background: #233252; border-color: #233252; }
.btn-outline-ink { color: var(--navy); background: #fff; border-color: #cbd2da; }
.btn-outline-ink:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.btn-ghost-light { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.55); }
.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.18); border-color: #fff; }
.section-space { padding: 6.5rem 0; }
.section-label, .eyebrow, .section-kicker { display: inline-block; margin-bottom: .9rem; color: var(--green-700); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.section-label-light, .eyebrow-light { color: #a7e5cf; }
.display-heading { max-width: 720px; margin: 0; color: var(--navy); font-size: clamp(2.25rem, 4.2vw, 3.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.section-lead { max-width: 660px; margin: 1.35rem 0 1.6rem; color: var(--muted); font-size: 1.1rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--green-700); font-weight: 750; text-decoration: none; }
.arrow-link span { transition: transform .2s ease; }
.arrow-link:hover { color: var(--green-900); }
.arrow-link:hover span { transform: translateX(4px); }

/* Home hero */
.campus-hero { position: relative; min-height: 720px; display: flex; align-items: center; color: #fff; background: #0c251e url("../images/studyfolk-library-hero.webp") center center / cover no-repeat; }
.campus-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 20, 16, .93) 0%, rgba(4, 20, 16, .79) 40%, rgba(4, 20, 16, .35) 72%, rgba(4, 20, 16, .28) 100%); }
.campus-hero-content { position: relative; z-index: 2; padding-top: 5.5rem; }
.hero-kicker { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; color: #c8f2e3; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-kicker::before { content: ""; width: 2.3rem; height: 2px; background: #31c48d; }
.campus-hero h1 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(3.3rem, 6vw, 5.9rem); font-weight: 820; letter-spacing: -.06em; line-height: .98; }
.campus-hero-content > .row > div:first-child > p { max-width: 650px; margin: 1.5rem 0 1.8rem; color: rgba(255,255,255,.82); font-size: 1.18rem; line-height: 1.65; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-proof-panel { padding: 2rem; background: rgba(12, 34, 29, .75); border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; box-shadow: 0 22px 60px rgba(0,0,0,.18); backdrop-filter: blur(12px); }
.panel-kicker { display: block; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 1.25rem; font-weight: 750; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; padding-top: 1.3rem; }
.proof-grid > div { display: grid; grid-template-columns: 3.1rem 1fr; column-gap: .7rem; align-items: center; }
.proof-icon { grid-row: 1 / 3; display: grid; width: 3rem; height: 3rem; place-items: center; color: #fff; background: var(--green-600); border-radius: .6rem; font-size: .8rem; font-weight: 850; }
.proof-grid strong, .proof-grid small { display: block; }
.proof-grid strong { font-size: .96rem; }
.proof-grid small { color: rgba(255,255,255,.64); font-size: .77rem; }
.quick-access-strip { position: relative; z-index: 4; color: #fff; background: var(--green-700); }
.quick-access-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.quick-access-grid a { display: grid; grid-template-columns: 2.8rem 1fr auto; gap: .85rem; align-items: center; min-height: 92px; padding: 1rem 1.5rem; border-right: 1px solid rgba(255,255,255,.19); color: #fff; text-decoration: none; transition: background .2s ease; }
.quick-access-grid a:first-child { border-left: 1px solid rgba(255,255,255,.19); }
.quick-access-grid a:hover { background: rgba(0,0,0,.1); }
.quick-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: .5rem; font-size: .78rem; font-weight: 800; }
.quick-access-grid small, .quick-access-grid strong { display: block; line-height: 1.35; }
.quick-access-grid small { color: #bde7d8; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.quick-access-grid strong { font-size: .98rem; }
.quick-access-grid b { font-size: .8rem; }

/* Home content */
.intro-section { background: #fff; }
.principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.principle-grid article { padding: 1.5rem; background: var(--canvas); border: 1px solid var(--line); border-radius: .85rem; }
.principle-grid article > span { color: var(--green-700); font-size: .76rem; font-weight: 800; }
.principle-grid h3 { margin: .65rem 0 .35rem; color: var(--navy); font-size: 1.08rem; font-weight: 750; }
.principle-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.featured-tools { background: var(--canvas); }
.section-heading-modern { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.modern-tool-card { display: flex; min-height: 340px; height: 100%; flex-direction: column; padding: 1.6rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.modern-tool-card:hover { color: var(--ink); transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tool-card-icon { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: 1.25rem; place-items: center; color: #fff; border-radius: .65rem; font-size: .9rem; font-weight: 850; }
.tool-card-icon i { font-size: 1.35rem; line-height: 1; }
.icon-green { background: var(--green-700); }
.icon-blue { background: var(--blue); }
.icon-amber { background: var(--amber); }
.icon-purple { background: var(--purple); }
.tool-category { color: var(--green-700); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.modern-tool-card h3 { margin: .55rem 0 .7rem; color: var(--navy); font-size: 1.35rem; font-weight: 780; letter-spacing: -.025em; }
.modern-tool-card p { color: var(--muted); font-size: .92rem; }
.tool-card-link { margin-top: auto; color: var(--green-700); font-size: .85rem; font-weight: 750; }
.study-path { background: #fff; }
.study-path-card { overflow: hidden; background: var(--green-900); border-radius: 1.1rem; box-shadow: var(--shadow-lg); }
.study-path-intro { padding: 3.3rem; color: #fff; background: linear-gradient(145deg, var(--green-700), var(--green-900)); }
.study-path-intro h2 { margin: 0 0 1rem; font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 780; letter-spacing: -.04em; line-height: 1.08; }
.study-path-intro p { margin-bottom: 1.7rem; color: rgba(255,255,255,.72); }
.study-path-steps { padding: 2rem 3rem; background: #fff; }
.study-path-steps article { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.study-path-steps article:last-child { border-bottom: 0; }
.study-path-steps article > span { display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; font-weight: 800; }
.study-path-steps small { color: var(--green-700); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.study-path-steps h3 { margin: .15rem 0 .25rem; color: var(--navy); font-size: 1.14rem; font-weight: 750; }
.study-path-steps p { margin: 0; color: var(--muted); font-size: .9rem; }
.guide-teasers { background: var(--canvas); }
.editorial-guide-card { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; min-height: 330px; height: 100%; padding: 2rem; color: var(--ink); border-radius: .9rem; text-decoration: none; transition: transform .25s ease; }
.editorial-guide-card:hover { color: var(--ink); transform: translateY(-5px); }
.guide-primary { background: var(--green-100); }
.guide-secondary { background: #eaf0fb; }
.guide-tertiary { background: #fff2d8; }
.guide-quaternary { background: #f0ebff; }
.guide-number { color: var(--green-700); font-size: .78rem; font-weight: 850; }
.editorial-guide-card > div { display: flex; flex-direction: column; }
.guide-meta { color: var(--green-700); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.editorial-guide-card h3 { margin: auto 0 .8rem; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.editorial-guide-card p { color: var(--muted); }
.editorial-guide-card .arrow-link { margin-top: .6rem; }
.final-cta { padding: 1.25rem 0 6.5rem; background: var(--canvas); }
.final-cta-inner { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 3.2rem; color: #fff; background: var(--green-700); border-radius: 1rem; }
.final-cta h2 { max-width: 700px; margin: 0; font-size: clamp(2.1rem, 4vw, 3.3rem); font-weight: 800; letter-spacing: -.045em; }

/* Listing and content heroes */
.page-hero { padding: 5.5rem 0; background: linear-gradient(135deg, var(--green-50), #eef5f2); border-bottom: 1px solid var(--line); }
.guides-hero { background: linear-gradient(135deg, #ecf8f3, #edf3fb); }
.about-hero { background: linear-gradient(135deg, #ecf8f3, #f8f5ec); }
.privacy-hero { background: #f4f7f5; }
.page-hero h1, .tool-title-row h1, .article-hero h1, .not-found-page h1 { max-width: 850px; margin: 0; color: var(--navy); font-size: clamp(2.8rem, 5.5vw, 4.9rem); font-weight: 820; letter-spacing: -.055em; line-height: 1.02; }
.page-hero p { max-width: 680px; margin: 1.3rem 0 0; color: var(--muted); font-size: 1.15rem; }
.listing-section { padding: 6rem 0; background: #fff; }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.tool-grid-large { grid-template-columns: repeat(2, 1fr); }
.tool-card { position: relative; display: flex; min-height: 300px; height: 100%; flex-direction: column; padding: 1.7rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.tool-card:hover { color: var(--ink); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tool-icon { display: grid; width: 3.25rem; height: 3.25rem; margin-bottom: 2rem; place-items: center; color: #fff; background: var(--green-700); border-radius: .65rem; font-size: .92rem; font-weight: 850; }
.accent-coral .tool-icon { background: #e76f51; }
.accent-cyan .tool-icon { background: #188da2; }
.accent-yellow .tool-icon { background: var(--amber); }
.tool-card h2 { margin: 0 0 .65rem; color: var(--navy); font-size: 1.4rem; font-weight: 780; letter-spacing: -.03em; }
.tool-card p { color: var(--muted); font-size: .94rem; }
.card-link { margin-top: auto; color: var(--green-700); font-size: .86rem; font-weight: 750; }
.tool-tag { position: absolute; top: 1.8rem; right: 1.6rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.guide-card { display: flex; min-height: 330px; height: 100%; flex-direction: column; padding: 2rem; color: var(--ink); border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow-sm); text-decoration: none; }
.guide-card:hover { color: var(--ink); transform: translateY(-4px); }
.guide-violet { background: #eef7f3; }
.guide-cyan { background: #eef4fb; }
.guide-amber { background: #fff6e5; }
.guide-lilac { background: #f3efff; }
.guide-card-large { min-height: 420px; }
.guide-card h2, .guide-card h3 { margin: auto 0 .8rem; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.guide-card p { color: var(--muted); }
.guide-card > span:last-child { color: var(--green-700); font-weight: 750; }

/* Working tools */
.tool-page { padding: 2.2rem 0 5.5rem; background: var(--canvas); border-bottom: 1px solid var(--line); }
.tool-page-violet, .tool-page-coral, .tool-page-cyan, .tool-page-yellow { background: linear-gradient(180deg, var(--green-50), var(--canvas)); }
.breadcrumb-nav { display: flex; gap: .55rem; margin-bottom: 2.2rem; color: var(--muted); font-size: .82rem; font-weight: 650; }
.breadcrumb-nav a { text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--green-700); }
.tool-title-row { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.3rem; }
.tool-title-row h1 { max-width: none; font-size: clamp(2.7rem, 5vw, 4.5rem); }
.tool-title-row p { max-width: 720px; margin: 1rem 0 0; color: var(--muted); font-size: 1.08rem; }
.privacy-pill { flex: 0 0 auto; padding: .55rem .85rem; color: var(--green-800); background: #fff; border: 1px solid #b7dada; border-radius: 999px; font-size: .76rem; font-weight: 750; }
.calculator-shell, .focus-shell, .word-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-lg); }
.calculator-main { min-height: 430px; padding: 2rem; }
.calculator-head { display: grid; grid-template-columns: minmax(180px, 2fr) 1fr .8fr 2.5rem; gap: .75rem; margin-bottom: .7rem; padding: 0 .2rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.calculator-head small { font-weight: 500; text-transform: none; }
.calculator-row { display: grid; grid-template-columns: minmax(180px, 2fr) 1fr .8fr 2.5rem; gap: .75rem; margin-bottom: .75rem; align-items: center; }
.form-control, .form-select { min-height: 48px; border: 1px solid #d4d9df; border-radius: .55rem; color: var(--ink); }
.form-control:focus, .form-select:focus, .word-input:focus { border-color: var(--green-600); box-shadow: 0 0 0 .22rem rgba(15,138,141,.16); }
.icon-button { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; padding: 0; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 1.25rem; line-height: 1; }
.icon-button:hover { color: #fff; background: #dc5b50; border-color: #dc5b50; }
.result-panel, .timer-settings { display: flex; min-height: 100%; flex-direction: column; padding: 2rem; color: #fff; background: var(--green-900); }
.result-label { color: #b8daca; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.big-result { display: block; margin: 1.1rem 0 .65rem; font-size: clamp(4rem, 8vw, 6.2rem); font-weight: 820; letter-spacing: -.07em; line-height: .92; }
.result-panel > p { color: rgba(255,255,255,.68); }
.result-detail { display: flex; justify-content: space-between; margin: auto 0 1rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.result-detail span { color: rgba(255,255,255,.65); }
.grade-head, .grade-row { grid-template-columns: minmax(160px, 1.8fr) 1fr 1fr 2.5rem; }
.calculation-tabs { gap: .4rem; margin-bottom: 1.5rem; padding: .3rem; background: #eef2f0; border-radius: .65rem; }
.calculation-tabs .nav-link { color: var(--muted); border: 0; border-radius: .45rem; }
.calculation-tabs .nav-link.active { color: #fff; background: var(--green-800); }
.final-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1rem; }
.final-grid label { font-size: .83rem; font-weight: 750; }
.final-grid label > span { position: relative; display: block; margin-top: .5rem; }
.final-grid label b { position: absolute; top: 50%; right: 1rem; color: var(--muted); transform: translateY(-50%); }
.final-grid input { padding-right: 2.5rem; }
.input-help { margin-top: 1rem; color: var(--muted); font-size: .88rem; }
.focus-shell { grid-template-columns: minmax(0, 1fr) 320px; }
.timer-card { padding: 2rem; text-align: center; }
.timer-mode { display: inline-flex; gap: .3rem; padding: .3rem; background: #edf2ef; border-radius: .65rem; }
.timer-mode button { padding: .55rem .8rem; color: var(--muted); background: transparent; border: 0; border-radius: .45rem; font-size: .82rem; font-weight: 750; }
.timer-mode button.active { color: #fff; background: var(--green-800); }
.timer-display { margin: 2rem 0 1.5rem; color: var(--navy); font-variant-numeric: tabular-nums; font-size: clamp(5rem, 13vw, 9rem); font-weight: 820; letter-spacing: -.08em; line-height: .86; }
.goal-field { display: block; max-width: 580px; margin: 0 auto 1.5rem; text-align: left; }
.goal-field span { display: block; margin-bottom: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.timer-actions { display: flex; justify-content: center; gap: .75rem; }
.timer-settings label { display: block; margin-top: 1.1rem; color: rgba(255,255,255,.68); font-size: .82rem; font-weight: 750; }
.timer-settings input { margin-top: .35rem; }
.timer-settings p { margin: auto 0 0; color: rgba(255,255,255,.67); }
.timer-settings p strong { color: #79dab7; font-size: 1.25rem; }
.word-shell { display: block; padding: 0; }
.word-input { display: block; width: 100%; min-height: 420px; padding: 2rem; resize: vertical; border: 0; border-bottom: 1px solid var(--line); outline: 0; font: inherit; font-size: 1.03rem; line-height: 1.8; }
.word-stats { display: grid; grid-template-columns: repeat(5, 1fr); }
.word-stats > div { padding: 1.35rem; border-right: 1px solid var(--line); text-align: center; }
.word-stats > div:last-child { border-right: 0; }
.word-stats strong, .word-stats span { display: block; }
.word-stats strong { color: var(--navy); font-size: 1.5rem; font-weight: 800; }
.word-stats span { color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; }

/* Articles and general content */
.tool-explainer, .content-section { padding: 5.5rem 0; background: #fff; }
.narrow-content { max-width: 790px; }
.tool-explainer h2, .article-body h2, .content-section h2 { margin: 2.7rem 0 1rem; color: var(--navy); font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.tool-explainer h2:first-child, .content-section h2:first-of-type { margin-top: 0; }
.tool-explainer p, .content-section p, .article-body p { color: var(--muted); }
.formula-box { margin: 1.5rem 0; padding: 1.2rem 1.4rem; color: var(--green-900); background: var(--green-50); border-left: 4px solid var(--green-700); border-radius: .45rem; font-size: 1.03rem; }
.article-hero { padding: 2.2rem 0 4.8rem; background: var(--green-50); border-bottom: 1px solid var(--line); }
.article-cyan { background: #eef7f8; }
.article-width { max-width: 850px; }
.article-deck { margin: 1.4rem 0 0; color: var(--muted); font-size: 1.18rem; }
.article-date { color: var(--muted); font-size: .82rem; font-weight: 650; }
.article-body { padding-top: 4rem; padding-bottom: 5rem; font-size: 1.04rem; }
.quick-answer { margin-bottom: 3rem; padding: 1.5rem; background: var(--green-50); border-left: 4px solid var(--green-700); border-radius: .55rem; }
.quick-answer strong { display: block; margin-bottom: .35rem; color: var(--green-800); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.quick-answer p { margin: 0; color: var(--ink); }
.article-table { margin: 1.5rem 0; border-color: var(--line); }
.article-table th { color: #fff; background: var(--green-900); }
.article-table th, .article-table td { padding: .85rem; border-color: var(--line); }
.article-cta { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: 2rem 0 3rem; padding: 1.3rem 1.5rem; color: #fff; background: var(--green-700); border-radius: .65rem; text-decoration: none; }
.article-cta:hover { color: #fff; background: var(--green-800); }
.article-cta span { color: rgba(255,255,255,.72); }
.article-list { padding-left: 1.4rem; }
.article-list li { margin-bottom: 1rem; padding-left: .4rem; color: var(--muted); }
.article-list strong { color: var(--ink); }
.tip-grid, .value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tip-grid > div, .value-grid > div { padding: 1.35rem; background: var(--canvas); border: 1px solid var(--line); border-radius: .7rem; }
.tip-grid p { margin: .35rem 0 0; font-size: .93rem; }
.value-grid { margin: 2rem 0; }
.value-grid strong, .value-grid span { display: block; }
.value-grid span { margin-top: .3rem; color: var(--muted); }
.article-faq { --bs-accordion-border-color: var(--line); --bs-accordion-active-bg: var(--green-50); --bs-accordion-active-color: var(--green-900); }
.article-faq .accordion-item { margin-bottom: .65rem; overflow: hidden; border: 1px solid var(--line); border-radius: .55rem !important; }
.article-faq .accordion-button { font-weight: 750; }
.article-faq .accordion-button:focus { box-shadow: 0 0 0 .22rem rgba(10,155,112,.12); }
.not-found-page { min-height: 68vh; padding: 6rem 0; text-align: center; background: var(--green-50); }
.not-found-page h1 { max-width: 700px; margin: 0 auto; }
.not-found-page p { color: var(--muted); font-size: 1.08rem; }
.not-found-page .hero-actions { justify-content: center; }
.error-code { display: inline-block; margin-bottom: 1rem; color: var(--green-700); font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; }

/* Footer */
.site-footer { padding: 4.5rem 0 1.5rem; color: #c8d1d7; background: #10231e; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-brand { margin-bottom: 1rem; color: #fff; }
.footer-grid p { max-width: 380px; }
.footer-title { margin-bottom: .75rem; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid > div > a:not(.brand-lockup) { display: block; margin-bottom: .5rem; color: #c8d1d7; text-decoration: none; }
.footer-grid > div > a:hover { color: #78cfd0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.11); color: #8f9c98; font-size: .8rem; }

@media (max-width: 991.98px) {
  .site-header-overlay .navbar-collapse { margin: .6rem 0; padding: 1rem; background: rgba(6,40,31,.96); border-radius: .7rem; }
  .navbar-collapse { padding: .8rem 0 1rem; }
  .campus-hero { min-height: 820px; }
  .campus-hero-content { padding-top: 8rem; padding-bottom: 3rem; }
  .hero-proof-panel { max-width: 620px; }
  .quick-access-grid { grid-template-columns: 1fr; }
  .quick-access-grid a, .quick-access-grid a:first-child { border: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .calculator-shell, .focus-shell { grid-template-columns: 1fr; }
  .result-panel { min-height: 310px; }
  .result-detail { margin-top: 1.5rem; }
  .timer-settings { min-height: auto; }
  .timer-settings p { margin-top: 2rem; }
}

@media (max-width: 767.98px) {
  .navbar { min-height: 70px; }
  .brand-lockup { font-size: 1.2rem; }
  .campus-hero { min-height: 760px; background-position: 62% center; }
  .campus-hero-overlay { background: linear-gradient(90deg, rgba(4,20,16,.94), rgba(4,20,16,.65)); }
  .campus-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .campus-hero-content > .row > div:first-child > p { font-size: 1.03rem; }
  .hero-proof-panel { padding: 1.25rem; }
  .proof-grid { gap: 1rem .7rem; }
  .proof-grid > div { grid-template-columns: 2.5rem 1fr; }
  .proof-icon { width: 2.4rem; height: 2.4rem; font-size: .67rem; }
  .section-space, .listing-section, .tool-explainer, .content-section { padding: 4.5rem 0; }
  .section-heading-modern, .final-cta-inner, .tool-title-row { align-items: flex-start; flex-direction: column; }
  .principle-grid, .tool-grid, .tool-grid-large { grid-template-columns: 1fr; }
  .modern-tool-card, .tool-card { min-height: 270px; }
  .study-path-intro, .study-path-steps { padding: 2rem; }
  .final-cta-inner { padding: 2rem; }
  .page-hero { padding: 4.5rem 0; }
  .tool-page { padding-bottom: 4.5rem; }
  .calculator-main, .timer-card { padding: 1.2rem; }
  .calculator-row, .grade-row { grid-template-columns: 1fr 1fr 2.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
  .calculator-row .course-name, .grade-row .grade-name { grid-column: 1 / -1; }
  .calculator-row .remove-row, .grade-row .remove-row { grid-column: 3; grid-row: 2; }
  .final-grid { grid-template-columns: 1fr; }
  .word-input { min-height: 340px; padding: 1.3rem; }
  .word-stats { grid-template-columns: repeat(2, 1fr); }
  .word-stats > div { border-bottom: 1px solid var(--line); }
  .word-stats > div:last-child { grid-column: 1 / -1; }
  .article-body { padding-top: 3rem; }
  .article-cta { align-items: flex-start; flex-direction: column; }
  .tip-grid, .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 479.98px) {
  .campus-hero { min-height: 820px; }
  .campus-hero-content > .row, .intro-section .row { --bs-gutter-x: 0; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .proof-grid { grid-template-columns: 1fr; }
  .quick-access-grid a { grid-template-columns: 2.8rem 1fr; }
  .quick-access-grid b { display: none; }
  .editorial-guide-card { grid-template-columns: 1fr; min-height: 340px; }
  .calculator-row, .grade-row { grid-template-columns: 1fr 1fr 2rem; gap: .5rem; }
  .timer-mode { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .timer-mode button { padding: .55rem .25rem; font-size: .74rem; }
  .timer-display { font-size: 5rem; }
  .timer-actions { flex-direction: column; }
  .footer-bottom { flex-direction: column; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}