.fpage {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-32);
padding-block: calc(var(--space-32) * 2) var(--lp-section);
}
.fpage__head {
display: grid;
gap: var(--space-16);
align-content: start;
justify-items: start;
}
.fpage__head .lead {
max-width: 34em;
}
.fpage__form {
display: grid;
gap: var(--space-16);
min-width: 0;
}
@media (min-width: 1000px) {
.fpage--split {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
grid-template-areas: "head form" "aside form";
grid-template-rows: auto 1fr;
gap: calc(var(--space-32) * 1.5) calc(var(--space-32) * 2.5);
align-items: start;
padding-top: calc(var(--space-32) * 2);
}
.fpage--split .fpage__head {
grid-area: head;
padding-top: var(--space-24);
}
.fpage--split .fpage__form {
grid-area: form;
}
.fpage--split .fpage__aside {
grid-area: aside;
}
}
.fpage--center {
justify-items: center;
padding-top: calc(var(--space-32) * 2);
text-align: center;
}
.fpage--center .fpage__head {
justify-items: center;
}
.fpage .btn {
white-space: normal;
text-align: center;
}
.fcard {
border-radius: var(--lp-r-frame);
background: var(--color-card);
box-shadow: var(--lp-ring), var(--lp-lift);
}
.fcard--result {
display: grid;
justify-items: center;
gap: var(--space-16);
width: 100%;
max-width: 600px;
padding: calc(var(--space-32) * 1.5) var(--space-20);
}
.fcard--result .lead {
max-width: 30em;
}
.rtile {
--ic: 56px;
margin-bottom: var(--space-4);
}
.rtile--ok {
--ic-bg: var(--color-success-soft);
--ic-fg: var(--color-success-ink);
}
.rtile--bad {
--ic-bg: var(--color-danger-soft);
--ic-fg: var(--color-danger-ink);
}
.form-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-12);
margin-top: var(--space-8);
}
.fcontacts {
display: grid;
gap: var(--space-4);
}
.fsteps {
display: grid;
gap: var(--space-20);
align-content: start;
padding-top: var(--space-32);
box-shadow: inset 0 1px 0 var(--pub-hairline);
text-align: left;
}
.fsteps__title {
font-size: 17px;
font-weight: 600;
}
.fsteps__list li {
position: relative;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-content: start;
column-gap: var(--space-16);
padding-bottom: var(--space-24);
}
.fsteps__list li:last-child {
padding-bottom: 0;
}
.fsteps__list li:not(:last-child)::before {
content: "";
position: absolute;
left: 16px;
top: 40px;
bottom: var(--space-8);
width: 1px;
background: var(--pub-hairline);
}
.fsteps__n {
display: grid;
grid-row: span 2;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
background: var(--color-brand-soft);
color: var(--color-brand-ink);
font-size: 14px;
font-weight: 600;
}
.fsteps__list b {
padding-top: 4px;
font-weight: 600;
}
.fsteps__list li > span:not(.fsteps__n) {
color: var(--pub-ink-2);
font-size: 15px;
}
.fsteps--row {
width: 100%;
max-width: 880px;
}
@media (min-width: 760px) {
.fsteps--row .fsteps__title {
text-align: center;
}
.fsteps--row .fsteps__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-24);
}
.fsteps--row .fsteps__list li {
padding-bottom: 0;
}
.fsteps--row .fsteps__list li::before {
display: none;
}
}
.stepper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
color: var(--color-muted);
font-size: 14px;
font-weight: 600;
}
.stepper__item {
display: inline-flex;
align-items: center;
gap: var(--space-8);
}
.stepper__item + .stepper__item::before {
content: "";
width: var(--space-24);
height: 2px;
border-radius: var(--radius-pill);
background: var(--pub-hairline);
}
.stepper__n {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--color-field-border);
font-size: 13px;
}
.stepper__item.is-current {
color: var(--color-text);
}
.stepper__item.is-current .stepper__n {
background: var(--color-brand);
color: var(--color-on-brand);
box-shadow: none;
}
.stepper__item.is-done .stepper__n {
position: relative;
background: var(--color-brand-soft);
color: var(--color-brand-ink);
box-shadow: none;
font-size: 0;
}
.stepper__item.is-done .stepper__n::after {
content: "";
position: absolute;
inset: 0;
width: 6px;
height: 11px;
margin: auto;
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: translateY(-1px) rotate(45deg);
}
.form {
display: grid;
gap: var(--space-20);
padding: var(--space-24) var(--space-20);
}
.field {
display: grid;
gap: var(--space-8);
}
.field__label {
font-size: 14px;
font-weight: 600;
}
.field__optional {
color: var(--color-muted);
font-weight: 400;
}
.field__help {
color: var(--color-muted);
font-size: 13px;
line-height: 1.5;
text-wrap: pretty;
}
.field__error {
color: var(--color-danger-ink);
font-size: 13px;
font-weight: 600;
}
.input {
width: 100%;
min-height: 48px;
padding: 0 var(--space-16);
border: 1px solid var(--color-field-border);
border-radius: var(--radius-button);
background: var(--color-card);
color: var(--color-text);
font: inherit;
font-size: 16px;
}
.input:hover {
border-color: var(--color-muted);
}
.input:focus-visible {
border-color: var(--pub-brand);
outline-offset: -1px;
box-shadow: 0 0 0 4px var(--pub-band-to);
}
.input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.input--area {
min-height: 120px;
padding-block: var(--space-12);
line-height: 1.5;
resize: vertical;
}
.input--code {
min-height: 56px;
font-size: 24px;
font-weight: 600;
letter-spacing: 0.4em;
text-align: center;
text-indent: 0.4em;
}
.input-affix {
display: flex;
}
.input-affix .input {
min-width: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-affix__prefix {
display: inline-flex;
flex: none;
align-items: center;
padding: 0 var(--space-12);
border: 1px solid var(--color-field-border);
border-right: 0;
border-radius: var(--radius-button) 0 0 var(--radius-button);
background: var(--pub-canvas-alt);
color: var(--pub-ink-2);
font-weight: 600;
}
.input-affix:has([aria-invalid="true"]) .input-affix__prefix {
border-color: var(--color-danger);
}
.input-affix:focus-within .input-affix__prefix {
border-color: var(--color-brand);
}
@media (prefers-reduced-motion: no-preference) {
.input {
transition:
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
}
.consent {
gap: var(--space-12);
padding: var(--space-16);
border-radius: var(--lp-r-card);
background: var(--pub-canvas-alt);
box-shadow: var(--lp-ring);
}
.consent:has([aria-invalid="true"]) {
box-shadow: inset 0 0 0 1px var(--color-danger);
}
.choice {
display: flex;
align-items: flex-start;
gap: var(--space-12);
margin-block: calc(var(--space-12) * -1);
padding-block: var(--space-12);
font-size: 15px;
line-height: 1.45;
cursor: pointer;
}
.choice__input {
position: relative;
flex: none;
width: 20px;
height: 20px;
margin: 1px 0 0;
border: 1px solid var(--color-field-border);
border-radius: 6px;
background: var(--color-card);
appearance: none;
cursor: inherit;
}
.choice__input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.choice__input:checked {
border-color: var(--color-brand);
background: var(--color-brand);
}
.choice__input:checked::after {
content: "";
position: absolute;
inset: 0;
width: 6px;
height: 11px;
margin: auto;
border: solid var(--color-on-brand);
border-width: 0 2px 2px 0;
transform: translateY(-1px) rotate(45deg);
}
.choice__input:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
.consent__notice {
display: grid;
gap: var(--space-4);
padding-top: var(--space-12);
box-shadow: inset 0 1px 0 var(--pub-hairline);
color: var(--color-muted);
font-size: 13px;
line-height: 1.5;
}
.consent__notice b {
color: var(--pub-ink-2);
font-weight: 600;
}
.consent__notice a {
display: inline-flex;
align-items: center;
min-height: 24px; 
}
.hp {
display: none;
}
.form .form-actions {
margin-top: var(--space-4);
}
.form-alt {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) var(--space-16);
}
.form-alt__item {
display: grid;
justify-items: center;
gap: var(--space-8);
}
.alert,
.notice,
.errsum {
padding: var(--space-12) var(--space-16);
border-radius: var(--lp-r-card);
font-weight: 500;
}
.alert,
.errsum {
background: var(--color-danger-soft);
color: var(--color-danger-ink);
}
.notice {
background: var(--color-success-soft);
color: var(--color-success-ink);
}
.errsum {
display: grid;
gap: var(--space-8);
padding: var(--space-16) var(--space-20);
box-shadow: inset 0 0 0 1px var(--color-danger);
}
.errsum__title {
font-size: 16px;
font-weight: 600;
}
.errsum__title:focus {
outline: none;
}
.errsum:focus-within {
box-shadow: inset 0 0 0 2px var(--color-danger);
}
.errsum__list {
display: grid;
gap: var(--space-4);
padding-left: var(--space-20);
list-style: disc;
}
.errsum__list a {
display: inline-flex;
align-items: center;
min-height: 24px;
color: inherit;
font-weight: 600;
}
.chip--revoked {
background: var(--color-danger-soft);
color: var(--color-danger-ink);
box-shadow: none;
}
.vcard__rows {
width: 100%;
max-width: 440px;
margin-top: var(--space-8);
box-shadow: inset 0 -1px 0 var(--pub-hairline);
text-align: left;
}
.vcard__rows > div {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: var(--space-12);
padding-block: var(--space-12);
box-shadow: inset 0 1px 0 var(--pub-hairline);
}
.vcard__rows dt {
color: var(--color-muted);
}
.vcard__rows dd {
font-weight: 600;
overflow-wrap: anywhere;
}
@media (min-width: 600px) {
.form {
padding: calc(var(--space-32) + var(--space-8));
}
.fcard--result {
padding-inline: calc(var(--space-32) * 1.5);
}
}
@media (max-width: 599px) {
.fcard--result .form-actions,
.fcard--result .btn {
width: 100%;
}
}
@media (max-width: 379px) {
.form .cf-turnstile {
display: flex;
justify-content: center;
margin-inline: calc(var(--space-20) * -1);
}
}