:root {
  color-scheme: light;
  --paper: oklch(96.8% 0.025 67);
  --paper-bright: oklch(98.5% 0.016 70);
  --paper-deep: oklch(93.8% 0.035 66);
  --ink: oklch(29% 0.075 255);
  --ink-soft: oklch(48% 0.055 264);
  --hairline: color-mix(in oklch, var(--ink) 17%, transparent);
  --pink: oklch(72% 0.12 11);
  --purple: oklch(68% 0.105 280);
  --gold: oklch(70% 0.135 78);
  --sage: oklch(44% 0.07 155);
  --red: oklch(48% 0.12 32);
  --display: "Noto Serif SC", "Songti SC", STSong, serif;
  --sans: "DM Sans", "Avenir Next", "Noto Sans SC", sans-serif;
  --shell: min(90rem, calc(100vw - clamp(2rem, 7vw, 7.5rem)));
  --section-space: clamp(4rem, 6vw, 5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 20rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 17% 8%, color-mix(in oklch, var(--pink) 12%, transparent), transparent 25rem),
    radial-gradient(circle at 85% 18%, color-mix(in oklch, var(--purple) 10%, transparent), transparent 30rem),
    var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-kerning: normal;
  overflow-x: clip;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  content: "";
  opacity: .23;
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: 50%;
  z-index: 100;
  padding: .65rem 1rem;
  color: var(--paper-bright);
  background: var(--ink);
  border-radius: .35rem;
  transform: translate(-50%, -160%);
  transition: transform .2s var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

.shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: clamp(4.75rem, 7vw, 6rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .85rem;
  width: max-content;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
}

.brand img {
  width: 3rem;
  height: 3rem;
  border-radius: .72rem;
  box-shadow: 0 .4rem 1rem color-mix(in oklch, var(--ink) 11%, transparent);
}

.desktop-nav { display: flex; gap: clamp(1.5rem, 3vw, 3.4rem); }

.desktop-nav a, .site-footer nav a {
  position: relative;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.desktop-nav a::after, .site-footer nav a::after, .policy-link::after {
  position: absolute;
  right: 0;
  bottom: -.25rem;
  left: 0;
  height: 1px;
  background: var(--pink);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  min-height: 3.6rem;
  padding: .8rem 1.4rem;
  color: var(--paper-bright);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: .5rem;
  box-shadow: 0 .7rem 1.5rem color-mix(in oklch, var(--ink) 15%, transparent);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s ease;
}

.store-button svg { width: 1.35rem; height: 1.35rem; fill: currentColor; flex: 0 0 auto; }
.store-button--compact { justify-self: end; min-height: 3rem; padding: .65rem 1rem; }
.store-button.is-pending { cursor: default; opacity: .88; }

.menu-button, .mobile-nav { display: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(30rem, 1.12fr);
  align-items: start;
  min-height: auto;
  padding-block: 0 clamp(2rem, 3vw, 3rem);
}

.hero-copy { position: relative; z-index: 3; align-self: start; padding-top: clamp(5.5rem, 9vw, 9rem); padding-left: clamp(0rem, 3vw, 2rem); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  color: color-mix(in oklch, var(--gold) 78%, var(--red));
  font-size: clamp(.8rem, 1vw, .95rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.spark { font-size: 1.2em; }

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

h1, h2, .download-callout h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.04em;
}

.hero h1 {
  max-width: 9.5ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.4rem, 4.9vw, 5.2rem);
  line-height: 1.18;
}

.hero h1 span { white-space: nowrap; }

.hero-lede {
  max-width: 32rem;
  margin-bottom: 2.1rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.23rem);
  letter-spacing: .02em;
}

.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

.text-button, .policy-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 3rem;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.text-button span, .policy-link span { color: var(--pink); transition: transform .3s var(--ease); }

.availability { margin: 1.25rem 0 0; color: var(--ink-soft); font-size: .75rem; letter-spacing: .035em; }

.hero-visual { position: relative; display: grid; place-items: center; align-self: start; min-height: clamp(34rem, 46vw, 40rem); margin: 0; overflow: visible; isolation: isolate; }

.hero-product-image {
  width: auto;
  height: min(45rem, 72svh);
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 1.3rem 1.4rem color-mix(in oklch, var(--ink) 13%, transparent));
  transform: translateY(5rem) scale(1.04);
}

