/* NFC: the physical tag, readable inspection and completion proof. */
body.hw-nfc-r30 #nfc-how .cm-story-pin{height:704px;min-height:0;padding:40px 0 44px}
body.hw-nfc-r30 #nfc-how .cm-story-grid{grid-template-columns:minmax(280px,.83fr) minmax(0,1.8fr);gap:44px;max-height:none}
body.hw-nfc-r30 #nfc-how .cm-story-visual{height:600px;max-height:100%;overflow:visible}
body.hw-nfc-r30 #nfc-how .cm-story-steps{max-width:290px}
body.hw-nfc-r30 .n30-stage{display:grid;align-items:center;width:100%;height:100%;min-height:0;gap:24px;background:none;border:0;box-shadow:none}
body.hw-nfc-r30 .n30-tag-stage{grid-template-columns:minmax(0,1.3fr) 20px minmax(0,1fr);gap:20px}
body.hw-nfc-r30 .n30-tag-photo{position:relative;width:100%;height:530px;max-height:100%;border-radius:14px;overflow:hidden;margin:0;background:#eee}
body.hw-nfc-r30 .n30-tag-photo>img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 58%}
body.hw-nfc-r30 .n30-tag-ring{position:absolute;left:24%;top:45%;width:58%;height:35%;border:1px solid #fff9;border-radius:30px;box-shadow:0 0 0 7px #fff1;pointer-events:none}
body.hw-nfc-r30 .n30-flow-arrow{color:#7052b7;font-size:27px;font-weight:300;text-align:center;line-height:1}
body.hw-nfc-r30 .n30-entry{min-width:0;display:flex;flex-direction:column;gap:28px;justify-content:center}
body.hw-nfc-r30 .n30-source{position:relative;display:block;aspect-ratio:var(--n30-ratio);overflow:hidden;width:100%;margin:0;background:#fff;border-radius:0;border:0;box-shadow:none}
body.hw-nfc-r30 .n30-source>img{position:absolute;left:var(--n30-img-left);top:var(--n30-img-top);width:var(--n30-img-width);height:auto;max-width:none;max-height:none;object-fit:initial;margin:0}
body.hw-nfc-r30 .n30-expand{position:absolute;z-index:2;top:3px;right:3px;width:40px;height:40px;border-radius:8px;background:#fffffff2;border:1px solid #e7e3ee;color:#7457a2;font:inherit;font-size:21px;cursor:pointer;transition:transform 140ms cubic-bezier(.23,1,.32,1),background-color 140ms ease}
body.hw-nfc-r30 .n30-expand:active{transform:scale(.96)}
body.hw-nfc-r30 .n30-expand:focus-visible{outline:2px solid #4c00ff;outline-offset:-3px}
body.hw-nfc-r30 .n30-entry .n30-expand{display:none}
body.hw-nfc-r30 .n30-check-stage{grid-template-columns:minmax(0,1.16fr) 20px minmax(0,1fr);gap:20px}
body.hw-nfc-r30 .n30-check-main{width:100%;max-width:390px;justify-self:end}
body.hw-nfc-r30 .n30-check-detail{width:100%;max-width:300px;justify-self:start;border-left:1px solid #e9e4f2;padding-left:12px}
body.hw-nfc-r30 .n30-photo-stage{grid-template-columns:minmax(0,1fr) 28px minmax(0,.8fr);gap:36px;justify-content:center;max-width:650px;margin:auto}
body.hw-nfc-r30 .n30-photo-a{width:100%;max-width:285px;justify-self:end}
body.hw-nfc-r30 .n30-photo-b{width:100%;max-width:230px;justify-self:start}
body.hw-nfc-r30 .n30-records{background:#f8f6fc;padding-block:68px}
body.hw-nfc-r30 .n30-records .cm-split{grid-template-columns:minmax(280px,.83fr) minmax(0,1.8fr);gap:44px}
body.hw-nfc-r30 .n30-record-visual{display:flex;align-items:center;justify-content:center;min-height:0}
body.hw-nfc-r30 .n30-report{width:min(100%,440px);border:1px solid #e9e4ef;padding:0;background:#fff;box-shadow:0 14px 50px -30px #27134440}
body.hw-nfc-r30 .n30-record-index{display:flex;flex-direction:column;gap:0;margin-top:32px;max-width:250px}
body.hw-nfc-r30 .n30-record-index>span{border-top:1px solid #e6e0ef;padding:15px 0;color:#625a71;font-size:15px}
body.hw-nfc-r30 #nfc-install{padding-block:80px}
body.hw-nfc-r30 #nfc-install .cm-proof{height:430px;aspect-ratio:auto;border-radius:14px}
body.hw-nfc-r30 #nfc-install .cm-proof>img{object-position:center 53%}
body.hw-nfc-r30 .n30-dialog{inset:12px;margin:auto;width:min(980px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:calc(100svh - 24px);max-height:calc(100svh - 24px);padding:64px 20px 24px;background:#fff;border:1px solid #e3deeb;border-radius:14px;overflow:auto;overscroll-behavior:contain}
body.hw-nfc-r30 .n30-dialog::backdrop{background:#1a142778}
body.hw-nfc-r30 .n30-dialog-close{position:fixed;z-index:4;top:28px;right:28px;height:44px;padding:0 18px;background:#fff;border:1px solid #e0dce8;border-radius:8px;cursor:pointer;font:inherit;font-size:14px}
body.hw-nfc-r30 .n30-dialog-crop{position:relative;overflow:hidden;margin:auto;max-width:100%}
body.hw-nfc-r30 .n30-dialog-crop>img{position:absolute;max-width:none;max-height:none}
@media(hover:hover){body.hw-nfc-r30 .n30-expand:hover{background:#f2edff;color:#4c00ff}}
@media(min-width:761px) and (max-width:1100px){
 body.hw-nfc-r30 #nfc-how .cm-story-grid,body.hw-nfc-r30 .n30-records .cm-split{grid-template-columns:260px minmax(0,1fr);gap:28px}
 body.hw-nfc-r30 .n30-tag-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
 body.hw-nfc-r30 .n30-tag-stage>.n30-flow-arrow{display:none}
 body.hw-nfc-r30 .n30-tag-photo{height:460px}
 body.hw-nfc-r30 .n30-check-stage{grid-template-columns:minmax(0,1fr)}
 body.hw-nfc-r30 .n30-check-main{max-width:365px;justify-self:center}
 body.hw-nfc-r30 .n30-check-stage>.n30-flow-arrow,body.hw-nfc-r30 .n30-check-detail{display:none}
 body.hw-nfc-r30 .n30-photo-stage{grid-template-columns:minmax(0,1fr);gap:0}
 body.hw-nfc-r30 .n30-photo-a{justify-self:center}
 body.hw-nfc-r30 .n30-photo-stage>.n30-flow-arrow,body.hw-nfc-r30 .n30-photo-b{display:none}
}
@media(max-width:760px){
 body.hw-nfc-r30 #nfc-how .cm-story-pin{height:auto;min-height:0;padding:26px 0 30px}
 body.hw-nfc-r30 #nfc-how .cm-story-grid{grid-template-columns:minmax(0,1fr);gap:20px;height:auto;max-height:none}
 body.hw-nfc-r30 #nfc-how .cm-story-copy h1{font-size:28px!important;line-height:1.36!important}
 body.hw-nfc-r30 #nfc-how .cm-story-steps{max-width:none;margin-top:20px;gap:0;border-bottom:1px solid #e8e3f0}
 body.hw-nfc-r30 #nfc-how .cm-story-steps button{font-size:13px;min-height:44px;background:none;text-align:center;border-radius:0;padding:8px 3px 12px}
 body.hw-nfc-r30 #nfc-how .cm-story-visual{height:470px;max-height:none;overflow:visible}
 body.hw-nfc-r30 .n30-tag-stage,body.hw-nfc-r30 .n30-check-stage,body.hw-nfc-r30 .n30-photo-stage{display:flex;align-items:center;justify-content:center;height:100%;gap:0;max-width:none}
 body.hw-nfc-r30 .n30-tag-photo{height:450px;border-radius:12px;max-width:100%}
 body.hw-nfc-r30 .n30-entry,body.hw-nfc-r30 .n30-stage>.n30-flow-arrow,body.hw-nfc-r30 .n30-check-detail,body.hw-nfc-r30 .n30-photo-b{display:none}
 body.hw-nfc-r30 .n30-check-main{width:min(100%,341px);max-width:none}
 body.hw-nfc-r30 .n30-photo-a{width:min(100%,242px);max-width:none}
 body.hw-nfc-r30 .n30-records{padding-block:52px 56px}
 body.hw-nfc-r30 .n30-records .cm-split{grid-template-columns:minmax(0,1fr);gap:26px}
 body.hw-nfc-r30 .n30-records .cm-refine-heading{margin-bottom:0;font-size:26px!important}
 body.hw-nfc-r30 .n30-record-index{flex-direction:row;max-width:none;gap:18px;margin-top:18px}
 body.hw-nfc-r30 .n30-record-index>span{font-size:12px;padding:8px 0;border:0}
 body.hw-nfc-r30 .n30-report{width:min(100%,360px)}
 body.hw-nfc-r30 #nfc-install{padding-block:56px}
 body.hw-nfc-r30 #nfc-install .cm-proof{height:370px}
 body.hw-nfc-r30 .n30-dialog{padding:65px 14px 20px}
}
@media(max-width:360px){body.hw-nfc-r30 #nfc-how .cm-story-visual{height:415px}body.hw-nfc-r30 .n30-tag-photo{height:405px}body.hw-nfc-r30 .n30-check-main{width:300px}body.hw-nfc-r30 .n30-photo-a{width:213px}}
@media(prefers-reduced-motion:reduce){body.hw-nfc-r30 #nfc-how .cm-story-pin{position:relative;top:0;height:auto;padding-block:32px}body.hw-nfc-r30 .n30-expand{transition:none}}
/* Photo details are cropped from the existing clean Figma presentation exports. */
body.hw-nfc-r30 .n30-photo-stage{grid-template-columns:minmax(0,1.16fr) 24px minmax(0,1fr);max-width:760px;gap:32px}
body.hw-nfc-r30 .n30-photo-a{max-width:365px;display:flex;flex-direction:column;gap:30px}
body.hw-nfc-r30 .n30-photo-b{max-width:290px}
@media(min-width:761px) and (max-width:1100px){body.hw-nfc-r30 .n30-photo-stage{display:flex}body.hw-nfc-r30 .n30-photo-a{margin:auto}}
@media(max-width:760px){body.hw-nfc-r30 .n30-photo-stage{display:flex;gap:0}body.hw-nfc-r30 .n30-photo-a{width:min(100%,335px);max-width:none;gap:30px}}
@media(max-width:360px){body.hw-nfc-r30 .n30-photo-a{width:295px;gap:24px}}
body.hw-nfc-r30 #nfc-install .cm-proof>img{object-position:center top}