/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · macrostructure: Workbench · tone: soft editorial · anchor hue: plum
 * genre: playful · theme: Hum · nav: N5 Floating pill · footer: Ft5 Statement
 * audience: new and active GLP-1 users · use: trustworthy App Store introduction
 * enrichment: real product captures, no redrawn device chrome
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * mobile: pass (34, 49, 50–57) · icons: pass (30)
 */

@import url("/tokens.css");

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

html,
body {
  overflow-x: clip;
}

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.24em;
}

a:hover {
  color: var(--color-accent-strong);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  inset: var(--space-sm) auto auto var(--space-sm);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(100% - 2rem, 76rem);
  margin-inline: auto;
}

header.site {
  position: fixed;
  inset: var(--space-md) 0 auto;
  z-index: 40;
  pointer-events: none;
}

header.site .wrap {
  width: fit-content;
  max-width: calc(100% - 2rem);
  min-height: 3.5rem;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-overlay);
  box-shadow: 0 0.75rem 2.5rem -1.5rem var(--color-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
}

nav.site {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

nav.site a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

nav.site a:hover,
nav.site a[aria-current="page"] {
  background: var(--color-surface-strong);
  color: var(--color-ink);
}

nav.site a:active {
  transform: translateY(1px);
}

nav.site .lang {
  border: var(--rule-hair) solid var(--color-rule);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

.hero {
  min-height: min(50rem, 100svh);
  padding: var(--space-hero-top) 0 var(--space-hero-bottom);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--color-paper) 92%, var(--color-accent-soft)),
      var(--color-paper) 58%
    );
}

.hero .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
}

.hero .icon {
  grid-column: 1 / span 2;
  grid-row: 1;
  width: 4.5rem;
  height: auto;
  aspect-ratio: 1;
  justify-self: start;
  object-fit: contain;
  border-radius: 27%;
  box-shadow: 0 1.5rem 3rem -1.75rem var(--color-shadow);
}

.hero h1 {
  grid-column: 1 / span 8;
  grid-row: 2;
  min-width: 0;
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.hero .lede {
  grid-column: 1 / span 7;
  grid-row: 3;
  max-width: 56ch;
  margin: 0;
  color: var(--color-ink-2);
  font-size: clamp(var(--text-base), 1.2vw, var(--text-md));
}

.pills {
  grid-column: 1 / span 8;
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: var(--space-sm) 0 0;
  padding: var(--space-md) 0 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  list-style: none;
}

.pills li {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.pills li:not(:last-child)::after {
  content: "·";
  margin-inline-start: var(--space-md);
  color: var(--color-coral);
}

.store-action {
  grid-column: 1 / span 8;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
}

.hero-preview {
  grid-column: 9 / -1;
  grid-row: 1 / span 5;
  width: min(100%, 19rem);
  margin: 0;
  justify-self: end;
  position: relative;
}

.hero-preview::before {
  content: "";
  position: absolute;
  inset: -1.5rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 94, 70, 0.32) 0%, rgba(224, 153, 128, 0.24) 50%, transparent 75%);
  filter: blur(28px);
  pointer-events: none;
}

/* FAQ Styles */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-md);
  margin-block: var(--space-lg) var(--space-xl);
}

.faq-item {
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 2rem -1rem var(--color-shadow);
}

.faq-item h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-md);
  color: var(--color-ink);
}

.faq-item p {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-base);
}

.hero-preview img {
  width: 100%;
  max-height: 31rem;
  object-fit: cover;
  object-position: top;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 2.5rem 5rem -3rem var(--color-shadow);
}