.device {
  position: absolute;
  top: 50%;
  left: 53%;
  z-index: 5;
  width: clamp(16.5rem, 26vw, 21rem);
  padding: .48rem;
  background: oklch(23% 0.016 70);
  border: .16rem solid oklch(54% 0.018 75);
  border-radius: 3rem;
  box-shadow: 1.4rem 1.8rem 2.8rem color-mix(in oklch, var(--ink) 25%, transparent), inset 0 0 0 1px oklch(83% 0.01 75);
  transform: translate(-50%, -50%) rotate(6deg);
}

.device::after {
  position: absolute;
  inset: .23rem;
  border: 1px solid oklch(72% 0.01 75);
  border-radius: 2.72rem;
  content: "";
  pointer-events: none;
}

.device-speaker {
  position: absolute;
  top: .95rem;
  left: 50%;
  z-index: 3;
  width: 5.5rem;
  height: 1.5rem;
  background: oklch(12% 0.01 250);
  border-radius: 99rem;
  transform: translateX(-50%);
}

.device-screen {
  position: relative;
  min-height: clamp(33rem, 48vw, 42rem);
  overflow: hidden;
  padding: 2.8rem 1rem .7rem;
  background: var(--paper-bright);
  border-radius: 2.48rem;
  font-size: .64rem;
}

.screen-top, .screen-tabs, .screen-nav, .profile-line, .chart-title, .chart-rows p { display: flex; align-items: center; }
.screen-top { justify-content: space-between; margin-bottom: .8rem; font-size: .67rem; }
.screen-top b { font-size: .88rem; }
.screen-tabs { justify-content: space-around; padding-bottom: .55rem; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.screen-tabs b { position: relative; color: var(--pink); }
.screen-tabs b::after { position: absolute; right: -.35rem; bottom: -.58rem; left: -.35rem; height: 2px; background: var(--pink); content: ""; }
.profile-line { align-items: flex-start; flex-direction: column; gap: .15rem; margin: .8rem 0; padding: .65rem; border: 1px solid var(--hairline); border-radius: .5rem; }
.profile-line small { color: var(--ink-soft); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--hairline); }
.pillars > div { display: grid; justify-items: center; gap: .2rem; padding: .7rem .2rem; border-right: 1px solid var(--hairline); }
.pillars > div:last-child { border-right: 0; }
.pillars small { color: var(--ink-soft); }
.pillars b, .pillars em { font-family: var(--display); font-size: 1.25rem; font-style: normal; }
.pillars b { color: var(--sage); }
.pillars em { color: var(--ink); }
.pillars .active b, .pillars .active em { color: var(--pink); }
.chart-title { justify-content: space-between; margin-top: 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--hairline); font-weight: 600; }
.chart-title small { color: var(--ink-soft); font-weight: 400; }
.chart-rows p { margin: 0; padding: .56rem 0; border-bottom: 1px dotted var(--hairline); }
.chart-rows p span { width: 3.4rem; color: var(--ink-soft); }
.chart-rows p b { flex: 1; font-weight: 500; }
.screen-nav { position: absolute; right: 0; bottom: 0; left: 0; justify-content: space-around; padding: .75rem .3rem .85rem; background: color-mix(in oklch, var(--paper-bright) 92%, transparent); border-top: 1px solid var(--hairline); color: var(--ink-soft); }
.screen-nav b { color: var(--pink); }

.hero-moon {
  position: absolute;
  top: 26%;
  left: 4%;
  z-index: 1;
  width: clamp(10rem, 18vw, 15rem);
  filter: sepia(.15) saturate(.65) contrast(.92);
  opacity: .88;
}

.orbit {
  position: absolute;
  width: 26rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--gold) 56%, transparent);
  border-radius: 50%;
}

