@font-face {
  font-family:Inter;
  src:url('inter-latin.woff2') format('woff2');
  font-display:swap;
  font-weight:100 900;
}

:root {
  --paper:#fcfaff;
  --ink:#30264b;
  --muted:#706780;
  --primary:#6c5ce7;
  --line:#e9e2f5;
  --accent:#e35789;
  --white:#fff;
  --radius:20px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

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

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

button,a,summary {
  touch-action:manipulation;
}

button {
  border:0;
}

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}

[hidden] {
  display:none!important;
}

h1,h2,h3,h4,p {
  margin:0;
}

h1,h2 {
  letter-spacing:-.055em;
}

h2 {
  font-size:clamp(32px,3.7vw,48px);
  line-height:1.18;
  font-weight:550;
  white-space:pre-line;
}

h3 {
  letter-spacing:-.035em;
}

p {
  line-height:1.7;
}

ul,ol {
  margin:0;
  padding:0;
}

::selection {
  background:#cdc8e5;
}

.container {
  width:min(1180px,calc(100% - 80px));
  margin-inline:auto;
}

.section {
  padding-block:108px;
}

.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:.16em;
  line-height:1.7;
}

.muted {
  color:var(--muted);
  font-size:13px;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#706897;
  border-radius:50%;
  flex-shrink:0;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:48px;
  padding:14px 22px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}

.button:hover {
  transform:translateY(-2px);
}

.primary {
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
}

.primary:hover {
  background:#241e43;
}

.outline {
  border:1px solid #c3bfd3;
  background:transparent;
}

.outline:hover {
  background:#e8e6f3;
}

.skip-link {
  position:absolute;
  left:20px;
  top:-80px;
  padding:16px;
  background:white;
  z-index:100;
}

.skip-link:focus {
  top:10px;
}

.header {
  position:sticky;
  top:0;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  z-index:20;
  backdrop-filter:blur(12px);
}

.nav {
  display:flex;
  align-items:center;
  min-height:80px;
  gap:30px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:24px;
  font-weight:700;
  letter-spacing:-1px;
}


.brand-dot {
  font-size:10px;
  align-self:flex-start;
  margin:5px 0 0 -5px;
}

.nav-links {
  display:flex;
  gap:30px;
  margin-left:auto;
  font-size:12px;
  font-weight:500;
}

.nav-links a:hover,.footer a:hover {
  color:var(--accent);
}

.nav-actions {
  display:flex;
  gap:20px;
  align-items:center;
}

.language {
  background:transparent;
  font-size:12px;
  min-height:40px;
}

.nav-install {
  min-height:39px;
  padding:10px 18px;
  font-size:12px;
}

.menu-toggle {
  display:none;
  background:transparent;
  min-width:40px;
  min-height:40px;
  font-size:22px;
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  min-height:565px;
  padding-top:64px;
  padding-bottom:58px;
  gap:20px;
}

.hero .eyebrow {
  display:flex;
  gap:9px;
  align-items:center;
  margin-bottom:28px;
}

.hero h1 {
  font-size:clamp(48px,4.6vw,64px);
  font-weight:550;
  line-height:1.12;
  letter-spacing:-.06em;
}

.hero h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--accent);
  position:relative;
}

.hero h1 em:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  border-bottom:2px solid #eab6a1;
  transform:rotate(-3deg);
}

.hero-sub {
  font-size:15px;
  line-height:1.85;
  color:var(--muted);
  max-width:450px;
  margin-top:26px;
}

.hero-actions {
  display:flex;
  gap:24px;
  align-items:center;
  margin-top:30px;
}

.demo-link {
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  font-weight:550;
}

.play {
  border:1px solid #c1bbde;
  border-radius:50%;
  width:25px;
  height:25px;
  display:inline-grid;
  place-items:center;
}

.hero-note {
  font-size:11px;
  color:var(--muted);
  margin-top:16px;
}

.edge-link {
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--muted);
}

.hero-copy>.edge-link {
  display:inline-block;
  margin-top:4px;
}

.chrome-mark {
  font-size:21px;
  line-height:1;
}

.hero-scene {
  position:relative;
  height:390px;
  isolation:isolate;
}

