/* Home page (/, /Home, /enHome). Same brand as the Lovable site it replaced:
   aqua ground, sea teal, otter brown, Nunito, the app's watercolour otters. */
:root {
  --aqua: hsl(187 100% 94%);
  --aqua-2: hsl(186 72% 89%);
  --aqua-3: hsl(186 52% 80%);
  --teal: hsl(185 32% 65%);
  --sea: hsl(187 67% 25%);
  --sea-deep: hsl(190 62% 15%);
  --brown: hsl(30 22% 36%);
  --ink: hsl(207 32% 8%);
  --ink-2: hsl(207 18% 30%);
  --paper: hsl(185 60% 98.5%);
  --on-sea: hsl(187 100% 96%);
  --on-sea-2: hsl(187 45% 82%);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(1rem, 4vw, 3rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--aqua);
  color: var(--ink);
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ol { margin: 0; }
::selection { background: var(--sea); color: var(--on-sea); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: .5rem; }
.nb { display: inline-block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */
.top {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.brand img { width: 2.4rem; }
.lang {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: hsl(0 0% 100% / .6); border: 1px solid hsl(186 40% 78%);
  text-decoration: none; font-weight: 700; font-size: .9rem;
  transition: background .3s var(--ease);
}
.lang:hover { background: #fff; }
.lang svg { width: 1rem; height: 1rem; }

/* ---------- hero: the headline beside the launch film ----------
   Only as tall as its content (founder, 2026-10-18): no min-height. */
.hero {
  position: relative;
  padding: 5.25rem var(--pad) 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tag" "mis" "cta" "film";
  justify-items: center;
  text-align: center;
  overflow-x: clip;
  background:
    radial-gradient(60rem 40rem at 70% 40%, hsl(186 80% 97%) 0%, transparent 70%),
    var(--aqua);
}
.tagline {
  grid-area: tag; max-width: 22rem;
  font-weight: 900; line-height: 1.2; letter-spacing: -.01em;
  font-size: clamp(2rem, 8.6vw, 2.5rem);
  text-wrap: balance;
}
.tagline .ask { color: var(--brown); }
.en .tagline { font-size: clamp(1.9rem, 8vw, 2.3rem); }
.mission {
  grid-area: mis; max-width: 22rem; margin-top: 1rem;
  font-size: 1.15rem; font-weight: 800; line-height: 1.45; color: var(--sea); text-wrap: balance;
}
.cta { grid-area: cta; margin-top: 1.75rem; display: grid; gap: .9rem; justify-items: center; }

@media (min-width: 1000px) {
  .hero {
    padding: 5.25rem max(var(--pad), calc((100% - 68rem) / 2)) 1.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".   film"
      "tag film"
      "mis film"
      "cta film"
      ".   film";
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    justify-items: start;
    text-align: left;
  }
  .tagline { max-width: 32rem; font-size: clamp(2.6rem, 4.1vw, 3.6rem); line-height: 1.18; }
  .en .tagline { max-width: 36rem; font-size: clamp(2.3rem, 3.3vw, 2.9rem); }
  .mission { max-width: 30rem; margin-top: 1.4rem; font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
  /* the margin below matches the film's controls row, so the headline
     centres on the picture rather than on picture plus controls */
  .cta { justify-items: start; margin-top: 2.25rem; margin-bottom: 2.4rem; }
}

/* store buttons */
.stores { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
@media (min-width: 1000px) { .hero .stores { justify-content: flex-start; } }
.store {
  display: inline-flex; align-items: center; gap: .7rem;
  min-width: 11.5rem; padding: .7rem 1.35rem .7rem 1.1rem;
  border-radius: 1.1rem; text-decoration: none;
  background: var(--sea); color: var(--on-sea);
  box-shadow: 0 10px 24px -14px hsl(187 67% 20% / .9);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.store:hover { transform: translateY(-2px); background: var(--sea-deep); box-shadow: 0 16px 30px -16px hsl(187 67% 20% / .95); }
.store svg { width: 1.6rem; height: 1.6rem; flex: none; }
.store small { display: block; font-size: .72rem; opacity: .85; line-height: 1.2; }
.store b { display: block; font-size: 1.05rem; line-height: 1.25; font-weight: 800; }
.free { font-size: .85rem; color: var(--ink-2); }

/* ---------- the launch film (tool/site/home/film.py, timing in home.js) ----------
   Seven beats on the hero's aqua, no frame of its own. Everything inside the
   reel is sized in cqw of the reel's width, so the whole film scales as one
   picture. Without the script, or with reduced motion, it shows beat 6
   finished and the dots step through the beats. */
.film { grid-area: film; width: min(100%, 34rem); margin: 2.25rem 0 0; display: grid; gap: .35rem; }
@media (min-width: 1000px) { .film { width: clamp(24rem, 40vw, 35rem); margin: 0; } }
.reel {
  --app: hsl(185 32% 65%);
  --app-dark: hsl(181 46% 16%);
  --app-them: hsl(186 65% 24%);
  --app-field: hsl(187 100% 95%);
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 42 / 37;
  text-align: left; line-height: 1.5; color: var(--ink);
}
.reel .beat { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.reel .beat.now { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.reel p { margin: 0; }
.reel .otter { position: absolute; z-index: 4; height: auto; max-width: none; pointer-events: none; }
.reel .words { position: absolute; left: 0; right: 0; z-index: 5; text-align: center; font-weight: 900; font-size: 5.7cqw; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.en .reel .words { font-size: 4.9cqw; }
.en .reel .b3 .words { font-size: 4.2cqw; }
.reel .words .hl { color: var(--brown); }

/* 1: the otter's thought, then the comments that bury it */
.reel .thought { position: absolute; z-index: 2; width: 61.9cqw; min-height: 21.9cqw; padding: 3.3cqw 3.8cqw; border-radius: 7.1cqw; background: #fff; font-weight: 600; font-size: 3.14cqw; line-height: 1.6; box-shadow: 0 2.9cqw 6.2cqw -3.3cqw hsl(207 40% 15% / .45); }
.en .reel .thought { min-height: 26.9cqw; }
.reel .puff { position: absolute; z-index: 2; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1cqw 2.4cqw -1.2cqw hsl(207 40% 15% / .4); }
.reel .chip { --n: f-chip; --t: .28s; position: absolute; z-index: 3; padding: .42em .72em; border-radius: .55em .55em .55em .12em; background: #fff; box-shadow: 0 1cqw 2.4cqw -1.2cqw hsl(207 30% 20% / .35); font-weight: 800; line-height: 1.3; white-space: nowrap; }
.reel .chip.hot { color: hsl(4 62% 46%); }
.reel .typing::after { content: ""; display: inline-block; width: .1em; height: 1.05em; margin-left: .08em; vertical-align: -.15em; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 2 and 7: one otter, one line, centred */
.reel .mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 100%; display: grid; justify-items: center; gap: 2.4cqw; }
.reel .mark img { width: 46.4cqw; height: auto; }
.reel .mark .words { position: static; }
.reel .b7 .words { font-size: 4.5cqw; }
.en .reel .b7 .words { font-size: 4.3cqw; }

/* app pieces, from the app's own screens */
.reel .app { position: absolute; overflow: hidden; rotate: -3deg; border-radius: 4.8cqw; background: var(--app); box-shadow: 0 4.8cqw 9.5cqw -5.2cqw hsl(190 60% 15% / .6); }
.reel .create { padding: 2.4cqw; }
.reel .card { display: grid; gap: 1.3cqw; padding: 2.6cqw; border-radius: 2.4cqw; background: #fff; font-size: 2.26cqw; }
.reel .fl { font-weight: 900; }
.reel .box { min-height: 6.8cqw; padding: 1.67cqw; border-radius: 1.67cqw; background: hsl(200 10% 93%); font-weight: 500; font-size: 1.95cqw; line-height: 1.55; }
.en .reel .box { font-size: 1.8cqw; }
.reel .box.post { display: grid; gap: 1.07cqw; min-height: 0; }
.reel .typed-line { position: relative; }
.reel .typed-line .ghost { visibility: hidden; }
.reel .typed-line .live { position: absolute; inset: 0; }
.reel .btn3 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1.2cqw; text-align: center; font-size: 2.02cqw; font-weight: 900; }
.reel .btn3 span { padding: 1.3cqw 0; border-radius: 1.2cqw; border: .29cqw solid var(--app-dark); }
.reel .btn3 .sv { background: var(--app); border-color: transparent; }
.reel .btn3 .pub { background: var(--app-dark); color: #fff; border-color: transparent; }

/* 4: the 發佈了！ screen, then where the link lands */
.reel .pub-screen { display: grid; justify-items: center; gap: 1.2cqw; padding: 3.3cqw 2.9cqw 3.8cqw; }
.reel .pub-screen img { width: 15.5cqw; height: auto; }
.reel .pub-screen .h { font-size: 3.1cqw; font-weight: 900; }
.reel .pcard { width: 100%; display: grid; gap: 1.43cqw; padding: 2.6cqw; border-radius: 2.6cqw; background: #fff; }
.reel .pcard > b { justify-self: center; font-size: 2.5cqw; font-weight: 900; color: var(--sea-deep); }
.reel .pcard .link { padding: 1.3cqw 1.67cqw; border-radius: 1.2cqw; background: var(--app-field); font-size: 1.86cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel .pbtn { display: grid; place-items: center; padding: 1.67cqw 0; border-radius: 1.43cqw; font-size: 2.26cqw; font-weight: 700; }
.reel .pbtn.fill { background: var(--app-dark); color: #fff; }
.reel .pbtn.quiet { border: .29cqw solid var(--app-dark); color: var(--app-dark); }
.reel .dest { position: absolute; z-index: 3; display: grid; gap: 1.3cqw; padding: 1.9cqw 2.14cqw; border-radius: 2.4cqw; background: #fff; font-size: 2.02cqw; line-height: 1.45; box-shadow: 0 2.9cqw 5.7cqw -3.3cqw hsl(207 30% 20% / .45); }
.reel .dh { display: flex; align-items: center; gap: 1.2cqw; font-weight: 800; font-size: 1.9cqw; color: var(--ink-2); }
.reel .badge { display: grid; place-items: center; width: 3.8cqw; aspect-ratio: 1; border-radius: 1.07cqw; background: #06C755; color: #fff; }
.reel .badge svg { width: 2.6cqw; height: 2.6cqw; }
/* the LINE card: the app's badge sits on the corner of the message, no
   header row of its own (founder, 2026-10-18) */
.reel .dest.line { padding: 1.43cqw; }
.reel .dest.line .badge { position: absolute; z-index: 1; left: -1.2cqw; top: -1.2cqw; width: 4.6cqw; box-shadow: 0 .8cqw 1.6cqw -.8cqw hsl(140 60% 20% / .5); }
.reel .dest.line .badge svg { width: 3.1cqw; height: 3.1cqw; }
.reel .dest.line .me-msg { max-width: none; justify-self: stretch; }
.reel .dest.line .dh { display: block; padding-left: 2.6cqw; font-size: 1.62cqw; }
.reel .me-msg { justify-self: end; max-width: 92%; display: grid; gap: .95cqw; padding: 1.43cqw 1.67cqw; border-radius: 2.14cqw 2.14cqw .48cqw 2.14cqw; background: hsl(140 45% 90%); }
.reel .lp { display: flex; align-items: center; gap: 1.2cqw; padding: 1.07cqw 1.3cqw; border-radius: 1.43cqw; background: #fff; }
.reel .lp img { flex: none; width: 4.5cqw; height: auto; }
.reel .lp span { display: grid; min-width: 0; font-size: 1.62cqw; line-height: 1.35; color: var(--ink-2); }
.reel .lp b { font-size: 1.9cqw; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel .yt { gap: 1.2cqw; padding: 1.67cqw; }
.reel .cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.43cqw; background: hsl(207 30% 18%); }
.reel .cover .half { position: absolute; top: 0; bottom: 0; width: 50%; }
.reel .cover .l { left: 0; background: linear-gradient(160deg, hsl(200 70% 45%), hsl(210 60% 28%)); }
.reel .cover .r { right: 0; background: linear-gradient(200deg, hsl(12 80% 58%), hsl(350 55% 36%)); }
.reel .cover .crack { position: absolute; left: 50%; top: -10%; bottom: -10%; width: 1.2cqw; translate: -50% 0; rotate: 8deg; background: hsl(48 100% 60%); box-shadow: 0 0 2.4cqw hsl(48 100% 60% / .7); }
.reel .cover .ct { position: absolute; left: 2.14cqw; top: 50%; translate: 0 -50%; display: grid; gap: .24cqw; color: #fff; font-weight: 900; line-height: 1.05; text-shadow: 0 .48cqw 1.2cqw hsl(0 0% 0% / .55); }
.reel .cover .ct span:first-child { font-size: 6.2cqw; color: hsl(48 100% 62%); }
.reel .cover .ct span:last-child { font-size: 3.57cqw; }
.en .reel .cover .ct span:first-child { font-size: 5.2cqw; }
.en .reel .cover .ct span:last-child { font-size: 3cqw; }
.reel .cover .dur { position: absolute; right: 1.2cqw; bottom: 1.67cqw; padding: .24cqw .83cqw; border-radius: .6cqw; background: hsl(0 0% 0% / .8); color: #fff; font-weight: 700; font-size: 1.67cqw; }
.reel .cover .prog { position: absolute; left: 0; right: 0; bottom: 0; height: .71cqw; background: hsl(0 0% 100% / .35); }
.reel .cover .prog i { display: block; width: 62%; height: 100%; background: #f00; }
.reel .vt { display: grid; gap: .36cqw; line-height: 1.35; }
.reel .vt b { font-size: 2.02cqw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel .vt span { font-size: 1.62cqw; color: var(--ink-2); }
.reel .cmt { display: flex; align-items: start; gap: 1.2cqw; font-size: 1.9cqw; }
.reel .cmt i { flex: none; width: 3.8cqw; aspect-ratio: 1; border-radius: 50%; background: var(--aqua-3); }
.reel .cmt u { color: var(--sea); }

/* 5: the Posts deck: other people's posts */
.reel .deck { position: absolute; width: 44cqw; height: 69cqw; overflow: hidden; display: grid; align-content: start; gap: 1.43cqw; padding: 2.4cqw 2.6cqw; border-radius: 1.07cqw; background: #fff; box-shadow: 0 2.9cqw 5.7cqw -3.3cqw hsl(190 60% 15% / .45); }
.reel .deck .who { display: flex; justify-content: space-between; align-items: center; }
.reel .deck .who u { font-weight: 900; font-size: 2.98cqw; text-underline-offset: .15em; }
.reel .deck .who svg { width: 3.33cqw; height: 3.33cqw; color: hsl(206 40% 55%); }
.reel .deck .q { font-weight: 900; font-size: 3.21cqw; line-height: 1.4; }
.reel .deck .w { display: grid; gap: 1.07cqw; font-weight: 500; font-size: 2.1cqw; line-height: 1.55; }
.en .reel .deck .q { font-size: 2.9cqw; }
.en .reel .deck .w { font-size: 1.95cqw; }
.reel .deck .foot { position: absolute; left: 0; right: 0; bottom: 2.14cqw; text-align: center; font-size: 1.79cqw; color: var(--ink-2); }

/* 6: the 1:1 room under the post */
.reel .chat { position: absolute; left: 9.5%; right: 9.5%; top: 1.35%; display: grid; gap: 1.2cqw; }
.reel .pin { padding: 1.43cqw 1.9cqw; border-radius: 1.2cqw; background: #fff; font-weight: 500; font-size: 2.14cqw; box-shadow: 0 1.43cqw 3.3cqw -1.9cqw hsl(190 60% 15% / .4); }
.reel .pin small { display: block; font-size: 1.67cqw; color: var(--ink-2); }
.reel .b { max-width: 84%; padding: 1.43cqw 1.9cqw; border-radius: .83cqw; font-weight: 500; font-size: 1.9cqw; line-height: 1.55; }
.en .reel .b { font-size: 1.72cqw; line-height: 1.5; }
.reel .b.them { justify-self: start; background: var(--app-them); color: #fff; }
.reel .b.me { justify-self: end; background: #fff; }

/* controls under the film: pause and the beats */
.film-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem .6rem; }
.film .toggle { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.film .toggle:hover { background: hsl(0 0% 100% / .6); color: var(--ink); }
.film .toggle svg { width: 1.05rem; height: 1.05rem; }
.film .toggle .i-play, .film .toggle.is-paused .i-pause { display: none; }
.film .toggle.is-paused .i-play { display: block; }
.film .dots { display: flex; }
.film .dot { display: grid; place-items: center; min-width: 1.5rem; height: 2rem; padding: 0 .1rem; border: 0; background: none; cursor: pointer; }
.film .dot i { position: relative; display: block; width: .5rem; height: .5rem; overflow: hidden; border-radius: 99px; background: var(--aqua-3); transition: width .35s var(--ease); }
.film .dot:hover i { background: var(--teal); }
.film .dot[aria-current="true"] i { width: 1.6rem; }
.film .dot[aria-current="true"] i::after { content: ""; position: absolute; inset: 0; background: var(--sea); transform-origin: left; transform: scaleX(var(--p, 1)); }
.film .toggle[hidden], .film:not(.ready) .toggle, .film:not(.ready) .dots { display: none; }

/* motion: each [data-in] piece enters when its beat is on screen, after its
   own delay (--d); --n names the entrance, --t its length */
.film.live .beat.now [data-in] { animation: var(--n, f-in) var(--t, .6s) var(--ease) var(--d, 0ms) both; }
.film.live .b7.now:not(.done) .mark img { animation: f-rise .9s var(--ease) .1s both, f-up 2.4s ease-in-out 1s infinite alternate; }
.film.live .beat.done [data-in] { animation: none; }
.film.paused .reel *, .film.idle .reel * { animation-play-state: paused !important; }
@keyframes f-in { from { opacity: 0; transform: translateY(2.4cqw); } }
@keyframes f-pop { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } }
@keyframes f-chip { from { opacity: 0; transform: scale(.2); } 65% { opacity: 1; transform: scale(1.18); } }
@keyframes f-tilt { from { opacity: 0; transform: translate(10%, 6%) rotate(6deg) scale(.92); } }
@keyframes f-fly { from { opacity: 0; transform: translate(-45%, 12%) scale(.45); } }
@keyframes f-rise { from { opacity: 0; transform: translateY(14%); } }
@keyframes f-up { to { transform: translateY(-4%); } }
@keyframes f-drift-l { from { opacity: 0; transform: translateX(-35%); } }
@keyframes f-drift-r { from { opacity: 0; transform: translateX(35%); } }
@keyframes f-drift-u { from { opacity: 0; transform: translateY(18%); } }
@keyframes f-press { 0%, 100% { transform: none; } 45% { transform: scale(.9); filter: brightness(1.35); } }
/* the store buttons answer the last beat */
.hero.pulse .store { animation: store-pulse 1.5s var(--ease) 2; }
@keyframes store-pulse { from { box-shadow: 0 0 0 0 hsl(187 67% 25% / .45), 0 10px 24px -14px hsl(187 67% 20% / .9); } to { box-shadow: 0 0 0 .9rem hsl(187 67% 25% / 0), 0 10px 24px -14px hsl(187 67% 20% / .9); } }


/* ---------- how it differs ---------- */
.diff { padding: clamp(3.5rem, 8vw, 6rem) var(--pad); background: var(--paper); }
.diff h2 { text-align: center; font-weight: 900; letter-spacing: -.015em; line-height: 1.15; font-size: clamp(1.75rem, 4.2vw, 2.75rem); margin: 0 auto clamp(2rem, 4vw, 3rem); }
.dt { max-width: 66rem; margin: 0 auto; }
.dr { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.25rem; padding: 1.1rem 0; border-top: 1px solid hsl(186 30% 86%); }
.dr .dk { grid-column: 1 / -1; font-size: .85rem; font-weight: 800; color: var(--brown); }
.dx { color: var(--ink-2); font-weight: 600; }
.do { color: var(--sea); font-weight: 900; font-size: 1.15rem; line-height: 1.4; }
.dhead { border-top: 0; padding-bottom: .4rem; }
.dhead span { font-size: .85rem; font-weight: 800; color: var(--ink-2); }
.dhead .do { color: var(--sea); }
@media (max-width: 719px) {
  .dhead { display: none; }
  .dr { grid-template-columns: 1fr; gap: .35rem; }
  .dx::before, .do::before { content: attr(data-l); display: block; font-size: .72rem; font-weight: 700; color: var(--ink-2); opacity: .8; }
  .do::before { color: var(--sea); }
}
/* from 720px the table is only as wide as its words and centred under the
   heading (founder, 2026-10-18: full width, it looked pushed to the left);
   each row borrows the table's three columns, so they line up */
@media (min-width: 720px) {
  .dt { display: grid; grid-template-columns: auto auto auto; column-gap: clamp(2.5rem, 5vw, 4.5rem); width: fit-content; max-width: 100%; }
  .dr { grid-column: 1 / -1; grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1.15fr); grid-template-columns: subgrid; column-gap: inherit; align-items: baseline; padding: 1.4rem 0; }
  .dr .dk { grid-column: auto; font-size: .95rem; }
  .dx { font-size: 1.05rem; }
  .do { font-size: 1.35rem; }
}
@media (min-width: 1000px) { .dr > span { white-space: nowrap; } }

/* ---------- closing: the otters holding hands, then the stores ---------- */
.close {
  background: var(--sea); color: var(--on-sea);
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--pad);
}
.close-in { max-width: 40rem; margin: 0 auto; display: grid; gap: 2.25rem; justify-items: center; }
.close img { width: min(15rem, 60vw); filter: drop-shadow(0 20px 26px hsl(190 70% 8% / .45)); }
.close .store { background: var(--on-sea); color: var(--sea-deep); box-shadow: 0 12px 26px -14px hsl(190 70% 6% / .8); }
.close .store:hover { background: #fff; }

footer {
  background: var(--sea-deep); color: var(--on-sea-2);
  padding: 1.75rem var(--pad); font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: center; align-items: center;
}
footer a { text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }


/* entrance: one orchestrated rise for the hero, nothing elsewhere */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise .9s var(--ease) both; }
  .hero .mission { animation-delay: .1s; }
  .hero .film { animation-delay: .1s; } .hero .cta { animation-delay: .25s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .typing::after { animation: none; }
}

/* 404: one otter, one way home */
body:has(.lost) { min-height: 100svh; display: flex; flex-direction: column; }
.lost { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1.5rem; padding: 6rem var(--pad) 4rem; text-align: center; background: radial-gradient(50rem 30rem at 50% 30%, hsl(186 80% 97%) 0%, transparent 70%), var(--aqua); }
.lost img { width: min(15rem, 60vw); height: auto; }
.lost h1 { display: grid; gap: .35rem; font-weight: 900; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.2; }
.lost h1 span + span { font-size: .6em; font-weight: 800; color: var(--sea); }
.lost .store b { font-size: 1rem; }

/* questions: plain answers for first-time visitors and answer engines */
.faq { padding: 0 var(--pad) clamp(3.5rem, 8vw, 5.5rem); background: var(--paper); }
.faq h2 { text-align: center; font-weight: 900; letter-spacing: -.01em; line-height: 1.2; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 auto 1.25rem; }
.faq-list { max-width: 44rem; margin: 0 auto; border-top: 1px solid hsl(186 30% 86%); }
.faq details { border-bottom: 1px solid hsl(186 30% 86%); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem .25rem; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315606a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--sea); }
.faq summary:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: .3rem; }
.faq details p { margin: 0; padding: 0 .25rem 1.15rem; color: var(--ink-2); max-width: 40rem; }

/* closing: the otter sentence over the otters holding hands */
.close-line { margin: 0; text-align: center; font-weight: 900; line-height: 1.25; letter-spacing: -.01em; font-size: clamp(1.6rem, 4.6vw, 2.4rem); color: var(--on-sea); text-wrap: balance; }
.close-line .ask { color: hsl(36 72% 84%); }
.en .close-line { font-size: clamp(1.5rem, 4vw, 2.1rem); }

/* the comparison and the questions as two columns from 1000px (founder,
   2026-10-18): the floating otter takes the comparison's left third, the
   lightbulb otter the questions' right third, each centred on its words, the words the other two
   thirds, left-aligned. Below 1000px each otter sits above its section. */
.diff-otter, .faq-otter { display: block; width: min(12rem, 50vw); height: auto; margin: 0 auto 1.25rem; }
.faq { display: flex; flex-direction: column; }
.faq-otter { order: -1; }
@media (min-width: 1000px) {
  .diff, .faq {
    display: grid; align-items: center; column-gap: clamp(4.5rem, 7.5vw, 7.5rem);
    padding-left: max(var(--pad), calc((100% - 68rem) / 2));
    padding-right: max(var(--pad), calc((100% - 68rem) / 2));
  }
  .diff { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .faq { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .diff-otter, .faq-otter { order: 0; width: 100%; max-width: 21rem; margin: 0; justify-self: center; }
  .diff h2, .faq h2 { text-align: left; margin-left: 0; margin-right: 0; }
  .diff .dt { width: 100%; margin: 0; column-gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) minmax(0, 1.3fr); }
  .diff .dr > span { white-space: normal; }
  .faq-list { max-width: none; margin: 0; }
}