/* Site and video share this file. Colours are the phone app's Material 3 blue scheme (seed #415F91,
   android/app/src/main/java/dev/droiddock/phone/ui/Theme.kt). The phone and Mac drawings follow the shipped
   designs (docs/ui/droiddock-home-card-mockups-v1.0.0.html direction C, docs/images/mac-icons-design.png
   style A) in their dark look on both page themes. No inline styles anywhere (CSP). */

@font-face {
  font-family: "Inter";
  /* Weight and optical size axes: large headings get Inter Display's tighter shapes automatically. */
  src: url("/fonts/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #161618;
  --bg-alt: #1c1c1f;
  --surface: #232326;
  --surface-2: #2c2c30;
  --surface-3: #37373c;
  --text: #ececf0;
  --muted: #c7c7cd;
  --subtle: #8e9099;
  --border: rgba(235, 235, 245, 0.12);
  --primary: #aac7ff;
  --on-primary: #0a305f;
  --pc: #284777;
  --on-pc: #d6e3ff;
  --sc: #1f4d23;
  --on-sc: #c6efc2;
  --success: #8fd88b;
  --wc: #5c3a00;
  --on-wc: #ffddb8;
  --error: #ffb4ab;
  --radius: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The page is in macOS-style graphite greys; blue is kept for actions, links and the app UIs. */
  --sky: #161618;
  --hero-chip: #284777;
  --menubar: #1e1e21;
  --sel: #2c5ba6;
  --sel-text: #ffffff;
  --hs-mac: #24242a;
  --hs-and: #1e2434;
  --hs-both: #2c4a80;
  --menubar-hover: rgba(255, 255, 255, 0.1);
  /* Below the hero the sections sit in three bands that step a little darker, then the footer. */
  --band-a: #1c1c1f;
  --band-b: #202024;
  --band-c: #25252a;
  --valley: #2b2b30;
  --band-subtle: #a3a3ab;
  --band-c-primary: #aac7ff;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f7;
    --bg-alt: #ececf0;
    --surface: #ffffff;
    --surface-2: #f2f2f5;
    --surface-3: #e3e3e8;
    --text: #1d1d1f;
    --muted: #46464b;
    --subtle: #6e6e73;
    --border: rgba(0, 0, 0, 0.1);
    --primary: #415f91;
    --on-primary: #ffffff;
    --pc: #d6e3ff;
    --on-pc: #284777;
    --sc: #c6efc2;
    --on-sc: #0b3a10;
    --success: #2e6b30;
    --wc: #ffddb8;
    --on-wc: #2d1600;
    --error: #ba1a1a;
    --sky: #f5f5f7;
    --hero-chip: #ffffff;
    --menubar: #ececef;
    --sel: #b3d7ff;
    --sel-text: #0d1a33;
    --hs-mac: #e6e6eb;
    --hs-and: #e1e8f6;
    --hs-both: #b9cfff;
    --menubar-hover: rgba(0, 0, 0, 0.07);
    --band-a: #eeeef2;
    --band-b: #e8e8ed;
    --band-c: #e1e1e7;
    --valley: #d1d1d8;
    --band-subtle: #57575d;
    --band-c-primary: #34507f;
    color-scheme: light;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 56px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  font-weight: 760;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 730;
  max-width: 20em;
}

h3 {
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 8px 14px;
  border-radius: 12px;
  z-index: 30;
}

.skip:focus {
  top: 12px;
}

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

.wrap {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 720px) {
  .wrap {
    padding: 0 32px;
  }
}

.narrow {
  max-width: 840px;
}

.narrow-center {
  max-width: 1040px;
  text-align: center;
}

.narrow-center h2,
.narrow-center .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.center {
  text-align: center;
}

.center .card-icon {
  margin: 0 auto 18px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.88rem;
}

.dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}

/* Header */

/* The site header is a macOS menu bar: the name in bold, the sections as menus, and on the right the
   Macophone status item with the menu the Mac app opens, then Wi-Fi, battery and the viewer's own clock. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--menubar);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.mb-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 10px 0 14px;
}

.mb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.mb-brand .logo-mark {
  width: 22px;
  height: 22px;
}

.mb-menus {
  display: none;
}

.mb-menus a,
.mb-cta {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.mb-menus a:hover,
.mb-cta:hover,
.mb-extra summary:hover,
.mb-extra[open] summary {
  background: var(--menubar-hover);
}

.mb-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.mb-cta {
  color: var(--primary);
  font-weight: 650;
}

.mb-extra summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border-radius: 6px;
  color: var(--text);
  list-style: none;
  cursor: pointer;
}

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

.mb-extra summary .i {
  width: 18px;
  height: 18px;
}

.mb-icon {
  display: none;
  width: 16px;
  height: 16px;
  margin: 0 7px;
  color: var(--text);
}

.mb-clock {
  padding: 0 6px 0 8px;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mb-cta {
  display: none;
}

@media (min-width: 420px) {
  .mb-cta {
    display: block;
  }
}

@media (min-width: 560px) {
  .mb-icon {
    display: block;
  }
}

@media (min-width: 900px) {
  .mb-menus {
    display: flex;
    gap: 2px;
  }
}

/* The menu that drops from the status item, drawn like the Mac app's own menu. */
.mb-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 16px));
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(0, 0, 0, 0.32);
  animation: mb-drop 0.16s var(--ease);
}

@keyframes mb-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.mb-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px;
}

.mb-menu-head strong,
.mb-menu-head small {
  display: block;
  line-height: 1.3;
}

.mb-menu-head small {
  color: var(--subtle);
  font-size: 0.8rem;
}

.mb-menu-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--pc);
  color: var(--on-pc);
}

.mb-menu-icon .i {
  width: 18px;
  height: 18px;
}

