/* Solution sub-pages (template-sub.php): features, development cost, business model, development company.
   Loads on top of solution.css, so tones (--s-*), theme tokens (--t-*), buttons, hero, stats, section nav, tables, FAQ and
   the related-platform cards are the hub's own. This file adds only what a spoke needs: the role catalogue, the numbered flow,
   asymmetric cards, checklists, reading prose, the media band, the demo block and the explore links.
   Motion: transform and opacity only; everything is complete without JavaScript and under prefers-reduced-motion. */

/* ---------- Tones the hub names by section; spokes name them by role ---------- */
.sb-tint { --s-bg: var(--tone-tint); }
.sb-surface { --s-bg: var(--t-surface); --s-card: var(--t-bg); }


/* ---------- Rhythm: spoke headings carry long sentences, so the scale is a notch below the hub's ---------- */
.sb { --sb-pad: clamp(72px, 8vw, 112px); --sb-rail: 232px; }
.sb.so-themed .so-h2 { font-size: clamp(1.875rem, 3.3vw, 3.125rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.sb.so-themed .so-sec { padding-block: var(--sb-pad); }
.sb.so-themed :is(.so-dark, .so-band):has(+ .so-light), .sb.so-themed .so-light:has(+ :is(.so-dark, .so-band)) { padding-bottom: calc(var(--sb-pad) + var(--so-lift)); }
.sb.so-themed .so-head { margin-bottom: clamp(36px, 4vw, 52px); }
.sb-split { align-items: start; }
.sb-split .so-head { margin-bottom: 0; }

/* ---------- Hero ---------- */
.sb-hero-grid { padding-block: 40px 72px; gap: clamp(32px, 4vw, 56px); }
.sb-hero h1 { margin-top: 8px; font: 800 clamp(32px, 3.3vw, 50px)/1.05 var(--display); letter-spacing: -.035em; color: var(--s-fg); text-wrap: balance; animation: so-in 1s var(--ez) .05s backwards; }
.sb-hero .so-lede { margin-top: 22px; max-width: 64ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; text-wrap: pretty; }
.sb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); font-variant-numeric: tabular-nums; }
.sb-stats dt { font-size: clamp(30px, 3vw, 46px); font-variant-numeric: tabular-nums; }
.sb-stats dd { max-width: 30ch; }
/* the composition: the browser frame sits fully inside its column, the price card hangs off the lower right corner */
.sb-hero .so-stage-shots { aspect-ratio: 10 / 8; }
.sb-hero .so-stage-shots .so-dev--desk { left: 0; top: 4%; width: 100%; }
.sb-hero .so-stage--phones .so-stage-shots .so-dev--desk { width: 100%; }
.sb-hero .so-stage-shots .so-dev--phone { left: -4%; bottom: 0; width: 25%; }
.sb-hero .so-stage-shots .so-dev--phone ~ .so-dev--phone { left: 20%; bottom: -8%; width: 22%; }
.sb-hero .so-ticket { right: -4px; top: auto; bottom: -22px; width: 224px; padding: 18px 22px 18px; }
.sb-hero .so-ticket-n { font-size: 44px; }

@media (min-width: 901px) { .sb-hero-grid { grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); } }


