@font-face{font-family:"Swiss Post Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/SwissPostSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Swiss Post Sans";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/SwissPostSans-Bold.woff2) format("woff2")}
@font-face{font-family:"Swiss Post Sans";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/SwissPostSans-Black.woff2) format("woff2")}

:root{
  --post-yellow:#FFCC00;--post-black:#000;--post-white:#fff;
  --sand-100:#050400;--sand-090:#1E1D19;--sand-070:#504F4B;--sand-030:#B4B3AF;--sand-012:#E1E0DC;--sand-006:#F0EFED;--sand-002:#FAFAFA;
  --epost-mint:#C5E7E6;--epost-tuerkis:#2EA19B;--epost-hellgelb:#FFF3CC;--epost-hellgrau:#F2F1EF;
  --font:"Swiss Post Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--sand-100);background:var(--post-white);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.01em}
h1{font-weight:800;font-size:clamp(34px,5vw,64px)}
h2{font-weight:800;font-size:clamp(28px,3.6vw,46px)}
h3{font-weight:700;font-size:clamp(18px,1.6vw,22px)}
p{margin:0}
a{color:inherit}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.45}
.muted{color:var(--sand-070)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);pointer-events:none}
header .logo{width:56px;height:56px;display:block;pointer-events:auto}
header .logo svg{width:100%;height:100%;display:block}
header .brand{font-weight:700;font-size:15px;background:var(--post-white);padding:8px 14px;border-radius:999px;border:1px solid var(--sand-012);pointer-events:auto}

/* sections */
section{min-height:100vh;display:flex;align-items:center;padding:112px 0 72px;position:relative}
.bg-mint{background:var(--epost-mint)}
.bg-yellow{background:var(--post-yellow)}
.bg-hellgrau{background:var(--epost-hellgrau)}

/* hero */
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.hero .pill{display:inline-block;background:var(--post-yellow);font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:26px;max-width:34ch}
.checks{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:clamp(16px,1.25vw,19px)}
.checks .ck{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--post-yellow);display:grid;place-items:center;margin-top:1px}
.checks .ck svg{width:14px;height:14px}
.checks .price{font-weight:700}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:14px 24px;border-radius:999px;text-decoration:none;border:2px solid var(--post-black);background:var(--post-black);color:var(--post-white);transition:background .2s,color .2s}
.btn:hover{background:var(--post-yellow);color:var(--post-black)}
.btn.yellow{background:var(--post-yellow);color:var(--post-black);border-color:var(--post-yellow)}
.btn.yellow:hover{background:var(--sand-090);color:var(--post-yellow);border-color:var(--sand-090)}
.btn svg{width:18px;height:18px}

/* flow */
.flow{width:100%;max-width:520px;margin:0 auto}
.flow svg{width:100%;height:auto;display:block;overflow:visible}
.flow .node{opacity:0;animation:nodeIn .6s ease forwards}
.flow .node:nth-of-type(1){animation-delay:.2s}
.flow .node:nth-of-type(2){animation-delay:.9s}
.flow .node:nth-of-type(3){animation-delay:1.6s}
.flow .node:nth-of-type(4){animation-delay:2.3s}
.flow .arrow{stroke-dasharray:200;stroke-dashoffset:200;animation:draw .5s ease forwards}
.flow .arrow.a1{animation-delay:.7s}.flow .arrow.a2{animation-delay:1.4s}.flow .arrow.a3{animation-delay:2.1s}
.flow .loop{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.2s ease forwards;animation-delay:2.8s}
.flow .ball{opacity:0;animation:ballIn .3s ease forwards;animation-delay:3.6s}
.flow text{font-family:var(--font)}
.flow .t1{font-weight:700;font-size:17px;fill:#000}
.flow .t2{font-size:13px;fill:#504F4B}
.flow .node.yellow .t2{fill:#1E1D19}
@keyframes nodeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ballIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.flow *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}

/* use cases + steps */
.usecases{margin-bottom:clamp(40px,6vw,80px)}
.usecases h2{max-width:20ch;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{background:var(--post-white);border:1px solid var(--sand-012);padding:9px 16px;border-radius:999px;font-weight:700;font-size:15px}
.chip.more{background:transparent;border-style:dashed;font-weight:400;color:var(--sand-070)}
.steps h2{margin-bottom:34px}
.stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--post-white);border-radius:20px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;min-height:220px;border:1px solid var(--sand-012)}
.step .num{width:46px;height:46px;border-radius:50%;background:var(--post-yellow);font-weight:800;font-size:20px;display:grid;place-items:center}
.step p{font-size:15.5px;color:var(--sand-070)}
.step .sub{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sand-070)}