.mb-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 2px 6px;
}

.mb-tiles a {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 2px 8px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: 0.74rem;
  line-height: 1.2;
  text-align: center;
}

.mb-tiles .i {
  width: 18px;
  height: 18px;
}

.mb-items {
  display: grid;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}

.mb-items a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

.mb-items .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.mb-tiles a:hover,
.mb-items a:hover,
.mb-tiles a:focus-visible,
.mb-items a:focus-visible {
  background: var(--primary);
  color: var(--on-primary);
  outline: none;
}

.mb-items a:hover .i,
.mb-items a:focus-visible .i {
  color: inherit;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 740;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.logo-mark {
  width: 34px;
  height: 34px;
  flex: none;
}

/* The phone settles into the dock on load, as in the app's own glyph. */
.logo-phone {
  animation: settle 1.1s 0.3s var(--ease) both;
}

.logo-ghost {
  animation: ghost 1.1s 0.3s var(--ease) both;
}

@keyframes settle {
  from {
    transform: translateY(-3.5px);
  }
}

@keyframes ghost {
  from {
    opacity: 0;
  }
}

/* Buttons: Material 3 filled and tonal. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.07);
}

.btn-tonal {
  background: var(--pc);
  color: var(--on-pc);
}

.btn-small {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.92rem;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Hero, with the playground beside the copy */

.hero {
  --subtle: var(--band-subtle);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sky);
  padding: 40px 0 72px;
}

/* Android meets Mac: the playground panel is see-through, so the devices sit on their own shapes (placed by
   app.js), and the shapes carry on past the panel's frame. Solid tonal fills; the overlap is the app's blue. */
.hero .sim {
  background: transparent;
}

.hero-shapes {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hs-mac {
  fill: var(--hs-mac);
}

.hs-and {
  fill: var(--hs-and);
}

.hs-both {
  fill: var(--hs-both);
}

.hs-spin {
  animation: hs-spin 140s linear infinite;
}

@keyframes hs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Bands: sections in one band share its colour, and a hairline marks where the next band starts. */
.band-a {
  --band: var(--band-a);
}

.band-b {
  --band: var(--band-b);
}

.band-c {
  --primary: var(--band-c-primary);
  --band: var(--band-c);
}

.section.band-a,
.section.band-b,
.section.band-c {
  --subtle: var(--band-subtle);
  background: var(--band);
}

.hero,
.hero + .section,
.band-a + .band-b,
.band-b + .band-c,
.site-footer {
  border-top: 1px solid var(--border);
}

.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (max-width: 699px) {
  .hero {
    padding: 28px 0 48px;
  }
}

@media (min-width: 1060px) {
  .hero {
    padding: 56px 0 96px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 48px;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 520;
  margin-bottom: 20px;
}

.lead {
  font-size: 1.12rem;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 30px;
}

.hero-actions .btn {
  padding: 0 22px;
}

.hero h1 {
  font-size: clamp(2.4rem, 4.1vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  text-wrap: balance;
}

/* "fluent in Mac." is a real Mac text selection, in macOS's own selection colours: on load a text cursor
   blinks, then the selection sweeps across the words as if someone just dragged over them. */
.hero h1 .accent {
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: var(--sel-text);
  padding: 0 0.08em 0.04em;
  margin-top: 0.06em;
  animation: select-text 0.3s 1.3s both;
}

.hero h1 .accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.06em;
  background: var(--sel);
  transform-origin: left;
  animation: select-sweep 0.55s 1.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The text cursor: blinks before the selection starts, rides its right edge, then goes. */
.hero h1 .accent::after {
  content: "";
  position: absolute;
  top: 0.08em;
  bottom: 0.1em;
  left: 0;
  width: 0.06em;
  border-radius: 0.03em;
  background: var(--text);
  animation: caret-blink 1.15s steps(1) both, caret-ride 0.55s 1.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes select-sweep {
  from {
    transform: scaleX(0);
  }
}

@keyframes caret-blink {
  0%,
  40%,
  80% {
    opacity: 1;
  }
  20%,
  60% {
    opacity: 0;
  }
}

@keyframes caret-ride {
  from {
    left: 0;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    left: calc(100% - 0.06em);
    opacity: 0;
  }
}

/* Until the sweep reaches them the words are plain headline text. */
@keyframes select-text {
  from {
    color: var(--text);
  }
}

.nowrap {
  white-space: nowrap;
}

.accent {
  color: var(--primary);
}

.hero-points {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 14px;
}

.hero-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.hero-points strong {
  display: block;
  color: var(--text);
  font-weight: 620;
}

.hero-points .i {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--pc);
  color: var(--on-pc);
}

.hero-req {
  margin: 20px 0 0;
  color: var(--subtle);
  font-size: 0.85rem;
}

@media (max-width: 1059px) {
  .hero-copy {
    max-width: 640px;
  }
}

/* Sections */

.section {
  padding: 96px 0;
}

.section-alt {
  background: var(--bg-alt);
}

.section-head {
  margin-bottom: 40px;
}

.kicker {
  color: var(--primary);
  font-weight: 640;
  font-size: 1rem;
  margin-bottom: 10px;
}

.section-lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 42em;
}

/* Reveal on scroll (only once app.js has marked the page, so content never hides without JavaScript). */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Segmented lists, as in the phone app: 16 px outer and 4 px inner corners, 2 px gaps, no shadows. */

.seg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.seg > li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: 4px;
}

.seg > li:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.seg > li:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.seg-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pc);
  color: var(--on-pc);
  flex: none;
  font-weight: 700;
}

.seg-icon svg {
  width: 22px;
  height: 22px;
}

.seg-icon-chat {
  background: #2f8f55;
  color: #fff;
  border-radius: 12px;
}