/* ---------- Contents rail: sticky list on desktop, a disclosure on small screens ---------- */
.sb-body { position: relative; }
.sb-rail { display: none; }
.sb-toc-m { position: relative; z-index: 2; border-bottom: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-fg); }
.sb-toc-m summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100% - 48px, 1320px); min-height: 56px; margin-inline: auto; list-style: none; cursor: pointer; font-weight: 800; font-size: 15px; }
.sb-toc-m summary::-webkit-details-marker { display: none; }
.sb-toc-m summary i { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--mono); font-style: normal; color: var(--s-fg2); }
.sb-toc-m summary i::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s var(--ez); }
.sb-toc-m[open] summary i::after { margin-top: 3px; transform: rotate(-135deg); }
.sb-toc-m ol { width: min(100% - 48px, 1320px); margin: 0 auto; padding: 0 0 18px; display: grid; counter-reset: toc; }
.sb-toc-m li { counter-increment: toc; }
.sb-toc-m li a { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--s-line); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--s-fg); }
.sb-toc-m li a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 22px; font: 700 12.5px/1.6 var(--mono); color: var(--s-fg2); }
@media (min-width: 1180px) {
  .sb-toc-m { display: none; }
  .sb-body .so-wrap { padding-left: var(--sb-rail); box-sizing: border-box; }
  .sb-rail { display: block; position: absolute; z-index: 6; top: 0; bottom: 0; left: max(24px, calc((100% - 1320px) / 2)); width: 208px; pointer-events: none; }
  .sb-toc { position: sticky; top: calc(var(--stick) + var(--so-nav-h) + 24px); max-height: calc(100vh - var(--stick) - var(--so-nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; padding: 18px 8px 14px 18px; border: var(--so-ol) solid var(--t-ink); border-radius: 20px; background: var(--t-surface); color: var(--t-ink); scrollbar-width: thin; }
  .sb-toc-k { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--t-soft); }
  .sb-toc ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .sb-toc a { position: relative; display: block; padding: 7px 10px 7px 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--t-soft); transition: color .2s; text-wrap: pretty; }
  .sb-toc a:hover { color: var(--t-ink); }
  .sb-toc a.is-on { font-weight: 800; color: var(--t-ink); }
  .sb-toc a.is-on::before { content: ""; position: absolute; left: -18px; top: 7px; bottom: 7px; width: 4px; border-radius: 4px; background: var(--t-primary); }
}

/* ---------- Features: the by-role catalogue (every role stacked and visible, no tabs to hide anything) ---------- */
.sb-roles { position: sticky; top: calc(var(--stick) + var(--so-nav-h) + 12px); z-index: 20; display: flex; gap: 8px; margin: 0 0 8px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; background: var(--s-bg); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.sb-roles::-webkit-scrollbar { display: none; }
.sb-roles a { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 8px 7px 16px; border: var(--so-ol) solid var(--s-line); border-radius: 999px; background: var(--s-card); font-weight: 800; font-size: 14.5px; color: var(--s-fg); transition: background-color .2s, color .2s; }
.sb-roles a:hover { box-shadow: 3px 3px 0 var(--s-line); }
.sb-roles a.is-on { background: var(--t-primary); color: var(--t-on-primary); }
.sb-roles i { display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 6px; border-radius: 999px; background: color-mix(in srgb, var(--s-fg) 10%, transparent); font: 700 12.5px/1 var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }
.sb-role { padding-block: 44px 8px; border-top: var(--so-ol) solid var(--s-line); }
.sb-role + .sb-role { margin-top: 36px; }
.sb-roles + .sb-role { margin-top: 20px; }
.sb-role > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 18px; margin-bottom: 26px; }
.sb-role h3 { font: 800 clamp(26px, 2.6vw, 36px)/1.05 var(--display); letter-spacing: -.03em; color: var(--s-fg); }
.sb-role header b { justify-self: start; padding: 5px 13px; border: var(--so-ol) solid var(--s-line); border-radius: 999px; background: var(--t-primary); color: var(--t-on-primary); font: 700 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.sb-role header p { grid-column: 1 / -1; max-width: 70ch; font-size: 16.5px; line-height: 1.6; color: var(--s-fg2); }
.sb-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.sb-feat > div:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.sb-feat > div:last-child:nth-child(3n + 2) { grid-column: span 2; }
@media (max-width: 1000px) { .sb-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-feat > div:last-child:nth-child(n) { grid-column: auto; } .sb-feat > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 620px) { .sb-feat { grid-template-columns: minmax(0, 1fr); } }
.sb-feat > div { padding: 22px 24px 24px; border: var(--so-ol) solid var(--s-line); border-radius: 22px; background: var(--s-card); transition: transform .3s var(--ez), box-shadow .3s var(--ez); }
.sb-feat > div:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--s-line); }
.sb-feat dt { font: 800 18px/1.2 var(--display); letter-spacing: -.02em; color: var(--s-fg); }
.sb-feat dd { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--s-fg2); }

