/* The pricing page (templates/pricing.html; work order 2026-11-03): an ink first screen with the choice,
   Free to keep beside Pro as two cards, Founding Trader as a band on the Pro card; what Pro buys under
   them; then the comparison and the terms, each once. */
.vg-conversion-page { color-scheme: light; background: var(--ds-white); }
.vg-conversion-page main { background: var(--ds-white); }
.pc-shell { width: var(--ds-shell); margin-inline: auto; }

/* The first screen: the heading, then the two cards; a soft light and a hairline grid behind them. */
.pc-hero { --pc-hero-top: clamp(1.5rem, 2.4vw, 2.25rem); position: relative; isolation: isolate; overflow: hidden; padding: var(--pc-hero-top) 0 clamp(2.5rem, 4.5vw, 4rem); background: var(--ds-band-ink); color: var(--ds-ink-text); }
.pc-hero::before { content: ""; position: absolute; z-index: -1; top: -12%; bottom: 30%; right: -8%; width: 58%; pointer-events: none;
    background: radial-gradient(40% 42% at 52% 46%, rgba(54, 110, 240, .2) 0%, rgba(54, 110, 240, 0) 72%), var(--ds-grid-ink);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    -webkit-mask-image: radial-gradient(52% 50% at 52% 48%, #000 24%, transparent 78%); mask-image: radial-gradient(52% 50% at 52% 48%, #000 24%, transparent 78%); }
.pc-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-blue-300); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.pc-eyebrow span { width: 6px; height: 6px; border-radius: var(--ds-radius-pill); background: currentColor; box-shadow: 0 0 0 3px rgba(147, 182, 253, .22); }
.pc-hero h1 { margin: var(--ds-space-3) 0 0; color: var(--ds-white); font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: var(--ds-weight-heavy); letter-spacing: var(--ds-tracking-display); line-height: var(--ds-leading-display); text-wrap: balance; }
.pc-hero-copy { margin-bottom: var(--ds-space-5); }
.pc-hero-back { margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-sm); }
.pc-hero-back a { color: var(--ds-accent-on-ink); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 4px; }

