/* MoguPort landing page — "recipe book" poster style.
   A vivid flame-orange canvas, hand-drawn black doodles, floating devices.
   Brand tokens from the app (Theme.swift): accent #F02300, ink #241C12, cream #FAF3E5.
   Chunky offset shadows echo the app's ChunkyButtonStyle. */

@font-face {
  font-family: "Gasoek One";
  src: url("/assets/gasoek-subset.woff2") format("woff2");
  font-display: swap;
}

:root {
  --flame: #FF612A;
  --flame-deep: #D6440F;
  --cream: #FAF3E5;
  --cream-deep: #F3E6CE;
  --paper: #FFFFFF;
  --ink: #241C12;
  --ink-deep: #14100C;
  --body: #3C3527;
  --muted: #6E6354;
  --hairline: #E4D6BC;
  --radius: 28px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* ---- hand-drawn doodles (used as masks, so any colour works) ---- */
  --d-bowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 52h80c0 21-18 35-40 35S10 73 10 52Z'/%3E%3Cpath d='M22 64c3 9 12 15 25 16'/%3E%3Cpath d='M38 44c-8-6 6-12-2-19'/%3E%3Cpath d='M58 44c-8-6 6-12-2-19'/%3E%3C/svg%3E");
  --d-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 32h54l-6 48c-1 6-6 10-12 10H36c-6 0-11-4-12-10Z'/%3E%3Cpath d='M73 44c9 0 15 6 15 13s-6 13-15 13'/%3E%3Cpath d='M32 50h14'/%3E%3Cpath d='M34 64h20'/%3E%3C/svg%3E");
  --d-egg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M33 27c15-9 33-6 41 5 6 8 14 12 12 22-2 11-14 12-22 18-9 7-24 12-33 5-8-6-4-16-9-24-6-9-4-19 11-26Z'/%3E%3Ccircle cx='52' cy='52' r='12'/%3E%3C/svg%3E");
  --d-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 30c-9-7-23-9-36-7v48c13-2 27 0 36 7 9-7 23-9 36-7V23c-13-2-27 0-36 7Z'/%3E%3Cpath d='M50 30v48'/%3E%3Cpath d='M60 41h16'/%3E%3Cpath d='M60 52h16'/%3E%3Cpath d='M24 41h16'/%3E%3Cpath d='M24 52h16'/%3E%3C/svg%3E");
  --d-basket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 44h72l-7 36c-1 6-6 10-12 10H33c-6 0-11-4-12-10Z'/%3E%3Cpath d='M33 44c0-11 8-20 17-20s17 9 17 20'/%3E%3Cpath d='M36 56l3 26'/%3E%3Cpath d='M50 56v26'/%3E%3Cpath d='M64 56l-3 26'/%3E%3C/svg%3E");
  --d-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 31H32a19 19 0 0 0 0 38h12'/%3E%3Cpath d='M56 31h12a19 19 0 0 1 0 38H56'/%3E%3Cpath d='M34 50h32'/%3E%3C/svg%3E");
  --d-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 8h34a9 9 0 0 1 9 9v66a9 9 0 0 1-9 9H30a9 9 0 0 1-9-9V17a9 9 0 0 1 9-9Z'/%3E%3Cpath d='M40 8h14'/%3E%3Cpath d='M47 66c-16-10-19-21-13-27 5-5 11-2 13 3 2-5 8-8 13-3 6 6 3 17-13 27Z'/%3E%3Cpath d='M84 26l2 7 7 2-7 2-2 7-2-7-7-2 7-2Z'/%3E%3C/svg%3E");
  --d-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 34h13l6-9h30l6 9h13a7 7 0 0 1 7 7v33a7 7 0 0 1-7 7H16a7 7 0 0 1-7-7V41a7 7 0 0 1 7-7Z'/%3E%3Ccircle cx='50' cy='57' r='15'/%3E%3Cpath d='M78 44h.01'/%3E%3C/svg%3E");
  --d-carrot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 60 42 40c-14 12-22 32-18 36s24-2 38-16Z'/%3E%3Cpath d='M62 60l10-10'/%3E%3Cpath d='M72 50c-2-9 1-14 9-16'/%3E%3Cpath d='M72 50c9 2 14-1 16-9'/%3E%3C/svg%3E");
  --d-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 12c3 20 8 25 28 28-20 3-25 8-28 28-3-20-8-25-28-28 20-3 25-8 28-28Z'/%3E%3C/svg%3E");
  --d-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18c32 3 56 24 66 54'/%3E%3Cpath d='M78 72l-15-3'/%3E%3Cpath d='M78 72l-3-15'/%3E%3C/svg%3E");
  --d-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M12 32h34'/%3E%3Cpath d='M22 52h40'/%3E%3Cpath d='M12 72h28'/%3E%3C/svg%3E");
  --d-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M5 12c34-7 76-9 124-5 26 2 47 4 66 6'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--cream);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ---------- Doodles ---------- */

.dd {
  display: block;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.dd-bowl   { -webkit-mask-image: var(--d-bowl);   mask-image: var(--d-bowl); }
.dd-cup    { -webkit-mask-image: var(--d-cup);    mask-image: var(--d-cup); }
.dd-egg    { -webkit-mask-image: var(--d-egg);    mask-image: var(--d-egg); }
.dd-book   { -webkit-mask-image: var(--d-book);   mask-image: var(--d-book); }
.dd-basket { -webkit-mask-image: var(--d-basket); mask-image: var(--d-basket); }
.dd-link   { -webkit-mask-image: var(--d-link);   mask-image: var(--d-link); }
.dd-phone  { -webkit-mask-image: var(--d-phone);  mask-image: var(--d-phone); }
.dd-camera { -webkit-mask-image: var(--d-camera); mask-image: var(--d-camera); }
.dd-carrot { -webkit-mask-image: var(--d-carrot); mask-image: var(--d-carrot); }
.dd-spark  { -webkit-mask-image: var(--d-spark);  mask-image: var(--d-spark); }
.dd-arrow  { -webkit-mask-image: var(--d-arrow);  mask-image: var(--d-arrow); }
.dd-lines  { -webkit-mask-image: var(--d-lines);  mask-image: var(--d-lines); }

/* ---------- Device mockups ---------- */

.device {
  --pw: 300px;
  width: var(--pw);
  flex: none;
  padding: calc(var(--pw) * 0.031);
  background: var(--ink-deep);
  border-radius: calc(var(--pw) * 0.148);
  box-shadow: 0 30px 60px rgba(50, 15, 0, 0.32), 0 4px 12px rgba(50, 15, 0, 0.2);
}

.device img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--pw) * 0.118);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  padding: 17px 30px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-ink {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}

