/* The site's one stylesheet: the app's look, inherited. */

:root {
  --ground: #f3f5f5;
  --card: #ffffff;
  --ink: #2a2c30;
  --muted: #5f646a;
  --accent: #62898d;
  --accent-ink: #45696d;
  --tint: #e8efef;
  --gold: #cc9a45;
  --bezel: #1b1d21;
  --line: rgba(20, 30, 32, 0.09);
  --shadow: 0 1px 2px rgba(20, 30, 32, 0.05), 0 16px 32px -20px rgba(20, 30, 32, 0.22);
  --on-accent: #ffffff;
  --on-accent-soft: rgba(255, 255, 255, 0.84);
  --phone-shadow: 0 32px 56px -28px rgba(20, 40, 42, 0.45);
  --band: var(--accent-ink);
  --selection: var(--tint);
  /* The spacing scale: a section's inset and the gaps inside it. */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 128px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121316;
    --card: #1c1e23;
    --ink: #e6e7e5;
    --muted: #a0a5aa;
    --accent: #8db3b7;
    --accent-ink: #9fc4c8;
    --tint: #1a2426;
    --bezel: #2a2c31;
    --line: rgba(255, 255, 255, 0.1);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px -20px rgba(0, 0, 0, 0.6);
    --on-accent: #0f1a1b;
    --on-accent-soft: rgba(15, 26, 27, 0.78);
    --phone-shadow: 0 32px 56px -28px rgba(0, 0, 0, 0.8);
    --band: var(--accent);
    --selection: #2b4448;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--ground);
  scrollbar-color: var(--accent) transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 1.0625rem/1.5 ui-rounded, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--ground);
  overflow-x: hidden;
}

::selection { background: var(--selection); color: var(--ink); }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s-2);
}
@media (min-width: 720px) {
  .wrap { padding: 0 var(--s-4); }
}

/* The wordmark: the sun standing as the O of Out, the letters in the accent; the foot's
   signature is the same mark at a giant size. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  /* A 44px tap target, the row's height unchanged. */
  padding: 4px 0;
  margin: -4px 0;
}
.wordmark .sun, .sign .sun {
  width: 0.72em;
  height: 0.72em;
  overflow: visible;
  margin-right: 0.1em;
  vertical-align: 0;
  transform: translateY(0.02em);
}
.wordmark .ring, .sign .ring { fill: none; stroke: var(--gold); stroke-width: 114; }
.wordmark .rays, .sign .rays {
  stroke: var(--gold);
  stroke-width: 62;
  stroke-linecap: round;
  transform-origin: 0 0;
}

/* Above the hero's contour lines, which reach up behind it. */
.top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-3);
  padding-bottom: var(--s-1);
}

/* The hero: the question, set as large as the screen allows, and the Today screen beside it. */
.hero {
  position: relative;
  padding-top: var(--s-4);
  padding-bottom: var(--s-5);
}
/* The contour lines fill the hero behind everything, faint, in the accent; the tint is
   invisible on the ground at one pixel. They start above the hero, behind the header, so
   they run off the screen's top edge rather than stopping on a line under the header. */
