.detail-page{--detail-navy:#10232f;background:var(--background);min-height:100vh;color:var(--text-primary);overflow:clip}.detail-page :is(a,button):focus-visible{outline:3px solid var(--border-focus);outline-offset:3px}.detail-container{width:min(100% - 3rem,1200px);margin-inline:auto}.detail-kicker{color:var(--primary);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:.65rem;font-size:.75rem;font-weight:800;display:inline-flex}.detail-kicker:before{content:"";background:var(--brand-accent);width:18px;height:2px}.detail-lead{max-width:630px;color:var(--text-secondary);font-size:clamp(1rem,1.25vw,1.13rem);line-height:1.9}.detail-actions{flex-wrap:wrap;gap:.75rem;display:flex}.detail-button{text-align:center;border:1px solid #0000;border-radius:11px;justify-content:center;align-items:center;gap:.8rem;min-height:52px;padding:.75rem 1.3rem;font-size:.88rem;font-weight:750;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;display:inline-flex}.detail-button:hover{transform:translateY(-2px)}.detail-button-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--button-shadow)}.detail-button-primary:hover{background:var(--primary-hover)}.detail-button-ghost{color:var(--primary);border-color:var(--border-strong);background:var(--surface)}.detail-button-ghost:hover{border-color:var(--primary);background:var(--brand-soft)}.detail-button-outline{color:#fff;background:#ffffff0c;border-color:#c9e3ed78}.detail-button-outline:hover{background:#ffffff20;border-color:#fff}.detail-section{padding-block:clamp(5rem,8vw,8rem)}.detail-heading{max-width:720px;margin-bottom:3rem}.detail-heading h2{letter-spacing:-.045em;text-wrap:balance;margin-top:.8rem;font-size:clamp(2rem,3.5vw,3.55rem);font-weight:750;line-height:1.18}.detail-heading>p:last-child{color:var(--text-secondary);margin-top:1.1rem;font-size:1rem;line-height:1.85}.how-hero{background:radial-gradient(circle at 85% 35%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 35%), linear-gradient(145deg, var(--surface), var(--background));padding-block:clamp(5rem,8vw,7.5rem);position:relative}.how-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(2.5rem,6vw,6.5rem);display:grid}.how-hero h1{letter-spacing:-.055em;text-wrap:balance;max-width:680px;margin-top:1rem;font-size:clamp(2.75rem,5vw,5.15rem);font-weight:750;line-height:1.13}.how-hero .detail-lead{margin-top:1.4rem}.how-hero .detail-actions{margin-top:2rem}.how-hero-footnotes{color:var(--text-secondary);flex-wrap:wrap;gap:.75rem 1.3rem;margin-top:2rem;font-size:.78rem;font-weight:650;display:flex}.how-hero-footnotes span{align-items:center;gap:.45rem;display:inline-flex}.how-hero-footnotes svg{color:var(--success)}.how-visual{isolation:isolate;place-items:center;min-height:480px;display:grid;position:relative}.how-visual-grid{z-index:-1;border:1px solid var(--border);background:repeating-radial-gradient(circle, transparent 0 67px, color-mix(in srgb, var(--primary) 10%, transparent) 68px 69px);border-radius:50%;position:absolute;inset:5%}.how-visual-grid:before{content:"";border:1px dashed color-mix(in srgb, var(--primary) 24%, transparent);border-radius:50%;position:absolute;inset:17%}.how-package{width:min(60%,305px);min-height:380px;color:var(--detail-navy);background:linear-gradient(145deg,#fff,#eaf4f9);border:1px solid #d1e1eb;border-radius:20px;flex-direction:column;justify-content:space-between;padding:1.4rem;display:flex;position:absolute;inset-inline-start:6%;transform:rotate(-5deg);box-shadow:0 30px 65px #092c4933,inset 0 0 0 6px #ffffff91}.how-package-top{color:#0759c7;letter-spacing:.06em;justify-content:space-between;align-items:center;font:800 .78rem ui-sans-serif,sans-serif;display:flex}.how-package-center{text-align:center;justify-items:center;gap:.5rem;display:grid}.how-package-center svg{color:#0877a9}.how-package-center strong{font-size:1rem}.how-package-center span{color:#7793a2;letter-spacing:.14em;font:700 .53rem ui-sans-serif,sans-serif}.how-package-label{letter-spacing:.07em;background:#fff;border:1px solid #d4e5ed;border-radius:9px;align-items:center;gap:.8rem;padding:.6rem;font:700 .54rem ui-sans-serif,sans-serif;display:flex}.how-package-label b{margin-top:.3rem;font-size:.72rem;display:inline-block}.how-visual .home-qr-mark,.how-method-preview .home-qr-mark{aspect-ratio:1;background:#fff;flex:none;grid-template-columns:repeat(15,1fr);gap:1px;width:65px;display:grid}.how-visual .home-qr-mark i,.how-method-preview .home-qr-mark i{display:block}.how-visual .home-qr-cell-on,.how-method-preview .home-qr-cell-on{background:#18394b}.how-visual-connector{inset-inline-start:62%;gap:.5rem;display:flex;position:absolute;top:46%;transform:rotate(-5deg)}.how-visual-connector span{background:var(--brand-accent);width:7px;height:7px;box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-accent) 14%, transparent);border-radius:50%}.how-verification{inset-inline-end:1%;border:1px solid var(--border);background:var(--surface);border-radius:16px;justify-items:start;gap:.6rem;width:min(52%,250px);padding:1.1rem;display:grid;position:absolute;bottom:10%;transform:rotate(4deg);box-shadow:0 20px 48px #092c4930}.how-verification-label{color:var(--text-muted);font-size:.65rem;font-weight:700}.how-verification-icon{background:var(--success-soft);width:44px;height:44px;color:var(--success);border-radius:11px;place-items:center;display:grid}.how-verification strong{font-size:.83rem}.how-verification-lines{gap:.35rem;width:100%;display:grid}.how-verification-lines i{background:var(--surface-muted);border-radius:9px;width:100%;height:5px;display:block}.how-verification-lines i:nth-child(2){width:76%}.how-verification-lines i:nth-child(3){width:54%}.how-visual-caption{inset-inline-end:3%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:99px;padding:.45rem .7rem;font-size:.63rem;font-weight:700;position:absolute;top:7%}.how-journey{background:var(--surface)}#journey{scroll-margin-top:5rem}.how-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.how-step{border:1px solid var(--border);background:var(--surface);min-width:0;box-shadow:var(--shadow-card);border-radius:16px;padding:1.4rem;position:relative}.how-step:after{content:"";z-index:2;inset-inline-end:-1.04rem;background:var(--brand-accent);width:1.04rem;height:2px;position:absolute;top:40px}.how-step:last-child:after{display:none}.how-step-number{color:var(--primary);letter-spacing:.1em;font:800 .77rem ui-sans-serif,sans-serif}.how-step-content{margin-top:1.4rem}.how-step-icon,.how-method-icon{background:var(--brand-soft);width:45px;height:45px;color:var(--primary);border-radius:11px;place-items:center;display:grid}.how-step-tag{color:var(--text-muted);margin-top:1.15rem;font-size:.68rem;font-weight:700;display:inline-block}.how-step h3{margin-top:.4rem;font-size:1.02rem;font-weight:750;line-height:1.5}.how-step p{color:var(--text-secondary);margin-top:.6rem;font-size:.8rem;line-height:1.8}.how-methods{background:var(--background)}.how-method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;display:grid}.how-method-card{border:1px solid var(--border);background:var(--surface);min-width:0;box-shadow:var(--shadow-card);border-radius:18px;flex-direction:column;padding:clamp(1.4rem,3vw,2.2rem);display:flex}.how-method-top{justify-content:space-between;align-items:center;display:flex}.how-method-index{color:var(--text-muted);letter-spacing:.08em;font-size:.72rem;font-weight:800}.how-method-card h3{margin-top:1.6rem;font-size:1.55rem;font-weight:750}.how-method-card>p{min-height:4rem;color:var(--text-secondary);margin-top:.7rem;font-size:.9rem;line-height:1.8}.how-method-preview{border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;justify-content:center;align-items:center;gap:1rem;min-height:140px;margin-top:1.3rem;display:flex}.how-code-preview{background:linear-gradient(130deg, var(--surface-muted), var(--brand-soft));flex-direction:column;align-items:start;gap:.55rem;padding:1.4rem}.how-code-preview span{color:var(--text-muted);letter-spacing:.12em;font:800 .65rem ui-sans-serif,sans-serif}.how-code-preview strong{color:var(--primary);letter-spacing:.07em;font:800 clamp(.8rem,2vw,1.3rem) ui-monospace,monospace}.how-code-preview i{background:var(--border);border-radius:6px;width:55%;height:5px;display:block}.how-qr-preview .home-qr-mark{border:1px solid var(--border);border-radius:7px;width:78px;padding:.35rem}.how-qr-preview>span:last-child{max-width:110px;color:var(--text-secondary);font-size:.82rem;font-weight:700;line-height:1.5}.how-method-use{color:var(--text-secondary);align-items:start;gap:.55rem;margin-top:1.4rem;font-size:.8rem;line-height:1.7;display:flex}.how-method-use svg{color:var(--success);flex:none;margin-top:.1rem}.how-bottom{color:#fff;background:linear-gradient(115deg,#0c2745,#0759a6 62%,#087878);padding-block:clamp(4rem,7vw,6rem);position:relative;overflow:hidden}.how-bottom:after{content:"";inset-inline-end:-9rem;aspect-ratio:1;border:1px solid #ffffff32;border-radius:50%;width:34rem;position:absolute;top:-13rem;box-shadow:0 0 0 75px #ffffff08,0 0 0 150px #ffffff07}.how-bottom-inner{z-index:1;justify-content:space-between;align-items:center;gap:2rem;display:flex;position:relative}.how-bottom .detail-kicker{color:#a8e9e7}.how-bottom .detail-kicker:before{background:#00dda8}.how-bottom h2{letter-spacing:-.04em;max-width:610px;margin-top:.75rem;font-size:clamp(2rem,3.5vw,3.4rem);font-weight:750;line-height:1.2}.how-bottom p:last-child{color:#d6e7ef;max-width:550px;margin-top:1rem;line-height:1.8}.how-bottom .detail-actions{flex:none}.how-bottom .detail-button-primary{color:#0751a9;background:#fff}.how-bottom .detail-button-primary:hover{background:#eaf8fa}@media (max-width:900px){.how-hero-grid{grid-template-columns:1fr}.how-visual{width:min(100%,570px);margin-inline:auto}.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.how-step:nth-child(2):after{display:none}.how-bottom-inner{display:grid}}@media (max-width:640px){.detail-container{width:min(100% - 2rem,1200px)}.detail-section{padding-block:3.5rem}.detail-heading{margin-bottom:1.5rem}.detail-actions{display:grid}.how-hero{padding-block:3.5rem}.how-hero h1{font-size:clamp(2rem,8vw,2.8rem)}.how-visual{min-height:310px}.how-package{width:58%;min-height:285px;padding:.9rem}.how-package-center svg{width:36px}.how-package-center strong{font-size:.78rem}.how-package-label{gap:.4rem;padding:.35rem}.how-package-label .home-qr-mark{width:42px}.how-package-label>span:last-child{font-size:.43rem}.how-verification{width:52%;padding:.75rem;bottom:4%}.how-steps,.how-method-grid{grid-template-columns:1fr}.how-step:after{display:none}.how-method-card>p{min-height:0}}@media (prefers-reduced-motion:reduce){.detail-page *,.detail-page :before,.detail-page :after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
