/* Certificate page. Self-contained: works with any theme (variables, buttons, layout helpers are defined here). */
.cert-hero,.cert-main{--ink:#2b0b45;--plum:#3a1159;--magenta:#c7347f;--pink:#ef6198;--yellow:#f9d109;--green:#a5cd39;--line:#e9dff0;--mute:#7a6590;font-family:'Nunito','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.cert-hero *,.cert-main *{box-sizing:border-box}
.cert-hero h1,.cert-card h2{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.08;margin:0}
.wcert-wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.wcert-eyebrow{font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:12px;color:var(--yellow)}
.wcert-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.cert-lede{color:#efe2f3}
.cert-card .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-weight:700;font-size:16px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.cert-card .btn:hover{transform:translateY(-1px)}
.cert-card .btn-pink{background:var(--pink);color:#fff;box-shadow:0 10px 24px -10px rgba(239,97,152,.8)}
.cert-card .btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.cert-card :focus-visible,.cert-hero :focus-visible{outline:3px solid #3fc0e9;outline-offset:3px}
.cert-hero{background:radial-gradient(900px 480px at 85% -20%,#7b2a8e 0%,transparent 60%),linear-gradient(160deg,var(--plum),#5b1b74 55%,var(--magenta));color:#fff;position:relative;padding-block:64px 70px;overflow:hidden}
.cert-hero h1{font-size:clamp(34px,5.2vw,64px);margin-top:10px}
.cert-hero h1 em{font-style:normal;color:var(--yellow)}
.cert-hero p{max-width:56ch;margin:18px 0 0;font-size:18px;color:#efe2f3}
.cert-hero .ground{position:absolute;left:0;right:0;bottom:0;height:12px;background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/24px 24px}
.cert-main{padding-block:0 80px;margin-top:-34px;position:relative;z-index:2}
.cert-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:0 30px 70px -30px rgba(43,11,69,.35);position:relative}
.cert-card h2{font-size:28px;margin-bottom:6px}
.cert-card p{margin:10px 0 0;color:var(--mute)}
.cert-card .sub{margin-bottom:6px}
.steps{display:flex;gap:6px;list-style:none;margin:0 0 26px;padding:0}
.steps li{flex:1;display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px;color:#b5a6c4;position:relative}
.steps li b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1ebf6;color:#9a88ad;flex:none;transition:all .25s}
.steps li:not(:last-child)::after{content:'';flex:1;height:2px;background:#eee7f4;margin-right:8px;min-width:12px}
.steps li.on{color:var(--ink)}.steps li.on b{background:var(--pink);color:#fff;box-shadow:0 0 0 5px rgba(239,97,152,.18)}
.steps li.done b{background:var(--green);color:#fff}
.cert-card label{display:block;font-weight:700;font-size:14px;margin:18px 0 8px;color:var(--ink)}
.cert-card .opt{font-weight:500;color:#a08db0}
.cert-card .field{position:relative}
.cert-card .field svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#a08db0;pointer-events:none}
.cert-card .field input{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#faf8fd;border:2px solid #ece4f3;border-radius:16px;padding:15px 16px;transition:border-color .15s,box-shadow .15s,background .15s}
.cert-card .field svg+input{padding-left:46px}
.cert-card .field input::placeholder{color:#b9aac8}
.cert-card .field input:focus{outline:0;background:#fff;border-color:var(--pink);box-shadow:0 0 0 5px rgba(239,97,152,.15)}
.cert-card .field input.bad{border-color:#d93a4a;background:#fff8f8}
.cert-card .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cert-card .err{color:#c0262d;font-weight:700;font-size:14px;min-height:20px;margin-top:10px}
.cert-card .btn.wide{width:100%;margin-top:6px;padding:16px 26px;font-size:17px}
.cert-card .btn[disabled]{opacity:.7;pointer-events:none}
.cert-card .btn.loading span{opacity:.0}.cert-card .btn.loading{position:relative}
.cert-card .btn.loading::after{content:'';position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cspin .7s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
.cert-card .fine{font-size:13px;color:#8d7aa0;margin-top:16px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cert-card .ico{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
.cert-card .ico svg{width:34px;height:34px}
.ico.ok{background:#e5f6e1;color:#2f8a1f}.ico.warn{background:#fff1d6;color:#b86e00}.ico.info{background:#e4f1fb;color:#1c75b5}
.tips{margin:16px 0 22px;padding-left:20px;color:var(--mute)}.tips li{margin:6px 0}
/* views: without JS everything shows, with JS only the active one */
.cert-card.js .view{display:none}.cert-card.js .view.on{display:block;animation:cin .35s ease both}
@keyframes cin{from{opacity:0;transform:translateY(8px)}}
.cert-card:not(.js) .view:not([data-view=lookup]):not([data-view=support]){display:none}
.cert-card:not(.js) [data-go]{display:none}
.cert-card:not(.js) .view[data-view=support]{margin-top:34px;padding-top:26px;border-top:1px dashed var(--line)}
.notice-fallback{margin-top:20px;padding:14px 16px;border-radius:14px;font-weight:700}.notice-fallback.ok{background:#e5f6e1;color:#1f6b13}.notice-fallback.bad{background:#fde8e9;color:#a31f26}
.cert-card.js .notice-fallback{display:none}
/* preview */
.cert-preview{position:sticky;top:96px;padding-top:34px}
.cert-preview .tilt{transform:rotate(2.2deg);border-radius:18px;overflow:hidden;box-shadow:0 40px 70px -30px rgba(43,11,69,.55),0 0 0 8px #fff;transition:transform .4s}
.cert-preview .tilt:hover{transform:rotate(0)}
.cert-preview img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cert-preview .chip-note{width:max-content;max-width:100%;margin:26px auto 0;background:var(--ink);color:#fff;border-radius:99px;padding:9px 18px;font-weight:700;font-size:13px;letter-spacing:.02em}
@media(max-width:900px){.cert-grid{grid-template-columns:1fr;gap:34px}.cert-preview{position:static;padding-top:0}.cert-card{padding:24px 20px;border-radius:22px}.cert-card .two{grid-template-columns:1fr}.steps li span{display:none}.cert-hero{padding-block:44px 56px}}
@media(prefers-reduced-motion:reduce){.cert-card .view,.cert-preview .tilt{animation:none;transition:none}}
/* Find by email / phone */
.cert-card .seg{display:flex;gap:4px;background:#f3eef8;border-radius:16px;padding:5px;margin:4px 0 4px}
.cert-card .seg-opt{flex:1;margin:0;position:relative;cursor:pointer}
.cert-card .seg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cert-card .seg-opt span{display:block;text-align:center;padding:11px 12px;border-radius:12px;font-weight:700;font-size:15px;color:var(--mute);transition:background .2s,color .2s,box-shadow .2s}
.cert-card .seg-opt input:checked+span{background:#fff;color:var(--ink);box-shadow:0 4px 14px -6px rgba(43,11,69,.35)}
.cert-card .seg-opt input:focus-visible+span{outline:3px solid #3fc0e9;outline-offset:2px}
.cert-card .field.phone{display:flex;align-items:stretch;background:#faf8fd;border:2px solid #ece4f3;border-radius:16px;transition:border-color .15s,box-shadow .15s,background .15s}
.cert-card .field.phone:focus-within{background:#fff;border-color:var(--pink);box-shadow:0 0 0 5px rgba(239,97,152,.15)}
.cert-card .field.phone .cc{display:grid;place-items:center;padding:0 14px 0 18px;font-weight:700;color:var(--ink);border-right:2px solid #ece4f3;font-size:17px}
.cert-card .field.phone input{border:0;background:transparent;box-shadow:none;border-radius:0 16px 16px 0;letter-spacing:.04em}
.cert-card .field.phone input:focus{background:transparent;box-shadow:none;border:0}
.cert-card .field.phone input.bad{background:#fff8f8}
.cert-card .field.phone:has(input.bad){border-color:#d93a4a}
.cert-card .mode-block[hidden],.cert-card .fine[hidden]{display:none}
.cert-card:not(.js) .seg{display:none}