/* =========================================================================
   ZOPANTA — brand + base
   -------------------------------------------------------------------------
   COLOUR HIERARCHY (as instructed by the client):
     PRIMARY    Sun Orange / Warm Yellow, Deep Green
     SECONDARY  Nature Green, Sky Blue / Teal, Warm White / Beige

   Sun Orange, Warm Yellow and Deep Green below were read straight out of the
   supplied logo artwork, from fully opaque pixels only:
     Sun Orange  #FF6A3D  the solid mark, and the low end of the sun gradient
     Warm Yellow #FFC73D  the high end of the sun gradient
     Deep Green  #18211C  the wordmark

   TODO (client): Nature Green, Sky Blue and Warm White are read off the brand
   board image, not off the source file. Replace the three values marked
   "APPROX" with the exact codes from the brand folder. They are used nowhere
   else, so three edits here update the whole site.
   ========================================================================= */

:root {
  /* --- Primary --- */
  --sun:         #FF6A3D;  /* Sun Orange  — exact, from logo */
  --sun-deep:    #EE4E1E;  /* pressed / hover state of Sun Orange */
  --yellow:      #FFC73D;  /* Warm Yellow — exact, from logo */
  --green-deep:  #18211C;  /* Deep Green  — exact, from logo */

  /* --- Secondary --- */
  --green-nature: #7BC24C; /* APPROX */
  --blue-sky:     #2A87AC; /* APPROX */
  --warm-white:   #F5F0E4; /* APPROX */

  /* --- Derived neutrals (one warm family, no cool greys) --- */
  --ink:        #18211C;
  --ink-70:     #4A544D;
  --ink-45:     #7C857F;
  --line:       #E8E1D1;
  --line-soft:  #F0EADC;
  --paper:      #FDFAF3;   /* barely-there cream. Plain white was hard on the eye. */

  /* --- Type --- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: "Satoshi", "Plus Jakarta Sans", sans-serif;

  /* --- Rhythm --- */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap: 1240px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* A class that sets `display` beats the browser's own [hidden] rule, which
   left the dialog invisible on top of the page and swallowing every click. */
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
figure, figcaption, blockquote { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--yellow); color: var(--green-deep); }

:focus-visible {
  outline: 3px solid var(--blue-sky);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-deep); color: #fff;
  padding: 0.8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* =========================================================================
   TYPE SCALE
   ========================================================================= */
.display   { font-size: clamp(2.6rem, 7.4vw, 5.1rem); }
.h-section { font-size: clamp(2rem, 4.4vw, 3.35rem); }
.h-card    { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.02em; }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-70);
  line-height: 1.62;
  max-width: 46ch;
}

.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0;
}

/* Warm Yellow swoosh under a highlighted word. Drawn as an SVG stroke so it
   curves like the brand mark instead of sitting flat like an underline. */
.swash { position: relative; white-space: nowrap; }
.swash-line {
  position: absolute;
  left: -3%; width: 108%;
  bottom: -0.20em;
  height: 0.30em;
  overflow: visible;
  pointer-events: none;
}
.swash-line path {
  fill: none;
  stroke: url(#swashGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.05s var(--ease) 0.35s;
}
.swash-line path { stroke-dashoffset: 0; }
.js .swash-line path { stroke-dashoffset: 260; }
.js .is-in .swash-line path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .swash-line path { stroke-dashoffset: 0; transition: none; }
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.2s, box-shadow 0.25s var(--ease), border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--sun);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(255, 106, 61, 0.65);
}
.btn-primary:hover {
  background: var(--sun-deep);
  box-shadow: 0 12px 26px -8px rgba(255, 106, 61, 0.6);
}

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-onDark { background: var(--sun); color: #fff; }
.btn-onDark:hover { background: var(--sun-deep); }

.btn-outlineDark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-outlineDark:hover { border-color: #fff; }

.btn .arw { transition: transform 0.3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* =========================================================================
   HEADER — single line, 72px desktop
   ========================================================================= */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 250, 243, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.site-head.is-stuck { border-bottom-color: var(--line-soft); }
@supports not (backdrop-filter: blur(1px)) { .site-head { background: var(--paper); } }

.head-in {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 22px; width: auto; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-70);
  white-space: nowrap;
  transition: color 0.2s;
}
.nav a:hover { color: var(--ink); }

/* Sun Orange rule that grows out from the left on hover. */
.nav > a:not(.head-cta) { position: relative; padding-block: 0.35rem; }
.nav > a:not(.head-cta)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--sun);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav > a:not(.head-cta):hover::after,
.nav > a:not(.head-cta):focus-visible::after { transform: scaleX(1); }

.nav a.head-cta,
.nav a.head-cta:hover,
.nav a.head-cta:focus-visible {
  padding: 0.68rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

/* Grey layer over the page while the mobile menu is open. */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(24, 33, 28, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}
.scrim.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s var(--ease), visibility 0s;
}
body.menu-open { overflow: hidden; }

.burger {
  display: none;
  background: none; border: 0; padding: 0.5rem;
  cursor: pointer; color: var(--ink);
}

@media (max-width: 900px) {
  .nav {
    /* Anchored to the sticky header, so it never leaves a seam
       whatever height the header ends up at. */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s, transform 0.22s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 0.85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); }
  .nav .head-cta { margin-top: 1rem; justify-content: center; border-bottom: 0; }
  .burger { display: block; }
}

