/* Astrical static site. Keep it simple: no backend, no tracking, no build step. */

/*
  The palette below is a COPY of Astrical/Theme.swift, not an import — this site
  has no build step. If a Theme.swift color changes, change it here in the same
  commit. The token-by-token mapping and the web-only tokens are documented in
  ../../DESIGN_STANDARDS.md ("Web mirror contract").

  Light-mode --accent is NOT hand-picked: it is deepenForLight("#adc6ff") from
  Theme.swift, the accent a default-configured app actually renders. Its rgba
  derivations below (--accent-soft, --stroke-strong, and the body gradient)
  must be updated with it.
*/

:root {
  /* Mirrors Astrical/Theme.swift dark mode. */
  --bg: #131315;
  --surface-lowest: #0e0e10;
  --surface-low: #1b1b1d;
  --surface: #1f1f21;
  --surface-high: #2a2a2c;
  --surface-highest: #353437;
  --text: #e4e2e4;
  --muted: #c1c6d7;
  /* Web-only third text tier — the app uses opacity on onSurfaceVariant instead. */
  --muted-2: #9299aa;
  --accent: #adc6ff;
  --accent-soft: rgba(173, 198, 255, 0.12);
  --accent-ink: #101217;
  --green: #53e16f;
  --peach: #ffb595;
  --magic: #c0a3ff;
  --focus: #60d4e4;
  --rose: #ff8b94;
  --outline: #6a7283;
  --stroke: rgba(106, 114, 131, 0.24);
  --stroke-strong: rgba(173, 198, 255, 0.3);
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.48);
  --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  --card-shadow-hover: 0 24px 54px rgba(0, 0, 0, 0.28);
  --radius-control: 14px;
  --radius-compact: 16px;
  --radius-card: 20px;
  --radius-large: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1640px;
  --page-gutter: clamp(20px, 3vw, 56px);
  --section-space: clamp(58px, 6vw, 104px);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Mirrors Astrical/Theme.swift light mode. */
    --bg: #f5f6fa;
    --surface-lowest: #ffffff;
    --surface-low: #eef0f5;
    --surface: #e6e9f0;
    --surface-high: #dde1e8;
    --surface-highest: #d1d6df;
    --text: #14161b;
    --muted: #434857;
    --muted-2: #626978;
    --accent: #4c6db8;
    --accent-soft: rgba(76, 109, 184, 0.12);
    --accent-ink: #ffffff;
    --green: #157a2c;
    --peach: #b04d25;
    --magic: #673ab7;
    --focus: #00707a;
    --rose: #d32f2f;
    --outline: #8a92a1;
    --stroke: rgba(67, 72, 87, 0.18);
    --stroke-strong: rgba(76, 109, 184, 0.24);
    --shadow: 0 30px 90px rgba(32, 48, 84, 0.18);
    --card-shadow: 0 12px 34px rgba(36, 45, 70, 0.07);
    --card-shadow-hover: 0 24px 52px rgba(36, 45, 70, 0.14);
    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 8%, rgba(173, 198, 255, 0.08), transparent 26rem),
    radial-gradient(circle at 12% 56%, rgba(192, 163, 255, 0.045), transparent 28rem),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: clamp(16px, calc(15px + 0.12vw), 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 5px;
}

::selection {
  color: var(--accent-ink);
  background: var(--accent);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform 0.18s var(--ease);
}

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

