/* Aura — companion site
 *
 * The accent is the app's own teal, taken from Core/Design/AuraTheme.swift, so someone arriving
 * from the App Store listing recognises the thing they are about to install. It is darkened a
 * little from the in-app value: #4A90A4 clears 3:1 against this page ground but not 4.5:1, and
 * link text has to clear 4.5:1.
 *
 * The two warm hues are lifted off the app icon's ring rather than invented. They appear in
 * exactly two places, the glow behind the hero phone and the episode strip, which is enough to
 * tie the page to the icon without turning a page about a painful condition into a sunset.
 *
 * The neutral is warmed very slightly, matching the app's off-white rather than a pure grey.
 * Beside teal a pure grey reads cold, and this is an app for people having a rough time.
 *
 * Set in system-ui on purpose. On an iPhone that resolves to SF, which is the face the app itself
 * is set in. A webfont would make the page look less like the product, not more, and would cost a
 * round trip on a page whose job is partly to be readable on a bad connection.
 *
 * The screenshots are light in both themes. Aura is a light product, they sit comfortably on
 * either ground, and carrying a dark set would double the assets to serve a case nobody asked for.
 */

:root {
  color-scheme: light dark;

  --bg: #FAF9F7;
  --surface: #F2F1ED;
  --fg: #202A31;
  --fg-2: #63706F;
  --accent: #2F7183;
  --ember: #E0733F;
  --rose: #E2607E;
  --line: rgba(20, 40, 45, 0.10);
  --line-2: rgba(20, 40, 45, 0.16);
  --cast: rgba(26, 44, 50, 0.24);
  --glow: 0.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101215;
    --surface: #191C20;
    --fg: #ECEFF1;
    --fg-2: #A2AEB3;
    --accent: #6FB6C8;
    --ember: #F08A55;
    --rose: #F0788F;
    --line: rgba(255, 255, 255, 0.10);
    --line-2: rgba(255, 255, 255, 0.18);
    --cast: rgba(0, 0, 0, 0.6);
    --glow: 0.4;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The page gutter. Anything that is also a .wrap must set padding-block, never the padding
   shorthand: same specificity, later in the file, and the shorthand's implied zero takes the
   gutter with it. Invisible on a desktop, where the max-width leaves slack either side, and
   very visible on a phone, where the copy ends up against the glass. */
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding-inline: 24px; }
.narrow { max-width: 42rem; }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* The app icon, wherever it appears. It is a pale glass icon, so on a pale page it needs the
   same hairline and lift iOS gives it on the home screen or it dissolves into the ground. */
.app-icon {
  display: block;
  border-radius: 23.5%;
  box-shadow: 0 1px 2px rgba(20, 30, 35, 0.16),
              0 6px 18px -8px rgba(20, 30, 35, 0.32),
              0 0 0 0.5px rgba(20, 30, 35, 0.07);
}

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

.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; height: 68px; gap: 24px; }

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--fg);
  text-decoration: none;
}
.wordmark .app-icon { width: 27px; height: 27px; }

.site-head nav { margin-left: auto; display: flex; gap: 22px; }
.site-head nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
}
.site-head nav a:hover,
.site-head nav a[aria-current="page"] { color: var(--fg); }

/* ---- Type ------------------------------------------------------------ */

.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0 0 18px;
  text-wrap: balance;
}
h3 { font-size: 1.02rem; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.012em; }
p { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--fg-2); }

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