.orbit::before, .orbit::after { position: absolute; border: 1px solid color-mix(in oklch, var(--gold) 42%, transparent); border-radius: 50%; content: ""; }
.orbit::before { inset: 18% -12%; transform: rotate(34deg); }
.orbit::after { inset: 30% -20%; transform: rotate(-28deg); }
.orbit i { position: absolute; width: .45rem; height: .45rem; background: var(--gold); border: .14rem solid var(--paper); border-radius: 50%; box-sizing: content-box; }
.orbit i:nth-child(1) { top: 6%; left: 35%; }
.orbit i:nth-child(2) { top: 48%; right: -1%; }
.orbit i:nth-child(3) { bottom: 7%; left: 22%; }
.orbit--large { top: 10%; left: 9%; width: 78%; opacity: .82; }
.date-stamp { position: absolute; right: 0; bottom: 8%; display: grid; justify-items: center; z-index: 2; width: 7.5rem; padding: .8rem; color: var(--purple); border: 1px dashed color-mix(in oklch, var(--purple) 70%, transparent); border-radius: 50%; font-family: var(--display); font-size: 1.1rem; letter-spacing: .18em; transform: rotate(8deg); }
.date-stamp b { line-height: 1.15; }
.date-stamp small { margin-top: .35rem; font-size: .55rem; letter-spacing: .24em; }
.visual-star { position: absolute; z-index: 6; font-size: 2rem; }
.visual-star--pink { top: 65%; left: 6%; color: var(--pink); }
.visual-star--purple { top: 22%; right: 3%; color: var(--purple); }

.systems-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, .82fr) minmax(30rem, 1.18fr);
  grid-template-rows: auto auto;
  gap: clamp(2rem, 4vw, 3rem) clamp(3rem, 8vw, 8rem);
  align-items: start;
  padding-block: var(--section-space);
}

.systems-intro { grid-column: 1; grid-row: 1; align-self: start; padding-top: clamp(1rem, 3vw, 2rem); }
.systems-intro h2, .privacy-heading h2 { margin-bottom: 1.5rem; font-size: clamp(3rem, 4.7vw, 4.8rem); line-height: 1.24; }
.systems-intro h2 span { white-space: nowrap; }
.systems-intro > p:last-child, .privacy-heading > p:last-child { max-width: 33rem; color: var(--ink-soft); font-size: 1.08rem; }

.system-index { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--hairline); }
.system-index li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: .2rem .9rem; min-height: 8.5rem; padding: 1.5rem clamp(.75rem, 2vw, 1.8rem); border-right: 1px dotted color-mix(in oklch, var(--gold) 55%, transparent); }
.system-index li:last-child { border-right: 0; }
.system-symbol { grid-row: 1 / 3; font-family: var(--display); font-size: 2.1rem; }
.system-index small { align-self: end; color: var(--purple); font-family: var(--display); font-style: italic; }
.system-index b { align-self: start; font-size: .95rem; font-weight: 500; white-space: nowrap; }
.symbol-bazi, .symbol-qizheng { color: var(--pink); }
.symbol-ziwei, .symbol-vedic { color: var(--purple); }
.symbol-astro { color: var(--gold); }