.site-shell {
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.topbar {
  position: relative;
  z-index: 20;
  min-height: clamp(68px, 5vw, 82px);
  margin-top: clamp(10px, 1vw, 18px);
  padding: clamp(8px, 0.7vw, 12px) clamp(10px, 0.9vw, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  background: rgba(31, 31, 33, 0.72);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 0.8vw, 13px);
  color: var(--text);
  font-size: clamp(0.98rem, 0.9vw, 1.12rem);
  font-weight: 780;
  letter-spacing: -0.015em;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: clamp(38px, 2.8vw, 48px);
  height: clamp(38px, 2.8vw, 48px);
  border-radius: clamp(10px, 0.8vw, 13px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(0.88rem, 0.78vw, 0.98rem);
  font-weight: 620;
}

.topbar nav a {
  padding: clamp(8px, 0.62vw, 10px) clamp(10px, 0.9vw, 15px);
  border-radius: 12px;
  color: var(--muted);
}

.topbar nav a:hover,
.topbar nav a[aria-current] {
  color: var(--text);
  background: var(--accent-soft);
  text-decoration: none;
}

.hero {
  position: relative;
  min-height: clamp(640px, calc(100vh - 110px), 940px);
  min-height: clamp(640px, calc(100svh - 110px), 940px);
  padding: clamp(58px, 5vw, 96px) clamp(4px, 0.8vw, 14px) clamp(68px, 6vw, 108px);
  /*
    No overflow clip here on purpose. The orbit rings extend past the hero box
    and clipping them cut a hard vertical edge 40-90px inside the layout — very
    visible on wide screens, where the hero ends ~200px short of the viewport.
    Page-level horizontal overflow is already prevented by `overflow-x: clip`
    on body, so the rings can close naturally instead.
  */
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: clamp(52px, 6vw, 120px);
}

.hero::after {
  content: "";
  position: absolute;
  right: 3%;
  bottom: 2%;
  left: 3%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke-strong), transparent);
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: clamp(650px, 44vw, 800px);
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--accent);
  font-size: clamp(0.72rem, 0.66vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow-star {
  margin-right: 6px;
  color: var(--magic);
  font-size: 1.05em;
}

h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(3.6rem, 6.9vw, 7.25rem);
  font-weight: 820;
  line-height: 0.94;
  letter-spacing: -0.065em;
}

h1 span,
.og-card h1 span {
  color: var(--accent);
}

.hero h1 span {
  display: block;
}

h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 3.3vw, 3.55rem);
  font-weight: 770;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.tagline {
  max-width: 34rem;
  margin: clamp(20px, 1.8vw, 30px) 0 0;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.15vw, 1.32rem);
  line-height: 1.52;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: clamp(23px, 2vw, 31px) 0 0;
  padding: clamp(7px, 0.55vw, 9px) clamp(12px, 0.9vw, 15px);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-low);
  font-size: clamp(0.8rem, 0.72vw, 0.9rem);
  font-weight: 650;
  box-shadow: var(--card-shadow);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 0.9vw, 14px);
  margin-top: clamp(16px, 1.4vw, 22px);
}

.button {
  min-height: clamp(46px, 3.4vw, 54px);
  padding: 0 clamp(16px, 1.3vw, 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--surface-low);
  box-shadow: var(--card-shadow);
  font-weight: 740;
  letter-spacing: -0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.button:hover {
  border-color: var(--stroke-strong);
  box-shadow: var(--card-shadow-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button.primary {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--magic)));
}

.hero-points {
  margin: clamp(22px, 1.9vw, 30px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  color: var(--muted-2);
  font-size: clamp(0.82rem, 0.72vw, 0.9rem);
}

.hero-points li {
  padding: 7px 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-low) 76%, transparent);
}

.hero-media {
  position: relative;
  z-index: 2;
  width: min(100%, clamp(410px, 31vw, 520px));
  justify-self: center;
  isolation: isolate;
}

.hero-media::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 10% -28% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(173, 198, 255, 0.22), rgba(192, 163, 255, 0.08) 38%, transparent 68%);
  filter: blur(20px);
}

.phone-frame {
  position: relative;
  z-index: 2;
  width: clamp(310px, 23vw, 390px);
  margin: 0 auto;
  padding: clamp(7px, 0.55vw, 9px);
  border: 1px solid rgba(193, 198, 215, 0.42);
  border-radius: clamp(49px, 3.7vw, 62px);
  background: linear-gradient(145deg, #5a5b60, #151518 28%, #070708 72%, #66676c);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(42px, 3.15vw, 53px);
  background: var(--surface-lowest);
}

.orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(173, 198, 255, 0.2);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.orbit::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 20px color-mix(in srgb, var(--peach) 72%, transparent);
}

.orbit-one {
  inset: 31% -17% 26%;
}

.orbit-one::after {
  right: 8%;
  bottom: 17%;
}

.orbit-two {
  inset: 12% -8% 8%;
  border-color: rgba(192, 163, 255, 0.1);
  transform: rotate(15deg);
}

