/* 1742 web: tokens + components (design from Claude Design, 2026-10-05; flows §2.22). The only stylesheet of every
   page; no external resources (fonts are self-hosted, SIL OFL: fonts/OFL.txt). Theme per app: `.app-{prefix}` on <body>. */
@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fonts/gabarito-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fonts/gabarito-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* neutrals */
  --ink: #16150f;
  --ink-2: #45423a;
  --ink-3: #69655c;
  --paper: #f7f4ee;
  --surface: #fff;
  --sunk: #efebe3;
  --line: #e3ded3;
  --line-2: #cbc4b6;
  /* status */
  --ok: #17663f;
  --ok-bg: #e5f3ea;
  --err: #b3261e;
  --err-bg: #fcebe9;
  --info: #1d4f8c;
  --info-bg: #e9f0fa;
  --warn: #7a5300;
  --warn-bg: #fff3d1;
  --focus: #1f5bd8;
  /* app theme (overridden per app via .app-{slug}) */
  --app-ink: var(--ink);
  --app-accent: var(--ink);
  --app-accent-ink: var(--ink);
  --app-tint: var(--sunk);
  --app-tint-2: var(--line);
  /* type */
  --f-display: Gabarito, ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --t-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --t-3xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-icon: 22.5%;
  --sh-1: 0 1px 2px rgb(22 21 15 / 0.06), 0 4px 12px -4px rgb(22 21 15 / 0.08);
  --sh-2: 0 2px 6px rgb(22 21 15 / 0.06), 0 20px 44px -16px rgb(22 21 15 / 0.28);
  /* layout */
  --max: 1120px;
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 40px);
  --tap: 44px;
}
.app-roomvia {
  --app-ink: #1f3a2c;
  --app-accent: #e8734a;
  --app-accent-ink: #b4472a;
  --app-tint: #e4eedc;
  --app-tint-2: #cfe2bf;
}

/* base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md) / 1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
}
a {
  color: var(--app-ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
address {
  font-style: normal;
}
.wrap {
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin-inline: auto;
}
.vh {
  /* biome-ignore lint/complexity/noImportantStyles: the visually-hidden utility must win over component rules */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--s-3);
  top: -200px;
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip:focus {
  top: var(--s-3);
}
main {
  display: block;
}

/* logo + wordmark */
.mark {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}
.wm {
  display: inline-flex;
  align-items: baseline;
  font: 700 1em / 1 var(--f-display);
  letter-spacing: -0.035em;
  color: var(--app-ink);
  white-space: nowrap;
}
.wm__oo {
  flex: none;
  width: 1.04em;
  height: 0.512em;
  margin-left: 0.0236em;
  margin-right: -0.0106em;
  position: relative;
  top: 0.012em;
  overflow: visible;
}
.wm__oo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 140;
  stroke-linejoin: round;
}
.wm__i {
  position: relative;
  display: inline-block;
}
.wm__i svg {
  position: absolute;
  left: 50%;
  top: -0.04em;
  width: 0.34em;
  height: 0.34em;
  margin-left: -0.19em;
  overflow: visible;
}
.wm__i path {
  fill: var(--app-accent);
}

/* header */
.top {
  padding-block: var(--s-3);
}
.top--tint {
  background: var(--app-tint);
}
.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
}
.brand__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-icon);
}
.brand .wm {
  font-size: 1.5rem;
}
.brand__name {
  font: 700 1.375rem / 1 var(--f-display);
  letter-spacing: -0.02em;
}

/* language switcher */
.lang ul {
  display: flex;
  gap: 2px;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}
.lang a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font: 600 var(--t-sm) / 1 var(--f-text);
  text-decoration: none;
}
.lang a:hover {
  background: var(--sunk);
}
.lang a[aria-current] {
  background: var(--ink);
  color: #fff;
}

