/* ============================================================
   PAGE: pricing
   ============================================================ */

/* Visually-hidden utility (WCAG 4.1.2) */
body.page-pricing .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

body.page-pricing *, body.page-pricing *::before, body.page-pricing *::after, body.page-pricing { margin: 0; padding: 0; box-sizing: border-box; }

:root:has(body.page-pricing) {
  --blue-light: #4da6ff;
  --blue-dark: #0a1e3d;
  --bg: #050a14;
  --glass-border: rgba(255,255,255,0.25);
}

html:has(body.page-pricing) { scroll-behavior: smooth; overflow-x: hidden; }

body.page-pricing {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

/* ─── Nav ─── */

body.page-pricing .nav-wrapper { position: fixed; top: 24px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 0 24px; pointer-events: none; }
body.page-pricing .nav-wrapper.nav-enter { animation: navDrop 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both; }
/* The page transition must never swallow this entrance: hold it at frame 0
   while the veil is up (html.ll-loading) so the full run plays the moment it
   lifts. Same pattern as the two product heroes. */
html.ll-loading body.page-pricing .nav-wrapper.nav-enter { animation-play-state: paused; }
body.page-pricing .nav { pointer-events: auto; }

body.page-pricing .nav {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 999px; border: 1px solid var(--glass-border);
  position: relative; overflow: hidden;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}

body.page-pricing .nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  z-index: 0;
}

body.page-pricing .nav a {
  position: relative; z-index: 1; text-decoration: none; color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: 999px;
  transition: color 0.25s, background 0.25s, padding 0.35s cubic-bezier(0.23, 1, 0.32, 1); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.page-pricing .nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
body.page-pricing .nav a.active { color: #fff; background: rgba(255,255,255,0.12); }

body.page-pricing .nav-icon { display: none; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

body.page-pricing .nav-label { display: inline; overflow: hidden; max-width: 100px; transition: opacity 0.25s ease; opacity: 1; text-overflow: ellipsis; }
body.page-pricing .light-only { display: none !important; }
[data-theme="light"] body.page-pricing .dark-only { display: none !important; }
[data-theme="light"] body.page-pricing .light-only { display: inline !important; }

@media (max-width: 640px) {
  body.page-pricing .nav { gap: 3px; padding: 8px 10px; }
  body.page-pricing .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-pricing .nav-icon { display: block; }
  body.page-pricing .nav-label { max-width: 0; opacity: 0; }
  body.page-pricing .nav a.active .nav-label { max-width: 70px; opacity: 1; font-size: 12px; }
  body.page-pricing .nav a.active { padding: 9px 14px; }
}

/* ─── Shared ─── */
body.page-pricing .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
  border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all 0.3s; cursor: pointer; border: none; min-height: 44px; /* WCAG 2.5.5 */ 
}

body.page-pricing .btn-primary { background: #fff; color: var(--bg); }
body.page-pricing .btn-primary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(77,166,255,0.25); }

body.page-pricing .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
body.page-pricing .btn-outline:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); transform: translateY(-2px); }

body.page-pricing .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px; }

body.page-pricing .section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; text-align: center; color: #fff; }

body.page-pricing .section-desc { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 500px; text-align: center; margin: 0 auto 56px; line-height: 1.6; }

/* ─── Sections ─── */
body.page-pricing .page-section {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; padding: 120px 24px 80px;
}

/* ─── Plans (2026-09-17) ───
   One instrument rather than three loose cards: a single panel split into
   three columns by hairlines, with Evolve lifted out of it as its own raised
   panel because it is the plan to recommend. Every column is the same seven
   rows (head, price, terms, button, list heading, list, link) laid on one
   subgrid, so the prices, the buttons and the lists line up across plans
   whatever the copy does. The logo's window grid marks each tier: its
   squares light up in the logo's own order as a plan adds building, hosting,
   improving and extending. */
body.page-pricing .pp-switch { width: min(100%, 400px); margin: 0 auto 12px; }
body.page-pricing .pp-switch .plat-switch-face { white-space: nowrap; padding: 6px 8px; }
body.page-pricing .pp-switch-note { justify-items: center; text-align: center; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.55); margin: 0 auto 56px; max-width: 520px; }

body.page-pricing .pp-plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto) 1fr; column-gap: 0;
  width: 100%; max-width: 1080px; position: relative;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 28px;
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)), var(--bg);
}
body.page-pricing .pp-plan {
  grid-row: span 7; display: grid; grid-template-rows: subgrid; align-content: start;
  padding: 40px 34px 34px; min-width: 0; position: relative;
}
body.page-pricing .pp-plan + .pp-plan::before {
  content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; width: 1px;
  background: rgba(255,255,255,0.07);
}
body.page-pricing .pp-evolve + .pp-plan::before, body.page-pricing .pp-evolve::before { content: none; }
body.page-pricing .pp-evolve {
  margin: -22px 0; padding-top: 62px; padding-bottom: 56px; border-radius: 24px; z-index: 1;
  background: linear-gradient(180deg, rgba(77,166,255,0.10), rgba(77,166,255,0.03) 45%), var(--bg);
  border: 1px solid rgba(77,166,255,0.42);
  box-shadow: 0 40px 90px -40px rgba(77,166,255,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}

body.page-pricing .pp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body.page-pricing .pp-plan h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: #fff; line-height: 1.2; }
body.page-pricing .pp-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; line-height: 1.4;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  color: #f5b342; background: rgba(245,179,66,0.10); border: 1px solid rgba(245,179,66,0.32);
}
body.page-pricing .pp-for { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.62); margin-bottom: 26px; }

