/* ============================================================================
   /small-business in the sub page system (v1.1, 9 Oct 2026). Everything sub.css does not
   already draw: the header's record, the twelve businesses, THE DAY'S DIAL (the page's one
   instrument, chapter 02), the vibe coded app, the run of apps, the prices and the seat slider.
   Scoped under .sp, tokens only (no hex outside tos-site.css), logical properties for right
   to left, square corners and hairlines. Phone first; steps at 600 / 760 / 981 / 1180.
   ============================================================================ */

/* ---- header: the promise, the price line, the page's record ---- */
.sp .sb-h1b { margin-top: 16px; font: 600 clamp(20px, 5.4vw, 26px)/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink-2); text-wrap: balance; max-width: 22em; }
.sp .sb-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.sp .sb-facts li { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ink); }
.sp .sb-facts li::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); flex: none; }
.sp .sb-rc { max-width: 560px; }
.sp .sb-rc-who { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.sp .sb-rc-who .av { width: 40px; height: 40px; font-size: 13px; }
.sp .sb-rc-who .rc-t { display: block; margin-top: 0; }
.sp .sb-rc-who .rc-k { display: block; }
.sp .sb-rc .rc-l div { grid-template-columns: 104px minmax(0, 1fr); }
.sp .sb-rc .rc-l dt { color: var(--lp-ink-2); }
.sp .sb-rc-foot { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
.sp .sb-rc-foot b { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 4px; font-weight: 600; color: var(--lp-ink); }
.sp .sb-rc-foot b::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; }

/* ---- 01 what it remembers: three losses, then twelve businesses in five groups ---- */
.sp .sb-ben h3 { font-size: 21px; line-height: 1.3; }
.sp .sb-grps { margin-top: 56px; }
.sp .sb-grp { border-top: 1px solid var(--lp-ink); padding-top: 14px; }
.sp .sb-grp + .sb-grp { margin-top: 36px; }
.sp .sb-grp-k { font: 600 13px/1.4 var(--tos-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--lp-ink-2); }
.sp .sb-tiles { margin-top: 4px; }
.sp .sb-tile { padding: 16px 0 18px; border-bottom: 1px solid var(--lp-rule); }
.sp .sb-tile h4 { margin: 0; font: 600 18px/1.3 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
.sp .sb-do { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--lp-muted); }
.sp .sb-mem { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--lp-ink); }
@media (min-width: 760px) {
  .sp .sb-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 32px; }
  .sp .sb-tile { border-bottom: 0; padding-bottom: 4px; }
}
@media (min-width: 1180px) {
  .sp .sb-ben h3 { font-size: 24px; }
  .sp .sb-grp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 40px; padding-top: 0; }
  .sp .sb-grp-k { padding-top: 20px; }
  .sp .sb-tiles { margin-top: 0; }
  .sp .sb-tile { padding-top: 18px; }
}

/* ---- 02 THE DAY'S DIAL: the page's one instrument ----
   SmallBusinessPage.DayDrawing: the homepage's outer ring and ticks, six apps round the bezel
   (squares, in the order of the day from twelve o'clock), the patient's one record as the ring
   inside with a dot per app, a line from each app into it, and a marker on the bezel. sub.js
   sets data-s from the ledger row being read; this file draws each moment: the apps already
   visited are ink, the one at work is orange with its line in, the ones still to come wait. */
