@layer base, components, sections, motion;
@font-face {
  font-family: "Manrope";
  src: url("/fonts/web/manrope-700.woff2") format("woff2"), url("/fonts/MANROPE/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/web/manrope-800.woff2") format("woff2"), url("/fonts/MANROPE/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E-_F.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/web/inter.woff2") format("woff2"), url("/fonts/inter (1)/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-red: #F40009;
  --color-red-deep: #D40004;
  --color-anthracite: #1C1F24;
  --color-slate: #5A626B;
  --color-border: #E2E5E9;
  --color-bg-alt: #F5F6F8;
  --color-white: #FFFFFF;
  --color-scan: #22C55E;
  --school-blue: #1E40AF;
  --school-blue-alt: #F59E0B;
  --school-green: #15803D;
  --school-green-alt: #EAB308;
  --school-wine: #9F1239;
  --school-wine-alt: #C08457;
  --text: var(--color-anthracite);
  --text-muted: var(--color-slate);
  --text-accent: var(--color-red-deep);
  --text-on-accent: var(--color-white);
  --text-gain: var(--school-green);
  --surface: var(--color-white);
  --surface-alt: var(--color-bg-alt);
  --accent-fill: var(--color-red);
  --btn-fill: var(--color-red-deep);
  --btn-fill-hover: color-mix(in srgb, var(--color-red-deep) 85%, var(--color-anthracite));
  --line: var(--color-border);
  --focus-ring: var(--color-red-deep);
  --font-title: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-text: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-stat: clamp(1.625rem, 1.2rem + 1.6vw, 2.75rem);
  --fs-display: clamp(2.125rem, 1.2rem + 3.3vw, 3.75rem);
  --fs-display-sm: 1.875rem;
  --fs-display-xs: 1.75rem;
  --fs-h2: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-kicker: clamp(1.125rem, 0.9rem + 0.8vw, 1.2rem);
  --fs-banner: clamp(1.625rem, 1rem + 2vw, 2.25rem);
  --fs-banner-sm: clamp(1.5rem, 1rem + 1vw, 1.875rem);
  --fs-step-title: clamp(1.375rem, 1rem + 1.2vw, 2.25rem);
  --fs-card-title: 1rem;
  --fs-card: 0.8rem;
  --fs-xs: 0.8125rem;
  --fs-h2-sm: 2rem;
  --fs-h3-sm: 1.5rem;
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --tracking-title: -0.02em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --page-margin: clamp(1rem, -1.375rem + 10.2vw, 7.8125rem);
  --header-height: 3.625rem;
  --header-offset: clamp(0.75rem, 2vw, 1.75rem);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: clamp(1.75rem, 4vw, 3.5rem);
  --radius-pill: 62.4375rem;
  --shadow-header: 0 0.0625rem 0.125rem rgb(28 31 36 / 0.04), 0 0.5rem 1.5rem rgb(28 31 36 / 0.06);
  --shadow-card: 0 0.0625rem 0.125rem rgb(28 31 36 / 0.04), 0 0.625rem 1.75rem rgb(28 31 36 / 0.08);
  --shadow-soft: 0 0.0625rem 0.125rem rgb(28 31 36 / 0.03), 0 0.375rem 1rem rgb(28 31 36 / 0.05);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-reveal: 900ms;
  --duration-slide: 400ms;
  --duration-enter: 700ms;
  --enter-stagger: 120ms;
  --scrollbar-size: 0.25rem;
  --scrollbar-size-active: 0.5rem;
  --scrollbar-inset: 0.25rem;
  --scrollbar-thumb: color-mix(in srgb, var(--color-slate) 30%, transparent);
  --scrollbar-thumb-active: color-mix(in srgb, var(--color-slate) 65%, transparent);
  --tap-min: 2.03125rem;
  --btn-height: 3.25rem;
  --btn-height-sm: 2.875rem;
  --btn-height-xs: 2.5rem;
  --fs-btn-sm: 0.875rem;
  --portal-accent: var(--color-slate);
  --portal-on-accent: var(--color-white);
  --portal-accent-text: var(--portal-accent);
  --portal-emphasis: var(--text);
  --portal-soft: var(--color-bg-alt);
  --portal-band: color-mix(in srgb, var(--color-slate) 12%, var(--surface));
  --portal-band-title: var(--color-slate);
  --portal-header-h: clamp(4rem, 9.5svh, 4.875rem);
  --portal-field-hover: color-mix(in srgb, var(--color-slate) 50%, var(--surface));
  --shadow-portal-header: 0 0.0625rem 0.125rem rgb(28 31 36 / 0.02), 0 0.25rem 0.875rem rgb(28 31 36 / 0.04);
  --portal-width: 76.875rem;
  --portal-radius: clamp(1.25rem, 0.875rem + 1.2vw, 1.75rem);
  --portal-gutter: clamp(1rem, 1rem + 2.6vw, 3.5rem);
  --portal-logo: clamp(5.75rem, 3.75rem + 8vw, 9.125rem);
  --fs-portal-name: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-portal-title: clamp(1.75rem, 1.2rem + 2vw, 2.625rem);
  --fs-portal-h2: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);
  --fs-portal-band: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --admin-bg: var(--color-bg-alt);
  --admin-gap: clamp(0.5rem, 0.325rem + 0.7vw, 0.9375rem);
  --admin-bar-h: 3.8125rem;
  --admin-radius: clamp(1.25rem, 0.875rem + 1.2vw, 1.75rem);
  --admin-sidebar-w: clamp(17rem, 22vw, 19rem);
  --admin-page-pad: clamp(1rem, 0.4rem + 1.6vw, 2rem);
  --admin-sidebar-w-collapsed: 4.75rem;
  --admin-list-w: 23.75rem;
  --admin-item-h: 2.5rem;
  --state-new: var(--color-red-deep);
  --state-done: var(--text-gain);
  --state-neutral: var(--text-muted);
  --state-draft: var(--school-blue);
  --state-import: #7C3AED;
  --state-check: #B45309;
  --state-publish: #01BE1D;
  --state-publish-bg: #EBFFEA;
  --state-suspend: var(--color-red);
  --state-hidden: #F08C00;
  --state-suspend-bg: #FFF0F0;
}
.portal {
  --btn-fill: var(--portal-accent);
  --btn-fill-hover: color-mix(in srgb, var(--portal-accent) 85%, var(--color-anthracite));
  --text-accent: var(--portal-accent-text);
  --text-on-accent: var(--portal-on-accent);
  --focus-ring: var(--portal-accent);
}
@layer base {
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
h1,
h2,
h3 {
  font-family: var(--font-title);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-title);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.1875rem;
}
[tabindex="-1"]:focus {
  outline: none;
}
.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-anthracite);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
}
@layer base {
.scrollbar {
  position: fixed;
  top: var(--scrollbar-inset);
  right: var(--scrollbar-inset);
  bottom: var(--scrollbar-inset);
  z-index: 60;
  width: var(--scrollbar-size-active);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.scrollbar[hidden] {
  display: block;
  opacity: 0;
}
.scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--scrollbar-size);
  height: var(--thumb-h, 0rem);
  border-radius: var(--radius-pill);
  background: var(--scrollbar-thumb);
  transform: translateY(var(--thumb-y, 0rem));
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  transition:
    width var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.scrollbar-thumb::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -0.5rem;
}
.scrollbar[hidden] .scrollbar-thumb {
  pointer-events: none;
}
.scrollbar-thumb:hover,
.scrollbar[data-dragging] .scrollbar-thumb {
  width: var(--scrollbar-size-active);
  background: var(--scrollbar-thumb-active);
}
.scrollbar[data-dragging] .scrollbar-thumb {
  cursor: grabbing;
}
}
@layer components {
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: 0.125rem solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: var(--btn-fill);
  color: var(--text-on-accent);
}
.btn-primary:hover {
  background: var(--btn-fill-hover);
}
.btn-outline {
  background: var(--surface);
  border-color: var(--btn-fill);
  color: var(--text-accent);
}
.btn-outline:hover {
  background: var(--btn-fill);
  color: var(--text-on-accent);
}
.btn-sm {
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.doc-pan {
  cursor: grab;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.doc-pan.is-dragging {
  cursor: grabbing;
}
}
@layer components {
.icon-chevron-down { --icon: url("/assets/icons/chevron-down-icon.svg"); }
.form-trap {
  position: absolute;
  left: -624.9375rem;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}
.form-captcha {
  display: flex;
  justify-content: center;
}
.field-phone {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 var(--space-3);
}
.field-phone .field-hint,
.field-phone .field-error {
  grid-column: 1 / -1;
}
.field {
  position: relative;
}
.field-input {
  display: block;
  width: 100%;
  height: var(--field-h, 3.375rem);
  padding: 0 var(--space-4);
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-text);
  color: var(--text);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-out);
}
.field-input::placeholder {
  color: transparent;
}
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 6.25rem var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 600000s 0s, border-color var(--duration-base) var(--ease-out);
}
.field-input:autofill {
  box-shadow: 0 0 0 6.25rem var(--surface) inset;
}
.field-input:hover,
.field-input:focus,
.field[data-open] .field-input {
  border-color: var(--text-muted);
}
.field[data-invalid] .field-input {
  border-color: var(--text-accent);
}
.field-label {
  position: absolute;
  top: calc(var(--field-h, 3.375rem) / 2);
  left: calc(var(--space-4) - var(--space-1));
  max-width: calc(100% - 2 * var(--space-4));
  padding: 0 var(--space-1);
  overflow: hidden;
  background: var(--surface);
  font-size: var(--fs-text);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
  translate: 0 -50%;
  pointer-events: none;
  transition:
    top var(--duration-base) var(--ease-out),
    font-size var(--duration-base) var(--ease-out);
}
.field-input:focus ~ .field-label,
input.field-input:not(:placeholder-shown) ~ .field-label,
textarea.field-input:not(:placeholder-shown) ~ .field-label,
.field[data-open] .field-label,
.field[data-filled] .field-label {
  top: 0;
  font-size: var(--fs-xs);
}
.field-has-check .field-input {
  padding-right: 3.25rem;
}
.field-check {
  position: absolute;
  top: calc(var(--field-h, 3.375rem) / 2);
  right: var(--space-4);
  width: 1.375rem;
  height: 1.375rem;
  background: var(--text-gain);
  -webkit-mask: url("/assets/icons/check-icon.svg") center / contain no-repeat;
  mask: url("/assets/icons/check-icon.svg") center / contain no-repeat;
  pointer-events: none;
  translate: 0 -50%;
}
.field-check[hidden] {
  display: none;
}
.field-has-eye .field-input {
  padding-right: 3.25rem;
}
.field-eye {
  position: absolute;
  top: calc(var(--field-h, 3.375rem) / 2);
  right: var(--space-1);
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.625rem;
  font-size: 1.375rem;
  color: var(--text-muted);
  cursor: pointer;
  translate: 0 -50%;
  transition: color var(--duration-base) var(--ease-out);
}
.field-eye:hover,
.field-eye[aria-pressed="true"] {
  color: var(--text);
}
.field-eye:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: -0.125rem;
}
.icon-eye { --icon: url("/assets/icons/eye-icon.svg"); }
.icon-eye-off { --icon: url("/assets/icons/eye-off-icon.svg"); }
.field-eye .icon-eye-off,
.field-eye[aria-pressed="true"] .icon-eye {
  display: none;
}
.field-eye[aria-pressed="true"] .icon-eye-off {
  display: inline-block;
}
.field-code .field-input {
  padding-left: calc(var(--space-4) + 0.75em);
}
.field-prefix {
  position: absolute;
  top: calc(var(--field-h, 3.375rem) / 2);
  left: var(--space-4);
  font-size: var(--fs-text);
  color: var(--text);
  translate: 0 -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.field-code:focus-within .field-prefix,
.field-code:has(.field-input:not(:placeholder-shown)) .field-prefix {
  opacity: 1;
}
.field-hint {
  margin-top: 0.375rem;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--color-slate) 60%, transparent);
}
.field-error {
  margin-top: 0.375rem;
  font-size: var(--fs-xs);
  color: var(--text-accent);
}
.field-error[hidden] {
  display: none;
}
.field-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  cursor: pointer;
}
.field-trigger-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.field-select .icon {
  font-size: 1rem;
  color: var(--text-muted);
  transition: rotate var(--duration-base) var(--ease-out);
}
.field[data-open] .icon {
  rotate: 180deg;
}
.field-trigger[hidden],
.field-other[hidden],
.field-reopen[hidden] {
  display: none;
}
.field-other {
  padding-right: calc(var(--space-4) + 1.75rem);
}
.field-reopen {
  position: absolute;
  top: calc(var(--field-h, 3.375rem) / 2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  translate: 0 -50%;
}
.field-menu {
  position: absolute;
  top: calc(var(--field-h, 3.375rem) + var(--space-2));
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: auto;
  padding: 0.375rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.field-menu::-webkit-scrollbar {
  width: 0.6875rem;
}
.field-menu::-webkit-scrollbar-track {
  background: transparent;
}
.field-menu::-webkit-scrollbar-thumb {
  border: 0.1875rem solid transparent;
  border-radius: var(--radius-pill);
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}
.field-menu::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-active);
  background-clip: padding-box;
}
.field-menu::-webkit-scrollbar-button {
  display: none;
}
@supports not selector(::-webkit-scrollbar) {
  .field-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}
.field-menu[hidden] {
  display: none;
}
.field-menu[data-up] {
  top: auto;
  bottom: calc(100% + var(--space-2));
}
.field-option {
  flex-shrink: 0;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--fs-small);
  color: var(--text);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.field-option:hover,
