/* Home page additions on top of the motion landing: pricing section and cookie banner. */

/* Pricing */
.n-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; align-items: stretch; }
.n-pricing-card { position: relative; display: flex; flex-direction: column; gap: .9em; padding: 2em 1.8em 1.8em; border-radius: 2em; background: #f8f7fb; color: #2b213d; }
.n-pricing-card.is-highlight { background: #2b203c; color: white; box-shadow: 0 1.6em 3.6em #2b203c33; }
.n-pricing-badge { position: absolute; top: 1.5em; right: 1.5em; padding: .45em .8em; border-radius: 99em; background: #6c5ce7; color: white; font-size: .62em; font-weight: 650; letter-spacing: .08em; }
.n-pricing-name { margin: 0; font-family: var(--_typography---h1--font), Geist, sans-serif; font-size: 1.6em; line-height: 1; text-transform: uppercase; }
.n-pricing-price { display: flex; align-items: baseline; gap: .3em; margin: 0; }
.n-pricing-price strong { font-family: var(--_typography---h1--font), Geist, sans-serif; font-size: 3em; line-height: 1; color: #6c5ce7; }
.n-pricing-card.is-highlight .n-pricing-price strong { color: #c9b8ff; }
.n-pricing-price span { font-size: .85em; color: #8c7d9e; }
.n-pricing-card.is-highlight .n-pricing-price span { color: #c4b2dc; }
.n-pricing-tagline { margin: 0; font-size: .85em; line-height: 1.5; color: #7d6e8a; }
.n-pricing-card.is-highlight .n-pricing-tagline { color: #c9bdd8; }
.n-pricing-features { list-style: none; margin: .3em 0 0; padding: 0; display: flex; flex-direction: column; gap: .7em; }
.n-pricing-features li { display: flex; align-items: flex-start; gap: .6em; font-size: .82em; line-height: 1.4; }
.n-pricing-features .n-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; color: #6c5ce7; stroke-width: 2.2; }
.n-pricing-card.is-highlight .n-pricing-features .n-icon { color: #b7a7ff; }
.n-pricing-features li.is-off { opacity: .45; }
.n-pricing-more summary { cursor: pointer; list-style: none; margin-top: .4em; font-size: .78em; font-weight: 600; color: #6c5ce7; }
.n-pricing-more summary::-webkit-details-marker { display: none; }
.n-pricing-card.is-highlight .n-pricing-more summary { color: #c9b8ff; }
.n-pricing-more .is-open, .n-pricing-more[open] .is-closed { display: none; }
.n-pricing-more[open] .is-open { display: inline; }
.n-pricing-more .n-pricing-features { margin-top: .8em; }
.n-pricing-card > .n-btn { margin-top: auto; justify-content: center; }
.n-pricing-note { display: flex; align-items: center; justify-content: center; gap: .5em; margin: 1.6em 0 0; font-size: .75em; color: #8c7d9e; }
.n-pricing-note .n-icon { width: 1.1em; height: 1.1em; color: #6c5ce7; }

/* Cookie banner */
.n-consent { position: fixed; z-index: 120; left: 50%; bottom: 1.2em; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2em; width: min(56em, calc(100% - 2em)); padding: 1.1em 1.2em 1.1em 1.4em; border: 1px solid #ece6f5; border-radius: 1.4em; background: #ffffffF5; color: #2b213d; box-shadow: 0 1em 3em #1b142b2e; backdrop-filter: blur(14px); font-size: 16px; }
.n-consent p { margin: 0; font-size: .82em; line-height: 1.45; color: #6b5f7a; }
.n-consent .n-consent-title { margin-bottom: .2em; font-size: .9em; font-weight: 650; color: #2b213d; }
.n-consent a { display: inline-block; margin-top: .35em; font-size: .72em; color: #8c7d9e; text-decoration: underline; }
.n-consent-actions { display: flex; gap: .5em; flex: 0 0 auto; margin-left: auto; }
.n-consent-actions button { min-height: 44px; padding: 0 1.2em; border: 1px solid #ddd5ea; border-radius: 99em; background: white; color: #2b213d; font: inherit; font-size: .82em; font-weight: 600; cursor: pointer; }
.n-consent-actions button.is-primary { border-color: #6c5ce7; background: #6c5ce7; color: white; }
.n-consent-actions button:focus-visible { outline: 3px solid #b7a7ff; outline-offset: 2px; }

/* App download banner (Android, and iOS outside Safari where Apple's native banner is absent) */
.n-app-banner { position: relative; z-index: 110; display: flex; align-items: center; gap: .7em; padding: .7em .9em .7em .45em; border-bottom: 1px solid #e8e2f1; background: #f9f8fc; color: #1b142b; font-size: 16px; }
.n-app-banner img { flex: 0 0 auto; width: 3.25em; height: 3.25em; border-radius: .85em; box-shadow: 0 1px 3px #1b142b26; }
.n-app-banner-close { display: grid; place-items: center; flex: 0 0 auto; width: 2em; height: 2em; padding: 0; border: 0; background: transparent; color: #8c7d9e; cursor: pointer; }
.n-app-banner-close svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.n-app-banner-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.n-app-banner-text b { font-size: .9em; font-weight: 650; }
.n-app-banner-text span { overflow: hidden; font-size: .75em; color: #6b5f7a; white-space: nowrap; text-overflow: ellipsis; }
.n-app-banner-text small { font-size: .68em; color: #8c7d9e; }
.n-app-banner-cta { flex: 0 0 auto; margin-left: auto; padding: .55em 1.15em; border-radius: 99em; background: #6c5ce7; color: white; font-size: .82em; font-weight: 650; }
.n-app-banner-close:focus-visible, .n-app-banner-cta:focus-visible { outline: 3px solid #b7a7ff; outline-offset: 2px; }
/* The fixed header follows the banner's bottom edge until it scrolls away. */
body.has-app-banner .header { top: var(--app-banner-offset, 0px); }
@media (max-width: 767px) {
  body.has-app-banner .header { top: calc(var(--app-banner-offset, 0px) + max(.6em, env(safe-area-inset-top))); }
}

@media (max-width: 991px) {
  .n-pricing-grid { gap: .8em; }
  .n-pricing-card { padding: 1.7em 1.4em 1.5em; }
  .n-pricing-price strong { font-size: 2.5em; }
}
@media (max-width: 767px) {
  .n-pricing-grid { grid-template-columns: 1fr; max-width: 28em; margin-inline: auto; }
  .n-pricing-card.is-highlight { order: -1; }
  .n-consent { flex-direction: column; align-items: stretch; gap: .9em; bottom: max(.8em, env(safe-area-inset-bottom)); }
  .n-consent-actions { margin-left: 0; }
  .n-consent-actions button { flex: 1; }
}