:root { color-scheme: light; --ink:#1b5733; --paper:#fcfffd; --line:#d7e0d8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Akrobat,Arial,sans-serif; font-size:18px; }
[hidden] { display:none!important; }
a { color:inherit; }
button,.button { font:inherit; font-weight:700; cursor:pointer; border:1px solid var(--ink); border-radius:10px; padding:13px 22px; background:var(--ink); color:white; text-align:center; text-decoration:none; min-height:48px; }
button:disabled { opacity:.55; cursor:wait; }
button.secondary { background:transparent; color:var(--ink); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #d6a347; outline-offset:4px; }
.certificate-page { max-width:1100px; margin:auto; padding:30px 28px calc(30px + env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:center; }
.back-link { text-transform:uppercase; text-decoration:none; font-weight:700; font-size:16px; }
.brand,footer strong { font-size:34px; font-weight:900; }
.certificate-hero { text-align:center; padding:62px 0 42px; }
.eyebrow { text-transform:uppercase; letter-spacing:2px; font-size:14px; font-weight:700; }
h1 { font-size:clamp(42px,7vw,76px); line-height:.98; margin:18px 0 24px; font-weight:900; }
.certificate-hero>p { line-height:1.45; }
.certificate-benefits { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:25px; }
.certificate-benefits span { font-size:15px; border:1px solid var(--line); border-radius:30px; padding:8px 14px; }
.catalog-group { margin:22px 0 42px; }
h2 { font-size:30px; margin:0 0 20px; }
.certificate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.certificate-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; background:#fff; }
.certificate-card img { width:100%; aspect-ratio:3/2; object-fit:cover; border-bottom:1px solid #edf0ec; background:#fff; }
.card-content { padding:20px; flex:1; display:flex; flex-direction:column; gap:14px; }
.card-content h3 { margin:0; font-size:25px; line-height:1.15; }
.card-content p { margin:0; font-size:16px; line-height:1.4; white-space:pre-line; overflow-wrap:anywhere; }
.card-content .price { font-size:28px; font-weight:800; margin-top:auto; }
.card-content .nominal { font-size:15px; }
.how-it-works { padding:30px 0; border-top:1px solid var(--line); }
.how-it-works ol { padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step; }
.how-it-works li { counter-increment:step; display:flex; flex-direction:column; gap:10px; line-height:1.4; }
.how-it-works li:before { content:"0" counter(step); font-size:30px; opacity:.5; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:26px; font-size:16px; }
dialog { max-width:520px; width:calc(100% - 28px); max-height:90dvh; overflow:auto; border:1px solid var(--line); border-radius:20px; color:var(--ink); padding:32px; }
dialog::backdrop { background:#16362299; }
dialog h2 { padding-right:28px; font-size:30px; }
.dialog-close { position:absolute; right:14px; top:14px; padding:0; width:44px; min-height:44px; border:0; font-size:32px; }
fieldset { border:0; padding:0; margin:24px 0; display:grid; gap:18px; min-width:0; }
label { display:block; font-weight:600; }
input:not([type=checkbox]),select { display:block; width:100%; border:1px solid #b7c7bb; background:white; color:var(--ink); font:inherit; border-radius:8px; padding:12px; margin-top:7px; }
small { font-size:14px; font-weight:400; opacity:.8; }
.consent { display:flex; align-items:flex-start; gap:9px; font-size:15px; font-weight:400; line-height:1.4; }
.consent input { width:20px; height:20px; flex-shrink:0; }
#payCertificate { width:100%; }
.purchase-note { font-size:15px; line-height:1.4; }
.form-error { color:#a12626; }
.payment-result { padding:28px; margin:0 0 30px; border:1px solid var(--ink); border-radius:18px; background:#f0f7ef; }
#certificateCode { display:block; margin:18px 0; font-size:23px; overflow-wrap:anywhere; }
.result-actions { display:flex; flex-wrap:wrap; gap:10px; }
@media(max-width:760px) { .certificate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .how-it-works ol { grid-template-columns:1fr; gap:20px; } footer { flex-direction:column; } }
@media(max-width:480px) { .certificate-page { padding:22px 18px; } .certificate-hero { padding:38px 0 26px; } .certificate-grid { grid-template-columns:1fr; } .card-content { padding:20px; } dialog { padding:25px 20px; } }