/* ============================================================
   Lookn website — single shared stylesheet. DRY, modern, ~16 KB.
   ============================================================ */

:root {
  /* Brand — from the Lookn RN client (constants/colors.js). */
  --lookn-green:        #66CE63;
  --lookn-green-shadow: #3AB54A;

  /* Sky — sampled from the koko illustration so the gradient meets the
     image's sky band seamlessly. */
  --sky-top:    #C7EAF8;
  --sky-mid:    #B0DEF1;
  --sky-bot:    #9DD2E8;

  /* Text */
  --ink:        #1F3D2A;     /* deep mossy green-black */
  --ink-muted:  #5C7263;
  --ink-soft:   #93A294;

  /* Surface */
  --page-bg:    #FFFAF0;
  --hairline:   rgba(31, 61, 42, 0.08);

  /* Radius */
  --r-pill:     28px;
  --r-pill-sm:  19px;
  --r-lg:       20px;
  --r-md:       14px;

  /* Motion */
  --btn-spring: 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --btn-press:   60ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Illustration height — single source of truth. */
  --scene-h:    clamp(220px, 38vh, 380px);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 61, 42, 0.18) transparent;
  scrollbar-gutter: stable;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgba(31, 61, 42, 0.18);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 61, 42, 0.32);
}

.cookie-banner {
  position: fixed;
  z-index: 1000;
  left: clamp(12px, 3vw, 20px);
  right: clamp(12px, 3vw, 20px);
  bottom: clamp(12px, 3vw, 20px);
  padding: 14px 16px 16px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 rgba(31, 61, 42, 0.04),
    0 28px 56px -16px rgba(31, 61, 42, 0.22);
  animation: cookie-slide-up 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cookie-banner--leaving {
  animation: cookie-slide-down 220ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes cookie-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes cookie-slide-down {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(16px);  opacity: 0; }
}

.cookie-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.cookie-banner__icon {
  font-size: 18px;
  line-height: 1;
}
.cookie-banner__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  color: var(--ink);
}
.cookie-banner__msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.cookie-banner__msg a {
  color: var(--lookn-green-shadow);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 181, 74, 0.4);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
.cookie-banner__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

/* Cookie buttons — SmartButton recipe (solid surface + flat stub shadow,
   press to flat). Self-contained styles instead of inheriting from
   .btn--* because the banner has its own scale. */
.cookie-btn {
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition:
    background-color 160ms ease,
    box-shadow var(--btn-spring),
    transform var(--btn-spring),
    color 120ms ease,
    filter 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: transform, box-shadow;
}

.cookie-btn--ghost {
  background: #fff;
  color: #1A1A1A;
  box-shadow: 0 5px 0 0 #E8E8E8;
}
.cookie-btn--ghost:hover {
  background: var(--lookn-green);
  color: #fff;
  box-shadow: 0 7px 0 0 var(--lookn-green-shadow);
  transform: translateY(-2px);
}
.cookie-btn--ghost:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 0 var(--lookn-green-shadow);
}

.cookie-btn--primary {
  background: var(--lookn-green);
  color: #fff;
  box-shadow: 0 6px 0 0 var(--lookn-green-shadow);
}
.cookie-btn--primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 8px 0 0 var(--lookn-green-shadow);
  transform: translateY(-2px);
}
.cookie-btn--primary:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 0 var(--lookn-green-shadow);
}

@media (min-width: 640px) {
  .cookie-banner {
    right: auto;
    max-width: 460px;
    padding: 20px 22px 22px;
    bottom: 28px;
    left: 28px;
  }
  .cookie-banner__title { font-size: 17px; }
  .cookie-banner__msg { font-size: 14px; margin-bottom: 16px; }
}

/* Cookie settings modal (opens from "Cookie settings" button) */
.cookie-settings {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(31, 61, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: cookie-fade 200ms ease-out both;
}
.cookie-settings--leaving { animation: cookie-fade-out 180ms ease-out both; }
@keyframes cookie-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cookie-fade-out { from { opacity: 1; } to { opacity: 0; } }

.cookie-settings__sheet {
  background: #fff;
  border: 1px solid #ECE8E0;
  border-radius: var(--r-lg);
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 22px 18px;
  animation: cookie-sheet-rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cookie-sheet-rise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookie-settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cookie-settings__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.cookie-settings__close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
}
.cookie-settings__close:hover { background: #F4FBF3; color: var(--ink); }

.cookie-settings__intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 16px;
}

.cookie-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #ECE8E0;
}
.cookie-row:last-of-type { border-bottom: 1px solid #ECE8E0; }
.cookie-row__copy { flex: 1; }
.cookie-row__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 4px;
}
.cookie-row__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

