:root {
    --ink: #061a2b;
    --ink-2: #0b2438;
    --navy: #0a3755;
    --navy-2: #124a70;
    --indigo: #6366f1;
    --indigo-600: #5558e6;
    --indigo-700: #4649d6;
    --indigo-800: #3b3eb8;
    --indigo-light: #a5b4fc;
    --indigo-tint: #e8eaff;
    --paper: #f5f6fb;
    --paper-2: #eceef8;
    --white: #ffffff;
    --amber: #f5b94a;

    --success-on-light: #06703f;
    --success-on-dark: #6ee7a8;
    --error-on-light: #b42318;
    --error-on-dark: #ffa59b;

    --fg-on-dark: #f5f6fb;
    --fg-muted-on-dark: #a9b9cc;
    --line-on-dark: rgb(165 180 252 / 0.18);
    --fg-on-light: #061a2b;
    --fg-muted-on-light: #475a6e;
    --line-on-light: rgb(10 55 85 / 0.14);

    --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --font-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-display: clamp(2.75rem, 1.55rem + 5.2vw, 5.5rem);
    --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
    --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
    --fs-h4: 1.125rem;
    --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
    --fs-body: 1rem;
    --fs-small: 0.9375rem;
    --fs-xs: 0.8125rem;

    --lh-tight: 1.04;
    --lh-heading: 1.12;
    --lh-body: 1.62;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;
    --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);

    --w-narrow: 44rem;
    --w-content: 70rem;
    --w-wide: 80rem;

    --r-sm: 8px;
    --r-md: 12px;
    --r-plate: 20px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgb(6 26 43 / 0.08), 0 2px 6px rgb(6 26 43 / 0.06);
    --shadow-2: 0 6px 16px -6px rgb(6 26 43 / 0.2), 0 2px 4px rgb(6 26 43 / 0.06);
    --shadow-plate: 0 18px 36px -14px rgb(6 26 43 / 0.28), 0 3px 8px rgb(6 26 43 / 0.08);
    --shadow-plate-dark: 0 22px 44px -16px rgb(0 0 0 / 0.6), 0 3px 8px rgb(0 0 0 / 0.3);
    --shadow-button: 0 8px 18px -8px rgb(85 88 230 / 0.7), 0 2px 4px rgb(6 26 43 / 0.2);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 140ms;
    --dur-2: 260ms;
    --dur-3: 560ms;
    --dur-4: 900ms;

    --focus-ring-light: #4649d6;
    --focus-ring-dark: #a5b4fc;

    --fg: var(--fg-on-light);
    --fg-muted: var(--fg-muted-on-light);
    --line: var(--line-on-light);
    --link: var(--indigo-700);
    --link-hover: var(--indigo-800);
    --surface: var(--white);
    --focus-ring: var(--focus-ring-light);
    --field-bg: var(--white);
    --field-border: rgb(10 55 85 / 0.28);
    --field-border-hover: rgb(10 55 85 / 0.5);
    --field-placeholder: #5c6e80;
    --ok: var(--success-on-light);
    --bad: var(--error-on-light);
    --marker: var(--amber);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23061a2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5L13.5 8 9 12.5'/%3E%3C/svg%3E");
    --plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 2.5v11M2.5 8h11'/%3E%3C/svg%3E");
}

.ground-ink,
.section--ink,
.ground-navy,
.section--navy {
    --fg: var(--fg-on-dark);
    --fg-muted: var(--fg-muted-on-dark);
    --line: var(--line-on-dark);
    --link: var(--indigo-light);
    --link-hover: #ffffff;
    --surface: var(--ink-2);
    --focus-ring: var(--focus-ring-dark);
    --field-bg: rgb(255 255 255 / 0.06);
    --field-border: rgb(165 180 252 / 0.34);
    --field-border-hover: rgb(165 180 252 / 0.6);
    --field-placeholder: #8fa3b8;
    --ok: var(--success-on-dark);
    --bad: var(--error-on-dark);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a5b4fc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    color: var(--fg);
}

.ground-ink,
.section--ink {
    background: var(--ink);
}

.ground-navy,
.section--navy {
    background: var(--navy);
    --surface: #0d4163;
}

