/* The site's pages: the landing page and the documents beside it (privacy,
   terms). Brand palette from experience-final-brand-assets: cream ground,
   charcoal ink, coral accent; the split-e mark, Geist. One primary button;
   no rules, no glow.

   Colour is one light-dark() pair per token, and dark swaps ground and ink.
   The device's scheme picks the side unless the visitor chooses Light or
   Dark in the footer (theme.js), and the framed Menu follows the same
   choice. */

/* Geist, SIL Open Font License 1.1: /fonts/OFL.txt */
@font-face {
  font-family: Geist;
  src: url("/fonts/geist-latin-rupee-wght-400-700-ofl.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: light-dark(#f8f5ef, #20201e);
  --ink: light-dark(#20201e, #f8f5ef);
  --muted: light-dark(#55504a, #c6c1b8);
  --line: light-dark(#e2dcd0, #3f3e3a);
  --accent: #cc3a1a;
  --accent-ink: #fff8f5;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --max: 72rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--bg);
}

:root[data-appearance="light"] {
  color-scheme: light;
}

:root[data-appearance="dark"] {
  color-scheme: dark;
}

/* Before light-dark() (Chrome 123, Safari 17.5), the light side of every
   pair keeps the page legible; the Menu makes the same floor. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light;
    --bg: #f8f5ef;
    --ink: #20201e;
    --muted: #55504a;
    --line: #e2dcd0;
  }

  /* A chosen Dark still means dark there: the dark side of each pair, by
     hand, so the control never reports what the page does not show. */
  :root[data-appearance="dark"] {
    color-scheme: dark;
    --bg: #20201e;
    --ink: #f8f5ef;
    --muted: #c6c1b8;
    --line: #3f3e3a;
  }

  /* The Appearance track and indicator, mixed from the tokens above. */
  .theme {
    background: color-mix(in srgb, var(--ink) 9%, var(--bg));
  }

  .theme-indicator {
    background: color-mix(in srgb, var(--ink) 18%, var(--bg));
  }
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  /* The body is a stacking context so the grain below can sit under every
     child at a negative level while staying above the body's own colour. */
  position: relative;
  isolation: isolate;
}

/* Grain on the background colour and nothing else: a fixed tile of
   monochrome noise, painted once, at the bottom of the stack, screened in
   the dark and multiplied in the light. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) body::before {
    opacity: 0.055;
    mix-blend-mode: screen;
  }
}

:root[data-appearance="dark"] body::before {
  opacity: 0.055;
  mix-blend-mode: screen;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
p {
  margin: 0;
}

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

:is(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Mark -------------------------------------------------------------------- */

/* The header: the mark, and the quiet way to reach us on every page. The
   button is the commitment; this is the question before it. A link to
   Gmail that, with site.js, opens the reach popover (below) instead. */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
}

.hdr .reach {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 140ms var(--ease);
}

.hdr .reach:hover,
.hdr .reach[aria-expanded="true"] {
  color: var(--ink);
}

/* Appearance: the Menu's own control (menu.css .ui-tabs--appearance), in the
   site's tokens. Three choices on one pill track; the indicator slides to the
   pressed one. */
.theme {
  --tab-index: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 156px;
  height: 52px;
  padding: 4px;
  border-radius: 9999px;
  background: light-dark(
    color-mix(in srgb, var(--ink) 9%, var(--bg)),
    color-mix(in srgb, var(--ink) 11%, var(--bg))
  );
}

.theme-indicator {
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 9999px;
  background: light-dark(
    color-mix(in srgb, var(--ink) 18%, var(--bg)),
    color-mix(in srgb, var(--ink) 22%, var(--bg))
  );
  transform: translateX(calc(var(--tab-index) * 100%));
  transition: transform 180ms var(--ease);
  pointer-events: none;
}

.theme button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms var(--ease);
}

.theme button[aria-pressed="true"] {
  color: var(--ink);
}

@media (hover: hover) {
  .theme button:hover {
    color: var(--ink);
  }
}

.theme svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* The mark alone is the wordmark. */
.brand {
  display: inline-flex;
  align-items: center;
}

.brand svg {
  width: 2.5rem;
  height: 2.5rem;
}

.mark-top {
  fill: var(--ink);
}

/* The mark's lower half is the brand coral, as the favicon paints it; a
   picture carries no text, so the contrast floors above do not apply to it.
   Text and buttons keep the darker accent, which does clear them. */
.mark-bottom {
  fill: #f84e32;
}

/* Buttons ----------------------------------------------------------------- */

/* One primary face, solid coral with a light label, a darker coral rim and a
   gloss on the top edge; its shadow stays tight to the button, never a glow
   below it. The label is large and bold, where the cream on the coral
   (4.8:1) clears the 3:1 floor for large text. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding-inline: 2rem;
  border: 1px solid color-mix(in oklab, var(--accent) 80%, #000);
  border-radius: 1.125rem;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--accent) 90%, #fff),
    var(--accent) 40%,
    color-mix(in oklab, var(--accent) 94%, #000)
  );
  color: var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 32%),
    inset 0 -1px 0 rgb(0 0 0 / 8%),
    0 1px 2px rgb(0 0 0 / 14%);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    filter 140ms var(--ease),
    transform 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

/* Before color-mix() (Chrome 111, Safari 16.2) the rim and the gloss above,
   which read var(), are dropped when the page is drawn, not when it is
   read, so a plain declaration before them would lose too: the button
   would be a cream label on the cream page. The flat coral face instead,
   and the rim the mix makes (#cc3a1a 80% toward black in oklab). */
@supports not (color: color-mix(in srgb, red, red)) {
  .btn {
    border: 1px solid #972810;
    background: var(--accent);
  }
}

.btn:hover,
.btn[aria-expanded="true"] {
  filter: brightness(0.96);
}

/* Pressed, it gives a little under the finger and loses its lift. */
.btn:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -1px 0 rgb(0 0 0 / 8%);
}