.orbit {
  border:1px solid #d9d5eb;
  position:absolute;
  width:355px;
  height:355px;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.orbit-two {
  width:275px;
  height:275px;
}

.pet-halo {
  position:absolute;
  width:236px;
  height:236px;
  border-radius:50%;
  background:#dfdcef;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  z-index:-1;
}

.pet-sprite {
  --pet-width:64px;
  width:var(--pet-width);
  height:calc(var(--pet-width)*208/192);
  background-image:url('pets/cat.webp');
  background-size:800% 900%;
  background-position:0 0;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  animation:pet-idle 1.1s steps(6) infinite;
  flex-shrink:0;
}

.pet-sprite[data-pet="dog"] {
  background-image:url('pets/dog.webp');
}

.pet-sprite[data-pet="fox"] {
  background-image:url('pets/fox.webp');
}

.pet-sprite[data-pet="pingu"] {
  background-image:url('pets/pingu.webp');
}

@keyframes pet-idle {
  to {
    background-position-x:calc(var(--pet-width)*-6);
  }
}

.hero-pet {
  --pet-width:240px;
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
}

.pet-shadow {
  position:absolute;
  width:140px;
  height:14px;
  background:#3f3a5413;
  left:50%;
  bottom:88px;
  transform:translateX(-50%);
  border-radius:50%;
  filter:blur(3px);
  z-index:-1;
}

.scene-note {
  position:absolute;
  background:#fffefa;
  border:1px solid #d8d4ea;
  border-radius:10px;
  box-shadow:0 10px 25px #322d4808;
  padding:12px 15px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:2;
}

.note-one {
  left:0;
  top:70px;
  transform:rotate(-5deg);
}

.note-two {
  right:0;
  bottom:90px;
  transform:rotate(5deg);
}

.note-icon {
  font-size:20px;
  color:var(--accent);
}

.note-check {
  background:#e5e2f1;
  border-radius:50%;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  font-size:10px;
}

.scene-caption {
  position:absolute;
  bottom:15px;
  text-align:center;
  width:100%;
  font-size:8px;
  letter-spacing:.17em;
  color:var(--muted);
}

.tiny-star {
  color:var(--accent);
  font-size:19px;
  vertical-align:middle;
  margin-right:7px;
}

.release-note {
  display:flex;
  gap:14px;
  align-items:center;
  border-block:1px solid var(--line);
  padding-block:14px;
}

.release-badge {
  font-size:10px;
  white-space:nowrap;
  background:#e0deee;
  border-radius:5px;
  padding:5px 9px;
  font-weight:600;
}

.release-note p {
  font-size:11px;
  color:var(--muted);
}

.demo-section {
  padding-top:52px;
}

.demo-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.demo-heading .eyebrow {
  font-size:9px;
  margin-bottom:8px;
}

.demo-heading h2 {
  font-size:23px;
  letter-spacing:-.035em;
}

.sample-label {
  font-size:10px;
  color:var(--muted);
  display:flex;
  gap:6px;
  align-items:center;
}

.demo-tabs {
  display:flex;
  gap:6px;
  padding:5px;
  background:#e2e0ef;
  border-radius:10px;
  width:fit-content;
  margin:0 auto 20px;
}

.demo-tabs button {
  background:transparent;
  padding:12px 24px;
  border-radius:7px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.demo-tabs button>span:first-child {
  font-size:9px;
  color:var(--muted);
}

.demo-tabs button[aria-selected="true"] {
  background:#fff;
  box-shadow:0 2px 5px #28243c0b;
}

.browser-window {
  border:1px solid #c9c4e2;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 60px -25px #38344a35;
  background:#fff;
}

.browser-toolbar {
  height:45px;
  background:#e3e1f0;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 18px;
  gap:20px;
}

.traffic-lights {
  display:flex;
  gap:5px;
}

.traffic-lights i {
  height:7px;
  width:7px;
  border-radius:50%;
  background:#bdb9cf;
}

.traffic-lights i:first-child {
  background:#dba595;
}

.traffic-lights i:nth-child(2) {
  background:#decb97;
}

.address {
  background:#f4f3f9;
  max-width:470px;
  width:60%;
  margin:auto;
  border-radius:5px;
  font-size:10px;
  color:#69628d;
  padding:6px 12px;
  display:flex;
  gap:10px;
  white-space:nowrap;
  overflow:hidden;
}

.toolbar-pet {
  font-weight:700;
  color:var(--primary);
}

.browser-content {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:475px;
}

.sample-page {
  padding:38px 44px 28px;
  background:#fffefa;
}

.page-category {
  font-size:8px;
  letter-spacing:.14em;
  color:#78709c;
  margin-bottom:16px;
}

.sample-page h3 {
  font-family:Georgia,"Songti SC",serif;
  font-size:32px;
  font-weight:400;
  line-height:1.2;
  max-width:350px;
}

.page-intro {
  font-size:12px;
  color:#645d85;
  margin-top:16px;
}

.article-art {
  height:96px;
  margin-block:22px;
  border-radius:5px;
  background:#dfdcee;
  position:relative;
  overflow:hidden;
}

.art-sun {
  position:absolute;
  right:80px;
  top:13px;
  width:45px;
  height:45px;
  background:#e6b988;
  border-radius:50%;
}

.art-hill {
  position:absolute;
  width:70%;
  height:140px;
  background:#9992bd;
  border-radius:50%;
  bottom:-100px;
  transform:rotate(-12deg);
}

.hill-two {
  right:-45px;
  bottom:-70px;
  background:#827ba3;
}

.article-art>span {
  position:absolute;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
  left:25px;
  top:26px;
  color:#504b6b;
}

.page-paragraph {
  font-size:11px;
  color:#68618c;
  white-space:pre-line;
  line-height:1.9;
}

.sample-page blockquote {
  font-size:12px;
  color:#46415f;
  margin:20px 0 0;
  border-left:2px solid #bcb7d6;
  padding:6px 0 6px 16px;
  font-style:italic;
}

.assistant-panel {
  border-left:1px solid var(--line);
  background:#f2f1f8;
  display:flex;
  flex-direction:column;
}

.assistant-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 23px;
  border-bottom:1px solid #dbd8ec;
}

.assistant-avatar {
  background:#ddd9ed;
  border-radius:9px;
  width:35px;
  height:35px;
  overflow:hidden;
}

.assistant-avatar .pet-sprite {
  --pet-width:36px;
}

.assistant-header strong {
  display:block;
  font-size:11px;
  font-weight:600;
}

.assistant-status {
  font-size:9px;
  color:var(--muted);
}

.assistant-spark {
  margin-left:auto;
  color:var(--accent);
  font-size:20px;
}

.assistant-conversation {
  padding:22px;
  flex:1;
}

.user-prompt {
  background:#e0deee;
  border:1px solid #d1cde6;
  border-radius:11px 11px 3px 11px;
  font-size:12px;
  padding:13px 16px;
  margin-left:25px;
}

.assistant-answer {
  margin-top:20px;
  background:#fff;
  border:1px solid #dad6eb;
  border-radius:3px 12px 12px 12px;
  padding:19px 20px;
}

.answer-label {
  font-size:8px;
  letter-spacing:.13em;
  color:#7b749e;
  margin-bottom:12px;
}

.assistant-answer h4 {
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  margin-bottom:13px;
}

.assistant-answer ol {
  padding-left:19px;
  font-size:11px;
  color:#5a5479;
}

.assistant-answer li {
  padding-left:4px;
  margin-bottom:11px;
  line-height:1.7;
}

.answer-source {
  font-size:9px;
  color:#67608a;
  border-top:1px solid #e8e6f3;
  padding-top:11px;
  margin-top:15px;
}

.assistant-bottom {
  font-size:9px;
  color:#7b749e;
  padding:0 22px 17px;
  display:flex;
  gap:6px;
}

.browser-window[data-example="email"] .assistant-answer ol {
  list-style:none;
  padding:0;
}

.browser-window[data-example="email"] .assistant-answer li {
  padding:0;
}

.browser-window[data-example="compare"] .article-art {
  height:70px;
}

.section-heading {
  text-align:center;
  margin-bottom:45px;
}

.section-heading .eyebrow {
  margin-bottom:20px;
}

.section-heading>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:18px;
}