/* The window grid: four squares, lit in the logo's order and colours. */
body.page-pricing .pp-grid { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px; margin-bottom: 4px; }
body.page-pricing .pp-grid i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
body.page-pricing .pp-grid[data-lit] i:nth-child(1) { background: #4da6ff; box-shadow: none; }
body.page-pricing .pp-grid[data-lit="3"] i:nth-child(2), body.page-pricing .pp-grid[data-lit="4"] i:nth-child(2) { background: #56d9e4; opacity: 0.85; box-shadow: none; }
body.page-pricing .pp-grid[data-lit="3"] i:nth-child(3), body.page-pricing .pp-grid[data-lit="4"] i:nth-child(3) { background: rgba(77,166,255,0.4); box-shadow: none; }
body.page-pricing .pp-grid[data-lit="4"] i:nth-child(4) { background: #f5b342; box-shadow: none; }

/* The price: large tabular figures, the period quiet beside them. */
body.page-pricing .pp-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
body.page-pricing .pp-from { flex-basis: 100%; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
body.page-pricing .pp-amount {
  display: grid; overflow: hidden; font-size: clamp(44px, 4.6vw, 56px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums lining-nums;
}
body.page-pricing .pp-amount > .plat-price { grid-area: 1 / 1; white-space: nowrap; }
body.page-pricing .pp-per { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.55); }
body.page-pricing .pp-terms { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.62); margin: 10px 0 26px; }

body.page-pricing .pp-cta { width: 100%; justify-content: center; font-size: 14.5px; padding: 14px 20px; margin-bottom: 30px; }
body.page-pricing .pp-list-head { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 12px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.07); }
body.page-pricing .pp-evolve .pp-list-head { border-top-color: rgba(77,166,255,0.2); }
body.page-pricing .pp-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
body.page-pricing .pp-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.78); }
body.page-pricing .pp-list li::before {
  content: ''; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 6px;
  border-left: 1.75px solid var(--blue-light); border-bottom: 1.75px solid var(--blue-light);
  transform: rotate(-45deg);
}
body.page-pricing .pp-plus .pp-list li::before { border-color: #f5b342; }
body.page-pricing .pp-more {
  align-self: end; justify-self: start; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.72);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 4px;
  padding: 6px 0; transition: color 0.16s ease, text-decoration-color 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
  body.page-pricing .pp-more:hover { color: #fff; text-decoration-color: var(--blue-light); }
}

/* The price rolls between the two platform figures inside one clipped line. */
body.page-pricing:not([data-platform="hosted"]) .pp-amount .plat-price[data-plat="hosted"] { transform: translateY(0.45em); filter: blur(3px); }
body.page-pricing[data-platform="hosted"] .pp-amount .plat-price[data-plat="shopify"] { transform: translateY(-0.45em); filter: blur(3px); }

/* Three promises and one client's words, under the plans. */
body.page-pricing .pp-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: 100%; max-width: 1080px; margin-top: 72px; padding: 0 34px; }
body.page-pricing .pp-promise h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
body.page-pricing .pp-promise p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); }
body.page-pricing .pp-quote { max-width: 640px; margin: 64px auto 0; text-align: center; }
body.page-pricing .pp-quote blockquote { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; font-weight: 500; color: rgba(255,255,255,0.88); letter-spacing: -0.005em; }
body.page-pricing .pp-quote figcaption { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.55); }

/* ─── Add-ons ───
   A price list, not more cards: each row names the thing and gives its
   price on the right, with anything that needs saying in a quiet line
   under the name. */
body.page-pricing .addons-section { padding: 40px 24px 40px; position: relative; }
body.page-pricing .addons-section .real-content { display: flex; flex-direction: column; align-items: center; }
body.page-pricing .addons-header { text-align: center; }
body.page-pricing .addons-header .section-desc { margin-bottom: 48px; }
body.page-pricing .pp-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; width: 100%; max-width: 1000px; }
body.page-pricing .pp-addon-group h3 { font-size: 15px; font-weight: 700; color: #fff; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.12); }
body.page-pricing .pp-rows { margin: 0; }
body.page-pricing .pp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
body.page-pricing .pp-row dt { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.86); min-width: 0; }
body.page-pricing .pp-row-note { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,0.52); }
body.page-pricing .pp-row dd { margin: 0; font-size: 14.5px; font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  body.page-pricing .pp-plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 480px; border: none; background: none; row-gap: 20px; }
  body.page-pricing .pp-plan {
    grid-row: auto; display: flex; flex-direction: column; padding: 34px 28px 28px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 22px;
    background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)), var(--bg);
  }
  body.page-pricing .pp-plan + .pp-plan::before { content: none; }
  body.page-pricing .pp-evolve { order: -1; margin: 0; padding: 34px 28px 28px; }
  body.page-pricing .pp-more { align-self: flex-start; }
  body.page-pricing .pp-promises { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 480px; padding: 0 4px; margin-top: 52px; }
  body.page-pricing .pp-addons { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 520px; }
}
@media (max-width: 480px) {
  body.page-pricing .pp-plan, body.page-pricing .pp-evolve { padding: 30px 22px 24px; }
  body.page-pricing .pp-switch-note { margin-bottom: 40px; }
  body.page-pricing .pp-row { gap: 14px; }
}

