/*
 * Social Patch website styles.
 *
 * Color tokens mirror the mobile app theme (packages/mobile/global.css)
 * plus the brand colors from the mark refresh (assets/img/logo.svg):
 *   --brand-cyan-deep   #0090CF  (the mark's patch fill; 3.6:1 on white and
 *                                 4.2:1 on the dark page, so safe as a
 *                                 graphic on either ground: decorative
 *                                 accents in both themes)
 *   --brand-indigo-deep #1E2166  (the mark's hairline, peel and slot)
 *   --brand-cyan-soft   #79C9F5  (dark-theme links and buttons)
 *   --brand-indigo      #2E3192  (light-theme links and buttons)
 *
 * The mark itself never changes with the theme. Soft cyan keeps the brand
 * hue at two-thirds the chroma (OKLCH 0.80 0.10 234), because fully
 * saturated cyan (the retired #00AEEF) vibrates against a dark ground. It
 * fails on white (1.8:1), so light mode keeps indigo.
 */

/*
 * Every theme color is a light-dark() pair, so the two themes sit side by
 * side and can't drift apart. color-scheme picks the half: the reader's
 * system setting by default, or one theme when the footer's picker has set
 * data-theme on <html>. A browser older than light-dark() (mid-2024) falls
 * back to plain black on white.
 */
