/* H9 SIGN-UP family sheet (gr-overhaul build-out 10-03): the sign-up flow, sign-in / sign-out, "Showing <state>". Family rules only,
   D tokens only (static/d/system.css owns the tokens, type, buttons, pills, chips and bands). No colour is named here. */
.su-top{padding-block:40px 36px}
.su-top .h-statement{margin:10px 0 0;font-size:clamp(34px,5.2vw,64px);max-width:14em}
.su-top .h-statement em{font-style:italic;font-weight:360}
.su-top .lede{margin:16px 0 0;max-width:46ch;color:var(--ink)}
.su-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:var(--fs-small);font-weight:600;color:var(--c-deep,var(--ink-2))}
.su-neutral{--c:var(--ink-3);--c-ink:var(--ink-2);--c-deep:var(--ink-2);--c-1:var(--sheet);--c-2:var(--well);--c-3:var(--rule)}

/* the route: six stops on one line; the stop you are on is ringed in the state's colour */
.su-route{display:grid;grid-template-columns:repeat(var(--stops,6),minmax(0,1fr));gap:0;margin:28px 0 0;padding:0;list-style:none;max-width:720px;counter-reset:none}
.su-route li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:0;font-size:var(--fs-fine);font-weight:600;color:var(--ink-2);min-width:0}
.su-route li::before{content:"";position:absolute;left:14px;right:-2px;top:6px;height:2px;background-image:linear-gradient(90deg,var(--c-deep,var(--ink-3)) 50%,transparent 0);background-size:8px 2px;opacity:.55}
.su-route li:last-child::before{display:none}
.su-route li.done::before{background-image:none;background:var(--c-deep,var(--ink-2));opacity:1}
.su-route .dot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--page,var(--paper));box-shadow:inset 0 0 0 2px var(--c-deep,var(--ink-3))}
.su-route li.done .dot{background:var(--c-deep,var(--ink-2))}
.su-route li.now .dot{background:var(--c-deep,var(--ink));box-shadow:0 0 0 4px var(--c-3,var(--rule)),inset 0 0 0 2px var(--c-deep,var(--ink))}
.su-route .n{display:none}
.su-route li.now{color:var(--ink)}
.su-route .l{overflow-wrap:anywhere}

.su-body{border-top:0;padding-block:40px 72px}
.su-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.su-form{display:flex;flex-direction:column;gap:28px;min-width:0;max-width:680px}
.su-set{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0;padding:0;border:0}
.su-set>legend{padding:0;margin:0 0 12px}
.su-set>legend .h-title{margin:0}
/* a link that stands alone is a 44 px tap target */
.su-aside a,.su-form p.small a,.su-review a{display:inline-flex;align-items:center;min-height:44px}
.su-set>.small,.su-panel>.small{margin:0}