.orbit-two::after {
  top: 9%;
  left: 20%;
  width: 6px;
  height: 6px;
  background: var(--magic);
}

.floating-chip {
  position: absolute;
  z-index: 4;
  min-width: clamp(205px, 14vw, 240px);
  padding: clamp(10px, 0.75vw, 13px) clamp(12px, 0.9vw, 15px);
  display: flex;
  align-items: center;
  gap: clamp(9px, 0.7vw, 12px);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-compact);
  color: var(--text);
  background: rgba(31, 31, 33, 0.86);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}

.floating-chip > span {
  width: clamp(32px, 2.25vw, 38px);
  height: clamp(32px, 2.25vw, 38px);
  flex: 0 0 clamp(32px, 2.25vw, 38px);
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 850;
}

.floating-chip .privacy-mark {
  background: var(--green);
}

.floating-chip div {
  display: grid;
  line-height: 1.25;
}

.floating-chip strong {
  font-size: clamp(0.79rem, 0.7vw, 0.88rem);
}

.floating-chip small {
  margin-top: 3px;
  color: var(--muted);
  font-size: clamp(0.64rem, 0.58vw, 0.73rem);
}

/*
  Sits against the phone's status bar, not its content. At the previous 15% it
  landed squarely on the agenda summary card and buried three lines of copy.
  The status-bar band is the only genuinely low-density strip in the mockup.
*/
.floating-chip-top {
  top: -2%;
  right: -6%;
}

.floating-chip-bottom {
  bottom: 12%;
  left: -20%;
}

.intro {
  max-width: min(62rem, 78%);
  margin: var(--section-space) auto clamp(68px, 7vw, 118px);
  text-align: center;
}

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

.intro > p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.04rem, 1vw, 1.2rem);
}

.feature-showcase {
  margin: 0 0 var(--section-space);
}

.feature-showcase > .section-heading {
  max-width: 880px;
  margin: 0 0 clamp(26px, 2.3vw, 38px);
}

.feature-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 22px);
  list-style: none;
}

.feature-card,
.contact-panel,
.promise,
.support-option,
.callout {
  border: 1px solid var(--stroke);
  background: linear-gradient(145deg, var(--surface-low), color-mix(in srgb, var(--surface) 92%, transparent));
  box-shadow: var(--card-shadow);
}

.feature-card {
  position: relative;
  min-height: clamp(235px, 18vw, 290px);
  padding: clamp(24px, 2vw, 34px);
  overflow: hidden;
  border-radius: var(--radius-large);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}

.feature-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--feature-glow), transparent 68%);
  opacity: 0.18;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.feature-card:hover {
  border-color: var(--stroke-strong);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

.feature-card:hover::after {
  opacity: 0.3;
  transform: scale(1.12);
}

.feature-symbol {
  width: clamp(46px, 3.2vw, 54px);
  height: clamp(46px, 3.2vw, 54px);
  margin-bottom: clamp(28px, 2.3vw, 40px);
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--feature-color);
  background: color-mix(in srgb, var(--feature-color) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feature-color) 18%, transparent);
}

.feature-symbol svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card[data-feature="calendars"] {
  --feature-color: var(--green);
  --feature-glow: var(--green);
}

.feature-card[data-feature="quick-add"] {
  --feature-color: var(--magic);
  --feature-glow: var(--magic);
}

.feature-card[data-feature="glance"] {
  --feature-color: var(--peach);
  --feature-glow: var(--peach);
}

.feature-card[data-feature="private"] {
  --feature-color: var(--focus);
  --feature-glow: var(--focus);
}

.feature-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: clamp(1.24rem, 1.25vw, 1.48rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.feature-card p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.96rem, 0.84vw, 1.04rem);
}

.promise {
  position: relative;
  margin: 0 0 30px;
  padding: clamp(30px, 2.8vw, 46px);
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3vw, 50px);
  overflow: hidden;
  border-color: var(--stroke-strong);
  border-radius: var(--radius-large);
  background:
    linear-gradient(120deg, var(--accent-soft), transparent 45%),
    linear-gradient(145deg, var(--surface-low), var(--surface));
}

.promise > *:not(.promise-orbit) {
  position: relative;
  z-index: 2;
}

