/* 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 { --blue: var(--pal-blue-strong); --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); }
:root { /* Sales site token group (Style Editor > Sales site, Phase 2, Oct 24 2026). Blank or missing = CRM value. */
  --site-on-dark: #fff;                          /* text on dark bands, filled buttons and the brand */
  --site-on-dark-soft: rgba(255, 255, 255, .78); /* secondary text on dark bands */
  --site-glass: rgba(255, 255, 255, .06);        /* cards on dark bands */
  --site-glass-edge: var(--site-frame-edge, rgba(255, 255, 255, .14));
  --site-topnav-bg: rgba(255, 255, 255, .78);    /* frosted top menu */
  --site-shadow-soft: rgba(0, 0, 0, .12);        /* hover lifts and pictures */
  --site-shadow: rgba(0, 0, 0, .2);              /* framed pictures */
  --site-shadow-deep: rgba(0, 0, 0, .28);        /* the phone */
}
/* 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: var(--fs-lead, 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: var(--site-on-dark); }
.ps .w-block.v-dark .w-sub { color: var(--site-on-dark-soft); }
.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: var(--site-on-dark); font-weight: 650; white-space: nowrap; text-decoration: none; }
.ps .w-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); 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: var(--fs-h3, 1.15rem); }
.ps .w-hero-img { border-radius: var(--sb-radius); box-shadow: 0 30px 70px var(--site-shadow); 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: var(--site-on-dark); }
.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-x: clip; 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: var(--site-topnav-bg); -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: var(--fs-h3, 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 var(--site-shadow-soft); z-index: 21; }
.sb-drop-list a, .sb-menu-list a { padding: 9px 12px; border-radius: var(--r-sm, 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 { 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: var(--r-lg2, 14px); box-shadow: 0 30px 70px var(--site-shadow); 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 var(--site-shadow-deep); 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 var(--site-shadow-soft); }
.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: var(--r-pill, 999px); background: var(--sb-card); border: 1px solid var(--sb-line); font-weight: 600; font-size: var(--fs-body-sm, .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: var(--fs-h4, 1.08rem); white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
.sb-card p { margin: 0; color: var(--sb-muted); }
a.sb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px var(--site-shadow-soft); }
.v-dark .sb-card { background: var(--site-glass); border-color: var(--site-glass-edge); color: var(--site-on-dark); }
/* 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: var(--fs-note, .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 var(--site-shadow); 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: var(--fs-body-sm, .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: var(--fs-body-sm, .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: var(--fs-h4, 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: var(--fs-body-sm, .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: var(--r-md, 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: var(--fs-small, .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: var(--fs-body, 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: hidden; touch-action: pan-y; 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: var(--fs-h3, 1.15rem); white-space: nowrap; overflow-x: clip; 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: var(--r-2xs, 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: var(--fs-body-sm, .92rem); }
  .sb-table td::before { content: attr(data-label); display: block; font-size: var(--fs-note, .78rem); color: var(--sb-muted); font-weight: 600; }
  .sb-shots { padding-right: 18%; }
  .sb-phone { width: 30%; }
}
/* [Parent Site] Ask Sprowtz (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: var(--r-pill, 999px); background: var(--sb-card); color: var(--sb-ink); font-weight: 650; white-space: nowrap; box-shadow: 0 8px 24px var(--site-shadow); 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 var(--site-shadow); 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: var(--r-lg, 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: var(--site-on-dark); 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: var(--r-pill, 999px); background: var(--sb-card); color: var(--sb-muted); font-size: var(--fs-note, .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: var(--r-xs, 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 var(--site-shadow-soft); } }
.sb-qp-words { display: grid; gap: 2px; min-width: 0; }
.sb-qp-words span { color: var(--sb-muted); font-size: var(--fs-body-sm, .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: .6rem; padding: 3px 6px; border-radius: var(--r-pill, 999px); letter-spacing: -.01em; max-width: 96%; }
@media (max-width: 520px) { .sb-filler > span { font-size: .66rem; padding: 4px 8px; max-width: 96%; } .sb-qp .sb-filler > span { font-size: .56rem; padding: 2px 5px; } }
/* Public empty slot (plans/sales-story.md): a branded panel until the real screenshot is set; no words, works Light + Dark. */
.sb-filler.sb-filler-pub { border: 1px solid var(--sb-line); background: url(sprowtz-icon-192.png) center / clamp(40px, 18%, 96px) no-repeat, radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--sb-accent) 28%, transparent), transparent 60%), radial-gradient(110% 90% at 90% 95%, color-mix(in srgb, var(--sb-brand) 30%, transparent), transparent 62%), var(--sb-tint); }
/* 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 var(--site-shadow); }
.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: var(--site-on-dark-soft); }
@media (max-width: 760px) {
  .sb-qp { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
  .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:not(.sb-light) { 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:not(.sb-light) .w-block.w-topnav { background: color-mix(in srgb, var(--pal-black) 80%, transparent); }
  .sb-auto:not(.sb-light) .w-block.v-dark, .sb-auto:not(.sb-light) .w-cta { background: var(--pal-black); color: var(--site-on-dark); }
  .sb-auto:not(.sb-light) .sb-desk, .sb-auto:not(.sb-light) .sb-phone { border-color: var(--pal-black); background: var(--pal-black); }
  .sb-auto:not(.sb-light) .w-btn { color: var(--site-on-dark); }
  /* Dark contrast fixes (Oct 23 2026): light buttons/pills and dim hint text from the plan cards and tables */
  .sb-auto:not(.sb-light) .btn.quiet, .sb-auto:not(.sb-light) .p26-cycle button.quiet, .sb-auto:not(.sb-light) .badge.waiting { background: var(--sbd-card); color: var(--sbd-ink); border: 1px solid var(--sbd-line); }
  .sb-auto:not(.sb-light) .badge.done { color: var(--pal-black); }
  .sb-auto:not(.sb-light) .muted, .sb-auto:not(.sb-light) .hint, .sb-auto:not(.sb-light) .muted.hint { color: var(--sbd-muted); }
  .sb-auto:not(.sb-light) table.phone-sheet tr { background: var(--sbd-card); border-color: var(--sbd-line); }
  .sb-auto:not(.sb-light) .desc { color: var(--sbd-muted); }
  .sb-auto:not(.sb-light) .sb-menu-list .sb-menu-go { color: var(--pal-blue); }
}
/* Dark default (Travis, Oct 24 2026 9:00 AM): Website Settings web_scheme = dark (body.sb-dark) is Dark on every device; the Light / Dark switch adds body.sb-light. */

