/* cs-button */
.cs-button { display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem; box-sizing: border-box; min-height: 3.25rem; max-width: 100%; padding: .875rem 1.5rem; border: .0625rem solid var(--brand-primary); border-radius: var(--radius); background-color: var(--brand-primary); color: var(--brand-paper-on-dark); font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--brand-dark) 8%, transparent); }
.cs-button__label { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: normal; text-wrap: balance; }
.cs-button__icon { flex-shrink: 0; font-size: 1.125em; line-height: 1; }
.cs-button:hover { background-color: var(--brand-primary-deep); border-color: var(--brand-primary-deep); }
.cs-button:focus-visible { outline: .1875rem solid var(--brand-primary); outline-offset: .25rem; }
.cs-button:active { background-color: var(--brand-primary-deep); border-color: var(--brand-primary-deep); box-shadow: none; transform: translateY(.0625rem); }
.cs-button--primary { background-color: var(--brand-primary); color: var(--brand-paper-on-dark); border-color: var(--brand-primary); }
.cs-button--primary:hover { background-color: var(--brand-primary-deep); border-color: var(--brand-primary-deep); }
.cs-button--primary:active { background-color: var(--brand-primary-deep); border-color: var(--brand-primary-deep); }
.cs-button--secondary { background-color: transparent; color: var(--brand-primary); border-color: var(--brand-primary); box-shadow: none; }
.cs-button--secondary:hover { background-color: color-mix(in srgb, var(--brand-primary) 8%, var(--brand-paper)); color: var(--brand-primary-deep); border-color: var(--brand-primary-deep); }
.cs-button--secondary:active { background-color: color-mix(in srgb, var(--brand-primary) 14%, var(--brand-paper)); color: var(--brand-primary-deep); }
.cs-button--plain { padding-inline: .25rem; border-color: transparent; background-color: transparent; color: var(--brand-primary); box-shadow: none; text-decoration: underline; text-decoration-thickness: .0625rem; }
.cs-button--plain:hover { background-color: transparent; border-color: transparent; color: var(--brand-primary-deep); text-decoration-thickness: .125rem; }
.cs-button--plain:active { background-color: transparent; border-color: transparent; color: var(--brand-primary-deep); }
.cs-button--sm { min-height: 2.75rem; padding-block: .625rem; font-size: .9375rem; gap: .75rem; }
.cs-button--md { min-height: 3.25rem; padding-block: .875rem; font-size: 1rem; }
.cs-button--lg { min-height: 3.75rem; padding-block: 1.125rem; font-size: 1.125rem; gap: 1.75rem; }
.cs-button[data-tone="dark"] { border-color: color-mix(in srgb, var(--brand-paper-on-dark) 55%, var(--brand-primary)); }
.cs-button[data-tone="dark"]:focus-visible { outline-color: var(--brand-paper-on-dark); }
.cs-button--secondary[data-tone="dark"] { color: var(--brand-paper-on-dark); background-color: transparent; border-color: var(--brand-paper-on-dark); }
.cs-button--secondary[data-tone="dark"]:hover { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 10%, var(--brand-dark)); }
.cs-button--secondary[data-tone="dark"]:active { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 16%, var(--brand-dark)); }
.cs-button--plain[data-tone="dark"] { color: var(--brand-paper-on-dark); background-color: transparent; border-color: transparent; }
.cs-button--plain[data-tone="dark"]:hover { color: var(--brand-paper-on-dark); border-color: transparent; }
.cs-button--plain[data-tone="dark"]:active { color: var(--brand-paper-on-dark); border-color: transparent; }
.cs-button[aria-disabled="true"] { background-color: var(--brand-surface); color: var(--brand-ink-soft); border-color: var(--brand-ink-soft); box-shadow: none; transform: none; text-decoration: none; cursor: not-allowed; }
.cs-button[aria-disabled="true"][data-tone="dark"] { background-color: var(--brand-dark); color: color-mix(in srgb, var(--brand-paper-on-dark) 65%, var(--brand-dark)); border-color: color-mix(in srgb, var(--brand-paper-on-dark) 45%, var(--brand-dark)); }

