/* ============================================
   NOTEBOOK THEME (2026-10-18) — design 4 "Notebook doodles"
   Loaded LAST on every public page (after styles.css and the page's own <style>), so it restyles by
   remapping the tokens and re-skinning shared components. No page text or markup depends on it.
   Artwork in assets/notebook/ (Nano Banana Pro via Google Flow; text-free).
   ============================================ */

:root {
  --ink: #16161d;
  --ink-soft: #3b3b48;
  --paper: #fffdf7;
  --grid-line: #dde7f4;
  --nb-yellow: #ffd93d;
  --nb-yellow-soft: #fff1a6;
  --nb-mint: #9be8c6;
  --nb-pink: #ffb0d3;
  --nb-hl: rgba(255, 221, 64, .78);
  --nb-shadow: 3px 3px 0 var(--ink);
  --nb-shadow-lg: 6px 6px 0 var(--ink);

  /* Remap the old blue tokens: "biro blue" for links/accents, AA on white and on the paper */
  --primary: #1f45c9;
  --primary-dark: #17359e;
  --primary-light: #e8edff;
  --accent: #1f45c9;
  --accent-light: #e8edff;
  --gray-50: #fbf5e6;
  --gray-500: #55556a;
  --gray-600: #45455a;
  --shadow-blue: var(--nb-shadow);
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
}

/* ---------- Paper ---------- */
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
h1, h2, h3, h4, .display-1, .display-2, .heading-1, .heading-2, .nav-logo,
.pricing-price .amount, .step-num { font-family: var(--font-head); letter-spacing: -0.01em; }
h1, h2, h3, .display-1, .display-2, .heading-1, .heading-2 { color: var(--ink); }
.heading-2 { font-weight: 700; }
::selection { background: var(--nb-hl); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px;
}

/* Highlighter pen */
.text-gradient, .nb-hl {
  background: linear-gradient(transparent 52%, var(--nb-hl) 52%, var(--nb-hl) 92%, transparent 92%);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--ink); color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .08em;
}

/* ---------- Navbar ---------- */
.navbar { background: rgba(255, 253, 247, .96); border-bottom: 2px solid var(--ink); backdrop-filter: none; }
.navbar.scrolled { box-shadow: 0 3px 0 rgba(22, 22, 29, .08); }
.nav-logo { color: var(--ink); font-weight: 700; }
.nav-logo .logo-icon { background: var(--nb-yellow); border: 2px solid var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); }
.footer .nav-logo .logo-icon { border-color: #fff; box-shadow: 2px 2px 0 #fff; }
.nav-links a { color: var(--ink-soft); font-weight: 700; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--nb-yellow-soft); }
.nav-toggle span { background: var(--ink); }
.mobile-menu { background: var(--paper); border-top: 2px solid var(--ink); }
.mobile-menu a { color: var(--ink); font-weight: 700; }
.mobile-menu a:hover { background: var(--nb-yellow-soft); color: var(--ink); }

