@import url('/assets/fonts/fonts.css');
:root {
  color-scheme: dark;
  --bg: #061e19;
  --panel: #d9fff20a;
  --ink: #f1faf6;
  --muted: #a1bfb3;
  --line: #d2ffec20;
  --lime: #b8f6d0;
  --mint: #6deab7;
  --sans: 'PT Sans', Arial, sans-serif;
  --serif: var(--sans);
  --forest: #061e19;
  --green: #9febbd;
  --paper: #0c2b23;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 125px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a,
button,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #b5ffde;
  outline-offset: 6px;
}
p,
h1,
h2,
h3,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.05em;
}
h1 {
  font-size: clamp(3rem, 6.7vw, 6.25rem);
}
h2 {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
}
h3 {
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
p {
  color: var(--muted);
}
em {
  font-style: normal;
  color: var(--mint);
}
.wrap {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.eyebrow {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--mint);
}
.icon {
  width: 24px;
  height: 24px;
  flex: none;
}
.small {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}
.gradient-text {
  background: linear-gradient(110deg, #f2fff8 0%, #9df3c4 44%, #66d6b9 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.muted-title {
  color: #99b9ab;
}
.glass {
  background: linear-gradient(130deg, #ffffff13, #d8fff908 55%, #ffffff05);
  border: 1px solid #e3fff428;
  box-shadow:
    inset 0 1px 0 #ffffff16,
    inset 0 -1px 0 #ffffff04,
    0 24px 50px #00150f20;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
.skip {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 20px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-radius: 10px;
  background: var(--lime);
  color: var(--bg);
}
.skip:focus-visible {
  width: auto;
  height: auto;
  max-width: calc(100vw - 40px);
  padding: 12px 22px;
  overflow: visible;
  clip-path: none;
}
.header {
  position: absolute;
  z-index: 20;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1260px, calc(100% - 64px));
  height: 74px;
  padding: 0 23px 0 20px;
  border: 1px solid #e5fff126;
  border-radius: 25px;
  background: #dffff309;
  box-shadow:
    inset 0 1px 0 #ffffff16,
    0 12px 35px #00140d10;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.065em;
  white-space: nowrap;
}
.brand-mark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 39px;
  border: 1px solid #f0fff53b;
  border-radius: 13px;
  background: linear-gradient(145deg, #ccffe830, #58b98c15);
  font:
    700 2rem/1 'PT Serif',
    serif;
  padding-bottom: 6px;
  box-shadow:
    inset 0 1px 5px #e9fff82b,
    0 4px 12px #011b1833;
}
.header nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 0.95rem;
}
.header nav > a:not(.nav-cta) {
  color: #d4e9df;
  transition: color 0.2s;
}
.header nav > a:hover,
.header nav .current {
  color: #fff;
}
.nav-cta {
  border-radius: 12px;
  padding: 9px 18px;
  background: #d7ffe814;
  border: 1px solid #dfffee2c;
  display: flex;
  gap: 22px;
  align-items: center;
  transition: background 0.2s;
}
.nav-cta:hover {
  background: #d7ffe82b;
}
.menu-button {
  display: none;
}
.download-hero {
  position: relative;
  isolation: isolate;
  min-height: 940px;
  padding-top: 165px;
  overflow: hidden;
  background: linear-gradient(180deg, #092c2360, #06201900 85%);
}
.ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient-orb {
  position: absolute;
  width: 650px;
  height: 550px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.58;
  animation: drift 16s ease-in-out infinite alternate;
  will-change: transform;
}
.orb-one {
  left: calc(50% - 550px);
  top: 130px;
  background: radial-gradient(ellipse, #39a97875, transparent 66%);
}
.orb-two {
  left: calc(50% - 40px);
  top: 270px;
  background: radial-gradient(ellipse, #49c8b567, transparent 67%);
  animation-delay: -7s;
  animation-duration: 19s;
}
.orb-three {
  width: 450px;
  height: 400px;
  left: calc(50% - 210px);
  top: 35px;
  background: radial-gradient(ellipse, #9de38225, transparent 65%);
  animation-delay: -3s;
  animation-duration: 22s;
}
.hero-inner {
  text-align: center;
  position: relative;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c4f2d529;
  border-radius: 40px;
  padding: 6px 15px 6px 11px;
  background: #dfffe709;
  color: #c1e6d5;
  font-size: 0.88rem;
  margin-bottom: 25px;
}
.spark-icon {
  font-size: 1.2rem;
  color: #bdffdb;
  display: inline-block;
  animation: spark-turn 14s ease-in-out infinite;
}
.download-hero h1 {
  letter-spacing: -0.06em;
  line-height: 1.04;
  font-size: clamp(3.5rem, 6.2vw, 5.65rem);
}
.hero-subtitle {
  margin: 24px auto 29px;
  font-size: 1.12rem;
  line-height: 1.65;
  max-width: 630px;
  color: #b3d0c1;
}
.hero-downloads {
  max-width: 690px;
  margin: auto;
}
.download-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}
.download-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 25px 25px 19px;
  border-radius: 25px;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s,
    box-shadow 0.4s,
    background 0.4s;
}
.download-tile:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--pointer-x, 50%) var(--pointer-y, 0%),
    #f4fff719,
    transparent 70%
  );
  opacity: 0.35;
  transition: opacity 0.3s;
  pointer-events: none;
}
.download-tile:after {
  content: '';
  height: 1px;
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  background: linear-gradient(90deg, transparent, #effffbd9, transparent);
  opacity: 0.7;
  pointer-events: none;
}
.download-tile[href]:hover {
  transform: translateY(-7px);
  border-color: #ceffe27a;
  background: linear-gradient(130deg, #ffffff20, #d8fff910 55%, #ffffff08);
  box-shadow:
    0 25px 60px #000e1640,
    inset 0 1px 0 #fff4,
    0 0 40px #7ff1b312;
}
.download-tile[href]:hover:before {
  opacity: 1;
}
.download-tile[href]:active {
  transform: translateY(-2px) scale(0.99);
}
.download-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.platform-logo {
  width: 33px;
  height: 33px;
  fill: currentColor;
  color: #effff4;
}
.download-action {
  color: #b7d9c6;
  font-size: 0.85rem;
  line-height: 1;
}
.download-icon {
  width: 23px;
  height: 23px;
  transition: transform 0.3s;
}
.download-tile:hover .download-icon {
  transform: translateY(3px);
}
.download-name {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.download-detail {
  font-size: 0.82rem;
  color: #adcbbc;
  margin-top: 3px;
  line-height: 1.6;
}
.download-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #e1ffed1c;
  color: #c4f2d6;
}
.download-bottom > span {
  font-size: 1.2rem;
}
.is-unavailable {
  opacity: 0.62;
}
.is-unavailable .download-bottom {
  color: #aac4b7;
}
.mobile-only {
  display: none;
}
.all-platforms .mobile-only {
  display: flex;
}
.download-disclosure {
  font-size: 0.76rem;
  line-height: 1.55;
  color: #91b2a0;
  margin: 17px 0 0;
}
.hero-under {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 19px;
  color: #a1bfad;
  font-size: 0.8rem;
  margin-top: 21px;
}
.other-platforms {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  transition: color 0.2s;
}
.other-platforms:hover {
  color: #dcffe7;
}
.hero-rule {
  width: 1px;
  height: 15px;
  background: var(--line);
}
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin: 42px auto 0;
  color: #8dab9a;
}
.scroll-cue > span:last-child {
  display: block;
  font-size: 1.2rem;
  animation: scroll-nudge 2.5s ease-in-out infinite;
}
.intro {
  animation: appear 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-kicker.intro {
  animation-delay: 0.05s;
}
.download-hero h1.intro {
  animation-delay: 0.15s;
}
.hero-subtitle.intro {
  animation-delay: 0.25s;
}
.hero-downloads.intro {
  animation-delay: 0.35s;
}
.capabilities-intro {
  padding-top: 95px;
  padding-bottom: 30px;
  text-align: center;
}
.capabilities-intro h2 {
  margin-top: 20px;
  font-size: clamp(2.6rem, 4.8vw, 4.45rem);
}
.section-switch {
  display: inline-flex;
  border-radius: 19px;
  padding: 7px;
  margin-top: 35px;
  gap: 5px;
}
.section-switch a {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 22px;
  color: #bddecc;
  font-size: 0.93rem;
  border-radius: 13px;
  transition:
    background 0.25s,
    color 0.25s;
}
.section-switch a:hover {
  background: #d5fff415;
  color: #fff;
}
.section-switch .icon {
  width: 18px;
  height: 18px;
}
.capability-section {
  padding: 125px 0 100px;
  display: grid;
  grid-template-columns: 1fr 1.07fr;
  gap: 85px;
  align-items: center;
  border-bottom: 1px solid #d5ffec14;
  position: relative;
}
.capability-section.reverse .capability-copy {
  grid-column: 2;
}
.capability-section.reverse .showcase {
  grid-column: 1;
  grid-row: 1;
}
.section-number {
  font-size: 0.79rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fd8b6;
  display: block;
  margin-bottom: 25px;
}
.capability-copy h2 {
  font-size: clamp(2.6rem, 3.6vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: 25px;
}
.capability-copy > p {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #a9c8b8;
}
.benefits {
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
  display: grid;
  gap: 14px;
}
.benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  color: #d0e8d9;
}
.benefits .icon {
  width: 20px;
  height: 20px;
  color: #8aceaa;
}
.inline-link,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  font-size: 0.95rem;
  color: #c6f8db;
  padding-bottom: 4px;
  border-bottom: 1px solid #b6f5cc45;
  transition:
    gap 0.25s,
    color 0.25s;
}
.inline-link:hover,
.text-link:hover {
  gap: 34px;
  color: #fff;
}
.showcase {
  position: relative;
  min-width: 0;
  height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
.showcase-glow {
  position: absolute;
  z-index: -1;
  inset: -45px;
  background: radial-gradient(ellipse at 50% 50%, #58d59823, transparent 65%);
  filter: blur(30px);
  animation: glow-breathe 8s ease-in-out infinite alternate;
}
.workflow-caption {
  position: absolute;
  top: 0;
  left: 25px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #99c1a9;
}
.mini-spark {
  color: #b5edcf;
  font-size: 1.25rem;
}
.work-stack {
  position: relative;
  height: 360px;
  margin: 20px 0;
}
.floating-file {
  position: absolute;
  width: 295px;
  height: 275px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  animation: float 7s ease-in-out infinite;
}
.file-back {
  top: 0;
  right: 0;
  background: linear-gradient(140deg, #3b655a9e, #173c3294);
  transform: rotate(9deg);
  animation-name: float-back;
  animation-delay: -2s;
}
.file-front {
  top: 65px;
  left: 15px;
  z-index: 2;
  background: linear-gradient(125deg, #a3d7bb26, #285540c2);
  animation-delay: -0.5s;
}
.file-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.file-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c5f5d8;
  background: #99edba17;
  padding: 4px 8px;
  border: 1px solid #c0f3d12c;
  border-radius: 6px;
  width: max-content;
}
.type-blue {
  background: #85d5d61a;
  color: #c5f8f4;
  border-color: #a3e2f530;
  margin-bottom: 20px;
}
.file-check {
  font-size: 0.9rem;
  color: #a2e6bd;
  border: 1px solid #a1e9bd40;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.floating-file p {
  font-size: 0.76rem;
  line-height: 1.6;
  color: #a6c6b0;
  margin-top: 15px;
}
.document-lines {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}
.document-lines i {
  height: 5px;
  background: #d4fce41b;
  border-radius: 9px;
  width: 90%;
  transform-origin: left;
  animation: line-grow 7s ease-in-out infinite;
}
.document-lines i:nth-child(2) {
  width: 73%;
  animation-delay: 0.12s;
}
.document-lines i:nth-child(3) {
  width: 83%;
  animation-delay: 0.24s;
}
.mini-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 94px;
  margin-top: 20px;
}
.mini-chart i {
  flex: 1;
  height: var(--h, 60%);
  background: linear-gradient(180deg, #b8ead079, #91c5b020);
  border: 1px solid #b4e4ce24;
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  animation: chart-grow 8s ease-in-out infinite;
}
.mini-chart i:nth-child(1) {
  --h: 35%;
}
.mini-chart i:nth-child(2) {
  --h: 49%;
  animation-delay: 0.2s;
}
.mini-chart i:nth-child(3) {
  --h: 42%;
  animation-delay: 0.4s;
}
.mini-chart i:nth-child(4) {
  --h: 75%;
  animation-delay: 0.6s;
}
.mini-chart i:nth-child(5) {
  --h: 65%;
  animation-delay: 0.8s;
}
.mini-chart i:nth-child(6) {
  --h: 90%;
  animation-delay: 1s;
}
.floating-chip {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  border-radius: 17px;
  background: #1c453ce0;
  padding: 16px 20px;
  display: flex;
  gap: 13px;
  align-items: center;
  animation: float 8s ease-in-out infinite;
  animation-delay: -3s;
}
.floating-chip > .icon {
  color: #b0e7c8;
}
.floating-chip > span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #adc9b9;
}
.floating-chip strong {
  font-weight: 400;
  color: #e6fff0;
}
.showcase-note {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  text-align: center;
  color: #7ba08d;
  font-size: 0.72rem;
  line-height: 1.5;
}
.code-panel {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(125deg, #afdfc81c, #102e299c);
  overflow: hidden;
  animation: float 9s ease-in-out infinite;
}
.code-panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 21px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  color: #a9c5b9;
}
.code-panel-header > .icon {
  width: 19px;
  height: 19px;
  margin-left: auto;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  width: 6px;
  height: 6px;
  background: #afc9bc47;
  border-radius: 50%;
}
.code-text {
  padding: 28px 24px 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  line-height: 2.2;
  white-space: pre;
  overflow: hidden;
  color: #a9c8b6;
}
.code-line {
  display: block;
  animation: code-reveal 10s ease-in-out infinite;
}
.code-line:nth-child(4) {
  animation-delay: 0.2s;
}
.code-line:nth-child(5) {
  animation-delay: 0.4s;
}
.code-line:nth-child(6) {
  animation-delay: 0.6s;
}
.code-line b {
  font-weight: 400;
  color: #b9cfff;
}
.code-line em {
  font-style: normal;
  color: #b8f2d0;
}
.code-line q {
  color: #b4e7be;
}
.code-line q:before,
.code-line q:after {
  content: '"';
}
.cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  vertical-align: middle;
  margin-left: 5px;
  background: #a9f1c9;
  animation: blink 1.2s steps(2, start) infinite;
}
.code-flow {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 17px 21px;
  background: #041c181f;
  border-top: 1px solid var(--line);
  font-size: 0.73rem;
  color: #bde5cf;
}
.code-flow i {
  font-style: normal;
  color: #6d9884;
}
.code-badge {
  position: absolute;
  right: -10px;
  bottom: 8px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 18px;
  background: #214838ed;
  animation: float 8s ease-in-out infinite;
  animation-delay: -3s;
}
.code-badge > .icon {
  color: #a4e4c0;
}
.code-badge strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 400;
}
.code-badge span {
  display: block;
  font-size: 0.75rem;
  color: #9dc4af;
  margin-top: 2px;
}
.code-showcase .showcase-note {
  bottom: -28px;
}
.design-showcase {
  padding: 25px 20px;
}
.design-canvas {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(140deg, #264f4299, #58836444 60%, #81a86d16);
  padding: 24px 28px 22px;
  transform: rotate(-3deg);
  animation: float-design 9s ease-in-out infinite;
}
.design-canvas:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, #cbf59224, transparent 60%);
  pointer-events: none;
}
.canvas-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #abd4bc;
  padding-bottom: 25px;
}
.design-type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: clamp(2.3rem, 4vw, 3.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.design-type > span:nth-child(2) {
  color: #c4f29d;
}
.outline-type {
  -webkit-text-stroke: 1px #d5f6d6bd;
  color: transparent;
}
.canvas-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #cbebc837;
  margin-top: 28px;
  padding-top: 18px;
  font-size: 0.7rem;
  color: #b0cfae;
}
.palette {
  position: absolute;
  right: -7px;
  top: 0;
  border-radius: 16px;
  padding: 13px 18px;
  background: #254633c9;
  z-index: 2;
  animation: float 8s ease-in-out infinite;
  animation-delay: -1s;
}
.palette > span {
  display: block;
  font-size: 0.7rem;
  color: #b9d4ba;
  margin-bottom: 9px;
}
.palette > div {
  display: flex;
  gap: 7px;
}
.palette i {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #c7edb0;
  border: 1px solid #ffffff1a;
}
.palette i:nth-child(2) {
  background: #98cda9;
}
.palette i:nth-child(3) {
  background: #4a856c;
}
.palette i:nth-child(4) {
  background: #bdd5cd;
}
.palette i:nth-child(5) {
  background: #27453c;
}
.design-formats {
  position: absolute;
  bottom: 4px;
  left: 0;
  display: flex;
  gap: 18px;
  font-size: 0.73rem;
  padding: 14px 21px;
  border-radius: 15px;
  background: #1a3d2fcc;
  color: #c0e4cb;
  animation: float 9s ease-in-out infinite;
  animation-delay: -4s;
}
.design-showcase .showcase-note {
  bottom: -30px;
}
.control-section {
  padding: 120px 0 100px;
  text-align: center;
}
.control-heading h2 {
  margin: 20px 0 42px;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
}
.control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.control-grid article {
  padding: 30px;
  border-radius: 23px;
  transition:
    transform 0.4s,
    border-color 0.4s;
}
.control-grid article:hover {
  transform: translateY(-5px);
  border-color: #cef4dd4f;
}
.control-grid .icon {
  width: 27px;
  height: 27px;
  color: #a9e2bf;
  margin-bottom: 23px;
}
.control-grid h3 {
  font-size: 1.35rem;
  margin-bottom: 13px;
}
.control-grid p {
  font-size: 0.98rem;
  line-height: 1.7;
}
.control-section > .inline-link {
  margin-top: 30px;
}
.final-cta {
  padding: 80px 0 125px;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.final-cta:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #4baa6f17, transparent 60%);
}
.large-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 70px;
  font:
    700 3.5rem/1 'PT Serif',
    serif;
  padding-bottom: 12px;
  border-radius: 23px;
  background: linear-gradient(145deg, #a8faca24, #d1fff009);
  border: 1px solid #d9ffeb33;
  box-shadow:
    inset 0 1px 0 #f4fff94d,
    0 20px 50px #00130e33;
  margin-bottom: 28px;
  animation: float 8s ease-in-out infinite;
}
.final-cta h2 {
  font-size: clamp(2.7rem, 5vw, 4.65rem);
  margin-bottom: 30px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 23px;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid #d4ffe84d;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.button-lime,
.button-dark {
  color: #123426;
  background: linear-gradient(130deg, #b6f7d0, #8bdab1);
  box-shadow:
    inset 0 1px 0 #fff7,
    0 10px 30px #65cb911c;
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 35px #65cb9133;
}
.final-cta p {
  font-size: 0.79rem;
  margin: 22px 0 0;
  color: #87ae97;
}
.footer {
  border-top: 1px solid var(--line);
  background: #03161052;
  padding: 60px max(48px, calc((100% - 1200px) / 2)) 25px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 45px;
}
.footer-top p {
  font-size: 0.94rem;
  margin-top: 17px;
}
.footer-label {
  display: block;
  color: #81a692;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  margin-bottom: 17px;
}
.footer-top > div:not(:first-child) > a {
  display: block;
  padding: 6px 0;
  color: #bdd7c7;
  font-size: 0.9rem;
}
.footer-top > div:not(:first-child) > a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  margin-top: 43px;
  padding-top: 22px;
  font-size: 0.74rem;
  color: #789d87;
}
.page-intro {
  padding-top: 170px;
  padding-bottom: 65px;
}
.page-intro .eyebrow {
  margin-bottom: 25px;
}
.page-intro h1 {
  font-size: clamp(3rem, 5.6vw, 5.1rem);
  line-height: 1.08;
  max-width: 1030px;
}
.page-intro h1 em {
  color: #8ce0b5;
}
.page-intro > p {
  font-size: 1.16rem;
  max-width: 780px;
  margin-top: 27px;
  line-height: 1.75;
}
.section {
  padding-top: 90px;
  padding-bottom: 90px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 55px;
  margin-bottom: 40px;
}
.section-heading .eyebrow {
  margin-bottom: 20px;
}
.section-heading > p {
  max-width: 360px;
  font-size: 1rem;
}
.section-heading h2 {
  font-size: clamp(2.3rem, 3.5vw, 3.3rem);
  line-height: 1.15;
}
.model-section {
  padding-bottom: 55px;
}
.model-group-title {
  margin-top: 30px;
  margin-bottom: 30px;
}
.model-group-title .eyebrow {
  margin-bottom: 15px;
}
.model-group-title h2 {
  font-size: 2.5rem;
  line-height: 1.15;
}
.model-group-title p {
  font-size: 1rem;
  margin-top: 13px;
}
.work-models {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.model-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.model-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(140deg, #d5ffe90d, #defded04);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.model-card .feature-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 27px;
  gap: 15px;
}
.model-number {
  color: #94bba4;
  font-size: 0.82rem;
}
.model-card h2,
.model-card h3 {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.model-card .base-model {
  font-size: 1.06rem;
  color: #9ce5bd;
  margin: 8px 0 22px;
}
.model-card > p:not(.base-model) {
  font-size: 0.98rem;
  line-height: 1.75;
  flex: 1;
}
.pill {
  border: 1px solid #a9e6c329;
  color: #acd2bc;
  background: #a9e6c307;
  border-radius: 25px;
  padding: 4px 11px;
  font-size: 0.73rem;
}
.model-card dl {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin: 25px 0 0;
}
.model-card dl > div {
  padding: 5px 0;
}
.model-card dt {
  font-size: 0.73rem;
  color: #86ae97;
}
.model-card dd {
  margin: 2px 0 0;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
.model-card code {
  color: #c9edda;
}
.info-banner {
  border: 1px solid #b6e6c325;
  background: #9fcaaa09;
  border-radius: 18px;
  display: flex;
  gap: 17px;
  align-items: start;
  padding: 22px 25px;
  margin-bottom: 30px;
}
.info-banner .icon {
  margin-top: 5px;
  color: #a5dcb7;
}
.info-banner p {
  font-size: 0.94rem;
  line-height: 1.75;
}
.info-banner strong {
  display: block;
  color: #d6efde;
  font-weight: 700;
  margin-bottom: 4px;
}
.table-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
}
table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  min-width: 700px;
  font-size: 0.98rem;
}
caption {
  text-align: left;
  padding: 20px 24px;
  background: #b7e6c20a;
  font-weight: 700;
}
th,
td {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  font-weight: 400;
  font-size: 0.83rem;
  color: #89b19a;
}
tbody th {
  font-weight: 400;
}
td {
  color: var(--muted);
}
code {
  font:
    0.82em/1.6 'JetBrains Mono',
    monospace;
  overflow-wrap: anywhere;
}
.provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  margin-top: 40px;
}
.provider-grid h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.provider-grid p {
  font-size: 1rem;
}
.service-models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-models article {
  border-radius: 22px;
  padding: 27px;
}
.service-models h3 {
  font-size: 1.35rem;
  margin-bottom: 15px;
}
.service-models code,
.service-label {
  display: block;
  font-size: 0.78rem;
  color: #acd9be;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.service-models p {
  font-size: 0.96rem;
}
.data-strip {
  padding: 70px 0;
  background: #b4dfc107;
  border-block: 1px solid var(--line);
}
.data-strip .wrap {
  max-width: 850px;
}
.data-strip h2 {
  margin: 21px 0 25px;
  font-size: 3rem;
}
.data-strip p {
  margin-bottom: 25px;
}
.data-strip .small {
  margin-top: 26px;
  margin-bottom: 0;
}
.closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 80px 0 90px;
}
.closing .eyebrow {
  margin-bottom: 20px;
}
.closing h2 {
  font-size: 3.3rem;
}
.all-downloads {
  padding-bottom: 40px;
}
.all-downloads .download-deck {
  grid-template-columns: repeat(4, 1fr);
}
.all-downloads .download-tile {
  padding: 24px 22px 19px;
}
.downloads-section {
  padding-bottom: 80px;
}
.desktop-downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.download-card {
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: #c7ffdf06;
  display: flex;
  align-items: start;
  flex-direction: column;
}
.download-card > .icon {
  width: 38px;
  height: 38px;
  color: #a7e1b9;
  margin-bottom: 23px;
}
.download-card > .eyebrow {
  font-size: 0.72rem;
  color: #8fbda1;
}
.download-card h2 {
  font-size: 2.3rem;
  margin: 10px 0 20px;
}
.download-card > p {
  font-size: 1rem;
}
.download-card > .button,
.download-card > .unavailable {
  margin: 24px 0 12px;
}
.download-card .small {
  font-size: 0.8rem;
}
.download-card details {
  border-top: 1px solid var(--line);
  width: 100%;
  padding-top: 20px;
  margin-top: 25px;
}
summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  list-style: none;
  font-size: 1rem;
}
summary::-webkit-details-marker {
  display: none;
}
summary > span {
  font-size: 1.25rem;
  color: #96cfa9;
  transition: transform 0.3s;
}
details[open] summary > span {
  transform: rotate(45deg);
}
details > p {
  font-size: 0.96rem;
  line-height: 1.8;
  margin-top: 15px;
}
.download-note {
  display: flex;
  gap: 16px;
  align-items: start;
  margin: 25px 0;
}
.download-note .icon {
  color: #90c3a1;
  margin-top: 4px;
}
.download-note p {
  font-size: 0.88rem;
}
.download-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mobile-heading {
  margin-top: 80px;
}
.mobile-downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mobile-downloads article {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff04;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mobile-downloads article > div {
  flex: 1;
}
.mobile-downloads h3 {
  font-size: 1.4rem;
}
.mobile-downloads p {
  font-size: 0.9rem;
}
.mobile-downloads .icon {
  width: 30px;
  height: 30px;
  color: #abe4bd;
}
.unavailable {
  background: #b4ddc10b;
  border: 1px solid var(--line);
  padding: 11px 13px;
  border-radius: 12px;
  display: block;
  text-align: center;
  color: #96bfa4;
  font-size: 0.82rem;
  width: 100%;
}
.mobile-downloads .small {
  font-size: 0.78rem;
}
.ios-note {
  margin-top: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.ios-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 70px;
  padding-bottom: 100px;
}
.legal-layout aside {
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 17px;
  font-size: 0.92rem;
  height: max-content;
}
.legal-layout aside a {
  color: #b5dcc3;
  border-bottom: 1px solid #a1cbb835;
  padding-bottom: 2px;
}
.legal-copy {
  max-width: 800px;
}
.legal-copy h2 {
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 34px 0 16px;
}
.legal-copy p {
  font-size: 1.02rem;
  line-height: 1.85;
  margin: 14px 0;
}
.legal-copy a {
  color: #b7edcb;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-copy li {
  margin: 15px 0;
  font-size: 1rem;
  color: var(--muted);
}
.legal-notice {
  border: 1px solid #b7e6c52b;
  background: #addeb10a;
  padding: 24px 27px;
  border-radius: 20px;
}
.legal-notice strong {
  font-size: 1rem;
}
.legal-notice p {
  font-size: 0.94rem;
  margin: 8px 0 0;
}
.operator-list > div {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.operator-list dt {
  color: var(--muted);
}
.operator-list dd {
  margin: 0;
}
.error-page {
  padding-bottom: 100px;
}
.reveal {
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-waiting {
  opacity: 0;
  transform: translateY(35px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes drift {
  0% {
    transform: translate3d(-60px, 0, 0) scale(0.9);
  }
  100% {
    transform: translate3d(70px, 55px, 0) scale(1.16);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-13px);
  }
}
@keyframes float-back {
  0%,
  100% {
    transform: rotate(9deg) translateY(0);
  }
  50% {
    transform: rotate(6deg) translateY(-10px);
  }
}
@keyframes float-design {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }
  50% {
    transform: rotate(-1deg) translateY(-12px);
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}
@keyframes spark-turn {
  0%,
  70%,
  100% {
    transform: rotate(0);
  }
  85% {
    transform: rotate(90deg);
  }
}
@keyframes glow-breathe {
  from {
    opacity: 0.4;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes chart-grow {
  0%,
  100% {
    transform: scaleY(0.78);
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes line-grow {
  0%,
  100% {
    transform: scaleX(0.87);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes code-reveal {
  0%,
  100% {
    opacity: 0.65;
    transform: translateX(0);
  }
  40%,
  80% {
    opacity: 1;
    transform: translateX(3px);
  }
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
html[data-device='mobile'] .download-deck:not(.all-platforms) .desktop-only,
html[data-device='mobile'] .hero-downloads > .desktop-only {
  display: none;
}
html[data-device='mobile'] .download-deck:not(.all-platforms) .mobile-only {
  display: flex;
}
html[data-device='mobile'] .hero-downloads > p.mobile-only {
  display: block;
}
html[data-device='desktop'] .download-deck:not(.all-platforms) .mobile-only,
html[data-device='desktop'] .hero-downloads > .mobile-only {
  display: none;
}
html[data-device='desktop'] .download-deck:not(.all-platforms) .desktop-only {
  display: flex;
}
html[data-motion='off'] {
  scroll-behavior: auto;
}
html[data-motion='off'] *,
html[data-motion='off'] *:before,
html[data-motion='off'] *:after {
  animation: none !important;
  transition: none !important;
}
html[data-motion='off'] .reveal.is-waiting {
  opacity: 1;
  transform: none;
}
@media (min-width: 1600px) {
  .download-hero {
    padding-top: 190px;
    min-height: 1030px;
  }
  .hero-subtitle {
    margin-bottom: 35px;
  }
  .hero-downloads {
    max-width: 730px;
  }
  .download-tile {
    padding: 28px;
  }
  .download-name {
    font-size: 1.8rem;
  }
}
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .header {
    width: calc(100% - 48px);
    gap: 18px;
  }
  .header nav {
    gap: 24px;
  }
  .download-hero {
    padding-top: 155px;
    min-height: 920px;
  }
  .capability-section {
    gap: 40px;
    padding: 100px 0;
  }
  .capability-copy h2 {
    font-size: 2.7rem;
  }
  .capability-copy > p {
    font-size: 1rem;
  }
  .file-front {
    left: 0;
    width: 265px;
  }
  .file-back {
    width: 260px;
    right: -2px;
  }
  .floating-chip {
    right: -5px;
    padding: 14px 16px;
  }
  .code-text {
    font-size: 0.65rem;
    padding: 23px 18px 28px;
  }
  .code-badge {
    right: -5px;
  }
  .code-panel-header {
    gap: 10px;
    padding: 17px;
  }
  .design-showcase {
    padding-inline: 15px;
  }
  .design-type {
    font-size: 3rem;
  }
  .design-canvas {
    padding-inline: 23px;
  }
  .palette {
    right: -5px;
  }
  .showcase {
    height: 420px;
  }
  .showcase-note {
    font-size: 0.7rem;
  }
  .all-downloads .download-deck {
    grid-template-columns: repeat(2, 1fr);
  }
  .model-card {
    padding: 24px;
  }
  .model-card h2 {
    font-size: 1.55rem;
  }
  .model-card .feature-top {
    align-items: start;
  }
  .pill {
    font-size: 0.71rem;
  }
  .service-models article {
    padding: 23px;
  }
  .footer {
    padding-inline: 32px;
  }
  .legal-layout {
    gap: 40px;
  }
}
@media (max-width: 820px) {
  .header {
    height: 68px;
    top: 18px;
    padding-inline: 18px;
    border-radius: 22px;
  }
  .header nav {
    gap: 20px;
    font-size: 0.9rem;
  }
  .brand {
    font-size: 1.4rem;
  }
  .download-hero {
    min-height: 910px;
    padding-top: 150px;
  }
  .download-hero h1 {
    font-size: 4.3rem;
  }
  .hero-subtitle {
    font-size: 1.06rem;
  }
  .hero-downloads {
    max-width: 610px;
  }
  .download-tile {
    padding: 24px;
  }
  .capabilities-intro {
    padding-top: 75px;
  }
  .capability-section {
    grid-template-columns: 1fr;
    gap: 55px;
    padding: 85px 0 90px;
  }
  .capability-copy {
    max-width: 650px;
  }
  .capability-section.reverse .capability-copy {
    grid-column: 1;
  }
  .capability-section.reverse .showcase {
    grid-column: 1;
    grid-row: auto;
  }
  .capability-copy h2 {
    font-size: 3.4rem;
  }
  .showcase {
    width: min(520px, 95%);
    margin: auto;
    height: 445px;
  }
  .file-front {
    width: 295px;
    left: 10px;
  }
  .file-back {
    width: 295px;
    right: 0;
  }
  .floating-chip {
    right: 5px;
  }
  .code-text {
    font-size: 0.75rem;
    padding: 27px 24px 30px;
  }
  .code-panel-header {
    padding: 20px;
  }
  .code-badge {
    right: 0;
  }
  .design-type {
    font-size: 3.7rem;
  }
  .design-showcase {
    padding-inline: 30px;
  }
  .palette {
    right: 0;
  }
  .control-section {
    padding-top: 85px;
  }
  .control-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .control-grid article {
    padding: 25px;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 5px 20px;
  }
  .control-grid .icon {
    grid-row: 1/3;
    margin: 0;
  }
  .control-grid h3 {
    margin: 0;
  }
  .control-grid p {
    grid-column: 2;
  }
  .final-cta {
    padding: 40px 0 90px;
  }
  .model-cards,
  .service-models {
    grid-template-columns: 1fr;
  }
  .model-card {
    padding: 28px;
  }
  .model-card h2 {
    font-size: 1.8rem;
  }
  .model-cards .model-card dl {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 20px;
  }
  .service-models article {
    padding: 28px;
  }
  .section-heading {
    display: block;
  }
  .section-heading > p {
    margin-top: 23px;
    max-width: 580px;
  }
  .model-group-title h2 {
    font-size: 2.2rem;
  }
  .mobile-downloads {
    grid-template-columns: 1fr;
  }
  .mobile-downloads article {
    display: grid;
    grid-template-columns: 35px 1fr 1.7fr;
    gap: 12px 20px;
  }
  .mobile-downloads .small {
    grid-column: 3;
  }
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .legal-layout aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px 24px;
  }
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 25px;
  }
  .footer-bottom {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 17px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .header {
    width: calc(100% - 28px);
    height: 62px;
    top: 14px;
    padding-inline: 15px;
    gap: 10px;
    border-radius: 20px;
  }
  .brand {
    font-size: 1.4rem;
    gap: 9px;
  }
  .brand-mark {
    width: 31px;
    height: 34px;
    border-radius: 11px;
    font-size: 1.75rem;
    padding-bottom: 5px;
  }
  .menu-button {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 0.8rem;
    padding: 8px 11px;
    border: 1px solid #d9fff024;
    border-radius: 10px;
    background: #ffffff08;
    min-height: 36px;
  }
  .header nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 16px;
    background: #133c31f2;
    backdrop-filter: blur(25px);
    border: 1px solid #b5f1cf36;
    border-radius: 18px;
    box-shadow: 0 20px 50px #00140c80;
  }
  .header nav.open {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
  }
  .header nav > a {
    padding: 12px;
  }
  .header .nav-cta {
    margin-top: 5px;
    justify-content: space-between;
  }
  .download-hero {
    padding-top: 124px;
    min-height: 800px;
  }
  .hero-kicker {
    font-size: 0.73rem;
    padding: 5px 11px;
    gap: 8px;
    margin-bottom: 23px;
  }
  .hero-kicker .spark-icon {
    font-size: 1rem;
  }
  .download-hero h1 {
    font-size: clamp(2.6rem, 9.5vw, 3.55rem);
    line-height: 1.07;
    letter-spacing: -0.055em;
  }
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.7;
    margin: 21px 0 28px;
  }
  .hero-subtitle br {
    display: none;
  }
  .hero-downloads {
    width: 100%;
  }
  .download-deck {
    gap: 11px;
  }
  .download-tile {
    padding: 19px 16px 15px;
    border-radius: 20px;
  }
  .download-top {
    margin-bottom: 18px;
  }
  .platform-logo {
    height: 28px;
    width: 28px;
  }
  .download-icon {
    width: 20px;
    height: 20px;
  }
  .download-action {
    font-size: 0.72rem;
  }
  .download-name {
    font-size: 1.43rem;
  }
  .download-detail {
    font-size: 0.74rem;
    line-height: 1.6;
    min-height: 38px;
    margin-top: 6px;
  }
  .download-bottom {
    font-size: 0.75rem;
    gap: 8px;
    line-height: 1.4;
    margin-top: 14px;
    padding-top: 12px;
  }
  .download-bottom > span {
    font-size: 1.1rem;
    flex: none;
  }
  .download-disclosure {
    font-size: 0.72rem;
    line-height: 1.65;
    margin-top: 17px;
  }
  .hero-under {
    flex-direction: column;
    gap: 13px;
    font-size: 0.75rem;
    margin-top: 21px;
  }
  .hero-rule {
    display: none;
  }
  .hero-language {
    font-size: 0.72rem;
    color: #739781;
  }
  .scroll-cue {
    margin-top: 31px;
    font-size: 0.68rem;
  }
  .ambient-orb {
    filter: blur(55px);
    opacity: 0.65;
    width: 500px;
  }
  .orb-one {
    left: -220px;
    top: 100px;
  }
  .orb-two {
    left: 40px;
    top: 290px;
  }
  .orb-three {
    left: -20px;
    top: 70px;
  }
  .capabilities-intro {
    padding-top: 70px;
    padding-bottom: 10px;
  }
  .eyebrow {
    font-size: 0.72rem;
  }
  .capabilities-intro h2 {
    font-size: 2.5rem;
    line-height: 1.13;
    margin-top: 16px;
  }
  .section-switch {
    margin-top: 26px;
    padding: 5px;
    border-radius: 17px;
    gap: 1px;
    width: 100%;
    justify-content: center;
  }
  .section-switch a {
    padding: 10px 13px;
    font-size: 0.86rem;
    gap: 8px;
    border-radius: 12px;
  }
  .section-switch .icon {
    height: 16px;
    width: 16px;
  }
  .capability-section {
    padding: 70px 0 82px;
    gap: 40px;
  }
  .section-number {
    font-size: 0.7rem;
    margin-bottom: 20px;
  }
  .capability-copy h2 {
    font-size: 2.6rem;
    line-height: 1.1;
    margin-bottom: 22px;
  }
  .capability-copy > p {
    font-size: 1rem;
    line-height: 1.8;
  }
  .benefits {
    gap: 13px;
    margin: 23px 0 25px;
  }
  .benefits li {
    font-size: 0.87rem;
    gap: 11px;
  }
  .benefits .icon {
    width: 18px;
    height: 18px;
  }
  .inline-link {
    font-size: 0.9rem;
  }
  .showcase {
    width: 100%;
    height: 405px;
  }
  .workflow-caption {
    font-size: 0.7rem;
    left: 2px;
    top: 0;
  }
  .work-stack {
    height: 330px;
  }
  .floating-file {
    padding: 21px;
    width: 240px;
    height: 245px;
    border-radius: 22px;
  }
  .file-front {
    left: 0;
    top: 58px;
    width: 242px;
  }
  .file-back {
    width: 232px;
    right: 0;
    top: 5px;
  }
  .file-type {
    font-size: 0.61rem;
  }
  .file-top {
    margin-bottom: 18px;
  }
  .file-title {
    font-size: 1.35rem;
  }
  .floating-file p {
    font-size: 0.7rem;
    margin-top: 13px;
  }
  .document-lines {
    margin-top: 17px;
  }
  .mini-chart {
    height: 78px;
    gap: 8px;
  }
  .floating-chip {
    right: -2px;
    bottom: -5px;
    padding: 13px 16px;
    border-radius: 16px;
    gap: 10px;
  }
  .floating-chip .icon {
    width: 21px;
    height: 21px;
  }
  .floating-chip span {
    font-size: 0.75rem;
  }
  .showcase-note {
    font-size: 0.67rem;
    bottom: -14px;
  }
  .code-panel {
    border-radius: 20px;
  }
  .code-panel-header {
    padding: 17px 16px;
    font-size: 0.67rem;
    gap: 10px;
  }
  .code-panel-header .icon {
    width: 17px;
    height: 17px;
  }
  .window-dots {
    gap: 4px;
  }
  .window-dots i {
    width: 5px;
    height: 5px;
  }
  .code-text {
    font-size: 0.6rem;
    padding: 24px 16px 28px;
    line-height: 2.3;
  }
  .code-flow {
    padding: 16px;
    gap: 8px;
    font-size: 0.66rem;
  }
  .code-badge {
    bottom: 5px;
    right: 0;
    padding: 15px 17px;
    border-radius: 16px;
    gap: 12px;
  }
  .code-badge strong {
    font-size: 0.77rem;
  }
  .code-badge span {
    font-size: 0.69rem;
  }
  .code-badge .icon {
    width: 22px;
    height: 22px;
  }
  .code-showcase .showcase-note {
    bottom: -26px;
  }
  .design-showcase {
    padding: 25px 8px;
  }
  .design-canvas {
    padding: 23px 21px 19px;
    border-radius: 22px;
  }
  .design-type {
    font-size: 2.6rem;
    line-height: 1.08;
  }
  .canvas-top {
    font-size: 0.67rem;
    padding-bottom: 27px;
  }
  .canvas-bottom {
    font-size: 0.63rem;
    padding-top: 15px;
    margin-top: 29px;
  }
  .palette {
    padding: 11px 14px;
    top: 13px;
    right: 0;
    border-radius: 14px;
  }
  .palette span {
    font-size: 0.65rem;
  }
  .palette i {
    width: 22px;
    height: 22px;
  }
  .palette > div {
    gap: 6px;
  }
  .design-formats {
    left: 0;
    bottom: 5px;
    font-size: 0.68rem;
    padding: 12px 18px;
    gap: 16px;
  }
  .design-showcase .showcase-note {
    bottom: -20px;
  }
  .control-section {
    padding: 70px 0;
  }
  .control-heading h2 {
    font-size: 2.45rem;
    line-height: 1.12;
    margin: 18px 0 30px;
  }
  .control-grid article {
    padding: 24px 21px;
    gap: 7px 14px;
    border-radius: 20px;
  }
  .control-grid h3 {
    font-size: 1.25rem;
  }
  .control-grid p {
    font-size: 0.92rem;
  }
  .control-grid .icon {
    width: 23px;
    height: 23px;
    margin-top: 3px;
  }
  .control-section > .inline-link {
    font-size: 0.86rem;
    margin-top: 25px;
  }
  .final-cta {
    padding: 35px 0 75px;
  }
  .large-mark {
    width: 56px;
    height: 59px;
    font-size: 2.95rem;
    border-radius: 20px;
    padding-bottom: 10px;
    margin-bottom: 25px;
  }
  .final-cta h2 {
    font-size: 2.55rem;
    line-height: 1.12;
    margin-bottom: 27px;
  }
  .button {
    font-size: 0.94rem;
    padding: 13px 21px;
    border-radius: 13px;
  }
  .final-cta p {
    font-size: 0.72rem;
    margin-top: 20px;
  }
  .footer {
    padding: 45px 20px 25px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px 15px;
  }
  .footer-top > div:first-child {
    grid-column: 1/-1;
  }
  .footer-top p {
    font-size: 0.9rem;
  }
  .footer-label {
    font-size: 0.68rem;
    margin-bottom: 14px;
  }
  .footer-top > div:not(:first-child) > a {
    font-size: 0.82rem;
    padding: 6px 0;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 11px;
    margin-top: 30px;
    font-size: 0.7rem;
  }
  .page-intro {
    padding-top: 130px;
    padding-bottom: 38px;
  }
  .page-intro h1 {
    font-size: 2.65rem;
    line-height: 1.12;
  }
  .page-intro .eyebrow {
    font-size: 0.7rem;
    margin-bottom: 20px;
  }
  .page-intro > p {
    font-size: 1.02rem;
    line-height: 1.8;
    margin-top: 22px;
  }
  .model-group-title {
    margin-top: 20px;
    margin-bottom: 25px;
  }
  .model-group-title h2 {
    font-size: 2rem;
    line-height: 1.2;
  }
  .model-group-title p {
    font-size: 0.95rem;
  }
  .work-models,
  .model-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .model-card {
    padding: 25px;
    border-radius: 20px;
  }
  .model-card .feature-top {
    margin-bottom: 22px;
  }
  .model-card h2,
  .model-card h3 {
    font-size: 1.65rem;
  }
  .model-card .base-model {
    font-size: 1rem;
  }
  .model-card > p:not(.base-model) {
    font-size: 0.95rem;
  }
  .model-cards .model-card dl {
    display: block;
  }
  .model-card dd {
    font-size: 0.84rem;
  }
  .model-section {
    padding-bottom: 35px;
  }
  .info-banner {
    padding: 19px;
    gap: 12px;
    border-radius: 16px;
  }
  .info-banner > .icon {
    width: 20px;
    height: 20px;
  }
  .info-banner p {
    font-size: 0.88rem;
  }
  .section {
    padding: 55px 0;
  }
  .section-heading h2 {
    font-size: 2.25rem;
  }
  .section-heading .eyebrow {
    font-size: 0.7rem;
  }
  .provider-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .service-models {
    gap: 15px;
  }
  .service-models article {
    padding: 25px;
  }
  .data-strip {
    padding: 50px 0;
  }
  .data-strip h2 {
    font-size: 2.5rem;
  }
  .data-strip p {
    font-size: 1rem;
  }
  .closing {
    flex-direction: column;
    align-items: start;
    gap: 30px;
    padding: 55px 0 65px;
  }
  .closing h2 {
    font-size: 2.7rem;
  }
  .all-downloads .download-deck {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .all-downloads .download-tile {
    padding: 19px 16px 15px;
  }
  .desktop-downloads {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .download-card {
    padding: 26px;
    border-radius: 21px;
  }
  .download-card .button {
    font-size: 0.9rem;
    gap: 15px;
  }
  .download-note {
    gap: 12px;
  }
  .download-note .icon {
    width: 21px;
    height: 21px;
  }
  .download-note p {
    font-size: 0.85rem;
  }
  .mobile-heading {
    margin-top: 55px;
  }
  .mobile-downloads article {
    grid-template-columns: 30px 1fr;
    padding: 24px;
    gap: 15px;
  }
  .mobile-downloads .small,
  .mobile-downloads .unavailable,
  .mobile-downloads .button {
    grid-column: 1/-1;
  }
  .ios-note summary {
    font-size: 0.94rem;
  }
  .downloads-section {
    padding-bottom: 55px;
  }
  .legal-layout {
    padding-bottom: 65px;
  }
  .legal-layout aside {
    font-size: 0.83rem;
    gap: 13px 20px;
  }
  .legal-notice {
    padding: 20px;
  }
  .legal-copy h2 {
    font-size: 1.35rem;
  }
  .legal-copy p {
    font-size: 0.97rem;
  }
  .legal-copy li {
    font-size: 0.96rem;
  }
  .legal-copy ul {
    padding-left: 20px;
  }
  .operator-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .error-page {
    padding-bottom: 70px;
  }
  html:not([data-device]) .download-deck:not(.all-platforms) .desktop-only,
  html:not([data-device]) .hero-downloads > .desktop-only {
    display: none;
  }
  html:not([data-device]) .download-deck:not(.all-platforms) .mobile-only {
    display: flex;
  }
  html:not([data-device]) .hero-downloads > p.mobile-only {
    display: block;
  }
}
@media (max-width: 360px) {
  .download-tile {
    padding: 18px 13px 14px;
  }
  .download-name {
    font-size: 1.27rem;
  }
  .download-detail {
    font-size: 0.7rem;
  }
  .download-bottom {
    font-size: 0.7rem;
  }
  .download-bottom > span {
    font-size: 1rem;
  }
  .hero-subtitle {
    font-size: 0.96rem;
  }
  .section-switch a {
    padding: 10px;
    font-size: 0.8rem;
    gap: 6px;
  }
  .capability-copy h2 {
    font-size: 2.35rem;
  }
  .floating-file {
    width: 220px;
  }
  .file-back {
    width: 205px;
  }
  .file-title {
    font-size: 1.2rem;
  }
  .floating-chip {
    right: 0;
  }
  .code-text {
    font-size: 0.51rem;
  }
  .code-flow {
    font-size: 0.58rem;
  }
  .code-panel-header {
    font-size: 0.6rem;
  }
  .design-type {
    font-size: 2.25rem;
  }
  .design-canvas {
    padding-inline: 19px;
  }
  .canvas-bottom {
    font-size: 0.58rem;
  }
  .palette {
    right: 0;
  }
  .all-downloads .download-tile {
    padding: 18px 13px 14px;
  }
  .final-cta h2 {
    font-size: 2.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal.is-waiting {
    opacity: 1;
    transform: none;
  }
  .download-tile[href]:hover,
  .button:hover,
  .control-grid article:hover {
    transform: none;
  }
}
.platform-info {
  padding: 30px;
  border-radius: 22px;
}
.platform-info h3 {
  margin-bottom: 15px;
}
.mobile-prelaunch {
  padding-bottom: 80px;
}
.mobile-prelaunch h2 {
  margin: 20px 0 25px;
  font-size: 3rem;
}
.mobile-prelaunch > p {
  max-width: 800px;
}
.store-status {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 27px;
}
.store-status > span {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
@media (max-width: 600px) {
  .mobile-prelaunch {
    padding-bottom: 55px;
  }
  .mobile-prelaunch h2 {
    font-size: 2.4rem;
  }
  .platform-info {
    padding: 25px;
  }
  .store-status > span {
    font-size: 0.8rem;
  }
}
.is-unavailable {
  opacity: 1;
}
.is-unavailable .download-action {
  color: #9ec4ad;
}
.is-unavailable .download-bottom {
  color: #a6cbb5;
}
@media (min-width: 821px) and (max-width: 1599px) {
  .download-hero {
    padding-top: 143px;
    min-height: 880px;
  }
  .download-hero h1 {
    font-size: clamp(3.5rem, 5.7vw, 5.1rem);
  }
  .hero-kicker {
    margin-bottom: 20px;
  }
  .hero-subtitle {
    margin-top: 20px;
    margin-bottom: 25px;
  }
}
@media (max-width: 600px) {
  .showcase-glow {
    inset: 0;
  }
  .file-back {
    right: 15px;
  }
}

/* Capability diagram: a process, never a mock app window or terminal. */
.code-journey {
  width: min(100%, 520px);
  margin: auto;
  padding: 29px;
  border-radius: 28px;
  background: linear-gradient(145deg, #a3dec922, #0b2e27e8);
  box-shadow: 0 32px 70px #02150e88;
  animation: float 9s ease-in-out infinite;
}
.journey-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #a5dbba;
  margin: 0 0 18px;
}
.journey-step {
  display: grid;
  grid-template-columns: 40px 1fr 26px;
  gap: 14px;
  align-items: center;
  padding: 21px 8px;
  border-top: 1px solid #daf9e022;
}
.journey-step > span {
  font-family: Georgia, serif;
  font-size: 1.32rem;
  color: #a0d9b1;
}
.journey-step strong {
  display: block;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}
.journey-step small {
  display: block;
  margin-top: 5px;
  color: #a4c8b1;
  font-size: 0.8rem;
}
.journey-step .icon {
  width: 21px;
  height: 21px;
  color: #a6ddbd;
}
.journey-end {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-radius: 14px;
  padding: 15px 17px;
  background: #d0ffc619;
  color: #d4f7d9;
  font-size: 0.8rem;
}
.journey-end span {
  font-size: 1.2rem;
}
@media (max-width: 620px) {
  .code-journey {
    padding: 22px;
  }
  .journey-step {
    padding: 17px 4px;
  }
}

/* Account and server-priced catalogue */
.account-section {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
  gap: 42px;
  align-items: start;
  padding-bottom: 130px;
}
.account-card {
  padding: 42px;
  border-radius: 30px;
  background: linear-gradient(135deg, #a9edc321, #163d30b5);
}
.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #baf0c9;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.account-card h2 {
  font-size: clamp(2rem, 3.5vw, 3.3rem);
  margin: 24px 0 16px;
}
.account-card > p {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 670px;
}
.account-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 34px 0;
}
.account-flow span {
  display: grid;
  gap: 10px;
  min-height: 104px;
  padding: 17px;
  border: 1px solid #d4ffdf24;
  border-radius: 16px;
  color: #a8d7b6;
  font-size: 0.76rem;
}
.account-flow b {
  color: #e7fff1;
  font-size: 0.88rem;
  font-weight: 600;
}
.account-card .account-status {
  color: #d6d7a6;
  font-size: 0.86rem;
  margin-bottom: 26px;
}
.account-aside {
  padding-top: 25px;
}
.account-aside h3 {
  font-size: 1.35rem;
  margin-bottom: 15px;
}
.account-aside p {
  line-height: 1.75;
  margin-bottom: 15px;
  color: #a9cbb8;
}
.tariffs {
  padding-bottom: 130px;
}
.tariff-heading {
  max-width: 760px;
  margin: 0 0 32px;
}
.tariff-heading h2 {
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  margin: 12px 0;
}
.tariff-heading p {
  line-height: 1.7;
}
.tariff-free {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.tariff-free .tariff-card {
  width: min(100%, 520px);
  min-height: 270px;
}
.tariff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.tariff-card {
  padding: 29px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  background: linear-gradient(145deg, #c8f9df1d, #17392ca9);
}
.tariff-card.featured {
  border-color: #baffc385;
  box-shadow: 0 17px 46px #061c1b82;
}
.tariff-index {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #9ed6ae;
  text-transform: uppercase;
}
.tariff-card h3 {
  font-size: 1.65rem;
  margin: 25px 0 14px;
}
.tariff-card > strong {
  font-size: 2rem;
  letter-spacing: -0.04em;
}
.tariff-unit {
  font-size: 0.78rem;
  color: #a8cab4;
}
.tariff-features {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: grid;
  gap: 8px;
  font-size: 0.83rem;
  line-height: 1.35;
}
.tariff-features li::before {
  content: '';
  color: #b9f4bf;
  margin-right: 9px;
}
.tariff-features li.muted {
  color: #a8cab4;
}
.tariff-features li.muted::before {
  content: '•';
  color: #a8cab4;
}
.tariff-price {
  margin-top: auto;
  padding: 25px 0 18px;
  font-size: 1.55rem;
  border-top: 1px solid #dfffe826;
}
.tariff-price small {
  font-size: 0.78rem;
  color: #a7c4b0;
}
.tariff-button {
  display: block;
  text-align: center;
  background: #cff7d619;
  border: 1px solid #d9ffe42c;
  color: #bcd9c5;
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 0.8rem;
}
.packs-heading {
  margin-top: 85px;
}
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pack-card {
  border-radius: 20px;
  padding: 24px;
  display: grid;
  gap: 12px;
  background: #b6eed417;
}
.pack-card > span {
  font-size: 1rem;
}
.pack-card strong {
  font-size: 1.65rem;
}
.pack-card small {
  font-size: 0.77rem;
  color: #a9c3ad;
}
.price-notice {
  font-size: 0.83rem;
  line-height: 1.6;
  margin: 25px 0 30px;
  color: #accab6;
}
@media (max-width: 900px) {
  .account-section {
    grid-template-columns: 1fr;
  }
  .account-aside {
    padding-top: 0;
  }
  .tariff-grid {
    grid-template-columns: 1fr;
  }
  .tariff-card {
    min-height: 280px;
  }
  .pack-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .account-section,
  .tariffs {
    padding-bottom: 75px;
  }
  .account-card {
    padding: 25px;
  }
  .account-flow {
    grid-template-columns: 1fr;
  }
  .account-flow span {
    min-height: 65px;
    grid-template-columns: 32px 1fr;
    align-items: center;
  }
  .account-card h2 {
    font-size: 2rem;
  }
}

/* Account and gift panels continue the site's translucent material system. */
.account-form,
.account-dashboard,
.gift-form,
.gift-purchase {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}
.account-form label,
.gift-purchase label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 650;
}
.account-form input,
.gift-form input,
.gift-purchase input,
.gift-purchase select {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(40, 84, 68, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
  color: #12382f;
  font: inherit;
  backdrop-filter: blur(16px);
}
.account-form input:focus-visible,
.gift-form input:focus-visible,
.gift-purchase input:focus-visible,
.gift-purchase select:focus-visible {
  outline: 2px solid #226e54;
  outline-offset: 2px;
}
.account-form input:disabled,
.gift-form input:disabled,
.gift-purchase input:disabled,
.gift-purchase select:disabled {
  opacity: 0.62;
}
.account-message,
.gift-redeem [role='status'],
.gift-purchase [role='status'] {
  min-height: 1.4em;
  font-size: 0.88rem;
}
.account-dashboard[hidden],
.account-form[hidden] {
  display: none;
}
.account-balance {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 1rem;
}
.account-balance strong {
  font-size: 2rem;
}
.gift-redeem,
.gift-purchase {
  padding: clamp(1.4rem, 4vw, 3rem);
  border-radius: 30px;
}
.gift-redeem {
  margin-block: 4rem;
}
.gift-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.gift-purchase {
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}
.tariff-card button,
.pack-card button {
  margin-top: auto;
  border: 0;
  cursor: pointer;
}
button[disabled][data-action] {
  cursor: not-allowed;
  opacity: 0.6;
}
@media (max-width: 700px) {
  .gift-form,
  .gift-purchase {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1101px) {
  .tariff-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tariff-card {
    padding: 24px;
  }
  .tariff-card h3 {
    font-size: 1.45rem;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .tariff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Account access: the profile glyph replaces the old motion control. */
.profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid #d9ffe54d;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff22, #89ddad11);
  box-shadow: inset 0 1px #ffffff30;
  color: #eaffef;
  transition:
    transform 0.25s,
    background 0.25s,
    box-shadow 0.25s;
}
.profile-link svg {
  width: 22px;
  height: 22px;
}
.profile-link:hover,
.profile-link.current {
  transform: translateY(-2px);
  background: #d4ffdb25;
  box-shadow:
    inset 0 1px #ffffff50,
    0 8px 22px #021d1360;
}
.auth-page {
  padding-top: clamp(150px, 17vw, 230px);
  padding-bottom: 110px;
}
.auth-intro {
  max-width: 690px;
  margin-bottom: 48px;
}
.auth-intro h1 {
  font-size: clamp(2.8rem, 5.4vw, 5.3rem);
  letter-spacing: -0.06em;
  line-height: 1.08;
  margin: 18px 0;
}
.auth-intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #bdd9c7;
  max-width: 620px;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(280px, 1fr);
  gap: 28px;
  align-items: stretch;
}
.auth-card,
.auth-side,
.signup-card,
.gift-redeem,
.account-dashboard {
  border-radius: 30px;
  padding: clamp(25px, 4vw, 42px);
  background: linear-gradient(140deg, #c9f9d71c, #173a2db8);
}
.auth-step {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #adf0bc;
}
.auth-card h2,
.signup-heading h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  margin: 16px 0 27px;
}
.auth-fields {
  display: grid;
  gap: 17px;
}
.auth-fields label {
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: #e7f8eb;
  font-weight: 550;
}
.auth-fields input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #b6e8c144;
  border-radius: 15px;
  padding: 14px 16px;
  background: #f2fff5ed;
  color: #0e3429;
  font: inherit;
  outline: none;
}
.auth-fields input:focus-visible {
  box-shadow: 0 0 0 3px #9debbb88;
  border-color: #b8ffd3;
}
.auth-fields input:disabled {
  opacity: 0.7;
}
.auth-fields > .button {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  min-height: 52px;
}
.auth-divider {
  position: relative;
  text-align: center;
  margin: 28px 0 22px;
  color: #a9c8b4;
  font-size: 0.83rem;
}
.auth-divider:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #d6ffe42c;
}
.auth-divider span {
  position: relative;
  padding: 0 14px;
  background: #16392e;
}
.social-list {
  display: grid;
  gap: 10px;
}
.social-button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 51px;
  padding: 8px 15px;
  border: 1px solid #c7f3d34a;
  border-radius: 14px;
  background: #e4f9e911;
  color: #f0fff2;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.social-button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #e4f9e927;
}
.social-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.social-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: #f6fff1;
  color: #0e3429;
  font:
    bold 1.05rem Arial,
    sans-serif;
}
.social-vk .social-mark {
  background: #1877f2;
  color: #fff;
  font-size: 0.8rem;
}
.social-google .social-mark {
  color: #4285f4;
}
.social-yandex .social-mark {
  color: #e23637;
}
.social-arrow {
  margin-left: auto;
  color: #a5dcb7;
}
.auth-status {
  min-height: 1.3em;
  color: #c3d6b9;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 20px 0 0;
}
.signup-jump {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 17px 0;
  padding: 19px 23px;
  border: 1px solid #c4f6ce42;
  border-radius: 19px;
  background: #d3ffe312;
  font-size: 0.94rem;
}
.signup-jump strong {
  color: #dcffc9;
}
.auth-side {
  display: flex;
  flex-direction: column;
  min-height: 550px;
  background:
    radial-gradient(circle at 85% 18%, #d3ffd132, transparent 47%),
    linear-gradient(145deg, #1b4e3b, #092a22);
}
.auth-side h2 {
  font-size: clamp(2rem, 3.3vw, 3.6rem);
  line-height: 1.13;
  letter-spacing: -0.05em;
  margin: 28px 0 18px;
}
.auth-side > p {
  color: #c1d8c8;
  line-height: 1.75;
}
.auth-perks {
  display: grid;
  gap: 12px;
  margin-top: auto;
}
.auth-perks > div {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-top: 1px solid #c9f3d337;
}
.auth-perks strong {
  font-size: 1.25rem;
}
.auth-perks span {
  font-size: 0.88rem;
  color: #afd2b9;
}
.signup-section {
  padding-top: 110px;
  scroll-margin-top: 40px;
}
.signup-heading {
  max-width: 680px;
}
.signup-heading p {
  line-height: 1.7;
  color: #bdd9c7;
}
.signup-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.signup-card h3 {
  font-size: 1.6rem;
  margin: 0 0 23px;
}
.signup-card > p {
  line-height: 1.7;
  color: #c1d9c8;
}
.confirm-stage {
  display: grid;
  gap: 15px;
  padding-top: 12px;
}
.confirm-stage[hidden],
.account-dashboard[hidden],
.account-dashboard [data-device-link][hidden],
.auth-layout[hidden] {
  display: none;
}
.account-dashboard [data-device-link] {
  margin: 30px 0;
  padding: 22px;
  border: 1px solid #c9f3d337;
  border-radius: 20px;
}
.account-dashboard [data-device-code] {
  font-family: monospace;
  letter-spacing: 0.12em;
}
.auth-microcopy {
  font-size: 0.84rem;
}
.auth-page > .account-dashboard {
  margin-top: 60px;
}
.auth-page > .gift-redeem {
  margin-top: 85px;
}
.gift-redeem h2 {
  font-size: 2rem;
  margin: 16px 0;
}
.gift-redeem p {
  line-height: 1.6;
}
.gift-form {
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (max-width: 900px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-side {
    min-height: auto;
  }
  .auth-perks {
    margin-top: 32px;
  }
  .signup-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .auth-page {
    padding-top: 135px;
    padding-bottom: 70px;
  }
  .auth-intro {
    margin-bottom: 27px;
  }
  .auth-layout {
    gap: 17px;
  }
  .auth-card,
  .auth-side,
  .signup-card,
  .gift-redeem,
  .account-dashboard {
    padding: 25px;
    border-radius: 23px;
  }
  .signup-section {
    padding-top: 70px;
  }
  .signup-jump {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-link {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}
.social-confirm {
  display: grid;
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #d0efd837;
}
.social-confirm[hidden] {
  display: none;
}
.social-confirm label {
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
}
.social-confirm input {
  width: 100%;
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid #b6e8c144;
  border-radius: 14px;
  background: #f2fff5ed;
  color: #0e3429;
  font: inherit;
}

/* The account entry replaces the retired animation control. */
.profile-link {
  border-radius: 50%;
  width: 42px;
  height: 42px;
}
.social-mark,
.social-vk .social-mark,
.social-google .social-mark,
.social-yandex .social-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  background: transparent;
  border-radius: 9px;
}
.social-mark img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.social-vk .social-mark {
  background: #fff;
}
.social-button {
  min-height: 56px;
  gap: 15px;
}
@media (max-width: 620px) {
  .profile-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
  }
}

/* Keep essential labels easy to read, including on narrow phones. */
.agent-explainer {
  max-width: 690px;
  margin: 24px auto 0;
  color: #c5ddd0;
  font-size: 1.06rem;
  line-height: 1.7;
}
.precision-note {
  margin: 0 0 28px;
  padding: 19px 22px;
  border-radius: 18px;
  background: #d5ffe813;
}
.precision-note strong {
  display: block;
  font-size: 1.05rem;
  color: #edfff1;
}
.precision-note p {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #c5ddd0;
}
.design-type > span:nth-child(2) {
  position: relative;
}
.design-type > span:nth-child(2):after {
  content: '';
  position: absolute;
  inset: -10% -14%;
  border: 2px solid #d9ffac;
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.canvas-top,
.canvas-bottom,
.palette > span {
  font-size: 0.875rem;
}
.download-detail,
.download-bottom,
.download-action,
.download-disclosure,
.tariff-unit,
.price-notice,
.auth-microcopy,
.showcase-note,
.design-formats {
  font-size: 0.9rem;
}
.benefits li {
  font-size: 1rem;
}
.is-unavailable {
  opacity: 1;
}
.is-unavailable .download-bottom {
  color: #c4f2d6;
}
@media (max-width: 460px) {
  .download-deck,
  .all-downloads .download-deck {
    grid-template-columns: 1fr;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .download-name {
    font-size: 1.5rem;
  }
}
/* Support and team inbox */
.support-page,
.admin-page {
  padding-top: clamp(145px, 16vw, 205px);
  padding-bottom: 110px;
}
.support-heading,
.admin-heading {
  max-width: 820px;
  margin-bottom: 45px;
}
.support-heading h1,
.admin-heading h1 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -0.06em;
  margin: 18px 0 20px;
}
.support-heading p,
.admin-heading p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: #bdd9c7;
  max-width: 680px;
}
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 22px;
  align-items: stretch;
}
.support-card,
.support-aside,
.support-thread,
.admin-access,
.admin-list,
.admin-detail,
.admin-staff {
  border-radius: 28px;
  padding: clamp(24px, 3.8vw, 42px);
  background: linear-gradient(145deg, #c9f9d71c, #173a2db8);
}
.support-step {
  font-size: 0.83rem;
  letter-spacing: 0.08em;
  color: #adf0bc;
}
.support-card h2,
.support-aside h2,
.support-thread h2 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.04em;
  margin: 16px 0 26px;
}
.support-form,
.support-reply,
.admin-reply {
  display: grid;
  gap: 20px;
}
.support-form label,
.support-reply label,
.admin-reply label,
.admin-staff label,
.support-share label {
  display: grid;
  gap: 9px;
  font-size: 0.97rem;
  font-weight: 600;
  color: #e7f8eb;
}
.support-form label span {
  font-size: 0.82rem;
  color: #a6cdb5;
  font-weight: 400;
}
.support-form input,
.support-form textarea,
.support-reply textarea,
.admin-reply textarea,
.admin-staff input,
.support-share input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #b6e8c144;
  border-radius: 15px;
  padding: 14px 16px;
  background: #f2fff5ed;
  color: #0e3429;
  font: inherit;
  resize: vertical;
}
.support-form textarea,
.support-reply textarea,
.admin-reply textarea {
  min-height: 130px;
}
.support-form input:focus-visible,
.support-form textarea:focus-visible,
.support-reply textarea:focus-visible,
.admin-reply textarea:focus-visible,
.admin-staff input:focus-visible,
.support-share input:focus-visible {
  outline: 3px solid #a8f5bf;
  outline-offset: 2px;
}
.support-hint {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #b8d2be;
  margin: 0;
}
.support-hint a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.support-form .button,
.support-reply .button,
.admin-reply .button {
  justify-self: start;
  border: 0;
  cursor: pointer;
}
.support-status,
.support-reply [role='status'],
.admin-action-status,
.admin-staff [role='status'] {
  min-height: 1.4em;
  color: #dcf4c6;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.support-aside {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 80% 20%, #d8ffc628, transparent 42%),
    linear-gradient(145deg, #1b4e3b, #092a22);
}
.support-aside > p {
  color: #c0dbca;
  line-height: 1.65;
}
.support-steps {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding-top: 30px;
}
.support-steps > div {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid #d9ffe52b;
}
.support-steps b {
  font:
    1.45rem Georgia,
    serif;
  color: #bcebc3;
}
.support-private {
  font-size: 0.88rem;
  margin-top: 20px;
}
.support-thread {
  margin-top: 34px;
}
.support-thread[hidden],
.admin-page [hidden] {
  display: none !important;
}
.support-thread-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}
.support-thread-head h2 {
  margin: 13px 0 7px;
}
.support-thread-head p,
.admin-detail-head p {
  color: #b5d4be;
}
.support-status-pill {
  display: inline-flex;
  padding: 9px 13px;
  border: 1px solid #c5f7cf66;
  border-radius: 999px;
  background: #d5ffd318;
  color: #d7f3d8;
  font-size: 0.82rem;
  white-space: nowrap;
}
.support-messages {
  display: grid;
  gap: 13px;
  margin: 26px 0 32px;
}
.support-message {
  padding: 20px 23px;
  border: 1px solid #d8ffe32d;
  border-radius: 18px;
  background: #ffffff0b;
}
.support-message.from-staff {
  background: #d3ffdc17;
  border-color: #c5f7cf55;
}
.support-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.support-message-head strong {
  font-size: 0.96rem;
}
.support-message-head time {
  font-size: 0.78rem;
  color: #a6c8ae;
}
.support-message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 13px 0 0;
  line-height: 1.65;
}
.support-share {
  display: flex;
  gap: 15px;
  align-items: end;
  padding-top: 28px;
  border-top: 1px solid #d6ffe52a;
}
.support-share label {
  flex: 1;
  min-width: 0;
}
.support-share input {
  font-size: 0.82rem;
}
.support-share button {
  min-height: 52px;
  cursor: pointer;
}
.admin-access {
  max-width: 650px;
  line-height: 1.6;
}
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin: 22px 0;
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 6px;
  border: 1px solid #d7ffe42e;
  border-radius: 16px;
  background: #ffffff10;
}
.admin-tabs button,
.admin-refresh {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: transparent;
  color: #c4e3cb;
  font: inherit;
  font-size: 0.91rem;
  cursor: pointer;
}
.admin-tabs button.current,
.admin-tabs button:hover,
.admin-refresh:hover {
  background: #d5ffd423;
  color: #fff;
}
.admin-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 20px;
  align-items: start;
}
.admin-list,
.admin-detail {
  min-height: 400px;
}
.admin-ticket {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 18px 12px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #d9ffe52a;
  background: transparent;
  color: #f0fff2;
  font: inherit;
  cursor: pointer;
}
.admin-ticket:hover,
.admin-ticket.current {
  background: #d5ffd414;
  border-radius: 12px;
}
.admin-ticket-status {
  color: #bdf1c6;
  font-size: 0.78rem;
}
.admin-ticket strong {
  font-size: 1.05rem;
}
.admin-ticket small {
  font-size: 0.82rem;
  color: #a9c8b2;
}
.admin-detail-head h2 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 15px 0 6px;
  overflow-wrap: anywhere;
}
.admin-detail-head p {
  margin: 0;
}
.admin-reply {
  margin-top: 28px;
}
.admin-reply button {
  border: 0;
  cursor: pointer;
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #d6ffe52a;
}
.admin-actions button {
  cursor: pointer;
}
.admin-staff {
  margin-top: 30px;
}
.admin-staff h2 {
  font-size: 2rem;
  margin: 14px 0;
}
.admin-staff p {
  line-height: 1.6;
  color: #bdd9c7;
}
.admin-staff form {
  display: flex;
  align-items: end;
  gap: 12px;
  max-width: 740px;
  margin: 25px 0;
}
.admin-staff form label {
  flex: 1;
}
.admin-staff form button {
  min-height: 52px;
  border: 0;
  cursor: pointer;
}
.staff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border-top: 1px solid #d6ffe52a;
}
.staff-row span {
  overflow-wrap: anywhere;
}
.admin-remove {
  border: 1px solid #d6ffe545;
  border-radius: 10px;
  padding: 9px 12px;
  background: #ffffff0b;
  color: #f0fff2;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 900px) {
  .support-layout,
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .support-aside {
    min-height: 300px;
  }
  .admin-list,
  .admin-detail {
    min-height: 220px;
  }
}
@media (max-width: 600px) {
  .support-page,
  .admin-page {
    padding-top: 135px;
    padding-bottom: 70px;
  }
  .support-heading,
  .admin-heading {
    margin-bottom: 28px;
  }
  .support-heading h1,
  .admin-heading h1 {
    font-size: 2.8rem;
  }
  .support-card,
  .support-aside,
  .support-thread,
  .admin-access,
  .admin-list,
  .admin-detail,
  .admin-staff {
    padding: 24px;
    border-radius: 22px;
  }
  .support-thread-head,
  .support-share,
  .admin-toolbar,
  .admin-staff form {
    flex-direction: column;
    align-items: stretch;
  }
  .support-share button {
    width: 100%;
  }
  .admin-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-tabs button {
    text-align: center;
  }
  .support-message-head {
    flex-direction: column;
    gap: 3px;
  }
}

.support-delete {
  margin-top: 24px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: #bdd7c3;
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.support-delete:hover {
  color: #fff;
}

.admin-shortcut {
  display: inline-flex;
  margin-top: 17px;
  padding: 11px 16px;
  border: 1px solid #c5f7cf66;
  border-radius: 12px;
  background: #d5ffd318;
  font-size: 0.91rem;
  color: #e4f9e9;
}
.admin-shortcut[hidden] {
  display: none;
}

[hidden] {
  display: none !important;
}

.telegram-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid #b3e5cb55;
  border-radius: 14px;
  background: #1b5142;
  color: #effff5;
  font-size: 1rem;
}
.telegram-button svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.telegram-button:hover {
  background: #246650;
}
.release-banner {
  margin: 24px 0;
  padding: 28px;
  border: 1px solid #baf4cc55;
  border-radius: 20px;
  background: #164734;
}
.release-banner h3 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin: 0 0 20px;
}
.release-banner p {
  font-size: 1rem;
  margin: 16px 0;
}
.release-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.6;
  margin: 22px 0;
  font-size: 1rem;
}
.release-consent input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  accent-color: #bcf3c8;
}
.app-handoff {
  margin: 28px 0;
  padding: 25px;
  border: 1px solid #9aeabc55;
  border-radius: 20px;
}
.app-handoff h3 {
  font-size: 1.7rem;
}
.app-handoff p {
  margin: 16px 0;
}
.account-dashboard .button {
  margin: 6px 12px 6px 0;
}
/* Mobile results use normal flow so cards and labels cannot cover one another. */
@media (max-width: 620px) {
  .capability-section,
  .capability-copy,
  .showcase {
    min-width: 0;
  }
  .showcase {
    height: auto;
    min-height: 0;
    padding: 20px 0;
    gap: 20px;
  }
  .work-stack {
    display: grid;
    gap: 16px;
    height: auto;
    margin: 0;
  }
  .floating-file,
  .floating-chip,
  .palette,
  .design-formats,
  .showcase-note {
    position: relative;
    inset: auto !important;
    width: 100%;
    height: auto;
    transform: none !important;
    animation: none !important;
  }
  .floating-file {
    padding: 24px;
    min-height: 250px;
  }
  .file-back,
  .file-front {
    width: 100%;
    animation: none !important;
  }
  .floating-chip {
    padding: 18px;
    justify-content: flex-start;
  }
  .floating-file p {
    font-size: 1rem;
  }
  .file-title {
    font-size: 1.5rem;
  }
  .workflow-caption {
    position: static;
    align-items: flex-start;
    font-size: 1rem;
  }
  .showcase-note,
  .code-showcase .showcase-note,
  .design-showcase .showcase-note {
    font-size: 0.9rem;
    margin: 0;
    text-align: left;
  }
  .design-showcase {
    padding: 20px 0;
  }
  .design-canvas {
    transform: none;
    animation: none;
    padding: 25px;
    width: 100%;
  }
  .design-type {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }
  .palette {
    padding: 20px;
  }
  .design-formats {
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 1rem;
  }
  .canvas-top,
  .canvas-bottom {
    flex-wrap: wrap;
    gap: 12px;
  }
  .code-journey {
    animation: none;
  }
  .journey-step {
    grid-template-columns: 32px minmax(0, 1fr) 22px;
  }
  .journey-end {
    flex-wrap: wrap;
  }
  .release-banner {
    padding: 20px;
  }
  .release-banner .button,
  .app-handoff .button {
    width: 100%;
  }
  .telegram-button {
    max-width: 100%;
  }
}

/* Keep the full navigation within tablet widths before the menu breakpoint. */
@media (min-width: 601px) and (max-width: 700px) {
  .header {
    gap: 12px;
    padding-inline: 12px;
  }
  .header nav {
    gap: 12px;
    font-size: 0.78rem;
  }
  .header .nav-cta {
    padding-inline: 12px;
  }
  .header .brand {
    gap: 8px;
    font-size: 1.2rem;
  }
  .header .profile-link {
    width: 34px;
    height: 34px;
    flex: none;
  }
}

.support-email {
  margin-top: 24px;
}
.support-email a {
  overflow-wrap: anywhere;
}

.app-login-code {
  display: block;
  padding: 20px;
  margin: 16px 0;
  font-family: monospace;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.06em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}
/* Search landing page shares the site's typography and cards. */
.seo-content {
  padding: 1rem 0 6rem;
}
.seo-lead {
  max-width: 850px;
  margin: 0 auto 4rem;
}
.seo-lead h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.seo-lead p {
  margin: 0 0 1.2rem;
}
.seo-lead .inline-link {
  display: inline-block;
  margin: 0.8rem 1.5rem 0.8rem 0;
}
.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 auto 4rem;
  max-width: 1000px;
}
.seo-grid article {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
  background: var(--panel);
}
.seo-grid h3 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
@media (max-width: 680px) {
  .seo-grid {
    grid-template-columns: 1fr;
  }
  .seo-grid article {
    padding: 1.5rem;
  }
}

/* Brief homepage overview, using the existing card styles. */
.home-overview .agent-explainer {
  margin: -15px auto 36px;
}
.home-overview {
  padding-top: 45px;
}

.verification-page {
  min-height: 65vh;
  display: grid;
  place-items: center;
}
.verification-card {
  width: min(100%, 480px);
}
.verification-card h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 18px 0;
}
.verification-card [name='verificationCode'] {
  font-size: 1.6rem;
  letter-spacing: 0.25em;
}
.verification-card [data-verification-copy] {
  overflow-wrap: anywhere;
}