/* ══ YOUR ACCOUNT'S PAGES: THE HEAD ON THE COVER ═══════════════  12 Oct 2026 (rp106) ══
   settings-tradesperson.html and verification-tradesperson.html (Your checks). Sir:
   the pages "need to retouch and make sure it's integrated properly to the rest of
   the site". They are the dashboard's back rooms, so their heads stand on the
   dashboard's own cover photograph (dash-hero-night.jpg, the picture the rail stands
   on) under the company pages' navy fall, as Help, About and the plans page open; the
   right side carries the page's parts, numbered as its sheets are (Mason 59.10).
   Loaded after the page's own sheet, so these win over its .st-head and .crumb. */
/* ── THE HEAD ON THE COVER (rp106, 12 Oct 2026) ─────────────────────────────
   The dashboard's cover photograph under the company pages' navy fall; the
   words cream on the gutter; the index on navy glass, its own kind: a way to
   somewhere (the sheet), number then name, the line under it on hover. */
.st-cover{position:relative; isolation:isolate; overflow:hidden; display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(28px,4vw,72px); align-items:end;
  min-height:clamp(220px,18vw,280px); margin:0 0 clamp(34px,3.4vw,52px); padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px);
  background-color:var(--navy); color:var(--cream); border-radius:0}
.st-cover-ph{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.st-cover::before{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(10,22,40,.94) 0%, rgba(10,22,40,.84) 38%, rgba(10,22,40,.56) 70%, rgba(10,22,40,.44) 100%),
             linear-gradient(0deg, rgba(10,22,40,.55) 0%, rgba(10,22,40,0) 60%)}
.st-cover::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--gold-soft) 0%, rgba(212,169,67,.55) 40%, rgba(212,169,67,0) 85%)}
.st-cover .crumb{margin:0 0 clamp(16px,2vw,26px); color:rgba(250,248,243,.62)}
.st-cover .crumb a{color:rgba(250,248,243,.8)}
.st-cover .crumb a:hover{color:var(--cream)}
.st-cover .crumb b{color:var(--cream); font-weight:500}
.st-cover .k{color:var(--gold-soft)}
.st-cover .st-h{color:var(--cream); font-size:clamp(38px,3.8vw,56px); text-shadow:0 4px 26px rgba(6,10,18,.45)}
.st-cover .st-lead{color:rgba(250,248,243,.82); max-width:46ch}
.st-index{align-self:end; justify-self:stretch; padding:16px 20px; background:rgba(10,22,40,.42);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(250,248,243,.16), inset 0 1px 0 rgba(255,255,255,.08), 0 22px 40px -26px rgba(6,10,18,.8)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.st-index{background:var(--navy-2, #152238)}}
.st-index ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px 18px}
.st-index a{display:flex; align-items:baseline; gap:9px; padding:9px 0; color:var(--cream); text-decoration:none;
  font-family:var(--sans); font-size:13px; line-height:1.3; box-shadow:inset 0 -1px 0 rgba(250,248,243,.16); transition:box-shadow 200ms}
.st-index a span{flex:none; font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--gold-soft); font-variant-numeric:tabular-nums}
@media (max-width: 760px) { .st-index a span { font-size: 12px; } }  /* rp200 phone floor, was 10.5px */
.st-index a:hover{box-shadow:inset 0 -2px 0 var(--gold-soft)}
.st-index a:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px}
.st-index.is-six ol{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){
  .st-cover{grid-template-columns:minmax(0,1fr); row-gap:22px}
  .st-index ol{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .st-cover{margin-inline:calc(-1 * var(--st-bleed, 0px)); padding:22px 18px}
  .st-index{padding:10px 14px}
  .st-index ol{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px}
  /* rp157 (17 Oct 2026, the launch-day pass): the six-part index kept its three columns on a phone (.is-six outranks
     the rule above) and "Registrations" ran past its column to the box's edge; two columns, as every other index */
  .st-index.is-six ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.st-index a{transition:none}}
@media (forced-colors:active){.st-index{border:1px solid CanvasText}}