/* Doe Maar Dutch — public pages (home + about + pricing).

   Rebuilt to match the "Lovable" design. The look is warm and personal:
   Figtree for body text, Outfit for headings (both loaded from Google Fonts
   in base_public.html), a warm-orange primary, soft sky and leaf accents, a
   cream secondary, rounded corners and a soft floating shadow.

   This is plain, server-rendered CSS: the original design's Tailwind utilities
   are recreated here as explicit component and helper classes. The only
   external resource is Google Fonts (via <link> in the head); everything else
   is self-hosted here. */

:root {
  --background: oklch(.991 .003 100);
  --foreground: oklch(.245 .019 255);
  --primary: oklch(.68 .18 40);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(.949 .023 68);
  --muted: oklch(.96 .006 95);
  --muted-foreground: oklch(.49 .014 255);
  --border: oklch(.89 .009 95);
  --sky: oklch(.922 .038 235);
  --leaf: oklch(.922 .045 135);
  --floating-shadow: 0 8px 28px oklch(.245 .019 255 / .1);
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;
}

* { box-sizing: border-box; border-color: var(--border); }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Figtree", system-ui, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0;
}

h1, h2, h3, h4 {
  font-family: "Outfit", system-ui, Arial, sans-serif;
  letter-spacing: 0;
}

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

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

/* ---------------------------------------------------------------- layout */
.container-wide {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Figtree", system-ui, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, filter .2s, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-brand { background: var(--primary); color: var(--primary-foreground); }
.btn-brand:hover { filter: brightness(.94); }

.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--muted); color: var(--primary); }

.btn-soft { background: var(--secondary); color: var(--foreground); }
.btn-soft:hover { filter: brightness(.97); }

.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-link {
  background: transparent;
  color: var(--foreground);
  padding: 0;
  border: 0;
  font-weight: 600;
}
.btn-link:hover { color: var(--primary); }

.btn-sm { padding: 7px 12px; font-size: 13px; }

.main-cta { height: 49px; padding-inline: 24px; font-size: 14px; }

/* ------------------------------------------------- CTA choice menu */
/* "Plan my first lesson" opens a small menu of Email me / WhatsApp me.
   Built on <details>/<summary> so it works with no JavaScript. */
.cta-menu { position: relative; display: inline-block; }
.cta-menu > summary {
  list-style: none;
  cursor: pointer;
}
.cta-menu > summary::-webkit-details-marker { display: none; }
.cta-menu > summary::marker { content: ""; }

.cta-menu-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 100%;
  padding: 8px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--floating-shadow);
}
.cta-menu-options .btn { width: 100%; white-space: nowrap; }

/* Header menu sits at the right edge, so open it right-aligned. */
.cta-menu.header-cta .cta-menu-options { left: auto; right: 0; }

/* In the mobile nav the button is full width and the options drop in flow. */
.mobile-nav .cta-menu { display: block; width: 100%; }
.mobile-nav .cta-menu > summary { width: 100%; }
.mobile-nav .cta-menu-options {
  position: static;
  margin-top: 8px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Hero: the box opens to the RIGHT of the button, in the spot where
   "How it works" sits. That link is hidden while the box is open and comes
   back when it closes. On narrow screens the box drops in below the button. */
.hero-cta .cta-menu-options {
  top: 50%;
  left: calc(100% + 22px);
  transform: translateY(-50%);
  flex-direction: row;
  gap: 6px;
  min-width: 0;
  padding: 5px;
}
.hero-cta .cta-menu-options .btn { width: auto; height: 37px; }
.hero-actions:has(.hero-cta[open]) .inline-link,
.hero-actions.cta-open .inline-link { visibility: hidden; }

/* ---------------------------------------------------------------- nav */
.site-header {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

nav.site-header-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: oklch(.991 .003 100 / .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand-word {
  font-family: "Outfit", system-ui, Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: .95;
  color: var(--foreground);
  text-decoration: none;
}
.brand-dot { color: var(--primary); }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .2s;
}
.nav-link:hover,
.nav-link.active { color: var(--primary); }

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

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--foreground);
}
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding-block: 8px 24px;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link { font-size: 16px; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      oklch(.991 .003 100 / .86) 0%,
      oklch(.97 .009 85 / .78) 55%,
      oklch(.991 .003 100 / .88) 100%);
  z-index: -1;
}
.hero-content {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding-block: 92px 96px;
}
.hero h1 {
  font-size: 68px;
  line-height: 1.03;
  font-weight: 600;
  margin: 22px 0;
}
.hero h1 .accent { color: var(--primary); }
.hero-copy {
  font-size: 18px;
  line-height: 1.7;
  max-width: 520px;
  margin-inline: auto;
  color: var(--muted-foreground);
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 29px;
}
.hero-note {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-note svg { width: 15px; height: 15px; color: var(--primary); }

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
}
.inline-link:hover { color: var(--primary); }
.inline-link svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow.center { justify-content: center; }
.eyebrow svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: 83px; }
.section-head { text-align: center; max-width: 620px; margin-inline: auto; }
.section-title {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.15;
  margin: 16px 0 0;
}
.section-intro {
  color: var(--muted-foreground);
  line-height: 1.75;
  font-size: 16px;
  margin-top: 18px;
}

