.far-agreement {
    --far-blue: rgb(var(--color-base-button-background, 53, 153, 255));
    --far-ink: rgb(var(--color-title-text, 23, 32, 51));
    --far-text: rgb(var(--color-base-text, 51, 51, 51));
    --far-border: rgb(var(--color-border, 219, 227, 237));
    --far-soft: #f5f7fb;
    --far-radius: 10px;
    max-width: 840px;
    margin: 4rem auto;
    padding: 0 2rem;
    color: var(--far-text);
    font-family: "Open Sans", sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
}

.far-agreement *, .far-agreement *::before, .far-agreement *::after { box-sizing: border-box; }
.far-agreement__card { padding: clamp(3rem, 4vw, 4rem); border: 1px solid var(--far-border); border-radius: var(--far-radius); background: #fff; box-shadow: 0 10px 26px rgba(25, 39, 70, .05); }
.far-agreement h1, .far-agreement h2, .far-agreement h3 { color: var(--far-ink); font-family: "Open Sans", sans-serif; font-weight: 700; }
.far-agreement h1 { margin: 0 0 1.2rem; font-size: 2rem; line-height: 1.3; letter-spacing: -.01em; }
.far-agreement h2 { margin: 0 0 .8rem; font-size: 1.8rem; line-height: 1.35; }
.far-agreement h3 { margin: 2.4rem 0 .6rem; font-size: 1.5rem; line-height: 1.4; }
.far-agreement p { margin: 0 0 1.5rem; color: rgba(var(--color-base-text, 51, 51, 51), .78); line-height: 1.65; }
.far-agreement__options { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
.far-agreement__option { display: grid; min-height: 5.8rem; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: 1.3rem; padding: 1.2rem 1.5rem; border: 1px solid var(--far-border); border-radius: 8px; background: #fff; color: var(--far-ink); font-size: 1.4rem; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; }
.far-agreement__option:hover { border-color: var(--far-blue); color: var(--far-blue); }
.far-agreement__option-icon { display: grid; width: 3.6rem; height: 3.6rem; place-items: center; border-radius: 8px; background: var(--far-soft); color: var(--far-blue); }
.far-agreement__option-icon svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.far-agreement__option-chevron { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; color: #7c8796; }
.far-agreement__option-chevron svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.far-agreement__option:hover .far-agreement__option-chevron { color: var(--far-blue); }
.far-agreement__company { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.far-agreement__company-icon { display: grid; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--far-soft); color: var(--far-blue); }
.far-agreement__company-icon svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.far-agreement__company h2 { margin: 0; color: var(--far-text); font-size: 1.5rem; font-weight: 600; }
.far-agreement__notice { margin-top: 2rem; padding: 1.7rem 2rem; border: 1px solid #cfe1f5; border-radius: 8px; background: #eef6ff; }
.far-agreement__notice--success { border-color: #9ed6b2; background: #edf9f1; }
.far-agreement__notice--warning { border-color: #eedca7; background: #fff8df; }
.far-agreement__notice--revoked { border-color: #efb8b8; background: #fff5f5; }
.far-agreement__notice h2 { margin-bottom: .6rem; font-size: 1.6rem; }
.far-agreement__notice p:last-child { margin-bottom: 0; }
.far-agreement__notice-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: .6rem; }
.far-agreement__notice-heading h2 { margin: 0; }
.far-agreement__status { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .6rem; padding: .35rem .9rem; border-radius: 999px; font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; line-height: 1; text-transform: uppercase; }
.far-agreement__status::before { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; content: ""; }
.far-agreement__status--active { background: #d8f2e1; color: #216b40; }
.far-agreement__status--revoked { background: #f8dddd; color: #9b3030; }
.far-agreement__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.8rem; margin: 2rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(23, 32, 51, .12); }
.far-agreement__detail { min-width: 0; }
.far-agreement__detail dt { margin: 0 0 .35rem; color: #556171; font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.far-agreement__notice--success .far-agreement__detail dt { color: #29734a; }
.far-agreement__notice--warning .far-agreement__detail dt { color: #8a5b12; }
.far-agreement__notice--revoked .far-agreement__detail dt { color: #9b3030; }
.far-agreement__detail dd { margin: 0; color: #172033; font-size: 1.35rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.far-agreement__document-link { margin-top: 2.2rem; }
.far-agreement__button { display: inline-flex; min-width: 16rem; min-height: 4.4rem; align-items: center; justify-content: center; padding: 1rem 2rem; border: 1px solid var(--far-blue); border-radius: 7px; background: var(--far-blue); color: #fff; cursor: pointer; font: inherit; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; text-decoration: none; text-transform: uppercase; transition: filter .2s; }
.far-agreement__button:hover { color: #fff; filter: brightness(.94); }
.far-agreement__button:focus-visible, .far-agreement__option:focus-visible { outline: 3px solid rgba(var(--color-base-button-background, 53, 153, 255), .28); outline-offset: 3px; }
.far-agreement__button[disabled] { cursor: wait; opacity: .65; }
.far-agreement__meta { margin-top: 2.4rem !important; color: rgba(var(--color-base-text, 51, 51, 51), .65) !important; font-size: 1.25rem; }
.far-agreement__document { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--far-border); }
.far-agreement__document ul { margin: 0 0 1.8rem; padding-left: 2.2rem; color: rgba(var(--color-base-text, 51, 51, 51), .78); line-height: 1.7; }
.far-agreement__form { display: grid; gap: 2rem; margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--far-border); }
.far-agreement__field { display: flex; min-width: 0; flex-direction: column; }
.far-agreement__field label { margin-bottom: .8rem; color: var(--far-ink); font-size: 1.4rem; font-weight: 700; }
.far-agreement__field small { margin-top: .7rem; color: rgba(var(--color-base-text, 51, 51, 51), .68); font-size: 1.25rem; line-height: 1.45; }
.far-agreement__required { color: #c8352e; }
.far-agreement__input { width: 100%; min-height: 4.6rem; padding: 1.1rem 1.3rem; border: 1px solid #cfd5df; border-radius: 7px; background: #fff; color: var(--far-text); font: inherit; font-size: 1.4rem; line-height: 1.5; transition: border-color .2s, box-shadow .2s; }
.far-agreement__input:hover { border-color: #9da8b8; }
.far-agreement__input:focus { border-color: var(--far-blue); outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-base-button-background, 53, 153, 255), .14); }
.far-agreement__signature { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.8rem; }
.far-agreement__check { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.7rem; border: 1px solid var(--far-border); border-radius: 8px; background: var(--far-soft); cursor: pointer; font-size: 1.35rem; line-height: 1.5; }
.far-agreement__check input {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    flex: 0 0 auto;
    margin: 0;
    appearance: none;
    border: 1.5px solid #aab4c2;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.far-agreement__check input:hover { border-color: var(--far-blue); }
.far-agreement__check input:checked {
    border-color: var(--far-blue);
    background-color: var(--far-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='m1 5.5 4 4L13 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.3rem auto;
}
.far-agreement__check input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-base-button-background, 53, 153, 255), .2); }
.far-agreement__errors { display: none; padding: 1.5rem 1.8rem; border: 1px solid #edb3b3; border-radius: 7px; background: #fff1f1; color: #9b2424; font-size: 1.4rem; }
.far-agreement__result { display: none; margin-top: 0; font-size: 1.4rem; }

@media (max-width: 749px) {
    .far-agreement { margin: 2.4rem auto; padding: 0 1.4rem; font-size: 1.35rem; }
    .far-agreement__card { padding: 2.4rem 2rem; }
    .far-agreement h1 { font-size: 2rem; }
    .far-agreement__button { width: 100%; min-width: 0; }
    .far-agreement__notice { padding: 1.8rem; }
    .far-agreement__check { padding: 1.6rem; }
    .far-agreement__check input { width: 2.4rem; height: 2.4rem; min-width: 2.4rem; }
    .far-agreement__details { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; }
}