/*
  Angel Numbers - site styles.

  The app's own world at desk size. Ground, surfaces, accent and the three
  background washes are read out of the app's resource files rather than matched
  by eye (values/colors.xml, values/palette.xml, drawable/bg_app.xml), so 111 is
  the same blue here as it is on the phone.

  Two faces, and a reason for each. Manrope carries the page. Roboto appears
  only where the product speaks for itself - the number badges and the entries
  quoted from the dictionary - because Roboto is what Android renders the app
  in, and those bits should look like screenshots of the real thing.
*/

/* ============================================================== tokens */

:root {
  /* colour */
  --ground: #f7f7fa;
  --surface: #ffffff;
  --sunk: #f1f1f6;
  --ink: #0e0e13;
  --ink-2: #3f3f55;
  --ink-3: #6a6a83;
  --ink-4: #9a9ab0;
  --line: #e7e7ef;
  --line-2: #d8d8e4;

  --accent: #5a4bff;
  --accent-2: #4636f0;
  --accent-wash: #eeecff;

  --wash-indigo: rgba(90, 75, 255, .18);
  --wash-rose: rgba(255, 111, 168, .15);
  --wash-aqua: rgba(49, 214, 200, .13);

  --hue-0: #5f57e8; --hue-1: #2f6fe4; --hue-2: #d8456b; --hue-3: #0e9b95;
  --hue-4: #2a8f6b; --hue-5: #d4622f; --hue-6: #c4467f; --hue-7: #7b4fe0;
  --hue-8: #ae8420; --hue-9: #2f7fb0;

  /* One type scale, used everywhere. Sizes that are not on it are the reason
     a page looks "off" without anyone being able to say why. */
  --t-xs: .8125rem;    /* 13 */
  --t-sm: .9375rem;    /* 15 */
  --t-md: 1.0625rem;   /* 17 */
  --t-lg: 1.1875rem;   /* 19 */
  --t-xl: clamp(1.25rem, 1.6vw, 1.5rem);      /* 20 - 24 */
  --t-2xl: clamp(1.625rem, 2.6vw, 2.125rem);  /* 26 - 34 */
  --t-3xl: clamp(2.125rem, 4.2vw, 3.25rem);   /* 34 - 52 */

  /* One spacing scale too. */
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;    --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4.5rem;  --s-8: 6rem;

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 38px;

  --shadow-1: 0 1px 2px rgba(16, 16, 45, .04), 0 8px 22px -14px rgba(16, 16, 55, .34);
  --shadow-2: 0 2px 4px rgba(16, 16, 45, .05), 0 28px 56px -30px rgba(16, 16, 55, .42);
  --shadow-3: 0 4px 10px rgba(16, 16, 45, .06), 0 54px 90px -48px rgba(16, 16, 55, .55);

  --ease: cubic-bezier(.22, .68, .28, 1);

  --display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --product: Roboto, ui-sans-serif, system-ui, sans-serif;
}

/* ================================================================ base */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Without height:auto a browser obeys an <img>'s height attribute literally,
   so a 760x1647 screenshot laid out 280px wide still gets drawn 1647px tall.
   That single missing line is what makes screenshots look stretched. */
img { max-width: 100%; height: auto; display: block; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: var(--t-md);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(760px 620px at 2% -8%, var(--wash-indigo), transparent 64%),
    radial-gradient(700px 560px at 100% 6%, var(--wash-rose), transparent 62%),
    radial-gradient(820px 620px at 18% 102%, var(--wash-aqua), transparent 66%);
}

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 32px); }
.narrow { max-width: 620px; }

h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); text-wrap: balance; }
h1 { font-size: var(--t-3xl); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: var(--t-2xl); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
h3 { font-size: var(--t-lg); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
strong { color: var(--ink); font-weight: 700; }

.eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--s-2);
}
.sub { font-size: var(--t-md); color: var(--ink-3); margin-top: var(--s-3); max-width: 54ch; }

/* ============================================================== header */

header.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 247, 250, .82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
header.top.stuck { border-bottom-color: var(--line); }

