/* ============================================================
   pricing-scene — the Pricing step of "Connect & set up".

   One product window, drawn once: a 1280x720 canvas (.app) that
   is scaled to fit the window it sits in — scaled, never cropped,
   never zoomed. Nothing pans; what moves is the page itself: the
   sidebar selection changes, panes swap, a sheet opens, rows land, a
   Claude window slides in and types.

   This is the one scene on the page that is driven by a script
   (assets/js/pricing-scene.js) rather than by CSS keyframes: a
   42.5-second story with typed text, a table that fills, and a
   sidebar that has to be measured cannot be written as a
   keyframe. It still obeys the page's motion contract — it runs
   only while the scene carries .is-visible, stops under
   :root[data-motion="paused"], and rests on its final frame under
   prefers-reduced-motion.

   Facts drawn from data/09_Pricing and data/03_Channel_Management:
   sidebar section "Pricing" with pages Listings pricing / Group
   Pricing Rules; Channel Management has no sub-pages (Listings
   Mapping and Channels are in-page tabs); Sync starts Off.
   Claude writes pricing via MCP (Elif, 8 Sep 2026).
   ============================================================ */

[data-scene="price"] .mac { position: relative; }
/* The screen is a plain white stage, not the empty-slot hatch. */
[data-scene="price"] .mac-screen { position: relative; display: block; overflow: hidden; background: var(--card); aspect-ratio: 16 / 9; }
/* In the pinned frame every screen is the same fixed-height box;
   the window fills it and the canvas is fitted inside by the script. */
@media (min-width: 1024px) {
  .js .step [data-scene="price"] .mac { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .js .step [data-scene="price"] .mac-screen { aspect-ratio: auto; min-height: 0; }
}
[data-scene="price"] .mac-screen img { max-width: none; }

/* ============================================================
   The app canvas: 1280x720, scaled to the window by --k.
   ============================================================ */
[data-scene="price"] .app { --k: 1; position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--k)); font-size: 16px; line-height: 1.35; color: #0F172A;
  --app-line: #E5E9F0; --app-fill: #F6F8FB; --app-ink-2: #475569; --app-ink-3: #64748B; --app-green: var(--cta); --app-green-bg: var(--blue-wash);
  --app-on: var(--blue-wash); --app-on-ink: var(--blue-deep); --app-off: #FEE2E2; --app-off-ink: #B91C1C; --app-cool: #DBEAFE; --app-cool-ink: #1E40AF; --app-warm: #FEF3C7; --app-warm-ink: #92400E;
  --pl: #E0293C; --pl-bg: #FDECEE; --pl-ink: #9F1526; }

/* One frame, drawn once. Nothing in here is redrawn or crossfaded —
   that is what keeps this from reading as a slideshow. */
[data-scene="price"] .pw-frame { position: absolute; inset: 0; display: grid; grid-template-columns: 262px minmax(0,1fr); grid-template-rows: 56px 1fr; background: #fff; }

/* ---------- sidebar: furniture, and one pill that travels ---------- */
[data-scene="price"] .side { grid-row: 1 / 3; display: flex; flex-direction: column; min-height: 0; overflow: clip; padding: 22px 16px 18px; border-right: 1px solid var(--line-soft); }
[data-scene="price"] .search { display: flex; align-items: center; gap: 9px; height: 38px; margin-bottom: 16px; padding: 0 13px; border-radius: var(--r-pill); background: var(--app-fill); color: var(--text-muted); font-size: 14px; }
[data-scene="price"] .search svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
[data-scene="price"] .side-nav { position: relative; flex: 1; }
[data-scene="price"] .side-nav li { display: flex; align-items: center; gap: 11px; height: 34px; margin-bottom: 11px; padding-inline: 5px; border-radius: var(--r-chip); transition: background .3s var(--ease), transform .4s var(--spring); }
[data-scene="price"] .side-nav li i { width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--sky); flex: none; }
[data-scene="price"] .side-nav li em { height: 8px; width: var(--w, 60%); border-radius: var(--r-pill); background: var(--sky); }
[data-scene="price"] .side-nav li b { margin-left: auto; width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--sky); }
/* the section you are in: one full-width pill that travels its rail,
   with the pages inside that section folded out underneath it */
[data-scene="price"] .pill { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-chip); background: var(--nav-on); color: #fff; font-size: 14px; font-weight: 500; overflow: hidden;
  transform: translateY(var(--py, 0px)); transition: transform .62s var(--spring); }