/* ---------- Numbered vertical flow: number, title and body on one grid, a line running through the numbers ---------- */
.sb-flow { position: relative; display: grid; gap: 14px; }
.sb-flow::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--s-fg) 24%, transparent); }
.sb-flow > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; }
.sb-n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: var(--so-ol) solid var(--s-line); border-radius: 50%; background: var(--s-bg); font: 800 19px/1 var(--display); color: var(--s-fg); font-variant-numeric: tabular-nums; }
.sb-flow > li:last-child .sb-n { background: var(--t-primary); color: var(--t-on-primary); }
.sb-flow-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px 40px; align-items: start; padding: 26px 32px 28px; border: var(--so-ol) solid var(--s-line); border-radius: var(--so-r2); background: var(--s-card); transition: transform .35s var(--ez), box-shadow .35s var(--ez); }
.sb-flow-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--s-line); }
.sb-flow-card h3 { padding-top: 4px; font: 800 clamp(19px, 1.7vw, 24px)/1.18 var(--display); letter-spacing: -.025em; color: var(--s-fg); text-wrap: balance; }
.sb-flow-card p { max-width: 66ch; font-size: 16px; line-height: 1.68; color: var(--s-fg2); }

/* ---------- Cards that fit their count: a 6-column grid, so 5 is 3+2, 7 is 3+2+2, 4 and 8 are two wide, 3/6/9 are three wide ---------- */
.sb-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sb-cards > li { grid-column: span 2; display: flex; flex-direction: column; padding: 28px 28px 30px; border: var(--so-ol) solid var(--s-line); border-radius: var(--so-r2); background: var(--s-card); transition: transform .35s var(--ez), box-shadow .35s var(--ez); }
.sb-cards.n2 > li, .sb-cards.n4 > li, .sb-cards.n8 > li, .sb-cards.n5 > li:nth-child(n + 4), .sb-cards.n7 > li:nth-child(n + 4) { grid-column: span 3; }
.sb-cards > li:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--s-line); }
.sb-i { align-self: flex-start; margin-bottom: 18px; font: 700 13px/1 var(--mono); color: var(--s-link); font-variant-numeric: tabular-nums; }
.sb-cards h3 { font: 800 clamp(20px, 1.7vw, 24px)/1.18 var(--display); letter-spacing: -.025em; color: var(--s-fg); text-wrap: balance; }
.sb-cards p { margin-top: 12px; font-size: 15.5px; line-height: 1.66; color: var(--s-fg2); }

/* ---------- Definition list with rules: title left, body right ---------- */
.sb-defs { border-bottom: 1px solid var(--s-line); }
.sb-defs > li { display: grid; grid-template-columns: 36px minmax(0, 4fr) minmax(0, 8fr); gap: 4px 28px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--s-line); }
.sb-defs .sb-i { margin: 0; }
.sb-defs h3 { font: 800 clamp(19px, 1.7vw, 24px)/1.2 var(--display); letter-spacing: -.025em; color: var(--s-fg); text-wrap: balance; }
.sb-defs p { max-width: 68ch; font-size: 16px; line-height: 1.7; color: var(--s-fg2); }

/* ---------- Cautionary blocks: a calm dashed panel, two columns, a quiet marker ---------- */
.sb-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--so-ol) dashed var(--s-line); border-radius: var(--so-r2); background: var(--s-card); overflow: hidden; }
.sb-notes > li { display: flex; gap: 16px; padding: 28px 30px 30px; border-top: 1px dashed var(--s-line); }
.sb-notes > li:nth-child(-n + 2) { border-top: 0; }
.sb-notes > li:nth-child(even) { border-left: 1px dashed var(--s-line); }
.sb-notes > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sb-nm { flex: none; width: 14px; height: 14px; margin-top: 6px; border: var(--so-ol) solid var(--s-fg2); border-radius: 50%; }
.sb-notes h3 { font: 800 clamp(18px, 1.5vw, 21px)/1.22 var(--display); letter-spacing: -.02em; color: var(--s-fg); text-wrap: balance; }
.sb-notes p { margin-top: 8px; max-width: 62ch; font-size: 15.5px; line-height: 1.68; color: var(--s-fg2); }