/* cs-card */
.cs-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; box-sizing: border-box; min-width: 0; padding: 2rem; border: .0625rem solid transparent; border-radius: var(--radius); background-color: var(--brand-surface); color: var(--brand-ink); font-family: var(--font-body); }
.cs-card:hover { border-color: color-mix(in srgb, var(--brand-ink) 22%, var(--brand-surface)); }
.cs-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: .5rem; }
.cs-card__kicker { color: var(--brand-ink-soft); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.cs-card__heading { margin: 0; max-width: 19ch; font-family: var(--font-heading); font-weight: 500; font-size: 1.875rem; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cs-card__body { margin: 0; max-width: 34em; color: var(--brand-ink-soft); font-size: 1rem; line-height: 1.65; }
.cs-card__action { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: auto; padding-top: .75rem; color: var(--brand-primary); border-radius: var(--radius); font-size: 1rem; font-weight: 500; line-height: 1.5; text-decoration: underline; text-decoration-thickness: .0625rem; }
.cs-card__action:hover { color: var(--brand-primary-deep); text-decoration-thickness: .125rem; }
.cs-card__action:focus-visible { outline: .1875rem solid var(--brand-primary); outline-offset: .25rem; }
.cs-card--plain { background-color: var(--brand-surface); box-shadow: none; }
.cs-card--raised { background-color: var(--brand-paper); box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--brand-dark) 8%, transparent); }
.cs-card--outlined { background-color: transparent; border-color: color-mix(in srgb, var(--brand-ink) 25%, var(--brand-paper)); box-shadow: none; }
.cs-card--outlined:hover { border-color: color-mix(in srgb, var(--brand-ink) 45%, var(--brand-paper)); }
.cs-card[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 7%, var(--brand-dark)); color: var(--brand-paper-on-dark); }
.cs-card[data-tone="dark"]:hover { border-color: color-mix(in srgb, var(--brand-paper-on-dark) 35%, var(--brand-dark)); }
.cs-card[data-tone="dark"] .cs-card__kicker { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-card[data-tone="dark"] .cs-card__body { color: color-mix(in srgb, var(--brand-paper-on-dark) 80%, var(--brand-dark)); }
.cs-card[data-tone="dark"] .cs-card__action { color: var(--brand-paper-on-dark); }
.cs-card[data-tone="dark"] .cs-card__action:focus-visible { outline-color: var(--brand-paper-on-dark); }
.cs-card--raised[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 11%, var(--brand-dark)); }
.cs-card--outlined[data-tone="dark"] { background-color: transparent; border-color: color-mix(in srgb, var(--brand-paper-on-dark) 28%, var(--brand-dark)); }
.cs-card--outlined[data-tone="dark"]:hover { border-color: color-mix(in srgb, var(--brand-paper-on-dark) 45%, var(--brand-dark)); }