/* The two cards: Free to keep, then Pro (side by side from 900px, one under the other below it). */
.pc-card { --pc-pad: 1.75rem; position: relative; display: flex; flex-direction: column; padding: var(--pc-pad); border-radius: var(--ds-radius-2xl); background: var(--ds-white); color: var(--ds-gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .25), 0 30px 70px -20px rgba(0, 0, 0, .7); overflow: hidden; }
.pc-card.primary { box-shadow: 0 0 0 2px var(--ds-blue-500), 0 2px 4px rgba(0, 0, 0, .25), 0 30px 70px -20px rgba(0, 0, 0, .7); }
.pc-card h2 { margin: 0; color: var(--ds-gray-900); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); }
.pc-desc { margin: var(--ds-space-1) 0 0; color: var(--ds-gray-600); font-size: var(--ds-text-sm); line-height: 1.5; }
.pc-price { display: flex; align-items: flex-end; gap: var(--ds-space-2); margin: var(--ds-space-3) 0 0; color: var(--ds-gray-900); font-size: var(--ds-figure-lg); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-figure); line-height: .95; }
.pc-price > span ~ span { color: var(--ds-gray-500); font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); letter-spacing: 0; line-height: 1.4; }
.pc-price-note { margin: var(--ds-space-2) 0 0; color: var(--ds-gray-600); font-size: var(--ds-text-sm); line-height: 1.5; }
.pc-price-note a, .pc-subscribe a { color: var(--ds-blue-700); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
/* A yearly saving, with weight. */
.pc-save { display: inline-flex; align-items: center; height: 1.4rem; margin: 0 .1rem; padding: 0 .5rem; border-radius: var(--ds-radius-pill); background: var(--ds-gain-soft); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3); color: var(--ds-gain-text); font-style: normal; font-weight: var(--ds-weight-semibold); white-space: nowrap; }
/* Founding Trader: a band across the top of the Pro card, the year while it is sold. */
.pc-ribbon { margin: calc(-1 * var(--pc-pad)) calc(-1 * var(--pc-pad)) var(--ds-space-4); padding: var(--ds-space-3) var(--pc-pad); border-bottom: 1px solid var(--ds-blue-100); background: var(--ds-blue-50); color: var(--ds-gray-700); font-size: var(--ds-text-sm); line-height: 1.5; }
.pc-ribbon p { margin: 0; }
.pc-ribbon .pc-ribbon-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); margin-bottom: var(--ds-space-1); color: var(--ds-gray-900); }
.pc-ribbon a { color: var(--ds-blue-700); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
/* One action per card: Pro's in the brand blue, Free to keep's as an outline. */
.pc-card .pc-cta, .pc-card form { margin-top: var(--ds-space-4); }
.pc-card form .pc-cta { width: 100%; margin-top: 0; }
.pc-card .pc-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--ds-gray-300); border-radius: var(--ds-radius-pill); background: var(--ds-white); color: var(--ds-gray-900); font: inherit; font-weight: var(--ds-weight-semibold); text-decoration: none; cursor: pointer; transition: background var(--ds-dur-base) var(--ds-ease-out); }
.pc-card .pc-cta:hover { background: var(--ds-gray-50); }
.pc-card .pc-cta.primary { background: var(--ds-blue-600); color: var(--ds-white); border-color: transparent; box-shadow: var(--ds-shadow-button); transition: background var(--ds-dur-base) var(--ds-ease-out); }
.pc-card .pc-cta.primary:hover { background: var(--ds-blue-700); }
.pc-subscribe { margin: var(--ds-space-2) 0 0; color: var(--ds-gray-600); font-size: var(--ds-text-sm); text-align: center; }
/* Where a signed-in account stands, in place of a second action. */
.pc-state { margin: var(--ds-space-5) 0 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); background: var(--ds-gray-50); color: var(--ds-gray-700); font-size: var(--ds-text-sm); line-height: 1.5; }
/* The trial and cancelling, in one line on the Pro card. */
.pc-terms { display: flex; align-items: flex-start; gap: .55rem; margin: var(--ds-space-4) 0 0; color: var(--ds-gray-700); font-size: var(--ds-text-sm); line-height: 1.5; }
.pc-terms .ds-icon { flex: 0 0 auto; margin-top: .15rem; color: var(--ds-gain-text); }
.pc-features { display: grid; gap: var(--ds-space-2); margin: var(--ds-space-4) 0 0; padding: var(--ds-space-4) 0 0; border-top: var(--ds-border); list-style: none; }
.pc-features li { display: flex; gap: var(--ds-space-3); align-items: flex-start; color: var(--ds-gray-700); font-size: var(--ds-text-sm); line-height: 1.45; }
.pc-static-check { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: .05rem; border-radius: var(--ds-radius-pill); background: var(--ds-gain-soft); color: var(--ds-gain-text); font-size: .75rem; font-weight: var(--ds-weight-bold); flex: 0 0 auto; }
.pc-hero-compare { margin: var(--ds-space-6) 0 0; color: var(--ds-ink-text-2); font-size: var(--ds-text-sm); text-align: center; }
.pc-hero-compare a { margin-left: var(--ds-space-2); color: var(--ds-accent-on-ink); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 4px; }

/* What Pro buys: three outcomes, each with a small picture of it, beside the Sunday mail it arrives in. */
.pc-hero-more { display: grid; gap: var(--ds-space-6); margin-top: var(--ds-space-12); }
.pc-value { display: grid; gap: var(--ds-space-3); max-width: 34rem; margin: 0; padding: 0; list-style: none; }
.pc-value li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-3); border-radius: var(--ds-radius-lg); background: var(--ds-surface-ink-2); box-shadow: var(--ds-shadow-ink-sm); }
.pc-value strong { display: block; color: var(--ds-white); font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); }
.pc-value li span { display: block; margin-top: .15rem; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); line-height: 1.45; }
.pc-mini-visual { width: 4.5rem; height: 2.8rem; padding: .35rem .4rem; border-radius: var(--ds-radius-md); background: rgba(5, 8, 16, .55); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .14); }
.pc-mv-axis { stroke: rgba(148, 163, 184, .35); stroke-width: 1; }
.pc-mv-bar { fill: rgba(163, 177, 198, .45); }
.pc-mv-bar.is-now { fill: var(--ds-accent-on-ink); }
.pc-mv-card { fill: rgba(148, 163, 184, .08); stroke: rgba(148, 163, 184, .3); stroke-width: 1; }
/* The room: a half-circle measure, the used part in the loss red. */
.pc-mv-arc { fill: none; stroke: rgba(148, 163, 184, .32); stroke-width: 5; stroke-linecap: round; }
.pc-mv-arc.is-used { stroke: var(--ds-loss); }
.pc-mv-pivot { fill: var(--ds-ink-text-2); }
/* The Sunday report: an envelope with its mark. */
.pc-mv-flap { fill: none; stroke: rgba(195, 205, 219, .6); stroke-width: 2; stroke-linejoin: round; }
.pc-mv-dot { fill: var(--ds-loss-on-ink); stroke: rgba(5, 8, 16, .9); stroke-width: 2; }
/* The product crop (FIX-ROUND.md F2.5): the Weekly Rule Cost e-mail's header. */
.pc-proof { max-width: 34rem; margin: 0; }
.pc-proof picture { display: block; }
.pc-proof img { display: block; width: 100%; height: auto; border-radius: var(--ds-radius-lg); box-shadow: 0 0 0 1px rgba(148, 163, 184, .16), var(--ds-shadow-ink-sm); }
.pc-proof figcaption { margin-top: var(--ds-space-2); color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); }