.ground-paper,
.section--paper {
    background: var(--paper);
    color: var(--fg);
}

.ground-white,
.section--white {
    background: var(--white);
    color: var(--fg);
}

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

html {
    background: var(--ink);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    scrollbar-color: #5b6fb0 var(--ink-2);
    scrollbar-width: thin;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--fg-on-light);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    caret-color: var(--indigo);
}

main {
    flex: 1 0 auto;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
.h-display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: balance;
}

.h-display {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.035em;
    font-weight: 800;
}

h1,
.h1 {
    font-size: var(--fs-h1);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
}

h2,
.h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.025em;
}

h3,
.h3 {
    font-size: var(--fs-h3);
    letter-spacing: -0.015em;
}

h4,
.h4 {
    font-size: var(--fs-h4);
    letter-spacing: -0.01em;
}

p {
    text-wrap: pretty;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--fg-muted);
    max-width: 38em;
}

.text-muted {
    color: var(--fg-muted);
}

.text-small {
    font-size: var(--fs-small);
}

.text-xs {
    font-size: var(--fs-xs);
}

.measure {
    max-width: 68ch;
}

.measure-narrow {
    max-width: 52ch;
}

.balance {
    text-wrap: balance;
}

.num,
.price {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.price {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}

a:hover {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

strong,
b {
    font-weight: 700;
}

hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 0;
}

::selection {
    background: var(--indigo);
    color: #ffffff;
    text-shadow: none;
}

.ground-ink ::selection,
.section--ink ::selection,
.ground-navy ::selection,
.section--navy ::selection {
    background: var(--indigo-light);
    color: var(--ink);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--ink-2);
}

::-webkit-scrollbar-thumb {
    background: #3f4f86;
    border: 3px solid var(--ink-2);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--indigo);
}

input,
textarea,
select,
button {
    font: inherit;
    color: inherit;
}

input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--indigo-600);
}

::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: calc(var(--w-content) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: calc(var(--w-narrow) + var(--gutter) * 2);
}

.container--wide {
    max-width: calc(var(--w-wide) + var(--gutter) * 2);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.6);
}

.section--flush-top {
    padding-top: 0;
}

.section--flush-bottom {
    padding-bottom: 0;
}

.section-head {
    display: grid;
    gap: var(--s-4);
    max-width: 44rem;
    margin-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--s-4));
}

.stack--sm {
    --stack-gap: var(--s-2);
}

.stack--lg {
    --stack-gap: var(--s-6);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--s-4));
}

.cluster--sm {
    --cluster-gap: var(--s-2);
}

.cluster--center {
    justify-content: center;
}

.grid {
    display: grid;
    gap: var(--grid-gap, var(--s-5));
}

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
}

@media (max-width: 860px) {
    .grid--2,
    .grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid--split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.plate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-plate);
    padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
    box-shadow: var(--shadow-plate);
}

.ground-ink .plate,
.section--ink .plate,
.ground-navy .plate,
.section--navy .plate {
    box-shadow: var(--shadow-plate-dark);
}

.plate--flat {
    box-shadow: none;
}

.plate--paper {
    background: var(--paper);
}

.plate--interactive {
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.plate--interactive:hover {
    transform: translateY(-3px);
    border-color: var(--field-border-hover);
}

.btn {
    --btn-bg: var(--indigo-600);
    --btn-bg-hover: var(--indigo-700);
    --btn-fg: #ffffff;
    --btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid var(--btn-border);
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-button);
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-fg);
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgb(85 88 230 / 0.75), 0 3px 6px rgb(6 26 43 / 0.2);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px -4px rgb(85 88 230 / 0.6);
    transition-duration: var(--dur-1);
}

.btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--r-md);
}

.btn--secondary {
    --btn-bg: transparent;
    --btn-bg-hover: var(--ink);
    --btn-fg: var(--ink);
    --btn-border: var(--ink);
    box-shadow: none;
}

.btn--secondary:hover {
    color: #ffffff;
    box-shadow: var(--shadow-2);
}

.btn--secondary:active {
    box-shadow: none;
}

.ground-ink .btn--secondary,
.section--ink .btn--secondary,
.ground-navy .btn--secondary,
.section--navy .btn--secondary {
    --btn-fg: #ffffff;
    --btn-border: rgb(255 255 255 / 0.5);
    --btn-bg-hover: #ffffff;
}