.hero { position: relative; padding-block: 72px 40px; }
.hero-grid { display: grid; gap: 60px; align-items: center; }
@media (min-width: 900px) {
  .hero { padding-block: 88px 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
}

.hero .app-icon { width: 62px; height: 62px; margin-bottom: 26px; }

.hero h1 {
  font-size: clamp(2.45rem, 6.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.03;
  margin: 0 0 24px;
  text-wrap: balance;
}
/* The second clause of the headline carries the idea; the first carries the search term. */
.hero h1 em { font-style: normal; color: var(--fg-2); }

.hero .lede {
  font-size: clamp(1.08rem, 2.1vw, 1.23rem);
  line-height: 1.52;
  color: var(--fg-2);
  margin: 0 0 32px;
  max-width: 33rem;
  text-wrap: pretty;
}

/* The one filled control on the page.
 *
 * Solid accent with the page ground as its label, rather than an outline: this is the single
 * thing the page is asking anyone to do, and everything else here — the nav, the privacy link,
 * the status pill — is an outline or bare text. If it were outlined too there would be nothing
 * to look at first.
 *
 * `--bg` as the label colour rather than white, so it stays the page's own off-white in light
 * and its near-black in dark; white on the dark theme's lighter accent measures 2.2:1. */
.app-store {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 26px;
  transition: filter 120ms ease;
}
.app-store:hover { filter: brightness(1.08); }
.app-store:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.get { margin: 28px 0 14px; }

/* The closing invitation. Same rhythm as .claims above it, so it reads as the end of the page
   rather than as a banner bolted to the bottom of it. */
.closer { padding-block: 8px 88px; }
.closer h2 { margin-bottom: 12px; }
.closer .get { margin-bottom: 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 11px 20px;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* The glow is the icon's own ring, blown up and put behind the phone. It is the only decorative
   element on the page, so it stays behind everything and never touches text.
 *
 * The wrapper is what stops it: it is wider than the hero on purpose, and an absolutely
 * positioned bleed like that widens the document on a narrow screen. `overflow-x: hidden` on the
 * body hides the result but still leaves the page scrollable sideways in some browsers, so the
 * clip happens here instead, where it cannot be argued with. */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-glow span {
  position: absolute;
  width: 42rem;
  aspect-ratio: 1;
  right: -7rem;
  top: -2rem;
  opacity: var(--glow);
  background:
    radial-gradient(closest-side, var(--ember), transparent 72%) 32% 30% / 64% 64% no-repeat,
    radial-gradient(closest-side, var(--rose), transparent 70%) 64% 56% / 60% 60% no-repeat,
    radial-gradient(closest-side, var(--accent), transparent 70%) 42% 76% / 54% 54% no-repeat;
  filter: blur(34px);
}
/* Stacked, the phone moves below the copy, so the glow follows it down. Left where it was it
   would sit behind the headline, and a headline over a wash of orange is unreadable. */
@media (max-width: 899px) {
  .hero-glow span {
    width: 30rem;
    right: -9rem;
    top: auto;
    bottom: -5rem;
    opacity: calc(var(--glow) * 0.72);
  }
}

/* ---- The iPhone ------------------------------------------------------ */

/* Drawn rather than photographed. A tilted render is a 300 KB image that only fits one page
   width and one theme; this one reflows, stays sharp on any display, and the screenshot inside
   it is the app's own pixels at 2x, untouched.
 *
 * Every proportion below is the iPhone 16 Pro Max's, which is the device the captures came from.
 * Across its 77.6mm width: 1.0mm of titanium rail, 1.5mm of black glass border, then the 71.6mm
 * display. The corner is anchored on the display, whose radius Apple publishes as 62pt of a
 * 440pt width, near enough a seventh; the two layers outside it add their own thickness to that.
 * Getting the black border and that radius right is most of what makes this read as a phone
 * rather than as a rounded rectangle.
 *
 * Default is straight on. Tilt is opt in, per instance, through .near-left and .near-right,
 * named for the edge that ends up closest to the viewer. */
.phone {
  --ry: 0deg;                   /* turn */
  --rx: 0deg;                   /* tip back */
  --rz: 0deg;                   /* the hand is never quite level */
  --depth: 0px;
  --edge: none;                 /* the side wall only exists once it turns */
  position: relative;
  width: 100%;
  max-width: 340px;
  /* Long, like a product shot taken on a 100mm lens. A short perspective splays the near edge
     and reads as a video game asset. */
  perspective: 2400px;
  perspective-origin: 50% 42%;
}
.phone.near-left  { --ry: -17deg; --rx: 5deg; --rz:  1.4deg; --depth: 16px; --edge: block; }
.phone.near-right { --ry:  16deg; --rx: 5deg; --rz: -1.2deg; --depth: 16px; --edge: block; }

.phone-body {
  position: relative;
  padding: 1.29%;
  border-radius: 16.2% / 7.77%;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));
  background:
    /* The two antenna splits. They sit on the rail and are covered by the glass across the
       middle, which is exactly where they are on the real thing. */
    linear-gradient(180deg, transparent 12.2%, rgba(255, 255, 255, 0.5) 12.2% 12.42%, transparent 12.42%),
    linear-gradient(180deg, transparent 87.4%, rgba(255, 255, 255, 0.5) 87.4% 87.62%, transparent 87.62%),
    /* Brushed titanium: enough stops to give it two specular bands and a dark side, because a
       three-stop gradient looks like plastic. */
    linear-gradient(147deg,
      #F4F1EC 0%, #BCB8B0 7%, #8B877F 16%, #E2DED7 26%, #A5A19A 36%,
      #6E6A64 48%, #CFCBC4 60%, #969289 71%, #E8E4DD 83%, #A9A59D 93%, #7A766E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),      /* the chamfer catching light */
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.10),          /* and turning away again */
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 34px 56px -30px var(--cast),
    0 80px 90px -56px var(--cast);
}

/* An iPhone corner is a superellipse, not a circular arc, and the difference shows up as the
   black border looking fatter at 45 degrees than along the edges. Browsers that can draw one get
   the real shape; the rest keep the arc, which nobody who has not measured it will notice. */
@supports (corner-shape: squircle) {
  .phone-body,
  .phone-edge,
  .phone-glass,
  .phone-screen { corner-shape: squircle; }
}

/* Plates stacked behind the front face give the body a side wall when it turns. One plate alone
   leaves a hollow you can see straight through. They switch off entirely on a phone that is
   facing you, which has no visible side: left on, they land in the same plane as the front face
   and, being later in the DOM, paint over the rail. */
.phone-edge {
  display: var(--edge);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(calc(var(--depth) * var(--z) * -1));
  background: linear-gradient(90deg, #A29E95, #625F57 38%, #55524B 62%, #918D84);
}

/* The black border between the rail and the display. Leaving this out is the single thing that
   makes a CSS phone look like a screenshot with rounded corners. */
.phone-glass {
  position: relative;
  padding: 1.98%;
  border-radius: 15.5% / 7.3%;
  background: #06070B;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16),   /* cover glass meeting the rail */
              inset 0 1px 1px rgba(255, 255, 255, 0.10);
}

.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 14.1% / 6.5%;
  background: #000;
}
.phone-screen img { display: block; width: 100%; height: auto; }

.phone-island {
  position: absolute;
  top: 1.15%;
  left: 50%;
  width: 28.4%;
  aspect-ratio: 125 / 36;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* One soft band across the glass at the angle the body is turned, plus a darker edge where the
   display sits under the cover glass. Kept low: a convincing reflection is one you have to look
   for. */
.phone-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.08) 14%,
    rgba(255, 255, 255, 0) 29%,
    rgba(255, 255, 255, 0) 64%,
    rgba(255, 255, 255, 0.10) 77%,
    rgba(255, 255, 255, 0) 91%);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.22);
}

