/*
 * Lumen Doc Hub homepage refresh.
 * This layer intentionally builds on the shared landing-page foundation while
 * bringing the homepage closer to the calm, card-led desktop workspace.
 */

:root {
  --hub-indigo: #635bff;
  --hub-indigo-dark: #4941d5;
  --hub-cyan: #20b8d8;
  --hub-slate: #111827;
  --hub-soft: #f5f6fb;
  --hub-panel: rgba(255, 255, 255, .88);
  --hub-line: #e3e7f0;
  --hub-shadow: 0 24px 70px -36px rgba(37, 43, 84, .38);
  --grad: linear-gradient(125deg, #635bff 0%, #6968f7 50%, #20b8d8 100%);
  --grad-fun: var(--grad);
  --grad-warm: linear-gradient(120deg, #a78bfa, #5eead4);
}

body {
  color: var(--hub-slate);
  background:
    radial-gradient(900px 520px at 82% 4%, rgba(99, 91, 255, .08), transparent 62%),
    #fff;
}

.wrap { max-width: 1200px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(99, 91, 255, .3);
  outline-offset: 3px;
}

header {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(222, 227, 239, .92);
}

nav { height: 70px; }
.logo { letter-spacing: -.015em; }
.logo .mark { border-radius: 10px; box-shadow: 0 10px 26px -12px rgba(99, 91, 255, .75); }
.links { gap: 23px; }
.links a.nl { color: #4b5568; }

.btn {
  border-radius: 11px;
  font-weight: 700;
  box-shadow: none;
}

.btn.fun,
.btn.primary {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 13px 30px -13px rgba(99, 91, 255, .72);
}

.btn.fun:hover,
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 17px 36px -14px rgba(99, 91, 255, .8);
}

.btn.ghost { border-color: #dfe3ed; }

.hero {
  padding: 78px 0 62px;
  background: transparent;
}

.hero::before {
  background:
    radial-gradient(650px 430px at 78% 0%, rgba(99, 91, 255, .15), transparent 65%),
    radial-gradient(520px 340px at 6% 24%, rgba(32, 184, 216, .1), transparent 62%);
}

.hero .blob { opacity: .24; filter: blur(2px); }

.hpill {
  width: fit-content;
  padding: 7px 12px;
  color: #4d45d4;
  background: rgba(99, 91, 255, .075);
  border: 1px solid rgba(99, 91, 255, .16);
  box-shadow: none;
}

.hero h1 {
  max-width: 850px;
  font-size: clamp(43px, 6vw, 72px);
  letter-spacing: -.055em;
  line-height: 1.02;
}

.hero p.lead {
  max-width: 735px;
  color: #465267;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}

.grad-fun { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.micro { gap: 11px 22px; color: #667085; }
.micro .dot { background: #22a06b; box-shadow: 0 0 0 4px rgba(34, 160, 107, .09); }

.shot {
  margin-top: 48px;
  max-width: 1060px;
  border-color: #dfe3ed;
  border-radius: 18px;
  box-shadow: 0 32px 80px -42px rgba(34, 41, 78, .55);
}

.strip {
  padding: 25px 0;
  background: rgba(247, 248, 252, .88);
}

.strip .lbl { margin-bottom: 13px; color: #697386; }
.strip .row { gap: 8px 12px; }
.chip { padding: 7px 11px; font-size: 13.5px; background: #fff; border-color: #e5e8f0; }
.chip .g { background: var(--hub-indigo); }

section.block { padding: 84px 0; }
.head { margin-bottom: 42px; }
.head h2 { letter-spacing: -.04em; }
.head p { max-width: 720px; margin-left: auto; margin-right: auto; color: #526074; }
.eyebrow { color: #5a52dc; letter-spacing: .105em; }

/* Start with an outcome, not a product name. */
.journeys { padding: 92px 0 76px; }
.journey-intro { display: grid; grid-template-columns: minmax(0, .78fr) minmax(420px, 1.22fr); gap: 68px; align-items: end; margin-bottom: 34px; }
.journey-intro h2 { margin-top: 12px; font-size: clamp(31px, 4vw, 48px); letter-spacing: -.045em; }
.journey-intro p { margin: 0; color: #526074; font-size: 17px; }
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.journey-card {
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--hub-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 15px 40px -36px rgba(28, 36, 72, .55);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.journey-card:hover { transform: translateY(-3px); border-color: #cfd4e5; box-shadow: var(--hub-shadow); }
.journey-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #554ed7; background: #eeedff; font-size: 13px; font-weight: 800; }
.journey-card h3 { margin-top: 20px; font-size: 19px; letter-spacing: -.025em; }
.journey-card p { margin: 10px 0 0; color: #667085; font-size: 14.5px; line-height: 1.6; }
.journey-card a { display: inline-flex; margin-top: 17px; color: #5149d6; font-size: 13.5px; font-weight: 750; }

/* Keep real demonstrations prominent without asking visitors to scroll past 12 at once. */
.magic-wrap { padding: 24px 0 86px; }
.magic { border-radius: 26px; background: linear-gradient(145deg, #11162d, #20204a 58%, #11323b); }
.mhead { max-width: 750px; }
.mhead h2 { letter-spacing: -.045em; }
.reels.two { margin-top: 34px; }
.demo-library { margin-top: 28px; position: relative; z-index: 2; }
.demo-library > summary {
  width: fit-content;
  margin: 0 auto;
  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  color: #eef0ff;
  background: rgba(255, 255, 255, .07);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.demo-library > summary::-webkit-details-marker { display: none; }
.demo-library > summary::after { content: " +"; color: #b9b7ff; }
.demo-library[open] > summary::after { content: " −"; }
.demo-library[open] > summary { margin-bottom: 28px; }
.demo-library .real-suite { margin-top: 0; }

/* Compact desktop-style tool launcher. */
#surfaces { background: #f6f7fb; border-top: 1px solid #e7e9f1; border-bottom: 1px solid #e7e9f1; }
#surfaces .head { max-width: 770px; }
#surfaces .surf-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
#surfaces .surf {
  min-height: 205px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: none;
}
#surfaces .surf:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -34px rgba(36, 42, 73, .6); }
#surfaces .surf .ico { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px; }
#surfaces .surf .ico svg { width: 20px; height: 20px; }
#surfaces .surf-name { font-size: 16px; }
#surfaces .surf-sub { display: none; }
#surfaces .surf p { margin: 8px 0 15px; font-size: 13.5px; line-height: 1.53; }
#surfaces .surf-go { font-size: 12.5px; }
#surfaces .surf:nth-child(1) .ico { background: #fff0f2; } #surfaces .surf:nth-child(1) .ico svg { stroke: #e34c67; }
#surfaces .surf:nth-child(2) .ico { background: #eaf8f1; } #surfaces .surf:nth-child(2) .ico svg { stroke: #16865d; }
#surfaces .surf:nth-child(3) .ico { background: #eef1ff; } #surfaces .surf:nth-child(3) .ico svg { stroke: #5865d8; }
#surfaces .surf:nth-child(4) .ico { background: #fff0f7; } #surfaces .surf:nth-child(4) .ico svg { stroke: #d24787; }
#surfaces .surf:nth-child(5) .ico { background: #fff3e8; } #surfaces .surf:nth-child(5) .ico svg { stroke: #d46a1f; }
#surfaces .surf:nth-child(6) .ico { background: #fff7df; } #surfaces .surf:nth-child(6) .ico svg { stroke: #b77908; }
#surfaces .surf:nth-child(7) .ico { background: #e9f9fd; } #surfaces .surf:nth-child(7) .ico svg { stroke: #1388aa; }
#surfaces .surf:nth-child(8) .ico { background: #f1edff; } #surfaces .surf:nth-child(8) .ico svg { stroke: #7755d9; }
#surfaces .surf:nth-child(9) .ico { background: #f3efff; } #surfaces .surf:nth-child(9) .ico svg { stroke: #784cc4; }
#surfaces .surf:nth-child(10) .ico { background: #ecebff; } #surfaces .surf:nth-child(10) .ico svg { stroke: #5951d5; }

/* The old long-form demos remain in source for compatibility but are replaced
   here by the complete, searchable-by-eye feature directory below. */
#surfaces > .wrap > .subhead,
#surfaces > .wrap > .show { display: none; }

.feature-atlas { margin-top: 40px; }
.feature-atlas-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 2px 16px; }
.feature-atlas-intro h3 { font-size: 23px; letter-spacing: -.035em; }
.feature-atlas-intro p { max-width: 540px; margin: 0; color: #667085; font-size: 14px; }
.feature-groups { display: grid; gap: 10px; }
.feature-group { scroll-margin-top: 88px; border: 1px solid #dfe3ed; border-radius: 15px; background: #fff; overflow: hidden; }
.feature-group > summary { display: flex; align-items: center; gap: 12px; padding: 17px 19px; cursor: pointer; list-style: none; font-weight: 780; }
.feature-group > summary::-webkit-details-marker { display: none; }
.feature-group > summary::before { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #574fd5; background: #f0efff; }
.feature-group[open] > summary::before { content: "−"; }
.feature-group > summary span { color: #667085; font-size: 13px; font-weight: 560; }
.feature-group[open] > summary { border-bottom: 1px solid #e8eaf1; }
.feature-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #e8eaf1; }
.feature-product { padding: 22px; background: #fff; }
.feature-product[id] { scroll-margin-top: 96px; }
.product-head { display: flex; align-items: center; gap: 11px; }
.product-glyph { display: grid; place-items: center; min-width: 38px; width: 38px; height: 38px; border-radius: 11px; color: #554ed5; background: #efefff; font-size: 13px; font-weight: 850; }
.product-head h4 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.product-head small { display: block; margin-top: 2px; color: #7a8497; font-size: 11.5px; }
.feature-product p { margin: 13px 0 0; color: #536075; font-size: 13.5px; line-height: 1.55; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.feature-chips span { padding: 5px 8px; border: 1px solid #e3e6ee; border-radius: 7px; color: #465267; background: #f8f9fc; font-size: 11.5px; font-weight: 650; }
.feature-link { display: inline-flex; margin-top: 15px; color: #5149d6; font-size: 12.5px; font-weight: 750; }

/* A clear desktop → browser → guest portal story. */
.everywhere { padding: 24px 0 88px; }
.everywhere-shell { padding: 38px; border: 1px solid #dfe3ed; border-radius: 23px; background: linear-gradient(145deg, #fbfbfe, #f3f5fb); }
.everywhere-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: end; }
.everywhere-head h2 { margin-top: 10px; font-size: clamp(29px, 3.6vw, 42px); letter-spacing: -.045em; }
.everywhere-head p { margin: 0; color: #526074; font-size: 16px; }
.everywhere-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 29px; }
.place-card { padding: 22px; border: 1px solid #e0e4ed; border-radius: 15px; background: #fff; }
.place-label { display: inline-flex; padding: 5px 8px; border-radius: 7px; color: #554ed5; background: #efefff; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.place-card h3 { margin-top: 15px; font-size: 18px; }
.place-card p { margin: 8px 0 0; color: #667085; font-size: 13.5px; }
.place-card ul { display: grid; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; color: #475467; font-size: 12.5px; }
.place-card li::before { content: "✓"; margin-right: 7px; color: #4f9d78; font-weight: 800; }

#collaborate { padding-top: 76px !important; }
#collaborate .show { gap: 45px; }
#collaborate .show > .info p { color: #526074; }
.collab-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }

.stats { gap: 12px; }
.stat { border-radius: 14px; background: #fafbfe; }

.band { border-radius: 23px; background: linear-gradient(145deg, #11162d, #24204f 62%, #12343e); }
.band::after { opacity: .55; }

.price,
.fmt,
.why .w,
.sec-item .b { border-radius: 15px; }

.final { background: radial-gradient(600px 300px at 50% 0%, rgba(99, 91, 255, .13), transparent 70%), #fff; }
.final h2 { letter-spacing: -.045em; }

@media (max-width: 1060px) {
  #surfaces .surf-grid { grid-template-columns: repeat(3, 1fr); }
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .journey-intro,
  .everywhere-head { grid-template-columns: 1fr; gap: 14px; }
  .journey-intro p,
  .everywhere-head p { max-width: 680px; }
  .everywhere-grid { grid-template-columns: 1fr; }
  .collab-benefits { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .links { gap: 8px; }
  .nav-acct { display: none; }
  nav .btn.primary { padding: 10px 13px; font-size: 13px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(39px, 12vw, 54px); }
  .hero p.lead { font-size: 17px; }
  .shot { margin-top: 38px; border-radius: 14px; }
  .journeys { padding: 68px 0 60px; }
  .journey-grid,
  #surfaces .surf-grid { grid-template-columns: 1fr; }
  .journey-card { min-height: 0; }
  .magic { border-radius: 18px; }
  .reels.two { grid-template-columns: 1fr; }
  .feature-atlas-intro { display: block; }
  .feature-atlas-intro p { margin-top: 8px; }
  .feature-group > summary { align-items: flex-start; }
  .feature-group > summary span { display: block; margin-top: 4px; }
  .everywhere-shell { padding: 25px 18px; border-radius: 18px; }
}

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