/* ============================================================
   CAXO — standalone guest landing page, matching CAXO-Mockup.png.
   Deliberately isolated from site.css: its own tokens, its own rules,
   nothing shared with the DigitalMarketing dashboard preview or the
   rest of the public site. Do not merge into site.css.
   ============================================================ */
:root {
  --cx-navy: #0f1b3d;
  --cx-navy-soft: #4b5573;
  --cx-muted: #6b7488;
  --cx-indigo: #4f46e5;
  --cx-blue: #2f5df4;
  --cx-purple: #7c3aed;
  --cx-cyan: #22d3ee;
  --cx-green: #10b981;
  --cx-green-dark: #059669;
  --cx-bg: #ffffff;
  --cx-bg-alt: #f4f6fc;
  --cx-border: #e6e9f5;
  --cx-radius-sm: 10px;
  --cx-radius: 16px;
  --cx-radius-lg: 22px;
  --cx-shadow: 0 12px 32px rgba(15, 27, 61, 0.08);
  --cx-font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --cx-font-body: "Inter", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--cx-font-body);
  color: var(--cx-navy-soft);
  background: var(--cx-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--cx-font-heading);
  color: var(--cx-navy);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.cx-container {
  /* 1464px, not a round number picked by eye: pixel-sampling the mockup's
     left edge across several rows (logo, headline, pricing heading, trust
     bar label) landed consistently at ~64-76px from the left at its native
     1536px width, i.e. ~68px average — since box-sizing:border-box means
     this max-width already includes the 2rem/32px padding below, the box's
     own margin only needs to supply the other 36px: (1536-1464)/2=36,
     +32px padding = 68px total from the viewport edge to the text. */
  max-width: 1464px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---- Buttons ---- */
.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--cx-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.cx-btn svg { width: 18px; height: 18px; flex: none; }
.cx-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.cx-btn-primary {
  background: linear-gradient(90deg, var(--cx-blue) 0%, var(--cx-purple) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.32);
}
.cx-btn-primary:hover { color: #fff; }

.cx-btn-lg { padding: 0.8rem 1.7rem; font-size: 0.98rem; }

.cx-btn-outline {
  background: #fff;
  color: var(--cx-navy);
  border: 1.5px solid #d7dcec;
  box-shadow: none;
}
.cx-btn-outline:hover { background: var(--cx-bg-alt); color: var(--cx-navy); }

/* ============================================================
   Nav — lives INSIDE the hero now (first child of .cx-hero-inner),
   sharing the same background photo/box as the headline, not a
   separate full-width row above it.
   ============================================================ */
.cx-nav { position: relative; z-index: 2; padding: 1.1rem 0 0; }
/* Not a 3-way `justify-content: space-between` across logo/links/actions —
   pixel-measuring the mockup showed the logo and nav links sit right next
   to each other as one left-hand group (a modest ~163px gap), with only
   ONE big flexible gap before Sign In/Start Free, not two equal ones. A
   naive 3-item space-between put equal ~320px gaps on both sides instead,
   dragging the links a further ~170px to the right of where the mockup
   has them. Grouping logo+links with a fixed gap and pushing the actions
   block right via its own margin-left:auto reproduces the mockup's
   actual (asymmetric) spacing. */
.cx-nav-inner { display: flex; align-items: center; gap: 1.5rem; }
/* The wider 10rem gap only makes sense once .cx-nav-links is actually
   visible (>960px) — applying it unconditionally squeezed the logo
   block into a too-narrow space on mobile, wrapping its tagline onto
   three lines instead of the intended two. */
@media (min-width: 961px) {
  .cx-nav-inner { gap: 10rem; }
}

.cx-logo { display: flex; flex-direction: column; gap: 0.05rem; }
.cx-logo-mark {
  font-family: var(--cx-font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--cx-navy);
}
.cx-logo-x {
  background: linear-gradient(135deg, var(--cx-purple) 15%, var(--cx-cyan) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cx-logo-tag { font-size: 0.7rem; color: var(--cx-muted); font-weight: 500; }

.cx-nav-links { display: flex; align-items: center; gap: 2rem; }
.cx-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cx-navy);
}
.cx-nav-links a svg { width: 15px; height: 15px; color: var(--cx-muted); }
.cx-nav-links a:hover { color: var(--cx-indigo); }

.cx-nav-actions { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.cx-signin { font-weight: 600; font-size: 0.95rem; color: var(--cx-navy); }
.cx-signin:hover { color: var(--cx-indigo); }

@media (max-width: 960px) {
  .cx-nav-links { display: none; }
}
@media (max-width: 560px) {
  .cx-signin { display: none; }
  .cx-container { padding: 0 1.1rem; }
}

/* ============================================================
   Hero — one single box for the nav, the headline and the trust bar.
   ============================================================ */
.cx-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* The background photo lives HERE, on the same element that carries the
   1320px max-width every other row uses — not on the full-bleed .cx-hero
   above — so it gets the identical left/right gutters as the pricing and
   footer rows below instead of bleeding to the raw viewport edge on the
   right while the left edge only looks margined because of the fade.

   Sized `contain` (never crops, never upscales past fitting) rather than
   `cover` (blurred the chips by upscaling to fill a box taller than the
   photo's own resolution — round 5) or a plain `100% auto` fit-to-width
   (round 6: at wide-but-short viewports, e.g. 1789x700, fit-to-width
   made the photo render *taller* than the box, hiding the robot's own
   lower half — pedestal, "Tracks Results", "Helps You Get More
   Customers" — behind the trust bar). `contain` picks whichever of
   width/height actually fits within this box, so the photo never
   exceeds the box in the dimension that matters, at either extreme. */
.cx-hero-inner {
  position: relative;
  max-width: 1464px;
  height: 100%;
  margin: 0 auto;
  /* No bottom padding: .cx-trustbar-inline is the last child and needs to
     sit flush against this box's own bottom edge, matching the mockup
     where the trust bar's band transitions directly into the pricing
     row with no gap. A bottom padding here left a permanent ~19px strip
     below the trust bar, uncovered by anything, where this element's own
     background photo was still visible -- confirmed by measuring
     trustbar.bottom vs hero.bottom via Playwright (a persistent 19.2px
     gap, exactly equal to the padding that used to be here) after a
     bug report showed the photo bleeding through beneath the trust bar. */
  padding: 1.1rem 2rem 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

/* .cx-hero-main wraps only the nav+copy — deliberately NOT .cx-trustbar-inline
   — because .cx-hero-photo below is absolutely positioned to fill THIS box
   specifically. Previously the photo (as a CSS background-image on
   .cx-hero-inner) spanned the combined height of nav+copy+trustbar
   together; at short viewport heights (e.g. 1366x728, a very common
   laptop size once browser chrome is subtracted) the trust bar's own
   opaque panel, painted afterward in the same flex column, visually
   covered the bottom of the photo (the badge and two bottom chips) even
   though "contain" itself never mis-scaled the image — it was occlusion,
   not cropping. Scoping the photo to only the nav+copy box means the
   trust bar's panel is a normal sibling below it and can never overlap it. */
.cx-hero-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* A real <img> (object-fit: contain), not a CSS background-image sized via
   background-size: contain — laid out as real content within its own box,
   so at any aspect ratio it only ever shrinks (letterboxing top/bottom or
   left/right as needed), never crops. */
.cx-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
  pointer-events: none;
}

.cx-nav, .cx-hero-copy {
  position: relative;
  z-index: 1;
}

/* Fills the space below the nav and vertically centers the headline
   block within it — so the copy sits mid-height of the hero regardless
   of exactly how tall the nav row or the hero itself ends up being. */
.cx-hero-copy {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eef0ff;
  color: var(--cx-indigo);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

.cx-hero-copy { max-width: 640px; }

.cx-hero-copy h1 {
  /* Measured against the mockup: "Grows. Automatically." there spans
     ~569px at the reference's 1536px width — the previous clamp topped
     out at 2.7rem/43.2px, rendering visibly smaller/narrower (~278px for
     "Your Business") than the reference. 3.5rem/56px matches the
     measured line width at that same viewport. */
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  margin-bottom: 0.8rem;
}

.cx-gradient-text {
  background: linear-gradient(90deg, var(--cx-blue) 0%, var(--cx-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cx-hero-lead {
  font-size: 1rem;
  color: var(--cx-navy-soft);
  max-width: 480px;
  margin-bottom: 1.25rem;
}

.cx-hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; }

.cx-watch { display: flex; align-items: center; gap: 0.75rem; }
.cx-play-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #cbd2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cx-navy);
}
.cx-play-btn svg { width: 14px; height: 14px; }
.cx-watch-text { display: flex; flex-direction: column; }
.cx-watch-text strong { font-size: 0.9rem; color: var(--cx-navy); font-weight: 700; }
.cx-watch-text span { font-size: 0.78rem; color: var(--cx-muted); }

.cx-trust-row { display: flex; flex-wrap: wrap; gap: 1.6rem; font-size: 0.84rem; color: var(--cx-navy-soft); font-weight: 500; }
.cx-trust-row li { display: flex; align-items: center; gap: 0.4rem; }
.cx-trust-row .ck { color: var(--cx-indigo); font-weight: 800; }

@media (max-width: 980px) {
  .cx-hero-inner {
    background:
      linear-gradient(to right, #fff 0%, #fff 55%, rgba(255,255,255,0.4) 72%, rgba(255,255,255,0) 86%),
      url('/img/caxo-hero-bg.webp');
    background-size: 100% 100%, contain;
    background-position: right top;
    background-repeat: no-repeat;
    background-color: #fff;
  }
}

/* Below this, the background photo and the text no longer have room to
   coexist — drop the photo (it's decorative at this size, and there's no
   room to keep it legible-but-visible), fall back to a plain white hero
   background, and let nav/copy/trust bar simply stack in DOM order (no
   `order` needed — that's already how they appear in the markup). */
@media (max-width: 640px) {
  .cx-hero { padding: 2rem 0 2.5rem; }
  .cx-hero-inner { padding: 0 1.1rem; background: #fff; }
  .cx-nav { padding-top: 0; }
  .cx-hero-copy { flex: none; text-align: center; max-width: 100%; margin: 0 auto; }
  .cx-hero-copy .cx-hero-lead { margin-left: auto; margin-right: auto; }
  .cx-hero-ctas { justify-content: center; flex-direction: column; align-items: stretch; }
  .cx-btn-lg { width: 100%; }
  .cx-trust-row { justify-content: center; }
  .cx-trustbar-inline { margin-top: 1.5rem; }
  .cx-trustbar-panel { flex-direction: column; text-align: center; padding: 1.25rem 1.1rem; }
  .cx-trust-icons { justify-content: center; }
}

/* ============================================================
   Trust bar — the last child of .cx-hero-inner (structurally inside the
   hero box now, not its own <section>), but visually still the flat,
   full-bleed light band the mockup shows: pixel-sampling its background
   color from the true left edge (x=0) to the true right edge (x=1535)
   of the reference found the same ~247,249,253 the whole way across —
   it has no margin of its own, unlike a floating card. .cx-trustbar-inline
   breaks out of .cx-hero-inner's centered max-width to reach the full
   viewport width (the standard width:100vw + left/right:50% + negative
   50vw margin technique), then .cx-trustbar-panel re-applies the same
   max-width/padding as .cx-container so the label and icons still align
   with the headline above and the pricing row below.
   ============================================================ */
.cx-trustbar-inline {
  flex: none;
  margin-top: auto;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--cx-bg-alt);
}
.cx-trustbar-panel {
  max-width: 1464px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
}
.cx-trustbar-label { font-weight: 700; color: var(--cx-navy); font-size: 0.95rem; flex: none; }

/* justify-content:space-between (not a fixed gap) so the icons spread
   across the full remaining width like the mockup, instead of clumping
   left inside their flex:1 space with a lot of empty gray to the right. */
.cx-trust-icons { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.75rem; flex: 1; }
/* A muted slate-blue, not the vibrant --cx-indigo used for buttons/links
   elsewhere: pixel-sampled off the mockup's icon strokes (~rgb(100,115,
   160), averaged across several icons), noticeably softer than the
   saturated brand indigo. */
.cx-trust-icons li { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: #6b78a3; }
.cx-trust-icons svg { width: 22px; height: 22px; }
.cx-trust-icons span { font-size: 0.76rem; color: var(--cx-navy-soft); font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .cx-trust-icons { justify-content: center; gap: 1.5rem; }
}

/* ============================================================
   Pricing
   ============================================================ */
.cx-pricing { padding: 1.5rem 0; }

.cx-pricing-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1fr 1fr 0.85fr;
  gap: 1.1rem;
  align-items: start;
}

/* 1.9rem, not the previous 1.35rem: pixel-measured against the mockup,
   the previous size rendered visibly smaller/narrower than the
   reference at matching viewport widths. */
.cx-pricing-intro h2 { font-size: 1.9rem; margin-bottom: 0.6rem; }
.cx-pricing-intro p { color: var(--cx-muted); font-size: 0.95rem; margin-bottom: 0.9rem; }
.cx-underline { display: block; width: 40px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--cx-indigo), var(--cx-purple)); }

.cx-plan {
  background: #fff;
  border: 1.5px solid var(--cx-border);
  border-radius: var(--cx-radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--cx-shadow);
}
.cx-plan-starter { border-color: #a7f3d0; }

.cx-plan-icon { margin-bottom: 0.5rem; line-height: 1; }
.cx-plan-icon svg { width: 26px; height: 26px; }
/* Starter and Pro use flat, solid-color icons directly (no badge), same
   as the mockup — only Growth gets the circular tinted badge below. */
.cx-plan-icon-leaf { color: var(--cx-green-dark); }
.cx-plan-icon-crown { color: var(--cx-purple); }
.cx-plan-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cx-plan-icon-circle svg { width: 16px; height: 16px; }
.cx-plan-icon-growth { background: #e0e7ff; color: var(--cx-indigo); }

.cx-plan h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.cx-plan-sub { font-size: 0.76rem; color: var(--cx-muted); margin-bottom: 0.5rem; }

.cx-plan-price { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.55rem; }
.cx-plan-price strong { font-family: var(--cx-font-heading); font-size: 1.5rem; color: var(--cx-navy); }
.cx-plan-price span { font-size: 0.78rem; color: var(--cx-muted); }

.cx-plan-features { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; }
.cx-plan-features li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--cx-navy-soft); font-weight: 500; }
.cx-plan-features .ck { flex: none; font-weight: 800; color: var(--cx-green-dark); }
.cx-plan-features-blue .ck { color: var(--cx-blue); }
.cx-plan-features-purple .ck { color: var(--cx-purple); }

.cx-plan-btn { width: 100%; border-radius: 12px; padding: 0.55rem 1.1rem; box-shadow: none; font-size: 0.82rem; }
.cx-plan-btn-starter { background: linear-gradient(90deg, var(--cx-green) 0%, var(--cx-green-dark) 100%); color: #fff; }
.cx-plan-btn-growth { background: linear-gradient(90deg, var(--cx-blue) 0%, #4338ca 100%); color: #fff; }
.cx-plan-btn-pro { background: linear-gradient(90deg, var(--cx-purple) 0%, #a855f7 100%); color: #fff; }

.cx-plan-custom { padding: 1.3rem 1.4rem; }
.cx-plan-custom h4 { font-size: 0.92rem; margin-bottom: 0.3rem; }
.cx-plan-custom p { font-size: 0.78rem; color: var(--cx-muted); margin-bottom: 0.65rem; }
.cx-plan-custom .cx-btn-outline { width: 100%; margin-bottom: 0.75rem; font-size: 0.82rem; padding: 0.55rem 1.1rem; }
.cx-plan-custom-note { display: flex; align-items: center; gap: 0.5rem; }
.cx-plan-custom-note svg { flex: none; width: 20px; height: 20px; color: var(--cx-navy-soft); }
.cx-plan-custom-note span { font-size: 0.72rem; color: var(--cx-muted); }

@media (max-width: 1180px) {
  .cx-pricing-grid { grid-template-columns: 1fr 1fr; }
  .cx-pricing-intro { grid-column: 1 / -1; }
  .cx-plan-custom { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cx-pricing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer band
   ============================================================ */
.cx-footer {
  background: linear-gradient(90deg, #16224a 0%, #1f3577 50%, #16224a 100%);
  padding: 1.1rem 0;
}
.cx-footer-inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.cx-footer-line { flex: 1; max-width: 220px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4)); }
.cx-footer-inner .cx-footer-line:last-child { background: linear-gradient(90deg, rgba(255,255,255,0.4), transparent); }
.cx-footer-text { color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 640px) {
  .cx-footer-line { display: none; }
  .cx-footer-text { letter-spacing: 0.1em; font-size: 0.75rem; text-align: center; }
}

/* ============================================================
   Single-screen layout — desktop only.
   Matches the mockup's proportions: the hero (nav, headline and trust
   bar, all one box over the robot background) fills the top ~62% of
   the viewport; the remaining share is split between the pricing row
   and the closing footer band, so the whole page is visible with no
   scrolling. Gated to a min-width/min-height combination so phones and
   short/cramped windows keep normal, scrollable flow instead of being
   squeezed into fractional rows — the width floor sits above 1180px
   specifically, because below that the pricing grid itself switches to
   a taller 2-column layout (see the 1180px breakpoint below) that no
   longer fits a 31%-of-viewport row. */
@media (min-width: 1200px) and (min-height: 700px) {
  .cx-page {
    height: 100dvh;
    display: grid;
    /* Row proportions measured directly off the mockup pixels (hero+trust
       bar combined 52+10=62 / pricing 31 / footer 7), not guessed — see
       README for the sampling method. */
    grid-template-rows: 62% 31% 7%;
    overflow: hidden;
  }

  .cx-hero { height: 100%; }

  .cx-pricing,
  .cx-footer {
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .cx-pricing-grid,
  .cx-footer-inner {
    width: 100%;
  }
}

/* Common laptop heights (1366x768, 1280x800, ...) give the pricing row
   less absolute pixel height than a tall desktop at the same 31% share —
   tighten the plan cards' own spacing so all four cards still clear
   that row without being clipped, on top of the single-screen rules
   above (this block must come after them to win the cascade). */
@media (min-width: 1200px) and (min-height: 700px) and (max-height: 840px) {
  /* At these shorter heights, .cx-hero-inner's `contain`-sized photo
     becomes HEIGHT-constrained rather than width-constrained (it scales
     up until it fills the box's full height, rather than stopping once
     it fills the box's width) — meaning it now reaches all the way to
     the box's bottom edge, where the opaque trust bar begins. The
     "Your Marketing On Autopilot" chip sits close enough to the photo's
     own bottom edge that it can land right on that boundary, visually
     sliced in half rather than hidden cleanly. Taller viewports don't
     have this problem (the photo stops short of the box's bottom there,
     confirmed by measuring contain's own scale factor at both ends of
     the gated range), so this extra fade is scoped to this band only —
     applying it everywhere would wash out this same chip needlessly at
     sizes where it already renders perfectly crisp. */
  .cx-hero-inner {
    background-image:
      linear-gradient(to right, #fff 0%, #fff 44%, rgba(255,255,255,0) 47%),
      linear-gradient(to bottom, rgba(255,255,255,0) 62%, #fff 80%),
      url('/img/caxo-hero-bg.webp');
    background-size: 100% 100%, 100% 100%, contain;
  }

  /* The hero's own content doesn't otherwise shrink with viewport
     height, so at these shorter heights (52% of ~700-840px is a lot
     less than 52% of a tall desktop) the vertically-centered copy can
     grow taller than the space below the nav and collide with it. */
  .cx-nav { padding-top: 0.6rem; }
  .cx-pill { margin-bottom: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.62rem; }
  .cx-hero-copy h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 0.5rem; }
  .cx-hero-lead { font-size: 0.92rem; margin-bottom: 0.75rem; }
  .cx-hero-ctas { margin-bottom: 0.6rem; gap: 1rem; }
  .cx-trust-row { gap: 1.1rem; font-size: 0.8rem; }

  .cx-pricing-grid { gap: 0.75rem; }
  .cx-pricing-intro h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
  .cx-pricing-intro p { font-size: 0.82rem; margin-bottom: 0.5rem; }

  .cx-plan, .cx-plan-custom { padding: 0.9rem 1.05rem; }
  .cx-plan-icon { margin-bottom: 0.3rem; }
  .cx-plan-icon svg { width: 21px; height: 21px; }
  .cx-plan-icon-circle { width: 28px; height: 28px; }
  .cx-plan-icon-circle svg { width: 14px; height: 14px; }
  .cx-plan h3 { font-size: 0.92rem; }
  .cx-plan-sub { font-size: 0.72rem; margin-bottom: 0.3rem; }
  .cx-plan-price { margin-bottom: 0.35rem; }
  .cx-plan-price strong { font-size: 1.25rem; }
  .cx-plan-features { gap: 0.2rem; margin-bottom: 0.4rem; }
  .cx-plan-features li { font-size: 0.75rem; }
  .cx-plan-btn { padding: 0.42rem 1rem; font-size: 0.78rem; }

  .cx-plan-custom h4 { font-size: 0.85rem; margin-bottom: 0.2rem; }
  .cx-plan-custom p { font-size: 0.72rem; margin-bottom: 0.45rem; }
  .cx-plan-custom .cx-btn-outline { padding: 0.42rem 1rem; font-size: 0.78rem; margin-bottom: 0.5rem; }
}

/* ============================================================
   Auth — Login / Signup. Standalone centered-card pages sharing the
   same tokens/buttons as the rest of the guest template, not a
   separate visual system. No client-side validation script is loaded
   (_CaxoLayout has no Scripts section, deliberately — see its own
   comment) so these rely on native HTML5 input types plus the server-
   side ModelState errors asp-validation-for already renders without
   any JS.
   ============================================================ */
.cx-auth {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--cx-bg-alt);
}

.cx-auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow);
  padding: 2.5rem;
}

.cx-auth-logo { display: inline-block; margin-bottom: 1.5rem; }
.cx-auth-logo .cx-logo-mark {
  font-family: var(--cx-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--cx-navy);
}

.cx-auth-card h1 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.cx-auth-sub { color: var(--cx-muted); font-size: 0.92rem; margin-bottom: 1.75rem; }

.cx-auth-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cx-navy);
  margin-bottom: 0.4rem;
}
.cx-auth-card form .cx-auth-label:not(:first-child) { margin-top: 1.1rem; }

.cx-auth-input {
  width: 100%;
  font-family: var(--cx-font-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  color: var(--cx-navy);
  background: #fff;
}
.cx-auth-input:focus { outline: none; border-color: var(--cx-indigo); }
.cx-auth-input::placeholder { color: #a7aec2; }

.cx-auth-hint { display: block; font-size: 0.76rem; color: var(--cx-muted); margin-top: 0.3rem; }

.cx-auth-field-error, .cx-auth-error {
  display: block;
  color: #dc2626;
  font-size: 0.78rem;
  margin-top: 0.3rem;
}
.cx-auth-error:empty { display: none; margin: 0; }
.cx-auth-error ul { list-style: none; margin: 0; padding: 0; }

.cx-auth-submit { width: 100%; margin-top: 1.5rem; padding: 0.8rem 1rem; font-size: 0.98rem; }

.cx-auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--cx-muted);
}
.cx-auth-switch a { color: var(--cx-indigo); font-weight: 700; }
.cx-auth-switch a:hover { text-decoration: underline; }

/* Forgot password */
.cx-auth-forgot { display: block; text-align: right; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--cx-indigo); }
.cx-auth-forgot:hover { text-decoration: underline; }
.cx-auth-resend { margin-top: 1rem; font-size: 0.8rem; color: var(--cx-muted); text-align: center; }
.cx-auth-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--cx-indigo); cursor: pointer; }
.cx-auth-linkbtn:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .cx-auth-card { padding: 1.75rem; }
}