/* Stay Safe (/stay-safe, /es/stay-safe): page components on top of
 * design-tokens.css + signal-components.css. Signal rules apply: radius 0,
 * 2px ink rules, hard offset shadows, token type scale, the shared 1240
 * container. Shared components are reused (.callout, .badge, .ruled,
 * .metric, .faq pattern from /pricing); only page layout lives here.
 * Tap targets on primary actions are 44px or more (WCAG 2.5.5). */

.ss-page{line-height:1.6;background:var(--color-surface-page)}
.ss-page p{max-width:68ch}
.ss-page .section{padding:var(--space-14) 0}
.ss-h1{font-size:var(--text-heading-xl);line-height:var(--leading-heading-xl);letter-spacing:var(--tracking-heading-xl);max-width:20ch;margin:0 0 var(--space-5)}
.ss-h2{font-size:var(--text-heading-xl);line-height:var(--leading-heading-xl);letter-spacing:var(--tracking-heading-xl);max-width:24ch;margin:0 0 var(--space-4)}
.ss-h3{font-size:var(--text-heading-lg);line-height:1.25;margin:var(--space-11) 0 var(--space-4)}
.ss-lede{color:var(--color-text-muted);margin-bottom:var(--space-8)}
.ss-fine{font-size:var(--text-small);color:var(--color-text-muted);margin-top:var(--space-5)}
.ss-src{font-size:var(--text-small);color:var(--color-text-muted)}
.ss-nowrap{white-space:nowrap}
.ss-narrow{max-width:820px}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
/* Heading kept for outline and screen readers when a quote leads the section */
.ss-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shared alert components, contrast-fixed here until the DS ticket lands
 * (Wilfred's review P1-5): red text under 4.5:1 becomes ink-2. */
.ss-page .kicker--alert{color:var(--color-ink-2)}
.ss-page .badge--alert{background:var(--color-signal-soft);border-color:var(--color-signal);color:var(--color-ink)}

/* Utility bar: breadcrumbs + English | Español (breach .incident-bar) */
.ss-util{background:var(--color-cobalt-soft);border-bottom:2px solid var(--color-ink);font:500 .82rem/1.3 var(--font-mono);letter-spacing:.02em}
.ss-util__inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:48px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.ss-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ss-crumbs li{color:var(--color-ink-2)}
.ss-crumbs li+li::before{content:"/";margin-right:6px;color:var(--color-ink-2)}
.ss-crumbs a{color:var(--color-cobalt-ink)}
.ss-crumbs [aria-current]{color:var(--color-ink)}
.ss-lang{display:flex;align-items:center;gap:var(--space-2);font-size:.9rem}
.ss-lang a,.ss-lang [aria-current]{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--color-ink)}
.ss-lang [aria-current]{background:var(--color-ink);color:#fff}
.ss-lang a{background:var(--color-surface-alt);color:var(--color-cobalt-ink)}
.ss-lang a:hover{background:var(--color-surface-tint)}

/* Hero */
.ss-hero{padding:var(--space-14) 0}
.ss-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-11);align-items:start}
.ss-hero__lede{color:var(--color-text-muted);max-width:52ch;margin:0 0 var(--space-4)}
.ss-jump{margin-top:var(--space-6)}

/* "Help, at a glance" card (the breach hero fact panel) */
.ss-glance{background:var(--color-surface-alt);border:2px solid var(--color-ink);box-shadow:var(--shadow-offset-cobalt);padding:var(--space-6)}
.ss-glance__h{font:500 var(--text-kicker)/1.2 var(--font-mono);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-4)}
.ss-glance__ag{border-top:2px solid var(--color-ink);padding-top:var(--space-4)}
.ss-glance__who{font-weight:700;margin:0 0 var(--space-2)}
.ss-glance__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ss-glance__list li{display:grid;gap:2px}
.ss-glance__label{font:500 .72rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.ss-glance__num{font-size:var(--text-heading-lg);font-weight:700;text-decoration:none;line-height:1.3}
.ss-glance__num:hover{text-decoration:underline}
.ss-glance__site{margin:var(--space-3) 0 0;font-weight:700}
.ss-glance__fed{border-top:1px solid var(--color-hair);margin-top:var(--space-4);padding-top:var(--space-4)}
.ss-glance__fed a{font-weight:700}
.ss-glance .badge{justify-self:start}
.ss-glance__911{margin:var(--space-5) 0 0;padding-top:var(--space-4);border-top:2px solid var(--color-ink);font-size:1.25rem;font-weight:700;color:var(--color-ink)}
.ss-glance__911::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;background:var(--color-signal);vertical-align:middle}

