/* Care website.
 *
 * EVERY VALUE HERE RESOLVES TO A DESIGN SYSTEM TOKEN unless it is a web-scale
 * measurement the mobile system has no opinion about — a reading column width,
 * a breakpoint, a page gutter. Those are recorded in COMPONENTS.md with their
 * reasoning, the same way the design folder recorded them.
 *
 * NO FRAMEWORK, NO RUNTIME, NO BUILD. The pages are plain HTML and the text is
 * in the source. A privacy policy that needs JavaScript to appear is one that
 * can fail to appear, and it is the document somebody is most entitled to read.
 *
 * RESPONSIVE IS CSS, NOT STATE. The design switched desktop and mobile with a
 * ResizeObserver feeding React state. Here it is one media query at 900px, so
 * the layout is correct in the first frame and correct with scripting off.
 */

/* ---------------------------------------------------------------- reset */

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

html {
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--text-tertiary) transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
}

/* The native bar is too chunky for a document. Ash thumb, no transition —
   the system has no entrance animations and this is not an exception. */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Keyboard focus has to be visible. The mobile system never needed this
   because a phone has no tab key; a website does. Coral, at the focus border
   width the system already defines. */
:focus-visible {
  outline: var(--border-width-focus) solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- layout */

/* ONE PAGE GUTTER. Header, hero and every reading column align to the same
   left and right edge. 40px at the desktop frame, 20px on a phone. */
:root {
  --gutter: clamp(20px, 2.315vw, 40px);
  --content-max: 1648px;
  --measure: 680px;
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

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

.masthead {
  flex-shrink: 0;
  height: clamp(76px, 5.903vw, 102px);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  position: relative;
  z-index: 30;
}

/* No hairline beneath. System rule. */
.masthead__home {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}

.masthead__mark {
  display: block;
  width: clamp(62px, 4.745vw, 82px);
  height: auto;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.852vw, 32px);
  flex-shrink: 0;
}

/* UI metrics, not reading metrics: control labels carry zero tracking. */
.masthead__link {
  font-size: var(--text-ui-lg);
  line-height: var(--leading-ui-lg);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

/* Hover IS the pressed state. Nothing moves, nothing scales. */
.masthead__link:hover {
  color: var(--text-primary);
}

.masthead__link[aria-current="page"] {
  color: var(--text-primary);
}

/* ---------------------------------------------------------- mobile menu */

/* A CHECKBOX, NOT A SCRIPT. The menu is the only interactive thing on the
   whole site, and driving it from :checked means it still opens when
   scripting is off or has not finished loading. */
/* Visually gone, still in the tab order. NOT `display:none` and NOT
   `visibility:hidden` — either would take it out of the tab order and leave the
   menu openable by mouse only. */
.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The focus ring has to appear on the thing you can SEE, since the control
   itself is a pixel wide. */
.menu-toggle:focus-visible + .masthead .menu-button {
  outline: var(--border-width-focus) solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
  color: var(--icon-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-button svg {
  display: block;
}

.menu-button .icon-close,
.menu-toggle:checked ~ .masthead .menu-button .icon-menu {
  display: none;
}

.menu-toggle:checked ~ .masthead .menu-button .icon-close {
  display: block;
}

.menu-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(76px, 5.903vw, 102px);
  bottom: 0;
  z-index: 20;
  background: var(--surface-page);
  flex-direction: column;
  padding: 8px var(--gutter) var(--gutter);
}

.menu-toggle:checked ~ .menu-panel {
  display: flex;
}

/* Rows, per the system's settings-row rule: hairline BETWEEN rows, none
   under the last. */
.menu-panel a {
  display: flex;
  align-items: center;
  height: 60px;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--weight-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: var(--border-width-hairline) solid var(--border-hairline);
}

.menu-panel a:last-child {
  border-bottom: 0;
}

.menu-panel a:hover {
  background: var(--surface-muted);
}

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

/* `container-type` so the store cards size against the BANNER rather than the
   viewport — the design's own arithmetic, and the reason the composition holds
   at any window width. */
.hero {
  position: relative;
  flex: 1 1 auto;
  margin: 32px auto 0;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--content-max);
  min-height: 40.170vw;
  max-height: 53.398vw;
  border-radius: clamp(16px, 1.389vw, 23px);
  overflow: hidden;
  container-type: inline-size;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The system's "never a hard rectangular photo edge" rule, applied to a web
   hero: the fade protects the type. Not a scrim, not a capsule. */
.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 47.13%;
  background: linear-gradient(180deg, transparent 0%, var(--white) 41.67%);
}

.hero__copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.87%;
  width: min(52vw, 860px);
  padding: 0 clamp(20px, 3vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.971vw, 16px);
}

.hero__title {
  margin: 0;
  align-self: stretch;
  font-size: clamp(28px, 2.913vw, 48px);
  font-weight: var(--weight-heading-sm);
  line-height: 1;
  letter-spacing: var(--tracking-heading-lg);
  color: var(--text-primary);
  text-align: center;
  text-wrap: balance;
}

/* Satoshi ships no 300, so the file's Light renders as Regular. Recorded
   rather than silently approximated. */
.hero__supporting {
  margin: 0;
  align-self: stretch;
  font-size: clamp(15px, 1.456vw, 24px);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: var(--tracking-subheading);
  color: var(--text-secondary);
  text-align: center;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- store cards */

/* 152 x 200 at the 1648 frame, in the banner's own corners. White card,
   coral label, QR beneath. Desktop only — a QR is useless on the phone that
   would scan it. */
.store-card {
  position: absolute;
  bottom: 4.834%;
  width: 9.223cqw;
  height: 12.136cqw;
  padding: 0.971cqw;
  border-radius: clamp(16px, 1.389cqw, 23px);
  background: var(--card-bg);
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.971cqw;
  overflow: hidden;
}

.store-card--android {
  left: 2.670cqw;
}

.store-card--ios {
  right: 2.670cqw;
}

.store-card__label {
  font-size: 1.456cqw;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-heading-lg);
  color: var(--accent-primary);
  white-space: nowrap;
}

.store-card img {
  display: block;
  width: 7.282cqw;
  height: 7.282cqw;
}

/* --------------------------------------------------------- store buttons */

/* The home page is the only one that fills the viewport: the hero takes
   whatever height is left below the header and above whatever follows. */
.home {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* MOBILE ONLY. The QR cards carry this on desktop. */
.stores {
  display: none;
}

/* PRIMARY CARBON, BOTH. iOS and Android are equal choices; a secondary
   variant on one would read as a preference.
 *
 * THE LABEL IS REGULAR, NOT MEDIUM, and that is the system speaking rather
 * than a preference. `Button.tsx` sets `plainTextBold: false` on the primary
 * variant and `true` only on secondary — so a primary label is Satoshi
 * Regular. The design had these at 500 and read heavy because of it. */
.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-button);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-size: var(--text-ui-lg);
  line-height: var(--leading-ui-lg);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  text-decoration: none;
  /* A button label never wraps and never becomes two lines. */
  white-space: nowrap;
}

