/* LIVE 2026-09-26 · Success Stories (#ss1) = 05 Spec Rails (✦ Double surprise of round 4, /doctor/h4-ss.html#rails).
   ONE shared file for BOTH pages that carry #ss1: index.html and google-ads.html (proven pixel-identical on both).
   Copied from h4-ss/d-rails.css with the preview class `html.d4-rails` replaced by `html:not(.ss-rails-off)` (same specificity).
   Undo: delete the two "Spec Rails" lines in each page, or restore *.before-ss-rails.html.bak. Regenerate: ss-rails/build.py */
/* h4-ss · rails · ROUND 4 design of the homepage Success Stories. Every rule scoped html:not(.ss-rails-off); 8x #ss1 beats the 4x live stack. */
/* ---- shared resets: no motion, no lift, the live navy After plate and hover shadows removed ---- */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 *, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 *::before, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 *::after{ transition:none !important; animation:none !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-card, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-card:hover{ transform:none !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-sep{ display:none !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after{ box-shadow:none !important; background:transparent !important; border-radius:0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-ba{ background:transparent !important; border:0 !important; border-radius:0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-say{ border-top:0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-grid{ display:none !important; }
/* pager: the same count per row as live (--per from the helper); each key 44px tall to tap, the mark drawn inside */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-navrow{ padding-inline:16px !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots{ display:grid !important; grid-template-columns:repeat(var(--per,5), var(--dw,12px)) !important; column-gap:var(--dg,6px) !important; row-gap:0 !important; justify-content:center !important; margin-top:8px !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots > button{ position:relative !important; width:auto !important; min-width:0 !important; height:44px !important; padding:0 !important; margin:0 !important; background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots > button::before{ content:"" !important; position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots > button:focus-visible{ outline:2px solid #2F63C9 !important; outline-offset:-2px !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-card:focus-within{ outline:none; }

/* text floors: no text ever smaller than live at the same width (live: desktop / phone ≤760px) */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1{ --fl-kick:14px; --fl-name:16px; --fl-trade:13px; --fl-url:13px; --fl-k:11px; --fl-v:24px; --fl-u:10.5px; --fl-say:12.5px; }
@media (max-width:760px){ html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1{ --fl-kick:13px; --fl-name:18px; --fl-trade:14px; --fl-url:14px; --fl-k:11px; --fl-v:27px; --fl-u:11px; --fl-say:13.5px; } }

/* ===== 05 ✦ DOUBLE · SPEC RAILS · one spec grammar on shared rails =====
   The rail becomes one grid; every card is a subgrid of its six rows, so the picture, name, trade, domain, figures and
   focus of all 25 cards sit on the same lines. Every item is drawn in one grammar: a small tracked descriptor paired
   with a large value, the unit trailing on the value's baseline. */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1{ background:#F6F8FB !important; background-image:none !important; box-shadow:inset 0 1px 0 #E7ECF3 !important; --cardw:268px !important; --gap:14px !important; }
@media (max-width:1180px){ html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 { --cardw:268px !important; } }
@media (max-width:760px){ html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 { --cardw:min(78vw, 340px) !important; --gap:14px !important; } }

/* heading in the same grammar: tracked descriptor over a large value */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .hd-intro .hd-kicker.hd-kicker{ color:#5C6980 !important; font-size:max(11.5px, var(--fl-kick)) !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .hd-intro .hd-title{ margin-top:12px !important; font-size:clamp(34px, 3.3vw, 50px) !important; font-weight:700 !important; letter-spacing:-.04em !important; color:#0E1E35 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .hd-intro .hd-title > i{ color:#6C8FD0 !important; -webkit-text-fill-color:#6C8FD0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .hd-intro .hd-desc{ color:#5C6980 !important; }

/* the shared rails: one grid, six rows, each card a subgrid of them */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-rail{ display:grid !important; grid-auto-flow:column !important; grid-auto-columns:var(--cardw) !important; grid-template-rows:auto auto auto auto auto 1fr !important; gap:var(--gap) !important; padding-top:6px !important; padding-bottom:22px !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-card, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-card:hover{ display:grid !important; grid-row:1 / span 6 !important; grid-template-rows:subgrid !important; grid-template-columns:minmax(0,1fr) !important; row-gap:0 !important; background:#FFFFFF !important; border:0 !important; border-radius:10px !important; box-shadow:none !important; overflow:hidden !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-body{ display:contents !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-body > *{ margin-left:20px !important; margin-right:20px !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-shot{ grid-row:1 !important; aspect-ratio:16/10.6 !important; border:0 !important; border-radius:10px 10px 0 0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-shot > .chrome{ border-radius:0 !important; background:#F2F4F8 !important; border-bottom-color:#E5E9F0 !important; }

/* name = the value, trade = its descriptor, domain = a reference */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-name{ grid-row:2 !important; align-self:end !important; margin-top:20px !important; margin-bottom:0 !important; font-size:max(18px, var(--fl-name)) !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.2 !important; color:#0E1E35 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-trade{ grid-row:3 !important; margin-top:6px !important; margin-bottom:0 !important; font-size:max(10.5px, var(--fl-trade)) !important; font-weight:650 !important; letter-spacing:.07em !important; text-transform:uppercase !important; line-height:1.4 !important; color:#6C7890 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-url{ grid-row:4 !important; align-self:start !important; margin-top:10px !important; margin-bottom:0 !important; font-size:max(12.5px, var(--fl-url)) !important; font-weight:500 !important; font-variant-numeric:tabular-nums !important; color:#4A5E86 !important; }

/* figures: the two descriptors stacked (label, then unit), the value set large beneath them */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-ba{ grid-row:5 !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:18px !important; margin-bottom:0 !important; padding:0 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto 1fr !important; grid-template-areas:"k" "u" "v" !important; align-items:start !important; padding:11px 12px 13px !important; border-radius:8px !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before{ background:#F3F5F9 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after{ background:#E6EEFB !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-k{ grid-area:k !important; margin:0 !important; font-size:max(10px, var(--fl-k)) !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; line-height:1.25 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before .ss-k{ color:#6C7890 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after .ss-k{ color:#3D5A92 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-u{ grid-area:u !important; margin:4px 0 0 !important; text-align:left !important; font-size:max(11px, var(--fl-u)) !important; line-height:1.3 !important; font-weight:500 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before .ss-u{ color:#76839A !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after .ss-u{ color:#3D5A92 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-v{ grid-area:v !important; align-self:end !important; margin-top:12px !important; font-weight:700 !important; letter-spacing:-.04em !important; line-height:.9 !important; font-variant-numeric:tabular-nums !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before .ss-v{ font-size:max(28px, var(--fl-v)) !important; color:#76839A !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after .ss-v{ font-size:max(36px, var(--fl-v)) !important; color:#14254A !important; }

/* focus: descriptor over the list, the list set as the value */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-say{ grid-row:6 !important; margin-top:18px !important; margin-bottom:22px !important; padding:0 !important; font-size:max(13.5px, var(--fl-say)) !important; line-height:1.55 !important; color:#2E3B52 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-say > .ss-k{ margin:0 0 7px !important; color:#6C7890 !important; }

/* pager in the grammar: plain value marks, the current page a long dark bar */
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots{ --dw:26px; --dg:4px; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots > button::before{ width:100% !important; height:6px !important; border-radius:3px !important; background:#D5DCE7 !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots > button[aria-current="true"]::before{ background:#14254A !important; }
html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots > button:hover:not([aria-current="true"])::before{ background:#AEB9CB !important; }
@media (max-width:760px){
  html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-dots{ --dw:13px; --dg:3px; }
  html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-body > *{ margin-left:16px !important; margin-right:16px !important; }
  html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-before, html:not(.ss-rails-off) body #ss1#ss1#ss1#ss1#ss1#ss1#ss1#ss1 .ss-after{ padding:11px 10px 11px !important; }
}