/* Type -------------------------------------------------------------------- */

.h-display {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.h-section {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.lede {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Hero -------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  align-items: center;
  align-content: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  min-height: calc(100dvh - 5.5rem);
  padding-block: 1rem 3rem;
}

.hero .copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 36rem;
}

.hero figure {
  display: grid;
  justify-items: end;
  margin: 0;
}

/* The link to the live Menu is for phones, where the framed Menu is a
   preview only; on a desktop the frame itself is live. */
.hero .live {
  display: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Statement ---------------------------------------------------------------- */

.statement {
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 8vw, 6rem);
  text-align: center;
}

.statement .h-section {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.statement p {
  max-width: 40ch;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(1.1875rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* The two promises in the accent. WCAG 2 luminance, #cc3a1a: 4.6:1 on the
   light ground (#f8f5ef), 3.3:1 on the dark (#20201e). Bold at 19px or more
   is large text under WCAG 2 (14pt bold is 18.67px; checkers count bold
   from 700), so the dark side clears the 3:1 floor for large text. */
.statement strong {
  color: var(--accent);
  font-weight: 700;
}

/* Footer ------------------------------------------------------------------ */

.ftr {
  padding-block: clamp(2rem, 5vw, 3.5rem) 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Privacy and Terms sit in the centre; the Appearance control keeps to the
   right edge without pushing them off it. Both take their column by name:
   auto-placement would put the control in the empty first column, to the
   left of the links. */
.ftr .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.ftr nav {
  grid-column: 2;
  display: flex;
  gap: 2rem;
  font-weight: 500;
}

.ftr .theme {
  grid-column: 3;
  justify-self: end;
}

.ftr nav a:hover {
  color: var(--ink);
}

/* Documents --------------------------------------------------------------- */

/* Privacy and terms sit in the same column as the landing page; only the
   running text keeps a reading measure. */
.doc {
  padding-block: 1rem 0;
  font-size: 1rem;
  line-height: 1.6;
}

.doc h1,
.doc h2,
.doc p {
  max-width: 40rem;
}

.doc h1 {
  margin-bottom: 0.5rem;
}

.doc .updated {
  margin-bottom: 2.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.doc h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.doc p {
  margin-bottom: 1rem;
  text-wrap: pretty;
}

.doc a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.15em;
}

/* Phone mockup ------------------------------------------------------------ */

/* iPhone 17 source geometry: 71.5 x 149.6 mm body (Apple technical
   specifications), 402 x 874 pt viewport (Apple HIG). The 432 x 903 model
   below preserves those physical proportions around a 402-wide browser
   viewport, shown at a uniform 0.74074 scale: 320 x 669 CSS pixels. */
:root {
  --stage-h: 669px;
  --scale: 0.74074;
}

.menu-preview {
  width: min(100%, 320px);
}

.menu-preview__stage {
  /* The screen's colour behind and above the Menu: the Menu's --ground,
     read from the frame once it loads, so the status band continues the
     Menu's own header rather than sitting on a mismatched surface. */
  --menu-preview-screen: light-dark(#f2f0ec, #0f0f12);
  --menu-preview-ink: light-dark(#282522, #f1f1ef);

  position: relative;
  width: 320px;
  height: var(--stage-h);
}

.menu-preview__device {
  position: absolute;
  top: 0;
  left: 0;
  width: 432px;
  height: 903px;
  border-radius: 62px;
  background:
    linear-gradient(135deg, #60625e 0%, #20211f 18%, #090a09 48%, #343632 100%),
    #111210;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 5px rgba(0, 0, 0, 0.86);
  transform: scale(var(--scale));
  transform-origin: top left;
}

.menu-preview__device::before {
  position: absolute;
  inset: 4px;
  border-radius: 58px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 3px rgba(0, 0, 0, 0.42);
  content: "";
  pointer-events: none;
}

.menu-preview__screen,
.menu-preview__screen-outline {
  position: absolute;
  inset: 14.5px 15px;
  border-radius: 52px;
}

.menu-preview__screen {
  z-index: 1;
  overflow: hidden;
  background: var(--menu-preview-screen);
}

/* A real phone shows the time, signal and battery in this band, and reports
   its height to the Menu as the top safe-area inset. A frame reports no
   inset, so the Menu starts below the band instead: the band is the
   screen's colour, synced to the Menu's header, and carries the glyphs. */
.menu-preview__status {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 2px 26px 0 32px;
  color: var(--menu-preview-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
  pointer-events: none;
}

.menu-preview__status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.menu-preview__status-icons svg {
  display: block;
  overflow: visible;
}

.menu-preview__home {
  position: absolute;
  bottom: 9px;
  left: 50%;
  z-index: 4;
  width: 140px;
  height: 5px;
  border-radius: 999px;
  background: var(--menu-preview-ink);
  opacity: 0.32;
  transform: translateX(-50%);
  pointer-events: none;
}

.menu-preview__screen-outline {
  z-index: 4;
  box-shadow:
    inset 0 0 0 0.75px rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.68);
  pointer-events: none;
}

.menu-preview__frame {
  position: absolute;
  top: 48px;
  left: 0;
  display: block;
  width: 402px;
  height: 826px;
  border: 0;
  background: var(--menu-preview-screen);
  color-scheme: light dark;
}

.menu-preview__island {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 4;
  width: 126px;
  height: 37px;
  border-radius: 999px;
  background: #030303;
  box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  pointer-events: none;
}

.menu-preview__island span {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1b2b3a, #06090d 68%);
}

.menu-preview__side-button,
.menu-preview__camera-control {
  position: absolute;
  z-index: 0;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #111210, #555852 48%, #181917);
}

.menu-preview__side-button--action {
  top: 176px;
  left: -3px;
  height: 38px;
}

.menu-preview__side-button--volume-up {
  top: 235px;
  left: -3px;
  height: 68px;
}

.menu-preview__side-button--volume-down {
  top: 319px;
  left: -3px;
  height: 68px;
}

.menu-preview__side-button--power {
  top: 244px;
  right: -3px;
  height: 96px;
}

.menu-preview__camera-control {
  top: 615px;
  right: -3px;
  height: 72px;
}

/* On a phone the framed Menu is a preview that takes no touch, so a tap
   anywhere on the device opens the live Menu: a link over the device, with
   no face of its own. The device gives a little under the finger. Hidden on
   a desktop, where the frame itself is live. */
.menu-preview__open {
  display: none;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 51.25rem) {
  .menu-preview__open {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: block;
    border-radius: 2.4rem;
  }

  .menu-preview__stage {
    transition: transform 120ms var(--ease);
  }

  .menu-preview__stage:has(.menu-preview__open:active) {
    transform: scale(0.985);
  }

  /* The copy a fixed step below the header and the device a fixed step
     below the button; the device's head is what the fold leaves showing.
     The figure is only as tall as the peep; the rest of the device lies
     under it and the next section starts below the device. */
  :root {
    --peek: 13rem;
    --stage-h: 35.5625rem;
    --scale: 0.62963;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
    padding-block: 0;
    text-align: center;
  }

  .hero .h-display {
    font-size: 2.25rem;
  }

  /* The words and the button centre, where a thumb reaches. */
  .hero .copy {
    align-items: center;
    gap: 1.25rem;
    margin-inline: auto;
    padding-top: 2.5rem;
  }

  .hero .lede {
    margin-inline: auto;
  }

  .hero .btn {
    min-width: 11rem;
  }

  .hero .live {
    display: inline-block;
    margin-top: -0.25rem;
  }

  /* The framed Menu is a preview only: nothing in it takes a touch, so a
     flick over it scrolls the page, never the Menu. The page script also
     makes the frame inert at this width, for the keyboard and assistive
     technology. */
  .hero figure {
    height: var(--peek);
    justify-items: center;
  }

  .statement {
    padding-top: calc(var(--stage-h) - var(--peek) + 5rem);
  }

  .menu-preview__frame {
    pointer-events: none;
  }

  /* The device at a product shot's size, clear of the gutters. */
  .menu-preview,
  .menu-preview__stage {
    width: 17rem;
  }

  /* The footer's outer tracks are narrower than the Appearance control
     here (a 280px column against a 156px control), so it takes a row of
     its own under the links, centred like them. */
  .ftr .wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 1.5rem;
  }

  .ftr nav {
    grid-column: auto;
  }

  .ftr .theme {
    grid-column: auto;
    justify-self: center;
  }
}

/* Reach ------------------------------------------------------------------- */

/* The one way to reach us is the address, and this is where it is offered:
   the card under Get started. A solid surface a shade off the page in a
   hairline ring and a soft shadow, two rows each a name over a quiet line
   beneath, nothing else. It sits under whichever
   control opened it (site.js places it and sets the origin), or above it
   when the viewport has no room below, and grows out of that control: a
   short settle, no overshoot, the same path back. */
.reach-pop {
  position: absolute;
  inset: auto;
  /* Never wider than the viewport less the 12px inset each side that
     site.js keeps. */
  width: min(17rem, calc(100vw - 24px));
  margin: 0;
  padding: 0.25rem;
  border: 0;
  border-radius: 12px;
  background: color-mix(in oklab, var(--ink) 3%, var(--bg));
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--line),
    0 12px 28px -12px rgb(0 0 0 / 22%);
  text-align: left;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transform-origin: top center;
  transition:
    opacity 140ms var(--ease),
    transform 140ms var(--ease),
    display 140ms allow-discrete,
    overlay 140ms allow-discrete;
}

.reach-pop[data-side="above"] {
  transform: translateY(4px) scale(0.96);
}

.reach-pop:popover-open {
  opacity: 1;
  transform: none;
  transition-duration: 220ms;
}

@starting-style {
  .reach-pop:popover-open {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }

  .reach-pop[data-side="above"]:popover-open {
    transform: translateY(4px) scale(0.96);
  }
}

/* Before the Popover API the attribute means nothing and the element would
   sit at the foot of the page, invisible but in the tab order; there it is
   not in the document at all, and the controls stay links to Gmail. */
@supports not selector(:popover-open) {
  .reach-pop {
    display: none;
  }
}

/* Each row: the name, and under it the quiet line (where Gmail opens; the
   address itself, which a tap selects whole, the fallback copy on every
   platform). A tint on hover, deeper while pressed, and it answers on the
   press. 9px inside 12px with 4px of padding keeps the corners concentric. */
.reach-pop__option {
  display: grid;
  width: 100%;
  gap: 0.1875rem;
  padding: 0.75rem 0.875rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 140ms var(--ease),
    transform 120ms var(--ease);
}

.reach-pop__option:hover,
.reach-pop__option:focus-visible {
  background: color-mix(in oklab, var(--ink) 6%, var(--bg));
}

.reach-pop__option:focus-visible {
  outline-offset: -2px;
}

.reach-pop__option:active {
  background: color-mix(in oklab, var(--ink) 10%, var(--bg));
  transform: scale(0.985);
}

.reach-pop__sub {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 450;
}

/* The address alone selects whole on a tap: the fallback copy on every
   platform. The Gmail row's line is only a hint. */
.reach-pop__sub[data-address] {
  user-select: all;
  -webkit-user-select: all;
}

/* The copy row's name changes with the copy (site.js): a short rise,
   restarted by the script each time. */
[data-state] .reach-pop__label {
  animation: reach-label 200ms var(--ease);
}

@keyframes reach-label {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

/* Announcements for assistive technology, off the canvas. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-contrast: more) {
  .reach-pop {
    box-shadow: 0 0 0 1px var(--ink);
  }
}

/* Reduced motion keeps every state change, as a cross-fade: nothing moves
   or scales. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .theme-indicator,
  .theme button {
    transition: none;
  }

  .btn:active {
    transform: none;
  }

  .reach-pop,
  .reach-pop:popover-open {
    transform: none;
    transition:
      opacity 120ms ease,
      display 120ms allow-discrete,
      overlay 120ms allow-discrete;
  }

  @starting-style {
    .reach-pop:popover-open,
    .reach-pop[data-side="above"]:popover-open {
      transform: none;
    }
  }

  .reach-pop__option {
    transition: none;
  }

  .reach-pop__option:active,
  .menu-preview__stage:has(.menu-preview__open:active) {
    transform: none;
  }

  .menu-preview__stage {
    transition: none;
  }

  [data-state] .reach-pop__label {
    animation: none;
  }
}
/* Forced colours drop the Appearance control's tinted indicator, so the
   chosen option is drawn on Highlight, as the Menu's own control does. */
@media (forced-colors: active) {
  .theme-indicator {
    background: Highlight;
  }
  .theme button[aria-pressed="true"] {
    forced-color-adjust: none;
    color: HighlightText;
  }
}