/* CocoCircles marketing site.
   Palette and gradients are taken from the app itself:
   - brand kit .......... docs/brand/cococircles/README.md
   - sky + ink tokens ... app/src/design/skylight.ts (day + evening skies)
   Contrast rule inherited from the app: coral is a SURFACE colour, never text on a light
   ground (#FF6B8A on cream is 2.56:1). Ink on coral is 5.41:1 and is what we use. */

:root {
  /* Ink + ground */
  --ink: #2b2440;
  /* Measured, not chosen: #585271 gave secondary text only 4.57:1 on the sky's lavender
     stop (#CFC5FF) — over the 4.5 line by 0.07. #474062 is 6.01:1 there and 9.02:1 on
     cream, and still sits well below ink's 13.74:1, so the hierarchy survives. */
  --ink-soft: #474062;
  --cream: #fff7e0;
  --paper: #fffdf6;

  /* Brand */
  --coral: #ff6b8a;
  --lavender: #b9a5ff;
  /* The brand lavender as TEXT on the palest evening stop is 4.72:1 — a hair over the
     line. This is the same hue lightened to 5.82:1, for links only; borders and
     non-text accents keep --lavender. */
  --lavender-text: #cbbcff;
  --amber: #ffd98a;

  /* Day sky (Skylight `day.sky`) */
  --sky-1: #ffe9ce;
  --sky-2: #ffd3e0;
  --sky-3: #cfc5ff;
  --bloom-warm: #ffe1a6;
  --bloom-pink: #ffc7db;

  /* Evening sky (Skylight `evening.sky`) */
  --eve-1: #241e45;
  --eve-2: #3a2c63;
  --eve-3: #54346e;
  --eve-ink: #f6f1ff;
  --eve-ink-soft: #e4e1f0;

  /* Glass (Skylight `day.glass` / `glassBorder`) */
  --glass: rgba(255, 255, 255, 0.7);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --hairline: rgba(43, 36, 64, 0.14);

  /* Spacing scale — 4px base, no off-scale values anywhere below */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --radius-sm: 0.625rem;
  --radius: 1.125rem;
  --radius-lg: 1.75rem;

  --measure: 34rem;
  --page: 71rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.55rem + 3.5vw, 4rem);
}

h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
}

h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.25;
}

p {
  margin: 0;
  max-width: var(--measure);
}

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

/* `list-style: none` strips list SEMANTICS in Safari/VoiceOver, so it is never applied
   globally: it is set only on the lists that are styled into something else (chips, cards,
   a numbered rail), and every one of those carries an explicit role="list" in the markup to
   put the semantics back. Plain lists keep their markers. */
ul,
ol {
  margin: 0;
  padding: 0;
}

.site-nav ul,
.stores,
.daycard__rows,
.steps,
.who,
.promises,
.foot-links,
.doc ul {
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--s-1);
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 20;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

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

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}

.eyebrow--light {
  color: var(--eve-ink-soft);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 38rem;
}

/* ---------- header ---------- */

/* The sky wraps the whole page rather than only the hero, so the header and the hero share
   one uninterrupted gradient with no seam and no magic header height. Every section below the
   hero paints its own opaque ground over it, so the stops are pushed into the top third —
   that is the only part anyone ever sees. */
.band-sky {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 84% 2%, var(--bloom-warm) 0%, rgba(255, 225, 166, 0) 62%),
    radial-gradient(52rem 44rem at -6% 26%, var(--bloom-pink) 0%, rgba(255, 199, 219, 0) 60%),
    linear-gradient(
      168deg,
      var(--sky-1) 0%,
      var(--sky-2) 17%,
      var(--sky-3) 33%,
      var(--sky-3) 100%
    );
}