/* buttons */
.btn {
  --b: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1.5px solid var(--b);
  border-radius: var(--r-sm);
  background: var(--b);
  color: #fff;
  font: 600 var(--t-md) / 1.2 var(--f-text);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  filter: brightness(1.18);
}
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--secondary:hover {
  filter: none;
  background: var(--sunk);
}
.btn--danger {
  --b: var(--err);
}
.btn--block {
  width: 100%;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.btn[aria-busy="true"],
.idp__btn[aria-busy="true"] {
  /* biome-ignore lint/complexity/noImportantStyles: hides the label of any button variant while its spinner shows */
  color: transparent !important;
  pointer-events: none;
}
.btn[aria-busy="true"]::after,
.idp__btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn--secondary[aria-busy="true"]::after,
.idp__btn--google[aria-busy="true"]::after {
  border-color: var(--ink);
  border-right-color: transparent;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* store badges + QR */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}
.badges a {
  display: flex; /* a flex box keeps a padded badge's negative margins inside the link (no margin collapse) */
  border-radius: 8px;
}
.badges img {
  display: block;
  height: 48px;
  width: auto;
  max-width: none; /* the global img max-width would resolve against a padded badge's narrowed link box */
}
/* Google's public Play badge PNGs (play.google.com, 646x250) carry transparent padding, different per language: each
   is scaled so the visible badge is 48px tall like Apple's (Google: same size or larger next to other store badges)
   and the padding is pulled in. Pinned to the committed files' sha256 (layout test); an SVG needs no rule. */
.badges .badge__img--google-play-en-png {
  height: calc(48px * 250 / 168);
  margin: calc(-48px * 41 / 168);
}
.badges .badge__img--google-play-tr-png {
  height: calc(48px * 250 / 192);
  margin-block: calc(-48px * 29 / 192);
}
.badge--text {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.badge--text[aria-disabled="true"] {
  opacity: 0.55;
}
.get .badge--text {
  background: #fff;
  color: var(--ink);
}
.qr {
  display: none;
  margin: 0;
}
.qr__code {
  width: 200px;
  height: 200px;
  padding: 12px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
}
.qr__code img,
.qr__code canvas,
.qr__code svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.qr figcaption {
  font: 700 var(--t-lg) / 1.25 var(--f-display);
  max-width: 18ch;
  text-wrap: balance;
}

/* landing hero */
.hero {
  background: var(--app-tint);
  padding-block: var(--s-5) var(--s-8);
}
.hero__grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
.hero__text {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.hero__icon {
  width: 88px;
  height: 88px;
  border-radius: var(--r-icon);
  box-shadow: var(--sh-2);
  margin-bottom: var(--s-2);
}
.hero__name {
  font-size: var(--t-3xl);
  line-height: 1;
}
.hero__slogan {
  font: 700 var(--t-xl) / 1.2 var(--f-display);
  letter-spacing: -0.015em;
  color: var(--app-ink);
  max-width: 22ch;
  text-wrap: balance;
}
.hero__desc {
  color: var(--ink-2);
  max-width: 44ch;
}
.hero .badges {
  margin-top: var(--s-2);
}
@media (min-width: 1024px) {
  .hero {
    padding-block: var(--s-7) var(--s-9);
  }
  .hero__icon {
    width: 112px;
    height: 112px;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .qr {
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    width: 300px;
    padding: var(--s-6);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    text-align: center;
  }
}

/* sections */
.sec {
  padding-block: var(--s-8);
}
.sec__head {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.sec__title {
  font-size: var(--t-2xl);
}
.sec__lead {
  color: var(--ink-2);
  max-width: 52ch;
}
@media (min-width: 1024px) {
  .sec {
    padding-block: var(--s-9);
  }
}

/* screenshot gallery */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 62%);
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: var(--s-1) max(var(--gutter), calc((100% - var(--max)) / 2)) var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.shots li {
  scroll-snap-align: start;
}
.shot {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--app-tint);
  box-shadow: var(--sh-1);
  object-fit: cover;
}
.shots--video {
  grid-auto-columns: minmax(240px, 72%);
}
@media (min-width: 640px) {
  .shots {
    grid-auto-columns: 34%;
  }
}
@media (min-width: 1024px) {
  .shots {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
  }
}

/* feature grid: one column on a phone, two from 640 px; the landing's eight cards (Q57) fill every row (three
   columns would leave two cards alone in the last one) */
.feats {
  display: grid;
  list-style: none;
  padding: 0;
}
.feat {
  display: grid;
  align-content: start; /* a row's shorter cards keep their picture, heading and text together at the top */
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.feat h3 {
  font-size: var(--t-lg);
}
.feat p {
  color: var(--ink-2);
}
@media (min-width: 640px) {
  .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
}
@media (min-width: 1024px) {
  .feats {
    column-gap: var(--s-7);
  }
}

/* a feature's before / after (the app's Home card sweep, ReelScript.compare; CSS only, no script). The after lies in
   the flow, never clipped (the lazy loader fetches it with the before); the before rides above it in a window twice
   the picture's width whose right edge is the divider, and the window's frame moves back by as much, so the photo stays
   put while the edge moves. Only transforms move, one animation per element (the compositor runs them: no style or
   paint work per frame). At rest (reduced motion, before a card's turn and once its loops end) the divider stands at
   45 %, the app's card at rest (ReelScript.compareRestAt). */
.ba {
  position: relative;
  order: -1; /* above the card's heading on screen, after it in the markup */
  margin: 0 0 var(--s-2);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--app-tint);
}
.ba__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__before {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  left: -100%;
  width: 200%;
  overflow: hidden;
  transform: translateX(-27.5%); /* its right edge at 45 % of the picture */
}
.ba__frame {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 50%; /* the picture's box */
  transform: translateX(55%); /* back by as much as the window moved */
}
.ba__line {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: translateX(45%);
}
.ba__line::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  transform: translateX(-50%);
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(22 21 15 / 0.12); /* the app's divider ring (tool_reel.dart: ink at 12 %) */
}
.ba__tag {
  position: absolute;
  bottom: var(--s-2);
  left: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--t-xs) / 1.4 var(--f-text);
  box-shadow: var(--sh-1);
}
.ba__tag--after {
  left: auto;
  right: var(--s-2);
}
@media (prefers-reduced-motion: no-preference) {
  /* Three loops from the rest back to it, then still: the motion ends (WCAG 2.2.2) 21 s after the card's start. Each
     next card starts a beat later: a wave down the grid instead of eight sweeps at once. */
  .ba__before {
    animation: ba-before 7s ease-in-out 3 both;
  }
  .ba__frame {
    animation: ba-frame 7s ease-in-out 3 both;
  }
  .ba__line {
    animation: ba-line 7s ease-in-out 3 both;
  }
  .feat:nth-child(2) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 0.5s;
  }
  .feat:nth-child(3) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 1s;
  }
  .feat:nth-child(4) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 1.5s;
  }
  .feat:nth-child(5) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 2s;
  }
  .feat:nth-child(6) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 2.5s;
  }
  .feat:nth-child(7) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 3s;
  }
  .feat:nth-child(8) :is(.ba__before, .ba__frame, .ba__line) {
    animation-delay: 3.5s;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* a pointer resting on a picture holds it, to compare the two sides */
  .ba:hover :is(.ba__before, .ba__frame, .ba__line) {
    animation-play-state: paused;
  }
}
/* One timing for all three (7 s, the app's 4.7 s loop at 1.5x, from its resting frame on, as the app's card plays),
   written as the divider's place X (% of the picture): 45 % (the rest), 40 %, 85 %, off the left, the after alone, the
   before back in from the left, the before alone, in from the right to the rest. 103 % / -3 %: the line off the
   picture. The window moves by (X - 100) / 2 % of its own width, its frame by 100 - X %, the line by X %. */
