:root {
  --cream: #f7f4ee;
  --paper: #fffdf8;
  --ink: #17201c;
  --muted: #68716b;
  --line: #d9d8cf;
  --blue: #234fd2;
  --blue-dark: #1739a4;
  --blue-wash: #e9edff;
  --gold: #a95507;
  --gold-wash: #fff0d8;
  --mint: #dceee5;
  --mint-dark: #27684a;
  --shadow: 0 24px 70px rgb(21 32 27 / 14%);
  --radius: 28px;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 4px solid rgb(40 84 220 / 32%);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.utility {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.utility strong {
  color: #ffd491;
}

.nav,
.wrap {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}

.nav {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(21 32 27 / 13%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 10px 10px 4px 10px;
  background: var(--blue);
  box-shadow: 5px 5px 0 var(--ink);
  color: #fff;
}

.brand-name small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Replaces the muted "Founding access" note that used to sit here. An existing
   customer arriving at the root needs a way back in, and the grey note offered
   none. Deliberately darker and higher contrast than the old note: this is a
   navigation control people must be able to find, not a label. */
.nav-login {
  padding: 9px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.nav-login:hover,
.nav-login:focus-visible {
  background: var(--ink);
  color: #fff;
}

.hero {
  position: relative;
  /* Was 820px, sized around the app-preview mock that used to sit beside the
     copy. With the mock removed the hero is headline + lede + one button, and
     820px left a large empty band under the fold that read as a broken page. */
  min-height: 560px;
  overflow: hidden;
  padding-bottom: 74px;
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
}

.hero::before {
  top: 140px;
  right: -180px;
  width: 420px;
  height: 420px;
  background: var(--blue-wash);
}

.hero::after {
  bottom: 40px;
  left: -130px;
  width: 290px;
  height: 290px;
  background: var(--mint);
}

/* Single column since the app-preview mock was removed. The copy is now the
   only child, so it centres rather than sitting in a half-width left column. */
.hero-grid {
  display: grid;
  align-items: center;
  /* No justify-items:center here. It sized the copy to its CONTENT rather than
     the column, so max-width never governed and the headline wrapped far
     narrower than the space available. Default stretch plus margin-inline:auto
     centres it while letting the widths below actually apply. */
  grid-template-columns: minmax(0, 1fr);
  gap: 60px;
  padding: 76px 0 52px;
}

.hero-copy {
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}

/* The global rule caps h1 at 610px, which was right when the headline sat in a
   half-width column beside the app mock. Centred and full width, that cap left
   the type small and over-wrapped on desktop, so the hero opts out of it and
   scales with the viewport instead. */
.hero-copy h1 {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(46px, 6.4vw, 92px);
}

/* These were left-aligned against the old two-column layout. The lede widens
   with the headline so the two blocks read as one centred column. */
.hero-copy .lede {
  max-width: 760px;
  margin-inline: auto;
}

.hero-copy .button-row {
  justify-content: center;
}

.hero-copy h1 {
  margin-inline: auto;
}

/* Hero video, above the headline. Capped well under the 1040px copy column so
   it introduces the page rather than burying the h1 below the fold — the hero
   already lost height once for exactly that reason. aspect-ratio holds the 16:9
   box before the iframe loads, so the headline never jumps as it arrives. */
.hero-video {
  width: min(720px, 100%);
  margin: 0 auto 34px;
}

.hero-video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: rgb(21 32 27 / 8%);
  box-shadow: 0 18px 46px rgb(21 32 27 / 16%);
}

.hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Replay-page video placeholders. Swapped for real player embeds when the
   replay links arrive; keeping the hero video's exact footprint means nothing
   reflows on the swap. */
.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgb(35 79 210 / 10%), transparent 70%),
    var(--blue-wash);
  border: 2px dashed rgb(35 79 210 / 45%);
}

.video-placeholder-label {
  padding: 0 20px;
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue-dark);
}