.bar { display: flex; align-items: center; gap: var(--s-3); height: 66px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img {
  width: 32px; height: 32px; border-radius: 9px;
  box-shadow: 0 3px 10px -3px rgba(90, 75, 255, .55);
}
.brand span {
  font-size: var(--t-md); font-weight: 800; color: var(--ink);
  letter-spacing: -.03em; white-space: nowrap;
}

/* The bar holds the name and one button. Nothing else - no page links to sit
   next to the CTA and compete with it for the same colour, which is what made
   the old header read as a blue smudge on the privacy page. Home, all apps and
   the policy are all in the footer, where people look for them. */
.bar nav { margin-left: auto; display: flex; align-items: center; }

/* ============================================================= buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: -.01em; text-decoration: none;
  padding: 12px 20px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
/* Every link state is written out. A button that inherits its colour from
   anywhere is a button that turns purple on a visited link or grey inside a
   muted block, and the first anyone hears of it is a screenshot. */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(90, 75, 255, .75);
}
a.btn-primary:hover,
a.btn-primary:focus-visible {
  background: var(--accent-2); color: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(90, 75, 255, .8);
}
a.btn-primary:active { transform: translateY(0); }

a.btn-quiet,
a.btn-quiet:link,
a.btn-quiet:visited { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
a.btn-quiet:hover,
a.btn-quiet:focus-visible { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-1); }

.btn-lg { padding: 15px 28px; font-size: var(--t-md); border-radius: 14px; }
.btn-play svg { flex: 0 0 auto; margin-right: -1px; }

/* ================================================================ skip */

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  transform: translateY(-200%);
  background: var(--accent); color: #fff; font-weight: 700;
  padding: 12px 18px; border-radius: 0 0 12px 0; text-decoration: none;
}
.skip:focus { transform: none; }

/* ================================================================ hero */

.hero { padding-block: clamp(var(--s-5), 4.5vw, var(--s-7)) var(--s-6); }
.hero-grid { display: grid; gap: clamp(var(--s-5), 5vw, var(--s-7)); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } }

.hero h1 { max-width: 16ch; }
.hero .sub { font-size: var(--t-xl); line-height: 1.45; color: var(--ink-3); max-width: 40ch; margin-top: var(--s-4); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

.trust {
  display: flex; flex-wrap: wrap; gap: 10px var(--s-4);
  margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ink-4);
}
.trust b { color: var(--ink); font-weight: 700; }

/* ============================================================== device */

.device {
  position: relative;
  width: min(300px, 78vw);
  margin-inline: auto;
  padding: 8px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #fff, #e6e6f0 48%, #fff);
  box-shadow: 0 0 0 1px rgba(16, 16, 55, .06), var(--shadow-3);
}
.device::before {
  content: ""; position: absolute; inset: -14% -20%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--wash-indigo), transparent 62%);
  filter: blur(38px);
}
.device .screen { border-radius: 31px; overflow: hidden; background: var(--sunk); }
.device .screen img { width: 100%; }

/* ============================================================== ticker */

.rail {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: clamp(var(--s-5), 5vw, var(--s-6));
}
.chip {
  font-family: var(--product); font-weight: 700; font-size: var(--t-md);
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hue) 18%, transparent);
  border-radius: var(--r-sm); padding: 10px 15px;
}

/* ============================================================ sections */

section { padding-block: clamp(var(--s-5), 4.6vw, var(--s-7)); }
.head { max-width: 46ch; }
.head h2 + .sub { margin-top: var(--s-3); }

/* =========================================================== showcase */

/* Screens switch in place instead of stacking down the page. Built on a radio
   group, so it works with no JavaScript at all and the arrow keys move between
   tabs for free - which is also exactly the keyboard behaviour a tab strip is
   supposed to have. */
.showcase { margin-top: var(--s-5); }
.showcase input { position: absolute; opacity: 0; pointer-events: none; }

.tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 5px; margin-bottom: var(--s-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-1);
  width: max-content; max-width: 100%; margin-inline: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs label {
  flex: 0 0 auto; cursor: pointer; user-select: none;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em;
  color: var(--ink-3); padding: 9px 16px; border-radius: 11px;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.tabs label:hover { color: var(--ink); }

.stage {
  display: grid; gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: center; max-width: 880px; margin-inline: auto;
}
@media (min-width: 860px) { .stage { grid-template-columns: 300px 1fr; } }

/* The showcase phone shows the top two-thirds of the screen and fades out at
   the bottom. A full 9:19.5 phone is so much taller than the paragraph beside
   it that the text ends up floating in the middle of an empty column; this
   keeps the two sides in proportion and reads as a deliberate peek rather than
   a crop. */
.frame { position: relative; }
.frame .screen { position: relative; aspect-ratio: 1080 / 1560; }
.frame .screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
  pointer-events: none; z-index: 2;
}
.frame .screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.02);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.notes { position: relative; min-height: 168px; }
.note {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.note h3 { margin-bottom: var(--s-2); font-size: var(--t-xl); }
.note p { color: var(--ink-3); max-width: 42ch; }
.note .example {
  display: inline-flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-3);
}
.note .example code {
  font-family: var(--product); font-size: var(--t-sm); font-weight: 500;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 11px; color: var(--ink);
}

/* One rule per tab: light the label, show the screen, show the note. */
#t1:checked ~ .tabs label[for="t1"],
#t2:checked ~ .tabs label[for="t2"],
#t3:checked ~ .tabs label[for="t3"],
#t4:checked ~ .tabs label[for="t4"],
#t5:checked ~ .tabs label[for="t5"] { color: #fff; background: var(--accent); }

#t1:checked ~ .stage .frame img:nth-of-type(1),
#t2:checked ~ .stage .frame img:nth-of-type(2),
#t3:checked ~ .stage .frame img:nth-of-type(3),
#t4:checked ~ .stage .frame img:nth-of-type(4),
#t5:checked ~ .stage .frame img:nth-of-type(5) { opacity: 1; transform: none; }

#t1:checked ~ .stage .notes .note:nth-of-type(1),
#t2:checked ~ .stage .notes .note:nth-of-type(2),
#t3:checked ~ .stage .notes .note:nth-of-type(3),
#t4:checked ~ .stage .notes .note:nth-of-type(4),
#t5:checked ~ .stage .notes .note:nth-of-type(5) { opacity: 1; transform: none; pointer-events: auto; }

.showcase input:focus-visible + .tabs label,
.tabs label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================== cards */

.cards { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 720px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4);
  box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card h3 { margin-bottom: 7px; }
.card p { font-size: var(--t-sm); color: var(--ink-3); }

/* The ten section colours, as a compact row instead of ten cards. */
.hues { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
.hue {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hue);
  background: color-mix(in srgb, var(--hue) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hue) 16%, transparent);
  border-radius: 9px; padding: 8px 13px;
}

/* An entry, quoted from the app, set in the app's own face. */
.quote {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--shadow-1);
}
.quote .badge {
  flex: 0 0 auto;
  font-family: var(--product); font-weight: 700; font-size: var(--t-lg);
  font-variant-numeric: tabular-nums; color: var(--hue);
  background: color-mix(in srgb, var(--hue) 12%, var(--surface));
  border-radius: 13px; padding: 10px 14px; min-width: 62px; text-align: center;
}
.quote h3 { font-family: var(--product); font-weight: 700; }
.quote p { font-family: var(--product); font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; }

/* ============================================================== band */

/* The privacy note: statement on the left, the one action on the right, so
   the section is a single line of thought instead of a paragraph followed by
   an orphaned button. */
