@charset "utf-8";

body.public-site--auth {
	--auth-motion: 220ms cubic-bezier(.22, 1, .36, 1);
	--auth-focus: 0 0 0 3px rgba(49, 95, 66, .2);
	background: #e9ede8;
	color: #243126;
}

body.public-site--auth .public-site__page {
	width: min(100%, 760px);
	min-height: 100vh;
	margin: 0 auto;
	background: #fbfaf6;
}

.auth-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	width: 100%;
	min-height: 68px;
	padding: 0 20px;
	background: rgba(251, 250, 246, .9);
	backdrop-filter: blur(14px);
}

.auth-header__back,
.auth-header__space {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
}

.auth-header__back {
	border-radius: 50%;
	color: #344238;
	font-size: 22px;
	transition: background-color var(--auth-motion), color var(--auth-motion), transform var(--auth-motion);
}

.auth-header__back:hover,
.auth-header__back:focus-visible {
	background: #edf1e9;
	color: #315f42;
	transform: translateX(-2px);
}

.auth-header__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	color: #243126;
	font-weight: 900;
	transition: color var(--auth-motion), transform var(--auth-motion);
}

.auth-header__mark {
	display: block;
	overflow: hidden;
	width: 30px;
	height: 30px;
	border-radius: 10px;
}

.auth-header__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.auth-page {
	width: min(100% - 40px, 720px);
	margin: 0 auto;
	padding: 54px 0 48px;
}

.auth-banner {
	overflow: hidden;
	width: min(100%, 480px);
	margin: 0 auto 38px;
	border-radius: 22px;
	background: #f7f5ee;
}

.auth-banner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

.auth-card {
	width: min(100%, 480px);
	margin: 0 auto;
}

.auth-card__head {
	margin-bottom: 34px;
}

.auth-card__head > p:first-child {
	margin: 0 0 9px;
	color: #5f7c68;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .06em;
}

.auth-card__head h1 {
	margin: 0;
	color: #1f2c22;
	font-size: clamp(32px, 8vw, 42px);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -.035em;
}

.auth-card__description {
	margin: 12px 0 0;
	color: #6d766f;
	font-size: 15px;
	line-height: 1.65;
}

