/* Site blocks (includes/site_blocks.php, plans/parent-site-v3.md): Top Menu, Screenshot Frame, Feature Row, Badge Strip,
   Card Grid, Scroll Story, Compare Table, Site Reviews, Footer, plus Questions and Call to Action on the sales shell.
   Loaded by both public shells: company sites (assets/website.css tokens --w-*) and TwistedTurf.com (body.ps, style.css
   tokens). Tokens only, so a Style change restyles them. Nothing wraps: long words end in "…"; phones stack. */
.site, .ps { --sb-brand: var(--w-brand, var(--blue, #1E90FF)); --sb-accent: var(--w-accent, var(--grass, #5CDB3A)); --sb-ink: var(--w-ink, var(--ink));
  --sb-muted: var(--w-muted, var(--muted, #6A6E74)); --sb-line: var(--w-line, var(--line, #D9DBDE)); --sb-tint: var(--w-tint, var(--paper, #F2F3F5));
  --sb-card: var(--card, #fff); --sb-radius: var(--w-radius, 14px); --sb-btn-radius: var(--w-btn-radius, 10px); }
/* The sales shell has no website.css: give blocks the same frame there. */
.ps .w-block { padding: 56px 0; }
.ps .w-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ps .w-block h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
.ps .w-block .w-sub { color: var(--sb-muted); font-size: 1.05rem; max-width: 62ch; margin: 0 0 1.2em; }
.ps .w-block.v-tint { background: var(--sb-tint); }
.ps .w-block.v-dark { background: var(--sb-ink); color: #fff; }
.ps .w-block.v-dark .w-sub { color: rgba(255,255,255,.75); }
.ps .w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--sb-btn-radius); background: var(--sb-brand); color: #fff; font-weight: 650; white-space: nowrap; text-decoration: none; }
.ps .w-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .35em; }
.ps .w-hero { padding-top: 64px; text-align: center; }
.ps .w-hero .w-in { display: grid; gap: 36px; justify-items: center; }
.ps .w-hero-words { max-width: 860px; min-width: 0; width: 100%; }
.ps .w-hero .w-sub { margin-left: auto; margin-right: auto; font-size: 1.15rem; }
.ps .w-hero-img { border-radius: var(--sb-radius); box-shadow: 0 30px 70px rgba(0,0,0,.2); width: 100%; max-width: 1000px; height: auto; }
.ps .w-faq details { border-bottom: 1px solid var(--sb-line); padding: 14px 0; }
.ps .w-faq summary { cursor: pointer; font-weight: 650; list-style: none; }
.ps .w-faq summary::-webkit-details-marker { display: none; }
.ps .w-faq summary::after { content: "+"; float: right; color: var(--sb-muted); }
.ps .w-faq details[open] summary::after { content: "−"; }
.ps .w-faq details p { color: var(--sb-muted); margin: 8px 0 0; }
.ps .w-cta { background: var(--sb-ink); color: #fff; }
.ps .w-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ps .w-cta-row h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Top Menu: sticky glass bar */
.w-block.w-topnav, .ps .w-block.w-topnav { position: sticky; top: 0; z-index: 20; padding: 0; background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--sb-line); }
/* Top Menu as the page's first block (Oct 23, 2026, Travis: "Formatting up top"): edge to edge from the very top, not a
   card floating 20px down inside the page padding, and padded below the iPhone status bar / notch (viewport-fit=cover) so
   the bar is never hidden under it. */
.ps .ps-main > .w-block.w-topnav:first-child { margin: -20px calc(-1 * max(18px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(18px, env(safe-area-inset-left, 0px))); padding-top: env(safe-area-inset-top, 0px); }
.sb-bar { display: flex; align-items: center; gap: 18px; height: 64px; flex-wrap: nowrap; }
.sb-brand { font-weight: 750; font-size: 1.15rem; letter-spacing: -.02em; color: var(--sb-ink) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: none; } /* never shrinks: the full company name always shows (Oct 20 2026) */
.sb-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.sb-nav > a, .sb-drop > summary { white-space: nowrap; padding: 8px 12px; border-radius: var(--sb-btn-radius); color: var(--sb-ink); text-decoration: none; font-size: .95rem; cursor: pointer; }
.sb-nav > a:hover, .sb-drop > summary:hover { background: var(--sb-tint); text-decoration: none; }
.sb-drop { position: relative; }
.sb-drop > summary { list-style: none; }
.sb-drop > summary::-webkit-details-marker { display: none; }
.sb-drop > summary::after { content: " ▾"; color: var(--sb-muted); }
.sb-drop-list, .sb-menu-list { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; min-width: 230px; max-width: 86vw; padding: 6px; background: var(--sb-card); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); box-shadow: 0 16px 40px rgba(0,0,0,.14); z-index: 21; }
.sb-drop-list a, .sb-menu-list a { padding: 9px 12px; border-radius: 8px; color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.sb-drop-list a:hover, .sb-menu-list a:hover { background: var(--sb-tint); }
.sb-menu-list .sb-sub { padding-left: 26px; color: var(--sb-muted); }
.sb-menu { display: none; position: relative; margin-left: auto; }
.sb-menu > summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--sb-line); border-radius: var(--sb-btn-radius); white-space: nowrap; }
.sb-menu > summary::-webkit-details-marker { display: none; }
.sb-menu-list { max-height: 70vh; overflow-y: auto; }
.sb-go { flex: none; }
@media (max-width: 900px) { .sb-nav { display: none; } .sb-menu { display: block; } }
.sb-menu-list .sb-menu-go { display: none; }
/* Small phones: the main button moves into the Menu so the name never gets cut */
@media (max-width: 480px) { .sb-bar { gap: 10px; } .sb-go { display: none; } .sb-menu-list .sb-menu-go { display: block; color: var(--sb-brand); font-weight: 650; } }
/* Screenshot Frame: a computer and a phone */
.sb-shots { position: relative; display: grid; grid-template-columns: 1fr; padding-right: 12%; margin-top: 18px; }
.sb-shots figure { margin: 0; }
.sb-desk { border: 10px solid var(--ink); border-top-width: 26px; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.22); overflow: hidden; background: var(--ink); }
.sb-phone { position: absolute; right: 0; bottom: -24px; width: 24%; border: 8px solid var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.28); background: var(--ink); }
.sb-shots img { display: block; width: 100%; height: auto; }
.sb-desk, .sb-phone { transition: transform .35s ease; }
@media (hover: hover) { .sb-shots:hover .sb-desk { transform: perspective(1400px) rotateY(-3deg); } .sb-shots:hover .sb-phone { transform: translateY(-6px); } }
/* Feature Row: words and a picture, rows take turns */
.sb-feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.sb-feat.sb-flip .sb-feat-words { order: 2; }
.sb-feat-pic { margin: 0; }
.sb-feat-pic img { width: 100%; height: auto; border-radius: var(--sb-radius); border: 1px solid var(--sb-line); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.sb-ticks { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 8px; }
.sb-ticks li { position: relative; padding-left: 28px; }
.sb-ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sb-accent); font-weight: 800; }
/* Badge Strip */
.sb-strip { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sb-strip li { display: inline-flex; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: var(--sb-card); border: 1px solid var(--sb-line); font-weight: 600; font-size: .92rem; }
.sb-strip li::before { content: "✓"; color: var(--sb-accent); margin-right: 8px; font-weight: 800; }
.sb-strip .one-line, .sb-table .one-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Card Grid */
.sb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sb-card { display: block; padding: 20px; border-radius: var(--sb-radius); background: var(--sb-card); border: 1px solid var(--sb-line); color: var(--sb-ink); text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; min-width: 0; }
.sb-card h3 { margin: 0 0 6px; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-card p { margin: 0; color: var(--sb-muted); }
a.sb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.v-dark .sb-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
/* Scroll Story: steps scroll past one pinned 4:3 frame (pictures never jump); words stay full contrast, the step in view gets a
   brand bar; a "1 of 4" rail under the frame. Phones: swipe cards with dots (the row scrolls inside itself, never the page). */
.sb-story { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; }
.sb-step { min-height: min(55vh, 460px); display: flex; flex-direction: column; justify-content: center; padding-left: 18px; border-left: 3px solid var(--sb-line); transition: border-color .3s ease; }
.sb-step.on { border-left-color: var(--sb-brand); }
.sb-step-n { font-size: .8rem; font-weight: 650; color: var(--sb-muted); margin-bottom: 6px; }
.sb-step h3 { font-size: 1.4rem; margin: 0 0 8px; }
.sb-step p { color: var(--sb-ink); margin: 0; }
.sb-story-stage { position: sticky; top: 90px; align-self: start; }
.sb-story-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sb-radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.16); background: var(--sb-tint); }
.sb-story-pic { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease; }
.sb-story-pic.on { opacity: 1; }
.sb-story-pic .sb-frame { height: 100%; border-radius: 0; }
.sb-story-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* a page saved before the frame (old markup) */
.sb-story-stage:has(> .sb-story-pic) { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--sb-radius); }
.sb-story-rail { margin: 10px 0 0; color: var(--sb-muted); font-size: .9rem; text-align: right; }
.sb-story-rail b { color: var(--sb-ink); }
.sb-story-inline, .sb-story-dots { display: none; }
/* Compare Table */
.sb-table-wrap { overflow: hidden; border: 1px solid var(--sb-line); border-radius: var(--sb-radius); background: var(--sb-card); }
.sb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sb-table th, .sb-table td { padding: 12px 16px; border-bottom: 1px solid var(--sb-line); text-align: left; }
.sb-table thead th { background: var(--sb-tint); font-size: .9rem; }
.sb-table tr:last-child th, .sb-table tr:last-child td { border-bottom: 0; }
.sb-table td { color: var(--sb-muted); }
.sb-table td.sb-yes { color: var(--sb-ink); font-weight: 600; }
/* Site Reviews */
.sb-stars { font-size: 1.1rem; color: var(--orange); margin: 0 0 14px; }
.sb-stars b, .sb-stars span { color: var(--sb-ink); }
.sb-rev q { display: block; margin: 8px 0 10px; color: var(--sb-ink); }
.sb-star-row { color: var(--orange); letter-spacing: 2px; }
.sb-rev-empty { padding: 28px; border: 1px dashed var(--sb-line); border-radius: var(--sb-radius); text-align: center; background: var(--sb-card); }
.sb-rev-empty h3 { margin: 0 0 6px; }
.sb-rev-empty p { margin: 0; color: var(--sb-muted); }
.sb-rev-form { margin-top: 18px; }
.sb-rev-form > summary { list-style: none; cursor: pointer; display: inline-flex; }
.sb-rev-form > summary::-webkit-details-marker { display: none; }
.sb-rev-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; max-width: 640px; }
.sb-rev-form label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.sb-rev-form input, .sb-rev-form select, .sb-rev-form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--sb-line); border-radius: 10px; background: var(--sb-card); color: var(--sb-ink); min-width: 0; }
.sb-rev-form .sb-wide, .sb-rev-form button, .sb-rev-form .sb-fine { grid-column: 1 / -1; }
.sb-rev-form button { justify-self: start; }
.sb-rev-msg { font-weight: 600; color: var(--sb-brand); }
.sb-fine { color: var(--sb-muted); font-size: .85rem; margin: 0; }
/* Footer */
.w-block.w-footer, .ps .w-block.w-footer { padding: 36px 0; border-top: 1px solid var(--sb-line); }
.sb-foot { display: grid; gap: 12px; }
.sb-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sb-foot-links a { color: var(--sb-muted); white-space: nowrap; }
/* Fade-up as a block scrolls in (Motion: Fade Up; assets/js/site-blocks.js adds .is-in). Reduced motion: no movement. */
.mo-fade { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mo-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mo-fade { opacity: 1; transform: none; transition: none; } .sb-shots *, .sb-card, .sb-story-pic { transition: none; } }
.is-preview .mo-fade { opacity: 1; transform: none; }
/* Phones: stack */
@media (max-width: 760px) {
  .ps .w-block { padding: 40px 0; }
  .ps .w-in { padding: 0 18px; }
  .sb-feat, .sb-story { grid-template-columns: 1fr; gap: 22px; }
  .ps .w-hero { padding-top: 36px; }
  .ps .w-hero .w-sub { font-size: 1rem; }
  .ps .w-block.w-topnav { padding: 0; }
  .sb-feat.sb-flip .sb-feat-words { order: 0; }
  .sb-story-stage { display: none; }
  .sb-story { display: block; }
  .sb-story-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 4px; }
  .sb-story-track::-webkit-scrollbar { display: none; }
  .sb-step { flex: 0 0 86%; min-width: 0; min-height: 0; scroll-snap-align: center; padding: 16px; border: 1px solid var(--sb-line); border-radius: var(--sb-radius); background: var(--sb-card); justify-content: flex-start; }
  .sb-step.on { border-color: var(--sb-line); }
  .sb-step h3 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-story-inline { display: block; margin-top: 12px; }
  .sb-story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .sb-story-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-line); transition: background .2s ease, width .2s ease; }
  .sb-story-dots i.on { width: 22px; border-radius: 4px; background: var(--sb-brand); }
  .sb-rev-form form { grid-template-columns: 1fr; }
  .ps .w-cta-row { flex-direction: column; align-items: flex-start; }
  /* Compare Table on phones: each row is a small card, label on top, the two answers side by side with their column names */
  .sb-table thead { display: none; }
  .sb-table, .sb-table tbody { display: block; }
  .sb-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--sb-line); }
  .sb-table tr:last-child { border-bottom: 0; }
  .sb-table tbody th { grid-column: 1 / -1; border: 0; padding: 12px 14px 2px; }
  .sb-table td { border: 0; padding: 2px 14px 12px; min-width: 0; font-size: .92rem; }
  .sb-table td::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--sb-muted); font-weight: 600; }
  .sb-shots { padding-right: 18%; }
  .sb-phone { width: 30%; }
}
/* [Parent Site] Ask Sprout (includes/website.php web_ask_sprout_html, assets/js/site-ask.js; Tracker item 658, item 7): the
   mascot button bottom right and its small question panel. Sales shell only (body.ps). */