:root {
  --brand-cyan-soft: #79c9f5;
  --brand-cyan-deep: #0090cf;
  --brand-indigo: #2e3192;
  --brand-indigo-deep: #1e2166;

  /*
   * Light is the app's light theme, with the ring darkened from its #D4D4D4
   * because the secondary button's only edge needs 3:1. Muted text is
   * #525252, which passes AA on the bands as well as the page.
   *
   * Dark is dimmed for reading, and the app's dark theme matches it.
   * #FAFAFA on #0A0A0A (19:1) glares across a page of paragraphs, and
   * near-black reads as a void around them, so the page sits on #262626
   * under #E6E6E6 text: 12:1, still past AAA. Full-width bands (hero, page
   * header, footer) step up no further than light mode's do, so the page
   * never stripes. Cards and callouts, like the app's tiles, stand out by
   * fill and border both: #383838 inside #4A4A4A. In light, cards stay
   * white on white, edged by the border.
   */
  --background: light-dark(#ffffff, #262626);
  --foreground: light-dark(#0a0a0a, #e6e6e6);
  --card: light-dark(#ffffff, #383838);
  --band: light-dark(#f5f5f5, #2c2c2c);
  --secondary: light-dark(#f5f5f5, #383838);
  --muted-foreground: light-dark(#525252, #b4b4b4);
  --border: light-dark(#e5e5e5, #4a4a4a);
  --ring: light-dark(#878787, #808080);
  --accent: light-dark(#f7f7f7, #464646);
  --accent-foreground: light-dark(#343434, #e6e6e6);

  --link: light-dark(var(--brand-indigo), var(--brand-cyan-soft));
  --cta-bg: light-dark(var(--brand-indigo), var(--brand-cyan-soft));
  --cta-fg: light-dark(#ffffff, #0a0a0a);
  --accent-pop: var(--brand-cyan-deep);

  color-scheme: light dark;
}

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

/*
 * The dimming above is for comfort, and some readers need the opposite.
 * "Increase contrast" (macOS, iOS, Windows) gets the strongest text and
 * edges each theme can give.
 */
@media (prefers-contrast: more) {
  :root {
    --background: light-dark(#ffffff, #0a0a0a);
    --foreground: light-dark(#000000, #ffffff);
    --muted-foreground: light-dark(#262626, #d4d4d4);
    --accent-foreground: light-dark(#171717, #fafafa);
    --border: light-dark(#878787, #787878);
  }
}

/* ---------- Reset & base ---------- */

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

/* `hidden` beats any class's display, so a control the markup hides until a
   script makes it work (the loops' pause button) stays hidden without one. */
[hidden] {
  display: none !important;
}

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

/* A desk screen sits twice as far away as a phone, so from 1024px up the
   whole type scale steps up a sixteenth: body text reads at 18px. Percent,
   not px, so a reader's own browser text size still scales it. */
@media (min-width: 64rem) {
  html {
    font-size: 106.25%;
  }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--foreground);
  background: var(--background);
}

/* macOS renders light-on-dark text heavier than dark-on-light; this evens
   the stroke weight out so dark-mode paragraphs don't bloom. Not under
   "Increase contrast", where the heavier stroke is the point. Font
   smoothing isn't a color, so it can't ride light-dark(): one rule for a
   chosen dark theme, one for the system's. */
@media (prefers-contrast: no-preference) {
  :root[data-theme='dark'] body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  text-wrap: balance;
  margin: 2rem 0 0.75rem;
}

h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  margin-top: 0;
}

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

h3 {
  font-size: 1.2rem;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

p {
  text-wrap: pretty; /* no one-word last lines */
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

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

.container {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus-visible {
  top: 0;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--foreground);
  font-weight: 700;
  font-size: 1.15rem;
}

.brand__logo {
  flex: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.35rem 0.15rem;
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--accent-pop);
}

.site-nav a[aria-current='page'] {
  border-bottom-color: var(--link);
  font-weight: 700;
}

/* ---------- Hero ---------- */

.hero {
  background: var(--band);
  border-bottom: 1px solid var(--border);
}

.hero__inner {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
  align-items: center;
}

@media (min-width: 50rem) {
  .hero__inner {
    grid-template-columns: 3fr 2fr;
  }
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero__lead {
  font-size: 1.2rem;
  max-width: 30em;
  color: var(--accent-foreground);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* The 9:16 promo in the hero: a little wider than the screenshot it replaced, so its captions read. */
.hero__video {
  display: block;
  width: 100%;
  max-width: min(100%, 22rem);
  height: auto;
  margin-inline: auto;
  border-radius: 1.25rem;
  /* The video's own background, so the slot doesn't flash before the poster loads. */
  background: var(--brand-indigo-deep);
}

.hero__video-caption {
  margin-top: 0.75rem;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.95rem;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 0.6rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
}

.button--primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
}

.button--primary:hover {
  filter: brightness(1.12);
}

.button--secondary {
  background: transparent;
  color: var(--foreground);
  border-color: var(--ring);
}

.button--secondary:hover {
  border-color: var(--link);
}

.button--small {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}

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

.page-header {
  background: var(--band);
  border-bottom: 1px solid var(--border);
  padding-block: 2.5rem;
}

.page-header .lede {
  font-size: 1.2rem;
  color: var(--accent-foreground);
  max-width: 30em;
  margin-bottom: 0;
}

/* ---------- Prose ---------- */

.prose {
  max-width: 46em;
  padding-block: 2.5rem 3.5rem;
}

.prose--home {
  max-width: none;
}

/* Keep running text to a readable measure, about 70 characters a line,
   even where the column is wider for cards and screenshots. Class-less
   lists are the ones Markdown wrote. */
.prose :is(p, ol, ul:not([class]), blockquote) {
  max-width: 50ch;
}

/* The browser's 40px list indent costs a phone a fifth of its line, worst
   inside a callout's padding. Items run to several lines, so they get the
   gap a paragraph would. */
.prose :is(ol, ul:not([class])) {
  padding-inline-start: 1.5em;
}

.prose :is(ol, ul:not([class])) > li + li {
  margin-top: 0.5em;
}

.prose h2 {
  padding-top: 0.5rem;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.85rem 1.25rem;
  border-inline-start: 4px solid var(--accent-pop);
  background: var(--accent);
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  vertical-align: top;
}

.prose th {
  background: var(--secondary);
}

.table-scroll {
  overflow-x: auto;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  gap: 1.25rem;
  padding: 0;
  margin: 1.5rem 0 2rem;
  list-style: none;
  /* Two across at most: three left ~32 characters a line and an orphan card. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.card {
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-pop);
  border-radius: 0.75rem;
  background: var(--card);
  padding: 1.25rem 1.25rem 1rem;
}

.card h3 {
  margin-top: 0;
}

.card p:last-child {
  margin-bottom: 0;
}

/* ---------- Screenshots ---------- */

/* Short silent loops cut from the promo's footage (docs/store-media-plan.md),
   each set with the text it shows: How it works' steps and Progress, and two
   sections of Home. On phones a loop sits under its text; on wider screens it
   stands beside it, so the text keeps its 50ch measure and the column next to
   it isn't left empty. */
.screen-loop {
  margin: 0 0 1rem;
  width: min(100%, 13rem);
}

.screen-loop video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--band);
}

.prose ol:has(.screen-loop) {
  max-width: none;
}

.screen-loop .button {
  display: block;
  margin: 0.6rem auto 0;
}

@media (min-width: 50rem) {
  /* Up to three blocks of text in the first column. The loop spans every
     row, and the last row is flexible, so its height lands there rather than
     opening gaps between the paragraphs. */
  .with-loop {
    display: grid;
    grid-template-columns: minmax(0, 50ch) minmax(11rem, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  .with-loop > :not(.screen-loop) {
    grid-column: 1;
  }

  .with-loop > .screen-loop {
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: end;
    width: 11rem;
    margin-top: 0.25rem;
  }

  .prose--home .with-loop > .screen-loop {
    justify-self: center;
    width: 12rem;
  }

  .prose li:has(> .screen-loop) {
    position: relative;
    min-height: 27rem; /* the video's height and a gap, so the next step clears it */
    padding-right: 13rem;
  }

  li > .screen-loop {
    position: absolute;
    top: 0.25rem;
    right: 0;
    width: 11rem;
    margin: 0;
  }
}

.loops-control {
  margin-bottom: 1.5rem;
}

/* ---------- Media placeholders ---------- */

.media-placeholder {
  margin: 1.75rem 0;
  border: 2px dashed var(--ring);
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--muted-foreground);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}

.media-placeholder--wide {
  aspect-ratio: 16 / 9;
}

.media-placeholder--tall {
  aspect-ratio: 9 / 14;
  max-width: 20rem;
  margin-inline: auto;
}

.media-placeholder--square {
  aspect-ratio: 1;
  max-width: 24rem;
}

.media-placeholder__label {
  font-weight: 600;
  color: var(--accent-foreground);
  margin: 0.5rem 0 0.25rem;
  max-width: 26em;
}

.media-placeholder__hint {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Brand page ---------- */

.brand-tiles {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.5rem 0 2rem;
}

.brand-tiles--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.brand-tile {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.brand-tile__stage {
  display: grid;
  place-items: center;
  padding: 2.25rem 1rem;
  background: #ffffff;
}

.brand-tile__stage--dark {
  background: #0a0a0a;
}

.brand-tile__stage--muted {
  background: var(--secondary);
  color: var(--foreground);
}

.brand-tile figcaption {
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: Outfit, 'Avenir Next', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.brand-lockup--stacked {
  flex-direction: column;
  gap: 0.8rem;
  font-size: 1.3rem;
}

.swatch-list {
  display: grid;
  gap: 0.75rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  padding: 0;
  margin: 1.5rem 0 2rem;
  list-style: none;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

.swatch__chip {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

/* The site palette's two faces. Each pins color-scheme, so everything inside
   draws from the live light-dark() tokens whatever the page's own theme. */
.faces {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 1.5rem 0;
}

.face {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--background);
  color: var(--foreground);
}

.face figcaption {
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.face__sample {
  margin-bottom: 0.75rem;
  padding: 1rem;
  border-radius: 0.6rem;
  background: var(--band);
}

.face__sample p {
  margin: 0 0 0.4rem;
}

.face__muted {
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.face__roles {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.face__roles li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.35rem;
}

.face__chip {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--ring); /* the page and band chips have no other edge */
  border-radius: 0.4rem;
}

.face__value {
  font-variant-numeric: tabular-nums;
}

/* ---------- Callouts ---------- */

.callout {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  width: fit-content; /* hug the text measure rather than leave a blank third */
}

.callout--brand {
  width: auto; /* the call to action stays a full-width band */
  background: var(--brand-indigo);
  color: #ffffff;
  border: 0;
}

.callout--brand h2,
.callout--brand h3 {
  color: #ffffff;
  margin-top: 0;
}

.callout--brand a {
  color: #ffffff;
  font-weight: 600;
}

.callout--brand .button--primary {
  background: #ffffff;
  color: var(--brand-indigo);
}

.callout--brand :focus-visible {
  outline-color: #ffffff; /* the indigo ring would vanish on the indigo panel */
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--band);
  padding-block: 2.5rem 1.5rem;
  font-size: 0.95rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.site-footer__tagline {
  max-width: 30em;
  color: var(--muted-foreground);
}

/* A native select, so keyboards, screen readers and the phone's own picker
   all work as they do everywhere else. No display rule here: the script
   that makes it work is what removes its hidden attribute. */
.theme-picker select {
  margin-inline-start: 0.4rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  color: inherit;
  background: var(--background);
  border: 1px solid var(--ring);
  border-radius: 0.4rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  color: var(--foreground);
}

.site-footer__legal {
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin: 0;
}