/* ==========================================================================
   Bugcutter website
   Same visual language as Bugcord: sky ground, ink type, slate app windows,
   ladybug red only for Bugcutter's own actions and the one group that stands
   apart (Made for Spain).
   ========================================================================== */

:root {
  --sky: #6aa5f7;
  --sky-light: #92bdf9;
  --ink: #000;
  --ladybug: #b6191c;
  --mist: #e8f0fb;
  --white: #fff;

  /* App window surfaces */
  --slate: #151821;
  --slate-2: #1d212c;
  --slate-3: #2a2f3d;
  --app-text: #e6e9f0;
  --app-muted: #9aa3b5;
  --app-line: rgb(255 255 255 / 0.07);

  --muted: rgb(0 0 0 / 0.68);

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 78rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --overlap: 4rem;
  --focus: var(--ink);
}

@media (min-width: 64rem) {
  :root {
    --overlap: 7rem;
  }
}

/* Base
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding-top: 1.5rem;
}

/* Native smooth scrolling, used when Lenis is not running. Lenis adds .lenis to
   <html> and drives the scroll from its own rAF loop, so the two must never both
   be animating the same scroll. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html.lenis {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

/* Stop the drawer's own scrollers from chaining out into the page */
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  min-height: 100svh;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5;
  font-size-adjust: from-font;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.icon--small {
  width: 1rem;
  height: 1rem;
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--white);
  --focus: var(--white);
}

.skip-link:focus {
  top: 1rem;
}

/* Brandmark: the app icon next to the name, set in the display cut. There is no
   separate logo lock-up, so the icon carries the colour and the name stays ink. */

.brandmark {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.brandmark__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
}

.brandmark__name {
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  letter-spacing: -0.02em;
}

.brandmark--large {
  place-self: start;
  gap: 1rem;
}

.brandmark--large .brandmark__icon {
  width: clamp(3.5rem, 9vw, 5rem);
  height: clamp(3.5rem, 9vw, 5rem);
  border-radius: 22.5%;
}

.brandmark--large .brandmark__name {
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
}

/* Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.btn--small {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  font-size: 1rem;
}

.btn--dark {
  background: var(--ink);
  color: var(--white);
}

.btn--dark:hover {
  border-color: var(--slate-3);
  background: var(--slate-3);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
}

.btn--outline:hover {
  background: rgb(0 0 0 / 0.08);
}

.btn--outline-light {
  border-color: rgb(255 255 255 / 0.45);
  background: transparent;
  color: var(--white);
}

.btn--outline-light:hover {
  background: rgb(255 255 255 / 0.1);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (width < 40rem) {
  .actions > * {
    flex: 1 1 100%;
  }
}

/* App Store badge. Until the app is live it is a <span> with aria-disabled and
   reads "Coming soon to the App Store". To go live, turn it into
   <a class="store-badge" href="https://apps.apple.com/app/id...">, change the
   small line to "Download on the" and drop aria-disabled: the styles below
   already cover the link and its hover. */

.store-badge {
  display: inline-grid;
  justify-items: start;
  align-content: center;
  min-height: 3.5rem;
  padding: 0.375rem 1.75rem 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  line-height: 1.05;
  text-decoration: none;
}

.store-badge__small {
  font-size: 0.8125rem;
  font-weight: 500;
}

.store-badge__big {
  font-size: 1.375rem;
  font-weight: 750;
  font-stretch: 90%;
  letter-spacing: -0.01em;
}

a.store-badge:hover {
  border-color: var(--slate-3);
  background: var(--slate-3);
}

.store-badge[aria-disabled="true"] {
  border-style: dashed;
  border-color: rgb(0 0 0 / 0.55);
  background: transparent;
  color: var(--ink);
  cursor: default;
}

.store-badge--light[aria-disabled="true"] {
  border-color: rgb(255 255 255 / 0.5);
  color: var(--white);
}

a.store-badge--light {
  border-color: var(--sky);
  background: var(--sky);
  color: var(--ink);
}

@media (width < 40rem) {
  .actions > .store-badge {
    justify-items: center;
  }
}

/* Header
   ========================================================================== */

.header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
}

.main-nav {
  display: none;
}

.main-nav__list {
  display: flex;
  gap: 0.25rem;
}

.main-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
  background: rgb(0 0 0 / 0.08);
}

.header-support {
  display: none;
}

.menu-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: auto;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.08);
}

@media (min-width: 56rem) {
  .main-nav {
    display: block;
    margin-inline-start: auto;
  }

  .header-support {
    display: inline-flex;
    margin-inline-start: 0.5rem;
  }

  .menu-button {
    display: none;
  }
}

/* Hero
   ========================================================================== */

