/* =========================================================================
   Sakhi — landing + download pages.
   The app's own palette (plum-black, pink, lilac, teal, SOS red) so the
   website, the promo film and the phone all feel like the same thing.
   Fonts are self-hosted from ./fonts — nothing is fetched from a third party.
   ========================================================================= */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/sakhi/fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/sakhi/fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 800; font-display: swap; src: url("/sakhi/fonts/Barlow-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 900; font-display: swap; src: url("/sakhi/fonts/Barlow-900.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/sakhi/fonts/IBMPlexMono-500.woff2") format("woff2"); }

:root {
  --ink: #1a0f15;
  --ink-2: #211219;
  --ink-3: #2a1621;
  --line: rgba(255, 179, 209, .10);
  --line-strong: rgba(255, 179, 209, .22);
  --cream: #f6e3ec;
  --cream-dim: #d9bfcb;
  --cream-faint: #9f8390;
  --pink: #ff6fae;
  --pink-soft: #ffb3d1;
  --pink-deep: #e0457f;
  --lilac: #c9a7ff;
  --teal: #6fe3d0;
  --sos: #ff3b5c;
  --sans: "Barlow", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 22px;
  --max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; } /* width/height attributes reserve space; CSS decides the size */
a { color: inherit; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
  background:
    radial-gradient(1100px 650px at 50% -12%, #3a1028 0%, transparent 62%),
    radial-gradient(700px 500px at 92% 105%, #2b0f20 0%, transparent 60%),
    var(--ink);
  -webkit-font-smoothing: antialiased;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
header, main, footer { position: relative; z-index: 1; }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

.kicker, .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pink); margin: 0 0 10px;
}

/* ------------------------------------------------------------------ chrome */

.top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; max-width: var(--max); margin: 0 auto; padding: 22px 20px;
  font-size: 15px;
}
.top a { color: var(--cream-dim); text-decoration: none; }
.top a:hover { color: var(--cream); }
.toplinks { display: flex; gap: 20px; align-items: center; }

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

.hero {
  max-width: var(--max); margin: 0 auto; padding: 30px 20px 10px;
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: 1.15fr .85fr;
}
.hero-copy { max-width: 560px; }

.mark { width: 64px; height: 64px; margin: 0 0 18px; filter: drop-shadow(0 10px 30px rgba(255, 111, 174, .45)); }

h1 {
  font-weight: 900; text-transform: lowercase; letter-spacing: -.035em; line-height: .9;
  font-size: clamp(56px, 11vw, 112px); margin: 0 0 18px;
}
h1 .accent { color: var(--pink); }

.lede { color: var(--cream-dim); font-size: clamp(17px, 2.2vw, 20px); margin: 0 0 30px; max-width: 46ch; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-grid; gap: 1px; justify-items: center;
  padding: 15px 34px; min-width: 240px;
  border-radius: 999px; text-decoration: none; border: 0;
  font: inherit; font-weight: 800; color: #3b0020;
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--pink) 55%, var(--pink-deep) 100%);
  box-shadow: 0 18px 40px -18px rgba(255, 111, 174, .8), 0 1px 0 rgba(255, 255, 255, .35) inset;
  transition: transform .18s ease, box-shadow .3s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-label { font-size: 18px; letter-spacing: .01em; }
.btn-sub { font-size: 12.5px; font-weight: 600; opacity: .75; }

/* The download button while there is nothing to download. Not a link, not
   focusable as an action, and it says why. */
.btn[aria-disabled="true"] {
  cursor: not-allowed; color: var(--cream-dim);
  background: linear-gradient(180deg, #3a2130 0%, #26151e 100%);
  box-shadow: 0 1px 0 rgba(255, 179, 209, .10) inset, 0 0 0 1px var(--line-strong);
}
.btn[aria-disabled="true"]:hover { transform: none; }
.btn[aria-disabled="true"] .btn-label::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink); margin-right: 10px; vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(255, 111, 174, .15);
}

.btn-ghost {
  color: var(--cream-dim); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent; padding: 4px 0;
}
.btn-ghost:hover { color: var(--pink); border-bottom-color: var(--pink); }

.fineprint { margin: 22px 0 0; font-size: 14px; color: var(--cream-faint); max-width: 48ch; }

/* The promo film, framed as a phone. */
.film {
  position: relative; justify-self: center;
  width: min(330px, 80vw); aspect-ratio: 9 / 16;
  border-radius: 34px; padding: 9px;
  background: linear-gradient(165deg, #3a2130 0%, #170b12 60%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(255, 111, 174, .45);
}
.film video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #000; }
.film-cap { text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-faint); margin-top: 14px; }

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

