/* ============================================================================
   Native pages on private staging: the layer after chrome.css on the documents templates/native-page.php serves
   (inc/native-pages.php). Everything here sits under main.sn-native (or the gate), so nothing reaches the global
   chrome, a post, or a Keep As Is page. Four jobs:
     1. .sn-native            The native page's rhythm: the family's beat, the first section clear of the fixed bar.
     2. .sn-native-gate       The WordPress password form on a protected page, in the family's form system.
     3. .sn-native-legal      Privacy Policy and Terms and Conditions: on desktop, section heads in a left column and
                              the 760 px body in the right, across the full 1300 px column (the .bp-rows idiom);
                              below the tablet width, one centered 760 px reading measure on white.
     4. .bp-*                 Business Process Consulting: the service-page forms (hairline rows, the deliverables
                              strip, the close band) in the family's type and color, nothing new.
     5. #sn-native-icf h1     Coaching demonstration: the panel title as an h1, with the element's own margins and
                              weight reset so it keeps the div's treatment from native-apps.css.
   The shared classes (.ch, .ch-head, .ch-white, .ch-navy, .ch-black, .ih, .still-band, .t-h1, .t-head, .t-deck,
   .btn, .text-link, .actions, .close-band, .close-marks, .close-ctas) come from the chrome bundle: the built
   css/chrome.css is site, r4, home, v2, interior, resources, and chrome concatenated (tools/build.sh), so
   interior.css's close band rules are on every native document. The one shared measure this sheet pins itself is the
   close band's accent line (section 4), so no later layer can widen it. The app pages (css/native-apps.css) are a
   separate layer.
   ============================================================================ */

/* ---- 1. Rhythm ------------------------------------------------------------------------------------------------ */
/* The beat (.ch), the opener (.ih), and the close band (.close-band, .close-copy, .close-marks, .close-ctas) keep the
   bundle's own padding at both widths; nothing here restates them, so the gate and the legal page set their own. */