.seg-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.seg-text strong {
  font-weight: 560;
}

.seg-text small {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.seg-lg > li {
  align-items: flex-start;
  padding: 20px 22px;
}

.seg-lg .seg-text strong {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.seg-lg .seg-text small {
  font-size: 0.98rem;
}

/* Material 3 switch. */

.switch {
  position: relative;
  width: 52px;
  height: 32px;
  flex: none;
  border-radius: 16px;
  border: 2px solid var(--subtle);
  background: var(--surface-3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--subtle);
  transition: transform 0.2s var(--ease), width 0.2s var(--ease), height 0.2s var(--ease), margin 0.2s var(--ease), background 0.2s var(--ease);
}

.switch[aria-checked="true"] {
  background: var(--primary);
  border-color: var(--primary);
}

.switch[aria-checked="true"]::before {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  transform: translateX(16px);
  background: var(--on-primary);
}

/* Privacy */

.privacy-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1000px) {
  .privacy-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
  }
  .privacy-grid .section-head {
    position: sticky;
    top: 110px;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 0;
  border-top: 1px solid var(--border);
}

.stats div {
  padding: 18px 16px 0 0;
}

.stats dt {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--primary);
}

.stats dd {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ===== Playground: a phone and a Mac, drawn at the designs' sizes and scaled to fit (app.js sets zoom). ===== */

/* The playground sits in one flat panel, so it reads as its own space on the page. */
.sim {
  position: relative;
  min-width: 0;
  padding: 16px 18px 20px;
  border-radius: 28px;
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
}

.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.sim-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: live 1.8s ease-out 4;
}

@keyframes live {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.sim-head-text {
  order: 3;
  flex-basis: 100%;
  color: var(--text);
  font-weight: 560;
  font-size: 0.95rem;
}

.sim-reset .i-pause,
.sim-touring .sim-reset .i-play {
  display: none;
}

.sim-touring .sim-reset .i-pause {
  display: block;
}

.sim-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.sim-reset:hover {
  color: var(--text);
}

.sim-reset-2 {
  margin-left: 0;
}

.sim-touring .sim-badge {
  background: #ffb95c;
  color: #2d1600;
}

/* The demo's pointer, moved by app.js over the devices. */
.sim-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  width: 26px;
  height: 26px;
  pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.45, 0, 0.2, 1);
}

.sim-cursor svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  stroke: #111318;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.sim-click {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #aac7ff;
  opacity: 0;
}

.sim-cursor.clicking .sim-click {
  animation: click-ring 0.45s ease-out;
}

@keyframes click-ring {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* "Tap me" hints on two controls until the first tap; the ring pulses a few times, then rests. */
.coach {
  position: relative;
}

.coach::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid #aac7ff;
  pointer-events: none;
  animation: coach 1.6s ease-out 5;
}

.coach::before {
  content: attr(data-coach);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 8px;
  background: #aac7ff;
  color: #0a305f;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

@keyframes coach {
  0% {
    opacity: 1;
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

.stage {
  width: 100%;
}

.stage-inner {
  --design-w: 760;
  position: relative;
  width: 760px;
  height: 720px;
}

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

.stage svg {
  flex: none;
}

/* The Mac */

.mc {
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  height: 470px;
  padding: 8px;
  border-radius: 18px;
  background: #1c1d21;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #e8e8ed;
  font-size: 13px;
  line-height: 1.3;
}

.mc-screen {
  position: relative;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #16213a url("/wallpaper.svg") center bottom / cover no-repeat;
}

.mc svg {
  width: 15px;
  height: 15px;
}

.mc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 26px;
  padding: 0 12px;
  background: rgba(12, 14, 20, 0.55);
  font-size: 12.5px;
  font-weight: 500;
}

.mc-bar-left {
  margin-right: auto;
  opacity: 0.9;
}

.mc-bar-left::first-line {
  font-weight: 700;
}

.mc-bar-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-dock {
  display: grid;
  place-items: center;
  width: 30px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.mc-dock[aria-expanded="true"],
.mc-dock:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* The app's menu: card with the phone, the live item and four tiles, then native rows. */
.mc-menu {
  position: absolute;
  top: 30px;
  left: 248px;
  width: 290px;
  padding: 5px;
  border-radius: 11px;
  background: #242528;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.mc-card {
  background: #2e2f33;
  border-radius: 8px;
  padding: 3px 5px 6px;
}

.mc-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  min-height: 40px;
}

.mc-glyph {
  width: 18px !important;
  height: 18px !important;
}

.mc-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.mc-text strong {
  font-weight: 600;
}

.mc-text small {
  color: #a8a9b0;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-meta {
  color: #a8a9b0;
  font-size: 12px;
}

.mc-live {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  animation: pg-in 0.4s var(--ease);
}

.mc-live .ui-avatar,
.mc-live .ui-art,
.mc-banner .ui-avatar,
.mc-item-n .ui-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.mc-live .ui-avatar svg,
.mc-banner .ui-avatar svg {
  width: 14px;
  height: 14px;
}

.mc-chip {
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: #45464c;
  font-size: 11.5px !important;
  font-weight: 600;
}

.mc-chip-red {
  background: #c42b1c;
  color: #fff !important;
}

.mc-round {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #45464c;
}

.mc-round svg {
  width: 12px;
  height: 12px;
}

.mc-progress {
  height: 4px;
  margin-top: 5px;
  border-radius: 4px;
  background: #45464c;
  overflow: hidden;
}

.mc-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #aac7ff;
  animation: fill-once 1.6s var(--ease) forwards;
}

.mc-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 4px;
}

.mc-tiles button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px 7px;
  border: 0;
  border-radius: 8px;
  background: #3a3b40;
  font-size: 11px;
  line-height: 1.15;
}