.field-option:focus-visible {
  background: var(--surface-alt);
  outline: none;
}
.field-option[aria-selected="true"] {
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.125rem;
  margin-top: var(--space-1);
  border-radius: 0.625rem;
  background: linear-gradient(90deg, var(--color-red) 0%, var(--color-red-deep) 100%);
  font-size: var(--fs-text);
  font-weight: var(--fw-bold);
  color: var(--text-on-accent);
  transition:
    filter var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.form-submit:hover {
  filter: brightness(0.93);
}
.form-submit:active {
  transform: scale(0.99);
}
.form-submit[data-state="sending"],
.form-submit[data-state="closing"],
.form-submit[data-state="done"] {
  filter: none;
  transform: none;
  cursor: default;
}
.form-status {
  text-align: center;
}
.form-state {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    width var(--duration-slow) var(--ease-out),
    margin var(--duration-slow) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}
[data-state="sending"] .form-state,
[data-state="closing"] .form-state,
[data-state="done"] .form-state {
  width: 1.5rem;
  margin-left: var(--space-3);
  opacity: 1;
}
.state-icon {
  width: 1.5rem;
  height: 1.5rem;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.state-ring {
  stroke-dasharray: 100;
  stroke-dashoffset: 75;
  transform-box: fill-box;
  transform-origin: center;
  rotate: -90deg;
  opacity: 0;
}
.state-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
[data-state="sending"] .state-ring,
[data-state="closing"] .state-ring {
  opacity: 1;
  animation: state-spin 1.2s linear infinite;
  transition: stroke-dashoffset 1100ms var(--ease-out);
}
[data-state="sending"] .state-ring {
  stroke-dashoffset: 14;
}
[data-state="closing"] .state-ring {
  stroke-dashoffset: 0;
  transition-duration: 240ms;
}
[data-state="done"] .state-ring {
  stroke-dashoffset: 0;
  opacity: 0;
  scale: 0.6;
  transition:
    opacity var(--duration-base) var(--ease-out),
    scale var(--duration-slow) var(--ease-out);
}
[data-state="done"] .state-check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 340ms var(--ease-out) 90ms;
}
@keyframes state-spin {
  from {
    rotate: -90deg;
  }
  to {
    rotate: 270deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-state,
  [data-state] .state-ring,
  [data-state] .state-check {
    animation: none;
    transition: none;
  }
}
.field-textarea {
  height: auto;
  min-height: 7.5rem;
  padding-top: calc(var(--field-h, 3.375rem) / 2 - 0.6em);
  padding-bottom: var(--space-5);
  line-height: 1.5;
  resize: none;
}
textarea.field-input:not(:focus):placeholder-shown ~ .field-label {
  top: calc(var(--field-h, 3.375rem) / 2);
}
.field-counter {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--color-slate) 60%, transparent);
  pointer-events: none;
}
}
@layer sections {
.site-header {
  position: fixed;
  top: calc(var(--header-offset) + env(safe-area-inset-top, 0rem));
  left: var(--page-margin);
  right: var(--page-margin);
  z-index: 50;
}
.site-header-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-7));
  min-height: var(--header-height);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-header);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
}
.brand-symbol {
  width: 7.8125rem;
  height: auto;
}
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.site-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 2.4vw, var(--space-7));
  padding: 0;
  list-style: none;
}
@media (min-width: 1180px) and (max-width: 1299.98px) {
  .site-nav-list {
    gap: var(--space-5);
  }
}
.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-btn-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-out);
}
.site-nav-link:hover,
.site-nav-link[aria-current] {
  color: var(--text-accent);
}
.site-nav-cta {
  display: none;
}
.site-header-cta {
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--fs-btn-sm);
}
.nav-toggle {
  display: none;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: auto;
  border-radius: var(--radius-pill);
}
.nav-toggle-icon {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.125rem;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.125rem;
  background: var(--text);
  transition: transform var(--duration-slow) var(--ease-out);
}
.nav-toggle-icon::before { transform: translateY(-0.25rem); }
.nav-toggle-icon::after  { transform: translateY(0.25rem); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after  { transform: rotate(-45deg); }
@media (max-width: 1179.98px) {
  .site-header-bar {
    padding-inline: var(--space-4);
  }
  .nav-toggle {
    display: grid;
  }
  .site-header-cta {
    display: none;
  }
  .site-header-cta + .nav-toggle {
    margin-left: auto;
  }
  .site-nav-cta {
    display: inline-flex;
    width: 100%;
  }
  .site-nav {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-header);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem) scale(0.97);
    transform-origin: top center;
    will-change: transform, opacity;
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }
  .site-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out),
      visibility 0s;
  }
  .site-nav-list > li,
  .site-nav-cta {
    opacity: 0;
    transform: translateY(-0.375rem);
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }
  .site-nav[data-open="true"] .site-nav-list > li,
  .site-nav[data-open="true"] .site-nav-cta {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
    transition-delay: calc(40ms + var(--i, 0) * 30ms);
  }
  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav-link {
    width: 100%;
    padding: 0 var(--space-3);
    min-height: 3rem;
    font-size: var(--fs-body);
  }
  .site-nav-link:hover {
    background: var(--surface-alt);
  }
}
@media (max-width: 639.98px) {
  .brand-symbol {
    width: 7.8125rem;
  }
}
}
@layer sections {
.icon-check { --icon: url("/assets/icons/check-icon.svg"); }
.icon-play { --icon: url("/assets/icons/play-solid-icon.svg"); }
.icon-lock { --icon: url("/assets/icons/lock-icon.svg"); }
.icon-eye { --icon: url("/assets/icons/eye-icon.svg"); }
.icon-star { --icon: url("/assets/icons/star-icon.svg"); }
.hero {
  --stats-gap: clamp(var(--space-4), 4svh, var(--space-6));
  --hero-pad-top: calc(var(--header-offset) + var(--header-height) + var(--stats-gap));
  --card-w: clamp(21rem, 34vw, 36rem);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--card-w);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: clamp(var(--space-5), 5svh, var(--space-7)) var(--space-7);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: var(--hero-pad-top) var(--page-margin) var(--stats-gap);
  background: var(--surface);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface) image-set(
    url("/assets/img/hero-background.avif") type("image/avif"),
    url("/assets/img/hero-background.webp") type("image/webp"),
    url("/assets/img/hero-background.png") type("image/png")
  ) center bottom / cover no-repeat;
}
.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-title {
  max-width: none;
  font-size: clamp(2rem, 2.8vw, 3.75rem);
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.hero-title-accent {
  display: block;
  color: var(--color-red);
}
.hero-lead {
  max-width: 42vw;
  margin-top: clamp(var(--space-4), 4svh, var(--space-6));
  font-size: clamp(1rem, 1.25vw, 1.375rem);
  line-height: 1.7;
  color: var(--text);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(var(--space-5), 3.5svh, var(--space-6));
}
.hero-more {
  --more-h: var(--btn-height);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: var(--more-h);
  padding-left: var(--space-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
}
.hero-more-circle {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: var(--more-h);
  border-radius: var(--radius-pill);
  background: var(--text);
  transition: width var(--duration-slide) var(--ease-in-out);
}
.hero-more-arrow {
  position: absolute;
  top: 50%;
  right: calc(var(--more-h) / 2 - 0.5625rem);
  width: 1.125rem;
  height: 0.125rem;
  translate: -0.40625rem -50%;
  transition: background var(--duration-slide) var(--ease-in-out);
}
.hero-more-arrow::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid var(--text-on-accent);
  border-right: 0.125rem solid var(--text-on-accent);
  rotate: 45deg;
}
.hero-more-text {
  padding-right: calc(var(--more-h) + var(--space-3));
  transition: color var(--duration-slide) var(--ease-in-out);
}
@media (hover: hover) {
  .hero-more:hover .hero-more-circle {
    width: 100%;
  }
  .hero-more:hover .hero-more-arrow {
    background: var(--text-on-accent);
  }
  .hero-more:hover .hero-more-text {
    color: var(--text-on-accent);
  }
}
.hero-more:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.1875rem;
  border-radius: var(--radius-pill);
}
.hero-visual {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  container-type: inline-size;
}
.hero-portal {
  --pal-1: var(--color-red);
  --pal-2: var(--color-anthracite);
  --pal-3: var(--color-slate);
  --card-pad: clamp(0.875rem, 1.3vw, 1.25rem);
  --card-inner: 1.25rem;
  --badge: 4.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  padding: var(--card-pad);
  border: 0.0625rem solid rgb(255 255 255 / 0.7);
  border-radius: calc(var(--card-inner) + var(--card-pad));
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(1.5rem) saturate(1.2);
  backdrop-filter: blur(1.5rem) saturate(1.2);
  box-shadow: var(--shadow-card);
  text-align: center;
  cursor: pointer;
  transition:
    translate var(--duration-slow) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
.hero-portal:active {
  scale: 0.98;
}
.hero-portal:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.1875rem;
}
@media (hover: hover) and (min-width: 1180px) {
  .hero-portal:hover {
    translate: 0 -0.25rem;
  }
}
.icon-hero-download { --icon: url("/assets/icons/download-icon.svg"); }
.icon-school-filled { --icon: url("/assets/icons/new-icons/school-filled.svg"); }
.hero-url {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-card);
  color: var(--text-muted);
}
.hero-url > .icon,
.hero-url-extra {
  flex-shrink: 0;
  font-size: 1.125rem;
}
.hero-url-dots {
  display: flex;
  flex-shrink: 0;
  gap: 0.375rem;
}
.hero-url-dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-red);
}
.hero-url-dots i:nth-child(2) { background: var(--state-hidden); }
.hero-url-dots i:nth-child(3) { background: var(--color-scan); }
.hero-url-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-url-nav .icon {
  font-size: 1.125rem;
}
.hero-url-download {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 0.09375rem solid currentColor;
  border-radius: 50%;
}
.hero-url-download .icon {
  font-size: 0.875rem;
}
.hero-url-text {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  height: 2rem;
  padding: 0 var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.hero-url-text .icon {
  flex-shrink: 0;
  font-size: 0.8125rem;
}
.hero-url-text strong {
  font-weight: var(--fw-bold);
  color: var(--pal-1);
}
@container (max-width: 439.98px) {
  .hero-url-extra {
    display: none;
  }
}
.hero-portal-banner {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) calc(var(--badge) / 2 + var(--space-3));
  border-radius: var(--card-inner);
  background: var(--surface);
  box-shadow: 0 0.0625rem 0.125rem rgb(28 31 36 / 0.04), 0 0.375rem 1.125rem rgb(28 31 36 / 0.05);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.hero-portal-title {
  text-wrap: balance;
}
.hero-swatches {
  display: flex;
  gap: 0.5rem;
}
.hero-swatches i {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--pal-1);
}
.hero-swatches i:nth-child(2) { background: var(--pal-2); }
.hero-swatches i:nth-child(3) { background: var(--pal-3); }
.hero-portal-badge {
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  margin: calc(var(--badge) / -2 - var(--space-2)) auto 0;
  overflow: hidden;
  border: 0.25rem solid var(--surface);
  border-radius: 50%;
  background: var(--pal-1);
  font-size: calc(var(--badge) * 0.5);
  color: var(--pal-on, var(--text-on-accent));
}
.hero-portal-badge[data-has-logo] {
  background: var(--surface);
}
.hero-portal-badge[data-has-logo] .icon {
  display: none;
}
.hero-portal-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-portal-name {
  margin-top: var(--space-1);
  font-family: var(--font-title);
  font-size: var(--fs-text);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--text);
}
.hero-portal-slogan {
  margin-top: -0.375rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.hero-portal-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: var(--space-2);
  padding: 0 3.25rem;
  border-radius: var(--radius-pill);
  background: var(--pal-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--pal-on, var(--text-on-accent));
}
.hero-portal-cta-arrow {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--pal-1);
  translate: 0 -50%;
  transition: translate var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .hero-portal:hover .hero-portal-cta-arrow {
    translate: 0.1875rem -50%;
  }
}
.hero-stats {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  align-items: stretch;
  gap: clamp(var(--space-4), 3.5vw, 4.375rem);
}
.hero-card {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition:
    translate var(--duration-slow) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (min-width: 1180px) {
  .hero-card:hover {
    translate: 0 -0.25rem;
  }
}
.hero-card-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text);
}
.hero-always {
  display: grid;
  align-content: center;
  gap: 0.125rem;
  padding: var(--space-3) var(--space-5);
}
.hero-always-value {
  font-family: var(--font-title);
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-red);
}
.hero-stats-item dd {
  font-family: var(--font-title);
  font-size: clamp(1.125rem, 5.2cqi, calc(var(--fs-stat) * 0.82));
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-red);
}
.hero-always-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.hero-stats-list {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-3) var(--space-5);
}
.hero-stats-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 0.125rem;
  padding-inline: 4cqi;
  text-align: left;
}
.hero-stats-item:first-child {
  padding-left: 0;
}
.hero-stats-item:last-child {
  padding-right: 0;
}
.hero-stats-item + .hero-stats-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 44%;
  border-left: 0.0625rem solid var(--line);
  translate: 0 -50%;
}
.hero-stats-item dd {
  order: -1;
  margin: 0;
}
.hero-stats-item dt {
  font-size: clamp(0.625rem, 2.6cqi, var(--fs-small));
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--text);
}
.hero-verify {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-align: left;
}
.hero-verify-qr {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--text);
}
.hero-verify-text {
  display: grid;
  min-width: 0;
  font-size: var(--fs-card);
  color: var(--text);
}
.hero-verify-arrow {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--surface-alt);
  font-size: 0.875rem;
  color: var(--text);
  transition:
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .hero-verify:hover .hero-verify-arrow {
    background: var(--btn-fill);
    color: var(--text-on-accent);
  }
}
.hero-verify:active {
  scale: 0.97;
}
.hero-verify:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.1875rem;
}
@media (min-width: 1180px) and (max-width: 1365.98px) {
  .hero-actions .btn {
    padding-inline: var(--space-4);
  }
}
@media (min-width: 1180px) and (max-height: 760px) {
  .hero-lead {
    margin-top: var(--space-3);
    font-size: var(--fs-text);
  }
  .hero-actions {
    margin-top: var(--space-4);
  }
  .hero-portal-banner {
    padding-block: var(--space-3) 3.25rem;
  }
}
@media (max-width: 1179.98px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  .hero-content {
    align-items: center;
    align-self: center;
    max-width: 40rem;
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-lead {
    max-width: 100%;
  }
  .hero-visual {
    width: 100%;
    max-width: 32rem;
    margin: var(--space-7) auto 0;
  }
  .hero-stats {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    width: 100%;
    max-width: 32rem;
    margin: var(--space-5) auto 0;
    gap: var(--space-3);
  }
  .hero-always {
    justify-items: center;
    text-align: center;
  }
}
@media (max-width: 639.98px) {
  .hero {
    --hero-pad-top: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  }
  .hero-title {
    font-size: var(--fs-display-sm);
  }
  .hero-lead {
    margin-top: var(--space-4);
    font-size: var(--fs-small);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: var(--space-5);
  }
  .hero-actions .btn {
    min-height: var(--btn-height-sm);
  }
  .hero-more {
    --more-h: var(--btn-height-sm);
    align-self: center;
  }
  .hero-visual {
    margin-top: var(--space-6);
  }
  .hero-stats-list {
    padding-inline: var(--space-4);
  }
}
@media (max-width: 389.98px) {
  .hero-title {
    font-size: var(--fs-display-xs);
  }
}
.btn-fill-slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-fill-slide span {
  display: inline-block;
}
.btn-fill-slide::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 0;
  border-radius: inherit;
  background: var(--btn-fill);
  transition: width var(--duration-slide) ease-in-out;
}
@media (hover: hover) {
  .btn-fill-slide:hover {
    background: var(--surface);
    color: var(--text-on-accent);
    transition: color var(--duration-slide) ease-in-out;
  }
  .btn-fill-slide:hover::after {
    inset: 0 auto 0 0;
    width: 100%;
  }
  .btn-fill-slide:hover span {
    animation: btn-press var(--duration-slow) ease-in-out;
  }
}
@keyframes btn-press {
  50% {
    transform: scale(0.95);
  }
}
@media (min-width: 1180px) {
  .hero-always-value,
  .hero-stats-item dd {
    font-size: clamp(1.5rem, 2.1vw, 2.25rem);
  }
  .hero-stats-item dt {
    font-size: clamp(0.75rem, 3.2cqi, var(--fs-small));
  }
}
@media (min-width: 1180px) {
  .hero-stats-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-stats-duo .hero-always {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
  }
  .hero-stats-duo .hero-always-value {
    font-size: clamp(1.75rem, 2.6vw, 2.75rem);
  }
  .hero-stats-duo .hero-always-label {
    font-size: clamp(0.9375rem, 1.35vw, 1.25rem);
    line-height: 1.3;
    white-space: nowrap;
  }
  .hero-stats-duo .hero-verify-text {
    display: flex;
    align-items: baseline;
    column-gap: var(--space-2);
    font-size: clamp(0.75rem, calc(1.4vw - 3.6px), 1.25rem);
    white-space: nowrap;
  }
  .hero-stats-duo .hero-verify-text .hero-card-title {
    font-size: inherit;
  }
}
}
@layer sections {
.icon-desktop { --icon: url("/assets/icons/desktop-icon.svg"); }
.icon-tablet { --icon: url("/assets/icons/tablet-icon.svg"); }
.icon-phone-device { --icon: url("/assets/icons/phone-icon.svg"); }
.icon-download { --icon: url("/assets/icons/new-icons/export-download.svg"); }
html[data-modal] .sections {
  overflow: hidden;
}
html[data-modal] .sections *:not(.preview, .preview *) {
  animation-play-state: paused !important;
}
.preview {
  width: min(74rem, 100vw - 2 * var(--space-5));
  max-width: none;
  height: min(46rem, 100svh - 2 * var(--space-5));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
}
.preview:focus {
  outline: none;
}
.preview[open] {
  display: flex;
  flex-direction: column;
  animation: preview-in var(--duration-slow) var(--ease-out);
}
.preview::backdrop {
  background: rgb(28 31 36 / 0.72);
}
@keyframes preview-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
}
.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 0.0625rem solid var(--line);
}
.preview-title {
  font-size: var(--fs-h3-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.preview-lead {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.preview-close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface-alt);
  font-size: 0.75rem;
  color: var(--text);
  transition: background var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .preview-close:hover {
    background: var(--line);
  }
}
.preview-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  min-height: 0;
}
.preview-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 0.0625rem solid var(--line);
}
.preview-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 0.09375rem dashed var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .preview-logo:hover {
    border-color: color-mix(in srgb, var(--color-red-deep) 40%, var(--color-border));
  }
}
.preview-logo-pick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  cursor: pointer;
}
.preview-logo-pick:has(input:focus-visible) {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.25rem;
  border-radius: var(--radius-sm);
}
.preview-logo-thumb {
  display: grid;
  flex-shrink: 0;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 0.625rem;
  background: var(--surface-alt);
  font-size: 1.25rem;
  color: var(--text-muted);
}
.preview-logo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.preview-logo-thumb:has(img) {
  padding: 0.25rem;
  border: 0.0625rem solid var(--line);
  background: var(--surface);
}
.preview-logo-thumb:has(img) .icon {
  display: none;
}
.preview-logo-text {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.preview-logo-text strong {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.preview-logo-action {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--surface-alt);
  font-size: 0.9375rem;
  color: var(--text);
}
.preview-logo-action [class*="icon-delete"] {
  font-size: 0.625rem;
}
@media (hover: hover) {
  .preview-logo-action:hover {
    color: var(--text-accent);
  }
}
.preview-logo-action[hidden] {
  display: none;
}
.preview-crop {
  display: grid;
  gap: var(--space-3);
}
.preview-crop[hidden] {
  display: none;
}
.preview-crop-area {
  position: relative;
  width: min(100%, 15rem);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: repeating-conic-gradient(var(--surface-alt) 0% 25%, var(--surface) 0% 50%) 0 0 / 1rem 1rem;
  touch-action: none;
  user-select: none;
}
.preview-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.preview-crop-box {
  position: absolute;
  top: var(--cy);
  left: var(--cx);
  width: var(--cs);
  height: var(--cs);
  border: 0.125rem solid var(--color-red);
  border-radius: 0.25rem;
  box-shadow: 0 0 0 624.9375rem rgb(28 31 36 / 0.45);
  cursor: move;
}
.preview-crop-box:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.125rem;
}
.preview-crop-handle {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-right: 0.25rem solid var(--color-red);
  border-bottom: 0.25rem solid var(--color-red);
  border-bottom-right-radius: 0.25rem;
  cursor: nwse-resize;
}
.preview-crop-handle::after {
  content: "";
  position: absolute;
  inset: -0.75rem;
}
.preview-crop-hint {
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--text-muted);
}
.preview-crop-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.preview-crop-btn {
  min-height: 2.25rem;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--btn-fill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-on-accent);
}
.preview-crop-btn-ghost {
  border: 0.09375rem solid var(--line);
  background: var(--surface);
  color: var(--text);
}
.preview-error {
  font-size: var(--fs-xs);
  color: var(--text-accent);
}
.preview-error[hidden] {
  display: none;
}
.preview-colors {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.preview-legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.preview-color {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  cursor: pointer;
}
.preview-color input {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.preview-color input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.preview-color input::-webkit-color-swatch {
  border: 0.0625rem solid var(--line);
  border-radius: 50%;
}
.preview-color input::-moz-color-swatch {
  border: 0.0625rem solid var(--line);
  border-radius: 50%;
}
.preview-palettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.preview-palette {
  display: inline-flex;
  padding: 0.3125rem;
  border: 0.09375rem solid var(--line);
  border-radius: var(--radius-pill);
}
.preview-palette[aria-pressed="true"] {
  border-color: var(--text);
}
.preview-palette i {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--sw);
}
.preview-privacy {
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.preview-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "devices devices"
    "stage zoom";
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-alt);
}
.preview-devices {
  grid-area: devices;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.preview-device-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0 var(--space-4);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.preview-device-btn .icon {
  font-size: 1.125rem;
}
.preview-device-btn[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--text-on-accent);
}
.preview-zoom {
  grid-area: zoom;
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: var(--space-3);
}
.preview-stage {
  grid-area: stage;
  position: relative;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.preview-stage img {
  -webkit-user-drag: none;
}
.preview-stage[data-zoomed] {
  cursor: grab;
  touch-action: none;
}
.preview-stage[data-dragging] {
  cursor: grabbing;
}
.preview-scale {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-50% + var(--pv-x, 0rem)) calc(-50% + var(--pv-y, 0rem));
  scale: var(--pv-scale, 0.5);
  transition: scale var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
}
.preview-stage[data-dragging] .preview-scale {
  transition: none;
}
.preview-download {
  background: var(--surface-alt);
  color: var(--text);
  transition:
    background var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .preview-download:hover {
    background: var(--line);
  }
}
.preview-download[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 0.0625rem solid var(--line);
}
.preview-foot-text {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.preview-foot-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3);
}
.pv-device {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
  color: var(--text);
}
.pv-device[data-device="desktop"] {
  width: 1280px;
  height: 800px;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
}
.pv-device[data-device="tablet"] {
  width: 820px;
  height: 1100px;
  border: 0.875rem solid var(--color-anthracite);
  border-radius: 2.125rem;
}
.pv-device[data-device="phone"] {
  width: 390px;
  height: 844px;
  border: 0.625rem solid var(--color-anthracite);
  border-radius: 2.75rem;
}
.pv-chrome {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface-alt);
}
.pv-bar {
  flex: 1;
  max-width: 48rem;
}
.pv-bar .hero-url-text strong {
  color: var(--pv-color, var(--text));
}
.pv-device:not([data-device="desktop"]) .pv-chrome {
  justify-content: center;
  padding-top: 1.125rem;
  border-bottom: 0;
  background: var(--surface);
}
.pv-device:not([data-device="desktop"]) .pv-bar {
  background: var(--surface-alt);
}
.pv-device:not([data-device="desktop"]) .pv-bar .hero-url-text {
  background: var(--surface);
}
.pv-device:not([data-device="desktop"]) .pv-bar .hero-url-dots {
  display: none;
}
.pv-device[data-device="phone"] .pv-bar .hero-url-extra {
  display: none;
}
.pv-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--surface);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.pv-frame[data-ready] {
  opacity: 1;
}
.preview-stage[data-zoomed] .pv-frame {
  pointer-events: none;
}
.preview-save {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.preview-reset {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.preview-reset[hidden] {
  display: none;
}
@media (max-width: 1179.98px) {
  .preview-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "devices"
      "zoom"
      "stage";
  }
  .preview-zoom {
    flex-direction: row;
    justify-self: center;
  }
}
@media (max-width: 899.98px) {
  .preview {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .preview-head {
    padding: var(--space-4);
  }
  .preview-body {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
  .preview-form {
    padding: var(--space-4);
    overflow: visible;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line);
  }
  .preview-side {
    padding: var(--space-4);
  }
  .preview-stage {
    flex: none;
    height: min(34rem, 70svh);
  }
  .preview-foot {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    text-align: center;
  }
  .preview-foot-actions {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  .preview-foot-actions .btn {
    flex: 1;
    justify-content: center;
    padding-inline: var(--space-3);
  }
}
@media (max-width: 639.98px) {
  .preview-title {
    font-size: var(--fs-lead);
  }
  .preview-devices {
    flex-wrap: nowrap;
    width: 100%;
  }
  .preview-device-btn {
    flex: 1;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 var(--space-2);
    font-size: var(--fs-xs);
  }
}
.preview-cta[hidden] {
  display: none;
}
}
@layer sections {
.about {
  --top-space: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: var(--space-7) clamp(var(--space-7), 8vw, var(--space-9));
  padding: var(--top-space) var(--page-margin) var(--space-7);
  background: var(--surface);
}
.about-title {
  font-size: var(--fs-h2);
  line-height: 1;
}
.about-title span {
  color: var(--color-red);
}
.about-title span:first-child {
  display: block;
}
.about-text {
  margin-top: var(--space-5);
  font-size: var(--fs-text);
  line-height: 1.75;
}
.about-swap {
  margin-top: var(--space-8);
}
.about-swap-label {
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
}
.about-swap-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
}
.about-swap-row + .about-swap-label {
  margin-top: var(--space-5);
}
.about-swap-avoid {
  color: var(--text-accent);
}
.about-swap-gain {
  color: var(--text-gain);
}
.about-swap-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: inherit;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
.about-swap-btn:active {
  scale: 0.94;
}
@media (hover: hover) {
  .about-swap-btn:hover {
    background: var(--line);
  }
}
.about-sign {
  position: relative;
  width: 1rem;
  height: 1rem;
}
.about-sign::before,
.about-sign-plus::after {
  content: "";
  position: absolute;
  inset: calc(50% - 0.09375rem) 0;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.about-sign-plus::after {
  rotate: 90deg;
}
.about-swap-texts {
  display: grid;
  min-width: 0;
}
.about-swap-text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 0.5rem;
  transition:
    opacity var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out),
    visibility 0s var(--duration-base);
}
.about-swap-text[data-active] {
  opacity: 1;
  visibility: visible;
  translate: 0;
  transition:
    opacity var(--duration-enter) var(--ease-out) var(--swap-delay, 0ms),
    translate var(--duration-enter) var(--ease-out) var(--swap-delay, 0ms),
    visibility 0s;
}
.about-swap-gain {
  --swap-delay: var(--duration-slide);
}
.about-cards {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}
.about-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.about-card h3 {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--text);
  transition: color var(--duration-base) var(--ease-out);
}
.about-card p {
  max-width: 21rem;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}
