/* ============================================================================
   AccreditedNow — shared site chrome
   ----------------------------------------------------------------------------
   Nav, mobile dropdown, footer and guarantee band, extracted so every page can
   share one definition instead of each page carrying its own copy.

   WHY EVERY CLASS IS PREFIXED sc- AND EVERY COLOUR IS A LITERAL HEX:
   the pages do NOT agree on their CSS custom properties. index.html defines
   --gold:#C9A227 while entity-verify.html defines --gold:#A8861B (which is
   index's --gold-deep). Pages also define their own .btn, .wrap and .logo with
   incompatible rules — entity-verify.html's .btn is a full-width form submit.
   So this file must not reference var(--*) and must not reuse a bare class
   name. sc- = site chrome. Nothing else in the codebase uses that prefix.

   Brand palette (canonical):
     navy       #0A1B33     gold        #C9A227
     navy-2     #122B4E     gold-deep   #A8861B
     navy-3     #1A3A66     gold-soft   #E8CE7A
     ink        #16233A     gold-wash   #FBF6E7
     muted      #5C6B82     line        #E4E9F1
   ============================================================================ */

/* ---------------------------------------------------------------- layout --- */
.sc-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------------- nav --- */
.sc-nav{position:sticky;top:0;z-index:50;background:rgba(10,27,51,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}
.sc-nav a{text-decoration:none}
.sc-nav-in{display:flex;align-items:center;height:70px;gap:34px}
.sc-logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.08rem;flex:none}
.sc-logo img{height:32px;width:auto;display:block}
.sc-logo .sc-now{color:#E8CE7A}
.sc-links{display:flex;gap:16px;align-items:center;font-size:.9rem;color:#C4D0E2}
.sc-links a{color:#C4D0E2;white-space:nowrap}
.sc-links a:hover{color:#fff}
.sc-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
.sc-btn{display:inline-block;border-radius:10px;font-family:'Inter',system-ui,sans-serif;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;width:auto;margin:0}
.sc-btn-ghost{padding:.58rem 1rem;font-size:.85rem;color:#DCE5F0;border-color:rgba(255,255,255,.28);background:transparent}
.sc-btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.sc-btn-gold{padding:.58rem 1.2rem;font-size:.85rem;color:#0A1B33;background:#C9A227;border-color:#C9A227}
.sc-btn-gold:hover{background:#E8CE7A;border-color:#E8CE7A}
.sc-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex:none}
.sc-hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* ------------------------------------------------------- mobile dropdown --- */
#sc-mobile{display:none;background:#0A1B33;border-bottom:2px solid #C9A227;position:relative;z-index:9999;width:100%}
#sc-mobile a{display:block;padding:14px 24px;color:#C4D0E2;text-decoration:none;border-top:1px solid rgba(255,255,255,.07);font-size:.95rem}
#sc-mobile a:hover{color:#fff;background:rgba(255,255,255,.04)}

@media(max-width:980px){
  .sc-nav-in{gap:10px}
  .sc-links{display:none}
  .sc-cta .sc-btn-ghost{display:none}
  .sc-cta .sc-btn-gold{padding:.45rem .7rem;font-size:.76rem}
  .sc-hamburger{display:block}
}
@media(max-width:420px){
  .sc-nav-in{gap:8px}
  .sc-cta .sc-btn-gold{padding:.42rem .62rem;font-size:.72rem}
  .sc-logo{font-size:.96rem}
  .sc-logo img{height:28px}
}

/* ---------------------------------------------------------------- footer --- */
.sc-foot{background:#0A1B33;color:#8FA2BC;padding:58px 0 42px;font-size:.88rem;font-family:'Inter',system-ui,sans-serif}
.sc-foot a{color:#8FA2BC;text-decoration:none}
.sc-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.sc-foot-grid h4{color:#fff;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;font-family:'Inter',system-ui,sans-serif;font-weight:700}
.sc-foot-grid a{display:block;padding:4px 0}
.sc-foot-grid a:hover{color:#fff}
.sc-foot-grid p{margin:0;max-width:290px;line-height:1.6}
.sc-flogo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-family:'Fraunces',Georgia,serif;font-size:1.05rem;margin-bottom:14px}
.sc-flogo img{height:34px}
.sc-flogo .sc-wm{white-space:nowrap}
.sc-flogo .sc-now{color:#E8CE7A}
.sc-foot-base{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem}
@media(max-width:880px){.sc-foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.sc-foot-grid{grid-template-columns:1fr}}

/* -------------------------------------------------------- guarantee band --- */
/* Risk reversal, placed directly beneath a primary CTA. Two narrow promises
   read as more confidence than one broad one, and neither creates an
   incentive to buy in bad faith:
     1. No-Risk Promise    — scoped to OUR failure. A non-qualifier receives
                             the Roadmap plus a 12-month re-verification
                             credit, not a refund.
     2. Acceptance Guarantee — free revision or re-issue if a sponsor or
                             platform rejects the letter. Rare, cheap, and it
                             removes the buyer's worst-case fear. */
.sc-guarantee{background:#FBF6E7;border:1px solid rgba(201,162,39,.34);border-radius:14px;padding:20px 22px;margin:22px 0;font-family:'Inter',system-ui,sans-serif}
.sc-guarantee-hd{display:flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#A8861B;margin-bottom:14px}
.sc-guarantee-hd svg{width:16px;height:16px;display:block;flex:0 0 auto}
/* Container-aware, deliberately NOT a viewport media query: every current
   placement of this band is inside a narrow card (index's pricing card is
   ~530px, start-verification's is ~550px) on an otherwise wide viewport, so a
   @media rule would leave two ~250px columns of dense text. auto-fit measures
   the GRID's own width, so the band goes single-column inside a card and
   two-column only when it is given real room.

   The min(320px,100%) is load-bearing, do not simplify it to a bare 320px.
   minmax(320px,1fr) makes 320px a hard MINIMUM track width, so on a phone —
   where entity-verify's band interior is only ~230px after page padding, card
   padding, band padding and the 30px icon — the track refuses to shrink and
   the text overflows the card's right edge. min() lets the track collapse to
   the container when the container is the smaller of the two. */
.sc-g-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px 26px}
/* min-width:0 defeats the flex default of min-width:auto, which would let a
   long unbroken string push the text column wider than its flex parent. */
.sc-g-item{display:flex;gap:11px;align-items:flex-start;min-width:0}
.sc-g-item>div{min-width:0;overflow-wrap:break-word}
.sc-g-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid rgba(201,162,39,.34);display:inline-flex;align-items:center;justify-content:center;color:#A8861B}
.sc-g-ic svg{width:17px;height:17px;display:block}
.sc-g-item strong{display:block;color:#16233A;font-size:.92rem;font-weight:700;margin-bottom:3px;line-height:1.3}
.sc-g-item span{display:block;color:#5C6B82;font-size:.84rem;line-height:1.5}
@media(max-width:720px){.sc-g-list{gap:15px}}

/* Dark variant, for placement on a navy section. */
.sc-guarantee.sc-on-navy{background:rgba(255,255,255,.05);border-color:rgba(201,162,39,.42)}
.sc-guarantee.sc-on-navy .sc-guarantee-hd{color:#E8CE7A}
.sc-guarantee.sc-on-navy .sc-g-ic{background:rgba(255,255,255,.08);border-color:rgba(201,162,39,.42);color:#E8CE7A}
.sc-guarantee.sc-on-navy .sc-g-item strong{color:#fff}
.sc-guarantee.sc-on-navy .sc-g-item span{color:#C4D0E2}