.mc-tiles button:hover {
  background: #45464c;
}

.mc-tiles button:active {
  background: #505158;
}

.mc-tiles button span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #505158;
}

.mc-tiles svg {
  width: 13px !important;
  height: 13px !important;
}

.mc-items {
  padding: 4px 0 0;
}

.mc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 24px;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
}

.mc-item > span {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mc-item small {
  color: #a8a9b0;
  font-size: 11px;
}

.mc-item em {
  font-style: normal;
  color: #a8a9b0;
  font-size: 12px;
}

.mc-chev {
  width: 9px !important;
  height: 9px !important;
  opacity: 0.6;
}

.mc-btn:hover,
.mc-item-hl {
  background: #2f62d6;
}

.mc-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 4px 8px;
}

/* Native menu switch (the app's MenuSwitchStyle: accent when on, outlined track when off). */
.mswitch {
  position: relative;
  width: 26px;
  height: 15px;
  flex: none;
  border-radius: 8px;
  border: 1px solid #6c6d73;
  background: transparent;
  padding: 0;
  transition: background 0.15s;
}

.mswitch::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c9c9cf;
  transition: transform 0.15s;
}

.mswitch[aria-checked="true"],
.mswitch.on {
  background: #2f62d6;
  border-color: #2f62d6;
}

.mswitch[aria-checked="true"]::before,
.mswitch.on::before {
  transform: translateX(11px);
  background: #fff;
}

.mc-banners {
  position: absolute;
  top: 32px;
  right: 8px;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: 270px;
}

.mc-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(46, 47, 51, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: slide-in 0.4s var(--ease);
}

.mc-files {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}

.mc-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 78px;
  animation: pg-in 0.5s var(--ease);
}

.mc-thumb {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}

.mc-file small {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(10, 48, 95, 0.8);
  white-space: nowrap;
}

.mc-note {
  position: absolute;
  top: 120px;
  left: 248px;
  width: 290px;
  z-index: 4;
  padding: 14px;
  border-radius: 12px;
  background: #2e2f33;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: pg-in 0.3s var(--ease);
}

.mc-note-title {
  font-weight: 650;
  margin: 0 0 10px;
}

.mc-note-field {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #1e1f22;
  border: 2px solid #2f62d6;
}

.mc-note-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: #a8a9b0;
  font-size: 12px;
}

.mc-note-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mc-note-btns button,
.mc-note-btns span {
  border: 0;
  padding: 5px 14px;
  border-radius: 7px;
  background: #45464c;
  font-size: 12.5px;
}

.mc-note-btns .mc-default {
  background: #2f62d6;
  color: #fff !important;
}

.mc-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(6, 8, 14, 0.9);
  animation: fade-in 0.3s ease;
}

.mc-lock svg {
  width: 38px;
  height: 38px;
}

.mc-lock button {
  border: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.sim-incognito .mc-card {
  box-shadow: inset 0 0 0 2px #c7a3d1;
}

/* The phone (direction C, scaled to 340 px) */

.ph {
  position: absolute;
  left: 0;
  top: 64px;
  width: 340px;
  height: 656px;
  padding: 0 12px 14px;
  border-radius: 46px;
  background: #111318;
  border: 9px solid #1c1d21;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  color: #e2e2e9;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  z-index: 6;
}

.ph svg {
  width: 18px;
  height: 18px;
}

.ph-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
}

.ph-status::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: #050608;
}

.ph-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ph-status-icons svg {
  width: 14px;
  height: 14px;
}

.ph-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 6px 0;
}

.ph-title {
  font-size: 23px;
  line-height: 30px;
  margin: 0;
}

.ph-conn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #c4c6d0;
}

.ph-conn .dot {
  width: 9px;
  height: 9px;
  background: #8fd88b;
}

.ph-icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #1d2024;
}

.ph-icon-btn:hover {
  background: #282a2f;
}

.ph-card {
  margin-top: 14px;
  border-radius: 24px;
  background: #1d2024;
  padding: 12px;
}

.ph-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 6px 0 14px;
  border-radius: 23px;
  background: #1f4d23;
  color: #c6efc2;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.3s, color 0.3s;
}

.ph-pill .dot {
  width: 9px;
  height: 9px;
  background: currentColor;
}

.ph-pill-text {
  flex: 1;
}

.ph-pill-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 8px;
  font-size: 12px;
}

.ph-pill-meta svg {
  width: 14px;
  height: 14px;
}

.ph-pill-btn {
  border: 0;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fad8fd;
  color: #573e5c !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.sim-incognito .ph-pill {
  background: #573e5c;
  color: #fad8fd;
}

.sim-sending .ph-pill {
  background: #284777;
  color: #d6e3ff;
}

.ph-lh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 500;
}

.ph-lh span {
  color: #aac7ff;
  padding: 0 6px;
}

.ph-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ph-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 6px 4px 6px 9px;
  background: #111318;
  border-radius: 5px;
}

.ph-list li:first-child {
  border-radius: 16px 16px 5px 5px;
}

.ph-list li:last-child {
  border-radius: 5px 5px 16px 16px;
}

.ph-list li:only-child {
  border-radius: 16px;
}

.ph-av {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: #284777;
  color: #d6e3ff;
  flex: none;
}

.ph-up {
  background: #3e4759;
  color: #dae2f9;
}

