/* ammara: design tokens, type, and shared components */

:root {
  --canvas: #fffcf8;
  --surface: #ffffff;
  --ink: #241c1c;
  --ink-muted: #6b5e5e;
  --accent: #b8355f;
  --on-accent: #ffffff;
  --accent-soft: #ffe6ec;
  --line: #f0e4e0;
  --line-strong: #8f7f7d;
  --highlight: #ffd45c;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --shadow-soft: 0 1px 2px rgba(36, 28, 28, .05), 0 12px 32px rgba(36, 28, 28, .08);

  --max-width: 1080px;
}

/* Reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

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

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

ul, ol { list-style: none; }

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

/* Base */

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

main { display: block; }

/* Type scale */

h1, h2, h3, .display-xl, .display, .headline, .title {
  font-weight: 800;
  line-height: 1.1;
}

.display-xl, h1.display-xl {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.03em;
}

@media (min-width: 640px) {
  .display-xl, h1.display-xl {
    font-size: 64px;
    line-height: 68px;
  }
}

.display, h1.display {
  font-size: 34px;
  line-height: 38px;
  letter-spacing: -0.025em;
}

@media (min-width: 640px) {
  .display, h1.display {
    font-size: 48px;
    line-height: 54px;
  }
}

.headline, h2.headline {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-weight: 800;
}

@media (min-width: 640px) {
  .headline, h2.headline {
    font-size: 34px;
    line-height: 40px;
  }
}

