/* Pricing page — page-scoped styles, prefix `pr-`. Builds on bundle.css (tokens, h1–h4, .container,
   .section, .caption, .paragraph, .button, .text-field). Rebuilt from the design export in
   sandbox/pricing.html; breakpoints follow the site (991 / 767 / 479). */
:root {
  --pr-blue-tint: #eef4ff;
  --pr-hover-tint: #f4f7fb;
  --pr-shadow-card: 0 2px 5px #1133ff2e;
  --pr-shadow-float: 0 20px 50px #1133ff24, 0 2px 5px #1133ff1f;
  --pr-ai: #a9541f;
  --pr-chart-blue: #2b63e8;
  --pr-board-ground: #0a0d0f;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.pr-page { color: var(--background-default); }
.pr-page .container { color: var(--background-default); }
.pr-page :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.pr-page img { display: block; max-width: 100%; }
.pr-sec { padding-top: 6rem; padding-bottom: 6rem; }
.pr-p { font-size: 17px; line-height: 25px; font-weight: 300; color: var(--background-opacity-80); margin: 0; }
.pr-hd { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.pr-hd .pr-p { margin-top: 0; }
.pr-hd .caption { margin: 0 0 12px; text-align: center; }
.pr-h4 { font-size: 28px; line-height: 32px; letter-spacing: -1px; font-weight: 400; margin: 0; color: var(--background-default); }
.pr-page h1, .pr-page h2, .pr-page h3 { color: var(--background-default); }
.pr-btn-full { width: 100%; text-align: center; }
.pr-opt { display: inline-block; font-size: 13px; line-height: 18px; padding: 4px 10px; border-radius: 999px; background: var(--pr-blue-tint); color: #0052cc; }

/* ---- hero ---- */
.pr-hero { background: linear-gradient(#fff3, #fff3), url("../images/pricing/hero-background.webp") center / cover no-repeat; }
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; padding-top: 128px; padding-bottom: 88px; }
.pr-hero-copy h1 { max-width: 720px; margin-bottom: 18px; letter-spacing: -3px; line-height: 62px; }
.pr-hero-sub { margin: 0; font-size: 18px; line-height: 24px; }
.pr-promises { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; max-width: 520px; }
.pr-promises li { display: flex; gap: 16px; align-items: flex-start; background: #ffffff9e; border-radius: 16px; padding: 16px 18px; }
.pr-promises img { width: 40px; height: 40px; flex-shrink: 0; }
.pr-promises b { display: block; font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: -.4px; }
.pr-promises span { display: block; font-size: 15.5px; line-height: 22px; font-weight: 300; color: var(--background-opacity-80); }

.pr-form { background: var(--contrast-primary); border-radius: 24px; padding: 32px; box-shadow: var(--pr-shadow-float); scroll-margin-top: 96px; }
.pr-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-span2 { grid-column: 1 / -1; }
.pr-field { display: grid; gap: 6px; }
.pr-field .input-label-dark { font-size: 14px; line-height: 18px; font-weight: 400; }
.pr-field .text-field { width: 100%; margin-bottom: 0; min-height: 46px; height: 46px; padding: 0 12px; border-color: #0606062e; font-weight: 300; }
.pr-field select.text-field { appearance: auto; }
.pr-fine { font-size: 13px; line-height: 18px; color: var(--contrast-tertiary-dark); margin: 12px 0 0; text-align: center; }
.pr-form-open { display: none; }
.pr-form.is-closed .pr-form-open { display: flex; align-items: center; justify-content: center; }
.pr-form.is-closed .pr-form-fields, .pr-form.is-closed .pr-fine { display: none; }
.pr-form-status { margin: 12px 0 0; font-size: 15px; line-height: 20px; text-align: center; }
.pr-form-status:empty { display: none; }

.pr-integ { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--contrast-divider-dark); }
.pr-integ-h { display: block; font-size: 14px; line-height: 20px; color: var(--contrast-tertiary-dark); margin-bottom: 10px; }
.pr-fsm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pr-fsm a { background: var(--pr-hover-tint); border: 1px solid #0606060f; border-radius: 10px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 8px; text-decoration: none; transition: background-color .25s; }
.pr-fsm a:hover { background: var(--pr-blue-tint); }
.pr-fsm img { max-height: 20px; width: auto; }
.pr-fsm-custom span { font-size: 12px; line-height: 16px; color: var(--brand-primary); white-space: nowrap; }

/* ---- logo marquee ---- */
.pr-trust { padding: 48px 0 56px; }
.pr-trust-h { text-align: center; font-size: 18px; line-height: 24px; margin: 0 0 28px; padding: 0 20px; }
.pr-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pr-mq-track { display: flex; align-items: center; gap: 64px; width: max-content; margin: 0; padding: 0; list-style: none; animation: prMarquee 45s linear infinite; }
.pr-mq-track li { flex: 0 0 auto; display: flex; align-items: center; height: 60px; }
.pr-mq-track img { height: var(--h); width: auto; }
@keyframes prMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- "Unlocking with Bluon" board ---- */
#one-model { padding-bottom: 48px; }
.pr-rtu { position: relative; width: 100%; aspect-ratio: 1600 / 1100; border-radius: 24px; overflow: hidden; background: var(--pr-board-ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.pr-rtu-in { position: absolute; left: 0; top: 0; width: 1600px; height: 1100px; transform-origin: 0 0; }
/* the board's intro sequence waits until it is on screen (js/pricing.js adds .is-on) */
.pr-js .pr-rtu:not(.is-on) .pr-rtu-in * { animation-play-state: paused !important; }
@keyframes prDcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes prDcDraw { to { stroke-dashoffset: 0; } }
@keyframes prDcPulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes prDcSpin { to { transform: rotate(360deg); } }
@keyframes prDcScan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .55; } 90% { opacity: .55; } 100% { transform: translateY(420px); opacity: 0; } }
@keyframes prDcBlink { 50% { opacity: 0; } }
@keyframes prDcSpot { 0% { opacity: 0; transform: translateY(6px); } 1.2% { opacity: 1; transform: none; } 6.2% { opacity: 1; transform: none; } 7.1% { opacity: 0; } 100% { opacity: 0; } }
@keyframes prDcSpotHi { 0% { opacity: 0; } 1.2% { opacity: 1; } 6.2% { opacity: 1; } 7.1% { opacity: 0; } 100% { opacity: 0; } }

/* ---- platform ---- */
#platform { padding-top: 24px; }
#platform .pr-hd { margin-bottom: 32px; }
.pr-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pr-big { background: var(--contrast-primary); border-radius: 16px; overflow: hidden; box-shadow: var(--pr-shadow-card); display: flex; flex-direction: column; }
.pr-big-txt { padding: 32px 32px 8px; display: flex; flex-direction: column; gap: 10px; }
.pr-big .pr-p { font-size: 15.5px; line-height: 22px; }
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.pr-stats dt { font-size: 34px; line-height: 38px; letter-spacing: -1.5px; color: var(--brand-primary); }
.pr-stats dd { margin: 2px 0 0; font-size: 14px; line-height: 18px; font-weight: 300; color: var(--background-opacity-80); }
.pr-stream { position: relative; flex: 1; min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pr-stream canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-stream img { position: relative; width: 70%; max-width: 520px; height: auto; padding: 8px 16px 24px; }

/* phone: compact tile grid (the explorer below takes over from 768px) */
.pr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.pr-tiles4 { margin-top: 12px; }
.pr-tile { background: var(--contrast-primary); border-radius: 16px; box-shadow: var(--pr-shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.pr-tile > img, .pr-tile-img img, .pr-tile-am { flex: 1; width: 100%; height: auto; min-height: 96px; object-fit: cover; }
.pr-tile-img { position: relative; flex: 1; display: flex; }
.pr-tile-img .pr-opt { position: absolute; top: 8px; left: 8px; margin: 0; background: var(--contrast-primary); }
.pr-tile-t { padding: 9px 10px; }
.pr-tile-t h3 { font-size: 15px; line-height: 19px; letter-spacing: -.3px; font-weight: 400; margin: 0; }
.pr-tile-am { background: var(--background-secondary); padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 10px; overflow: hidden; }
.pr-am-h { display: flex; justify-content: space-between; font-weight: 500; color: var(--background-default); padding: 0 2px 2px; }
.pr-am-h span:last-child { color: #6b7280; font-weight: 400; }
.pr-tile-am .pr-am-h span:last-child { display: none; }
.pr-am-r { display: flex; align-items: center; gap: 5px; background: var(--contrast-primary); border-radius: 6px; padding: 3px 6px; font-family: DM Mono, monospace; color: var(--brand-primary); font-size: 9.5px; }
.pr-am-r span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-am-r i { font-style: normal; font-family: DM Sans, sans-serif; font-size: 9px; color: var(--background-default); background: #f1f4f9; border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.pr-am-r i.is-hot { background: #fdecdc; color: #9a3412; }
.pr-tile-am .pr-am-r i:last-child { display: none; }

/* feature explorer (tablet + desktop) */
.pr-fx { display: none; }
.pr-fx-list { display: flex; flex-direction: column; gap: 20px; }
.pr-fx-group { display: flex; flex-direction: column; gap: 2px; }
.pr-fx-group .caption { margin: 0 0 6px; padding-left: 16px; }
.pr-fx-btn { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--background-opacity-80); font: 400 20px / 26px DM Sans, sans-serif; letter-spacing: -.5px; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .25s, color .25s; }
.pr-fx-n { flex-shrink: 0; width: 24px; font-family: DM Mono, monospace; font-size: 13px; letter-spacing: .5px; color: #06060666; transition: color .25s; }
.pr-fx-name { flex: 1; min-width: 0; }
.pr-fx-btn .pr-opt { margin: 0; font-size: 12px; line-height: 16px; padding: 3px 9px; }
.pr-fx-arr { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--brand-primary); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.pr-fx-btn:hover { background: var(--pr-hover-tint); color: var(--background-default); }
.pr-fx-btn[aria-pressed="true"] { background: var(--pr-blue-tint); color: var(--background-default); }
.pr-fx-btn[aria-pressed="true"] .pr-fx-n { color: var(--brand-primary); }
.pr-fx-btn[aria-pressed="true"] .pr-fx-arr, .pr-fx-btn:hover .pr-fx-arr { opacity: 1; transform: none; }
.pr-fx-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--brand-primary); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.pr-fx.is-auto .pr-fx-btn[aria-pressed="true"] .pr-fx-bar { opacity: .6; animation: prFxBar 4.5s linear forwards; }
.pr-fx.is-paused .pr-fx-btn[aria-pressed="true"] .pr-fx-bar { animation-play-state: paused; }
@keyframes prFxBar { to { transform: scaleX(1); } }

.pr-fx-stage { position: sticky; top: 96px; background: var(--contrast-primary); border-radius: 24px; overflow: hidden; box-shadow: var(--pr-shadow-card); }
.pr-fx-view { position: relative; aspect-ratio: 3 / 2; background: var(--background-secondary); overflow: hidden; }
.pr-fx-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.03); transition: opacity .45s ease, transform .7s ease, visibility 0s linear .45s; }
.pr-fx-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .7s ease, visibility 0s; }
.pr-fx-pane img { width: 100%; height: 100%; object-fit: cover; }
.pr-fx-cap { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-top: 1px solid var(--contrast-divider-dark); }
.pr-fx-cap-n { font-family: DM Mono, monospace; font-size: 14px; font-weight: 500; letter-spacing: .7px; color: var(--brand-primary); }
.pr-fx-cap-t { flex: 1; font-size: 22px; line-height: 28px; letter-spacing: -.6px; }
.pr-fx-nav { display: flex; gap: 8px; }
.pr-fx-nav button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--contrast-divider-dark); border-radius: 24px; background: var(--contrast-primary); cursor: pointer; transition: background-color .25s; }
.pr-fx-nav button:hover { background: var(--pr-blue-tint); }
.pr-fx-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--background-default); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pr-fx-am { display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 100%; padding: 8% 9%; font-size: 15px; }
.pr-fx-am .pr-am-h { font-size: 16px; padding: 0 4px 6px; }
.pr-fx-am .pr-am-r { padding: 14px 16px; border-radius: 12px; gap: 10px; font-size: 16px; box-shadow: 0 1px 3px #1133ff14; }
.pr-fx-am .pr-am-r i { font-size: 13px; padding: 3px 9px; border-radius: 6px; }

/* scroll reveal (only once js/pricing.js has run) */
.pr-js .pr-rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.pr-js .pr-rv.is-in { opacity: 1; transform: none; }

/* ---- Bluon vs AI ---- */
.pr-ai { background: var(--background-secondary); }
.pr-ai-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: end; margin-bottom: 40px; }
.pr-charts { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; }
.pr-cc { background: var(--contrast-primary); border: 1px solid var(--contrast-divider-dark); border-radius: 36px; padding: 40px 36px 24px; }
.pr-cc h3 { font-size: 30px; line-height: 36px; letter-spacing: -1.2px; }
.pr-cc-s { font-size: 16px; line-height: 24px; font-weight: 300; color: var(--contrast-tertiary-dark); margin: 6px 0 0; }
.pr-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 18px; font-size: 16px; line-height: 24px; }
.pr-lg span { display: inline-flex; align-items: center; gap: 8px; }
.pr-lg-ai { height: 20px; width: auto; filter: grayscale(1) opacity(.7); }
.pr-chart { width: 100%; min-height: 300px; }
.pr-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pr-chart .gl { stroke: #e6e9ef; stroke-width: 1; }
.pr-chart .ax { font: 400 13px DM Sans, sans-serif; fill: var(--contrast-tertiary-dark); }
.pr-chart .axh { font: 500 11px DM Sans, sans-serif; fill: var(--contrast-tertiary-dark); letter-spacing: .8px; }
.pr-chart .xl { font: 400 13.5px DM Sans, sans-serif; fill: #06060699; }
.pr-chart .vl { font: 400 15px DM Sans, sans-serif; fill: var(--background-default); }
.pr-fn { font-size: 13px; line-height: 18px; color: var(--contrast-tertiary-dark); margin: 16px 0 0; }

/* ---- FAQ ---- */
.pr-faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.pr-faq-list { display: grid; gap: 10px; }
.pr-qa { border: 1px solid var(--contrast-divider-dark); border-radius: 16px; padding: 0 24px; background: var(--contrast-primary); }
.pr-qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; font-size: 20px; line-height: 26px; letter-spacing: -.4px; cursor: pointer; }
.pr-qa summary::-webkit-details-marker { display: none; }
.pr-qa summary svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-primary); transition: transform .15s ease; }
.pr-qa[open] summary svg { transform: rotate(45deg); }
.pr-qa .pr-p { padding: 0 0 22px; max-width: 640px; }

/* ---- closing CTA ---- */
.pr-cta-wrap { padding: 0 0 64px; }
.pr-cta { background: var(--brand-primary); border-radius: 32px; padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pr-page .pr-cta h2 { color: var(--contrast-primary); max-width: 640px; }
.pr-cta .pr-p { color: var(--contrast-secondary); margin-top: 12px; }

/* ---- responsive ---- */
@media screen and (min-width: 768px) {
  .pr-fx-mob { display: none; }
  .pr-fx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; margin-top: 56px; }
}
@media screen and (min-width: 992px) {
  .pr-big { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; border-radius: 24px; }
  .pr-big-txt { padding: 48px 0 48px 48px; gap: 12px; }
  .pr-big .pr-h4 { font-size: 32px; line-height: 40px; }
  .pr-big .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--contrast-divider-dark); }
  .pr-big .pr-stats dt { font-size: 44px; line-height: 48px; letter-spacing: -2px; }
  .pr-big .pr-stats dd { font-size: 15px; margin-top: 4px; }
  .pr-stream { min-height: 420px; height: 100%; }
  .pr-stream img { width: 86%; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .pr-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; }
}
@media screen and (max-width: 991px) {
  .pr-hero-grid, .pr-ai-top, .pr-faq { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pr-hero-grid { padding-top: 112px; }
  .pr-charts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pr-cta { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
  .pr-hero-copy h1 { line-height: 3.5rem; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .pr-fx { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .pr-fx-stage { position: relative; top: auto; order: -1; }
  .pr-fx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .pr-fx-group { display: contents; }
  .pr-fx-group .caption { grid-column: 1 / -1; margin: 16px 0 4px; }
  .pr-fx-group:first-child .caption { margin-top: 0; }
}
@media screen and (max-width: 767px) {
  .pr-sec { padding-top: 4rem; padding-bottom: 4rem; }
  #platform { padding-top: 16px; }
  .pr-hero-copy h1 { line-height: 108%; letter-spacing: -2px; }
  .pr-hero-grid { padding-bottom: 56px; }
  .pr-promises li { padding: 14px; }
  .pr-form { padding: 24px 18px; border-radius: 20px; }
  .pr-form-fields { grid-template-columns: minmax(0, 1fr); }
  .pr-trust-h { font-size: 16px; }
  .pr-rtu { border-radius: 16px; }
  .pr-h4 { font-size: 24px; line-height: 28px; }
  .pr-big-txt { padding: 24px 20px 4px; }
  .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-stats dt { font-size: 28px; }
  .pr-ai-top { gap: 16px; }
  .pr-cc { border-radius: 24px; padding: 24px 18px 14px; }
  .pr-cc h3 { font-size: 24px; line-height: 28px; }
  .pr-lg { font-size: 14px; gap: 8px 14px; margin: 16px 0 10px; }
  .pr-lg-ai { height: 16px; }
  .pr-faq { gap: 20px; }
  .pr-qa { padding: 0 18px; }
  .pr-qa summary { font-size: 17px; line-height: 23px; min-height: 60px; }
  .pr-cta { padding: 32px 22px; border-radius: 24px; }
  .pr-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-mq-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 28px 48px; padding: 0 20px; }
  .pr-mq-track .pr-mq-dup { display: none; }
  .pr-mq { -webkit-mask-image: none; mask-image: none; }
  /* board: skip straight to the settled frame (labels and leader lines drawn, no looping highlights) */
  .pr-rtu-in * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; }
  .pr-fx-pane, .pr-fx-pane.is-on, .pr-js .pr-rv { transition: none; transform: none; }
  .pr-js .pr-rv { opacity: 1; }
  .pr-qa summary svg { transition: none; }
}