/* a choice row: the whole row is the tap target */
.su-opt{display:flex;align-items:flex-start;gap:14px;min-height:56px;padding:14px 16px;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;cursor:pointer;transition:border-color .12s linear}
@media (hover: hover) and (pointer: fine){.su-opt:hover{border-color:var(--control-edge)}}
.su-opt:has(input:checked){border-color:var(--c-deep,var(--ink));box-shadow:inset 3px 0 0 var(--c,var(--ink-3))}
.su-opt input{flex:none;width:22px;height:22px;margin:2px 0 0}
.su-opt>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-opt strong{font-weight:600;overflow-wrap:anywhere}
.su-sub{font-size:var(--fs-small);color:var(--ink-2);font-weight:400}
.su-price{color:var(--gold-ink);font-weight:600}
.su-limit{color:var(--ink);font-weight:600}
.su-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.su-panel[hidden]{display:none}
.su-ticks{padding:16px;background:var(--c-1,var(--sheet));border:1px solid var(--rule);border-radius:8px}
.su-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:4px 12px}
.su-tick{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400;cursor:pointer;min-width:0}
.su-tick input{flex:none;width:22px;height:22px;margin:0}
/* the controls are drawn here: unchosen = a clear ring with an empty centre in both themes (the native one was a filled grey disc in dark) */
.su-opt input,.su-tick input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;background:var(--sheet);border:2px solid var(--control-edge);border-radius:5px;cursor:pointer}
.su-opt input[type=radio],.su-tick input[type=radio]{border-radius:50%}
.su-opt input::before,.su-tick input::before{content:"";width:10px;height:10px;transform:scale(0);background:var(--sheet)}
.su-opt input[type=radio]::before,.su-tick input[type=radio]::before{border-radius:50%;background:var(--c-deep,var(--ink))}
.su-opt input[type=checkbox]::before,.su-tick input[type=checkbox]::before{width:12px;height:12px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.su-opt input:checked,.su-tick input:checked{border-color:var(--c-deep,var(--ink))}
.su-opt input[type=checkbox]:checked,.su-tick input[type=checkbox]:checked{background:var(--c-deep,var(--ink))}
.su-opt input:checked::before,.su-tick input:checked::before{transform:scale(1)}
.su-tick span{overflow-wrap:anywhere}
.su-side{margin:4px 0 0}
.su-region{border:1px solid var(--rule);border-radius:8px;background:var(--sheet)}
.su-region>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;font-weight:600;cursor:pointer;list-style:none}
.su-region>summary::-webkit-details-marker{display:none}
.su-region>summary::after{content:"";flex:none;width:8px;height:8px;margin-left:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.su-region[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.su-region>summary>span:first-child{margin-right:auto}
.su-region>.su-grid,.su-region>.su-fix{padding:4px 16px 14px}
.su-fix{display:flex;flex-direction:column;gap:12px}
.su-fix .btn{align-self:flex-start}

/* fields */
.su-field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--ink);min-width:0}
.su-field input,.su-field select,.su-field textarea{width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--sheet);border:1px solid var(--control-edge);border-radius:8px}
.su-field textarea{min-height:96px;resize:vertical}
.su-field input[aria-invalid=true]{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.su-help{font-size:var(--fs-fine);font-weight:400;color:var(--ink-2);margin:0}
/* the one-bid way in under the plans (Pelorus 10-04): a quiet text link, never a button and never red */
.su-onebid{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-weight:550;font-size:var(--fs-small)}
@media (hover: hover) and (pointer: fine){.su-onebid:hover{color:var(--ink)}}
.su-error{font-size:var(--fs-small);font-weight:600;color:var(--ink);padding:8px 12px;background:var(--gold-2);border-left:3px solid var(--gold);border-radius:4px}
.su-error-summary{margin:0;padding:12px 16px;background:var(--gold-2);border-left:3px solid var(--gold);border-radius:4px;color:var(--gold-deep);font-weight:600}
.su-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.su-trio{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule-2)}
.su-trio:last-of-type{border-bottom:0}
.su-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.su-signin{display:flex;flex-direction:column;gap:16px}
.su-hp{position:absolute;left:-9999px;top:-9999px}
.su-consent{align-items:flex-start;font-size:var(--fs-fine);color:var(--ink-2)}