.chart-stack { grid-column: 2; grid-row: 1; align-self: center; width: 100%; height: auto; margin: 0; }
.charts-product-image { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 1.1rem 1rem color-mix(in oklch, var(--ink) 11%, transparent)); }
.chart-stack::before { content: none; }
.chart-sheet { position: absolute; width: min(26rem, 66%); min-height: 31rem; padding: 2rem; background: var(--paper-bright); border: 1px solid color-mix(in oklch, var(--ink) 35%, transparent); box-shadow: .6rem 1.1rem 2rem color-mix(in oklch, var(--ink) 11%, transparent); }
.chart-sheet::before { position: absolute; inset: .5rem; border: 1px solid color-mix(in oklch, var(--purple) 23%, transparent); content: ""; pointer-events: none; }
.chart-sheet header { position: relative; display: flex; align-items: baseline; gap: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--hairline); }
.chart-sheet header h3 { margin: 0; font-family: var(--display); font-size: 1.8rem; }
.chart-sheet header span { color: var(--ink-soft); font-size: .7rem; }
.chart-sheet header small { margin-left: auto; color: var(--pink); font-family: var(--display); font-size: .58rem; letter-spacing: .12em; }
.bazi-sheet { top: 0; left: 2%; z-index: 2; transform: rotate(-2.6deg); }
.astro-sheet { top: 12%; right: 0; z-index: 3; transform: rotate(6deg); }
.sheet-meta { display: grid; grid-template-columns: 4rem 1fr; gap: .35rem; margin-block: 1rem; font-size: .65rem; }
.sheet-meta span { color: var(--ink-soft); }
.sheet-pillars { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1rem; border: 1px solid var(--hairline); }
.sheet-pillars div { display: grid; justify-items: center; gap: .5rem; padding: .8rem .2rem; border-right: 1px solid var(--hairline); }
.sheet-pillars div:last-child { border-right: 0; }
.sheet-pillars small { color: var(--ink-soft); font-size: .58rem; }
.sheet-pillars b, .sheet-pillars em { font-family: var(--display); font-size: 1.25rem; font-style: normal; }
.sheet-pillars b { color: var(--sage); }
.sheet-pillars em { color: var(--red); }
.chart-sheet footer { position: absolute; right: 2rem; bottom: 2rem; left: 2rem; display: flex; justify-content: space-between; padding-top: .7rem; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: .57rem; }
.astro-wheel { position: relative; width: 88%; aspect-ratio: 1; margin: 1.1rem auto; border: 1px solid var(--ink-soft); border-radius: 50%; background: repeating-conic-gradient(from -5deg, transparent 0 29deg, var(--hairline) 30deg 30.4deg); }
.astro-wheel::before, .astro-wheel::after { position: absolute; border: 1px solid var(--ink-soft); border-radius: 50%; content: ""; }
.astro-wheel::before { inset: 14%; }
.astro-wheel::after { inset: 32%; }
.astro-wheel > i { position: absolute; top: 47%; left: 47%; width: .52rem; height: .52rem; background: var(--pink); border-radius: 50%; transform-origin: .25rem .25rem; }
.astro-wheel > i:nth-child(1) { transform: rotate(8deg) translateY(-6rem); }
.astro-wheel > i:nth-child(2) { background: var(--purple); transform: rotate(72deg) translateY(-5.2rem); }
.astro-wheel > i:nth-child(3) { background: var(--gold); transform: rotate(133deg) translateY(-6.2rem); }
.astro-wheel > i:nth-child(4) { background: var(--sage); transform: rotate(194deg) translateY(-5.4rem); }
.astro-wheel > i:nth-child(5) { background: var(--red); transform: rotate(253deg) translateY(-6rem); }
.astro-wheel > i:nth-child(6) { background: var(--ink); transform: rotate(315deg) translateY(-5.5rem); }
.aspect-lines { position: absolute; inset: 31%; }
.aspect-lines span { position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; background: var(--pink); transform-origin: left center; }
.aspect-lines span:nth-child(1) { transform: rotate(18deg); }
.aspect-lines span:nth-child(2) { background: var(--purple); transform: rotate(122deg); }
.aspect-lines span:nth-child(3) { transform: rotate(211deg); }
.aspect-lines span:nth-child(4) { background: var(--gold); transform: rotate(294deg); }
.archive-seal { position: absolute; right: -1rem; bottom: 1.5rem; z-index: 4; display: grid; place-items: center; width: 6rem; aspect-ratio: 1; color: var(--purple); border: 1px solid var(--purple); border-radius: 50%; font-family: var(--display); font-size: .62rem; letter-spacing: .18em; line-height: 1.25; text-align: center; transform: rotate(11deg); }
.archive-seal span { color: var(--gold); font-size: 1.4rem; }

