/* openaurelio.com — page base and the design-system components as plain CSS.
   Ported from the Claude Design website round (3 X 2026): the React components of the Aurelio Design Language
   (HeroSlab, IconWell, Switch, GlassSegmentedControl, LogBar, PrismaticRing, GlassIconButton) and the page's own
   pieces (wordmark, CTA, phone, privacy bubble). Values are the components' own; tokens come from aurelio.css. */

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { background: #F7F5F2; color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { margin: 0; background: #F7F5F2 }
a { color: #1b1b1f; text-decoration: none }
a:hover { color: #26241f }
.page {
  position: relative; min-height: 100svh; overflow-x: clip; background: var(--au-canvas);
  font-family: var(--au-font); color: var(--au-ink); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.backdrop-fixed { position: fixed; z-index: 0 }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@keyframes siteVeilOut { to { opacity: 0; visibility: hidden } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } :root { --au-rise: 0px } }
@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface-glass: #FCFBF9; --surface-glass-strong: #FCFBF9; --surface-hero: #FCFBF9;
    --au-glass-blur: none; --au-glass-blur-strong: none; --au-glass-blur-hero: none;
    --site-glass: #FCFBF9; --site-blur: none;
  }
}

/* ── Wordmark: the icon's A at text weight, then "urelio" (site-motion.js opens and folds it) ── */
.wm { position: relative; display: inline-block; white-space: nowrap; font-weight: 700; color: var(--au-ink) }
.wm-31 { font-size: 31px; letter-spacing: -0.7px; line-height: 34px }
.wm-22 { font-size: 22px; letter-spacing: -0.4px; line-height: 26px }
.wm-24 { font-size: 24px; letter-spacing: -0.5px; line-height: 28px }
.wm > svg { display: inline-block; vertical-align: baseline; height: 0.705em; width: 0.7172em; overflow: visible }
.wm-rest { position: relative; display: inline-block; margin-left: 0.015em }
.wm-rest > span:first-child { display: inline-block }
.wm-fringe {
  position: absolute; top: 6%; bottom: 2%; left: 0; width: 0.24em; margin-left: -0.26em; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,140,165,0), rgba(255,140,165,0.8) 22%, rgba(255,212,140,0.8) 44%, rgba(150,226,186,0.75) 64%, rgba(140,180,255,0.85) 84%, rgba(140,180,255,0));
  filter: blur(1.4px); transform: skewX(-10deg);
}

/* ── Prismatic ring (PrismaticRing / ringBackground): a spectral conic on the element's own outline ── */
.ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; box-sizing: border-box; pointer-events: none;
  background: conic-gradient(from var(--au-tilt, 210deg), rgba(255,130,150,0.5), rgba(255,215,130,0.45), rgba(140,225,175,0.42), rgba(130,175,255,0.5), rgba(200,140,255,0.45), rgba(255,130,150,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  filter: blur(0.5px); transition: opacity var(--au-duration-switch) var(--au-ease-morph);
}

/* ── Icon well (IconWell) and glyphs (Icon) ── */
.well {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--au-porcelain-well); box-shadow: var(--au-well-shadow); color: var(--au-icon-stroke);
}
.well.w34 { width: 34px; height: 34px; border-radius: 10px }
.glyph { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round }

/* ── Hero slab (HeroSlab, edge off) inside the app's spectral halo (SpectralHalo) ── */
.halo-wrap { position: relative; isolation: isolate }
.halo {
  position: absolute; inset: -8px; z-index: -1; border-radius: 36px; pointer-events: none; opacity: 0.85; filter: blur(14px);
  background: linear-gradient(calc(135deg + var(--au-roll, 0) * 16deg), rgba(255,130,150,0.2), rgba(255,215,130,0.16), rgba(140,225,175,0.16), rgba(130,175,255,0.2));
}
.slab {
  position: relative; overflow: hidden; border-radius: 28px; background: var(--surface-hero);
  -webkit-backdrop-filter: var(--au-glass-blur-hero); backdrop-filter: var(--au-glass-blur-hero); box-shadow: var(--au-hero-shadow);
}
.slab > .spec {
  position: absolute; left: 6%; top: -50%; width: 64%; height: 110%; border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0) 68%); filter: blur(6px);
  animation: au-spec 10s ease-in-out infinite alternate;
}
.slab > .body { position: relative }
/* radius ≤ 26: the result slab (lighter fill, its own shadow and specular) */
.slab.result { border-radius: 26px; background: rgba(255,255,255,0.46); box-shadow: var(--au-hero-shadow-result) }
.slab.result > .spec { left: 8%; top: -55%; width: 70%; height: 120%; background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 68%); animation-duration: 9s }
@media (prefers-reduced-motion: reduce) { .slab > .spec { animation: none } }

