.ic {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.28em;
}
.beta-cta-icon { display: inline-flex; color: var(--primary); }
.beta-cta-icon .ic { width: 26px; height: 26px; }
.contact-hours .ic { width: 17px; height: 17px; stroke-width: 2; }

:root {
  /* Thai stacks a tone mark on an above-vowel — เช้า is เ + ช + ◌้ + า — and the
     mark is the only ink up there. Measured in the browser across every base ×
     above-vowel × tone: Trirong's ink reaches 1.257em above the baseline (ก็้ at
     500) and 0.35em below it, so two lines collide at any leading under 1.57.
     IBM Plex Sans Thai needs 1.49. Thirteen blocks on this page were colliding,
     the h1 by 11px and the section titles by up to 20. Do not tighten these
     without measuring again. */
  --lead-display: 1.62;
  --lead-text: 1.54;
}

:root {
  /* The palette, the shadows and the two faces now live in css/tokens.css,
     which every page links before this file — demo.html carries its own
     stylesheet and needs the same values without the same layout. Add a
     token there, not here. */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  font-weight: 400;
}

/* Fade-in animation disabled - content always visible */
.fade-in { opacity: 1; transform: none; }
.fade-in.visible { opacity: 1; transform: none; }

/* Floating decorations */


.wrap { position: relative; z-index: 2; }

/* Navigation */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 18px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(250, 246, 240, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
}
.logo-text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lead-text);
}
.logo-text small {
  display: block;
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--primary); }

.cta-nav {
  padding: 10px 22px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.cta-nav:hover { background: var(--primary); transform: translateY(-1px); }

/* Hero */
.hero {
  position: relative;
  padding: 168px 48px 104px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  /* morning light, not a photograph: the page starts just after sunrise */
  background:
    radial-gradient(120% 90% at 78% 0%, var(--cream-2) 0%, rgba(237, 241, 248, 0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
}

.eyebrow {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--primary);
  flex: none;
}

h1.hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: var(--lead-display);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 22px;
}

.hero-sub {
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 34px;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #0E1930; }
.btn-outline { border-color: var(--border); color: var(--ink); background: var(--paper); }
.btn-outline:hover { border-color: var(--ink); }

.hero-note { margin-top: 20px; font-size: 14.5px; color: var(--muted); }

/* The proof is the product: one phone, one real thread, no floating cards. */
.hero-proof { justify-self: center; width: 100%; max-width: 380px; }
.phone {
  border-radius: 40px;
  background: var(--ink);
  padding: 11px;
  box-shadow: var(--shadow-xl);
}
.phone-screen {
  border-radius: 30px;
  overflow: hidden;
  background: #8CA7C4;              /* LINE's own chat ground */
  display: flex;
  flex-direction: column;
}
.line-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 16px 14px;
  background: #F7F8FA;
  border-bottom: 1px solid #E6E9EE;
}
.line-bar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px;
  flex: none;
}
.line-bar-name {
  display: flex; flex-direction: column;
  font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: var(--lead-text);
}
.line-bar-name small { font-size: 11.5px; font-weight: 400; color: var(--muted); }

.line-thread { padding: 18px 14px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.line-day {
  align-self: center;
  font-size: 11.5px;
  color: #fff;
  /* 0.28 over the chat ground composites to #6B829E and measures 3.95:1.
     0.45 gives 5.44 and the pill still reads as a translucent veil. */
  background: rgba(22, 34, 60, 0.45);
  padding: 4px 12px;
  border-radius: 999px;
}
.line-row { display: flex; align-items: flex-end; gap: 8px; }
.line-bubble {
  background: #fff;
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 84%;
}
/* The timestamps sit outside the bubbles, on the chat ground, where white
   measures 2.49:1. Dark is both legible there (6.35:1) and what LINE itself
   does on a light theme. */
.line-row time { font-size: 11px; color: var(--ink); padding-bottom: 3px; }

.hero-proof-cap {
  margin-top: 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding: 132px 24px 72px; }
  .hero-sub { max-width: none; }
  .hero-proof { max-width: 340px; }
}

