/* Kyha shared styles: design tokens + the pieces every new-design page
   uses (buttons, section titles, scroll fade, article cards, footer).
   Loaded after style.css (reset, Poppins, the base palette) and before a
   page's own stylesheet (landing-v3.css, learn.css). Everything visual
   comes from the tokens below, which mirror the Figma file
   (8LQGxmCkwnPhnmgp993UOD):

   1. Palette: raw colors (primitives). Only the semantic layer uses them.
   2. Semantic colors: named after the Figma variables, e.g.
      "Text & Content/Brand" → --text-brand, "Background/Primary" →
      --background-primary. Components use these.
   3. Text styles: one .type-* class per Figma text style (H1, H2, H3, Body,
      Body Bold, Eyebrow, Caption, Pullout), set on the element in the HTML the way
      a text layer gets a style in Figma. Components only add color/layout.
   4. Spacing + radius scale.

   Pages that use these put class="v3" on <body>.
   Breakpoints can't be variables in media queries: 767px (phone → wide)
   and 960px (two-column layouts). */

/* ── 1. PALETTE ──
   style.css already defines --evernight-500, --mint-500 (Figma "Mint Glow/
   500"), --sand-300/500, --onyx-500/600, --twilight-500 and --white. */
:root {
  --onyx-900: #111110;
  --onyx-800: #1a1a18;
  --onyx-400: #6c6c6a;
  --onyx-100: #ebebeb; /* Figma only exposes it as Background/Surface 2 */
  --sand-200: #f9f5ee;
  --sand-600: #e2dac9;
  --sand-700: #bbb5a7;
  --sand-800: #959085;
  --mint-100: #f1fcec; /* Figma "Mint Glow/100" */
  --lavender-200: #dddcf0; /* Figma spells it "Lavendar" */
  --lavender-600: #a5a2ce;
  --rose-500: #b5585e;
}

/* ── 2. SEMANTIC COLORS (Figma variables) ── */
:root {
  /* Text & Content/… */
  --text-brand: var(--evernight-500);
  --text-dark: var(--onyx-500);
  --text-medium: var(--onyx-400);
  --text-light: var(--white);
  --text-mint: #e0f9d4; /* Figma exposes no palette step for this one */
  --text-ovulation: var(--twilight-500);
  --text-soft: var(--sand-500);
  --text-medium-light: #ababaa; /* no palette step in Figma */

  /* Background/… */
  --background-surface: var(--white);
  --background-surface-2: var(--onyx-100);
  --background-secondary: var(--white);
  --background-light: var(--sand-300);
  --background-primary: var(--sand-500);
  --background-brand: var(--evernight-500);
  --background-medium: var(--onyx-500);
  --background-dark: var(--onyx-600);
  --background-medium-dark: var(--onyx-800);
  --background-darkest: var(--onyx-900);
  --background-mint: var(--mint-500);

  /* Actions/…, Strokes/…, Status/… */
  --actions-primary-normal: var(--evernight-500);
  --actions-tertiary-normal: var(--mint-500);
  --strokes-dark: var(--onyx-500);
  --strokes-medium: var(--sand-700);
  --strokes-medium-dark: var(--text-medium-light);
  --strokes-graph: #9dbf8d; /* the stage graph's dashed lines; a raw fill in Figma, no variable */
  --status-error: var(--rose-500);
}

/* ── 4. SPACING, RADIUS, SHADOW, MOTION ──
   No spacing variables in Figma yet, so the scale is named by size. One-off
   nudges that line things up with a Figma frame stay literal, commented. */
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --page-gutter: var(--space-32);

  --radius-8: 8px;
  --radius-16: 16px;
  --radius-pill: 100px;

  --shadow-soft: 0 0 11px rgba(0, 0, 0, 0.07); /* phone hero copy card */
  --shadow-faint: 0 0 7px rgba(0, 0, 0, 0.04); /* stage chip */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 3. TEXT STYLES (Figma text styles) ──
   Figma's letter spacing "1" is 1% = 0.01em. Headings have two "modes",
   like Figma variable modes: Mobile sizes (taken from the phone frame) by
   default, Desktop sizes (the Figma text styles) from 767px. Only these
   variables change between modes; the classes below never do.
   Body, Body Bold, Eyebrow and Caption are the same on every screen, and
   are set 1–2px larger than the Figma styles (13/11/10) for readability
   (decided 11/1: Body 15/24, Eyebrow 12/21, Caption 12/18). */