/* ---------- Checklists ---------- */
.sb-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.sb-check > li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--s-line); font-size: 16.5px; line-height: 1.55; color: var(--s-fg); }
.sb-check i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); }
.sb-check .ico { width: 17px; height: 17px; stroke-width: 2.6; }
.sb-check--warn i { background: transparent; border: var(--so-ol) solid var(--s-fg2); color: var(--s-fg2); }
.sb-check--warn .ico { transform: rotate(45deg); }

/* ---------- Reading prose, 65 to 75ch ---------- */
.sb-prose { max-width: 70ch; }
.sb-prose p { margin-top: 22px; font-size: 17.5px; line-height: 1.78; color: var(--s-fg2); text-wrap: pretty; }
.sb-prose p:first-child { margin-top: 0; font: 600 clamp(19px, 1.6vw, 21.5px)/1.62 var(--sans); color: var(--s-fg); }

/* ---------- Tables: the GetFame column is one continuous primary panel ---------- */
.sb-tw { overflow-x: auto; }
.sb-t thead th { white-space: normal; vertical-align: bottom; }
.sb-t td { font-size: 15px; }
.sb-t .is-own { background: var(--t-primary); color: var(--t-on-primary); border-top-color: color-mix(in srgb, var(--t-on-primary) 30%, transparent); font-weight: 700; }
.sb-t thead .is-own { border-radius: 20px 20px 0 0; font: 800 17px/1.2 var(--display); letter-spacing: -.02em; }
.sb-t tbody tr:last-child .is-own { border-radius: 0 0 20px 20px; }
.sb-t tbody tr:hover .is-own { background: var(--t-primary); }
.sb-days tbody th { width: 28%; }
.sb-day { display: block; margin-bottom: 6px; font: 700 13px/1 var(--mono); color: var(--s-link); }
.sb-days tbody td { width: 36%; }

/* ---------- Screens band: equal-height screens (widths follow aspect ratio), one caption style ---------- */
.sb-band { display: flex; gap: 20px; align-items: flex-end; }
.sb-band > li { flex: var(--ar) 1 0; min-width: 0; }
.sb-band figure { display: grid; gap: 14px; }
.sb-band figcaption { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--s-fg2); }
.sb-band .so-dev img, .sb-band .so-dev--phone img { aspect-ratio: auto; }

/* ---------- Live demo ---------- */
.sb-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.sb-demos > li { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 30px; border: var(--so-ol) solid var(--s-line); border-radius: var(--so-r2); background: var(--s-card); }
.sb-demos h3 { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -.025em; color: var(--s-fg); }
.sb-open { align-self: flex-start; max-width: 100%; min-height: 54px; padding-left: 24px; font-size: 15px; white-space: normal; text-align: left; }
.sb-open .so-arr { width: 40px; height: 40px; }
.sb-cred { display: grid; gap: 10px; margin: 0; }
.sb-cred > div { display: grid; gap: 6px; }
.sb-cred dt { font-size: 13px; font-weight: 800; color: var(--s-fg2); }
.sb-cred dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; padding: 6px 6px 6px 14px; border: var(--so-ol) solid var(--s-line); border-radius: 14px; background: var(--s-bg); }
.sb-cred code { min-width: 0; font: 700 14px/1.4 var(--mono); color: var(--s-fg); overflow-wrap: anywhere; user-select: all; }
.sb-copy { flex: none; min-height: 32px; padding: 0 14px; border: var(--so-ol) solid var(--s-line); border-radius: 999px; background: var(--s-card); color: var(--s-fg); font: 800 13px/1 var(--sans); cursor: pointer; transition: transform .25s var(--ez); }
.sb-copy:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--s-line); }
.sb-copy:active { transform: none; box-shadow: none; }
.sb-copy.is-done { background: var(--t-primary); color: var(--t-on-primary); }
.sb-try { margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--s-fg2); }
.sb-try-list { display: grid; gap: 10px; margin-top: -6px; }
.sb-try-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--s-fg); }
.sb-try-list .ico { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); stroke-width: 2.6; }

