/* ============================================================================
   plan-e.css: the Pro pricing card in the app's paywall "E" style.
   Shared by the home page (templates/index.html) and /ai-video-summarizer/.
   Load after scrollcraft.css and the page's own <style> (it overrides .plan).

   Markup:
     .plan.plan--e                 dark Pro card (paywall E page colour + glows)
       .pe-annual                  the yearly plan, gradient stroke like E's selected card
         .pe-pill                  trial pill on the yearly plan's top edge
         .pe-annual__title         "Annual"
         .pe-chip                  "SAVE 40%"
         .pe-price                 per-month price, big
         .pe-note                  <s>12 x monthly</s> <b>yearly price</b> billed annually
       .pe-monthly                 "or $6.99/mo monthly (no trial)"

   Tokens mirror svit/Features/Settings/Views/Paywall/PaywallETokens.swift.
   ========================================================================== */

.plan.plan--e {
  --pe-grad-a: #5871D4;
  --pe-grad-b: #28A4F2;
  --pe-page: #141419;
  --pe-muted: rgba(235, 235, 245, 0.6);
  --pe-faint: rgba(235, 235, 245, 0.42);
  --pe-chip: #85ABDE;
  --pe-chip-ink: #141414;
  /* Dark scope: the card's own text, list and accent read on the E page colour. */
  --sc-ink: #FFFFFF;
  --sc-ink-soft: var(--pe-muted);
  --sc-hairline: rgba(255, 255, 255, 0.10);
  --sc-accent: var(--pe-grad-b);
  --sc-accent-ink: #06111C;
  color: var(--sc-ink);
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(40, 164, 242, 0.28), transparent 70%),
    radial-gradient(45% 35% at 88% 6%, rgba(88, 113, 212, 0.18), transparent 70%),
    var(--pe-page);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -24px rgba(20, 40, 90, 0.55);
}
.plan.plan--e .plan__badge {
  background: linear-gradient(90deg, var(--pe-grad-a), var(--pe-grad-b)); color: #FFFFFF;
}