.cookie-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}
.cookie-pill--locked {
  background: #F4F0E8;
  color: var(--ink-soft);
}

.cookie-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.cookie-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.cookie-toggle__track {
  position: relative;
  width: 44px;
  height: 26px;
  background: #E2DDD2;
  border-radius: 999px;
  transition: background-color 200ms ease;
}
.cookie-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 999px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-toggle input:checked + .cookie-toggle__track {
  background: var(--lookn-green);
}
.cookie-toggle input:checked + .cookie-toggle__track .cookie-toggle__thumb {
  transform: translateX(18px);
}
.cookie-toggle input:focus-visible + .cookie-toggle__track {
  outline: 3px solid rgba(102, 206, 99, 0.35);
  outline-offset: 2px;
}

.cookie-settings__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

body {
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   HERO — content over a full-bleed illustration.

   Layer 1: .hero__bg     Full-bleed illustration (mobile / desktop
                          via <picture>). LCP candidate.
   Layer 2: .hero__veil   Frosted sky-blue gradient overlay on the
                          TOP of the screen, fading to transparent
                          at the bottom. backdrop-filter blur for
                          glassmorphism. Lets text read without
                          per-glyph halos.
   Layer 3: .hero__shell  Brand + headline + sub + CTAs + proof.
   Layer 4: .hero__legal  Floating white pill at the very bottom.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--sky-top);
  isolation: isolate;
}

/* ----- Layer 1: full-bleed illustration as a CSS bg -----------
   Mobile-first: portrait illustration anchored bottom so the
   kokos stay in the lower viewport and the sky fills the top
   where the hero copy overlays. Desktop swaps to the landscape
   variant in the @media (min-width: 769px) block below. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("2-mobile.png") center bottom / cover no-repeat,
    var(--sky-top);
}

/* ----- Layer 2: content shell ---------------------------------
   Mobile-first vertical rhythm:
   - Brand row sits ~52px from the safe-area top so it doesn't touch
     the status bar.
   - Hero copy starts ~30px below the brand row, with comfortable
     breathing space before the kokos illustration peeks in at
     the bottom. */
.hero__shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: max(env(safe-area-inset-top, 0px), 52px);
  padding-right: clamp(16px, 5vw, 32px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 60px);
  padding-left: max(env(safe-area-inset-left, 0px), 16px);
}

/* ----- Brand mark (top, flat, no badge bg) -------------------- */
.hero__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 6vh, 56px);
}
.hero__logo {
  width: clamp(72px, 17vw, 96px);
  height: clamp(72px, 17vw, 96px);
  object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(31, 61, 42, 0.24));
}
.hero__brand {
  font-weight: 700;
  font-size: clamp(36px, 9vw, 44px);
  letter-spacing: -0.015em;
  color: var(--ink);
  /* Subtle white outline for readability against the illustration. */
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill;
}

/* ----- Corner icon (Finch-style floating badge, bottom-right) -- */
.hero__corner {
  position: absolute;
  z-index: 3;
  right: max(env(safe-area-inset-right, 0px), 14px);
  bottom: max(env(safe-area-inset-bottom, 0px), 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(31, 61, 42, 0.06),
    0 10px 24px rgba(31, 61, 42, 0.20);
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero__corner:hover { transform: translateY(-2px) rotate(-2deg); }
.hero__corner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Left-aligned content column ---------------------------- */
.hero__copy {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Headline. Dark green-ink with a subtle white outline so it reads
   on any part of the illustration. Brand-green "fun". */
.hero__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(58px, 16vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
}
.hero__title-line {
  display: block;
}
.hero__title em {
  font-style: normal;
  color: var(--lookn-green-shadow);
}

/* Sub-headline. Thinner white outline. */
.hero__sub {
  margin: 0 0 28px;
  font-weight: 600;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 440px;
}

/* ----- CTAs ---------------------------------------------------
   Apple and Google require we use their official badge PNGs. The
   wrapper around the badge gives us full control of the tap target,
   corner radius, hover lift, and focus ring — without modifying
   the badge artwork itself. */
.hero__cta {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}
.hero__cta .btn--store {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0;
  border-radius: 14px;
  background: #000;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 5px 14px rgba(31, 61, 42, 0.22);
}
.hero__cta .btn--store:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(31, 61, 42, 0.26);
}
.hero__cta .btn--store:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(31, 61, 42, 0.20);
}
.hero__cta .btn--store img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  padding: 8px 10px;
}