body.sb-dark:not(.sb-light) { 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-dark:not(.sb-light) .w-block.w-topnav { background: color-mix(in srgb, var(--pal-black) 80%, transparent); }
.sb-dark:not(.sb-light) .w-block.v-dark, .sb-dark:not(.sb-light) .w-cta { background: var(--pal-black); color: var(--site-on-dark); }
.sb-dark:not(.sb-light) .sb-desk, .sb-dark:not(.sb-light) .sb-phone { border-color: var(--pal-black); background: var(--pal-black); }
.sb-dark:not(.sb-light) .w-btn { color: var(--site-on-dark); }
/* Dark contrast fixes (Oct 23 2026): light buttons/pills and dim hint text from the plan cards and tables */
.sb-dark:not(.sb-light) .btn.quiet, .sb-dark:not(.sb-light) .p26-cycle button.quiet, .sb-dark:not(.sb-light) .badge.waiting { background: var(--sbd-card); color: var(--sbd-ink); border: 1px solid var(--sbd-line); }
.sb-dark:not(.sb-light) .badge.done { color: var(--pal-black); }
.sb-dark:not(.sb-light) .muted, .sb-dark:not(.sb-light) .hint, .sb-dark:not(.sb-light) .muted.hint { color: var(--sbd-muted); }
.sb-dark:not(.sb-light) table.phone-sheet tr { background: var(--sbd-card); border-color: var(--sbd-line); }
.sb-dark:not(.sb-light) .desc { color: var(--sbd-muted); }
.sb-dark:not(.sb-light) .sb-menu-list .sb-menu-go { color: var(--pal-blue); }

/* Light / Dark switch and the "also comes in Light" line */
.sb-sch { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill, 999px); background: color-mix(in srgb, var(--pal-black) 82%, transparent); backdrop-filter: blur(8px); font: 600 13px/1 inherit; }
.sb-sch button { all: unset; cursor: pointer; padding: var(--btn-pad-sm); font-size: var(--btn-fs-sm); border-radius: var(--r-pill, 999px); color: var(--site-on-dark); opacity: .7; }
.sb-sch button[aria-pressed=true] { background: var(--site-on-dark); color: var(--pal-black); opacity: 1; }
.sb-sch button:focus-visible { outline: 2px solid var(--pal-blue); outline-offset: 2px; }
.sb-also { margin: .6em 0 0; font-size: var(--fs-body-sm, .9rem); opacity: .8; }
.sb-also button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Descenders (Travis, Oct 23 2026): sales headings and subtitles never clip the bottoms of g, y, p. */
.ps :is(h1, h2, h3) { line-height: 1.18; padding-bottom: .06em; }
.ps .w-hero h1 { line-height: 1.15; }
.ps .w-sub { line-height: 1.5; }
/* Look flags from the sales handoff (Oct 24 2026):
   1) Light: "dark" bands (v-dark blocks such as the route cinema section) follow the Light page instead of staying black
      behind the phone. Their colors come from the site tokens below (Style Editor > Sales site).
   2) Board clips are 16:10 recordings in a 16:9 frame: anchor them to the top so the clip opens on the page header rather
      than the empty lower half of a card. */