.ai-context-section {
  display: grid;
  grid-template-columns: minmax(20rem, .9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: clamp(4rem, 9vw, 9rem);
  padding-block: var(--section-space) clamp(2.5rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}

.ai-context-copy h2 {
  max-width: 9ch;
  margin-bottom: 1.6rem;
  font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: 1.24;
}

.ai-context-lede {
  max-width: 36rem;
  margin-bottom: 2.5rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.ai-prompt-product { display: grid; place-items: center; min-height: 36rem; margin: 0; }
.ai-prompt-product img { width: auto; height: min(48rem, 78svh); max-height: none; object-fit: contain; filter: drop-shadow(0 1.2rem 1.2rem color-mix(in oklch, var(--ink) 12%, transparent)); transform: scale(1.04); }

.context-index { margin: 0; padding: 0; list-style: none; }
.context-index li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px dotted color-mix(in oklch, var(--gold) 55%, transparent); }
.context-index li > span { color: var(--pink); font-family: var(--display); font-size: .92rem; font-style: italic; }
.context-index li div { display: grid; gap: .16rem; }
.context-index b { font-family: var(--display); font-size: 1.03rem; font-weight: 600; }
.context-index small { color: var(--ink-soft); font-size: .79rem; }

.prompt-paper {
  position: relative;
  min-height: 37rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--paper-bright);
  border: 1px solid color-mix(in oklch, var(--ink) 38%, transparent);
  box-shadow: 1rem 1.4rem 2.7rem color-mix(in oklch, var(--ink) 12%, transparent);
  transform: rotate(1.6deg);
}

.prompt-paper::before {
  position: absolute;
  inset: .65rem;
  border: 1px solid color-mix(in oklch, var(--purple) 28%, transparent);
  content: "";
  pointer-events: none;
}

.prompt-paper::after {
  position: absolute;
  top: -2.3rem;
  right: 8%;
  color: var(--pink);
  content: "✦";
  font-size: 2.2rem;
}

.prompt-paper > header { position: relative; display: flex; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); color: var(--pink); font-size: .68rem; font-weight: 600; letter-spacing: .14em; }
.prompt-paper > header small { color: var(--ink-soft); font-size: .56rem; }
.prompt-paper h3 { position: relative; margin: 2rem 0 .75rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.7rem); }
.prompt-role { position: relative; max-width: 34rem; margin-bottom: 1.8rem; color: var(--ink-soft); font-size: .88rem; }
.prompt-block { position: relative; display: grid; grid-template-columns: 2.8rem 1fr; align-items: start; gap: .8rem; padding: 1rem 0; border-top: 1px dotted var(--hairline); }
.prompt-block > span { color: var(--purple); font-family: var(--display); font-size: .83rem; font-style: italic; }
.prompt-block b { font-family: var(--display); font-size: .98rem; font-weight: 600; }
.prompt-block p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .76rem; }
.prompt-paper > footer { position: absolute; right: clamp(2rem, 4vw, 3.5rem); bottom: clamp(2rem, 4vw, 3.5rem); left: clamp(2rem, 4vw, 3.5rem); display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: .7rem; letter-spacing: .05em; }
.prompt-paper > footer i { color: var(--gold); font-style: normal; font-size: 1.25rem; }