@keyframes ba-before {
  0%,
  100% {
    transform: translateX(-27.5%);
  }
  10% {
    transform: translateX(-30%);
  }
  22.86% {
    transform: translateX(-7.5%);
  }
  35.71%,
  58.57% {
    transform: translateX(-51.5%);
  }
  72.86%,
  85.71% {
    transform: translateX(1.5%);
  }
}
@keyframes ba-frame {
  0%,
  100% {
    transform: translateX(55%);
  }
  10% {
    transform: translateX(60%);
  }
  22.86% {
    transform: translateX(15%);
  }
  35.71%,
  58.57% {
    transform: translateX(103%);
  }
  72.86%,
  85.71% {
    transform: translateX(-3%);
  }
}
@keyframes ba-line {
  0%,
  100% {
    transform: translateX(45%);
  }
  10% {
    transform: translateX(40%);
  }
  22.86% {
    transform: translateX(85%);
  }
  35.71%,
  58.57% {
    transform: translateX(-3%);
  }
  72.86%,
  85.71% {
    transform: translateX(103%);
  }
}

/* featured styles */
.styles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  list-style: none;
  padding: 0;
}
.style {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}
.style__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--app-tint);
}
.style figcaption {
  font-weight: 600;
  font-size: var(--t-sm);
}
@media (min-width: 640px) {
  .styles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* get-the-app band */
.sec--get {
  padding-top: 0;
}
.get {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--app-ink);
  color: #fff;
}
.get__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-icon);
}
.get :focus-visible {
  outline-color: #fff; /* the default focus blue is too dark on the band (WCAG 1.4.11) */
}
.get h2 {
  font-size: var(--t-2xl);
}
@media (min-width: 1024px) {
  .get {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: var(--s-7);
  }
}