.ph-lt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ph-lt strong {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-lt small {
  font-size: 11.5px;
  color: #c4c6d0;
}

.ph-cv {
  width: 15px !important;
  height: 15px !important;
  color: #c4c6d0;
  margin-right: 6px;
}

.ph-new {
  animation: pg-in 0.5s var(--ease);
}

.ph-progress-li {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 3px;
  background: #3e4759;
  overflow: hidden;
}

.ph-progress-li i {
  display: block;
  height: 100%;
  width: 0;
  background: #aac7ff;
  animation: fill-once 1.5s var(--ease) forwards;
}

.ph-chips {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}

.ph-chips > span {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 9px;
  border-radius: 14px;
  background: #111318;
  font-size: 11.5px;
  font-weight: 500;
}

.ph-chips b {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-chips svg {
  width: 15px;
  height: 15px;
  color: #aac7ff;
}

.ph-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 14px;
}

.ph-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 70px;
  padding: 6px 3px;
  border: 0;
  border-radius: 18px;
  background: #3e4759;
  color: #dae2f9 !important;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  transition: background 0.15s, transform 0.1s;
}

.ph-actions button:hover {
  background: #4a5468;
}

.ph-actions button:active {
  transform: scale(0.96);
}

.ph-clip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 6px 0;
  color: #8e9099;
  font-size: 11.5px;
}

.ph-clip svg {
  width: 14px;
  height: 14px;
}

.ph-clip span {
  color: #e2e2e9;
}

.ph-music {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 16px;
  background: #1d2024;
  animation: pg-in 0.4s var(--ease);
}

.ph-music span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ph-music small {
  color: #c4c6d0;
  font-size: 11.5px;
}

.ph-music .ui-art {
  width: 34px;
  height: 34px;
}

.ph-large {
  font-size: 27px;
  line-height: 1.15;
  margin: 6px 6px 16px;
}

.ph-hd-back {
  padding-top: 6px;
}

.ph-seg > li {
  background: #1d2024;
  padding: 10px 12px;
  gap: 12px;
  min-height: 56px;
}

.ph-seg .seg-text strong {
  font-size: 14px;
  font-weight: 500;
}

.ph-seg .seg-text small {
  color: #c4c6d0;
  font-size: 11.5px;
}

.ph-seg .seg-icon {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.ph .switch {
  border-color: #8e9099;
  background: #33353a;
}

.ph .switch::before {
  background: #8e9099;
}

.ph .switch[aria-checked="true"] {
  background: #aac7ff;
  border-color: #aac7ff;
}

.ph .switch[aria-checked="true"]::before {
  background: #0a305f;
}

.ph-group {
  color: #aac7ff;
  font-size: 12.5px;
  font-weight: 600;
  margin: 16px 6px 8px;
}

.ph-headsup {
  position: absolute;
  top: 38px;
  left: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 11px 11px 13px;
  border-radius: 22px;
  background: #33353a;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

.ph-headsup .ui-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.ph-headsup .ui-avatar svg {
  width: 16px;
  height: 16px;
}

.ph-headsup.in {
  animation: drop 0.45s var(--ease);
}

.ph-hu-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ph-hu-text small {
  color: #c4c6d0;
  font-size: 12px;
}

.ph-hu-btn {
  border: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: #aac7ff;
  color: #0a305f !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.ph-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 18px 16px 22px;
  border-radius: 28px 28px 0 0;
  background: #191c20;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.5);
  animation: rise-sheet 0.35s var(--ease);
}

.ph-sheet-title {
  font-size: 16px;
  margin: 0 4px 14px;
}

.ph-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ph-photo {
  aspect-ratio: 1;
  border: 0;
  border-radius: 14px;
  outline: 3px solid transparent;
  transition: outline-color 0.15s;
}

.ph-photo:hover {
  outline-color: #aac7ff;
}

.p1,
.mc-thumb.beach {
  background: linear-gradient(180deg, #8fcff5 0 52%, #ecc985 52% 100%);
}

.p2,
.mc-thumb.dinner {
  background: radial-gradient(circle at 50% 55%, #f5e6d3 0 28%, #c86b3c 29% 38%, #3b2a22 39%);
}

.p3,
.mc-thumb.whiteboard {
  background: repeating-linear-gradient(0deg, #eef1f5 0 14px, #c8d3e6 14px 16px), #eef1f5;
}

.mc-thumb.q4-deck {
  background: linear-gradient(180deg, #fff 0 30%, #e8eefb 30% 100%);
}

.ph-sheet-cancel {
  display: block;
  margin: 14px auto 0;
  border: 0;
  background: transparent;
  color: #aac7ff !important;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
}

.ph-call {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  background: #1a2238;
  animation: fade-in 0.25s ease;
}

.ph-call strong {
  font-size: 25px;
  font-weight: 400;
  margin-top: 22px;
}

.ph-call small {
  color: #c4c6d0;
  margin-top: 4px;
}

.ph-call-avatar {
  width: 92px !important;
  height: 92px !important;
  font-size: 28px;
}

.ph-call-btns {
  position: absolute;
  bottom: 64px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}

.ph-call-btns button {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
}

.ph-call-btns svg {
  width: 26px;
  height: 26px;
}

.ph-decline {
  background: #ba1a1a;
  color: #fff !important;
}

.ph-answer {
  background: #2e7d32;
  color: #fff !important;
}

.ph-toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  z-index: 8;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #e2e2e9;
  color: #2e3036;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  animation: fade-in 0.2s ease;
}

/* Shared bits of the drawings */

.ui-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  font-weight: 650;
  font-size: 12px;
}

.ui-avatar svg {
  width: 15px;
  height: 15px;
}

.ui-avatar-brand,
.ui-avatar-file {
  background: #284777;
  color: #d6e3ff;
}

.ui-avatar-chat {
  background: #2f8f55;
  color: #fff;
  border-radius: 30%;
}

.ui-avatar-call {
  background: #b9435a;
  color: #fff;
}

.ui-avatar-bank {
  background: #5c3a00;
  color: #ffddb8;
  border-radius: 30%;
}

.ui-avatar-shield {
  background: #aac7ff;
  color: #0a305f;
  border-radius: 30%;
}

.ui-avatar-note {
  background: #fff3c4;
  color: #3b2f00;
  border-radius: 30%;
}

/* Album art: a flat sun over a flat sky. */
.ui-art {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: none;
  overflow: hidden;
  background: #4b2a9a;
}

.ui-art::before {
  content: "";
  position: absolute;
  left: 22%;
  top: 22%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: #ff8a5c;
}

.ui-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: #c2368f;
}

.ui-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.ui-eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #aac7ff;
  transform-origin: bottom;
  animation: eq 1.1s ease-in-out infinite;
}

.ui-eq i:nth-child(2) {
  animation-delay: -0.3s;
}

.ui-eq i:nth-child(3) {
  animation-delay: -0.6s;
}

.ui-eq i:nth-child(4) {
  animation-delay: -0.15s;
}

.sim-paused-music .ui-eq i {
  animation-play-state: paused;
}

/* Under the devices */

.sim-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.sim-day-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  margin-right: 4px;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 560;
  cursor: pointer;
}

.pg-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.pg-btn:active {
  transform: scale(0.98);
}

.pg-btn .ui-art {
  width: 30px;
  height: 30px;
}

.pg-btn-quiet {
  padding: 0 13px;
  background: transparent;
  color: var(--muted);
}

.sim-why {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px auto 0;
  padding: 11px 16px 11px 11px;
  border-radius: 16px;
  background: var(--surface);
  max-width: 640px;
  font-size: 0.95rem;
  animation: pg-in-log 0.35s var(--ease);
}

.sim-why-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--surface-3);
  color: var(--muted);
}