/* ----- Social proof — star + trust signals -------------------- */
.hero__proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.hero__proof-star { -webkit-text-stroke: 0; }
.hero__proof-star {
  color: var(--lookn-warm, #F7B638);
  font-size: 16px;
  line-height: 1;
}

/* ----- Legal pill — floating chip at the very bottom ----------
   Layered above the scene illustration with a real white surface.
   Premium feel, no halo trickery, readable on grass. */
.hero__legal {
  position: absolute;
  z-index: 3;
  bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(31, 61, 42, 0.04),
    0 8px 22px rgba(31, 61, 42, 0.15);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.hero__legal a {
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  transition: color 120ms ease, background 120ms ease;
}
.hero__legal a:hover {
  color: var(--lookn-green-shadow);
  background: rgba(102, 206, 99, 0.12);
}
.hero__legal a:focus-visible {
  outline: 2px solid var(--lookn-green);
  outline-offset: 1px;
}
.hero__legal span {
  color: var(--ink-soft);
  opacity: 0.4;
  font-size: 10px;
}

/* ----- Tight viewports (small phones, landscape) -------------- */
@media (max-height: 700px) {
  :root { --scene-h: clamp(180px, 30vh, 280px); }
  .hero__top { margin-bottom: 12px; }
  .hero__brand-badge { width: 44px; height: 44px; }
  .hero__logo { width: 48px; height: 48px; }
  .hero__brand { font-size: 19px; }
  .hero__title { font-size: clamp(30px, 7.5vw, 44px); margin-bottom: 10px; }
  .hero__sub { margin-bottom: 20px; font-size: clamp(14px, 3.5vw, 16px); }
  .hero__cta { gap: 10px; }
  .hero__cta .btn--store img { max-height: 54px; }
  .hero__proof { margin-top: 16px; font-size: 13px; }
}
@media (max-width: 360px) {
  .hero__title { font-size: clamp(30px, 8.5vw, 40px); }
  .hero__cta .btn--store img { max-height: 54px; }
}

/* ----- Desktop ------------------------------------------------
   Content shifts to the LEFT side of the screen so the koko + dome
   on the landscape illustration stay visible on the right. */
@media (min-width: 769px) {
  .hero__bg {
    /* Anchor right so the kokos + dome stay visible next to the
       left-aligned hero copy. */
    background:
      url("2.png") right center / cover no-repeat,
      var(--sky-top);
  }

  .hero__shell {
    /* Everything hugs the LEFT edge — content lives in the left third,
       koko + dome breathe on the right. */
    max-width: none;
    margin: 0;
    align-items: flex-start;
    text-align: left;
    padding-top: clamp(32px, 4vw, 56px);
    padding-right: clamp(20px, 5vw, 64px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 80px);
    padding-left: clamp(20px, 4vw, 56px);
  }
  .hero__top { margin-bottom: clamp(28px, 6vh, 56px); }
  .hero__logo { width: clamp(72px, 6vw, 104px); height: clamp(72px, 6vw, 104px); }
  .hero__brand { font-size: clamp(36px, 3.2vw, 48px); }

  .hero__copy {
    align-items: flex-start;
    text-align: left;
    max-width: 620px;
    margin-top: clamp(16px, 4vh, 56px);
  }
  .hero__title {
    font-size: clamp(64px, 7.5vw, 112px);
    margin-bottom: 24px;
    -webkit-text-stroke: 9px #fff;
  }
  .hero__sub {
    font-size: clamp(20px, 1.8vw, 26px);
    max-width: 520px;
    margin-bottom: 36px;
  }

  .hero__cta {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
  }
  .hero__cta .btn--store {
    width: auto;
    max-width: none;
    height: 64px;
    border-radius: 16px;
  }
  .hero__cta .btn--store img { width: auto; padding: 9px 18px; }

  .hero__proof { margin-top: 26px; font-size: 15px; justify-content: flex-start; }
}

/* ============================================================
   Buttons — single SmartButton recipe, variants by class.

   Shared base via :where() so every .btn--* gets the same press
   physics (transform/transition/focus) without duplicate rules.
   Each variant only declares its bg / shadow / text + size.
   ============================================================ */

:where(.btn--primary, .btn--chip, .btn--social, .btn--store) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition:
    transform var(--btn-spring),
    box-shadow var(--btn-spring),
    background-color 120ms ease,
    color 120ms ease;
  will-change: transform, box-shadow;
}

:where(.btn--primary, .btn--chip, .btn--social, .btn--store):hover {
  transform: translateY(-2px);
}
:where(.btn--primary, .btn--chip, .btn--social, .btn--store):active {
  transition-duration: var(--btn-press);
}
:where(.btn--primary, .btn--chip, .btn--social, .btn--store):focus-visible {
  outline: 3px solid var(--lookn-green);
  outline-offset: 3px;
}

/* --- Primary (green CTA) ------------------------------------- */
.btn--primary {
  height: 56px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--lookn-green);
  box-shadow: 0 8px 0 0 var(--lookn-green-shadow);
}
.btn--primary:hover { box-shadow: 0 10px 0 0 var(--lookn-green-shadow); filter: brightness(1.04); }
.btn--primary:active { transform: translateY(8px); box-shadow: 0 0 0 0 var(--lookn-green-shadow); }
.btn--full { width: 100%; }

