*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink-1); color: var(--ink-8); font: var(--fs-400)/var(--lh-base) var(--ff-ui); -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: contain; overflow-x: clip; } h1, h2, p, figure { margin: 0; } [hidden] { display: none; } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .page { --page-pad: var(--sp-3); max-width: var(--maxw-page); margin-inline: auto; padding-inline: var(--page-pad); } @media (max-width: 359px) { .page { --page-pad: var(--sp-2); } } @media (min-width: 720px) { .page { --page-pad: var(--sp-6); } } @media (min-width: 1280px) { .page { --page-pad: var(--sp-7); } } .rule { height: 1px; margin: 0; background: var(--ink-4); border: 0; } .rule--strong { height: var(--bw-3); width: 56px; margin: 0 auto; background: var(--ink-9); border: 0; } .rule--dotted { height: 1px; margin: 0; border: 0; background-image: repeating-linear-gradient(90deg, var(--ink-4) 0 2px, transparent 2px 6px); } .rule--v { width: 1px; align-self: stretch; background: var(--ink-4); } .label { font: var(--fs-100)/1 var(--ff-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-6); } .btn { padding: var(--sp-3) var(--sp-5); min-height: 48px; border-radius: var(--r-1); border: 0; font: var(--fs-300)/1 var(--ff-ui); letter-spacing: .10em; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .btn--primary { background: var(--ink-9); color: var(--ink-0); } .btn--primary:hover { background: var(--ink-8); } .btn--primary:active { transform: translateY(1px); } .btn--ghost { background: transparent; color: var(--ink-8); border: var(--bw-1) solid var(--ink-4); } .btn--ghost:hover { border-color: var(--ink-6); color: var(--ink-9); } .btn--ghost:active { transform: translateY(1px); } .btn--xl { padding: 20px 48px; min-height: 64px; font-size: var(--fs-500); } .btn[disabled] { background: transparent; color: var(--ink-5); border: var(--bw-1) solid var(--ink-4); cursor: default; pointer-events: none; } .icon { display: block; fill: none; stroke: currentColor; } .icon--fill { fill: currentColor; stroke: none; } .footer { display: none; padding-block: var(--sp-8) var(--sp-6); text-align: center; font: var(--fs-100)/1 var(--ff-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-5); } @media (min-width: 1024px) { .footer { display: block; } }