.sim-why-badge svg {
  width: 17px;
  height: 17px;
}

.sim-ok .sim-why-badge {
  background: var(--sc);
  color: var(--on-sc);
}

.sim-masked .sim-why-badge {
  background: var(--pc);
  color: var(--on-pc);
}

.sim-kept .sim-why-badge {
  background: var(--wc);
  color: var(--on-wc);
}

/* Narrow screens: the phone, then the Mac, one under the other. */
@media (max-width: 700px) {
  .stage-inner {
    --design-w: 360;
    width: 360px;
    height: auto;
    display: grid;
    gap: 22px;
  }
  .ph,
  .mc {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
  }
  .ph {
    margin: 0 auto;
    order: -1;
  }
  .mc {
    width: 360px;
    height: 470px;
  }
  .mc-bar-left {
    display: none;
  }
  .mc-bar {
    justify-content: flex-end;
  }
  .mc-menu,
  .mc-note {
    left: 26px;
  }
  .mc-banners {
    width: 250px;
  }
}

/* ===== Features: both ways, with the apps' UI at each end ===== */

.dir-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  font-size: 1.15rem;
  color: var(--muted);
}

.dir-head .i {
  color: var(--primary);
}

.ft-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}

@media (min-width: 860px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ft-wide {
    grid-column: 1 / -1;
  }
}

.ft {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  padding-bottom: 24px;
}

.ft h3,
.ft p {
  padding: 0 24px;
}

.ft p {
  color: var(--muted);
  margin: 0;
}

.ft-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 210px;
  padding: 24px 20px;
  margin-bottom: 22px;
  background: #0c0e13;
  color: #e2e2e9;
  font-size: 13px;
  line-height: 1.35;
}

.ft-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #284777;
  color: #d6e3ff;
  flex: none;
}

.ft-arrow svg {
  width: 16px;
  height: 16px;
}

.ft-dst {
  transition: opacity 0.6s 0.45s var(--ease), transform 0.6s 0.45s var(--ease);
}

.js .ft.reveal .ft-dst {
  opacity: 0;
  transform: translateX(-14px);
}

.js .ft.reveal.in .ft-dst {
  opacity: 1;
  transform: none;
}

.fx {
  flex: 0 1 260px;
  min-width: 0;
}

.fx svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.fx-t {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.fx-t strong {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.fx-t em {
  font-style: normal;
  font-weight: 400;
  color: #a8a9b0;
  font-size: 11.5px;
}

.fx-t small {
  color: #c4c6d0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-ph {
  padding: 12px;
  border-radius: 26px;
  background: #111318;
  border: 6px solid #1c1d21;
}

.fx-pad {
  display: grid;
  gap: 6px;
}

.fx-hu,
.fx-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: #33353a;
}

.fx-mc {
  padding: 12px;
  border-radius: 12px;
  border: 6px solid #1c1d21;
  background: #16213a url("/wallpaper.svg") center bottom / cover no-repeat;
}

.fx-banner {
  border-radius: 13px;
  background: rgba(46, 47, 51, 0.97);
}

.fx-reply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 6px 6px 6px 12px;
  border-radius: 10px;
  background: #2e2f33;
}

.typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #aac7ff;
  width: 9ch;
}

.js .ft.in .typed {
  animation: typing 1.2s 0.9s steps(9) both;
}

@keyframes typing {
  from {
    width: 0;
  }
}

.fx-send {
  padding: 4px 10px;
  border-radius: 6px;
  background: #2f62d6;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.fx-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  background: #1a2238;
}

.fx-call .ui-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
  margin-bottom: 4px;
}

.fx-call small {
  color: #c4c6d0;
}

.fx-menu {
  padding: 6px;
  border-radius: 11px;
  background: #242528;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fx-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
}

.fx-row + .fx-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.fx-row em {
  font-style: normal;
  color: #a8a9b0;
  font-size: 12px;
}

.fx-glyph {
  width: 17px !important;
  height: 17px !important;
}

.fx-btns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 6px 6px;
}

