/* Marketing uses the existing native Arcadia/cobalt aesthetic; the embedded UI is the actual app. */
.feature-page { --feature-line: #3e3e4c; }
.feature-page .site-nav { background: #171721; border-bottom: 1px solid #343440; }
.feature-page .site-nav nav a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: #a8b2ff; }
.feature-page .shell { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.feature-page h1,.feature-page h2,.feature-page h3 { font-family: var(--font-arcadiadisplay); font-weight: 480; text-wrap: balance; }
.feature-page h1 { font-size: clamp(44px,5.8vw,82px); line-height: 1.04; letter-spacing: -.035em; max-width: 1000px; margin: 18px 0 28px; }
.feature-page h2 { font-size: clamp(28px,3vw,42px); line-height: 1.16; letter-spacing: -.02em; margin: 0 0 22px; }
.feature-page h3 { font-size: 23px; line-height: 1.25; margin: 0 0 16px; }
.feature-page p { color: var(--color-ash-text); font-size: 18px; line-height: 1.6; max-width: 64ch; margin: 0 0 24px; text-wrap: pretty; }
.feature-hero { padding-block: 152px 90px; }
.feature-hero > p,.feature-intro > p { font-size: 21px; max-width: 660px; margin-bottom: 32px; }
.feature-name { display: block; color: #c3c3cc; font-size: 15px; }
.back-link { display: inline-block; margin-bottom: 52px; color: #c3c3cc; text-decoration: underline; text-underline-offset: 5px; font-size: 14px; }
.feature-intro { max-width: 950px; }
.availability { display: block; margin-top: 16px; color: #c3c3cc; font-size: 13px; }
.feature-explanation { padding-block: 30px 64px; }
.feature-explanation h2 { max-width: 790px; }
.feature-explanation p { max-width: 740px; }
.feature-process { padding-block: 8px 96px; }
.feature-process ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.feature-process li { border-top: 2px solid #6f7ff1; padding-top: 26px; }
.feature-process p { font-size: 17px; margin: 0; }
.feature-details { padding-block: 20px 90px; }
.feature-details h2 { margin-bottom: 40px; }
.feature-details dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.feature-details dt { font-size: 20px; margin-bottom: 14px; font-weight: 480; }
.feature-details dd { margin: 0; color: #c3c3cc; font-size: 17px; line-height: 1.6; }
.feature-details .lifecycle { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px 60px; }
.feature-details .lifecycle dt { display: flex; align-items: center; gap: 10px; }
.feature-details .lifecycle dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8997ff; }
.feature-control { border-block: 1px solid var(--feature-line); display: flex; gap: 22px; padding-block: 32px; }
.feature-control > .icon { width: 24px; height: 24px; margin-top: 3px; }
.feature-control h2 { font-size: 23px; margin-bottom: 12px; }
.feature-control p { font-size: 17px; margin: 0; max-width: 860px; }
.related { padding-block: 84px 110px; }
.related h2 { font-size: 26px; }
.related > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
.feature-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--feature-line); padding: 18px 0; font-size: 19px; }
.feature-link:hover { color: #b8c0ff; }
.feature-link .icon { transition: transform .2s; }
.feature-link:hover .icon { transform: translate(2px,-2px); }
.feature-footer { border-top: 1px solid var(--feature-line); width: min(1320px,calc(100% - 80px)); margin: 0 auto; padding: 36px 0; display: flex; justify-content: space-between; gap: 28px; font-size: 14px; }
.feature-footer nav { display: flex; gap: 26px; }
.footer-brand { letter-spacing: .13em; }
.feature-footer > span { color: #c3c3cc; }
.hub-hero { padding-bottom: 64px; }
.hub-hero h1 { max-width: 850px; }
.feature-product { margin-block: 0 100px; }
.feature-product iframe { display: block; width: 100%; height: 750px; border: 1px solid var(--feature-line); border-radius: 12px; background: #171615; }
.feature-product figcaption { color: #c3c3cc; font-size: 13px; margin-top: 16px; }
.feature-screenshot { margin-block: 0 72px; }
.feature-screenshot a { display: block; }
.feature-screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--feature-line); border-radius: 12px; }
.feature-screenshot figcaption { color: #c3c3cc; font-size: 13px; margin-top: 16px; }
.feature-directory { padding-bottom: 110px; }
.feature-group { padding-block: 44px 56px; border-top: 1px solid var(--feature-line); }
.feature-group > h2 { font-size: 31px; margin-bottom: 36px; }
.feature-entries { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 80px; }
.feature-entries a { display: block; }
.feature-entries h3 { display: flex; gap: 20px; align-items: center; justify-content: space-between; transition: color .2s; }
.feature-entries a:hover h3 { color: #b8c0ff; }
.feature-entries p { font-size: 17px; margin: 0; }
.resource-list { padding-bottom: 100px; }
.resource-list article { max-width: 850px; padding-block: 38px; border-top: 1px solid var(--feature-line); }
.resource-list h2 { font-size: 32px; }
.resource-list .feature-link { display: inline-flex; border: 0; padding: 0; gap: 18px; color: #c2c9ff; }
.tutorial-steps { counter-reset: tutorial; padding-bottom: 70px; }
.tutorial-steps article { position: relative; padding: 34px 0 34px 70px; border-top: 1px solid var(--feature-line); }
.tutorial-steps article::before { counter-increment: tutorial; content: counter(tutorial); position: absolute; left: 0; top: 34px; font-size: 28px; color: #a8b2ff; }
.tutorial-steps h2 { font-size: 30px; }
.tutorial-steps .feature-link { max-width: 500px; }
.tutorial-bison { display: block; margin-top: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .feature-intro,.hub-hero h1 { animation: feature-enter .55s both; }
  @keyframes feature-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1024px) {
  .feature-page .site-nav { gap: 20px; }
  .feature-page .site-nav nav { gap: 22px; }
  .feature-page .shell { width: calc(100% - 48px); }
  .feature-process ol,.feature-details dl { gap: 25px; }
  .feature-footer { width: calc(100% - 48px); }
}
@media (max-width: 760px) {
  .feature-page .site-nav { gap: 0 16px; }
  .feature-page .site-nav nav { gap: 0; }
  .feature-page .site-nav .nav-actions { display: flex; }
  .feature-page .site-nav .button { min-height: 44px; padding: 8px 13px; font-size: 12px; gap: 6px; }
  .feature-page .site-nav .button .icon { width: 14px; height: 14px; }
  .feature-page .shell { width: calc(100% - 40px); }
  .feature-hero { padding-block: 150px 58px; }
  .feature-page h1 { font-size: clamp(39px,8vw,57px); margin-block: 18px 24px; }
  .feature-hero > p,.feature-intro > p { font-size: 18px; }
  .back-link { margin-bottom: 32px; }
  .feature-process ol,.feature-details dl,.feature-details .lifecycle,.related > div { grid-template-columns: 1fr; gap: 28px; }
  .feature-explanation { padding-block: 14px 44px; }
  .feature-process,.feature-details { padding-bottom: 54px; }
  .feature-process li { padding-top: 21px; }
  .feature-details h2 { margin-bottom: 30px; }
  .feature-control { gap: 16px; padding-block: 26px; }
  .feature-control > .icon { flex-shrink: 0; }
  .related { padding-block: 54px 70px; }
  .related > div { gap: 0; }
  .feature-footer { width: calc(100% - 40px); flex-wrap: wrap; gap: 24px; }
  .feature-footer nav { width: 100%; order: 3; justify-content: space-between; gap: 12px; }
  .feature-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .feature-product iframe { height: 660px; }
  .feature-product { margin-bottom: 55px; }
  .feature-entries { grid-template-columns: 1fr; gap: 32px; }
  .feature-group { padding-block: 32px 42px; }
  .feature-group > h2 { font-size: 28px; }
  .feature-directory { padding-bottom: 40px; }
  .resource-list { padding-bottom: 50px; }
  .resource-list h2,.tutorial-steps h2 { font-size: 27px; }
  .tutorial-steps article { padding-left: 42px; }
  .tutorial-steps article::before { font-size: 24px; }
}