.band {
  display: grid; gap: var(--s-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(var(--s-4), 4vw, var(--s-6));
  box-shadow: var(--shadow-1);
}
@media (min-width: 820px) {
  .band { grid-template-columns: 1fr auto; gap: var(--s-6); }
}
.band .sub { margin-top: var(--s-3); }
.band .btn { white-space: nowrap; }

/* ================================================================= cta */

#get { padding-top: 0; }
.cta {
  text-align: center; max-width: 640px; margin-inline: auto;
  padding: clamp(var(--s-5), 4vw, var(--s-6)) var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.cta img {
  width: 72px; height: 72px; border-radius: 20px; margin: 0 auto var(--s-3);
  box-shadow: 0 10px 26px -10px rgba(90, 75, 255, .6);
}
.cta .sub { margin-inline: auto; text-align: center; }
.cta .btn { margin-top: var(--s-4); }

.back { margin-top: var(--s-6); }

/* A text page: the title block and the body share one measure, so their left
   edges line up instead of being two differently-centred columns. */
.hero-page { padding-block: clamp(var(--s-4), 3.5vw, var(--s-6)) var(--s-4); }
.hero-page h1 { max-width: 14ch; margin-top: var(--s-1); }
.hero-page .meta { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-4); }
section.tight { padding-top: 0; }

/* ============================================================== prose */

.prose { max-width: 62ch; }
.prose h2 { margin-top: var(--s-6); font-size: var(--t-xl); }
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose ul { margin-top: var(--s-3); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose code {
  font-family: var(--product); font-size: .92em; background: var(--sunk);
  padding: 2px 6px; border-radius: 6px; color: var(--ink);
}
.callout {
  margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}

/* ============================================================= footer */

footer.site {
  border-top: 1px solid var(--line);
  margin-top: clamp(var(--s-6), 6vw, var(--s-7));
  padding-block: var(--s-5) var(--s-6);
}
.foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-4); font-size: var(--t-sm);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.foot a { color: var(--ink-3); text-decoration: none; font-weight: 600; }
.foot a:hover { color: var(--accent); }
.foot .end { margin-left: auto; color: var(--accent); }

/* Three different kinds of small print, kept apart. Running the disclaimer,
   the copyright and Google's trademark line together as one grey paragraph is
   what made this footer look like a mistake. The disclaimer is a statement
   about the content and gets its own block behind a rule; the two legal lines
   are boilerplate and sit last, one per line. */
.smallprint {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.disclaimer {
  max-width: 76ch;
  font-size: var(--t-xs); line-height: 1.65; color: var(--ink-3);
}
.disclaimer b { color: var(--ink-2); font-weight: 700; }

.legal {
  display: grid; gap: 3px; margin-top: var(--s-4);
  font-size: 12px; line-height: 1.5; color: var(--ink-4);
}

/* ============================================================= motion */

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; }
}

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

/* ========================================================= responsive */

@media (max-width: 899px) {
  .hero { text-align: left; padding-block: var(--s-5) var(--s-5); }
  .hero h1 { max-width: 18ch; }
  .hero .sub { max-width: 50ch; }
  .device { width: min(276px, 72vw); }
}

@media (max-width: 640px) {
  .bar { height: 58px; }
  /* The button stays on a phone now that it is the only thing in the bar -
     it just gets smaller. */
  .bar nav .btn { padding: 9px 14px; font-size: var(--t-xs); }
  .bar nav .btn svg { width: 15px; height: 15px; }
  .brand img { width: 30px; height: 30px; }
  .btn-lg { padding: 13px 22px; font-size: var(--t-sm); }
  .hero .actions .btn { flex: 1 1 auto; }
  .notes { min-height: 190px; }
  .tabs { width: 100%; justify-content: flex-start; }
  .band .btn { width: 100%; }
}

@media (max-width: 420px) {
  /* Four footer links wrap into a ragged two-and-a-bit lines; a two-column
     grid keeps them tidy and the Play link gets its own full-width line. */
  .foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--s-3); width: 100%; }
  .foot .end { margin-left: 0; }
}

@media (max-width: 380px) {
  :root { --t-md: 1rem; --t-sm: .875rem; }
  .chip { padding: 9px 12px; font-size: var(--t-sm); }
  .brand span { font-size: var(--t-sm); }
  .bar nav .btn { padding: 9px 11px; }
}