/* Both key clusters are one element each, carved into buttons by hard gradient stops. Action,
   volume up and volume down down the left; power and camera control on the right. */
.phone-keys,
.phone-power {
  position: absolute;
  width: 1.5%;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.phone-keys {
  left: -0.72%;
  top: 19.6%;
  height: 18.6%;
  background: linear-gradient(180deg,
    #A6A29A 0 18.3%, transparent 18.3% 32.3%,
    #A6A29A 32.3% 62.4%, transparent 62.4% 69.9%,
    #A6A29A 69.9% 100%);
}
.phone-power {
  right: -0.72%;
  top: 25.5%;
  height: 19.1%;
  background: linear-gradient(180deg,
    #A6A29A 0 43.5%, transparent 43.5% 81.2%,
    #C2BEB6 81.2% 100%);
}

/* The tilt is a flourish, and a flourish that costs legibility on a 390px screen is not worth
   keeping. Toward the narrow end the phones straighten up. */
@media (max-width: 899px) {
  .phone { margin: 0 auto; }
  .phone.near-left { --ry: -9deg; --rx: 3deg; --rz: 0.8deg; --depth: 10px; }
  .phone.near-right  { --ry:  9deg; --rx: 3deg; --rz: -0.8deg; --depth: 10px; }
}
@media (max-width: 560px) {
  .phone { max-width: 300px; }
  .phone.near-left { --ry: -6deg; --rx: 2deg; --rz: 0.5deg; --depth: 7px; }
  .phone.near-right  { --ry:  6deg; --rx: 2deg; --rz: -0.5deg; --depth: 7px; }
}

/* ---- The episode strip ----------------------------------------------- */

/* The one graphic on the page that is not a screenshot. It is here because the shape of the
   condition is the whole argument for the app existing, and that shape is hard to describe in a
   sentence and obvious in a picture. Labelled as an illustration, because it is one. */
.rhythm { padding-block: 30px 8px; }
.rhythm-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 40px; }
.rhythm-head h2 { flex: 1 1 18rem; margin: 0; }
.rhythm-head p { flex: 1 1 22rem; color: var(--fg-2); margin: 0; font-size: 16px; }

.rhythm-plot {
  margin-top: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0 14px;
  overflow-x: auto;
}
.rhythm-plot svg { display: block; width: 100%; min-width: 520px; height: auto; }
/* On a phone the strip scales down instead of scrolling. It is a shape, not a chart anyone
   reads values off, and a sideways scroll nobody notices is worse than a shorter band. */
@media (max-width: 620px) { .rhythm-plot svg { min-width: 0; } }

.rhythm-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--fg-2);
}