/* ─── Platform switch (one, above the plans; it drives the whole page) ───
   A segmented pill on two native radios: arrow keys, the focus ring and the
   screen-reader semantics come from the browser. The thumb and every
   [data-plat] row follow <body data-platform>, which the inline script owns;
   the thumb slides the moment a segment is pressed and the rows fade out,
   swap and fade back in behind it. */
body.page-pricing .plat-switch {
  position: relative; display: flex; width: 100%; min-width: 0; margin: 0 0 20px; padding: 3px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 999px;
  background: rgba(0,0,0,0.2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
body.page-pricing .plat-switch-inline { display: inline-flex; width: min(100%, 320px); margin: 0 auto; }
body.page-pricing .plat-switch-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(77,166,255,0.22), rgba(77,166,255,0.12));
  border: 1px solid rgba(77,166,255,0.42);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.22s cubic-bezier(0.23,1,0.32,1);
}
body.page-pricing .plat-switch[data-value="shopify"] .plat-switch-thumb { transform: translateX(100%); }
body.page-pricing .plat-switch-opt { position: relative; flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; }
body.page-pricing .plat-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
body.page-pricing .plat-switch-face {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.5);
  transition: color 0.2s ease, transform 0.12s cubic-bezier(0.23,1,0.32,1);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