/* cs-accordion */
.cs-accordion { box-sizing: border-box; border-bottom: .0625rem solid color-mix(in srgb, var(--brand-ink) 22%, var(--brand-paper)); color: var(--brand-ink); font-family: var(--font-body); }
.cs-accordion__question { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 3.5rem; box-sizing: border-box; padding: 1.375rem .25rem; border-radius: var(--radius); font-family: var(--font-heading); font-size: 1.375rem; font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; }
.cs-accordion__question::marker { content: ''; }
.cs-accordion__question::-webkit-details-marker { display: none; }
.cs-accordion__question::after { content: '+'; flex-shrink: 0; width: 1.5rem; color: var(--brand-primary); font-family: var(--font-body); font-size: 1.5rem; font-weight: 400; line-height: 1; text-align: center; }
.cs-accordion__question:focus-visible { outline: .1875rem solid var(--brand-primary); outline-offset: .1875rem; }
.cs-accordion__answer { max-width: 35em; padding: 0 2.75rem 1.75rem .25rem; color: var(--brand-ink-soft); font-size: 1rem; line-height: 1.7; }
.cs-accordion:hover .cs-accordion__question { color: var(--brand-primary-deep); }
.cs-accordion[open] .cs-accordion__question { padding-bottom: 1rem; }
.cs-accordion[open] .cs-accordion__question::after { content: '−'; }
.cs-accordion--divided { border-bottom: .0625rem solid color-mix(in srgb, var(--brand-ink) 22%, var(--brand-paper)); background-color: transparent; }
.cs-accordion--boxed { padding-inline: 1.5rem; border: .0625rem solid transparent; border-radius: var(--radius); background-color: var(--brand-surface); }
.cs-accordion--boxed:hover { border-color: color-mix(in srgb, var(--brand-ink) 25%, var(--brand-surface)); }
.cs-accordion--boxed[open] { border-color: color-mix(in srgb, var(--brand-ink) 25%, var(--brand-surface)); }
.cs-accordion[data-tone="dark"] { color: var(--brand-paper-on-dark); border-color: color-mix(in srgb, var(--brand-paper-on-dark) 25%, var(--brand-dark)); }
.cs-accordion[data-tone="dark"] .cs-accordion__answer { color: color-mix(in srgb, var(--brand-paper-on-dark) 80%, var(--brand-dark)); }
.cs-accordion[data-tone="dark"] .cs-accordion__question::after { color: var(--brand-paper-on-dark); }
.cs-accordion[data-tone="dark"] .cs-accordion__question:focus-visible { outline-color: var(--brand-paper-on-dark); }
.cs-accordion[data-tone="dark"]:hover .cs-accordion__question { color: var(--brand-paper-on-dark); text-decoration: underline; text-decoration-thickness: .0625rem; }
.cs-accordion--boxed[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 7%, var(--brand-dark)); }
.cs-accordion--boxed[data-tone="dark"]:hover { border-color: color-mix(in srgb, var(--brand-paper-on-dark) 45%, var(--brand-dark)); }
.cs-accordion--boxed[data-tone="dark"][open] { border-color: color-mix(in srgb, var(--brand-paper-on-dark) 45%, var(--brand-dark)); }

/* cs-quote */
.cs-quote { box-sizing: border-box; margin: 0; padding: 2rem 0; color: var(--brand-ink); font-family: var(--font-body); }
.cs-quote__words { margin: 0; max-width: 24em; font-family: var(--font-heading); font-weight: 500; font-size: 2rem; font-style: normal; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cs-quote__attribution { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; margin-top: 1.75rem; }
.cs-quote__name { display: block; font-size: 1rem; font-weight: 500; line-height: 1.5; }
.cs-quote__detail { display: block; color: var(--brand-ink-soft); font-size: .9375rem; line-height: 1.5; }
.cs-quote__photo { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: .5rem; border-radius: var(--radius); object-fit: cover; }
.cs-quote--large { padding-block: 3rem; }
.cs-quote--large .cs-quote__words { max-width: 22em; font-size: 2.5rem; line-height: 1.35; }
.cs-quote--large .cs-quote__attribution { margin-top: 2rem; padding-left: 1rem; border-left: .125rem solid var(--brand-accent); }
.cs-quote--card { padding: 2rem; border-radius: var(--radius); background-color: var(--brand-surface); }
.cs-quote--card .cs-quote__words { font-size: 1.625rem; line-height: 1.5; }
.cs-quote[data-tone="dark"] { color: var(--brand-paper-on-dark); }
.cs-quote[data-tone="dark"] .cs-quote__detail { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-quote--card[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 7%, var(--brand-dark)); }

/* cs-divider */
.cs-divider { display: flex; align-items: center; gap: 1.25rem; width: 100%; margin-block: 2rem; color: var(--brand-ink-soft); font-family: var(--font-body); }
.cs-divider::before { content: ''; display: block; flex: 1; height: .0625rem; background-color: color-mix(in srgb, var(--brand-ink) 20%, var(--brand-paper)); }
.cs-divider__words { display: none; max-width: 70%; font-size: .875rem; font-weight: 400; line-height: 1.5; text-align: center; }
.cs-divider--full { width: 100%; }
.cs-divider--accent { width: 3.5rem; }
.cs-divider--accent::before { height: .125rem; border-radius: var(--radius); background-color: var(--brand-accent); }
.cs-divider--words .cs-divider__words { display: block; }
.cs-divider--words::after { content: ''; display: block; flex: 1; height: .0625rem; background-color: color-mix(in srgb, var(--brand-ink) 20%, var(--brand-paper)); }
.cs-divider[data-tone="dark"] { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-divider[data-tone="dark"]::before { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 25%, var(--brand-dark)); }
.cs-divider--words[data-tone="dark"]::after { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 25%, var(--brand-dark)); }
.cs-divider--accent[data-tone="dark"]::before { background-color: var(--brand-accent); }