section.section {
  padding: 120px 48px;
  position: relative;
}

/* Showcase section with timetable image */
.showcase {
  padding: 100px 48px;
  background: linear-gradient(160deg, var(--butter) 0%, var(--peach) 100%);
  position: relative;
  overflow: hidden;
}
.showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.4) 0%, transparent 50%),
                    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.3) 0%, transparent 50%);
  pointer-events: none;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.showcase-title {
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 600;
  line-height: var(--lead-display);
  margin: 18px 0 24px;
}
.accent-wavy {
  color: inherit;
  position: relative;
  display: inline-block;
}
.showcase-lead {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 28px;
  color: var(--ink);
}
.showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.showcase-tag {
  padding: 8px 17px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.showcase-tag:hover {
  transform: translateY(-6px) rotate(-3deg) scale(1.08);
}
.showcase-img-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease;
}
.showcase-img-wrap:hover {
  transform: rotate(0deg) scale(1.02);
}
.showcase-img-wrap img {
  width: 100%;
  display: block;
  border-radius: 28px;
}
.showcase-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  transition: transform 0.4s ease;
}
.showcase-day:hover { transform: rotate(0deg) scale(1.01); }
.showcase-day-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 13px 18px;
  border-radius: 12px;
  background: var(--cream-2);
}
/* the two moments a message goes home */
.showcase-day-card.sends {
  background: var(--primary-soft);
  position: relative;
}
.showcase-day-card.sends::after {
  content: '';
  position: absolute;
  right: 16px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.showcase-day-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.showcase-day-act { font-weight: 600; }
.showcase-sticker {
  position: absolute;
  font-size: 48px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}
/* These asked for `bob` and `wiggle`, which were never written as keyframes,
   so both declarations have always done nothing. Removed rather than
   implemented: the page has one piece of motion now and it is the hero. */
.showcase-sticker-1 { top: -20px; right: -15px; }
.showcase-sticker-2 { bottom: -18px; left: -12px; }

@media (max-width: 900px) {
  .showcase { padding: 80px 24px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
  .showcase-img-wrap { transform: rotate(0); }
}

.container { max-width: 1200px; margin: 0 auto; }

.section-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--primary-ink);
  font-weight: 600;
  margin-bottom: 18px;
}

h2.section-title {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--lead-display);
  margin-bottom: 28px;
  max-width: 960px;
  color: var(--ink);
  font-variation-settings: "opsz" 100;
}
.section-title .accent {
  font-family: var(--display);
  color: inherit;
  font-style: normal;
  font-weight: 700;
  font-size: 0.92em;
}

.section-lead {
  font-family: var(--body);
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 72px;
  line-height: 1.7;
  font-weight: 400;
}

/* Why Section */
.why {
  background: var(--ink);
  color: var(--cream);
}
.why .section-eyebrow { color: var(--primary); }
.why .section-title { color: var(--cream); }
.why .section-lead { color: rgba(255, 255, 255, 0.72); }

.problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.problem {
  padding: 30px 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  position: relative;
}
.problem-when {
  display: inline-block;
  font-size: 13px;
  color: var(--primary);
  border: 1px solid rgba(222, 143, 11, 0.42);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 18px;
}
.problem h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: var(--lead-text);
}
.problem p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.7;
}

/* Value Props */
.values {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.value {
  padding: 38px 36px 40px;
  border-radius: 18px;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.value:hover { box-shadow: var(--shadow-md); }
.value.large { grid-column: span 7; }
.value.small { grid-column: span 5; }
.value.wide  { grid-column: span 12; }
.value.half  { grid-column: span 6; }
@media (max-width: 860px) { .value, .value.large, .value.small, .value.wide, .value.half { grid-column: span 12; } }


.value-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 0;
  background: none;
  margin-bottom: 18px;
}
/* who this is for, said with a mark rather than a different card colour */
.value-label::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 9px;
  vertical-align: 0.08em;
}
.value.for-school .value-label::before { background: var(--ink); }
.value h3 {
  font-family: var(--display);
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--lead-text);
  margin-bottom: 20px;
}
.value p {
  font-size: 16px;
  line-height: 1.75;
  max-width: 560px;
}

