/* Standalone Features Hub: restrained navy, lilac accents, and open editorial pacing. */
.features-page {
  --feature-bg: #10172c;
  --feature-surface: #151d34;
  --feature-surface-raised: #1b233b;
  --feature-ink: #f5f0fa;
  --feature-muted: #b9bed1;
  --feature-soft: #929ab5;
  --feature-lilac: #d9c4f1;
  --feature-line: #d6c7e52c;
  background: var(--feature-bg);
  color: var(--feature-ink);
  overflow-x: clip;
}

.features-main { position: relative; isolation: isolate; }
.feature-shell { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.features-skip {
  position: absolute;
  z-index: 10;
  top: -80px;
  left: 20px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #eee4fa;
  color: #211a31;
}
.features-skip:focus { top: 18px; }
.features-noscript { padding: 30px; text-align: center; color: var(--feature-muted); }

.feature-hero {
  position: relative;
  padding: 184px 0 83px;
  border-bottom: 1px solid var(--feature-line);
  overflow: hidden;
}
.feature-hero::before {
  position: absolute;
  z-index: -1;
  inset: -18% -5% -4%;
  content: '';
  background:
    radial-gradient(ellipse at 76% 35%, #9c7cc61d 0, transparent 36%),
    radial-gradient(ellipse at 18% 92%, #6a78bd14 0, transparent 39%);
  pointer-events: none;
}
.feature-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: end; gap: clamp(48px, 9vw, 130px); }
.feature-eyebrow,.feature-kicker {
  margin: 0;
  color: #b7a5d5;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .16em;
  line-height: 1.7;
  text-transform: uppercase;
}
.feature-hero h1 {
  max-width: 720px;
  margin: 21px 0 0;
  font: 400 clamp(54px, 6.2vw, 86px)/1.04 Georgia, 'Times New Roman', serif;
  letter-spacing: -.055em;
}
.feature-hero h1 em,.feature-section h2 em,.faq-intro h2 em { color: var(--feature-lilac); font-weight: 400; }
.feature-hero-copy { max-width: 720px; }
.feature-hero-lede { max-width: 600px; margin: 25px 0 0; color: #c4c6d7; font-size: 18px; line-height: 1.8; }
.feature-hero-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 31px; padding: 7px 0; color: #f0e8fa; font-size: 14px; }
.feature-hero-link span { color: var(--feature-lilac); font-size: 19px; transition: transform .18s ease; }
.feature-hero-link:hover span { transform: translateY(3px); }
.feature-thread { padding: 25px 0 4px 27px; border-left: 1px solid #d9c4f14a; }
.feature-thread .feature-eyebrow { color: #a9a1c5; letter-spacing: .12em; }
.feature-thread ol { display: grid; gap: 21px; margin: 22px 0 0; padding: 0; list-style: none; }
.feature-thread li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; }
.feature-thread li>span { padding-top: 2px; color: #c5a9e3; font: 18px/1.3 Georgia,serif; }
.feature-thread strong { color: #f1eaf8; font-size: 14px; font-weight: 600; }
.feature-thread p { margin: 3px 0 0; color: #aeb5c8; font-size: 12px; line-height: 1.6; }

.feature-index {
  position: sticky;
  z-index: 3;
  top: 0;
  border-bottom: 1px solid var(--feature-line);
  background: #10172ceF;
  backdrop-filter: blur(14px);
}
.feature-index .feature-shell { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.feature-index .feature-shell::-webkit-scrollbar { display: none; }
.feature-index a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; color: #c1c3d4; font-size: 11px; white-space: nowrap; transition: color .18s ease; }
.feature-index a:hover { color: #fff; }
.feature-index a span { color: #a58bc7; font: 13px/1 Georgia,serif; }

.feature-section { position: relative; padding: 112px 0; border-bottom: 1px solid var(--feature-line); scroll-margin-top: 68px; }
.feature-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(48px, 8vw, 110px); }
.feature-grid-reverse .feature-copy { grid-column: 2; grid-row: 1; }
.feature-grid-reverse .feature-art { grid-column: 1; grid-row: 1; }
.feature-kicker { margin-bottom: 19px; color: #b5a2d4; font-size: 10px; letter-spacing: .14em; }
.feature-kicker span { padding-inline: 5px; color: #7e7897; }
.feature-copy h2,.conversation-intro h2,.faq-intro h2 {
  margin: 0;
  font: 400 clamp(43px, 4.6vw, 62px)/1.08 Georgia, 'Times New Roman', serif;
  letter-spacing: -.047em;
}
.feature-copy p:not(.feature-kicker),.conversation-intro>p:not(.feature-kicker),.faq-intro>p:not(.feature-kicker) {
  max-width: 510px;
  margin: 19px 0 0;
  color: var(--feature-muted);
  font-size: 15px;
  line-height: 1.85;
}
.feature-copy p.feature-lead { margin-top: 24px; color: #eee9f5; font-size: 20px; line-height: 1.55; letter-spacing: -.02em; }
.feature-art { min-width: 0; margin: 0; }
.feature-art img { width: 100%; aspect-ratio: 3 / 2; border: 1px solid #e3d5f019; border-radius: 18px; background: #171d33; object-fit: cover; }
.feature-art figcaption { margin-top: 12px; color: #8f98b3; font-size: 11px; line-height: 1.6; }
.feature-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 38px; margin: 51px 0 0; padding: 27px 0 0; border-top: 1px solid var(--feature-line); list-style: none; }
.feature-flow li>span,.feature-principles article>span { color: #c3a8e3; font: 19px/1.3 Georgia,serif; }
.feature-flow h3,.feature-principles h3 { margin: 11px 0 7px; color: #f1ebf8; font-size: 16px; font-weight: 550; letter-spacing: -.02em; }
.feature-flow p,.feature-principles p { max-width: 260px; margin: 0; color: #aeb5c8; font-size: 13px; line-height: 1.75; }
.feature-availability { margin: 30px 0 0; color: #9f99b5; font-size: 11px; text-align: center; letter-spacing: .025em; }

.feature-liberate { background: #131a30; }
.feature-sleepless { background: #151a30; }
.feature-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 38px; margin-top: 55px; padding-top: 28px; border-top: 1px solid var(--feature-line); }
.feature-principles article { min-width: 0; }

.feature-learn { background: #19213a; }
.learn-grid { grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr); }
.learn-grid .feature-copy p:not(.feature-kicker) { max-width: 500px; }
.feature-text-link { display: inline-flex; align-items: center; gap: 11px; margin-top: 27px; color: #e3d3f5; font-size: 13px; }
.feature-text-link span { color: #c6a8e7; transition: transform .18s ease; }
.feature-text-link:hover span { transform: translate(2px,-2px); }
.depth-demonstration {
  position: relative;
  max-width: 550px;
  justify-self: end;
  width: 100%;
  padding: clamp(30px,4.5vw,52px);
  border: 1px solid #f4e9ff76;
  border-radius: 140px 140px 7px 7px;
  background: #e7e0ee;
  color: #302b43;
  box-shadow: 13px 16px 0 #29334c;
}
.example-label { margin: 7px 0 24px; color: #796b8f; font-size: 9px; font-weight: 700; letter-spacing: .17em; text-align: center; text-transform: uppercase; }
.depth-question { margin: 0; color: #322b45; font: 400 clamp(25px,3vw,34px)/1.35 Georgia,serif; letter-spacing: -.035em; text-align: center; }
.depth-options { display: flex; gap: 5px; margin: 27px 0 24px; padding: 5px; border: 1px solid #bdb2ca; border-radius: 100px; }
.depth-options button { flex: 1; min-height: 42px; padding: 8px 10px; border-radius: 100px; color: #645a73; font-size: 12px; transition: background .16s ease,color .16s ease; }
.depth-options button[aria-pressed='true'] { background: #38304f; color: #fff; box-shadow: 0 3px 9px #2a1c4522; }
.depth-options button:focus-visible { outline-color: #403054; outline-offset: 3px; }
.depth-reading { min-height: 134px; text-align: left; }
.depth-reading h3 { margin: 0 0 9px; color: #332d45; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.depth-reading p { margin: 0; color: #5d536c; font-size: 13px; line-height: 1.8; }
.example-caption { max-width: 290px; margin: 14px auto 0; color: #81728e; font-size: 10px; line-height: 1.65; text-align: center; }

.feature-conversation { padding-block: 121px; }
.conversation-intro { max-width: 780px; margin-inline: auto; text-align: center; }
.conversation-intro .feature-kicker { margin-bottom: 22px; }
.conversation-intro h2 { font-size: clamp(45px,5vw,67px); line-height: 1.12; }
.conversation-intro>p:not(.feature-kicker) { margin-inline: auto; }
.workspace-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(45px,9vw,120px); margin-top: 70px; }
.workspace-paths article { padding-top: 22px; border-top: 1px solid #ded0ed4a; }
.workspace-name { color: #c2a9e2; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.workspace-paths h3 { margin: 17px 0 12px; color: #f2eaf7; font: 400 clamp(29px,3vw,38px)/1.2 Georgia,serif; letter-spacing: -.035em; }
.workspace-paths p { max-width: 430px; margin: 0; color: var(--feature-muted); font-size: 14px; line-height: 1.85; }
.workspace-paths small { display: block; margin-top: 18px; color: #8f98b3; font-size: 11px; line-height: 1.6; }

.feature-faq { padding: 108px 0 123px; background: #141a2e; scroll-margin-top: 68px; }
.faq-grid { display: grid; grid-template-columns: minmax(250px,.7fr) minmax(0,1.3fr); gap: clamp(50px,10vw,150px); }
.faq-intro { position: sticky; align-self: start; top: 94px; }
.faq-intro h2 { margin-top: 20px; font-size: clamp(39px,4.2vw,55px); }
.faq-intro>p:not(.feature-kicker) { margin-top: 18px; font-size: 14px; }
.faq-list details { border-top: 1px solid var(--feature-line); }
.faq-list details:last-child { border-bottom: 1px solid var(--feature-line); }
.faq-list summary { position: relative; padding: 20px 30px 20px 0; color: #eee8f4; cursor: pointer; font-size: 14px; font-weight: 550; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 17px; right: 1px; content: '+'; color: #c7a9e8; font: 22px/1 Georgia,serif; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { max-width: 650px; margin: -2px 0 21px; padding-right: 35px; color: var(--feature-muted); font-size: 13px; line-height: 1.8; }

.features-footer { border-top: 1px solid var(--feature-line); padding: 28px 0 31px; background: #10172c; }
.features-footer .feature-shell { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.features-footer-brand { display: inline-flex; align-items: center; gap: 10px; color: #f5effb; font: 400 23px/1 Georgia,serif; white-space: nowrap; }
.features-footer-brand img { width: 34px; height: 34px; }
.features-footer p { color: #969eb8; font-size: 11px; }
.features-footer nav { display: flex; gap: 23px; }
.features-footer nav a { color: #c5bed4; font-size: 11px; white-space: nowrap; }
.features-footer nav a span { color: #bba1db; }

@media (max-width: 900px) {
  .feature-shell { width: min(100% - 64px, 760px); }
  .feature-hero { padding-top: 167px; }
  .feature-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(230px,.8fr); gap: 45px; }
  .feature-thread { padding-left: 20px; }
  .feature-grid,.learn-grid { gap: 42px; }
  .feature-copy h2,.conversation-intro h2 { font-size: clamp(41px,5.3vw,53px); }
  .feature-index .feature-shell { width: calc(100% - 48px); justify-content: flex-start; gap: 27px; }
  .feature-section { padding-block: 86px; }
  .feature-faq { padding-block: 86px; }
}

@media (max-width: 650px) {
  .feature-shell { width: calc(100% - 42px); }
  .feature-hero { padding: 159px 0 57px; }
  .feature-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .feature-hero h1 { max-width: 510px; font-size: clamp(47px,12vw,68px); }
  .feature-hero-lede { margin-top: 20px; font-size: 16px; line-height: 1.75; }
  .feature-thread { padding: 21px 0 0; border-top: 1px solid #d9c4f14a; border-left: 0; }
  .feature-thread ol { grid-template-columns: 1fr; gap: 14px; }
  .feature-index { position: sticky; }
  .feature-index .feature-shell { width: calc(100% - 34px); min-height: 58px; gap: 24px; }
  .feature-index a { font-size: 10px; }
  .feature-section { padding-block: 67px; scroll-margin-top: 62px; }
  .feature-grid,.feature-grid-reverse,.learn-grid { display: flex; flex-direction: column; align-items: stretch; gap: 31px; }
  .feature-grid-reverse .feature-copy,.feature-grid-reverse .feature-art { order: initial; }
  .feature-copy h2,.conversation-intro h2,.faq-intro h2 { font-size: clamp(40px,10.5vw,54px); }
  .feature-copy p:not(.feature-kicker),.conversation-intro>p:not(.feature-kicker),.faq-intro>p:not(.feature-kicker) { font-size: 14px; }
  .feature-copy p.feature-lead { font-size: 19px; }
  .feature-art img { border-radius: 14px; }
  .feature-flow,.feature-principles { grid-template-columns: 1fr; gap: 24px; margin-top: 37px; }
  .feature-flow { padding-top: 23px; }
  .feature-flow p,.feature-principles p { max-width: none; }
  .feature-availability { margin-top: 24px; }
  .depth-demonstration { max-width: none; justify-self: auto; padding: 34px 25px 29px; border-radius: 105px 105px 7px 7px; }
  .depth-reading { min-height: 116px; }
  .conversation-intro { text-align: left; }
  .workspace-paths { grid-template-columns: 1fr; gap: 36px; margin-top: 47px; }
  .feature-conversation { padding-block: 78px; }
  .faq-grid { grid-template-columns: 1fr; gap: 37px; }
  .faq-intro { position: static; }
  .feature-faq { padding-block: 73px 83px; }
  .faq-list summary { font-size: 13px; }
  .faq-list details p { font-size: 12px; }
  .features-footer { padding-block: 24px; }
  .features-footer .feature-shell { flex-wrap: wrap; justify-content: space-between; gap: 18px 24px; }
  .features-footer p { order: 3; width: 100%; }
  .features-footer nav { gap: 16px; }
}

@media (max-width: 380px) {
  .feature-shell { width: calc(100% - 34px); }
  .feature-hero h1 { font-size: 45px; }
  .feature-index .feature-shell { width: calc(100% - 24px); }
  .depth-demonstration { padding-inline: 19px; }
  .depth-options button { padding-inline: 6px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-hero-link span,.feature-text-link span,.depth-options button { transition: none; }
}