/* ---- Feature rows ---------------------------------------------------- */

/* Alternating rows rather than a grid of equal cards. Each screen here needs a paragraph to make
   sense of it, and a three-across grid gives a paragraph nowhere to go. */
.feature {
  display: grid;
  gap: 44px;
  align-items: center;
  padding: 74px 0;
  border-bottom: 1px solid var(--line);
}
.feature:last-of-type { border-bottom: 0; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) 330px; gap: 80px; padding: 96px 0; }
  .feature.flip { grid-template-columns: 330px minmax(0, 1fr); }
  .feature.flip .feature-text { order: 2; }
}
.feature-text p { color: var(--fg-2); font-size: 17px; max-width: 34rem; }
.feature-text h2 { margin-bottom: 16px; }

.feature-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--fg-2);
  max-width: 34rem;
}

/* ---- The lineup ------------------------------------------------------ */

/* Three at once, for the screens that need a caption rather than a paragraph. The outer two turn
   inward so the row reads as a group and the middle one is the one facing you. */
.lineup { padding-block: 78px 8px; }
.lineup > .narrow { margin-bottom: 52px; }
.lineup-grid { display: grid; gap: 52px 30px; }
@media (min-width: 780px) { .lineup-grid { grid-template-columns: repeat(3, 1fr); } }

.lineup figure { margin: 0; }
.lineup .phone { max-width: 278px; }
@media (min-width: 780px) {
  .lineup figure:first-child .phone  { --ry:  12deg; --rx: 4deg; --rz: -0.9deg; --depth: 13px; --edge: block; }
  .lineup figure:last-child .phone   { --ry: -12deg; --rx: 4deg; --rz:  0.9deg; --depth: 13px; --edge: block; }
}

.lineup figcaption {
  margin-top: 26px;
  font-size: 15.5px;
  color: var(--fg-2);
  line-height: 1.5;
}
.lineup figcaption b {
  display: block;
  color: var(--fg);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.012em;
  margin-bottom: 4px;
}

/* ---- Does / doesn't -------------------------------------------------- */

.claims { padding-block: 78px 24px; }
.claims > .narrow { margin-bottom: 44px; }
.claims-grid { display: grid; gap: 22px; }
@media (min-width: 780px) { .claims-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }

.claims-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 30px 30px;
}
.claims-col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.claims-col.no h3 { color: var(--fg-2); }
.claims-col ul { list-style: none; margin: 0; padding: 0; }
.claims-col li {
  padding: 13px 0 13px 22px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.45;
  position: relative;
}
.claims-col li:first-child { border-top: 0; padding-top: 0; }
.claims-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 9px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent);
}
.claims-col li:first-child::before { top: 8px; }
.claims-col.no li::before { background: var(--fg-2); opacity: 0.5; }
.claims-col li b { font-weight: 650; }

/* A quiet, factual note rather than a banner. Used for the medical disclaimer, which has to be
   present and easy to find but should not be the loudest thing on the page. */
.note {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 40px 0 0;
  font-size: 15.5px;
  color: var(--fg-2);
}

/* ---- Document pages -------------------------------------------------- */

.doc { padding-block: 72px 24px; }
.doc h1 {
  font-size: clamp(2.1rem, 5vw, 2.7rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.doc .lede { color: var(--fg-2); font-size: 1.1rem; margin: 0 0 38px; }
.doc h2 { font-size: 1.2rem; font-weight: 700; margin: 44px 0 12px; letter-spacing: -0.015em; }
.doc p { color: var(--fg); }
.doc ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.doc li { margin: 0.5rem 0; }

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 0 0 40px;
}
.summary h2 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.summary ul { margin: 0; padding-left: 1.2rem; }
.summary li { margin: 0.6rem 0; color: var(--fg-2); }

.updated { font-size: 14px; color: var(--fg-2); margin: 0 0 38px; }

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

.site-foot {
  margin-top: 88px;
  border-top: 1px solid var(--line);
  padding: 32px 0 72px;
  font-size: 15px;
  color: var(--fg-2);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.site-foot nav { margin-left: auto; display: flex; gap: 20px; }
.site-foot a { color: var(--fg-2); text-decoration: none; }
.site-foot a:hover { color: var(--fg); }