/* Hover reads as pressed — the token, not an opacity guess. */
a.button-primary:hover {
  background: var(--button-primary-bg-pressed);
}

.button-primary svg {
  flex-shrink: 0;
}

/* THE MARK SITS LEFT, THE LABEL STAYS CENTRED IN THE BUTTON. A flex row would
   centre the PAIR, which pushes the label off-centre by half the icon. The
   mark is taken out of flow and the label centres against the whole button,
   which is what Mazin asked for and what the app's own icon buttons do. */
.button-primary .mark {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.button-primary:has(.mark) {
  position: relative;
}

.button-primary__label {
  display: block;
}

/* ------------------------------------------------------------- documents */

.doc {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 64px) var(--gutter) clamp(48px, 6vw, 96px);
}

/* Regular 400 per the reading scale — a document title is read, not shouted. */
.doc__title {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 45px);
  line-height: var(--leading-heading-lg);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--text-primary);
  text-wrap: balance;
}

.doc__stamp {
  margin: 8px 0 0;
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  color: var(--text-tertiary);
}

/* The one thing on the page that must be read, so it is set apart. */
.doc__lead {
  margin: 28px 0 0;
  padding: 20px;
  border: var(--border-width-hairline) solid var(--border-hairline);
  border-radius: var(--radius-card);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--text-primary);
}

/* The hairline does the scanning work a contents rail would. The whole
   document is ~540 words, so a rail would be navigation for a page shorter
   than the rail. */
.doc__section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: var(--border-width-hairline) solid var(--border-hairline);
}

.doc__section h2 {
  margin: 0 0 12px;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--weight-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--text-primary);
}

/* 1.65, not the mobile 1.4: a 680px measure at 17px needs more leading than
   a phone column does. */