.hero {
  padding-top: clamp(1.5rem, 5vw, 4rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__title {
  font-size: clamp(2.75rem, 14.5vw, 11.5rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.86;
  letter-spacing: -0.025em;
}

.hero__line {
  display: block;
}

.hero__copy {
  display: grid;
  align-content: start;
  gap: 1.75rem;
}

.lead {
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.45;
}

@media (min-width: 40rem) {
  .lead {
    font-size: 1.3125rem;
  }
}

.hero__meta {
  max-width: 30rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.hero__demo {
  position: relative;
  z-index: 2;
  margin-top: clamp(5rem, 15vw, 6.5rem);
  margin-bottom: calc(var(--overlap) * -1);
}

/* The app icon sits on the top edge of the shortcut window, the way Bugcord's
   mascot peeks over its chat window. */
.hero__icon {
  position: absolute;
  top: 0;
  right: clamp(1rem, 4vw, 2.5rem);
  width: clamp(6rem, 18vw, 10rem);
  height: clamp(6rem, 18vw, 10rem);
  border-radius: 22.5%;
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.22);
  rotate: 8deg;
  translate: 0 -62%;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "copy demo";
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  .hero__title {
    grid-area: title;
  }

  .hero__copy {
    grid-area: copy;
    padding-top: 0.5rem;
  }

  .hero__demo {
    grid-area: demo;
    margin-top: 3.5rem;
  }
}

/* App window (the hero shortcut and every action list)
   ========================================================================== */

.app {
  position: relative;
  border-radius: 1rem;
  background: var(--slate);
  color: var(--app-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  --focus: var(--sky);
}

/* The square every action carries in Shortcuts. Bugcutter's own actions show
   the ladybug; built-in ones a plain glyph on slate. */
.tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4375rem;
  background: var(--slate-3);
  color: var(--app-text);
}

/* Sized in rem, not 100%. A percentage-sized image in an auto grid track is
   "compressible" in Chromium and Firefox, but WebKit sizes the track to the
   image's intrinsic 192px first, so in Safari every tile blew up to full size. */
.tile img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: inherit;
}

/* Hero shortcut */

.shortcut {
  padding: 0.5rem clamp(0.75rem, 2.5vw, 1.25rem) clamp(1rem, 2.5vw, 1.25rem);
}

.shortcut__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  padding-inline: 0.25rem;
  margin-bottom: 0.5rem;
}

.shortcut__name {
  margin-inline-end: auto;
  font-size: 1.0625rem;
  font-weight: 700;
}

.shortcut__run {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 0.875rem 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--sky);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 650;
}

.shortcut__run:hover {
  background: var(--sky-light);
}

.shortcut__run:disabled {
  cursor: progress;
  opacity: 0.7;
}

.steps {
  display: grid;
  gap: 0.5rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--slate-2);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.2s ease;
}

.step__body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.step__text {
  overflow-wrap: anywhere;
}

/* A filled-in parameter, coloured the way Shortcuts colours them */
.token {
  color: var(--sky);
  font-weight: 650;
}

.step__result {
  justify-self: start;
  padding: 0.125rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--slate-3);
  color: var(--app-text);
  font-size: 0.875rem;
}

.step__result-label {
  color: var(--app-muted);
}

/* Run states, set by setupShortcutDemo. Hidden results keep their space so the
   window does not jump as they come back. */
.step.is-running {
  outline-color: var(--sky);
}

.step.is-pending .step__result {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .step.is-done .step__result {
    animation: result-in 0.22s ease-out;
  }
}

@keyframes result-in {
  from {
    opacity: 0;
    translate: 0 0.25rem;
  }
}

/* Catalogue ground
   ========================================================================== */

.features {
  padding-block: calc(var(--overlap) + clamp(3rem, 7vw, 6rem)) clamp(4rem, 9vw, 7rem);
  background: var(--mist);
}