.contour {
  position: absolute;
  top: calc(-1 * var(--s-6));
  left: 0;
  width: 100%;
  height: calc(100% + var(--s-6));
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: 0.18;
  pointer-events: none;
}
.hero > :not(.contour) { position: relative; }
.hero h1 span { display: inline-block; }
.hero-words { max-width: 40rem; }
.hero h1 {
  font-size: clamp(2.75rem, 7.5vw + 0.5rem, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
}
.hero .sub {
  font-size: clamp(1.375rem, 2.2vw + 0.6rem, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-ink);
  margin-bottom: var(--s-3);
}
/* The six captions stand on one spot; the one for the screen in view shows. */
.captions { display: grid; }
.captions > p { grid-area: 1 / 1; }
.hero:not(.js) .captions > p:not(:first-child) { display: none; }
.hero .lede {
  font-size: clamp(1.125rem, 1vw + 0.8rem, 1.3125rem);
  line-height: 1.5;
  max-width: 32rem;
}
.hero .coming {
  margin-top: var(--s-4);
  color: var(--muted);
  font-size: 1rem;
}
/* Stacked under one column, the words sit centred over the phone, and the captions under
   its names, where a tap on a name can see its caption change; the words' box dissolves
   so its children can be ordered around the frame. */
@media (max-width: 999.98px) {
  .hero { display: flex; flex-direction: column; }
  .hero-words { display: contents; }
  .hero-words > * { position: relative; max-width: 40rem; margin-inline: auto; text-align: center; }
  .hero-screen { order: 1; }
  .captions { order: 2; margin-top: var(--s-3); }
  .hero .lede { margin: 0 auto; }
}
/* The device toggle over the frame, the frame between its two arrows, the six names under
   all three; the toggle, the arrows and the names work by the page's script and are not
   drawn until it runs. The frame is the phone or the iPad by data-device, and --frame is
   the width of the one showing. */
.hero-screen {
  --phone: min(300px, 72vw);
  /* As wide as the page allows beside the arrows, never past the words' edge. */
  --pad: min(600px, 92vw, 100vw - 2 * var(--s-4) - 2 * 44px - 2 * var(--s-2));
  --frame: var(--phone);
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: var(--s-2);
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.hero-screen[data-device="pad"] { --frame: var(--pad); }
.hero-screen[data-device="phone"] .pad, .hero-screen[data-device="pad"] .phone { display: none; }
.hero:not(.js) .arrow, .hero:not(.js) .names, .hero:not(.js) .device { display: none; }
@media (min-width: 1000px) {
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--s-5);
    padding-top: var(--s-5);
    padding-bottom: var(--s-6);
  }
  /* The question fits its column on two lines: its longer line is 7.44 times its size
     wide, so the size is the column over 7.6, measured by the column itself so a scrollbar
     cannot break it. */
  .hero-words { container-type: inline-size; }
  .hero h1 { font-size: clamp(2.75rem, 100cqi / 7.6, 4rem); }
  /* The frame's row is always the phone's height (its picture is 1951 by 900 inside 13px
     of bezel), and the names' row always two rows of names, their height between the
     arrows beside the iPad, so the words beside the column never move when the iPad,
     shorter, takes the phone's place centred in its row. */
  .hero-screen {
    --phone: 360px;
    --ph: calc((var(--phone) - 26px) * 1951 / 900 + 26px);
    margin-top: 0;
    justify-self: end;
    grid-template-rows: auto var(--ph) calc(2 * 44px + 2px);
  }
  .frame { align-self: center; }
  .names { align-self: start; }
  /* The iPad takes the whole track, the arrows' room included, since the arrows then
     stand beside the names; 480px is the phone and its two arrows, so the words' column
     keeps its width. */
  .hero-screen[data-device="pad"] { --pad: 480px; }
  .hero-screen[data-device="pad"] .frame { grid-column: 1 / -1; }
  .hero-screen[data-device="pad"] .arrow { grid-row: 3; }
  .hero-screen[data-device="pad"] .names { grid-column: 2; }
}

/* One frame, a phone or an iPad in landscape drawn in CSS, which never moves; the real
   screenshots slide inside its glass, whose corners are --glass. */
.frame {
  grid-column: 2;
  grid-row: 2;
  width: var(--frame);
  padding: 11px;
  border-radius: 54px;
  --glass: 44px;
  background: var(--bezel);
  box-shadow: var(--phone-shadow);
}
.hero-screen[data-device="pad"] .frame { padding: 9px; border-radius: 28px; --glass: 20px; }
@media (min-width: 1000px) {
  .frame { padding: 13px; border-radius: 62px; --glass: 50px; }
  .hero-screen[data-device="pad"] .frame { padding: 11px; border-radius: 32px; --glass: 22px; }
}
.phone, .pad { display: block; }
.slide img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
}
.phone img { aspect-ratio: 1179 / 2556; }
.pad img { aspect-ratio: 2420 / 1668; }
/* The tilt toward the pointer, set by the page's script on a desktop with a pointer. */
@media (hover: hover) and (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .frame {
    transform: perspective(1200px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
    transition: transform 0.3s ease-out;
  }
}

/* The sections. */
.section { padding: var(--s-5) 0; }
@media (min-width: 860px) { .section { padding: var(--s-6) 0; } }

.section h2 {
  font-size: clamp(1.75rem, 2.4vw + 0.8rem, 2.5rem);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}
.what p { max-width: 38rem; font-size: 1.125rem; }
.section .region { margin-top: var(--s-3); color: var(--muted); }

.what {
  border-top: 1px solid var(--line);
}
@media (max-width: 859.98px) {
  .what .wrap { text-align: center; }
  .what p { margin-left: auto; margin-right: auto; }
}
@media (min-width: 860px) {
  .what .wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--s-5);
    align-items: start;
  }
  .what h2 { margin-bottom: 0; }
}

