/* FRAMEKID — the site wears what the app wears: the three colours of the mark, each with one job
   (blue = where you are, teal = the one thing to do, rose = what is special), the dot font for
   titles, Geist Mono for everything else, square corners and hairlines. Everything stands on the
   middle axis: titles, text, rows of pictures. */

@font-face { font-family: "Framekid Dots Fine"; src: url("../fonts/framekid-dots-fine.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Geist Mono"; font-weight: 400; src: url("../fonts/geist-mono-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Geist Mono"; font-weight: 500; src: url("../fonts/geist-mono-medium.woff2") format("woff2"); font-display: swap; }

:root {
  --paper: #F0EEE9;
  --ink: #0A0A0B;
  --blue: #235597;
  --blue-mark: #5F96DC;
  --teal: #469CAE;
  --rose: #C46479;

  /* The dot type comes in three sizes and no others: the hero, a section's title, a card's name. */
  --t-hero: clamp(50px, 15.5vw, 190px);
  --t-title: clamp(30px, 9.6vw, 84px);
  --t-card: clamp(24px, 2.3vw, 30px);

  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 48px);
  --bar: 60px;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --dots: "Framekid Dots Fine", var(--mono);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--blue-mark); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--bar) + 12px); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ── Type ── */
.dots { font-family: var(--dots); font-weight: 400; text-transform: uppercase; line-height: .94; letter-spacing: 0; }
.label { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.label--dim { opacity: .6; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; }
.title { font-size: var(--t-title); }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 10px; vertical-align: middle; position: relative; top: -1px; }
.dot--blue { background: var(--blue); }
.dot--teal { background: var(--teal); }
.dot--rose { background: var(--rose); }
.dot--ink { background: var(--ink); }
.dot--paper { background: var(--paper); }

/* ── Buttons: the app's, square and in capitals ── */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 12px 28px;
  font: 500 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--go { background: var(--teal); color: var(--ink); }
.btn--go:hover { background: #55AFC1; }
.btn--line { border-color: currentColor; }
.btn--line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--small { min-height: 38px; padding: 8px 16px; font-size: 11px; white-space: nowrap; }
.btn__note { font-size: 9px; letter-spacing: .12em; opacity: .7; }

/* ── The bar at the top ── */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--bar); padding: 0 var(--gut);
  background: var(--paper); border-bottom: 1px solid rgba(10, 10, 11, .14);
}
.lockup { display: inline-flex; flex: none; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.lockup__mark { width: 30px; height: 22.5px; }
.lockup__name { font: 400 24px/1 var(--dots); letter-spacing: 0; padding-top: 2px; }
.bar__links { display: flex; gap: 30px; }
.bar__links a { position: relative; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 10px 0; opacity: .62; transition: opacity .15s; }
.bar__links a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); opacity: 0; transition: opacity .15s; }
.bar__links a:hover, .bar__links a.is-here { opacity: 1; }
.bar__links a:hover::after, .bar__links a.is-here::after { opacity: 1; }
.bar__toggle { display: none; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(10, 10, 11, .3); background: none; cursor: pointer; position: relative; }
.bar__toggle i { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--ink); transition: transform .2s, top .2s; }
.bar__toggle i:first-child { top: 15px; }
.bar__toggle i:last-child { top: 22px; }
.bar__toggle[aria-expanded="true"] i:first-child { top: 18px; transform: rotate(45deg); }
.bar__toggle[aria-expanded="true"] i:last-child { top: 18px; transform: rotate(-45deg); }