body.page-pricing .plat-switch-face img { width: 14px; height: 16px; opacity: 0.55; transition: opacity 0.2s ease; }
body.page-pricing .plat-switch-face img.plat-mark { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  body.page-pricing .plat-switch-opt:hover .plat-switch-face { color: rgba(255,255,255,0.8); }
}
body.page-pricing .plat-switch-opt:active .plat-switch-face { transform: scale(0.97); }
body.page-pricing .plat-switch input:checked + .plat-switch-face { color: #fff; }
body.page-pricing .plat-switch input:checked + .plat-switch-face img { opacity: 1; }
body.page-pricing .plat-switch input:focus-visible + .plat-switch-face { outline: 2px solid var(--blue-light); outline-offset: 2px; }

/* ─── Platform state: stacked variants ───
   Every element that differs between the two platforms keeps BOTH variants
   in the DOM inside a .plat-slot (grid-stacked, sized to the taller one), so
   a switch never changes layout: nothing reflows, nothing scrolls. The
   inactive variant sits invisible a few pixels off; switching crossfades the
   pair with a 2px blur bridging the overlap. Direction follows the thumb:
   moving to LaingLogic rolls content up, moving back rolls it down. */
body.page-pricing { --plat-ease: cubic-bezier(0.23, 1, 0.32, 1); }
body.page-pricing .plat-slot { display: grid; }
body.page-pricing .plat-slot > [data-plat] { grid-area: 1 / 1; min-width: 0; }
body.page-pricing [data-plat] {
  transition: opacity 0.26s var(--plat-ease), transform 0.26s var(--plat-ease), filter 0.26s var(--plat-ease), visibility 0s;
  transition-delay: min(calc(var(--i, 0) * 25ms), 150ms);
}
body.page-pricing:not([data-platform="hosted"]) [data-plat="hosted"],
body.page-pricing[data-platform="hosted"] [data-plat="shopify"] {
  opacity: 0; visibility: hidden; filter: blur(2px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease, visibility 0s 0.18s;
  transition-delay: 0s, 0s, 0s, 0.18s;
}
body.page-pricing:not([data-platform="hosted"]) [data-plat="hosted"] { transform: translateY(6px); }
body.page-pricing[data-platform="hosted"] [data-plat="shopify"] { transform: translateY(-6px); }
body.page-pricing .features-header .section-desc { margin-bottom: 28px; }

body.page-pricing .pricing-note {
  max-width: 600px; text-align: center; margin-top: 56px; padding: 28px 32px;
  background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--bg); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px;
}

body.page-pricing .pricing-note p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.7; }
body.page-pricing .pricing-note a { color: var(--blue-light); text-decoration: none; font-weight: 600; }
body.page-pricing .pricing-note a:hover { color: #fff; transition: color 0.2s; }

/* ─── Code Terminal ─── */
body.page-pricing .terminal-section {
  max-width: 680px; width: 100%; margin-top: 64px;
}
body.page-pricing .terminal-window {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,18,0.8);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
}
body.page-pricing .terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.page-pricing .terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
body.page-pricing .terminal-dot.red { background: #ff5f57; }
body.page-pricing .terminal-dot.yellow { background: #febc2e; }
body.page-pricing .terminal-dot.green { background: #28c840; }
body.page-pricing .terminal-bar-title {
  flex: 1; text-align: center; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.25); letter-spacing: 0.03em;
  margin-right: 34px;
}
body.page-pricing .terminal-body {
  padding: 20px 22px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12.5px; line-height: 1.8; overflow-x: auto;
}
body.page-pricing .terminal-body .line { white-space: nowrap; }
body.page-pricing .terminal-body .prompt { color: var(--blue-light); }
body.page-pricing .terminal-body .cmd { color: rgba(255,255,255,0.8); }
body.page-pricing .terminal-body .flag { color: #e2a832; }
body.page-pricing .terminal-body .comment { color: rgba(255,255,255,0.2); font-style: italic; }
body.page-pricing .terminal-body .success { color: #28c840; }
body.page-pricing .terminal-body .dim { color: rgba(255,255,255,0.25); }
body.page-pricing .terminal-body .path { color: #c792ea; }
body.page-pricing .terminal-body .string { color: #c3e88d; }
body.page-pricing .terminal-body .cursor {
  display: inline-block; width: 7px; height: 15px; background: var(--blue-light);
  vertical-align: text-bottom; animation: p_pricing__blink 1.1s step-end infinite; opacity: 0.7;
}

[data-theme="light"] body.page-pricing .terminal-window {
  background: rgba(248,250,252,0.95); border-color: rgba(0,0,0,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);
}
[data-theme="light"] body.page-pricing .terminal-bar { background: rgba(0,0,0,0.04); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] body.page-pricing .terminal-bar-title { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .terminal-body .cmd { color: rgba(0,0,0,0.75); }
[data-theme="light"] body.page-pricing .terminal-body .comment { color: rgba(0,0,0,0.25); }
[data-theme="light"] body.page-pricing .terminal-body .dim { color: rgba(0,0,0,0.2); }
[data-theme="light"] body.page-pricing .terminal-body .success { color: #1a8c34; }
[data-theme="light"] body.page-pricing .terminal-body .path { color: #7c4dff; }
[data-theme="light"] body.page-pricing .terminal-body .string { color: #2e7d32; }
[data-theme="light"] body.page-pricing .terminal-body .flag { color: #bf6900; }
[data-theme="light"] body.page-pricing .terminal-body .cursor { background: #2b7fd4; }

/* ─── Features ─── */
body.page-pricing .features-section { padding: 80px 24px; position: relative; }

body.page-pricing .features-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.15), transparent);
}

body.page-pricing .features-header { text-align: center; margin-bottom: 56px; }

body.page-pricing .features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px; max-width: 960px; margin: 0 auto;
}

body.page-pricing .feature-card {
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--bg); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 32px 28px;
}

body.page-pricing .feature-card:hover, body.page-pricing .feature-card:focus-within { border-color: rgba(255,255,255,0.15); transform: translateY(-2px); transition: border-color 0.3s, transform 0.3s; }

body.page-pricing .feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(77,166,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 20px;
}
body.page-pricing .feature-icon img {
  width: 24px; height: 24px; object-fit: contain;
  filter: brightness(0.85) drop-shadow(0 0 4px rgba(77,166,255,0.25));
  transition: filter 0.4s ease;
}
[data-theme="light"] body.page-pricing .feature-icon img {
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(43,127,212,0.4));
}

body.page-pricing .feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #fff; }
body.page-pricing .feature-card p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }

/* ─── Explore ─── */
body.page-pricing .explore-section { padding: 40px 24px; text-align: center; }

body.page-pricing .explore-box {
  max-width: 600px; margin: 0 auto; padding: 56px 40px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px;
}

/* ─── Glow line ─── */
body.page-pricing .cta-glow-line { text-align: center; padding: 0 24px 48px; }
body.page-pricing .cta-glow-line span {
  display: inline-block; width: 60px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
  opacity: 0;
  transition: opacity 1s ease, width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1s ease;
  filter: drop-shadow(0 0 0 rgba(77,166,255,0));
}
body.page-pricing .cta-glow-line.glow span {
  opacity: 1; width: 180px;
  filter: drop-shadow(0 0 8px rgba(77,166,255,0.6));
  animation: lineGlow 3s ease-in-out infinite 1.2s;
}

body.page-pricing .explore-box h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; color: #fff; }
body.page-pricing .explore-box p { color: rgba(255,255,255,0.45); font-size: 15px; margin-bottom: 32px; line-height: 1.6; }

body.page-pricing footer a:has(> .footer-logo) { display: inline-block; }
body.page-pricing .footer-logo {
  width: 48px; height: auto; margin-bottom: 14px;
  filter: drop-shadow(0 0 6px rgba(77,166,255,0.4));
}

body.page-pricing footer {
  text-align: center; padding: 48px 24px 32px; color: rgba(255,255,255,0.2);
  font-size: 13px; border-top: 1px solid rgba(255,255,255,0.04);
}
body.page-pricing .footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
body.page-pricing .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.25s, border-color 0.25s, transform 0.25s; }
body.page-pricing .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); transform: translateY(-2px); }
body.page-pricing .footer-social a svg { width: 14px; height: 14px; }
body.page-pricing footer .footer-links { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 4px; margin-bottom: 24px; }
body.page-pricing footer .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; font-size: clamp(11px, 3vw, 13px);
  /* inline-block + padding lifts these from a 14px-tall target to 24px,
     the WCAG 2.2 AA 2.5.8 minimum. They wrap onto two rows on a phone,
     so a short target here meant real mis-taps between legal pages. */
  display: inline-block; padding: 5px 0; }
body.page-pricing footer .footer-links a:hover { color: rgba(255,255,255,0.6); }
body.page-pricing footer .footer-sep { color: rgba(255,255,255,0.3); margin: 0 clamp(4px, 1.5vw, 10px); }
body.page-pricing footer .address { color: rgba(255,255,255,0.48); margin-bottom: 8px; }
body.page-pricing footer .footer-copy { color: rgba(255,255,255,0.46); }
[data-theme="light"] body.page-pricing .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }
[data-theme="light"] body.page-pricing footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-pricing footer .footer-copy { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing footer .footer-sep { color: rgba(0,0,0,0.45); }

@media (max-width: 700px) {
  
  body.page-pricing .skeleton-pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  body.page-pricing .skeleton-pricing-card { padding: 36px 24px; }
  body.page-pricing .skeleton-features-grid { grid-template-columns: 1fr 1fr; gap: 16px; max-width: 400px; margin: 0 auto; }
  body.page-pricing .skeleton-feature-card { padding: 24px 16px; }
  
  
  
  

  body.page-pricing .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px; max-width: 400px; margin: 0 auto;
  }
  body.page-pricing .feature-card {
    text-align: center;
    padding: 24px 16px;
    border-radius: 14px;
  }
  body.page-pricing .feature-card:hover { transform: none; }
  body.page-pricing .feature-icon {
    width: 42px; height: 42px; border-radius: 12px;
    font-size: 18px; margin: 0 auto 12px;
  }
  body.page-pricing .feature-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
  body.page-pricing .feature-card p { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.5); }

  body.page-pricing .feature-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s;
  }
  body.page-pricing .feature-card.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop (>700px): same subtle reveal-on-scroll as mobile/tablet have.
   The JS observer (pricing.html) now runs at all widths. `.revealed:hover`
   re-asserts the existing hover-lift so it still wins over the reveal end-state
   (equal specificity to the base :hover, so it must out-specify .revealed). */
