/* =====================================================================
   DKSCORE — /pricing redesign stylesheet (styleing.css)
   ---------------------------------------------------------------------
   New layout built from the redesign wireframe. This is a GLOBAL (non
   CSS-module) sheet, imported once in pages/_app.js alongside the other
   redesign sheets (aiSearchRedesign.css, transitHub.css, …) — the
   established repo pattern for a screen-level redesign.

   Rules followed (see ui-guidelines.md):
   - Every colour / radius / shadow / font is a --vp2-* token, so the
     light + dark themes flip automatically. No raw hex, no one-off shadows.
   - Spacing is on the 4px scale (4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 64).
   - Responsive only at the canonical 1200 / 768 / 480 breakpoints.
   - All classes namespaced `prc-` so nothing collides with global styles.
   ===================================================================== */

.prc-page {
  background: var(--vp2-bg-deep);
  color: var(--vp2-txt-1);
  min-height: 100vh;
  font-family: var(--vp2-font-body);
  position: relative;
  overflow: hidden;
}

/* Soft cosmic ambience — same token-driven halos used on the other v2
   surfaces so the redesign sits in the same visual world. */
.prc-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(
    ellipse at top left,
    color-mix(in srgb, var(--vp2-cyan) 9%, transparent),
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

.prc-page::after {
  content: "";
  position: absolute;
  top: 180px;
  right: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(
    ellipse at top right,
    color-mix(in srgb, var(--vp2-violet) 10%, transparent),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.prc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.prc-breadcrumb {
  padding-top: 16px;
}

/* ---------------------------------------------------------------------
   Shared section helpers
   ------------------------------------------------------------------- */
.prc-section {
  padding: 64px 0 0;
}

/* Plans block sits right under the hero controls — tight top gap. */
.prc-section-plans {
  padding-top: 12px;
}

.prc-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}

.prc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vp2-cyan) 12%, transparent);
  border: 1px solid var(--vp2-border-acc);
  color: var(--vp2-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prc-section-title {
  margin: 16px 0 0;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vp2-txt-1);
}

.prc-section-sub {
  margin: 12px auto 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vp2-txt-3);
}

.prc-grad-text {
  background: var(--vp2-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------------
   Hero (left-aligned)
   ------------------------------------------------------------------- */
.prc-hero {
  text-align: left;
  padding: 40px 0 8px;
  position: relative;
  z-index: 1;
}

.prc-hero-title {
  margin: 20px 0 0;
  max-width: 760px;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vp2-txt-1);
}

.prc-hero-sub {
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vp2-txt-2);
}

/* ---------------------------------------------------------------------
   Controls — audience + cycle tabs and the Cards / Table view toggle.
   Centered stack; the view toggle gets its own labelled row so it stays
   discoverable on every breakpoint (a small UX improvement over the
   wireframe, which tucked it to the far right and risked clipping).
   ------------------------------------------------------------------- */
/* Left-aligned column: audience underline-tabs on their own row, then the
   Billing cycle + View as row (spread across the container) beneath. */
.prc-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0 8px;
}

/* "Plans for" — underline tabs mirroring the site's nav-tab treatment:
   plain text with a gradient underline under the active tab. */
.prc-audience-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  max-width: 100%;
  border-bottom: 1px solid var(--vp2-border);
}

.prc-audience-tab {
  position: relative;
  background: none;
  border: 0;
  padding: 8px 2px 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--vp2-txt-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.prc-audience-tab:hover {
  color: var(--vp2-txt-1);
}

/* Active tab picks up the brand gradient (matches its underline). */
.prc-audience-tab.is-active {
  background: var(--vp2-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.prc-audience-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--vp2-brand-gradient);
}

/* Billing cycle (left) + View as (right) spread across the full container. */
.prc-controls-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 32px;
  width: 100%;
}

/* Each control stacks its label above its pills. */
.prc-control-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.prc-control-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vp2-txt-3);
  white-space: nowrap;
}

/* Font Awesome icon inside the View-as pills. */
.prc-view-ic {
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -1px;
}

@media (max-width: 768px) {
  .prc-controls {
    gap: 16px;
  }
  .prc-controls-row {
    flex-direction: column;
    gap: 14px;
  }
  /* Trim the enterprise CTA banner padding/height on mobile. */
  #enterprise-nudge > div {
    padding: 18px;
  }
}