/* Feature Spotlight Sections */
.spotlight {
  background: white;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.spotlight-alt { background: var(--cream-2); }

.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 40px;
}
.spotlight-grid.reverse .spotlight-text { order: 2; }
.spotlight-grid.reverse .spotlight-visual { order: 1; }

.spotlight-text h3 {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  line-height: var(--lead-text);
  margin-bottom: 24px;
}
.spotlight-text h3 .accent { color: inherit; }

.spotlight-text p.lead {
  font-size: 17px;
  color: var(--ink);
  opacity: 0.8;
  margin-bottom: 24px;
  line-height: 1.75;
}

.spotlight-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.spotlight-bullets li {
  padding-left: 32px;
  position: relative;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}
.spotlight-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 2px;
  background: var(--primary);
}

/* Mock LINE message preview */
.line-preview {
  background: #F7F7F7;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  max-width: 400px;
  margin: 0 auto;
}
.line-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 16px;
}
.line-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 20px;
}
.line-header-info {
  flex: 1;
}
.line-header-name { font-size: 14px; font-weight: 600; }
.line-header-sub { font-size: 11px; color: var(--muted); }
.line-header-green {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--line-tint);
  color: var(--line-ink);
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.line-message {
  background: white;
  padding: 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 8px;
  border: 1px solid #F0F0F0;
}
.line-message-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}
.line-message small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.attendance-meter {
  background: white;
  padding: 16px;
  border-radius: 14px;
  margin-top: 12px;
  border: 1px solid #F0F0F0;
}
.meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}
.meter-bar {
  height: 8px;
  background: #F0F0F0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #06C755, #5ACE7B);
  border-radius: 4px;
  width: 92%;
}
.meter-fill.warn {
  background: linear-gradient(90deg, var(--primary), var(--sun));
  width: 78%;
}
.meter-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

.event-card {
  background: white;
  padding: 16px;
  border-radius: 14px;
  border-left: 4px solid var(--primary);
  margin-top: 12px;
  font-size: 13px;
}
.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 8px;
}
.event-card-date {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--peach);
  border-radius: 6px;
  font-weight: 600;
}
/* Was an <h5> inside a mockup of a LINE message. It is the title of a fake
   card, not a section of this page, so it skipped from <h3> to <h5> in the
   document outline and a screen reader announced it as page structure. It is
   a paragraph now and keeps the same look. */