.title, h3.title {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

@media (min-width: 640px) {
  .title, h3.title {
    font-size: 24px;
    line-height: 30px;
  }
}

.lede {
  font-size: 19px;
  line-height: 28px;
  font-weight: 500;
}

@media (min-width: 640px) {
  .lede { font-size: 20px; line-height: 30px; }
}

.body-text, p {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  max-width: 65ch;
}

.body-strong { font-weight: 700; }

.small {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}

.text-muted { color: var(--ink-muted); }

/* Layout */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (min-width: 640px) {
  .wrap { padding: 0 var(--space-7); }
}

.section {
  padding: var(--space-8) 0;
}

.section-tight {
  padding: var(--space-6) 0;
}

/* Focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Header */

.site-header {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.wordmark {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}

.wordmark .dot { color: var(--accent); }

.wordmark--sm {
  font-size: 18px;
}

.nav-toggle {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.site-nav__links a {
  font-weight: 700;
  font-size: 15px;
}

.site-nav__links a[aria-current="page"] {
  color: var(--accent);
}

@media (max-width: 719px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
  }

  .site-nav {
    position: absolute;
    inset: 72px var(--space-5) auto var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--space-5);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    display: none;
    z-index: 50;
  }

  .site-nav.is-open { display: flex; }

  .site-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .site-header .wrap { position: relative; }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 15px 26px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover { background: #9e2c51; }

.btn-soft {
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-soft:hover { background: #ffd9e3; }

/* Pop button: highlight yellow, for one playful moment only (e.g. a free trial) */
.btn-pop {
  background: var(--highlight);
  color: var(--ink);
}

.btn-pop:hover { background: #ffc933; }

.btn-sm {
  padding: 11px 20px;
  font-size: 14px;
}

.btn[disabled] {
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  cursor: not-allowed;
}

.text-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Badges */

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.badge-highlight {
  background: var(--highlight);
  color: var(--ink);
}

.badge-soft {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow 0.25s ease;
}

.card:hover,
.card:focus-within {
  box-shadow: var(--shadow-soft);
}

/* Cards tilt in 3D on hover via Vanilla-Tilt (see initTilt in main.js),
   which sets its own transform, so hover lift here stays to box-shadow
   only rather than fighting the library over the transform property. */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 640px) {
  .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card a.card-link {
  display: block;
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  margin-top: var(--space-2);
}

/* Fields */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field label {
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field textarea {
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 17px;
  color: var(--ink);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field .help {
  color: var(--ink-muted);
  font-size: 14px;
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--accent);
}

.field .error {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

/* Compact inline form: email + button in one row, used for the small
   waitlist cards where a full-size field reads oversized */

.field-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.field-row input {
  flex: 1;
  min-width: 150px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 10px var(--space-4);
  font-size: 15px;
  color: var(--ink);
}

/* Hero */

.hero {
  position: relative;
  padding: var(--space-9) 0;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
  }
}

/* Side grid: a plainer sibling of .hero-grid for pairing a content
   column with a side element (e.g. the Teaching page review ticker),
   aligned to the top rather than centred. */

.side-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 860px) {
  .side-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
  }
}

.hero-tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* Charming detail: yellow circle + blush circle */

.charming-detail {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}

.charming-detail .circle-yellow {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--highlight);
  top: 0;
  left: 20px;
  animation: float-a 6s ease-in-out infinite;
}

.charming-detail .circle-blush {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  bottom: 0;
  right: 0;
  animation: float-b 5s ease-in-out infinite;
}

.charming-detail--corner {
  top: var(--space-6);
  right: var(--space-5);
}

@media (max-width: 719px) {
  .charming-detail--corner {
    top: var(--space-4);
    right: var(--space-4);
    transform: scale(0.7);
    transform-origin: top right;
  }
}

@keyframes float-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .charming-detail .circle-yellow,
  .charming-detail .circle-blush,
  .bubble {
    animation: none;
  }
  .pen-stroke path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Review stage: the one charming detail on Home, in place of a photo.
   A small cluster of student-review bubbles that pop in and cycle on
   their own, each slot independent so the stage always feels a little
   alive. Real quotes are duplicated into a visually-hidden list right
   after it, since the bubbles themselves are decorative/aria-hidden. */

.review-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: 340px;
  margin: 0 auto;
}

.review-bubble {
  position: absolute;
  border-radius: 28px;
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: scale(0.4) translateY(14px);
  max-width: 250px;
}

.review-bubble.is-visible {
  animation: review-pop 0.6s cubic-bezier(0.22, 1.3, 0.36, 1) forwards;
}

.review-bubble.is-leaving {
  animation: review-pop-out 0.35s ease forwards;
}

@keyframes review-pop {
  0% { opacity: 0; transform: scale(0.4) translateY(14px); }
  60% { opacity: 1; transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes review-pop-out {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.7) translateY(-10px); }
}

.review-bubble__stars {
  display: block;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: var(--space-2);
}

.review-bubble__quote {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* Percentages (of .review-stage's own width) rather than fixed pixels,
   so bubbles stay inside the stage at every width, including the zone
   right after the hero grid splits into two columns (~860-1000px)
   where the stage renders narrower than its 460px max-width. */
.review-bubble--a { top: 10px; left: 0; width: 51%; }
.review-bubble--b { top: 150px; left: 43.5%; width: 46.7%; }
.review-bubble--c { top: 255px; left: 6.5%; width: 42.4%; }

.review-bubble.tone-accent { background: var(--accent); color: var(--on-accent); }
.review-bubble.tone-accent .review-bubble__stars { color: var(--highlight); }
.review-bubble.tone-soft { background: var(--accent-soft); color: var(--ink); }
.review-bubble.tone-soft .review-bubble__stars { color: var(--accent); }
.review-bubble.tone-highlight { background: var(--highlight); color: var(--ink); }
.review-bubble.tone-highlight .review-bubble__stars { color: var(--accent); }
.review-bubble.tone-surface { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.review-bubble.tone-surface .review-bubble__stars { color: var(--accent); }

@media (max-width: 719px) {
  .review-stage { min-height: 340px; }
  .review-bubble { max-width: 210px; }
  .review-bubble--a { top: 0; left: 0; width: 195px; }
  .review-bubble--b { top: 145px; left: auto; right: 0; width: 180px; }
  .review-bubble--c { top: 275px; left: 10px; width: 170px; }

  /* Cap quotes to 3 lines on mobile so every bubble has a bounded,
     predictable height, regardless of how long the review text is.
     Without this, a long quote in these narrower bubbles could grow
     tall enough to run into whatever section follows the hero. */
  .review-bubble__quote {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-bubble.is-visible,
  .review-bubble.is-leaving {
    animation: none;
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Review ticker: a single review at a time, rising up from below,
   holding, then making way for the next. A quieter, one-at-a-time
   sibling of the scattered .review-stage cluster on Home. */

.review-ticker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  min-height: 190px;
}

.review-bubble--ticker {
  position: relative;
  width: 100%;
  max-width: 280px;
  opacity: 0;
  transform: translateY(40px);
}

.review-bubble--ticker.is-visible {
  animation: review-rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.review-bubble--ticker.is-leaving {
  animation: review-rise-out 0.4s ease forwards;
}

@keyframes review-rise-in {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes review-rise-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  .review-bubble--ticker.is-visible,
  .review-bubble--ticker.is-leaving {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bubble scene: a small cluster of floating shapes with a hand drawn
   line weaving through them, used on the Home hero and echoed smaller
   as the charming detail on the Letters page */

.bubble-scene {
  position: relative;
  width: 230px;
  height: 210px;
}

.bubble-scene--small {
  width: 130px;
  height: 110px;
}

.bubble { position: absolute; border-radius: 50%; }

.bubble--1 {
  width: 40%;
  height: 40%;
  background: var(--highlight);
  top: 2%;
  left: 10%;
  animation: float-a 6.5s ease-in-out infinite;
}

.bubble--2 {
  width: 24%;
  height: 24%;
  background: var(--surface);
  border: 1px solid var(--line);
  top: 18%;
  right: 4%;
  animation: float-b 5.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

.bubble--3 {
  width: 15%;
  height: 15%;
  background: var(--surface);
  border: 1px solid var(--line);
  bottom: 14%;
  left: 0;
  animation: float-a 7.5s ease-in-out infinite;
  animation-delay: 0.6s;
}

.bubble--4 {
  width: 9%;
  height: 9%;
  background: var(--ink);
  bottom: 4%;
  right: 30%;
  animation: float-b 5s ease-in-out infinite;
  animation-delay: 0.3s;
}

.bubble--5 {
  width: 8%;
  height: 8%;
  background: var(--accent);
  bottom: 30%;
  right: 10%;
  animation: float-a 8s ease-in-out infinite;
  animation-delay: 1s;
}

.pen-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pen-stroke path {
  stroke-dasharray: 340;
  animation: draw-stroke 6s ease-in-out infinite;
}

@keyframes draw-stroke {
  0% { stroke-dashoffset: 340; }
  45%, 70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -340; }
}

/* Hero typewriter */

.hero-type__cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 3px;
  vertical-align: -0.1em;
  background: var(--accent);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-type__cursor { animation: none; }
}

/* Hover row: move through the section cards by hovering (tap to open on touch) */

.hover-row {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
}

.hover-row__item {
  position: relative;
  overflow: hidden;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 210px;
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 rgba(36, 28, 28, 0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.hover-row__item:hover,
.hover-row__item:focus-visible {
  transform: translateY(-5px) scale(1.015);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.hover-row__icon {
  position: absolute;
  bottom: -18px;
  right: -18px;
  width: 150px;
  height: 150px;
  color: var(--accent);
  opacity: 0.12;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hover-row__item:hover .hover-row__icon,
.hover-row__item:focus-visible .hover-row__icon {
  opacity: 0.22;
  transform: scale(1.06);
}

.hover-row__arrow {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--accent);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-row__item:hover .hover-row__arrow,
.hover-row__item:focus-visible .hover-row__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 899px) {
  .hover-row { flex-direction: column; }
  .hover-row__item {
    min-height: auto;
  }
  .hover-row__item:hover,
  .hover-row__item:focus-visible {
    transform: translateY(-3px) scale(1.01);
  }
  .hover-row__arrow { opacity: 1; transform: none; }
  .hover-row__icon { opacity: 0.14; }
}

@media (prefers-reduced-motion: reduce) {
  .hover-row__item { transition: border-color 0.2s ease; }
  .hover-row__item:hover,
  .hover-row__item:focus-visible {
    transform: none;
  }
}

/* Quiet CTA link: bold and coloured, underline only on hover/focus */

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.link-cta:hover,
.link-cta:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Letter sheet: the whole Letters page reads as one page of writing
   paper, centred on the canvas, with the envelope flap as its only
   boxed detail up top and every field styled as a blank line rather
   than a boxed input. */

.letter-sheet {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 640px) {
  .letter-sheet { padding: var(--space-6) var(--space-5); }
  .letter-sheet .letter-envelope__flap {
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-6);
  }
}

.letter-sheet__salutation {
  display: block;
  margin-bottom: var(--space-4);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
}

@media (min-width: 640px) {
  .letter-sheet__salutation { font-size: 46px; }
}

.letter-sheet__signoff {
  color: var(--ink-muted);
}

.letter-sheet__sign {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 32px;
  color: var(--accent);
}

.letter-field {
  margin-top: var(--space-5);
}

.letter-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

.letter-field input,
.letter-field textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px dashed var(--line-strong);
  border-radius: 0;
  padding: 4px 0;
  font-size: 17px;
  font-family: inherit;
  color: var(--ink);
}

.letter-field textarea {
  min-height: 28px;
  resize: vertical;
}

.letter-field input:focus-visible,
.letter-field textarea:focus-visible {
  outline: none;
  border-bottom-style: solid;
  border-bottom-color: var(--accent);
}

.letter-envelope__flap {
  height: 64px;
  margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) var(--space-6);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}

/* The triangle lives on a pseudo-element, not the flap itself, so its
   clip-path doesn't also clip the wax seal sitting at the flap's tip. */
.letter-envelope__flap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-soft);
  clip-path: polygon(0 0, 100% 0, 100% 15%, 50% 100%, 0 15%);
  border-radius: inherit;
}

.letter-envelope__seal {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-soft);
}

.letter-envelope__seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Postmark: a small decorative stamp beside the letters form submit button */

.postmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-left: var(--space-3);
  flex-shrink: 0;
}

.postmark::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
}

.letters-submit-row {
  display: flex;
  align-items: center;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-6) 0;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-nav-wrap {
  position: relative;
}

.site-footer nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.footer-nav-hint {
  display: none;
}

.site-footer a {
  font-size: 14px;
  color: var(--ink-muted);
}

.site-footer a:hover { color: var(--accent); }

/* On narrow screens, keep the footer links to one clean scrollable
   row rather than wrapping unevenly across two or three lines. A
   soft fade plus a gently nudging arrow (hidden once you've scrolled
   to the end) hints that there's more to the right. */

@media (max-width: 719px) {
  .footer-nav-wrap {
    width: 100%;
  }

  .site-footer nav {
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    padding-right: var(--space-6);
  }

  .site-footer nav::-webkit-scrollbar { display: none; }

  .site-footer nav a { flex-shrink: 0; }

  .footer-nav-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    color: var(--accent);
    font-weight: 700;
    font-size: 16px;
    pointer-events: none;
    animation: footer-hint-nudge 1.6s ease-in-out infinite;
  }

  .footer-nav-hint.is-hidden {
    opacity: 0;
  }
}

@keyframes footer-hint-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-nav-hint { animation: none; opacity: 0.7; }
}

/* Closing CTA band */

.closing-cta {
  background: var(--accent);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--on-accent);
}

.closing-cta h2 { color: var(--on-accent); }

.closing-cta .btn-primary {
  background: var(--on-accent);
  color: var(--accent);
  margin-top: var(--space-5);
}

.closing-cta .btn-primary:hover { background: var(--accent-soft); }

/* Placeholder note (visible to ammara, not styled as an error) */

.todo-note {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: 13px;
  font-weight: 700;
}

/* Utility */

.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Reveal on scroll: a quiet fade + rise as sections enter view, applied
   via JS (see initReveal in main.js). Items reveal in place if JS or
   IntersectionObserver isn't available, so content is never hidden. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Home: unstuck scroll experience. Static, stacked layout by default;
   with JS (and motion allowed) it pins and plays as you scroll. */

.exp { background: var(--accent-soft); padding: var(--space-8) 0; text-align: center; }
.exp__pin { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-5); display: grid; gap: var(--space-7); justify-items: center; }
.exp__big { font-weight: 800; font-size: clamp(34px, 7.4vw, 76px); line-height: 1.05; letter-spacing: -0.03em; max-width: 14ch; margin: 0 auto; }
.exp__brand { color: var(--accent); }
.exp__brand .dot { color: var(--highlight); }
.exp__num { font-weight: 800; font-size: clamp(120px, 34vw, 280px); line-height: .9; letter-spacing: -0.06em; color: var(--accent); }
.exp__label { font-size: clamp(19px, 3.6vw, 28px); line-height: 1.3; font-weight: 700; max-width: 22ch; margin: var(--space-3) auto 0; }
.exp__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 30rem; }
.exp__pill { background: var(--highlight); color: var(--ink); font-weight: 800; font-size: clamp(14px, 2.4vw, 20px); padding: .35em .9em; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: 0 6px 18px rgba(36, 28, 28, .08); }
.exp__pill--soft { background: var(--surface); color: var(--accent); }
.exp__q, .exp__hush, .exp__bar { display: none; }
.exp__book { position: relative; width: min(78vw, 420px); }
.exp__cover, .exp__page { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.exp__page { display: none; }

.exp--live { height: 900vh; height: 900svh; padding: 0; }
.exp--live .exp__pin { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; padding: 0; display: block; overflow: hidden; }
.exp--live .exp__scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--space-5); opacity: 0; will-change: opacity, transform; }
.exp--live .exp__scene--top { justify-content: flex-start; padding-top: 11svh; }
.exp--live .exp__scene--end { background: var(--accent-soft); }
.exp--live .exp__pills { position: absolute; inset: 0; display: block; max-width: none; pointer-events: none; }
.exp--live .exp__pill { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform, opacity, filter; }
.exp--live .exp__q {
  display: block; position: absolute; left: 50%; top: 50%; pointer-events: none;
  font-weight: 800; font-size: clamp(260px, 80vw, 640px); line-height: 1; color: var(--surface);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 0;
}
.exp--live .exp__hush { display: flex; gap: 18px; position: absolute; left: 50%; top: 66%; transform: translateX(-50%); opacity: 0; }
.exp__hush i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); animation: exp-hush 1.4s ease-in-out infinite; }
.exp__hush i:nth-child(2) { animation-delay: .2s; }
.exp__hush i:nth-child(3) { animation-delay: .4s; }
@keyframes exp-hush { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.exp--live .exp__big--quiet { color: var(--ink-muted); }
.exp--live .exp__book { position: absolute; left: 50%; top: 58%; width: min(62vw, 46svh, 400px); transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.exp--live .exp__page { display: block; position: absolute; inset: 0; }
.exp--live .exp__cover { position: relative; z-index: 1; }
.exp--live .exp__scene, .exp--live .exp__pills { z-index: 2; }
.exp--live .exp__bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(184, 53, 95, .12); z-index: 3; }
.exp__bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .exp__hush i { animation: none; }
}