/* cs-photo-frame */
.cs-photo-frame { box-sizing: border-box; width: 100%; margin: 0; color: var(--brand-ink-soft); font-family: var(--font-body); }
.cs-photo-frame__image { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border: .0625rem solid color-mix(in srgb, var(--brand-ink) 15%, var(--brand-paper)); border-radius: var(--radius); background-color: var(--brand-surface); }
.cs-photo-frame__caption { max-width: 36em; margin-top: .875rem; font-size: .875rem; line-height: 1.6; }
.cs-photo-frame--square .cs-photo-frame__image { aspect-ratio: 1 / 1; border-radius: var(--radius); }
.cs-photo-frame--soft .cs-photo-frame__image { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.cs-photo-frame--rounded .cs-photo-frame__image { aspect-ratio: 4 / 3; border-radius: calc(var(--radius) * 2); }
.cs-photo-frame--round { max-width: 18rem; }
.cs-photo-frame--round .cs-photo-frame__image { aspect-ratio: 1 / 1; border-radius: calc(var(--radius) * 100); }
.cs-photo-frame--round .cs-photo-frame__caption { text-align: center; }
.cs-photo-frame[data-tone="dark"] { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-photo-frame[data-tone="dark"] .cs-photo-frame__image { border-color: color-mix(in srgb, var(--brand-paper-on-dark) 25%, var(--brand-dark)); background-color: color-mix(in srgb, var(--brand-paper-on-dark) 7%, var(--brand-dark)); }

/* cs-badge */
.cs-badge { display: inline-flex; align-items: center; box-sizing: border-box; max-width: 100%; padding: .375rem .75rem; border: .0625rem solid transparent; border-radius: var(--radius); background-color: var(--brand-surface); color: var(--brand-ink-soft); font-family: var(--font-body); font-size: .875rem; font-weight: 500; line-height: 1.4; }
.cs-badge__words { overflow-wrap: anywhere; }
.cs-badge--filled { background-color: var(--brand-surface); border-color: transparent; }
.cs-badge--outlined { background-color: transparent; border-color: color-mix(in srgb, var(--brand-ink-soft) 45%, var(--brand-paper)); }
.cs-badge--sm { padding: .25rem .625rem; font-size: .8125rem; }
.cs-badge--md { padding: .375rem .75rem; font-size: .875rem; }
.cs-badge[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 10%, var(--brand-dark)); color: var(--brand-paper-on-dark); }
.cs-badge--outlined[data-tone="dark"] { background-color: transparent; border-color: color-mix(in srgb, var(--brand-paper-on-dark) 40%, var(--brand-dark)); }

/* cs-icon-tile */
.cs-icon-tile { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; width: 3.5rem; height: 3.5rem; color: var(--brand-ink-soft); font-family: var(--font-body); font-size: 1rem; }
.cs-icon-tile__icon { display: block; position: relative; box-sizing: border-box; width: 1.5em; height: 1.5em; border: .09375em solid var(--brand-ink-soft); border-radius: calc(var(--radius) * 100); }
.cs-icon-tile__icon::before { content: ''; position: absolute; width: .09375em; height: .4375em; top: .25em; left: .609375em; border-radius: var(--radius); background-color: var(--brand-ink-soft); }
.cs-icon-tile__icon::after { content: ''; position: absolute; width: .375em; height: .09375em; top: .609375em; left: .609375em; border-radius: var(--radius); background-color: var(--brand-ink-soft); }
.cs-icon-tile--bare { background-color: transparent; }
.cs-icon-tile--circle { background-color: var(--brand-surface); border-radius: calc(var(--radius) * 100); }
.cs-icon-tile--tile { background-color: var(--brand-surface); border-radius: var(--radius); }
.cs-icon-tile--sm { width: 2.75rem; height: 2.75rem; font-size: .875rem; }
.cs-icon-tile--md { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
.cs-icon-tile--lg { width: 4.5rem; height: 4.5rem; font-size: 1.25rem; }
.cs-icon-tile[data-tone="dark"] { color: var(--brand-paper-on-dark); }
.cs-icon-tile[data-tone="dark"] .cs-icon-tile__icon { border-color: var(--brand-paper-on-dark); }
.cs-icon-tile[data-tone="dark"] .cs-icon-tile__icon::before { background-color: var(--brand-paper-on-dark); }
.cs-icon-tile[data-tone="dark"] .cs-icon-tile__icon::after { background-color: var(--brand-paper-on-dark); }
.cs-icon-tile--circle[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 9%, var(--brand-dark)); }
.cs-icon-tile--tile[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 9%, var(--brand-dark)); }

