/* ============================================================================
   Ervo design layer (2026-11). Loaded after the other stylesheets, this file
   sets the visual system for the whole site: color tokens, type, backgrounds,
   surfaces (one glass recipe), buttons, and the motion curves. It follows two
   references: Emil Kowalski's design-engineering notes (ease-out, sub-300 ms UI
   motion, press feedback, never scale from 0) and Apple's HIG (materials that
   convey hierarchy, size-specific tracking, reduced-motion, restraint).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius-card: 16px;

  /* Light: warm off-white paper, ink text, violet accent, peach for Business */
  --bg: #f7f5f2; --bg-alt: #f7f5f2; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1eef9;
  --line: rgba(28, 18, 48, 0.1);
  --text: #15121c; --text-2: #4b4658; --text-3: #6f6980;
  --brand: #6d28d9; --brand-hover: #5b21b6; --brand-soft: #ece4fc; --brand-ink: #2a1650; --link: #6d28d9;
  --violet: #8b5cf6; --violet-2: #c4b5fd; --peach: #ffb38f;
  --glass: rgba(255, 255, 255, 0.72); --glass-line: rgba(255, 255, 255, 0.9); --glass-edge: rgba(109, 40, 217, 0.14);
  --glass-shadow: 0 18px 44px rgba(42, 22, 80, 0.1); --glow: rgba(124, 58, 237, 0.18);
  --aurora-1: rgba(124, 58, 237, 0.16); --aurora-2: rgba(255, 179, 143, 0.22); --aurora-3: rgba(196, 181, 253, 0.28);
}
[data-theme="dark"], .theme-dark {
  /* Dark: true black, violet-tinted off-white text, a soft purple aurora */
  --bg: #000000; --bg-alt: #000000; --bg-2: #101013; --surface: #141418; --surface-2: #1d1d23;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f6f4fb; --text-2: #cfcadb; --text-3: #a59fbb;
  --brand: #8b5cf6; --brand-hover: #7c4ff0; --brand-soft: #211a33; --link: #c4b5fd;
  --glass: rgba(255, 255, 255, 0.045); --glass-line: rgba(255, 255, 255, 0.12); --glass-edge: rgba(170, 130, 255, 0.28);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --glow: rgba(124, 58, 237, 0.26);
  --aurora-1: rgba(124, 58, 237, 0.34); --aurora-2: rgba(255, 179, 143, 0.07); --aurora-3: rgba(139, 92, 246, 0.14);
  color-scheme: dark;
}

/* ---------- 2. Page background: depthless black (warm paper in light mode). Light appears only where the
   stage puts it: one spotlight from above the hero, and the horizon band the phone stands in. ---------- */
body { background: var(--bg); color: var(--text); }
.hero.show { position: relative; isolation: isolate; }
.hero.show::before { content: ""; position: absolute; left: 50%; top: -64px; width: min(900px, 120vw); height: 620px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(42% 60% at 50% 0%, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.1) 45%, rgba(139, 92, 246, 0) 72%); }
:root:not([data-theme="dark"]) .hero.show::before { background: radial-gradient(42% 60% at 50% 0%, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0) 70%); }
/* Sections sit directly on the page; rhythm comes from hairlines and cards, not colored bands */
.alt, section.block, section.cta, [data-theme="dark"] .hero, [data-theme="dark"] section.how, [data-theme="dark"] .block.alt, [data-theme="dark"] .cta { background: transparent; }
section.block, section.how, section.cta { position: relative; isolation: isolate; }
section.block + section.block::before, section.how + section.block::before, section.block + section.cta::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(1120px, calc(100% - 48px)); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
/* Soft light pools behind the video and the closing call, in the brand violet */
section.how::after, section.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 50%, var(--glow), transparent 70%);
  opacity: 0.55;
}

/* ---------- 3. Type: a display face for headlines, size-specific tracking ---------- */
h1, h2, h3, .hero h1, .section-head h2, .split h2, .cta h2, .plan-card h3, .feature h3, .doc h1, .doc h2, .statement, .contact-doc .founder h2 {
  font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "opsz" 96;
}
.hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; font-size: clamp(42px, 6.8vw, 72px); text-wrap: balance; }
.hero .sub { font-size: 18.5px; line-height: 1.55; color: var(--text-2); }
.section-head h2, .split h2, .cta h2 { font-weight: 800; letter-spacing: -0.028em; line-height: 1.08; font-size: clamp(30px, 4.6vw, 44px); text-wrap: balance; }
.section-head p, .split p { font-size: 17.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
h3 { letter-spacing: -0.015em; }
.plan-card h3 { font-size: 26px; letter-spacing: -0.025em; }
.feature h3 { font-size: 20px; }
.doc h1 { letter-spacing: -0.03em; }
.doc h2 { letter-spacing: -0.02em; }
.doc p, .doc li { font-size: 16.5px; }
.section-head { margin-bottom: 40px; }
.hero .rot { color: var(--violet-2); display: inline-flex; align-items: baseline; vertical-align: baseline; height: auto; line-height: inherit; overflow: hidden; padding: 0 0.04em 0.08em 0; margin-bottom: -0.08em; }
.hero .rot-item { line-height: inherit; }
:root:not([data-theme="dark"]) .hero .rot { color: var(--brand); }

/* ---------- 4. Header: translucent material with a soft edge instead of a hard line ---------- */
.site-header, [data-theme="dark"] .site-header, .theme-dark .site-header {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent); }
.site-header { position: sticky; }