/* ---------- Explore: connector A and the compact row come from solution.css (.so-xa, .so-xr) ---------- */
.sb-explore { --s-bg: var(--t-bg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sb-defs > li { grid-template-columns: 32px minmax(0, 1fr); }
  .sb-defs p { grid-column: 2; }
  .sb-flow-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sb-hero-grid { padding-block: 32px 48px; }
    .sb-hero .so-ticket { position: relative; right: auto; bottom: auto; width: min(100%, 300px); margin: -18px 0 0 auto; transform: none; }
  .sb-stats div, .sb-stats div:nth-child(odd), .sb-stats div:nth-child(even) { padding: 22px 14px 22px 20px; border-left: 1px solid var(--s-line); border-top: 0; }
  .sb-stats div:first-child { padding-left: 0; border-left: 0; }
  .sb-cards > li, .sb-cards.n5 > li:nth-child(n), .sb-cards.n7 > li:nth-child(n), .sb-cards.n4 > li, .sb-cards.n8 > li { grid-column: span 3; }
  .sb-cards > li:last-child:nth-child(odd) { grid-column: span 6; }
  .sb-check { grid-template-columns: minmax(0, 1fr); }
  .sb-split { gap: 32px; }
  .sb-band { gap: 14px; }
}
@media (max-width: 760px) {
  .sb-t td.is-own, .sb-t tbody tr:last-child td.is-own { margin-top: 14px; padding: 14px 16px; border-radius: 16px; }
  .sb-t td.is-own::before { color: var(--t-on-primary); }
  .sb-days tbody th, .sb-days tbody td { width: auto; }
  .sb-band { overflow-x: auto; justify-content: flex-start; align-items: flex-start; padding: 2px 10px 18px 2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .sb-band > li { flex: 0 0 calc(var(--ar) * 280px); scroll-snap-align: start; }
  .sb-notes { grid-template-columns: minmax(0, 1fr); }
  .sb-notes > li, .sb-notes > li:nth-child(-n + 2), .sb-notes > li:nth-child(even) { border-left: 0; border-top: 1px dashed var(--s-line); }
  .sb-notes > li:first-child { border-top: 0; }
}
@media (max-width: 620px) {
  .sb-hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .sb-stats { grid-template-columns: minmax(0, 1fr); }
  .sb-stats div, .sb-stats div:nth-child(n), .sb-stats div:first-child { padding: 16px 0; border-left: 0; }
  .sb-stats div + div { border-top: 1px solid var(--s-line); }
  .sb-cards > li, .sb-cards > li:nth-child(n), .sb-cards > li:last-child:nth-child(odd) { grid-column: span 6; padding: 24px 22px 26px; }
  .sb-flow::before { left: 21px; }
  .sb-flow > li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .sb-n { width: 44px; height: 44px; font-size: 16px; }
  .sb-flow-card { padding: 22px 20px 24px; }
  .sb-role > header { grid-template-columns: minmax(0, 1fr); }
  .sb-defs > li { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .sb-defs p { grid-column: 1; }
  .sb-notes > li { padding: 24px 22px 26px; }
  .sb-demos > li { padding: 26px 22px 28px; }
  .sb-open { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-hero h1 { animation: none !important; }
  .sb-feat > div, .sb-flow-card, .sb-cards > li, .sb-copy, .sb-roles a, .sb-toc a { transition: none !important; }
}