.section-title {
  font-size: clamp(2.75rem, 4vw + 1.25rem, 5rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-head {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head p {
  max-width: 36rem;
  line-height: 1.55;
}

/* How it works: a real sequence, so it is numbered */

.how {
  padding-bottom: clamp(4rem, 9vw, 7rem);
  scroll-margin-top: 0.5rem;
}

.how__steps {
  display: grid;
  gap: 0.75rem;
  counter-reset: how;
}

@media (min-width: 40rem) {
  .how__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .how__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.how__step {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--white);
  counter-increment: how;
}

.how__step::before {
  content: counter(how);
  font-size: 3.5rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.86;
  letter-spacing: -0.025em;
}

.how__step h3 {
  font-size: 1.3125rem;
  font-weight: 700;
  font-stretch: 90%;
  line-height: 1.15;
}

.how__step p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.search-term {
  padding: 0 0.3em;
  border-radius: 0.3em;
  background: var(--mist);
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}

/* What's inside: groups with a sticky rail beside them
   ========================================================================== */

.catalog {
  scroll-margin-top: 0.5rem;
}

.rail {
  display: none;
}

@media (min-width: 64rem) {
  .catalog__grid {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .rail {
    display: block;
    position: sticky;
    top: 2rem;
    align-self: start;
    padding-top: 0.25rem;
  }
}

.rail__list {
  display: grid;
  gap: 0.125rem;
}

.rail__link {
  display: block;
  padding: 0.4375rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.rail__link:hover {
  background: rgb(0 0 0 / 0.05);
  color: var(--ink);
}

.rail__link[aria-current="true"] {
  background: var(--white);
  color: var(--ink);
  font-weight: 650;
}

.group {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  scroll-margin-top: 0.5rem;
}

.group:first-child {
  padding-top: 0;
}

.group:last-child {
  padding-bottom: 0;
}

@media (min-width: 52rem) {
  .group {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.group__title {
  font-size: clamp(2.25rem, 2.5vw + 1.25rem, 3.25rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.group__text p {
  max-width: 34rem;
  margin-top: 1rem;
  line-height: 1.55;
}

.group__text .group__note {
  color: var(--muted);
  font-size: 1rem;
}

.action-list {
  display: grid;
  gap: 0.375rem;
  padding: clamp(0.625rem, 2vw, 0.875rem);
}

.action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--slate-2);
  font-weight: 550;
  overflow-wrap: anywhere;
}

/* Made for Spain is the one group drawn in ladybug red: it is the part of
   Bugcutter you will not find in any other Shortcuts app. */
.action-list--spain {
  background: var(--ladybug);
  color: var(--white);
}

.action-list--spain .action {
  background: rgb(0 0 0 / 0.22);
}

.action-list--spain .tile {
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.5);
}

/* Support
   ========================================================================== */

.support {
  padding-block: clamp(4rem, 9vw, 7rem);
  scroll-margin-top: 0;
}

.support__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
}

@media (min-width: 60rem) {
  .support__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}

.support__contact {
  display: grid;
  gap: 1.5rem;
}

/* The address is the page's support channel, so it is set as large as a
   headline: a reviewer or a stuck user should find it without reading. */
.support__email {
  justify-self: start;
  font-size: clamp(2.25rem, 6.5vw, 4.25rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}

.support__email:hover {
  text-decoration-thickness: 0.11em;
}

.support__note {
  max-width: 30rem;
  color: var(--muted);
  font-size: 1rem;
}

.faq {
  display: grid;
  gap: 0.625rem;
  scroll-margin-top: 1.5rem;
}

.faq__title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.1;
}

.faq__item {
  border-radius: 1.25rem;
  background: var(--white);
}

/* The flex row lives on a span inside <summary>, not on <summary> itself:
   WebKit does not reliably lay <summary> out as a flex container. */
.faq__item summary {
  display: block;
  padding: 1rem 1.25rem;
  border-radius: inherit;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary .icon {
  transition: rotate 0.2s ease;
}

.faq__item[open] summary .icon {
  rotate: 180deg;
}

.faq__answer {
  display: grid;
  gap: 0.75rem;
  padding: 0 1.25rem 1.25rem;
}

.faq__answer p {
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.faq__answer a,
.doc__body a {
  text-decoration-thickness: 2px;
  /* Past Bricolage's 0.24em descender, so skip-ink does not chop the line. */
  text-underline-offset: 0.3em;
}

.path {
  font-weight: 650;
}

/* Interior page (privacy)
   ==========================================================================
   Same ground, same ink, same type as the home page, with a readable measure. */

.doc {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem);
}

.doc__head {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.doc__title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.doc__meta {
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 64rem) {
  .doc__grid {
    grid-template-columns: 13rem minmax(0, 1fr);
  }

  .doc__toc {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}

.doc__toc-title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.doc__toc ol {
  display: grid;
  gap: 0.25rem;
}

.doc__toc a {
  display: block;
  padding: 0.25rem 0;
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
}

.doc__toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.doc__body {
  max-width: 38rem;
}

.doc__body > * + * {
  margin-top: 1.25rem;
}

.doc__body h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(1.625rem, 2.5vw, 2.125rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.1;
  letter-spacing: -0.015em;
  scroll-margin-top: 2rem;
}

.doc__body h2:first-child {
  margin-top: 0;
}

.doc__body p,
.doc__body li {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.doc__body ul {
  display: grid;
  gap: 0.625rem;
  padding-inline-start: 1.25rem;
}

.doc__body ul li {
  list-style: disc;
}

.doc__body strong {
  font-weight: 700;
}

/* The summary at the top of the policy: the whole answer for most readers. */
.doc__note {
  padding: clamp(1.125rem, 3vw, 1.5rem);
  border-radius: 1.25rem;
  background: var(--ink);
  color: var(--white);
  --focus: var(--sky);
}

.doc__note p {
  font-size: 1.1875rem;
  line-height: 1.5;
}

/* Services list: who Bugcutter talks to, and what that service receives */
.doc__body .services {
  display: grid;
  gap: 0.5rem;
  padding-inline-start: 0;
}

.doc__body .services li {
  list-style: none;
  padding: 0.875rem 1.125rem;
  border-radius: 1rem;
  background: var(--white);
  font-size: 1rem;
  line-height: 1.5;
}

.services__host {
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Footer
   ========================================================================== */

.site-footer {
  padding-block: clamp(3.5rem, 8vw, 6rem) 2rem;
  background: var(--ink);
  color: var(--white);
  --focus: var(--sky);
}

.footer__top {
  display: grid;
  gap: 3rem;
}

@media (min-width: 60rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

@media (min-width: 40rem) {
  .footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer__heading {
  margin-bottom: 0.75rem;
  color: var(--sky);
  font-size: 1rem;
  font-weight: 700;
}

.footer__links {
  display: grid;
  gap: 0.25rem;
}

.footer__links a {
  display: inline-block;
  padding-block: 0.25rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 1rem;
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer__legal {
  margin-top: 4rem;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.875rem;
}

/* Mobile drawer: popover + scroll snap, swipe to dismiss
   ========================================================================== */

.drawer {
  --drawer-width: min(22rem, 86dvw);
  --drawer-backdrop: 0;
  --focus: var(--sky);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  inset: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--white);
}

.drawer::backdrop {
  background: #000;
  opacity: calc(var(--drawer-backdrop) * 0.55);
}

/* Spacer first, sheet second: scroll position 0 is the closed state */
.drawer__scroller {
  display: grid;
  grid-template-columns: 100% var(--drawer-width);
  overflow-x: scroll;
  overscroll-behavior: none;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.drawer__scroller::-webkit-scrollbar {
  display: none;
}

/* No scroll-behavior here on purpose. The open/close slide is tweened frame by
   frame in setupDrawer, and setting scrollLeft honours scroll-behavior, so
   smooth would start a fresh animation on every frame of the tween. */

.drawer__scroller::before {
  content: "";
  scroll-snap-align: start;
}

.drawer__sheet {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  height: 100svh;
  padding: 1.25rem 1.25rem 1.5rem;
  overflow-y: auto;
  border-radius: 1.25rem 0 0 1.25rem;
  background: var(--ink);
  scroll-snap-align: end;
  scrollbar-width: none;
}

.drawer__sheet:focus {
  outline: 0;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
}

.icon-button:hover {
  background: rgb(255 255 255 / 0.2);
}

.drawer__links a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.drawer__links a:hover {
  background: var(--slate-3);
}

.drawer__actions {
  display: grid;
  gap: 0.625rem;
  margin-top: auto;
}

.drawer__actions .store-badge {
  justify-items: center;
}

@supports (animation-timeline: scroll()) {
  @property --drawer-backdrop {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  .drawer {
    timeline-scope: --drawer-fade;
    animation: drawer-backdrop linear both;
    animation-timeline: --drawer-fade;
  }

  .drawer__scroller {
    scroll-timeline: --drawer-fade x;
  }

  @keyframes drawer-backdrop {
    0% {
      --drawer-backdrop: 0;
    }

    100% {
      --drawer-backdrop: 1;
    }
  }
}

/* Section reveals
   ==========================================================================
   Sections ease in as they scroll into view, over the same fixed 18rem of
   scroll as on Bugcord. Decorative, so it only runs without a reduced-motion
   preference. Chrome and Safari drive it off a view timeline; Firefox gets an
   IntersectionObserver from main.js, flagged with .reveal-js. The hidden start
   state lives only under that flag, so a script that never runs leaves every
   section plainly visible. */

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* :not(.reveal-js): WebKit gets the observer version even where it parses
     view(), see setupReveals in main.js. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    :root:not(.reveal-js) .reveal {
      animation: reveal auto ease-out backwards;
      animation-timeline: view();
      animation-range: entry 1.5rem entry 18rem;
    }
  }

  .reveal-js .reveal {
    opacity: 0;
    translate: 0 0.75rem;
    transition: opacity 0.45s ease-out, translate 0.45s ease-out;
  }

  .reveal-js .reveal.is-revealed {
    opacity: 1;
    translate: none;
  }
}