/* cta */
.cta .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.cta h2{font-size:clamp(34px,4.6vw,60px);margin-bottom:22px}
.cta .lead{max-width:34ch}
.cta .card{background:var(--post-white);border-radius:24px;padding:clamp(24px,3vw,40px)}
.cta .card .sub{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sand-070);margin-bottom:18px}
.next{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.next li{display:flex;gap:14px;align-items:center;font-size:clamp(16px,1.25vw,18px);padding:14px 16px;border-radius:14px;background:var(--epost-hellgrau)}
.next .ar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--post-yellow);display:grid;place-items:center}
.next .ar svg{width:16px;height:16px}
.cta .url{display:block;margin-top:12px;font-size:14px;color:var(--sand-070);word-break:break-all}

/* footer */
footer{padding:28px var(--gutter);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--sand-070);border-top:1px solid var(--sand-012)}

/* dot nav */
nav.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:12px;z-index:20}
nav.dots a{width:10px;height:10px;border-radius:50%;background:var(--post-black);opacity:.25;display:block}
nav.dots a.on{opacity:1}

@media (max-width:900px){
  section{min-height:auto;padding:104px 0 56px}
  .hero .grid,.cta .grid{grid-template-columns:1fr}
  .flow{max-width:420px}
  .stepgrid{grid-template-columns:1fr 1fr}
  nav.dots{display:none}
  header .brand{font-size:13px}
}
@media (max-width:540px){
  .stepgrid{grid-template-columns:1fr}
  .step{min-height:0}
  header .logo{width:48px;height:48px}
}
.iph{container-type:inline-size;width:100%;max-width:340px;font-family:var(--font);color:#111;text-align:left;line-height:1.3}
.iph-f{aspect-ratio:320/692;background:#1a1a1a;border-radius:11.5cqw;padding:3.1cqw;box-shadow:0 18px 50px rgba(30,29,25,.16);position:relative}
.iph-s{position:absolute;inset:3.1cqw;border-radius:8.6cqw;background:#f2f2f0;overflow:hidden;display:flex;flex-direction:column}
.iph-di{position:absolute;top:3.4cqw;left:50%;transform:translateX(-50%);width:29cqw;height:8.4cqw;border-radius:999px;background:#0b0b0b;z-index:3}
.iph-sb{flex:none;display:flex;justify-content:space-between;align-items:center;padding:5.2cqw 7.5cqw 0 8.2cqw;height:15cqw;font-size:4.6cqw;font-weight:700;letter-spacing:-.01em;position:relative;z-index:2}
.iph-sb .t{display:flex;align-items:center;gap:1.4cqw}
.iph-sb .t svg{width:3.6cqw;height:3.6cqw}
.iph-sb .ic{display:flex;align-items:center;gap:1.6cqw}
.iph-sb .ic svg{height:3.8cqw;width:auto;display:block}
/* Briefansicht (iLetter) */
.il{--b:#1F4E79;flex:1;display:flex;flex-direction:column;min-height:0;background:#f2f2f0}
.il-h{flex:none;background:color-mix(in srgb,var(--b) 11%,#fff);padding:3cqw 5.5cqw 4.4cqw}
.il-nav{display:flex;align-items:center;gap:3cqw;font-size:3.3cqw;margin-bottom:4.2cqw}
.il-nav .bk{width:2.4cqw;height:2.4cqw;border-left:.55cqw solid #111;border-bottom:.55cqw solid #111;transform:rotate(45deg);margin-right:.5cqw;flex:none}
.il-nav b{font-size:3.5cqw;letter-spacing:.07em;text-transform:uppercase;color:var(--b)}
.il-nav span{margin-left:auto;color:#6f6f6b}
.il-t{font-size:5.2cqw;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.il-st{font-size:3.5cqw;color:#5e5e5a;margin-top:1cqw}
.il-b{flex:1;min-height:0;overflow:hidden;padding:4.4cqw 5.5cqw 0}
.il-p{font-size:3.5cqw;line-height:1.4;color:#444;margin-bottom:4cqw}
.il-q{font-size:4.5cqw;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.il-hint{font-size:3.1cqw;font-style:italic;color:#7a7a76;margin:1.2cqw 0 3.4cqw}
.il-o{display:flex;align-items:center;gap:3cqw;background:#fff;border:1px solid #dcdcd8;border-radius:2.6cqw;padding:3.3cqw 3.8cqw;margin-bottom:2.4cqw;font-size:3.7cqw;transition:all .3s}
.il-o i{width:4.3cqw;height:4.3cqw;border-radius:50%;border:.45cqw solid #7a7a76;flex:none;position:relative;background:#fff}
.il-o.sel{border:.45cqw solid #111;padding:calc(3.3cqw - .3cqw) calc(3.8cqw - .3cqw)}
.il-o.sel i{border-color:#111}.il-o.sel i::after{content:"";position:absolute;inset:.8cqw;border-radius:50%;background:#111}
.il-o.cb i{border-radius:1cqw}.il-o.cb.sel i::after{border-radius:.3cqw;inset:.9cqw}
.il-up{display:flex;align-items:center;gap:2.6cqw;border:.4cqw dashed #8a8a86;border-radius:2.6cqw;padding:3cqw 3.8cqw;font-size:3.4cqw;background:#fff;margin-top:1cqw;color:#333}
.il-up svg{width:4.2cqw;height:4.2cqw;flex:none}
.il-pill{display:inline-block;font-size:3cqw;font-weight:700;background:color-mix(in srgb,var(--b) 14%,#fff);color:var(--b);padding:.9cqw 2.6cqw;border-radius:1.4cqw;margin-bottom:3cqw}
.il-lang{display:flex;gap:1.8cqw;margin-bottom:3.6cqw;font-size:3cqw;font-weight:700}
.il-lang span{padding:1cqw 2.8cqw;border-radius:999px;border:.35cqw solid #c9c9c5;color:#555}
.il-lang span.on{background:#111;color:#fff;border-color:#111}
.il-f{flex:none;display:flex;gap:3cqw;padding:3.6cqw 5.5cqw 6cqw;background:#fff;border-top:1px solid #e6e6e3;margin-top:auto}
.il-f span{flex:1;text-align:center;padding:3.4cqw 0;border-radius:2.4cqw;border:.4cqw solid #cfcfcb;font-weight:700;font-size:3.7cqw;color:#111;background:#fff;transition:transform .2s}
.il-f .pri{background:var(--b);border-color:var(--b);color:#fff}
.il-f .pri.press{transform:scale(.95)}
/* Posteingang (Post-App) */
.ib{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff;position:relative}
.ib-h{flex:none;display:flex;align-items:center;gap:3.6cqw;padding:1.6cqw 5.8cqw 4cqw;font-size:6cqw;font-weight:700;letter-spacing:-.015em}
.ib-h svg{width:6.2cqw;height:6.2cqw;flex:none}
.ib-l{flex:1;min-height:0;overflow:hidden;padding:0 4.6cqw}
.ib-c{--b:#1F4E79;position:relative;background:var(--b);color:#fff;border-radius:4cqw;padding:4cqw 4.4cqw 4.4cqw;margin-bottom:3.2cqw}
.ib-c .r1{display:flex;align-items:center;gap:2.4cqw;font-size:3.2cqw;font-weight:700}
.ib-c .lg{width:6.4cqw;height:6.4cqw;border-radius:1.6cqw;background:#fff;color:var(--b);display:flex;align-items:center;justify-content:center;font-size:3.6cqw;font-weight:900;flex:none}
.ib-c .dt{margin-left:auto;font-weight:400;opacity:.85;font-size:3cqw}
.ib-c .tt{font-size:4.4cqw;font-weight:700;line-height:1.2;margin-top:3.6cqw}
.ib-c .ss{font-size:3.3cqw;opacity:.88;margin-top:1cqw}
.ib-c .nw{position:absolute;top:-2.2cqw;right:4.4cqw;background:#2BA84A;color:#fff;font-size:2.9cqw;font-weight:700;padding:.6cqw 2.6cqw;border-radius:999px}
.ib-c.hl{outline:.8cqw solid var(--post-yellow);outline-offset:.4cqw}
.ib-nav{flex:none;position:relative}
.ib-s{position:relative;z-index:2;margin:0 4.6cqw -5.6cqw;background:#fff;border-radius:999px;box-shadow:0 2cqw 6cqw rgba(0,0,0,.14);display:flex;align-items:center;justify-content:space-between;padding:2.2cqw 2.2cqw 2.2cqw 4.8cqw}
.ib-s svg{width:5.4cqw;height:5.4cqw}
.ib-s .pen{width:9.2cqw;height:9.2cqw;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center}
.ib-s .pen svg{width:4.6cqw;height:4.6cqw}
.ib-bar{background:#FFCC00;padding:9.6cqw 6cqw 7.4cqw;display:flex;align-items:center;justify-content:space-between}
.ib-bar svg{width:6.6cqw;height:6.6cqw;display:block}
.ib-bar .plg{width:7.6cqw;height:7.6cqw;border-radius:1cqw}
.ib-bar .act{width:9.6cqw;height:9.6cqw;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center}
.ib-bar .act svg{width:5.4cqw;height:5.4cqw}
.ib-bar .ava{width:7.6cqw;height:7.6cqw;border-radius:50%;background:#d9d9d6;display:flex;align-items:center;justify-content:center;font-size:3cqw;font-weight:700;color:#333}
/* Gesendet */
.il-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;text-align:center;background:#fff;padding:8cqw}
.il-done .ck{width:18cqw;height:18cqw;border-radius:50%;background:var(--post-yellow);display:flex;align-items:center;justify-content:center;font-size:9cqw;font-weight:700}
.il-done b{font-size:5cqw}.il-done span{font-size:3.6cqw;color:#5e5e5a;max-width:22ch}
.iph .il-p{font-size:3.5cqw;line-height:1.4;color:#444;margin:0 0 4cqw;max-width:none}
.iph .il-done span{font-size:3.6cqw;max-width:22ch}
.ib-l{padding-top:2.6cqw}
.iph-sb{font-size:4.5cqw;padding-top:5cqw;font-variant-numeric:tabular-nums}
.iph-sb .t{gap:1.3cqw}.iph-sb .t svg{width:3.8cqw;height:3.8cqw;shape-rendering:geometricPrecision}
.iph-sb .ic{gap:1.7cqw}.iph-sb .ic svg{height:3.6cqw;shape-rendering:geometricPrecision}
.iph-sb .ic svg:nth-child(1){width:6cqw}.iph-sb .ic svg:nth-child(2){width:5.1cqw;height:3.7cqw}.iph-sb .ic svg:nth-child(3){width:8cqw;height:3.5cqw}

/* mock section */
.mock{background:#1E1D19;color:#fff}
.mock .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.mock .k{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--post-yellow);margin-bottom:14px}
.mock h2{color:#fff;margin-bottom:28px;max-width:16ch}
.mock .st{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mock .st li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);transition:background .4s;font-size:clamp(16px,1.25vw,19px);color:#d2d2d7}
.mock .st li b{display:block;color:#fff;font-size:clamp(17px,1.4vw,21px);margin-bottom:2px}
.mock .st li .n{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#48484a;color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px;transition:background .4s,color .4s}
.mock .st li.on{background:rgba(255,255,255,.12)}
.mock .st li.on .n{background:var(--post-yellow);color:#000}
.mock .phone-wrap{display:flex;justify-content:center}
.phone.iph{width:min(340px,80vw);max-width:none}
.phone.iph .iph-f{box-shadow:0 60px 120px rgba(0,0,0,.6),inset 0 0 0 2px #3a3a3c}
.phone.iph .scr{position:absolute;inset:0;padding:0;display:flex;flex-direction:column;opacity:0;transform:scale(1.03);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);background:#f2f2f0}
.phone.iph .scr.on{opacity:1;transform:none}
.phone.iph .scr .iph-sb{background:transparent}
/* sign document view */
.sg-doc{background:#fff;border:1px solid #e6e6e3;border-radius:2.6cqw;padding:4cqw;margin-bottom:4cqw}
.sg-doc .ln{height:1.6cqw;border-radius:1cqw;background:#e4e4e0;margin-bottom:2.2cqw}
.sg-doc .ln.s{width:62%}.sg-doc .ln.m{width:84%}.sg-doc .ln.t{height:2.6cqw;width:48%;background:#cfcfcb;margin-bottom:3.4cqw}
.sg-doc .sigbox{margin-top:3cqw;border:.4cqw dashed #8a8a86;border-radius:2cqw;padding:3cqw;font-size:3.2cqw;color:#7a7a76;display:flex;align-items:center;gap:2cqw}
.sg-doc .sigbox.done{border-style:solid;border-color:#2BA84A;color:#111;background:#eef8f0}
.sg-meta{display:flex;gap:2cqw;flex-wrap:wrap;font-size:3cqw;margin-bottom:3.4cqw}
.sg-meta span{background:#fff;border:1px solid #dcdcd8;border-radius:999px;padding:1cqw 2.8cqw}
.sg-meta span.q{background:var(--post-yellow);border-color:var(--post-yellow);font-weight:700}
.sg-slide{position:relative;height:13cqw;border-radius:999px;background:#e9e9e6;display:flex;align-items:center;justify-content:center;font-size:3.6cqw;font-weight:700;color:#5e5e5a;overflow:hidden;margin-top:auto}
.sg-slide .kn{position:absolute;left:1.2cqw;top:1.2cqw;width:10.6cqw;height:10.6cqw;border-radius:50%;background:var(--b,#111);display:grid;place-items:center;transition:left 1.1s cubic-bezier(.2,.7,.2,1)}
.sg-slide .kn svg{width:4.6cqw;height:4.6cqw}
.sg-slide.go .kn{left:calc(100% - 11.8cqw)}
.sg-slide .fill{position:absolute;inset:0;width:0;background:color-mix(in srgb,var(--b,#111) 18%,#e9e9e6);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.sg-slide.go .fill{width:100%}
.sg-slide span{position:relative}
@media (max-width:900px){.mock .grid{grid-template-columns:1fr}.phone.iph{width:min(280px,70vw)}}

/* sign: Post-App Signaturfluss (Stand 4.11.2026) */
.sl{flex:1;display:flex;flex-direction:column;min-height:0;background:#fff}
.sl-h{flex:none;background:#FFCC00;padding:3cqw 5.5cqw 4.4cqw;margin-top:-15cqw;padding-top:16cqw}
.sl-meta{display:flex;justify-content:space-between;font-size:3.2cqw;margin-bottom:2.6cqw}
.sl-meta span:last-child{color:#5e5e5a}
.sl-t{font-size:4.6cqw;font-weight:700;line-height:1.2}
.sl-st{font-size:3.3cqw;color:#5e5e5a;margin-top:.6cqw}
.sl-pill{display:inline-flex;align-items:center;gap:1.4cqw;margin-top:3cqw;background:#E0B000;color:#111;font-size:3cqw;font-weight:700;padding:1cqw 2.8cqw;border-radius:999px}
.sl-pill.ok{background:#2BA84A;color:#fff}
.sl-b{flex:1;min-height:0;overflow:hidden;padding:4.4cqw 5.5cqw 0}
.sl-b p{font-size:3.5cqw;line-height:1.4;color:#333;margin:0 0 3cqw}
.sl-b .hd{font-size:3.6cqw;font-weight:700;margin-bottom:3cqw}
.sl-step{display:flex;gap:3cqw;align-items:flex-start;margin-bottom:3.4cqw;font-size:3.5cqw;line-height:1.3}
.sl-step i{flex:none;width:5.6cqw;height:5.6cqw;border-radius:50%;background:#FFCC00;font-style:normal;font-weight:700;font-size:3cqw;display:grid;place-items:center}
.sl-step small{display:block;font-size:3cqw;color:#5e5e5a;margin-top:.4cqw}
.sl-info{background:#DDF3E2;border-radius:2.6cqw;padding:3.4cqw;font-size:3.3cqw;line-height:1.4;color:#1b3d25}
.sl-f{flex:none;display:flex;align-items:center;gap:3cqw;padding:3.6cqw 5.5cqw 6cqw;background:#fff;margin-top:auto}
.sl-f .bk{width:2.6cqw;height:2.6cqw;border-left:.55cqw solid #111;border-bottom:.55cqw solid #111;transform:rotate(45deg);margin:0 1.6cqw 0 1cqw;flex:none}
.sl-f .btn-dark{flex:1;text-align:center;background:#111;color:#fff;font-weight:700;font-size:3.7cqw;padding:3.6cqw 0;border-radius:999px}
.sd{flex:1;display:flex;flex-direction:column;min-height:0;background:#4a4a4a;color:#fff}
.sd-top{flex:none;text-align:center;padding:1cqw 4cqw 3cqw;font-size:3cqw;line-height:1.35}
.sd-top b{display:block;font-size:3.3cqw}
.sd-page{flex:1;min-height:0;overflow:hidden;position:relative;margin:0 6cqw;background:#fff;border-radius:.8cqw;padding:6cqw 5cqw;color:#111}
.sd-page .lg{width:6cqw;height:6cqw;margin-bottom:4cqw}
.sd-page .ln{height:1.3cqw;border-radius:1cqw;background:#dcdcd8;margin-bottom:2cqw}
.sd-page .ln.s{width:46%}.sd-page .ln.m{width:78%}.sd-page .ln.t{height:2.2cqw;width:30%;background:#b4b3af;margin:3cqw 0 3.4cqw}
.sd-page .rule{height:.8cqw;background:#FFCC00;width:100%;margin:4cqw 0 3cqw}
.sd-sig{position:absolute;left:13%;bottom:10%;width:60%;border:.45cqw solid #3B82F6;padding:2.4cqw 2cqw;text-align:center;background:rgba(255,255,255,.9);opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s}
.sd-sig.on{opacity:1;transform:none}
.sd-sig b{display:block;font-size:3.4cqw;letter-spacing:.04em}
.sd-sig span{display:block;font-size:2.4cqw;color:#333;line-height:1.4}
.sd-sig i{position:absolute;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#3B82F6}
.sd-sig i:nth-child(1){left:-1.5cqw;top:-1.5cqw}.sd-sig i:nth-child(2){right:-1.5cqw;top:-1.5cqw}.sd-sig i:nth-child(3){left:-1.5cqw;bottom:-1.5cqw}.sd-sig i:nth-child(4){right:-1.5cqw;bottom:-1.5cqw}
.sd-sig.fix{border-color:transparent;background:transparent}.sd-sig.fix i{display:none}
.sd-f{flex:none;display:flex;gap:2.6cqw;padding:4cqw 6cqw 6cqw}
.sd-f span{flex:1;text-align:center;font-weight:700;font-size:3.3cqw;padding:3.2cqw 0;border-radius:1.6cqw;background:#FFCC00;color:#111}
.sd-f span.sec{background:#d9d9d6;flex:.8}
.sdone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;text-align:center;background:#3f3f3f;color:#fff;padding:8cqw;margin-top:-15cqw;padding-top:20cqw}
.sdone .ic{width:22cqw;height:22cqw;border-radius:50%;border:.6cqw solid #777;display:grid;place-items:center;position:relative;margin-bottom:2cqw}
.sdone .ic svg{width:10cqw;height:10cqw}
.sdone .ic em{position:absolute;right:-1cqw;bottom:-1cqw;width:8cqw;height:8cqw;border-radius:50%;background:#2BA84A;display:grid;place-items:center}
.sdone .ic em svg{width:4.4cqw;height:4.4cqw}
.sdone b{font-size:5cqw}.sdone span{font-size:3.4cqw;color:#ccc;max-width:24ch}
.scr.dk .iph-sb{color:#fff}.scr.dk .iph-sb svg *{fill:#fff;stroke:#fff}