.about-card img {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  transition:
    translate var(--duration-slow) var(--ease-out),
    scale var(--duration-slow) var(--ease-out);
}
@media (hover: hover) {
  .about-card:hover h3 {
    color: var(--text-accent);
  }
  .about-card:hover img {
    translate: 0 -0.25rem;
    scale: 1.08;
  }
}
@media (max-width: 1179.98px) {
  .about {
    --top-space: calc(var(--header-offset) + var(--header-height) + var(--space-5));
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--space-8);
  }
  .about-title {
    font-size: var(--fs-h2-sm);
  }
  .about-text {
    max-width: 40rem;
    margin-top: var(--space-4);
    line-height: 1.6;
  }
  .about-swap {
    margin-top: var(--space-5);
  }
}
@media (min-width: 760px) and (max-width: 1179.98px) {
  .about-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .about-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--space-4);
  }
}
@media (max-width: 639.98px) {
  .about-card {
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .about-card img {
    width: 3.5rem;
    height: 3.5rem;
  }
  .about-swap-label {
    font-size: var(--fs-body);
  }
  .about-swap-row {
    font-size: var(--fs-small);
  }
}
@media (max-width: 389.98px) {
  .about-swap-row {
    font-size: var(--fs-btn-sm);
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .about {
    --top-space: calc(var(--header-offset) + var(--header-height) + var(--space-4));
    padding-bottom: var(--space-5);
  }
  .about-title {
    font-size: var(--fs-h3);
  }
  .about-text {
    margin-top: var(--space-3);
    font-size: var(--fs-small);
    line-height: 1.55;
  }
  .about-swap {
    margin-top: var(--space-5);
  }
  .about-swap-label,
  .about-swap-row {
    font-size: var(--fs-body);
  }
  .about-swap-row + .about-swap-label {
    margin-top: var(--space-3);
  }
  .about-cards {
    gap: var(--space-4);
  }
  .about-card {
    padding: var(--space-4) var(--space-5);
  }
}
}
@layer sections {
.guide {
  --guide-pad-top: clamp(var(--space-6), 6svh, var(--space-8));
  --deck-h: clamp(16.25rem, 52svh, 29.375rem);
  --peek: clamp(1rem, 2.4vw, 2.125rem);
  --step-gap: var(--space-2);
  display: flex;
  background: var(--surface);
}
.guide-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding:
    calc(var(--header-offset) + var(--header-height) + var(--guide-pad-top))
    var(--page-margin)
    clamp(var(--space-5), 5svh, var(--space-8));
}
.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: clamp(var(--space-4), 3svh, var(--space-6));
  border-bottom: 0.0625rem solid var(--line);
}
.guide-title {
  font-size: var(--fs-h2);
  color: var(--color-red);
}
.guide-demo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-height-sm);
  padding: 0 var(--space-4);
  font-size: var(--fs-small);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text-accent);
  font-weight: var(--fw-medium);
  transition: background-color var(--duration-base) var(--ease-out);
}
.guide-demo:hover {
  background: var(--line);
}
.guide-demo img {
  width: 1rem;
  height: auto;
}
.guide-body {
  display: grid;
  grid-template-columns: clamp(19rem, 24vw, 22rem) minmax(0, 1fr);
  column-gap: clamp(var(--space-7), 5vw, var(--space-8));
  align-items: start;
  margin-top: clamp(var(--space-6), 7svh, var(--space-8));
  touch-action: pan-y;
}
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-4), 4svh, var(--space-7));
  min-height: var(--deck-h);
  padding: 0;
  list-style: none;
}
.guide-step-num {
  display: block;
  width: auto;
  height: clamp(0.875rem, 1.45vw, 1.3125rem);
  margin-left: var(--space-7);
}
.guide-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--step-gap) 0 0;
  border-top: 0.0625rem solid var(--line);
  text-align: left;
  cursor: pointer;
}
.guide-step-title {
  font-family: var(--font-title);
  font-size: var(--fs-step-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-title);
  color: var(--text-muted);
  transition: color var(--duration-slow) var(--ease-out);
}
.guide-step-arrow {
  display: grid;
  flex-shrink: 0;
}
.guide-step-arrow img {
  grid-area: 1 / 1;
  width: clamp(1.25rem, 2vw, 1.875rem);
  height: auto;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.guide-step-arrow-on {
  opacity: 0;
}
.guide-step-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--duration-enter) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-out),
    visibility 0s linear var(--duration-enter);
}
.guide-step-inner {
  min-height: 0;
  overflow: hidden;
}
.guide-step-body p {
  margin-top: var(--step-gap);
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--text);
}
.guide-step[data-open] .guide-step-title {
  color: var(--color-red);
}
.guide-step[data-open] .guide-step-arrow img:not(.guide-step-arrow-on) {
  opacity: 0;
}
.guide-step[data-open] .guide-step-arrow-on {
  opacity: 1;
}
.guide-step[data-open] .guide-step-body {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--duration-enter) var(--ease-in-out),
    opacity var(--duration-slow) var(--ease-out) calc(var(--duration-enter) / 3),
    visibility 0s;
}
@media (min-width: 1180px) {
  .guide-body {
    grid-template-columns: clamp(25.5rem, 31vw, 29rem) minmax(0, 1fr);
  }
  .guide-step-title {
    font-size: clamp(1.375rem, 0.8rem + 1.4vw, 2rem);
    white-space: nowrap;
  }
  .guide-step-body p {
    min-height: calc(3 * 1.55em);
  }
}
@media (hover: hover) {
  .guide-step-head:hover .guide-step-title {
    color: var(--text-accent);
  }
}
.guide-deck {
  position: relative;
  height: var(--deck-h);
}
.guide-card {
  position: absolute;
  inset: 0 calc(var(--peek) * 2) 0 0;
  border-radius: var(--radius-lg);
  transform-origin: right center;
  transition:
    translate var(--duration-enter) var(--ease-in-out),
    scale var(--duration-enter) var(--ease-in-out),
    background-color var(--duration-enter) var(--ease-in-out);
}
.guide-card-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.guide-card[data-pos="0"] {
  z-index: 3;
  background: var(--accent-fill);
}
.guide-card[data-pos="1"] {
  z-index: 2;
  translate: var(--peek) 0;
  scale: 0.81;
  background: var(--line);
}
.guide-card[data-pos="2"] {
  z-index: 1;
  translate: calc(var(--peek) * 2) 0;
  scale: 0.66;
  background: var(--surface-alt);
}
.guide-dots {
  display: none;
}
@media (max-width: 1179.98px) {
  .guide {
    --guide-pad-top: var(--space-6);
    --deck-h: clamp(12.5rem, 46vw, 22.5rem);
  }
  .guide-inner {
    justify-content: flex-start;
    padding-bottom: var(--space-8);
  }
  .guide-head {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  .guide-title {
    font-size: var(--fs-h3-sm);
  }
  .guide-demo {
    gap: var(--space-2);
    min-height: var(--btn-height-xs);
    padding: 0 var(--space-4);
    font-size: var(--fs-xs);
  }
  .guide-demo img {
    width: 0.875rem;
  }
  .guide-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
    margin-top: var(--space-5);
  }
  .guide-steps {
    gap: var(--space-5);
    min-height: 0;
  }
  .guide-step-body p {
    font-size: var(--fs-small);
    letter-spacing: 0.02em;
  }
  .guide-dots {
    --dot-w: 0.5rem;
    --dot-on: 1.5rem;
    --dot-gap: 0.5rem;
    position: relative;
    width: calc(var(--dot-on) + 2 * var(--dot-w) + 2 * var(--dot-gap));
    height: var(--dot-w);
    margin-top: var(--space-5);
    margin-inline: auto;
  }
  .guide-dot {
    position: absolute;
    top: 0;
    left: var(--dot-left);
    width: var(--dot-w);
    height: var(--dot-w);
    border-radius: var(--radius-pill);
    background: var(--accent-fill);
    opacity: 0.35;
    transition:
      left var(--duration-slow) var(--ease-out),
      width var(--duration-slow) var(--ease-out);
  }
  .guide-dot:nth-child(1) { --dot-left: 0; width: var(--dot-on); opacity: 1; }
  .guide-dot:nth-child(2) { --dot-left: calc(var(--dot-on) + var(--dot-gap)); }
  .guide-dot:nth-child(3) { --dot-left: calc(var(--dot-on) + 2 * var(--dot-gap) + var(--dot-w)); }
  .guide[data-active="1"] .guide-dot:nth-child(1) { width: var(--dot-w); opacity: 0.35; }
  .guide[data-active="1"] .guide-dot:nth-child(2) { --dot-left: calc(var(--dot-w) + var(--dot-gap)); width: var(--dot-on); opacity: 1; }
  .guide[data-active="1"] .guide-dot:nth-child(3) { --dot-left: calc(var(--dot-w) + 2 * var(--dot-gap) + var(--dot-on)); }
  .guide[data-active="2"] .guide-dot:nth-child(1) { width: var(--dot-w); opacity: 0.35; }
  .guide[data-active="2"] .guide-dot:nth-child(2) { --dot-left: calc(var(--dot-w) + var(--dot-gap)); width: var(--dot-w); opacity: 0.35; }
  .guide[data-active="2"] .guide-dot:nth-child(3) { --dot-left: calc(2 * (var(--dot-w) + var(--dot-gap))); width: var(--dot-on); opacity: 1; }
}
@media (max-width: 639.98px) {
  .guide {
    --deck-h: clamp(15rem, 68vw, 20rem);
    --peek: 0.75rem;
  }
  .guide-body {
    row-gap: var(--space-4);
  }
  .guide-dots {
    margin-top: var(--space-4);
  }
  .guide-steps {
    display: grid;
  }
  .guide-step {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
    transition:
      opacity var(--duration-slow) var(--ease-out),
      translate var(--duration-slow) var(--ease-out),
      visibility 0s var(--duration-slow);
  }
  .guide-step[data-open] {
    opacity: 1;
    visibility: visible;
    translate: 0;
    transition:
      opacity var(--duration-enter) var(--ease-out) var(--duration-base),
      translate var(--duration-enter) var(--ease-out) var(--duration-base),
      visibility 0s;
  }
  .guide-step .guide-step-body {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: inherit;
    transition: none;
  }
  .guide-card {
    inset: 0 0 calc(var(--peek) * 2);
    transform-origin: center bottom;
  }
  .guide-card[data-pos="1"] {
    translate: 0 var(--peek);
    scale: 0.88;
  }
  .guide-card[data-pos="2"] {
    translate: 0 calc(var(--peek) * 2);
    scale: 0.76;
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .guide {
    --guide-pad-top: var(--space-4);
    --deck-h: clamp(15rem, 50svh, 20.625rem);
  }
  .guide-inner {
    padding-bottom: var(--space-5);
  }
  .guide-head {
    padding-bottom: var(--space-3);
  }
  .guide-title {
    font-size: var(--fs-h3);
  }
  .guide-body {
    margin-top: var(--space-5);
  }
  .guide-steps {
    gap: var(--space-3);
  }
  .guide-step-body p {
    font-size: var(--fs-text);
  }
}
}
@layer sections {
.schools {
  --schools-gap-top: 2.5rem;
  --banner-pad: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-5), 3svh, var(--space-8));
  overflow-x: clip;
  padding:
    calc(var(--header-offset) + var(--header-height) + var(--schools-gap-top))
    var(--page-margin)
    clamp(var(--space-4), 3svh, var(--space-8));
  background: var(--surface);
}
.icon-search { --icon: url("/assets/icons/search-icon.svg"); }
.icon-filter { --icon: url("/assets/icons/filter-icon.svg"); }
.icon-sort { --icon: url("/assets/icons/sort-icon.svg"); }
.icon-chevron-left { --icon: url("/assets/icons/chevron-left-icon.svg"); }
.icon-chevron-right { --icon: url("/assets/icons/chevron-right-icon.svg"); }
.icon-arrow-right { --icon: url("/assets/icons/arrow-right-icon.svg"); }
.icon-school { --icon: url("/assets/icons/school-icon.svg"); }
.schools-filter,
.schools-sort,
.schools-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}
.schools-filter .icon,
.schools-sort .icon,
.schools-arrow .icon {
  display: block;
}
.schools-search {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  padding: var(--banner-pad);
  border-radius: clamp(1.25rem, 2vw, 1.625rem);
  background: var(--accent-fill);
}
.schools-search-title {
  font-size: min(var(--fs-portal-title), calc((100vw - 2 * var(--page-margin) - 2 * var(--banner-pad)) / 13.5));
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--text-on-accent);
}
.schools-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3.125rem;
  padding: 0 var(--space-1) 0 var(--space-4);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-muted);
}
.schools-search-field > .icon {
  font-size: 1rem;
}
.schools-search-input {
  flex: 1;
  min-width: 0;
  height: 3.125rem;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.schools-search-input::-webkit-search-decoration,
.schools-search-input::-webkit-search-cancel-button,
.schools-search-input::-webkit-search-results-button,
.schools-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.schools-search-input::placeholder {
  color: var(--text-muted);
}
.schools-filter {
  width: 2.375rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 1.25rem;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.schools-filter[data-active] {
  background: var(--btn-fill);
  color: var(--text-on-accent);
}
.schools-filter-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 13.75rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.schools-filter-menu[hidden] {
  display: none;
}
.schools-filter-title {
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.schools-filter-option {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--fs-small);
  color: var(--text);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.schools-filter-option:hover {
  background: var(--surface-alt);
}
.schools-filter-option[aria-pressed="true"] {
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.schools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.schools-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.schools-label {
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  color: var(--color-red);
}
.schools-sort {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 1.125rem;
  transition: background-color var(--duration-base) var(--ease-out);
}
.schools-sort:hover {
  background: var(--line);
}
.schools-sort .icon {
  transition: scale var(--duration-slow) var(--ease-out);
}
.schools-sort[data-dir="desc"] .icon {
  scale: 1 -1;
}
.schools-arrows {
  display: flex;
  gap: var(--space-3);
}
.schools-arrow {
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--btn-fill);
  color: var(--text-on-accent);
  font-size: 1.25rem;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.schools-arrow:disabled {
  background: var(--surface-alt);
  color: var(--text-accent);
  cursor: default;
}
.schools-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}
.school-card {
  --pad: 0.5625rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--pad);
  border: 0.07813rem solid var(--line);
  border-radius: calc(var(--radius-sm) + var(--pad));
  background: var(--surface);
  cursor: pointer;
  transition:
    scale var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.school-card[hidden] {
  display: none;
}
@media (hover: hover) {
  .school-card:hover {
    scale: 1.02;
    box-shadow: var(--shadow-card);
  }
}
.school-card:active {
  scale: 0.97;
}
.school-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.school-logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--color-white);
  font-size: 1.625rem;
}
.school-logo[data-photo] {
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  background: var(--surface);
}
.school-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.school-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.school-name {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-title);
  font-size: var(--fs-btn-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color var(--duration-base) var(--ease-out);
}
.school-sub {
  overflow: hidden;
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}
.school-link {
  display: grid;
  grid-template-columns: 1.375rem 1fr 1.375rem;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  min-height: 1.75rem;
  padding: 0 0.1875rem;
  text-align: center;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.school-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.school-link-text {
  grid-column: 2;
}
.school-link-arrow {
  grid-column: 3;
  display: grid;
}
.school-link-arrow img {
  grid-area: 1 / 1;
  width: 1.375rem;
  height: 1.375rem;
  transition: opacity var(--duration-base) var(--ease-out);
}
.school-link-arrow-on {
  opacity: 0;
}
.school-link:focus-visible {
  background: var(--btn-fill);
  color: var(--text-on-accent);
}
.school-link:focus-visible .school-link-arrow-on {
  opacity: 1;
}
@media (hover: hover) {
  .school-card:hover .school-link {
    background: var(--btn-fill);
    color: var(--text-on-accent);
  }
  .school-card:hover .school-link-arrow-on {
    opacity: 1;
  }
  .school-card:hover .school-name {
    color: var(--text-accent);
  }
}
.schools-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--text-muted);
}
.schools-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--line);
}
.schools-count {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.schools-count-shown {
  color: var(--text-accent);
}
.schools-pages {
  display: flex;
  gap: var(--space-2);
}
.schools-page {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.schools-page[aria-current="page"] {
  background: var(--btn-fill);
  color: var(--text-on-accent);
}
@media (max-width: 1179.98px) {
  .schools {
    --schools-gap-top: 1.25rem;
  }
  .schools-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 899.98px) {
  .schools-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}
@media (max-width: 539.98px) {
  .schools-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1180px) and (max-height: 780px) {
  .schools {
    gap: clamp(var(--space-4), 2.6svh, var(--space-5));
    padding-bottom: var(--space-4);
  }
  .schools-list {
    gap: var(--space-3);
  }
  .schools-foot {
    padding-top: var(--space-2);
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .schools {
    --schools-gap-top: var(--space-5);
    gap: var(--space-3);
  }
}
@media (max-width: 639.98px) {
  .schools {
    --banner-pad: 1.25rem;
  }
}
}
@layer sections {
.join {
  --field-h: 3.375rem;
  --field-gap: clamp(var(--space-4), 3svh, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  grid-template-areas:
    "head aside"
    "form aside";
  align-content: center;
  column-gap: clamp(var(--space-7), 5vw, 4.75rem);
  row-gap: clamp(var(--space-5), 3.5svh, var(--space-6));
  padding:
    calc(var(--header-offset) + var(--header-height) + 2.5rem)
    var(--page-margin)
    clamp(var(--space-5), 4svh, var(--space-7));
  background: var(--surface);
}
.join-head {
  grid-area: head;
}
.join-title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  color: var(--color-red);
}
.join-subtitle {
  margin-top: var(--space-1);
  font-family: var(--font-title);
  font-size: var(--fs-banner-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
  color: var(--text);
}
.join-lead {
  max-width: 36rem;
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--text-muted);
}
@media (min-width: 1180px) {
  .join-lead {
    max-width: none;
    font-size: clamp(0.75rem, 1vw, 1.125rem);
    white-space: nowrap;
  }
}
@media (min-width: 1180px) and (max-width: 1365.98px) {
  .join {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
  }
}
.join-form {
  grid-area: form;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
}
.join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--field-gap) 1.375rem;
}
.join-row-full {
  grid-template-columns: minmax(0, 1fr);
}
.join-row-school {
  grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
}
.join-aside {
  grid-area: aside;
  align-self: end;
}
.join-aside-title {
  font-size: var(--fs-h3-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.join-list {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-3), 2.2svh, var(--space-4));
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  border: 0.09375rem solid var(--surface-alt);
  border-radius: var(--radius-md);
  list-style: none;
}
.join-list li {
  position: relative;
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--text-muted);
}
.join-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-4));
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent-fill);
  translate: 0 -50%;
}
@media (min-width: 1180px) and (max-height: 780px) {
  .join {
    --field-h: 3rem;
    --field-gap: var(--space-4);
    row-gap: var(--space-5);
  }
  .join-list {
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-block: var(--space-4);
  }
  .join-list li {
    font-size: var(--fs-small);
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .join {
    --field-h: 2.625rem;
    --field-gap: var(--space-3);
    row-gap: var(--space-4);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-5));
    padding-bottom: var(--space-4);
  }
  .join-title {
    font-size: var(--fs-h3-sm);
  }
  .join-subtitle {
    font-size: var(--fs-kicker);
  }
  .join-lead {
    margin-top: var(--space-1);
    font-size: var(--fs-small);
  }
  .form-submit {
    min-height: 2.75rem;
  }
  .join-aside-title {
    font-size: var(--fs-kicker);
  }
  .join-list {
    gap: var(--space-2);
    padding-block: var(--space-3);
  }
  .join-list li {
    font-size: var(--fs-xs);
  }
}
@media (max-width: 1179.98px) {
  .join {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "form"
      "aside";
    row-gap: var(--space-6);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  }
}
@media (max-width: 639.98px) {
  .join {
    --field-h: 3.125rem;
    --field-gap: var(--space-3);
  }
  .join-title {
    font-size: var(--fs-h3-sm);
  }
  .join-subtitle {
    font-size: var(--fs-kicker);
  }
  .join-lead {
    font-size: var(--fs-small);
  }
  .join-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .join-aside-title {
    font-size: var(--fs-kicker);
  }
  .join-list li {
    font-size: var(--fs-small);
  }
}
}
@layer sections {
.icon-copy { --icon: url("/assets/icons/copy-icon.svg"); }
.referral {
  --field-h: 3rem;
  --field-gap: var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  grid-template-areas:
    "head box"
    "collab collab";
  align-content: center;
  align-items: stretch;
  column-gap: clamp(var(--space-7), 5vw, 4.75rem);
  row-gap: 1.5625rem;
  padding:
    calc(var(--header-offset) + var(--header-height) + 2.5rem)
    var(--page-margin)
    clamp(var(--space-5), 4svh, var(--space-7));
  background: var(--surface);
}
.referral-head {
  grid-area: head;
}
.referral-title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  color: var(--color-red);
}
.referral-subtitle {
  margin-top: var(--space-1);
  font-family: var(--font-title);
  font-size: var(--fs-banner-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
  color: var(--text);
}
.referral-text {
  max-width: 36rem;
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}
.referral-text p + p {
  margin-top: 0.9em;
}
.referral-collab {
  grid-area: collab;
  width: 100%;
  padding-top: 1.5625rem;
  border-top: 0.0625rem solid var(--line);
  text-align: center;
}
.referral-collab-title {
  font-size: var(--fs-h3-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
}
.referral-collab-text {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}
@media (min-width: 1180px) {
  .referral-collab-text {
    white-space: nowrap;
  }
}
.referral-collab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.referral-collab-btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.referral-collab-copy {
  position: relative;
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  transition:
    color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .referral-collab-copy {
    display: inline-grid;
  }
}
.referral-collab-copy:hover,
.referral-collab-copy:focus-visible,
.referral-collab-copy[data-copied] {
  color: var(--text);
}
.referral-collab-copy:active {
  transform: scale(0.88);
}
.referral-collab-copy .icon {
  font-size: 1.125rem;
}
.referral-tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  padding: 0.3125rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--text-on-accent);
  white-space: nowrap;
  opacity: 0;
  translate: -50% 0.25rem;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);
}
.referral-collab-copy:hover .referral-tip,
.referral-collab-copy:focus-visible .referral-tip {
  opacity: 1;
  translate: -50% 0;
}
.referral-box {
  grid-area: box;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 0.09375rem solid var(--surface-alt);
  border-radius: var(--radius-md);
}
.referral-box-title {
  font-size: var(--fs-h3-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.referral-note {
  margin-top: var(--space-4);
  max-width: 36rem;
  font-size: var(--fs-text);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--text);
}
.referral-signup {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--field-gap);
  margin-top: var(--space-4);
}
.referral-signup .form-submit {
  min-height: 2.5rem;
  margin-top: 0;
  border-radius: 0.5rem;
  font-size: var(--fs-small);
}
@media (min-width: 1180px) and (max-height: 780px) {
  .referral {
    --field-h: 2.875rem;
  }
  .referral-text {
    font-size: var(--fs-text);
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .referral {
    --field-h: 2.625rem;
    --field-gap: var(--space-3);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-5));
    padding-bottom: var(--space-4);
  }
  .referral-title {
    font-size: var(--fs-h3-sm);
  }
  .referral-subtitle {
    font-size: var(--fs-kicker);
  }
  .referral-text {
    margin-top: var(--space-2);
    font-size: var(--fs-small);
  }
  .referral-signup {
    margin-top: var(--space-3);
  }
  .form-submit {
    min-height: 2.75rem;
  }
}
@media (max-width: 1179.98px) {
  .referral {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "box"
      "collab";
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  }
}
@media (max-width: 639.98px) {
  .referral {
    --field-h: 3.125rem;
    --field-gap: var(--space-3);
  }
  .referral-title {
    font-size: var(--fs-h3-sm);
  }
  .referral-subtitle {
    font-size: var(--fs-kicker);
  }
  .referral-text {
    font-size: var(--fs-small);
  }
}
.referral-card {
  width: min(100%, 34rem);
}
.notice-card.terms-card {
  width: min(100%, 62.5rem);
  margin-block: auto;
}
.terms-text {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 0.0625rem solid var(--line);
}
.terms-article {
  display: grid;
  gap: var(--space-2);
}
.terms-heading {
  font-size: var(--fs-text);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--text);
}
.terms-num {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.terms-article p,
.terms-article li {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text);
}
.terms-article h3 {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.terms-article ul {
  display: grid;
  gap: var(--space-1);
  padding-left: 1.25rem;
}
.terms-article a {
  color: var(--text-accent);
}
.terms-accept {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 0.0625rem solid var(--line);
}
.referral-accept {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.referral-accept .btn {
  justify-self: start;
}
.referral-meta {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.referral-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}
.referral-check input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--color-red);
}
@media (max-width: 479.98px) {
  .referral-accept .btn {
    width: 100%;
    justify-self: stretch;
  }
}
.referral-methods {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  border: 0;
}
.referral-payout-fields {
  display: grid;
  gap: var(--space-3);
}
.referral-payout-fields[hidden] {
  display: none;
}
}
@layer sections {
.contact {
  --field-h: 3.125rem;
  --field-gap: clamp(var(--space-3), 2.4svh, 1.25rem);
  --stage-gap: clamp(var(--space-3), 2.5svh, var(--space-5));
  --reveal: 600ms var(--ease-in-out);
  --card-pad: clamp(var(--space-3), 1.5vw, 1.25rem);
  --card-radius: clamp(1.75rem, 3vw, 2.5rem);
  --inner-radius: calc(var(--card-radius) - var(--card-pad));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(14rem, 16.5rem);
  grid-template-areas:
    "head head head"
    "card handle socials";
  align-content: center;
  column-gap: clamp(var(--space-5), 3vw, var(--space-7));
  row-gap: clamp(var(--space-5), 4svh, var(--space-7));
  padding:
    calc(var(--header-offset) + var(--header-height) + clamp(var(--space-5), 3.5svh, 2.5rem))
    var(--page-margin)
    clamp(var(--space-5), 4svh, var(--space-7));
  background: var(--surface);
}
.contact-head {
  grid-area: head;
}
.contact-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  color: var(--color-red);
}
.contact-subtitle {
  margin-top: var(--space-2);
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--text);
}
.contact-card {
  grid-area: card;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--surface-alt);
}
.contact-stage {
  position: relative;
  height: var(--stage-h, auto);
  overflow: hidden;
  overflow: clip;
  border-radius: var(--inner-radius);
}
.contact-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) clamp(var(--space-5), 3vw, var(--space-7));
  padding: clamp(var(--space-4), 2.6svh, 1.75rem) var(--space-5);
  border-radius: var(--inner-radius);
  background: var(--surface);
  transition:
    opacity var(--reveal),
    translate var(--reveal);
}
.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  white-space: nowrap;
}
.contact-item img {
  flex-shrink: 0;
  height: 1.75rem;
  width: auto;
}
.contact-item-text {
  display: flex;
  flex-direction: column;
}
.contact-item-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.contact-item-value {
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--text-muted);
  transition: color var(--duration-base) var(--ease-out);
}
.contact-item:hover .contact-item-value {
  color: var(--text-accent);
}
.contact-panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: clamp(var(--space-4), 2.6svh, var(--space-5)) clamp(var(--space-4), 1.6vw, 1.375rem);
  border-radius: var(--inner-radius);
  background: var(--surface);
  translate: 0 calc(var(--info-h, 0rem) + var(--stage-gap));
  transition: translate var(--reveal);
}
.contact-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.contact-panel-title {
  font-size: var(--fs-banner-sm);
  font-weight: var(--fw-bold);
  color: var(--color-red);
}
.contact-toggle {
  flex-shrink: 0;
  width: 2.625rem;
  display: grid;
  place-items: center;
  height: 2.625rem;
  border-radius: 50%;
  transition:
    rotate var(--reveal),
    translate 400ms var(--ease-in-out),
    box-shadow 400ms var(--ease-in-out),
    scale 250ms var(--ease-in-out);
}
@media (hover: hover) {
  .contact-toggle:hover {
    translate: 0 -0.1875rem;
    box-shadow: 0 0.375rem 0.875rem rgb(28 31 36 / 0.14);
  }
}
.contact-toggle:active {
  translate: 0 0;
  scale: 0.9;
  box-shadow: 0 0.125rem 0.375rem rgb(28 31 36 / 0.12);
}
.contact-panel-text {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  margin-top: var(--space-4);
}
.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--field-gap) 1.25rem;
}
.contact-mask {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(3.75rem, 12svh, 6.875rem);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--surface) 85%);
  pointer-events: none;
  transition: opacity var(--reveal);
}
.contact-card[data-open] .contact-panel {
  translate: 0 0;
}
.contact-card[data-open] .contact-info {
  opacity: 0;
  translate: 0 -0.75rem;
}
.contact-card[data-open] .contact-mask {
  opacity: 0;
}
.contact-card[data-open] .contact-toggle {
  rotate: 180deg;
}
.contact-handle {
  grid-area: handle;
  align-self: center;
  font-family: var(--font-title);
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.875rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-title);
  color: color-mix(in srgb, var(--color-bg-alt) 70%, var(--color-border));
  writing-mode: vertical-rl;
  rotate: 180deg;
  user-select: none;
}
@media (hover: hover) and (min-width: 1180px) {
  .contact-handle {
    position: relative;
  }
  .contact-handle::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--color-red);
    opacity: 0;
    -webkit-mask-image: radial-gradient(circle 4.375rem at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
    mask-image: radial-gradient(circle 4.375rem at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
    pointer-events: none;
    transition: opacity 300ms var(--ease-out);
  }
  .contact-handle:hover::after {
    opacity: 1;
  }
}
.contact-socials {
  grid-area: socials;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-pad);
  border: 0.09375rem solid var(--surface-alt);
  border-radius: var(--card-radius);
  list-style: none;
}
.contact-socials > li {
  display: flex;
}
.contact-social {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--inner-radius);
  background: var(--surface);
  box-shadow: 0 0.0625rem 0.125rem rgb(28 31 36 / 0.04), 0 0.5rem 1.5rem rgb(28 31 36 / 0.06);
  transition: scale 180ms var(--ease-out);
}
.contact-social-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.contact-social-brand img:first-child {
  width: 2rem;
  height: auto;
}
.contact-social-wordmark {
  width: auto;
  height: 1.4375rem;
}
.contact-social-brand.contact-social-brand-single {
  --h: 2rem;
  gap: 0;
}
.tiktok-icon,
.tiktok-text {
  flex-shrink: 0;
  height: var(--h);
  background: url("/assets/icons/new-icons/logo_tiktok.svg") no-repeat;
  background-size: auto 100%;
}
.tiktok-icon {
  width: calc(var(--h) * 33 / 35);
  background-position: left center;
}
.tiktok-text {
  width: calc(var(--h) * 86 / 35);
  background-position: right center;
}
.contact-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.375rem;
  width: 100%;
  min-height: 2rem;
  white-space: nowrap;
  border: 0.0625rem solid var(--btn-fill);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-accent);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