@media (min-width: 701px) {
  body.page-pricing .feature-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s;
  }
  body.page-pricing .feature-card.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  body.page-pricing .feature-card.revealed:hover,
  body.page-pricing .feature-card.revealed:focus-within {
    transform: translateY(-2px);
  }
}

/* ─── Toggle ─── */
body.page-pricing .theme-toggle {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border: none; background: transparent;
  cursor: pointer; border-radius: 50%; margin-left: 2px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65); transition: color 0.25s, background 0.25s; text-decoration: none; padding: 0; font-size: 0; min-width: 34px; flex-shrink: 0;
}
body.page-pricing .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ─── Mobile header bubble (the client portal sign-in link since 2026-09-17) ─── */
body.page-pricing .theme-toggle-mobile {
  display: none; pointer-events: auto;
  width: 48px; height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  cursor: pointer; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: color 0.25s, border-color 0.25s;
  padding: 0; font-size: 0; margin-left: 8px; flex-shrink: 0;
}
body.page-pricing .theme-toggle-mobile:hover { border-color: rgba(255,255,255,0.2); }
:root:has(body.page-pricing) { --nav-scale: 1; }
body.page-pricing .nav-fit { display: flex; align-items: center; gap: 8px; width: max-content; max-width: none; transform: scale(var(--nav-scale)); transform-origin: center top; pointer-events: auto; will-change: transform; }
body.page-pricing .nav-fit.nav-fit-transitions { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }

/* ─── Mobile nav-link click animation ───
   .nav-collapsed = active label is currently at width 0.
   .nav-anim      = transition is currently enabled (only present during the
   collapse-on-click window on the outgoing page, and during the expand-on-
   load window on the incoming page).
   Without .nav-anim, refresh and breakpoint resize both snap - preserves
   the "no character-by-character reveal" guarantee from the previous fix. */