/* Tabs span the row and fit without a scroll container. overflow-x:auto would
   force overflow-y to compute to auto and show a phantom vertical scrollbar
   (the active underline sits 1px below the box), so keep the tabs
   overflow-visible and spread them across the full width instead.
   Phones only (≤600px): tablet and the unfolded Galaxy Fold have room for the
   desktop treatment — left-aligned with a 28px gap — and justifying three
   short labels across ~700px pushed "Enterprise" to the far edge, which read
   as a different component from the desktop tabs. */
@media (max-width: 600px) {
  .prc-audience-tabs {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
}

.prc-finenote {
  max-width: 560px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--vp2-txt-3);
}

/* ---------------------------------------------------------------------
   "What you get with personalization" — feature grid
   ------------------------------------------------------------------- */
.prc-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.prc-feature-card {
  background: var(--vp2-bg-card);
  border: 1px solid var(--vp2-border);
  border-radius: var(--vp2-r-md);
  padding: 20px;
  box-shadow: var(--vp2-shadow-card);
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1),
    transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.prc-feature-card:hover {
  background: var(--vp2-bg-card-h);
  transform: translateY(-2px);
}

.prc-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--vp2-r-sm);
  margin-bottom: 16px;
  color: var(--vp2-cyan);
  background: color-mix(in srgb, var(--vp2-cyan) 14%, transparent);
}
.prc-feature-icon[data-accent="violet"] {
  color: var(--vp2-violet);
  background: color-mix(in srgb, var(--vp2-violet) 16%, transparent);
}
.prc-feature-icon[data-accent="emerald"] {
  color: var(--vp2-emerald);
  background: color-mix(in srgb, var(--vp2-emerald) 16%, transparent);
}
.prc-feature-icon[data-accent="gold"] {
  color: var(--vp2-gold);
  background: color-mix(in srgb, var(--vp2-gold) 16%, transparent);
}
.prc-feature-icon[data-accent="rose"] {
  color: var(--vp2-rose);
  background: color-mix(in srgb, var(--vp2-rose) 16%, transparent);
}
.prc-feature-icon[data-accent="orange"] {
  color: var(--vp2-orange);
  background: color-mix(in srgb, var(--vp2-orange) 16%, transparent);
}

.prc-feature-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vp2-txt-1);
}

.prc-feature-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vp2-txt-3);
}

/* ---------------------------------------------------------------------
   "One simple currency for AI features" — credits strip
   ------------------------------------------------------------------- */
.prc-credits-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.prc-credit-card {
  background: var(--vp2-bg-card);
  border: 1px solid var(--vp2-border);
  border-radius: var(--vp2-r-md);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--vp2-shadow-card);
}

.prc-credit-card[data-highlight="true"] {
  border-color: var(--vp2-border-acc);
  background: color-mix(in srgb, var(--vp2-cyan) 7%, var(--vp2-bg-card));
}

.prc-credit-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vp2-cyan);
}

.prc-credit-unit {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vp2-txt-3);
}

.prc-credit-title {
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp2-txt-1);
}

.prc-credit-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vp2-txt-3);
}

/* ---------------------------------------------------------------------
   Responsive — canonical 1200 / 768 / 480 breakpoints only.
   ------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .prc-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .prc-credits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .prc-section {
    padding: 10px 0 0;
  }
  .prc-container {
    padding: 0 16px;
  }
  .prc-credits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .prc-feature-grid {
    grid-template-columns: 1fr;
  }
  .prc-credits-grid {
    grid-template-columns: 1fr;
  }
}

/* Honour reduced-motion — drop the non-essential hover lift. */
@media (prefers-reduced-motion: reduce) {
  .prc-feature-card {
    transition: none;
  }
  .prc-feature-card:hover {
    transform: none;
  }
}

/* W-16 — the methodology link under the pricing FAQ. Muted: it is a reassurance
   for someone comparing tiers, not a call to action competing with the plans. */
.prc-method-note {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vp2-txt-3);
  margin: 0;
}

.prc-method-note a {
  color: var(--vp2-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}