/* ---------- 5. Buttons: instant press feedback, ease-out, one violet gradient ---------- */
.btn { transition: transform 140ms var(--ease-out), background 160ms ease, box-shadow 160ms ease, color 160ms ease; font-weight: 700; letter-spacing: -0.005em; }
.btn:active, .try:active, .ct-fab:active, .ct-send:active, .theme-toggle:active, .ctrl:active { transform: scale(0.97); }
.btn-primary, [data-theme="dark"] .btn-primary, .doc a.btn-primary, .ct-send, .ct-fab {
  background: linear-gradient(180deg, #9d72ff 0%, #7c3aed 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 8px 22px var(--glow);
}
.btn-primary:hover, [data-theme="dark"] .btn-primary:hover, .doc a.btn-primary:hover, .ct-send:hover, .ct-fab:hover {
  background: linear-gradient(180deg, #a981ff 0%, #8449f2 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 12px 28px var(--glow);
}
.btn-ghost, [data-theme="dark"] .btn-ghost, .site-header .btn-ghost, [data-theme="dark"] .site-header .btn-ghost, .doc a.btn-ghost, [data-theme="dark"] .doc a.btn-ghost, .theme-toggle, .try, .ctrl {
  background: var(--glass); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .site-header .btn-ghost, [data-theme="dark"] .doc a.btn-ghost, [data-theme="dark"] .theme-toggle, [data-theme="dark"] .try, [data-theme="dark"] .ctrl {
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-ghost:hover, [data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .site-header .btn-ghost:hover, .doc a.btn-ghost:hover, .theme-toggle:hover, .try:not([aria-pressed="true"]):hover {
  background: color-mix(in srgb, var(--glass) 60%, var(--brand) 12%); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-dark, [data-theme="dark"] .btn-dark { background: var(--text); color: var(--bg); }
.btn-dark:hover, [data-theme="dark"] .btn-dark:hover { background: color-mix(in srgb, var(--text) 88%, var(--brand)); color: var(--bg); }
.biz .btn-dark, [data-theme="dark"] .biz .btn-dark { background: #ffe6d9; color: #2a1650; }
.try[aria-pressed="true"], .cmp-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #9d72ff, #7c3aed); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px var(--glow); }
.try:hover { transform: translateY(-1px); }

/* ---------- 6. Surfaces: one glass recipe for every card ---------- */
.feature, .only, .ask-card, .ideas-card, .panel, .plan-card, .contact-card, .founder, .pm-group, .cmp-tabs, .both span:not(.both-label), .try:not([aria-pressed="true"]),
[data-theme="dark"] .feature, [data-theme="dark"] .alt .feature, [data-theme="dark"] .only, [data-theme="dark"] .ask-card, [data-theme="dark"] .alt .ask-card, [data-theme="dark"] .ideas-card, [data-theme="dark"] .panel,
[data-theme="dark"] .cmp-tabs, [data-theme="dark"] .both span:not(.both-label), [data-theme="dark"] .alt .both span:not(.both-label), [data-theme="dark"] .try:not([aria-pressed="true"]),
:root:not([data-theme="dark"]) .only, :root:not([data-theme="dark"]) .ask-card, :root:not([data-theme="dark"]) .ideas-card, :root:not([data-theme="dark"]) .cmp-tabs, :root:not([data-theme="dark"]) .both span:not(.both-label), :root:not([data-theme="dark"]) .try:not([aria-pressed="true"]), .alt .feature, .alt .ask-card, .alt .both span {
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--glass-shadow);
}
[data-theme="dark"] .feature, [data-theme="dark"] .only, [data-theme="dark"] .ask-card, [data-theme="dark"] .ideas-card, [data-theme="dark"] .panel, [data-theme="dark"] .cmp-tabs, [data-theme="dark"] .both span:not(.both-label), [data-theme="dark"] .try:not([aria-pressed="true"]), [data-theme="dark"] .contact-card, [data-theme="dark"] .founder {
  border-color: var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), var(--glass-shadow), 0 0 40px var(--glow);
}
.feature, .only, .ideas-card, .panel, .plan-card { border-radius: var(--radius-card); }
.feature::after, [data-theme="dark"] .feature::after, .ideas-card::after, [data-theme="dark"] .ideas-card::after, .only::after, [data-theme="dark"] .only::after, .ask-card::after, [data-theme="dark"] .ask-card::after, .plan-card::after, [data-theme="dark"] .plan-card::after {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 60%);
}
:root:not([data-theme="dark"]) .feature::after, :root:not([data-theme="dark"]) .only::after, :root:not([data-theme="dark"]) .ask-card::after, :root:not([data-theme="dark"]) .ideas-card::after { background: linear-gradient(150deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 60%); }
.feature .ico, [data-theme="dark"] .feature .ico { background: linear-gradient(145deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 60%, var(--brand) 25%)); color: var(--brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px var(--glow); border-radius: 14px; }
[data-theme="dark"] .feature .ico { color: var(--violet-2); }
.feature p, .only li, .ask-card .a, .usecase p, .plan-for, .wont li { color: var(--text-2); }
/* Pick your Ervo: Personal is paper, Business is deep violet; both get the edge light */
.plan-card:not(.biz), [data-theme="dark"] .plan-card:not(.biz), :root:not([data-theme="dark"]) .plan-card:not(.biz) {
  background: linear-gradient(165deg, #ffffff 0%, #f1edf9 100%); color: #15121c; border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-edge), 0 24px 60px rgba(42, 22, 80, 0.18);
}
.plan-card.biz, [data-theme="dark"] .plan-card.biz, :root:not([data-theme="dark"]) .plan-card.biz {
  background: linear-gradient(165deg, #2f1a5e 0%, #1a0f36 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 179, 143, 0.18), 0 24px 60px rgba(20, 8, 50, 0.4), 0 0 48px var(--glow);
}
.plan-card:not(.biz) .plan-for, .plan-card:not(.biz) .wont li { color: #4b4658; }
.plan-card:not(.biz) .plan-tag, [data-theme="dark"] .plan-card:not(.biz) .plan-tag { background: #ece4fc; color: #5b21b6; }
/* The usecase list and footer use the same hairline */
.usecase, .usecase:last-child, .site-footer { border-color: var(--line); }
.site-footer { padding: 36px 0 44px; color: var(--text-2); }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--brand); }

/* ---------- 7. Motion: ease-out reveals with a short stagger; never from scale(0) ---------- */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.auth-step.active { animation-timing-function: var(--ease-out); animation-duration: 0.3s; }
.cmp-card.pop { animation-timing-function: var(--ease-out); animation-duration: 0.35s; }
.dl-menu .download { animation-timing-function: var(--ease-out); animation-duration: 0.2s; }
@media (hover: none) { .btn-ghost:hover, .try:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: opacity 0.2s ease; } }
@media (prefers-reduced-transparency: reduce) {
  .feature, .only, .ask-card, .ideas-card, .panel, .btn-ghost, .site-header, .ct-panel, .dl-menu .download { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}
@media (prefers-contrast: more) { .feature, .only, .ask-card, .ideas-card, .panel, .plan-card { border-color: var(--text-3); } }

/* ---------- 8. The stage hero: the phone is the show, lit from below ---------- */
.hero.show { min-height: calc(100vh - 64px); padding: 22px 0 36px; justify-content: flex-start; }
.show .hero-title { display: block; margin: 0 0 10px; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -0.03em; line-height: 1.1; }
.show .hero-title .line { display: inline; white-space: normal; }
.show .sub { max-width: 560px; margin: 0; font-size: 17px; }
/* The pool of light: a low horizon band under the phone (light as structure), one spot above it */
.hp-spot { position: relative; width: min(100%, 760px); height: 400px; margin: 4px auto 0; display: flex; justify-content: center; align-items: flex-start; }
.hp-spot::before { content: ""; position: absolute; left: 50%; bottom: -70px; width: 1240px; max-width: 150vw; height: 460px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(44% 46% at 50% 92%, rgba(139, 92, 246, 0.42) 0%, rgba(139, 92, 246, 0.14) 45%, rgba(139, 92, 246, 0) 72%),
              radial-gradient(46% 9% at 50% 88%, rgba(196, 181, 253, 0.55) 0%, rgba(196, 181, 253, 0) 70%); }
/* Contact shadow: the phone stands on the band and darkens it beneath */
.hp-spot::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 300px; height: 34px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 70%); }
.hp-spot .hp-floor { position: absolute; left: 50%; bottom: 8px; width: min(900px, 96vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(196, 181, 253, 0), rgba(196, 181, 253, 0.7) 30%, rgba(196, 181, 253, 0.7) 70%, rgba(196, 181, 253, 0)); box-shadow: 0 0 24px 2px var(--glow); }
.hp-tilt { position: relative; transform: perspective(1200px) rotateX(4deg) rotateY(-9deg); transform-style: preserve-3d; will-change: transform; height: 400px; overflow: hidden; padding: 0 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hp { width: 320px; aspect-ratio: 9 / 18.6; border-radius: 46px; background: #0b0b0e; padding: 10px; position: relative;
  box-shadow: 0 0 0 1px #35323f, inset 0 0 0 2px #151518, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 40px 80px -10px rgba(0, 0, 0, 0.7), 0 30px 60px -10px rgba(139, 92, 246, 0.35); }
.hp .hp-scr { position: absolute; inset: 10px; border-radius: 38px; background: linear-gradient(180deg, #221a36 0%, #0b0810 40%, #050507 70%); color: #f4f2fa; overflow: hidden; display: flex; flex-direction: column; font-size: 13px; font-family: var(--font); text-align: left; }
.hp .hp-isl { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 88px; height: 26px; border-radius: 999px; background: #000; }
.hp .hp-st { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px 6px; font-weight: 700; font-size: 12.5px; }
.hp .hp-sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.hp .hp-sig i { width: 3px; background: #fff; border-radius: 1px; height: 5px; } .hp .hp-sig i:nth-child(2) { height: 8px; } .hp .hp-sig i:nth-child(3) { height: 11px; }
.hp .hp-sig b { width: 22px; height: 11px; margin-left: 6px; border: 1.5px solid #fff; border-radius: 4px; position: relative; } .hp .hp-sig b::after { content: ""; position: absolute; inset: 2px; background: #fff; border-radius: 1.5px; }
.hp .hp-top { display: flex; align-items: center; gap: 9px; margin: 6px 12px 10px; padding: 9px 11px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hp .hp-top img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.hp .hp-top b { display: block; font-size: 13.5px; } .hp .hp-top small { color: #a59fb8; font-size: 11.5px; }
.hp .hp-pill { margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(139, 92, 246, 0.25); color: #d9ccff; }
.hp .hp-msgs { display: flex; flex-direction: column; gap: 7px; padding: 0 12px; }
.hp .hp-m { max-width: 86%; padding: 9px 12px; border-radius: 16px; line-height: 1.38; background: #1c1c1e; border-bottom-left-radius: 5px; }
.hp .hp-m.me { align-self: flex-end; background: linear-gradient(135deg, #7c4dff, #b44dff); border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.hp .hp-card { padding: 11px 12px; border-radius: 16px; background: #1c1c1e; }
.hp .hp-card > b { display: block; font-size: 13px; margin-bottom: 7px; }
.hp .hp-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.hp .hp-row i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(139, 92, 246, 0.3); color: #d9ccff; font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.hp .hp-row span { flex: 1; display: flex; justify-content: space-between; } .hp .hp-row em { font-style: normal; color: #a59fb8; }
.hp .hp-acts { display: flex; gap: 6px; margin-top: 9px; }
.hp .hp-acts span { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; font-weight: 700; font-size: 12px; background: #7c4dff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.hp .hp-acts span.g { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.hp .hp-comp { margin: 12px 12px 18px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); display: flex; align-items: center; padding: 0 6px 0 14px; color: #a59fb8; }
.hp .hp-comp i { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #7c4dff; display: grid; place-items: center; color: #fff; font-style: normal; }
/* The one authored entrance: the conversation arrives line by line */
.hp .hp-m, .hp .hp-card { opacity: 0; transform: translateY(8px); animation: stage-up 0.5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 0.45s + 0.3s); }
@keyframes stage-up { to { opacity: 1; transform: none; } }
/* Ervo's looks float around the phone as lit spheres with real shadows */
.hp-orb { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e9e4f5 70%, #cfc5e6 100%); display: grid; place-items: center; z-index: 2;
  box-shadow: 0 18px 28px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -6px 10px rgba(80, 50, 140, 0.25); animation: orb-float 6s ease-in-out infinite; }
.hp-orb::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -16px; height: 10px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.6), transparent 70%); }
.hp-orb img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
.hp-orb.o1 { left: calc(50% - 300px); top: 70px; animation-delay: -1.2s; } .hp-orb.o2 { left: calc(50% + 236px); top: 36px; } .hp-orb.o3 { left: calc(50% + 256px); top: 300px; animation-delay: -2.8s; width: 52px; height: 52px; } .hp-orb.o4 { left: calc(50% - 282px); top: 330px; animation-delay: -4s; width: 52px; height: 52px; }
.hp-orb.o3 img, .hp-orb.o4 img { width: 40px; height: 40px; }
@keyframes orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* The plaque at the phone's foot: the real sign-up, as glass over the horizon light */
.show .auth { position: relative; z-index: 3; margin-top: -40px; max-width: 460px; padding: 18px 18px 14px; border-radius: 20px; background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px var(--glass-line), 0 24px 50px -12px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .show .auth { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px var(--glass-line), 0 24px 50px -12px rgba(0, 0, 0, 0.7); }
.show .auth-title { font-size: 15px; margin-bottom: 12px; }
.show .hint, .show .fine { font-size: 12.5px; }
.show .learn-more { margin-top: 22px; }
@media (max-width: 760px) {
  .hero.show { padding-top: 16px; }
  .hp-spot, .hp-tilt { height: 300px; }
  .show .sub { font-size: 15.5px; }
  .show .hero-title { font-size: 30px; }
  .hp-tilt { padding: 0 16px; }
  .hp { width: 272px; }
  .hp-orb { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hp-orb { animation: none; } .hp .hp-m, .hp .hp-card { animation: none; opacity: 1; transform: none; } }
/* Hover micro-interactions (tasteskill rule 5): linked cards lift 2px, buttons step */
@media (hover: hover) and (pointer: fine) {
  .plan-card, .feature, .contact-card { transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
  .plan-card:hover, .feature:hover, .contact-card:hover { transform: translateY(-2px); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97); }
}

/* ---------- 9. Contrast fixes from the detector (WCAG AA for body text) ---------- */
.cmp-me { background: #0a66d6; }
:root:not([data-theme="dark"]) .ask-card.biz small { color: #7a3212; }
:root:not([data-theme="dark"]) .ask-card small { color: #4a1fa6; }
.pm-hero { background: linear-gradient(135deg, #6d3fe6, #8a35d6); }
.hp .hp-m.me, .mk-m.me { background: linear-gradient(135deg, #6d3fe6, #9a3be0); }
/* The lower looks sit clear of the sign-up plaque */
.hp-orb.o3 { top: 220px; } .hp-orb.o4 { top: 250px; }
/* Feature cards: the icon sits beside the heading, not stacked above it (the stacked icon tile is the category default) */
.feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.feature .ico { grid-row: 1 / 3; margin: 0; }
.feature h3 { grid-column: 2; margin: 10px 0 4px; }
.feature p { grid-column: 2; }

/* Narrow phones: the owl alone in the header so the wordmark never runs under the buttons */
@media (max-width: 420px) { .brand .word { display: none; } }

/* Phone ergonomics (tasteskill checker): every control at least 44px tall, stacked blocks get room */
@media (max-width: 760px) {
  .mark-chip { min-width: 44px; min-height: 44px; }
  .mc-btn, .mc-switch, .try, .site-footer a, .link-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .mc-switch { min-width: 52px; }
  .goals label { min-height: 44px; }
  .site-footer nav { gap: 8px 20px; }
  .cmp-panel .cmp-chat { margin-top: 40px; }
  .ct { max-width: calc(100vw - 24px); }
}

/* ---------- 10. Finish-review fixes ---------- */
/* The statement band sits on the black ground in dark mode instead of being the brightest thing on the page */
[data-theme="dark"] .statement { background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px var(--glass-edge), 0 24px 60px rgba(0, 0, 0, 0.5); }
/* The hero chat is labeled as what it is */
.stage-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); }
.plan-for { font-weight: 600; }
/* Cards: the glass look without blur (translucent fill, sheen, edge); blur stays on floating chrome only */
.feature, .only, .ask-card, .ideas-card, .panel, .plan-card, .contact-card, .founder, .pm-group, .cmp-tabs, .both span:not(.both-label), .try:not([aria-pressed="true"]), .btn-ghost, .theme-toggle, .ctrl,
[data-theme="dark"] .feature, [data-theme="dark"] .alt .feature, [data-theme="dark"] .only, [data-theme="dark"] .ask-card, [data-theme="dark"] .ideas-card, [data-theme="dark"] .panel, [data-theme="dark"] .cmp-tabs, [data-theme="dark"] .both span:not(.both-label), [data-theme="dark"] .try:not([aria-pressed="true"]), [data-theme="dark"] .pm-group,
:root:not([data-theme="dark"]) .only, :root:not([data-theme="dark"]) .ask-card, :root:not([data-theme="dark"]) .ideas-card, :root:not([data-theme="dark"]) .cmp-tabs, :root:not([data-theme="dark"]) .both span:not(.both-label), :root:not([data-theme="dark"]) .try:not([aria-pressed="true"]) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Rotating word: sized by its content, so it shows even before any script runs; the leaving word floats above the slot */
.hero .rot { position: relative; width: auto; }
.hero .rot-item.leave { position: absolute; left: 0; top: 0; }
.hero .rot-item.enter { transition: none; }

/* ---------- 11. Round 2: a real device, theme-aware screens, stronger hairlines, closing line ---------- */
/* The phone is a slab with thickness: a stacked edge below-right that shows when it tilts, a glass highlight across the screen */
.hp { transform-style: preserve-3d; box-shadow: 0 0 0 1px #3b3846, inset 0 0 0 2px #151518, inset 0 1px 0 rgba(255, 255, 255, 0.2),
  -1px 1px 0 #3a3845, -2px 2px 0 #34313e, -3px 3px 0 #2e2b37, -4px 4px 0 #282530, -5px 5px 0 #221f29, -6px 6px 0 #1c1a22,
  0 40px 80px -10px rgba(0, 0, 0, 0.7), 0 30px 60px -10px rgba(139, 92, 246, 0.35); }
.hp::before { content: ""; position: absolute; left: -3px; top: 110px; width: 3px; height: 34px; border-radius: 2px 0 0 2px; background: linear-gradient(180deg, #4a4756, #2a2832); box-shadow: 0 48px 0 #3a3845, 0 100px 0 #3a3845; }
.hp::after { content: ""; position: absolute; right: -3px; top: 150px; width: 3px; height: 64px; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #4a4756, #2a2832); }
.hp .hp-scr { transform: translateZ(8px); }
.hp .hp-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 18%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.04) 100%); }
.hp-orb, .hp-floor { transform-style: preserve-3d; }
/* It breathes: a slow float that keeps running after the entrance */
@keyframes hp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.hp { animation: hp-float 7s ease-in-out infinite; }
/* Typing dots, then the follow-up lands: the conversation keeps going instead of freezing */
.hp .hp-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 10px 12px; border-radius: 16px; border-bottom-left-radius: 5px; background: var(--hp-them, #1c1c1e); opacity: 0; animation: hp-typing-show 0.3s var(--ease-out) 2.5s forwards, hp-typing-hide 0.3s var(--ease-out) 4.6s forwards; }
.hp .hp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--hp-sub, #a59fb8); animation: hp-dot 1s ease-in-out infinite; }
.hp .hp-typing i:nth-child(2) { animation-delay: 0.15s; } .hp .hp-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hp-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes hp-typing-show { to { opacity: 1; } }
@keyframes hp-typing-hide { to { opacity: 0; height: 0; padding: 0; margin-top: -7px; } }
.hp .hp-m.late { animation-delay: 4.7s; }
/* Both phones follow the site: light screen on paper, dark screen on night */
.hp .hp-scr { --hp-them: #1c1c1e; --hp-sub: #a59fb8; }
:root:not([data-theme="dark"]) .hp { background: #1a1920; box-shadow: 0 0 0 1px #4a4756, inset 0 0 0 2px #2a2832, inset 0 1px 0 rgba(255, 255, 255, 0.35),
  -1px 1px 0 #4a4757, -2px 2px 0 #444152, -3px 3px 0 #3e3b4d, -4px 4px 0 #383548, -5px 5px 0 #322f43, -6px 6px 0 #2c293e,
  0 34px 70px -14px rgba(42, 22, 80, 0.35), 0 24px 50px -10px rgba(139, 92, 246, 0.25); }
:root:not([data-theme="dark"]) .hp .hp-scr { --hp-them: #ffffff; --hp-sub: #6b6680; background: linear-gradient(180deg, #f3eeff 0%, #ffffff 46%); color: #15121c; }
:root:not([data-theme="dark"]) .hp .hp-top { background: #ffffff; box-shadow: 0 6px 16px rgba(42, 22, 80, 0.08), inset 0 0 0 1px rgba(60, 40, 110, 0.1); }
:root:not([data-theme="dark"]) .hp .hp-top small, :root:not([data-theme="dark"]) .hp .hp-row em, :root:not([data-theme="dark"]) .hp .hp-comp { color: #6b6680; }
:root:not([data-theme="dark"]) .hp .hp-pill { background: rgba(124, 77, 255, 0.14); color: #6d28d9; }
:root:not([data-theme="dark"]) .hp .hp-m, :root:not([data-theme="dark"]) .hp .hp-card, :root:not([data-theme="dark"]) .hp .hp-comp { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(60, 40, 110, 0.12); }
:root:not([data-theme="dark"]) .hp .hp-m.me { background: linear-gradient(135deg, #6d3fe6, #9a3be0); color: #fff; box-shadow: 0 6px 14px rgba(124, 77, 255, 0.25); }
:root:not([data-theme="dark"]) .hp .hp-row i { background: rgba(124, 77, 255, 0.14); color: #6d28d9; }
:root:not([data-theme="dark"]) .hp .hp-acts span.g { box-shadow: inset 0 0 0 1px rgba(60, 40, 110, 0.18); color: #15121c; }
:root:not([data-theme="dark"]) .hp .hp-isl { background: #0b0b0e; }
:root:not([data-theme="dark"]) .hp .hp-sig i, :root:not([data-theme="dark"]) .hp .hp-sig b::after { background: #15121c; } :root:not([data-theme="dark"]) .hp .hp-sig b { border-color: #15121c; }
:root:not([data-theme="dark"]) .hp .hp-scr::after { background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 18%, rgba(255, 255, 255, 0) 32%); }
/* Light mode stage: no gray smudge, a violet pool the phone stands in */
:root:not([data-theme="dark"]) .hp-spot::after { background: radial-gradient(50% 50% at 50% 50%, rgba(42, 22, 80, 0.35), transparent 70%); }
:root:not([data-theme="dark"]) .hp-spot::before { background: radial-gradient(44% 46% at 50% 92%, rgba(139, 92, 246, 0.34) 0%, rgba(139, 92, 246, 0.12) 45%, rgba(139, 92, 246, 0) 72%), radial-gradient(46% 9% at 50% 88%, rgba(109, 40, 217, 0.45) 0%, rgba(109, 40, 217, 0) 70%); }
:root:not([data-theme="dark"]) .hp-spot .hp-floor { background: linear-gradient(90deg, rgba(109, 40, 217, 0), rgba(109, 40, 217, 0.55) 30%, rgba(109, 40, 217, 0.55) 70%, rgba(109, 40, 217, 0)); box-shadow: 0 0 20px 2px rgba(139, 92, 246, 0.25); }
/* The floating looks glow white in the dark, like lit spheres */
[data-theme="dark"] .hp-orb { box-shadow: 0 18px 28px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -6px 10px rgba(80, 50, 140, 0.25), 0 0 26px rgba(255, 255, 255, 0.28), 0 0 60px rgba(196, 181, 253, 0.22); }
/* Hairlines that separate: a brighter violet line with a soft glow beneath it */
section.block + section.block::before, section.how + section.block::before, section.block + section.cta::before, section.hero + section.how::before {
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.55) 25%, rgba(196, 181, 253, 0.55) 75%, transparent); box-shadow: 0 0 18px 1px rgba(139, 92, 246, 0.25), 0 1px 0 rgba(0, 0, 0, 0.6); }
:root:not([data-theme="dark"]) section.block + section.block::before, :root:not([data-theme="dark"]) section.how + section.block::before, :root:not([data-theme="dark"]) section.block + section.cta::before, :root:not([data-theme="dark"]) section.hero + section.how::before {
  background: linear-gradient(90deg, transparent, rgba(109, 40, 217, 0.4) 25%, rgba(109, 40, 217, 0.4) 75%, transparent); box-shadow: 0 0 14px 1px rgba(139, 92, 246, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8); }
section.hero + section.how { position: relative; isolation: isolate; }
section.hero + section.how::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1120px, calc(100% - 48px)); height: 1px; transform: translateX(-50%); }
/* The closing line: the statement as the page's last word, centered, one short section */
section.closing { min-height: 0; padding: 72px 0 56px; }
.statement.closing-line { margin: 0 auto; }
/* Apps: icons left, words right */
@media (min-width: 901px) { .apps-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .apps-split .apps { justify-self: start; } }
@media (max-width: 900px) { .apps-split .apps { justify-self: center; } .apps-split > .reveal:last-child { order: -1; } }
/* Footer: brand on the left, links centered on their own line */
.site-footer .wrap { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.site-footer nav { justify-content: center; gap: 28px; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .hp { animation: none; } .hp .hp-typing { display: none; } .hp .hp-m.late { animation: none; opacity: 1; transform: none; } }
/* Web Interface Guidelines (Vercel): touch and theming hygiene */
button, a, [role="button"], input[type="range"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
h1, h2, h3 { text-wrap: balance; }
.btn, .try, .ct-fab, .ct-topic, .ct-chip { transition-property: transform, background, box-shadow, color, border-color; }
/* Device rim: a lit metal bevel around the screen so the slab reads as an object, not a dark rectangle */
.hp { background: linear-gradient(160deg, #5a5668 0%, #2a2832 22%, #0e0d12 50%, #1c1a23 80%, #3a3747 100%); }
:root:not([data-theme="dark"]) .hp { background: linear-gradient(160deg, #6a6679 0%, #35323f 22%, #15141a 50%, #24222c 80%, #4a4757 100%); }
.hp .hp-acts span { color: #fff; }

/* Screenshot mode (?shot=<height>): the hero keeps the height it has at that viewport */
html[data-shot] .hero.show, html[data-shot] section.how { min-height: calc(var(--shot-vh, 900px) - 64px); }

/* ---------- 12. Finish-review fixes, round 2 ---------- */
/* Light-mode sign-up controls: white track and field with ink text, like every other light surface */
:root:not([data-theme="dark"]) .seg { background: #ffffff; border-color: rgba(28, 18, 48, 0.14); }
:root:not([data-theme="dark"]) .seg span { color: #15121c; }
:root:not([data-theme="dark"]) .seg input:checked + span { background: var(--brand); color: #ffffff; }
:root:not([data-theme="dark"]) .field { background: #ffffff; color: #15121c; border-color: rgba(28, 18, 48, 0.16); }
:root:not([data-theme="dark"]) .field::placeholder { color: #6f6980; }
/* The phone casts a shadow onto the horizon: offset to the right and back, elongated, not a centered halo */
.hp-spot::after { left: 56%; bottom: -2px; width: 360px; height: 40px; transform: translateX(-50%) skewX(-18deg); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%); filter: blur(2px); }
:root:not([data-theme="dark"]) .hp-spot::after { background: radial-gradient(50% 50% at 50% 50%, rgba(42, 22, 80, 0.4) 0%, rgba(42, 22, 80, 0.15) 45%, transparent 72%); }
/* The looks take the band's violet underlight so they sit in the scene */
.hp-orb { box-shadow: 0 18px 28px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -8px 12px rgba(139, 92, 246, 0.42); }
[data-theme="dark"] .hp-orb { box-shadow: 0 18px 28px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -8px 12px rgba(139, 92, 246, 0.45), 0 0 26px rgba(255, 255, 255, 0.28), 0 0 60px rgba(196, 181, 253, 0.22); }
/* The closing statement's one supporting line */
.closing-sub { max-width: 640px; margin: 18px auto 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.phone.mock + .stage-note, .split .stage-note { text-align: center; margin-top: 12px; }

/* ---------- 13. Round 2 close-out: light that fades by itself ---------- */
/* The phone's wide ambient shadows were cut off by the stage's fade mask and showed as a column behind the device.
   The device keeps its rim and extruded edge; depth comes from the cast shadow on the horizon and the stage light. */
.hp { box-shadow: 0 0 0 1px #3b3846, inset 0 0 0 2px #151518, inset 0 1px 0 rgba(255, 255, 255, 0.2),
  -1px 1px 0 #3a3845, -2px 2px 0 #34313e, -3px 3px 0 #2e2b37, -4px 4px 0 #282530, -5px 5px 0 #221f29, -6px 6px 0 #1c1a22; }
:root:not([data-theme="dark"]) .hp { box-shadow: 0 0 0 1px #4a4756, inset 0 0 0 2px #2a2832, inset 0 1px 0 rgba(255, 255, 255, 0.35),
  -1px 1px 0 #4a4757, -2px 2px 0 #444152, -3px 3px 0 #3e3b4d, -4px 4px 0 #383548, -5px 5px 0 #322f43, -6px 6px 0 #2c293e; }
/* Dark stage only: a backlight behind the device that ends inside its own box, so nothing is clipped */
[data-theme="dark"] .hp-spot { background: radial-gradient(34% 44% at 50% 46%, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.07) 55%, rgba(139, 92, 246, 0) 100%); }
/* The horizon pool gets room to fade to nothing below the line instead of stopping at a hard edge */
.hp-spot::before { bottom: -200px; height: 600px;
  background: radial-gradient(44% 30% at 50% 72%, rgba(139, 92, 246, 0.42) 0%, rgba(139, 92, 246, 0.14) 45%, rgba(139, 92, 246, 0) 72%),
              radial-gradient(46% 7% at 50% 69%, rgba(196, 181, 253, 0.55) 0%, rgba(196, 181, 253, 0) 70%); }
:root:not([data-theme="dark"]) .hp-spot::before { background: radial-gradient(44% 30% at 50% 72%, rgba(139, 92, 246, 0.34) 0%, rgba(139, 92, 246, 0.12) 45%, rgba(139, 92, 246, 0) 72%),
  radial-gradient(46% 7% at 50% 69%, rgba(109, 40, 217, 0.45) 0%, rgba(109, 40, 217, 0) 70%); }