/* AUDIT-SITE additions. Uses the staging tokens and classes unchanged (nulvex-nolim.css is not edited).
   Phones and tablets (1024 px and below): everything centered. 1025 px and up: desktop layout. */

/* Deliverable rows with a bold title and a sentence */
.deliverable-card span{display:block}
.deliverable-card strong{display:block;margin-bottom:4px;font-size:18px}
.deliverable-card span{font-size:16px;color:var(--muted)}

/* Self-check layout */
.sc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px;align-items:start}
.sc-form{display:grid;gap:20px}
.sc-q{margin:0;min-width:0;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.sc-q legend{display:block;float:left;width:100%;padding:0;margin:0 0 18px}
.sc-q legend + *{clear:both}
.sc-qn{display:block;margin-bottom:8px;font:600 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sc-qt{display:block;font-size:clamp(19px,1.6vw,22px);line-height:1.3;font-weight:650;letter-spacing:-.02em;color:var(--text)}
.sc-opts{display:grid;gap:10px}
/* Answer cards: the card is the span after the (invisible but focusable) radio, so selected and focus states
   work without :has() and show in every browser */
.sc-opt{position:relative;display:block;color:var(--text);cursor:pointer}
.sc-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sc-opt span{display:flex;align-items:center;width:100%;min-height:52px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);font-size:16px;line-height:1.4}
.paper .sc-opt span{background:#fff}
.sc-opt:hover span{border-color:var(--accent)}
.sc-opt input:checked + span{border:2px solid var(--accent);padding:11px 17px;background:var(--panel-2);font-weight:650}
.sc-opt input:focus + span{outline:3px solid var(--accent);outline-offset:3px}
.sc-opt input:focus:not(:focus-visible) + span{outline:0}
.sc-opt input:focus-visible + span{outline:3px solid var(--accent);outline-offset:3px}

/* Score panel */
.sc-panel{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);display:flex;flex-direction:column;gap:18px}
.sc-score{display:flex;align-items:baseline;gap:8px;color:var(--text)}
.sc-num{font-size:72px;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.sc-of{font-size:18px;color:var(--muted)}
.sc-meter{height:10px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:14px}
.sc-meter span{display:block;border-radius:2px;height:100%;width:0;background:var(--accent);transition:width .25s var(--ease)}
.sc-title{margin-top:18px;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.sc-msg{margin-top:8px;font-size:16px;line-height:1.55}
.sc-count{margin-top:12px;font-size:14px;color:var(--muted)}
.sc-panel .btn{align-self:flex-start}

/* PDF card */
.sc-pdf{padding:32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.sc-pdf-h{margin:10px 0 12px;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.aside-h{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.sc-pdf ul{margin:20px 0 0;padding-left:20px;color:var(--muted)}
.sc-pdf li{margin-top:8px}
.sc-pdf-meta{margin-top:20px;font-size:14px;color:var(--muted)}

/* Closing section */
.sc-mail{margin-top:20px}
.close-actions .btn-outline{background:transparent;color:var(--text);border-color:rgba(240,244,243,.4)}

@media(min-width:1025px){
  .sc-layout{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  .sc-panel{position:sticky;top:calc(var(--hd-h) + 72px)}
  .sc-q{text-align:left}
}

/* Phones and tablets: everything centered, cards at a readable width */
@media(max-width:1024px){
  .sc-layout,.sc-form{max-width:640px;margin-inline:auto}
  .sc-q,.sc-panel,.sc-pdf{text-align:center}
  .sc-opt span{justify-content:center;text-align:center}
  .sc-panel{align-items:center}
  .sc-score{justify-content:center}
  .sc-panel .btn{align-self:center}
  .sc-pdf{max-width:560px;margin-inline:auto}
  .sc-pdf ul{list-style:none;padding:0}
  .deliverable-card{justify-content:center;text-align:center}
  .section .lede,.section .boundary{margin-inline:auto;text-align:center}
  .section .boundary{max-width:640px}
}
@media(max-width:767.98px){
  .sc-q,.sc-panel,.sc-pdf{padding:22px 16px}
  .sc-num{font-size:60px}
}
@media(min-width:1920px){.sc-qt{font-size:24px}.sc-opt span{font-size:18px}}
@media(min-width:2560px){.sc-qt{font-size:28px}.sc-opt span{font-size:20px}.sc-layout{grid-template-columns:minmax(0,1fr) 440px}}

/* Text links and small print at 14 px or more; footer column links reach 44 px in both directions */
.crumbs ol,.crumbs a,.crumbs [aria-current],.ln-cta,.ln-title{font-size:14px}
.ln-title{font-size:15px}
.ft-col li a{min-width:44px}
@media(max-width:767.98px){.sc-count,.sc-pdf-meta{font-size:16px}}
/* Caps labels at 14 px on this site (the shared sheet uses 13 px) */
.eyebrow,.label,.aside-item span,.sc-qn{font-size:14px!important}
html body .aside-item span,html body .sc-qn{font-size:14px!important}
/* Desktop: button rows in split columns start at the left edge of the column */
@media(min-width:1025px){#pdf .actions,#baseline .actions{justify-content:flex-start}}
html body main .aside-item span{font-size:14px!important}
.service-aside .aside-item span{font-size:14px!important}

/* Hero side card (.service-aside). Root cause of the overlap seen at 2000 px: the staged desktop rules (from 1025 px)
   place the card title through ".service-aside h3" (column 1, row 2) and put every other direct paragraph in row 3.
   This page uses a paragraph (.aside-h) for the title, not an h3 (heading order, F12), so the title and the sentence
   under it landed in the same grid cell and were drawn on top of each other. The title gets the h3 placement here, the
   sentence keeps row 3. The staged ".service-aside>p{font-size:16px}" also beat the .aside-h size, so the title is set
   with the same selector weight. Columns start at the top so the four labels sit on one line. */
.service-aside>.aside-h{margin:10px 0 0;font-size:26px;line-height:1.2}
.service-aside>.aside-h + p{margin-top:12px}
@media(min-width:1025px){
  .service-aside{max-width:1120px;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));align-items:start}
  .service-aside>.aside-h{grid-column:1;grid-row:2}
  .service-aside>.aside-h + p{grid-column:1;grid-row:3}
  .service-aside .aside-item{align-self:stretch}   /* dividers run the full height of the card, text starts at the top */
}

/* Narrow phones (320 px): the staged rule keeps action links from shrinking, so the long text link
   ran 9 px past the edge. Let it wrap inside the column. */
main .actions > .text-link{flex:0 1 auto;max-width:100%;text-align:center}

/* Typography restore (D114): titles in the earlier nulvex.com heading style (560, -.045em) */
.sc-qt,.sc-title,.sc-pdf-h,.aside-h,.service-aside>.aside-h{font-weight:560;letter-spacing:-.045em}
.sc-num{font-weight:560;letter-spacing:-.045em}
.sc-qn{font-weight:400}
/* 404 caption: 14 px minimum (the shared rule set 13 px) */
.nf-caption{font-size:14px!important}

/* Footer spacing (D120): wider column gap, titles that fit their column at laptop widths */
@media(min-width:1025px){html body .ft-cols{column-gap:40px}html body .ft-col h2{letter-spacing:.1em}}

/* Company lockup (D121): Nulvex Baseline lockup in the header (154 px, 124 px at 1024 and below). Never smaller than 124 px wide. */
.gn-logo img.lockup{width:154px;height:auto;max-width:none}
.gn-bar{min-height:72px}
:root{--hd-h:73px}
.ln-links{display:none}
@media(min-width:768px){.ln-links{display:flex;align-items:center;gap:0 4px;min-width:0}.ln-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--muted);font-size:14px;font-weight:600}.ln-links a:hover{color:var(--text)}}
@media(max-width:1024px){
  .gn-logo img.lockup{width:124px}
  .gn-bar{min-height:64px}
  .gn-panel{top:65px}
  :root{--hd-h:65px}
}