.section { max-width: var(--max); margin: 96px auto 0; padding: 0 20px; }
.section-head { max-width: 62ch; margin: 0 0 30px; }
h2 {
  font-weight: 900; text-transform: lowercase; letter-spacing: -.025em; line-height: .98;
  font-size: clamp(34px, 5.5vw, 56px); margin: 0 0 14px;
}
h2 .accent { color: var(--pink); }
.section-head p { margin: 0; color: var(--cream-dim); }

/* Story strip: the film's frames, read left to right. */
.strip {
  display: grid; gap: 14px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.strip figure { margin: 0; scroll-snap-align: start; }
.strip img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line);
}
.strip figcaption { font-size: 14px; color: var(--cream-dim); margin-top: 10px; line-height: 1.45; }
.strip figcaption b { display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin-bottom: 2px; }

/* Four areas of the app. */
.areas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }

.card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 179, 209, .06) 0%, rgba(255, 179, 209, .015) 55%), rgba(36, 20, 29, .6);
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 179, 209, .07) inset;
}
.card h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 23px; font-weight: 800; text-transform: lowercase; letter-spacing: -.01em;
  margin: 0 0 8px;
}
.card h3 .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.card > p { margin: 0 0 14px; color: var(--cream-dim); font-size: 16px; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.card li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; color: var(--cream-dim); }
.card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.card li b { color: var(--cream); font-weight: 600; }
.card .shot { margin: 18px auto 0; width: 62%; border-radius: 16px; border: 1px solid var(--line); }

.c-cycle .dot { background: var(--pink); }
.c-well .dot { background: var(--teal); }
.c-well li::before { background: var(--teal); }
.c-personal .dot { background: var(--lilac); }
.c-personal li::before { background: var(--lilac); }
.c-safety .dot { background: var(--sos); }
.c-safety li::before { background: var(--sos); }

/* Guardian Mode, the long explanation. */
.guardian {
  display: grid; gap: 36px; align-items: start;
  grid-template-columns: .8fr 1.2fr;
}
.guardian .shot { border-radius: 22px; border: 1px solid var(--line-strong); box-shadow: 0 0 90px -30px rgba(255, 111, 174, .5); }
.flow { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.flow li {
  counter-increment: s; position: relative; padding: 18px 20px 18px 66px;
  border: 1px solid var(--line); border-radius: 18px; background: rgba(36, 20, 29, .55);
  color: var(--cream-dim); font-size: 16px;
}
.flow li::before {
  content: counter(s); position: absolute; left: 18px; top: 16px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; color: #3b0020; background: var(--pink);
}
.flow li b { color: var(--cream); }
.flow li.sos::before { background: var(--sos); color: #fff; }

.note {
  margin-top: 18px; padding: 18px 20px; border-radius: 18px;
  border: 1px dashed var(--line-strong); color: var(--cream-dim); font-size: 15px;
}
.note b { color: var(--cream); }

/* Facts row. */
.facts { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); margin: 0; padding: 0; list-style: none; }
.facts li { padding: 22px 24px; background: rgba(26, 15, 21, .85); }
.facts b { display: block; font-size: 24px; font-weight: 900; text-transform: lowercase; color: var(--pink); }
.facts span { font-size: 14.5px; color: var(--cream-dim); }

.cta-band {
  text-align: center; padding: 56px 24px; border-radius: 28px;
  background: radial-gradient(600px 300px at 50% 0%, rgba(255, 111, 174, .28) 0%, transparent 70%), var(--ink-2);
  border: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--cream-dim); margin: 0 auto 26px; max-width: 46ch; }
.cta-band .actions { justify-content: center; }

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

footer {
  max-width: var(--max); margin: 96px auto 0; padding: 26px 20px 60px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--cream-faint);
}
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--cream); }

/* ------------------------------------------------------------------ phone */

@media (max-width: 860px) {
  /* Seven frames won't fit side by side on a phone: swipe through them. */
  .strip { grid-template-columns: repeat(7, 150px); margin-right: -20px; padding-right: 20px; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 14px; }
  .guardian { grid-template-columns: 1fr; }
  .guardian .shot { max-width: 320px; margin: 0 auto; }
  .section { margin-top: 72px; }
}
@media (max-width: 560px) {
  .btn { width: 100%; min-width: 0; }
  .actions { flex-direction: column; align-items: stretch; text-align: center; }
  .top .toplinks .hide-sm { display: none; }
  .card .shot { width: 78%; }
}