/* Gardlok website. Dark, built phone-first. Earlier designs are kept in Website-archive/, not deployed.
   The gradient loops are the only colour on the page: they are what a blurred screen looks like. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* Accessibility: a skip link, a visible focus ring everywhere, and text kept for screen readers only. */
.skip {
  position: fixed;
  top: .6rem;
  left: .6rem;
  z-index: 60;
  padding: .7rem 1rem;
  border-radius: .6rem;
  background: var(--fg, #ece9e2);
  color: #111;
  font-weight: 700;
  text-decoration: none;
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }
:focus-visible { outline: 2px solid #30d158; outline-offset: 3px; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:root {
  --bg: #0d0d0c;
  --fg: #ece9e2;
  --muted: #8d8a83;
  --rule: rgb(236 233 226 / .14);
  --light: #30d158;
  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace; /* the system's own: nothing to download */
  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --warm: url("media/gradient-warm.jpg");
  --lilac: url("media/gradient-lilac.jpg");
  /* The app's own blur of a real screen (www.blixtdunder.com), made by Scripts/website-blur.py */
  --screen: url("media/blur-desktop.jpg");
}
@media (orientation: portrait) and (max-width: 48rem) {
  :root { --screen: url("media/blur-phone.jpg"); }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.5 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Film grain over everything, like a dark room on camera */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .07;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
kbd { font: inherit; }

.dot {
  display: inline-block;
  flex: none;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 .6rem var(--light);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .55;
}

.eyebrow, .hero__eyebrow, .hero__annot, .hero__scroll, .features__hint, .get__meta {
  color: var(--muted);
  font: 400 .78rem/1.4 var(--mono);
}

/* Line reveals: each line rises out of its own mask */
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: inline-block; }
.js .hero__title .line > span,
.js .reveal .line > span {
  translate: 0 112%;
  transition: translate 1.1s var(--out) calc(var(--i, 0) * 110ms);
}
.js.is-loaded .hero__title .line > span,
.js .reveal.is-in .line > span { translate: 0 0; }

/* The notch, as in v3: closed it shows the light, the name and the trial; hovered it opens like the app's notch.
   When something blurs (the page shield, or the hero's full blur) it says why. */

.notch-nav {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .72rem 1.2rem .82rem;
  border-radius: 0 0 1.3rem 1.3rem;
  background: #0b0b0b;
  color: #fff;
  font: 600 .88rem/1 var(--sans);
  white-space: nowrap;
  translate: -50% 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 .5rem 1.6rem rgb(0 0 0 / .4); /* a hairline, so it reads as a shape on the dark page */
}
.notch-nav a { text-decoration: none; }
.notch-nav__brand { display: flex; align-items: center; gap: .55rem; }
.notch-nav__links { display: grid; grid-template-columns: 0fr; margin-right: -1rem; transition: grid-template-columns .45s var(--out); }
/* Folded links are out of reach until the notch opens; focusing the name opens it, so Tab carries on into them. */
.notch-nav__links > div { visibility: hidden; transition: visibility 0s .45s; }
.notch-nav.is-open .notch-nav__links > div { visibility: visible; transition: none; }
.notch-nav__links > div { display: flex; overflow: hidden; }
.notch-nav__links a { margin-right: 1rem; }
/* Hit areas of at least 24 px (WCAG 2.5.8) without changing the notch's height */
.notch-nav__brand, .notch-nav__cta { padding-block: .45rem; margin-block: -.45rem; }
.notch-nav__links > div { padding: .45rem .3rem; margin: -.45rem -.3rem; } /* the row clips: its padding makes room */
.notch-nav__links a { padding-block: .45rem; margin-block: -.45rem; }
.notch-nav__links a, .notch-nav__cta { color: #a9a59d; transition: color .2s; }
.notch-nav__links a:hover, .notch-nav__cta:hover { color: #fff; }
@media (hover: hover) {
  .notch-nav:hover .notch-nav__links,
  .notch-nav:focus-within .notch-nav__links { grid-template-columns: 1fr; }
  .notch-nav:is(:hover, :focus-within) .notch-nav__links > div { visibility: visible; transition: none; }
}

.notch-nav__menu { display: none; }

/* Phones have no hover: the name becomes a button, and a tap opens the notch sideways as hovering does on a Mac.
   The name and the trial fold away to make room for the sections. */
@media (hover: none) {
  .notch-nav { width: max-content; max-width: calc(100vw - 1rem); } /* left: 50% would otherwise cap it at half the screen */
  a.notch-nav__brand { display: none; }
  .notch-nav__menu { display: flex; gap: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .notch-nav__name, .notch-nav__cta {
    display: inline-block;
    max-width: 8rem;
    overflow: hidden;
    transition: max-width .45s var(--out), margin .45s var(--out), opacity .3s;
  }
  .notch-nav__name { margin-left: .55rem; }
  .notch-nav__links > div { overflow-x: auto; scrollbar-width: none; }
  .notch-nav__links > div::-webkit-scrollbar { display: none; }
  .notch-nav.is-open { gap: .75rem; padding-inline: 1rem; }
  .notch-nav.is-open .notch-nav__links { grid-template-columns: 1fr; margin-right: -.8rem; }
  .notch-nav.is-open .notch-nav__links a { margin-right: .8rem; font-size: .84rem; }
  .notch-nav.is-open .notch-nav__name { max-width: 0; margin-left: 0; opacity: 0; }
  .notch-nav.is-open .notch-nav__cta { max-width: 0; margin-left: -.75rem; opacity: 0; }
}

.notch-nav__reason, .notch-nav__esc { display: none; }
.notch-nav.is-saying:not(.is-open) > :not(.notch-nav__reason, .notch-nav__esc) { display: none; }
.notch-nav.is-saying:not(.is-open) .notch-nav__reason { display: flex; align-items: center; gap: .55rem; }
.notch-nav__reason::before {
  content: "";
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 .5em var(--light);
}
.is-shielded .notch-nav__esc {
  display: inline-grid;
  place-items: center;
  height: 1.7em;
  padding: 0 .5em;
  border: 1px solid #4a4843;
  border-radius: .4em;
  color: #a9a59d;
  font: 600 .74em/1 var(--sans);
}

/* Hero: a sticky stage. The capsule holds the blur; scrolling grows it until it is the whole screen. */

.hero { position: relative; height: 240svh; }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2rem;
  padding: 3.5rem var(--gutter) 2rem;
  text-align: center;
}
.hero__title {
  font-size: clamp(3.1rem, 12.5vw, 14rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.02em;
}
/* Set like a lowercase word: exactly the x-height tall, sitting on the baseline (an empty inline-block's baseline
   is its bottom edge). */
.capsule {
  display: inline-block;
  width: 1.6em;
  height: 1ex;
  border-radius: 999px;
  background: var(--screen) center / cover;
  vertical-align: baseline;
}
.hero__annot, .hero__eyebrow { transition: opacity .3s; opacity: calc(1 - var(--p, 0) * 6); }

.lens { display: none; }
.js .lens {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  clip-path: inset(50% 50% 50% 50% round 999px);
  opacity: 0;
  transition: opacity .6s var(--out) 1.2s;
}
.js.is-loaded .lens { opacity: 1; }

/* The blurred screen as the app draws it (Sources/Overlay/BackdropView.swift): the blur levels, then dark
   corners (clear to 45 %, black at 50 % at the corners) and a top 15 % darker, fading out by the middle. */
.app-blur { position: absolute; inset: 0; background: var(--screen) center / cover; }
.app-blur::after, .app-shade {
  background:
    linear-gradient(rgb(0 0 0 / .15), transparent 50%),
    radial-gradient(65% 65% at 50% 50%, transparent 45%, rgb(0 0 0 / .5) 100%);
}
.app-blur::after { content: ""; position: absolute; inset: 0; }
.lens__text {
  position: relative;
  color: #111;
  font-size: clamp(2.4rem, 7.5vw, 8rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.02em;
  opacity: calc((var(--p, 0) - .45) * 5);
  translate: 0 calc((1 - min(1, max(0, (var(--p, 0) - .45) * 5))) * 2rem);
}
.lens__text span { display: block; font-weight: 300; letter-spacing: -.015em; }

.hero__foot {
  position: absolute;
  inset: auto var(--gutter) 1.6rem;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem 2rem;
  text-align: left;
  opacity: calc(1 - var(--p, 0) * 5);
}
.hero__lede { max-width: 30ch; color: #c9c5bd; font-size: .98rem; line-height: 1.4; }
.hero__scroll { justify-self: end; }

.capsule-button {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.5em;
  border-radius: 999px;
  background: var(--warm) 20% 30% / 260% 260%;
  color: #000; /* black: at least 4.5:1 on the darkest part of the gradient */
  font-weight: 700;
  text-decoration: none;
  transition: background-position 1.2s var(--out), padding .5s var(--spring);
}
.capsule-button:hover, .capsule-button:focus-visible { background-position: 80% 70%; padding-inline: 1.9em; }
.capsule-button .dot { box-shadow: 0 0 .5rem var(--light), 0 0 0 2px rgb(0 0 0 / .15); }

@media (max-width: 48rem) {
  .hero__title { font-size: 15vw; }
  .capsule { width: 1.25em; }
  .hero__foot { grid-template-columns: 1fr; justify-items: center; text-align: center; bottom: 1.2rem; }
  .hero__lede { font-size: .92rem; }
  .hero__scroll { display: none; }
}

/* Moments: centred lines with the state inside the type */

.moments { padding: clamp(5rem, 12vw, 10rem) var(--gutter); text-align: center; }
.moment { padding-block: clamp(3.5rem, 9vw, 7rem); }
.moment + .moment, .moment:last-child { border-top: 1px solid var(--rule); }
.moment:last-child { border-bottom: 1px solid var(--rule); }
.moment__line {
  font-size: clamp(2.5rem, 9vw, 10.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.02em;
}
.tag {
  display: inline-block;
  padding: .55em .9em;
  border-radius: 999px;
  background: var(--warm) 30% 40% / 300% 300%;
  color: #000; /* black: at least 4.5:1 on the darkest part of the gradient */
  font: 600 max(.7rem, .16em)/1 var(--mono);
  letter-spacing: 0;
  vertical-align: .9em;
}
.tag--lilac { background-image: var(--lilac); }
.tag__emoji { margin-right: .4em; }
.moment__note { max-width: 34ch; margin: 1.6rem auto 0; color: #b5b1a9; font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* Proof: the real command, typed out */

.section-title {
  font-size: clamp(2.6rem, 9vw, 10rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.02em;
  text-align: center;
}
.proof { padding: clamp(5rem, 12vw, 10rem) var(--gutter); }
.term {
  max-width: 62rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: #050505;
  box-shadow: 0 2rem 6rem -2rem rgb(0 0 0 / .8);
}
.term__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: 500 .74rem/1 var(--sans);
}
.term__lights { display: flex; gap: .45rem; }
.term__lights i { width: .72rem; height: .72rem; border-radius: 50%; background: #333; }
.term__copy {
  justify-self: end;
  min-height: 1.75rem;
  padding: .35rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font: 500 .72rem/1 var(--mono);
  cursor: pointer;
}
.term__copy:hover { border-color: var(--fg); }
.term__body {
  margin: 0;
  padding: clamp(1rem, 3vw, 1.8rem);
  overflow-x: auto;
  font: 400 clamp(.72rem, 1.3vw, .95rem)/1.7 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.term__out { color: var(--muted); }
.js .term__out { visibility: hidden; }
.js .term__out.is-shown { visibility: visible; }
.term__line.is-typing::after { content: "▍"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.proof__note { max-width: 40ch; margin: 2rem auto 0; color: #c9c5bd; text-align: center; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.proof__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  max-width: 62rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  border-top: 1px solid var(--rule);
}
.proof__facts li { padding: 1.2rem 1rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.proof__facts b {
  display: block;
  margin-bottom: .5rem;
  color: var(--fg);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

/* Features: a bento of gradient crops; a swipeable row on phones */

.features { padding: clamp(5rem, 12vw, 10rem) 0; }
.features .section-title { padding-inline: var(--gutter); }
.features__hint { display: none; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(13rem, 19vw, 19rem);
  grid-template-areas:
    "esc esc keys notch"
    "me phone phone notch"
    "lock displays displays displays";
  gap: .8rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: var(--gutter);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: 1.6rem;
  background: var(--warm) var(--x) var(--y) / 320% 320%;
  color: #000; /* black: at least 4.5:1 on the darkest part of the gradient */
  transition: background-position 1.4s var(--out), scale .5s var(--out);
}
.card--lilac { background-image: var(--lilac); }
.card:hover { background-position: calc(100% - var(--x)) calc(100% - var(--y)); }
.card__big { font-size: clamp(2rem, 4vw, 4.4rem); font-weight: 800; line-height: .92; letter-spacing: -.02em; }
.card__text { max-width: 26ch; font-size: .95rem; line-height: 1.35; }
.card kbd {
  display: inline-grid;
  place-items: center;
  min-width: 2.2em;
  padding: .1em .35em .16em;
  border: .06em solid currentColor;
  border-bottom-width: .14em;
  border-radius: .24em;
  font-size: 1.3em;
}
.card--esc { grid-area: esc; }
.card--keys { grid-area: keys; }
.card--notch { grid-area: notch; }
.card--me { grid-area: me; }
.card--phone { grid-area: phone; }
.card--lock { grid-area: lock; }
.card--displays { grid-area: displays; }
.card--notch .card__big, .card--displays .card__big { font-size: clamp(2.4rem, 5.5vw, 6rem); }

@media (max-width: 48rem) {
  .features__hint { display: block; margin-top: 1.2rem; text-align: center; }
  .bento {
    display: flex;
    gap: .8rem;
    margin-top: 1.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 80%; min-height: 24rem; scroll-snap-align: start; }
}

/* Pricing: two cards; the team size is radio buttons, and :has() shows the matching price and button */

.pricing { padding: clamp(5rem, 12vw, 10rem) var(--gutter); }
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  max-width: 68rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 1.6rem;
  background: var(--warm) 25% 35% / 300% 300%;
  color: #000; /* black: at least 4.5:1 on the darkest part of the gradient */
}
.plan--team { background: var(--lilac) 70% 40% / 300% 300%; }
.plan__name { font: 500 .85rem/1 var(--mono); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7rem; }
.plan__amount { font-size: clamp(4.5rem, 10vw, 9rem); font-weight: 800; line-height: .85; letter-spacing: -.025em; }
.plan__per { font: 500 .9rem/1 var(--mono); }
.plan__each { flex-basis: 100%; margin-top: .7rem; font: 400 .8rem/1.3 var(--mono); }
.plan__facts { display: grid; gap: .1rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgb(0 0 0 / .2); }
.plan__facts li { font-size: 1rem; font-weight: 600; }
.plan__buy { justify-content: center; background: #111; color: #fff; }
.plan__buy:hover, .plan__buy:focus-visible { background: #000; }

.seats { display: flex; margin: 0; padding: .25rem; border: 0; border-radius: 999px; background: rgb(0 0 0 / .1); }
.seats legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.seats label { flex: 1; cursor: pointer; }
.seats input { position: absolute; opacity: 0; pointer-events: none; }
.seats span {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  border-radius: 999px;
  font: 600 1rem/1 var(--mono);
  transition: background .25s, color .25s;
}
.seats input:checked + span { background: #111; color: #fff; }
.seats label:has(:focus-visible) span { outline: 2px solid #111; outline-offset: 2px; }

.plan--team:has([value="5"]:checked) [data-seats]:not([data-seats="5"]),
.plan--team:has([value="10"]:checked) [data-seats]:not([data-seats="10"]),
.plan--team:has([value="25"]:checked) [data-seats]:not([data-seats="25"]),
.plan--team:has([value="50"]:checked) [data-seats]:not([data-seats="50"]) { display: none; }

.pricing__note { margin-top: 1.2rem; color: var(--muted); text-align: center; font: 400 .78rem/1.4 var(--mono); }

.faq { max-width: 44rem; margin: clamp(3rem, 7vw, 5rem) auto 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font: 500 .9rem/1.4 var(--mono);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 52ch; padding-bottom: 1.2rem; color: #c9c5bd; line-height: 1.5; }

@media (max-width: 48rem) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}

/* Roadmap */

.roadmap { padding: clamp(4rem, 10vw, 8rem) var(--gutter); }
.next { max-width: 68rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; counter-reset: next; }
.next li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 22rem);
  align-items: baseline;
  gap: .4rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.2rem, 2.5vw, 2rem);
  border-top: 1px solid var(--rule);
  counter-increment: next;
}
.next li:last-child { border-bottom: 1px solid var(--rule); }
.next li::before { content: "0" counter(next); color: var(--muted); font: 400 .8rem/1 var(--mono); }
.next__title { font-size: clamp(2.2rem, 6vw, 6.5rem); font-weight: 800; line-height: .95; letter-spacing: -.02em; }
.next__text { color: #b5b1a9; line-height: 1.45; }
@media (max-width: 48rem) {
  .next li { grid-template-columns: auto minmax(0, 1fr); }
  .next__text { grid-column: 2; }
}

/* Download */

.get { padding: clamp(5rem, 12vw, 10rem) var(--gutter); text-align: center; }
.get__title {
  font-size: clamp(5rem, 26vw, 30rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.025em;
}
.capsule-button--big { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.capsule-button__meta { font: 500 .78em/1 var(--mono); opacity: .7; }
.get__meta { margin-top: 1.2rem; }
.get__size { display: none; }
.capsule-button--big { white-space: nowrap; }
@media (max-width: 30rem) {
  .capsule-button--big .capsule-button__meta { display: none; }
  .get__size { display: inline; }
}

.checklist { max-width: 44rem; margin: clamp(3.5rem, 8vw, 6rem) auto 0; text-align: left; }
.checklist__title { color: #c9c5bd; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.4; }
.checklist ul { margin-top: 1.4rem; border-top: 1px solid var(--rule); }
.check {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
}
.check__box { flex: none; font-family: var(--mono); color: var(--muted); }
.check__box::before { content: "[ ]"; }
.check[aria-pressed="true"] { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(236 233 226 / .4); }
.check[aria-pressed="true"] .check__box { color: var(--light); }
.check[aria-pressed="true"] .check__box::before { content: "[x]"; }

/* Footer: the wordmark fills the width (--em is its advance in ems, measured once) */

.foot { padding: clamp(4rem, 8vw, 6rem) var(--gutter) 1.4rem; border-top: 1px solid var(--rule); }
.foot__mark { container-type: inline-size; }
.foot__mark span {
  display: block;
  font-size: calc(100cqw / var(--em));
  font-variation-settings: "opsz" 96; /* one optical size, so --em holds at every width */
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.foot__legal { margin-top: 1.4rem; color: var(--muted); font-size: .8rem; }

/* Load intro: the notch drops in and the light comes on */

@keyframes drop { from { translate: -50% -110%; } }
@keyframes ignite { 0%, 40% { background: #333; box-shadow: none; } }
.js .notch-nav { animation: drop .8s var(--spring) .15s backwards; }
.js .notch-nav__brand .dot { animation: ignite 1.2s ease-out backwards; }

/* The page shields itself when the visitor looks away, with the app's blur done live: sigma 16 per 786 px of width
   over everything, saturated 1.15, and more towards the top (32.25 on top of 16 adds up to the app's 36), then the
   app's shading. Siblings, not nested: a faded or filtered parent would cut the blur off from the page. In like the
   app in 0.35 s, out in 0.25 s. */

.shield {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none; /* never traps: every click and key goes through and clears it */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in, visibility 0s .25s;
}
.shield--medium {
  -webkit-backdrop-filter: blur(calc(100vw * 16 / 786)) saturate(1.15);
  backdrop-filter: blur(calc(100vw * 16 / 786)) saturate(1.15);
}
.shield--broad {
  -webkit-backdrop-filter: blur(calc(100vw * 32.25 / 786));
  backdrop-filter: blur(calc(100vw * 32.25 / 786));
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
.is-shielded .shield { opacity: 1; visibility: visible; transition: opacity .35s ease-out; }
.is-shielded .shield--broad { transition-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__title .line > span, .js .reveal .line > span { translate: none; transition: none; }
  .js .notch-nav, .js .notch-nav__brand .dot, .term__line.is-typing::after { animation: none; }
  .notch-nav__links, .card, .capsule-button { transition: none; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .js .lens { display: none; }
  .hero__foot { opacity: 1; }
}