.sun {
  position: absolute;
  inset-block-start: -4rem;
  inset-inline-end: -3rem;
  width: clamp(11rem, 26vw, 19rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0.9;
  z-index: -1;
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes drift {
  to {
    transform: translate3d(-1.25rem, 0.75rem, 0);
  }
}

.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-5);
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  width: clamp(9.5rem, 26vw, 12.5rem);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.site-nav a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.site-nav a:hover {
  background: var(--glass);
  border-color: var(--glass-edge);
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(var(--s-6), 6vw, var(--s-9)) clamp(var(--s-8), 9vw, 7rem);
}

.hero-grid {
  display: grid;
  gap: clamp(var(--s-6), 6vw, var(--s-8));
  grid-template-columns: 1fr;
  align-items: start;
}

.hero h1 {
  margin-bottom: var(--s-5);
}

.hero .lede {
  margin-bottom: var(--s-6);
}

.hero-mark {
  width: 3.25rem;
  margin-bottom: var(--s-5);
}

/* store placeholders — deliberately NOT buttons: nothing to press yet. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.store-badge {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--s-3) var(--s-5);
  min-width: 11.5rem;
  border: 2px dashed rgba(43, 36, 64, 0.7); /* 4.89:1 on its own ground; 0.3 was 1.79:1 */
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.45);
}

.store-badge b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.store-badge span {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stores-note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: var(--s-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink); /* ink on coral = 5.41:1 */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.btn:hover {
  background: #ff8299;
  transform: translateY(-1px);
}

/* ---------- the day card (a drawing of the product, not stock art) ---------- */

.daycard {
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  padding: var(--s-5);
  max-width: 26rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.daycard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

.daycard__day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
}

.daycard__weather {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.daycard__rows {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-4);
}

.row {
  display: grid;
  grid-template-columns: 3.5rem 0.625rem 1fr;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.9375rem;
}

.row time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--coral);
}

.dot--lav {
  background: var(--lavender);
}

.dot--ink {
  background: var(--ink);
}

.row b {
  font-weight: 700;
}

.row small {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.gap-pill {
  grid-column: 3;
  justify-self: start;
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--hairline);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.errand-band {
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.errand-band p {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

.errand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  border: 2px dashed rgba(43, 36, 64, 0.7);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ---------- sections ---------- */

.section {
  position: relative;
  background: var(--cream);
  padding-block: clamp(var(--s-8), 9vw, var(--s-9));
}

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

/* Softens the one hard edge on the page: where the sky meets the first cream section. */
.section--first::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* Never taller than the hero's own bottom padding (4rem floor), so it can only ever cover
     empty space — a fade drawn over the primary link would wash it out at 320px. */
  height: 4rem;
  background: linear-gradient(to bottom, rgba(255, 247, 224, 0), var(--cream));
  pointer-events: none;
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(var(--s-6), 5vw, var(--s-8));
}

.section__head p {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* how it works — a rail, stepped, like the Day Path */

.steps {
  display: grid;
  gap: var(--s-6);
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: 4.25rem;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
}

.step::after {
  content: "";
  position: absolute;
  left: 1.3125rem;
  top: 3.25rem;
  bottom: -2.25rem;
  border-left: 2px dashed rgba(43, 36, 64, 0.6); /* 3.98:1 on cream; 0.3 was 1.84:1 */
}

.step:last-child::after {
  display: none;
}

.step h3 {
  margin-bottom: var(--s-3);
}

.step p {
  color: var(--ink-soft);
}

/* what's inside — an editorial grid, deliberately uneven */

.features {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

.feature {
  padding: var(--s-5);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--cream);
}

.section--paper .feature {
  background: var(--cream);
}

/* The lead card keeps its violet ground inside the paper section: `.section--paper .feature`
   outranks `.feature--lead` on specificity, which left light ink on cream (owner, 2026-09-14). */
.section--paper .feature--lead {
  background: var(--ink);
  border-color: var(--ink);
}

.feature__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

.feature h3 {
  margin-bottom: var(--s-3);
}

.feature p {
  color: var(--ink-soft);
  font-size: 1rem;
}

.feature--lead {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--eve-ink);
  padding: var(--s-6);
}

.feature--lead .feature__tag,
.feature--lead p {
  color: var(--eve-ink-soft);
}

/* who it's for */

.who {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

.who li {
  padding-top: var(--s-4);
  border-top: 3px solid var(--coral);
}

.who b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  display: block;
  margin-bottom: var(--s-2);
}

.who p {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* privacy band — the evening sky */

.band-evening {
  background: linear-gradient(168deg, var(--eve-1) 0%, var(--eve-2) 54%, var(--eve-3) 100%);
  color: var(--eve-ink);
}

.band-evening h2,
.band-evening h3 {
  color: var(--eve-ink);
}

.band-evening p,
.band-evening .section__head p {
  color: var(--eve-ink-soft);
}

.band-evening :focus-visible {
  outline-color: var(--eve-ink);
}

.promises {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-7);
}

.promises li {
  padding-left: var(--s-5);
  border-left: 2px solid var(--lavender);
}

.promises b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: var(--s-2);
}

/* 16px rather than 15px: this is the one block of body copy that sits directly on a
   gradient, where a light face on a dark ground reads thinner than the ratio suggests. */
.promises p {
  font-size: 1rem;
}

.link-lav {
  color: var(--lavender-text); /* 5.82:1 on the palest evening stop */
  font-weight: 700;
  text-underline-offset: 0.25em;
}

/* ---------- footer ---------- */

.site-foot {
  background: var(--cream);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-7);
}