/* ── Hero ── */
.hero { padding-top: clamp(36px, 6vw, 84px); overflow: hidden; }
.hero .wrap, .all__hero .wrap { display: grid; justify-items: center; text-align: center; }
.hero__kicker { margin-bottom: clamp(18px, 2.4vw, 30px); }
.hero__title { font-size: var(--t-hero); line-height: .88; }
.hero__row { display: grid; justify-items: center; gap: 28px; margin-top: clamp(24px, 3.4vw, 44px); }
.hero__row .lead { max-width: 620px; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The mark, as large as the page: three cards folded back and forth. What the app makes stands on it. */
.stage { position: relative; height: clamp(380px, 46vw, 660px); margin-top: clamp(84px, 13vw, 190px); }
.stage__card { position: absolute; top: 0; bottom: 0; width: 33.5%; }
.stage__card--1 { left: 0; background: var(--blue); clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%); }
.stage__card--2 { left: 33.33%; background: var(--teal); clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%); }
.stage__card--3 { left: 66.66%; width: 33.34%; background: var(--rose); clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%); }
.stage__phone { position: absolute; left: 50%; top: -22%; height: 116%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .38)); }
.stage__slide { position: absolute; width: 15.5%; box-shadow: 0 22px 44px rgba(0, 0, 0, .3); }
.stage__slide--a { left: 5.5%; top: 17%; rotate: -6deg; }
.stage__slide--b { left: 20.5%; top: 42%; width: 13%; rotate: 4deg; }
.stage__slide--c { right: 20.5%; top: 8%; width: 13%; rotate: 5deg; }
.stage__slide--d { right: 5.5%; top: 34%; rotate: -4deg; }