/* The yearly plan: E's selected card (12 % brand fill, 2px gradient stroke). */
.pe-annual {
  position: relative;
  margin-top: calc(var(--sc-4) + 0.7rem);
  padding: 1.45rem 1.1rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(rgba(40, 164, 242, 0.12), rgba(40, 164, 242, 0.12)) padding-box,
    linear-gradient(var(--pe-page), var(--pe-page)) padding-box,
    linear-gradient(90deg, var(--pe-grad-a), var(--pe-grad-b)) border-box;
}
.pe-pill {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 1rem);
  padding: 0.3rem 0.8rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--pe-grad-a), var(--pe-grad-b)); color: #FFFFFF;
  font-size: var(--sc-t-xs); font-weight: 700; line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 18px -6px rgba(40, 164, 242, 0.6);
}
.pe-annual__title { margin: 0; font-size: var(--sc-t-sm); font-weight: 600; color: #FFFFFF; }
.pe-chip {
  display: inline-block; margin-top: var(--sc-1);
  padding: 0.12rem 0.5rem; border-radius: 999px;
  background: var(--pe-chip); color: var(--pe-chip-ink);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.35;
  text-transform: uppercase; white-space: nowrap;
}
.pe-price {
  margin: var(--sc-2) 0 0;
  font-size: var(--sc-t-2xl); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: #FFFFFF;
}
.pe-price span { font-size: var(--sc-t-sm); font-weight: 500; color: var(--pe-muted); letter-spacing: normal; }
.pe-note { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.4; color: var(--pe-muted); }
.pe-note s { color: var(--pe-faint); font-size: 0.86em; }
.pe-note b { color: #FFFFFF; font-weight: 600; white-space: nowrap; }
.pe-monthly { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--pe-muted); }

/* CTA: the long "Start My 7-Day Free Trial" may wrap rather than overflow on phones. */
.plan.plan--e .btn {
  white-space: normal; text-align: center; line-height: 1.25;
  padding-inline: 1.25rem;
  box-shadow: 0 8px 24px rgba(40, 164, 242, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .plan.plan--e .btn { transition: none; }
  .plan.plan--e .btn:hover { transform: none; }
}

/* ============================================================================
   Phone/tablet pricing carousel (both pages). At <= 860px, where the cards used
   to stack, .pricing__grid.plans-carousel becomes a horizontal scroll-snap row:
   each card ~78vw so the next one peeks. Cards show in reverse DOM order so
   Pro (last in the DOM) leads: Pro, Marker, Free on home; Pro, Free on the
   summarizer. DOM order stays Free -> Pro for desktop and crawlers.
   Dots (.plans-dots) are built by /assets/js/plan-carousel.js, which mirrors
   that reverse order; without JS there are no dots and the row still scrolls.
   Doubled class beats the page's inline 860px rule (this file loads first).
   ========================================================================== */
.plans-dots { display: none; }

@media (max-width: 860px) {
  .pricing__grid.plans-carousel {
    display: flex; gap: 12px; align-items: stretch;
    max-width: none;
    /* Bleed to the viewport edges, then pad back to the page gutter so the first
       card lines up with the heading and the peeking card runs off-screen. */
    margin: calc(var(--sc-8) - 1.25rem) calc(-1 * var(--sc-gutter)) 0;
    /* Top room for the MOST POPULAR badge; bottom room for the card shadows
       (overflow clips them, so they are tightened below to fit inside this). */
    padding: 1.25rem var(--sc-gutter) 2rem;
    scroll-padding-inline: var(--sc-gutter);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .pricing__grid.plans-carousel::-webkit-scrollbar { display: none; }
  .pricing__grid.plans-carousel:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; border-radius: 12px; }
  .plans-carousel > .plan {
    /* ~78vw so the next card shows ~11vw (43px of card + the 12px gap at 390px).
       --pc is the phone scale (0.93 = ~7% smaller): real font/spacing tokens are
       scaled on the card, so everything inside shrinks together (no transform). */
    --pc: 0.93;
    --sc-t-xs: calc(clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem) * var(--pc));
    --sc-t-sm: calc(clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem) * var(--pc));
    --sc-t-base: calc(1rem * var(--pc));
    --sc-t-lg: calc(clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem) * var(--pc));
    --sc-t-2xl: calc(clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem) * var(--pc));
    --sc-1: calc(0.25rem * var(--pc)); --sc-2: calc(0.5rem * var(--pc));
    --sc-3: calc(0.75rem * var(--pc)); --sc-4: calc(1rem * var(--pc));
    --sc-5: calc(1.5rem * var(--pc)); --sc-6: calc(2rem * var(--pc));
    flex: 0 0 min(78vw, 24rem);
    scroll-snap-align: start; scroll-snap-stop: always;
    /* Lift the white cards off the light section so the peeking card reads. */
    box-shadow: var(--sc-edge), 0 0 0 1px rgba(14, 17, 24, 0.05), 0 10px 22px -14px rgba(14, 17, 24, 0.28);
  }
  .plans-carousel > .plan.plan--e {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 26px -14px rgba(20, 40, 90, 0.55);
  }
  .plans-carousel > .plan .pe-annual { padding: calc(1.45rem * var(--pc)) calc(1.1rem * var(--pc)) calc(1.1rem * var(--pc)); }
  .plans-carousel > .plan .pe-pill { padding: calc(0.3rem * var(--pc)) calc(0.8rem * var(--pc)); }
  .plans-carousel > .plan .pe-chip { padding: calc(0.12rem * var(--pc)) calc(0.5rem * var(--pc)); font-size: calc(0.7rem * var(--pc)); }
  .plans-carousel > .plan .btn { padding: calc(1rem * var(--pc)) calc(1.25rem * var(--pc)); gap: calc(0.6rem * var(--pc)); }
  .plans-carousel > .plan ul li svg { width: calc(17px * var(--pc)); height: calc(17px * var(--pc)); }
  .plans-carousel > .plan:nth-last-child(1) { order: 1; }
  .plans-carousel > .plan:nth-last-child(2) { order: 2; }
  .plans-carousel > .plan:nth-last-child(3) { order: 3; }

  .plans-dots { display: flex; justify-content: center; gap: 2px; margin-top: -0.5rem; }
  .plans-dots button {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 0; background: none; cursor: pointer; border-radius: 999px;
  }
  .plans-dots button::before {
    content: ""; width: 8px; height: 8px; border-radius: 999px;
    background: color-mix(in oklab, var(--sc-ink) 24%, transparent);
    transition: width 200ms ease, background-color 200ms ease;
  }
  .plans-dots button[aria-current="true"]::before { width: 22px; background: var(--sc-accent); }
  .plans-dots button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .plans-dots button::before { transition: none; }
}