.preview-tag {
  display:inline-block;
  font-size:8px;
  font-weight:650;
  letter-spacing:.1em;
  border:1px solid #c4c0d7;
  color:#5b557a;
  padding:5px 8px;
  border-radius:4px;
  margin-top:18px;
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.feature-card {
  padding:28px;
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
}

.feature-icon {
  width:45px;
  height:45px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:26px;
  background:#dfdbee;
  margin-bottom:25px;
}

.icon-2 {
  background:#f4e9d7;
  color:#976c3d;
}

.icon-3 {
  background:#f4e1d8;
  color:#b96b4e;
}

.feature-card .eyebrow {
  font-size:8px;
  color:var(--muted);
  margin-bottom:12px;
}

.feature-card h3 {
  font-size:21px;
  line-height:1.35;
  margin-bottom:15px;
  font-weight:550;
}

.feature-card>p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
}

.feature-card blockquote {
  font-size:12px;
  line-height:1.8;
  border-left:2px solid #c4bfdf;
  padding-left:12px;
  margin:25px 0;
  flex:1;
}

.feature-card>a {
  font-size:10px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  gap:5px;
}

.feature-card>a:hover {
  color:var(--accent);
}

.project-section {
  background:#e7e4f2;
  border-block:1px solid #d7d3ea;
}

.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.project-copy>.eyebrow {
  font-size:9px;
  margin-bottom:23px;
}

.section-sub {
  font-size:14px;
  color:var(--muted);
  margin-top:22px;
  max-width:410px;
}

.project-steps {
  list-style:none;
  margin-top:32px;
  display:grid;
  gap:22px;
}

.project-steps li {
  display:flex;
  gap:15px;
}

.step-number {
  color:#7f78a2;
  font-size:10px;
  border:1px solid #c3bfd5;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.project-steps h3 {
  font-size:13px;
  letter-spacing:0;
  font-weight:600;
}

.project-steps p {
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
  max-width:350px;
}

.project-board {
  background:#faf9fd;
  border:1px solid #cac5e2;
  border-radius:14px;
  padding:25px 27px;
  box-shadow:0 20px 60px -30px #3f3a5445;
  transform:rotate(1deg);
}

.board-head {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:8px;
  letter-spacing:.1em;
  color:#706996;
  margin-bottom:23px;
}

.folder-icon {
  font-size:22px;
}

.board-dots {
  margin-left:auto;
  letter-spacing:2px;
}

.project-board h3 {
  font-size:22px;
  font-weight:550;
  margin-bottom:7px;
}

.project-board>.muted {
  font-size:10px;
}

.source-list {
  margin-block:22px;
  display:grid;
  gap:8px;
}

.source-list>div {
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #dcd9ec;
  padding:12px;
  border-radius:7px;
  font-size:11px;
  background:#fff;
}

.source-list>div>span:first-child {
  color:#8780a7;
}

.source-list small {
  margin-left:auto;
  font-size:7px;
  color:#7e77a1;
  letter-spacing:.05em;
}

.change-notice {
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px;
  background:#e0dcf1;
  border:1px solid #cec9e8;
  border-radius:6px;
  font-size:9px;
  flex-wrap:wrap;
}

.change-notice small {
  margin-left:auto;
  font-size:8px;
}

.project-answer {
  border-top:1px solid #dbd7ec;
  margin-top:24px;
  padding-top:19px;
}

.project-answer>p {
  font-size:12px;
  font-weight:500;
}

.project-answer>div {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
}

.project-answer .pet-sprite {
  --pet-width:40px;
}

.project-answer>div p {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
}

.pet-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.pet-copy .eyebrow {
  margin-bottom:20px;
}

.pet-copy .muted {
  font-size:11px;
  margin-block:20px;
}

.pet-playground {
  padding:30px 0;
  text-align:center;
}

.pet-bubble {
  background:#fff;
  border:1px solid #cec9e5;
  border-radius:12px;
  padding:14px 18px;
  font-size:12px;
  width:fit-content;
  max-width:90%;
  margin:0 auto;
  position:relative;
  min-height:48px;
}

.pet-bubble:after {
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  width:10px;
  height:10px;
  border-right:1px solid #cec9e5;
  border-bottom:1px solid #cec9e5;
  background:#fff;
  transform:rotate(45deg);
}

.pet-stage {
  position:relative;
  min-height:240px;
  display:grid;
  place-items:center;
}

.companion-pet {
  --pet-width:210px;
  z-index:1;
}

.stage-shadow {
  position:absolute;
  bottom:25px;
  width:260px;
  height:85px;
  border-radius:50%;
  background:#e0deee;
  z-index:0;
}

.stage-flower {
  position:absolute;
  left:12%;
  bottom:60px;
  color:#caa475;
  font-size:25px;
  transform:rotate(20deg);
  z-index:1;
}

.stage-flower.second {
  left:auto;
  right:16%;
  bottom:38px;
  font-size:17px;
  color:#918ab1;
}

.pet-picker {
  display:inline-flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
}

.pet-picker button {
  border:1px solid #d2cde7;
  background:transparent;
  border-radius:30px;
  font-size:10px;
  padding:9px 15px;
  min-height:35px;
}

.pet-picker button[aria-pressed="true"] {
  background:#dcd9ec;
  border-color:#a7a1c6;
}

.pricing-section {
  background:#e9e7f3;
  border-block:1px solid var(--line);
}

.pricing-section .section-heading {
  margin-bottom:24px;
}

.billing-switch {
  display:flex;
  width:fit-content;
  margin:0 auto 46px;
  background:#d8d5ea;
  padding:4px;
  border-radius:8px;
  gap:4px;
}

.billing-switch button {
  background:transparent;
  font-size:11px;
  border-radius:5px;
  padding:10px 22px;
}

.billing-switch button[aria-pressed="true"] {
  background:#fff;
  box-shadow:0 2px 4px #28243c0a;
}

.price-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.price-card {
  position:relative;
  border:1px solid #d2cde7;
  border-radius:12px;
  padding:27px 22px;
  background:#f7f6fb;
}

.price-card.featured {
  border-color:#746c99;
  background:#fff;
}

.price-ribbon {
  position:absolute;
  top:-24px;
  height:24px;
  background:var(--primary);
  color:#fff;
  font-size:7px;
  letter-spacing:.08em;
  left:-1px;
  right:-1px;
  text-align:center;
  padding:7px 2px;
  border-radius:8px 8px 0 0;
}

.price-card.featured {
  border-top-left-radius:0;
  border-top-right-radius:0;
}

.price-card h3 {
  font-size:18px;
  font-weight:600;
}

.price-desc {
  font-size:10px;
  color:var(--muted);
  margin-top:10px;
  min-height:34px;
}

.price {
  margin-top:20px;
  white-space:nowrap;
}