/* ── Switch (ToggleRow's Switch) ── */
.switch {
  appearance: none; border: none; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-sizing: border-box; position: relative; width: 51px; height: 31px; flex-shrink: 0; background: none; padding: 0;
}
.switch > .ring {
  inset: -3px; border-radius: 999px; padding: 1.4px; filter: blur(0.6px); opacity: 0;
  background: conic-gradient(from var(--au-tilt, 210deg), rgba(255,130,150,0.55), rgba(255,215,130,0.495), rgba(140,225,175,0.462), rgba(130,175,255,0.55), rgba(200,140,255,0.495), rgba(255,130,150,0.55));
}
.switch > .track { position: absolute; inset: 0; border-radius: 999px; background: var(--au-switch-off); transition: background 0.25s }
.switch > .knob {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff;
  box-shadow: var(--au-knob-shadow); transition: left 0.25s var(--au-ease-morph);
}
.switch[aria-checked="true"] > .ring { opacity: 1 }
.switch[aria-checked="true"] > .track { background: var(--au-switch-on) }
.switch[aria-checked="true"] > .knob { left: 22px }

/* ── Segmented control (GlassSegmentedControl, regular). --i is the selected index, --n the count. ── */
.seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); height: var(--au-segment-track-height);
  padding: 3px; box-sizing: border-box; border-radius: var(--au-radius-capsule); font-family: var(--au-font);
  background: var(--surface-glass-segment); -webkit-backdrop-filter: var(--au-glass-blur-segment); backdrop-filter: var(--au-glass-blur-segment);
  box-shadow: var(--au-glass-shadow-segment);
}
.seg > .thumb {
  position: absolute; top: 3px; bottom: 3px; width: calc((100% - 6px) / var(--n, 2)); left: calc(3px + (100% - 6px) / var(--n, 2) * var(--i, 0));
  border-radius: var(--au-radius-capsule); background: var(--au-thumb-fill); box-shadow: var(--au-thumb-shadow);
  transition: left var(--au-duration-thumb) var(--au-ease-thumb);
}
.seg > .thumb > .ring { padding: 1px }
.seg > button {
  grid-row: 1; appearance: none; border: none; margin: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-sizing: border-box; position: relative; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: none; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--au-ink); white-space: nowrap;
}

/* ── Log bar (LogBar): idle → undo window → logged ── */
.logbar {
  position: relative; flex: 1; height: 56px; border-radius: 999px; font-family: var(--au-font); color: var(--au-ink);
  background: var(--surface-glass-strong); -webkit-backdrop-filter: var(--au-glass-blur-strong); backdrop-filter: var(--au-glass-blur-strong);
  box-shadow: var(--au-glass-shadow-button);
}
.logbar.is-pressed { box-shadow: inset 0 1px 1px rgba(255,255,255,0.98), 0 0 22px rgba(255,170,190,0.42), 0 0 22px rgba(150,190,255,0.36) }
.logbar > .ring {
  border-radius: 999px; padding: 1.4px; filter: blur(0.6px); opacity: 0; transition: opacity 0.55s var(--au-ease-morph);
  background: conic-gradient(from var(--au-tilt, 210deg), rgba(255,130,150,0.7), rgba(255,215,130,0.63), rgba(140,225,175,0.588), rgba(130,175,255,0.7), rgba(200,140,255,0.63), rgba(255,130,150,0.7));
}
.logbar[data-state="undo"] > .ring { opacity: 1 }
.lb-layer {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; opacity: 0; transform: scale(0.96); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.2,0.9,0.25,1.15);
}
.logbar[data-state="idle"] > .lb-idle, .logbar[data-state="undo"] > .lb-undo, .logbar[data-state="logged"] > .lb-logged { opacity: 1; transform: none; pointer-events: auto }
.lb-idle {
  appearance: none; border: none; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; box-sizing: border-box;
  justify-content: center; background: none; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; font-variant-numeric: tabular-nums;
  border-radius: 999px;
}
.lb-undo, .lb-logged { padding: 0 6px 0 18px }
.lb-undo-label { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lb-chip {
  appearance: none; border: none; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; box-sizing: border-box;
  height: 44px; border-radius: 999px; display: flex; align-items: center; gap: 6px; font-family: var(--au-font); font-weight: 600; color: var(--au-ink);
  background: rgba(255,255,255,0.85); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 0.5px rgba(84,72,58,0.10), 0 2px 6px rgba(64,54,42,0.12);
  padding: 0 18px; font-size: 16px;
}
.lb-drain { position: absolute; left: 24px; right: 24px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden }
.lb-drain > span {
  display: block; height: 100%; border-radius: 2px; background: var(--au-label-30); transform-origin: left center;
  transform: scaleX(var(--p, 1)); transition: transform 0.1s linear;
}
.lb-logged-text { flex: 1; min-width: 0 }
.lb-logged-title { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: rgba(40,38,35,0.78) }
.lb-logged-sub { display: block; font-size: 11.5px; color: var(--au-label-50); margin-top: 1px }

/* ── Call to action: the teaser capsule now; Apple's badge once the app is on the App Store ── */
.cta-teaser {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px; box-sizing: border-box;
  white-space: nowrap; font-size: 17px; letter-spacing: -0.2px; color: var(--au-ink);
  background: var(--site-glass, rgba(255,255,255,0.5)); -webkit-backdrop-filter: var(--site-blur, blur(20px) saturate(180%));
  backdrop-filter: var(--site-blur, blur(20px) saturate(180%)); box-shadow: var(--au-glass-shadow-button);
}
/* In the sticky header the teaser is plain text: the header is already glass (never glass on glass). */
.cta-teaser.small { height: 40px; padding: 0 4px; font-size: 15px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none }
.cta-teaser .strong { font-weight: 600 }
.cta-teaser .soft { color: var(--au-label-75) }
.cta-badge { position: relative; display: inline-flex; padding: 12px; border-radius: 30px; -webkit-tap-highlight-color: transparent }
.cta-badge.small { padding: 10px; border-radius: 26px }
.cta-badge > .badge-halo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.35; filter: blur(8px);
  background: radial-gradient(60% 80% at 30% 50%, rgba(255,170,190,0.32), transparent 70%), radial-gradient(60% 80% at 72% 50%, rgba(150,190,255,0.3), transparent 70%);
  transition: opacity 0.55s cubic-bezier(0.3,0.8,0.3,1);
}
.cta-badge.is-pressed > .badge-halo { opacity: 1; transition: opacity 0.08s ease-out }
.cta-badge > img { position: relative; display: block; height: 48px; width: auto }
.cta-badge.small > img { height: 40px }