.promise p:last-of-type {
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.promise-orbit {
  position: absolute;
  z-index: 0;
  right: -70px;
  bottom: -100px;
  width: 310px;
  height: 190px;
  border: 1px solid rgba(173, 198, 255, 0.16);
  border-radius: 50%;
  transform: rotate(-15deg);
}

.promise-orbit::before {
  content: "✦";
  position: absolute;
  top: -26px;
  left: 115px;
  color: var(--magic);
  font-size: 3.2rem;
  text-shadow: 0 0 26px color-mix(in srgb, var(--magic) 55%, transparent);
}

/* Support, privacy, ticket, and 404 pages. */
.doc {
  max-width: 850px;
  margin: 0 auto;
  padding: 78px 0 32px;
}

.doc h1 {
  margin: 0 0 10px;
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: 0.98;
}

.doc .meta {
  margin: 0 0 34px;
  color: var(--muted-2);
  font-size: 0.91rem;
}

.doc h2 {
  margin: 46px 0 12px;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.doc h3 {
  margin: 28px 0 8px;
  font-size: 1.04rem;
}

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

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

.doc li + li {
  margin-top: 11px;
}

.privacy-doc {
  max-width: 1180px;
}

.privacy-hero {
  max-width: 850px;
}

.privacy-hero .lede {
  max-width: 48rem;
}

.privacy-hero .meta {
  margin-top: 22px;
}

.privacy-summary {
  margin: 44px 0 52px;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-large);
  background:
    radial-gradient(circle at 88% 10%, rgba(192, 163, 255, 0.13), transparent 18rem),
    linear-gradient(135deg, var(--accent-soft), rgba(31, 31, 33, 0.28));
  box-shadow: var(--card-shadow);
}

.privacy-summary-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.privacy-summary-heading .eyebrow {
  margin-bottom: 4px;
}

.privacy-summary-heading h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.privacy-shield {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(83, 225, 111, 0.38);
  border-radius: 16px;
  color: #0d2413;
  background: var(--green);
  box-shadow: 0 12px 30px rgba(83, 225, 111, 0.17);
  font-size: 1.35rem;
  font-weight: 900;
}

.privacy-principles {
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.privacy-principles li {
  min-height: 126px;
  margin: 0;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-compact);
  background: color-mix(in srgb, var(--surface-lowest) 74%, transparent);
}

.privacy-principles strong {
  color: var(--text);
  font-size: 1rem;
}

.privacy-principles span {
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.5;
}

.doc-layout {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 760px);
  justify-content: space-between;
  align-items: start;
  gap: clamp(46px, 7vw, 100px);
}

.doc-toc {
  position: sticky;
  top: 24px;
  padding: 18px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-low) 82%, transparent);
}

.doc-toc p {
  margin: 0 0 8px;
  padding: 0 10px;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-toc a {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.35;
}

.doc-toc a:hover {
  color: var(--text);
  background: var(--accent-soft);
  text-decoration: none;
}

/*
  Inline variant for short pages: a wrapping row of anchor chips instead of a
  sticky rail. Same tokens, far less furniture for a two-screen page.
*/
.doc-toc-inline {
  position: static;
  margin: 24px 0 32px;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.doc-toc-inline p {
  width: 100%;
  margin-bottom: 3px;
}

.doc-toc-inline a {
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-lowest) 58%, transparent);
}

.doc-toc-inline a[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: none;
}

/* Reading position, mirroring the app's active-tab pill. */
.doc-toc a[aria-current="true"] {
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
  font-weight: 700;
}

.privacy-section {
  position: relative;
  padding: 0 0 42px;
  scroll-margin-top: 24px;
}

.privacy-section + .privacy-section {
  padding-top: 42px;
  border-top: 1px solid var(--stroke);
}

.privacy-section-number {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.privacy-section h2 {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 2.8vw, 2rem);
}

.privacy-section h3 {
  margin-top: 30px;
}

.privacy-section p:last-child,
.privacy-section ul:last-child {
  margin-bottom: 0;
}

.privacy-section ul {
  padding-left: 1.25rem;
}

.privacy-contact {
  margin-top: 8px;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-large);
  background: linear-gradient(145deg, var(--surface-low), var(--surface-lowest));
  box-shadow: var(--card-shadow);
}

