:root {
  --c-accent: oklch(0.627 0.2014 33.95);
  --c-bg: oklch(0.9221 0.0186 331.09);
  --c-bg-muted: oklch(91% 0.02 10);
  --c-panel: oklch(0.8783 0.0494 285.34);
  --c-ink: oklch(0 0 0);
  --c-ink-soft: oklch(28% 0.04 275);
  --c-light: oklch(0.9551 0 0);
  --c-rule: oklch(26% 0.02 275);
  --c-primary: oklch(0.3807 0.1836 278.32);
  --c-primary-ink: oklch(98% 0.01 275);
  --c-link-light: oklch(28% 0.16 275);
  --c-link-dark: oklch(93% 0.08 230);
  --c-focus: oklch(22% 0.04 275);
  --c-error: oklch(45% 0.2 25);
  --ff-serif: "Fraunces", serif;
  --ff-sans: "Roboto", system-ui, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-delta-on-dark: 56;
  --fw-regular-on-dark: clamp(100, calc(var(--fw-regular) - var(--fw-delta-on-dark)), 900);
  --fw-semibold-on-dark: clamp(100, calc(var(--fw-semibold) - var(--fw-delta-on-dark)), 900);
  --fw-bold-on-dark: clamp(100, calc(var(--fw-bold) - var(--fw-delta-on-dark)), 900);
  --fraunces-soft: 96;
  --fraunces-wonk: 1;
  --opsz-h1-min: 60;
  --opsz-h1-max: 85;
  --opsz-h2-min: 40;
  --opsz-h2-max: 58;
  --opsz-h3: 27;
  --opsz-menu: 20;
  --opsz-button: 24;
  --fs-00: 1.125rem;
  --fs-0: clamp(1.375rem, 1.3036rem + 0.3571vw, 1.5rem);
  --fs-1: 1.5rem;
  --fs-2: 1.5rem;
  --fs-3: clamp(2.5rem, 1.8571rem + 3.2143vw, 3.625rem);
  --fs-4: clamp(3.75rem, 2.8571rem + 4.4643vw, 5.3125rem);
  --fs-menu: 1.125rem;
  --lh-info: 1.3125rem;
  --lh-body: clamp(1.5625rem, 1.4911rem + 0.3571vw, 1.6875rem);
  --lh-h1: clamp(3.75rem, 2.8571rem + 4.4643vw, 5.3125rem);
  --lh-h2: clamp(2.5rem, 1.8571rem + 3.2143vw, 3.625rem);
  --lh-h3: 1.6875rem;
  --lh-menu: 1.25rem;
  --lh-button: 1.5rem;
  --u: 1.618rem;
  --u2: 0.809rem;
  --u4: 0.404rem;
  --u-2: 3.236rem;
  --u-3: 4.854rem;
  --r-s: 0.5rem;
  --r-m: 1rem;
  --r-pill: 100vmax;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

input,
textarea,
button {
  font: inherit;
}

@font-face {
  font-family: "Fraunces";
  src: url("/asset/font/fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-variation-settings: "wght" 300, "opsz" 24, "SOFT" 96, "WONK" 1;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/asset/font/roboto-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-variation-settings: "wght" 400;
  font-display: swap;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-0);
  font-variation-settings: "wght" var(--fw-regular);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.016ch;
}

h1,
h2,
h3 {
  font-family: var(--ff-serif);
  font-weight: var(--fw-light);
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4);
  font-variation-settings: "wght" var(--fw-light), "opsz" var(--opsz-h1-min), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  line-height: var(--lh-h1);
}

h2 {
  font-size: var(--fs-3);
  font-variation-settings: "wght" var(--fw-light), "opsz" var(--opsz-h2-min), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  line-height: var(--lh-h2);
  margin-block-end: var(--u);
}

h3 {
  font-size: var(--fs-2);
  font-variation-settings: "wght" var(--fw-light), "opsz" var(--opsz-h3), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  line-height: var(--lh-h3);
}

strong {
  font-variation-settings: "wght" var(--fw-semibold);
  font-weight: var(--fw-semibold);
}

a {
  color: var(--c-link-light);
}

abbr[title] {
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.14em;
}

p {
  max-inline-size: 66ch;
  margin-block-end: 0.9em;
}