/* ── The phone: a 414 × 886 frame drawn at its own size and scaled to its box (page.js sets --k) ── */
.phone { position: relative; width: 100%; aspect-ratio: 414 / 886; font-family: var(--au-font); color: var(--au-ink); -webkit-font-smoothing: antialiased }
.phone-scale { position: absolute; left: 0; top: 0; width: 414px; height: 886px; transform-origin: 0 0; transform: scale(var(--k, 0.7246)) }
.phone-body {
  position: absolute; inset: 0; border-radius: 66px; background: linear-gradient(180deg, #FDFCFA, #EFECE6);
  box-shadow: inset 0 0 0 0.5px rgba(84,72,58,0.2), inset 0 1px 0 #fff, 0 0 0 0.5px rgba(84,72,58,0.1), 0 30px 70px rgba(64,54,42,0.14), 0 6px 18px rgba(64,54,42,0.07);
}
.phone-screen {
  position: absolute; left: 6px; top: 6px; width: 402px; height: 874px; border-radius: 60px; overflow: hidden;
  background: var(--au-canvas); isolation: isolate; box-shadow: 0 0 0 0.5px rgba(84,72,58,0.16);
}
.phone-screen > .wash { position: absolute; inset: -22%; background: var(--au-backdrop); pointer-events: none }
.phone-fade { position: absolute; top: 0; left: 0; right: 0; height: 58px; z-index: 20; background: linear-gradient(180deg, rgba(247,245,242,0.92) 55%, rgba(247,245,242,0)) }
.phone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 21; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px 0 50px; box-sizing: border-box;
}
.phone-status .time { font-size: 17px; font-weight: 590; font-variant-numeric: tabular-nums }
.phone-status .icons { display: flex; align-items: center; gap: 6px }
.phone-status .radios { position: relative; width: 40px; height: 14px }
.phone-status .net {
  position: absolute; right: 0; top: 1px; display: flex; align-items: center; gap: 6px; transform-origin: right center;
  transition: opacity 0.3s cubic-bezier(0.3,0.8,0.3,1), transform 0.35s cubic-bezier(0.3,0.8,0.3,1);
}
.phone-status .air {
  position: absolute; right: 2px; top: -1px; display: flex; opacity: 0; transform: scale(0.4);
  transition: opacity 0.3s cubic-bezier(0.3,0.8,0.3,1), transform 0.35s cubic-bezier(0.2,0.9,0.25,1.15);
}
.phone.is-air .phone-status .net { opacity: 0; transform: scale(0.6) }
.phone.is-air .phone-status .air { opacity: 1; transform: none }
.phone-island { position: absolute; top: 11px; left: 50%; margin-left: -63px; width: 126px; height: 37px; border-radius: 24px; background: #000; z-index: 50 }
.phone-home-ind { position: absolute; bottom: 8px; left: 50%; margin-left: -70px; width: 139px; height: 5px; border-radius: 99px; background: rgba(0,0,0,0.25); z-index: 60 }
.glass-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--au-radius-capsule); display: flex; align-items: center; justify-content: center;
  background: var(--surface-glass); -webkit-backdrop-filter: var(--au-glass-blur); backdrop-filter: var(--au-glass-blur); box-shadow: var(--au-glass-shadow);
}