[data-scene="price"] .pill .lab { grid-area: 1 / 1; display: flex; align-items: center; gap: 9px; white-space: nowrap; opacity: 0; transition: opacity .26s var(--ease); }
[data-scene="price"] .pill { display: grid; grid-auto-flow: column; grid-template-columns: 1fr auto; }
[data-scene="price"] .pill .lab.on { opacity: 1; }
[data-scene="price"] .pill svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-scene="price"] .pill .chev { grid-area: 1 / 2; align-self: center; width: 15px; height: 15px; opacity: 0; rotate: 0deg; transition: opacity .3s var(--ease), rotate .5s var(--spring); }
[data-scene="price"] .pill.open .chev { opacity: .85; rotate: 90deg; }
[data-scene="price"] .side-nav .subs { display: grid; grid-template-rows: 0fr; height: auto; margin-bottom: 0; padding: 0; opacity: 0;
  transition: grid-template-rows .55s var(--spring), margin-bottom .55s var(--spring), opacity .3s var(--ease); }
[data-scene="price"] .side-nav .subs.open { grid-template-rows: 1fr; margin-bottom: 11px; opacity: 1; }
[data-scene="price"] .side-nav .subs > div { overflow: hidden; display: grid; gap: 4px; padding-top: 8px; }
[data-scene="price"] .sub-item { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 12px 0 20px; border-radius: 8px; font-size: 14px; color: var(--app-ink-2); }
[data-scene="price"] .sub-item.on { background: var(--app-green-bg); color: var(--app-green); font-weight: 600; }
[data-scene="price"] .sub-item svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-scene="price"] .side-user { display: flex; align-items: center; gap: 11px; padding-top: 18px; }
[data-scene="price"] .side-user .av { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 600; color: var(--slate); background: var(--sky); }
[data-scene="price"] .side-user b { font-weight: 500; color: var(--ink); font-size: 15px; }
[data-scene="price"] .side-user em { display: block; height: 7px; width: 88px; margin-top: 6px; border-radius: var(--r-pill); background: var(--sky); }