@media (min-width: 60rem) {
  h1 {
    font-variation-settings: "wght" var(--fw-light), "opsz" var(--opsz-h1-max), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  }
  h2 {
    font-variation-settings: "wght" var(--fw-light), "opsz" var(--opsz-h2-max), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  }
}
.skip-link {
  left: var(--u2);
  position: absolute;
  top: var(--u2);
  transform: translateY(-200%);
  z-index: 1000;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px oklch(98% 0.01 275deg / 0.85);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.cursor-dot,
.cursor-dot-shadow {
  aspect-ratio: 1;
  block-size: 3rem;
  border-radius: 50%;
  display: block;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
}

.cursor-dot {
  --cursor-dot-base: var(--c-accent);
  background: var(--cursor-dot-base);
  inline-size: 3rem;
  mix-blend-mode: multiply;
  z-index: 999;
}

.cursor-dot--interactive {
  --cursor-dot-base: oklch(from var(--c-light) l c h / 0.58);
  mix-blend-mode: normal;
}

.cursor-dot--ripple {
  animation: cursor-dot-ripple-flash 180ms ease-out;
}

@keyframes cursor-dot-ripple-flash {
  0% {
    background: var(--c-ink);
  }
  100% {
    background: var(--cursor-dot-base);
  }
}
.cursor-dot-shadow {
  background: oklch(from var(--c-ink) l c h/0.25);
  inline-size: 3rem;
  z-index: 998;
}

.cursor-dot--visible {
  opacity: 1;
}

.cursor-dot-shadow--visible {
  opacity: 0.25;
}

@media (pointer: coarse) {
  .cursor-dot,
  .cursor-dot-shadow {
    display: none;
  }
}
.wrap {
  margin-inline: auto;
  max-inline-size: 90rem;
}

.site-main .wrap {
  padding-block: var(--u);
}

.site-main {
  display: grid;
  row-gap: clamp(var(--u-2), 8vw, var(--u-3));
  padding-block: var(--u-2);
  padding-inline: var(--u);
}

.anchor-target {
  scroll-margin-top: calc(6.25rem + var(--u));
}

.section-split {
  border-top: 1px solid var(--c-rule);
  display: grid;
  column-gap: 20px;
  row-gap: var(--u-2);
  padding-block-start: 0;
}

@media (min-width: 60rem) {
  .section-split {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .section-split > :first-child {
    grid-column: span 4;
    padding-inline-end: var(--u);
  }
  .section-split > :last-child {
    grid-column: span 4;
  }
}
@property --btn-wght {
  syntax: "<number>";
  inherits: true;
  initial-value: 300;
}
.button {
  --btn-wght: var(--fw-light);
  align-items: center;
  border: 3px solid currentColor;
  border-radius: var(--r-pill);
  display: inline-flex;
  font-family: var(--ff-serif);
  font-size: var(--fs-1);
  font-variation-settings: "wght" var(--btn-wght), "opsz" var(--opsz-button), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  font-weight: var(--fw-light);
  justify-content: center;
  cursor: pointer;
  line-height: var(--lh-button);
  min-block-size: 5rem;
  padding: 0.6em 2.4em;
  text-decoration: none;
  transition: --btn-wght 0.2s ease, background 0.2s ease, border-width 0.2s ease, color 0.2s ease;
  inline-size: 100%;
  justify-self: start;
  translate: -3px 0;
}

.button--primary {
  background: transparent;
  color: var(--c-ink);
}

.button--primary:hover {
  --btn-wght: var(--fw-bold);
  border-width: 4px;
  font-weight: var(--fw-bold);
}

.button--primary:active {
  --btn-wght: var(--fw-bold);
  background: var(--c-ink);
  border-color: var(--c-ink);
  border-width: 4px;
  color: var(--c-bg);
  font-weight: var(--fw-bold);
}

@media (min-width: 60rem) {
  .button {
    inline-size: auto;
    min-inline-size: 27.25rem;
  }
}
.logo {
  block-size: 3.4375rem;
  inline-size: 3.4375rem;
}

.site-header {
  background: var(--c-bg);
  background: oklch(from var(--c-bg) l c h/0.9);
  min-block-size: 6.25rem;
  padding-block: 0;
  padding-inline: var(--u);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: var(--u);
  justify-content: space-between;
  min-block-size: 6.25rem;
  max-inline-size: calc(90rem - var(--u) * 2);
}

@media (min-width: 60rem) {
  .site-header__inner {
    column-gap: 20px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .site-header__home {
    grid-column: span 2;
  }
  .site-nav {
    display: flex;
    grid-column: span 6;
    justify-content: flex-end;
  }
}
@property --nav-wght {
  syntax: "<number>";
  inherits: true;
  initial-value: 300;
}
.site-nav__list {
  align-items: center;
  display: flex;
  gap: var(--u);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item:not(.site-nav__item--cta) {
  display: none;
}

.site-nav a {
  --nav-wght: var(--fw-light);
  color: var(--c-ink);
  font-family: var(--ff-serif);
  font-size: var(--fs-menu);
  font-variation-settings: "wght" var(--nav-wght), "opsz" var(--opsz-menu), "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk);
  font-weight: var(--fw-light);
  line-height: var(--lh-menu);
  text-decoration: none;
  transition: --nav-wght 0.2s ease;
}

.site-nav a:hover,
.site-nav a:active {
  --nav-wght: var(--fw-bold);
  font-weight: var(--fw-bold);
}

.site-nav__cta {
  border: 3px solid currentColor;
  border-radius: var(--r-pill);
  display: inline-flex;
  justify-content: center;
  min-inline-size: 8.25rem;
  padding: 0.45em 1.6em;
  text-decoration: none;
}

.site-nav__cta:hover {
  border-width: 4px;
}

.site-nav__cta:active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

@media (min-width: 60rem) {
  .site-nav__item:not(.site-nav__item--cta) {
    display: list-item;
  }
}
.hero__inner {
  display: grid;
  column-gap: 20px;
  row-gap: var(--u-2);
}

.hero__body {
  max-inline-size: 65ch;
}

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .hero__title {
    grid-column: span 4;
    padding-inline-end: var(--u);
  }
  .hero__body {
    grid-column: span 4;
  }
}
#benefit-title {
  text-align: center;
}

.benefit__grid {
  display: grid;
  gap: 20px;
  margin-block-start: var(--u-2);
}

.benefit__item {
  background: var(--c-panel);
  gap: var(--u2);
  padding: var(--u);
}

.benefit__item h3 {
  margin-block: var(--u2);
}

.benefit__item p {
  font-size: var(--fs-00);
  line-height: var(--lh-info);
}

.benefit__item .icon {
  block-size: auto;
  inline-size: calc((100% - var(--u2)) / 2);
}

@media (min-width: 60rem) {
  .benefit__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .benefit__item {
    grid-column: span 2;
  }
  .benefit__item:nth-child(1) {
    grid-column: 2/span 2;
  }
  .benefit__item:nth-child(2) {
    grid-column: 4/span 2;
  }
  .benefit__item:nth-child(3) {
    grid-column: 6/span 2;
  }
}
.process {
  scroll-margin-top: var(--u-2);
}

.way {
  scroll-margin-top: var(--u-2);
}

.collab {
  scroll-margin-top: var(--u-2);
}

.collab__badge {
  margin-block-start: var(--u);
  max-inline-size: 16rem;
}

.collab__badge img {
  display: block;
  inline-size: 100%;
}

.collab__body {
  max-inline-size: 65ch;
}

#what-title {
  text-align: center;
}

.what__panel {
  background: var(--c-panel);
  display: grid;
  column-gap: 20px;
  row-gap: var(--u);
  margin-block-start: var(--u);
  padding: var(--u);
}

.what p {
  font-size: var(--fs-00);
  line-height: var(--lh-info);
}

@media (min-width: 60rem) {
  .what .wrap {
    column-gap: 20px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  #what-title {
    grid-column: 2/8;
  }
  .what__panel {
    grid-column: 2/8;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .what__body {
    grid-column: 1/6;
  }
  .what__figure {
    align-self: center;
    grid-column: 6/9;
    justify-self: center;
    margin: 0;
  }
  .what__figure img {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
  }
}
.about {
  scroll-margin-top: var(--u-2);
}

.about__figure {
  margin-block-start: var(--u);
  max-inline-size: 16rem;
}

.about__body {
  max-inline-size: 65ch;
}

.contact {
  background: var(--c-primary);
  color: var(--c-primary-ink);
  scroll-margin-top: var(--u-2);
}

.contact p,
.contact li,
.contact label {
  font-variation-settings: "wght" var(--fw-regular-on-dark);
  font-weight: var(--fw-regular-on-dark);
}

.contact strong {
  font-variation-settings: "wght" var(--fw-semibold-on-dark);
  font-weight: var(--fw-semibold-on-dark);
}

.contact a {
  color: var(--c-primary-ink);
}

.contact__inner {
  border-top: 1px solid var(--c-primary-ink);
  display: grid;
  column-gap: 20px;
  margin-inline: auto;
  max-inline-size: 90rem;
  padding-inline: var(--u);
  row-gap: var(--u-2);
  padding-block: var(--u-2);
}

.contact .button--primary {
  background: transparent;
  border-color: var(--c-primary-ink);
  color: var(--c-primary-ink);
}

.contact .button--primary:hover {
  --btn-wght: var(--fw-bold-on-dark);
  background: transparent;
  border-color: var(--c-primary-ink);
  border-width: 4px;
  color: var(--c-primary-ink);
  font-weight: var(--fw-bold-on-dark);
}

.contact .button--primary:active {
  --btn-wght: var(--fw-bold-on-dark);
  background: var(--c-primary-ink);
  border-color: var(--c-primary-ink);
  border-width: 4px;
  color: var(--c-primary);
  font-weight: var(--fw-bold-on-dark);
}

@media (min-width: 60rem) {
  .contact__inner {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .contact__intro {
    grid-column: span 3;
  }
  .contact__form {
    grid-column: 5/span 4;
  }
}
.contact-form {
  accent-color: var(--c-accent);
  display: grid;
  gap: var(--u2);
}

.form-field {
  display: grid;
  gap: var(--u4);
}

.form-field__label {
  font-size: var(--fs-00);
  line-height: var(--lh-info);
}

.form-field__input {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.75rem;
}

.form-field__input::placeholder {
  color: var(--c-bg);
  opacity: 0.62;
}

.form-field__hint {
  font-size: var(--fs-00);
  line-height: var(--lh-info);
}

.form-field__file-box {
  border: 1px solid currentColor;
  padding: var(--u2);
}

.form-field--file .form-field__input {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  inline-size: 100%;
  letter-spacing: inherit;
  line-height: inherit;
  padding: 0;
}

.form-field--file .form-field__input::file-selector-button {
  background: transparent url("/asset/svg/icon-upload.svg") no-repeat center;
  background-size: 1.5rem 1.5rem;
  border: 0;
  color: transparent;
  cursor: pointer;
  font: inherit;
  inline-size: 2rem;
  margin-inline-end: var(--u2);
  min-block-size: 1.5rem;
  padding: 0;
}

.form-field__file-note {
  font-size: var(--fs-00);
  line-height: var(--lh-info);
  margin-block-start: var(--u2);
  margin-block-end: var(--u2);
}

.contact-form__required-note {
  font-size: var(--fs-00);
  line-height: var(--lh-info);
}

.contact-form__check {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--u2);
}

.contact-form__check input[type=checkbox] {
  appearance: none;
  background: transparent;
  block-size: 1.5rem;
  border: 1px solid var(--c-primary-ink);
  border-radius: 50%;
  flex: 0 0 1.5rem;
  inline-size: 1.5rem;
  margin: 0;
  cursor: pointer;
}

.contact-form__check input[type=checkbox]:checked {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.contact-form__hp {
  left: -999rem;
  position: absolute;
}

.site-footer {
  background: oklch(from var(--c-primary) calc(l + 0.04) c h);
  border-top: 1px solid var(--c-primary-ink);
  color: var(--c-primary-ink);
  padding-block: var(--u);
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-variation-settings: "wght" var(--fw-regular-on-dark);
  font-weight: var(--fw-regular-on-dark);
}

.site-footer strong {
  font-variation-settings: "wght" var(--fw-semibold-on-dark);
  font-weight: var(--fw-semibold-on-dark);
}

.site-footer__inner {
  display: grid;
  column-gap: 20px;
  row-gap: var(--u);
}

.site-footer__title {
  line-height: 1.1;
  margin-block-end: var(--u2);
}

.site-footer p {
  font-size: var(--fs-0);
  line-height: var(--lh-info);
  margin-block-end: var(--u2);
}

.site-footer a {
  color: var(--c-primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

@media (min-width: 60rem) {
  .site-footer__inner {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .site-footer__col:nth-child(1) {
    grid-column: span 2;
  }
  .site-footer__col:nth-child(2) {
    border-inline: 1px solid oklch(from var(--c-primary-ink) l c h/0.45);
    grid-column: span 3;
    padding-inline: var(--u2);
  }
  .site-footer__col:nth-child(3) {
    border-inline-start: 1px solid oklch(from var(--c-primary-ink) l c h/0.45);
    grid-column: span 3;
    padding-inline-start: var(--u2);
  }
}
.legal {
  padding-block: var(--u-2);
}

.legal__block {
  margin-block-start: var(--u);
  max-inline-size: 75ch;
}

.icon {
  block-size: 2.5rem;
  inline-size: 2.5rem;
}

.admin {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-variation-settings: "wght" var(--fw-regular);
  font-weight: var(--fw-regular);
}

.admin__main {
  display: grid;
  gap: var(--u);
  margin-inline: auto;
  max-inline-size: 48rem;
  padding: var(--u-2) 1rem;
}

.admin__content,
.admin__login {
  display: grid;
  gap: var(--u2);
}

.admin__content[hidden],
.admin__login[hidden] {
  display: none;
}