.foot-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: start;
}

.foot-grid img {
  width: 10rem;
}

.site-foot h2 {
  font-size: 0.75rem;
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

.foot-links li + li {
  margin-top: var(--s-2);
}

.foot-links a,
.foot-note a {
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.foot-note {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  max-width: 46rem;
}

.foot-note p + p {
  margin-top: var(--s-2);
}

/* ---------- the policy page ---------- */

/* The policy sits on a cream card over the sky: it is a long read, and a long read wants a
   settled ground under it. The heading block stays on the sky so the page still belongs to
   the site it came from. */
.doc {
  padding-block: clamp(var(--s-6), 6vw, var(--s-8)) clamp(var(--s-7), 7vw, var(--s-9));
}

.doc-head {
  max-width: 46rem;
  margin-bottom: clamp(var(--s-6), 5vw, var(--s-7));
}

.doc article {
  background: var(--cream);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-5), 5vw, var(--s-7));
  margin-inline: auto;
}

.doc-head p {
  margin-top: var(--s-4);
  color: var(--ink-soft);
}

.draft-flag {
  display: block;
  max-width: 46rem;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  color: var(--ink);
}

.doc article {
  max-width: 50rem;
}

.doc h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.doc h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-6);
}

.doc h3 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}

.doc p,
.doc li {
  max-width: 44rem;
}

.doc p + p,
.doc p + ul,
.doc ul + p {
  margin-top: var(--s-4);
}

.doc ul {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.doc ul li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--ink-soft);
}

.doc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--coral);
}

.doc ul li {
  font-size: 1rem;
}

.doc ul li b {
  color: var(--ink);
}

.doc .toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.doc .toc li {
  padding: 0;
}

.doc .toc li::before {
  display: none;
}

.doc .toc a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.doc .toc a:hover {
  background: var(--paper);
}

/* ---------- responsive ---------- */

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }

  .step {
    padding-left: 0;
    padding-top: 4rem;
  }

  .step::after {
    left: 3.25rem;
    right: -1.5rem;
    top: 1.3125rem;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed rgba(43, 36, 64, 0.6);
  }

  .features {
    grid-template-columns: repeat(6, 1fr);
  }

  .feature--lead {
    grid-column: span 6;
  }

  .feature--half {
    grid-column: span 3;
  }

  .feature--third {
    grid-column: span 2;
  }

  .who {
    grid-template-columns: repeat(2, 1fr);
  }

  .promises {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-6);
  }
}

@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: var(--s-8);
    align-items: center;
  }

  .daycard {
    margin-left: auto;
  }

  .who {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}