/*! DowGold next: /setup-finder/ page block (route "setup", templates/setup.php, sections/setup-*.php).
 * Loaded by templates/setup.php only, after next/site.css (dgn_page_head(), next/page-css.php). Every
 * rule is scoped to body.dgn-page[data-page="setup"] (KIT 9): .dgn-page is printed only by rebuilt
 * templates, and the old /setup-finder/ body under the new chrome prints data-page="modes", so it is
 * never restyled. Kit tokens and classes only; no new colours (--dgn-error for form errors only,
 * always with text). It replaces setup-finder/setup-finder.css, which is not loaded here. Motion:
 * the kit's reveals and reduced-motion rule cover everything below (all of it sits inside .dgn-main).
 */

/* ---------- setup-finder.js shows and hides steps, buttons, the prop check, the error box, the form
   and the result with the hidden attribute. Kit buttons are display:inline-flex, so [hidden] must win
   inside the finder. ---------- */
body.dgn-page[data-page="setup"] [data-dgf-app] [hidden]{display:none!important}

/* ---------- hero: "What you'll get", an example result (proof diet, 25 Sep 2026: the four mode accounts
   are no longer repeated here). The frame is the old hero card's; the rows echo the finder's own result. ---------- */
body.dgn-page[data-page="setup"] .dgn-sf-demo{position:relative;min-width:0;padding:22px 26px 18px;border:1px solid rgba(251,191,36,.2);border-radius:22px;background:var(--dgn-card-hero);box-shadow:0 44px 110px -56px rgba(251,191,36,.26),inset 0 1px 0 rgba(255,255,255,.06)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__title{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:11.5px;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:#e7e7ea}
body.dgn-page[data-page="setup"] .dgn-sf-demo__head .dgn-example{flex:none}
body.dgn-page[data-page="setup"] .dgn-sf-demo__ans{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--dgn-muted);text-wrap:balance}
body.dgn-page[data-page="setup"] .dgn-sf-demo__ans span{display:block;margin-bottom:2px;font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dgn-dim)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:14px;border-top:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__r{display:flex;flex-direction:column;min-width:0;padding:16px 20px 16px 0}
body.dgn-page[data-page="setup"] .dgn-sf-demo__r+.dgn-sf-demo__r{padding:16px 0 16px 20px;border-left:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__k{font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:10.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--dgn-dim)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;min-height:22px;font-size:14px;line-height:1.3;color:var(--dgn-muted)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v b{font-family:var(--dgn-fd);font-stretch:90%;font-weight:800;font-size:22px;line-height:1;color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-tag{font-size:12px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-pips{height:16px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-pips i{width:4px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-pips i:nth-child(1){height:5px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-pips i:nth-child(2){height:8px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-pips i:nth-child(3){height:12px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__v .dgn-pips i:nth-child(4){height:16px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__price{flex-basis:100%;font-size:13px;color:var(--dgn-gold);font-variant-numeric:tabular-nums}
body.dgn-page[data-page="setup"] .dgn-sf-demo__p{margin-top:8px;font-size:13px;line-height:1.5;color:#cfcfd6;text-wrap:pretty}
body.dgn-page[data-page="setup"] .dgn-sf-demo__status{padding:16px 18px;border:1px solid rgba(251,191,36,.26);border-radius:14px;background:rgba(251,191,36,.045)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__st{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
body.dgn-page[data-page="setup"] .dgn-sf-demo__st span{font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dgn-gold)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__st b{font-family:var(--dgn-fd);font-stretch:90%;font-weight:800;font-size:18px;line-height:1.2;color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-demo__checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:12px 0 0;padding:0;list-style:none}
body.dgn-page[data-page="setup"] .dgn-sf-demo__checks li{display:flex;align-items:flex-start;gap:8px;min-width:0;font-size:13px;line-height:1.45;color:#d0d0d8}
body.dgn-page[data-page="setup"] .dgn-sf-demo__checks svg{flex:none;margin-top:1px;color:var(--dgn-prop)}
body.dgn-page[data-page="setup"] .dgn-sf-demo__checks b{display:block;font-weight:600;color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-demo__checks span{min-width:0;text-wrap:pretty}
body.dgn-page[data-page="setup"] .dgn-sf-demo .dgn-note{margin-top:12px;font-size:12px;text-wrap:balance}
body.dgn-page[data-page="setup"] .dgn-sf-hero .dgn-trust small{text-wrap:balance}

/* ---------- the finder: heading and progress left (sticky on wide screens), one panel right ---------- */
body.dgn-page[data-page="setup"] .dgn-sf-tool{display:grid;grid-template-columns:minmax(0,1fr);row-gap:34px}
body.dgn-page[data-page="setup"] .dgn-sf-side{min-width:0}
body.dgn-page[data-page="setup"] .dgn-sf-side .dgn-lead{max-width:440px;margin-top:20px}

/* the four steps: setup-finder.js moves .is-current / .is-complete and aria-current along them */
body.dgn-page[data-page="setup"] .dgn-sf-steps{max-width:440px;margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--dgn-line2)}
body.dgn-page[data-page="setup"] .dgn-sf-steps li{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;column-gap:14px;padding:14px 0;border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-steps li::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--dgn-gold);opacity:0;transition:opacity .3s}
body.dgn-page[data-page="setup"] .dgn-sf-steps li>span{font-family:var(--dgn-fd);font-stretch:72%;font-weight:850;font-size:36px;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);font-variant-numeric:tabular-nums;transition:color .3s,-webkit-text-stroke-color .3s}
body.dgn-page[data-page="setup"] .dgn-sf-steps li b{display:block;min-width:0;font-family:var(--dgn-fd);font-stretch:92%;font-weight:800;font-size:18px;line-height:1.2;color:#b9b9c2;transition:color .3s}
body.dgn-page[data-page="setup"] .dgn-sf-steps li small{display:block;margin-top:4px;font-family:var(--dgn-fb);font-stretch:100%;font-weight:400;font-size:12.5px;line-height:1.4;color:var(--dgn-dim)}
body.dgn-page[data-page="setup"] .dgn-sf-steps li.is-current::before{opacity:1}
body.dgn-page[data-page="setup"] .dgn-sf-steps li.is-current>span{color:var(--dgn-gold);-webkit-text-stroke-color:var(--dgn-gold)}
body.dgn-page[data-page="setup"] .dgn-sf-steps li.is-current b{color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-steps li.is-complete>span{-webkit-text-stroke-color:var(--dgn-prop)}
body.dgn-page[data-page="setup"] .dgn-sf-steps li.is-complete b{color:#e8e8ec}

body.dgn-page[data-page="setup"] .dgn-sf-private{display:flex;align-items:flex-start;gap:10px;max-width:440px;margin-top:22px;font-size:13px;line-height:1.55;color:var(--dgn-muted)}
body.dgn-page[data-page="setup"] .dgn-sf-private svg{flex:none;margin-top:2px;color:var(--dgn-prop)}
body.dgn-page[data-page="setup"] .dgn-sf-private b{font-weight:600;color:#fff}

/* the panel (.dgn-panel: gradient border and glow in --c). Once an answer names a mode, the panel and
   the result's mode cell take that mode's colour; a prop-firm account wins (it is matched to Prop Firm). */
body.dgn-page[data-page="setup"] .dgn-sf-panel{padding:34px 40px 30px}
@supports selector(:has(a)){
  body.dgn-page[data-page="setup"] .dgn-sf-panel:has(input[name="risk"]:is([value="controlled"],[value="unsure"]):checked){--c:var(--dgn-bal);--c-rgb:var(--dgn-bal-rgb)}
  body.dgn-page[data-page="setup"] .dgn-sf-panel:has(input[name="risk"][value="faster"]:checked){--c:var(--dgn-agg);--c-rgb:var(--dgn-agg-rgb)}
  body.dgn-page[data-page="setup"] .dgn-sf-panel:has(input[name="risk"][value="maximum"]:checked){--c:var(--dgn-flip);--c-rgb:var(--dgn-flip-rgb)}
  body.dgn-page[data-page="setup"] .dgn-sf-panel:has(input[name="account_use"][value="prop"]:checked){--c:var(--dgn-prop);--c-rgb:var(--dgn-prop-rgb)}
}
body.dgn-page[data-page="setup"] .dgn-sf-noscript{margin-bottom:22px;padding:14px 16px;border:1px solid rgba(251,191,36,.35);border-radius:12px;font-size:14px;line-height:1.6;color:#e2e2e8}
body.dgn-page[data-page="setup"] .dgn-sf-noscript a{color:var(--dgn-gold);text-decoration:underline;text-underline-offset:3px}

body.dgn-page[data-page="setup"] .dgn-sf-form{margin:0}
body.dgn-page[data-page="setup"] .dgn-sf-count{margin-bottom:16px;font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--dgn-gold)}
/* setup-finder.js writes "Choose an answer for each question on this step." here and focuses it */
body.dgn-page[data-page="setup"] .dgn-sf-error{margin:0 0 20px;padding:12px 16px;border:1px solid rgba(248,113,113,.5);border-left-width:3px;border-radius:10px;background:rgba(248,113,113,.07);color:#fecaca;font-size:14px;font-weight:500;line-height:1.5}
/* focused by the script so screen readers announce it (role alert); it needs no focus ring */
body.dgn-page[data-page="setup"] .dgn-sf-error:focus{outline:0}

/* questions. The legend is floated so it is not the fieldset's "rendered legend": a rendered legend sits
   on the fieldset's top border and hides it, which swallowed the hairline above each sub-question. The gap
   under it is the legend's own margin: a cleared element's top margin is absorbed by the clearance. */
body.dgn-page[data-page="setup"] .dgn-sf-q{min-width:0;margin:0;padding:0;border:0}
body.dgn-page[data-page="setup"] .dgn-sf-q legend+*{clear:both}
body.dgn-page[data-page="setup"] .dgn-sf-q legend{float:left;display:block;width:100%;margin:0 0 10px;padding:0;border:0;font-family:var(--dgn-fd);font-stretch:86%;font-weight:800;font-size:clamp(28px,2.5vw,38px);line-height:1.06;letter-spacing:-.012em;color:var(--dgn-text);text-wrap:balance}
body.dgn-page[data-page="setup"] .dgn-sf-q legend:focus{outline:0}
/* setup-finder.js focuses the step's legend (tabindex -1, not in the tab order). A keyboard user gets a
   gold underline on the question, not a box that reads like a text field. */
body.dgn-page[data-page="setup"] .dgn-sf-q legend:focus-visible{outline:0;text-decoration:underline;text-decoration-color:var(--dgn-gold);text-decoration-thickness:2px;text-underline-offset:7px}
body.dgn-page[data-page="setup"] .dgn-sf-q__help{max-width:620px;margin-top:0;font-size:14.5px;line-height:1.65;color:var(--dgn-muted);text-wrap:pretty}
body.dgn-page[data-page="setup"] :is(.dgn-sf-q--sub,.dgn-sf-field){margin-top:30px;padding-top:26px;border-top:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-q--sub legend{font-stretch:92%;font-size:clamp(20px,1.7vw,24px);line-height:1.2}

/* choices: hairline tiles with a round kit radio; gold, or the colour of the mode the answer leads to */
body.dgn-page[data-page="setup"] .dgn-sf-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
body.dgn-page[data-page="setup"] .dgn-sf-choice{position:relative;display:block;min-width:0;margin:0;cursor:pointer}
body.dgn-page[data-page="setup"] .dgn-sf-choice:not([class*="dgn-m-"]){--c:var(--dgn-gold);--c-rgb:var(--dgn-gold-rgb)}
body.dgn-page[data-page="setup"] .dgn-sf-choice--wide{grid-column:1/-1}
body.dgn-page[data-page="setup"] .dgn-sf-choice input{position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}
body.dgn-page[data-page="setup"] .dgn-sf-choice__box{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;height:100%;min-height:96px;padding:18px 20px 18px 54px;border:1px solid var(--dgn-line2);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
body.dgn-page[data-page="setup"] .dgn-sf-choice__box::before{content:"";position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;border:1px solid var(--dgn-line3);border-radius:50%;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
body.dgn-page[data-page="setup"] .dgn-sf-choice b{font-weight:600;font-size:15.5px;line-height:1.35;color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-choice small{font-size:13px;line-height:1.5;color:var(--dgn-muted)}
body.dgn-page[data-page="setup"] .dgn-sf-choice__chip{margin-top:6px;padding-left:9px;border-left:2px solid var(--c);font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:10.5px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
body.dgn-page[data-page="setup"] .dgn-sf-choice:hover .dgn-sf-choice__box{border-color:rgba(var(--c-rgb),.55);transform:translateY(-1px)}
body.dgn-page[data-page="setup"] .dgn-sf-choice input:checked+.dgn-sf-choice__box{border-color:var(--c);background:rgba(var(--c-rgb),.08);box-shadow:0 20px 46px -32px rgba(var(--c-rgb),.7)}
body.dgn-page[data-page="setup"] .dgn-sf-choice input:checked+.dgn-sf-choice__box::before{border-color:var(--c);background:radial-gradient(circle,var(--c) 0,var(--c) 5px,transparent 5.5px)}
body.dgn-page[data-page="setup"] .dgn-sf-choice input:focus-visible+.dgn-sf-choice__box{outline:2px solid var(--dgn-gold);outline-offset:3px}
body.dgn-page[data-page="setup"] .dgn-sf-choices--compact .dgn-sf-choice__box{min-height:84px}
/* a question left unanswered: setup-finder.js sets .is-invalid on the fieldset, and the error box says why */
body.dgn-page[data-page="setup"] .dgf-fieldset.is-invalid .dgn-sf-choice__box{border-color:rgba(248,113,113,.6)}
body.dgn-page[data-page="setup"] .dgf-fieldset.is-invalid legend{color:#fecaca}

/* the optional name field */
body.dgn-page[data-page="setup"] .dgn-sf-field{gap:10px}
body.dgn-page[data-page="setup"] .dgn-sf-field .dgn-label span{font-family:var(--dgn-fb);font-stretch:100%;font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--dgn-dim)}
body.dgn-page[data-page="setup"] .dgn-sf-field input.dgn-input{max-width:560px;background-color:rgba(255,255,255,.03);color:var(--dgn-text)}

/* the prop-firm note on the risk step */
body.dgn-page[data-page="setup"] .dgn-sf-note{margin-top:26px;padding:16px 20px;border-left:2px solid var(--c);border-radius:0 12px 12px 0;background:linear-gradient(90deg,rgba(var(--c-rgb),.08),transparent 85%)}
body.dgn-page[data-page="setup"] .dgn-sf-note b{font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
body.dgn-page[data-page="setup"] .dgn-sf-note p{margin-top:6px;font-size:14px;line-height:1.6;color:#cfcfd6}

/* step buttons: Back (outline) left, Continue / Show my setup (the panel's one gold button) right */
body.dgn-page[data-page="setup"] .dgn-sf-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-go{min-width:210px;margin-left:auto}
body.dgn-page[data-page="setup"] .dgn-sf-back{padding:0 22px}
body.dgn-page[data-page="setup"] .dgn-sf-back__a{display:inline-block;transition:transform .25s}
body.dgn-page[data-page="setup"] .dgn-sf-back:hover .dgn-sf-back__a{transform:translateX(-4px)}

/* the result (setup-finder.js fills every slot) */
body.dgn-page[data-page="setup"] .dgn-sf-results{outline:0}
body.dgn-page[data-page="setup"] .dgn-sf-results .dgn-eyebrow{margin-bottom:16px}
body.dgn-page[data-page="setup"] .dgn-sf-results .dgn-lead{max-width:640px;margin-top:18px;font-size:16px}
body.dgn-page[data-page="setup"] .dgn-sf-rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--dgn-line2)}
body.dgn-page[data-page="setup"] .dgn-sf-r{min-width:0;padding:22px 24px 22px 0;border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-r:nth-child(even){padding:22px 0 22px 24px;border-left:1px solid var(--dgn-line)}
body.dgn-page[data-page="setup"] .dgn-sf-r__k{display:block;font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--dgn-dim)}
body.dgn-page[data-page="setup"] .dgn-sf-r h3{margin-top:10px;font-family:var(--dgn-fd);font-stretch:90%;font-weight:800;font-size:clamp(20px,1.8vw,25px);line-height:1.18;color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-r p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--dgn-muted)}
body.dgn-page[data-page="setup"] .dgn-sf-r--mode{--c:var(--dgn-prop);--c-rgb:var(--dgn-prop-rgb)}
@supports selector(:has(a)){body.dgn-page[data-page="setup"] .dgn-sf-panel:has(input:checked) .dgn-sf-r--mode{--c:inherit;--c-rgb:inherit}}
body.dgn-page[data-page="setup"] .dgn-sf-r--mode .dgn-sf-r__k,
body.dgn-page[data-page="setup"] .dgn-sf-r--mode h3{color:var(--c)}
body.dgn-page[data-page="setup"] .dgn-sf-status{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px 32px;margin-top:22px;padding:22px 24px;border:1px solid rgba(251,191,36,.26);border-radius:16px;background:rgba(251,191,36,.045)}
body.dgn-page[data-page="setup"] .dgn-sf-status .dgn-sf-r__k{color:var(--dgn-gold)}
body.dgn-page[data-page="setup"] .dgn-sf-status h3{margin-top:10px;font-family:var(--dgn-fd);font-stretch:90%;font-weight:800;font-size:22px;line-height:1.2;color:#fff}
body.dgn-page[data-page="setup"] .dgn-sf-status ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
body.dgn-page[data-page="setup"] .dgn-sf-status li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#d0d0d8}
body.dgn-page[data-page="setup"] .dgn-sf-status li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--dgn-gold);transform:rotate(45deg)}
body.dgn-page[data-page="setup"] .dgn-sf-racts{margin-top:26px;gap:14px 24px}
body.dgn-page[data-page="setup"] .dgn-sf-disclaimer{max-width:700px;margin-top:20px}
body.dgn-page[data-page="setup"] .dgn-sf-restart{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:4px 0;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--dgn-gold)}
body.dgn-page[data-page="setup"] .dgn-sf-restart:is(:hover,:focus){color:var(--dgn-gold-hi);background:transparent}
body.dgn-page[data-page="setup"] .dgn-sf-restart:focus-visible{outline:2px solid var(--dgn-gold);outline-offset:2px}

/* ---------- what gets checked: three hairline columns, then the setup steps ---------- */
body.dgn-page[data-page="setup"] .dgn-sf-cols>li{gap:8px}
body.dgn-page[data-page="setup"] .dgn-sf-cols__n{font-family:var(--dgn-fd);font-stretch:72%;font-weight:850;font-size:40px;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--dgn-gold);font-variant-numeric:tabular-nums}
body.dgn-page[data-page="setup"] .dgn-sf-cols .dgn-h3{margin-top:10px}
body.dgn-page[data-page="setup"] .dgn-sf-checks .dgn-steps{margin-top:56px}

/* ---------- need a human answer: a hairline split row ---------- */
body.dgn-page[data-page="setup"] .dgn-sf-human{padding-top:0}
body.dgn-page[data-page="setup"] .dgn-sf-human__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:28px 72px;align-items:end;padding-top:48px;border-top:1px solid var(--dgn-line2)}
body.dgn-page[data-page="setup"] .dgn-sf-human__side .dgn-lead{margin-top:0}
body.dgn-page[data-page="setup"] .dgn-sf-human__side .dgn-cta-row{margin-top:24px;gap:14px 28px}

/* ---------- wide ---------- */
/* Review fix (25 Sep 2026): from 1141px to 1599px the example card can be the hero's tallest item, and the hero
   (overflow:hidden, no bottom padding) cut its border and gold glow off in a straight line. Page-only room under
   the grid; the shared .dgn-hero__grid in site.css is unchanged. From 1600px the left column is the taller one. */
@media (min-width:1141px) and (max-width:1599px){
  body.dgn-page[data-page="setup"] .dgn-sf-hero .dgn-hero__grid{padding-bottom:32px}
}
@media (min-width:1141px){
  /* two lines ("Your DowGold setup, / in four questions.") beside the modes card */
  body.dgn-page[data-page="setup"] .dgn-sf-hero .dgn-h1{font-size:clamp(44px,4.6vw,68px)}
  body.dgn-page[data-page="setup"] .dgn-sf-tool{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:72px;align-items:start}
  body.dgn-page[data-page="setup"] .dgn-sf-side{position:-webkit-sticky;position:sticky;top:104px}
  body.dgn-page[data-page="setup"] .dgn-sf-side .dgn-h2{font-size:clamp(34px,3.1vw,48px)}
}
@media (min-width:1600px){
  body.dgn-page[data-page="setup"] .dgn-sf-hero .dgn-h1{font-size:clamp(76px,4.6vw,88px)}
  body.dgn-page[data-page="setup"] .dgn-sf-tool{column-gap:104px}
  body.dgn-page[data-page="setup"] .dgn-sf-panel{padding:40px 48px 34px}
  body.dgn-page[data-page="setup"] .dgn-sf-human__in{grid-template-columns:minmax(0,1fr) minmax(0,640px);column-gap:104px}
}

/* ---------- tablets and phones ---------- */
@media (max-width:1140px){
  body.dgn-page[data-page="setup"] .dgn-sf-side .dgn-lead{max-width:640px}
  /* the four steps become one row above the panel */
  body.dgn-page[data-page="setup"] .dgn-sf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:8px;padding:14px 12px 14px 14px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li+li{border-left:1px solid var(--dgn-line)}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li:first-child{padding-left:0}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:2px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li:first-child::before{right:12px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li>span{font-size:30px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li b{font-size:16px}
  body.dgn-page[data-page="setup"] .dgn-sf-private{max-width:760px}
  body.dgn-page[data-page="setup"] .dgn-sf-human__in{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:900px){
  body.dgn-page[data-page="setup"] .dgn-sf-status{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  /* a button that does not fit takes its own full-width row (wave 3 phone rule) */
  body.dgn-page[data-page="setup"] .dgn-cta-row .dgn-btn{min-width:-webkit-max-content;min-width:max-content}
  body.dgn-page[data-page="setup"] .dgn-sf-demo{padding:16px 16px 14px}
  body.dgn-page[data-page="setup"] .dgn-sf-demo__title{letter-spacing:.14em}
  body.dgn-page[data-page="setup"] .dgn-sf-demo__status{padding:14px}

  body.dgn-page[data-page="setup"] .dgn-sf-tool{row-gap:26px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li{padding:12px 6px 12px 10px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li>span{font-size:26px}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li b{font-size:13.5px;line-height:1.25}
  body.dgn-page[data-page="setup"] .dgn-sf-steps li small{display:none}
  body.dgn-page[data-page="setup"] .dgn-sf-panel{padding:22px 16px 20px}
  body.dgn-page[data-page="setup"] .dgn-sf-q legend{font-size:26px}
  body.dgn-page[data-page="setup"] .dgn-sf-q--sub legend{font-size:20px}
  body.dgn-page[data-page="setup"] .dgn-sf-choices{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:18px}
  body.dgn-page[data-page="setup"] .dgn-sf-choice__box,
  body.dgn-page[data-page="setup"] .dgn-sf-choices--compact .dgn-sf-choice__box{min-height:0;padding:15px 16px 15px 48px}
  body.dgn-page[data-page="setup"] .dgn-sf-choice__box::before{left:16px}
  body.dgn-page[data-page="setup"] .dgn-sf-choice b{font-size:15px}
  body.dgn-page[data-page="setup"] .dgn-sf-actions{flex-direction:column-reverse;align-items:stretch;margin-top:26px;padding-top:20px}
  body.dgn-page[data-page="setup"] .dgn-sf-actions .dgn-btn{width:100%;min-width:0;margin-left:0}
  body.dgn-page[data-page="setup"] .dgn-sf-rgrid{grid-template-columns:minmax(0,1fr)}
  body.dgn-page[data-page="setup"] .dgn-sf-r,
  body.dgn-page[data-page="setup"] .dgn-sf-r:nth-child(even){padding:18px 0;border-left:0}
  body.dgn-page[data-page="setup"] .dgn-sf-status{padding:18px 16px}
  body.dgn-page[data-page="setup"] .dgn-sf-racts{flex-direction:column;align-items:stretch}
  /* the kit's phone rule (flex:1 1 220px) would be a 220px height in this column */
  body.dgn-page[data-page="setup"] .dgn-sf-racts .dgn-btn{flex:0 0 auto;min-width:0}
  body.dgn-page[data-page="setup"] .dgn-sf-racts .dgn-link{align-self:center}

  body.dgn-page[data-page="setup"] .dgn-sf-cols__n{font-size:34px}
  body.dgn-page[data-page="setup"] .dgn-sf-checks .dgn-steps{margin-top:40px}
  body.dgn-page[data-page="setup"] .dgn-sf-human__in{padding-top:40px}
}
@media (max-width:560px){
  /* the example's two result cells and its four ticks stack */
  body.dgn-page[data-page="setup"] .dgn-sf-demo__res{grid-template-columns:minmax(0,1fr)}
  body.dgn-page[data-page="setup"] .dgn-sf-demo__r,
  body.dgn-page[data-page="setup"] .dgn-sf-demo__r+.dgn-sf-demo__r{padding:14px 0;border-left:0}
  body.dgn-page[data-page="setup"] .dgn-sf-demo__r+.dgn-sf-demo__r{border-top:1px solid var(--dgn-line)}
  body.dgn-page[data-page="setup"] .dgn-sf-demo__checks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){
  body.dgn-page[data-page="setup"] .dgn-sf-steps li b{font-size:12.5px}
}
/* Audit fix, 24 Sep 2026: iOS Safari zooms the page when a field under 16px takes focus (the viewport meta has no
   maximum-scale). On phones and touch screens every text-type field on this page is 16px; desktops keep 15px. */
@media (max-width:720px),(pointer:coarse){
  html body.dgn-page[data-page="setup"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),select,textarea){font-size:16px !important}
}