/* Hipple Follow / Orbital — presentation only. Loaded after legacy layout. */
:root {
  color-scheme: dark;
  --follow-space: #06080c;
  --follow-surface: #10141b;
  --follow-raised: #171c24;
  --follow-text: #edf0f5;
  --follow-muted: #a1a9b7;
  --follow-copper: #d99466;
  --follow-copper-hover: #e8ab7f;
  --follow-line: #2b313c;
  --follow-blue: #9aafc9;
  --follow-success: #a2c6ad;
  --follow-danger: #dfa49e;
  --follow-radius: 16px;
  --follow-radius-small: 9px;
  --follow-space-1: 8px;
  --follow-space-2: 16px;
  --follow-space-3: 24px;
  --follow-space-4: 40px;
  --follow-shadow: 0 20px 60px #00000030;
  --follow-glow: 0 0 28px #d9946612;
  --follow-font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  --green: var(--follow-copper);
  --lime: var(--follow-copper-hover);
  --muted: var(--follow-muted);
  --line: var(--follow-line);
  --white: var(--follow-surface);
  --radius: var(--follow-radius);
  background: var(--follow-space);
  color: var(--follow-text);
  font-family: var(--follow-font);
}
body { background: var(--follow-space); }
::selection { background: #d9946640; color: #fff; }
:focus-visible { outline: 2px solid var(--follow-copper); outline-offset: 4px; }
button:not(.follow-intro-enter), .btn {
  background: var(--follow-copper); color: #1c120d;
  border: 1px solid #e6aa7f60; border-radius: var(--follow-radius-small);
  box-shadow: var(--follow-glow); min-height: 42px;
  transition: background 250ms, border-color 250ms, box-shadow 250ms, transform 250ms;
}
button:not(.follow-intro-enter):hover, .btn:hover { background: var(--follow-copper-hover); box-shadow: 0 0 30px #d9946620; }
.btn.light, button.light, .btn.secondary, button.secondary { background: #10141bcc; color: var(--follow-text); border: 1px solid #414754; box-shadow: none; }
.btn.soft, button.soft, .btn.ghost, button.ghost { background: transparent; color: var(--follow-copper-hover); border: 1px solid #d9946626; box-shadow: none; }
.btn.light:hover, button.light:hover, .btn.soft:hover, button.soft:hover, .btn.ghost:hover, button.ghost:hover { background: #20232a; border-color: #d9946680; }
button.danger, .btn.danger { background: #2a1c20; color: var(--follow-danger); border: 1px solid #664040; box-shadow: none; }
button.danger:hover, .btn.danger:hover { background: #3a262b; }
button:disabled { opacity: .5; }
.mark, .auth-story .brand .mark { background: #251a15; color: var(--follow-copper-hover); border: 1px solid #d9946640; box-shadow: inset 0 0 16px #d9946608; }
.brand { color: var(--follow-text); letter-spacing: -.8px; }
.brand span:last-child, .auth-story .brand span:last-child { color: var(--follow-muted); }
.eyebrow { color: var(--follow-copper); font-size: 10px; letter-spacing: 2.5px; }
.sidebar { background: #090c11; border-color: var(--line); overflow-y: auto; }
.nav a { color: var(--follow-muted); font-size: 14px; transition: background 250ms, color 250ms; }
.nav a:hover { background: #171b22; color: var(--follow-text); }
.nav a.active { background: #d9946612; color: var(--follow-copper-hover); box-shadow: inset 2px 0 var(--follow-copper); }
.nav .count, .avatar { background: #2a221e; color: var(--follow-copper-hover); }
.sidebar-note { background: #11151c; border: 1px solid var(--line); }
.sidebar-note p, .topbar, .flow-row p, .event p, .event time { color: var(--follow-muted); }
.main { background: radial-gradient(ellipse at 85% 0%, #d9946606, transparent 50%), var(--follow-space); }
.topbar { background: #090c11; border-color: var(--line); }
.workspace-tag { background: #131923; color: var(--follow-blue); border-color: #354050; }
.content { padding-bottom: 64px; }
.page-heading h1 { font-weight: 500; letter-spacing: -1px; }
.page-heading p, .panel-head p, .smalltext, .section-subtitle, .help, .connection p { font-size: 13px; }
.panel, .metric, .feature, .sequence-card, .landing-preview {
  background: #10141bf5; border: 1px solid var(--line); border-radius: var(--follow-radius);
  box-shadow: var(--follow-shadow); transition: border-color 300ms, box-shadow 300ms;
}
.metric:hover, .feature:hover, .sequence-card:hover { border-color: #d9946650; box-shadow: var(--follow-shadow), var(--follow-glow); }
.money-hero, .preview-hero, .final-cta {
  background: radial-gradient(ellipse at 90% 10%, #d9946612, transparent 65%), #13161c;
  border: 1px solid #d9946640; color: var(--follow-text); box-shadow: var(--follow-shadow);
}
.money-hero h2 { color: var(--follow-copper-hover); font-variant-numeric: tabular-nums; font-weight: 500; }
.money-hero .eyebrow, .preview-hero span { color: var(--follow-copper); }
.money-hero p, .preview-hero p, .hero-tip p { color: var(--follow-muted); }
.money-hero:after { border-color: #d994661a; box-shadow: 0 0 0 40px #d9946603, 0 0 0 80px #d9946602; }
.hero-tip { background: #080b1040; border-color: #d994661c; }
.hero-tip strong { color: var(--follow-text); }
.metric .label, .metric small { color: var(--follow-muted); font-size: 12px; }
.metric .label .icon { color: var(--follow-copper); }
.metric strong, .financial { color: var(--follow-text); font-variant-numeric: tabular-nums; }
.metrics .metric:first-child strong { color: var(--follow-copper-hover); }
.panel-head h2 { font-size: 16px; }
.panel-head a, .auth-form .switch a { color: var(--follow-copper-hover); }
.empty, .empty p, .help, .section-subtitle, .connection p, .details dt, .loading, .auth-form .switch { color: var(--follow-muted); }
.empty strong, .dropzone strong { color: var(--follow-text); }
.empty .empty-icon, .event-dot, .step-number { background: #211b18; color: var(--follow-copper); border-color: #d9946630; }
.flow-row + .flow-row, .event + .event { border-color: var(--line); }
.flow-row p, td small { font-size: 12px; }
.pill { background: #202630; color: #bac3d0; font-size: 11px; border: 1px solid #ffffff08; }
.pill.won, .pill.connected, .pill.active, .pill.accepted { background: #1a2b24; color: var(--follow-success); }
.pill.hot, .pill.waiting, .pill.contacted, .pill.pending, .pill.trial { background: #30241b; color: #e5b58e; }
.pill.lost, .pill.error, .pill.uncertain, .pill.revoked, .pill.expired { background: #302125; color: var(--follow-danger); }
.pill.draft, .pill.paused { background: #252832; color: #b4bdca; }
.notice { background: #141d28; border-color: #344355; color: #becde0; }
.notice.warn { background: #2a2219; border-color: #594431; color: #e0ba91; }
table { font-size: 13px; }
th { background: #141922; color: #b0b9c8; border-color: var(--line); font-size: 11px; letter-spacing: .7px; }
td, .chart-empty { border-color: var(--line); }
td small { color: var(--follow-muted); }
tbody tr { transition: background 200ms; }
tbody tr:hover { background: #1a2029; }
label { color: #c3c9d3; font-size: 13px; }
input, textarea, select { background: #0b0f15; color: var(--follow-text); border-color: #39414e; font-size: 14px; }
input::placeholder, textarea::placeholder { color: #838e9f; opacity: 1; }
input:focus, textarea:focus, select:focus { outline: 2px solid #d9946690; border-color: var(--follow-copper); }
input:read-only { color: #b7c0ce; }
input[type="checkbox"] { accent-color: var(--follow-copper); }
input::file-selector-button { background: #262a33; color: var(--follow-text); border: 1px solid #414754; padding: 8px; border-radius: 5px; margin-right: 12px; }
.gmail { color: var(--follow-danger); } .outlook { color: var(--follow-blue); }
.danger-zone { border-color: #664040; }
.dropzone { background: #11161d; border: 1px dashed #79604d; color: var(--follow-muted); }
.dropzone.over { background: #241e19; }
.dropzone input, .email-body, .notification { background: #171c24; color: var(--follow-text); }
.bar { background: #232934; } .bar-fill { background: #be835c; }
progress.bar { appearance: none; border: 0; width: 100%; }
progress.bar::-webkit-progress-bar { background: #232934; border-radius: 4px; }
progress.bar::-webkit-progress-value { background: #be835c; border-radius: 4px; }
progress.bar::-moz-progress-bar { background: #be835c; border-radius: 4px; }
.chart-empty { color: var(--follow-muted); }
dialog { background: #11161e; color: var(--follow-text); box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #020408b8; backdrop-filter: blur(3px); }
dialog p { color: var(--follow-muted); }
#toast { background: #242c38; border: 1px solid #556171; color: var(--follow-text); box-shadow: var(--follow-shadow); }
#toast.error { background: #382326; border-color: #78504d; }
.inline-error { color: var(--follow-danger); }
.skeleton { background: linear-gradient(90deg, #11161e, #1c2430, #11161e); background-size: 200%; }
.auth-story { background: radial-gradient(ellipse at 0% 80%, #b9774620, transparent 60%), #0b0e14; border-right: 1px solid var(--line); position: relative; overflow: hidden; }
.auth-story h1 { font-family: var(--follow-font); font-weight: 350; line-height: 1.15; }
.auth-story h1 em { color: var(--follow-copper); font-style: normal; }
.auth-story p { color: var(--follow-muted); }
.auth-form { background: #090c11; }
.auth-form > div { width: 420px; max-width: 100%; }
.auth-form h2 { font-weight: 450; }
/* Marketing: a quiet orbital field, never behind operational data. */
.landing { background: var(--follow-space); position: relative; isolation: isolate; }
.landing:before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 600px 400px at 85% 12%, #b9784212, transparent), radial-gradient(ellipse 500px 500px at 0% 40%, #738da20a, transparent); }
.landing-nav { position: sticky; top: 0; z-index: 30; max-width: none; padding: 20px max(28px, calc((100vw - 1280px)/2)); background: #06080cb8; backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff0b; }
.landing-links { color: var(--follow-muted); gap: 28px; }
.landing-links a { transition: color 250ms; } .landing-links a:not(.btn):hover { color: var(--follow-copper-hover); }
.landing-hero { position: relative; max-width: 1360px; margin: auto; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 72px; padding: 112px 40px 100px; min-height: 780px; }
.landing-hero:before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 8% 21%, #a6b4c650 0 1px, transparent 1.4px), radial-gradient(circle at 61% 13%, #a6b4c630 0 1px, transparent 1.4px), radial-gradient(circle at 90% 76%, #a6b4c640 0 1px, transparent 1.4px), radial-gradient(circle at 42% 89%, #a6b4c630 0 1px, transparent 1.4px); }
.landing-hero h1 { font-family: var(--follow-font); color: var(--follow-text); font-size: clamp(46px, 4.8vw, 72px); font-weight: 350; line-height: 1.07; letter-spacing: -3.5px; margin: 28px 0; }
.landing-hero h1 em { font-style: normal; color: var(--follow-copper); }
.landing-hero p, .landing-hero > div > p { color: var(--follow-muted); font-size: 17px; line-height: 1.8; max-width: 510px; }
.landing-hero .trust { font-size: 12px; color: #929dad; }
.landing-preview { transform: none; position: relative; border-color: #4b3a2c; box-shadow: 0 35px 100px #0008, 0 0 80px #c8894d09; }
.preview-top { border-color: var(--line); padding: 18px 22px; color: var(--follow-muted); font-size: 11px; }
.preview-top .brand { font-size: 17px; }
.preview-top .mark { width: 28px; height: 28px; font-size: 21px; border-radius: 8px; }
.preview-body { padding: 24px; }
.preview-hero { padding: 24px; }
.preview-hero strong { color: var(--follow-copper-hover); font-size: 44px; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.preview-steps { gap: 8px; }
.preview-step { background: #171c24; color: var(--follow-muted); padding: 16px 10px; border: 1px solid var(--line); }
.preview-step strong { color: var(--follow-text); font-size: 19px; }
.preview-foot { color: var(--follow-muted); }
.orbit-chart { width: 100%; height: 65px; display: block; margin-top: 20px; color: var(--follow-copper); }
.orbit-chart path { vector-effect: non-scaling-stroke; }
.preview-caption { font-size: 11px; color: var(--follow-muted); text-align: center; margin: 16px 0 0; }
.landing-hero .preview-caption { font-size: 11px; }
.landing-section { max-width: 1280px; padding: 100px 40px; scroll-margin-top: 90px; }
.landing-section h2 { font-family: var(--follow-font); font-size: clamp(32px, 3.5vw, 48px); font-weight: 350; letter-spacing: -1.7px; line-height: 1.15; }
.landing-section > p, .feature p, .faq p { color: var(--follow-muted); font-size: 15px; line-height: 1.85; }
.landing-band { background: #090c12; border-block: 1px solid #ffffff08; }
.feature { padding: 30px; }
.feature .icon { color: var(--follow-copper); width: 24px; height: 24px; }
.feature h3 { font-size: 18px; font-weight: 500; }
.orbit-process { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); text-align: left; margin: 60px 0 0; }
.orbit-process li { position: relative; padding: 30px 20px 0 0; border-top: 1px solid #5a4331; }
.orbit-process li:before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--follow-copper); box-shadow: 0 0 14px #d9946635; }
.orbit-process span { color: var(--follow-copper); font-size: 11px; letter-spacing: 2px; }
.orbit-process h3 { font-size: 16px; font-weight: 500; line-height: 1.5; }
.orbit-process p { color: var(--follow-muted); font-size: 13px; line-height: 1.8; }
.orbit-results { text-align: left; }
.orbit-results .metrics { margin-top: 40px; }
.orbit-results .metric { padding: 28px 22px; }
.orbit-results .metric strong { font-size: 34px; }
.faq { max-width: 850px; }
.faq details { border-color: var(--line); padding: 25px 0; }
.faq summary { font-size: 16px; line-height: 1.6; }
.faq summary::marker { color: var(--follow-copper); }
.final-cta { padding: 72px 35px; }
.final-cta p { color: var(--follow-muted); font-size: 16px; }
.final-cta .btn { background: var(--follow-copper); color: #1c120d; }
.landing-footer { border-top: 1px solid var(--line); max-width: 1200px; color: var(--follow-muted); font-size: 12px; gap: 24px; }
/* Cursor light is reserved for marketing; DOM changes from existing routing suffice. */
body:not(:has(.landing)) .follow-cursor-glow { display: none; }
.follow-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .follow-reveal.is-waiting { opacity: 0; transform: translateY(18px); }
  .follow-reveal { transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.65,.3,1); }
}
@media (max-width: 1100px) {
  .landing-hero { gap: 32px; padding-block: 80px; min-height: 680px; }
  .landing-hero h1 { font-size: 52px; letter-spacing: -2.5px; }
  .orbit-process { grid-template-columns: repeat(3, 1fr); row-gap: 35px; }
  .orbit-results .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .landing-nav { padding: 16px 20px; backdrop-filter: none; background: #080b10f5; }
  .landing-nav .brand { font-size: 19px; }
  .landing-nav .btn { font-size: 11px; padding: 9px 11px; }
  .landing-hero { grid-template-columns: 1fr; padding: 64px 23px; min-height: auto; gap: 48px; }
  .landing-hero h1 { font-size: clamp(42px, 10vw, 58px); letter-spacing: -2px; }
  .landing-hero p { font-size: 15px; }
  .landing-preview { max-width: none; width: 100%; }
  .preview-body { padding: 16px; } .preview-top { padding: 14px; }
  .preview-hero strong { font-size: 37px; }
  .preview-step strong { font-size: 16px; }
  .landing-section { padding: 64px 23px; }
  .orbit-process { grid-template-columns: 1fr; margin-left: 4px; gap: 0; }
  .orbit-process li { border-top: 0; border-left: 1px solid #5a4331; padding: 0 0 28px 25px; }
  .orbit-process li:before { top: 4px; left: -4px; }
  .orbit-process li:last-child { border-left-color: transparent; }
  .orbit-process h3 { margin-block: 10px; }
  .orbit-results .metric { padding: 18px; } .orbit-results .metric strong { font-size: 25px; }
  .feature-grid { gap: 16px; }
  .final-cta { padding: 40px 20px; }
  .landing-footer { flex-direction: column; align-items: flex-start; }
  .auth-story { border-right: none; border-bottom: 1px solid var(--line); }
  .content { padding: 24px 17px 48px; }
  .menu-toggle { background: transparent !important; color: var(--follow-text) !important; box-shadow: none !important; }
  .money-hero h2 { font-size: 38px; }
  .page-heading h1 { font-size: 26px; }
  .metric .label { font-size: 11px; } .metric small { font-size: 11px; }
  .sidebar { box-shadow: 20px 0 50px #0008; }
}
@media (prefers-reduced-motion: reduce) { .follow-reveal.is-waiting { opacity: 1; transform: none; } }
@media (max-width: 380px) {
  .landing-nav { padding-inline: 14px; }
  .landing-nav .brand { font-size: 16px; gap: 6px; }
  .landing-nav .mark { width: 29px; height: 29px; font-size: 24px; }
  .landing-nav .btn .icon { display: none; }
  .topbar { padding-inline: 12px; }
  .topbar strong { font-size: 11px; }
  .topbar .workspace-tag { padding: 6px; font-size: 9px; }
  .preview-top .brand { font-size: 14px; }
}