/* Halve the vertical gap between the teaching-method section (#method) and
   the "How I teach" section (#approach): their 83px + 83px = 166px becomes
   ~42px + 42px = ~84px. Scoped to just this pair. */
#method { padding-bottom: 21px; }
#approach { padding-top: 21px; }

/* ---------------------------------------------------------------- method grid */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.method-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--floating-shadow);
}
.method-card h3 { font-size: 20px; font-weight: 500; margin: 14px 0 8px; }
.method-card p { font-size: 14px; color: var(--muted-foreground); line-height: 1.6; margin: 0; }

.feature-icon {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--foreground);
}
.feature-icon svg { width: 23px; height: 23px; }
.bg-secondary { background: var(--secondary); }
.bg-sky { background: var(--sky); }
.bg-leaf { background: var(--leaf); }

/* ---------------------------------------------------------------- promise strip */
.promise-strip { border-block: 1px solid var(--border); padding: 25px 0; }
.promise-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 500;
}
.promise-item { display: flex; align-items: center; gap: 10px; }
.promise-item svg { width: 18px; height: 18px; color: var(--primary); flex: none; }

/* ---------------------------------------------------------------- feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}
.feature-grid article {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--floating-shadow);
}
.feature-grid .feature-icon { margin-bottom: 21px; }
.feature-grid h3 { font-size: 22px; font-weight: 500; margin: 0 0 12px; }
.feature-grid p { font-size: 15px; color: var(--muted-foreground); line-height: 1.8; margin: 0; }

/* ---------------------------------------------------------------- portal section */
.portal-section { background: var(--sky); }
.portal-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 75px;
  align-items: center;
}
.portal-text h2 { margin-top: 10px; }
.portal-checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}
.portal-checklist li { display: flex; align-items: flex-start; gap: 12px; }
.portal-checklist svg { width: 18px; height: 18px; color: var(--primary); flex: none; margin-top: 1px; }