:root {
  /* Mobile */
  --type-h1-size: 27px;
  --type-h1-line: 36px;
  --type-h2-size: 23px;
  --type-h2-line: 36px;
  --type-lead-size: 17px;
  --type-lead-line: 24px;
}

@media (min-width: 767px) {
  :root {
    /* Desktop */
    --type-h1-size: 33px;
    --type-h1-line: 42px;
    --type-h2-size: 29px;
    --type-h2-line: 42px;
    --type-lead-size: 20px;
    --type-lead-line: 27px;
  }
}

.type-h1,
.type-lead,
.type-h2,
.type-h3,
.type-body,
.type-body-bold,
.type-eyebrow,
.type-caption {
  font-family: var(--font-body);
}

.type-h1 {
  font-size: var(--type-h1-size);
  font-weight: 400;
  line-height: var(--type-h1-line);
  letter-spacing: 0;
}

.type-h2 {
  font-size: var(--type-h2-size);
  font-weight: 400;
  line-height: var(--type-h2-line);
  letter-spacing: 0;
}

/* Not a Figma style yet: the intro line under a headline (hero subhead) */
.type-lead {
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
  letter-spacing: 0;
}

/* Figma "Pullout" (FAQ questions + answers) */
.type-pullout {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0.01em;
}

.type-h3 {
  font-size: 28px;
  font-weight: 300;
  line-height: 34px;
  letter-spacing: 0;
}

.type-body,
.type-body-bold {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.01em;
}

.type-body-bold {
  font-weight: 500;
}

.type-eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.type-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
}

/* ── PAGE ── */
.v3 {
  background: var(--background-light);
  /* Thinner, Figma-like text rendering on macOS; without it, light text on
     the dark hero looks a weight heavier */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* style.css gives every p a bottom margin; spacing here comes from gaps */
.v3-hero-copy p,
.v3 main p {
  margin-bottom: 0;
}

.v3 main ul {
  list-style: none;
}

/* Same content width as Figma: 836px of content inside the gutters */
.v3-container {
  width: 100%;
  max-width: calc(836px + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ── BUTTONS ── */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.v3-btn:hover {
  opacity: 0.9;
}

/* Small pill: nav + unlock (Body Bold) */
.v3-btn-sm {
  gap: 10px;
  padding: var(--space-8) var(--space-16);
}

/* Big CTA: no Figma text style (Medium 14/22, uppercase, 3%) */
.v3-btn-cta {
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.v3-btn-dark {
  background: var(--background-medium-dark);
  color: var(--text-light);
}

.v3-btn-brand {
  background: var(--background-brand);
  color: var(--text-light);
}

.v3-btn-light {
  background: var(--background-surface);
  color: var(--text-brand);
}

/* Outline button (Background/Light, 1px Strokes/Dark, Text/Dark). The
   stroke is inside the button, as in Figma, so it's the same height as
   the filled ones. */
.v3-btn-outline {
  background: var(--background-light);
  box-shadow: inset 0 0 0 1px var(--strokes-dark);
  color: var(--text-dark);
}

.v3-btn img {
  display: block;
  flex: none;
}


/* ── SCROLL FADE ──
   Cards ease up into place as they scroll in (web.js adds .visible). Each
   card animates on its own as it arrives; where cards sit side by side,
   the section staggers them with --fade-delay (set per card in the HTML)
   only at the widths where they share a row. */
.v3 .fade-in-on-scroll {
  transform: translateY(var(--space-24));
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.v3 .fade-in-on-scroll.visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .v3 .fade-in-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── SECTION TITLE ── */
.v3-section-title {
  color: var(--text-dark);
  text-align: center;
  text-wrap: balance;
}


/* ── LEARN ──
   Article cards on a full-width sand band: the photo fills the card, a
   frosted white label sits at the bottom. Filled in by the script in
   index.html from /learn/latest.json. */
.v3-learn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-40) 0;
  background: var(--background-primary);
}

.v3-learn[hidden] {
  display: none;
}

.v3-learn .v3-section-title {
  padding: 0 var(--space-24);
}

/* Phones: one row you swipe, each card most of the screen wide, with
   the next one peeking in */
.v3-learn-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 280px);
  gap: var(--space-16);
  width: 100%;
  padding: 0 var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--space-24);
  scrollbar-width: none;
}