.event-card .event-card-title {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  /* Explicit, because .event-card p below paints every other paragraph in
     the card muted grey and this one is now a paragraph too. */
  color: var(--ink);
  margin-bottom: 4px;
}
.event-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Audiences */
.audiences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}
.audience {
  padding: 56px 48px;
  border-radius: 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.audience:hover {
  transform: translateY(-8px) rotate(-0.5deg);
}
.audience-1 { background: linear-gradient(140deg, var(--peach) 0%, var(--butter) 100%); }
.audience-2 { background: linear-gradient(140deg, var(--lavender) 0%, var(--mint) 100%); }

.audience-eyebrow {
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 18px;
  opacity: 0.6;
}
.audience h3 {
  font-family: var(--display);
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 700;
  line-height: var(--lead-text);
  margin-bottom: 28px;
}
.audience ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.audience li {
  padding-left: 34px;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
}
.audience li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* Pricing */
.pricing { background: var(--cream-2); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.pricing .container { max-width: 1400px; }
.price-card {
  background: white;
  padding: 36px 26px;
  border-radius: 28px;
  border: 1px solid var(--border);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.12);
}
.price-card.premium {
  background: linear-gradient(155deg, var(--butter) 0%, #FFFFFF 60%);
  border: 2px solid var(--primary);
  box-shadow: 0 16px 48px rgba(232, 154, 92, 0.18);
}
.price-card.deluxe {
  background: var(--paper);
}
.price-card:hover { transform: translateY(-6px); }
.price-card.featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.price-card.featured .price-name { color: var(--primary); }
.price-card.featured ul li { color: rgba(255, 255, 255, 0.72); }
.price-card.featured ul li::before {
  background: var(--primary);
  color: var(--ink);
}
.price-badge {
  position: absolute;
  top: -14px;
  right: 28px;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-badge.best-value {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.price-name {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.price-amount {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 6px;
  line-height: var(--lead-display);
}
.price-amount small {
  font-size: 13px;
  font-weight: 400;
  font-family: var(--body);
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.price-amount-original {
  font-family: var(--body);
  font-size: 15px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-bottom: 4px;
  display: block;
}
.price-card.featured .price-amount-original { color: #8A837A; }
.price-discount-tag {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.price-card.featured .price-discount-tag {
  background: var(--butter);
  color: var(--ink);
}

/* Beta Features Section */
.beta-section {
  margin-top: 64px;
  padding: 48px;
  background: linear-gradient(135deg, var(--lavender) 0%, #FFFFFF 60%);
  border: 2px dashed var(--ink);
  border-radius: 24px;
  position: relative;
}
.beta-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.beta-badge-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: white;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.beta-badge-lg::before {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.beta-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  line-height: var(--lead-text);
  margin-bottom: 12px;
}
.beta-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 720px;
}
.beta-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.beta-feature {
  background: white;
  padding: 24px;
  border-radius: 22px;
  border: 2px solid var(--border);
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.beta-feature:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  border-color: var(--ink);
  box-shadow: 0 16px 32px rgba(93, 109, 245, 0.15);
}
.beta-feature-icon {
  display: flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--cream-2);
  color: var(--ink);
}
.beta-feature-icon .ic { width: 23px; height: 23px; }
.beta-feature h4 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: var(--lead-text);
  margin-bottom: 8px;
}
.beta-feature p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}
.beta-feature-status {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  background: var(--lavender);
  color: var(--ink);
  border-radius: 5px;
}
.price-card.featured .price-amount small { color: rgba(255, 255, 255, 0.72); }
.price-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  line-height: 1.65;
}
.price-card.featured .price-desc { color: rgba(255, 255, 255, 0.72); border-color: rgba(250, 246, 240, 0.15); }
.price-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-card li {
  padding-left: 30px;
  position: relative;
  font-size: 14px;
  line-height: 1.6;
}
.price-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px; height: 20px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Timeline */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-week {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: var(--lead-text);
}
.timeline-content h4 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: var(--lead-text);
  margin-bottom: 10px;
}
.timeline-content p {
  color: var(--muted);
  font-size: 15px;
  max-width: 680px;
  line-height: 1.75;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
details.faq {
  background: white;
  border: 2px solid var(--border);
  border-radius: 22px;
  padding: 26px 30px;
  transition: all 0.3s;
}
details.faq:hover {
  border-color: var(--peach);
  transform: translateY(-2px);
}
details.faq[open] {
  background: var(--cream-2);
  border-color: var(--primary);
}
details.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: var(--lead-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  font-size: 32px;
  font-weight: 400;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--primary);
  flex-shrink: 0;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

/* Final CTA */
.cta-final {
  padding: 118px 48px 124px;
  background:
    radial-gradient(58% 78% at 50% 118%, rgba(222, 143, 11, 0.30) 0%, rgba(222, 143, 11, 0) 66%),
    var(--primary-soft);
  color: var(--ink);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final-content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.cta-final h2 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  line-height: var(--lead-display);
  margin-bottom: 24px;
}
.cta-final p {
  font-size: 18px;
  margin-bottom: 44px;
  color: var(--ink-soft);
  line-height: 1.8;
}
.cta-final .btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.cta-final .btn-outline {
  border-color: var(--border);
  color: var(--ink);
  background: var(--paper);
}
.cta-final .btn-outline:hover { border-color: var(--ink); }

/* Contact method cards */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 820px;
  margin: 40px auto 24px;
}
.contact-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--ink);
  padding: 30px 24px;
  text-decoration: none;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.contact-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.contact-card:hover .contact-icon {
}
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: inherit;
}
.contact-icon .ic { width: 28px; height: 28px; }
.contact-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.contact-value {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.contact-card:hover .contact-value {
  color: var(--primary-dark);
}
.contact-hours {
  margin-top: 24px;
  font-size: 14px;
}

footer {
  padding: 48px;
  text-align: center;
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
}
footer .logo { justify-content: center; margin-bottom: 16px; }
footer .logo-text { color: var(--cream); }
/* #8B857B measured 4.32:1 on the navy footer — a shade up clears AA */
footer .logo-text small { color: #A39C90; }
footer p { color: #A39C90; line-height: 1.7; }

/* ---- motion ------------------------------------------------------------ */

/* The hero's one piece of motion, and the only thing on this page that moves
   without being asked to.
 *
 * It earns the exception because it is the product. Navigato's whole
 * proposition is that a parent's phone tells them their child arrived, within
 * seconds of it happening. A still screenshot states that; a message arriving
 * shows it. One sequence, about a second, then it is over — nothing here
 * loops.
 *
 * The hidden starting state lives inside the no-preference query rather than
 * outside it, so a reader who has asked for less motion is never served a
 * thread that starts invisible and waits for an animation that will not run.
 * `backwards` holds each item at its "from" state through its own delay. */
@media (prefers-reduced-motion: no-preference) {
  .hero-proof .line-thread > * {
    animation: line-arrive 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
  }
  .hero-proof .line-thread > *:nth-child(1) { animation-delay: 0.20s; }
  .hero-proof .line-thread > *:nth-child(2) { animation-delay: 0.52s; }
  .hero-proof .line-thread > *:nth-child(3) { animation-delay: 0.88s; }
}
@keyframes line-arrive {
  from { opacity: 0; transform: translateY(9px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

/* And the other half of the bargain. The page had three infinite animations
   declared and no reduced-motion rule at all, so the operating-system setting
   was simply ignored. Two of the three turned out to reference keyframes that
   were never written; the third, the pulse on the demo dot, is real and runs
   forever. For a reader with vestibular sensitivity that is not a decoration,
   it is a problem — and they had already said so in their settings. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
.float-card.delay-2 { transform: translateX(40px); }

/* Responsive */
@media (max-width: 1280px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 1024px) {
  nav { padding: 14px 28px; }
  .hero { padding: 120px 32px 60px; min-height: auto; }
  .hero-float-cards { display: none; }
  .hero-content { max-width: 100%; }
  .values { grid-template-columns: 1fr !important; }
  .value, .value.large, .value.small, .value.wide, .value.half {
    grid-column: span 1 !important;
    min-height: auto !important;
    padding: 40px 32px;
  }
  .spotlight-grid { grid-template-columns: 1fr; gap: 48px; }
  .spotlight-grid.reverse .spotlight-text { order: 1; }
  .spotlight-grid.reverse .spotlight-visual { order: 2; }
  .audiences { grid-template-columns: 1fr; gap: 20px; }
  .audience { padding: 48px 36px; }
  .problems { grid-template-columns: 1fr; gap: 20px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .beta-features-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .showcase-img-wrap { transform: rotate(0deg) !important; max-width: 500px; margin: 0 auto; }
  .contact-methods { grid-template-columns: 1fr !important; }
  section.section { padding: 90px 32px; }
  .timeline-item { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .timeline-week { font-size: 18px; }
  .sticker-2, .sticker-4, .sticker-5 { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
  nav { padding: 12px 20px; gap: 12px; }
  .nav-links { display: none; }
  .cta-nav { padding: 10px 18px; font-size: 13px; }
  .logo-text { font-size: 18px; }
  .logo-text small { font-size: 8px; }
  .logo-mark { width: 36px; height: 36px; font-size: 18px; }

  .hero { padding: 100px 20px 50px; }
  .hero-title { font-size: clamp(34px, 9vw, 48px) !important; line-height: var(--lead-display) !important; }
  .hero-sub { font-size: 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .eyebrow { font-size: 11px; }

  .sticker { font-size: 28px !important; }
  .sticker-1 { top: 8%; right: 4%; }
  .sticker-3 { bottom: 10%; right: 4%; }

  section.section, .cta-final { padding: 60px 20px; }
  .section-title { font-size: clamp(28px, 7vw, 38px) !important; line-height: var(--lead-display) !important; }
  .section-lead { font-size: 16px; }
  .section-eyebrow { font-size: 11px; }

  .showcase-title { font-size: clamp(26px, 7vw, 36px) !important; }
  .showcase-tags { gap: 8px; }
  .showcase-tag { padding: 7px 14px; font-size: 13px; }

  .value { padding: 32px 24px; }
  .value h3 { font-size: 22px !important; }

  .audience { padding: 36px 24px; }
  .audience h3 { font-size: 22px !important; }

  .problems { gap: 16px; }
  .problem { padding: 28px 24px; }

  .spotlight-text h3 { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .spotlight-text p.lead { font-size: 15px; }

  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  .price-card { padding: 32px 24px; }
  .price-amount { font-size: 28px; }
  .price-card.featured { transform: scale(1) !important; }

  .beta-section { padding: 40px 24px; border-radius: 20px; }
  .beta-title { font-size: 24px; }
  .beta-features-grid { grid-template-columns: 1fr; }
  .beta-feature { padding: 20px 18px; }

  .timeline-item { padding: 20px 0; }
  .timeline-content h4 { font-size: 20px; }

  details.faq { padding: 22px 24px; }
  details.faq summary { font-size: 15px; }

  .cta-final h2 { font-size: clamp(28px, 7vw, 40px) !important; }
  .cta-final p { font-size: 16px; }
  .contact-methods { gap: 12px; }
  .contact-card { padding: 24px 20px; }
  .contact-icon { font-size: 36px; }
  .contact-value { font-size: 16px; }

  footer { padding: 60px 20px 32px; text-align: center; }

  .hero-bg-blob { opacity: 0.4; }
  .blob-1 { width: 200px; height: 200px; }
  .blob-2 { width: 250px; height: 250px; }
  .blob-3 { width: 180px; height: 180px; }
}

/* Small mobile */
@media (max-width: 380px) {
  nav { padding: 10px 16px; }
  .cta-nav { padding: 8px 14px; font-size: 12px; }
  .hero { padding: 90px 16px 40px; }
  section.section, .cta-final { padding: 50px 16px; }
  .hero-title { font-size: clamp(30px, 9vw, 40px) !important; }
  .value { padding: 28px 20px; }
  .problem { padding: 24px 20px; }
  .price-card { padding: 28px 20px; }
}


/* ---- a way past the navigation ----
   There was no landmark and no skip link: a keyboard or screen-reader visitor
   had to walk the whole nav on every section jump. */
.skip-link {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--primary); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 16px; top: 12px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* ---- colours that were carrying small text below AA ----
   Measured on the page, not guessed. The marigold and the indigo stay the brand
   wherever they are a graphic, a rule or a large heading; these are the places
   they were being asked to be 11-22px of text and could not.

   The pricing cards needed doing one at a time rather than together: the
   featured card is navy and the others are white, so the same grey that fixes
   one breaks the other — which is exactly what a blanket rule did on the first
   attempt. */
.price-name { color: var(--primary-ink); }                                  /* was 2.61:1 */
.price-card.deluxe .price-name { color: #3E49B8; }                          /* indigo on white, was 4.22:1 */
.price-card.featured .price-name { color: #B9C2FF; }                        /* indigo on NAVY: needs to be light */
.price-badge { background: var(--primary-ink); color: #fff; }               /* was 2.61:1 */
.price-card.deluxe .price-badge.best-value { background: #3E49B8; color: #fff; }  /* was 4.22:1 */
.price-card.featured .price-amount-original { color: #B3ABA0; }             /* on navy, was 4.22:1 */
.price-card.deluxe .price-amount-original,
.price-card:not(.featured) .price-amount-original { color: #6E675B; }       /* on white */
.timeline-week { color: var(--primary-ink); }                               /* 22px is not large enough to excuse 2.5:1 */

/* the skip link added above was white on marigold, 2.61:1 */
.skip-link { background: var(--ink); color: #fff; }