.contact-follow .icon {
  font-size: 0.75rem;
}
@media (hover: hover) {
  .contact-social:hover .contact-follow {
    background: var(--btn-fill);
    color: var(--text-on-accent);
  }
}
.contact-social:focus-visible .contact-follow {
  background: var(--btn-fill);
  color: var(--text-on-accent);
}
.contact-social:active {
  scale: 0.96;
}
@media (min-width: 1180px) {
  .contact-socials {
    gap: var(--space-3);
  }
  .contact-social {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }
  .contact-social-brand img:first-child {
    width: 1.75rem;
  }
  .contact-social-brand.contact-social-brand-single {
    --h: 1.75rem;
  }
  .contact-social-wordmark {
    height: 1.25rem;
  }
}
@media (min-width: 1180px) and (max-height: 780px) {
  .contact {
    --field-h: 2.75rem;
    --field-gap: var(--space-3);
    row-gap: var(--space-5);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-5));
  }
  .contact-title {
    font-size: var(--fs-h3);
  }
  .contact .field-textarea {
    min-height: 5.5rem;
  }
  .contact-social {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .contact {
    --field-h: 2.5rem;
    row-gap: var(--space-3);
    padding: calc(var(--header-offset) + var(--header-height) + var(--space-3)) var(--page-margin) var(--space-4);
  }
  .contact-title {
    font-size: var(--fs-h3-sm);
  }
  .contact-subtitle {
    font-size: var(--fs-small);
  }
  .contact-panel-title {
    font-size: var(--fs-kicker);
  }
  .contact-panel-text {
    font-size: var(--fs-xs);
  }
  .contact-form {
    margin-top: var(--space-3);
  }
  .contact .field-textarea {
    min-height: 4.5rem;
  }
  .contact .form-submit {
    min-height: 2.5rem;
  }
  .contact {
    --stage-gap: var(--space-2);
    --field-gap: 0.625rem;
  }
  .contact {
    --card-pad: var(--space-2);
    --card-radius: 1.5rem;
  }
  .contact-info {
    padding-block: var(--space-3);
  }
  .contact-panel {
    padding-block: var(--space-3);
  }
  .contact .field-textarea {
    min-height: 3.75rem;
  }
  .contact-social {
    padding: var(--space-2) var(--space-3);
  }
}
@media (max-width: 1179.98px) {
  .contact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "card"
      "handle"
      "socials";
    row-gap: var(--space-6);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  }
  .contact-handle {
    justify-self: center;
    margin-block: calc(-1 * var(--space-3));
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1;
    writing-mode: horizontal-tb;
    rotate: none;
  }
  .contact-socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 780px) and (max-width: 1179.98px) {
  .contact-socials > li:nth-child(4) {
    grid-column: 2;
  }
}
@media (max-width: 779.98px) {
  .contact-socials {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .contact-social {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
  }
  .contact-social-wordmark {
    height: 1.125rem;
  }
  .contact-social {
    gap: 0.25rem;
  }
  .contact-social-brand {
    --brand-h: 1.625rem;
    flex-wrap: wrap;
    align-content: flex-start;
    min-width: 0;
    height: var(--brand-h);
    overflow: hidden;
  }
  .contact-social-brand img:first-child {
    width: var(--brand-h);
  }
  .contact-social-brand.contact-social-brand-single {
    --h: var(--brand-h);
  }
  .contact-follow {
    width: auto;
    padding: 0 var(--space-4);
  }
}
@media (max-width: 639.98px) {
  .contact {
    --field-h: 3rem;
    --field-gap: var(--space-3);
  }
  .contact-title {
    font-size: var(--fs-h3-sm);
  }
  .contact-subtitle {
    font-size: var(--fs-small);
  }
  .contact-info {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }
  .contact-item img {
    height: 1.5rem;
  }
  .contact-item-value {
    font-size: var(--fs-small);
  }
  .contact-panel-title {
    font-size: var(--fs-kicker);
  }
  .contact-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 389.98px) {
  .contact-social {
    padding-inline: var(--space-3);
  }
  .contact-social-brand {
    --brand-h: 1.375rem;
    gap: var(--space-2);
  }
  .contact-social-wordmark {
    height: 0.9375rem;
  }
  .contact-follow {
    padding: 0 var(--space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact {
    --reveal: 1ms linear;
  }
}
.contact-socials[data-compact] .contact-social-wordmark,
.contact-socials[data-compact] .tiktok-text {
  display: none;
}
}
@layer sections {
.help {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 6svh, 3.75rem);
  padding:
    calc(var(--header-offset) + var(--header-height) + 2.5rem)
    var(--page-margin)
    clamp(var(--space-5), 4svh, var(--space-7));
  background: var(--surface);
}
.help-banner {
  position: relative;
  isolation: isolate;
  padding: 1.875rem;
  border-radius: clamp(1.25rem, 2vw, 1.625rem);
  background: var(--accent-fill);
  color: var(--text-on-accent);
}
.help-title {
  line-height: 1.75rem;
  font-size: var(--fs-portal-title);
  text-transform: uppercase;
}
.help-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.9375rem;
  height: 3.125rem;
  padding: 0 var(--space-4);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-muted);
}
.help-search .icon {
  font-size: 1rem;
}
.help-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  outline: none;
  appearance: none;
}
.help-search-input::placeholder {
  color: var(--text-muted);
}
.help-search-input::-webkit-search-decoration,
.help-search-input::-webkit-search-cancel-button {
  appearance: none;
}
.help-body {
  display: grid;
  grid-template-columns: clamp(11.25rem, 16vw, 14.0625rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(var(--space-6), 3.7vw, 3.3125rem);
}
.help-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 5.5svh, 3.5rem);
}
.help-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: clamp(6rem, 16svh, 7.8125rem);
  padding: var(--space-4);
  border-radius: 1.5rem 5rem 1.5rem 1.5rem;
  background: var(--surface-alt);
  color: var(--text-muted);
  text-align: center;
  transition:
    background-color 350ms var(--ease-in-out),
    color 350ms var(--ease-in-out),
    box-shadow 350ms var(--ease-in-out),
    translate 350ms var(--ease-in-out),
    scale 200ms var(--ease-out);
}
.help-card-icon {
  margin-bottom: var(--space-1);
  font-size: 1.5rem;
}
.help-card-title {
  font-family: var(--font-title);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.help-card-sub {
  font-size: var(--fs-xs);
}
.help-card[aria-selected="true"] {
  background: var(--accent-fill);
  color: var(--text-on-accent);
}
@media (hover: hover) {
  .help-card[aria-selected="false"]:hover {
    background: color-mix(in srgb, var(--color-bg-alt) 70%, var(--color-border));
    color: var(--text);
    translate: 0 -0.1875rem;
  }
}
.help-card:active {
  scale: 0.97;
}
.help-content {
  min-width: 0;
}
.help-heading {
  font-size: var(--fs-banner-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.help-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.help-audiences {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.help-cat-row {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.help-cat-row::-webkit-scrollbar {
  display: none;
}
.help-audience {
  flex-shrink: 0;
  min-height: 2.125rem;
  padding: 0 var(--space-4);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: var(--text-muted);
  transition:
    background-color 350ms var(--ease-in-out),
    border-color 350ms var(--ease-in-out),
    color 350ms var(--ease-in-out),
    scale 200ms var(--ease-out);
}
.help-audience[aria-pressed="true"] {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--text-on-accent);
}
@media (hover: hover) {
  .help-audience[aria-pressed="false"]:hover {
    border-color: var(--text-muted);
    color: var(--text);
  }
}
.help-audience:active {
  scale: 0.96;
}
.help-cats {
  position: relative;
  display: flex;
  gap: clamp(var(--space-3), 1.4vw, 1.25rem);
  width: max-content;
  animation: help-slide 400ms var(--ease-out) both;
}
.help-cats[hidden] {
  display: none;
}
.help-tab {
  flex-shrink: 0;
  padding: 0.375rem 0.25rem 0.625rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: var(--text-muted);
  transition: color var(--duration-base) var(--ease-out);
}
.help-tab:hover {
  color: var(--text);
}
.help-tab[aria-selected="true"] {
  color: var(--text-accent);
}
.help-tabs-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--bar-w, 0);
  height: 0.125rem;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  translate: var(--bar-x, 0) 0;
  transition:
    translate 450ms var(--ease-in-out),
    width 450ms var(--ease-in-out);
}
.help-list,
.help-results-list {
  margin-top: clamp(var(--space-4), 2.5svh, var(--space-5));
  padding: 0;
  border-top: 0.0625rem solid var(--line);
  list-style: none;
}
.help-item {
  border-bottom: 0.0625rem solid var(--line);
}
.help-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: clamp(var(--space-4), 2.6svh, 1.375rem) var(--space-1);
  text-align: left;
}
.help-question-text {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.help-toggle {
  position: relative;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  transition: scale 300ms var(--ease-out);
}
@media (hover: hover) {
  .help-question:hover .help-toggle {
    scale: 1.15;
  }
  .help-question:hover .help-line {
    background: var(--color-red-deep);
  }
}
.help-line {
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: calc(100% - 0.5rem);
  height: 0.15625rem;
  border-radius: 0.125rem;
  background: var(--accent-fill);
  transform: translateY(-50%);
  transition:
    transform 0.7s cubic-bezier(0, 1, 0.33, 1.2),
    background 0.4s;
}
.help-line-indicator {
  transform: translateY(-50%) rotate(90deg);
}
.help-item[data-open] .help-line-indicator {
  transform: translateY(-50%);
}
.help-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 450ms var(--ease-in-out),
    opacity 300ms var(--ease-in-out);
}
.help-item[data-open] .help-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 450ms var(--ease-in-out),
    opacity 400ms var(--ease-in-out) 100ms;
}
.help-answer-inner {
  min-height: 0;
  overflow: hidden;
}
.help-answer-inner > * {
  max-width: 58rem;
  padding: 0 var(--space-1) clamp(var(--space-4), 2.6svh, 1.375rem);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.help-link {
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.1875rem;
  transition: text-decoration-color var(--duration-base) var(--ease-out);
}
.help-link:hover {
  text-decoration-color: currentColor;
}
.help-steps {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  counter-reset: step;
}
.help-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  counter-increment: step;
}
.help-steps li::before {
  content: counter(step);
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--surface-alt);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
}
.help-result {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  padding: var(--space-4) var(--space-1);
  border-bottom: 0.0625rem solid var(--line);
  text-align: left;
}
.help-result-question {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
  transition: color var(--duration-base) var(--ease-out);
}
.help-result-path {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.help-result:hover .help-result-question {
  color: var(--text-accent);
}
.help-empty {
  padding: var(--space-5) var(--space-1);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.help-more {
  margin-top: clamp(var(--space-4), 2.5svh, var(--space-5));
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.help-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.help-more a .icon {
  font-size: 0.75rem;
  transition: translate var(--duration-base) var(--ease-out);
}
.help-more a:hover .icon {
  translate: 0.1875rem 0;
}
@keyframes help-in {
  from {
    opacity: 0;
    translate: 0 0.625rem;
  }
}
.help-panel:not([hidden]),
.help-results:not([hidden]) {
  animation: help-in 400ms var(--ease-out) both;
}
.help-results-list > li {
  animation: help-in 450ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes help-slide {
  from {
    opacity: 0;
    translate: var(--slide-x, 0) var(--slide-y, 0.625rem);
  }
}
.help-list:not([hidden]) > .help-item {
  animation: help-slide 450ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@media (min-width: 1180px) and (max-height: 820px) {
  .help {
    gap: var(--space-6);
  }
  .help-list {
    margin-top: var(--space-3);
  }
  .help-question {
    padding-block: 0.625rem;
  }
  .help-answer-inner > * {
    padding-bottom: var(--space-3);
    line-height: 1.5;
  }
  .help-steps {
    gap: var(--space-1);
  }
  .help-more {
    margin-top: var(--space-3);
  }
  .help-card {
    min-height: 6rem;
  }
  .help-nav {
    gap: 1.25rem;
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .help {
    gap: var(--space-4);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-4));
  }
  .help-heading {
    font-size: var(--fs-kicker);
  }
  .help-list {
    margin-top: var(--space-2);
  }
  .help-question {
    padding-block: 0.625rem;
  }
  .help-answer-inner > * {
    padding-bottom: var(--space-3);
  }
  .help-steps {
    gap: 0;
  }
  .help-card {
    min-height: 5.25rem;
    padding: var(--space-3);
  }
  .help-more {
    margin-top: var(--space-3);
  }
}
@media (max-width: 1179.98px) {
  .help {
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  }
  .help-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .help-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .help-card {
    min-height: 6.5rem;
    border-radius: 1.125rem 3rem 1.125rem 1.125rem;
  }
  .help-cat-row {
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .help-cats {
    padding-right: calc(15vw + var(--space-3));
  }
}
@media (max-width: 639.98px) {
  .help-banner {
    padding: 1.25rem;
  }
  .help-title {
    font-size: var(--fs-h3-sm);
  }
  .help-card {
    min-height: 5.25rem;
    padding: var(--space-3) var(--space-2);
    border-radius: 1rem 2.25rem 1rem 1rem;
  }
  .help-card-title {
    font-size: var(--fs-small);
  }
  .help-card-sub {
    display: none;
  }
  .help-heading {
    font-size: var(--fs-kicker);
  }
  .help-question-text {
    font-size: var(--fs-btn-sm);
    letter-spacing: 0.02em;
  }
}
}
@layer sections {
.verify {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  grid-template-areas:
    "back back"
    "main qr"
    "aside aside";
  align-content: center;
  column-gap: clamp(var(--space-7), 6vw, 6rem);
  row-gap: clamp(var(--space-5), 4svh, var(--space-7));
  padding:
    calc(var(--header-offset) + var(--header-height) + var(--space-5))
    var(--page-margin)
    clamp(var(--space-5), 4svh, var(--space-7));
  background: var(--surface);
}
.icon-zoom-in { --icon: url("/assets/icons/zoom-in-icon.svg"); }
.icon-zoom-out { --icon: url("/assets/icons/zoom-out-icon.svg"); }
.icon-reset { --icon: url("/assets/icons/reset-icon.svg"); }
.icon-camera { --icon: url("/assets/icons/camera-icon.svg"); }
.icon-qr { --icon: url("/assets/icons/qr-icon.svg"); }
.icon-upload { --icon: url("/assets/icons/new-icons/import-upload.svg"); }
.icon-crop { --icon: url("/assets/icons/crop-icon.svg"); }
.icon-delete { --icon: url("/assets/icons/delete-icon.svg"); }
.icon-alert { --icon: url("/assets/icons/alert-icon.svg"); }
.verify-back {
  grid-area: back;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition:
    color var(--duration-base) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
.verify-back .icon {
  font-size: 1.125rem;
  transition: translate var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .verify-back:hover {
    color: var(--text);
  }
  .verify-back:hover .icon {
    translate: -0.1875rem 0;
  }
}
.verify-back:active {
  scale: 0.96;
}
.verify-main {
  grid-area: main;
  align-self: center;
  text-align: center;
}
.verify-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  color: var(--color-red);
}
.verify-lead {
  max-width: 36rem;
  margin: var(--space-3) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-muted);
}
.verify-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 36rem;
  margin: clamp(var(--space-5), 4svh, var(--space-7)) auto 0;
}
.verify-code-group {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.verify-code-legend {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.verify-code-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.verify-code-row .field {
  flex: 0 1 8.5rem;
  min-width: 0;
}
.verify-code-dash {
  flex-shrink: 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.verify-code {
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.verify-code,
.verify-code:hover {
  border-color: transparent;
  background: var(--surface-alt);
}
.verify-code:focus {
  border-color: var(--line);
  background: var(--surface);
}
.field[data-invalid] .verify-code {
  border-color: var(--text-accent);
}
.verify-code::placeholder {
  color: color-mix(in srgb, var(--color-slate) 45%, transparent);
}
.verify-aside {
  grid-area: aside;
  margin-top: clamp(var(--space-3), 2.5svh, var(--space-5));
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
  padding: clamp(var(--space-4), 2.4svh, var(--space-5)) clamp(var(--space-5), 2vw, var(--space-6));
  border: 0.09375rem solid var(--surface-alt);
  border-radius: var(--radius-md);
}
.verify-aside-title {
  font-size: var(--fs-text);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.verify-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-4);
  padding: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.verify-note {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
}
.verify-qr {
  grid-area: qr;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.qr-frame {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  flex: 1;
  min-height: clamp(18.75rem, 40svh, 24rem);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.qr-empty,
.qr-preview,
.qr-crop,
.qr-result {
  grid-area: 1 / 1;
  display: none;
  min-height: 0;
  padding: var(--space-4);
}
.qr-frame[data-state="idle"] .qr-empty,
.qr-frame[data-state="crop"] .qr-crop,
.qr-frame[data-state="unknown"] .qr-result {
  display: grid;
  place-items: center;
}
.qr-frame[data-state="preview"] .qr-preview,
.qr-frame[data-state="checking"] .qr-preview,
.qr-frame[data-state="done"] .qr-preview {
  display: grid;
  place-items: center;
}
.qr-empty {
  gap: var(--space-3);
  align-content: center;
  text-align: center;
}
.qr-empty-text {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.qr-scan[hidden],
.qr-empty-text[hidden] {
  display: none;
}
.qr-empty-text .icon {
  font-size: 2rem;
  color: color-mix(in srgb, var(--color-slate) 45%, transparent);
}
.qr-scan,
.qr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height-xs);
  padding: 0 var(--space-5);
  border-radius: 0.625rem;
  background: linear-gradient(90deg, var(--color-red) 0%, var(--color-red-deep) 100%);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-on-accent);
  transition: scale var(--duration-fast) var(--ease-out);
}
.qr-scan {
  min-height: var(--btn-height-sm);
}
.qr-scan .icon {
  font-size: 1.25rem;
}
.qr-scan:active,
.qr-btn:active {
  scale: 0.96;
}
.qr-btn-ghost {
  border: 0.09375rem solid var(--line);
  background: var(--surface);
  color: var(--text);
}
.qr-shot {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 0 1.25rem rgb(28 31 36 / 0.07);
}
.qr-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qr-laser {
  position: absolute;
  inset: 0 0 auto;
  display: none;
  height: 0.125rem;
  background: var(--color-scan);
  box-shadow: 0 0 0.75rem 0.125rem color-mix(in srgb, var(--color-scan) 60%, transparent);
  animation: qr-laser 1.6s var(--ease-in-out) infinite;
}
.qr-laser::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.25rem;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-scan) 22%, transparent));
}
.qr-frame[data-state="checking"] .qr-laser {
  display: block;
}
@keyframes qr-laser {
  from { top: 0; }
  to { top: calc(100% - 0.125rem); }
}
.qr-crop-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  touch-action: none;
  user-select: none;
}
.qr-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.qr-crop-box {
  position: absolute;
  border: 0.125rem solid var(--surface);
  border-radius: 0.25rem;
  box-shadow: 0 0 0 624.9375rem rgb(28 31 36 / 0.55);
  cursor: move;
}
.qr-crop-handle {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  width: 1.375rem;
  height: 1.375rem;
  border-right: 0.25rem solid var(--surface);
  border-bottom: 0.25rem solid var(--surface);
  border-bottom-right-radius: 0.25rem;
  cursor: nwse-resize;
}
.qr-crop-handle::after {
  content: "";
  position: absolute;
  inset: -0.75rem;
}
.qr-result {
  align-content: center;
  gap: var(--space-2);
  text-align: center;
}
.qr-result-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
  font-size: 1.5rem;
  color: var(--text-accent);
}
.qr-result-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.qr-result-text {
  max-width: 18rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.qr-tools {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: none;
  gap: var(--space-2);
}
.qr-frame:is([data-state="preview"], [data-state="done"], [data-state="unknown"]) .qr-tools {
  display: flex;
}
.qr-frame:not([data-state="preview"]) [data-qr-recrop] {
  display: none;
}
.qr-tool {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0.125rem 0.625rem rgb(28 31 36 / 0.12);
  color: var(--text);
  transition:
    color var(--duration-base) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
.qr-tool .icon {
  font-size: 1rem;
}
.qr-tool [class*="icon-delete"] {
  font-size: 0.6875rem;
}
@media (hover: hover) {
  .qr-tool:hover {
    color: var(--text-accent);
  }
}
.qr-tool:active {
  scale: 0.9;
}
.qr-actions {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}
.qr-frame[data-state="crop"] .qr-actions {
  display: flex;
}
.qr-status {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  text-align: center;
  color: var(--text-muted);
}
.qr-status:empty {
  display: none;
}
.qr-status[data-tone="error"] {
  color: var(--text-accent);
}
.qr-frame:is([data-state="crop"], [data-state="verified"]) .qr-drop {
  display: none;
}
.qr-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  margin: 0 var(--space-4) var(--space-4);
  padding: clamp(var(--space-3), 1.8svh, var(--space-4)) var(--space-4);
  border: 0.09375rem solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .qr-drop:hover {
    border-color: color-mix(in srgb, var(--color-red-deep) 35%, var(--color-border));
  }
}
.qr-drop[data-over] {
  border-color: var(--text-accent);
  background: color-mix(in srgb, var(--color-red) 4%, transparent);
}
.qr-drop:has(input:focus-visible) {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.125rem;
}
.qr-drop-icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  margin-bottom: var(--space-1);
  border: 0.09375rem solid var(--line);
  border-radius: 0.625rem;
  box-shadow: 0 0.0625rem 0.1875rem rgb(28 31 36 / 0.08);
  font-size: 1.25rem;
  color: var(--text);
}
.qr-drop-text {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.qr-drop-link {
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.qr-drop-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.qr-drop-touch {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .qr-drop-mouse {
    display: none;
  }
  .qr-drop-touch {
    display: inline;
  }
}
.qr-camera {
  width: min(92vw, 26.25rem);
  max-width: none;
  margin: auto;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.qr-camera::backdrop {
  background: rgb(28 31 36 / 0.6);
}
.qr-camera[open] {
  display: grid;
  gap: var(--space-3);
}
.qr-camera-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.qr-camera-view {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-anthracite);
}
.qr-camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qr-camera-target {
  position: absolute;
  inset: 16%;
  border: 0.125rem solid var(--surface);
  border-radius: 0.75rem;
  box-shadow: 0 0 0 624.9375rem rgb(28 31 36 / 0.35);
}
.qr-camera-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.qr-camera-status:empty {
  display: none;
}
.qr-camera-status[data-tone="error"] {
  color: var(--text-accent);
}
.sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --sample-gap: clamp(var(--space-5), 5svh, 3.5rem);
  --sample-space: clamp(var(--space-5), 4.5svh, var(--space-7));
  padding:
    calc(var(--header-offset) + var(--header-height) + var(--sample-gap))
    var(--page-margin)
    var(--sample-gap);
  background: var(--surface);
  text-align: center;
}
.sample-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-red);
}
.sample-text {
  max-width: 40rem;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.sample-box {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: min(100%, 64rem);
  margin-top: var(--sample-space);
}
.sample-viewer {
  position: relative;
  flex: 1;
  min-width: 0;
  height: clamp(9.375rem, 28svh, 17.5rem);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0 1.25rem rgb(28 31 36 / 0.07);
  touch-action: none;
  user-select: none;
}
.sample-viewer[data-zoomed] {
  cursor: grab;
}
.sample-viewer[data-dragging] {
  cursor: grabbing;
}
.sample-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  transform-origin: 0 0;
  transition: transform 350ms var(--ease-out);
  pointer-events: none;
}
.sample-viewer[data-dragging] .sample-stage {
  transition: none;
}
.sample-frame {
  position: relative;
  width: 100%;
}
.sample-img {
  width: 100%;
  height: auto;
}
.sample-mark-num {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--accent-fill);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text-on-accent);
}
.sample-parts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  width: min(100%, 64rem);
  margin-top: var(--sample-space);
  padding: 0;
  list-style: none;
  text-align: left;
}
.sample-part {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}
.sample-part-name {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.sample-tools {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-3);
}
.sample-tool {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0.125rem 0.625rem rgb(28 31 36 / 0.14);
  color: var(--text);
  transition:
    color var(--duration-base) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
}
.sample-tool .icon {
  font-size: 1.125rem;
}
.sample-tool:hover {
  color: var(--text-accent);
}
.sample-tool:active {
  scale: 0.9;
}
@media (min-width: 1180px) and (max-height: 700px) {
  .verify-title {
    font-size: var(--fs-h3);
  }
  .verify-form {
    margin-top: var(--space-5);
  }
  .verify {
    row-gap: var(--space-4);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-3));
    padding-bottom: var(--space-3);
  }
  .verify-lead {
    font-size: var(--fs-text);
  }
  .verify-back {
    min-height: 2rem;
  }
  .verify-form {
    margin-top: var(--space-4);
  }
  .verify-aside {
    margin-top: var(--space-5);
    padding-block: var(--space-3);
  }
  .verify-note {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }
  .sample-title {
    font-size: var(--fs-h3-sm);
  }
  .sample-parts {
    row-gap: var(--space-3);
  }
  .sample-part {
    line-height: 1.35;
  }
}
@media (max-width: 1179.98px) {
  .verify {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "back"
      "main"
      "qr"
      "aside";
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-4));
  }
  .verify-form {
    max-width: none;
  }
  .qr-frame {
    flex: none;
    height: 18.75rem;
  }
  .verify-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .verify-aside-title {
    grid-row: auto;
    font-size: var(--fs-h3-sm);
  }
  .verify-steps {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-4);
    font-size: var(--fs-small);
  }
  .verify-note {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
  .sample-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639.98px) {
  .verify-title {
    font-size: var(--fs-h3-sm);
  }
  .verify-lead {
    font-size: var(--fs-small);
  }
  .qr-frame {
    height: auto;
    aspect-ratio: 1;
  }
  .verify-code-group .field-hint {
    font-size: min(var(--fs-xs), 3.4vw);
    white-space: nowrap;
  }
  .sample-title {
    font-size: var(--fs-h3-sm);
  }
  .sample-viewer {
    height: auto;
    aspect-ratio: 3 / 1;
  }
  .sample-stage {
    padding: var(--space-3);
  }
  .sample-parts {
    grid-template-columns: minmax(0, 1fr);
  }
  .sample-box {
    flex-direction: column;
  }
  .sample-viewer {
    flex: none;
    width: 100%;
  }
  .sample-tools {
    flex-direction: row;
  }
}
.qr-verified {
  grid-area: 1 / 1 / -1 / -1;
  display: none;
  align-content: start;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
}
.qr-frame[data-state="verified"] .qr-verified {
  display: grid;
}
.qr-frame[data-state="verified"] :is(.qr-status, .qr-actions, .qr-tools) {
  display: none;
}
.verified-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: none;
}
.qr-frame[data-state="verified"] .verified-close {
  display: grid;
}
.verified-head {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-right: 3.25rem;
  border-radius: 0.75rem;
  background: var(--surface);
}
.verified-school {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text);
}
.verified-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
}
.verified-fact {
  display: grid;
  gap: 0.0625rem;
  min-width: 0;
}
.verified-fact dt {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.verified-fact dd {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.verified-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 0.75rem;
  background: var(--surface);
}
.verified-pdf {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: url("/assets/icons/new-icons/pdf-icon.svg") center / contain no-repeat;
}
.verified-text {
  display: grid;
  min-width: 0;
}
.verified-student {
  overflow-wrap: anywhere;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.verified-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.verified-compare {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height-xs);
  padding: 0 var(--space-6);
  border-radius: 0.625rem;
  background: linear-gradient(90deg, var(--color-red) 0%, var(--color-red-deep) 100%);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-on-accent);
  transition: scale var(--duration-fast) var(--ease-out);
}
.verified-compare:active:not(:disabled) {
  scale: 0.96;
}
.verified-compare:disabled {
  background: var(--line);
  color: var(--text-muted);
  cursor: default;
}
.compare {
  width: min(96vw, 60rem);
  max-width: none;
  height: min(94svh, 60rem);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  box-shadow: 0 1.5rem 4rem rgb(28 31 36 / 0.3);
}
.compare[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.compare::backdrop {
  background: rgb(28 31 36 / 0.6);
}
.compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface);
}
.compare-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.compare-tools,
.compare-zoom {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}
.compare-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--text);
  transition: scale var(--duration-fast) var(--ease-out);
}
.compare-btn:active {
  scale: 0.92;
}
.compare-btn .icon {
  font-size: 0.75rem;
}
.compare-level {
  min-width: 3.5rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.compare-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow: auto;
  scrollbar-gutter: stable;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.compare-pages canvas {
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  -webkit-user-drag: none;
}
.compare-status {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--text-muted);
}
.compare-status:empty {
  display: none;
}
@media (max-width: 639.98px) {
  .compare {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .compare-bar {
    padding-top: max(var(--space-3), env(safe-area-inset-top));
  }
  .compare-status {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }
}
@media print {
  .compare {
    display: none !important;
  }
}
}
@layer sections {
.legal {
  padding:
    calc(var(--header-offset) + var(--header-height) + var(--space-5))
    var(--page-margin)
    var(--space-9);
  background: var(--surface);
}
.sections:has(.legal) {
  scroll-snap-type: none;
}
.legal-head {
  max-width: 56rem;
  margin-top: var(--space-6);
}
.legal-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  color: var(--color-red);
}
.legal-updated {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.legal-lead {
  margin-top: var(--space-4);
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--text);
}
.legal-body {
  max-width: 56rem;
  margin-top: var(--space-7);
}
.legal-article {
  padding-block: var(--space-6);
  border-top: 0.0625rem solid var(--line);
}
.legal-article h2 {
  font-size: var(--fs-h3-sm);
  color: var(--text);
}
.legal-num {
  color: var(--color-red);
}
.legal-article h3 {
  margin-top: var(--space-5);
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.legal-article p,
.legal-article li {
  font-size: var(--fs-text);
  line-height: 1.7;
  color: var(--text-muted);
}
.legal-article h2 + p,
.legal-article h3 + p,
.legal-article h2 + ul,
.legal-article h3 + ul {
  margin-top: var(--space-3);
}
.legal-article p + p,
.legal-article p + ul,
.legal-article ul + p {
  margin-top: var(--space-3);
}
.legal-article ul {
  padding-left: var(--space-5);
  list-style: disc;
}
.legal-article li + li {
  margin-top: var(--space-2);
}
.legal-article li::marker {
  color: var(--color-red);
}
.legal-article strong {
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.legal-article a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
@media (hover: hover) {
  .legal-article a:hover {
    text-decoration-thickness: 0.125rem;
  }
}
@media (max-width: 1179.98px) {
  .legal {
    padding-bottom: var(--space-8);
  }
  .legal-title {
    font-size: var(--fs-h2-sm);
  }
}
@media (max-width: 639.98px) {
  .legal-head {
    margin-top: var(--space-5);
  }
  .legal-body {
    margin-top: var(--space-6);
  }
  .legal-article {
    padding-block: var(--space-5);
  }
  .legal-article p,
  .legal-article li {
    font-size: var(--fs-small);
    line-height: 1.65;
  }
}
}
@layer sections {
.notice {
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  padding: var(--space-5) var(--page-margin);
  overflow-y: auto;
  background: var(--surface);
}
.notice-card {
  width: min(100%, 32rem);
  text-align: left;
}
.notice-logo {
  width: 9.375rem;
  height: auto;
}
.notice-about {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.notice-body {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 0.0625rem solid var(--line);
}
.notice-title {
  font-size: var(--fs-h3-sm);
  text-transform: uppercase;
  color: var(--color-red);
}
.notice-text {
  margin-top: var(--space-3);
  font-size: var(--fs-text);
  line-height: 1.6;
  color: var(--text-muted);
}
.notice-text strong {
  font-weight: var(--fw-semibold);
  color: var(--text);
  overflow-wrap: anywhere;
}
.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (max-width: 479.98px) {
  .notice-actions > *,
  .notice-actions .btn {
    width: 100%;
  }
}
}
@layer sections {
.demo {
  --demo-pad: var(--space-3);
  --demo-radius: var(--radius-md);
  width: min(60rem, 100vw - 2 * var(--space-4));
  max-width: none;
  margin: auto;
  padding: var(--demo-pad);
  overflow: visible;
  border: 0;
  border-radius: calc(var(--demo-radius) + var(--demo-pad));
  background: var(--color-anthracite);
}
.demo:focus {
  outline: none;
}
.demo[open] {
  animation: demo-in var(--duration-slow) var(--ease-out);
}
.demo::backdrop {
  background: rgb(28 31 36 / 0.72);
}
@keyframes demo-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
}
.demo-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--demo-radius);
  background: var(--color-anthracite);
}
.demo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.demo-close {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.75rem;
  color: var(--text);
  transition: scale var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .demo-close:hover {
    background: var(--surface-alt);
  }
}
.demo-close:active {
  scale: 0.92;
}
}
@layer sections {
.site-footer {
  --footer-gap: clamp(var(--space-5), 5svh, var(--space-8));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--footer-gap);
  padding:
    calc(var(--header-offset) + var(--header-height) + clamp(2.5rem, 6svh, var(--space-8)))
    var(--page-margin)
    clamp(var(--space-4), 3svh, var(--space-6));
  background: var(--surface);
}
.icon-phone { --icon: url("/assets/icons/phone.svg"); }
.icon-mail { --icon: url("/assets/icons/mail.svg"); }
.icon-location { --icon: url("/assets/icons/location.svg"); }
.icon-instagram { --icon: url("/assets/icons/ig-icon.svg"); }
.icon-facebook { --icon: url("/assets/icons/fb-icon.svg"); }
.icon-youtube { --icon: url("/assets/icons/yt-icon.svg"); }
.icon-tiktok { --icon: url("/assets/icons/tiktok-icon.svg"); }
.site-footer :where(ul) {
  padding: 0;
  list-style: none;
}
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(var(--space-6), 9svh, 5.25rem) var(--space-6);
  border-radius: 1.375rem;
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-deep) 100%);
  color: var(--text-on-accent);
  text-align: center;
}
.newsletter-title {
  font-size: var(--fs-h2);
}
.newsletter-text {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
.newsletter-text strong {
  font-weight: var(--fw-bold);
  color: var(--text-on-accent);
}
.newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 30rem);
  margin-top: clamp(var(--space-5), 4.5svh, var(--space-6));
  padding: 0.375rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-white) 25%, transparent);
  transition:
    width 450ms var(--ease-in-out),
    height 450ms var(--ease-in-out),
    border-radius 450ms var(--ease-in-out);
}
.newsletter-form[data-state="sending"] > :not(.newsletter-state),
.newsletter-form[data-state="closing"] > :not(.newsletter-state),
.newsletter-form[data-state="done"] > :not(.newsletter-state) {
  opacity: 0;
  pointer-events: none;
}
.newsletter-form > :not(.newsletter-state) {
  transition: opacity 180ms var(--ease-out);
}
.newsletter-state {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  overflow: visible;
  color: var(--color-red);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out) 120ms;
}
.newsletter-form[data-state="sending"] .newsletter-state,
.newsletter-form[data-state="closing"] .newsletter-state,
.newsletter-form[data-state="done"] .newsletter-state {
  width: auto;
  margin: 0;
  opacity: 1;
}
.newsletter-state .state-icon {
  width: 1.875rem;
  height: 1.875rem;
}
[data-swap-done] {
  transition: opacity 180ms var(--ease-out);
}
[data-swap-done].is-swapping {
  opacity: 0;
}
.newsletter-error {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-on-accent);
}
@media (prefers-reduced-motion: reduce) {
  .newsletter-form,
  .newsletter-form > :not(.newsletter-state),
  .newsletter-state,
  [data-swap-done] {
    transition: none;
  }
}
.newsletter-input {
  flex: 1;
  min-width: 0;
  height: var(--btn-height-sm);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
}
.newsletter-input::placeholder {
  color: var(--text-muted);
}
.newsletter-input:focus-visible {
  outline: none;
}
.newsletter-input:-webkit-autofill,
.newsletter-input:-webkit-autofill:hover,
.newsletter-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 6.25rem var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 600000s 0s;
}
.newsletter-input:autofill {
  box-shadow: 0 0 0 6.25rem var(--surface) inset;
}
.newsletter-form:focus-within {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-white) 60%, transparent);
}
.newsletter-submit {
  min-height: var(--btn-height-sm);
  padding: 0 var(--space-5);
}
.footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-4), 3.5svh, var(--space-6));
  width: 100%;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
}
.footer-brand::before,
.footer-brand::after {
  content: "";
  flex: 1;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}