:root { --site-band-light-bg: var(--card-2, #F6F8FB); --site-band-light-ink: var(--ink, #0F141A); --site-band-light-muted: var(--muted, #566170); --site-band-light-edge: var(--line, #DDE3EA); }
body.sb-light .w-block.v-dark { background: var(--site-band-light-bg); color: var(--site-band-light-ink); border-block: 1px solid var(--site-band-light-edge); }
body.sb-light .w-block.v-dark .w-sub, body.sb-light .v-dark .sb-cine-fact { color: var(--site-band-light-muted); }
body.sb-light .v-dark .sb-card { background: var(--card, var(--white, #fff)); border-color: var(--site-band-light-edge); color: var(--site-band-light-ink); }
.sb-vid.r-16x9 video { object-position: top; }
/* Phone shot in the phone frame (Oct 25 2026): top of the 390 picture, like the phone clips. */
.sb-frame img.fx-phone-img { object-fit: cover; object-position: top; }

/* Squeeze video (plans/squeeze-video.md): the section matches the clip's var(--sq-bg) so it has no edge. */
.w-block.w-squeeze { background: var(--sq-bg); color: var(--sq-fg); }
.sb-sq { position: relative; max-width: 1280px; margin: 0 auto; aspect-ratio: 16 / 9; background: var(--sq-bg); overflow: visible; }
.sb-sq-v { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--sq-bg); pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, currentColor 5%, currentColor 95%, transparent), linear-gradient(to bottom, transparent, currentColor 6%, currentColor 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, currentColor 5%, currentColor 95%, transparent), linear-gradient(to bottom, transparent, currentColor 6%, currentColor 94%, transparent); mask-composite: intersect; }
.sb-sq-end { position: absolute; inset: 0; display: none; }
.sb-sq.is-end .sb-sq-end { display: block; cursor: pointer; }
.sb-sq-snd { position: absolute; right: var(--sp-3, 12px); top: var(--sp-3, 12px); z-index: 2; padding: 8px 14px; border: 1px solid var(--sq-line); border-radius: 999px; background: var(--sq-btn); color: var(--sq-fg); font: inherit; font-size: .875rem; cursor: pointer; }
.sb-sq-snd[aria-pressed="true"] { background: var(--sq-line); }
/* Picture framing (Oct 25 2026): every sales picture sits in a rounded device frame with a soft brand-green glow and a light
   float into place as it scrolls in. Light and Dark each get their own frame edge and glow strength. Reduced motion: no float. */
main .w-block:not(.w-cine) .sb-frame:not(.sb-filler):has(> img) {
  --pf-edge: color-mix(in srgb, var(--pal-black) 10%, transparent);
  --pf-glow: color-mix(in srgb, var(--pal-green) 22%, transparent);
  border: 6px solid var(--pf-edge); border-radius: calc(var(--sb-radius, 14px) + 8px);
  box-shadow: 0 0 0 1px var(--pf-glow), 0 18px 48px var(--pf-glow), 0 10px 28px var(--site-shadow-soft);
}
main .sb-story-pic .sb-frame:has(> img) { border-width: 0; }
body.sb-dark main .w-block:not(.w-cine) .sb-frame:not(.sb-filler):has(> img), body.fx-dark main .w-block:not(.w-cine) .sb-frame:not(.sb-filler):has(> img) {
  --pf-edge: color-mix(in srgb, white 12%, transparent); --pf-glow: color-mix(in srgb, var(--pal-green) 34%, transparent);
}
@media (prefers-color-scheme: dark) {
  body.sb-auto:not(.sb-light) main .w-block:not(.w-cine) .sb-frame:not(.sb-filler):has(> img) { --pf-edge: color-mix(in srgb, white 12%, transparent); --pf-glow: color-mix(in srgb, var(--pal-green) 34%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main .w-block:not(.w-cine) .sb-frame:not(.sb-filler):has(> img) { animation: pf-float linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 100%; }
    @keyframes pf-float { from { transform: perspective(1200px) rotateX(7deg) translateY(28px) scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }
  }
}
/* Squeeze video, Light (Oct 25 2026): the Light cut squeezes to the Light page color; both cuts have feathered edges.
   Lightning when the name lands (~1.95 s) and an earthquake when "the juice is worth the squeeze" shows (~11.1 s), both
   timed off the video's own clock in assets/js/site-blocks.js. Reduced motion: neither. */
.sb-sq-bolt { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.sb-sq-bolt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, var(--sq-flash) 0%, transparent 70%); }
.sb-sq-bolt::after { content: ""; position: absolute; left: 46%; top: 0; width: 9%; height: 62%; background: var(--sq-bolt);
  clip-path: polygon(52% 0, 18% 52%, 46% 52%, 24% 100%, 86% 38%, 56% 38%, 80% 0); filter: drop-shadow(0 0 18px var(--sq-bolt)); }
.sb-sq.fx-bolt .sb-sq-bolt { animation: sq-bolt .7s ease-out 1; }
@keyframes sq-bolt { 0% { opacity: 0; } 8% { opacity: 1; } 18% { opacity: .2; } 28% { opacity: .95; } 60% { opacity: .3; } 100% { opacity: 0; } }
.sb-sq.fx-quake { animation: sq-quake .75s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes sq-quake { 10%, 90% { transform: translate3d(-2px, 1px, 0) rotate(-.3deg); } 20%, 80% { transform: translate3d(4px, -2px, 0) rotate(.4deg); } 30%, 50%, 70% { transform: translate3d(-7px, 3px, 0) rotate(-.6deg); } 40%, 60% { transform: translate3d(7px, -3px, 0) rotate(.6deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sb-sq-bolt { display: none; } .sb-sq.fx-quake { animation: none; } }
/* Page Framework ship D gap fix: a Heading block followed by a Text block reads as one section (Terms, Privacy) */
.ps .w-block.w-heading:has(+ .w-block.w-text) { padding-bottom: 0; }
.ps .w-block.w-heading + .w-block.w-text { padding-top: 0; }