.price strong {
  font-size:36px;
  font-weight:550;
  letter-spacing:-.05em;
}

.price>span {
  font-size:10px;
  color:var(--muted);
}

.billing-note {
  font-size:9px;
  color:var(--muted);
  min-height:32px;
  margin:2px 0 16px;
}

.price-card .button {
  width:100%;
  font-size:11px;
  padding:10px;
  min-height:40px;
  gap:9px;
}

.price-card ul {
  list-style:none;
  display:grid;
  gap:13px;
  font-size:10px;
  margin-top:25px;
  line-height:1.6;
  color:#504b6b;
}

.price-card li {
  padding-left:15px;
  position:relative;
}

.price-card li:before {
  content:"✓";
  position:absolute;
  left:0;
  font-size:9px;
  color:#766e9b;
}

.pricing-note {
  font-size:10px;
  color:var(--muted);
  max-width:830px;
  text-align:center;
  margin:27px auto 0;
  line-height:1.9;
}

.faq-section {
  display:grid;
  grid-template-columns:.85fr 1.4fr;
  gap:80px;
}

.faq-section .eyebrow {
  margin-bottom:22px;
}

.faq-list details {
  border-bottom:1px solid #d3cfe7;
}

.faq-list details:first-child {
  border-top:1px solid #d3cfe7;
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:21px 0;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:500;
  line-height:1.6;
}

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

.faq-plus {
  font-size:18px;
  color:#7c759f;
  transition:transform .2s;
}

.faq-list details[open] .faq-plus {
  transform:rotate(45deg);
}

.faq-list details>p {
  font-size:12px;
  color:var(--muted);
  padding:0 22px 22px 0;
}

.download-section {
  background:#dcd9ec;
  border:1px solid #cdc8e4;
  border-radius:18px;
  padding:55px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  position:relative;
  overflow:hidden;
}

.download-section .eyebrow {
  font-size:8px;
  color:#5b5480;
  margin-bottom:17px;
}

.download-section h2 {
  font-size:39px;
}

.download-section p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
  margin-top:16px;
}

.download-actions {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:25px;
  flex-wrap:wrap;
}

.download-section p.download-note {
  font-size:9px;
}

.download-pets {
  display:flex;
  align-items:flex-end;
  transform:rotate(-6deg);
  margin-right:15px;
}

.download-pets .pet-sprite {
  --pet-width:145px;
}

.download-pets .pet-sprite+ .pet-sprite {
  margin-left:-35px;
  margin-bottom:-10px;
}

.footer {
  padding-block:48px;
  display:flex;
  justify-content:space-between;
  gap:25px;
}

.footer .brand {
  font-size:20px;
}


.footer p {
  font-size:10px;
  color:#7a739d;
  margin-top:16px;
}

.footer-right {
  text-align:right;
}

.footer-links {
  display:flex;
  gap:23px;
  font-size:11px;
  margin-top:8px;
}

.noscript {
  font-size:12px;
  padding-bottom:20px;
}

html[lang="zh-CN"] h1 {
  letter-spacing:-.06em;
  line-height:1.25;
}

html[lang="zh-CN"] h1 em {
  font-family:inherit;
  font-style:normal;
  font-weight:550;
}

html[lang="zh-CN"] h2 {
  letter-spacing:-.035em;
  line-height:1.35;
}

html[lang="zh-CN"] .hero-sub {
  max-width:420px;
}

html[lang="zh-CN"] .feature-card h3 {
  font-size:20px;
}

html[lang="zh-CN"] .eyebrow {
  letter-spacing:.12em;
}

@media(min-width:1500px) {
  .hero {
    min-height:610px;
  }
  .hero-scene {
    height:420px;
  }
}

@media(max-width:1050px) {
  .container {
    width:calc(100% - 48px);
  }
  .hero h1 {
    font-size:50px;
  }
  .nav-links {
    gap:20px;
  }
  .hero-scene {
    height:345px;
  }
  .orbit-one {
    width:320px;
    height:320px;
  }
  .hero-pet {
    --pet-width:220px;
  }
  .scene-note {
    padding:10px;
    gap:7px;
    font-size:10px;
  }
  .note-one {
    left:0;
    top:55px;
  }
  .note-two {
    right:0;
    bottom:60px;
  }
  .hero-actions {
    gap:15px;
    flex-wrap:wrap;
  }
  .section {
    padding-block:80px;
  }
  .project-grid,.pet-section {
    gap:45px;
  }
  .sample-page {
    padding:30px;
  }
  .assistant-conversation {
    padding:18px;
  }
  .feature-card {
    padding:22px;
  }
  .price-grid {
    gap:10px;
  }
  .price-card {
    padding:23px 14px;
  }
  .price strong {
    font-size:32px;
  }
  .faq-section {
    gap:45px;
  }
  .download-section {
    padding:45px;
  }
  .download-pets .pet-sprite {
    --pet-width:115px;
  }
}