.privacy-contact h2 {
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.privacy-contact p:last-child {
  margin-bottom: 0;
}

.lede {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.14rem;
}

.callout,
.contact-panel {
  margin: 30px 0;
  padding: 22px 24px;
  border-radius: var(--radius-card);
}

.callout {
  border-left: 4px solid var(--accent);
}

.callout strong,
.help-list h3 {
  color: var(--accent);
}

.contact-panel h2 {
  margin-top: 0;
}

.support-options {
  margin: 32px 0 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.support-option {
  padding: 22px;
  display: grid;
  gap: 9px;
  border-radius: var(--radius-card);
  color: var(--text);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.support-option:hover {
  border-color: var(--stroke-strong);
  box-shadow: var(--card-shadow-hover);
  text-decoration: none;
  transform: translateY(-3px);
}

.support-option span {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.support-option strong {
  font-size: 1.05rem;
}

.primary-option {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 74%, var(--magic)));
}

.primary-option span,
.primary-option strong {
  color: var(--accent-ink);
}

.ticket-form {
  margin-top: 34px;
  padding: 28px;
  display: grid;
  gap: 19px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-large);
  background: color-mix(in srgb, var(--surface-low) 88%, transparent);
  box-shadow: var(--card-shadow);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.ticket-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--surface-lowest);
  font: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.ticket-form textarea {
  resize: vertical;
}

.ticket-form input:focus,
.ticket-form select:focus,
.ticket-form textarea:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent);
}

.form-note,
.form-status {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.9rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.not-found {
  min-height: 58vh;
}

/* Fixed-size Open Graph renderer. */
.og-body {
  --text: #e4e2e4;
  --muted: #c1c6d7;
  --accent: #adc6ff;
  --magic: #c0a3ff;
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.48);
  width: 1200px;
  height: 630px;
  overflow: hidden;
  background: #131315;
}

.og-card {
  position: relative;
  width: 1200px;
  height: 630px;
  padding: 60px 78px;
  display: grid;
  grid-template-columns: 1fr 286px;
  align-items: center;
  gap: 66px;
  overflow: hidden;
  color: #e4e2e4;
  background:
    radial-gradient(circle at 79% 38%, rgba(173, 198, 255, 0.2), transparent 25rem),
    radial-gradient(circle at 13% 90%, rgba(192, 163, 255, 0.09), transparent 22rem),
    #131315;
}

.og-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: 40px;
  width: 440px;
  height: 250px;
  border: 2px solid rgba(173, 198, 255, 0.16);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.og-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 30px;
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.og-card h1 {
  font-size: 4.7rem;
  letter-spacing: -0.055em;
}

.og-card p:not(.eyebrow) {
  max-width: 27rem;
  margin: 18px 0 0;
  color: #c1c6d7;
  font-size: 1.45rem;
  line-height: 1.28;
}

.og-phone {
  position: relative;
  z-index: 2;
  width: 236px;
  justify-self: end;
  border: 5px solid #3b3c42;
  border-radius: 40px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

/* Breadcrumb: a persistent way back out of a nested page. */
.breadcrumb {
  margin: 0 0 clamp(18px, 2vw, 26px);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-2);
  font-size: 0.87rem;
  font-weight: 650;
}

.breadcrumb a {
  padding: 6px 11px 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-low) 76%, transparent);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.breadcrumb a:hover {
  color: var(--text);
  border-color: var(--stroke-strong);
  text-decoration: none;
  transform: translateX(-2px);
}

.breadcrumb svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.breadcrumb .breadcrumb-current {
  color: var(--muted-2);
}

/* Quick Help anchors need to clear the sticky header when jumped to. */
.help-list h3 {
  scroll-margin-top: 90px;
}

/*
  Mobile bottom tab bar. Mirrors Astrical's own labeled tab bar: icon over
  label, accent pill on the active destination, muted for the rest. Replaces
  the topbar links below 700px so the thumb reach matches the app.
*/
.tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface-low) 88%, transparent);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}

.tabbar-inner {
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
}