.ground-ink .btn--secondary:hover,
.section--ink .btn--secondary:hover,
.ground-navy .btn--secondary:hover,
.section--navy .btn--secondary:hover {
    color: var(--ink);
    border-color: #ffffff;
}

.btn--ghost {
    --btn-bg: rgb(255 255 255 / 0.08);
    --btn-bg-hover: rgb(255 255 255 / 0.16);
    --btn-fg: #ffffff;
    --btn-border: rgb(255 255 255 / 0.16);
    box-shadow: none;
}

.btn--ghost:hover {
    box-shadow: none;
    border-color: rgb(255 255 255 / 0.32);
}

.btn--sm {
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.9375rem;
    border-radius: 10px;
}

.btn--lg {
    min-height: 3.5rem;
    padding: 0.9rem 2rem;
    font-size: 1.0625rem;
    border-radius: 14px;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.btn.is-loading,
.btn[aria-busy='true'] {
    pointer-events: none;
    cursor: progress;
    color: transparent;
    transform: none;
}

.btn.is-loading::after,
.btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2.5px solid rgb(255 255 255 / 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: site-spin 0.7s linear infinite;
}

.btn--secondary.is-loading::after,
.btn--secondary[aria-busy='true']::after {
    border-color: rgb(6 26 43 / 0.25);
    border-top-color: var(--ink);
}

.ground-ink .btn--secondary.is-loading::after,
.section--ink .btn--secondary.is-loading::after {
    border-color: rgb(255 255 255 / 0.3);
    border-top-color: #ffffff;
}

.btn.is-loading > *,
.btn[aria-busy='true'] > * {
    opacity: 0;
}

@keyframes site-spin {
    to {
        transform: rotate(360deg);
    }
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 650;
    color: var(--link);
    text-decoration: none;
    padding-block: 0.25rem;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color var(--dur-1) var(--ease-out), background-size var(--dur-2) var(--ease-out);
}

.link-arrow::after {
    content: '';
    width: 1.05em;
    height: 1.05em;
    background: currentColor;
    -webkit-mask: var(--arrow-icon) center / contain no-repeat;
    mask: var(--arrow-icon) center / contain no-repeat;
    transition: transform var(--dur-2) var(--ease-out);
}

.link-arrow:hover {
    color: var(--link-hover);
    background-size: calc(100% - 1.55em) 1.5px;
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

.ground-ink .link-arrow,
.section--ink .link-arrow,
.ground-navy .link-arrow,
.section--navy .link-arrow {
    color: #ffffff;
}

.field {
    display: grid;
    gap: var(--s-2);
}

.label {
    font-size: var(--fs-small);
    font-weight: 650;
    color: var(--fg);
    line-height: 1.3;
}

.label .optional {
    font-weight: 500;
    color: var(--fg-muted);
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    background: var(--field-bg);
    color: var(--fg);
    border: 1.5px solid var(--field-border);
    border-radius: var(--r-md);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--field-border-hover);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 4px rgb(99 102 241 / 0.28);
}

.textarea {
    min-height: 8rem;
    resize: vertical;
}

.select {
    padding-right: 2.75rem;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    cursor: pointer;
}

.select option {
    color: #061a2b;
    background: #ffffff;
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'],
.field.is-error .input,
.field.is-error .select,
.field.is-error .textarea {
    border-color: var(--bad);
}

.input[aria-invalid='true']:focus,
.select[aria-invalid='true']:focus,
.textarea[aria-invalid='true']:focus,
.field.is-error .input:focus,
.field.is-error .select:focus,
.field.is-error .textarea:focus {
    box-shadow: 0 0 0 4px rgb(220 70 55 / 0.25);
}

.field.is-success .input,
.field.is-success .select,
.field.is-success .textarea {
    border-color: var(--ok);
}

.hint {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--fg-muted);
}

.error-msg,
.success-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
}

.error-msg {
    color: var(--bad);
}

.success-msg {
    color: var(--ok);
}

.error-msg[hidden],
.success-msg[hidden] {
    display: none;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--fg);
    cursor: pointer;
}

.check input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
}