/* --- Chip (sub-page nav, footer links) ----------------------- */
/* Default: white surface, black text, neutral shadow. Hover
   flips to the primary green recipe — same "lifts to brand" feel
   as the footer social chips. No green border, no green text in
   the rest state. */
.btn--chip {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill-sm);
  font-size: 14px;
  color: #1A1A1A;
  background: #fff;
  box-shadow: 0 5px 0 0 #E8E8E8;
}
.btn--chip:hover {
  background: var(--lookn-green);
  color: #fff;
  box-shadow: 0 7px 0 0 var(--lookn-green-shadow);
}
.btn--chip:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 0 var(--lookn-green-shadow);
}

/* Store badge wrappers (App Store / Google Play). Badges
   themselves are the official PNGs (Apple/Google forbid
   modifying them). The wrapper gives the click target a fully
   rounded pill so the focus / press affordance feels like the
   rest of the site instead of a square. No box-shadow — any
   stub bleeds through the PNGs' transparent padding. */
.btn--store {
  height: 60px;
  padding: 0;
  border-radius: var(--r-pill);
  background: transparent;
}
.btn--store:active { transform: translateY(2px); }
.btn--store img {
  display: block;
  height: 60px;
  width: auto;
}

/* ============================================================
   Sub-pages — Privacy / Terms / Support
   ============================================================ */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  justify-content: center;
}

.shell {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 6vw, 48px) clamp(18px, 5vw, 32px) 80px;
}
.shell__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 14px;
}
.shell__back:hover { color: var(--lookn-green-shadow); }
.shell h1 {
  font-weight: 600;
  font-size: clamp(28px, 5vw, 36px);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.shell__sub {
  color: var(--ink-muted);
  font-size: 14px;
  margin: 0 0 28px;
}
.shell h2 {
  font-weight: 600;
  font-size: 20px;
  margin: 28px 0 8px;
  letter-spacing: -0.01em;
}
.shell p, .shell li {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.65;
}
.shell ul { padding-left: 22px; }
.shell li { margin-bottom: 6px; }
.shell a:not([class]) {
  color: var(--lookn-green-shadow);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 181, 74, 0.4);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

.card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 14px 0 24px;
  box-shadow:
    0 1px 0 rgba(31, 61, 42, 0.04),
    0 8px 24px rgba(31, 61, 42, 0.06);
}
.card h2:first-child { margin-top: 0; }

.fourohfour {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--page-bg);
}
.fourohfour img { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 18px; }

/* ============================================================
   HELP CENTER (help.html) — search-first FAQ layout. Finch-style:
   hero with big search, category chip grid, sectioned FAQ cards.
   ============================================================ */