.ps .sa-wrap { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: grid; justify-items: end; gap: 10px; }
.ps .sa-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; border: 1px solid var(--sb-line); border-radius: 999px; background: var(--sb-card); color: var(--sb-ink); font-weight: 650; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.16); cursor: pointer; }
.ps .sa-fab .ttm { --ttm-size: 32px; }
.ps .sa-panel { width: min(360px, calc(100vw - 32px)); max-height: min(480px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--sb-card); border: 1px solid var(--sb-line); border-radius: var(--sb-radius); box-shadow: 0 20px 50px rgba(0,0,0,.22); overflow: hidden; }
.ps .sa-panel[hidden] { display: none; }
.ps .sa-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sb-line); }
.ps .sa-head .ttm { --ttm-size: 26px; }
.ps .sa-head b { flex: 1; min-width: 0; }
.ps .sa-x { color: var(--sb-muted); --x-size: 36px; } /* shared X close (Tracker 880) */
.ps .sa-log { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.ps .sa-log p { margin: 0; padding: 8px 12px; border-radius: 12px; max-width: 88%; overflow-wrap: anywhere; }
.ps .sa-bot { background: var(--sb-tint); color: var(--sb-ink); justify-self: start; }
.ps .sa-me { background: var(--sb-brand); color: #fff; justify-self: end; }
.ps .sa-log a { font-weight: 650; }
.ps .sa-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--sb-line); }
.ps .sa-form input { flex: 1; min-width: 0; min-height: 44px; }
.ps .sa-wrap.is-open .sa-fab span:last-child { display: none; }
@media (max-width: 480px) { .ps .sa-fab span:last-child { display: none; } .ps .sa-fab { padding: 0 8px; } }
/* [Parent Site] Phone Menu rows (Task 775, Travis Oct 21 2026): rows keep their own height and never squeeze or stretch when Safari's bar shrinks on the first scroll; the list scrolls inside a height set by the small viewport (svh), not the live screen height. */
.sb-menu-list > a, .sb-drop-list > a { flex: none; }
.sb-menu-list { max-height: 70vh; max-height: min(70svh, 600px); }
/* Sales story blocks (plans/sales-story.md, Oct 23 2026) */
/* Fixed-ratio frames: a picture or a filler slot keeps its shape before it loads (no layout shift). */
.sb-frame { display: block; position: relative; width: 100%; overflow: hidden; border-radius: var(--sb-radius); background: var(--sb-tint); }
.sb-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-frame.r-1x1 { aspect-ratio: 1 / 1; } .sb-frame.r-4x3 { aspect-ratio: 4 / 3; } .sb-frame.r-16x9 { aspect-ratio: 16 / 9; } .sb-frame.r-9x16 { aspect-ratio: 9 / 16; }
.sb-filler { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--sb-line); background: repeating-linear-gradient(135deg, var(--sb-tint) 0 14px, var(--sb-card) 14px 28px); }
.sb-filler > span { max-width: 90%; padding: 6px 12px; border-radius: 999px; background: var(--sb-card); color: var(--sb-muted); font-size: .8rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-hero .sb-frame { max-width: 1000px; }
/* Proof spots ([PROOF: ...] / [QUOTE: ...]): editor preview only; the public page leaves them out until filled. */
.sb-proof { display: inline-block; max-width: 100%; padding: 2px 8px; border: 1px dashed var(--orange, #F08A24); border-radius: 6px; color: var(--sb-muted); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* Quick Pick: square picture cards in one row; computers show them all, phones swipe inside the row. */
.sb-qp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.sb-qp-card { display: grid; gap: 10px; min-width: 0; color: var(--sb-ink); text-decoration: none !important; }
.sb-qp-card .sb-frame { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { a.sb-qp-card:hover .sb-frame { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.14); } }
.sb-qp-words { display: grid; gap: 2px; min-width: 0; }
.sb-qp-words span { color: var(--sb-muted); font-size: .9rem; }
.sb-qp .one-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-qp .sb-filler > span { font-size: .7rem; padding: 4px 8px; }
/* Cinematic: one big moment; centered words over a large picture that fades, rises and grows in. */
.sb-cine { display: grid; gap: 28px; justify-items: center; text-align: center; }
.sb-cine-words { max-width: 760px; min-width: 0; width: 100%; }
.sb-cine-words h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.sb-cine-fact { margin-left: auto !important; margin-right: auto !important; }
.sb-cine-pic { margin: 0; width: 100%; max-width: 1040px; }
.sb-cine-pic .sb-frame { box-shadow: 0 30px 70px rgba(0,0,0,.2); }
.sb-cine.dev-desk .sb-cine-pic .sb-frame { border: 10px solid var(--pal-black); border-top-width: 24px; }
.sb-cine.dev-phone .sb-cine-pic { max-width: 300px; }
.sb-cine.dev-phone .sb-cine-pic .sb-frame { border: 9px solid var(--pal-black); border-radius: 34px; }
.sb-cine .sb-cine-pic { opacity: 0; transform: translateY(40px) scale(.94); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.sb-cine.is-in .sb-cine-pic, .is-preview .sb-cine .sb-cine-pic, .no-io .sb-cine .sb-cine-pic { opacity: 1; transform: none; }
.v-dark .sb-cine-fact { color: rgba(255,255,255,.78); }
@media (max-width: 760px) {
  .sb-qp { grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 4px; }
  .sb-qp::-webkit-scrollbar { display: none; }
  .sb-qp-card { scroll-snap-align: start; }
  .sb-cine { gap: 20px; }
  .sb-cine.dev-phone .sb-cine-pic { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-cine .sb-cine-pic { opacity: 1; transform: none; transition: none; }
  .sb-step, .sb-story-dots i, .sb-qp-card .sb-frame { transition: none; }
  .sb-story-track, .sb-qp { scroll-behavior: auto; }
}
/* Light/Dark (Website Settings > Follow the visitor's Light/Dark, body.sb-auto): dark tokens when the phone or computer is set to dark. */
@media (prefers-color-scheme: dark) {
  body.sb-auto { color-scheme: dark; --sbd-ink: var(--on-scrim); --sbd-muted: color-mix(in srgb, var(--pal-gray) 60%, white);
    --sbd-line: color-mix(in srgb, var(--pal-black) 82%, white); --sbd-card: color-mix(in srgb, var(--pal-black) 92%, white);
    --ink: var(--sbd-ink); --muted: var(--sbd-muted); --line: var(--sbd-line); --paper: var(--sbd-card); --card: var(--sbd-card);
    --w-ink: var(--sbd-ink); --w-muted: var(--sbd-muted); --w-line: var(--sbd-line); --w-tint: var(--sbd-card); background: var(--pal-black); color: var(--sbd-ink); }
  .sb-auto .w-block.w-topnav { background: color-mix(in srgb, var(--pal-black) 80%, transparent); }
  .sb-auto .w-block.v-dark, .sb-auto .w-cta { background: var(--pal-black); color: #fff; }
  .sb-auto .sb-desk, .sb-auto .sb-phone { border-color: var(--pal-black); background: var(--pal-black); }
  .sb-auto .w-btn { color: #fff; }
}