/* Hub "right now" box */
.ss-now{padding:var(--space-6)}
.ss-now__h{font-size:var(--text-heading-lg);margin:0 0 var(--space-3)}
.ss-now ul{margin:0;padding-left:1.1em;display:grid;gap:var(--space-2)}
.ss-how{margin:0 0 var(--space-11);padding-left:1.3em;display:grid;gap:var(--space-2);max-width:68ch}

/* Figures */
.ss-figs-row{margin-top:var(--space-2)}
.ss-figs__h{font-size:var(--text-heading-lg);margin:0 0 var(--space-4)}
.ss-figs__list{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid;gap:var(--space-3)}
.ss-figs__list li{padding-left:18px;position:relative}
.ss-figs__list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--color-cobalt)}
.ss-figs__list b{font-size:1.15em}
.ss-national{margin-top:var(--space-8)}
.ss-national p{margin:0}

/* Pull quote (library line) */
.ss-quote{margin:0 0 var(--space-5);padding:0}
.ss-quote p{font-size:var(--text-heading-xl);line-height:var(--leading-heading-xl);letter-spacing:var(--tracking-heading-xl);font-weight:700;max-width:24ch;margin:0}

/* Scam cards */
.ss-scam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.ss-scam{background:var(--color-surface-alt);border:2px solid var(--color-ink);box-shadow:var(--shadow-offset-ink);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.ss-scam--alert{box-shadow:var(--shadow-offset-signal)}
.ss-scam p{margin:0}
.ss-scam__tag{align-self:flex-start;font:500 .72rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-cobalt-ink)}
.ss-scam .badge{align-self:flex-start;font-family:var(--font-mono)}
.ss-scam__name{font-size:var(--text-heading-lg);line-height:1.25;margin:0}
.ss-scam__summary{color:var(--color-text-muted)}
.ss-scam__label{font:500 .72rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.ss-scam__signs{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ss-scam__signs li{display:flex;gap:10px}
.ss-scam__signs li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;background:var(--color-signal)}
.ss-scam__check{border-top:2px solid var(--color-ink);padding-top:var(--space-3);color:var(--color-ink)}
.ss-scam__report{font-size:var(--text-small);color:var(--color-text-muted);margin-top:auto!important}
.ss-scam__report span{font-weight:700;color:var(--color-ink)}
.ss-scam__extras{display:flex;flex-direction:column;gap:6px}
.ss-scam__more{font-weight:700}
.ss-scam__more::after{content:" \2192"}

/* Steps and habits (.ruled grids) */
.ss-steps,.ss-habits{list-style:none;margin:0;padding:0;counter-reset:none}
.ss-step{display:flex;gap:var(--space-5)}
.ss-step p{margin:0}
.ss-step__n{flex:none;font:500 1rem/1 var(--font-mono);color:#fff;background:var(--color-ink);width:44px;height:44px;display:grid;place-items:center}
.ss-bureaus{display:block;margin-top:var(--space-2);font-size:var(--text-small)}
.ss-elder{margin-top:var(--space-8)}
.ss-recovery{margin-top:var(--space-6)}
.ss-recovery p{margin:0}
.ss-habit__t{font-size:var(--text-heading-lg);margin:0 0 var(--space-2)}
.ss-habits p{margin:0;color:var(--color-text-muted)}
.ss-habits > li:last-child:nth-child(odd){grid-column:1/-1}

/* Resource groups */
.ss-group{margin-top:var(--space-11)}
.ss-group:first-of-type{margin-top:0}
.ss-group__h{font-size:var(--text-heading-lg);margin:0 0 var(--space-2);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-ink)}
.ss-group__intro{color:var(--color-text-muted);margin:var(--space-3) 0 var(--space-5)}
.ss-res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-5)}
.ss-res-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-res{background:var(--color-surface-alt);border:2px solid var(--color-ink);padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.section--alt .ss-res{background:var(--color-surface-page)}
.ss-res p{margin:0}
.ss-res__org{font:500 .72rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.ss-res__name{font-size:var(--text-heading-lg);line-height:1.25;margin:0}
.ss-res__about{color:var(--color-text-muted)}
.ss-phone{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:6px}
.ss-phone li{line-height:1.35}
.ss-phone__label{display:block;font:500 .72rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.ss-phone__num{font-weight:700;font-size:var(--text-heading-lg);text-decoration:none}
.ss-phone__num:hover{text-decoration:underline}
.ss-res__links{list-style:none;margin:auto 0 0;padding:var(--space-2) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);font-weight:700}

/* Posters */
.ss-print-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.ss-print{background:var(--color-surface-alt);border:2px solid var(--color-ink);box-shadow:var(--shadow-offset-ink);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.section--alt .ss-print{background:var(--color-surface-page)}
.ss-print p{margin:0}
.ss-print__thumb{display:block;border:1px solid var(--color-hair);background:#fff}
.ss-print__thumb img{display:block;width:100%;height:auto;aspect-ratio:17/22}
.ss-print__title{font-size:var(--text-heading-lg);line-height:1.25;margin:0}
.ss-print__desc{color:var(--color-text-muted)}
.ss-print__meta{font:400 .78rem/1.4 var(--font-mono);color:var(--color-text-muted)}
.ss-print__btns{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto}
.ss-print-more{margin:var(--space-6) 0 0}
.ss-print-more a{font-weight:700}

/* FAQ and sources: the /pricing .faq pattern */
.faq{border-top:2px solid var(--color-ink)}
.faq details{border-bottom:1px solid var(--color-hair)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;font-weight:700;display:flex;justify-content:space-between;gap:var(--space-4);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--color-cobalt)}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 var(--space-4);max-width:70ch;color:var(--color-text-muted);margin:0}
.ss-sources ul{margin:0 0 var(--space-4);padding-left:1.1em;font-size:var(--text-small);color:var(--color-text-muted);columns:2;column-gap:var(--space-8)}
.ss-sources li{margin-bottom:4px;break-inside:avoid;overflow-wrap:anywhere}

/* CTA band: the /pricing scan band, after the useful content */
.ss-cta{background:var(--color-surface-inverse);color:#fff;padding:var(--space-14) 0;border-top:2px solid var(--color-ink)}
.ss-cta__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:center}
.ss-cta__quote{font:500 var(--text-kicker)/1.4 var(--font-mono);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--color-hair);margin:0 0 var(--space-4)}
.ss-cta__h{font-size:var(--text-heading-xl);line-height:var(--leading-heading-xl);margin:0 0 var(--space-3);color:#fff}
.ss-cta__body{color:var(--color-hair);margin:0}

/* About + sources */
.ss-about p{color:var(--color-text-muted)}
.ss-about .ss-h3{margin-top:0}

/* Hub state picker */
.ss-states{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--color-ink);border-left:2px solid var(--color-ink)}
.ss-state{border-right:2px solid var(--color-ink);border-bottom:2px solid var(--color-ink);background:var(--color-surface-page);padding:var(--space-3) var(--space-4);min-height:56px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:var(--color-ink-2)}
.ss-state__abbr{font:500 .75rem/1 var(--font-mono);letter-spacing:.06em;color:var(--color-ink-2);width:2.2em}
.ss-state__soon{font:400 .68rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-2);margin-left:auto}
.ss-state--live{background:var(--color-surface-alt);padding:0}
.ss-state--live a{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:var(--space-3) var(--space-4);font-weight:700;color:var(--color-ink);text-decoration:none}
.ss-state--live a::after{content:"\2192";margin-left:auto;color:var(--color-cobalt)}
.ss-state--live a:hover{background:var(--color-surface-tint);color:var(--color-link)}
.ss-state--live .ss-state__abbr{color:var(--color-cobalt-ink)}
.ss-patterns{display:grid;gap:var(--space-2);padding-left:1.1em}