.footer-logo {
  display: grid;
  place-items: center;
  width: clamp(16rem, 28vw, 25rem);
  height: clamp(4.5rem, 11svh, 6.25rem);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}
.footer-logo img {
  width: clamp(11.25rem, 18vw, 15.875rem);
  height: auto;
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) clamp(var(--space-5), 4.5vw, 3.875rem);
}
.footer-nav a,
.footer-contact-list a,
.footer-contact-list li > span {
  color: var(--text-muted);
  transition: color var(--duration-base) var(--ease-out);
}
.footer-nav a {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.footer-contact-list {
  display: flex;
  align-items: center;
}
.footer-contact-list li,
.footer-social {
  padding-inline: var(--space-5);
  border-right: 0.0625rem solid var(--line);
}
.footer-contact-list li:first-child {
  padding-left: 0;
}
.footer-contact-list a,
.footer-contact-list li > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
}
.footer-contact-list .icon {
  font-size: 1.1875rem;
}
.footer-social {
  display: flex;
  gap: var(--space-3);
  padding-right: 0;
  border-right: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: color var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
}
.footer-social .icon {
  font-size: 1.75rem;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: 0.75rem;
  background: var(--surface-alt);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.footer-credits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}
.dev-credits{
  display: flex;
  gap: 0.3125rem;
}
.credits-btn{
  color: black;
  font-weight: bold;
}
.credits-btn:hover{
  color: var(--color-red-deep)
}
.footer-bottom strong {
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.footer-legal li + li::before {
  content: "·";
  margin-right: var(--space-3);
}
.footer-legal a {
  transition: color var(--duration-base) var(--ease-out);
}
.footer-legal a[aria-current="page"] {
  color: var(--text-accent);
}
@media (hover: hover) {
  .footer-nav a:hover,
  .footer-contact-list a:hover,
  .footer-legal a:hover {
    color: var(--text-accent);
  }
  .footer-social a:hover {
    color: var(--text-accent);
    translate: 0 -0.125rem;
  }
}
@media (min-width: 1180px) {
  .site-footer {
    justify-content: space-between;
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
  }
}
@media (min-width: 1180px) and (max-height: 800px) {
  .newsletter {
    padding-block: var(--space-6);
  }
  .footer-logo {
    height: clamp(4rem, 10svh, 5rem);
  }
}
@media (min-width: 1180px) and (max-height: 700px) {
  .site-footer {
    --footer-gap: var(--space-4);
    padding-top: calc(var(--header-offset) + var(--header-height) + 2.5rem);
  }
  .newsletter {
    padding-block: var(--space-5);
  }
  .newsletter-title {
    font-size: var(--fs-h3);
  }
  .newsletter-form {
    margin-top: var(--space-4);
  }
  .footer-main {
    gap: var(--space-3);
  }
  .footer-logo {
    height: 3.75rem;
  }
  .footer-logo img {
    width: 11.25rem;
  }
  .footer-bottom {
    padding-block: var(--space-3);
  }
}
@media (max-width: 1179.98px) {
  .footer-contact {
    flex-direction: column;
    gap: var(--space-4);
  }
  .footer-contact-list li:last-child {
    padding-right: 0;
    border-right: 0;
  }
  .footer-social {
    padding-left: 0;
  }
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .footer-credits,
  .footer-legal ul {
    justify-content: center;
  }
}
@media (max-width: 639.98px) {
  .site-footer {
    --footer-gap: var(--space-6);
    padding-top: calc(var(--header-offset) + var(--header-height) + var(--space-6));
  }
  .newsletter {
    padding: var(--space-6) var(--space-4);
    border-radius: (1.875rem);
  }
  .newsletter-title {
    font-size: var(--fs-h3-sm);
  }
  .newsletter-text {
    font-size: var(--fs-small);
  }
  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: 1.625rem;
  }
  .newsletter-input {
    flex: none;
    text-align: center;
  }
  .newsletter-input:focus::placeholder {
    color: transparent;
  }
  .newsletter-submit {
    width: 100%;
    font-size: var(--fs-btn-sm);
  }
  .footer-main {
    gap: var(--space-5);
  }
  .footer-brand {
    gap: var(--space-3);
  }
  .footer-logo {
    width: auto;
    height: 4rem;
    padding-inline: var(--space-6);
  }
  .footer-logo img {
    width: 10rem;
  }
  .footer-nav ul {
    gap: var(--space-3) var(--space-5);
  }
  .footer-nav a {
    font-size: var(--fs-btn-sm);
  }
  .footer-contact {
    flex-direction: row;
    gap: 0;
  }
  .footer-contact::before {
    content: "";
    flex-basis: 100%;
    order: 2;
  }
  .footer-contact-list li:nth-child(-n + 2) {
    order: 1;
  }
  .footer-contact-list li:nth-child(3),
  .footer-social {
    order: 3;
    margin-top: var(--space-3);
  }
  .footer-contact-list {
    display: contents;
  }
  .footer-contact-list a,
  .footer-contact-list li > span {
    gap: 0.375rem;
    font-size: var(--fs-xs);
  }
  .footer-contact-list .icon {
    font-size: 0.9375rem;
  }
  .footer-contact-list li:nth-child(odd) {
    padding: 0 var(--space-3) 0 0;
    border-right: 0.0625rem solid var(--line);
  }
  .footer-contact-list li:nth-child(2),
  .footer-social {
    padding: 0 0 0 var(--space-3);
    border: 0;
  }
  .footer-social .icon {
    font-size: 1.5rem;
  }
  .footer-legal li:first-child {
    flex-basis: 100%;
  }
  .footer-legal li:nth-child(2)::before {
    content: none;
  }
}
}
@layer base {
.sections {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow-y: scroll;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}
.sections::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1180px) {
  .sections {
    scroll-snap-type: y mandatory;
  }
  .sections > section {
    scroll-snap-align: start;
    min-height: 100vh;
    min-height: 100svh;
  }
}
.sections[data-navigating] {
  scroll-snap-type: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .sections {
    scroll-behavior: smooth;
  }
}
}
@layer components {
.section-separator {
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 70px;
  height: 2px;
  translate: -50% -50%;
  pointer-events: none;
}
.banner-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.banner-art img {
  position: absolute;
  top: 50%;
  left: clamp(-24px, -1vw, -8px);
  width: auto;
  max-width: none;
  height: 118%;
  opacity: 0.22;
  translate: 0 -50%;
}
@media (max-width: 639.98px) {
  .banner-art img {
    height: 90%;
  }
}
}
@layer motion {
[data-enter="pending"] {
  opacity: 0.15;
  translate: 0 var(--space-7);
}
[data-enter="done"] {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--duration-enter) var(--ease-out),
    translate var(--duration-enter) var(--ease-out);
  transition-delay: calc(var(--enter-i, 0) * var(--enter-stagger));
}
}
html {
  font-size: calc(max(100%, 0.9167vw) * var(--tv, 1));
}