/*
 * Safety page (page-safety.php). Converted from design_handoff_v5_safety
 * (zip 39), Pages/Safety.dc.html (<helmet>).
 *
 * The design's responsive layer (the `.rsp-*` hooks + four @media tiers) is
 * kept as it came. Base resets, grain, scroll-reveal (`[data-rev]`/`.hp-on`),
 * the `hpRise` keyframes, the shell min-width and the scrollbar are global in
 * tokens.css / site.css and are not repeated. The design's `.rsp-url` rules
 * are dropped: both forms are the shared Gravity Forms capture / #top button.
 */

/* Light-page scrollbar, as on the other light pages. */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* style-hover from the design, as classes. */
.sf-toggle { transition: background .16s ease; }
.sf-toggle:hover { background: rgba(62,214,150,0.30) !important; }
.sf-link:hover { color: #16042E !important; }
.sf-ring { transition: border-color .2s ease; }

@media (max-width:1279px){
	.rsp-hero{ padding-left:32px !important; padding-right:32px !important; }
	.rsp-sec{ padding-left:32px !important; padding-right:32px !important; }
	.rsp-split{ gap:48px !important; }
}
@media (max-width:1023px){
	.rsp-hero{ padding-left:24px !important; padding-right:24px !important; padding-top:150px !important; }
	.rsp-sec{ padding-left:24px !important; padding-right:24px !important; }
	.rsp-split{ grid-template-columns:minmax(0,1fr) !important; gap:40px !important; }
	.rsp-split > .rsp-visual{ order:2 !important; }
	.rsp-2col{ grid-template-columns:minmax(0,1fr) !important; gap:56px !important; }
	.rsp-faq{ grid-template-columns:minmax(0,1fr) !important; }
	.rsp-layer{ width:100% !important; }
}
@media (max-width:767px){
	[data-mascot][style*="absolute"]{ display:none !important; }
	.rsp-hero{ padding-left:16px !important; padding-right:16px !important; padding-top:120px !important; padding-bottom:56px !important; }
	.rsp-sec{ padding-left:16px !important; padding-right:16px !important; padding-top:64px !important; padding-bottom:64px !important; }
	.rsp-layer-row{ flex-wrap:wrap !important; }
	.rsp-dial-row{ flex-direction:column !important; align-items:flex-start !important; }
	.rsp-task-row{ grid-template-columns:1fr !important; gap:4px !important; }
	.rsp-h1{ font-size:38px !important; line-height:1.04 !important; }
	.rsp-lead{ font-size:17px !important; }
	.rsp-h2{ font-size:34px !important; }
	.rsp-h2c{ font-size:42px !important; }
	.rsp-pill{ position:relative !important; right:auto !important; bottom:auto !important; margin-top:12px !important; flex-wrap:wrap !important; }
	.rsp-pill > div{ flex:1 1 140px !important; }
	.rsp-mock-body{ padding:20px 18px 22px !important; }
	.rsp-mock-title{ font-size:23px !important; }
	.rsp-layer{ padding:18px !important; }
	.rsp-layer img{ width:40px !important; height:40px !important; }
	.rsp-layer-row > div{ min-width:0 !important; flex:1 1 calc(100% - 60px) !important; }
	.rsp-layer-row > span{ margin-left:58px !important; }
	.rsp-dial{ padding:16px !important; }
	.rsp-dial-row [role="radiogroup"]{ width:100% !important; }
	.rsp-dial-row [role="radio"]{ flex:1 !important; padding:10px 8px !important; }
	.rsp-task{ padding:20px 18px !important; }
	.rsp-faq > div{ padding:22px 20px !important; }
	.rsp-faq h3{ font-size:20px !important; }
	.rsp-note{ margin-left:0 !important; text-align:center !important; }
}
@media (max-width:420px){
	.rsp-layer-row > span{ margin-left:0 !important; }
}