/* Official web addresses callout */
.ss-official{margin-top:var(--space-8)}
.ss-official p{margin:0 0 var(--space-3)}
.ss-official ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-2) var(--space-6)}
.ss-official li a{font:500 1rem/1.3 var(--font-mono)}
.ss-official li span{display:block;color:var(--color-text-muted);font-size:var(--text-small)}

@media (max-width:1000px){
  .ss-scam-grid,.ss-print-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-states{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ss-res-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ss-hero__grid{grid-template-columns:1fr}
  .ss-cta__inner{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ss-page .section{padding:var(--space-11) 0}
  .ss-hero{padding:var(--space-8) 0 var(--space-11)}
  .ss-scam-grid,.ss-print-grid,.ss-res-grid,.ss-res-grid--3{grid-template-columns:1fr}
  .ss-states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-state__soon{margin-left:0;flex-basis:100%;padding-left:calc(2.2em + 10px)}
  .ss-jump{flex-direction:column;align-items:stretch}
  .ss-sources ul{columns:1}
  /* Primary actions are tap targets: 44px minimum */
  .ss-tel,.ss-res__links a,.ss-scam__report a,.ss-scam__more,.ss-official li a,.ss-glance__site a,.ss-glance__fed a,.ss-print-more a{display:inline-flex;align-items:center;min-height:44px}
  .ss-tel{flex-wrap:wrap;column-gap:.3em}
  .ss-util__inner{padding-top:var(--space-2);padding-bottom:var(--space-2)}
}
@media (max-width:380px){
  .ss-states{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
}
@media print{
  .ap-hdr,.ap-drawer-root,.ss-util,.ss-cta,.footer,.ss-jump,.ss-printables{display:none!important}
  .ss-page{background:#fff}
  .ss-scam,.ss-res,.ss-glance{box-shadow:none;break-inside:avoid}
  .faq details{display:block}
}