.workflow { padding-bottom: clamp(2.5rem, 4vw, 3rem); }
.section-rule { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; color: var(--pink); font-size: .68rem; font-weight: 600; letter-spacing: .2em; }
.section-rule::before, .section-rule::after { height: 1px; background: var(--hairline); content: ""; }
.section-rule::before { width: 3.5rem; }
.section-rule::after { flex: 1; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.workflow article { position: relative; min-height: 12rem; padding: 1.5rem clamp(1.5rem, 3vw, 3.5rem) 1.5rem 0; border-right: 1px dotted color-mix(in oklch, var(--gold) 60%, transparent); }
.workflow article + article { padding-left: clamp(1.5rem, 3vw, 3.5rem); }
.workflow article:last-child { border-right: 0; }
.step-number { color: var(--pink); font-family: var(--display); font-size: 1.1rem; font-style: italic; }
.step-icon { float: right; color: var(--gold); font-family: var(--display); font-size: 2.3rem; line-height: 1; }
.workflow h3 { margin: 1.5rem 0 .7rem; font-family: var(--display); font-size: 1.35rem; }
.workflow p { max-width: 24rem; margin: 0; color: var(--ink-soft); font-size: .92rem; }

.privacy-section { padding-block: var(--section-space); border-top: 1px solid var(--hairline); }
.privacy-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: end; }
.privacy-heading .eyebrow { grid-column: 1 / -1; }
.privacy-heading h2 { margin-bottom: 0; }
.privacy-heading > p:last-child { align-self: end; margin-bottom: .8rem; }
.privacy-content { display: grid; grid-template-columns: .9fr .65fr .85fr; align-items: center; gap: clamp(1rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.privacy-list { margin: 0; padding: 0; list-style: none; }
.privacy-list li { display: grid; grid-template-columns: 3.8rem 1fr; align-items: center; gap: 1.1rem; padding: 1.2rem 0; border-bottom: 1px dotted color-mix(in oklch, var(--gold) 50%, transparent); }
.privacy-list li > span { display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; color: var(--gold); border: 1px solid color-mix(in oklch, var(--gold) 60%, transparent); border-radius: 50%; font-family: var(--display); font-size: 1rem; }
.privacy-list b { font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
.privacy-list p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .82rem; }
.privacy-orbit { position: relative; display: grid; place-items: center; min-height: 23rem; }
.privacy-orbit .orbit { top: 50%; left: 50%; width: 135%; transform: translate(-50%, -50%); }
.privacy-orbit img { position: relative; z-index: 2; width: min(18rem, 90%); filter: sepia(.15) saturate(.62) contrast(.96); }
.download-callout { position: relative; z-index: 3; }
.download-callout h3 { margin-bottom: 2rem; font-size: clamp(2rem, 3.3vw, 3.6rem); line-height: 1.4; }
.download-callout .policy-link { position: relative; margin-top: 1rem; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 6.5rem; border-top: 1px solid var(--hairline); }
.brand--footer { font-size: 1.25rem; }
.brand--footer img { width: 2.5rem; height: 2.5rem; border-radius: .55rem; }
.site-footer nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); }
.site-footer nav i { color: var(--gold); font-style: normal; }
.site-footer > p { justify-self: end; margin: 0; color: var(--ink-soft); font-size: .76rem; }

[data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.hero [data-reveal]:nth-child(2) { transition-delay: .12s; }

.legal-main { padding-block: clamp(3rem, 6vw, 6rem) var(--section-space); }
.legal-hero { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 4rem; padding: clamp(3rem, 7vw, 6rem) 0; border-block: 1px solid var(--hairline); }
.legal-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(3rem, 6vw, 6rem); line-height: 1.18; }
.legal-hero > div:last-child { padding-bottom: .8rem; color: var(--ink-soft); }
.legal-hero > div:last-child p { margin-bottom: .5rem; }
.legal-layout { display: grid; grid-template-columns: 14rem minmax(0, 44rem); justify-content: center; gap: clamp(3rem, 7vw, 7rem); padding-top: clamp(4rem, 8vw, 7rem); }
.legal-nav { position: sticky; top: 2rem; align-self: start; display: grid; gap: .55rem; padding-left: 1rem; border-left: 1px solid var(--pink); }
.legal-nav a { color: var(--ink-soft); font-size: .82rem; }
.legal-article section { scroll-margin-top: 2rem; margin-bottom: 3.5rem; }
.legal-article h2 { margin-bottom: 1rem; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.25rem); letter-spacing: -.02em; }
.legal-article h3 { margin: 1.8rem 0 .65rem; font-family: var(--display); font-size: 1.1rem; }
.legal-article p, .legal-article li { color: var(--ink-soft); }
.legal-article ul, .legal-article ol { padding-left: 1.3rem; }
.legal-article .notice { padding: 1.2rem 1.4rem; background: color-mix(in oklch, var(--gold) 8%, transparent); border-block: 1px solid color-mix(in oklch, var(--gold) 35%, transparent); color: var(--ink); }
.legal-article a, .support-card a { color: var(--red); text-decoration: underline; text-underline-offset: .2rem; }
.language-summary { padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; font-family: var(--display); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { color: var(--pink); content: "+"; font-family: var(--sans); font-size: 1.2rem; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 1.5rem; }
.support-card { padding: 2rem 0; border-block: 1px solid var(--hairline); }
.support-card dl { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem 1rem; margin: 0; }
.support-card dt { color: var(--ink-soft); }
.support-card dd { margin: 0; font-weight: 600; }

@media (hover: hover) {
  .desktop-nav a:hover::after, .site-footer nav a:hover::after, .policy-link:hover::after { transform: scaleX(1); transform-origin: left; }
  .store-button:not(.is-pending):hover { background: color-mix(in oklch, var(--ink) 86%, var(--purple)); box-shadow: 0 1rem 2rem color-mix(in oklch, var(--ink) 20%, transparent); transform: translateY(-.18rem); }
  .text-button:hover span, .policy-link:hover span { transform: translateX(.25rem); }
  .system-index li { transition: background-color .35s ease; }
  .system-index li:hover { background: color-mix(in oklch, var(--pink) 6%, transparent); }
}

@media (max-width: 68rem) {
  :root { --shell: min(92rem, calc(100vw - 4rem)); }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr); }
  .date-stamp { right: -1rem; }
  .systems-section { grid-template-columns: .8fr 1.2fr; gap: 3rem; }
  .chart-stack { width: 100%; }
  .privacy-content { grid-template-columns: 1fr .65fr 1fr; gap: 1rem; }
}

