/* Page-scoped rules for /canvas (v2). Shared rules live in marketing.css. */

.cv-hero-icon { margin-bottom: 24px; }
.cv-hero-scene { max-width: 820px; margin: clamp(40px, 6vw, 64px) auto 0; text-align: left; }
.cv-sec { padding: 0; }
.cv-sec .feature-row { padding: clamp(32px, 4vw, 56px) 0; }
.headline + .lede { margin-top: 16px; }
.cv-ten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
@media (max-width: 1099px) { .cv-ten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cv-ten { grid-template-columns: 1fr; } }
.cv-ten .bento-card h3 { font-size: 19px; }
.cv-after { margin-top: clamp(8px, 2vw, 24px); }
.center .btn-row { justify-content: center; }
.center .bento-card { text-align: left; }
.price-card { text-align: left; }
.price-card .btn { align-self: flex-start; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 40px auto 0; }
.cv-ten .bento-card h3 { margin-top: 12px; }
.cv-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 48px; text-align: left; }
.cv-four .ficon { width: 28px; height: 28px; color: var(--ink-3); }
.cv-four h3 { margin-top: 16px; font-size: 22px; }
.cv-four p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--ink-3); }
.cv-close .btn-row { margin-top: 28px; }
.cv-close { padding-bottom: 48px; }
.cv-fine { margin: 0 auto; padding: 8px 16px 48px; font-size: 13px; color: var(--ink-3); }

/* AI diagram: ai-standalone linked to canvas-app-bevel. */
.cv-ai-card { display: flex; justify-content: center; align-items: center; padding: 56px 32px; border-radius: 28px; background: var(--surface); border: 1px solid var(--rule); }
.cv-ai-link { flex: 1; max-width: 120px; height: 0; border-top: 2px dashed var(--ink-3); margin: 0 16px; position: relative; }
.cv-ai-link::before, .cv-ai-link::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.cv-ai-link::before { left: -5px; } .cv-ai-link::after { right: -5px; }

/* Scenes: shapes (colors follow the scene tokens, so dark mode is automatic). */
.scene-canvas { --navy-s: var(--ink); }
.t-w { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.t-wn { fill: var(--panel); stroke: var(--ink); stroke-width: 1.6; }
.t-wt { fill: var(--panel); stroke: #C9A66B; stroke-width: 2; }
.t-n { fill: var(--ink); }
.t-h { fill: color-mix(in srgb, var(--hue) 45%, var(--panel)); }
.t-t { fill: #C9A66B; }
.t-y { fill: #FBE08F; }
.t-l { fill: var(--muted); opacity: .35; }
.t-col { fill: color-mix(in srgb, var(--hue) 16%, var(--panel)); }
.t-ns { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; }

.cv-pick-panel { display: flex; flex-direction: column; padding: 1.4em 1.5em 1.4em; overflow: hidden; }
.cv-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.cv-pick { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .9em; }
.cv-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: .8em; box-shadow: 0 0 0 1px var(--line); }
.cv-thumb { display: block; flex: 1; min-height: 0; background: color-mix(in srgb, var(--hue) 13%, var(--panel)); }
.cv-thumb svg { display: block; width: 100%; height: 100%; }
.cv-card-b { padding: .6em .8em .75em; }
.cv-card-t { font-size: .98em; font-weight: 600; line-height: 1.25; }
.cv-card-d { margin-top: .2em !important; font-size: .82em; line-height: 1.35; color: var(--muted); }

.cv-lane-panel { display: flex; flex-direction: column; padding: 1.5em 1.7em 1.5em; }
.cv-lanes-wrap { margin-top: 1em; flex: 1; min-height: 0; }
.cv-lanes-svg { display: block; width: 100%; height: 100%; }

.cv-notes { margin-top: 1.2em; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9em; }
.cv-sticky { aspect-ratio: 1; display: flex; flex-direction: column; gap: .5em; padding: 1em .9em; border-radius: .3em; background: #FBE08F; transform: rotate(var(--r)); box-shadow: 0 .7em 1.1em -.8em rgba(0,0,0,.4); }
.cv-sticky i { display: block; height: .5em; border-radius: .3em; background: rgba(0,0,0,.16); }
.cv-sticky i:last-child { width: 62%; }
.cv-aff svg { display: block; width: 100%; height: auto; }

.cv-agenda { margin-top: 1.3em; }
.cv-agenda .scene-row { gap: 1em; padding: 1.25em 1.1em; }
.cv-agenda .scene-line { height: .6em; }
.cv-box { flex: none; position: relative; width: 1.35em; height: 1.35em; border-radius: .3em; box-shadow: inset 0 0 0 1.5px var(--muted); }
.cv-box.on { background: var(--ink); box-shadow: none; }
.cv-box.tan { background: #C9A66B; }
.cv-box.on::after { content: ""; position: absolute; left: .47em; top: .2em; width: .3em; height: .6em; border: solid var(--panel); border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.cv-timer { display: flex; align-items: center; gap: .9em; }
.cv-timer .cv-clock { flex: none; width: 2.6em; height: 2.6em; color: var(--ink); }
.cv-timer .scene-line { flex: 1; height: .7em; background: var(--ink); opacity: .85; }

@container scene (max-width: 540px) {
  .cv-pick-panel, .cv-lane-panel { height: auto !important; }
  .cv-lanes-svg { height: auto; }
  .cv-pick { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-thumb { flex: none; aspect-ratio: 160 / 84; }
  .cv-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-timer { position: relative !important; right: auto !important; top: auto !important; width: auto !important; }
}
@media (max-width: 1023px) { .cv-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } .cv-four { grid-template-columns: 1fr; gap: 28px; } }
.cv-sec { padding-bottom: clamp(32px, 5vw, 64px); }