@media (max-width: 640px) {
  html.nav-collapsed:has(body.page-pricing) .nav a.active .nav-label {
    max-width: 0;
    opacity: 0;
  }
  html.nav-anim:has(body.page-pricing) .nav a.active .nav-label {
    transition: max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms ease;
  }
  /* Neutralise the active highlight during the collapsed state so all 5
     links read as plain icons (no grey background, no brighter text, no
     widened padding). The existing `transition: color 0.25s, background
     0.25s` on `.nav a` smoothly fades the styling out and back in. */
  html.nav-collapsed:has(body.page-pricing) .nav a.active {
    background: transparent;
    color: rgba(255,255,255,0.65);
    /* Symmetric padding + zero gap so the active pill collapses to a true
       circle (16px icon + 9px padding × 2 = 34×34) instead of an oval. */
    padding: 9px;
    gap: 0;
  }
  html[data-theme="light"].nav-collapsed:has(body.page-pricing) .nav a.active {
    color: rgba(0,0,0,0.6);
  }
}
body.page-pricing .nav { gap: 6px; padding: 8px 10px; }
body.page-pricing .nav a { font-size: 14px; padding: 8px 20px; gap: 6px; }
body.page-pricing .nav-icon { width: 16px; height: 16px; }
body.page-pricing .nav-label { max-width: 100px; }
body.page-pricing .theme-toggle { width: 34px; height: 34px; min-width: 34px; margin-left: 2px; }
body.page-pricing .theme-toggle-mobile { width: 48px; height: 48px; margin-left: 0; }
@media (max-width: 640px) {
  body.page-pricing .nav-fit { gap: 8px; }
  body.page-pricing .nav { gap: 3px; padding: 8px 10px; }
  body.page-pricing .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-pricing .nav a:not(.active) .nav-label { max-width: 0; opacity: 0; }
  body.page-pricing .nav a.active .nav-label { max-width: 70px; font-size: 12px; }
  body.page-pricing .nav a.active { padding: 9px 14px; }
}
[data-theme="light"] body.page-pricing .theme-toggle-mobile { border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.6); background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-pricing .theme-toggle-mobile:hover { border-color: rgba(0,0,0,0.2); }
@media (max-width: 640px) {
  body.page-pricing .nav .theme-toggle { display: none; }
  body.page-pricing .theme-toggle-mobile { display: flex; }
}