.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45); }
.btn-ink:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }

.btn-flame {
  background: var(--flame);
  color: #fff;
  box-shadow: 0 5px 0 var(--flame-deep);
}

.btn-flame:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--flame-deep); }
.btn-flame:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--flame-deep); }

.btn-ghost {
  border: 2.5px solid var(--ink);
  color: var(--ink);
}

.btn-ghost:hover { background: rgba(36, 28, 18, 0.08); transform: translateY(-2px); }

/* ---------- Hero canvas ---------- */

.hero {
  padding: 14px 14px 0;
}

.canvas {
  position: relative;
  background: var(--flame);
  border-radius: 40px;
  overflow: hidden;
  isolation: isolate;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 32px;
  align-items: end;
  padding-top: 20px;
}

/* nav sits inside the canvas, like a poster masthead */
.masthead {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.brand span {
  font-family: "Gasoek One", var(--font-sans);
  font-size: 24px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 700;
}

.masthead nav a {
  text-decoration: none;
  color: var(--ink);
  opacity: 0.78;
}

.masthead nav a:hover { opacity: 1; }

.masthead .lang-switch {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 13px;
  opacity: 1;
}

.hero-copy { padding: 56px 0 88px; }

.hero h1 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.18;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.mark::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.14em;
  height: 0.13em;
  background-color: var(--ink);
  -webkit-mask-image: var(--d-scribble);
  mask-image: var(--d-scribble);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero .lede {
  margin-top: 26px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(28, 18, 8, 0.82);
  max-width: 26em;
}

.hero-ctas {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-note {
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(28, 18, 8, 0.6);
}

.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding-bottom: 0;
}

.hero-stage .device { --pw: 268px; }

.hero-stage .device-back {
  --pw: 226px;
  transform: rotate(-8deg) translate(34px, -46px);
  transform-origin: bottom center;
  z-index: 1;
}

.hero-stage .device-front {
  position: relative;
  z-index: 2;
  transform: translateY(18px) rotate(2deg);
  margin-left: -46px;
}

/* scattered doodles on the canvas */
.canvas .dd {
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}

.hero-doodles .d1 { width: 82px;  height: 82px;  left: 2.5%; bottom: 4%;  transform: rotate(-8deg); }
.hero-doodles .d2 { width: 66px;  height: 66px;  left: 28%;  bottom: 2%;  transform: rotate(9deg); }
.hero-doodles .d3 { width: 60px;  height: 60px;  left: 45%;  top: 8%;    transform: rotate(-14deg); }
.hero-doodles .d4 { width: 86px;  height: 86px;  right: 3.5%; top: 11%;  transform: rotate(11deg); }
.hero-doodles .d5 { width: 68px;  height: 68px;  right: 1.5%; bottom: 12%; transform: rotate(-7deg); }
.hero-doodles .d6 { width: 44px;  height: 44px;  left: 22%;  top: 16%;   transform: rotate(6deg); }
.hero-doodles .d7 { width: 56px;  height: 56px;  right: 30%; bottom: 1%; transform: rotate(14deg); opacity: 0.5; }
.hero-doodles .d8 { width: 50px;  height: 50px;  left: 1.5%; top: 30%;   transform: rotate(-16deg); opacity: 0.5; }

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 40px 0 24px; text-align: left; }
  .hero .lede { max-width: none; }
  .hero-stage { padding-bottom: 0; }
  .hero-stage .device { --pw: 240px; }
  .hero-stage .device-back { --pw: 200px; transform: rotate(-8deg) translate(30px, -34px); }
  .hero-stage .device-front { transform: translateY(30px) rotate(2deg); margin-left: -40px; }
  .hero-doodles .d1,
  .hero-doodles .d2,
  .hero-doodles .d6,
  .hero-doodles .d7,
  .hero-doodles .d8 { display: none; }
  .hero-doodles .d3 { width: 52px; height: 52px; left: 4%; top: 30%; }
  .hero-doodles .d4 { width: 60px; height: 60px; right: 4%; top: 26%; }
  .hero-doodles .d5 { width: 52px; height: 52px; right: 5%; bottom: 30%; }
}