/* cs-number-callout */
.cs-number-callout { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; box-sizing: border-box; padding-block: 1.5rem; color: var(--brand-ink); font-family: var(--font-body); }
.cs-number-callout__number { display: block; max-width: 100%; font-family: var(--font-heading); font-size: 4.5rem; font-weight: 500; line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.cs-number-callout__words { margin: 0; max-width: 16em; color: var(--brand-ink-soft); font-size: 1rem; line-height: 1.6; }
.cs-number-callout--plain { background-color: transparent; }
.cs-number-callout--boxed { padding: 2rem; border-radius: var(--radius); background-color: var(--brand-surface); }
.cs-number-callout[data-tone="dark"] { color: var(--brand-paper-on-dark); }
.cs-number-callout[data-tone="dark"] .cs-number-callout__words { color: color-mix(in srgb, var(--brand-paper-on-dark) 80%, var(--brand-dark)); }
.cs-number-callout--boxed[data-tone="dark"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 7%, var(--brand-dark)); }

/* cs-list-row */
.cs-list-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .875rem; row-gap: .375rem; box-sizing: border-box; padding-block: 1rem; color: var(--brand-ink); font-family: var(--font-body); list-style: none; }
.cs-list-row::before { content: '✓'; grid-column: 1; grid-row: 1; align-self: start; padding-top: .125rem; color: var(--brand-ink-soft); font-size: 1rem; line-height: 1.5; text-align: center; }
.cs-list-row__mark { display: none; grid-column: 1; grid-row: 1; color: var(--brand-ink-soft); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; line-height: 1.4; text-align: center; }
.cs-list-row__words { grid-column: 2; grid-row: 1; font-size: 1.0625rem; font-weight: 500; line-height: 1.6; }
.cs-list-row__detail { grid-column: 2; grid-row: 2; max-width: 34em; color: var(--brand-ink-soft); font-size: 1rem; line-height: 1.65; }
.cs-list-row--check::before { content: '✓'; }
.cs-list-row--number::before { display: none; }
.cs-list-row--number .cs-list-row__mark { display: block; }
.cs-list-row--dot::before { content: ''; margin-inline: auto; width: .3125rem; height: .3125rem; margin-top: .6875rem; padding: 0; border-radius: calc(var(--radius) * 100); background-color: var(--brand-ink-soft); }
.cs-list-row[data-tone="dark"] { color: var(--brand-paper-on-dark); }
.cs-list-row[data-tone="dark"]::before { color: var(--brand-paper-on-dark); }
.cs-list-row[data-tone="dark"] .cs-list-row__mark { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-list-row[data-tone="dark"] .cs-list-row__detail { color: color-mix(in srgb, var(--brand-paper-on-dark) 80%, var(--brand-dark)); }
.cs-list-row--dot[data-tone="dark"]::before { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }

/* cs-form-field */
.cs-form-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; box-sizing: border-box; min-width: 0; color: var(--brand-ink); font-family: var(--font-body); }
.cs-form-field__label { display: block; font-size: 1rem; font-weight: 500; line-height: 1.5; }
.cs-form-field__hint { display: block; color: var(--brand-ink-soft); font-size: .875rem; line-height: 1.6; }
.cs-form-field__input, .cs-form-field__textarea, .cs-form-field__select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 3.25rem; padding: .875rem 1rem; border: .0625rem solid var(--brand-ink-soft); border-radius: var(--radius); background-color: var(--brand-paper); color: var(--brand-ink); font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.5; caret-color: var(--brand-ink); }
.cs-form-field__input { display: block; }
.cs-form-field__textarea { display: none; min-height: 9rem; resize: vertical; }
.cs-form-field__select { display: none; padding-right: 2rem; }
.cs-form-field__choice { display: none; box-sizing: border-box; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand-primary); cursor: pointer; }
.cs-form-field__input::placeholder, .cs-form-field__textarea::placeholder { color: var(--brand-ink-soft); opacity: 1; }
.cs-form-field__input:focus-visible, .cs-form-field__textarea:focus-visible, .cs-form-field__select:focus-visible, .cs-form-field__choice:focus-visible { outline: .1875rem solid var(--brand-primary); outline-offset: .1875rem; }
.cs-form-field__error { display: none; padding-left: .75rem; border-left: .1875rem solid var(--brand-ink); color: var(--brand-ink); font-size: .875rem; font-weight: 500; line-height: 1.6; }
.cs-form-field--text .cs-form-field__input { display: block; }
.cs-form-field--textarea .cs-form-field__input { display: none; }
.cs-form-field--textarea .cs-form-field__textarea { display: block; }
.cs-form-field--select .cs-form-field__input { display: none; }
.cs-form-field--select .cs-form-field__select { display: block; }
.cs-form-field--chip { grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; column-gap: .75rem; min-height: 3.25rem; padding: .875rem 1.125rem; border: .0625rem solid var(--brand-ink-soft); border-radius: calc(var(--radius) * 2); background-color: var(--brand-paper); cursor: pointer; }
.cs-form-field--chip .cs-form-field__input { display: none; }
.cs-form-field--chip .cs-form-field__choice { display: block; grid-column: 1; grid-row: 1; }
.cs-form-field--chip .cs-form-field__label { grid-column: 2; grid-row: 1; }
.cs-form-field--chip .cs-form-field__hint { grid-column: 2; }
.cs-form-field--chip .cs-form-field__error { grid-column: 2; }
.cs-form-field[data-state="filled"] .cs-form-field__input, .cs-form-field[data-state="filled"] .cs-form-field__textarea, .cs-form-field[data-state="filled"] .cs-form-field__select { background-color: var(--brand-surface); border-color: var(--brand-ink-soft); }
.cs-form-field--chip[data-state="filled"] { background-color: var(--brand-surface); border-color: var(--brand-ink); }
.cs-form-field[aria-invalid="true"] .cs-form-field__input, .cs-form-field[aria-invalid="true"] .cs-form-field__textarea, .cs-form-field[aria-invalid="true"] .cs-form-field__select { border: .1875rem double var(--brand-ink); }
.cs-form-field[aria-invalid="true"] .cs-form-field__error { display: block; }
.cs-form-field--chip[aria-invalid="true"] { border: .1875rem double var(--brand-ink); }
.cs-form-field[data-tone="dark"] { color: var(--brand-paper-on-dark); }
.cs-form-field[data-tone="dark"] .cs-form-field__hint { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-form-field[data-tone="dark"] .cs-form-field__input, .cs-form-field[data-tone="dark"] .cs-form-field__textarea, .cs-form-field[data-tone="dark"] .cs-form-field__select { background-color: var(--brand-dark); color: var(--brand-paper-on-dark); border-color: color-mix(in srgb, var(--brand-paper-on-dark) 65%, var(--brand-dark)); caret-color: var(--brand-paper-on-dark); }
.cs-form-field[data-tone="dark"] .cs-form-field__input::placeholder, .cs-form-field[data-tone="dark"] .cs-form-field__textarea::placeholder { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-form-field[data-tone="dark"] .cs-form-field__input:focus-visible, .cs-form-field[data-tone="dark"] .cs-form-field__textarea:focus-visible, .cs-form-field[data-tone="dark"] .cs-form-field__select:focus-visible, .cs-form-field[data-tone="dark"] .cs-form-field__choice:focus-visible { outline-color: var(--brand-paper-on-dark); }
.cs-form-field--chip[data-tone="dark"] { background-color: var(--brand-dark); border-color: color-mix(in srgb, var(--brand-paper-on-dark) 65%, var(--brand-dark)); }
.cs-form-field[data-tone="dark"][data-state="filled"] .cs-form-field__input, .cs-form-field[data-tone="dark"][data-state="filled"] .cs-form-field__textarea, .cs-form-field[data-tone="dark"][data-state="filled"] .cs-form-field__select { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 9%, var(--brand-dark)); }
.cs-form-field--chip[data-tone="dark"][data-state="filled"] { background-color: color-mix(in srgb, var(--brand-paper-on-dark) 9%, var(--brand-dark)); border-color: var(--brand-paper-on-dark); }
.cs-form-field[data-tone="dark"][aria-invalid="true"] .cs-form-field__input, .cs-form-field[data-tone="dark"][aria-invalid="true"] .cs-form-field__textarea, .cs-form-field[data-tone="dark"][aria-invalid="true"] .cs-form-field__select { border-color: var(--brand-paper-on-dark); }
.cs-form-field[data-tone="dark"] .cs-form-field__error { color: var(--brand-paper-on-dark); border-color: var(--brand-paper-on-dark); }
.cs-form-field--chip[data-tone="dark"][aria-invalid="true"] { border-color: var(--brand-paper-on-dark); }

/* cs-price */
.cs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; box-sizing: border-box; color: var(--brand-ink); font-family: var(--font-body); }
.cs-price__prefix { display: none; width: 100%; color: var(--brand-ink-soft); font-size: .9375rem; line-height: 1.5; }
.cs-price__amount { display: block; font-family: var(--font-heading); font-size: 3rem; font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.cs-price__unit { display: none; color: var(--brand-ink-soft); font-size: 1rem; font-weight: 400; line-height: 1.6; }
.cs-price--plain .cs-price__amount { font-size: 3rem; }
.cs-price--unit .cs-price__unit { display: block; }
.cs-price--from .cs-price__prefix { display: block; }
.cs-price--from .cs-price__unit { display: block; }
.cs-price[data-tone="dark"] { color: var(--brand-paper-on-dark); }
.cs-price[data-tone="dark"] .cs-price__prefix { color: color-mix(in srgb, var(--brand-paper-on-dark) 75%, var(--brand-dark)); }
.cs-price[data-tone="dark"] .cs-price__unit { color: color-mix(in srgb, var(--brand-paper-on-dark) 80%, var(--brand-dark)); }