.shelf-feature {
  display: grid; gap: var(--space-6); align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--space-6);
}
.shelf-feature__cover {
  max-width: 260px; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  transform: rotate(-3deg); transition: transform .3s ease;
}
.shelf-feature:hover .shelf-feature__cover { transform: rotate(0); }
@media (min-width: 760px) { .shelf-feature { grid-template-columns: 260px 1fr; padding: var(--space-7); } }

.shelf-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 760px) { .shelf-row { grid-template-columns: repeat(5, 1fr); } }
.shelf-card { display: block; }
.shelf-card img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(36,28,28,.05); transition: transform .3s ease, box-shadow .3s ease; }
.shelf-card:hover img, .shelf-card:focus-visible img { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-soft); }
.shelf-card .badge { margin-top: var(--space-3); }
.shelf-card h3 { font-size: 16px; line-height: 22px; margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .shelf-feature__cover, .shelf-card img { transition: none; }
}

/* unstuck page: FAQ, steps, comparison table */

.faq { display: grid; gap: var(--space-3); }
.faq__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 0 var(--space-5);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq__item[open] { border-color: var(--accent-soft); box-shadow: var(--shadow-soft); }
.faq__item summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; font-weight: 700;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p { padding-bottom: var(--space-4); margin-top: 0; max-width: 60ch; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }

.faq__steps li { display: flex; gap: var(--space-4); align-items: flex-start; }
.faq__num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.faq__table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.faq__table table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; line-height: 22px; text-align: left; }
.faq__table th, .faq__table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.faq__table td.is-wide { white-space: normal; min-width: 21ch; }
.faq__table thead th { color: var(--accent); background: var(--accent-soft); font-weight: 800; }
.faq__table tbody th { font-weight: 700; white-space: nowrap; }
.faq__table tbody tr:nth-child(even) { background: var(--canvas); }
.faq__table tr:last-child th, .faq__table tr:last-child td { border-bottom: 0; }

@keyframes art-wobble { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes art-hush { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Floating doodles that drift at their own speed as you scroll */

.has-doodles { position: relative; overflow: hidden; }
.has-doodles > .wrap { position: relative; z-index: 1; }
.doodle { position: absolute; display: block; pointer-events: none; z-index: 0; will-change: transform; transform: rotate(var(--r, 0deg)); }
.doodle svg { width: 100%; height: auto; animation: doodle-float 7s ease-in-out infinite alternate; }
.doodle--yellow { color: var(--highlight); }
.doodle--accent { color: var(--accent); opacity: .5; }
.doodle--blush { color: #f3b8c8; }
.d1 { width: 34px; top: 14%; left: 3%; }
.d2 { width: 110px; bottom: 10%; left: 38%; }
.d3 { width: 56px; top: 8%; right: 6%; }
.d4 { width: 96px; top: 4%; right: 4%; }
.d5 { width: 30px; bottom: 6%; left: 2%; }
.d6 { width: 30px; top: 6%; right: 10%; }
.d7 { width: 90px; bottom: 4%; left: 4%; }
.d2 svg, .d5 svg, .d7 svg { animation-duration: 9s; animation-delay: -3s; }
@keyframes doodle-float { from { transform: translateY(0) rotate(0); } to { transform: translateY(-10px) rotate(6deg); } }
@media (max-width: 639px) {
  .d2, .d4 { display: none; }
  .d1 { top: 4%; } .d3 { top: 2%; width: 40px; }
}

@media (max-width: 639px) {
  .faq__table { overflow: visible; border: 0; background: none; }
  .faq__table table, .faq__table tbody, .faq__table tr, .faq__table th, .faq__table td { display: block; min-width: 0; width: auto; white-space: normal; }
  .faq__table thead { display: none; }
  .faq__table tbody tr { background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
  .faq__table tbody th { padding: 0 0 var(--space-2); border: 0; color: var(--accent); }
  .faq__table td { padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-3); }
  .faq__table td::before { content: attr(data-label); font-weight: 700; color: var(--ink-muted); font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .doodle svg { animation: none; }
}

/* Policy pages and the legal line in the footer */
.policy { max-width: 680px; }
.policy-list { padding-left: 1.25em; }
.policy-list li + li { margin-top: var(--space-2); }

.site-footer .footer-legal {
  flex-basis: 100%;
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer .footer-legal a,
.site-footer .footer-legal span { font-size: 13px; }