@media(max-width:760px) {
  :root {
    scroll-padding-top:82px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .nav {
    min-height:68px;
    gap:12px;
    flex-wrap:wrap;
  }
  .nav-links {
    order:3;
    width:100%;
    justify-content:center;
    gap:25px;
    padding:0 0 18px;
    font-size:12px;
  }
  .js-ready .nav-links {
    display:none;
  }
  .js-ready .nav-links.open {
    display:flex;
  }
  .menu-toggle {
    display:block;
  }
  .nav-actions {
    margin-left:auto;
    gap:13px;
  }
  .nav-install {
    font-size:10px;
    padding:9px 13px;
    min-height:36px;
  }
  .brand {
    font-size:22px;
  }

  .hero {
    grid-template-columns:1fr;
    min-height:0;
    padding-top:49px;
    padding-bottom:24px;
    gap:0;
  }
  .hero-copy {
    text-align:center;
  }
  .hero .eyebrow {
    justify-content:center;
    font-size:9px;
    margin-bottom:22px;
  }
  .hero h1 {
    font-size:clamp(41px,7.3vw,56px);
  }
  .hero-sub {
    max-width:440px;
    margin-inline:auto;
    font-size:14px;
    margin-top:23px;
  }
  .hero-actions {
    justify-content:center;
    margin-top:24px;
    gap:20px;
  }
  .hero-note {
    margin-top:14px;
  }
  .hero-scene {
    max-width:440px;
    width:100%;
    margin:8px auto 0;
    height:280px;
  }
  .orbit-one {
    width:255px;
    height:255px;
  }
  .orbit-two {
    width:205px;
    height:205px;
  }
  .pet-halo {
    width:180px;
    height:180px;
  }
  .hero-pet {
    --pet-width:195px;
  }
  .pet-shadow {
    bottom:58px;
    width:115px;
  }
  .note-one {
    left:4%;
    top:50px;
  }
  .note-two {
    right:0;
    bottom:55px;
  }
  .scene-caption {
    bottom:4px;
    font-size:7px;
  }
  .release-note {
    align-items:flex-start;
    padding-block:14px;
    gap:12px;
    flex-direction:column;
  }
  .release-note p {
    font-size:10px;
  }
  .release-badge {
    font-size:9px;
  }
  .demo-section {
    padding-top:35px;
  }
  .demo-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
    margin-bottom:18px;
  }
  .demo-heading h2 {
    font-size:22px;
  }
  .demo-heading .eyebrow {
    font-size:8px;
  }
  .demo-tabs {
    width:100%;
    gap:3px;
  }
  .demo-tabs button {
    padding:11px 7px;
    flex:1;
    justify-content:center;
    font-size:10px;
    gap:5px;
  }
  .demo-tabs button>span:first-child {
    font-size:8px;
  }
  .browser-toolbar {
    gap:10px;
    padding-inline:12px;
    height:38px;
  }
  .address {
    font-size:8px;
    width:75%;
    padding:6px 8px;
  }
  .traffic-lights i {
    width:5px;
    height:5px;
  }
  .traffic-lights {
    gap:3px;
  }
  .browser-content {
    grid-template-columns:1fr;
  }
  .sample-page {
    padding:25px;
  }
  .sample-page h3 {
    font-size:27px;
    max-width:none;
  }
  .page-intro {
    margin-top:12px;
  }
  .article-art {
    height:78px;
    margin-block:16px;
  }
  .page-paragraph {
    font-size:11px;
  }
  .sample-page blockquote {
    margin-top:14px;
  }
  .assistant-panel {
    border-left:0;
    border-top:1px solid var(--line);
  }
  .assistant-conversation {
    padding:17px 20px;
  }
  .assistant-answer {
    margin-top:14px;
  }
  .assistant-answer h4 {
    font-size:13px;
  }
  .assistant-answer li {
    font-size:12px;
  }
  .assistant-bottom {
    font-size:10px;
  }
  .section {
    padding-block:65px;
  }
  .section-heading {
    margin-bottom:30px;
  }
  .section-heading .eyebrow {
    font-size:8px;
    margin-bottom:18px;
  }
  .section-heading>p:not(.eyebrow) {
    font-size:13px;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:15px;
  }
  .feature-card {
    padding:26px;
  }
  .feature-icon {
    margin-bottom:20px;
  }
  .feature-card h3 {
    font-size:23px;
  }
  .feature-card>p:not(.eyebrow) {
    font-size:13px;
  }
  .feature-card blockquote {
    margin-block:20px;
  }
  .feature-card>a {
    font-size:12px;
  }
  .project-grid,.pet-section {
    grid-template-columns:1fr;
    gap:38px;
  }
  .project-copy>.eyebrow {
    font-size:8px;
  }
  .project-board {
    transform:none;
    padding:23px;
  }
  .section-sub {
    font-size:13px;
  }
  .project-steps p {
    font-size:12px;
  }
  .pet-copy {
    order:-1;
  }
  .pet-section {
    gap:15px;
  }
  .pet-playground {
    padding:15px 0 0;
  }
  .pet-stage {
    min-height:220px;
  }
  .companion-pet {
    --pet-width:190px;
  }
  .pet-bubble {
    font-size:11px;
  }
  .price-grid {
    grid-template-columns:repeat(2,1fr);
    gap:38px 12px;
  }
  .price-card {
    padding:23px 17px;
  }
  .price-desc {
    font-size:10px;
  }
  .price strong {
    font-size:33px;
  }
  .price-card ul {
    font-size:10px;
  }
  .pricing-section .section-heading {
    margin-bottom:22px;
  }
  .billing-switch {
    margin-bottom:30px;
  }
  .pricing-note {
    font-size:10px;
    text-align:left;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:30px;
  }
  .faq-list summary {
    font-size:13px;
  }
  .download-section {
    padding:34px 26px;
    gap:15px;
    display:block;
  }
  .download-section h2 {
    font-size:32px;
  }
  .download-pets {
    position:absolute;
    right:-8px;
    top:15px;
    opacity:.14;
    pointer-events:none;
  }
  .download-pets .pet-sprite {
    --pet-width:105px;
  }
  .download-section>div:first-child {
    position:relative;
    z-index:1;
  }
  .download-actions {
    gap:15px;
  }
  .download-actions .button {
    font-size:12px;
  }
  .footer {
    padding-block:35px;
    flex-direction:column;
    gap:20px;
  }
  .footer-right {
    text-align:left;
  }
  .footer-links {
    gap:25px;
  }
  .footer p {
    margin-top:12px;
  }
}

