.shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--hairline)}
.topbar-in{max-width:1280px;margin:0 auto;padding:12px 16px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo bar lang";align-items:center;gap:16px}
.topbar .logo-wrap{grid-area:logo}
.progress{grid-area:bar;display:flex;align-items:center;gap:12px;min-width:0}
.track{flex:1;height:6px;border-radius:999px;background:var(--hairline);overflow:hidden}
.track>i{display:block;height:100%;border-radius:999px;background:var(--azure);transition:width .6s var(--ease)}
.progress-label{flex:none;font-size:14px;font-weight:600;color:var(--slate);white-space:nowrap}
.lang{grid-area:lang;display:flex;padding:3px;border-radius:999px;background:var(--canvas);border:1px solid var(--hairline)}
.lang button{min-width:44px;min-height:34px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--slate);font-size:13px;font-weight:600;letter-spacing:.04em}
.lang button[aria-pressed=true]{background:var(--paper);color:var(--azure-text);box-shadow:0 1px 2px rgba(14,17,22,.12)}
@media (max-width:719px){.topbar-in{grid-template-columns:1fr auto;grid-template-areas:"logo lang" "bar bar";row-gap:10px}.topbar-in:not(:has(.progress)){grid-template-areas:"logo lang"}.sizes .size:last-child{grid-column:1/-1}}

main.screen{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:32px 16px 48px;display:grid;gap:32px;align-content:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
h1.title{font-size:40px}
h1.hero{font-size:40px;line-height:1.08}
.lede{font-size:18px;line-height:1.6;color:var(--slate);max-width:560px}
.helper{font-size:17px;line-height:1.5;color:var(--slate)}
.helper strong{color:var(--ink);font-weight:600}

.benefits{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.benefits li{display:flex;gap:14px;align-items:center;font-size:16px;font-weight:500}
.ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--azure-weak);color:var(--azure);display:grid;place-items:center}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:8px}
.cta-row .btn-primary{min-height:56px;padding:0 32px;font-size:18px}
.muted{color:var(--slate)}
.small{font-size:14px}
.gift{padding:24px;background:var(--azure-weak);border-color:var(--azure-line);display:flex;flex-direction:column;gap:14px}
.gift p.big{font-family:var(--font-head);font-size:24px;line-height:1.25;font-weight:600}
.gift ul{margin:0;padding:14px 0 0 18px;border-top:1px solid var(--azure-line);display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5}
.ticks{list-style:none;margin:0;padding:0 4px;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:12px;font-size:15px;color:var(--slate)}
.ticks svg{flex:none;margin-top:3px;color:var(--azure)}
.legal{max-width:1280px;width:100%;margin:0 auto;padding:20px 16px 28px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--slate)}

.back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border:1px solid var(--hairline);border-radius:var(--r-btn);background:var(--paper);color:var(--slate);font-size:15px;font-weight:600}
.back:hover{border-color:var(--azure);color:var(--azure-text)}
.side-actions{display:flex;align-items:center;gap:16px;padding-top:16px;flex-wrap:wrap}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{width:100%;min-height:64px;text-align:left;padding:14px 16px;border-radius:var(--r-input);border:1.5px solid var(--hairline);background:var(--paper);display:flex;gap:14px;align-items:center;font-size:16px;line-height:1.45;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.opt:hover{border-color:var(--azure)}
.opt .key{flex:none;width:32px;height:32px;border-radius:8px;border:1.5px solid var(--hairline);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--slate);transition:all .2s var(--ease)}
.opt .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.opt[aria-checked=true]{border-color:var(--azure);background:var(--azure-weak)}
.opt[aria-checked=true] .key{background:var(--azure);border-color:var(--azure);color:#fff}
.opt[aria-checked=true] .txt{font-weight:600}
.opt.compact{min-height:56px}

textarea.field,input.field{width:100%;border:1.5px solid var(--hairline);border-radius:var(--r-input);background:var(--paper);padding:0 16px;font-size:16px;min-height:52px;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
textarea.field{padding:12px 16px;line-height:1.5;min-height:140px;resize:vertical}
.field:focus{border-color:var(--azure);box-shadow:0 0 0 3px rgba(15,71,224,.18)}
.field[aria-invalid=true]{border-color:var(--error)}
.form{padding:24px;display:flex;flex-direction:column;gap:20px}
.grid2{display:grid;grid-template-columns:1fr;gap:20px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label,.f .lbl{font-size:15px;font-weight:600}
.err{font-size:14px;color:var(--error-text)}
.phone{display:flex;min-height:52px;border:1.5px solid var(--hairline);border-radius:var(--r-input);overflow:hidden;background:var(--paper)}
.phone:focus-within{border-color:var(--azure);box-shadow:0 0 0 3px rgba(15,71,224,.18)}
.phone[data-invalid=true]{border-color:var(--error)}
.phone span{flex:none;display:flex;align-items:center;padding:0 12px 0 16px;font-weight:600;color:var(--slate);border-right:1px solid var(--hairline)}
.phone input{flex:1;min-width:0;border:0;outline:none;padding:0 16px;font-size:16px;background:transparent}
.sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.size{min-height:60px;padding:8px 10px;border-radius:var(--r-input);border:1.5px solid var(--hairline);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:600;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.size small{font-size:12px;font-weight:500;color:var(--slate)}
.size:hover{border-color:var(--azure)}
.size[aria-checked=true]{border-color:var(--azure);background:var(--azure-weak);color:var(--azure-text)}
.consents{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--hairline)}
.consent{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:15px;line-height:1.5;cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--azure);cursor:pointer}
.alert{padding:12px 14px;border-radius:var(--r-input);border:1px solid var(--error);color:var(--error-text);font-size:14.5px;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.done-badge{width:64px;height:64px;border-radius:50%;background:var(--azure-weak);color:var(--azure);display:grid;place-items:center}
.share{padding:24px;display:flex;flex-direction:column;gap:16px}
.share p{font-family:var(--font-head);font-size:24px;line-height:1.25;font-weight:600}

@media (min-width:720px){
  .sizes{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sizes .size:last-child{grid-column:auto}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form{padding:32px}
}
@media (min-width:960px){
  .topbar-in{padding:14px 40px;gap:32px}
  main.screen{padding:56px 40px;gap:72px;align-items:center}
  main.screen.cover{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  main.screen.q,main.screen.fu{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  main.screen.contact{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}
  main.screen.contact .col:first-child{position:sticky;top:112px}
  main.screen.thanks{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  h1.title{font-size:40px}
  h1.hero{font-size:56px}
  h1.title.big{font-size:48px}
  .legal{padding:20px 40px 28px}
}

/* Headings take focus on screen change for screen readers; no ring needed on a non-interactive element. */
h1[tabindex="-1"]:focus{outline:none}
.shell{overflow-x:clip}