.help-hero {
  background: linear-gradient(180deg, var(--sky-top) 0%, #E5F4FB 60%, var(--page-bg) 100%);
  padding: clamp(36px, 7vw, 80px) clamp(20px, 5vw, 32px) clamp(28px, 5vw, 56px);
  text-align: center;
}
.help-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.help-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(20px, 4vw, 36px);
  color: var(--ink);
  text-decoration: none;
}
.help-hero__mark {
  width: clamp(56px, 9vw, 72px);
  height: clamp(56px, 9vw, 72px);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(31, 61, 42, 0.18));
}
.help-hero__wordmark {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 32px);
  letter-spacing: -0.01em;
}
.help-hero__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.help-hero__sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--ink-muted);
  margin: 0 0 22px;
  font-weight: 500;
}
.help-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}
.help-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}
.help-search input {
  width: 100%;
  height: 56px;
  padding: 0 20px 0 50px;
  border: 1.5px solid #ECE8E0;
  border-radius: 999px;
  background: #fff;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.help-search input::placeholder { color: var(--ink-soft); font-weight: 500; }
.help-search input:focus {
  outline: none;
  border-color: var(--lookn-green);
}
.help-hero__hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
}

.help-cats {
  max-width: 1080px;
  margin: clamp(-16px, -2vw, -32px) auto 0;
  padding: 0 clamp(16px, 4vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  z-index: 2;
}
.help-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(31, 61, 42, 0.04), 0 8px 22px -10px rgba(31, 61, 42, 0.18);
  transition: transform var(--btn-spring), box-shadow var(--btn-spring), background-color 120ms ease;
}
.help-cat:hover {
  transform: translateY(-2px);
  background: var(--lookn-green);
  color: #fff;
  box-shadow: 0 1px 0 rgba(31, 61, 42, 0.04), 0 14px 28px -10px rgba(102, 206, 99, 0.45);
}
.help-cat__emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
@media (min-width: 640px) { .help-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .help-cats { grid-template-columns: repeat(5, 1fr); } }

.help-main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 32px) clamp(48px, 6vw, 80px);
}
.help-section { margin: 0 0 clamp(28px, 4vw, 48px); scroll-margin-top: 24px; }
.help-section__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.help-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-q {
  background: #fff;
  border: 1px solid #ECE8E0;
  border-radius: var(--r-md);
  padding: 16px 20px;
  transition: border-color 160ms ease;
}
.help-q:hover { border-color: #D8EBD2; }
.help-q[open] { border-color: var(--lookn-green); }
.help-q summary {
  cursor: pointer;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 32px;
  user-select: none;
}
.help-q summary::-webkit-details-marker { display: none; }
.help-q summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: transform 200ms ease;
  line-height: 1;
}
.help-q[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--lookn-green-shadow); }
.help-q p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.help-q p a {
  color: var(--lookn-green-shadow);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 181, 74, 0.4);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
.help-q em { font-style: italic; }

/* Search results panel (used on help.html landing) */
.help-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #ECE8E0;
  border-radius: var(--r-lg);
  text-align: left;
  z-index: 10;
  max-height: 60vh;
  overflow-y: auto;
}
.help-search__panel--floating {
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  width: clamp(280px, 80vw, 400px);
}
.help-search__results { list-style: none; margin: 0; padding: 6px; }
.help-search__results li { margin: 0; }
.help-search__results a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 120ms ease;
}
.help-search__results a:hover { background: rgba(102,206,99,0.10); }
.help-search__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.help-search__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.help-search__snippet { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
.help-search__empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-muted);
}
.help-search__empty a {
  color: var(--lookn-green-shadow);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 181, 74, 0.4);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

/* Category card grid on help.html landing */
.help-main--cats {
  padding: clamp(8px, 2vw, 24px) clamp(16px, 4vw, 32px) clamp(40px, 6vw, 64px);
  max-width: 1080px;
  margin: 0 auto;
}
.help-catgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.help-catcard {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 22px 22px 14px;
  border: 1px solid #ECE8E0;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.help-catcard:hover {
  background: #F8FCF7;
  border-color: #D8EBD2;
}
.help-catcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.help-catcard__emoji { font-size: 22px; line-height: 1; }
.help-catcard__head h2 {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  color: var(--ink);
}
.help-catcard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.help-catcard__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, transform 160ms ease;
}
.help-catcard__list a::after {
  content: "›";
  font-size: 18px;
  color: var(--ink-soft);
  opacity: 0.4;
  transform: translateX(0);
  transition: opacity 160ms ease, transform 160ms ease, color 120ms ease;
}
.help-catcard__list a:hover {
  background: #F4FBF3;
  color: var(--lookn-green-shadow);
}
.help-catcard__list a:hover::after {
  opacity: 1;
  transform: translateX(2px);
  color: var(--lookn-green-shadow);
}
@media (min-width: 640px) { .help-catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .help-catgrid { grid-template-columns: repeat(3, 1fr); } }