/* ---------- top bar: furniture that resizes, never redraws ---------- */
[data-scene="price"] .topbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border-bottom: 1px solid var(--app-line); }
[data-scene="price"] .topbar .r { margin-left: auto; display: flex; align-items: center; gap: 18px; }
[data-scene="price"] .bar { display: block; height: 8px; width: var(--w, 80px); border-radius: var(--r-pill); background: var(--sky); transition: width .54s var(--spring), opacity .35s var(--ease); }
[data-scene="price"] .dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); transition: opacity .35s var(--ease); }
[data-scene="price"] .ic { width: 20px; height: 20px; border-radius: 6px; background: #CBD5E1; opacity: .8; }

/* ---------- the two pages, in one cell ---------- */
[data-scene="price"] .stack { position: relative; grid-column: 2; grid-row: 2; overflow: hidden; }
[data-scene="price"] .pane { position: absolute; inset: 0; padding: 24px 32px; opacity: 0; translate: 0 14px; transition: opacity .34s var(--ease), translate .6s var(--spring); }
[data-scene="price"] .pane.on { opacity: 1; translate: 0 0; }
[data-scene="price"] .pane.leave { translate: 0 -12px; }

/* ---------- pressable things, without a cursor ----------
   The control lifts a little when the hand is on it and dips when it
   is pressed. That is the whole affordance: no drawn pointer, no click
   ring, nothing the product itself would not do. */
:is([data-scene="price"], [data-scene="mcp"]) .tapish { transition: transform .34s var(--spring), box-shadow .34s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
:is([data-scene="price"], [data-scene="mcp"]) .tapish.hov { transform: translateY(-2px) scale(1.06); box-shadow: 0 14px 28px -12px rgba(14,21,38,.5); }
:is([data-scene="price"], [data-scene="mcp"]) .tapish.hit { transform: scale(.97); box-shadow: 0 3px 8px -6px rgba(14,21,38,.4); }
[data-scene="price"] .side-nav li.tapish.hov { transform: scale(1.04); box-shadow: none; background: var(--app-fill); }
[data-scene="price"] .side-nav li.tapish.hit { transform: scale(.99); background: var(--sky); }

[data-scene="price"] .ph { display: flex; align-items: flex-start; gap: 12px; } [data-scene="price"] .ph :is(h2,.as-h2) { font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
[data-scene="price"] .ph .r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
[data-scene="price"] .fld { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--app-line); border-radius: 10px; background: #fff; }
[data-scene="price"] .fld .bar { background: var(--app-fill); }
[data-scene="price"] .press { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 10px; background: var(--app-green); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
[data-scene="price"] .press.ghost { background: #fff; color: #0F172A; border: 1px solid var(--app-line); } [data-scene="price"] .press.ghost .bar { background: var(--app-fill); }
[data-scene="price"] .press.blue { background: #fff; color: var(--blue); border: 1px solid var(--app-line); }
[data-scene="price"] .press.blue.hov { background: var(--blue-wash); border-color: color-mix(in oklab, var(--blue) 35%, transparent); }
/* the page's own primary action is the product's indigo CTA */
[data-scene="price"] .press.cta { background: var(--cta); color: var(--cta-ink); }
[data-scene="price"] .press.hov { background: color-mix(in oklab, var(--app-green) 88%, #fff); }
[data-scene="price"] .press.ghost.hov { background: var(--app-fill); }
[data-scene="price"] .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
[data-scene="price"] .chip.on { background: var(--app-on); color: var(--app-on-ink); } [data-scene="price"] .chip.off { background: var(--app-off); color: var(--app-off-ink); }
[data-scene="price"] .chip.grey { background: var(--app-fill); color: var(--app-ink-2); font-weight: 500; } [data-scene="price"] .chip.pl { background: var(--pl-bg); color: var(--pl-ink); }
[data-scene="price"] .chip.pl img { width: 12px; height: 12px; }
[data-scene="price"] .seg { display: inline-flex; padding: 4px; border-radius: 10px; background: var(--app-fill); font-size: 14px; }
[data-scene="price"] .seg span { padding: 6px 16px; border-radius: 8px; color: var(--app-ink-2); display: flex; gap: 8px; align-items: center; } [data-scene="price"] .seg span.on { background: #fff; color: #0F172A; font-weight: 600; box-shadow: 0 1px 2px rgba(14,21,38,.08); }
[data-scene="price"] .seg u { text-decoration: none; padding: 0 7px; border-radius: 10px; background: var(--app-cool); color: var(--app-cool-ink); font-size: 12px; font-weight: 600; }
[data-scene="price"] .filters { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; } [data-scene="price"] .filters .r { margin-left: auto; display: flex; gap: 10px; }
[data-scene="price"] [data-on] { opacity: 0; translate: 0 10px; transition: opacity .45s var(--ease), translate .55s var(--spring); }
[data-scene="price"] [data-on].on { opacity: 1; translate: 0 0; }
[data-scene="price"] .dots { display: inline-flex; gap: 4px; height: 20px; align-items: center; }
[data-scene="price"] .dots i { width: 6px; height: 6px; border-radius: 50%; background: #6B7280; opacity: .35; animation: dot 1s infinite; }
[data-scene="price"] .dots i:nth-child(2) { animation-delay: .15s; } [data-scene="price"] .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: 1; } }

/* ---------- page 1 · Listings pricing ---------- */
[data-scene="price"] .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; }
[data-scene="price"] .tbl th { text-align: left; font-weight: 500; color: var(--app-ink-2); padding: 0 10px 10px 0; border-bottom: 1px solid var(--app-line); white-space: nowrap; overflow: hidden; }
[data-scene="price"] .tbl th.c, [data-scene="price"] .tbl td.c { text-align: center; }
[data-scene="price"] .tbl td { padding: 0 10px 0 0; height: 40px; border-bottom: 1px solid var(--app-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-scene="price"] .tbl td:first-child { font-weight: 500; } [data-scene="price"] .tbl td .grp { color: var(--app-ink-2); }
[data-scene="price"] .tbl tr[data-row] { display: none; } [data-scene="price"] .tbl tr[data-row].on { display: table-row; }
[data-scene="price"] .tbl tr[data-row].on td { animation: land .9s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes land { 0% { background: var(--blue-wash); opacity: 0; translate: 0 8px; } 45% { opacity: 1; translate: 0 0; } 100% { background: transparent; } }
[data-scene="price"] .occ { display: inline-block; min-width: 54px; padding: 3px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 600; text-align: center; }
[data-scene="price"] .occ.lo { background: var(--app-off); color: var(--app-off-ink); } [data-scene="price"] .occ.mid { background: var(--app-warm); color: var(--app-warm-ink); } [data-scene="price"] .occ.hi { background: var(--app-green-bg); color: var(--app-green); }
[data-scene="price"] .sy { position: relative; display: inline-grid; } [data-scene="price"] .sy .chip { grid-area: 1 / 1; transition: opacity .34s var(--ease); }
[data-scene="price"] .sy .chip.on, [data-scene="price"] .sy .chip.pl { opacity: 0; }
[data-scene="price"] tr.syn .sy .chip.off { opacity: 0; } [data-scene="price"] tr.syn .sy .chip.on { opacity: 1; }
[data-scene="price"] tr.plm .sy .chip { opacity: 0; } [data-scene="price"] tr.plm .sy .chip.pl { opacity: 1; }
[data-scene="price"] .empty { display: grid; justify-items: center; gap: 8px; padding: 62px 0 40px; text-align: center; color: var(--app-ink-2); }
[data-scene="price"] .empty .box { width: 64px; height: 64px; border-radius: 16px; background: var(--app-fill); display: grid; place-items: center; margin-bottom: 8px; }
[data-scene="price"] .empty .box i { width: 26px; height: 20px; border: 2px solid #94A3B8; border-radius: 4px; }
[data-scene="price"] .empty b { font-size: 17px; font-weight: 600; color: #0F172A; } [data-scene="price"] .empty p { font-size: 14px; max-width: 420px; }
[data-scene="price"] .load { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--app-fill); overflow: hidden; }
[data-scene="price"] .load i { position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: var(--blue); animation: bar 1.1s var(--ease) infinite; }
@keyframes bar { to { left: 100%; } }
[data-scene="price"] .skel td i { display: block; height: 14px; border-radius: 6px; background: var(--app-fill); animation: sk 1.2s ease-in-out infinite; }
@keyframes sk { 50% { opacity: .45; } }
[data-scene="price"] .toast { position: absolute; left: 50%; bottom: 22px; translate: -50% 20px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background: #0F172A; color: #fff; font-size: 14px; box-shadow: var(--sh-float); opacity: 0; transition: opacity .35s var(--ease), translate .55s var(--spring); }
[data-scene="price"] .toast.on { opacity: 1; translate: -50% 0; } [data-scene="price"] .toast i { width: 18px; height: 18px; border-radius: 50%; background: var(--app-on); color: var(--app-on-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-style: normal; }
[data-scene="price"] .toast small { color: rgba(255,255,255,.6); }

/* ---------- page 2 · Channel Management ---------- */
[data-scene="price"] .plcard { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid var(--app-line); border-radius: 12px; font-size: 14px; }
[data-scene="price"] .plcard img { width: 22px; height: 22px; } [data-scene="price"] .plcard b { font-weight: 600; }
[data-scene="price"] .plcard .stt { display: grid; } [data-scene="price"] .plcard .stt em { font-style: normal; font-size: 12px; color: var(--app-ink-3); transition: color .3s; } [data-scene="price"] .plcard .stt em.ok { color: var(--app-on-ink); font-weight: 600; }
[data-scene="price"] .chtbl th { font-size: 13px; } [data-scene="price"] .chtbl td { height: 42px; } [data-scene="price"] .chtbl .lg { display: inline-flex; align-items: center; gap: 6px; } [data-scene="price"] .chtbl .lg img { width: 14px; height: 14px; object-fit: contain; }
[data-scene="price"] .chtbl td .chip { min-width: 46px; justify-content: center; font-size: 11.5px; padding: 2px 8px; }
[data-scene="price"] .chtbl td small { display: block; font-weight: 400; font-size: 12px; color: var(--app-ink-3); } [data-scene="price"] .chtbl td:first-child { line-height: 1.2; }
[data-scene="price"] .pw-veil { position: absolute; inset: 0; z-index: 21; background: rgba(14,21,38,.30); opacity: 0; transition: opacity .4s var(--ease); } [data-scene="price"] .pw-veil.in { opacity: 1; }
[data-scene="price"] .sheet { position: absolute; z-index: 22; left: 50%; top: 56%; width: 560px; display: grid; gap: 16px; padding: 22px 24px; border-radius: 16px; background: #fff; box-shadow: var(--sh-float), 0 0 0 1px rgba(14,21,38,.06);
  translate: -50% -46%; scale: .97; opacity: 0; transition: opacity .38s var(--ease), scale .55s var(--spring), translate .55s var(--spring); }
[data-scene="price"] .sheet.in { opacity: 1; scale: 1; translate: -50% -50%; }
[data-scene="price"] .sheet .h { display: flex; align-items: center; gap: 12px; } [data-scene="price"] .sheet .h img { width: 28px; height: 28px; } [data-scene="price"] .sheet .h b { font-size: 18px; font-weight: 600; } [data-scene="price"] .sheet .h small { display: block; font-size: 13px; color: var(--app-ink-3); }
[data-scene="price"] .sheet .opt { display: grid; gap: 8px; font-size: 14px; } [data-scene="price"] .sheet .opt div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; transition: border-color .3s; }
[data-scene="price"] .sheet .opt div i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #CBD5E1; transition: border-width .3s var(--spring), border-color .3s; }
[data-scene="price"] .sheet .opt div.on { border-color: var(--app-green); } [data-scene="price"] .sheet .opt div.on i { border: 5px solid var(--app-green); }
[data-scene="price"] .sheet .opt div em { font-style: normal; margin-left: auto; font-size: 12.5px; color: var(--app-ink-3); }
[data-scene="price"] .sheet .key { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--app-line); border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--app-ink-2); min-height: 44px; transition: border-color .3s, color .3s; }
[data-scene="price"] .sheet .key.on { border-style: solid; color: #0F172A; } [data-scene="price"] .sheet .key .press { margin-left: auto; min-height: 30px; padding: 0 12px; font-size: 13px; }
[data-scene="price"] .sheet .note { font-size: 13px; color: var(--app-ink-3); } [data-scene="price"] .sheet .note b { color: #0F172A; font-weight: 500; }
[data-scene="price"] .sheet .f { display: flex; justify-content: flex-end; gap: 10px; }
[data-scene="price"] .pull { position: absolute; z-index: 20; right: 32px; top: 100px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--app-line); box-shadow: var(--sh-card); font-size: 13.5px; opacity: 0; translate: 0 -8px; transition: opacity .35s var(--ease), translate .5s var(--spring); }
[data-scene="price"] .pull.on { opacity: 1; translate: 0 0; } [data-scene="price"] .pull .sp { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--app-line); border-top-color: var(--pl); animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
[data-scene="price"] .pull.ok .sp { display: none; } [data-scene="price"] .pull .ok { display: none; color: var(--app-on-ink); font-weight: 600; } [data-scene="price"] .pull.ok .ok { display: inline; } [data-scene="price"] .pull.ok .run { display: none; }

/* ---------- the Claude window ---------- */
[data-scene="price"] .cw { position: absolute; z-index: 25; right: 36px; top: 46px; width: 440px; height: 600px; display: grid; grid-template-rows: 40px auto 1fr auto; border-radius: 14px; background: #FAF9F5; color: #141413; border: 1px solid #E5E3DA; box-shadow: 0 24px 60px -18px rgba(14,21,38,.32), 0 0 0 1px rgba(14,21,38,.04); overflow: hidden; font-size: 14.5px; line-height: 1.45;
  translate: 44px 0; scale: .985; opacity: 0; transition: opacity .5s var(--ease), translate .8s var(--spring), scale .8s var(--spring); }
[data-scene="price"] .cw.on { translate: 0 0; scale: 1; opacity: 1; }
[data-scene="price"] .cw.away { translate: 500px 0; opacity: 0; }
[data-scene="price"] .cw-bar { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #ECEAE2; }
[data-scene="price"] .cw-bar i { width: 9px; height: 9px; border-radius: 50%; } [data-scene="price"] .cw-bar i:nth-child(1) { background: #F0625A; } [data-scene="price"] .cw-bar i:nth-child(2) { background: #F5BE4F; } [data-scene="price"] .cw-bar i:nth-child(3) { background: #61C554; }
[data-scene="price"] .cw-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
[data-scene="price"] .cw-head .spark { width: 26px; height: 26px; flex: 0 0 auto; } [data-scene="price"] .cw-head .spark svg { width: 26px; height: 26px; }
[data-scene="price"] .cw-head b { font-size: 16px; font-weight: 600; letter-spacing: -.1px; }
[data-scene="price"] .cw-head u { text-decoration: none; padding: 2px 8px; border-radius: 10px; background: #EFEDE4; font-size: 11.5px; color: #6B6A63; }
[data-scene="price"] .cw .mcp { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px; border-radius: 8px; background: #EFEDE4; font-size: 12px; color: #4B4A43; width: max-content; }
[data-scene="price"] .cw .mcp i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-deep); }
[data-scene="price"] .cw-body { display: grid; align-content: start; gap: 14px; padding: 6px 16px 0; overflow: hidden; }
[data-scene="price"] .m.u { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #EFEDE4; }
[data-scene="price"] .m.u .caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: #141413; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
[data-scene="price"] .m.a { display: grid; gap: 10px; }
[data-scene="price"] .m.a > p { font-family: var(--mock-font); font-size: 15px; line-height: 1.5; color: #141413; }
[data-scene="price"] .tool { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #E5E3DA; border-radius: 10px; background: #fff; font-size: 13px; }
[data-scene="price"] .tool .h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: #141413; }
[data-scene="price"] .tool .h i { width: 16px; height: 16px; border-radius: 4px; background: var(--app-green); flex: 0 0 auto; }
[data-scene="price"] .tool .h .st { margin-left: auto; font-family: var(--sans); font-size: 12px; color: #6B6A63; display: flex; align-items: center; gap: 6px; }
[data-scene="price"] .tool .h .st .sp { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #D9D6CB; border-top-color: #D97757; animation: spin .8s linear infinite; }
[data-scene="price"] .tool.done .h .st .sp { display: none; } [data-scene="price"] .tool .h .st .ok { display: none; color: var(--blue-deep); font-weight: 600; } [data-scene="price"] .tool.done .h .st .ok { display: inline; }
[data-scene="price"] .tool ul { display: grid; gap: 4px; color: #4B4A43; font-size: 12.5px; } [data-scene="price"] .tool ul li { display: flex; gap: 8px; } [data-scene="price"] .tool ul li b { font-weight: 500; color: #141413; min-width: 84px; }
[data-scene="price"] .tool .lines { display: grid; gap: 4px; margin-top: 2px; } [data-scene="price"] .tool .lines span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6B6A63; transition: color .35s var(--ease); }
[data-scene="price"] .tool .lines span i { width: 5px; height: 5px; border-radius: 50%; background: #D9D6CB; transition: background .35s, scale .4s var(--spring); }
[data-scene="price"] .tool .lines span.ok { color: #141413; } [data-scene="price"] .tool .lines span.ok i { background: var(--blue-deep); scale: 1.25; }
[data-scene="price"] .cw-in { margin: 12px 16px 14px; padding: 10px 12px; border: 1px solid #E5E3DA; border-radius: 12px; background: #fff; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #8E8C83; }
[data-scene="price"] .cw-in i { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; background: #D97757; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 14px; }
[data-scene="price"] .say .txt, [data-scene="price"] .say .tl { display: none; } [data-scene="price"] .say.said .txt, [data-scene="price"] .say.said .tl { display: grid; } [data-scene="price"] .say.said .dots { display: none; }

/* ---------- the page's motion contract ---------- */
/* Loops inside the window only run while the scene is on screen
   and motion is on; the script stops its clock under the same two
   conditions. Reduced motion: no loops at all, and the script
   parks the story on its last frame. */
.js [data-scene="price"]:not(.is-visible) *,
:root[data-motion="paused"] [data-scene="price"] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  [data-scene="price"] *, [data-scene="price"] *::before, [data-scene="price"] *::after { animation: none !important; transition: none !important; }
}
/* Show stay economics in the external Claude conversation, not an invented PMS page. */
[data-scene="price"] .stay-comparison-chat{display:none;padding:20px 26px;overflow:auto;min-height:0;flex:1;font-size:17px;line-height:1.5}
[data-scene="price"].stay-comparison .cw-body{display:none}
[data-scene="price"].stay-comparison .stay-comparison-chat{display:block}
[data-scene="price"] .stay-question{padding:14px 18px;border-radius:14px;background:#eeece4;margin-bottom:20px}
[data-scene="price"] .stay-answer{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
[data-scene="price"] .stay-answer p{margin:0 0 14px}
[data-scene="price"].stay-answer-visible .stay-answer{opacity:1;transform:none}
/* Pricing controls stay fixed on hover and press. */
[data-scene="price"] .tapish,
[data-scene="price"] .side-nav li{transition:background .2s ease,border-color .2s ease,color .2s ease}
[data-scene="price"] .tapish:is(.hov,.hit,:hover,:active),
[data-scene="price"] .side-nav li.tapish:is(.hov,.hit,:hover,:active){transform:none;translate:none;scale:none;box-shadow:none}
[data-scene="price"] .tapish.hit{filter:brightness(.97)}
[data-scene="price"].pricing-creating [data-say="5"]>.txt{visibility:hidden}