.v3-learn-list::-webkit-scrollbar {
  display: none;
}

.v3-learn-card {
  scroll-snap-align: start;
}

.v3-learn-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 326px;
  padding: var(--space-24) var(--space-16) var(--space-32);
  border-radius: var(--radius-16);
  overflow: hidden;
  /* shows when an article has no photo */
  background: var(--background-brand);
  text-decoration: none;
}

.v3-learn-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.v3-learn-card a:hover img {
  transform: scale(1.04);
}

.v3-learn-card a:focus-visible {
  outline: 2px solid var(--actions-primary-normal);
  outline-offset: 3px;
}

.v3-learn-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--background-surface) 90%, transparent);
  text-align: center;
}

.v3-learn-text .type-pullout {
  color: var(--text-dark);
}

.v3-learn-text .type-caption {
  color: var(--text-brand);
}

@media (prefers-reduced-motion: reduce) {
  .v3-learn-card img {
    transition: none;
  }
}

@media (min-width: 767px) {
  .v3-learn-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    max-width: calc(960px + 2 * var(--page-gutter));
    padding: 0 var(--page-gutter);
    overflow: visible;
  }
}

@media (min-width: 960px) {
  .v3-learn-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── FOOTER ──
   Dark band: logo + email sign-up, three link columns, a rule, then the
   disclaimer and legal links. Phones: everything stacks. 960px+ (Figma
   1280): one row, 48px between groups. */
.v3 {
  scroll-behavior: smooth;
}

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

.v3-footer {
  padding: var(--space-40) var(--space-24);
  background: var(--background-medium);
  color: var(--text-light);
}

.v3-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: 960px;
  margin: 0 auto;
}

.v3-footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-bottom: var(--space-32);
  border-bottom: 0.5px solid var(--strokes-medium-dark);
}

.v3-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.v3-footer-brand > img {
  display: block;
}

/* Sign-up, then the store badges (on phones web.js shows only the
   visitor's platform, as in the store lockup) */
.v3-footer-get {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.v3-footer-badges {
  display: flex;
  gap: var(--space-16);
}

.v3-footer-badges img {
  display: block;
}

.v3-footer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
}

.v3-footer-form label {
  color: var(--text-soft);
}

.v3-footer-field {
  display: flex;
  gap: var(--space-8);
}

.v3-footer-field input {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--background-surface);
  color: var(--text-dark);
}

.v3-footer-field input::placeholder {
  color: var(--text-medium-light);
}

.v3-footer-field button {
  flex: none;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--background-mint);
  color: var(--text-brand);
  cursor: pointer;
}

.v3-footer-field input:focus-visible,
.v3-footer-field button:focus-visible,
.v3-footer a:focus-visible {
  outline: 2px solid var(--actions-tertiary-normal);
  outline-offset: 2px;
}

.v3-footer .signup-success {
  color: var(--text-soft);
}

.v3-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32) var(--space-48);
}

.v3-footer-links h2 {
  margin: 0 0 var(--space-16);
  color: var(--text-soft);
}

.v3-footer-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-footer-links a {
  color: var(--text-light);
  text-decoration: none;
}

.v3-footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v3-footer .v3-footer-social {
  flex-direction: row;
  gap: var(--space-8);
}

.v3-footer-social img {
  display: block;
}

.v3-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--text-medium-light);
}

.v3-footer-bottom p {
  font-size: inherit;
  line-height: inherit;
}

.v3-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.v3-footer-legal a {
  color: inherit;
  text-decoration: none;
}

.v3-footer-legal a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 767px) {
  .v3-footer {
    padding: var(--space-40) var(--page-gutter);
  }
}

@media (min-width: 960px) {
  .v3-footer-top {
    flex-direction: row;
    gap: var(--space-48);
  }

  .v3-footer-brand {
    justify-content: space-between;
    gap: var(--space-24);
  }

  .v3-footer-field input {
    flex: none;
    width: 289px;
  }

  .v3-footer-links {
    flex-wrap: nowrap;
  }

  .v3-footer-links > div {
    flex: none;
    white-space: nowrap;
  }

  .v3-footer-bottom {
    flex-direction: row;
    gap: var(--space-32);
  }

  .v3-footer-bottom p:first-child {
    flex: 1;
  }

  .v3-footer-legal {
    flex: none;
  }
}