/* ─── Light mode ─── */
[data-theme="light"]:has(body.page-pricing) { --bg: #eef1f6; --blue-light: #1a66b5; --glass-border: rgba(0,0,0,0.13); }
[data-theme="light"] body.page-pricing { background: var(--bg); color: #1a1a2e; }
[data-theme="light"] body.page-pricing .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .theme-toggle:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }

[data-theme="light"] body.page-pricing .nav { background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-pricing .nav::before { opacity: 0.5; }
[data-theme="light"] body.page-pricing .nav a { color: rgba(0,0,0,0.6); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
[data-theme="light"] body.page-pricing .nav a:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-pricing .nav a.active { color: #1a1a2e; background: rgba(0,0,0,0.11); }

/* ── Adaptive nav text ── */
body.page-pricing .nav.nav-dark-adaptive a { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.3); }
body.page-pricing .nav.nav-dark-adaptive a:hover { color: rgba(0,0,0,0.9); }
body.page-pricing .nav.nav-dark-adaptive a.active { color: rgba(0,0,0,0.9); }
body.page-pricing .nav.nav-dark-adaptive .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .nav.nav-light-adaptive a { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
[data-theme="light"] body.page-pricing .nav.nav-light-adaptive a:hover { color: #fff; }
[data-theme="light"] body.page-pricing .nav.nav-light-adaptive a.active { color: #fff; }
[data-theme="light"] body.page-pricing .nav.nav-light-adaptive .theme-toggle { color: rgba(255,255,255,0.8); }

[data-theme="light"] body.page-pricing .btn-primary { background: #1a1a2e; color: #fff; }
[data-theme="light"] body.page-pricing .btn-primary:hover { background: #2a2a4e; box-shadow: 0 8px 30px rgba(43,127,212,0.2); }
[data-theme="light"] body.page-pricing .btn-outline { color: #1a1a2e; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] body.page-pricing .btn-outline:hover { border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); }
[data-theme="light"] body.page-pricing .section-label { color: #2b7fd4; }
[data-theme="light"] body.page-pricing .section-title { color: #1a1a2e; }
[data-theme="light"] body.page-pricing .section-desc { color: rgba(0,0,0,0.6); }

[data-theme="light"] body.page-pricing .plat-switch { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
[data-theme="light"] body.page-pricing .plat-switch-thumb {
  background: linear-gradient(180deg, rgba(43,127,212,0.16), rgba(43,127,212,0.1));
  border-color: rgba(43,127,212,0.4);
  box-shadow: 0 2px 8px rgba(15,30,60,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme="light"] body.page-pricing .plat-switch-face { color: rgba(0,0,0,0.55); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] body.page-pricing .plat-switch-opt:hover .plat-switch-face { color: rgba(0,0,0,0.8); }
}
[data-theme="light"] body.page-pricing .plat-switch input:checked + .plat-switch-face { color: #1a1a2e; }
[data-theme="light"] body.page-pricing .plat-switch input:focus-visible + .plat-switch-face { outline-color: #2b7fd4; }

[data-theme="light"] body.page-pricing .pricing-note {
  background: linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.02)), var(--bg); border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] body.page-pricing .pricing-note p { color: rgba(0,0,0,0.6); }
/* Plans and add-ons, light theme. */
[data-theme="light"] body.page-pricing .pp-switch-note { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .pp-plans { border-color: rgba(0,0,0,0.09); background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), var(--bg); }
[data-theme="light"] body.page-pricing .pp-plan + .pp-plan::before { background: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-pricing .pp-evolve {
  background: linear-gradient(180deg, rgba(43,127,212,0.10), rgba(43,127,212,0.02) 45%), #ffffff;
  border-color: rgba(26,102,181,0.45);
  box-shadow: 0 40px 90px -45px rgba(26,102,181,0.35), inset 0 1px 0 #ffffff;
}
[data-theme="light"] body.page-pricing .pp-plan h2,
[data-theme="light"] body.page-pricing .pp-amount,
[data-theme="light"] body.page-pricing .pp-promise h3,
[data-theme="light"] body.page-pricing .pp-addon-group h3,
[data-theme="light"] body.page-pricing .pp-row dd { color: #1a1a2e; }
[data-theme="light"] body.page-pricing .pp-for,
[data-theme="light"] body.page-pricing .pp-terms,
[data-theme="light"] body.page-pricing .pp-promise p { color: rgba(0,0,0,0.66); }
[data-theme="light"] body.page-pricing .pp-from,
[data-theme="light"] body.page-pricing .pp-per,
[data-theme="light"] body.page-pricing .pp-list-head,
[data-theme="light"] body.page-pricing .pp-row-note,
[data-theme="light"] body.page-pricing .pp-quote figcaption { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .pp-list li,
[data-theme="light"] body.page-pricing .pp-row dt { color: rgba(0,0,0,0.8); }
[data-theme="light"] body.page-pricing .pp-list-head { border-top-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-pricing .pp-evolve .pp-list-head { border-top-color: rgba(26,102,181,0.22); }
[data-theme="light"] body.page-pricing .pp-badge { color: #8a5200; background: rgba(245,179,66,0.18); border-color: rgba(176,110,0,0.4); }
[data-theme="light"] body.page-pricing .pp-grid i { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
[data-theme="light"] body.page-pricing .pp-grid[data-lit="3"] i:nth-child(3), [data-theme="light"] body.page-pricing .pp-grid[data-lit="4"] i:nth-child(3) { background: rgba(43,127,212,0.45); }
[data-theme="light"] body.page-pricing .pp-plus .pp-list li::before { border-color: #b36f00; }
[data-theme="light"] body.page-pricing .pp-more { color: rgba(0,0,0,0.72); text-decoration-color: rgba(0,0,0,0.25); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] body.page-pricing .pp-more:hover { color: #1a1a2e; text-decoration-color: #1a66b5; }
}
[data-theme="light"] body.page-pricing .pp-quote blockquote { color: rgba(0,0,0,0.86); }
[data-theme="light"] body.page-pricing .pp-addon-group h3 { border-bottom-color: rgba(0,0,0,0.14); }
[data-theme="light"] body.page-pricing .pp-row { border-bottom-color: rgba(0,0,0,0.08); }
@media (max-width: 960px) {
  [data-theme="light"] body.page-pricing .pp-plans { border: none; background: none; }
  [data-theme="light"] body.page-pricing .pp-plan { border-color: rgba(0,0,0,0.09); background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), var(--bg); }
  [data-theme="light"] body.page-pricing .pp-evolve { border-color: rgba(26,102,181,0.45); background: linear-gradient(180deg, rgba(43,127,212,0.10), rgba(43,127,212,0.02) 45%), #ffffff; }
}
[data-theme="light"] body.page-pricing .pricing-note a { color: #1a66b5; }
[data-theme="light"] body.page-pricing .pricing-note a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-pricing .features-section::before {
  background: linear-gradient(90deg, transparent, rgba(43,127,212,0.1), transparent);
}

[data-theme="light"] body.page-pricing .feature-card {
  background: linear-gradient(rgba(0,0,0,0.025), rgba(0,0,0,0.025)), var(--bg); border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] body.page-pricing .feature-card:hover { border-color: rgba(0,0,0,0.15); }
[data-theme="light"] body.page-pricing .feature-card h3 { color: #1a1a2e; }
[data-theme="light"] body.page-pricing .feature-card p { color: rgba(0,0,0,0.6); }

[data-theme="light"] body.page-pricing .feature-icon {
  background: rgba(43,127,212,0.1);
}
[data-theme="light"] body.page-pricing .explore-box {
  background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] body.page-pricing .cta-glow-line span {
  background: linear-gradient(90deg, transparent, #2b7fd4, transparent);
}
[data-theme="light"] body.page-pricing .cta-glow-line.glow span {
  filter: drop-shadow(0 0 8px rgba(43,127,212,0.4));
}

[data-theme="light"] body.page-pricing .cta-glow-line.glow span {
  animation: p_pricing__lineGlowLight 3s ease-in-out infinite 1.2s;
}

[data-theme="light"] body.page-pricing .explore-box h2 { color: #1a1a2e; }
[data-theme="light"] body.page-pricing .explore-box p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing footer { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-pricing footer .footer-logo { filter: drop-shadow(0 0 6px rgba(43,127,212,0.3)); }
[data-theme="light"] body.page-pricing footer .address { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-pricing footer .footer-sep { color: rgba(0,0,0,0.45); }
[data-theme="light"] body.page-pricing .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-pricing .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }

/* ─── Skeleton ─── */
body.page-pricing .skeleton-text { height: 12px; margin-bottom: 8px; width: 80%; }
body.page-pricing .skeleton-text.short { width: 40%; }
body.page-pricing .skeleton-text.medium { width: 60%; }
body.page-pricing .skeleton-heading { height: 28px; width: 50%; margin-bottom: 12px; border-radius: 8px; }
body.page-pricing .skeleton-heading.large { height: 42px; width: 70%; }
body.page-pricing .skeleton-pill { height: 28px; width: 100px; border-radius: 999px; }
body.page-pricing .skeleton-bar { height: 4px; width: 100%; border-radius: 999px; }
body.page-pricing .skeleton-circle { width: 30px; height: 30px; border-radius: 50%; }
body.page-pricing .skeleton-amount { height: 36px; width: 120px; margin: 0 auto 8px; border-radius: 8px; }
body.page-pricing .skeleton-btn { height: 48px; width: 200px; border-radius: 14px; }
body.page-pricing .skeleton-input { height: 44px; width: 100%; border-radius: 12px; }
body.page-pricing .skeleton-card { border-radius: 20px; padding: 24px; min-height: 120px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); }
body.page-pricing .skeleton-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; gap: 12px; }
body.page-pricing .skeleton-row .skeleton-text { margin-bottom: 0; }
body.page-pricing .skeleton-dot { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
body.page-pricing .skeleton-dots-row { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
/* .real-content is display:contents when loaded, so its children are flex
   items of the flex .page-section - which blockifies the inline
   .section-label and honours its 16px margin-bottom. The skeleton copy must
   lay out in the same formatting context or the label stays inline, drops
   that margin, and the block runs 15px short. Hence display:contents here
   too - and because opacity has no effect on a display:contents box, the
   fade moves onto the children (same pattern as pageContact.css). */
body.page-pricing .skeleton-content { display: contents; }
body.page-pricing .skeleton-content > * { opacity: 0; transition: opacity 0.2s; }
body.page-pricing.show-skeleton .skeleton-content > * { opacity: 1; }
body.page-pricing .skeleton-pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; width: 100%; align-items: start; }
body.page-pricing .skeleton-pricing-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 44px 36px; display: flex; flex-direction: column; }
body.page-pricing .skeleton-pricing-card .sk-accordions { margin-top: 8px; margin-bottom: 24px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; }
body.page-pricing .skeleton-pricing-card .sk-accordion-row { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.page-pricing .skeleton-pricing-card .sk-accordion-row:last-child { border-bottom: none; }
body.page-pricing .skeleton-pricing-card .sk-feature-row { padding: 10px 0; }
body.page-pricing .skeleton-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
body.page-pricing .skeleton-feature-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 32px 28px; }
body.page-pricing.loaded .skeleton-content { display: none !important; }
body.page-pricing:not(.loaded) .real-content { display: none; }
body.page-pricing.loaded .real-content { display: contents; }
/* sk-mask - text-preserving skeleton shimmer that inherits exact layout from real content */

body.page-pricing .skeleton-content .plat-switch-thumb { visibility: hidden !important; }

/* Respect prefers-reduced-motion (WCAG 2.2 AA 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  body.page-pricing *, body.page-pricing *::before, body.page-pricing *::after, body.page-pricing {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.page-pricing .skip-link {position:fixed;top:-48px;left:0;background:#2b7fd4;color:#fff;padding:10px 16px;z-index:99999;text-decoration:none;font-weight:600;border-radius:0 0 4px 0;transition:top .2s ease,opacity .2s ease;font-size:14px;opacity:0;pointer-events:none;white-space:nowrap}
body.page-pricing .skip-link:focus, body.page-pricing .skip-link:focus-visible {top:0;opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:-4px}

/* Global :focus-visible - keyboard accessibility (WCAG 2.4.7) */
body.page-pricing a:focus-visible, body.page-pricing button:focus-visible, body.page-pricing [role="button"]:focus-visible, body.page-pricing input:focus-visible, body.page-pricing select:focus-visible, body.page-pricing textarea:focus-visible, body.page-pricing .btn:focus-visible, body.page-pricing .theme-toggle:focus-visible, body.page-pricing .theme-toggle-mobile:focus-visible {
  outline: 2px solid var(--blue-light, #4da6ff);
  outline-offset: 2px;
  border-radius: 4px;
}
body.page-pricing .btn:focus-visible { border-radius: 999px; }