.find-id__methods { min-width: 0; margin: 0; padding: 0; border: 0; }
.find-id__method-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.find-id__methods legend { margin-bottom: 14px; color: #303e34; font-size: 14px; font-weight: 850; }
.find-id__method { position: relative; cursor: pointer; }
.find-id__method input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.find-id__method span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; border: 1px solid #dce3d8; border-radius: 12px; background: #f7f8f3; color: #657368; font-size: 14px; font-weight: 800; transition: background-color 180ms ease, border-color 180ms ease; }
.find-id__method input:checked + span { border-color: #52715d; background: #e5ece4; color: #315f42; }
.find-id__method:not(.find-id__method--disabled):hover span { background: #edf2e9; }
.find-id__method--disabled { cursor: not-allowed; }
.find-id__method input:disabled + span { opacity: .55; }
.find-id__method input:focus-visible + span { outline: 3px solid rgba(49, 95, 66, .25); outline-offset: 3px; }
.find-id__hint { margin: -6px 0 0; color: #737d75; font-size: 13px; line-height: 1.6; }
.find-id .auth-field input { text-align: center; }
.find-id [hidden] { display: none; }
.find-id__result { display: grid; justify-items: center; gap: 12px; padding: 24px 16px; border-radius: 14px; background: #e5ece4; text-align: center; }
.find-id__result p { margin: 0; color: #657368; font-size: 13px; }
.find-id__result strong { max-width: 100%; color: #244c33; font-size: 22px; overflow-wrap: anywhere; }
.find-id__result a { display: inline-flex; align-items: center; min-height: 44px; color: #315f42; font-size: 14px; font-weight: 800; }
.find-password [hidden] { display: none; }
.find-password__result { display: grid; justify-items: center; gap: 18px; padding: 12px 0 0; text-align: center; }
.find-password__result > i { color: #52715d; font-size: 42px; }
.find-password__result h2 { margin: 0; color: #243126; font-size: 22px; line-height: 1.4; }
.find-password__result p { margin: 0; color: #737d75; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.find-password__result .find-password__email { color: #315f42; font-weight: 800; }
.find-password__result .auth-form__submit { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
.find-password .auth-field input { text-align: center; }
.find-password__reset h2 { margin: 0; color: #243126; font-size: 22px; line-height: 1.4; }
.find-password__match { margin: 0; color: #315f42; font-size: 13px; line-height: 1.6; }
.find-password__match.is-error { color: #b3453c; }
.find-password__match:empty { display: none; }
.find-password > .auth-form__status:not(:empty) { margin-top: 16px; line-height: 1.7; }

.auth-form {
	display: grid;
	gap: 20px;
}

.auth-field {
	display: grid;
	gap: 9px;
}

.auth-field label {
	color: #303e34;
	font-size: 14px;
	font-weight: 850;
}

.auth-field input {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: #f0f1ec;
	color: #243126;
	font-size: 16px;
	outline: 0;
	transition: background-color .18s ease, box-shadow .18s ease;
}

.auth-field input::placeholder {
	color: #989f99;
}

.auth-field input:focus {
	background: #fff;
	box-shadow: 0 0 0 2px #52715d;
}

.auth-field__action-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.auth-field__action {
	min-width: 116px;
	min-height: 54px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: #e5ece4;
	color: #315f42;
	font-size: 14px;
	font-weight: 900;
	white-space: nowrap;
	transition: background-color var(--auth-motion), color var(--auth-motion), transform var(--auth-motion), box-shadow var(--auth-motion);
}

.auth-field__action--duplicate {
	min-width: 96px;
}

.auth-field__action:hover,
.auth-field__action:focus-visible {
	background: #d8e5d8;
	color: #244c33;
	box-shadow: var(--auth-focus);
	transform: translateY(-1px);
}

.signup-flow {
	display: grid;
	gap: 32px;
}

.signup-flow__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.signup-flow__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 7px;
	color: #979e98;
	font-size: 12px;
	text-align: center;
}

.signup-flow__step:not(:last-child)::after {
	position: absolute;
	top: 15px;
	left: calc(50% + 21px);
	width: calc(100% - 34px);
	height: 2px;
	background: #e0e4dd;
	content: "";
}

.signup-flow__step > span {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e8ebe5;
	font-weight: 900;
	transition: background-color var(--auth-motion), color var(--auth-motion), transform var(--auth-motion);
}

.signup-flow__step strong {
	font-weight: 800;
}

.signup-flow__step.is-active,
.signup-flow__step.is-complete {
	color: #315f42;
}

.signup-flow__step.is-active > span {
	background: #315f42;
	color: #fff;
	transform: scale(1.06);
}

.signup-flow__step.is-complete > span {
	background: #d8e7d9;
	color: #315f42;
}

.signup-flow__step.is-complete:not(:last-child)::after {
	background: #9db9a3;
}

.signup-flow__panel {
	animation: signup-panel-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}

.signup-flow__panel--account {
	display: grid;
	gap: 22px;
}

.signup-flow__panel--account .signup-flow__panel-head {
	margin-bottom: 2px;
}

.signup-flow__panel-head {
	margin-bottom: 22px;
}

.signup-flow__panel-head--with-action {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.signup-flow__eyebrow {
	margin: 0 0 5px;
	color: #5f7c68;
	font-size: 12px;
	font-weight: 900;
}

.signup-flow__panel-head h2 {
	margin: 0;
	color: #243126;
	font-size: 23px;
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: -.025em;
	outline: 0;
}

.signup-flow__panel-head p:last-child {
	margin: 8px 0 0;
	color: #737d75;
	font-size: 14px;
	line-height: 1.55;
}

.signup-flow__panel-head p strong {
	color: #315f42;
	font-weight: 900;
	word-break: break-all;
}

.signup-flow__change {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: #5f6c62;
	font-size: 13px;
	font-weight: 850;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color var(--auth-motion), text-underline-offset var(--auth-motion);
}

.signup-flow__change:hover,
.signup-flow__change:focus-visible {
	color: #244c33;
	text-underline-offset: 6px;
}

.signup-methods {
	display: grid;
	gap: 12px;
}

.signup-method {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 84px;
	padding: 15px 16px;
	border: 0;
	border-radius: 16px;
	background: #f0f1ec;
	color: #243126;
	text-align: left;
	transition: background-color var(--auth-motion), box-shadow var(--auth-motion), transform var(--auth-motion);
}

.signup-method:not(:disabled):hover,
.signup-method:not(:disabled):focus-visible {
	background: #e9eee7;
	box-shadow: 0 12px 28px rgba(42, 70, 49, .1);
	transform: translateY(-2px);
}

.signup-method:focus-visible,
.signup-flow__change:focus-visible {
	outline: 0;
	box-shadow: var(--auth-focus);
}

.signup-method:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.signup-method__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	background: #dfeadf;
	color: #315f42;
	font-size: 22px;
}

.signup-method__copy {
	display: grid;
	gap: 3px;
}

.signup-method__copy strong {
	font-size: 16px;
	font-weight: 900;
}

.signup-method__copy small {
	color: #778078;
	font-size: 13px;
}

.signup-method__arrow {
	color: #7f8981;
	font-size: 18px;
	transition: transform var(--auth-motion), color var(--auth-motion);
}

.signup-method:not(:disabled):hover .signup-method__arrow,
.signup-method:not(:disabled):focus-visible .signup-method__arrow {
	color: #315f42;
	transform: translateX(3px);
}

.signup-flow__code {
	margin-top: 2px;
}

.signup-flow__help,
.signup-flow__status {
	margin: 0;
	color: #778078;
	font-size: 12px;
	line-height: 1.5;
}

.signup-flow__status {
	min-height: 18px;
	color: #315f42;
	font-weight: 750;
}

.signup-flow__status--error {
	color: #b42318;
}

.signup-flow__status--attention {
	width: fit-content;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	background: #fff1f0;
	color: var(--color-danger);
	font-weight: 850;
}

@keyframes signup-panel-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.auth-check {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	width: fit-content;
	color: #687269;
	font-size: 14px;
	line-height: 1.5;
}

.auth-check input {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #315f42;
}

.auth-check--agreement {
	width: 100%;
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.auth-form__submit {
	width: 100%;
	min-height: 54px;
	margin-top: 4px;
	padding: 0 18px;
	border: 0;
	border-radius: 14px;
	background: #315f42;
	color: #fff;
	font-weight: 900;
	transition: background-color var(--auth-motion), box-shadow var(--auth-motion), transform var(--auth-motion);
}

.auth-form__status {
	min-height: 21px;
	margin: -4px 0 -4px;
	color: #52715d;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

.auth-form__status:empty {
	display: none;
}

.auth-form__status.is-error {
	color: #b42318;
}

.auth-form__submit:disabled {
	cursor: wait;
	opacity: .72;
	transform: none;
}

.auth-form__submit:hover,
.auth-form__submit:focus-visible {
	background: #244c33;
	box-shadow: 0 12px 26px rgba(36, 76, 51, .2);
	transform: translateY(-2px);
}

.auth-form__submit:active {
	transform: translateY(1px);
}

.auth-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	margin-top: 22px;
	color: #647067;
	font-size: 13px;
	font-weight: 750;
}

.auth-links span {
	width: 1px;
	height: 12px;
	background: #ced2cc;
}

.auth-links a,
.auth-card__switch a {
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--auth-motion), text-decoration-color var(--auth-motion), text-underline-offset var(--auth-motion);
}

.auth-header__brand:hover,
.auth-header__brand:focus-visible,
.auth-links a:hover,
.auth-links a:focus-visible,
.auth-card__switch a:hover,
.auth-card__switch a:focus-visible {
	color: #244c33;
}

.auth-header__brand:hover,
.auth-header__brand:focus-visible {
	transform: translateY(-1px);
}

.auth-links a:hover,
.auth-links a:focus-visible,
.auth-card__switch a:hover,
.auth-card__switch a:focus-visible {
	text-underline-offset: 5px;
}

.auth-header__back:focus-visible,
.auth-header__brand:focus-visible,
.auth-form__submit:focus-visible,
.auth-links a:focus-visible,
.auth-card__switch a:focus-visible {
	outline: 0;
	box-shadow: var(--auth-focus);
}

.auth-card__switch {
	margin: 30px 0 0;
	color: #737d75;
	font-size: 14px;
	text-align: center;
}

.auth-card__switch a {
	color: #315f42;
	font-weight: 900;
}

.auth-page__note {
	width: min(100%, 480px);
	margin: 52px auto 0;
	color: #899089;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 720px) {
	.auth-header { min-height: 64px; padding: 0 10px; }
	.auth-page { width: calc(100% - 32px); padding-top: 40px; }
	.auth-banner { margin-bottom: 30px; border-radius: 18px; }
	.auth-card__head { margin-bottom: 28px; }
}

@media (max-width: 440px) {
	.auth-field__action-row { grid-template-columns: 1fr; }
	.auth-field__action { width: 100%; }
	.auth-field__action-row--duplicate { grid-template-columns: minmax(0, 1fr) auto; }
	.auth-field__action-row--duplicate .auth-field__action { width: auto; }
	.signup-flow__panel-head--with-action { gap: 10px; }
	.signup-flow__panel-head h2 { font-size: 21px; }
	.signup-method { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 14px; }
	.signup-method__icon { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.signup-flow__panel { animation: none; }
}