/* The ribbon: the kinds in one line across the whole width, a gold dot between them,
   sliding slowly and pausing under a finger or a pointer. */
.ribbon {
  margin-top: var(--s-5);
  overflow: hidden;
  font-size: clamp(1.375rem, 2.2vw + 0.6rem, 1.75rem);
  font-weight: 600;
  color: var(--accent-ink);
  white-space: nowrap;
}
.ribbon ul { display: flex; width: max-content; }
.ribbon li { display: flex; align-items: center; }
.ribbon li::after {
  content: "";
  display: block;
  width: 0.4em;
  height: 0.4em;
  margin: 0 0.9em;
  border-radius: 50%;
  background: var(--gold);
}
/* Still, the ribbon is the fifteen kinds once, wrapped and centred inside the wrap's
   inset. */
@media (prefers-reduced-motion: reduce) {
  .ribbon { padding: 0 var(--s-2); }
  .ribbon ul { width: auto; flex-wrap: wrap; justify-content: center; row-gap: var(--s-1); }
  .ribbon li:nth-child(n + 16), .ribbon li:nth-child(15)::after { display: none; }
}

/* The three panels, in the app's own card; their section sits under the ribbon at one
   section's gap, not two. */
.panels-section { padding-top: 0; }
.panels {
  display: grid;
  gap: var(--s-2);
}
@media (min-width: 720px) {
  .panels { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
}
.panel {
  background: var(--card);
  border-radius: 20px;
  padding: var(--s-3);
  box-shadow: var(--shadow);
}
.panel h3 {
  font-size: 1.25rem;
  margin-bottom: var(--s-1);
}
.panel p { color: var(--muted); }

/* The reel: the six screens side by side inside the frame's glass, clipped to its corners,
   a scroll container that snaps one at a time, swiped on a phone or a trackpad. */
.reel {
  display: flex;
  overflow-x: auto;
  border-radius: var(--glass);
  /* Its own layer, so Safari clips it to the corners while the frame tilts. */
  isolation: isolate;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel:focus-visible { outline-offset: -4px; }
.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The arrows beside the frame and the six names under it; the lit name and the
   caption follow the reel by the page's script. */
.arrow {
  grid-row: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.arrow.prev { grid-column: 1; }
.arrow.next { grid-column: 3; }
.arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.names, .device {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.names { grid-row: 3; margin-top: var(--s-2); }
/* The toggle is one pill holding its two halves, the chosen one filled, so it reads as a
   switch and not as two more names. */
.device {
  grid-row: 1;
  margin-bottom: var(--s-2);
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.names button, .device button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.names button:hover, .device button:hover, .arrow:hover { color: var(--ink); }
.names button[aria-current="true"] {
  color: var(--accent-ink);
  background: var(--tint);
}
.device button[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent-ink);
}
/* On a phone there are no arrows and no toggle: the iPad's picture cannot be read at this
   width, so the phone's frame always shows, whatever device a wider window had chosen. */
@media (max-width: 599.98px) {
  .arrow, .device { display: none; }
  .hero-screen {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .hero-screen[data-device="pad"] { --frame: var(--phone); }
  .hero-screen[data-device="pad"] .phone { display: block; }
  .hero-screen[data-device="pad"] .pad { display: none; }
  .hero-screen[data-device="pad"] .frame { padding: 11px; border-radius: 54px; --glass: 44px; }
  .frame, .names { grid-column: 1; }
  /* Six names in two even rows of three. */
  .names { max-width: 16rem; }
}
/* The caption not in view leaves the page for a screen reader as it fades for the eye. */
.js .captions > p { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.js .captions > p.on { opacity: 1; visibility: visible; transition: opacity 0.25s; }

.close {
  background: var(--band);
  color: var(--on-accent);
  text-align: center;
}
.close h2 {
  font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-3);
}
/* From 1000px the line stands on one row, sized to the wrap's width: the line is 12.4
   times its size wide, so the size is the wrap over 12.5, and never past the question's
   cap, which stays the page's largest words. */
@media (min-width: 1000px) {
  .close .wrap { container-type: inline-size; }
  .close h2 {
    white-space: nowrap;
    font-size: min(4rem, 100cqi / 12.5);
  }
}
.close p {
  margin: 0 auto;
  max-width: 38rem;
  color: var(--on-accent-soft);
  font-size: 1.125rem;
}

/* The foot is the signature's measure. */
.foot {
  container-type: inline-size;
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  font-size: 0.95rem;
  color: var(--muted);
  overflow: hidden;
}
/* The signature: the wordmark at a giant size, as wide as the wrap allows, ghosted. The
   sun and the letters are 4.45em wide, and the rays reach 0.31em left of the sun as they
   start to turn, which the indent keeps inside the wrap: 4.8em in all. */
.sign {
  --gutter: var(--s-2);
  max-width: 1120px;
  /* The rays reach 0.29em past the letters' box; the margins give them air. */
  margin: 0.3em auto calc(0.3em + var(--s-2));
  padding: 0 var(--gutter);
  text-indent: 0.31em;
  font-size: min(16rem, (min(100cqi, 1120px) - 2 * var(--gutter)) / 4.8);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--accent);
  opacity: 0.4;
}
@media (min-width: 720px) { .sign { --gutter: var(--s-4); } }
/* On the dark ground the gold at 0.4 reads brown; fainter, it reads as a ghost. */
@media (prefers-color-scheme: dark) { .sign { opacity: 0.28; } }
.foot ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  align-items: center;
  column-gap: var(--s-3);
}
/* Each link a 44px tap target. */
.foot a { color: inherit; display: inline-block; padding: 10px 0; }

/* The privacy policy, read as a page. */
.policy {
  padding-top: var(--s-4);
  padding-bottom: var(--s-6);
  max-width: 40rem;
}
.policy h1 {
  font-size: clamp(2rem, 4vw + 0.6rem, 2.75rem);
  line-height: 1.1;
  margin-bottom: var(--s-1);
}
.policy .dated { color: var(--muted); margin-bottom: var(--s-4); }
.policy h2 {
  font-size: 1.375rem;
  margin: var(--s-4) 0 var(--s-1);
}
.policy p + p { margin-top: 12px; }

/* Motion: the hero arrives once, line by line and the frame last; below it the ribbon
   slides, each section rises as it scrolls into view, the panels deal in and the signature's
   rays turn; none of it under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes turn {
    from { transform: rotate(-24deg); }
    to { transform: none; }
  }
  @keyframes drift {
    from { opacity: 0; translate: 0 28px; }
    to { opacity: 1; translate: none; }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes slide {
    to { transform: translateX(-50%); }
  }
  @keyframes deal {
    from { opacity: 0; transform: translateY(40px) rotate(var(--tilt)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes spin {
    from { transform: rotate(-45deg); }
    to { transform: none; }
  }
  .hero h1 span, .hero .sub, .hero .captions, .hero .coming {
    animation: arrive 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero h1 span:nth-child(2) { animation-delay: 0.08s; }
  .hero .sub { animation-delay: 0.16s; }
  .hero .captions { animation-delay: 0.28s; }
  .hero .coming { animation-delay: 0.4s; }
  .wordmark .rays { animation: turn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  /* The frame drifts in by translate, its transform being the tilt's. */
  .hero .frame { animation: drift 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
  .ribbon ul { animation: slide 40s linear infinite; }
  .ribbon:hover ul, .ribbon:active ul { animation-play-state: paused; }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
      animation-duration: 1ms;
    }
    /* Each panel on its own timeline, the second and third starting later in the entry. */
    .panel {
      animation: deal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
      animation-duration: 1ms;
      --tilt: -3deg;
    }
    .panel:nth-child(2) { animation-range: entry 12% entry 57%; --tilt: 2deg; }
    .panel:nth-child(3) { animation-range: entry 24% entry 69%; --tilt: -2deg; }
    .sign { view-timeline: --sign block; }
    .sign .rays {
      animation: spin linear both;
      animation-timeline: --sign;
      animation-range: entry 0% entry 100%;
      animation-duration: 1ms;
    }
  }
}