@media(max-width:380px) {
  .container {
    width:calc(100% - 28px);
  }
  .nav-actions {
    gap:6px;
  }
  .nav-install {
    padding:9px 10px;
  }
  .hero h1 {
    font-size:39px;
  }
  .hero-actions {
    gap:14px;
  }
  .hero-actions .button {
    padding:12px 16px;
  }
  .demo-link {
    font-size:11px;
  }
  .scene-note {
    font-size:9px;
  }
  .price-card {
    padding:22px 12px;
  }
  .price strong {
    font-size:29px;
  }
  .price-card .button {
    font-size:10px;
  }
  .price-card ul {
    font-size:9px;
  }
  .source-list>div {
    font-size:10px;
  }
  .demo-tabs button {
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .pet-sprite {
    background-position:0 0;
  }
}

.browser-window[data-example="email"] .article-art,.browser-window[data-example="compare"] .article-art {
  display:none;
}

.browser-window[data-example="compare"] .page-paragraph {
  margin-top:26px;
  line-height:3;
  font-size:12px;
  border-block:1px solid var(--line);
  padding-block:14px;
}

.browser-window[data-example="email"] .page-paragraph {
  margin-top:28px;
  padding:20px;
  background:#f0eff7;
  border-radius:8px;
  line-height:2;
}

.pet-sprite {
  display:block;
}

.price-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.price-card {
  min-width:0;
}

@media(max-width:760px) {
  .price-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:380px) {
  .price-grid {
    grid-template-columns:1fr;
    gap:35px;
  }
  .price-card {
    padding:26px;
  }
  .price strong {
    font-size:38px;
  }
  .price-card ul {
    font-size:12px;
  }
  .price-card .button {
    font-size:12px;
  }
  .price-desc {
    min-height:0;
    font-size:12px;
  }
  .billing-note {
    font-size:11px;
    min-height:0;
  }
  .price-ribbon {
    font-size:8px;
  }
}


.price-card li.price-models {
  padding-left: 0;
}

.price-card li.price-models:before {
  content: none;
}

.price-provider-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.price-provider-icons img {
  display: block;
  width: 24px;
  height: 24px;
  padding: 2px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.price-model-count {
  font-size: 10px;
  color: var(--muted);
}

/* A playful purple identity, with mint, peach, and sunshine accents. */
body {
  background: radial-gradient(ellipse 65% 580px at 88% 210px, #f0e7ff 0, transparent 85%),
    radial-gradient(ellipse 50% 500px at 0 100px, #fff1f7 0, transparent 80%), var(--paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: #e6d6ff; }
h2 { font-weight: 700; letter-spacing: -.045em; }
.header { border-bottom-color: #eee7f7; }
.brand { color: #5542bb; }

.button { border-radius: 30px; font-weight: 700; }
.primary {
  background: linear-gradient(120deg, #7053e8, #815ce9);
  border-color: #7455df;
  box-shadow: 0 6px 0 #e2d8fb, 0 10px 22px #7a58dd20;
}
.primary:hover {
  background: linear-gradient(120deg, #5f43d5, #7451de);
  box-shadow: 0 8px 0 #e2d8fb, 0 15px 25px #7a58dd25;
}
.outline { background: #fff; border-color: #ded3f6; color: #654db1; }
.outline:hover { background: #f5efff; }
.nav-install { box-shadow: 0 3px 0 #e2d8fb; }
.status-dot { background: #20bca7; box-shadow: 0 0 0 3px #20bca711; }
.hero { min-height: 620px; gap: 32px; padding-top: 55px; }
.hero .eyebrow {
  display: inline-flex;
  background: #ede5ff;
  color: #7252c3;
  padding: 9px 15px;
  border: 1px solid #dfd2fa;
  border-radius: 30px;
  font-size: 10px;
  letter-spacing: .09em;
  margin-bottom: 25px;
}
.hero h1 { font-weight: 750; font-size: clamp(48px,4.7vw,65px); line-height: 1.14; }
.hero h1 em,
html[lang="zh-CN"] .hero h1 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 750;
  color: #7652d5;
}
.hero h1 em:after { border-bottom: 7px solid #ffc8e0; bottom: 0; z-index: -1; border-radius: 50%; }
.hero-sub { font-size: 16px; color: #726582; }
.hero-actions { margin-top: 32px; }
.hero-actions .button { min-height: 53px; }
.play { background: #fff; border-color: #d6c7f5; color: #7759c8; }
.hero-scene { height: 440px; }
.scene-backdrop {
  position: absolute;
  width: 365px;
  height: 335px;
  left: 50%;
  top: 48%;
  transform: translate(-50%,-50%) rotate(-9deg);
  background: #e3d5ff;
  border: 8px solid #efe7ff;
  border-radius: 43% 57% 54% 46% / 57% 44% 56% 43%;
  z-index: -2;
}
.orbit-one {
  width: 400px;
  height: 390px;
  border: 1px dashed #cdb8f2;
  transform: translate(-50%,-50%) rotate(20deg);
  border-radius: 46% 54% 48% 52%;
}
.orbit-two { display: none; }
.pet-halo {
  background: #fff0b3;
  width: 230px;
  height: 230px;
  top: 48%;
  box-shadow: 0 0 0 12px #fff5ce80;
}
.hero-pet { --pet-width: 260px; top: 50%; filter: drop-shadow(0 12px 1px #805c9c0d); }
.pet-shadow { background: #9b73bd23; width: 185px; height: 20px; bottom: 87px; }
.scene-note {
  --note-rotation: -6deg;
  background: #fff;
  border: 1px solid #e9def8;
  border-radius: 16px;
  box-shadow: 0 6px 0 #d9c8ed55, 0 12px 25px #8260a512;
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 600;
  animation: note-float 5s ease-in-out infinite;
}
.note-one { left: -2%; top: 104px; }
.note-two { --note-rotation: 5deg; right: -2%; bottom: 105px; animation-delay: -1.7s; }
.note-three { --note-rotation: -3deg; left: 6%; bottom: 51px; animation-delay: -3.4s; }
.note-one .note-icon { color: #8254dd; }
.note-two .note-icon { color: #e67894; }
.note-three .note-icon { color: #1caa9e; }
.note-check { color: #188573; background: #ddf8ee; }
.scene-caption { bottom: 1px; color: #8b76a3; font-size: 9px; }
.tiny-star { color: #eda749; }
.scene-hello {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 5px;
  transform: translateX(-50%) rotate(4deg);
  background: #fff;
  border: 2px solid #ceb9f4;
  color: #7558bc;
  box-shadow: 4px 5px 0 #e6d6ff;
  border-radius: 20px 20px 20px 4px;
  padding: 12px 19px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}
.scene-hello > span:last-child { color: #eaa73f; font-size: 23px; }
.scene-star { position: absolute; z-index: 3; color: #edb440; font-size: 42px; }
.star-one { left: 9%; top: 22px; transform: rotate(-15deg); }
.star-two { right: 6%; bottom: 47px; font-size: 25px; color: #a584e8; }
.scene-heart { position: absolute; right: 7%; top: 80px; color: #f496b3; font-size: 39px; transform: rotate(19deg); }
.scene-dot { position: absolute; width: 13px; height: 13px; background: #76dac5; border-radius: 50%; }
.dot-one { left: 0; bottom: 138px; }
.dot-two { right: 18%; top: 55px; width: 8px; height: 8px; background: #af8feb; }
@keyframes note-float {
  0%,100% { transform: translateY(0) rotate(var(--note-rotation)); }
  50% { transform: translateY(-8px) rotate(var(--note-rotation)); }
}
.release-note {
  border: 1px solid #e4d6f7;
  background: #f4edff;
  border-radius: 15px;
  padding: 15px 20px;
}
.release-badge { background: #e6d7ff; color: #7050b6; border-radius: 20px; padding: 6px 12px; }
.release-note p { color: #837094; }
.demo-heading .eyebrow, .section-heading .eyebrow { color: #9773bc; }
.demo-heading h2 { font-size: 27px; }
.demo-tabs { background: #eee5fc; border-radius: 30px; padding: 6px; border: 1px solid #e3d5f8; }
.demo-tabs button { border-radius: 25px; font-weight: 600; }
.demo-tabs button[aria-selected="true"] { background: #7654d8; color: #fff; box-shadow: 0 3px 8px #6f40c629; }
.demo-tabs button[aria-selected="true"] > span:first-child { color: #e5d7ff; }
.browser-window { border: 1px solid #decef3; border-radius: 20px; box-shadow: 0 8px 0 #ece1f9, 0 24px 65px -25px #8d69be35; }
.browser-toolbar { background: #eee4fb; }
.traffic-lights i:first-child { background: #f1a0b3; }
.traffic-lights i:nth-child(2) { background: #f5cd75; }
.traffic-lights i:nth-child(3) { background: #76d1b7; }
.address { background: #fcf9ff; color: #9986aa; }
.sample-page { background: #fff; }
.sample-page h3 { font-family: inherit; font-weight: 650; font-size: 29px; color: #48345c; }
.page-category { color: #9c7caf; }
.article-art { background: #dbf7f0; border-radius: 12px; }
.art-sun { background: #ffce72; }
.art-hill { background: #8edcc3; }
.hill-two { background: #4fbea7; }
.article-art > span { color: #287c70; }
.sample-page blockquote { color: #9a6a92; border-color: #f2bbd6; }
.assistant-panel { background: #faf5ff; }
.assistant-header { background: #f7f0ff; border-bottom-color: #ede0fa; }
.assistant-avatar { background: #e7d7ff; }
.assistant-header strong { color: #7754b5; }
.assistant-spark { color: #e89d38; }
.user-prompt { background: #e9ddff; border-color: #dbc5f9; color: #735295; border-radius: 17px 17px 5px 17px; }
.assistant-answer { border-color: #eadef5; border-radius: 5px 17px 17px 17px; box-shadow: 0 4px 10px #9470bf08; }
.answer-label { color: #ae82c8; }
.answer-source { color: #8d6daa; }
.preview-tag { color: #936daf; border-color: #dfccee; background: #f7efff; border-radius: 20px; }
.feature-grid { gap: 22px; }
.feature-card {
  border-radius: 24px;
  border: 1px solid #e5d6fb;
  background: #f3ecff;
  box-shadow: 0 6px 0 #eae0f7;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:nth-child(2) { background: #e8faf5; border-color: #c9ecdf; box-shadow: 0 6px 0 #d9f1e7; }
.feature-card:nth-child(3) { background: #fff0f4; border-color: #f8d9e3; box-shadow: 0 6px 0 #f8e1e8; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px #79579315; }
.feature-icon { background: #e1d0fc; color: #7850c3; border-radius: 16px; transform: rotate(-6deg); }
.icon-2 { background: #c3eee1; color: #278d76; transform: rotate(5deg); }
.icon-3 { background: #ffd5e1; color: #cc6488; transform: rotate(-4deg); }
.feature-card h3 { font-weight: 650; }
.feature-card .eyebrow { color: #9275ac; }
.feature-card:nth-child(2) .eyebrow { color: #4d9988; }
.feature-card:nth-child(3) .eyebrow { color: #c17c94; }
.feature-card blockquote { border-color: #cdb2ee; }
.feature-card:nth-child(2) blockquote { border-color: #9edbc6; }
.feature-card:nth-child(3) blockquote { border-color: #f1b5cb; }
.project-section { background: #f0eaff; border-block: 1px solid #e8dcfa; position: relative; }
.project-copy > .eyebrow { color: #9376b3; }
.project-steps { gap: 23px; }
.step-number { background: #dfcffb; color: #7953b6; border-color: #d3baf6; border-radius: 10px; width: 31px; height: 31px; }
.project-steps li:nth-child(2) .step-number { background: #c6f1e7; border-color: #b1e5d7; color: #318e78; }
.project-steps li:nth-child(3) .step-number { background: #ffe5ac; border-color: #f3d28e; color: #aa7a25; }
.project-board { background: #fff; border-radius: 22px; border-color: #dac7f1; box-shadow: 8px 9px 0 #e0d1f5, 0 20px 55px #9273b11c; transform: rotate(2deg); }
.project-board h3 { font-weight: 650; }
.source-list > div { background: #fcfaff; border-color: #eee5f7; border-radius: 10px; }
.source-list > div > span:first-child { color: #a985d0; }
.change-notice { background: #e1f8eb; color: #4d8a65; border-color: #c6ecd5; border-radius: 10px; }
.project-answer > p { color: #805c9d; }
.pet-playground { position: relative; background: #fff2db; border: 1px solid #f9e4ba; border-radius: 48% 48% 25px 25px; padding: 35px 10px 25px; }
.pet-bubble { border: 1px solid #edcbe0; color: #af6c93; border-radius: 20px; transform: rotate(-3deg); box-shadow: 3px 4px 0 #f4dbce; }
.pet-bubble:after { border-color: #edcbe0; }
.stage-shadow { background: #f2d79e; }
.stage-flower { color: #ea9b89; }
.stage-flower.second { color: #aa82cb; }
.pet-picker button { background: #fff8eb; border-color: #eedebf; font-size: 11px; }
.pet-picker button[aria-pressed="true"] { background: #7955d9; border-color: #7955d9; color: #fff; box-shadow: 0 3px 0 #d8c5bc; }
.pet-copy .eyebrow { color: #b99361; }
#pet-hello { color: #a36640; background: #fff2d6; border-color: #f1d599; }
.pricing-section { background: linear-gradient(180deg,#f4eeff,#fcfaff); border-color: #ece1fa; }
.billing-switch { background: #eae0f9; border-radius: 28px; }
.billing-switch button { border-radius: 24px; padding: 11px 24px; }
.billing-switch button[aria-pressed="true"] { background: #fff; color: #7c56bc; box-shadow: 0 3px 7px #aa89c621; }
.price-card { background: #fff; border-color: #e7daf5; border-radius: 22px; box-shadow: 0 5px 0 #ece3f7; }
.price-card h3 { color: #7454a5; }
.price strong { font-weight: 700; color: #48345e; }
.price-card.featured { background: #f8f3ff; border: 2px solid #a57be0; box-shadow: 0 8px 0 #e1d0f7; }
.price-ribbon { background: #8460cf; border-radius: 14px 14px 0 0; font-size: 8px; top: -27px; height: 27px; padding-top: 8px; left: -2px; right: -2px; }
.price-card li:before { color: #42aa93; }
.price-card ul { color: #7b6b89; }
.price-provider-icons img { border-color: #e9e0f4; background: #fff; border-radius: 7px; }
.faq-section .eyebrow { color: #ad80bd; }
.faq-list details { border-color: #e9dcf1; }
.faq-list details:first-child { border-color: #e9dcf1; }
.faq-plus { color: #a781cb; background: #f0e5fc; border-radius: 50%; width: 25px; height: 25px; flex-shrink: 0; text-align: center; }
.download-section { background: #e9dcff; border-color: #d7c1f4; border-radius: 30px; box-shadow: 0 8px 0 #f0e7fb; }
.download-section:before { content: ''; width: 360px; height: 360px; background: #f6d7e9; border-radius: 50%; position: absolute; right: -100px; bottom: -190px; }
.download-section .eyebrow { color: #9b70b9; }
.download-section h2 { color: #694790; }
.footer p { color: #9988a5; }

@media(max-width:1050px) {
  .hero { gap: 15px; min-height: 570px; }
  .hero h1 { font-size: 50px; }
  .hero-scene { height: 395px; }
  .scene-backdrop { width: 295px; height: 290px; }
  .orbit-one { width: 325px; height: 335px; }
  .hero-pet { --pet-width: 225px; }
  .pet-halo { width: 205px; height: 205px; }
  .scene-note { font-size: 10px; padding: 10px; gap: 7px; }
  .note-one { top: 95px; left: -2%; }
  .note-two { right: -1%; bottom: 100px; }
  .note-three { bottom: 48px; }
  .scene-hello { top: 10px; font-size: 11px; padding: 9px 14px; }
  .star-one { top: 50px; left: 0; font-size: 30px; }
  .scene-heart { top: 75px; right: 3%; font-size: 28px; }
}
@media(max-width:760px) {
  body { background: radial-gradient(ellipse 100% 580px at 50% 200px,#f4eaff,transparent 90%),var(--paper); }
  .hero { min-height: 0; padding-top: 42px; padding-bottom: 32px; gap: 20px; }
  .hero .eyebrow { font-size: 8px; padding: 8px 11px; }
  .hero h1 { font-size: clamp(38px,7.4vw,54px); }
  .hero-sub { font-size: 14px; }
  .hero-actions { gap: 22px; }
  .hero-scene { height: 330px; max-width: 370px; margin-top: 5px; }
  .scene-backdrop { width: 265px; height: 245px; }
  .orbit-one { width: 288px; height: 280px; }
  .pet-halo { width: 172px; height: 172px; }
  .hero-pet { --pet-width: 202px; }
  .pet-shadow { bottom: 66px; width: 142px; }
  .scene-hello { top: 0; padding: 8px 15px; font-size: 11px; }
  .scene-hello > span:last-child { font-size: 18px; }
  .scene-note { font-size: 9px; padding: 9px 11px; border-radius: 12px; gap: 6px; }
  .note-one { left: 0; top: 77px; }
  .note-two { right: 0; bottom: 83px; }
  .note-three { left: 7%; bottom: 37px; }
  .scene-caption { bottom: -5px; font-size: 7px; }
  .star-one { top: 38px; left: 5%; font-size: 26px; }
  .star-two { right: 10%; bottom: 40px; font-size: 19px; }
  .scene-heart { right: 5%; top: 49px; font-size: 24px; }
  .dot-one { bottom: 80px; width: 9px; height: 9px; }
  .dot-two { top: 34px; }
  .release-note { padding: 15px; border-radius: 15px; }
  .demo-heading h2 { font-size: 24px; }
  .demo-tabs button { padding: 11px 5px; font-size: 10px; }
  .demo-tabs button > span:first-child { display: none; }
  .sample-page h3 { font-size: 25px; }
  .project-board { transform: none; box-shadow: 5px 6px 0 #e0d1f5; }
  .pet-playground { margin-top: 15px; }
  .price-card { border-radius: 18px; }
  .price-card.featured { border-top-left-radius: 0; border-top-right-radius: 0; }
  .download-section { border-radius: 24px; }
}
@media(max-width:380px) {
  .hero-scene { height: 310px; }
  .scene-backdrop { width: 230px; height: 235px; }
  .orbit-one { width: 253px; height: 260px; }
  .hero-pet { --pet-width: 185px; }
  .scene-note { padding: 8px; font-size: 8px; }
  .scene-note .note-icon { font-size: 15px; }
  .note-check { width: 15px; height: 15px; font-size: 8px; }
  .note-one { top: 76px; }
  .note-two { bottom: 80px; }
  .hero h1 { font-size: 38px; }
}
@media(prefers-reduced-motion:reduce) {
  .scene-note { animation: none; transform: rotate(var(--note-rotation)); }
}

.price-provider-icons { gap: 5px; }
.price-provider-icons img { width: 22px; height: 22px; }
@media(max-width:380px) {
  .orbit-one { width: 220px; height: 230px; }
}

/* Let the examples and pet carry more of the story. */
.hero-sub { max-width: 420px; }
.feature-card { padding: 27px; }
.feature-card > p:not(.eyebrow) { flex: 1; }
.feature-card > a { margin-top: 24px; }
.feature-card h3 { margin-bottom: 12px; }
.feature-icon { margin-bottom: 21px; }
.features .section-heading { margin-bottom: 32px; }
.project-steps { gap: 16px; margin-top: 25px; }
.project-steps li { align-items: center; }
.project-steps h3 { font-size: 14px; }
.pet-copy .button { margin-top: 24px; }
.price-card .price { margin-top: 19px; }
.pricing-note { max-width: 740px; }
.download-actions { margin-top: 26px; }
@media(max-width:760px) {
  .section { padding-block: 52px; }
  .hero-sub { max-width: 310px; }
  .feature-card { padding: 24px; }
  .project-grid { gap: 30px; }
  .faq-section { gap: 24px; }
}

.brand-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
}

.footer .brand-icon {
  width: 28px;
  height: 28px;
}

@media(max-width:760px) {
  .nav .brand-icon {
    width: 32px;
    height: 32px;
  }
}