/* Covers the whole player so the instruction is literal: clicking the video
   unmutes it. Sits above Vimeo's iframe but is removed on first click, so the
   native controls are reachable from that point on. */
.hero-video-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 18px;
  border: 0;
  background: linear-gradient(
    to bottom,
    rgb(21 32 27 / 0%) 55%,
    rgb(21 32 27 / 52%) 100%
  );
  cursor: pointer;
}

.hero-video-overlay[hidden] {
  display: none;
}

.hero-video-overlay:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

.hero-video-overlay-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgb(0 0 0 / 72%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  /* The player behind this is arbitrary video, so the pill carries its own
     contrast rather than relying on whatever frame is showing. */
  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
}

.hero-video-overlay:hover .hero-video-overlay-pill {
  background: rgb(0 0 0 / 85%);
}

.hero-video-caption {
  margin: 12px 0 0;
  text-align: center;
}

.hero-grid > *,
.offer-grid > *,
.app-body > * {
  min-width: 0;
}

.eyebrow {
  display: inline-flex;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  /* Was 0.09em. At 900 weight and 12px uppercase the "rn" in TURN closed up
     and read as an "m" — the word looked like "TUM". Wider tracking separates
     the pair without changing the type treatment. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.desk-line {
  margin: 0 0 13px;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 610px;
  margin: 24px 0 22px;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.058em;
  line-height: 0.98;
}

h1 em,
.offer h2 em {
  color: var(--blue);
  font-style: normal;
}

.lede {
  max-width: 650px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 21px;
  line-height: 1.55;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 25px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 14px 30px rgb(40 84 220 / 23%);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}

.btn:hover {
  background: var(--blue-dark);
}

.btn.secondary {
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 40%);
  box-shadow: none;
  color: var(--ink);
}

.btn[aria-disabled="true"] {
  background: #97a0a7;
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
}

.hero-price {
  margin: 18px 0 2px;
  font-size: 15px;
  font-weight: 900;
}

.hero-deadline {
  margin: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 600px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 32px;
  background: #eef1fb;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}

.app-top {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid #dce1f0;
  background: #fff;
}

.dots {
  display: flex;
  gap: 7px;
}

.dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ccd1dd;
}

.dots span:first-child {
  background: #ee8e79;
}

.dots span:nth-child(2) {
  background: #e5b958;
}

.dots span:last-child {
  background: #70b98b;
}

.workspace-name {
  color: #6e7787;
  font-size: 12px;
  font-weight: 850;
}

.live-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--mint-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-body {
  display: grid;
  min-height: 534px;
  grid-template-columns: 124px 1fr;
}

.app-rail {
  padding: 23px 14px;
  background: var(--ink);
  color: #fff;
}

.rail-title {
  margin: 0 6px 15px;
  color: rgb(255 255 255 / 45%);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rail-item {
  margin-bottom: 10px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: rgb(255 255 255 / 64%);
  font-size: 10px;
  line-height: 1.25;
}

.rail-item.active {
  background: var(--blue);
  color: #fff;
}

.rail-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgb(255 255 255 / 14%);
  font-size: 11px;
  font-weight: 900;
}

.app-main {
  min-width: 0;
  overflow: hidden;
  padding: 27px;
}

.app-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.app-heading small {
  display: block;
  margin-bottom: 3px;
  color: #737d91;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-heading strong {
  display: block;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.app-count {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.prompt-card {
  padding: 22px;
  border: 1px solid #dbe0ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 35px rgb(45 60 110 / 8%);
}

.step-label {
  margin-bottom: 9px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prompt-card h2 {
  margin-bottom: 14px;
  font-size: 23px;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.input-demo {
  min-height: 86px;
  padding: 14px;
  border: 1px solid #e2e5ee;
  border-radius: 13px;
  color: #758096;
  font-size: 11px;
  line-height: 1.45;
}

.prompt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 17px;
}

.progress {
  width: 112px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce1ed;
}

.progress i {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--blue);
}

.mini-btn {
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.asset-ready {
  margin-top: 17px;
  padding: 18px;
  border-radius: 17px;
  background: var(--ink);
  color: #fff;
}

.asset-ready small {
  display: block;
  margin-bottom: 5px;
  color: #9ed3b6;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.asset-ready strong {
  display: block;
  font-size: 14px;
}

.asset-ready p {
  margin: 7px 0 0;
  color: rgb(255 255 255 / 55%);
  font-size: 9px;
}

.app-float {
  position: absolute;
  right: 15px;
  bottom: 18px;
  width: 186px;
  padding: 15px;
  border-radius: 16px;
  background: var(--gold-wash);
  box-shadow: 0 12px 30px rgb(21 32 27 / 15%);
  transform: rotate(-2deg);
}

.app-float b {
  display: block;
  color: var(--gold);
  font-size: 34px;
  line-height: 1;
}

.app-float span {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
}

.offer {
  padding: 108px 0;
  background: var(--paper);
}

.offer-head {
  max-width: 950px;
  margin: 0 auto 48px;
  text-align: center;
}

.offer-head h2 {
  max-width: 930px;
  margin: 23px 0;
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.058em;
  line-height: 0.98;
}

/* "Turn" only.
   At 900 weight the headline's -0.058em tracking closes the "r" and "n"
   into a single "m", so the word reads as "Tum". Relaxing the whole
   headline would change a type treatment that was deliberately chosen, so
   this loosens the one word far enough to break the pair and no further.
   The same defect was fixed once already on the eyebrow above this heading
   (see .eyebrow), which has since been removed - so if that rule ever goes,
   this one is still needed and is not a duplicate. */
.kern-rn {
  letter-spacing: -0.012em;
}

.price-card {
  position: relative;
  width: min(960px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: #3159dd;
  box-shadow: var(--shadow);
  color: #fff;
  text-align: center;
}

.price-card::after {
  position: absolute;
  right: -70px;
  bottom: -95px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #294aa9;
  content: "";
}

.price-inner {
  position: relative;
  z-index: 1;
  padding: 66px 80px 60px;
}

.price-card h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.035em;
}

.anchor {
  margin: 34px 0 0;
  color: rgb(255 255 255 / 62%);
  font-size: 30px;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-color: #d7b773;
  text-decoration-thickness: 3px;
}

/* "Just" sits directly above the big number and reads as one phrase with it,
   so the gap below is nearly closed and .price loses its own top margin. */
.price-just {
  margin: 10px 0 -6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.price {
  margin: 0;
  font-size: clamp(88px, 10vw, 132px);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.price-label {
  max-width: 720px;
  margin: 22px auto 18px;
  color: rgb(255 255 255 / 82%);
  font-size: 18px;
}

[data-countdown-region] {
  margin-bottom: 28px;
}

.timer-label {
  margin-bottom: 12px;
  color: rgb(255 255 255 / 65%);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timer {
  display: grid;
  max-width: 610px;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.time-box {
  min-width: 0;
  padding: 16px 6px;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 11px;
  background: rgb(16 50 148 / 34%);
  text-align: center;
}

.time-box b,
.time-box span {
  display: block;
}

.time-box b {
  font-size: 28px;
  line-height: 1;
}

.time-box span {
  margin-top: 5px;
  color: rgb(255 255 255 / 45%);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deadline {
  margin: 16px 0 24px;
  color: #fff0bf;
  font-size: 12px;
  text-align: center;
}

.price-card .btn {
  width: 100%;
  max-width: 510px;
  min-height: 64px;
  margin: 0 auto;
  background: #fff;
  box-shadow: none;
  color: var(--blue);
}

.price-card .btn:hover {
  background: #f1f4ff;
}

.price-card .btn[aria-disabled="true"] {
  background: #d8dcdf;
  color: #5e686f;
}

.secure {
  margin: 16px auto 0;
  color: rgb(255 255 255 / 64%);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.closed-state {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 14px;
  background: rgb(255 255 255 / 7%);
  text-align: center;
}

.closed-state span {
  color: rgb(255 255 255 / 62%);
  font-size: 11px;
}

footer {
  padding: 34px 24px 44px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

footer p {
  margin: 0 auto 6px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 13px;
}

.footer-links a {
  text-underline-offset: 3px;
}

.policy-pending {
  color: var(--gold);
}

.noscript {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 20;
  padding: 12px 16px;
  border: 1px solid #e4caa5;
  border-radius: 12px;
  background: var(--gold-wash);
  color: #74430b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 42px;
    padding-top: 54px;
  }

  .hero-copy {
    max-width: 720px;
  }

  /* Matches the copy column once the grid collapses to one. */
  .hero-video {
    width: 100%;
    margin-bottom: 30px;
  }

  .app-shell {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .price-inner {
    padding-inline: 52px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .utility {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 10px;
  }

  .nav,
  .wrap {
    width: min(calc(100% - 28px), 1160px);
  }

  .nav {
    min-height: 72px;
  }

  /* Phones do not autoplay (landing.js withholds the flag), so this is a
     poster-and-tap state. Slightly tighter radius and shadow to sit correctly
     against the narrower gutters. */
  .hero-video {
    margin-bottom: 24px;
  }

  .hero-video-frame {
    border-radius: 14px;
    box-shadow: 0 12px 30px rgb(21 32 27 / 14%);
  }

  .brand {
    gap: 10px;
    font-size: 15px;
  }

  .brand-mark {
    width: 37px;
    height: 37px;
  }

  .nav-note {
    display: none;
  }

  .hero {
    min-height: 0;
    padding-bottom: 48px;
  }

  .hero-grid {
    padding: 42px 0 34px;
  }

  h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: clamp(38px, 12vw, 46px);
  }

  .lede {
    font-size: 18px;
  }

  .button-row {
    display: grid;
  }

  .btn {
    width: 100%;
    min-height: 56px;
  }

  .app-shell {
    min-height: 485px;
    border-radius: 24px;
    transform: none;
  }

  .app-top {
    min-height: 56px;
    padding: 0 15px;
  }

  .workspace-name {
    font-size: 10px;
  }

  .app-body {
    min-height: 429px;
    grid-template-columns: 83px 1fr;
  }

  .app-rail {
    padding: 17px 9px;
  }

  .rail-title {
    margin-left: 3px;
  }

  .rail-item {
    padding: 8px 5px;
    font-size: 8px;
  }

  .rail-icon {
    width: 23px;
    height: 23px;
  }

  .app-main {
    padding: 17px 14px;
  }

  .app-heading strong {
    font-size: 17px;
  }

  .app-count {
    display: none;
  }

  .prompt-card {
    padding: 15px;
  }

  .prompt-card h2 {
    font-size: 17px;
  }

  .input-demo {
    min-height: 73px;
    font-size: 9px;
  }

  .progress {
    width: 74px;
  }

  .app-float {
    right: 8px;
    bottom: 12px;
    width: 152px;
    padding: 12px;
  }

  .app-float b {
    font-size: 25px;
  }

  .offer {
    padding: 70px 0;
  }

  .offer-head {
    margin-bottom: 34px;
  }

  .offer-head h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: clamp(38px, 11vw, 44px);
  }

  .price-inner {
    padding: 33px 24px;
  }

  .price {
    font-size: 78px;
  }

  .price-label {
    font-size: 16px;
  }

  .timer {
    gap: 7px;
  }

  .time-box {
    padding: 13px 3px;
  }

  .time-box b {
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .utility {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    text-align: left;
  }

  .utility > span[aria-hidden="true"] {
    display: none;
  }

  .app-body {
    grid-template-columns: 74px 1fr;
  }

  .app-main {
    padding: 14px 10px;
  }

  .prompt-card {
    padding: 12px;
  }

  .mini-btn {
    padding-inline: 8px;
    font-size: 8px;
  }

  .app-float {
    width: 136px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}