.fx-btns span {
  padding: 4px 9px;
  border-radius: 6px;
  background: #45464c;
  font-size: 11.5px;
  font-weight: 600;
}

.fx-btns .red {
  background: #c42b1c;
}

.fx-round {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #45464c;
}

.fx-round svg {
  width: 11px;
  height: 11px;
}

.fx-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 20px;
  background: #1f4d23;
  color: #c6efc2;
  font-size: 12.5px;
  font-weight: 500;
}

.fx-pill .dot {
  background: currentColor;
}

.fx-pill em {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
}

.fx-pill-blue {
  background: #284777;
  color: #d6e3ff;
}

.fx-li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  background: #1d2024;
}

.fx-li .ph-av {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.fx-desk {
  display: grid;
  place-items: center;
  min-height: 130px;
}

.fx-music {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #1d2024;
}

.fx-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.fx-actions span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 4px;
  border-radius: 16px;
  background: #3e4759;
  color: #dae2f9;
  font-size: 11.5px;
}

.fx-actions svg {
  width: 20px;
  height: 20px;
}

.fx-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  background: #06080e;
}

.fx-locked svg {
  width: 28px;
  height: 28px;
}

.fx-locked small {
  color: #c4c6d0;
}

.fx-notebox {
  background: #2e2f33;
}

.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 13px;
  background: #1d2024;
  font-size: 12px;
}

.fx-chip svg {
  color: #aac7ff;
}

@media (max-width: 640px) {
  .ft-art {
    flex-direction: column;
  }
  .ft-arrow {
    transform: rotate(90deg);
  }
  .fx {
    flex-basis: auto;
    width: 100%;
    max-width: 300px;
  }
  .js .ft.reveal .ft-dst {
    transform: translateY(-10px);
  }
}

/* Plus points: three tall cards with the source above the destination. */

.hl-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 1060px) {
  .hl-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Between phone and desktop widths each card lies on its side: the UI on the left, the words on the right. */
@media (min-width: 700px) and (max-width: 1059px) {
  .hl-grid .hl {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    padding-bottom: 0;
  }
  .hl-grid .hl .ft-art {
    grid-row: 1 / 4;
    min-height: 0;
    margin: 0;
    padding: 18px 16px;
    gap: 10px;
  }
  .hl-grid .hl .ft-art > .fx {
    zoom: 0.85;
  }
  .hl-grid .hl .ft-art {
    min-height: 0;
    padding-top: 52px;
  }
  .hl-grid .hl .hl-tag {
    margin-top: 28px;
  }
  .hl-grid .hl > p:last-child {
    padding-bottom: 24px;
  }
}

.hl .ft-art {
  flex-direction: column;
  min-height: 330px;
}

.hl .ft-arrow {
  transform: rotate(90deg);
}

.hl .fx {
  flex-basis: auto;
  width: 100%;
  max-width: 300px;
}

.js .ft.hl.reveal .ft-dst {
  transform: translateY(-10px);
}

.hl-tag,
.ft-dir {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--primary) !important;
  font-size: 0.85rem;
  font-weight: 650;
}

.hl {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hl .ft-art {
  min-height: 456px;
  padding-top: 56px;
}

.hl .ft-art > .fx {
  zoom: 0.9;
}

.hl-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--pc);
  color: var(--on-pc);
  font-size: 0.78rem;
  font-weight: 600;
}

.hl-badge a {
  color: inherit;
}

.hl .hl-tag {
  margin-bottom: 4px;
  color: var(--muted) !important;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hl .hl-tag .i {
  color: var(--primary);
}

.hl h3 {
  font-size: 1.3rem;
  margin-bottom: 0.4em;
}

.ft-arrow.ft-stop {
  background: #5c3a00;
  color: #ffddb8;
}

.ft-arrow.ft-stop svg {
  transform: rotate(-90deg);
}

.fx-pill-incog {
  background: #33353a;
  color: #e2e2e9;
}

.fx-opt {
  padding-left: 32px;
  color: #c4c6d0;
  font-size: 12.5px;
}

.fx-opt.fx-on {
  justify-content: space-between;
  color: #e2e2e9;
  background: #2f5ea8;
  border-radius: 6px;
}

.fx-chip-top {
  margin: 0 0 2px;
  justify-self: start;
}

/* The everyday features as one switcher: a list of six on one side, the selected one's real UI on the
   other. It cycles by itself while on screen until someone picks one. */

.fs {
  display: grid;
  gap: 16px;
}

@media (min-width: 960px) {
  .fs {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.fs-stage {
  display: grid;
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0c0e13;
}

.fs-art {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s 0.35s;
}

.fs-art.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease);
}

.fs-art.is-on .ft-dst {
  animation: fs-dst 0.6s 0.2s var(--ease) both;
}

@keyframes fs-dst {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}

.fs-list {
  display: grid;
  gap: 4px;
  align-content: start;
}

.fs-tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fs-tab:hover,
.fs-tab.is-on {
  background: var(--surface);
}

.fs-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
}

.fs-tab.is-on .fs-icon {
  background: var(--pc);
  color: var(--on-pc);
}

.fs-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.fs-head strong {
  font-weight: 650;
}

.fs-head em {
  color: var(--primary);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
}

.fs-text small {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.fs-tab.is-on .fs-text small {
  -webkit-line-clamp: unset;
}

/* While it cycles, the selected row shows how long until the next one. */
.fs-auto .fs-tab.is-on::after {
  content: "";
  position: absolute;
  left: 66px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 1px;
  background: var(--primary);
  transform-origin: left;
  animation: fs-progress 5s linear both;
}

@keyframes fs-progress {
  from {
    transform: scaleX(0);
  }
}

/* Video */

.video-frame {
  margin: 0;
}

.video-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #0c0e13;
}