.hero-preview figcaption {
  max-width: 24ch;
  margin-block-start: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.store-button,
.contact {
  position: relative;
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.store-button:hover,
.contact:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
  transform: translateY(-2px);
}

.store-button:active,
.contact:active {
  transform: translateY(1px);
}

.store-button[aria-disabled="true"],
.store-button:disabled,
.store-button[data-state="loading"] {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.store-button[data-state="error"] {
  border-color: var(--color-error);
  background: var(--color-error);
}

.store-button[data-state="success"] {
  border-color: var(--color-success);
  background: var(--color-success);
}

/* Apple's own badge, served from assets/ in each language. Its guidelines set a
   40px floor and forbid restyling the artwork, so the height is the only thing
   set here and the lift on hover is applied to the link, not the image. */
.store-badge {
  display: inline-flex;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.store-badge img {
  display: block;
  width: auto;
  height: 3.25rem;
}

.store-badge:hover {
  transform: translateY(-2px);
}

.store-badge:active {
  transform: translateY(1px);
}

.store-note {
  max-width: 30ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

main {
  padding: var(--space-3xl) 0 var(--space-4xl);
}

body:not(:has(.hero)) main {
  padding-block-start: var(--space-legal-top);
}

main > .wrap {
  width: min(100% - 2rem, 76rem);
}

main > .wrap > h1 {
  min-width: 0;
  max-width: 15ch;
  margin: 0 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

main > .wrap > h2,
.head-hang h2 {
  min-width: 0;
  max-width: 17ch;
  margin: var(--space-4xl) 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

main > .wrap > h2:first-child {
  margin-top: 0;
}

main > .wrap > p,
main > .wrap > ul,
main > .wrap > ol {
  max-width: 68ch;
}

body:not(:has(.hero)) main > .wrap > p,
body:not(:has(.hero)) main > .wrap > ul,
body:not(:has(.hero)) main > .wrap > ol,
body:not(:has(.hero)) main > .wrap > .card,
body:not(:has(.hero)) main > .wrap > .notice {
  width: 100%;
  max-width: none;
}

/* The 15ch/17ch caps on main > .wrap > h1/h2 above are a hero-headline
   treatment -- a short, punchy line breaking exactly where the copy wants it
   to. Legal and support pages reuse the same main > .wrap markup but have no
   .hero, so a heading like "Data processed when you create an account" (44
   characters) was forced to wrap after roughly three words, on every viewport
   width, regardless of how much room was actually available. The paragraph
   exception right above already carves out non-hero pages; headings needed
   the same one. */
body:not(:has(.hero)) main > .wrap > h1,
body:not(:has(.hero)) main > .wrap > h2 {
  max-width: none;
}

/* main.doc is the long-form guide treatment. It used to sit in a narrower
   column than the rest of the site; it now shares the standard .wrap width, so
   only the per-block caps need clearing here. */
body main.doc > .wrap > p,
body main.doc > .wrap > ul,
body main.doc > .wrap > ol,
body main.doc > .wrap > .card,
body main.doc > .wrap > .notice {
  max-width: none;
}

p {
  margin: 0 0 var(--space-md);
}

h3 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}

ul,
ol {
  margin: 0 0 var(--space-lg);
  padding-inline-start: 1.25em;
}

li {
  margin-block-end: var(--space-xs);
}

.shots {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3xl) var(--space-lg);
  margin: var(--space-xl) 0 var(--space-4xl);
}

.shots figure {
  min-width: 0;
  margin: 0;
}

.shots figure:nth-child(-n + 3) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(14rem, 0.32fr);
  gap: clamp(var(--space-lg), 6vw, var(--space-4xl));
  align-items: center;
}

.shots figure:nth-child(2) img {
  grid-column: 2;
}

.shots figure:nth-child(2) figcaption {
  grid-column: 1;
  grid-row: 1;
  text-align: end;
}

.shots figure:nth-child(n + 4) {
  grid-column: span 4;
}

.shots img {
  width: 100%;
  height: auto;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 2.5rem 5rem -3.25rem var(--color-shadow);
}

.shots figure:nth-child(-n + 3) img {
  width: min(100%, 28rem);
  justify-self: center;
}

.shots figcaption {
  max-width: 18ch;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 3vw, var(--text-2xl));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.shots figure:nth-child(n + 4) figcaption {
  margin-block-start: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}

.features {
  margin-block: var(--space-xl) var(--space-4xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.feature {
  display: grid;
  grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 0.68fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.feature h3 {
  margin: 0;
}

.feature p {
  max-width: 58ch;
  margin: 0;
  color: var(--color-ink-2);
}

.card {
  max-width: 68ch;
  margin: var(--space-xl) 0;
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.card h3:first-child {
  margin-top: 0;
}

.card-meta {
  margin-block-end: var(--space-sm);
}

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

.notice {
  max-width: 68ch;
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border-inline-start: 0.35rem solid var(--color-coral);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in oklch, var(--color-coral) 9%, var(--color-paper));
}

.notice > :last-child {
  margin-bottom: 0;
}

.meta {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.table-scroll {
  width: 100%;
  margin: var(--space-xl) 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}

th {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

footer.site {
  padding: var(--space-4xl) 0 var(--space-2xl);
  background: var(--color-footer);
  color: var(--color-footer-ink);
}

.footer-statement {
  min-width: 0;
  width: min(100% - 2rem, 76rem);
  max-width: 24ch;
  margin: 0 auto var(--space-3xl);
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-footer-ink) 30%, transparent);
  font-size: var(--text-sm);
}

footer.site a {
  color: var(--color-footer-ink);
  white-space: nowrap;
}

footer.site .spacer {
  max-width: 62ch;
  margin-inline-start: auto;
  color: color-mix(in oklch, var(--color-footer-ink) 72%, transparent);
}

@media (max-width: 64rem) {
  .hero h1,
  .hero .lede,
  .store-action,
  .pills {
    grid-column-end: span 7;
  }

  .hero-preview {
    grid-column: 8 / -1;
  }

  .shots {
    gap-block: var(--space-2xl);
  }
}

@media (max-width: 48rem) {
  header.site {
    inset-block-start: var(--space-sm);
  }

  header.site .wrap {
    justify-content: space-between;
  }

  /* The nav wraps onto a second row instead of hiding everything except the
     current page. Hiding was cheaper but left the phone header with one link
     and no way to reach the rest of the site.
     Wrapping only works if the header stops floating: two rows of pill would
     otherwise sit fixed over a third of the screen for the whole visit. In
     flow it pushes the page down once and then scrolls away. */
  header.site {
    position: static;
    padding-block-start: var(--space-md);
  }

  header.site .wrap {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-2xs);
    gap: var(--space-sm);
  }

  nav.site {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  nav.site a {
    min-height: 2.25rem;
    padding-inline: var(--space-xs);
  }

  /* 9rem existed to clear the floating header. In flow the header occupies its
     own space, so the same value reads as a hole above the title. */
  body:not(:has(.hero)) main {
    padding-block-start: var(--space-xl);
  }

  .hero {
    min-height: auto;
    padding-block: var(--space-hero-mobile-top) var(--space-hero-mobile-bottom);
  }

  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .icon {
    grid-column: 1;
    grid-row: 1;
    width: 5.5rem;
    justify-self: start;
  }

  .hero h1 {
    grid-column: 1;
    grid-row: auto;
    margin-block-start: var(--space-lg);
  }

  .hero .lede,
  .store-action,
  .pills {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-preview {
    display: none;
  }

  .shots figure:nth-child(-n + 3) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .shots figure:nth-child(2) img,
  .shots figure:nth-child(2) figcaption {
    grid-column: 1;
    grid-row: auto;
    text-align: start;
  }

  .shots figure:nth-child(n + 4) {
    grid-column: span 6;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }

  footer.site .spacer {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 26rem) {
  .wrap,
  main > .wrap,
  .footer-statement {
    width: min(100% - 1.25rem, 76rem);
  }

  header.site .wrap {
    max-width: calc(100% - 1rem);
    gap: var(--space-xs);
  }

  .brand {
    font-size: var(--text-base);
  }

  nav.site a {
    padding-inline: var(--space-xs);
  }

  .hero h1 {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
  }

  .shots figure:nth-child(n + 4) {
    grid-column: 1 / -1;
  }

  .store-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .store-button,
  .contact {
    max-width: 100%;
  }
}

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

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