/* ============================================================
   Growndesign
   The sky behind everything is painted by script.js as you scroll.
   Sections marked .tone-day sit on the bright sky (dark ink),
   sections marked .tone-night sit on sunset / stars (light ink).
   ============================================================ */

:root {
  --ink: #1b2142;
  --ink-soft: #444c70;
  --moon-ink: #f5f2ff;
  --moon-soft: #c8c5e8;
  --sunflower: #ffcf4a;
  --sunflower-hi: #ffdd75;
  --ember: #f2763a;
  --leaf: #2f9a5a;
  --night: #05071a;

  --radius: 22px;
  --wrap: 1120px;

  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--night); /* the fixed sky paints over this */
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.4rem); font-weight: 700; max-width: 14ch; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 650; max-width: 20ch; }
h3 { font-size: 1.35rem; font-weight: 650; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 780px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--sunflower); outline-offset: 3px; border-radius: 6px; }

/* ---------- The sky ---------- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #4fa8e8 0%, #93d0f5 55%, #fff0c4 100%);
}
/* The sky's colours: a 1px-wide canvas that script.js repaints and the GPU stretches to fill the screen */
.sky-grad { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Speed notes: nothing in here may change its paint while scrolling. script.js only ever touches
   transform and opacity (cheap for the GPU), and redraws the small sun canvases when the
   sun's colour has shifted enough to notice. */
.haze, .vignette { position: absolute; inset: 0; pointer-events: none; }
.haze { will-change: opacity; }
.haze-day   { background: linear-gradient(0deg, rgba(255, 236, 190, .45) 0%, rgba(255, 236, 190, .18) 22%, transparent 48%); }
.haze-dusk  { background: linear-gradient(0deg, rgba(255, 130, 85, .6) 0%, rgba(255, 130, 85, .24) 22%, transparent 48%); opacity: 0; }
.haze-night { background: linear-gradient(0deg, rgba(60, 35, 100, .3) 0%, rgba(60, 35, 100, .12) 22%, transparent 48%); opacity: 0; }
.vignette   { background: radial-gradient(ellipse 120% 90% at 50% 100%, transparent 55%, rgba(20, 20, 70, .14) 100%); }
.sun {
  position: absolute; top: 9vh; right: 12vw;
  width: clamp(110px, 16vw, 210px); aspect-ratio: 1;
  will-change: transform, opacity;
}
.sun > * { position: absolute; left: 50%; top: 50%; pointer-events: none; }
/* Glow, rays + bloom: zero-size anchors at the sun's centre; script.js scales them to size */
.sun-atmos, .sun-rays, .sun-bloom { width: 0; height: 0; }
.sun > div > canvas { position: absolute; left: 0; top: 0; will-change: transform; }
.sun-atmos canvas { width: 256px; height: 256px; margin: -128px 0 0 -128px; }
.sun-rays canvas { width: 512px; height: 512px; margin: -256px 0 0 -256px; animation: spin 320s linear infinite; }
.sun-rays .rays-2 { transform: rotate(9deg); animation: spin 210s linear infinite reverse, rays-pulse 9s ease-in-out infinite alternate; }
.sun-bloom canvas { width: 512px; height: 512px; margin: -256px 0 0 -256px; animation: bloom-breathe 7s ease-in-out infinite alternate; }
.sun-core {
  width: 100%; height: 100%; margin: -50% 0 0 -50%; border-radius: 50%;
  background: radial-gradient(circle at 46% 44%, #fff 0%, #fffef6 40%, #fff3c4 100%);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rays-pulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes bloom-breathe { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.08); opacity: 1; } }

/* Glare + lens flare, laid over the clouds. script.js places every piece along the line from the sun through the middle of the screen */
.flare { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.flare > * { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.flare-glare {
  width: clamp(260px, 38vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 236, 190, .3) 30%, transparent 68%);
}
.flare-streak {
  width: 150vw; height: clamp(16px, 2.4vw, 34px);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 246, 220, .4) 30%, rgba(255, 220, 160, .15) 60%, transparent);
}
.flare-streak-2 { width: 90vw; height: 3px; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(190, 220, 255, .45) 45%, transparent); }
.ghost { border-radius: 50%; }
.g1 { width: 60px;  aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 236, 170, .55), rgba(255, 190, 90, .25) 60%, transparent 72%); }
.g2 { width: 130px; aspect-ratio: 1; background: radial-gradient(circle, transparent 52%, rgba(140, 255, 200, .22) 66%, rgba(120, 220, 255, .14) 74%, transparent 80%); }
.g3 { width: 34px;  aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 170, 220, .3) 50%, transparent 70%); }
.g4 { width: 200px; aspect-ratio: 1; border-radius: 0; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); background: radial-gradient(circle, rgba(255, 150, 200, .05), rgba(180, 140, 255, .09) 65%, rgba(140, 200, 255, .14) 100%); }
.g5 { width: 80px;  aspect-ratio: 1; background: radial-gradient(circle, rgba(170, 255, 190, .3), rgba(120, 200, 255, .14) 60%, transparent 72%); }
.g6 { width: 300px; aspect-ratio: 1; background: radial-gradient(circle, transparent 60%, rgba(255, 120, 80, .1) 68%, rgba(255, 220, 120, .14) 72%, rgba(120, 255, 200, .1) 76%, rgba(120, 160, 255, .12) 80%, transparent 86%); }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.clouds { position: absolute; inset: 0; color: #fff; will-change: opacity; --sleep: 0; }
/* The outer .cloud drifts across the sky; the svg inside bobs about with its own personality */
.cloud { position: absolute; left: 0; animation: drift 200s linear infinite both; }
.cloud svg { width: 100%; overflow: visible; animation: cloud-bob 7s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(60, 70, 140, .12)); }
/* Each cloud floats in from just off the left edge, one after another, and drifts all
   the way across. Puff is already peeking in when the page loads, so the sky is never empty.
   Each one has its own height so nobody bumps into anyone. */