.notice {
    padding: 1rem 1.25rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    font-size: var(--fs-small);
    line-height: 1.5;
}

.notice--error {
    border-color: var(--bad);
    color: var(--bad);
}

.notice--success {
    border-color: var(--ok);
    color: var(--ok);
}

.marker {
    position: relative;
    display: inline-block;
    isolation: isolate;
    white-space: nowrap;
}

.marker__stroke {
    position: absolute;
    left: -3%;
    bottom: -0.1em;
    width: 106%;
    height: 0.36em;
    z-index: -1;
    overflow: visible;
    pointer-events: none;
}

.marker__stroke path {
    fill: none;
    stroke: var(--marker);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1.02;
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .marker__stroke path {
        animation: site-marker 0.95s var(--ease-out) 0.4s both;
    }
}

@keyframes site-marker {
    from {
        stroke-dashoffset: 1.02;
    }

    to {
        stroke-dashoffset: 0;
    }
}

[data-reveal] {
    --reveal-y: 18px;
}

html.reveal-on [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(var(--reveal-y));
}

html.reveal-on [data-reveal='left']:not(.is-in) {
    transform: translateX(-24px);
}

html.reveal-on [data-reveal='right']:not(.is-in) {
    transform: translateX(24px);
}

html.reveal-on [data-reveal='fade']:not(.is-in) {
    transform: none;
}

html.reveal-on [data-reveal] {
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html.reveal-on [data-reveal]:not(.is-in) {
        opacity: 1;
        transform: none;
    }

    html.reveal-on [data-reveal] {
        transition: none;
    }
}

.faq {
    border-top: 1px solid var(--line);
}

.faq__item {
    border-bottom: 1px solid var(--line);
}

.faq__item > summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: 4rem;
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--fg);
    transition: color var(--dur-1) var(--ease-out);
}

.faq__item > summary::-webkit-details-marker {
    display: none;
}

.faq__item > summary::after {
    content: '';
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--link);
    -webkit-mask: var(--plus-icon) center / 1.1rem no-repeat;
    mask: var(--plus-icon) center / 1.1rem no-repeat;
    transition: transform var(--dur-2) var(--ease-out);
}

.faq__item > summary:hover {
    color: var(--link);
}

.faq__item[open] > summary::after {
    transform: rotate(135deg);
}

.faq__item > summary:focus-visible {
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.faq__body {
    padding: 0 3rem 1.5rem 0;
    max-width: 62ch;
    color: var(--fg-muted);
}

.faq__body > * + * {
    margin-top: var(--s-3);
}

@supports (interpolate-size: allow-keywords) {
    .faq__item {
        interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
    }

    .faq__item[open]::details-content {
        block-size: auto;
    }
}

.seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.seg::-webkit-scrollbar {
    display: none;
}

.seg__item {
    flex: none;
    min-height: 2.5rem;
    padding: 0.5rem 1.2rem;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--fg-muted);
    font-family: var(--font-text);
    font-size: var(--fs-small);
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.seg__item:hover {
    color: var(--fg);
}

.seg__item[aria-selected='true'],
.seg__item[aria-pressed='true'],
.seg__item.is-active {
    background: var(--indigo-600);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgb(85 88 230 / 0.8);
}

.seg__item:focus-visible {
    outline-offset: 2px;
    border-radius: var(--r-pill);
}

.seg__item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tabpanel[hidden] {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.25rem 0.8rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    color: var(--fg);
    font-size: var(--fs-xs);
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

a.chip:hover,
button.chip:hover {
    background: color-mix(in srgb, var(--fg) 12%, transparent);
    border-color: var(--field-border-hover);
    color: var(--fg);
    transform: translateY(-1px);
}

button.chip {
    cursor: pointer;
}

.chip--indigo {
    background: var(--indigo-tint);
    border-color: transparent;
    color: var(--indigo-800);
}

.ground-ink .chip--indigo,
.section--ink .chip--indigo,
.ground-navy .chip--indigo,
.section--navy .chip--indigo {
    background: rgb(165 180 252 / 0.16);
    color: var(--indigo-light);
}

.chip--outline {
    background: transparent;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1.1rem;
    border-radius: var(--r-md);
    background: #ffffff;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-2) var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}