.sp .sb-run { border-top: 1px solid var(--lp-rule); }
.sp .sbd .ins-c { container-type: inline-size; }
.sp .sbd .sb-ring { fill: none; stroke: var(--lp-rule-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .sbd .sb-sp line { stroke: var(--lp-ink-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease, stroke .3s ease; }
.sp .sbd .sb-fx circle { fill: var(--lp-dot-off); transition: fill .4s ease; }
.sp .sbd .sb-st rect { fill: var(--lp-paper); stroke: var(--lp-rule-2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill .4s ease, stroke .4s ease; }
.sp .sbd .sb-hand { transform-box: view-box; transform-origin: 500px 500px; transition: transform .8s var(--dl-ease); }
.sp .sbd .sb-hand path { fill: var(--lp-accent); }
/* the words in the middle: the moment's time, its app, and whether it is included */
.sp .sbd .p-c { left: 50%; top: 50%; }
.sp .sbd .sb-c { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 44%; white-space: normal; text-align: center; color: var(--lp-ink); opacity: 0; transition: opacity .3s ease; hyphens: auto; }
.sp .sbd .sb-c b { font: 600 clamp(15px, 4.6cqw, 26px)/1.15 var(--tos-font-body); letter-spacing: -.02em; }
.sp .sbd .sb-c .rec { color: var(--lp-muted); }
.sp .sbd .sb-c > * { background: var(--lp-paper); padding: 0 4px; }
.sp .sbd .sb-c > .rec:first-child { color: var(--lp-accent-text); font-weight: 600; }
/* each moment */
.sp .sbd[data-s="0"] .sb-st > :nth-child(1) { fill: var(--lp-accent); stroke: var(--lp-accent); }
.sp .sbd[data-s="0"] .sb-fx > :nth-child(1) { fill: var(--lp-accent); }
.sp .sbd[data-s="0"] .sb-sp > :nth-child(1) { opacity: 1; stroke: var(--lp-accent); stroke-width: 3px; }
.sp .sbd[data-s="0"] .sb-hand { transform: rotate(0deg); }
.sp .sbd[data-s="0"] .sb-c0 { opacity: 1; }
.sp .sbd[data-s="1"] .sb-st > :nth-child(-n+1) { fill: var(--lp-ink); stroke: var(--lp-ink); }
.sp .sbd[data-s="1"] .sb-fx > :nth-child(-n+1) { fill: var(--lp-ink); }
.sp .sbd[data-s="1"] .sb-sp > :nth-child(-n+1) { opacity: 1; }
.sp .sbd[data-s="1"] .sb-st > :nth-child(2) { fill: var(--lp-accent); stroke: var(--lp-accent); }
.sp .sbd[data-s="1"] .sb-fx > :nth-child(2) { fill: var(--lp-accent); }
.sp .sbd[data-s="1"] .sb-sp > :nth-child(2) { opacity: 1; stroke: var(--lp-accent); stroke-width: 3px; }
.sp .sbd[data-s="1"] .sb-hand { transform: rotate(60deg); }
.sp .sbd[data-s="1"] .sb-c1 { opacity: 1; }
.sp .sbd[data-s="2"] .sb-st > :nth-child(-n+2) { fill: var(--lp-ink); stroke: var(--lp-ink); }
.sp .sbd[data-s="2"] .sb-fx > :nth-child(-n+2) { fill: var(--lp-ink); }
.sp .sbd[data-s="2"] .sb-sp > :nth-child(-n+2) { opacity: 1; }
.sp .sbd[data-s="2"] .sb-st > :nth-child(3) { fill: var(--lp-accent); stroke: var(--lp-accent); }
.sp .sbd[data-s="2"] .sb-fx > :nth-child(3) { fill: var(--lp-accent); }
.sp .sbd[data-s="2"] .sb-sp > :nth-child(3) { opacity: 1; stroke: var(--lp-accent); stroke-width: 3px; }
.sp .sbd[data-s="2"] .sb-hand { transform: rotate(120deg); }
.sp .sbd[data-s="2"] .sb-c2 { opacity: 1; }
.sp .sbd[data-s="3"] .sb-st > :nth-child(-n+3) { fill: var(--lp-ink); stroke: var(--lp-ink); }
.sp .sbd[data-s="3"] .sb-fx > :nth-child(-n+3) { fill: var(--lp-ink); }
.sp .sbd[data-s="3"] .sb-sp > :nth-child(-n+3) { opacity: 1; }
.sp .sbd[data-s="3"] .sb-st > :nth-child(4) { fill: var(--lp-accent); stroke: var(--lp-accent); }
.sp .sbd[data-s="3"] .sb-fx > :nth-child(4) { fill: var(--lp-accent); }
.sp .sbd[data-s="3"] .sb-sp > :nth-child(4) { opacity: 1; stroke: var(--lp-accent); stroke-width: 3px; }
.sp .sbd[data-s="3"] .sb-hand { transform: rotate(180deg); }
.sp .sbd[data-s="3"] .sb-c3 { opacity: 1; }
.sp .sbd[data-s="4"] .sb-st > :nth-child(-n+4) { fill: var(--lp-ink); stroke: var(--lp-ink); }
.sp .sbd[data-s="4"] .sb-fx > :nth-child(-n+4) { fill: var(--lp-ink); }
.sp .sbd[data-s="4"] .sb-sp > :nth-child(-n+4) { opacity: 1; }
.sp .sbd[data-s="4"] .sb-st > :nth-child(5) { fill: var(--lp-accent); stroke: var(--lp-accent); }
.sp .sbd[data-s="4"] .sb-fx > :nth-child(5) { fill: var(--lp-accent); }
.sp .sbd[data-s="4"] .sb-sp > :nth-child(5) { opacity: 1; stroke: var(--lp-accent); stroke-width: 3px; }
.sp .sbd[data-s="4"] .sb-hand { transform: rotate(240deg); }
.sp .sbd[data-s="4"] .sb-c4 { opacity: 1; }
.sp .sbd[data-s="5"] .sb-st > :nth-child(-n+5) { fill: var(--lp-ink); stroke: var(--lp-ink); }
.sp .sbd[data-s="5"] .sb-fx > :nth-child(-n+5) { fill: var(--lp-ink); }
.sp .sbd[data-s="5"] .sb-sp > :nth-child(-n+5) { opacity: 1; }
.sp .sbd[data-s="5"] .sb-st > :nth-child(6) { fill: var(--lp-accent); stroke: var(--lp-accent); }
.sp .sbd[data-s="5"] .sb-fx > :nth-child(6) { fill: var(--lp-accent); }
.sp .sbd[data-s="5"] .sb-sp > :nth-child(6) { opacity: 1; stroke: var(--lp-accent); stroke-width: 3px; }
.sp .sbd[data-s="5"] .sb-hand { transform: rotate(300deg); }
.sp .sbd[data-s="5"] .sb-c5 { opacity: 1; }

/* the day's ledger: time, the app and what happened, whether it is included, what memory now knows */
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }
.sp .sb-dl .sb-tag { color: var(--lp-muted); }
.sp .sb-dl .sb-kn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--lp-ink); }
.sp .sb-dl .sb-kn .rec { color: var(--lp-muted); }
.sp .sb-dl .sb-kn b { font-weight: 600; }
.sp .body > .sb-coda { font-size: 19px; line-height: 1.5; color: var(--lp-ink); }
@media (min-width: 1180px) { .sp .body > .sb-coda { font-size: 21px; } }

/* ---- 03 vibe code your app: what you type, and the app it becomes ---- */
.sp .sb-vibe-a > * + * { margin-top: 28px; }
.sp .callout.sb-ask { background: var(--lp-paper-2); }
.sp .callout.sb-ask p.sb-ask-t { margin-top: 10px; font: 600 clamp(20px, 5.4vw, 26px)/1.3 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); text-wrap: balance; }
.sp .sb-caret { display: inline-block; width: 3px; height: 1em; margin-inline-start: 6px; vertical-align: -.14em; background: var(--lp-accent); }
.sp .ledger.sb-pts li { grid-template-columns: minmax(0, 1fr); }
.sp .ledger.sb-pts .lg-x { grid-column: 1; }
.sp .sb-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: 15px; color: var(--lp-ink-2); }
.sp .sb-note .rec { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ink); }
.sp .sb-note .rec::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
.sp .sb-note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* the app, drawn as a phone screen (a depiction, not a control) and the three places it writes to */
.sp .sb-ph { width: 100%; max-width: 340px; margin-inline: auto; }
.sp .sb-ph-f { border: 1px solid var(--lp-ink); background: var(--lp-paper-2); padding: 20px 18px 18px; }
.sp .sb-ph-bar { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--lp-rule-2); }
.sp .sb-ph-bar b { display: block; font: 600 17px/1.3 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink); }
.sp .sb-ph-bar span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--lp-muted); }
.sp .sb-ph-k { color: var(--lp-muted); }
.sp .sb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px; }
.sp .sb-slots li { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 9px 4px; text-align: center; font-size: 13px; line-height: 1.3; color: var(--lp-ink-2); }
.sp .sb-slots .is-on { border-color: var(--lp-accent); outline: 1px solid var(--lp-accent); outline-offset: -2px; color: var(--lp-ink); font-weight: 600; }
.sp .sb-ph-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lp-rule); font-size: 14px; line-height: 1.4; color: var(--lp-ink-2); }
.sp .sb-ph-row b { color: var(--lp-ink); font-weight: 600; }
.sp .sb-ph-btn { margin-top: 16px; padding: 12px; border-radius: 2px; background: var(--lp-accent); color: var(--lp-on-accent); text-align: center; font: 600 15px/1.3 var(--tos-font-body); }
.sp .sb-wires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp .sb-wires li { position: relative; padding: 30px 4px 0; text-align: center; color: var(--lp-ink); }
.sp .sb-wires li::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 20px; background: var(--lp-ink); }
.sp .sb-wires li::after { content: ""; position: absolute; top: 18px; left: calc(50% - 3px); width: 7px; height: 7px; background: var(--lp-ink); }
@media (min-width: 981px) {
  .sp .sb-vibe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: start; }
  .sp .ch-b.sb-vibe > .sb-ph { margin-top: 0; }
}