.video-frame figcaption {
  margin-top: 14px;
}

/* Compare */

.compare-points {
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .compare-points {
    grid-template-columns: repeat(3, 1fr);
  }
  .compare-points > li,
  .compare-points > li:first-child,
  .compare-points > li:last-child {
    border-radius: 4px;
  }
  .compare-points > li:first-child {
    border-radius: 16px 4px 4px 16px;
  }
  .compare-points > li:last-child {
    border-radius: 4px 16px 16px 4px;
  }
}

.table-scroll {
  margin: 0 0 14px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface);
}

.compare {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.compare caption {
  text-align: left;
  padding: 18px 20px 6px;
  color: var(--subtle);
  font-size: 0.86rem;
}

.compare th,
.compare td {
  padding: 13px 14px;
  text-align: left;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

.compare thead th {
  border-top: 0;
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 650;
  vertical-align: bottom;
}

.compare thead th small {
  display: block;
  color: var(--subtle);
  font-weight: 500;
  font-size: 0.78rem;
}

.compare tbody th {
  font-weight: 560;
  min-width: 190px;
}

.compare td {
  color: var(--muted);
}

.compare .us {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--text);
}

.compare thead .us {
  color: var(--primary);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.mark::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--subtle);
  flex: none;
}

.mark.yes::before {
  background: var(--success);
}

.mark.no::before {
  background: #e46962;
}

.mark.part::before {
  background: #e5a73f;
}

.compare small.note {
  display: block;
  font-weight: 400;
  color: var(--subtle);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Steps */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.steps li {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px;
}

.steps p {
  color: var(--muted);
  margin: 0;
}

.step-n {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--subtle);
  font-weight: 700;
  font-size: 0.85rem;
}

.step-art {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--pc);
  color: var(--on-pc);
  margin-bottom: 18px;
}

.step-art svg {
  width: 28px;
  height: 28px;
}

/* FAQ, as a segmented list */

.faq {
  display: grid;
  gap: 2px;
}

.faq details {
  background: var(--surface);
  border-radius: 4px;
}

.faq details:first-child {
  border-radius: 16px 16px 4px 4px;
}

.faq details:last-child {
  border-radius: 4px 4px 16px 16px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 22px;
  font-weight: 600;
  position: relative;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--subtle);
  border-bottom: 2px solid var(--subtle);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg);
  margin-top: -2px;
}

.faq details p {
  color: var(--muted);
  margin: 0;
  padding: 0 22px 20px;
}

/* Join */

.join-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 940px) {
  .join-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.join-points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
  color: var(--muted);
}

.join-points li {
  display: flex;
  gap: 12px;
  align-items: center;
}

.join-points .i {
  color: var(--on-pc);
  background: var(--pc);
  border-radius: 50%;
  padding: 3px;
  width: 1.4em;
  height: 1.4em;
}

.join-card {
  border-radius: 28px;
  overflow: hidden;
}

.join-form,
.join-done {
  background: var(--surface);
  padding: 30px;
}

.join-form {
  display: grid;
  gap: 8px;
}

.join-form label {
  font-size: 0.9rem;
  font-weight: 600;
}

.join-form input[type="email"],
.join-form select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 10px;
}

.join-form input[type="email"]:focus,
.join-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.join-form input[aria-invalid="true"] {
  border-color: var(--error);
}

.field-row {
  display: grid;
  gap: 0 14px;
}

@media (min-width: 480px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.join-form .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 6px 0 14px;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--primary);
  flex: none;
}

.form-status {
  min-height: 1.5em;
  margin: 6px 0 0;
  font-size: 0.95rem;
}

.form-status.ok {
  color: var(--primary);
}

.form-status.err {
  color: var(--error);
}

.join-done {
  text-align: center;
  padding: 56px 30px;
}

.done-check svg {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done-check circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: draw 0.7s var(--ease) forwards;
}

.done-check path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw 0.45s 0.55s var(--ease) forwards;
}

/* Privacy notice and other pages */

.prose h2 {
  font-size: 1.4rem;
  margin-top: 2em;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose li {
  margin-bottom: 0.5em;
}

.prose strong {
  color: var(--text);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--pc);
  color: var(--on-pc);
  margin-bottom: 18px;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card-icon.big {
  width: 72px;
  height: 72px;
  border-radius: 22px;
}

.card-icon.big svg {
  width: 36px;
  height: 36px;
}

/* Footer */

.site-footer {
  --text: #e8eeff;
  --muted: #c9d6f2;
  --subtle: #aabbe0;
  --primary: #d6e3ff;
  --border: rgba(214, 227, 255, 0.2);
  position: relative;
  padding: 40px 0 40px;
  background: var(--valley);
  color: var(--text);
}

@media (prefers-color-scheme: light) {
  .site-footer {
    --text: #0d1a36;
    --muted: #142447;
    --subtle: #1d3058;
    --primary: #0d2a5c;
    --border: rgba(13, 26, 54, 0.2);
  }
}



.footer-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr auto;
  }
}

.footer-grid .logo {
  margin-bottom: 10px;
}

.footer-links {
  display: grid;
  gap: 8px;
  align-content: start;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.legal {
  color: var(--subtle);
  font-size: 0.8rem;
  margin-top: 26px;
  max-width: 64em;
}

/* Keyframes */

@keyframes pg-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes pg-in-log {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes fill-once {
  to {
    width: 100%;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
}

@keyframes drop {
  from {
    transform: translateY(-120%);
    opacity: 0;
  }
}

@keyframes rise-sheet {
  from {
    transform: translateY(100%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes eq {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero h1 .accent::after {
    display: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal,
  .js .ft.reveal .ft-dst {
    opacity: 1;
    transform: none;
  }
}