/* Article pages */
.help-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 240, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--hairline);
  padding: 12px clamp(16px, 4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.help-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #ECE8E0;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
  min-height: 44px;
  transition: border-color 160ms ease, background-color 160ms ease, color 120ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.help-bar__back svg {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.help-bar__back:hover {
  background: #F4FBF3;
  border-color: var(--lookn-green);
  color: var(--lookn-green-shadow);
}
.help-bar__back:hover svg {
  transform: translateX(-3px);
}
.help-bar__back:active {
  transform: translateY(1px);
}
.help-bar__search {
  position: relative;
  flex: 0 1 360px;
  display: flex;
  align-items: center;
}
.help-bar__search svg {
  position: absolute;
  left: 14px;
  color: var(--ink-soft);
  pointer-events: none;
}
.help-bar__search input {
  width: 100%;
  height: 38px;
  padding: 0 16px 0 38px;
  border: 1.5px solid #ECE8E0;
  border-radius: 999px;
  background: #fff;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  transition: border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.help-bar__search input::placeholder { color: var(--ink-soft); font-weight: 500; }
.help-bar__search input:focus {
  outline: none;
  border-color: var(--lookn-green);
}

.help-doc {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 32px) clamp(40px, 6vw, 72px);
  display: block;
}
.help-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}

/* Mobile sticky TOC (visible <1024px) */
.help-toc-mobile {
  position: sticky;
  top: 68px;
  z-index: 30;
  margin: 0 auto 18px;
  max-width: 720px;
}
.help-toc-mobile summary {
  list-style: none;
  cursor: pointer;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #ECE8E0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.help-toc-mobile summary:hover { border-color: var(--lookn-green); background: #F8FCF7; }
.help-toc-mobile[open] summary { border-color: var(--lookn-green); }
.help-toc-mobile summary::-webkit-details-marker { display: none; }
.help-toc-mobile summary::after {
  content: "▾";
  font-size: 12px;
  color: var(--ink-soft);
  transition: transform 200ms ease;
}
.help-toc-mobile[open] summary::after { transform: rotate(180deg); }
.help-toc-mobile__body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #ECE8E0;
  border-radius: var(--r-md);
  padding: 8px;
  max-height: 70vh;
  overflow-y: auto;
}
.help-toc-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.help-toc-mobile__list a {
  display: block;
  padding: 10px 14px;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 120ms ease, color 120ms ease;
}
.help-toc-mobile__list a:hover { background: #F4FBF3; color: var(--ink); }
.help-toc-mobile__list a.is-active {
  background: #E8F6E5;
  color: #2E8E3C;
  font-weight: 700;
}
.help-toc-mobile__group {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 14px 4px;
}

/* Desktop sticky rail (visible ≥1024px) */
.help-rail { display: none; }

@media (min-width: 1024px) {
  .help-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 56px;
    align-items: start;
  }
  .help-article { max-width: none; margin: 0; }
  .help-toc-mobile { display: none; }
  .help-rail {
    display: block;
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .help-rail__group {
    font-family: "Fredoka", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 8px;
    padding-left: 12px;
  }
  .help-rail__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .help-rail__list a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink-muted);
    text-decoration: none;
    line-height: 1.4;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .help-rail__list a:hover { color: var(--ink); background: #F4FBF3; }
  .help-rail__list a.is-active {
    color: #2E8E3C;
    background: #E8F6E5;
    font-weight: 700;
  }
}
.help-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 18px;
}
.help-crumbs a {
  color: var(--ink-muted);
  font-weight: 500;
  text-decoration: none;
}
.help-crumbs a:hover { color: var(--lookn-green-shadow); }
.help-crumbs span { color: var(--ink-soft); opacity: 0.6; }
.help-article__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.help-article__meta {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.help-article__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 28px;
  font-weight: 500;
}
.help-article h2 {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 32px 0 12px;
  scroll-margin-top: 80px;
}
html { scroll-behavior: smooth; }

/* Emoji-text spacing: emoji glyphs have tight side bearings that read
   crammed against the text. Wrap the leading emoji in a span and give
   it explicit margin-right so the heading "🚀 How" reads as "🚀  How". */
.h2-emo,
.rel-emo,
.toc-emo {
  display: inline-block;
  margin-right: 8px;
  flex: 0 0 auto;
}
.toc-emo { margin-right: 6px; }
.help-article p, .help-article li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
}
.help-article ul, .help-article ol {
  padding-left: 22px;
  margin: 0 0 16px;
}
.help-article li { margin-bottom: 6px; }
.help-article a {
  color: var(--lookn-green-shadow);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 181, 74, 0.4);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