.tabbar a {
  padding: 7px 4px 6px;
  display: grid;
  justify-items: center;
  gap: 3px;
  border-radius: var(--radius-control);
  color: var(--muted-2);
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: -0.005em;
  line-height: 1.1;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.tabbar a:hover {
  text-decoration: none;
}

.tabbar a[aria-current] {
  color: var(--accent);
  background: var(--accent-soft);
}

.tabbar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

footer {
  margin-top: 68px;
  padding: 34px 0 54px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  border-top: 1px solid var(--stroke);
  color: var(--muted-2);
  font-size: 0.89rem;
}

footer a {
  color: var(--muted-2);
}

footer a:hover {
  color: var(--accent);
}

@media (prefers-color-scheme: light) {
  body {
    background:
      radial-gradient(circle at 82% 8%, rgba(76, 109, 184, 0.08), transparent 26rem),
      radial-gradient(circle at 12% 56%, rgba(103, 58, 183, 0.04), transparent 28rem),
      var(--bg);
  }

  .topbar,
  .floating-chip {
    background: rgba(255, 255, 255, 0.8);
  }

  .phone-frame {
    background: linear-gradient(145deg, #b9bbc3, #55575e 25%, #1c1d21 72%, #c5c7cd);
  }
}

/*
  Between the two-column breakpoint and ~1200px the hero gap is too tight for
  the bottom chip's -20% hang, and it clips into the copy column. Pull it in
  until there's room.
*/
@media (min-width: 961px) and (max-width: 1200px) {
  .floating-chip-bottom {
    left: -4%;
  }
}

@media (max-width: 960px) {
  .hero {
    min-height: 0;
    padding: clamp(54px, 8vw, 72px) 0 clamp(72px, 10vw, 92px);
    grid-template-columns: 1fr;
    gap: clamp(52px, 8vw, 72px);
    text-align: center;
  }

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

  .tagline {
    margin-right: auto;
    margin-left: auto;
  }

  .status-pill {
    margin-right: auto;
    margin-left: auto;
  }

  .actions,
  .hero-points {
    justify-content: center;
  }

  .hero-media {
    width: min(100%, clamp(380px, 55vw, 520px));
  }

  .floating-chip-top {
    right: 0;
  }

  .floating-chip-bottom {
    left: -6%;
  }

  .promise {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .doc-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .doc-toc {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .doc-toc p {
    grid-column: 1 / -1;
  }
}

/* Hand the wayfinding to the bottom tab bar, the way the app does. */
@media (max-width: 700px) {
  /* With the links gone, a left-stranded logo leaves the bar visibly empty.
     Centring it reads as an app title bar instead. */
  .topbar {
    justify-content: center;
  }

  .topbar nav {
    display: none;
  }

  .tabbar {
    display: block;
  }

  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  footer {
    padding-bottom: 30px;
  }

  .doc-toc {
    position: static;
  }
}

@media (max-width: 620px) {
  .site-shell {
    padding: 0 clamp(12px, 4.1vw, 20px);
  }

  .topbar {
    min-height: clamp(58px, 16vw, 68px);
    margin-top: clamp(7px, 2.3vw, 11px);
    padding: clamp(6px, 1.8vw, 8px) clamp(7px, 2vw, 10px);
    border-radius: clamp(15px, 4.4vw, 19px);
  }

  .brand {
    gap: clamp(7px, 2.3vw, 10px);
    font-size: clamp(0.87rem, 3.8vw, 0.98rem);
  }

  .brand img {
    width: clamp(34px, 9.7vw, 42px);
    height: clamp(34px, 9.7vw, 42px);
    border-radius: clamp(9px, 2.5vw, 11px);
  }

  .topbar nav {
    gap: 0;
    font-size: clamp(0.76rem, 3.25vw, 0.86rem);
  }

  .topbar nav a {
    padding: clamp(7px, 2vw, 9px) clamp(6px, 2.3vw, 10px);
  }

  .hero {
    padding: clamp(40px, 12vw, 58px) 0 clamp(58px, 16vw, 76px);
    gap: clamp(38px, 12vw, 54px);
  }

  h1 {
    font-size: clamp(2.65rem, 14.5vw, 4.35rem);
    line-height: 0.96;
  }

  h2 {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  .tagline,
  .intro > p,
  .lede {
    font-size: clamp(0.96rem, 4.2vw, 1.05rem);
  }

  .actions {
    gap: 10px;
  }

  .button {
    min-height: clamp(44px, 12vw, 48px);
    padding: 0 clamp(12px, 3.8vw, 17px);
    font-size: clamp(0.84rem, 3.65vw, 0.94rem);
  }

  .hero-points {
    display: none;
  }

  .hero-media {
    width: min(100%, clamp(278px, 87vw, 380px));
  }

  .phone-frame {
    width: clamp(190px, 57vw, 260px);
    padding: clamp(4px, 1.25vw, 6px);
    border-radius: clamp(32px, 9.6vw, 43px);
  }

  .phone-frame img {
    border-radius: clamp(28px, 8.4vw, 37px);
  }

  .floating-chip {
    min-width: 0;
    width: clamp(150px, 44vw, 190px);
    padding: clamp(7px, 2.25vw, 10px) clamp(8px, 2.5vw, 11px);
  }

  .floating-chip > span {
    width: clamp(27px, 7.7vw, 33px);
    height: clamp(27px, 7.7vw, 33px);
    flex-basis: clamp(27px, 7.7vw, 33px);
  }

  .floating-chip strong {
    font-size: clamp(0.66rem, 2.95vw, 0.76rem);
  }

  .floating-chip small {
    font-size: clamp(0.54rem, 2.4vw, 0.63rem);
  }

  /* Same reasoning as the base rule, but the mockup is smaller here so the
     chip needs to sit proportionally higher to clear the title row. */
  .floating-chip-top {
    top: -4%;
    right: 0;
  }

  .floating-chip-bottom {
    bottom: 10%;
    left: -1%;
  }

  .intro {
    max-width: 100%;
    margin: clamp(50px, 15vw, 68px) auto clamp(58px, 17vw, 76px);
  }

  .feature-showcase > .section-heading {
    text-align: center;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: clamp(205px, 58vw, 240px);
    padding: clamp(20px, 6vw, 26px);
  }

  .feature-symbol {
    margin-bottom: clamp(22px, 7vw, 30px);
  }

  .promise {
    padding: clamp(22px, 7vw, 30px) clamp(19px, 6vw, 26px);
    text-align: center;
  }

  .doc {
    padding-top: clamp(42px, 13vw, 58px);
  }

  .doc h1 {
    font-size: clamp(2.45rem, 12.5vw, 3.15rem);
  }

  .privacy-summary {
    margin-top: 34px;
    padding: 22px;
  }

  .privacy-summary-heading {
    align-items: flex-start;
  }

  .privacy-shield {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
  }

  .privacy-principles {
    grid-template-columns: 1fr;
  }

  .privacy-principles li {
    min-height: 0;
  }

  .doc-toc {
    grid-template-columns: 1fr 1fr;
    padding: 14px;
  }

  .privacy-section,
  .privacy-section + .privacy-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .privacy-section:first-child {
    padding-top: 0;
  }

  .field-grid,
  .support-options {
    grid-template-columns: 1fr;
  }

  .ticket-form {
    margin-right: -4px;
    margin-left: -4px;
    padding: 20px;
  }
}

@media (max-width: 360px) {
  .topbar nav a {
    padding-right: 5px;
    padding-left: 5px;
  }

  .status-pill {
    font-size: 0.75rem;
  }

  .hero-points {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Ticket form: honeypot and submission states
   --------------------------------------------------------------------------- */

/*
  Honeypot. Hidden from sighted users and from assistive technology, but still
  a real focusable-off field in the DOM so automation fills it in.

  Deliberately NOT `display: none` or `visibility: hidden` — the better spam
  bots skip fields hidden that way, which defeats the trap. Positioning it off
  the visual canvas keeps it "real" to anything parsing the form while keeping
  it unreachable for people. The `aria-hidden` and `tabindex="-1"` in the
  markup are what keep it out of the way of screen readers and tab order.
*/
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status.is-pending {
  color: var(--muted);
}

.form-status.is-success {
  color: var(--green);
  font-weight: 600;
}

.form-status.is-error {
  color: var(--peach);
  font-weight: 600;
}

/* A disabled submit button should look unavailable, not just be unavailable. */
.button.primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}