@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes rise-phone { from { opacity: 0; transform: translate(-50%, 48px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes unfold { from { transform: scaleX(.02); opacity: 0; } to { transform: none; opacity: 1; } }
.stage__card { animation: unfold .7s cubic-bezier(.2, .8, .2, 1) both; }
.stage__card--1 { transform-origin: right center; }
.stage__card--2 { transform-origin: center; animation-delay: .06s; }
.stage__card--3 { transform-origin: left center; animation-delay: .12s; }
.stage__phone { animation: rise-phone .8s .25s cubic-bezier(.2, .8, .2, 1) both; }
.stage__slide { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.stage__slide--a { animation-delay: .45s; }
.stage__slide--b { animation-delay: .55s; }
.stage__slide--c { animation-delay: .6s; }
.stage__slide--d { animation-delay: .5s; }

/* ── Ticker ── */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; height: 52px; display: flex; align-items: center; }
.ticker__run { display: inline-flex; align-items: center; gap: 26px; padding-left: 26px; white-space: nowrap; animation: tick 60s linear infinite; }
.ticker__run span { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ticker__run i { width: 7px; height: 7px; flex: none; }
.t1 { background: var(--blue-mark); } .t2 { background: var(--teal); } .t3 { background: var(--rose); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── Slides: every section opens like the editor's title row, name left, count right ── */
.slide { --fg: var(--ink); --bg: var(--paper); --line: rgba(10, 10, 11, .18); background: var(--bg); color: var(--fg); padding-bottom: clamp(64px, 9vw, 132px); }
.slide--ink { --fg: var(--paper); --bg: var(--ink); --line: rgba(240, 238, 233, .2); }
.slide--blue { --fg: var(--paper); --bg: var(--blue); --line: rgba(240, 238, 233, .32); }
.slide--teal { --bg: var(--teal); --line: rgba(10, 10, 11, .28); }
.slide--rose { --bg: var(--rose); --line: rgba(10, 10, 11, .28); }
.slidehead { display: flex; justify-content: space-between; padding: 20px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: clamp(44px, 7vw, 104px); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

.split { display: grid; justify-items: center; text-align: center; gap: clamp(24px, 3vw, 36px); }
.split__copy { display: grid; justify-items: center; gap: 14px; max-width: 620px; }
.split__copy p:not(.lead) { opacity: .78; }

.facts { display: grid; width: 100%; gap: 0; margin-top: 10px; border-top: 1px solid var(--line); }
.facts li { display: grid; justify-items: center; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; opacity: .9; }
.facts b { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* ── The runner: one template, travelling sideways as the page scrolls ── */
.runner { --h: clamp(260px, 40vw, 520px); margin: clamp(48px, 7vw, 104px) 0 calc(-1 * clamp(64px, 9vw, 132px)); padding: 56px 0 0; background: var(--blue); color: var(--paper); overflow: hidden; }
.runner__track { position: relative; height: var(--h); width: max-content; will-change: transform; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.runner__track img { height: 100%; width: auto; max-width: none; }
.runner figcaption { padding: 18px var(--gut) 22px; opacity: .8; text-align: center; }
.seam { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, .7); mix-blend-mode: difference; pointer-events: none; }
.seam:first-child { border-left-color: transparent; }
.runner .seam::before { content: attr(data-n); position: absolute; left: 0; top: -30px; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #fff; }

/* ── Chips: the row from the app's Create page ── */
.chips { display: flex; width: max-content; max-width: 100%; margin: clamp(32px, 4.4vw, 56px) auto 0; overflow-x: auto; scrollbar-width: none; padding-left: 1px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; margin-left: -1px; padding: 13px 18px; background: none; color: inherit; border: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.chip:hover { background: rgba(240, 238, 233, .08); }
.chip.is-on { background: var(--blue); border-color: var(--blue); color: var(--paper); position: relative; }

/* ── The shelf: a genre, its five covers and the whole carousel of the one that is chosen.
   It is never taller than the window, so choice and examples are in sight together. ── */
.shelf {
  --cover: min(clamp(84px, 34svh, 290px), calc((min(100vw, var(--wrap)) - 2 * var(--gut) - 4 * var(--gap)) / 5 * 1.25));
  --gap: clamp(6px, 1.2vw, 16px);
  --rh: clamp(170px, calc(100svh - var(--bar) - var(--cover) - 196px), 330px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 52px); scroll-margin-top: calc(var(--bar) + 10px);
}
.shelf .chips { margin-top: 0; }
.shelf > * { min-width: 0; }
.shelf__covers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cover { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; height: var(--cover); aspect-ratio: 4 / 5; }
.cover[hidden] { display: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.is-on { outline: 2px solid var(--paper); outline-offset: 3px; }
.cover::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue-mark); opacity: 0; }
.cover.is-on::after { opacity: 1; }
.shelf__caption { display: grid; justify-items: center; gap: 8px; margin-top: 12px; text-align: center; }
.shelf__name { font-size: var(--t-card); line-height: 1; }
.reel__scroll { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.reel__scroll::-webkit-scrollbar { display: none; }
.reel__scroll.is-held { cursor: grabbing; }
.reel__strip { position: relative; height: var(--rh); width: max-content; }
.reel__strip img { height: 100%; width: auto; max-width: none; -webkit-user-drag: none; user-select: none; }
.shelf__strip { margin: 0 auto; }
.shelf__strip img { transition: opacity .25s; }
.shelf__strip.is-loading img { opacity: 0; }
.reels__more { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 640px; line-height: 1.7; text-align: center; }

/* ── Tools: every card is the same: a 4:5 picture, a label, a name, a few lines ── */
/* Hairlines between the cards, as between the lines of the list page. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(44px, 6vw, 88px); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.card { display: grid; gap: 12px; align-content: start; justify-items: center; text-align: center; padding: clamp(16px, 2.2vw, 32px) clamp(16px, 2.2vw, 32px) clamp(28px, 3vw, 44px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card p:not(.label) { opacity: .76; max-width: 44ch; }
.card__name { font-size: var(--t-card); line-height: 1; }
.card__pic { position: relative; margin: 0 0 8px; aspect-ratio: 4 / 5; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: #E4E1DA; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; }
.card__pic figcaption { position: absolute; left: 14px; top: 14px; color: #fff; mix-blend-mode: difference; }
.card__pic--teal { background: var(--teal); }
.card__pic--rose { background: var(--rose); }
.card__pic--blue { background: var(--blue); }
/* What you get stands beside where you do it: the result on the left, the tool in the app on the right. */
.card__pair { justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.card__pair .card__pic { margin: 0; }
.card__pic--halves { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.card__half { display: flex; align-items: flex-end; justify-content: center; min-width: 0; overflow: hidden; }
.card__half--teal { background: var(--teal); }
.card__half--rose { background: var(--rose); }
.card__pic--halves .card__half img { width: auto; height: 86%; max-width: none; object-fit: contain; margin-bottom: 5%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .3)); }
.card__pic--story { background: var(--teal); align-items: center; }
.card__pic--story img { width: auto; height: 88%; object-fit: contain; box-shadow: 0 18px 30px rgba(0, 0, 0, .3); }
/* The phone stands in the card cut above its status bar and below its controls: the slide and the
   controls are both in view, at a size where the controls can still be read. */
.card__pic--app { background: #17171A; align-items: flex-start; }
.card__pic--app img { width: 72%; height: auto; object-fit: contain; margin-top: -10.5%; }
/* A clip from the app lies on the phone's screen: the frame is the simulator's, the screen is the recording. */
.phone { position: relative; width: 72%; margin-top: -10.5%; }
.phone img { width: 100%; margin: 0; }
.phone__screen { position: absolute; left: 3.9%; top: 1.87%; width: 92.2%; height: 96.26%; border-radius: 15.4% / 7.1%; object-fit: cover; background: #000; }
/* In the middle of the part of the phone that shows. */
.play { position: absolute; left: 50%; top: 48%; width: 54px; height: 54px; margin: -27px 0 0 -27px; padding: 0; border: 0; border-radius: 50%; background: var(--teal); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .18s ease, opacity .2s ease; }
.play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.play:hover { transform: scale(1.08); }
.is-playing .play { opacity: 0; pointer-events: none; }
.card__pic--app figcaption { left: 0; right: 0; top: auto; bottom: 0; padding: 12px 14px 13px; background: #17171A; mix-blend-mode: normal; color: rgba(240, 238, 233, .7); }
.cards--plain { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); }
.also { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(36px, 4.4vw, 60px); }
.also li { padding: 9px 13px; border: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* ── Devices ── */
.family { position: relative; margin-top: clamp(48px, 7vw, 104px); padding-bottom: 7%; }
.family__mac { width: 80%; margin: 0 auto; border-radius: 12px; border: 1px solid rgba(10, 10, 11, .25); box-shadow: 0 40px 80px rgba(60, 10, 25, .45); }
.family__ipad { position: absolute; left: 0; bottom: 0; width: 29%; filter: drop-shadow(0 30px 50px rgba(60, 10, 25, .5)); }
.family__iphone { position: absolute; right: 0; bottom: -3%; width: 13.5%; filter: drop-shadow(0 30px 50px rgba(60, 10, 25, .5)); }

/* ── iPhone Duo ── */
.duo { display: grid; justify-items: center; gap: clamp(40px, 5vw, 64px); }
.duo__copy { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 620px; }
.duo__copy p:not(.lead):not(.badge) { opacity: .8; }
.badge { justify-self: center; background: var(--ink); color: var(--paper); padding: 9px 13px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.duo__devices { display: flex; width: 100%; max-width: 980px; align-items: flex-end; justify-content: center; gap: 4%; }
.pose { margin: 0; display: grid; gap: 16px; justify-items: center; }
.pose figcaption { position: relative; z-index: 1; }
.pose img { width: 100%; }
.pose > img, .fold { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.pose--closed { width: 23%; }
.pose--fold, .pose--open { width: 34%; }
/* Half folded: the upper half of the screen stands, the lower half lies. Both are the one screenshot. */
.fold { width: 100%; perspective: 1000px; perspective-origin: 50% 20%; }
.fold__half { aspect-ratio: 1100 / 770; overflow: hidden; }
.fold__half--lower { transform-origin: top center; transform: rotateX(56deg); margin-bottom: -22%; }
.fold__half--lower img { transform: translateY(-50%); filter: brightness(.9); }

/* ── Pricing ── */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(44px, 6vw, 88px); border: 1px solid var(--line); }
.plan { display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; padding: clamp(20px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.plan:first-child { border-left: 0; }
.plan__price { font-size: calc(var(--t-card) * 1.5); margin-top: 14px; }
.plan__note { font-size: 13px; opacity: .65; }
.plan ul { display: grid; width: 100%; gap: 0; margin-top: 14px; border-top: 1px solid var(--line); }
.plan li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.plan--best { background: var(--ink); color: var(--paper); --line: rgba(240, 238, 233, .2); }
.plan__flag { display: inline-block; margin-left: 8px; padding: 4px 7px; background: var(--rose); color: var(--ink); font-size: 10px; letter-spacing: .12em; }
.plans__small { margin-top: 18px; text-align: center; }

/* ── Get ── */
/* The mark keeps a ground none of its cards has: paper or ink, never one of the three colours. */
.get { background: var(--paper); padding: clamp(64px, 9vw, 132px) 0; }

/* ── Foot ── */
.foot { background: var(--ink); color: var(--paper); padding: clamp(48px, 6vw, 80px) 0 28px; }
.foot__grid { display: grid; justify-items: center; text-align: center; gap: 32px; }
.foot__brand { display: grid; gap: 14px; justify-items: center; }
.foot__brand .lockup { margin-right: 0; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.foot__links a, .foot__links span { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; opacity: .7; }
.foot__links a:hover { opacity: 1; }
.foot__links span { opacity: .4; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px 32px; margin-top: 56px; padding-top: 18px; border-top: 1px solid rgba(240, 238, 233, .16); }

/* ── Everything: the whole list, one line per thing ── */
.all { counter-reset: thing; }
.all__hero { padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 80px); }
/* "Everything." has eleven letters: on a narrow screen the hero size is cut down until they fit the line. */
.all__hero .hero__title { font-size: min(var(--t-hero), calc((100vw - 2 * var(--gut)) / 6.7)); }
.all__hero .lead { max-width: 620px; margin-top: clamp(22px, 3vw, 40px); }
.jump { position: sticky; top: var(--bar); z-index: 40; background: var(--paper); border-top: 1px solid rgba(10, 10, 11, .14); border-bottom: 1px solid rgba(10, 10, 11, .14); }
.jump__run { display: flex; width: max-content; max-width: 100%; margin: 0 auto; padding: 10px var(--gut) 10px calc(var(--gut) + 1px); overflow-x: auto; scrollbar-width: none; --line: rgba(10, 10, 11, .18); }
.jump__run::-webkit-scrollbar { display: none; }
.jump .chip { text-decoration: none; padding: 11px 15px; }
.jump .chip:hover { background: rgba(10, 10, 11, .06); }
.jump .chip.is-on:hover { background: var(--blue); }
.group { scroll-margin-top: calc(var(--bar) + 58px); }
.group__head { padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4.4vw, 60px); }
.group__head .wrap { display: grid; justify-items: center; text-align: center; gap: 16px; }
.group__head .lead { max-width: 30em; }
.group__head--ink { background: var(--ink); color: var(--paper); }
.group__head--blue { background: var(--blue); color: var(--paper); }
.group__head--teal { background: var(--teal); }
.group__head--rose { background: var(--rose); }
/* A row of pictures over each list: as many as stand in one line, never more. */
.rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: clamp(20px, 3vw, 40px); }
.rail img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.things { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(20px, 3vw, 40px) 0 clamp(56px, 8vw, 112px); border-top: 1px solid rgba(10, 10, 11, .18); border-left: 1px solid rgba(10, 10, 11, .18); }
.thing { counter-increment: thing; text-align: center; padding: 18px 20px 24px; border-right: 1px solid rgba(10, 10, 11, .18); border-bottom: 1px solid rgba(10, 10, 11, .18); }
.thing dt { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.thing dt::before { content: counter(thing, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: 10px; opacity: .45; }
.thing dd { margin: 8px 0 0; font-size: 14px; line-height: 1.6; opacity: .74; }
.total { background: var(--ink); color: var(--paper); padding: clamp(72px, 11vw, 160px) 0; }
.total .wrap { display: grid; gap: 22px; justify-items: center; text-align: center; }
.total__n::before { content: counter(thing); }
.total .lead { max-width: 30em; opacity: .85; }
.total .btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tools__all { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 1000px) { .things { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rail img:nth-child(n + 5) { display: none; } }
@media (max-width: 560px) { .things { grid-template-columns: 1fr; } .thing { padding: 16px 16px 20px; } .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rail img:nth-child(n + 4) { display: none; } }

/* ── Legal pages: one column of text, centred on the page like everything else, set to read ── */
.legal { padding: clamp(36px, 6vw, 84px) 0 clamp(64px, 9vw, 120px); }
.legal__head { display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.legal__body { max-width: 720px; margin: 0 auto; }
.legal__body h2 { margin: 48px 0 14px; padding-top: 18px; border-top: 1px solid rgba(10, 10, 11, .18); font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.legal__body h3 { margin: 26px 0 8px; font: 500 14px/1.4 var(--mono); }
.legal__body p, .legal__body li { font-size: 14px; line-height: 1.75; opacity: .85; }
.legal__body p + p { margin-top: 12px; }
.legal__body ul { display: grid; gap: 10px; margin: 12px 0; padding-left: 18px; list-style: square; }
.legal__body a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__lead { font-size: clamp(16px, 1.4vw, 18px) !important; line-height: 1.55 !important; opacity: 1 !important; margin-bottom: 14px; }
.legal details { border-bottom: 1px solid rgba(10, 10, 11, .18); }
.legal details:first-of-type { border-top: 1px solid rgba(10, 10, 11, .18); }
.legal summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; font: 500 13px/1.5 var(--mono); }
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after { content: "+"; position: absolute; right: 2px; top: 14px; font-size: 18px; line-height: 1; }
.legal details[open] summary::after { content: "–"; }
.legal details p { padding: 0 0 18px; }

/* ── Contact form ── */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; }
.form__field { display: grid; gap: 8px; }
.form__field--wide, .form__note, .form .btn, .form__status { grid-column: 1 / -1; }
.form input, .form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(10, 10, 11, .3); border-radius: 0; background: #F7F6F2; color: var(--ink); font: 400 14px/1.5 var(--mono); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--blue-mark); outline-offset: 0; border-color: transparent; }
.form textarea { resize: vertical; min-height: 140px; }
.form__trap { position: absolute; left: -9999px; }
.form__note { font-size: 12px !important; opacity: .65 !important; }
.form .btn { justify-self: center; min-width: 240px; }
.form__status { text-align: center; min-height: 1.4em; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } .form .btn { justify-self: stretch; } }

/* ── Things come in as they are reached ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Narrower screens ── */
@media (max-width: 1100px) {
  .cards--plain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .bar__links { position: absolute; left: 0; right: 0; top: var(--bar); display: none; flex-direction: column; gap: 0; padding: 6px var(--gut) 14px; background: var(--paper); border-bottom: 1px solid rgba(10, 10, 11, .14); }
  .bar__links.is-open { display: flex; }
  .bar__links a { padding: 15px 0; border-bottom: 1px solid rgba(10, 10, 11, .1); opacity: 1; }
  .bar__links a::after { display: none; }
  .bar__toggle { display: block; }
  .bar { gap: 12px; }
}
@media (max-width: 700px) {
  .cards, .cards--plain { grid-template-columns: 1fr; }
  /* Too little room for the bar: the dark phone says it by itself. */
  .card__pic--app figcaption { display: none; }
  /* Picture and clip one under the other: side by side they are too small to see on a phone. */
  .card__pair { grid-template-columns: 1fr; gap: 10px; }
  .play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .hero__on { display: none; }
  .hero__cta .btn { flex: 1 1 100%; }
  .stage { height: 112vw; margin-top: 26vw; }
  .stage__phone { top: -14%; height: 96%; }
  .stage__slide { width: 35%; }
  .stage__slide--a { left: -5%; top: 6%; }
  .stage__slide--d { right: -5%; top: 46%; }
  .stage__slide--b, .stage__slide--c { display: none; }
  .family { padding-bottom: 34%; }
  .family__mac { width: 100%; border-radius: 7px; }
  .family__ipad { width: 44%; left: 2%; }
  .family__iphone { width: 22%; left: auto; right: 8%; bottom: 0; }
  .duo__devices { gap: 3%; }
  .plans { grid-template-columns: 1fr; }
  .plan { border-left: 0; }
  .plan + .plan { border-top: 1px solid var(--line); }
}

@media (max-width: 380px) {
  /* No room beside the logo: the hero's own button is one thumb away. */
  .bar .btn--small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__run, .stage__card, .stage__phone, .stage__slide { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .runner { overflow-x: auto; }
}