.c4 { width: clamp(150px, 18vw, 250px); top: 3vh;  animation-duration: 260s; animation-delay: 46s; }  /* Dozy: slowest, naturally */
.c2 { width: clamp(140px, 16vw, 230px); top: 22vh; animation-duration: 230s; animation-delay: 26s; }  /* Wisp */
.c3 { width: clamp(90px, 10vw, 150px);  top: 38vh; animation-duration: 160s; animation-delay: 8s; }   /* Pip: always in a hurry */
.c1 { width: clamp(190px, 24vw, 330px); top: 52vh; animation-duration: 200s; animation-delay: -36s; } /* Puff: first to arrive */
.c2 svg { animation-duration: 9s; animation-delay: -3s; }
.c3 svg { animation: pip-bounce 2.6s ease-in-out infinite; }
.c4 svg { animation-duration: 11s; }
@keyframes drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
@keyframes cloud-bob { 50% { transform: translateY(-9px); } }
@keyframes pip-bounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

/* Faces: eyes blink now and then, and close as the sun goes down */
.cloud .blink { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.c2 .blink { animation-duration: 7s; animation-delay: -2s; }
.c3 .blink { animation-duration: 3.8s; animation-delay: -1s; }
.c4 .blink { animation-duration: 6.5s; animation-delay: -4s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.cloud .open { opacity: calc(1 - var(--sleep)); }
.cloud .shut { opacity: var(--sleep); }
/* ...except Dozy, who does the opposite */
.c4 .open { opacity: var(--sleep); }
.c4 .shut, .c4 .zzz { opacity: calc(1 - var(--sleep)); }
.c4 .yawn { transform-box: fill-box; transform-origin: center; animation: yawn 6s ease-in-out infinite; }
@keyframes yawn { 0%, 60%, 100% { transform: scale(1); } 75% { transform: scale(1.5, 2); } }
.zzz text { animation: zzz 3.6s ease-in-out infinite; }
.zzz text:nth-child(2) { animation-delay: .6s; }
.zzz text:nth-child(3) { animation-delay: 1.2s; }
@keyframes zzz { 0%, 100% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(-5px); opacity: 1; } }
.sparkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.moon {
  position: absolute; top: 10vh; left: 12vw;
  width: clamp(54px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: transparent;
  box-shadow: inset -14px 8px 0 2px #fdf6d8;
  filter: drop-shadow(0 0 18px rgba(253, 246, 216, .45));
  transform: rotate(-20deg);
  opacity: 0;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 24px), 1080px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 30px -14px rgba(30, 30, 80, .35);
  color: var(--ink);
  transition: background .5s, color .5s, border-color .5s;
}
[data-tone="night"] .nav { background: rgba(14, 16, 44, .62); border-color: rgba(255, 255, 255, .12); color: var(--moon-ink); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; font-variation-settings: "SOFT" 100; }
.brand em { font-style: normal; color: var(--leaf); }
[data-tone="night"] .nav .brand em, .footer .brand em { color: #6fdc96; }
.brand-mark { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a:not(.btn) { text-decoration: none; font-weight: 500; font-size: .97rem; padding: 8px 14px; border-radius: 999px; transition: background .2s; }
.nav-links a:not(.btn):hover { background: rgba(127, 127, 160, .16); }
.menu-btn { display: none; }

@media (max-width: 820px) {
  .menu-btn {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer;
  }
  .menu-btn span:not(.sr) { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s; }
  .nav.open .menu-btn span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav.open .menu-btn span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .nav { flex-wrap: wrap; border-radius: 26px; }
  .nav-links {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    padding: 6px 0 8px;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 10px; font-size: 1.05rem; }
  .nav-links .btn { margin-top: 6px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px;
  font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: .95rem; }
.btn-sun { background: var(--sunflower); color: #2a1f05; box-shadow: 0 8px 24px -8px rgba(255, 170, 40, .75); }
.btn-sun:hover { background: var(--sunflower-hi); box-shadow: 0 12px 30px -8px rgba(255, 170, 40, .9); }
.btn-ghost { background: rgba(255, 255, 255, .55); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(27, 33, 66, .25); }
.btn-ghost:hover { background: rgba(255, 255, 255, .8); }
.tone-night .btn-ghost { background: rgba(255, 255, 255, .06); color: var(--moon-ink); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.tone-night .btn-ghost:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Shared bits ---------- */
.tone-day { color: var(--ink); }
.tone-night { color: var(--moon-ink); }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.eyebrow { font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin-bottom: 14px; }
.tone-night .eyebrow { color: var(--sunflower); }
.sub { max-width: 60ch; margin-top: 18px; color: var(--ink-soft); font-size: 1.1rem; }
.tone-night .sub { color: var(--moon-soft); }
.scribble { font-family: var(--hand); font-weight: 600; font-size: 1.65rem; line-height: 1.15; color: var(--ember); }
.tone-night .scribble { color: var(--sunflower); }

.card {
  border-radius: var(--radius); padding: 28px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 40px -22px rgba(40, 30, 90, .4);
}
.tone-night .card {
  background: rgba(15, 17, 46, .8);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
}
.card p { color: var(--ink-soft); }
.tone-night .card p { color: var(--moon-soft); }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* Reveal on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; position: relative; padding: 120px 0 110px; }
.hero-hi { font-size: 2rem; margin-bottom: 8px; transform: rotate(-3deg); display: inline-block; }
.grow { position: relative; isolation: isolate; color: var(--leaf); white-space: nowrap; }
.grow::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .22em; z-index: -1;
  background: var(--sunflower); border-radius: 999px; opacity: .75; transform: rotate(-1.5deg);
}
.lede { max-width: 56ch; margin-top: 24px; font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--ink-soft); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chips { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); font-size: .94rem; font-weight: 500; }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink-soft); }
.scroll-hint .scribble { font-size: 1.3rem; color: var(--ink-soft); }
.scroll-hint svg { width: 22px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
@media (max-height: 700px) { .scroll-hint { display: none; } }

/* ---------- Sound familiar ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 44px; }
.card-icon { font-size: 2rem; margin-bottom: 14px; }
.grid-3 h3 { margin-bottom: 8px; }
.aside { margin-top: 30px; font-size: 1.15rem; font-weight: 500; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.about-text p:not(.eyebrow) { margin-top: 18px; font-size: 1.12rem; color: var(--ink-soft); max-width: 52ch; }
.promise { position: relative; padding-top: 34px; transform: rotate(1deg); }
.tone-day .card .promise-tag, .promise-tag { position: absolute; top: -22px; left: 22px; background: var(--sunflower); color: #3a2a05; padding: 2px 14px 4px; border-radius: 10px; transform: rotate(-4deg); font-size: 1.5rem; }
.promise .checks li { color: var(--ink-soft); }
.promise strong { color: var(--ink); }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .promise { transform: none; margin-top: 18px; } }

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.work { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.work:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 50px -24px rgba(60, 30, 80, .55); }
.work.feature { grid-column: span 2; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto 1fr; }
.work.feature .browser { grid-column: 1 / -1; }
.browser { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(27, 33, 66, .07); border-bottom: 1px solid rgba(27, 33, 66, .08); }
.browser span { width: 10px; height: 10px; border-radius: 50%; background: #ff8a80; }
.browser span:nth-child(2) { background: #ffd166; }
.browser span:nth-child(3) { background: #7bd88f; }
.browser i { font-style: normal; font-size: .8rem; color: var(--ink-soft); margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.work img { width: 100%; height: auto; aspect-ratio: 960 / 645; object-fit: cover; object-position: top; }
.work-info { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.work.feature .work-info { justify-content: center; padding: 30px; }
.work.feature h3 { font-size: 1.7rem; }
.try { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--ember); }
@media (max-width: 820px) {
  .work-grid { grid-template-columns: 1fr; }
  .work.feature { grid-column: auto; display: flex; }
}

/* ---------- How it works ---------- */
.steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
.steps li { position: relative; padding-top: 34px; }
.step-n {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%;
  font: 700 1.4rem/1 var(--serif); color: #2a1f05;
  background: radial-gradient(circle at 35% 35%, #fff3c4, var(--sunflower) 60%, #ffab3d);
  box-shadow: 0 0 24px rgba(255, 190, 60, .45);
}
.steps h3 { margin-bottom: 8px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 22px; margin-top: 44px; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 34px; position: relative; }
.plan h3 { font-size: 1.6rem; }
.price { font-size: 1.05rem; color: var(--moon-soft); }
.price span { font: 700 3.2rem/1 var(--serif); color: var(--moon-ink); margin-right: 6px; }
.plan-for { margin-bottom: 6px; }
.plan .checks { margin-bottom: 18px; }
.plan .btn { margin-top: auto; }
.plan-hi { border: 1.5px solid rgba(255, 207, 74, .55) !important; box-shadow: 0 0 60px -20px rgba(255, 190, 60, .45) !important; }
.tone-night .card .plan-flag, .plan-flag { position: absolute; top: -18px; right: 24px; font-family: var(--hand); font-size: 1.45rem; font-weight: 700; color: #2a1f05; background: var(--sunflower); padding: 0 14px 2px; border-radius: 10px; transform: rotate(3deg); }
.support {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  max-width: 862px; margin-top: 22px; padding: 26px 30px;
  border-style: dashed !important; border-color: rgba(255, 207, 74, .45) !important;
}
.support-icon { font-size: 2.2rem; }
.support h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.support-tag { font: 600 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255, 207, 74, .16); color: var(--sunflower); }
.support-price { color: var(--moon-soft) !important; white-space: nowrap; }
.support-price span { font: 700 2.2rem/1 var(--serif); color: var(--moon-ink); margin-right: 4px; }
@media (max-width: 640px) { .support { grid-template-columns: 1fr; gap: 12px; } }
.pricing-note { margin-top: 28px; max-width: 34ch; transform: rotate(-1.5deg); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; margin-top: 40px; }
.faq details { padding: 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 60px 22px 26px; position: relative;
  font: 600 1.15rem/1.35 var(--serif); font-variation-settings: "SOFT" 100;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font: 400 1.8rem/1 var(--sans); color: var(--sunflower); transition: transform .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 26px 24px; }

/* ---------- Contact ---------- */
.contact { padding-bottom: 0; }
.contact-hi { margin-bottom: 12px; }
.contact-form { margin-top: 36px; display: grid; gap: 18px; padding: clamp(22px, 4vw, 36px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.contact-form label, .contact-form legend { display: grid; gap: 8px; font-weight: 500; font-size: .98rem; color: var(--moon-ink); }
.opt { color: var(--moon-soft); font-weight: 400; }
.contact-form input:not([type="radio"]):not([type="checkbox"]), .contact-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--moon-ink);
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .16);
  transition: border-color .2s, background .2s;
}
.contact-form ::placeholder { color: rgba(200, 197, 232, .55); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--sunflower); background: rgba(255, 255, 255, .1); }
.contact-form .invalid { border-color: #ff8a80 !important; }
.contact-form textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pills label { display: block; cursor: pointer; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .2); font-weight: 500; transition: all .2s; }
.pills input:checked + span { background: var(--sunflower); border-color: var(--sunflower); color: #2a1f05; }
.pills input:focus-visible + span { outline: 3px solid var(--sunflower); outline-offset: 3px; }
.contact-form label.check { display: grid; grid-template-columns: 20px 1fr; align-items: center; justify-items: start; gap: 12px; text-align: left; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--sunflower); flex: none; }
.contact-form .btn { justify-self: start; margin-top: 4px; }
.form-note { font-size: .92rem; }
.form-note a { color: var(--sunflower); font-weight: 700; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn:disabled { opacity: .7; cursor: default; transform: none; }
.form-note.done { color: var(--sunflower) !important; font-weight: 600; }
.direct { margin-top: 24px; color: var(--moon-soft); }
.direct a { color: var(--sunflower); font-weight: 700; }

/* The little cabin at the end of the night */
.horizon-wrap { position: relative; margin-top: clamp(70px, 10vw, 120px); }
.cabin-note { text-align: center; padding: 0 20px; margin-bottom: -10px; transform: rotate(-1.5deg); font-size: 1.5rem; }
.horizon { width: 100%; height: clamp(170px, 22vw, 320px); }

/* ---------- Footer ---------- */
.footer { background: #070a24; color: var(--moon-soft); padding: 28px 0 36px; }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.footer .brand { color: var(--moon-ink); font-size: 1.1rem; }
.footer p { font-size: .95rem; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .cloud *, .scroll-hint svg, .sun canvas { animation: none !important; }
  .c1 { left: 6vw; } .c2 { left: 64vw; } .c3 { left: 40vw; } .c4 { left: 74vw; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .work { transition: none; }
}