.doc__section p,
.doc__body {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: 1.65;
  letter-spacing: var(--tracking-body-lg);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* `:not(.button-primary)` IS THE WHOLE POINT OF THIS SELECTOR.
 *
 * Written as a bare `.doc a` first, which is 0,1,1 against `.button-primary`'s
 * 0,1,0 — so it repainted the Write to support button's label AND its icon
 * coral on a carbon ground. The button stopped looking like the system's
 * button while every rule that builds it was still correct: one selector
 * reaching further than it meant to. */
.doc a:not(.button-primary) {
  color: var(--accent-primary);
  text-decoration: none;
}

.doc a:not(.button-primary):hover {
  opacity: 0.6;
}

/* ------------------------------------------------------------ cross link */

.crosslink {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding: 16px 19px;
  border: var(--border-width-hairline) solid var(--border-hairline);
  border-radius: var(--radius-card);
  text-decoration: none;
}

.crosslink:hover {
  background: var(--card-bg-pressed);
}

.crosslink__label {
  flex: 1;
  min-width: 0;
}

.crosslink__eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.crosslink__name {
  display: block;
  margin-top: 2px;
  font-size: var(--text-ui-lg);
  line-height: var(--leading-ui-lg);
  letter-spacing: 0;
  color: var(--text-primary);
}

.crosslink svg {
  flex-shrink: 0;
  color: var(--list-row-chevron);
}

/* ---------------------------------------------------------- contact card */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 19px;
  background: var(--card-bg);
  border: var(--border-width-hairline) solid var(--card-border);
  border-radius: var(--radius-card);
}

.contact__label {
  display: block;
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
  font-weight: var(--weight-eyebrow);
  letter-spacing: 0;
  color: var(--text-tertiary);
}

/* `user-select: all` so one click takes the whole address. */
.contact__address {
  display: block;
  margin-top: 4px;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--weight-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--text-primary);
  user-select: all;
}

/* 44px is the system's small control height. It was the only thing overridden
   here; everything else — radius, carbon, Regular label, pressed-on-hover —
   comes from `.button-primary` unchanged, which is the point of having it. */
.contact .button-primary {
  height: 44px;
  padding: 0 19px;
  flex-shrink: 0;
}

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

/* One hairline, a line of small print, the same three links. Nothing else:
   the site is four pages and a footer that tries to be a sitemap on a
   four-page site is furniture. */
.footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 auto;
  width: 100%;
  max-width: var(--content-max);
  padding: 24px var(--gutter);
  border-top: var(--border-width-hairline) solid var(--border-hairline);
}

.footer__note {
  margin: 0;
  font-size: var(--text-ui-sm);
  line-height: var(--leading-ui-sm);
  letter-spacing: 0;
  color: var(--text-tertiary);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__link {
  font-size: var(--text-ui-sm);
  line-height: var(--leading-ui-sm);
  letter-spacing: 0;
  color: var(--text-secondary);
  text-decoration: none;
}

.footer__link:hover,
.footer__link[aria-current="page"] {
  color: var(--text-primary);
}

/* The home page fills the viewport exactly, so its footer has to sit below
   the fold rather than eat the hero. */
.home + .footer {
  margin-top: 0;
}

/* The coral address that replaces the app's "Report a problem in Settings". */
.doc__mailto {
  font-size: var(--text-body-lg);
  line-height: 1.65;
  letter-spacing: var(--tracking-body-lg);
  color: var(--accent-primary);
  text-decoration: none;
}

.doc__mailto:hover {
  opacity: 0.6;
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .masthead__nav {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  .hero {
    margin: 0 auto;
    width: calc(100% - (var(--gutter) * 2));
    max-width: 420px;
    min-height: 380px;
    max-height: 640px;
    border-radius: var(--radius-card);
  }

  /* Cropped so the father and daughter stay in frame on a portrait card. */
  .hero__photo {
    object-position: 46% 88%;
  }

  /* Deeper than desktop: portrait type needs more fade beneath it to read. */
  .hero__fade {
    height: 64%;
    background: linear-gradient(180deg, transparent 0%, var(--white) 52%);
  }

  .hero__copy {
    left: 20px;
    right: 20px;
    bottom: 18px;
    width: auto;
    transform: none;
    padding: 0;
    gap: 8px;
  }

  .hero__title {
    font-size: var(--text-large-title);
    line-height: var(--leading-large-title);
  }

  .hero__supporting {
    max-width: 340px;
    font-size: var(--text-body-lg);
  }

  /* The desktop line break is a typographic choice at 1648px and a ragged
     mess at 390px. */
  .hero__supporting br {
    display: none;
  }

  /* A QR is useless on the phone that would scan it. */
  .store-card {
    display: none;
  }

  /* Full width on a phone, which is what a 390px column wants. */
  .stores {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 20px var(--gutter) 28px;
  }
}

@media (min-width: 901px) {
  .menu-panel,
  .menu-button {
    display: none !important;
  }
}

/* Nothing on this site animates. Kept anyway, because a future addition
   should inherit the correct behaviour rather than have to remember it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}