/* footer */
.main-pad {
  padding-bottom: var(--s-8);
}
.foot {
  padding-block: var(--s-6) var(--s-7);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.foot__in {
  display: grid;
  gap: var(--s-5);
}
.foot__nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-5);
  list-style: none;
  padding: 0;
}
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.foot__nav a:hover {
  text-decoration: underline;
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.foot__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.foot__home .mark {
  width: 28px;
  height: 28px;
}
.foot__legal {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* studio home */
.intro {
  padding-block: var(--s-7) var(--s-8);
}
.intro h1 {
  font-size: var(--t-3xl);
  max-width: 15ch;
}
.intro p {
  margin-top: var(--s-4);
  font-size: var(--t-lg);
  color: var(--ink-2);
  max-width: 46ch;
}
.apps {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
}
.app-card {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--app-tint);
  color: var(--app-ink);
}
.app-card:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.app-card__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--r-icon);
  box-shadow: var(--sh-1);
}
.app-card__name {
  font-size: var(--t-xl);
}
.app-card__name .wm {
  font-size: 1.15em;
}
.app-card p {
  color: var(--ink-2);
}
.app-card a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.app-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.app-card a:focus-visible {
  outline: none;
}
.app-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
}
.company {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.company h2 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
}
.company ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}
@media (min-width: 640px) {
  .apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .company {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* page heading (legal, support, delete) */
.page-head {
  padding-block: var(--s-6) var(--s-6);
}
.page-head h1 {
  font-size: var(--t-2xl);
}
.page-head p {
  margin-top: var(--s-3);
  color: var(--ink-2);
  max-width: 56ch;
}
.meta {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* legal document */
.doc {
  display: grid;
  gap: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.toc {
  font-size: var(--t-sm);
}
.toc ol {
  display: grid;
  list-style: none;
  padding: 0;
}
.toc a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.toc__title {
  font: 600 var(--t-xs) / 1 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.toc--m {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.toc--m summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.toc--m summary::-webkit-details-marker {
  display: none;
}
.toc--m summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}
.toc--m[open] summary::after {
  content: "\2013";
}
.toc--m ol {
  padding: 0 var(--s-4) var(--s-3);
}
.toc--d {
  display: none;
}
.prose {
  max-width: var(--measure);
  line-height: 1.7;
}
.prose h2 {
  font-size: var(--t-xl);
  margin: 2em 0 0.6em;
  scroll-margin-top: var(--s-5);
}
.prose > h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-size: var(--t-lg);
  margin: 1.6em 0 0.4em;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1em;
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose li::marker {
  color: var(--ink-3);
}
.card-co {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  line-height: 1.6;
}
.card-co strong {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  margin-bottom: var(--s-1);
}
@media (min-width: 1024px) {
  .doc {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--s-8);
  }
  .doc--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc--m {
    display: none;
  }
  .toc--d {
    display: block;
    position: sticky;
    top: var(--s-5);
    align-self: start;
  }
  .prose {
    font-size: 1.125rem;
  }
}
@media print {
  .top,
  .foot,
  .toc,
  .skip {
    /* biome-ignore lint/complexity/noImportantStyles: print drops the chrome whatever its layout rules say */
    display: none !important;
  }
  .prose {
    max-width: none;
  }
  body {
    background: #fff;
  }
}

/* support tiles */
.tiles {
  display: grid;
  gap: var(--s-4);
}
.tile {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tile h2 {
  font-size: var(--t-lg);
}
.tile p {
  color: var(--ink-2);
}
.after {
  margin-top: var(--s-7);
}
.email-link {
  font: 700 var(--t-xl) / 1.2 var(--f-display);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* account deletion */
.notice {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--app-tint);
  color: var(--app-ink);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
}
.ticks {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
}
.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  font-weight: 600;
}
.ticks svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.notice__note {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.path {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.path h2 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xl);
}
.path__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--app-ink);
  color: #fff;
  font: 700 1rem / 1 var(--f-display);
}
.path__lead {
  color: var(--ink-2);
}
.path h3 {
  font-size: var(--t-lg);
}
.step {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}
@media (max-width: 380px) {
  .path {
    padding: var(--s-4);
  }
}
.step[hidden] {
  display: none;
}
.who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--sunk);
  border-radius: var(--r-sm);
  font-weight: 600;
}
.linkbtn {
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.warn-line {
  font-size: var(--t-sm);
  color: var(--ink-2);
}
@media (min-width: 640px) {
  .path {
    padding: var(--s-6);
  }
}
@media (min-width: 1024px) {
  .paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* sign-in providers: our Sign in with Apple button (Apple JS signIn() from the click) and the GIS-rendered Google button */
.idp {
  display: grid;
  gap: var(--s-3);
  max-width: 400px;
}
.idp__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: 8px;
  font:
    500 1.0625rem / 1 -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
  cursor: pointer;
}
.idp__btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.idp__btn--apple {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.idp__btn--apple svg {
  width: 20px;
  height: 20px;
  margin-top: -3px;
}
.idp__google {
  min-height: 44px;
}
.idp__google[hidden] {
  display: none;
}
.idp__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* form fields */
.form {
  display: grid;
  gap: var(--s-4);
}
.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-weight: 600;
  font-size: var(--t-sm);
}
.field .opt {
  font-weight: 400;
  color: var(--ink-3);
}
.input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 1rem / 1.4 var(--f-text);
}
.input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgb(31 91 216 / 0.22);
}
.input[aria-invalid="true"] {
  border-color: var(--err);
}
.input:disabled {
  background: var(--sunk);
  color: var(--ink-3);
}
.input--code {
  max-width: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hint {
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.field-err {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--err);
}
.field-err[hidden] {
  display: none;
}

/* Cloudflare Turnstile mount (the widget renders its own 300x65 frame) */
.ts {
  min-height: 65px;
  max-width: 100%;
}

/* alerts */
.alert {
  --c: var(--info);
  --bg: var(--info-bg);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
}
.alert[hidden] {
  display: none;
}
.alert svg {
  width: 22px;
  height: 22px;
  color: var(--c);
  margin-top: 1px;
}
.alert__title {
  font-weight: 700;
  color: var(--c);
}
.alert--ok {
  --c: var(--ok);
  --bg: var(--ok-bg);
}
.alert--err {
  --c: var(--err);
  --bg: var(--err-bg);
}
.alert--warn {
  --c: var(--warn);
  --bg: var(--warn-bg);
}
.alert--page {
  margin-bottom: var(--s-5);
}
.alert:focus {
  outline: none;
}
.alert:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* 404 */
.nf {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  padding-block: var(--s-8) var(--s-9);
}
.nf__code {
  font: 800 clamp(5rem, 3rem + 10vw, 9rem) / 0.9 var(--f-display);
  letter-spacing: -0.04em;
  color: var(--line-2);
}
.nf h1 {
  font-size: var(--t-2xl);
}
.nf .lead {
  color: var(--ink-2);
}
.nf__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* a busy sign-in button hides its logo with its label (last: it must outrank the per-component svg sizes) */
.idp__btn[aria-busy="true"] svg {
  visibility: hidden;
}