@media (max-width: 620px) {
  .hero { padding: 8px 8px 0; }
  .canvas { border-radius: 30px; }
  .masthead nav a:not(.lang-switch) { display: none; }
  .hero-copy { padding: 30px 0 20px; }
  .hero-ctas .btn { width: 100%; }
  .hero-stage .device { --pw: 190px; }
  .hero-stage .device-back { --pw: 158px; transform: rotate(-9deg) translate(24px, -26px); }
  .hero-stage .device-front { transform: translateY(24px) rotate(2deg); margin-left: -32px; }
  .hero-doodles .dd { display: none; }
}

/* ---------- Source ticker ---------- */

.ticker {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 18px 0;
  margin-top: 14px;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
}

.ticker-track ul {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  list-style: none;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.ticker-track li::after {
  content: "✦";
  margin-left: 40px;
  color: var(--flame);
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

/* ---------- Sections ---------- */

section { padding: 104px 0; }

.section-head { max-width: 680px; margin-bottom: 56px; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--flame);
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.28;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.section-head p { margin-top: 16px; font-size: 17px; }

/* ---------- Steps ---------- */

.steps { background: var(--paper); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 72px;
  align-items: center;
}

.step-list { display: grid; gap: 18px; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 28px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
}

.step:nth-child(2) { background: var(--paper); }
.step:nth-child(3) { background: var(--cream-deep); }

.step-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--flame);
  border: 2.5px solid var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step h3 { font-size: 21px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.step p { margin-top: 4px; font-size: 15.5px; }

.step .dd {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 42px;
  height: 42px;
  opacity: 0.16;
}

.steps-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.steps-stage .device { --pw: 300px; transform: rotate(-2.5deg); }

.steps-stage .dd-arrow {
  position: absolute;
  left: -54px;
  top: 6%;
  width: 78px;
  height: 78px;
  background-color: var(--flame);
  transform: scaleX(-1) rotate(-16deg);
}

@media (max-width: 1000px) {
  .steps-grid { grid-template-columns: 1fr; gap: 48px; }
  .steps-stage .dd-arrow { display: none; }
}

/* ---------- Features ---------- */

.features { background: var(--cream); }

.bento {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 22px;
}

.tile {
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 32px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
}

.tile h3 { font-size: 20px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.tile p { margin-top: 8px; font-size: 15px; }

.tile .dd { width: 46px; height: 46px; margin-bottom: 18px; }

.tile-image {
  grid-row: 1 / 3;
  padding: 0;
  overflow: hidden;
  background: var(--flame);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.tile-image .device {
  --pw: 262px;
  transform: rotate(-2.5deg);
  margin-top: 48px;
}

.tile-flame { background: var(--flame); color: rgba(28, 18, 8, 0.88); }
.tile-flame h3 { color: var(--ink); }

.tile-ink { background: var(--ink); box-shadow: 6px 6px 0 var(--flame); }
.tile-ink h3 { color: var(--cream); }
.tile-ink p { color: rgba(250, 243, 229, 0.78); }
.tile-ink .dd { background-color: var(--cream); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile-image { grid-row: auto; grid-column: 1 / 3; }
  .tile-image .device { --pw: 240px; }
}

@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .tile-image { grid-column: auto; }
}

/* ---------- Pricing ---------- */

.pricing { background: var(--paper); }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
}

.plan {
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  background: var(--cream);
  box-shadow: 6px 6px 0 var(--ink);
}

.plan-name { font-size: 15px; font-weight: 900; letter-spacing: 0.06em; color: var(--muted); }

.plan-price {
  margin-top: 8px;
  font-size: 46px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.plan-price small { font-size: 16px; font-weight: 800; color: var(--muted); }

.plan ul {
  margin-top: 26px;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 15.5px;
}

.plan li { padding-left: 30px; position: relative; }

.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: var(--flame);
}

.plan-pro {
  background: var(--ink);
  color: rgba(250, 243, 229, 0.85);
  box-shadow: 6px 6px 0 var(--flame);
}

.plan-pro .plan-name { color: #FFC0B0; }
.plan-pro .plan-price { color: var(--cream); }
.plan-pro .plan-price small { color: rgba(250, 243, 229, 0.6); }
.plan-pro li::before { color: #FF8A66; }

@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */

.faq { background: var(--cream); }

.faq-list { max-width: 800px; display: grid; gap: 14px; }

.faq details {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 22px 28px;
  box-shadow: 4px 4px 0 var(--ink);
}

.faq summary {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 34px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 700;
  color: var(--flame);
}

.faq details[open] summary::after { content: "−"; }

.faq details p { margin-top: 12px; font-size: 15.5px; }

/* ---------- Closing ---------- */

.closing { padding: 14px 14px 0; }

.closing .canvas { text-align: center; padding: 92px 32px 96px; }

.closing .wordmark {
  position: relative;
  z-index: 2;
  font-family: "Gasoek One", var(--font-sans);
  font-size: clamp(46px, 9vw, 104px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.closing h2 {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  font-size: clamp(22px, 2.9vw, 32px);
  font-weight: 900;
  color: rgba(28, 18, 8, 0.86);
  line-height: 1.6;
}

.closing .btn { position: relative; z-index: 2; margin-top: 36px; }

.closing-doodles .c1 { width: 78px; height: 78px; left: 7%;  top: 20%;  transform: rotate(-12deg); }
.closing-doodles .c2 { width: 66px; height: 66px; right: 9%; top: 16%;  transform: rotate(14deg); }
.closing-doodles .c3 { width: 58px; height: 58px; left: 14%; bottom: 16%; transform: rotate(9deg); }
.closing-doodles .c4 { width: 72px; height: 72px; right: 8%; bottom: 14%; transform: rotate(-8deg); }

@media (max-width: 760px) {
  .closing .canvas { padding: 64px 24px 68px; }
  .closing-doodles .dd { display: none; }
}

/* ---------- Footer ---------- */

footer { padding: 48px 0 64px; font-size: 14px; color: var(--muted); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a { text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--flame); }

/* ---------- Scroll reveal ---------- */

/* Only hide content once JS has confirmed it can reveal it again. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js-reveal .reveal.in { opacity: 1; transform: none; }
}