/* ==========================================================================
   3DOptix redesign — Pricing, PAGE-UNIQUE layer.
   Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css

   Loaded ONLY by page-templates/dxr-pricing.php, which enqueues it with
   'dxr-shell' as its dependency. The three shared stylesheets are NOT touched —
   other agents are authoring pages against them in parallel.

   RULES FOR THIS FILE:
   - Every selector is scoped to .dxr-page-pricing (the template's wrapper div).
   - Values transcribed from the approved prototype,
     '3DOptix Website.dc.html' lines 1328-1519.
   - Where a value here differs from the shared layer, the difference IS the
     prototype (or production's three-plan reality) and the reason is commented.

   Contents
     §1  Local custom properties
     §2  Page header rhythm
     §3  Plans section rhythm
     §4  Billing switch
     §5  Plan panels — price block, save note, footnote, CTAs
     §6  Billing visibility (the whole switch mechanism)
     §7  Disclaimer line
     §8  Comparison table — 3-plan geometry and section-header rows
     §9  FAQ grid
     §10 Closing CTA band
   ========================================================================== */

/* ==========================================================================
   §1 Local custom properties
   Only what the token layer has no semantic entry for.
   ========================================================================== */
.dxr-page-pricing{
  /* The switch track. Same family as --dxr-surface-raised but it sits ON the
     sunken surface, so it needs the white end of the ramp to read as raised. */
  --dxr-pricing-switch-bg:var(--dxr-surface);
  --dxr-pricing-switch-h:34px;
}

/* ==========================================================================
   §2 Page header
   The prototype gives the pricing header its own, shorter rhythm — the two
   tokens --dxr-section-y-xs / --dxr-section-y-xs2 exist for exactly this
   section and are used nowhere else on the site.
   ========================================================================== */
.dxr-page-pricing .dxr-pricing-head{
  padding:var(--dxr-section-y-xs) 0 var(--dxr-section-y-xs2);
}
.dxr-page-pricing .dxr-pricing-head__lede{margin:0}

/* ==========================================================================
   §3 Plans section
   Prototype: 37->60 top (it follows straight on from the header) and the
   standard tight rhythm at the bottom.
   ========================================================================== */
.dxr-page-pricing .dxr-pricing-plans{
  padding:var(--dxr-section-y-xs2) 0 var(--dxr-section-y-tight);
}

/* The panel grid needs no rules of its own: .dxr-grid--3up carries the tuned
   320px minimum — three plans, not the prototype's four at 240px — and grid's
   default align-items:stretch is what makes .dxr-panel__cta (margin-top:auto)
   land every CTA on the same line. */

/* ==========================================================================
   §4 Billing switch
   A mono label plus a two-option segmented control. No icon, no toggle
   graphic: the design has neither, so the state is carried by fill + ink.
   ========================================================================== */
.dxr-page-pricing .dxr-pricing-billing{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 26px;
}
.dxr-page-pricing .dxr-pricing-billing__label{
  font:500 11px/1 var(--dxr-font-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dxr-text-subtle);
}
.dxr-page-pricing .dxr-pricing-billing__switch{
  display:inline-flex;padding:3px;gap:3px;
  background:var(--dxr-pricing-switch-bg);
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-radius-md);
}
/* TOUCH TARGET. The prototype's pill is 34px tall and this is the page's only
   control besides the CTAs, so the 34px geometry is kept and the HIT AREA is
   enlarged instead: 34 + 5 + 5 = 44px. The overhang is absolutely positioned,
   so nothing moves, and the track's own 3px of padding absorbs most of it
   inside the switch. */
.dxr-page-pricing .dxr-pricing-billing__opt{
  position:relative;
  appearance:none;-webkit-appearance:none;
  height:var(--dxr-pricing-switch-h);padding:0 16px;
  border:0;background:transparent;cursor:pointer;
  border-radius:var(--dxr-radius-pill);
  font:500 11px/1 var(--dxr-font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dxr-text-muted);
  transition:background .15s ease,color .15s ease;
}
.dxr-page-pricing .dxr-pricing-billing__opt::after{
  content:"";position:absolute;inset:-5px 0;
}
.dxr-page-pricing .dxr-pricing-billing__opt:hover{color:var(--dxr-ink)}
.dxr-page-pricing .dxr-pricing-billing__opt.is-active{
  background:var(--dxr-primary-tint);color:var(--dxr-primary-hover);
}

/* ==========================================================================
   §5 Plan panels
   ========================================================================== */
/* The plan body is the shared flex column (.dxr-panel__body--plan). Nothing
   here may wrap the CTA in an extra element or change the body's display: the
   pin is margin-top:auto on a DIRECT flex child, and it stops working the
   moment the CTA is one level deeper. */