/* NOTE: Landing.Master links this sheet BEFORE sub.css, so a rule here that overrides sub.css
   must be more specific than the sub.css rule, never merely later. */

/* ---- 04 the engineering: four cells, then the figures ---- */
.sp .ch-b > .nums.sb-proof { margin-top: 48px; }

/* ---- 05 what comes with it: the work, and the app for it. A two-column record on a phone,
   three cells a row from 760px ---- */
.sp .sb-rep { border-top: 1px solid var(--lp-ink); }
.sp .sb-rep li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 0 14px; border-bottom: 1px solid var(--lp-rule); }
.sp .sb-rep .rec { color: var(--lp-muted); }
.sp .sb-rep b { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--lp-ink); }
@media (min-width: 760px) {
  .sp .sb-rep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .sp .sb-rep li { display: block; }
  .sp .sb-rep .rec { display: block; }
  .sp .sb-rep b { display: block; margin-top: 4px; }
}

/* ---- 06 what it costs: two plans, the team one with its seat slider ---- */
.sp .sb-tiers { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--lp-ink); }
.sp .sb-tier { padding: 22px 0 26px; border-bottom: 1px solid var(--lp-rule); }
.sp .sb-tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp .sb-tier-top h3 { font-size: 24px; }
.sp .sb-tier-top .rec { color: var(--lp-muted); }
.sp .sb-plan { margin-top: 4px; font-size: 16px; color: var(--lp-ink-2); }
.sp .sb-amt { display: flex; align-items: baseline; margin-top: 18px; font: 600 clamp(44px, 12vw, 64px)/1 var(--tos-font-body); letter-spacing: -.04em; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.sp .sb-cur { align-self: flex-start; margin-top: .12em; margin-inline-end: 2px; font-size: .5em; }
.sp .sb-per { margin-inline-start: 8px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--lp-muted); }
.sp .sb-tier-b { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--lp-ink-2); max-width: 34em; }
.sp .sb-seat { margin-top: 18px; padding: 14px 0 12px; border-block: 1px solid var(--lp-rule); }
.sp .sb-seat label { display: block; color: var(--lp-muted); }
.sp .sb-seat-row { display: flex; align-items: center; gap: 16px; }
.sp .sb-seat-row output { min-width: 2.5ch; text-align: end; font: 600 22px/1 var(--tos-font-body); color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.sp .sb-seat-note { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
/* the slider: a hairline track and a square orange handle, 44px tall to touch */
.sp .sb-seat-row input[type="range"] { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sp .sb-seat-row input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--lp-ink); }
.sp .sb-seat-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 0; background: var(--lp-accent); }
.sp .sb-seat-row input[type="range"]::-moz-range-track { height: 2px; background: var(--lp-ink); }
.sp .sb-seat-row input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 0; background: var(--lp-accent); }
.sp .sb-seat-row input[type="range"]:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
/* Business Essential is a starting price: "From" sits small before the figure (12 Oct 2026). */
.sp .sb-from { align-self: baseline; margin-inline-end: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--lp-muted); }
.sp .sb-small { margin-top: 24px; font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); }
.sp .sb-small a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 760px) {
  .sp .sb-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .sp .sb-tiers.is-one { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1180px) {
  .sp .sb-tier { padding: 26px 0 30px; }
}