/* The region pages (src/pages/home.mjs), after site.css: the tour with its live phone, the
   galleries of every screen, and the chapters told in words.

   With motion, the tour's phone is pinned (<html class="pin">, set with "motion" by the
   head script) while the headline and the steps scroll by: beside them from 1024 px, above
   them below that, where the steps' words pass under the phone and fade as they climb
   towards it (site.js). Without motion or scripts, and on a screen too short for the phone
   and the longest step's words one above the other (site.js takes "pin" off), the tour is
   a plain list, each step with its own phone. Motion only moves transform and opacity. */

/* ------------------------------------------------------------------ the tour */

/* The glows reach past the page's sides; clipped, not scrolled to (clip keeps the pinned phone pinned). */
#main {
  overflow-x: clip;
}

.tour {
  /* The phone's height: the screen's, less room for the bar above and the badge below. */
  --phone-h: min(calc(100svh - var(--nav) - 132px), 900px);
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'hero stage'
    'steps stage';
  column-gap: clamp(40px, 5vw, 96px);
}

.tour-hero {
  grid-area: hero;
  min-height: 100svh;
  padding: calc(var(--nav) + 32px) 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-2);
}

.hero-title {
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(46px, 5.6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero-title .line {
  display: block;
}

.hero-lead {
  margin: 26px 0 34px;
  max-width: 34em;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.45;
  color: var(--ink-2);
}

.hero-hint {
  display: flex;
  align-items: baseline;
  /* The store note's gap (site.css): the two lines' words start on one edge. */
  gap: 9px;
  margin: 34px 0 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

.hint-dot {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-1px);
}

.motion .hint-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: ping 2.4s var(--ease) infinite;
}

/* A looping animation runs only while its part of the page is on the screen (.playing,
   site.js): the ping and the language strips ran on below and above it, for nothing. */
.motion [data-loop]:not(.playing) *,
.motion [data-loop]:not(.playing) *::after {
  animation-play-state: paused;
}

@keyframes ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

.hero-more {
  align-self: flex-start;
  margin-top: 22px;
}

.tour-steps {
  grid-area: steps;
}

.tour-step {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.step-copy {
  max-width: 580px;
}

.tour-step h2 {
  font-size: clamp(40px, 4.4vw, 72px);
}

.step-num {
  display: inline-block;
  min-width: 2.2em;
  margin-right: 10px;
  padding: 2px 0;
  border-radius: 99px;
  background: rgba(10, 132, 255, 0.14);
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}

.ticks {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  color: var(--ink-2);
  font-size: 17px;
}

.ticks li {
  position: relative;
  padding-left: 30px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.3l2.7 2.6L13 6.4'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}

/* The stage: the phone, pinned for the whole tour, with its glow and its progress. */
.tour-stage {
  grid-area: stage;
  align-self: start;
  position: sticky;
  top: var(--nav);
  height: calc(100svh - var(--nav));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The screen's own colours, blurred wide behind the phone (site.js sets the picture). */
.tour-ambient {
  position: absolute;
  inset: 8% -18%;
  pointer-events: none;
}

.tour-ambient i {
  /* A quarter of the size, blurred a quarter as far and drawn four times larger: the same
     glow, and a sixteenth of the pixels to blur each time the screen behind it changes,
     which on a phone cost frames in the middle of a scroll. Scaled to 90 %, centred. */
  position: absolute;
  left: 5%;
  top: 5%;
  width: 22.5%;
  height: 22.5%;
  background: center / cover no-repeat;
  filter: blur(16px) saturate(1.5);
  opacity: 0;
  transform: scale(4);
  transform-origin: 0 0;
  transition: opacity 1.1s var(--ease);
}

.tour-ambient i.on {
  opacity: 0.26;
}

.tour-glow {
  position: absolute;
  inset: -10% -40%;
  pointer-events: none;
}

.tour-glow i {
  position: absolute;
  inset: 0;
  background: radial-gradient(34% 40% at 50% 50%, color-mix(in srgb, var(--hue) 30%, transparent), transparent 72%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.tour-glow i.on {
  opacity: 1;
}

.tour-device {
  position: relative;
}

.tour-phone {
  /* The frame's height is its screen's (852 / 393 of 93.6 % of its width) and its bezels (6.4 %). */
  --w: calc(var(--phone-h) / 2.093);
}

.tour-rail {
  position: absolute;
  right: -34px;
  top: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  transform: translateY(-50%);
}

.tour-rail li {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition:
    transform 0.4s var(--ease),
    background-color 0.4s;
}

.tour-rail li.on {
  background: #fff;
  transform: scale(1.5);
}

/* The steps' words: the one beside the phone lit, the others waiting. */
.pin .tour-step .step-copy {
  opacity: 0.22;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease);
}

.pin .tour-step.on .step-copy {
  opacity: 1;
  transform: none;
}

.pin .step-phone {
  display: none;
}

/* ------------------------------------------------------------------ a phone's live app */

/* The posters sit over the live app until it is ready, and over it wherever its screen takes
   a tap to reach; they cross-fade from screen to screen. */

.posters {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity 0.6s var(--ease);
}

/* The next screen comes in over the last, which stays whole beneath it until it is covered
   and only then goes. Both fading at once showed two screens at half strength for most of
   a second, a double exposure on every step. */
.posters .poster {
  opacity: 0;
  transition: opacity 0s linear 0.4s;
}

.posters .poster[data-on] {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.36s var(--ease);
}

/* The app at an iPhone's 393 by 852 points over the whole screen, scaled to it (js/live.js);
   the island, the status bar and the home indicator are drawn over it. */
.live-viewport {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 393px;
  height: 852px;
  transform-origin: 0 0;
}

.live-viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.tour.live:not(.held) .posters,
.tour.hands-on .posters {
  opacity: 0;
  pointer-events: none;
}

.live-shield {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12%;
}

.live-shield span,
.shot-try > span {
  max-width: 86%;
  padding: 0.62em 1.15em;
  text-align: center;
  border-radius: 99px;
  background: rgba(40, 40, 44, 0.78);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
  font-size: clamp(11px, calc(var(--w) * 0.046), 14px);
  font-weight: 600;
}

/* On a desktop the pointer takes the phone by coming over it; the shield stays there for
   the keyboard, out of the pointer's way and seen only when it has the focus (js/site.js). */
.live-shield.keys {
  pointer-events: none;
}

.live-shield.keys > span {
  opacity: 0;
}

.live-shield.keys:focus-visible > span {
  opacity: 1;
}

.live-status {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 0.6s;
}

.tour.live .live-badge {
  opacity: 1;
}

.tour.hands-on .live-badge {
  display: none;
}

.live-done {
  padding: 8px 20px;
  border-radius: 99px;
  /* Apple's link blue: the white 14px word on it passes 4.5:1, which #0a84ff does not. */
  background: #0071e3;
  font-size: 14px;
  font-weight: 600;
}

.tour.hands-on .tour-phone {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 3px #101113,
    0 0 0 3px rgba(10, 132, 255, 0.55),
    0 40px 80px -20px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------------------------ the tour, narrow */

/* Under 1024 px the headline comes first; then the phone pins itself to the top of the
   screen, and each step's words pin themselves under it while their step scrolls by, the
   words of the step that is on shown, the others faded out. */
@media (max-width: 1023px) {
  .tour {
    /* Room under the phone for a step's words: the tallest step's, once site.js has
       measured them (--words on .tour), and this until then. */
    --words: clamp(236px, 36svh, 300px);
    --phone-h: clamp(280px, calc(100svh - var(--nav) - 38px - var(--words)), 640px);
    display: block;
    padding: 0;
  }
  .tour-hero {
    min-height: 0;
    padding: calc(var(--nav) + 40px) var(--gutter) 36px;
  }
  .tour-stage {
    z-index: 0;
    align-items: flex-start;
    padding-top: 14px;
  }
  .tour-rail,
  .live-badge {
    display: none;
  }
  .live-status {
    top: calc(100% + 12px);
    z-index: 4;
  }
  /* The steps pulled up under the pinned phone, their fixed heights and the pinned words
     are the pinned tour's alone: unpinned there is no pinned phone (.tour-stage is
     hidden), and these left the first step over the headline and every step's words
     pinned over its own phone. Without .pin the steps stay a plain list, each with its own
     phone (the tour, unpinned, below). */
  .pin .tour-steps {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--nav) - 100svh);
    pointer-events: none;
  }
  .pin .tour-step {
    display: block;
    min-height: 0;
    height: 78svh;
    padding: 0 var(--gutter);
  }
  .pin .tour-step:first-child {
    padding-top: calc(38px + var(--phone-h));
    height: calc(78svh + 38px + var(--phone-h));
  }
  .pin .tour-step .step-copy {
    position: sticky;
    top: calc(var(--nav) + 38px + var(--phone-h));
    max-height: var(--words);
    pointer-events: auto;
  }
  .pin .tour-step .step-copy,
  .pin .tour-step.on .step-copy {
    transform: none;
    transition: none;
    /* Faded by the script every frame of a scroll: a layer of their own, so a phone changes
       its opacity without painting the words again. */
    will-change: opacity;
  }
  .tour-step h2 {
    font-size: clamp(28px, 7.2vw, 46px);
  }
  .tour-step .body {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.42;
  }
  .tour-step .kicker {
    margin-bottom: 8px;
    font-size: 15px;
  }
  .pin .tour-step .ticks {
    display: none;
  }
  .tour.hands-on .tour-steps {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 1023px) and (max-height: 700px) {
  .tour-step .body {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------ the tour, unpinned */

html:not(.pin) .tour {
  display: block;
}

html:not(.pin) .tour-stage {
  display: none;
}

html:not(.pin) .tour-hero {
  min-height: 0;
  padding-bottom: 24px;
}

html:not(.pin) .tour-step {
  min-height: 0;
  padding: 56px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  border-top: 0.5px solid var(--hairline);
}

html:not(.pin) .step-phone .iphone {
  --w: clamp(200px, 26vw, 300px);
}

/* Under 1024 px the tour loses its own side padding (the narrow tour above), so the steps
   bring the gutter themselves. */
@media (max-width: 1023px) {
  html:not(.pin) .tour-step {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

@media (max-width: 700px) {
  html:not(.pin) .tour-step {
    grid-template-columns: 1fr;
  }
  html:not(.pin) .step-phone {
    justify-self: center;
  }
}

/* ------------------------------------------------------------------ try it, full screen */

.try {
  padding: clamp(96px, 12vw, 180px) 0 0;
}

.try-inner {
  max-width: 820px;
  text-align: center;
}

.try .body {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.try-open {
  margin: 34px 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 980px;
  /* Apple's link blue: white text on it passes 4.5:1, which #0a84ff does not. */
  background: #0071e3;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}

.button:hover {
  background: #0077ed;
}

.try-note {
  margin: 26px auto 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ the galleries */

.explore-intro {
  padding-top: clamp(110px, 14vw, 200px);
}

.explore-intro h2 {
  font-size: clamp(44px, 6.4vw, 96px);
}

.explore {
  position: relative;
  padding-top: clamp(96px, 11vw, 170px);
}

.explore-head {
  max-width: var(--wrap);
}

.explore-head .body {
  max-width: 680px;
}

.rail {
  position: relative;
  margin-top: clamp(36px, 4.4vw, 60px);
}

.rail-track {
  --shot-w: clamp(220px, 21vw, 300px);
  margin: 0;
  padding: 20px var(--edge) 28px;
  list-style: none;
  display: flex;
  gap: clamp(22px, 2.6vw, 44px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}

.rail-track::-webkit-scrollbar {
  display: none;
}

.shot {
  flex: 0 0 auto;
  width: var(--shot-w);
  scroll-snap-align: start;
}

.shot .iphone {
  --w: var(--shot-w);
}

.shot-device {
  position: relative;
}

/* Every other phone a little higher, the gap breathing as the rail crosses the screen (--drift, from site.js). */
.motion .shot-device {
  transform: translate3d(0, calc(var(--drift, 0) * var(--rise, 12px)), 0);
  will-change: transform;
}

.shot:nth-child(even) {
  --rise: -12px;
}

.shot h3 {
  margin: 26px 0 0;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
}

.shot p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.shot .poster {
  z-index: 2;
  transition: opacity 0.6s var(--ease);
}

.shot.live .poster {
  opacity: 0;
}

.shot-try {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 13%;
  border-radius: calc(var(--shot-w) * 0.168);
}

/* A phone's call to try it, and while the app opens, the words that say so. */
.try-busy,
.opening .try-idle {
  display: none;
}

.opening .try-busy {
  display: inline;
}

.motion .opening .try-busy {
  animation: breathe 1.4s ease-in-out infinite;
}

@keyframes breathe {
  50% {
    opacity: 0.55;
  }
}

.shot.live .shot-try {
  display: none;
}

@media (hover: hover) {
  .shot-try > span {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 0.3s,
      transform 0.4s var(--ease);
  }
  .shot:hover .shot-try > span,
  .shot-try:focus-visible > span,
  .shot.opening .shot-try > span {
    opacity: 1;
    transform: none;
  }
}

.shot-done {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

.shot.live h3,
.shot.live p {
  visibility: hidden;
}

.shot.live .iphone {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 3px #101113,
    0 0 0 3px rgba(10, 132, 255, 0.55),
    0 40px 80px -20px rgba(0, 0, 0, 0.9);
}

.rail-paddles {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 6px;
}

.paddle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  transition:
    opacity 0.3s,
    background-color 0.3s;
}

.paddle:hover:not(:disabled) {
  background: #3a3a3c;
}

.paddle:disabled {
  opacity: 0.32;
  cursor: default;
}

.paddle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.explore .bento,
.explore .trio {
  margin-top: clamp(40px, 5vw, 72px);
}

/* ------------------------------------------------------------------ facts */

.facts {
  max-width: var(--wrap);
  margin: clamp(80px, 10vw, 140px) auto 0;
  padding: 36px var(--gutter) 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fact b {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fact span {
  color: var(--ink-2);
  font-size: 15px;
}

@media (max-width: 700px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
}

/* ------------------------------------------------------------------ numbers */

/* The demo season's own figures, as its stats screen shows them, counted up once seen. */

.numbers {
  padding: clamp(110px, 14vw, 200px) 0 clamp(40px, 6vw, 80px);
}

.numbers-head {
  max-width: 820px;
}

.counters {
  margin: clamp(48px, 6vw, 88px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.counter {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}

.counter dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}

.counter dd {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.18em;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Capped at 52 px, not 60: past 1100 px the columns stop growing (254 px each) while 3.5vw
   kept going, and the widest figure, the US season's "105,292 ft", ran into the next
   counter from about 1530 px. At 52 px it fits with room to spare. */
.counter b {
  /* Counting up in the width of its final figure (site.js), it grows towards its unit. */
  text-align: end;
  font-size: clamp(34px, 3.5vw, 52px);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #9fd0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.counter .unit {
  font-size: clamp(18px, 1.8vw, 28px);
  color: var(--ink-3);
  letter-spacing: -0.02em;
}

.numbers-note {
  margin: 36px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

@media (max-width: 800px) {
  .counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
}

/* ------------------------------------------------------------------ on the devices */

/* What only the phone and the watch show, told in words and a symbol on the app's own
   cards: its #1c1c1e surface, its tinted symbol tiles, no glass and no glow. Each panel
   carries a data-capture slot for a screen recording from the owner's devices. */

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}

.panel {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.feature {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 38vw, 520px);
  padding: clamp(28px, 3.6vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.feature-glyph {
  position: absolute;
  top: clamp(28px, 3.6vw, 52px);
  right: clamp(28px, 3.6vw, 52px);
  width: clamp(76px, 8vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 28%;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 16%, #1c1c1e);
}

.feature-glyph .glyph {
  width: 56%;
  height: 56%;
}

.feature .kicker {
  color: var(--hue);
}

.feature h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-size: clamp(32px, 3.6vw, 52px);
}

.feature .body {
  max-width: 560px;
  margin-top: 16px;
  font-size: clamp(17px, 1.35vw, 19px);
}

.trio {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 88px);
}

.trio-glyph {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 16%, #1c1c1e);
}

.trio-glyph .glyph {
  width: 28px;
  height: 28px;
}

/* A trio of one (Apple Health under the settings) keeps a readable line. */
.trio-item {
  max-width: 40em;
}

.trio h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.trio p {
  margin: 10px 0 0;
  color: var(--ink-2);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .bento,
  .trio {
    grid-template-columns: 1fr;
  }
  .feature {
    min-height: 0;
    padding-top: 150px;
  }
}

/* ------------------------------------------------------------------ your data */

.grid6 {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tile h3 {
  margin: 18px 0 6px;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.tile p {
  margin: 0;
  color: var(--ink-2);
}

.ic {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--surface-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

.ic-bolt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23FF453A'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fff'/%3E%3C/svg%3E");
}

.ic-out {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A84FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7 8l5-5 5 5'/%3E%3Cpath d='M5 13v6a2 2 0 002 2h10a2 2 0 002-2v-6'/%3E%3C/svg%3E");
}

.ic-cloud {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 19h10.5a4.5 4.5 0 00.4-9A6 6 0 006.2 9.5 4.8 4.8 0 007 19z' fill='%2364D2FF'/%3E%3C/svg%3E");
}

.ic-shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z' fill='%2330D158'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ic-map {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z' fill='%23FF9F0A'/%3E%3Cpath d='M9 3v15M15 6v15' stroke='%23000' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E");
}

.ic-in {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF5AF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5'/%3E%3Cpath d='M5 13v6a2 2 0 002 2h10a2 2 0 002-2v-6'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .grid6 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .grid6 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ languages */

.ticker {
  margin: 56px auto 0;
  text-align: center;
  padding: 0 var(--gutter);
  min-height: 190px;
}

.ticker-line {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition:
    opacity 0.45s,
    transform 0.45s var(--ease),
    filter 0.45s;
}

.ticker-name {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  transition: opacity 0.45s;
}

.ticker.swap .ticker-line {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(6px);
}

.ticker.swap .ticker-name {
  opacity: 0;
}

.marquee {
  margin-top: 40px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-row {
  display: flex;
  gap: 12px;
  width: max-content;
}

.motion .marquee-row {
  animation: slide 90s linear infinite;
}

.motion .marquee-row.reverse {
  animation-direction: reverse;
  animation-duration: 110s;
}

.marquee-row span {
  padding: 9px 16px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  white-space: nowrap;
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}