/* =========================================================================
   SECTION RHYTHM + SCROLL REVEAL
   ========================================================================= */
section { position: relative; }
.pad { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* Only hide when JavaScript is running to bring it back. With JS off the page
   still reads in full, which matters for the App Store review. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   FOOTER — Deep Green
   ========================================================================= */
.site-foot {
  background: var(--green-deep);
  color: rgba(255,255,255,0.62);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.site-foot .brand img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.foot-tag {
  margin-top: 1.4rem;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}
.foot-col h4 {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-weight: 700; margin-bottom: 1.1rem;
}
.foot-col a {
  display: block; text-decoration: none; padding: 0.34rem 0;
  color: rgba(255,255,255,0.72); font-size: 0.95rem;
  transition: color 0.2s;
}
.foot-col a:hover { color: var(--yellow); }
.foot-base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.11);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.42);
}
@media (max-width: 780px) {
  .foot-top { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =========================================================================
   SUB-PAGE (privacy / support) — shared document shell
   ========================================================================= */
.doc-head { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.doc-head .display { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
.doc-meta { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-45); }

.doc-body { padding-bottom: clamp(4rem, 8vw, 7rem); }
.doc-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.doc-toc { position: sticky; top: 104px; }
.doc-toc h4 {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-45); margin-bottom: 0.9rem; font-weight: 700;
}
.doc-toc a {
  display: block; text-decoration: none; font-size: 0.9rem;
  color: var(--ink-70); padding: 0.35rem 0 0.35rem 0.85rem;
  border-left: 2px solid var(--line-soft);
  transition: color 0.2s, border-color 0.2s;
}
.doc-toc a:hover { color: var(--ink); border-left-color: var(--sun); }

.prose { max-width: 66ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.75rem);
  margin-top: 3rem; padding-top: 0.4rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.08rem; margin-top: 1.9rem; }
.prose p { margin-top: 1rem; color: var(--ink-70); }
.prose ul { margin-top: 1rem; }
.prose li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; color: var(--ink-70);
}
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sun);
}
.prose a { color: var(--blue-sky); text-underline-offset: 3px; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #F0EADC;
  border-radius: 5px;
  padding: 0.1em 0.38em;
}

.callout {
  margin-top: 1.6rem;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.25rem 1.5rem;
}
.callout p { margin-top: 0.5rem; }
.callout p:first-child { margin-top: 0; }
.callout strong { color: var(--ink); }

/* Editorial marker for text the client's lawyer must supply. */
.legal-todo {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  background: repeating-linear-gradient(-45deg, #FFF3D6, #FFF3D6 8px, #FFEBBE 8px, #FFEBBE 16px);
  border: 1px dashed #D9A93B;
  color: #8A6412;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
}

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-toc { position: static; display: none; }
}

/* =========================================================================
   SIGN-UP DIALOG
   ========================================================================= */
.modal {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: rgba(24, 33, 28, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), visibility 0s linear 0.24s;
}
.modal.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.24s var(--ease), visibility 0s;
}

.modal-card {
  width: 100%; max-width: 430px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -40px rgba(24, 33, 28, 0.6);
  padding: clamp(1.6rem, 4vw, 2.2rem);
  position: relative;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s var(--ease);
}
.modal.is-on .modal-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-card { transition: none; }
}

.modal-close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-45);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.modal-close:hover { background: var(--warm-white); color: var(--ink); }

.modal-sun {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(160deg, var(--yellow), var(--sun));
  margin-bottom: 1.1rem;
}
.modal h2 { font-size: 1.5rem; letter-spacing: -0.03em; }
.modal .sub { margin-top: 0.6rem; color: var(--ink-70); font-size: 0.96rem; }

.modal form { margin-top: 1.4rem; display: grid; gap: 0.7rem; }
.modal label { font-size: 0.82rem; font-weight: 700; color: var(--ink-70); }
.modal input[type="email"] {
  font: inherit;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal input[type="email"]::placeholder { color: var(--ink-45); }
.modal input[type="email"]:focus {
  outline: none;
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.18);
}
.modal .btn { justify-content: center; width: 100%; }
.modal .btn[disabled] { opacity: 0.6; cursor: progress; }

/* The honeypot. Off-screen rather than display:none, so bots still fill it. */
.hp {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}

.modal .msg { font-size: 0.88rem; min-height: 1.2em; }
.modal .msg.err { color: #C4341A; }
.modal .fine { margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-45); }
.modal .fine a { color: var(--blue-sky); }

/* Success replaces the form rather than sitting under it. */
.modal-done { display: none; text-align: center; padding-block: 0.6rem; }
.modal.is-done .modal-form { display: none; }
.modal.is-done .modal-done { display: block; }
.modal-done .tick {
  width: 52px; height: 52px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--green-nature);
  display: grid; place-items: center;
}
.modal-done h2 { font-size: 1.35rem; }
.modal-done p { margin-top: 0.55rem; color: var(--ink-70); font-size: 0.95rem; }