/* step 1: the note sits in the band with the progress indicator (A-S3 1005), under it on a phone, beside it from 1000 px */
.su-progress{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.su-progress .su-route{margin-top:0}
.su-progress .su-aside{position:static;align-self:stretch}
.su-progress .su-aside{padding:18px 24px}
.su-progress .su-aside-n{font-size:44px;margin-bottom:6px}
/* the note beside the form */
.su-aside{align-self:start;padding:24px;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;min-width:0}
.su-aside>*{margin:0 0 12px}.su-aside>:last-child{margin-bottom:0}
.su-aside-n{font-size:96px;line-height:.8;font-weight:300;font-stretch:76%;letter-spacing:-.04em;color:var(--ghost);margin-bottom:16px;font-variant-numeric:lining-nums}
.su-review{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.su-review li{padding-left:14px;border-left:3px solid var(--c,var(--ink-3));overflow-wrap:anywhere}

/* what we check today (Tennessee): a plain notice, the state's edge */
.su-truth{padding:16px 18px;background:var(--c-1,var(--sheet));border:1px solid var(--rule);border-left:3px solid var(--c,var(--ink-3));border-radius:8px}
.su-truth p{margin:0}.su-truth p+p,.su-truth ul{margin-top:8px}
.su-truth-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600}
.su-need{--c:var(--gold);--c-1:var(--gold-1)}

/* "Showing Tennessee" (A-2) */
.showing{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:var(--fs-small)}
.showing .sw{display:inline-flex;align-items:center;min-height:44px;color:var(--c-deep,var(--link))}
@media (hover: hover) and (pointer: fine){.showing .sw:hover{color:var(--ink)}}

/* screen 3: a found value. Gold while it is only FOUND, sage once the customer confirmed it. */
.su-value{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:18px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px}
.su-value.st-found,.su-value.st-conflict{background:var(--gold-1);border-color:var(--gold-4);box-shadow:inset 3px 0 0 var(--gold)}
.su-value.st-confirmed{box-shadow:inset 3px 0 0 var(--sage)}
.su-value.st-told{box-shadow:inset 3px 0 0 var(--ink-3)}
.su-value-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.su-value-l{font-size:var(--fs-small);font-weight:600;color:var(--ink-2);padding:0}
.su-value p{margin:0}
.su-hl,.su-val{font-size:clamp(20px,2.2vw,24px);line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.su-value mark,.su-opt mark{background:var(--gold-3);color:var(--ink);padding:1px 6px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.su-found-in{font-size:var(--fs-small);font-weight:600;color:var(--gold-deep)}
.st-confirmed .su-found-in{color:var(--sage-deep)}
dd .su-found-in{display:block;margin-top:4px}
.su-confirm{font-weight:600}
.su-confirm input{--c-deep:var(--sage-ink)}
.su-edit{font-weight:400;color:var(--ink-2)}
.su-rec{padding:12px 14px;background:var(--sheet);border:1px solid var(--rule);border-radius:8px}
.su-rec+.su-rec{margin-top:8px}
.su-rec-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;overflow-wrap:anywhere}
.su-rec .small{margin:2px 0 0}
.su-rec .su-found-in{margin-top:6px}
.su-flag{margin-top:6px;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.su-checked{margin:0}
.su-foundform,.su-lookup{display:flex;flex-direction:column;gap:16px}
.su-sent{padding:18px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;box-shadow:inset 3px 0 0 var(--c,var(--ink-3))}
.su-sent p{margin:0}
.su-sent-to{font-size:clamp(20px,2.4vw,26px);font-weight:600;overflow-wrap:anywhere}

/* /account/capability */
.su-facts{display:flex;flex-direction:column;gap:0;margin:0 0 8px}
.su-fact{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-top:1px solid var(--rule-2)}
.su-fact dt{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.su-fact dd{margin:0;overflow-wrap:anywhere}
.su-fact dd .pill{margin-left:4px}
.su-fact .su-rec{margin-top:8px}

@media (min-width:560px){
  .su-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-trio{grid-template-columns:2fr 1fr 1fr}
  .su-fact{grid-template-columns:220px minmax(0,1fr);gap:16px}
}
@media (min-width:1000px){
  .su-top{padding-block:64px 52px}
  .su-cols{grid-template-columns:minmax(0,680px) minmax(260px,360px);justify-content:space-between;gap:72px}
  .su-aside{position:sticky;top:96px}
  .su-progress{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:48px}
  .su-progress .su-route{flex:1 1 0;min-width:0}
  .su-progress .su-aside{flex:0 1 360px;align-self:flex-start}
  .su-body{padding-block:56px 104px}
}
/* one column (under 1000): the note beside the form sits BEFORE the plan choice and the red button, so what you chose is read before you confirm it */
@media (max-width:999.98px){
  .su-cols{grid-template-columns:minmax(0,680px);gap:28px}
  .su-cols>.su-form,.su-cols>.su-form>.su-foundform{display:contents}
  .su-foundform>.su-value{margin-top:-12px}      /* the found values keep their own 16 px rhythm inside the 28 px column */
  .su-cols>.su-aside{order:1}
  .su-form>.su-plans,.su-form>.su-actions,.su-form>.su-actions~*,.su-foundform>.su-actions,.su-foundform>.su-actions~*{order:2}   /* the plan is chosen after the area is read */
}
@media (max-width:420px){
  .su-route{gap:0}
  .su-route .l{display:none}
  .su-route li.now .l{display:block;position:absolute;top:22px;left:0;white-space:nowrap}
  .su-route li:nth-child(n+5).now .l{left:auto;right:0}
  .su-route{margin-bottom:26px}
  .su-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-aside-n{font-size:72px}
}
@media (max-width:359.98px){.su-trades{grid-template-columns:minmax(0,1fr)}}
@media (forced-colors:active){.su-opt input,.su-tick input{-webkit-appearance:auto;appearance:auto;display:block}.su-opt input::before,.su-tick input::before{display:none}}
@media (prefers-reduced-motion:reduce){.su-opt{transition:none}}
/* FUNNELFIX 1007: on a phone the first question is on the first screen (390x844). The step-1 note keeps every word (a test pins them) but is set compact:
   its number is a small ordinal, its paragraph a size down, so "Where do you work?" is not pushed below the fold. */
@media (max-width:639.98px){
  .su-progress{gap:14px;margin-top:20px}
  .su-progress .su-aside{padding:12px 16px}
  .su-progress .su-aside-n{font-size:22px;line-height:1;margin-bottom:2px}
  .su-progress .su-aside>*{margin-bottom:6px}
  .su-progress .su-aside h2{font-size:18px;line-height:1.2}
  .su-progress .su-aside p.small{font-size:13px;line-height:1.35}
}