@media (max-width: 56rem) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 1rem; }
  .site-header > .store-button { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 2rem 0 0; }
  .hero h1 { font-size: clamp(3.6rem, 10vw, 5.8rem); }
  .hero-visual { min-height: 35rem; margin-top: -1rem; }
  .hero-product-image { height: min(46rem, 76svh); transform: scale(1.02); }
  .device { left: 57%; }
  .hero-moon { left: 12%; }
  .systems-section { display: block; }
  .systems-intro { width: 55%; padding-top: 0; }
  .system-index { margin-top: 3rem; }
  .chart-stack { position: relative; top: auto; right: auto; width: 100%; height: auto; margin-top: 3rem; }
  .ai-context-section { grid-template-columns: 1fr; }
  .ai-context-copy { max-width: 42rem; }
  .prompt-paper { width: min(100%, 44rem); margin-inline: auto; }
  .ai-prompt-product { min-height: 34rem; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow article { min-height: 0; padding: 1.5rem 0 2.5rem; border-right: 0; border-bottom: 1px dotted color-mix(in oklch, var(--gold) 60%, transparent); }
  .workflow article + article { padding-left: 0; }
  .privacy-heading { grid-template-columns: 1fr; }
  .privacy-heading > p:last-child { margin-top: 2rem; }
  .privacy-content { grid-template-columns: 1fr 1fr; }
  .privacy-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .privacy-orbit { min-height: 23rem; }
  .site-footer { grid-template-columns: 1fr auto; row-gap: 1.5rem; padding-block: 2rem; }
  .site-footer nav { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .site-footer .brand { grid-row: 2; }
  .site-footer > p { grid-row: 2; }
}

@media (max-width: 47.5rem) {
  :root { --shell: calc(100vw - 2.5rem); --section-space: 4rem; }
  .site-header { min-height: 5rem; }
  .brand { font-size: 1.25rem; letter-spacing: .1em; }
  .brand img { width: 2.5rem; height: 2.5rem; border-radius: .6rem; }
  .site-header > .store-button { display: none; }
  .menu-button { display: grid; place-content: center; gap: .35rem; width: 2.8rem; height: 2.8rem; padding: 0; background: transparent; border: 1px solid var(--hairline); border-radius: 50%; }
  .menu-button span { width: 1.1rem; height: 1px; background: var(--ink); transition: transform .3s var(--ease); }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(.19rem) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-.19rem) rotate(-45deg); }
  .mobile-nav { position: absolute; top: 5rem; right: 0; left: 0; display: grid; padding: .8rem; background: var(--paper-bright); border: 1px solid var(--hairline); box-shadow: 0 1rem 2rem color-mix(in oklch, var(--ink) 12%, transparent); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a { min-height: 3rem; padding: .65rem; border-bottom: 1px solid var(--hairline); font-weight: 600; }
  .mobile-nav a:last-child { border-bottom: 0; }
  .hero { display: flex; flex-direction: column; padding-block: 1.5rem 3.5rem; }
  .hero-copy { order: 1; padding-top: 0; }
  .hero h1 { max-width: 10ch; font-size: clamp(2.75rem, 10.6vw, 3.7rem); line-height: 1.2; }
  .hero-lede { font-size: 1rem; }
  .desktop-only { display: none; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: .6rem; }
  .hero-actions .store-button { width: 100%; }
  .hero-actions .text-button { justify-content: center; }
  .availability { text-align: center; }
  .hero-visual { order: 2; width: 100%; min-height: 30rem; margin-top: 0; }
  .hero-product-image { width: 116%; max-width: none; height: auto; transform: none; }
  .device { left: 56%; width: min(16.5rem, 72vw); border-radius: 2.5rem; transform: translate(-50%, -50%) rotate(4deg); }
  .device::after { border-radius: 2.25rem; }
  .device-screen { min-height: 31rem; border-radius: 2.15rem; }
  .hero-moon { top: 20%; left: -6%; width: 9rem; }
  .date-stamp { right: -1.5rem; bottom: 4%; width: 6rem; font-size: .85rem; }
  .orbit--large { top: 8%; left: 5%; width: 95%; }
  .systems-intro { width: 100%; }
  .systems-intro h2, .privacy-heading h2 { font-size: clamp(3rem, 13vw, 4rem); }
  .system-index { grid-template-columns: 1fr; margin-top: 2rem; }
  .system-index li { grid-template-columns: 3rem 2.5rem 1fr; grid-template-rows: 1fr; min-height: 4.6rem; border-right: 0; border-bottom: 1px dotted color-mix(in oklch, var(--gold) 55%, transparent); }
  .system-index li:last-child { border-bottom: 0; }
  .system-symbol { grid-row: auto; }
  .system-index small, .system-index b { align-self: center; }
  .chart-stack { width: 108%; height: auto; margin-top: 2rem; margin-left: -4%; }
  .charts-product-image { max-width: none; }
  .chart-sheet { width: 82%; min-height: 26rem; padding: 1.4rem; }
  .chart-sheet footer { right: 1.4rem; bottom: 1.4rem; left: 1.4rem; }
  .bazi-sheet { left: -4%; }
  .astro-sheet { top: 15%; right: -4%; }
  .astro-wheel { width: 91%; }
  .archive-seal { right: -.6rem; bottom: -.2rem; width: 5rem; }
  .ai-context-section { display: block; }
  .ai-context-copy h2 { font-size: clamp(3rem, 13vw, 4rem); }
  .ai-context-lede { font-size: .98rem; }
  .prompt-paper { min-height: 34rem; margin-top: 4rem; padding: 2rem 1.4rem; transform: rotate(.7deg); }
  .prompt-paper > header { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .prompt-paper h3 { font-size: 1.75rem; }
  .prompt-paper > footer { right: 1.4rem; bottom: 1.8rem; left: 1.4rem; }
  .ai-prompt-product { min-height: 0; margin-top: 2rem; }
  .ai-prompt-product img { width: 116%; max-width: none; height: auto; margin-left: -8%; transform: none; }
  .privacy-content { display: block; margin-top: 2.5rem; }
  .privacy-list { display: block; }
  .privacy-orbit { min-height: 25rem; margin-block: 2rem; }
  .privacy-orbit .orbit { width: 110%; }
  .download-callout { text-align: center; }
  .download-callout .store-button { width: 100%; }
  .site-footer { display: flex; align-items: flex-start; flex-direction: column; padding-block: 2.5rem 3.5rem; }
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 2rem; order: -1; width: 100%; }
  .site-footer nav i { display: none; }
  .site-footer > p { align-self: flex-start; }
  .legal-hero { grid-template-columns: 1fr; gap: 2rem; }
  .legal-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .legal-layout { display: block; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 3rem; padding: 0 0 1rem; border-bottom: 1px solid var(--pink); border-left: 0; }
  .support-card dl { grid-template-columns: 1fr; }
  .support-card dd { margin-bottom: .6rem; }
}

@media (pointer: coarse) {
  .desktop-nav a, .site-footer nav a, .text-button, .policy-link { min-height: 2.75rem; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .store-button, .legal-nav { display: none !important; }
  body { background: var(--paper-bright); }
  .legal-layout { display: block; }
  .legal-article { max-width: none; }
}