.niwa-safety { --safety-lilac:#e5e4ef; --safety-green:#496553; --safety-line:#d9dade; }
.safety-wrap { width:min(1180px, calc(100% - 96px)); margin-inline:auto; }
.niwa-safety p { font-size:16px; line-height:1.85; color:var(--pt-muted); max-width:65ch; margin-block:24px; }
.niwa-safety h1, .niwa-safety h2, .niwa-safety h3 { margin:0; text-wrap:balance; }
.niwa-safety h3 { font-size:var(--niwa-type-h4); }
.niwa-safety .safety-lead { font-size:var(--niwa-type-intro-size); line-height:1.8; }
.safety-hero { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:11%; padding-block:110px 130px; }
.safety-hero h1 { max-width:9em; }
.safety-hero__copy > p { max-width:43ch; margin-block:30px; }
.safety-overview { padding:38px; background:#e9e9f0; border-radius:14px; }
.safety-overview h2 { font-size:27px; line-height:1.3; }
.safety-overview dl { margin:32px 0 0; }
.safety-overview dl > div { padding-block:26px; border-top:1px solid #d4d4df; }
.safety-overview dl > div:last-child { padding-bottom:0; }
.safety-overview dt { display:flex; gap:18px; font-size:15px; line-height:1.65; }
.safety-overview dt span { color:#777583; font-size:11px; padding-top:3px; }
.safety-overview dd { margin:14px 0 0 32px; font-size:14px; line-height:1.85; color:var(--pt-muted); }
.safety-text-link { display:inline-flex; align-items:center; gap:20px; padding-block:12px; font-size:13px; border-bottom:1px solid currentColor; text-decoration:none; }
.safety-text-link:hover { color:var(--safety-green); }
.niwa-safety :is(a,button,summary):focus-visible { outline:2px solid var(--safety-green); outline-offset:5px; }
.safety-document { display:grid; grid-template-columns:200px minmax(0,760px); justify-content:space-between; gap:80px; padding-top:88px; border-top:1px solid var(--safety-line); }
.safety-document__body { min-width:0; }
.safety-document__body .safety-wrap { width:100%; }
.safety-index { position:sticky; top:126px; align-self:start; display:flex; flex-direction:column; gap:4px; }
.niwa-safety .safety-index__label { margin:0 0 22px; font-size:12px; color:var(--pt-muted); }
.safety-index a { display:block; padding-block:12px; font-size:14px; line-height:1.65; text-decoration:none; }
.safety-index a:hover { text-decoration:underline; text-underline-offset:6px; }
.safety-section { padding-block:104px; border-bottom:1px solid var(--safety-line); scroll-margin-top:125px; }
.safety-document__body > .safety-section:first-child { padding-top:0; }
.safety-document__body > .safety-section:last-child { border:0; padding-bottom:60px; }
.safety-section__intro { margin-bottom:52px; }
.safety-section__intro h2, .safety-work__intro h2, .safety-checks h2 { max-width:22ch; margin-bottom:32px; }
.safety-section__intro p:last-child { margin-bottom:0; }
.safety-reading-note { margin-top:56px; }
.safety-reading-note h3 { max-width:27ch; }
.safety-data-types { margin-block:48px 64px; }
.safety-data-notes { display:grid; gap:44px; margin-bottom:52px; }
.safety-data-notes p { margin-bottom:0; }
.safety-detail { border-top:1px solid var(--safety-line); padding-block:28px; }
.safety-detail summary { cursor:pointer; list-style:none; font-size:17px; line-height:1.7; display:flex; justify-content:space-between; gap:24px; align-items:center; }
.safety-detail summary::-webkit-details-marker { display:none; }
.safety-detail summary::after { content:"+"; flex-shrink:0; font-size:22px; font-weight:400; color:var(--pt-muted); }
.safety-detail[open] summary::after { content:"−"; }
.safety-detail p { margin:24px 0 0; }
.safety-data-type__body { padding:8px 0 12px; }
.niwa-safety .safety-data-type__body h3 { font-family:var(--niwa-font-body); font-size:13px; letter-spacing:0; color:var(--safety-green); margin-top:28px; }
.safety-data-type__body p { margin-top:12px; }
.safety-work__intro { margin-bottom:64px; }
.safety-steps { counter-reset:step; list-style:none; padding:0; margin:0; }
.safety-steps li { counter-increment:step; position:relative; padding:0 0 48px 62px; }
.safety-steps li:last-child { padding-bottom:0; }
.safety-steps li::before { content:counter(step, decimal-leading-zero); position:absolute; inset:4px auto auto 0; font-size:13px; color:var(--safety-green); }
.safety-steps p { margin:18px 0 0; }
.safety-checks .safety-demo { min-width:0; container-type:inline-size; }
.safety-demo__intro { max-width:58ch; margin-bottom:36px; }
.niwa-safety .safety-demo__intro h3 { max-width:26ch; scroll-margin-top:130px; }
.niwa-safety .safety-demo__intro p { font-size:15px; line-height:1.8; margin-bottom:0; }
.safety-demo__stages { display:grid; grid-template-columns:1fr 1fr 1fr; padding:0; margin:0 0 28px; list-style:none; gap:20px; }
.safety-demo__stages li { padding-top:15px; border-top:2px solid #dcdce3; font-size:12px; line-height:1.6; color:#74747d; transition:color 400ms,border-color 400ms; }
.safety-demo__stages li > span { display:block; margin-bottom:6px; font-size:10px; }
.safety-demo__stages [aria-current="step"] { border-color:var(--safety-green); color:var(--safety-green); }
.safety-window { position:relative; overflow:hidden; border:1px solid #d9d9e0; border-radius:12px; background:#fff; box-shadow:0 20px 50px -30px #35334235; transition:box-shadow 600ms; }
.safety-window__bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:12px 20px; background:#fcfcfd; border-bottom:1px solid #e6e6eb; font-size:11px; color:#686972; }
.safety-window__dots { display:flex; gap:5px; }
.safety-window__dots i { width:5px; height:5px; border-radius:50%; background:#d2d2d9; }
.safety-window__version { min-width:70px; text-align:end; font-size:10px; }
.safety-version-new { display:none; }
.safety-preview { position:relative; overflow:hidden; background:#fff; }
.safety-preview__nav { display:flex; align-items:center; gap:22px; padding:24px 30px; font-size:10px; color:#6c6b70; }
.safety-preview__nav b { font:26px/1 var(--niwa-font-display); color:var(--pt-ink); margin-inline-end:auto; }
.safety-preview__body { position:relative; aspect-ratio:1.85; margin-inline:30px; overflow:hidden; background:#f6f5f5; isolation:isolate; }
.safety-preview__image { position:absolute; inset:0 0 0 auto; width:52%; height:100%; object-fit:cover; object-position:68% center; transition:width 1000ms cubic-bezier(.2,.7,.2,1),object-position 1000ms; z-index:-1; }
.safety-preview__copy { width:48%; padding:9% 5%; transition:transform 1000ms cubic-bezier(.2,.7,.2,1); }
.safety-preview__copy > span:first-child { font-size:9px; color:#717078; }
.niwa-safety .safety-preview__copy p { font:clamp(22px,4.8cqw,36px)/1.12 var(--niwa-font-display); letter-spacing:-.03em; color:#343438; margin:18px 0 24px; max-width:9ch; }
.safety-preview__shop { display:inline-flex; gap:16px; padding-bottom:8px; border-bottom:1px solid #a4a3ab; font-size:9px; }
.safety-preview__footer { display:flex; justify-content:space-between; padding:24px 30px; font-size:9px; color:#84838a; }
.safety-preview__scan { position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(180deg,transparent 40%,#b3c1b630 49%,#769d8b80 50%,transparent 51%); background-size:100% 220%; }
:is([data-state="checking"],[data-state="applied"]) .safety-preview__image { width:100%; object-position:center; }
:is([data-state="checking"],[data-state="applied"]) .safety-preview__copy { transform:translateX(6%); }
:is([data-state="checking"],[data-state="applied"]) .safety-version-original { display:none; }
:is([data-state="checking"],[data-state="applied"]) .safety-version-new { display:inline; }
[data-state="checking"] .safety-preview__scan { opacity:1; animation:safety-scan 1.1s linear; }
[data-state="applied"] .safety-window { box-shadow:0 0 0 2px #6c927b35,0 20px 50px -30px #35334235; }
.safety-demo__record { display:flex; align-items:center; gap:18px; margin:24px 0 0; padding:18px 0; border-bottom:1px solid var(--safety-line); }
.safety-saved-preview { flex-shrink:0; width:78px; height:48px; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:5px; gap:5px; background:#fff; border:1px solid #dad9e1; border-radius:4px; }
.safety-saved-preview > span { width:80%; height:12px; border-block:2px solid #b9b7c3; }
.safety-saved-preview img { width:100%; height:100%; object-fit:cover; object-position:68% center; }
.safety-demo__record strong { display:block; font-size:12px; font-weight:500; line-height:1.6; }
.safety-demo__record div > span { display:block; font-size:11px; color:var(--pt-muted); margin-top:4px; line-height:1.65; }
.safety-demo__restore-mark { margin-inline-start:auto; font-size:26px; color:var(--safety-green); }
[data-state="recovering"] .safety-demo__restore-mark { animation:safety-restore 1.1s ease-in-out; }
.safety-demo__feedback { display:flex; align-items:center; gap:12px; min-height:100px; padding:24px 0; font-size:14px; line-height:1.8; }
.safety-demo__feedback::before { content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#9a98a5; }
:is([data-state="applied"],[data-state="restored"]) .safety-demo__feedback::before { background:var(--safety-green); }
[data-state="recovering"] .safety-demo__feedback::before { background:#a97f45; }
.safety-demo__controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.safety-demo__controls[hidden] { display:none; }
.safety-demo button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:46px; padding:12px 18px; border:1px solid #d7d7df; border-radius:5px; background:transparent; font-size:12px; cursor:pointer; color:var(--pt-ink); }
.safety-demo button:first-child { background:var(--pt-ink); border-color:var(--pt-ink); color:#fff; }
.safety-demo button:last-child { border-color:transparent; text-decoration:underline; text-underline-offset:5px; padding-inline:4px; }
.safety-demo button:disabled { opacity:.4; cursor:default; }
.niwa-safety .safety-caption { margin:20px 0 0; font-size:11px; line-height:1.8; max-width:65ch; }
@keyframes safety-scan { from { background-position:0 100%; } to { background-position:0 0; } }
@keyframes safety-restore { 50% { transform:rotate(-90deg); } }
@container (max-width:440px) {
    .safety-window__bar { padding:10px 12px; font-size:9px; }
    .safety-window__version { font-size:9px; min-width:55px; }
    .safety-preview__nav { padding:18px 16px; gap:12px; font-size:8px; }
    .safety-preview__nav b { font-size:23px; }
    .safety-preview__body { margin-inline:12px; aspect-ratio:1.3; }
    .safety-preview__copy { padding:13% 5%; }
    .safety-preview__copy > span:first-child { font-size:8px; }
    .niwa-safety .safety-preview__copy p { font-size:clamp(20px,6.6cqw,28px); margin-block:14px; }
    .safety-preview__shop { font-size:8px; gap:6px; line-height:1.7; }
    .safety-preview__footer { padding:18px 16px; font-size:8px; }
    .safety-demo__stages { gap:12px; }
    .safety-demo__stages li { font-size:11px; }
    .safety-demo__record { gap:12px; }
    .safety-saved-preview { width:60px; height:42px; }
    .safety-demo button:last-child { width:100%; justify-content:flex-start; }
}
@media (max-width:1100px) {
    .safety-hero { gap:7%; }
    .safety-overview { padding:30px; }
    .safety-document { grid-template-columns:170px minmax(0,1fr); gap:56px; }
}
@media (max-width:900px) {
    .safety-wrap { width:calc(100% - 64px); }
    .safety-hero { grid-template-columns:1fr; padding-block:70px 90px; gap:56px; }
    .safety-hero h1 { max-width:12em; }
    .safety-hero__copy > p { max-width:60ch; }
    .safety-overview { max-width:620px; }
    .safety-document { display:block; padding-top:36px; }
    .safety-index { position:static; flex-direction:row; flex-wrap:wrap; gap:0 28px; margin-bottom:72px; }
    .niwa-safety .safety-index__label { width:100%; margin-bottom:12px; }
    .safety-document__body { max-width:760px; margin-inline:auto; }
    .safety-section { padding-block:80px; scroll-margin-top:96px; }
}
@media (max-width:600px) {
    .safety-wrap { width:calc(100% - 40px); }
    .safety-hero { padding-block:56px 72px; gap:44px; }
    .safety-overview { padding:28px; }
    .safety-overview dd { margin-inline-start:0; }
    .safety-index { gap:0 24px; margin-bottom:60px; }
    .safety-index a { font-size:13px; }
    .safety-section__intro { margin-bottom:40px; }
    .safety-section__intro h2, .safety-work__intro h2, .safety-checks h2 { margin-bottom:28px; }
    .safety-detail summary { font-size:16px; }
    .safety-steps li { padding-inline-start:40px; padding-bottom:40px; }
    .safety-end { padding-block:80px; }
}
@media (prefers-reduced-motion:reduce) { .niwa-safety *, .niwa-safety *::before, .niwa-safety *::after { animation:none!important; transition:none!important; } }