:where(.help-article a, .help-q p a, .shell a:not([class]), .cookie-banner__msg a, .help-search__empty a, .about__faq details a):hover {
  text-decoration-color: currentColor;
  color: #2E8E3C;
}
.help-article strong { font-weight: 600; }
.help-article em { font-style: italic; }
.help-tip {
  background: #FFF6E1;
  border: 1px solid #F2DEA0;
  padding: 16px 20px;
  border-radius: var(--r-md);
  margin: 24px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.help-tip::before {
  content: "💡";
  font-size: 20px;
  line-height: 1.4;
  flex: 0 0 auto;
}
.help-tip strong { color: var(--ink); font-weight: 700; }

.help-article .help-q {
  background: #fff;
  border: 1px solid #ECE8E0;
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0 0 8px;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.help-article .help-q:hover { border-color: #D8EBD2; }
.help-article .help-q[open] { border-color: var(--lookn-green); }
.help-article .help-q summary {
  cursor: pointer;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.help-article .help-q summary::-webkit-details-marker { display: none; }
.help-article .help-q summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: transform 200ms ease, color 120ms ease;
}
.help-article .help-q:hover summary::after { color: var(--ink); }
.help-article .help-q[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--lookn-green-shadow); }
.help-article .help-q p {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.65;
}

.help-article__foot {
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.help-article__helpful {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--ink-muted);
}
.help-article__related-title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--ink);
}
.help-article__related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.help-article__related a {
  display: block;
  padding: 12px 14px;
  margin: 0 -14px;
  background: transparent;
  border-radius: 10px;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.help-article__related a:hover {
  background: #F4FBF3;
  color: var(--lookn-green-shadow);
}

.help-section--cta { margin-top: clamp(32px, 5vw, 56px); }
.help-cta-card {
  background: var(--lookn-green);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
}
.help-cta-card__emoji {
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  margin: 0 0 8px;
}
.help-cta-card__title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 8px;
  color: #fff;
}
.help-cta-card__msg {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.help-cta-card__msg a {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.about__faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 24px;
}
.about__faq details {
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(31, 61, 42, 0.04), 0 6px 16px rgba(31, 61, 42, 0.05);
}
.about__faq summary {
  cursor: pointer;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.about__faq summary::-webkit-details-marker { display: none; }
.about__faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: transform 180ms ease;
}
.about__faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.about__faq details p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.about__faq details a {
  color: var(--lookn-green-shadow);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 181, 74, 0.4);
  transition: text-decoration-color 120ms ease, color 120ms ease;
}

/* ============================================================
   FOOTER — Finch-style band. Uses width: brand block on the
   left, link columns on the right, social chips + copyright in
   one bottom strip. Tight vertical rhythm (~200px on desktop).
   SmartButton recipe on social chips (white pill, flat colored
   shadow stub, presses down on tap).
   ============================================================ */

.footer {
  background: var(--page-bg);
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  padding: clamp(28px, 4vw, 40px) clamp(20px, 5vw, 48px) clamp(16px, 2.5vw, 22px);
}

.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: start;
  text-align: center;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}
.footer__brand-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer__brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.footer__brand-name {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.footer__tagline {
  margin: 0;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.55;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 32px);
  text-align: left;
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer__col-title {
  margin: 0 0 12px;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}
.footer__list a {
  display: inline-block;
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background-color 160ms ease, color 120ms ease;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.footer__list a:hover {
  color: var(--lookn-green-shadow);
  background: #F4FBF3;
}

.footer__bottom {
  max-width: 1180px;
  margin: clamp(24px, 3vw, 32px) auto 0;
  padding-top: clamp(20px, 3vw, 24px);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.footer__copyright {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}

.footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.btn--social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #1A1A1A;
  background: #fff;
  box-shadow: 0 4px 0 0 #E8E8E8;
}
.btn--social svg { width: 20px; height: 20px; }
.btn--social:hover {
  background: var(--lookn-green);
  color: #fff;
  box-shadow: 0 6px 0 0 var(--lookn-green-shadow);
}
.btn--social:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--lookn-green-shadow);
}
.btn--social svg { display: block; }