/* The comparison and the terms. */
.pc-section { padding: var(--ds-section) 0; }
#plans-heading { margin: 0; color: var(--ds-gray-900); font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); }
.pc-plan-intro { max-width: 760px; margin: var(--ds-space-3) 0 0; color: var(--ds-gray-600); font-size: var(--ds-text-base); line-height: 1.6; }
.pc-compare { width: 100%; margin: var(--ds-space-8) 0 0; border-collapse: separate; border-spacing: 0; border: var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; font-size: var(--ds-text-sm); background: var(--ds-white); box-shadow: var(--ds-shadow-xs); }
.pc-compare th, .pc-compare td { padding: var(--ds-space-4) var(--ds-space-5); border-bottom: var(--ds-border); text-align: left; vertical-align: top; line-height: 1.5; }
.pc-compare tbody tr:last-child th, .pc-compare tbody tr:last-child td { border-bottom: 0; }
.pc-compare thead th { background: var(--ds-gray-50); color: var(--ds-gray-500); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.pc-compare thead th:last-child, .pc-compare td:last-child { background: rgba(37, 99, 235, .04); color: var(--ds-gray-900); }
.pc-compare tbody th { color: var(--ds-gray-900); font-weight: var(--ds-weight-medium); }
.pc-compare td { color: var(--ds-gray-600); }
.pc-compare tr.pc-pillar th, .pc-compare tr.pc-pillar td:last-child { font-weight: var(--ds-weight-semibold); }
.pc-billing-terms { margin: var(--ds-space-10) 0 0; padding: var(--ds-space-6); border: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-gray-25); }
.pc-billing-terms h2 { margin: 0; color: var(--ds-gray-900); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); }
.pc-billing-terms p { margin: var(--ds-space-3) 0 0; color: var(--ds-gray-600); line-height: 1.65; }
.pc-billing-terms a { color: var(--ds-blue-700); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.pc-terms-links { font-size: var(--ds-text-sm); }

@media (min-width: 900px) {
    /* The heading over both cards; the cards in one row, the same height. */
    .pc-first { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy copy" "free pro"; column-gap: var(--ds-space-6); align-content: start; }
    .pc-lead { display: contents; }
    .pc-hero-copy { grid-area: copy; }
    #plan-free { grid-area: free; }
    #plan-pro { grid-area: pro; }
    .pc-hero-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 5vw, 4.5rem); }
    .pc-proof { justify-self: end; }
    /* While the cookie bar is up, the first screen is the heading and the cards; the rest starts below it. */
    .vg-ck-pending .pc-first { box-sizing: border-box; min-height: calc(100svh - var(--ds-header) - var(--pc-hero-top)); }
}
@media (max-width: 899px) {
    #plan-pro { margin-top: var(--ds-space-5); }
    /* While the cookie bar is up on a narrow screen, the first screen is the heading and Free to keep;
       Pro starts just below it, so the bar meets nothing. */
    .vg-ck-pending .pc-lead { box-sizing: border-box; min-height: calc(100svh - var(--ds-header) - var(--pc-hero-top)); }
}
@media (max-width: 600px) {
    .pc-hero { --pc-hero-top: var(--ds-space-4); }
    .pc-hero h1 { font-size: 2rem; }
    .pc-hero-copy { margin-bottom: var(--ds-space-4); }
    .pc-card { --pc-pad: var(--ds-space-5); border-radius: var(--ds-radius-xl); }
    .pc-price { margin-top: var(--ds-space-2); }
    .pc-card .pc-cta, .pc-card form { margin-top: var(--ds-space-3); }
    .pc-features { margin-top: var(--ds-space-3); padding-top: var(--ds-space-3); gap: .375rem; }
    .pc-hero-compare a { display: inline-block; margin: var(--ds-space-1) 0 0; }
    .pc-compare th, .pc-compare td { padding: var(--ds-space-3); font-size: var(--ds-text-xs); }
}
@media (prefers-reduced-motion: reduce) {
    .pc-card .pc-cta, .pc-card .pc-cta.primary { transition: none; }
}