/* Price block. Baseline-aligned amount + unit, exactly as the prototype. */
.dxr-page-pricing .dxr-pricing-price{margin:0 0 6px}
.dxr-page-pricing .dxr-pricing-price__row{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.dxr-page-pricing .dxr-pricing-price__unit{white-space:nowrap}

/* Struck-through regular price, shown only while the product is on sale. */
.dxr-page-pricing .dxr-pricing-price__was{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 6px;
}
.dxr-page-pricing .dxr-pricing-price__strike{
  font:500 15px/1 var(--dxr-font-mono);
  color:var(--dxr-text-subtle);
  text-decoration:line-through;
}
/* On the inverted Enterprise panel the price and unit invert with it. */
.dxr-page-pricing .dxr-panel--inverted .dxr-price{color:var(--dxr-on-dark)}
.dxr-page-pricing .dxr-panel--inverted .dxr-pricing-price__unit,
.dxr-page-pricing .dxr-panel--inverted .dxr-pricing-plan__save,
.dxr-page-pricing .dxr-panel--inverted .dxr-pricing-plan__note{color:var(--dxr-on-dark-caption)}
.dxr-page-pricing .dxr-panel--inverted .dxr-pricing-price__strike{color:var(--dxr-on-dark-caption)}

/* Production's saving note. Mono because it is a footnote marker, not prose. */
.dxr-page-pricing .dxr-pricing-plan__save{margin:0 0 22px}

/* Student's wavelength footnote. SANS, deliberately: this is a sentence of
   prose and mono must never leak into prose. */
.dxr-page-pricing .dxr-pricing-plan__note{
  margin:0 0 20px;
  font:400 12px/1.55 var(--dxr-font-sans);
  color:var(--dxr-text-subtle);
}

/* CTA slot. The WRAPPER carries .dxr-panel__cta (margin-top:auto), not the
   buttons: the two billing variants swap inside it, and a pin on a button that
   can be display:none would move with it. */
.dxr-page-pricing .dxr-pricing-plan__cta{width:100%}

/* Already-subscribed state. The button also carries the disabled attribute —
   this is presentation for a state that is already enforced in markup. */
.dxr-page-pricing .dxr-pricing-plan__cta--current{
  background:var(--dxr-green-deep);
  border:1px solid var(--dxr-green-deep);
  color:var(--dxr-on-dark);
  cursor:default;pointer-events:none;
}
.dxr-page-pricing .dxr-pricing-plan__cta--current:hover{
  background:var(--dxr-green-deep);color:var(--dxr-on-dark);
}
.dxr-page-pricing .dxr-pricing-plan--current{border-color:var(--dxr-green-deep)}

/* ==========================================================================
   §6 Billing visibility — the entire switch mechanism
   Both variants are server-rendered; exactly one is displayed. Because the
   hidden variant is display:none it is neither clickable nor focusable, so a
   visitor can never reach the CTA belonging to the price they cannot see.
   Default (no JS, no attribute) resolves to yearly, matching the markup.
   ========================================================================== */
.dxr-page-pricing [data-dxr-billing-root] [data-dxr-bill="monthly"]{display:none}
.dxr-page-pricing [data-dxr-billing-root][data-billing="monthly"] [data-dxr-bill="monthly"]{display:block}
.dxr-page-pricing [data-dxr-billing-root][data-billing="monthly"] [data-dxr-bill="yearly"]{display:none}

/* .dxr-btn is inline-flex; restoring it as `block` above would break the
   button's own centring, so buttons get their display back explicitly. */
.dxr-page-pricing [data-dxr-billing-root][data-billing="monthly"] a.dxr-btn[data-dxr-bill="monthly"]{
  display:inline-flex;
}

/* ==========================================================================
   §7 Disclaimer
   ========================================================================== */
.dxr-page-pricing .dxr-pricing-plans__disclaimer{margin:22px 0 0}

/* ==========================================================================
   §8 Comparison table
   The shared .dxr-table--comparison geometry is 1.6fr repeat(4,1fr) — the
   prototype's FOUR invented plans. Production has THREE, so the column count
   is overridden here rather than in the shared layer. The 720px minimum and
   the horizontal scroll are unchanged: this table scrolls, it never stacks.
   ========================================================================== */
.dxr-page-pricing .dxr-pricing-compare .dxr-table--comparison{
  --dxr-table-cols:1.6fr repeat(3,1fr);
}

/* Scroll affordance. The wrapper/min-width split is correct and stays exactly
   as it is — this table scrolls, it never stacks. What is missing on touch is
   any SIGNAL that it does: at a 320px viewport the 280px window shows 26px of
   padding, the 232px feature column and 22px of the Student column, there is no
   scrollbar, and the panel's 12px radius reads as a finished edge rather than a
   cut-off. One mono line above the table says so.
   The line is not a decoration, it is a statement of fact, and the fact stops
   being true once the table fits: content width is min(100vw,1300px) minus two
   gutters, so 0.92 x V >= the 720px row minimum from V ~= 783px up. Hidden from
   820px, which leaves headroom for the scrollbar that vw counts and the media
   query does not. This is the one place on the page where a breakpoint is
   correct — the message is discrete, not fluid. */
.dxr-page-pricing .dxr-pricing-compare__hint{margin:0 0 14px}
@media (min-width:820px){
  .dxr-page-pricing .dxr-pricing-compare__hint{display:none}
}

/* Values are measured/spec content, so they are mono (.dxr-table__key). The
   shared rule leaves their colour to the caller; here it is uniform. */
.dxr-page-pricing .dxr-pricing-compare .dxr-table__row--body:not(.dxr-table__row--tinted) .dxr-table__key{
  color:var(--dxr-ink);
}

/* Section-header rows. The config groups ~45 capabilities under seven headings
   ("Simulation", "Analysis types", …). The table primitive has no
   section-header row shape and must not grow one for a single page, so the
   heading is emitted as a tinted row holding ONE mono cell, and that cell is
   spanned across the whole grid here. */
.dxr-page-pricing .dxr-pricing-compare .dxr-table__row--tinted .dxr-table__key{
  grid-column:1 / -1;
  font:500 10px/1 var(--dxr-font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dxr-text-subtle);
}

/* ==========================================================================
   §9 FAQ
   Bordered flat panels, 2-up at the shared 420px minimum. .dxr-panel--flat
   keeps the border and radius and drops the cap rule — the prototype's card.
   ========================================================================== */
.dxr-page-pricing .dxr-pricing-faq__title{margin:0 0 36px}

/* ==========================================================================
   §10 Closing CTA band
   No rules needed. The band is white (surface '' in the template) so it reads
   as a boundary against the sunken FAQ above, and the hairline between them
   belongs to the band, which is why the FAQ section carries none.
   ========================================================================== */