.sn-native{display:block;min-width:0}
.sn-native .ch-head .t-deck{margin-top:28px;max-width:1000px;text-wrap:pretty}
.sn-native .ch-white .t-deck{color:#334155}
.sn-native .ch-navy .t-deck,.sn-native .ch-black .t-deck{color:rgba(255,255,255,.88)}
.sn-native .ch-black .text-link,.sn-native .ch-navy .text-link{color:#fff}
.sn-native .nowrap{white-space:nowrap}
/* A tie: a short function word and the word after it never part at a line end above the tablet width. */
.sn-native .nb{white-space:nowrap}
@media (max-width:1099px){.sn-native .nb{white-space:normal}}

/* ---- 2. The gate: WordPress's own form in the family's system; no page content around it --------------------- */
/* Two forms reach this layout, both carrying post-password-form (inc/native-pages.php adds it). Standard WordPress
   prints two paragraphs: the sentence, then a label wrapping the password field beside the submit. The staging
   security plugin prints the form inside div.container-custom: the sentence as a label without a for attribute, the
   password label and field as siblings, p.aiowps-captcha holding the captcha label, div.aiowps-captcha-equation
   (the browser closes the paragraph before the div, so the equation and an empty p become children of the form),
   then the submit. Rules keyed on the plugin's direct children never match the standard form; the paragraph rules
   skip the captcha paragraph and the empty one. Nothing here touches the action, the fields, or the captcha. */
.sn-native-gate{min-height:calc(100vh - 72px);padding:calc(72px + 112px) 0 var(--beat);display:flex;align-items:flex-start}
.sn-native-gate-wrap{max-width:640px;margin-inline:auto}
.sn-native-kicker{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:0 0 18px}
.sn-native-gate-title{font-size:clamp(40px,4.7vw,60px);font-weight:900;letter-spacing:-.035em;line-height:1.04;color:var(--ink);margin:0;text-wrap:balance}
.sn-native-gate-form{margin-top:32px}
.sn-native-gate-form .container-custom{width:auto;max-width:none;margin:0;padding:0}
.sn-native-gate-form .post-password-form{margin:0;padding:0}
/* The sentence: the standard form's first paragraph, or the plugin's first label, in body case at the lede size. */
.sn-native-gate-form .post-password-form>p:first-of-type:not(.aiowps-captcha):not(:empty),
.sn-native-gate-form .post-password-form>label:not([for]){display:block;flex:none;font-size:20px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;color:#334155;margin:0 0 28px;max-width:560px;text-wrap:pretty}
/* The standard form's control row: the label with its field, the submit beside it. */
.sn-native-gate-form .post-password-form>p:last-of-type:not(.aiowps-captcha):not(:empty){display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin:0}
.sn-native-gate-form .post-password-form>p:empty{display:none;margin:0}
/* A wrong password or captcha: only an explicit notice reads in the error color (WordPress core's wrapper, or a
   generic error class). The captcha equation is content, never an error. */
.sn-native-gate-form .post-password-form :is(.post-password-form-invalid-password,.error,.login_error):not(:empty){display:block;margin:0 0 20px;font-size:17px;line-height:1.5;color:#B91C1C}
/* Field labels. The standard form's label wraps its field; the plugin's labels sit above their fields as siblings. */
.sn-native-gate-form .post-password-form label{display:flex;flex-direction:column;gap:8px;flex:1 1 260px;font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
.sn-native-gate-form .post-password-form>label[for],
.sn-native-gate-form .post-password-form .aiowps-captcha label{display:block;flex:none;margin:0 0 8px}
.sn-native-gate-form .post-password-form .aiowps-captcha{margin:0;padding:0;font-size:inherit;line-height:inherit}
/* The password field and the captcha answer: the same 52 px control, 16 px text, the family's focus ring. */
.sn-native-gate-form .post-password-form input[type="password"],
.sn-native-gate-form .post-password-form .aiowps-captcha-answer{width:100%;height:52px;margin:0;padding:0 16px;border:1.5px solid #CBD5E1;border-radius:3px;background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.sn-native-gate-form .post-password-form input[type="password"]:focus,
.sn-native-gate-form .post-password-form .aiowps-captcha-answer:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.sn-native-gate-form .post-password-form input[type="password"]:focus-visible,
.sn-native-gate-form .post-password-form .aiowps-captcha-answer:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sn-native-gate-form .post-password-form>input[type="password"]{margin:0 0 24px}
/* The equation: the worded sum in ink at the body size, the answer field beside it; the pair wraps on a narrow
   screen rather than squeezing. The hidden inputs inside stay hidden. */
.sn-native-gate-form .post-password-form .aiowps-captcha-equation{display:block;margin:0 0 28px}
.sn-native-gate-form .post-password-form .aiowps-captcha-equation strong{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:19px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--ink)}
.sn-native-gate-form .post-password-form .aiowps-captcha-answer{flex:none;width:96px;text-align:center;font-variant-numeric:tabular-nums}
.sn-native-gate-form .post-password-form input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;height:52px;margin:0;padding:0 28px;border:0;border-radius:3px;background:var(--navy);color:#fff;font-family:var(--font);font-size:16px;font-weight:600;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;transition:filter .3s var(--ease)}
.sn-native-gate-form .post-password-form input[type="submit"]:hover{filter:brightness(1.14)}
.sn-native-gate-form .post-password-form input[type="submit"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The locked gate on staging renders as the Customizer's navy card (wp-custom-css KS-pwform-v2/v3: body.page-id-9261
   .post-password-form at specificity 0,3,1 with !important, printed before this sheet). Three of its effects need a
   scoped, higher-specificity answer, all keyed on body.sn-native-locked so an unlocked page and every other form stay
   untouched:
     a. The equation. The Customizer lightens div.aiowps-captcha-equation, but the strong inside takes ink from the rule
        above and reads near-black on navy. The strong goes white at 0,4,1 !important; nothing else is recolored.
     b. The fields. The Customizer pins the password field and the captcha answer (input[type=text]) at 15 px
        !important; iOS Safari zooms on focus under 16 px. Both go to 16 px at 0,4,1 !important, every width.
     c. Focus. The Customizer's !important border keeps the family's focus border-color from landing; the ring and
        the accent border are restated at 0,5,1 !important so the focused field is unmistakable on navy. Background,
        text color, masking, action, hidden captcha inputs, and the card itself are left to the existing rules. */
body.sn-native-locked .sn-native-gate-form .post-password-form .aiowps-captcha-equation strong{color:#fff!important}
body.sn-native-locked .sn-native-gate-form .post-password-form input[type="password"],
body.sn-native-locked .sn-native-gate-form .post-password-form .aiowps-captcha-answer{font-size:16px!important}
body.sn-native-locked .sn-native-gate-form .post-password-form input[type="password"]:focus,
body.sn-native-locked .sn-native-gate-form .post-password-form .aiowps-captcha-answer:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(37,99,235,.28)!important}
.sn-native-gate-foot{margin:40px 0 0;font-size:17px;line-height:1.5;color:#334155}
.sn-native-gate-foot .text-link{font-size:17px;padding-bottom:3px}

/* ---- 3. Legal: the 760 px body, centered below the tablet width, in a head-and-body grid on desktop --------------- */
.sn-native-kind-legal{background:#fff;color:#1e293b}
.sn-native .sn-native-legal-page{padding:calc(72px + 88px) 0 var(--beat)}
.sn-native-legal{max-width:760px;margin:0 auto;color:#1e293b;font-size:19px;line-height:1.6;overflow-wrap:break-word}
.sn-native-legal h1{font-size:clamp(40px,4.7vw,60px);font-weight:900;letter-spacing:-.035em;line-height:1.04;color:var(--ink);margin:0 0 22px;text-wrap:balance}
.sn-native-legal h1+p{font-size:16px;line-height:1.4;color:var(--slate);margin:0 0 56px;padding:0 0 24px;border-bottom:1px solid #E2E8F0}
.sn-native-legal h1+p strong{font-weight:500;color:var(--slate)}
.sn-native-legal h2{font-size:27px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:52px 0 14px;text-wrap:balance}
.sn-native-legal h3{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:36px 0 10px}
.sn-native-legal p{margin:0 0 22px;font-size:19px;line-height:1.6;color:#1e293b}
.sn-native-legal :is(ul,ol){margin:0 0 24px;padding-left:1.35em}
.sn-native-legal ul{list-style:disc}
.sn-native-legal ol{list-style:decimal}
.sn-native-legal li{margin:0 0 8px;font-size:19px;line-height:1.6;color:#1e293b}
.sn-native-legal li::marker{color:var(--slate)}
.sn-native-legal strong{font-weight:600;color:var(--ink)}
/* Links: one underline mechanism, the 1.5 px accent gradient; the browser's own decoration is off. Written at 0,3,1
   (.sn-native, .sn-native-legal, [href]) because the Customizer's wp-custom-css prints body.page-id-3 a[href^="mailto"]
   and body.page-id-464 a[href^="mailto"] {text-decoration:underline} at 0,2,2, which outranked the earlier 0,1,1
   .sn-native-legal a and drew a second, native line under contact@sprinklenet.com. [href] matches the decoded mailto
   and the Cloudflare email-protection placeholder alike. The same Customizer rule also sets color:#2563EB !important
   on the mailto links, which made them read in accent at rest and erased the hover shift (rest and hover both accent).
   The color pair below is !important, scoped to these two selectors only, so every legal link reads in ink at rest and
   accent on hover, focus-visible, and active. Keyboard focus gets the family's 2 px accent ring (the gate's treatment)
   instead of outline:none; it is drawn outside the box, so no spacing or column measure changes. Mouse hover and
   :active show no ring. */
.sn-native .sn-native-legal a[href]{color:var(--ink)!important;text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;transition:color .3s var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sn-native .sn-native-legal a[href]:is(:hover,:focus-visible,:active){color:var(--accent)!important}
.sn-native .sn-native-legal a[href]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sn-native-legal>:last-child{margin-bottom:0}
/* Desktop: the article becomes a two-column grid across the whole .ch-head column. The title and the dated line span
   both columns; each h2 takes the left column and the paragraphs that follow it take the right, in source order, so
   reading order and markup are untouched. A hairline opens each section: the h2 and the first paragraph after it both
   carry the border, with no column gap (the gap is the h2's right padding) so the line runs unbroken. The first
   section sits under the dated line's rule and carries none of its own. Grid items do not collapse margins, so the
   h2's block margins are dropped and the row's air comes from the padding above the rule. The columns are a fixed
   27:38 share of the article, so the body is 760 px only at the full 1300 px column (540 px of heads) and narrows in
   proportion between 1100 and 1439 instead of pinning at 760 and starving the head column. */
@media (min-width:1100px){
  .sn-native-legal{max-width:1300px;display:grid;grid-template-columns:minmax(0,27fr) minmax(0,38fr);column-gap:0;align-items:start}
  .sn-native-legal h1,.sn-native-legal h1+p{grid-column:1/-1}
  .sn-native-legal h1+p{margin-bottom:0}
  .sn-native-legal h2{grid-column:1;margin:0;padding:40px 96px 0 0;border-top:1px solid #E2E8F0;font-size:24px;line-height:1.3}
  .sn-native-legal h2+*{padding-top:40px;border-top:1px solid #E2E8F0}
  .sn-native-legal h2:first-of-type,.sn-native-legal h2:first-of-type+*{border-top:0;padding-top:48px}
  .sn-native-legal :is(p,ul,ol):not(h1+p){grid-column:2}
}

/* ---- 4. Business Process Consulting ---------------------------------------------------------------------------- */
/* The hero: the title at the family scale, the lede at the opener's measure (32 px under the title, 900 px wide, the
   .ih .t-deck values the other service heroes use), the call beneath on the baseline, the still at full bleed. */
.bp-hero .bp-h1{max-width:1100px;color:var(--ink)}
.sn-native .bp-hero .bp-lede{margin-top:32px;max-width:900px}
.bp-hero .bp-actions{margin-top:44px;align-items:baseline;gap:20px 40px}
.bp-hero .bp-actions .text-link{font-size:18px;color:var(--ink)}
/* The chapter heads on the family's second size (the 48 px step): each runs to four or five words. */
.sn-native .bp-head{font-size:clamp(36px,3.4vw,48px);font-weight:900;line-height:1.04;letter-spacing:-.03em;max-width:820px;text-wrap:balance}
.sn-native .ch-white .bp-head{color:var(--ink)}
.sn-native .ch-navy .bp-head,.sn-native .ch-black .bp-head{color:#fff}
.sn-native .ch-head .bp-deck{margin-top:24px;max-width:860px;font-size:21px;line-height:1.55}
/* The three practice areas: hairline rows with the title in the left column. */
.bp-rows{width:min(1300px,calc(100% - 2*var(--gutter)));margin:64px auto 0;list-style:none;padding:0}
.bp-rows li{display:grid;grid-template-columns:420px minmax(0,1fr);column-gap:64px;align-items:start;padding:30px 0 32px;border-top:1px solid #E2E8F0}
.bp-rows li:last-child{border-bottom:1px solid #E2E8F0}
.bp-rows li>b{display:block;font-size:28px;font-weight:500;letter-spacing:-.015em;line-height:1.25;color:var(--ink);padding-top:2px;text-wrap:balance}
.bp-rows li>span{display:block;font-size:21px;line-height:1.5;color:#334155;max-width:800px;text-wrap:pretty}
/* The deliverables strip: one dark panel with a hairline edge, the four stages on the card scale, the connectors
   stopping short of the next box; the reveal states the inline script sets (none under reduced motion). */
.bp-roadmap .snsq-panel{margin-top:48px;background:#0d1117;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:40px}
.bp-roadmap .snsq{--snsq-ease:cubic-bezier(.22,1,.36,1);--snsq-line:rgba(255,255,255,.22);--snsq-dim:rgba(255,255,255,.06);margin:0;padding:0;text-align:left}
.bp-roadmap .snsq *{box-sizing:border-box}
.bp-roadmap .snsq-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--snsq-n,4),minmax(0,1fr));column-gap:32px}
.bp-roadmap .snsq-stage{position:relative;margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:22px 22px 24px;transition:border-color .5s var(--snsq-ease),transform .7s var(--snsq-ease),background-color .7s var(--snsq-ease)}
.bp-roadmap .snsq-stage::marker{content:""}
.bp-roadmap .snsq-stage b{display:block;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#fff;text-wrap:balance;transition:color .4s var(--snsq-ease)}
.bp-roadmap .snsq-stage>span{display:block;font-size:17px;line-height:1.5;color:rgba(255,255,255,.8);margin:10px 0 0;text-wrap:pretty}
.bp-roadmap .snsq-stage::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;background:var(--accent);border-radius:1px;transform:scaleX(1);transform-origin:left center;transition:transform .6s var(--snsq-ease)}
.bp-roadmap .snsq-j{position:absolute;top:50%;left:-32px;width:19px;height:1px;background:var(--snsq-line)}
.bp-roadmap .snsq-j::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(1);transform-origin:left center;transition:transform .45s var(--snsq-ease)}
.bp-roadmap .snsq-j::before{content:"";position:absolute;right:-1px;top:-3px;width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;border-left:5px solid var(--accent);transition:opacity .3s var(--snsq-ease)}
.bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on){border-color:var(--snsq-dim);transform:translateY(12px);background-color:rgba(255,255,255,.01)}
.bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on) b{color:rgba(255,255,255,.55)}
.bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on)::before{transform:scaleX(0)}
.bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on) .snsq-j::after{transform:scaleX(0)}
.bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on) .snsq-j::before{opacity:0}
@media (prefers-reduced-motion:reduce){.bp-roadmap .snsq *,.bp-roadmap .snsq *::before,.bp-roadmap .snsq *::after{transition:none!important}}
/* The close: the family's black close band (interior.css in the chrome bundle: .close-copy, the marks, the accent
   line, the ctas) under a hairline, since the deliverables chapter is black too. The accent line is pinned here at the
   family's measure (the values of interior.css, /financial-systems/ is the reference): the earlier native sheet set
   it to the 1300 px column, and this rule outranks that or any later restatement. min(100%,520px) keeps it inside the
   .ch-head column, so the phone gutters hold. */
.sn-native .bp-close{border-top:1px solid rgba(255,255,255,.12)}
.sn-native .close-marks .close-line{width:min(100%,520px);max-width:520px;height:1.5px;margin-top:22px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}

/* ---- 5. Coaching demonstration: the panel title is an h1 (templates/native-coaching.php) ----------------------- */
/* The heading keeps the div's treatment from native-apps.css, which loads after this sheet, and drops only what the
   element itself would add: the browser's and native-apps.css's heading margins (a margin inside the clipped panel
   would push the header), the Black-cut weight the app sheet forces on h1 (the title carries .sn-x, this is the
   guard), and the h1 balance from v2.css, so the line break on a phone stays where the div broke it. */
#sn-native-icf h1.chat-header{margin:0;font-weight:500!important;text-wrap:wrap}

/* ---- Tablet: the rows' title column narrows, the strip goes to two columns ------------------------------------ */
@media (max-width:1099px){
  .bp-rows li{grid-template-columns:300px minmax(0,1fr);column-gap:40px}
  .bp-roadmap .snsq-stages{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .bp-roadmap .snsq-stage:nth-child(3) .snsq-j{display:none}
}

/* ---- Phone ----------------------------------------------------------------------------------------------------- */
@media (max-width:767px){
  .sn-native .ch-head .t-deck{margin-top:18px}
  .sn-native-gate{min-height:0;padding:calc(60px + 56px) 0 var(--beat)}
  .sn-native-gate-title{font-size:36px;line-height:1.06}
  .sn-native-gate-form .post-password-form>p:first-of-type:not(.aiowps-captcha):not(:empty),
  .sn-native-gate-form .post-password-form>label:not([for]){font-size:18px;margin-bottom:24px}
  .sn-native-gate-form .post-password-form>p:last-of-type:not(.aiowps-captcha):not(:empty){flex-direction:column;align-items:stretch}
  .sn-native-gate-form .post-password-form>input[type="password"]{margin-bottom:22px}
  .sn-native-gate-form .post-password-form .aiowps-captcha-equation{margin-bottom:24px}
  .sn-native-gate-form .post-password-form .aiowps-captcha-equation strong{font-size:17px}
  .sn-native-gate-form .post-password-form .aiowps-captcha-answer{width:88px}
  .sn-native-gate-form .post-password-form input[type="submit"]{width:100%}
  .sn-native .sn-native-legal-page{padding:calc(60px + 48px) 0 var(--beat)}
  .sn-native-legal h1{font-size:36px;line-height:1.06}
  .sn-native-legal h1+p{margin-bottom:40px}
  .sn-native-legal h2{font-size:24px;margin-top:40px}
  .sn-native-legal :is(p,li){font-size:18px}
  .bp-hero .bp-actions{margin-top:28px;flex-direction:column;align-items:flex-start;gap:18px}
  .bp-hero .bp-actions .btn{width:100%;justify-content:center}
  .sn-native .bp-head{font-size:36px}
  .sn-native .ch-head .bp-deck{font-size:18px;margin-top:18px}
  .bp-rows{margin-top:40px}
  .bp-rows li{grid-template-columns:1fr;row-gap:10px;padding:24px 0 26px}
  .bp-rows li>b{font-size:24px}
  .bp-rows li>span{font-size:18px}
  .bp-roadmap .snsq-panel{margin-top:32px;padding:20px 16px 22px}
  .bp-roadmap .snsq-stages{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .bp-roadmap .snsq-stage{padding:16px 18px 18px 20px}
  .bp-roadmap .snsq-stage::before{left:-1px;right:auto;top:12px;bottom:12px;height:auto;width:2px;transform:scaleY(1);transform-origin:center top}
  .bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on)::before{transform:scaleY(0)}
  .bp-roadmap .snsq-stage b{font-size:18px}
  .bp-roadmap .snsq-stage>span{font-size:16px}
  .bp-roadmap .snsq-stage:nth-child(3) .snsq-j{display:block}
  .bp-roadmap .snsq-j{left:24px;top:-22px;width:1px;height:10px}
  .bp-roadmap .snsq-j::after{transform-origin:center top;transform:scaleY(1)}
  .bp-roadmap .snsq-j::before{right:auto;left:-3px;top:auto;bottom:-1px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:0;border-top:5px solid var(--accent)}
  .bp-roadmap .snsq.snsq-pre .snsq-stage:not(.snsq-on) .snsq-j::after{transform:scaleY(0)}
}
/* Narrow phones: the chapter heads follow the column, so High-Accountability holds on one line at 360. */
@media (max-width:379px){
  .sn-native .bp-head{font-size:calc((100vw - 48px) / 9.5)}
}