.portal-preview {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--floating-shadow);
  overflow: hidden;
}
.portal-top {
  padding: 20px 25px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portal-top .portal-title {
  font-family: "Outfit", system-ui, Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.portal-top .portal-sub { font-size: 12px; color: var(--muted-foreground); }
.portal-body { padding: 25px; }
.portal-greeting { display: flex; justify-content: space-between; align-items: center; }
.portal-greeting h3 { margin: 0; font-size: 24px; font-weight: 500; }
.portal-greeting .sprout { color: var(--primary); }
.portal-greeting .sprout svg { width: 29px; height: 29px; }

.portal-tabs { display: flex; gap: 8px; margin-block: 20px; flex-wrap: wrap; }
.filter-row { display: flex; gap: 8px; margin-top: 12px; }

.word-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 13px;
}
.word-search svg { width: 16px; height: 16px; color: var(--muted-foreground); flex: none; }
.word-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--foreground);
}
.word-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.word-row strong { font-weight: 600; }
.word-row p { margin: 4px 0 0; font-size: 12px; color: var(--muted-foreground); }
.word-level {
  font-size: 12px;
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  align-self: flex-start;
  white-space: nowrap;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.no-results { font-size: 14px; color: var(--muted-foreground); padding: 24px 0; }
.lesson-item { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 16px; }
.lesson-item:last-child { border-bottom: 0; margin-bottom: 0; }
.lesson-item h4 { margin: 0 0 8px; font-weight: 500; }
.lesson-item p { margin: 0; font-size: 14px; color: var(--muted-foreground); }
/* Preview logo: the header wordmark, a little smaller. */
.portal-top .portal-logo { font-size: 20px; }
#wordList { margin-top: 4px; }
.word-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 6px;
}
.scenario-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.scenario-frame img { display: block; width: 100%; height: auto; }
.scenario-blur {
  position: absolute;
  inset: -24px -24px -24px 50%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: oklch(.991 .003 100 / .15);
}
.preview-frame {
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
  overflow: hidden;
}
/* Once a screenshot is dropped in, the frame fits the image. */
.preview-frame:has(img) { min-height: 0; background: none; }
.preview-frame img { display: block; width: 100%; height: auto; }
.footer-copy.portal-copy { margin-top: 20px; }

/* ---------------------------------------------------------------- courses */
.courses-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.courses-head .section-title { margin-top: 10px; }
.courses-head .section-intro { max-width: 20em; margin-top: 0; }
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 35px;
}
.course {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 29px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.course-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
}
.course h3 { font-size: 26px; font-weight: 500; margin: 20px 0 10px; }
.course p { color: var(--muted-foreground); line-height: 1.7; font-size: 15px; margin: 0; flex: 1; }
.course .price {
  font-family: "Outfit", system-ui, Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  margin: 18px 0 6px;
}
.course .price span { font-size: 15px; font-weight: 400; color: var(--muted-foreground); }
.course .btn-link { margin-top: 20px; }

/* ---------------------------------------------------------------- closing */
.closing { text-align: center; background: var(--background); padding: 65px 24px; }
.closing .section-title { margin-top: 8px; }
.closing-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.closing-note { margin-top: 20px; font-size: 13px; color: var(--muted-foreground); }
.closing-note em { font-style: italic; }