/* Desktop layout: brand left, link columns right. Left-aligned. */
@media (min-width: 769px) {
  .footer__inner {
    grid-template-columns: 1.2fr 2fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
    text-align: left;
  }
  .footer__brand {
    align-items: flex-start;
    margin: 0;
  }
  .footer__col {
    align-items: flex-start;
    text-align: left;
  }
  .footer__list { align-items: flex-start; }
  .footer__list a { padding: 4px 0; border-radius: 0; }
  .footer__list a:hover { background: transparent; }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */

/* Footer email overflow: long support@looknapp.com address pushes
   the page horizontally on narrow viewports. Two fixes:
   1. Stack the 3 footer columns to 1 column below 480px so each
      column gets the full width instead of ~107px.
   2. Allow the email/link to break on any character if it must,
      so it can't blow past the viewport edge regardless. */
.footer__list a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 480px) {
  .footer__cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Landing hero on mobile: pump up the title size + give the subtitle
   more presence so the "How can we help?" headline carries the page. */
@media (max-width: 480px) {
  .help-hero {
    padding-top: 28px;
    padding-bottom: 24px;
  }
  .help-hero__title {
    font-size: 38px;
    margin-bottom: 12px;
  }
  .help-hero__sub {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .help-hero__wordmark { font-size: 20px; }
  .help-hero__mark { width: 32px; height: 32px; }
}

/* Touch devices: prevent the iOS Safari "first tap shows hover,
   second tap activates" trap. On hover-capable devices nothing
   changes; on touch devices we re-state the resting visual
   appearance under :hover so synthesized hover doesn't stick. */
@media (hover: none) {
  /* Buttons */
  .btn--primary:hover {
    box-shadow: 0 8px 0 0 var(--lookn-green-shadow);
    filter: none;
    transform: none;
  }
  .btn--chip:hover {
    background: #fff;
    color: #1A1A1A;
    box-shadow: 0 5px 0 0 #E8E8E8;
    transform: none;
  }
  .btn--social:hover {
    background: #fff;
    color: #1A1A1A;
    box-shadow: 0 4px 0 0 #E8E8E8;
    transform: none;
  }
  :where(.btn--primary, .btn--chip, .btn--social, .btn--store):hover {
    transform: none;
  }

  /* Help bar back chip */
  .help-bar__back:hover {
    background: transparent;
    color: var(--ink);
  }

  /* Category cards + list items */
  .help-catcard:hover {
    background: #fff;
    border-color: #ECE8E0;
  }
  .help-catcard__list a:hover {
    background: transparent;
    color: var(--ink);
  }
  .help-catcard__list a:hover::after {
    opacity: 0.4;
    transform: translateX(0);
    color: var(--ink-soft);
  }

  /* FAQ accordion + related articles */
  .help-q:hover { border-color: #ECE8E0; }
  .help-article .help-q:hover { background: #fff; }
  .help-article__related a:hover {
    background: transparent;
    color: var(--ink);
  }

  /* TOC rail (desktop only, but cover it) + mobile TOC */
  .help-toc-mobile summary:hover {
    border-color: #ECE8E0;
    background: #fff;
  }
  .help-toc-mobile__list a:hover {
    background: transparent;
    color: var(--ink);
  }

  /* Body links */
  :where(.help-article a, .help-q p a, .shell a:not([class]), .cookie-banner__msg a, .help-search__empty a, .about__faq details a):hover {
    text-decoration-color: rgba(58, 181, 74, 0.4);
    color: var(--lookn-green-shadow);
  }

  /* Footer link hover */
  .footer__list a:hover { color: var(--ink); }
}

/* Touch tap optimization: kills the legacy 300ms click delay
   and tells the browser these elements are tap targets. */
:where(a, button, summary, [role="button"], .btn--primary, .btn--chip, .btn--social, .btn--store) {
  touch-action: manipulation;
}