/* 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: inline-grid;
  place-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 28%;
  background: var(--ink);
  color: var(--paper);
  font: 800 12.5px / 0.92 var(--f-display);
  letter-spacing: -0.02em;
  text-align: center;
}
.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 */
.feats {
  display: grid;
  list-style: none;
  padding: 0;
}
.feat {
  display: grid;
  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 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-7);
  }
}

/* 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;
  font-size: 10px;
}
.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;
}