/* ---------------------------------------------------------------- footer */
.footer-wrap { border-top: 1px solid var(--border); background: var(--secondary); }
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 36px;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-tag { font-size: 13px; color: var(--muted-foreground); margin: 0; }
.footer-contact { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-copy { font-size: 12px; color: var(--muted-foreground); margin: 0; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.footer-links a { color: var(--muted-foreground); text-decoration: none; }
.footer-links a:hover { color: var(--primary); text-decoration: underline; }

/* ---------------------------------------------------------------- legal pages (/terms, /privacy) */
.page-legal main > .section { padding-top: 56px; }
.legal-body { max-width: 720px; margin-inline: auto; overflow-wrap: break-word; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.75; }
.legal-body p { margin: 0 0 14px; }
.legal-body h2 { font-size: 24px; font-weight: 500; margin: 44px 0 14px; scroll-margin-top: 108px; }
.legal-body ul { margin: 0 0 16px; padding-left: 1.3em; }
.legal-body li { margin-bottom: 6px; }
.legal-body li::marker { color: var(--primary); }
.legal-body a { color: var(--primary); text-underline-offset: 2px; }
.legal-meta {
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 8px;
}
.legal-meta p { font-size: 15px; line-height: 1.7; margin: 0; }
.legal-meta .legal-version { margin-top: 12px; color: var(--muted-foreground); font-size: 14px; }
.legal-table-wrap { overflow-x: auto; margin: 4px 0 18px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.legal-table th { font-family: "Outfit", system-ui, Arial, sans-serif; font-weight: 600; background: var(--muted); }
.legal-table td:first-child { width: 55%; }
@media (max-width: 600px) {
  .page-legal main > .section { padding-top: 36px; }
  .legal-body h2 { font-size: 21px; margin-top: 36px; }
  .legal-body p, .legal-body li { font-size: 15px; }
  .legal-meta { padding: 18px; }
  .legal-table { font-size: 14px; }
  .legal-table th, .legal-table td { padding: 9px 8px; }
}

/* ---------------------------------------------------------------- about page */
.page-head { background: var(--secondary); padding-block: 72px; text-align: center; }
.page-head .section-title { margin-top: 14px; }
.page-head .section-intro { margin-inline: auto; max-width: 34em; }

.about-body { max-width: 760px; margin-inline: auto; }
.about-body h2 { font-size: 30px; font-weight: 500; margin: 0 0 18px; }
.about-body p { font-size: 16px; line-height: 1.8; color: var(--foreground); margin: 0 0 16px; }
.about-portrait {
  float: right;
  width: 240px;
  max-width: 42%;
  margin: 4px 0 1.25rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--floating-shadow);
}
.about-block { overflow: auto; margin-bottom: 56px; }
.about-block:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- pricing page */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  margin-inline: auto;
}
.pricing-grid .course { align-items: stretch; }
.pricing-contact { text-align: center; max-width: 620px; margin-inline: auto; }
.pricing-contact h2 { font-size: 34px; font-weight: 500; margin: 0 0 14px; }
.pricing-contact p { color: var(--muted-foreground); font-size: 16px; line-height: 1.75; margin: 0 0 24px; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pricing-note { max-width: 760px; margin: 28px auto 0; font-size: 15px; line-height: 1.7; }
.pricing-note-label { font-weight: 700; color: var(--primary); }
.pricing-note a { color: var(--primary); font-weight: 600; }
/* Orange divider halfway between the note and "Interested in classes?". */
.section.pricing-plans { padding-bottom: 0; }
.pricing-plans + .pricing-divider + #contact { padding-top: 0; }
.pricing-divider {
  border: 0;
  border-top: 2px solid var(--primary);
  max-width: 760px;
  margin-block: 64px;
}

/* ---------------------------------------------------------------- reveal */
.reveal { animation: rise .65s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .container-wide { width: calc(100% - 48px); }
  .desktop-nav { display: none; }
  .header-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero h1 { font-size: 56px; }
  .portal-layout { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid { gap: 28px; }
  .promise-inner { flex-wrap: wrap; justify-content: center; }
  .course { padding: 22px; }
  .about-portrait { width: 200px; }
}

@media (max-width: 700px) {
  .hero-cta[open] { display: block; width: 100%; }
  .hero-cta .cta-menu-options {
    position: static;
    transform: none;
    max-width: 320px;
    margin: 10px auto 0;
  }
  .hero-cta .cta-menu-options .btn { flex: 1 1 0; }
  .hero-actions:has(.hero-cta[open]) .inline-link,
  .hero-actions.cta-open .inline-link { display: none; }
}

@media (max-width: 600px) {
  .container-wide { width: calc(100% - 32px); }
  .site-header { min-height: 72px; gap: 12px; }
  .brand-word { font-size: 22px; }
  .hero-content { padding-block: 56px 60px; max-width: 100%; }
  .hero h1 { font-size: 40px; margin-block: 18px; }
  .hero-copy { font-size: 16px; max-width: 100%; }
  .hero-actions { gap: 14px; flex-wrap: wrap; }
  .hero-actions .main-cta { padding-inline: 18px; }
  .promise-inner { display: grid; grid-template-columns: 1fr 1fr; justify-content: start; font-size: 12px; gap: 16px; }
  .section { padding-block: 55px; }
  /* All six teaching boxes evenly spaced on phones: no extra gap between
     the method grid and the feature grid, just the 24px grid gap. */
  #method { padding-bottom: 0; }
  #approach { padding-top: 0; }
  .section-title { font-size: 32px; }
  .method-grid, .course-grid, .feature-grid, .pricing-grid { grid-template-columns: 1fr; gap: 24px; }
  .feature-grid { margin-top: 24px; }
  .courses-head { gap: 8px; }
  .closing { padding-block: 50px; }
  .about-portrait { float: none; display: block; margin: 0 auto 1.25rem; max-width: 100%; width: 220px; }
  .footer { align-items: flex-start; }
  .page-head { padding-block: 52px; }
  .pricing-divider { margin-block: 44px; }
}