/* ---------- Buttons: chunky outline + offset shadow ---------- */
.btn {
  border-radius: 12px; border: 2px solid var(--ink); font-weight: 800; color: var(--ink);
  box-shadow: var(--nb-shadow); transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary, .btn-accent { background: var(--nb-yellow); color: var(--ink); }
.btn-primary:hover, .btn-accent:hover { background: #ffd21a; box-shadow: 5px 5px 0 var(--ink); }
.btn-secondary, .btn-outline-white { background: var(--nb-mint); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover, .btn-outline-white:hover { background: #86e0b8; border-color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #fff; }
.btn-parent { background: #d4c6ff; color: var(--ink); }
.btn-parent:hover { background: #c4b1ff; }
.btn-ghost { border-color: transparent; box-shadow: none; }
.btn-ghost:hover { box-shadow: none; transform: none; background: var(--nb-yellow-soft); }

/* ---------- Badges + pills: washi-tape labels ---------- */
.badge { background: #fff; color: var(--ink); border: 2px solid var(--ink); font-weight: 800; box-shadow: 2px 2px 0 var(--ink); }
.badge-blue, .badge-sky { background: var(--nb-yellow-soft); color: var(--ink); }
.badge-green { background: #d6f7e8; color: var(--ink); }
.badge-purple { background: #ece5ff; color: var(--ink); }
.badge-orange { background: #ffe3cf; color: var(--ink); }
.trust-pill { background: var(--nb-yellow-soft); border: 0; border-radius: 3px; color: var(--ink); font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08); transform: rotate(-1deg); }
.trust-pill:nth-child(3n+2) { background: #d6f7e8; transform: rotate(1deg); }
.trust-pill:nth-child(3n) { background: #ffdcec; transform: rotate(-.5deg); }
.page-hero-seo .trust-pill { background: var(--nb-yellow-soft); border: 0; color: var(--ink); }
.page-hero-seo .trust-pill:nth-child(3n+2) { background: #d6f7e8; }
.page-hero-seo .trust-pill:nth-child(3n) { background: #ffdcec; }

/* ---------- Cards: white paper, ink outline, offset shadow ---------- */
.card, .info-card, .level-card, .link-card, .faq-item, .pricing-card, .subject-card, .subject-new-card,
.safety-card, .included-item, .contact-form-card, .testimonial-card, .about-value, .dashboard-mockup,
.tutor-card-demo, .guarantee-banner, .contact-way {
  background: #fff; border: 2px solid var(--ink) !important; border-radius: 14px; box-shadow: var(--nb-shadow);
}
.info-card:hover, .level-card:hover, .link-card:hover, .subject-card:hover, .subject-new-card:hover, .card:hover, .safety-card:hover {
  border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink);
}
.info-card h3, .link-card strong, .level-name, .subject-card h3 { color: var(--ink); }
.info-card p, .link-card span { color: var(--gray-600); }

/* ---------- Tables ---------- */
.table-scroll { border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: var(--nb-shadow); margin-bottom: 24px; }
.table-scroll .spec-table { margin-bottom: 0; }
.spec-table th { background: var(--nb-yellow-soft); color: var(--ink); border-bottom: 2px solid var(--ink); }
.spec-table td { color: var(--ink-soft); border-bottom: 1px dashed #c9c9d6; }
.table-scroll caption { padding: 14px 16px 6px !important; }

/* ---------- FAQ ---------- */
.faq-question { color: var(--ink); font-weight: 800; }
.faq-question:hover { color: var(--primary); }
.faq-icon { background: var(--nb-yellow); color: var(--ink); border: 2px solid var(--ink); }
.faq-item.open .faq-icon { background: var(--nb-mint); color: var(--ink); }
.faq-answer-inner { color: var(--ink-soft); }

/* ---------- Steps ---------- */
.next-step-icon { background: var(--nb-yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.next-step-connector { background: none; border-top: 2px dashed var(--ink); height: 0; opacity: .45; }
.next-step h4 { color: var(--ink); }
.step-num { background: var(--nb-yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--nb-shadow); }
.steps-grid::before { background: none; border-top: 3px dashed var(--ink); height: 0; opacity: .5; }

/* ---------- Pricing ---------- */
.pricing-card [style*="rgba(255,255,255,.15)"] { background: #fff !important; color: var(--ink) !important; border: 2px dashed var(--ink); }
.pricing-card.featured { background: var(--nb-yellow-soft); color: var(--ink); box-shadow: var(--nb-shadow-lg); }
.pricing-card.featured .pricing-desc, .pricing-card.featured .pricing-features li { color: var(--ink-soft); }
.pricing-card.featured .pricing-features li::before { color: var(--ink); }
.pricing-card:not(.featured) .pricing-features li::before { color: #13805a; }

/* ---------- SEO page heroes: light notebook page instead of the dark banner ---------- */
.page-hero-seo { background: transparent; position: relative; overflow: hidden; padding: 112px 0 64px; border-bottom: 2px dashed rgba(22,22,29,.25); }
.page-hero-seo .container { position: relative; z-index: 1; }
.page-hero-seo .breadcrumb, .page-hero-seo .breadcrumb span { color: var(--gray-500); }
.page-hero-seo .breadcrumb a { color: var(--primary); font-weight: 700; }
.page-hero-seo .breadcrumb a:hover { color: var(--primary-dark); }
.page-hero-seo h1 {
  display: inline; color: var(--ink); font-weight: 700;
  background: linear-gradient(transparent 58%, var(--nb-hl) 58%, var(--nb-hl) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.page-hero-seo .lede { color: var(--ink-soft); margin-top: 22px; }
.page-hero-seo::before, .page-hero-seo::after {
  content: ''; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; opacity: .9;
}
.page-hero-seo::before { width: 120px; height: 132px; right: 6%; top: 96px; background-image: url('../assets/notebook/doodle-atom.webp'); transform: rotate(8deg); }
.page-hero-seo::after { width: 110px; height: 122px; right: 15%; bottom: 26px; background-image: url('../assets/notebook/doodle-rocket.webp'); }
@media (max-width: 1100px) { .page-hero-seo::before, .page-hero-seo::after { opacity: .35; } }
@media (max-width: 768px) {
  .page-hero-seo { padding: 92px 0 48px; }
  .page-hero-seo::before { width: 70px; height: 78px; right: 4%; top: 70px; opacity: .25; }
  .page-hero-seo::after { display: none; }
}

/* ---------- Prose (guides, city pages) ---------- */
.prose h2 { color: var(--ink); }
.prose h3 { color: var(--ink); }
.prose p, .prose li { color: var(--ink-soft); }
.prose a { color: var(--primary); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- CTA: a big sticky note ---------- */
.cta-strip {
  background: var(--nb-yellow); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--nb-shadow-lg);
  position: relative; transform: rotate(-.6deg);
}
.cta-strip::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; margin-left: -60px;
  background: rgba(155, 232, 198, .85); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.cta-strip h2 { color: var(--ink); }
.cta-strip p { color: var(--ink-soft); }
.cta-banner { background: var(--nb-pink); color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.cta-banner h2, .cta-banner p { color: var(--ink); opacity: 1; }

/* ---------- Homepage hero (design 4) ---------- */
.hero.nb-hero { background: transparent; padding: 132px 0 84px; }
.hero.nb-hero::before, .hero.nb-hero::after { display: none; }
.nb-hero .hero-inner { grid-template-columns: 1.08fr .92fr; gap: 40px; position: relative; z-index: 1; }
.nb-hero h1.nb-h1 {
  display: inline-block; font-family: 'Nunito', system-ui, sans-serif; font-size: 1rem; font-weight: 800; line-height: 1.4;
  color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 6px 12px;
  box-shadow: 2px 2px 0 var(--ink); margin: 0 0 22px; letter-spacing: 0;
}
.nb-slogan { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.02em; }
.nb-hero .hero-subtitle { color: var(--ink-soft); font-size: 1.125rem; max-width: 540px; margin-bottom: 30px; }
.nb-hero .hero-subtitle a { color: var(--primary); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nb-hero .hero-trust-pills { margin-top: 26px; }

.nb-visual { position: relative; min-height: 470px; }
.nb-boy { position: absolute; right: 0; bottom: 0; width: 64%; max-width: 360px; height: auto; filter: drop-shadow(4px 6px 0 rgba(22,22,29,.12)); }
.nb-note {
  position: absolute; width: 188px; padding: 30px 18px 22px; font-family: var(--font-hand); font-size: 1.75rem; font-weight: 700;
  line-height: 1.05; color: var(--ink); text-align: center; box-shadow: 2px 4px 10px rgba(22,22,29,.16), 0 1px 0 rgba(0,0,0,.06);
}
.nb-note::before { content: ''; position: absolute; top: -12px; left: 50%; width: 82px; height: 24px; margin-left: -41px; opacity: .9; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.nb-note-1 { background: #fff27a; left: 4%; top: 4px; transform: rotate(-5deg); }
.nb-note-1::before { background: repeating-linear-gradient(45deg, #ff9fcb 0 8px, #ffc8e1 8px 16px); transform: rotate(4deg); }
.nb-note-2 { background: #ffb7d6; left: 0; top: 168px; transform: rotate(4deg); }
.nb-note-2::before { background: repeating-linear-gradient(-45deg, #8fe3c0 0 8px, #c6f3df 8px 16px); transform: rotate(-3deg); }
.nb-note-3 { background: #a9efcf; left: 7%; top: 330px; transform: rotate(-3deg); }
.nb-note-3::before { background: repeating-linear-gradient(45deg, #89a8ff 0 8px, #c0d0ff 8px 16px); transform: rotate(2deg); }

.nb-doodle { position: absolute; pointer-events: none; height: auto; opacity: .92; }
.nb-d-pi { width: 70px; left: 1.5%; top: 150px; }
.nb-d-tube { width: 30px; left: -2.5%; bottom: 36px; transform: rotate(-12deg); }
.nb-d-atom { width: 78px; left: 47%; top: 92px; }
.nb-d-bulb { width: 92px; right: 1%; top: 82px; }
.nb-d-stars { width: 74px; left: 38%; top: 128px; }
.nb-d-arrow { width: 92px; left: 4%; bottom: 6px; }
.nb-d-rocket { width: 64px; left: 42%; bottom: 14px; transform: rotate(10deg); }
.nb-d-pencil { width: 62px; right: -1%; bottom: 120px; transform: rotate(18deg); }

@media (max-width: 1024px) {
  .nb-hero .hero-inner { grid-template-columns: 1fr; }
  .nb-visual { min-height: 420px; max-width: 560px; margin: 0 auto; width: 100%; }
  .nb-d-atom, .nb-d-stars { display: none; }
}
@media (max-width: 640px) {
  .hero.nb-hero { padding: 104px 0 56px; }
  .nb-visual { min-height: 340px; }
  .nb-note { width: 132px; font-size: 1.3rem; padding: 22px 10px 16px; }
  .nb-note-2 { top: 118px; }
  .nb-note-3 { top: 232px; }
  .nb-boy { width: 58%; }
  .nb-d-pi { width: 44px; left: auto; right: 3%; top: 96px; opacity: .55; }
  .nb-d-tube, .nb-d-arrow, .nb-d-rocket, .nb-d-pencil { display: none; }
  .nb-d-bulb { width: 56px; top: 8px; right: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .info-card, .link-card { transition: none; }
}

/* ============================================
   PHONES: less scrolling, less wall-of-text (2026-10-18)
   Content stays in the HTML; only its presentation changes below 768px.
   ============================================ */
.nb-more {
  display: none; margin: 14px auto 0; font: 800 .95rem/1 'Nunito', system-ui, sans-serif; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 16px; box-shadow: 2px 2px 0 var(--ink);
}
@media (max-width: 768px) {
  /* breathing room, not acres */
  .section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .section-header { margin-bottom: 26px !important; }
  .section-header p { font-size: .975rem; }
  .display-2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  body { font-size: 16px; }

  /* read-more folds (js/notebook.js) */
  .nb-more { display: block; }
  .nb-fold { max-height: var(--nb-fold, 300px); overflow: hidden; position: relative; }
  .nb-fold::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: linear-gradient(rgba(255,253,247,0), var(--paper)); }
  .nb-fold.open { max-height: none; }
  .nb-fold.open::after { display: none; }

  /* card lists -> swipeable rows with a peek of the next card */
  .levels-grid, .included-grid, .safety-grid, .subjects-new-grid, .info-grid, .info-grid.four, .link-cards, .subjects-grid {
    display: flex !important; grid-template-columns: none !important; gap: 14px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -24px !important; padding: 6px 24px 16px !important; scroll-padding-left: 24px;
  }
  .levels-grid::-webkit-scrollbar, .included-grid::-webkit-scrollbar, .safety-grid::-webkit-scrollbar,
  .subjects-new-grid::-webkit-scrollbar, .info-grid::-webkit-scrollbar, .link-cards::-webkit-scrollbar { display: none; }
  .levels-grid > *, .included-grid > *, .safety-grid > *, .subjects-new-grid > *, .info-grid > *, .link-cards > *, .subjects-grid > * {
    flex: 0 0 78%; max-width: 300px; scroll-snap-align: start;
  }
  .levels-grid > * { flex-basis: 46%; }
  .info-card:hover, .link-card:hover, .level-card:hover, .safety-card:hover { transform: none; box-shadow: var(--nb-shadow); }

  /* spec tables -> one swipeable card per row */
  .table-scroll { border: 0; box-shadow: none; background: transparent; overflow: visible; }
  .table-scroll caption { display: block; padding: 0 0 10px !important; }
  .spec-table thead { display: none; }
  .spec-table, .spec-table tbody { display: block; }
  .spec-table tbody { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 4px 24px 16px; scrollbar-width: none; }
  .spec-table tbody::-webkit-scrollbar { display: none; }
  .spec-table tr { flex: 0 0 80%; max-width: 310px; scroll-snap-align: start; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--nb-shadow); padding: 14px 16px; }
  .spec-table td { display: block; border: 0 !important; padding: 0 0 10px; font-size: .92rem; }
  .spec-table td:first-child { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--ink); padding-bottom: 8px; border-bottom: 2px dashed #d5d5df !important; margin-bottom: 8px; }
  .spec-table td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: 2px; }

  /* homepage trims */
  .nb-hero .trust-pill:nth-child(n+4) { display: none; }
  #about .about-photo { display: none; }
  .about-grid { gap: 0 !important; }
  .nb-areas > span { display: none !important; }
  .nb-areas.all > span { display: inline-block !important; }

  /* footer -> tap-to-open columns */
  .footer { padding-top: 48px; }
  .footer-grid { gap: 0 !important; margin-bottom: 28px; }
  .footer-brand { padding-bottom: 18px; }
  .footer-col { border-top: 1px solid rgba(255,255,255,.14); }
  .footer-col h4 { margin: 0; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
  .footer-col h4::after { content: '+'; font-size: 1.3rem; line-height: 1; transition: transform .2s; }
  .footer-col.open h4::after { transform: rotate(45deg); }
  .footer-col ul { display: none; padding-bottom: 16px; }
  .footer-col.open ul { display: flex; }
}
@media (max-width: 768px) {
  /* more swipe rows: steps, journey, plans, demo cards */
  .steps-grid, .next-steps, .pricing-grid, .demo-cards {
    display: flex !important; grid-template-columns: none !important; gap: 14px !important; align-items: stretch !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -24px !important; padding: 6px 24px 18px !important; scroll-padding-left: 24px; max-width: none !important;
  }
  .steps-grid::-webkit-scrollbar, .next-steps::-webkit-scrollbar, .pricing-grid::-webkit-scrollbar, .demo-cards::-webkit-scrollbar { display: none; }
  .steps-grid > *, .next-steps > *, .demo-cards > * { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
  .pricing-grid > * { flex: 0 0 86%; max-width: 340px; scroll-snap-align: start; transform: none !important; }
  .steps-grid::before, .next-step-connector { display: none !important; }
  .next-step { display: block !important; text-align: center !important; padding: 20px 16px !important; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--nb-shadow); }
  .next-step-icon { margin: 0 auto 12px !important; }
  .step-card { padding: 26px 20px; }
  .dashboard-mockup { display: none !important; }
  .nb-faq-fold .faq-item:nth-child(n+7) { display: none; }
  .nb-faq-fold.all .faq-item { display: block; }
}

/* Reviews: real swipe on every screen size (js/main.js drives the dots) */
.testimonials-track-wrapper {
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -24px; padding: 6px 24px 18px; scroll-padding-left: 24px;
}
.testimonials-track-wrapper::-webkit-scrollbar { display: none; }
.testimonials-track { transform: none !important; transition: none !important; }
.testimonial-card { scroll-snap-align: start; }
.testimonial-controls .dot { cursor: pointer; }
@media (max-width: 768px) { .testimonial-card { flex: 0 0 84% !important; } }

/* How We Match page cards had no fill */
.matter-card { background: #fff; border: 2px solid var(--ink) !important; border-radius: 14px; box-shadow: var(--nb-shadow); }

/* ============================================
   BEAUTIFY PASS (2026-10-18): doodle icons, landmarks, girl, margin notes, torn paper, motion
   ============================================ */
/* Doodle icons replace the emojis (beautify.py) */
.nb-icon { display: inline-block; vertical-align: middle; width: 56px; height: 56px; object-fit: contain; }
.nav-logo .logo-icon { overflow: hidden; }
.logo-icon .nb-icon { width: 26px; height: 26px; }
.next-step-icon .nb-icon, .contact-way-icon .nb-icon { width: 32px; height: 32px; }
.about-value-icon .nb-icon, .matter-icon .nb-icon, .s-icon .nb-icon { width: 44px; height: 44px; }
.included-icon, .safety-icon, .about-value-icon, .guarantee-icon, .matter-icon, .s-icon, .level-icon, .ic { background: none !important; box-shadow: none !important; border: 0 !important; }
.contact-way-icon { background: var(--nb-yellow-soft) !important; border: 2px solid var(--ink); }

/* City landmarks */
.page-hero-seo.has-city::before, .page-hero-seo.has-city::after,
.page-hero-seo.has-girl::before, .page-hero-seo.has-girl::after { display: none; }
.nb-city-hero { position: absolute; right: 7%; bottom: 26px; width: 210px; height: 210px; object-fit: contain; transform: rotate(3deg); z-index: 0; pointer-events: none; }
.nb-girl-hero { position: absolute; right: 4%; bottom: 10px; width: 320px; height: auto; z-index: 0; pointer-events: none; }
.nb-card-city { float: right; width: 48px; height: 48px; object-fit: contain; margin: -8px -6px 6px 10px; }
.nb-chip-city { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 6px; }
.nb-girl { display: block; width: 100%; max-width: 340px; height: auto; margin: 30px 0 0 -8px; }
@media (max-width: 1100px) { .nb-city-hero { width: 150px; height: 150px; opacity: .55; } .nb-girl-hero { display: none; } }
@media (max-width: 768px) {
  .nb-city-hero { width: 86px; height: 86px; right: 3%; top: 78px; bottom: auto; opacity: 1; }
  .page-hero-seo.has-city h1 { margin-right: 70px; }
  .nb-girl { max-width: 250px; margin: 22px auto 0; }
}

/* Handwritten margin notes */
.nb-scribble {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.65rem; line-height: 1.1; color: var(--primary);
  transform: rotate(-2.5deg);
}
.nb-scribble img { width: 48px; height: auto; transform: scaleX(-1) rotate(-20deg); opacity: .85; }
.section-header .nb-scribble { display: flex; justify-content: center; }
.nb-scribble-hero { display: block; margin: -8px 0 14px 4px; font-size: 1.5rem; color: #b8326a; transform: rotate(-1.5deg); }
@media (max-width: 768px) { .nb-scribble { font-size: 1.35rem; } .nb-scribble img { width: 36px; } }

/* Torn-paper edges on the cream bands */
section[style*="var(--gray-50)"], .levels-bar, .testimonials, .how-it-works { position: relative; }
section[style*="var(--gray-50)"]::before, .levels-bar::before, .testimonials::before, .how-it-works::before,
section[style*="var(--gray-50)"]::after, .levels-bar::after, .testimonials::after, .how-it-works::after {
  content: ''; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M0 12V6l8-3 7 4 9-5 8 4 9-5 9 4 8-3 9 5 9-4 8 3 9-5 8 4 9-3 10 4v6z' fill='%23fbf5e6'/%3E%3C/svg%3E") repeat-x;
  background-size: 120px 12px;
}
section[style*="var(--gray-50)"]::before, .levels-bar::before, .testimonials::before, .how-it-works::before { top: -11px; }
section[style*="var(--gray-50)"]::after, .levels-bar::after, .testimonials::after, .how-it-works::after { bottom: -11px; transform: scaleY(-1); }

/* Notebook margin line on wide screens */
@media (min-width: 1360px) {
  body::before {
    content: ''; position: fixed; top: 0; bottom: 0; left: calc(50% - 652px); width: 5px; pointer-events: none; z-index: 0;
    border-left: 2px solid rgba(255, 110, 150, .42); border-right: 1px solid rgba(255, 110, 150, .25);
  }
}

/* Motion (only when js/notebook.js adds html.nb-anim; off for reduced motion) */
@keyframes nb-sway { from { transform: rotate(var(--r, 0deg)); } to { transform: rotate(calc(var(--r, 0deg) + 2.5deg)); } }
@keyframes nb-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.nb-note-1 { --r: -5deg; } .nb-note-2 { --r: 4deg; } .nb-note-3 { --r: -3deg; }
html.nb-anim .nb-note { animation: nb-sway 5.5s ease-in-out infinite alternate; }
html.nb-anim .nb-note-2 { animation-delay: -1.8s; }
html.nb-anim .nb-note-3 { animation-delay: -3.4s; }
html.nb-anim .nb-boy { animation: nb-bob 3.6s ease-in-out infinite alternate; }
html.nb-anim .nb-icon, html.nb-anim .nb-doodle, html.nb-anim .nb-card-city, html.nb-anim .nb-city-hero, html.nb-anim .nb-girl, html.nb-anim .nb-girl-hero {
  opacity: 0; scale: .6; transition: opacity .45s ease, scale .55s cubic-bezier(.34, 1.56, .64, 1);
}
html.nb-anim .nb-in { opacity: 1; scale: 1; }
html.nb-anim .nb-doodle.nb-in { opacity: .92; }
html.nb-anim .page-hero-seo h1, html.nb-anim .nb-hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1s ease .3s; }
html.nb-anim .page-hero-seo h1.nb-in, html.nb-anim .nb-hl.nb-in { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  html.nb-anim .nb-note, html.nb-anim .nb-boy { animation: none; }
  html.nb-anim .nb-icon, html.nb-anim .nb-doodle, html.nb-anim .nb-card-city, html.nb-anim .nb-city-hero, html.nb-anim .nb-girl, html.nb-anim .nb-girl-hero { opacity: 1; scale: 1; transition: none; }
}
/* About section: the girl illustration replaces the old placeholder box */
.about-photo.nb-about-art { background: none !important; border: 0 !important; box-shadow: none !important; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; }
.nb-about-art .nb-girl { max-width: 460px; margin: 0; }
@media (max-width: 768px) {
  #about .about-photo.nb-about-art { display: flex; margin-bottom: 18px; }
  .nb-about-art .nb-girl { max-width: 260px; }
}

/* ============================================
   HERO v2 (2026-10-18): "Same tutor. Same time. Every week." weekly planner (concept 4), same look on phones
   ============================================ */
.nb-planner-wrap { min-height: 0 !important; position: relative; padding-top: 150px; max-width: 560px; margin-left: auto; width: 100%; }
.nb-boy-peek { position: absolute; top: 0; right: 9%; width: 205px; height: auto; z-index: 0; }
.nb-planner {
  position: relative; z-index: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 6px;
  padding: 16px 14px 20px; transform: rotate(-1.6deg); box-shadow: var(--nb-shadow-lg);
}
.nb-tape { position: absolute; width: 92px; height: 26px; opacity: .92; box-shadow: 0 1px 2px rgba(0,0,0,.12); z-index: 2; }
.nb-tape-tl { top: -12px; left: -24px; transform: rotate(-32deg); background: repeating-linear-gradient(45deg, #ffd93d 0 8px, #ffeb99 8px 16px); }
.nb-tape-tr { top: -12px; right: -24px; transform: rotate(34deg); background: repeating-linear-gradient(-45deg, #9be8c6 0 8px, #d2f6e5 8px 16px); }
.nb-tape-bl { bottom: -12px; left: -22px; transform: rotate(30deg); background: repeating-linear-gradient(-45deg, #ffd93d 0 8px, #ffeb99 8px 16px); }
.nb-tape-br { bottom: -12px; right: -22px; transform: rotate(-30deg); background: repeating-linear-gradient(45deg, #9be8c6 0 8px, #d2f6e5 8px 16px); }
.nb-days { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.75rem; line-height: 1; padding: 2px 0 8px; border-bottom: 2.5px solid var(--ink); }
.nb-cols { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 250px; }
.nb-col { position: relative; border-left: 2px solid var(--ink); padding: 26px 8px 10px; }
.nb-col:first-child { border-left: 0; }
.nb-slot {
  display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--nb-mint); border: 2.5px solid var(--ink);
  border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); padding: 10px 2px 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.12; color: var(--ink);
}
.nb-tick { width: 30px; height: 25px; margin-top: 5px; }
.nb-tick path { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 0; }
.nb-planner-stars { position: absolute; width: 58px; height: auto; left: 31%; bottom: 14px; opacity: .85; }
.nb-planner-note {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 16px 6px 0 0;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.55rem; color: #b8326a; transform: rotate(-2deg);
}
.nb-planner-note img { width: 46px; height: auto; transform: rotate(160deg); }

/* motion: slots pop in one after another, ticks draw themselves */
@keyframes nb-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes nb-draw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
html.nb-anim .nb-slot { animation: nb-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
html.nb-anim .nb-col:nth-child(1) .nb-slot { animation-delay: .35s; }
html.nb-anim .nb-col:nth-child(3) .nb-slot { animation-delay: .7s; }
html.nb-anim .nb-col:nth-child(5) .nb-slot { animation-delay: 1.05s; }
html.nb-anim .nb-tick path { animation: nb-draw .45s ease-out both; }
html.nb-anim .nb-col:nth-child(1) .nb-tick path { animation-delay: .8s; }
html.nb-anim .nb-col:nth-child(3) .nb-tick path { animation-delay: 1.15s; }
html.nb-anim .nb-col:nth-child(5) .nb-tick path { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { html.nb-anim .nb-slot, html.nb-anim .nb-tick path { animation: none; } }

@media (max-width: 1024px) { .nb-planner-wrap { margin: 18px auto 0; } }
@media (max-width: 640px) {
  .nb-planner-wrap { padding-top: 104px; margin-top: 10px; }
  .nb-boy-peek { width: 140px; right: 7%; }
  .nb-planner { padding: 12px 8px 14px; }
  .nb-tape { width: 64px; height: 20px; }
  .nb-days { font-size: 1.25rem; padding-bottom: 6px; }
  .nb-cols { min-height: 178px; }
  .nb-col { padding: 16px 3px 8px; }
  .nb-slot { font-size: .78rem; padding: 7px 1px 4px; border-width: 2px; border-radius: 6px; }
  .nb-tick { width: 20px; height: 17px; margin-top: 3px; }
  .nb-planner-stars { width: 40px; bottom: 8px; }
  .nb-planner-note { font-size: 1.25rem; margin-top: 12px; }
  .nb-planner-note img { width: 34px; }
}
/* boy leans ON the planner: in front, forearms overlapping the top edge */
.nb-boy-peek { z-index: 3; top: -22px; }
@media (max-width: 640px) { .nb-boy-peek { top: -10px; } }

/* ============================================
   PARENT TOOLS (2026-10-18): plan finder, time finder, countdown, timetable maker, practice tests (js/tools.js)
   ============================================ */
.nb-tool { max-width: 720px; margin: 0 auto; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: var(--nb-shadow-lg); padding: 26px 24px; }
.tf-label { display: block; font-weight: 800; margin: 0 0 8px; }
.nb-tool select, .nb-tool input[type=text] {
  font: 700 1rem 'Nunito', system-ui, sans-serif; color: var(--ink); background: var(--nb-yellow-soft); border: 2px solid var(--ink);
  border-radius: 10px; padding: 10px 12px; min-height: 46px;
}
.nb-tool input[type=text] { width: 100%; background: #fff; margin-bottom: 14px; }
.tf-out { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.25; margin: 18px 0 6px; }
.tf-out strong { background: linear-gradient(transparent 55%, var(--nb-hl) 55%); padding: 0 .1em; }
.tf-note { color: var(--gray-600); font-size: .95rem; margin: 0; }

/* plan finder */
.pq-progress { height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; margin-bottom: 18px; }
.pq-progress span { display: block; height: 100%; width: 0; background: var(--nb-mint); transition: width .3s ease; }
.pq-q { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; margin: 0 0 14px; }
.pq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pq-opt {
  font: 800 1rem 'Nunito', system-ui, sans-serif; color: var(--ink); background: var(--nb-yellow-soft); border: 2px solid var(--ink);
  border-radius: 12px; padding: 14px 12px; box-shadow: var(--nb-shadow); cursor: pointer; text-align: center; transition: transform .12s, box-shadow .12s;
}
.pq-opt:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: var(--nb-yellow); }
.pq-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pq-result { text-align: center; }
.pq-label { font-family: var(--font-hand); font-size: 1.6rem; color: #b8326a; margin: 0; }
.pq-plan { font-family: var(--font-head); font-weight: 700; font-size: 2rem; margin: 2px 0 8px; }
.pq-why { color: var(--gray-600); max-width: 520px; margin: 0 auto 18px; }
.pq-again { display: block; margin: 14px auto 0; background: none; border: 0; font-weight: 800; text-decoration: underline; cursor: pointer; color: var(--primary); }
[hidden] { display: none !important; }

/* countdown */
.nb-countdown { max-width: 620px; margin: 0 auto 26px; background: var(--nb-yellow); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: var(--nb-shadow); padding: 18px 20px; text-align: center; transform: rotate(-.8deg); }
.cd-line { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin: 0; color: var(--ink); }
.cd-days { font-size: 2.6rem; display: inline-block; margin-right: 6px; vertical-align: -4px; }
.cd-sub { margin: 6px 0 0; font-size: .92rem; color: var(--ink-soft); }
.prose .nb-countdown p { color: var(--ink); }

/* timetable maker */
.tt-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tt-check { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); border-radius: 99px; padding: 7px 12px; font-weight: 700; cursor: pointer; background: #fff; }
.tt-check input { accent-color: #13805a; width: 18px; height: 18px; }
.tt-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.tt-row label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: .9rem; }
.tt-out { max-width: 1000px; margin: 30px auto 0; background: #fff; border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: var(--nb-shadow-lg); padding: 22px; }
.tt-title { font-family: var(--font-hand); font-size: 2.2rem; text-align: center; margin: 0 0 14px; }
.tt-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.tt-day { border-left: 2px solid var(--ink); padding: 8px 6px 10px; min-height: 150px; display: flex; flex-direction: column; gap: 8px; }
.tt-day:first-child { border-left: 0; }
.tt-dayname { font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; text-align: center; border-bottom: 2px dashed #cfcfda; padding-bottom: 4px; }
.tt-slot { border: 2px solid var(--ink); border-radius: 8px; padding: 8px 4px; text-align: center; font-size: .85rem; line-height: 1.2; display: flex; flex-direction: column; }
.tt-slot strong { font-family: var(--font-head); font-size: .95rem; }
.tt-c0 { background: var(--nb-mint); } .tt-c1 { background: var(--nb-yellow-soft); } .tt-c2 { background: #ffd3e6; } .tt-c3 { background: #d9e3ff; }
.tt-rest { font-family: var(--font-hand); font-size: 1.3rem; text-align: center; color: var(--gray-500); margin-top: 18px; }
@media (max-width: 760px) {
  .tt-grid { grid-template-columns: 1fr; }
  .tt-day { border-left: 0; border-top: 2px solid var(--ink); min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tt-day:first-child { border-top: 0; }
  .tt-dayname { width: 56px; border: 0; padding: 0; }
  .tt-slot { flex: 1 1 100px; }
  .tt-rest { margin: 0; }
  .pq-opts { grid-template-columns: 1fr; }
  .nb-tool { padding: 20px 16px; }
  .tf-out { font-size: 1.3rem; }
}
@media print {
  body { background: #fff !important; }
  body * { visibility: hidden; }
  .tt-out, .tt-out * { visibility: visible; }
  .tt-out { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; margin: 0; }
  .tt-print { display: none !important; }
  .tt-grid { grid-template-columns: repeat(7, 1fr) !important; }
}

/* practice tests */
.pt-test { max-width: 760px; margin: 0 auto; }
.pt-q { border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: var(--nb-shadow); padding: 16px 18px 18px; margin: 0 0 16px; }
.pt-q legend { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; padding: 0 6px; float: left; width: 100%; margin-bottom: 10px; }
.pt-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pt-opts label { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 700; background: var(--paper); }
.pt-opts label:has(input:checked) { background: var(--nb-yellow-soft); }
.pt-opts input { accent-color: var(--ink); width: 18px; height: 18px; }
.pt-q.ok { background: #e3f9ee; }
.pt-q.bad { background: #fff0f5; }
.pt-q.bad label.is-answer { background: var(--nb-mint); }
.pt-check { display: flex; margin: 8px auto 0; }
.pt-result { margin-top: 26px; text-align: center; background: var(--nb-yellow); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: var(--nb-shadow-lg); padding: 22px; transform: rotate(-.6deg); }
.pt-scoreline { font-family: var(--font-head); font-weight: 700; font-size: 2rem; margin: 0; }
.pt-msg { font-weight: 700; margin: 4px 0 12px; }
.pt-weak-h { font-family: var(--font-hand); font-size: 1.5rem; margin: 0; }
.pt-weak { list-style: none; padding: 0; margin: 6px 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pt-weak li { background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 5px 12px; font-weight: 700; font-size: .9rem; }
@media (max-width: 560px) { .pt-opts { grid-template-columns: 1fr; } }

/* Pricing on phones (2026-10-18): both plans stacked and fully visible (no swipe), long feature lists folded */
@media (max-width: 768px) {
  .pricing-grid {
    display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important;
    overflow: visible !important; margin: 0 auto !important; padding: 0 !important; max-width: 440px !important;
  }
  .pricing-grid > * { max-width: none !important; }
  .pricing-card { padding: 26px 22px !important; }
  .pricing-price .amount { font-size: 2.6rem; }
  .pricing-features.nb-short li:nth-child(n+6) { display: none; }
  .nb-feat-more { display: block; margin: -14px 0 18px; background: none; border: 0; padding: 0; font: 800 .95rem 'Nunito', system-ui, sans-serif; color: var(--primary); text-decoration: underline; cursor: pointer; text-align: left; }
}
@media (min-width: 769px) { .nb-feat-more { display: none; } }
/* practice tests: worked answers appear after checking (they stay in the HTML for search engines) */
.pt-exp { margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--ink); background: var(--paper); font-size: .95rem; color: var(--ink-soft); border-radius: 0 8px 8px 0; }
.pt-test:not(.checked) .pt-exp { display: none; }
/* practice hub: by-year grid */
.yr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.yr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--nb-shadow); padding: 10px 12px; }
.yr-row strong { font-family: var(--font-head); font-size: 1.1rem; flex: 1 0 100%; }
.yr-row a { font-weight: 800; font-size: .9rem; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 12px; background: var(--nb-yellow-soft); }
.yr-row a:nth-child(3) { background: #d6f7e8; }
.yr-row a:hover { background: var(--nb-yellow); }
@media (max-width: 560px) { .yr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .yr-row { padding: 8px 10px; } .yr-row a { padding: 3px 9px; font-size: .82rem; } }

/* 2026-10-19: readability + practice tests everywhere */
:root { --gray-400: #6a6a7e; } /* small grey labels were 2.4:1 on cream; now ~5:1 */
.testimonial-stars { color: #b45309; }
.nav-links a.nb-nav-tests, .mobile-menu a.nb-nav-tests { background: #d6f7e8; color: var(--ink); border: 2px solid var(--ink); font-weight: 800; }
.nav-links a.nb-nav-tests { padding: 6px 12px; }
.nav-links a.nb-nav-tests:hover { background: var(--nb-mint); }
.ft-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.ft-chip { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 16px; box-shadow: var(--nb-shadow); transition: transform .12s, box-shadow .12s, background .12s; }
.ft-chip:nth-child(3n+1) { background: var(--nb-yellow-soft); } .ft-chip:nth-child(3n+2) { background: #d6f7e8; } .ft-chip:nth-child(3n) { background: #ffdcec; }
.ft-chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.ft-chip-alt { background: #d9e3ff !important; }
@media (max-width: 560px) { .ft-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ft-chip { text-align: center; padding: 9px 4px; font-size: .95rem; } }
html { scroll-padding-top: 90px; }
@media (min-width: 769px) and (max-width: 1120px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 7px 9px; font-size: .88rem; }
  .nav-links a.nb-nav-tests { padding: 5px 9px; }
  .nav-logo { font-size: 1.08rem; }
  .nav-actions .btn-sm { padding: 7px 11px; font-size: .8rem; }
}
@media (min-width: 769px) and (max-width: 960px) { .nav-links a[href="index.html"] { display: none; } }