/* ── Privacy bubble: a glass capsule floating over the page; a tap pops it into mist (site-motion.js) ── */
.bubble-dock {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 60;
  display: flex; justify-content: center; pointer-events: none;
}
.bubble-dock > span { position: relative; display: inline-flex; pointer-events: auto }
.bubble {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 15px; border: 0; margin: 0;
  border-radius: 999px; font: inherit; font-size: 15px; color: var(--au-label-75); white-space: nowrap; cursor: pointer;
  background: var(--surface-glass); -webkit-backdrop-filter: var(--au-glass-blur); backdrop-filter: var(--au-glass-blur); box-shadow: var(--au-glass-shadow);
}

/* ── Shared type for the page's chapters ── */
.eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--au-label-75) }
.tool-tag { display: flex; align-items: center; gap: 12px }
.tool-tag > span { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap }
.h2-chapter { margin: 20px 0 0; font-size: clamp(38px, 2.6vw + 28px, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance }
.lede-chapter { margin: 18px 0 0; font-size: clamp(17px, 0.3vw + 16px, 20px); line-height: 1.5; color: var(--au-label-75); text-wrap: pretty; max-width: 34em }
.section-wrap { position: relative; max-width: 1200px; margin: 0 auto; box-sizing: border-box }
.pill-link { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 999px; font-size: 17px; font-weight: 600 }
.pill-link[aria-current="page"] { background: var(--au-porcelain); box-shadow: var(--au-porcelain-shadow) }

/* ── Phone mockup details ── */
.halo.still { background: linear-gradient(135deg, rgba(255,130,150,0.2), rgba(255,215,130,0.16), rgba(140,225,175,0.16), rgba(130,175,255,0.2)) }
.ph-ded > div {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.2,0.7,0.2,1) var(--dl, 0s), transform 0.4s cubic-bezier(0.2,0.7,0.2,1) var(--dl, 0s);
}
.ph-ded.is-in > div { opacity: 1; transform: none }
.ph-ded[hidden] { display: none }

/* ── Privacy, Support and 404: reading pages ── */
.doc-header {
  position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 12px) clamp(20px,5vw,64px) 0;
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px;
}
.doc-main { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: clamp(40px,7vw,96px) clamp(20px,5vw,32px) 0; box-sizing: border-box }
.doc-h1 { margin: 0; font-size: clamp(44px, 2.6vw + 34px, 72px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02 }
.doc-lede { margin: 20px 0 0; font-size: clamp(19px, 0.4vw + 18px, 22px); line-height: 1.5; text-wrap: pretty }
.doc-h2 { margin: 0; font-size: clamp(24px, 0.8vw + 21px, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2 }
.doc-p { margin: 12px 0 0; font-size: clamp(17px, 0.3vw + 16px, 19px); line-height: 1.6; color: var(--au-label-75); text-wrap: pretty }
.doc-section { margin-top: clamp(44px, 5vw, 64px) }
.doc-main a.inline { color: var(--au-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(60,60,67,0.35); text-underline-offset: 3px }
.doc-main a.inline:hover { color: #26241f; text-decoration-color: rgba(60,60,67,0.7) }
.doc-footer {
  position: relative; z-index: 1; max-width: 1200px; margin: clamp(80px,10vw,140px) auto 0; padding: 32px clamp(20px,5vw,64px) calc(env(safe-area-inset-bottom) + 40px);
  box-sizing: border-box; border-top: 0.5px solid var(--au-hairline);
}
.faq-q {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 20px; box-sizing: border-box; border: 0; margin: 0;
  background: none; font: inherit; color: var(--au-ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.25s;
}
.faq-q:active { background: var(--au-row-press) }
.faq-q > .chev { display: flex; transition: transform 0.35s cubic-bezier(0.3,0.8,0.3,1) }
.faq-q[aria-expanded="true"] > .chev { transform: rotate(180deg) }
.faq-a { padding: 0 20px 18px; font-size: 17px; line-height: 1.6; color: var(--au-label-75); text-wrap: pretty }