/* pricing.css — extracted from pricing.html {% block style %} */

/* TODO(token-migration): migrate hardcoded dark-mask rgba on these selectors to a new token:
   - .pricing-feature-list li { text-shadow: 0 0 3px rgba(var(--as-black-rgb),0.9); }
   - .box-gb-cap { text-shadow: 0 0 4px rgba(var(--as-black-rgb),0.9); }
*/

/* ═══ KILL CRT / VIGNETTE / OVERLAYS ═══ */
body::before { display: none !important; }
body::after { display: none !important; }

body {
    background: var(--as-bg-dark);
    min-height: 100vh;
    font-family: var(--as-subtitle-font);
    color: var(--as-text);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--as-hero-padding-top) 2rem 4rem;
}

/* S-5: .nebula-bg removed — the sitewide .page-nebula (base.html) is the background. */

/* ═══ GRADIENT TEXT UTILITY ═══ */

/* S-6: title gradient = navbar/MENU scheme (white→purple→pink, top→bottom). */
.gradient-text {
    background: var(--s6-title-gradient);
    background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ═══ TITLE + SUBTITLE ═══ */
.pricing-title {
    font-family: var(--as-title-font);
    font-size: var(--as-title-size);
    letter-spacing: var(--as-title-spacing);
    line-height: var(--as-title-line-height);
    text-align: center;
    filter: var(--effect-titleCutout);
}

.pricing-subtitle {
    font-family: var(--as-subtitle-font);
    font-weight: var(--as-subtitle-weight);
    font-size: var(--as-subtitle-size);
    letter-spacing: var(--as-subtitle-spacing);
    line-height: var(--as-subtitle-line-height);
    text-align: center;
    margin-top: var(--as-subtitle-gap);
    filter: var(--effect-subtitleCutout);
}

/* S-6: subtitle gradient = inverse of the title (pink→purple→white, top→bottom). */
.pricing-subtitle .gradient-text {
    background: var(--s6-subtitle-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ═══ ACCORDION CONTAINER ═══ */
.pricing-accordion {
    /* 2026-07-22: widened 800→1040 to match the widened /select-plan cards. */
    width: min(1040px, calc(100vw - 3rem));
    max-width: none;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ═══ PRICING BOX (collapsed header) ═══ */
.pricing-box {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 24px 28px;
    margin-top: 16px;
    cursor: pointer;
    font-family: var(--as-title-font);
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    letter-spacing: var(--as-title-spacing);
    text-transform: uppercase;
    transition: background 0.2s, box-shadow 0.2s;
    text-align: left;
    color: inherit;
}
.pricing-box:first-child { margin-top: 0; }

.box-title-text {
    /* S-6: box titles white to match select-plan plan labels. */
    color: #fff;
    -webkit-text-fill-color: #fff;
    /* Let the title take the available row width and wrap instead of running
       under the right-aligned price on narrow screens (design/mobile-web-phase1,
       layout-only — fixes "INITIAL FIX & ENRICH" overlapping "€99.99" at 390px). */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    /* When the title wraps beside the price on narrow screens (Phase 1 enabled
       the wrap), the pixel display font's default `normal` line-height is too
       tight and the two lines collide vertically ("INITIAL FIX &" over
       "ENRICH" at 390px). A relaxed line-height gives wrapped lines room;
       single-line titles are visually unaffected. design/mobile-web-pricing,
       layout-only. */
    line-height: 1.4;
}

.box-gb-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.box-gb-label {
    font-family: var(--as-title-font);
    font-size: clamp(0.5rem, 1vw, 0.7rem);
    letter-spacing: var(--as-subtitle-spacing);
    color: var(--as-uhoh);
    -webkit-text-fill-color: var(--as-uhoh);
}

.box-gb-input {
    width: 5rem;
    padding: 0.3rem 0.5rem;
    font-family: var(--as-title-font);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--as-text);
    background: #000;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 0;
    outline: none;
    text-align: center;
    appearance: textfield;
}

.box-gb-input::-webkit-inner-spin-button,
.box-gb-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.box-gb-input:focus { border-color: rgb(255 255 255 / 50%); }

.box-gb-unit {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--as-text);
    opacity: 0.7;
}

.box-gb-cap {
    font-family: var(--as-cta-font);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: var(--as-magenta);
    text-shadow: 0 0 4px rgba(var(--as-black-rgb),0.9);
}

.box-price-text {
    color: #fff;
    -webkit-text-fill-color: #fff;
    white-space: nowrap;
    margin-left: auto;
    /* Reserve the price its own column so the title can wrap beside it without
       the two colliding (design/mobile-web-phase1). */
    flex: 0 0 auto;
    padding-left: 0.75rem;
    display: none;
}

.pricing-box.open .box-price-text {
    display: inline;
}

.pricing-box:hover {
    box-shadow:
        0 0 12px rgb(213 209 226 / 40%),
        0 0 28px rgb(213 209 226 / 18%);
}

.pricing-box.open {
    border-bottom: none;
    background: var(--comp-card-bg); /* Phase 2: value-identical to var(--as-box-bg-solid)=#000 */
}

/* ═══ EXPANDED CONTENT ═══ */
.pricing-details {
    display: none;
    padding: 20px 28px 28px;

    /* S-6: uniform single-colour outline (page lavender).
       Phase 2: border color → --comp-card-border (value-identical); bg → --comp-card-bg (value-identical).
       border-width is 4px (design spec) vs --comp-card-borderWidth (1px) — left as literal. */
    border: 4px solid var(--comp-card-border);
    border-top: none;
    border-radius: 0;
    background: var(--comp-card-bg);
    animation: pricing-slide-in 0.25s ease;
}
.pricing-details.show { display: block; }

@keyframes pricing-slide-in {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* (pricing-price and pricing-note removed — price now inside box title) */

/* ═══ FEATURE LIST ═══ */
.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.pricing-feature-list li {
    /* Colin, 2026-09-17: IBM Plex Mono, all-caps — was Share Tech Mono. */
    font-family: var(--as-mono-font);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.05rem;
    color: #fff;
    padding: 0.65rem 0;
    padding-left: 1.8rem;
    position: relative;
    text-shadow: 0 0 3px rgba(var(--as-black-rgb),0.9);
}

.pricing-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;

    /* Anchor the dot to the FIRST line (not the block centre) so multi-line
       items keep the bullet beside their first line. 0.65rem = li padding-top,
       0.6em = half the first line box. Single-line items are unaffected. */
    top: calc(0.65rem + 0.6em);
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgb(255 255 255 / 80%), 0 0 10px rgb(255 255 255 / 40%);
}

/* ═══ CYCLING PIPELINE-DIMENSION TICKER (DEEP CLEAN box) ═══
   Mirrors select_plan.css. 5 bullets rotate through the ~47 dimensions; the
   "CATEGORY —" label never wraps and never changes mid-cycle (pipeline_ticker.js). */
.cycle-bullet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45em;
}
.cyc-cat {
    flex: 0 0 auto;
    white-space: nowrap;   /* category never splits across lines */
    color: rgba(var(--page-accent-secondary-rgb), 1);
    -webkit-text-fill-color: rgba(var(--page-accent-secondary-rgb), 1);
    transition: opacity 0.22s ease;
}
.cyc-sep { flex: 0 0 auto; opacity: 0.5; }
.cyc-dim {
    flex: 0 0 auto;
    white-space: nowrap;
    transition: opacity 0.22s ease;
}

/* BEFORE → AFTER example (mirrors select_plan.css). */
.cyc-ex {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.15em;
    font-family: 'Share Tech Mono', monospace;
}
.cyc-before {
    white-space: nowrap;
    color: rgb(255 255 255 / 78%);
    -webkit-text-fill-color: rgb(255 255 255 / 78%);
    transition: opacity 0.25s ease;
}
.cyc-ex.revealed .cyc-before {
    text-decoration: line-through;
    opacity: 0.4;
}
.cyc-arrow {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: rgb(255 255 255 / 55%);
    -webkit-text-fill-color: rgb(255 255 255 / 55%);
}
.cyc-after {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: rgba(var(--page-accent-secondary-rgb), 1);
    -webkit-text-fill-color: rgba(var(--page-accent-secondary-rgb), 1);
}
.cyc-ex.revealed .cyc-arrow,
.cyc-ex.revealed .cyc-after { opacity: 1; }

/* Enrichment dimensions: additive (no meaningful BEFORE) — purple "+ value". */
.cyc-ex.enrich .cyc-before { display: none; }
.cyc-ex.enrich .cyc-arrow {
    color: rgb(185 140 255);
    -webkit-text-fill-color: rgb(185 140 255);
}
.cyc-ex.enrich .cyc-after {
    color: rgb(185 140 255);
    -webkit-text-fill-color: rgb(185 140 255);
}

/* ═══ RESPONSIVE ═══ */
@media (width <= 900px) {
    .pricing-title { font-size: clamp(1.4rem, 4vw, 2.5rem); }
    .pricing-subtitle { font-size: clamp(1.05rem, 3.75vw, 1.65rem); }
    .pricing-box { padding: 16px 18px; font-size: clamp(0.65rem, 2.5vw, 0.9rem); }
    .pricing-details { padding: 14px 18px 20px; }
    .pricing-price { font-size: 1.1rem; }
    .pricing-feature-list li { font-size: 0.85rem; }
}