:root {
  --color-deep-indigo: #27308a;
  --color-coffee-bean: #3d2800;
  --color-saffron: #f29e0c;
  --color-eggshell-cream: #fbf5e7;
  --color-ink-black: #000000;
  --color-sand-tint: #ece2cb;
  --color-mocha: #604106;
  --color-error: #c62828;

  --font-display: 'Space Grotesk', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-micro: 10px;
  --leading-micro: 1.2;
  --tracking-micro: 0.05em;
  --text-eyebrow: 12px;
  --leading-eyebrow: 1.2;
  --tracking-eyebrow: 0.022em;
  --text-caption: 14px;
  --leading-caption: 1.41;
  --tracking-caption: -0.02em;
  --text-body-sm: 16px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: -0.02em;
  --text-body: 17px;
  --leading-body: 1.6;
  --tracking-body: -0.01em;
  --text-title: 24px;
  --leading-title: 1.2;
  --tracking-title: -0.03em;
  --text-heading: clamp(40px, 6vw, 64px);
  --leading-heading: 0.95;
  --tracking-heading: -0.05em;
  --text-display: clamp(56px, 11vw, 144px);
  --leading-display: 1;
  --tracking-display: -0.06em;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-16: 16px;
  --spacing-17: 17px;
  --spacing-23: 23px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-57: 57px;
  --spacing-78: 78px;
  --spacing-80: 80px;
  --spacing-104: 104px;
  --spacing-112: 112px;
  --spacing-200: 200px;

  --section-gap: clamp(57px, 7vw, 78px);
  --card-padding: clamp(16px, 2vw, 24px);
  --element-gap: clamp(10px, 1.2vw, 16px);
  --page-gutter: clamp(16px, 5vw, 78px);
  --container-max: 1440px;
  --reading-max: 68ch;
  --touch-target-min: 44px;

  --radius-cards: 0px;
  --radius-media: 0px;
  --radius-inputs: 99px;
  --radius-textarea: 24px;
  --radius-tags: 99px;
  --radius-pills: 99px;
  --radius-buttons: 99px;
  --radius-circle: 50%;

  --border-hairline: 1px solid var(--color-ink-black);
  --border-hairline-dark: 1px solid var(--color-mocha);

  --surface-hero-indigo: #27308a;
  --surface-eggshell-canvas: #fbf5e7;
  --surface-sand-tint: #ece2cb;
  --surface-coffee-band: #3d2800;

  --focus-ring: 2px solid var(--color-ink-black);
  --focus-ring-dark: 2px solid var(--color-eggshell-cream);
  --focus-offset: 3px;

  --transition-base: 180ms ease;
  --z-preloader: 9999;

  --mandala-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23604106' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='194' stroke-dasharray='2 7'/%3E%3Ccircle cx='200' cy='200' r='176'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%280 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%2815 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%2830 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%2845 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%2860 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%2875 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%2890 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28105 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28120 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28135 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28150 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28165 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28180 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28195 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28210 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28225 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28240 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28255 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28270 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28285 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28300 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28315 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28330 200 200%29'/%3E%3Cellipse cx='200' cy='48' rx='13' ry='30' transform='rotate%28345 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%280.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%2822.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%2845.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%2867.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%2890.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28112.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28135.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28157.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28180.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28202.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28225.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28247.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28270.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28292.5 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28315.0 200 200%29'/%3E%3Cellipse cx='200' cy='96' rx='22' ry='48' transform='rotate%28337.5 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%280 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%2845 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%2890 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%28135 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%28180 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%28225 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%28270 200 200%29'/%3E%3Cpath d='M200 118 Q222 150 200 172 Q178 150 200 118 Z' transform='rotate%28315 200 200%29'/%3E%3Ccircle cx='200' cy='200' r='44'/%3E%3Ccircle cx='200' cy='200' r='30'/%3E%3Ccircle cx='200' cy='200' r='12'/%3E%3C/g%3E%3Cg fill='%23604106'%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%280 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2810 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2820 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2830 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2840 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2850 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2860 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2870 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2880 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%2890 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28100 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28110 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28120 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28130 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28140 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28150 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28160 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28170 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28180 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28190 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28200 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28210 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28220 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28230 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28240 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28250 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28260 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28270 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28280 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28290 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28300 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28310 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28320 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28330 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28340 200 200%29'/%3E%3Ccircle cx='200' cy='15' r='2.2' transform='rotate%28350 200 200%29'/%3E%3C/g%3E%3C/svg%3E");
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f29e0c'%3E%3Cellipse cx='12' cy='12' rx='3.2' ry='11'/%3E%3Cellipse cx='12' cy='12' rx='3.2' ry='11' transform='rotate(45 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='3.2' ry='11' transform='rotate(90 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='3.2' ry='11' transform='rotate(135 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23fbf5e7'/%3E%3C/svg%3E");
}

:root:lang(ja) {
  --tracking-display: 0;
  --tracking-heading: 0;
  --tracking-title: 0;
  --tracking-caption: 0;
  --tracking-body-sm: 0;
  --tracking-body: 0;
  --leading-display: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.8;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-black);
  background-color: var(--surface-eggshell-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

body.is-locked {
  overflow: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 640px;
  height: 640px;
  background: var(--mandala-line) center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

body::before {
  top: 12vh;
  left: -320px;
  animation: pre-turn 240s linear infinite;
}

body::after {
  right: -320px;
  bottom: -120px;
  animation: pre-turn 300s linear infinite reverse;
}

@media (max-width: 767.98px) {
  body::before,
  body::after {
    width: 380px;
    height: 380px;
    opacity: 0.1;
  }

  body::before {
    left: -190px;
  }

  body::after {
    right: -190px;
  }
}

button {
  font-family: inherit;
}

b,
strong {
  font-weight: var(--font-weight-medium);
}

::selection {
  background-color: var(--color-saffron);
  color: var(--color-ink-black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

h1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

h4,
h5,
h6 {
  font-size: var(--text-body);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-body);
}

p {
  margin: 0 0 var(--spacing-16);
}

a {
  color: var(--color-coffee-bean);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

a:hover {
  color: var(--color-ink-black);
  text-decoration-thickness: 2px;
}

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

hr {
  height: 0;
  margin: var(--spacing-32) 0;
  border: 0;
  border-top: var(--border-hairline);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--spacing-10) var(--spacing-16);
  text-align: start;
  border-bottom: var(--border-hairline);
}

th {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.band--indigo :focus-visible,
.band--coffee :focus-visible {
  outline: var(--focus-ring-dark);
}

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

.num {
  font-variant-numeric: tabular-nums;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.band {
  padding-block: var(--section-gap);
  background-color: var(--surface-eggshell-canvas);
}

.band--sand {
  background-color: var(--surface-sand-tint);
}

.band--indigo,
.band--coffee {
  color: var(--color-eggshell-cream);
}

.band--indigo {
  background-color: var(--surface-hero-indigo);
}

.band--coffee {
  background-color: var(--surface-coffee-band);
}

.band--indigo :is(h1, h2, h3, h4, h5, h6, a),
.band--coffee :is(h1, h2, h3, h4, h5, h6, a) {
  color: var(--color-eggshell-cream);
}

.band--coffee hr,
.band--coffee :is(th, td) {
  border-color: var(--color-mocha);
}

.eyebrow {
  display: block;
  margin: 0 0 var(--spacing-32);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.heading {
  margin: 0 0 var(--spacing-48);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.caption {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}

.prose {
  max-width: var(--reading-max);
}

.prose ul,
.rosette-list {
  margin: 0 0 var(--spacing-16);
  padding: 0;
  list-style: none;
}

.prose ul li,
.rosette-list li {
  position: relative;
  margin-bottom: var(--spacing-8);
  padding-inline-start: var(--spacing-24);
}

.prose ul li::before,
.rosette-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  background: var(--rosette) center / contain no-repeat;
}

.prose ol {
  margin: 0 0 var(--spacing-16);
  padding-inline-start: var(--spacing-24);
}

.rosette {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  background: var(--rosette) center / contain no-repeat;
}

.rosette--divider {
  display: block;
  width: 24px;
  height: 24px;
  margin: var(--section-gap) auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--touch-target-min);
  padding: var(--spacing-8) var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--surface-sand-tint);
  border-color: var(--surface-sand-tint);
  color: var(--color-mocha);
  cursor: not-allowed;
}

.btn--primary {
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
  color: var(--color-eggshell-cream);
}

.btn--primary:hover {
  background-color: var(--color-ink-black);
  border-color: var(--color-ink-black);
  color: var(--color-eggshell-cream);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--color-ink-black);
  color: var(--color-ink-black);
}

.btn--ghost:hover {
  background-color: var(--surface-sand-tint);
  color: var(--color-ink-black);
}

.btn--quiet {
  background-color: transparent;
  color: var(--color-coffee-bean);
}

.btn--quiet:hover {
  background-color: var(--surface-sand-tint);
  color: var(--color-ink-black);
}

.band--indigo .btn--primary,
.band--coffee .btn--primary {
  background-color: var(--color-eggshell-cream);
  border-color: var(--color-eggshell-cream);
  color: var(--color-coffee-bean);
}

.band--indigo .btn--primary:hover,
.band--coffee .btn--primary:hover {
  background-color: transparent;
  color: var(--color-eggshell-cream);
}

.band--indigo .btn--ghost,
.band--coffee .btn--ghost {
  border-color: var(--color-eggshell-cream);
  color: var(--color-eggshell-cream);
}

.band--indigo .btn--ghost:hover,
.band--coffee .btn--ghost:hover {
  background-color: var(--color-eggshell-cream);
  color: var(--color-coffee-bean);
}

.btn--sm {
  min-height: 32px;
  padding: var(--spacing-5) var(--spacing-16);
  font-size: var(--text-micro);
}

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

.btn__badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-inline-start: calc(var(--spacing-16) * -1 + var(--spacing-5));
  border-radius: var(--radius-circle);
  background-color: var(--color-eggshell-cream);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-10);
  border: var(--border-hairline);
  border-radius: var(--radius-tags);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-eggshell-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-base);
}

a.card:hover {
  background-color: var(--surface-sand-tint);
  color: inherit;
}

.card__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-media);
  border-bottom: var(--border-hairline);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--card-padding);
}

.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--color-coffee-bean);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-top: auto;
  padding-top: var(--spacing-16);
  border-top: var(--border-hairline);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.grid > * {
  margin: 0 -1px -1px 0;
}

@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
  margin-bottom: var(--spacing-16);
}

.field__label,
.field > label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-10) var(--spacing-16);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-ink-black);
  background-color: var(--surface-eggshell-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-inputs);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
}

select {
  padding-inline-end: var(--spacing-48);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-16) center;
  background-size: 12px 8px;
}

textarea {
  min-height: 140px;
  border-radius: var(--radius-textarea);
  resize: vertical;
}

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

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--surface-sand-tint);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-coffee-bean);
}

.is-invalid,
[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--color-coffee-bean);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  color: var(--color-coffee-bean);
}

.field__help {
  margin: 0;
  font-family: var(--font-system);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  color: var(--color-mocha);
}

.progress {
  height: 6px;
  overflow: hidden;
  background-color: var(--surface-sand-tint);
  border-radius: var(--radius-pills);
}

.progress__fill {
  display: block;
  height: 100%;
  background-color: var(--color-saffron);
  border-radius: inherit;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--spacing-24);
  padding: clamp(16px, 4vw, 48px);
  overflow: hidden;
  color: var(--color-eggshell-cream);
  background-color: var(--surface-hero-indigo);
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 59px, rgba(251, 245, 231, 0.08) 59px 60px);
}

.pre__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  animation: pre-rise 700ms ease-out both;
}

.pre__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

.pre__mandala {
  width: min(62vmin, 380px);
  height: auto;
  max-height: 100%;
  overflow: visible;
  animation: pre-enter 900ms ease-out both;
}

.pre__orbit {
  fill: none;
  stroke: var(--color-eggshell-cream);
  stroke-width: 1;
  stroke-dasharray: 610;
  stroke-dashoffset: 610;
  animation: pre-draw 2400ms ease-in-out infinite;
}

.pre__dots,
.pre__leaves,
.pre__petals,
.pre__rays,
.pre__core {
  transform-box: view-box;
  transform-origin: 100px 100px;
}

.pre__dots {
  fill: var(--color-eggshell-cream);
  animation: pre-turn 36s linear infinite reverse;
}

.pre__leaves {
  fill: none;
  stroke: var(--color-eggshell-cream);
  stroke-width: 1.2;
  stroke-linejoin: round;
  animation: pre-turn 24s linear infinite;
}

.pre__petals {
  animation: pre-turn 24s linear infinite;
}

.pre__line {
  fill: none;
  stroke: var(--color-ink-black);
  stroke-width: 1.4;
}

.pre__rays {
  fill: var(--color-saffron);
  animation: pre-turn 12s linear infinite reverse;
}

.pre__core {
  animation: pre-breathe 2400ms ease-in-out infinite;
}

.pre__ink {
  fill: var(--color-ink-black);
}

.pre__paper {
  fill: var(--color-eggshell-cream);
}

.pre__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-eggshell-cream);
  animation: pre-rise 700ms ease-out 150ms both;
}

.pre__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.pre__label::before {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--rosette) center / contain no-repeat;
}

.pre__rail {
  display: block;
  width: min(40%, 240px);
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--color-eggshell-cream);
  border-radius: var(--radius-pills);
}

.pre__fill {
  display: block;
  width: 40%;
  height: 100%;
  background-color: var(--color-saffron);
  border-radius: inherit;
  animation: pre-shuttle 1400ms ease-in-out infinite;
}

@keyframes pre-enter {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(-20deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pre-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pre-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pre-draw {
  0% {
    stroke-dashoffset: 610;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -610;
  }
}

@keyframes pre-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }
}

@keyframes pre-shuttle {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(250%);
  }
}

.is-mobile {
  display: none !important;
}

@media (max-width: 991.98px) {
  .is-desktop {
    display: none !important;
  }

  .is-mobile {
    display: inline-flex !important;
  }
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.avatar--lg {
  width: 52px;
  height: 52px;
  font-size: var(--text-title);
}

.avatar--light {
  color: var(--color-deep-indigo);
  background-color: var(--color-eggshell-cream);
}

.hd {
  position: relative;
  z-index: 60;
  background-color: var(--surface-eggshell-canvas);
}

.hd__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  max-width: var(--container-max);
  min-height: 88px;
  margin-inline: auto;
  padding: var(--spacing-16) var(--page-gutter);
}

.hd__end {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.hd__logo {
  display: block;
  line-height: 0;
}

.hd__logo img {
  width: auto;
  height: 52px;
}

.hd__round {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  font-size: var(--text-body-sm);
  color: var(--color-ink-black);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), transform 300ms ease;
}

.hd__round:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.hd__round--light {
  color: var(--color-eggshell-cream);
  border-color: var(--color-eggshell-cream);
}

.hd__round--light:hover {
  color: var(--color-deep-indigo);
  background-color: var(--color-eggshell-cream);
  border-color: var(--color-eggshell-cream);
  transform: rotate(90deg);
}

.burger {
  display: grid;
  gap: 6px;
  width: 18px;
}

.burger span {
  display: block;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 300ms ease;
}

.burger span:last-child {
  width: 60%;
}

.hd__round:hover .burger span:last-child {
  transform: scaleX(1.66);
  transform-origin: left;
}

.hd__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-black);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.hd__chip:hover,
.drop.is-open > .hd__chip {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.hd__chip .fi {
  width: 16px;
  height: 12px;
  border-radius: 2px;
}

.hd__dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-circle);
  background-color: currentColor;
}

.hd__unit {
  font-weight: var(--font-weight-regular);
}

.hd__text {
  padding: var(--spacing-10) var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-black);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 6px);
  background-size: 0% 1px;
  transition: background-size 260ms ease;
}

.hd__text:hover {
  color: var(--color-ink-black);
  background-size: 100% 1px;
}

.hd__me {
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: none;
  cursor: pointer;
}

.hd__me .avatar {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  outline: 0 solid var(--color-saffron);
  transition: outline-width var(--transition-base);
}

.hd__me:hover .avatar,
.drop.is-open .hd__me .avatar {
  outline-width: 3px;
}

.hd__cart,
.nav__cart {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-8) 0 var(--spacing-16);
  border: 0;
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.hd__cart:hover,
.nav__cart:hover {
  background-color: var(--color-ink-black);
}

.hd__count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-pills);
  font-size: var(--text-eyebrow);
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--surface-eggshell-canvas);
  border-block: var(--border-hairline);
}

.nav__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  max-width: var(--container-max);
  min-height: 56px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 36px;
  padding: 0 var(--spacing-16);
  border: 0;
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink-black);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.nav__link:hover,
.drop.is-open > .nav__link {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.nav__link.is-active,
.nav__link.is-active:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.nav__mini,
.nav__cart {
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
}

.nav__mini {
  justify-self: start;
  line-height: 0;
  transform: translateX(-12px);
}

.nav__mini img {
  width: auto;
  height: 32px;
}

.nav__cart {
  justify-self: end;
  min-height: 36px;
  transform: translateX(12px);
}

.nav__cart .hd__count {
  min-width: 24px;
  height: 24px;
}

.nav.is-stuck .nav__mini,
.nav.is-stuck .nav__cart {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.drop {
  position: relative;
}

.drop__chev {
  font-size: 9px;
  transition: transform 260ms ease;
}

.drop.is-open .drop__chev {
  transform: rotate(180deg);
}

.drop__panel {
  position: absolute;
  top: calc(100% + 12px);
  z-index: 70;
  min-width: 280px;
  padding: var(--spacing-16);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease, visibility 0s linear 320ms;
}

.drop.is-open > .drop__panel {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

.drop__panel--start {
  left: 0;
}

.drop__panel--end {
  right: 0;
}

.drop__label,
.drop__eyebrow {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.drop__label:not(:first-child) {
  margin-top: var(--spacing-16);
}

.drop__list {
  display: grid;
}

.drop__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-10);
  border-bottom: 1px solid var(--surface-sand-tint);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-decoration: none;
  color: var(--color-ink-black);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease, background-color var(--transition-base);
}

.drop__row:last-child {
  border-bottom: 0;
}

.drop__row:hover {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.drop__row.is-active {
  font-weight: var(--font-weight-medium);
}

.drop__row.is-active::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-inline-start: auto;
  background: var(--rosette) center / contain no-repeat;
}

.drop__go {
  margin-inline-start: auto;
  font-size: 11px;
  transition: transform 220ms ease;
}

.drop__row:hover .drop__go {
  transform: translateX(4px);
}

.drop__row--out {
  margin-top: var(--spacing-8);
  border-top: var(--border-hairline);
}

.drop.is-open .drop__row {
  opacity: 1;
  transform: none;
}

.drop.is-open .drop__row:nth-child(2) {
  transition-delay: 40ms;
}

.drop.is-open .drop__row:nth-child(3) {
  transition-delay: 80ms;
}

.drop.is-open .drop__row:nth-child(4) {
  transition-delay: 120ms;
}

.drop__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.drop__chip,
.menu__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  min-height: 36px;
  padding: 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-decoration: none;
  color: var(--color-ink-black);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.drop__chip:hover {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.drop__chip.is-active,
.drop__chip.is-active:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.drop__panel--account {
  width: 320px;
  padding: 0;
}

.drop__who {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-16);
  color: var(--color-eggshell-cream);
  background-color: var(--surface-hero-indigo);
  background-image: repeating-radial-gradient(circle at 100% 0%, transparent 0 23px, rgba(251, 245, 231, 0.1) 23px 24px);
}

.drop__who .avatar {
  color: var(--color-deep-indigo);
  background-color: var(--color-eggshell-cream);
}

.drop__who .drop__eyebrow {
  margin-bottom: var(--spacing-5);
  color: var(--color-eggshell-cream);
}

.drop__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.drop__balance {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  margin: var(--spacing-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.drop__panel--account .drop__list {
  padding: var(--spacing-8);
}

.drop__panel--cats {
  left: 50%;
  width: min(480px, calc(100vw - 32px));
  padding: var(--spacing-8);
  transform: translateX(-50%);
}

.cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cats__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: var(--spacing-8) var(--spacing-10);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  line-height: 1.3;
  letter-spacing: var(--tracking-caption);
  text-decoration: none;
  color: var(--color-ink-black);
  transition: background-color var(--transition-base);
}

.cats__link::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-ink-black);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.cats__link:hover {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.cats__link:hover::before {
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
}

.cats__none {
  margin: 0;
  padding: var(--spacing-10);
  font-size: var(--text-caption);
}

.cats__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  padding: var(--spacing-10);
  border-top: var(--border-hairline);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-coffee-bean);
}

.cats__all i {
  transition: transform 220ms ease;
}

.cats__all:hover {
  color: var(--color-ink-black);
}

.cats__all:hover i {
  transform: translateX(4px);
}

@media (max-width: 1199.98px) {
  .nav__link {
    padding: 0 var(--spacing-10);
  }
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(61, 40, 0, 0.6);
  opacity: 0;
  transition: opacity 320ms ease;
}

.veil.is-open {
  opacity: 1;
}

.sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.sheet.is-open {
  visibility: visible;
}

.sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 80px;
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: var(--border-hairline);
}

.sheet__body {
  flex: 1;
  min-height: 0;
  padding: var(--spacing-24);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__foot {
  display: grid;
  gap: var(--spacing-10);
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
}

.sheet--menu {
  left: 0;
  right: 0;
  background-color: var(--surface-hero-indigo);
  background-image: repeating-radial-gradient(circle at 0% 0%, transparent 0 59px, rgba(251, 245, 231, 0.07) 59px 60px);
  clip-path: circle(0 at calc(100% - 40px) 34px);
  transition: clip-path 620ms cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 620ms;
}

.sheet--menu.is-open {
  clip-path: circle(150% at calc(100% - 40px) 34px);
  transition-delay: 0s;
}

.sheet--menu .sheet__top {
  border-color: rgba(251, 245, 231, 0.3);
}

.sheet__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.menu__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  border-bottom: 1px solid rgba(251, 245, 231, 0.3);
}

.menu__eyebrow {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.menu__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
  overflow-wrap: anywhere;
}

.menu__credits {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  margin-top: var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list > li {
  border-bottom: 1px solid rgba(251, 245, 231, 0.3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet--menu.is-open .menu__list > li {
  opacity: 1;
  transform: none;
}

.sheet--menu.is-open .menu__list > li:nth-child(1) {
  transition-delay: 220ms;
}

.sheet--menu.is-open .menu__list > li:nth-child(2) {
  transition-delay: 270ms;
}

.sheet--menu.is-open .menu__list > li:nth-child(3) {
  transition-delay: 320ms;
}

.sheet--menu.is-open .menu__list > li:nth-child(4) {
  transition-delay: 370ms;
}

.sheet--menu.is-open .menu__list > li:nth-child(5) {
  transition-delay: 420ms;
}

.sheet--menu.is-open .menu__list > li:nth-child(6) {
  transition-delay: 470ms;
}

.sheet--menu.is-open .menu__list > li:nth-child(n + 7) {
  transition-delay: 520ms;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-16);
  padding: var(--spacing-16) 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 40px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.menu__link::-webkit-details-marker {
  display: none;
}

.band--indigo .menu__link:hover,
.band--indigo .menu__link.is-active {
  color: var(--color-saffron);
}

.menu__num {
  min-width: 24px;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-saffron);
}

.menu__plus {
  margin-inline-start: auto;
  align-self: center;
  font-size: 16px;
  transition: transform 300ms ease;
}

.menu__acc[open] .menu__plus {
  transform: rotate(45deg);
}

.menu__subs {
  display: grid;
  gap: var(--spacing-10);
  margin: 0;
  padding: 0 0 var(--spacing-24) 40px;
  list-style: none;
}

.menu__subs a {
  font-size: var(--text-body);
  text-decoration: none;
}

.menu__subs a:hover {
  text-decoration: underline;
}

.menu__none {
  margin: 0;
  font-size: var(--text-caption);
}

.menu__prefs {
  margin-top: var(--spacing-32);
}

.menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}

.band--indigo .menu__chip {
  color: var(--color-eggshell-cream);
  border-color: var(--color-eggshell-cream);
}

.band--indigo .menu__chip:hover,
.band--indigo .menu__chip.is-active {
  color: var(--color-deep-indigo);
  background-color: var(--color-eggshell-cream);
}

.sheet--menu .sheet__foot {
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(251, 245, 231, 0.3);
}

.sheet--cart {
  right: 0;
  width: min(460px, 100%);
  border-left: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  transform: translateX(100%);
  transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 460ms;
}

.sheet--cart.is-open {
  transform: none;
  transition-delay: 0s;
}

.bag__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  margin: 0;
  font-size: var(--text-title);
}

.bag__qty {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-pills);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.sheet--cart .sheet__body {
  padding-block: 0;
}

.bag__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bag__item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--spacing-16);
  padding: var(--spacing-24) 0;
  border-bottom: var(--border-hairline);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bag__item:last-child {
  border-bottom: 0;
}

.sheet--cart.is-open .bag__item {
  opacity: 1;
  transform: none;
}

.sheet--cart.is-open .bag__item:nth-child(1) {
  transition-delay: 160ms;
}

.sheet--cart.is-open .bag__item:nth-child(2) {
  transition-delay: 210ms;
}

.sheet--cart.is-open .bag__item:nth-child(3) {
  transition-delay: 260ms;
}

.sheet--cart.is-open .bag__item:nth-child(n + 4) {
  transition-delay: 310ms;
}

.bag__img {
  display: block;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: var(--border-hairline);
  background-color: var(--surface-sand-tint);
}

.bag__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bag__img--credits {
  display: grid;
  place-items: center;
  background-color: var(--surface-hero-indigo);
}

.bag__img--credits .rosette {
  width: 34px;
  height: 34px;
}

.bag__info {
  display: grid;
  justify-items: start;
  gap: var(--spacing-5);
}

.bag__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-coffee-bean);
}

.bag__meta,
.bag__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.bag__price {
  font-weight: var(--font-weight-medium);
}

.bag__remove {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  font-size: 12px;
  text-decoration: none;
  color: var(--color-ink-black);
  transition: background-color var(--transition-base), color var(--transition-base), transform 300ms ease;
}

.bag__remove:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  transform: rotate(90deg);
}

.bag__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
  min-height: 100%;
  padding: var(--spacing-48) 0;
  text-align: center;
}

.bag__bloom {
  width: 120px;
  height: 120px;
  background: var(--rosette) center / contain no-repeat;
  animation: pre-turn 30s linear infinite;
}

.bag__empty-text {
  max-width: 32ch;
  margin: 0;
  font-size: var(--text-body-sm);
}

.bag__foot {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
}

.bag__sum {
  display: grid;
  gap: var(--spacing-10);
  margin: 0;
}

.bag__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.bag__row dt {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.bag__row dd {
  margin: 0;
  font-family: var(--font-display);
}

.bag__total {
  font-size: clamp(28px, 5vw, 36px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.04em;
}

.bag__total small {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.bag__row--muted {
  padding-top: var(--spacing-10);
  border-top: var(--border-hairline-dark);
  font-size: var(--text-caption);
}

.bag__actions {
  display: grid;
  gap: var(--spacing-10);
}

.bag__continue {
  min-height: var(--touch-target-min);
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--color-eggshell-cream);
  background: none;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .hd {
    position: sticky;
    top: 0;
    border-bottom: var(--border-hairline);
  }

  .hd__bar {
    min-height: 68px;
    padding-block: var(--spacing-10);
  }

  .hd__logo img {
    height: 40px;
  }

  .nav {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .hd__cart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hd__cart {
    padding: 0 var(--spacing-7);
  }

  .sheet--menu .sheet__foot {
    grid-template-columns: 1fr;
  }
}

.consent {
  position: fixed;
  left: var(--spacing-24);
  bottom: var(--spacing-24);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border: var(--border-hairline);
  color: var(--color-ink-black);
  background-color: var(--surface-eggshell-canvas);
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: consent-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms both;
}

.consent.is-wide {
  width: min(760px, calc(100vw - 48px));
}

@keyframes consent-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.consent__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  color: var(--color-eggshell-cream);
  background-color: var(--surface-hero-indigo);
  background-image: repeating-radial-gradient(circle at 100% 50%, transparent 0 23px, rgba(251, 245, 231, 0.1) 23px 24px);
}

.consent__mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-eggshell-cream);
  border-radius: var(--radius-circle);
}

.consent__mark .rosette {
  width: 20px;
  height: 20px;
  animation: pre-turn 24s linear infinite;
}

.consent__title {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--color-eggshell-cream);
}

.consent__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.consent__intro {
  padding: var(--spacing-16) var(--spacing-24) 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.consent__intro p {
  margin: 0 0 var(--spacing-10);
}

.consent__panel,
.prefs__drop {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.consent__panel.is-open,
.prefs__drop.is-open {
  grid-template-rows: 1fr;
}

.consent__panel-in,
.prefs__drop > * {
  min-height: 0;
  overflow: hidden;
}

.consent__panel:not(.is-open) .consent__panel-in,
.prefs__drop:not(.is-open) > * {
  visibility: hidden;
}

.prefs {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-24) var(--spacing-16);
}

.prefs__grid {
  display: grid;
  gap: 0 var(--spacing-24);
  border-top: var(--border-hairline);
}

.consent.is-wide .prefs__grid:has(> .prefs__row:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consent.is-wide .prefs__grid:not(:has(> .prefs__row:nth-child(2))) .prefs__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prefs__row {
  display: grid;
  align-content: start;
  gap: var(--spacing-8);
  padding: var(--spacing-16) 0;
  border-bottom: var(--border-hairline);
}

.prefs__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  cursor: pointer;
}

.prefs__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.prefs__lock {
  font-size: 11px;
  color: var(--color-mocha);
}

input.swt {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  background-color: var(--surface-eggshell-canvas);
  background-image: radial-gradient(circle, var(--color-ink-black) 0 7px, transparent 7.5px);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: 0 center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-position 240ms ease, background-color 240ms ease;
}

input.swt:checked {
  background-color: var(--color-coffee-bean);
  background-image: radial-gradient(circle, var(--color-saffron) 0 7px, transparent 7.5px);
  background-position: 100% center;
  border-color: var(--color-coffee-bean);
}

input.swt:disabled {
  cursor: not-allowed;
  background-color: var(--color-mocha);
  border-color: var(--color-mocha);
}

.prefs__info {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.prefs__details,
.consent__more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  justify-self: start;
  padding: var(--spacing-5) 0;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
  background: none;
  cursor: pointer;
}

.prefs__details:hover,
.consent__more:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.consent__chev {
  font-size: 9px;
  transition: transform 260ms ease;
}

[aria-expanded="true"] > .consent__chev {
  transform: rotate(180deg);
}

.prefs__list {
  display: grid;
  gap: var(--spacing-8);
  margin: var(--spacing-5) 0 0;
  padding: 0;
  list-style: none;
}

.prefs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-5) var(--spacing-10);
  padding: var(--spacing-10) var(--spacing-16);
  background-color: var(--surface-sand-tint);
}

.prefs__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.prefs__dur {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.prefs__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-eyebrow);
  line-height: 1.5;
}

.consent__acts {
  display: grid;
  gap: var(--spacing-10);
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-16);
}

.consent__choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-10);
}

.consent.is-wide .consent__acts {
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top: var(--border-hairline);
}

.consent.is-wide .consent__more {
  order: -1;
}

.cbtn {
  margin: 0;
}

.cbtn__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-coffee-bean);
  border-radius: var(--radius-buttons);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.cbtn--essential .cbtn__link {
  color: var(--color-coffee-bean);
  background-color: transparent;
}

.cbtn--essential .cbtn__link:hover {
  background-color: var(--surface-sand-tint);
}

.cbtn--all .cbtn__link {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.cbtn--all .cbtn__link:hover {
  background-color: var(--color-ink-black);
  border-color: var(--color-ink-black);
}

@media (max-width: 575.98px) {
  .consent,
  .consent.is-wide {
    left: var(--spacing-10);
    right: var(--spacing-10);
    bottom: var(--spacing-10);
    width: auto;
    max-height: calc(100vh - 20px);
  }

  .consent__head,
  .consent__intro,
  .prefs,
  .consent__acts {
    padding-inline: var(--spacing-16);
  }

  .consent.is-wide .prefs__grid,
  .consent.is-wide .prefs__grid .prefs__list {
    grid-template-columns: 1fr !important;
  }

  .consent.is-wide .consent__acts {
    grid-template-columns: 1fr;
  }

  .consent.is-wide .consent__more {
    order: 0;
  }
}

.ft {
  position: relative;
}

.ft__news {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 540px;
  padding: calc(var(--section-gap) * 1.3) var(--page-gutter);
  overflow: hidden;
  background-image: repeating-radial-gradient(circle at 85% 50%, transparent 0 47px, rgba(251, 245, 231, 0.07) 47px 48px);
}

.ft__mandala {
  position: absolute;
  top: 50%;
  right: clamp(-220px, -10vw, -80px);
  width: clamp(380px, 46vw, 660px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(var(--spin, 0deg));
  pointer-events: none;
}

.ft__mandala svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transform: scale(0.82) rotate(-25deg);
  transition: opacity 900ms ease, transform 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ft__news.is-in .ft__mandala svg {
  opacity: 1;
  transform: none;
}

.ml__orbit,
.ml__dots,
.ml__outer,
.ml__mid,
.ml__rays,
.ml__core {
  transform-box: view-box;
  transform-origin: 200px 200px;
}

.ml__orbit {
  fill: none;
  stroke: var(--color-eggshell-cream);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  animation: pre-turn 160s linear infinite;
}

.ml__dots {
  fill: var(--color-eggshell-cream);
  animation: pre-turn 120s linear infinite reverse;
}

.ml__outer {
  fill: none;
  stroke: var(--color-eggshell-cream);
  stroke-width: 1.2;
  animation: pre-turn 80s linear infinite;
}

.ml__mid {
  animation: pre-turn 140s linear infinite reverse;
}

.ml__rays {
  fill: var(--color-saffron);
  animation: pre-turn 50s linear infinite;
}

.ml__core {
  animation: pre-breathe 4s ease-in-out infinite;
}

.ml__paper {
  fill: var(--color-eggshell-cream);
}

.ml__line {
  fill: none;
  stroke: var(--color-ink-black);
  stroke-width: 1.6;
}

.ml__ink {
  fill: var(--color-ink-black);
}

.ml__sun {
  fill: var(--color-saffron);
}

.ft__mandala :is(.ml__orbit, .ml__dots, .ml__outer, .ml__mid, .ml__rays, .ml__core) {
  opacity: 0;
  transition: opacity 700ms ease;
}

.ft__news.is-in .ft__mandala :is(.ml__orbit, .ml__dots, .ml__outer, .ml__mid, .ml__rays, .ml__core) {
  opacity: 1;
}

.ft__news.is-in .ml__core {
  transition-delay: 150ms;
}

.ft__news.is-in .ml__rays {
  transition-delay: 300ms;
}

.ft__news.is-in .ml__mid {
  transition-delay: 450ms;
}

.ft__news.is-in .ml__outer {
  transition-delay: 600ms;
}

.ft__news.is-in .ml__dots {
  transition-delay: 750ms;
}

.ft__news.is-in .ml__orbit {
  transition-delay: 900ms;
}

.ft__news-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.ft__news-in > * {
  max-width: 600px;
}

.ft__news-in .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}

.ft__news-in .eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--rosette) center / contain no-repeat;
}

.ft__title {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.ft__lead {
  margin: 0 0 var(--spacing-32);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.ft__form {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-5);
  border: 1px solid var(--color-eggshell-cream);
  border-radius: var(--radius-pills);
  transition: background-color var(--transition-base);
}

.ft__form:focus-within {
  outline: var(--focus-ring-dark);
  outline-offset: 3px;
  background-color: rgba(251, 245, 231, 0.06);
}

.ft__form .ft__input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-16);
  border: 0;
  color: var(--color-eggshell-cream);
  background: transparent;
}

.ft__form .ft__input::placeholder {
  color: var(--color-eggshell-cream);
  opacity: 0.75;
}

.ft__form .ft__input:focus-visible {
  outline: 0;
}

.ft__form .btn {
  flex-shrink: 0;
}

.ft__form .btn i {
  transition: transform 220ms ease;
}

.ft__form .btn:hover i {
  transform: translateX(4px);
}

.ft__ok {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-7) var(--spacing-24) var(--spacing-7) var(--spacing-7);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  outline: 2px solid var(--color-saffron);
  outline-offset: 0;
  animation: ft-ok-pop 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both, ft-ok-ring 1400ms ease-out 200ms 2;
}

.ft__ok-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background-color: var(--color-coffee-bean);
}

.ft__ok-mark .rosette {
  width: 18px;
  height: 18px;
  animation: pre-turn 6s linear infinite;
}

@keyframes ft-ok-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }

  60% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ft-ok-ring {
  0% {
    outline-color: var(--color-saffron);
    outline-offset: 0;
  }

  100% {
    outline-color: transparent;
    outline-offset: 12px;
  }
}

.ft__garland {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  padding: var(--spacing-16) var(--page-gutter);
  overflow: hidden;
  background-color: var(--surface-coffee-band);
  border-bottom: var(--border-hairline-dark);
}

.ft__garland span {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--rosette) center / contain no-repeat;
  transform: scale(0) rotate(-90deg);
}

.ft__garland.is-in span {
  animation:
    ft-bloom 700ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 45ms) both,
    ft-sway 6s ease-in-out calc(var(--i) * 45ms + 700ms) infinite;
}

.ft__garland span:nth-child(odd) {
  width: 9px;
  height: 9px;
}

@keyframes ft-bloom {
  from {
    transform: scale(0) rotate(-90deg);
  }

  to {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes ft-sway {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.15) rotate(45deg);
  }
}

.ft__base {
  padding: var(--section-gap) var(--page-gutter) var(--spacing-24);
}

.ft__grid {
  display: grid;
  grid-template-columns: 1.3fr 1.7fr 1fr 1fr;
  max-width: var(--container-max);
  margin-inline: auto;
}

.ft__grid > * {
  padding: 0 var(--spacing-32);
  border-left: var(--border-hairline-dark);
}

.ft__grid > :first-child {
  padding-left: 0;
  border-left: 0;
}

.ft__grid > :last-child {
  padding-right: 0;
}

.ft__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ft__base.is-in .ft__reveal {
  opacity: 1;
  transform: none;
}

.ft__base.is-in .ft__reveal:nth-child(2) {
  transition-delay: 100ms;
}

.ft__base.is-in .ft__reveal:nth-child(3) {
  transition-delay: 200ms;
}

.ft__base.is-in .ft__reveal:nth-child(4) {
  transition-delay: 300ms;
}

.ft__logo {
  display: inline-block;
  padding: var(--spacing-10) var(--spacing-24);
  border-radius: var(--radius-pills);
  line-height: 0;
  background-color: var(--color-eggshell-cream);
}

.ft__logo img {
  width: auto;
  height: 44px;
}

.ft__about {
  max-width: 40ch;
  margin: var(--spacing-24) 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.ft__facts {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-16) 0 0;
  border-top: var(--border-hairline-dark);
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.ft__facts a {
  text-underline-offset: 4px;
}

.ft__facts a:hover {
  color: var(--color-saffron);
}

.ft__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.band--coffee .ft__label {
  color: var(--color-saffron);
}

.ft__links {
  display: grid;
  gap: var(--spacing-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft__links--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-24);
}

.band--coffee .ft__link {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-decoration: none;
  color: var(--color-eggshell-cream);
  transition: color var(--transition-base);
}

.ft__link::before {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 10px;
  margin-top: 0.3em;
  background: var(--rosette) center / contain no-repeat;
  transform: rotate(-90deg);
  transition: width 260ms ease, margin 260ms ease, transform 400ms ease;
}

.band--coffee .ft__link:hover {
  color: var(--color-saffron);
}

.ft__link:hover::before {
  width: 10px;
  margin-inline-end: var(--spacing-8);
  transform: rotate(0deg);
}

.ft__empty {
  font-size: var(--text-caption);
}

.ft__end {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-16);
  max-width: var(--container-max);
  margin: var(--spacing-57) auto 0;
  padding-top: var(--spacing-24);
  border-top: var(--border-hairline-dark);
}

.ft__copy {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
}

.ft__copy a {
  text-decoration: none;
}

.ft__copy a:hover {
  text-decoration: underline;
}

.ft__seal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-eggshell-cream);
  border-radius: var(--radius-circle);
}

.ft__seal .rosette {
  width: 18px;
  height: 18px;
  animation: pre-turn 20s linear infinite;
}

.ft__pay {
  justify-self: end;
  width: auto;
  height: 26px;
}

.totop {
  position: fixed;
  right: var(--spacing-24);
  bottom: var(--spacing-24);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  color: var(--color-eggshell-cream);
  background: conic-gradient(var(--color-saffron) calc(var(--p, 0) * 1%), var(--surface-sand-tint) 0);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms;
}

.totop::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background-color: var(--color-coffee-bean);
  transition: background-color var(--transition-base);
}

.totop i {
  position: relative;
  transition: transform 260ms ease;
}

.totop:hover::before {
  background-color: var(--color-ink-black);
}

.totop:hover i {
  transform: translateY(-3px);
}

.totop.is-shown {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

@media (max-width: 1199.98px) {
  .ft__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--spacing-48);
  }

  .ft__grid > .ft__brand {
    grid-column: 1 / -1;
    padding: 0;
  }

  .ft__grid > :nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .ft__news {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 0;
  }

  .ft__mandala {
    position: relative;
    top: auto;
    right: auto;
    width: 130%;
    margin: -35% -15% var(--spacing-24);
    transform: rotate(var(--spin, 0deg));
  }

  .ft__form {
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-8);
    border-radius: 28px;
  }

  .ft__grid {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-32);
  }

  .ft__grid > * {
    padding: var(--spacing-32) 0 0;
    border-left: 0;
    border-top: var(--border-hairline-dark);
  }

  .ft__grid > .ft__brand {
    padding: 0;
    border-top: 0;
  }

  .ft__garland span:nth-child(n + 15) {
    display: none;
  }

  .ft__end {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .ft__seal {
    display: none;
  }

  .ft__pay {
    justify-self: start;
  }

  .totop {
    right: var(--spacing-16);
    bottom: var(--spacing-16);
  }
}

.notes {
  position: fixed;
  top: var(--notes-top, 160px);
  left: 50%;
  z-index: 85;
  display: grid;
  gap: var(--spacing-10);
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-10) var(--spacing-10) var(--spacing-10) var(--spacing-10);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  pointer-events: auto;
  animation: note-in 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.note--success {
  color: var(--color-ink-black);
  background-color: var(--surface-eggshell-canvas);
}

.note--error {
  color: var(--color-eggshell-cream);
  background-color: var(--surface-coffee-band);
  border-color: var(--color-coffee-bean);
}

.note.is-hiding {
  animation: note-out 320ms ease-in both;
}

@keyframes note-in {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes note-out {
  to {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
}

.note__badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.note--success .note__badge {
  background-color: var(--surface-hero-indigo);
}

.note--success .note__badge .rosette {
  width: 22px;
  height: 22px;
  animation: note-bloom 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both, pre-turn 12s linear 1100ms infinite;
}

@keyframes note-bloom {
  from {
    transform: scale(0) rotate(-120deg);
  }

  to {
    transform: scale(1) rotate(0deg);
  }
}

.note--error .note__badge {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  animation: note-shake 520ms ease 300ms both;
}

@keyframes note-shake {
  0%,
  100% {
    transform: none;
  }

  25% {
    transform: rotate(-12deg);
  }

  50% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(-6deg);
  }
}

.note__body {
  min-width: 0;
}

.note__label {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.note--success .note__label {
  color: var(--color-mocha);
}

.note--error .note__label {
  color: var(--color-saffron);
}

.note__msg {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.note__close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--radius-circle);
  font-size: 12px;
  color: inherit;
  background: none;
  cursor: pointer;
  transition: transform 300ms ease, background-color var(--transition-base), color var(--transition-base);
}

.note--success .note__close:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
  transform: rotate(90deg);
}

.note--error .note__close:hover {
  color: var(--color-coffee-bean);
  background-color: var(--color-eggshell-cream);
  transform: rotate(90deg);
}

.note--error :focus-visible {
  outline: var(--focus-ring-dark);
}

@media (max-width: 575.98px) {
  .note {
    gap: var(--spacing-10);
    border-radius: 28px;
  }

  .note__badge {
    width: 38px;
    height: 38px;
  }
}

.bn {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-48) var(--page-gutter);
  background-color: var(--surface-sand-tint);
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 55px, rgba(0, 0, 0, 0.05) 55px 56px);
  border-bottom: var(--border-hairline);
}

.bn--compact {
  padding-block: var(--spacing-24);
}

.bn__art {
  position: absolute;
  right: clamp(-260px, -16vw, -120px);
  bottom: clamp(-260px, -16vw, -120px);
  width: clamp(320px, 38vw, 560px);
  aspect-ratio: 1;
  pointer-events: none;
}

.bn--compact .bn__art {
  width: 240px;
  right: -120px;
  bottom: -120px;
}

.bn__art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bn__spin {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: pre-turn 180s linear infinite;
}

.bn__dash {
  fill: none;
  stroke: var(--color-ink-black);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  opacity: 0;
  animation: bn-fade 900ms ease 1200ms both;
}

.bn__draw {
  fill: none;
  stroke: var(--color-ink-black);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bn-draw 1600ms cubic-bezier(0.6, 0, 0.2, 1) both;
}

.bn__petals .bn__draw {
  animation-delay: 300ms;
}

.bn__flames .bn__draw {
  stroke: var(--color-saffron);
  stroke-width: 2;
  animation-delay: 700ms;
}

.bn__dots {
  fill: var(--color-ink-black);
  opacity: 0;
  animation: bn-fade 900ms ease 1000ms both;
}

.bn__sun {
  fill: var(--color-saffron);
  transform-box: fill-box;
  transform-origin: center;
  animation: bn-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 1100ms both;
}

@keyframes bn-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes bn-fade {
  to {
    opacity: 1;
  }
}

@keyframes bn-pop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.bn__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
}

.bn__crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-7) var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  list-style: none;
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bn__crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.bn__link {
  text-decoration: none;
  color: var(--color-ink-black);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: background-size 260ms ease;
}

.bn__link:hover {
  color: var(--color-ink-black);
  background-size: 100% 1px;
}

.bn__sep {
  width: 9px;
  height: 9px;
  background: var(--rosette) center / contain no-repeat;
}

.bn__current {
  color: var(--color-coffee-bean);
}

.bn__title {
  max-width: 16ch;
  margin: var(--spacing-24) 0 0;
  font-size: clamp(44px, 7vw, 96px);
  font-weight: var(--font-weight-medium);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  color: var(--color-coffee-bean);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}

.bn__bloom {
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-inline-end: 0.14em;
  vertical-align: 0.12em;
  background: var(--rosette) center / contain no-repeat;
  animation: bn-bloom 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 500ms both, pre-turn 30s linear 1400ms infinite;
}

@keyframes bn-bloom {
  from {
    transform: scale(0) rotate(-140deg);
  }

  to {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes bn-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .bn {
    padding-top: var(--spacing-32);
    padding-bottom: var(--spacing-32);
  }

  .bn__art {
    top: -90px;
    right: -110px;
    bottom: auto;
    width: 260px;
  }

  .bn--compact .bn__art {
    top: -120px;
  }

  .bn__crumbs {
    max-width: 100%;
    border-radius: 22px;
  }

  .bn__title {
    margin-top: var(--spacing-16);
  }
}

.auth,
.contact {
  padding: var(--section-gap) var(--spacing-16);
}

.auth__card {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--spacing-48) clamp(20px, 5vw, 48px);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.contact__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--spacing-24);
  max-width: 1080px;
  margin-inline: auto;
}

.contact__info,
.contact__form {
  padding: var(--spacing-48) clamp(20px, 4vw, 40px);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.contact__info {
  position: sticky;
  top: 80px;
  overflow: hidden;
  border: 1px solid var(--color-coffee-bean);
}

.contact__info::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.18;
  animation: pre-turn 40s linear infinite;
  pointer-events: none;
}

.contact__form {
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation-delay: 150ms;
}

.contact__info .auth__badge {
  color: var(--color-saffron);
}

.contact__info .auth__lead {
  margin-bottom: var(--spacing-24);
}

.auth__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.auth__badge::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--rosette) center / contain no-repeat;
}

.auth__title {
  margin: 0 0 var(--spacing-10);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.auth__lead {
  margin: 0 0 var(--spacing-32);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.auth__fields {
  display: grid;
  gap: var(--spacing-24);
}

.fld {
  display: grid;
  gap: var(--spacing-8);
  min-width: 0;
}

.fld__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
}

.fld__box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.fld__icon {
  position: absolute;
  left: 18px;
  z-index: 1;
  font-size: 13px;
  color: var(--color-mocha);
  pointer-events: none;
  transition: color var(--transition-base);
}

.fld__box:focus-within .fld__icon {
  color: var(--color-coffee-bean);
}

.fld__box--area .fld__icon {
  top: 17px;
}

.fld .fld__input {
  min-height: 48px;
  padding: var(--spacing-10) var(--spacing-16) var(--spacing-10) 44px;
  transition: border-color var(--transition-base);
}

.fld .fld__input:focus,
.fld .fld__input:focus-visible {
  border-color: var(--color-coffee-bean);
  outline: 2px solid var(--color-coffee-bean);
  outline-offset: 2px;
}

.fld .fld__area {
  min-height: 140px;
  padding-top: 14px;
  border-radius: var(--radius-textarea);
}

.fld--pass .fld__input {
  padding-right: 52px;
}

.fld .fld__input.is-invalid,
.cap.is-invalid .fld__input {
  border-width: 2px;
  border-color: var(--color-error);
}

.fld .fld__input.is-invalid:focus,
.cap.is-invalid .fld__input:focus {
  border-color: var(--color-error);
  outline-color: var(--color-error);
}

.fld__err {
  display: flex;
  align-items: center;
  gap: var(--spacing-7);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-error);
}

.fld__eye {
  position: absolute;
  right: 6px;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  font-size: 13px;
  color: var(--color-coffee-bean);
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.fld__eye:hover {
  background-color: var(--surface-sand-tint);
}

.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-10);
}

.cap__img {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--spacing-16);
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
}

.cap__img img {
  display: block;
  width: 130px !important;
  height: 36px !important;
  cursor: pointer;
}

.auth__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.auth__check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  cursor: pointer;
}

.tick {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.tick input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tick i {
  font-size: 10px;
  color: var(--color-eggshell-cream);
  opacity: 0;
  pointer-events: none;
}

.tick:has(input:checked) {
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.tick:has(input:checked) i {
  opacity: 1;
}

.tick:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.auth__link {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  text-underline-offset: 4px;
}

.auth__submit i {
  transition: transform 220ms ease;
}

.auth__submit:hover i {
  transform: translateX(4px);
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin: var(--spacing-32) 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  color: var(--color-mocha);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-sand-tint);
}

.msg {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: 24px;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.msg--error {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.msg--ok {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.contact__rows {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  min-width: 0;
  padding: var(--spacing-16);
  border-left: 3px solid var(--color-saffron);
  background-color: rgba(251, 245, 231, 0.07);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 260ms ease, background-color 260ms ease;
}

.contact__row:nth-child(1) {
  animation-delay: 300ms;
}

.contact__row:nth-child(2) {
  animation-delay: 400ms;
}

.contact__row:nth-child(3) {
  animation-delay: 500ms;
}

.contact__row:hover {
  transform: translateX(6px);
  background-color: rgba(251, 245, 231, 0.12);
}

.contact__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  font-size: 13px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact__row:hover .contact__icon {
  transform: rotate(-12deg) scale(1.08);
}

.contact__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contact__label {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-saffron);
}

.contact__value {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-eggshell-cream);
  overflow-wrap: anywhere;
}

.band--coffee a.contact__value {
  text-decoration: none;
}

.band--coffee a.contact__value:hover {
  color: var(--color-saffron);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__reasons {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-24);
  border-top: var(--border-hairline-dark);
}

.contact__reasons-title {
  margin: 0 0 var(--spacing-10);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-saffron);
}

.contact__reasons-list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__reasons-list li {
  position: relative;
  padding-left: var(--spacing-24);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.contact__reasons-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 11px;
  height: 11px;
  background: var(--rosette) center / contain no-repeat;
}

@media (max-width: 991.98px) {
  .contact__wrap {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .contact__info {
    position: relative;
    top: auto;
  }
}

@media (max-width: 575.98px) {
  .auth__card,
  .contact__info,
  .contact__form {
    padding-block: var(--spacing-32);
  }

}

.co {
  padding: var(--section-gap) var(--spacing-16);
}

.co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: var(--spacing-24);
  max-width: 1080px;
  margin-inline: auto;
}

.steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  margin: 0 0 var(--spacing-24);
  padding: 0;
  list-style: none;
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.steps__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.steps__no {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  color: var(--color-ink-black);
}

.steps__item.is-active {
  color: var(--color-coffee-bean);
}

.steps__item.is-active .steps__no {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.steps__line {
  flex: 1;
  max-width: 64px;
  border-top: 1px solid var(--color-ink-black);
}

.co__panels {
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both;
}

.panel {
  padding: var(--spacing-32) clamp(20px, 4vw, 40px);
}

.panel + .panel {
  border-top: 1px solid var(--color-sand-tint);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-24);
}

.panel__num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.panel__title {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.co__fields,
.agree {
  display: grid;
  gap: var(--spacing-24);
}

.agree {
  gap: var(--spacing-16);
}

.co__req {
  color: var(--color-error);
}

.fld .fld__select {
  padding-right: 44px;
  background-image: none;
  cursor: pointer;
}

.fld__caret {
  position: absolute;
  right: 18px;
  font-size: 11px;
  color: var(--color-coffee-bean);
  pointer-events: none;
}

.expiry {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.fld .expiry .fld__input {
  flex: 1;
  min-width: 0;
  padding-left: var(--spacing-16);
  text-align: center;
}

.expiry__sep {
  font-family: var(--font-display);
  font-size: var(--text-title);
  color: var(--color-mocha);
}

.co__pay {
  display: grid;
  gap: var(--spacing-24);
}

.agree__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
  cursor: pointer;
}

.agree__row .tick {
  flex-shrink: 0;
  margin-top: 1px;
}

.agree__text {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.agree__text a {
  font-weight: var(--font-weight-medium);
  text-underline-offset: 3px;
}

.agree .fld__err {
  margin: var(--spacing-5) 0 0 32px;
}

.co__facts {
  margin: var(--spacing-32) 0 var(--spacing-16);
  padding: var(--spacing-16);
  border-left: 3px solid var(--color-saffron);
  background-color: var(--surface-sand-tint);
}

.co__facts-title {
  margin: 0 0 var(--spacing-10);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
}

.co__facts-list {
  display: grid;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.co__facts-list li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-10);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.co__facts-list i {
  width: 14px;
  flex-shrink: 0;
  font-size: 12px;
  text-align: center;
  color: var(--color-coffee-bean);
}

.dba {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-16);
  border: 1px solid var(--color-sand-tint);
}

.dba > i {
  margin-top: 3px;
  font-size: 13px;
  color: var(--color-coffee-bean);
}

.dba p {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.dba img {
  display: inline-block;
  width: auto;
  height: 20px;
  margin-left: var(--spacing-5);
  vertical-align: middle;
}

.co__rail {
  position: sticky;
  top: 80px;
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.sum {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-coffee-bean);
}

.sum::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 160px;
  height: 160px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.16;
  animation: pre-turn 40s linear infinite;
  pointer-events: none;
}

.sum__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  padding: var(--spacing-24) var(--spacing-24) 0;
}

.sum__title {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.sum__body {
  padding: var(--spacing-24);
}

.sum__rows {
  display: grid;
  gap: var(--spacing-10);
  margin: 0 0 var(--spacing-16);
  padding: 0;
  list-style: none;
}

.sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  border-left: 3px solid var(--color-saffron);
  background-color: rgba(251, 245, 231, 0.07);
}

.sum__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.sum__icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  font-size: 12px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.sum__price {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: var(--border-hairline-dark);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.sum__total strong {
  font-size: clamp(28px, 3vw, 34px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.sum__foot {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-10);
  padding: 0 var(--spacing-24) var(--spacing-24);
}

.sum__pay i {
  font-size: 12px;
}

.sum__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin: var(--spacing-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
}

.sum__trust i {
  color: var(--color-saffron);
}

.sum__methods {
  justify-self: center;
  width: auto;
  height: 24px;
}

@media (max-width: 991.98px) {
  .co__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .co__rail {
    position: relative;
    top: auto;
  }
}

@media (max-width: 575.98px) {
  .steps__label {
    display: none;
  }

  .steps__item.is-active .steps__label {
    display: inline;
  }
}

.rs {
  padding: var(--section-gap) var(--spacing-16);
}

.rs__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--spacing-24);
  max-width: 1080px;
  margin-inline: auto;
}

.rs__status,
.rs__panel {
  padding: var(--spacing-48) clamp(20px, 4vw, 40px);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.rs__status {
  position: relative;
  overflow: hidden;
  text-align: center;
  background-image: repeating-radial-gradient(circle at 50% 0%, transparent 0 39px, rgba(251, 245, 231, 0.07) 39px 40px);
}

.rs--success .rs__status {
  border: 1px solid var(--color-deep-indigo);
}

.rs--failed .rs__status {
  border: 1px solid var(--color-coffee-bean);
}

.rs__panel {
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation-delay: 150ms;
}

.rs__badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: var(--spacing-24);
  border-radius: var(--radius-circle);
  font-size: 34px;
  animation: rs-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both;
}

.rs__badge::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  animation: rs-ring 1800ms ease-out 900ms 2;
}

.rs--success .rs__badge {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.rs--success .rs__badge::after {
  border-color: var(--color-saffron);
}

.rs--failed .rs__badge {
  color: var(--color-eggshell-cream);
  background-color: var(--color-error);
}

.rs--failed .rs__badge::after {
  border-color: var(--color-error);
}

@keyframes rs-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-40deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.08) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rs-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.rs__title {
  margin: 0 0 var(--spacing-10);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.rs__msg {
  max-width: 38ch;
  margin: 0 auto var(--spacing-32);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.rs__actions {
  display: grid;
  gap: var(--spacing-10);
}

.rs__actions i {
  font-size: 12px;
}

.rs__head {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.rs__receipt {
  display: grid;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
  padding-bottom: var(--spacing-32);
  border-bottom: 1px dashed var(--color-mocha);
}

.rs__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.rs__number {
  margin: -8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-coffee-bean);
  overflow-wrap: anywhere;
}

.rs__rows {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--color-sand-tint);
}

.rs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-10) 0;
  border-bottom: 1px solid var(--color-sand-tint);
}

.rs__row dt {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.rs__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-align: right;
  overflow-wrap: anywhere;
}

.rs__row--total dd {
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.03em;
  color: var(--color-coffee-bean);
}

.rs__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-10);
  border-radius: var(--radius-pills);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.rs__pill--paid {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.rs__pill--wait {
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.rs__note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.rs__note i {
  margin-top: 3px;
  color: var(--color-coffee-bean);
}

.rs__list,
.rs__steps {
  display: grid;
  gap: var(--spacing-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs__list li,
.rs__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  border-left: 3px solid var(--color-saffron);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  background-color: var(--surface-sand-tint);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 260ms ease;
}

.rs__list li:nth-child(1),
.rs__step:nth-child(1) {
  animation-delay: 400ms;
}

.rs__list li:nth-child(2),
.rs__step:nth-child(2) {
  animation-delay: 500ms;
}

.rs__list li:nth-child(3),
.rs__step:nth-child(3) {
  animation-delay: 600ms;
}

.rs__list li:hover,
.rs__step:hover {
  transform: translateX(4px);
}

.rs__list i {
  width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 13px;
  text-align: center;
  color: var(--color-coffee-bean);
}

.rs__num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.rs__assist {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px dashed var(--color-mocha);
}

.rs__assist-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  font-size: 15px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.rs__assist-title {
  margin: 0 0 var(--spacing-5);
  font-size: var(--text-body);
  line-height: 1.3;
}

.rs__assist-text {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.rs__assist-text a,
.rs__list a,
.rs__note a {
  font-weight: var(--font-weight-medium);
  text-underline-offset: 3px;
}

@media (max-width: 991.98px) {
  .rs__wrap {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

@media (max-width: 575.98px) {
  .rs__status,
  .rs__panel {
    padding-block: var(--spacing-32);
  }

  .rs__badge {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }
}

.cr {
  padding: var(--section-gap) var(--spacing-16);
}

.cr__wrap {
  max-width: 1080px;
  margin-inline: auto;
}

.cr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: var(--spacing-24);
}

.cr-main {
  padding: var(--spacing-32) clamp(20px, 3vw, 32px);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both;
}

.cr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  padding-bottom: var(--spacing-16);
  border-bottom: var(--border-hairline);
}

.cr-head__title {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.cr-head__count {
  padding: var(--spacing-5) var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  background-color: var(--surface-sand-tint);
}

.cr-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-item {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--color-sand-tint);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cr-item:nth-child(1) {
  animation-delay: 250ms;
}

.cr-item:nth-child(2) {
  animation-delay: 350ms;
}

.cr-item:nth-child(n + 3) {
  animation-delay: 450ms;
}

.cr-item__media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: var(--border-hairline);
  font-size: 26px;
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.cr-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cr-item:hover .cr-item__media img {
  transform: scale(1.05);
}

.cr-item__media--credits {
  color: var(--color-saffron);
  background-color: var(--surface-hero-indigo);
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 17px, rgba(251, 245, 231, 0.08) 17px 18px);
}

.cr-item__body {
  display: grid;
  justify-items: start;
  gap: var(--spacing-8);
  min-width: 0;
}

.cr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: 3px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.cr-chip--accent {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.cr-item__title {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-coffee-bean);
}

a.cr-item__title:hover {
  color: var(--color-ink-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cr-item__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  color: var(--color-mocha);
}

.cr-item__end {
  display: grid;
  justify-items: end;
  gap: var(--spacing-10);
  text-align: right;
}

.cr-item__price {
  display: grid;
  gap: 2px;
  font-family: var(--font-display);
}

.cr-item__price small {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.cr-item__price strong {
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-coffee-bean);
}

.cr-item__price strong i {
  font-size: 14px;
  color: var(--color-saffron);
}

.cr-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-10);
  border: 1px solid transparent;
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-mocha);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.cr-remove:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

.cr-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-24);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-coffee-bean);
}

.cr-back i {
  transition: transform 220ms ease;
}

.cr-back:hover i {
  transform: translateX(-4px);
}

.cr-alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: 24px;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.cr-alert i {
  color: var(--color-saffron);
}

.cr-side {
  position: sticky;
  top: 80px;
  display: grid;
  gap: var(--spacing-16);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.cr-sum,
.cr-wallet {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-24);
}

.cr-sum {
  display: grid;
  gap: var(--spacing-16);
  border: 1px solid var(--color-coffee-bean);
}

.cr-sum::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 160px;
  height: 160px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.16;
  animation: pre-turn 40s linear infinite;
  pointer-events: none;
}

.cr-sum__title {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.cr-sum__rows {
  display: grid;
  margin: 0;
}

.cr-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-10) 0;
  border-bottom: var(--border-hairline-dark);
}

.cr-sum__row dt {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.cr-sum__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.cr-sum__row--cut dd {
  color: var(--color-saffron);
}

.cr-sum__row--total {
  border-bottom: 0;
}

.cr-sum__row--total dd {
  font-size: clamp(28px, 3vw, 34px);
  letter-spacing: -0.03em;
}

.cr-sum__row--total small,
.cr-sum__row dd small {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.cr-sum__row--after {
  border-top: var(--border-hairline-dark);
}

.cr-sum__cta {
  position: relative;
  z-index: 1;
}

.cr-sum__cta i {
  transition: transform 220ms ease;
}

.cr-sum__cta:hover i {
  transform: translateX(4px);
}

.cr-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
}

.cr-secure i {
  color: var(--color-saffron);
}

.cr-pay {
  justify-self: center;
  width: auto;
  height: 24px;
}

.cr-wallet {
  display: grid;
  gap: var(--spacing-8);
  border: 1px solid var(--color-deep-indigo);
  background-image: repeating-radial-gradient(circle at 100% 0%, transparent 0 27px, rgba(251, 245, 231, 0.08) 27px 28px);
}

.cr-wallet__label,
.cr-wallet__note {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.cr-wallet__amount {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  font-family: var(--font-display);
}

.cr-wallet__amount i {
  font-size: 18px;
  color: var(--color-saffron);
}

.cr-wallet__amount strong {
  font-size: clamp(32px, 3.4vw, 40px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cr-wallet__amount small {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
}

.cr-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--color-eggshell-cream);
  border-radius: var(--radius-pills);
}

.cr-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-saffron);
  animation: cr-fill 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 500ms both;
  transform-origin: left center;
}

.cr-meter__fill.is-short {
  background-color: var(--color-eggshell-cream);
}

@keyframes cr-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.band--indigo .cr-wallet__topup {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-underline-offset: 4px;
}

.cr-empty {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--spacing-48) clamp(20px, 5vw, 48px);
  border: var(--border-hairline);
  text-align: center;
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cr-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-24);
  border-radius: var(--radius-circle);
  font-size: 30px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  animation: rs-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both;
}

.cr-empty__title {
  margin: 0 0 var(--spacing-10);
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

.cr-empty__desc {
  max-width: 42ch;
  margin: 0 auto var(--spacing-24);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.cr-empty__balance {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  background-color: var(--surface-sand-tint);
}

.cr-empty__balance i {
  color: var(--color-saffron);
}

.cr-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-10);
}

.pg {
  padding: var(--section-gap) var(--spacing-16);
}

.pg__wrap {
  display: grid;
  gap: var(--spacing-16);
  max-width: 880px;
  margin-inline: auto;
}

.pg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-10) var(--spacing-16);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pg__tag {
  padding: var(--spacing-5) var(--spacing-16);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.pg__time {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  color: var(--color-mocha);
}

.pg__tools {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-left: auto;
}

.pg__tool {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  font-size: 13px;
  color: var(--color-ink-black);
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.pg__tool:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.pg__tool.is-done {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
}

.pg__copied {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  color: var(--color-coffee-bean);
}

.pg__prose {
  padding: var(--spacing-48) clamp(20px, 5vw, 56px);
  border: var(--border-hairline);
  font-size: var(--text-body-sm);
  line-height: 1.75;
  background-color: var(--surface-eggshell-canvas);
  overflow-wrap: break-word;
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}

.pg__prose > :first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pg__prose > :last-child {
  margin-bottom: 0;
}

.pg__prose h1,
.pg__prose h2 {
  margin: var(--spacing-48) 0 var(--spacing-16);
  padding-top: var(--spacing-32);
  border-top: 1px solid var(--color-sand-tint);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.pg__prose h2::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  vertical-align: 0.08em;
  background: var(--rosette) center / contain no-repeat;
}

.pg__prose h3 {
  margin: var(--spacing-32) 0 var(--spacing-10);
  font-size: var(--text-title);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pg__prose h4,
.pg__prose h5,
.pg__prose h6 {
  margin: var(--spacing-24) 0 var(--spacing-8);
  font-size: var(--text-body);
  line-height: 1.3;
}

.pg__prose p {
  margin: 0 0 var(--spacing-16);
}

.pg__prose strong,
.pg__prose b {
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.pg__prose a {
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
  text-underline-offset: 3px;
}

.pg__prose a:hover {
  color: var(--color-ink-black);
}

.pg__prose ul,
.pg__prose ol {
  display: grid;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-24);
  padding: 0;
  list-style: none;
}

.pg__prose li {
  position: relative;
  padding-left: 28px;
}

.pg__prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 11px;
  height: 11px;
  background: var(--rosette) center / contain no-repeat;
}

.pg__prose ol {
  counter-reset: pg-step;
}

.pg__prose ol > li {
  counter-increment: pg-step;
}

.pg__prose ol > li::before {
  content: counter(pg-step);
  position: absolute;
  left: 0;
  top: 0.2em;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.pg__prose li > ul,
.pg__prose li > ol {
  margin: var(--spacing-8) 0 0;
}

.pg__prose img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.pg__prose blockquote {
  margin: 0 0 var(--spacing-24);
  padding: var(--spacing-16) var(--spacing-24);
  border-left: 3px solid var(--color-saffron);
  background-color: var(--surface-sand-tint);
}

.pg__prose hr {
  margin: var(--spacing-32) 0;
  border: 0;
  border-top: 1px solid var(--color-sand-tint);
}

.pg__table {
  max-width: 100%;
  margin: 0 0 var(--spacing-24);
  overflow-x: auto;
  border: var(--border-hairline);
}

.pg__prose table {
  width: 100% !important;
  min-width: 480px;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse;
  font-size: var(--text-caption);
  line-height: 1.5;
}

.pg__prose th,
.pg__prose td {
  padding: var(--spacing-10) var(--spacing-16) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-sand-tint) !important;
  text-align: left;
  vertical-align: middle;
  background-color: transparent !important;
}

.pg__prose tr:last-child > td {
  border-bottom: 0 !important;
}

.pg__prose th {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint) !important;
}

.pg__prose td:first-child:not(:only-child) {
  border-right: 1px solid var(--color-sand-tint) !important;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
  background-color: rgba(236, 226, 203, 0.45) !important;
}

.pg__prose td img {
  margin-left: 0 !important;
}

.pg__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-24) clamp(20px, 5vw, 40px);
  border: 1px solid var(--color-coffee-bean);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both;
}

.pg__help-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.pg__help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
}

@media (max-width: 991.98px) {
  .cr-layout {
    grid-template-columns: 1fr;
  }

  .cr-side {
    position: relative;
    top: auto;
  }
}

@media (max-width: 575.98px) {
  .cr-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-16);
  }

  .cr-item__media {
    grid-column: 1 / -1;
  }

  .cr-item__end {
    align-self: start;
  }

  .pg__prose {
    padding-block: var(--spacing-32);
  }

  .pg__help-actions,
  .pg__help-actions .btn {
    width: 100%;
  }
}

@media print {
  .hd,
  .nav,
  .bn,
  .ft,
  .totop,
  #ck-consent,
  .notes,
  .pg__meta,
  .pg__help {
    display: none !important;
  }

  .pg,
  .pg__prose {
    padding: 0;
    border: 0;
  }
}

.cg,
.cd {
  padding: var(--section-gap) var(--spacing-16);
}

.cg__wrap {
  max-width: 1200px;
  margin-inline: auto;
}

.cg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cg-bar__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.cg-bar__desc {
  max-width: 60ch;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.cg-bar__count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-5);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.cg-bar__count strong {
  font-size: var(--text-body);
  letter-spacing: 0;
}

.cg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 var(--spacing-32);
  padding-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--color-sand-tint);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both;
}

.cg-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink-black);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.cg-pill:hover {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.cg-pill.is-active {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.cg-pill__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--spacing-5);
  border-radius: var(--radius-pills);
  font-size: var(--text-micro);
  background-color: var(--surface-sand-tint);
}

.cg-pill.is-active .cg-pill__count {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.cg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-card {
  display: flex;
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cg-card:nth-child(1) { animation-delay: 150ms; }
.cg-card:nth-child(2) { animation-delay: 220ms; }
.cg-card:nth-child(3) { animation-delay: 290ms; }
.cg-card:nth-child(4) { animation-delay: 360ms; }
.cg-card:nth-child(5) { animation-delay: 430ms; }
.cg-card:nth-child(n + 6) { animation-delay: 500ms; }

.cg-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: var(--border-hairline);
  text-decoration: none;
  color: inherit;
  background-color: var(--surface-eggshell-canvas);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color var(--transition-base);
}

.cg-card__link:hover {
  color: inherit;
  border-color: var(--color-coffee-bean);
  transform: translateY(-4px);
}

.cg-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--border-hairline);
  background-color: var(--surface-sand-tint);
}

.cg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cg-card__link:hover .cg-card__media img {
  transform: scale(1.06);
}

.cg-card__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 34px;
  color: var(--color-saffron);
  background-color: var(--surface-hero-indigo);
}

.cg-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-10);
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-16);
}

.cg-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
}

.cg-card__cat,
.cg-card__levels,
.cd-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: 3px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.cg-card__levels,
.cd-tag--accent {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.cg-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-coffee-bean);
}

.cg-card__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cg-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  margin-top: auto;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-sand-tint);
}

.cg-card__price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-5);
  font-family: var(--font-display);
}

.cg-card__price small {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.cg-card__price strong {
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-coffee-bean);
}

.cg-card__price strong i {
  font-size: 14px;
  color: var(--color-saffron);
}

.cg-card__go {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  font-size: 13px;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.cg-card__go-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cg-card__go i {
  transition: transform 260ms ease;
}

.cg-card__link:hover .cg-card__go {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.cg-card__link:hover .cg-card__go i {
  transform: translateX(3px);
}

.cg-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-10);
  margin-top: var(--spacing-48);
}

.cg-pages__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 40px;
  padding: 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-black);
  transition: background-color var(--transition-base);
}

a.cg-pages__btn:hover {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.cg-pages__btn.is-disabled {
  opacity: 0.35;
}

.cg-pages__nums {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
}

.cg-pages__num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-ink-black);
  transition: background-color var(--transition-base);
}

a.cg-pages__num:hover {
  color: var(--color-ink-black);
  background-color: var(--surface-sand-tint);
}

.cg-pages__num.is-current {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.cg-empty {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--spacing-48) clamp(20px, 5vw, 48px);
  border: var(--border-hairline);
  text-align: center;
  background-color: var(--surface-eggshell-canvas);
}

.cg-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-24);
  border-radius: var(--radius-circle);
  font-size: 30px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  animation: rs-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.cg-empty__title {
  margin: 0 0 var(--spacing-10);
  font-size: clamp(24px, 3vw, 30px);
}

.cg-empty__desc {
  margin: 0 auto var(--spacing-24);
  max-width: 42ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.cd__wrap {
  display: grid;
  gap: var(--spacing-24);
  max-width: 1200px;
  margin-inline: auto;
}

.cd-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--spacing-24);
}

.cd-media,
.cd-info,
.cd-about {
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cd-media {
  padding: var(--spacing-16);
}

.cd-stage {
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: var(--border-hairline);
  background-color: var(--surface-sand-tint);
}

.cd-stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cd-fade 500ms ease both;
}

@keyframes cd-fade {
  from {
    opacity: 0.4;
  }
}

.cd-stage__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 44px;
  color: var(--color-saffron);
  background-color: var(--surface-hero-indigo);
}

.cd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--spacing-10);
  margin-top: var(--spacing-16);
}

.cd-thumb {
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: var(--border-hairline);
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition-base);
}

.cd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-thumb:hover {
  opacity: 1;
}

.cd-thumb.is-active {
  opacity: 1;
  outline: 2px solid var(--color-coffee-bean);
  outline-offset: 2px;
}

.cd-info {
  position: sticky;
  top: 80px;
  padding: var(--spacing-32) clamp(20px, 3vw, 32px);
  animation-delay: 120ms;
}

.cd-title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

.cd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-16);
}

.cd-tag--link {
  transition: background-color var(--transition-base), color var(--transition-base);
}

.cd-tag--link:hover {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.cd-lede {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.cd-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  text-align: center;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.cd-start__price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-5);
  font-family: var(--font-display);
}

.cd-start__from,
.cd-start__price small {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.cd-start__price i {
  font-size: 15px;
  color: var(--color-saffron);
}

.cd-start__price strong {
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cd-start .cd-start__cta {
  color: var(--color-coffee-bean);
  background-color: var(--color-eggshell-cream);
  border-color: var(--color-eggshell-cream);
}

.cd-start .cd-start__cta:hover {
  color: var(--color-eggshell-cream);
  background-color: transparent;
}

.cd-start .cd-start__cta:focus-visible {
  outline: var(--focus-ring-dark);
}

.cd-start__cta i {
  transition: transform 220ms ease;
}

.cd-start__cta:hover i {
  transform: translateY(3px);
}

.cd-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 0;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-sand-tint);
  font-size: var(--text-eyebrow);
  line-height: 1.5;
  color: var(--color-mocha);
}

.cd-note i {
  margin-top: 2px;
  color: var(--color-coffee-bean);
}

.cd-about {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--spacing-32) clamp(20px, 5vw, 48px);
  animation-delay: 200ms;
}

.cd-section-title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.cd-section-title::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  vertical-align: 0.08em;
  background: var(--rosette) center / contain no-repeat;
}

.cd-prose {
  max-width: none;
  font-size: var(--text-body-sm);
  line-height: 1.75;
}

.cd-levels {
  margin-top: var(--spacing-24);
}

.cd-levels__head {
  margin-bottom: var(--spacing-24);
}

.cd-levels__sub {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-mocha);
}

.cd-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-track:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cd-slide {
  display: flex;
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cd-slide:nth-child(2) { animation-delay: 100ms; }
.cd-slide:nth-child(3) { animation-delay: 200ms; }
.cd-slide:nth-child(n + 4) { animation-delay: 300ms; }

.cd-level {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-24);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color var(--transition-base);
}

.cd-level:hover {
  border-color: var(--color-coffee-bean);
  transform: translateY(-4px);
}

.cd-level__head {
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--color-sand-tint);
}

.cd-level__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-10);
}

.cd-level__num {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-mocha);
}

.cd-level__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

.cd-level__bars span {
  width: 5px;
  border-radius: 2px;
  background-color: var(--surface-sand-tint);
}

.cd-level__bars span:nth-child(1) { height: 6px; }
.cd-level__bars span:nth-child(2) { height: 9px; }
.cd-level__bars span:nth-child(3) { height: 12px; }
.cd-level__bars span:nth-child(4) { height: 16px; }

.cd-level__bars span.is-on {
  background-color: var(--color-saffron);
}

.cd-level__name {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-title);
  line-height: 1.2;
}

.cd-level__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-5);
  margin: 0;
  font-family: var(--font-display);
}

.cd-level__price i {
  font-size: 14px;
  color: var(--color-saffron);
}

.cd-level__price strong {
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-coffee-bean);
}

.cd-level__price small {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.cd-points {
  display: grid;
  gap: var(--spacing-16);
  margin: var(--spacing-16) 0 var(--spacing-24);
  padding: 0;
  list-style: none;
}

.cd-point {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
}

.cd-point__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  font-size: 12px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.cd-point__label {
  margin: 0 0 2px;
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.cd-point__desc {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.cd-form {
  margin-top: auto;
}

.cd-form__submit i {
  transition: transform 220ms ease;
}

.cd-form__submit:hover i {
  transform: translateX(4px);
}

@media (max-width: 1099.98px) {
  .cg-grid,
  .cd-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .cd-hero {
    grid-template-columns: 1fr;
  }

  .cd-info {
    position: relative;
    top: auto;
  }
}

@media (max-width: 767.98px) {
  .cg-grid,
  .cd-track,
  .cd-track:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr;
  }

  .cg-pills {
    flex-wrap: nowrap;
    margin-inline: calc(var(--spacing-16) * -1);
    padding-inline: var(--spacing-16);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cg-pills::-webkit-scrollbar {
    display: none;
  }
}

.dash,
.rcpt {
  padding: var(--section-gap) var(--spacing-16);
}

.dash__wrap {
  display: grid;
  gap: var(--spacing-24);
  max-width: 1120px;
  margin-inline: auto;
}

.dash__hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding: var(--spacing-32) clamp(20px, 4vw, 40px);
  overflow: hidden;
  border: 1px solid var(--color-deep-indigo);
  background-image: repeating-radial-gradient(circle at 100% 50%, transparent 0 39px, rgba(251, 245, 231, 0.07) 39px 40px);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.who {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  min-width: 0;
}

.who__avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  color: var(--color-deep-indigo);
  background-color: var(--color-eggshell-cream);
  animation: rs-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms both;
}

.who__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.who__email {
  margin: 2px 0 var(--spacing-8);
  font-size: var(--text-caption);
  overflow-wrap: anywhere;
}

.who__since {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-saffron);
}

.wallet {
  display: grid;
  justify-items: end;
  gap: var(--spacing-8);
  text-align: right;
}

.wallet__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.wallet__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-8);
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
}

.wallet__value i {
  font-size: 0.5em;
  color: var(--color-saffron);
}

.wallet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.fig {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  border: var(--border-hairline);
  border-left: 3px solid var(--color-saffron);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms both;
}

.fig + .fig {
  animation-delay: 230ms;
}

.fig__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  font-size: 16px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.fig__text {
  display: grid;
  gap: 2px;
}

.fig__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.fig__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-coffee-bean);
}

.fig__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-coffee-bean);
}

.fig__link i {
  transition: transform 220ms ease;
}

.fig__link:hover i {
  transform: translateX(4px);
}

.dnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.dnav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 44px;
  padding: 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.dnav__item:hover {
  background-color: var(--surface-sand-tint);
}

.dnav__item.is-active {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.dnav__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--spacing-5);
  border-radius: var(--radius-pills);
  font-size: var(--text-micro);
  background-color: var(--surface-sand-tint);
}

.dnav__item.is-active .dnav__count {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.dash .panel {
  padding: var(--spacing-32) clamp(20px, 4vw, 40px);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dash .panel + .panel {
  border-top: var(--border-hairline);
}

.otable {
  overflow-x: auto;
  border: var(--border-hairline);
}

.otable table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--text-caption);
}

.otable th,
.otable td {
  padding: var(--spacing-16);
  border-bottom: 1px solid var(--color-sand-tint);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.otable th {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.otable tbody tr {
  transition: background-color var(--transition-base);
}

.otable tbody tr:nth-child(even) {
  background-color: rgba(236, 226, 203, 0.35);
}

.otable tbody tr:hover {
  background-color: var(--surface-sand-tint);
}

.otable tbody tr:last-child td {
  border-bottom: 0;
}

.otable__no {
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.otable__bolt {
  margin-right: 4px;
  font-size: 11px;
  color: var(--color-saffron);
}

.otable__amount {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.otable__act {
  text-align: right !important;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: 3px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.chip i {
  color: var(--color-saffron);
}

.state {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: 3px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.state--ok {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.state--wait {
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.state--err {
  color: var(--color-eggshell-cream);
  background-color: var(--color-error);
}

.courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.course {
  display: flex;
  flex-direction: column;
  border: var(--border-hairline);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color var(--transition-base);
}

.course:hover {
  border-color: var(--color-coffee-bean);
  transform: translateY(-4px);
}

.course__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--border-hairline);
  font-size: 34px;
  color: var(--color-saffron);
  background-color: var(--surface-hero-indigo);
}

.course__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.course:hover .course__media img {
  transform: scale(1.05);
}

.course__status {
  position: absolute;
  top: var(--spacing-10);
  left: var(--spacing-10);
}

.course__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-10);
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
}

.course__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5);
}

.chip--text i {
  color: var(--color-coffee-bean);
}

.course__title {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.3;
}

.course__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-5) var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  color: var(--color-mocha);
}

.course__meta i {
  margin-right: 4px;
}

.course__btn {
  margin-top: auto;
}

.blank {
  display: grid;
  justify-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-32) 0;
  text-align: center;
}

.blank p {
  max-width: 42ch;
  margin: 0;
  font-size: var(--text-body-sm);
}

.blank__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  font-size: 26px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.pwd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: var(--spacing-24);
}

.pwd__fields {
  display: grid;
  gap: var(--spacing-24);
  max-width: 520px;
}

.pwd__fields .btn {
  justify-self: start;
}

.tips {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-24);
}

.tips__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--spacing-16);
  border-radius: var(--radius-circle);
  font-size: 16px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.tips__title {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body);
  line-height: 1.3;
}

.tips__list {
  display: grid;
  gap: var(--spacing-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tips__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.tips__list i {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-saffron);
}

.rcpt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--spacing-24);
  max-width: 1080px;
  margin-inline: auto;
}

.ticket {
  padding: var(--spacing-32) clamp(20px, 4vw, 40px);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both;
}

.ticket__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.ticket__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.ticket__no {
  margin: var(--spacing-5) 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-coffee-bean);
  overflow-wrap: anywhere;
}

.ticket__date {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-5);
  font-size: var(--text-caption);
  color: var(--color-mocha);
}

.ticket__stamp {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-circle);
  font-size: 22px;
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
  animation: rs-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both;
}

.ticket__stamp.is-ok {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.tear {
  margin: var(--spacing-24) 0;
  border-top: 1px dashed var(--color-mocha);
}

.ticket__h {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body);
  line-height: 1.3;
}

.ticket__h i {
  font-size: 13px;
  color: var(--color-saffron);
}

.items {
  display: grid;
  gap: var(--spacing-10);
  margin: 0 0 var(--spacing-32);
  padding: 0;
  list-style: none;
}

.item {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  border-left: 3px solid var(--color-saffron);
  background-color: var(--surface-sand-tint);
}

.item__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  font-size: 13px;
  color: var(--color-saffron);
  background-color: var(--surface-hero-indigo);
}

.item__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.item__level {
  display: inline-block;
  margin-left: var(--spacing-5);
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-pills);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.item .chip {
  background-color: var(--surface-eggshell-canvas);
}

.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--spacing-24);
  margin: 0;
}

.detail {
  padding: var(--spacing-10) 0;
  border-bottom: 1px solid var(--color-sand-tint);
}

.detail--wide {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.detail dt {
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.detail dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.detail dd i {
  color: var(--color-coffee-bean);
}

.rcpt__rail {
  position: sticky;
  top: 80px;
  display: grid;
  gap: var(--spacing-24);
  padding: var(--spacing-24);
  overflow: hidden;
  border: 1px solid var(--color-coffee-bean);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.rcpt__rail::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 160px;
  height: 160px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.16;
  animation: pre-turn 40s linear infinite;
  pointer-events: none;
}

.total {
  display: grid;
  gap: var(--spacing-5);
}

.total__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-saffron);
}

.total__value {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 40px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
}

.total__value i {
  font-size: 0.5em;
  color: var(--color-saffron);
}

.stats {
  display: grid;
  border-block: var(--border-hairline-dark);
}

.stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  padding: var(--spacing-10) 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.stats__row + .stats__row {
  border-top: var(--border-hairline-dark);
}

.rcpt__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-10);
}

.band--coffee .btn--quiet {
  color: var(--color-eggshell-cream);
}

.band--coffee .btn--quiet:hover {
  color: var(--color-ink-black);
  background-color: var(--color-eggshell-cream);
}

.rcpt .blank {
  padding: var(--spacing-16) 0;
}

@media (max-width: 991.98px) {
  .rcpt__grid,
  .pwd {
    grid-template-columns: 1fr;
  }

  .rcpt__rail {
    position: relative;
    top: auto;
  }
}

@media (max-width: 767.98px) {
  .dash__hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .wallet {
    justify-items: start;
    text-align: left;
  }

  .wallet__actions {
    justify-content: flex-start;
  }

  .figs,
  .courses,
  .details {
    grid-template-columns: 1fr;
  }

}

@media print {
  .rcpt__rail {
    position: static;
  }

  .rcpt__actions {
    display: none;
  }
}

.tp {
  padding: var(--section-gap) var(--spacing-16);
}

.tp__wrap {
  display: grid;
  gap: var(--spacing-32);
  max-width: 1120px;
  margin-inline: auto;
}

.tp-intro {
  display: grid;
  gap: var(--spacing-16);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tp-intro__text {
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.tp-intro__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-10);
}

.tp-rate {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.tp-rate i {
  color: var(--color-saffron);
}

.tp-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pills);
  font-size: var(--text-caption);
  line-height: 1.4;
  background-color: var(--surface-sand-tint);
}

.tp-notice i {
  color: var(--color-coffee-bean);
}

.tp-notice strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.tp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--spacing-24);
}

.tp-calc {
  padding: var(--spacing-32) clamp(20px, 4vw, 40px);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both;
}

.tp-calc__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
}

.tp-calc__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  font-size: 18px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.tp-calc__title {
  margin: 0 0 var(--spacing-5);
  font-size: var(--text-title);
  line-height: 1.2;
}

.tp-calc__desc {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-mocha);
}

.tp-label {
  display: block;
  margin-bottom: var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
}

.tp-amount {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-24);
}

.tp-amount__symbol {
  position: absolute;
  left: 24px;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
  pointer-events: none;
}

.tp-amount .tp-amount__input {
  min-height: 64px;
  padding: 0 var(--spacing-24) 0 64px;
  border-width: 2px;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  -moz-appearance: textfield;
}

.tp-amount .tp-amount__input::-webkit-outer-spin-button,
.tp-amount .tp-amount__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.tp-amount .tp-amount__input::placeholder {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
}

.tp-amount .tp-amount__input:focus,
.tp-amount .tp-amount__input:focus-visible {
  border-color: var(--color-coffee-bean);
  outline: 2px solid var(--color-saffron);
  outline-offset: 2px;
}

.tp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-32);
}

.tp-quick__btn {
  min-height: 40px;
  padding: 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform 200ms ease;
}

.tp-quick__btn:hover {
  background-color: var(--surface-sand-tint);
  transform: translateY(-2px);
}

.tp-quick__btn.is-active {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.tp-tiers__title {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body);
  line-height: 1.3;
}

.tp-table table {
  min-width: 440px;
}

.tp-table th,
.tp-table td {
  padding: var(--spacing-10) var(--spacing-10);
}

.tp-table th:first-child,
.tp-table td:first-child {
  padding-left: var(--spacing-16);
  white-space: normal;
}

.tp-table td {
  white-space: nowrap;
}

.tp-tier td {
  transition: background-color 300ms ease;
}

.tp-tier__name {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.tp-tier__name i {
  width: 16px;
  font-size: 12px;
  text-align: center;
  color: var(--color-saffron);
}

.tp-tier__badge,
.tp-tier__match {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin-top: var(--spacing-5);
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-pills);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.tp-tier__badge {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.tp-tier__match {
  display: none;
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
}

.tp-tier__mult {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  padding: 3px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.tp-tier--best .tp-tier__mult {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.otable tbody .tp-tier.is-match,
.otable tbody .tp-tier.is-match:hover {
  background-color: rgba(242, 158, 12, 0.18);
}

.tp-tier.is-match td:first-child {
  border-left: 3px solid var(--color-saffron);
}

.tp-tier.is-match .tp-tier__match {
  display: flex;
  animation: fld-err 300ms ease both;
}

.tp-result {
  position: sticky;
  top: 80px;
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-32) var(--spacing-24);
  overflow: hidden;
  border: 1px solid var(--color-coffee-bean);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}

.tp-result::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 170px;
  height: 170px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.16;
  animation: pre-turn 40s linear infinite;
  pointer-events: none;
}

.tp-result__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-saffron);
}

.tp-result__total {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-10);
  font-family: var(--font-display);
}

.tp-result__total i {
  font-size: 24px;
  color: var(--color-saffron);
}

.tp-result__total strong {
  display: inline-block;
  transform-origin: left bottom;
  font-size: clamp(44px, 5vw, 60px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.tp-result__total.is-pulse strong {
  animation: tp-pulse 360ms ease;
}

@keyframes tp-pulse {
  40% {
    color: var(--color-saffron);
    transform: scale(1.04);
  }
}

.tp-result__rows {
  display: grid;
  margin: 0;
  border-block: var(--border-hairline-dark);
}

.tp-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  padding: var(--spacing-10) 0;
}

.tp-result__row + .tp-result__row {
  border-top: var(--border-hairline-dark);
}

.tp-result__row dt {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.tp-result__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.tp-result__mult {
  display: inline-block;
  padding: 2px var(--spacing-10);
  border-radius: var(--radius-pills);
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.tp-submit {
  position: relative;
  z-index: 1;
}

.tp-submit i {
  transition: transform 220ms ease;
}

.tp-submit:hover i {
  transform: translateX(4px);
}

.tp-secure {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0;
  font-size: var(--text-eyebrow);
  line-height: 1.5;
}

.tp-secure i {
  margin-top: 2px;
  color: var(--color-saffron);
}

.tp-how__title {
  margin: 0 0 var(--spacing-24);
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.15;
}

.tp-how__title::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  vertical-align: 0.08em;
  background: var(--rosette) center / contain no-repeat;
}

.tp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tp-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--spacing-10);
  padding: var(--spacing-24);
  border: var(--border-hairline);
  border-top: 3px solid var(--color-saffron);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp-step:nth-child(2) {
  animation-delay: 100ms;
}

.tp-step:nth-child(3) {
  animation-delay: 200ms;
}

.tp-step:hover {
  transform: translateY(-4px);
}

.tp-step__num {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-24);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-sand-tint);
}

.tp-step__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  font-size: 16px;
  color: var(--color-saffron);
  background-color: var(--surface-hero-indigo);
}

.tp-step__title {
  margin: var(--spacing-5) 0 0;
  font-size: var(--text-body);
  line-height: 1.3;
}

.tp-step__desc {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

@media (max-width: 991.98px) {
  .tp-form {
    grid-template-columns: 1fr;
  }

  .tp-result {
    position: relative;
    top: auto;
  }
}

@media (max-width: 767.98px) {
  .tp-steps {
    grid-template-columns: 1fr;
  }

  .tp-notice {
    border-radius: 18px;
  }
}

.au {
  padding: var(--section-gap) var(--spacing-16);
}

.au__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1160px;
  margin-inline: auto;
}

.au-photos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-48);
}

.au-photos::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: -56px 0 0 -32px;
  border: 6px solid var(--surface-eggshell-canvas);
  border-radius: var(--radius-circle);
  background: var(--color-coffee-bean) var(--rosette) center / 34px no-repeat;
  animation: pre-turn 30s linear infinite;
  pointer-events: none;
}

.au-photo {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--border-hairline);
  background-color: var(--surface-sand-tint);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.au-photo:nth-child(even) {
  transform: translateY(var(--spacing-48));
  animation-name: au-rise-low;
}

.au-photo:nth-child(2) {
  animation-delay: 100ms;
}

.au-photo:nth-child(3) {
  animation-delay: 200ms;
}

.au-photo:nth-child(4) {
  animation-delay: 300ms;
}

@keyframes au-rise-low {
  from {
    opacity: 0;
    transform: translateY(calc(var(--spacing-48) + 14px));
  }

  to {
    opacity: 1;
    transform: translateY(var(--spacing-48));
  }
}

.au-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.au-photo:hover img {
  transform: scale(1.05);
}

.au-text {
  padding: var(--spacing-48) clamp(20px, 4vw, 48px);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms both;
}

.au-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.au-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--rosette) center / contain no-repeat;
}

.au-title {
  margin: 0 0 var(--spacing-24);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.au-copy {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.au-points {
  display: grid;
  gap: var(--spacing-10);
  margin: var(--spacing-24) 0;
  padding: 0;
  list-style: none;
}

.au-points li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
  color: var(--color-coffee-bean);
}

.au-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 13px;
  height: 13px;
  background: var(--rosette) center / contain no-repeat;
}

.au-steps__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  margin: var(--spacing-32) 0 var(--spacing-24);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
}

.au-steps__title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-sand-tint);
}

.au-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--spacing-32);
  padding: 0;
  list-style: none;
}

.au-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-10);
  padding: 0 var(--spacing-5);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  text-align: center;
  color: var(--color-coffee-bean);
}

.au-step + .au-step::before {
  content: "";
  position: absolute;
  top: 21px;
  right: calc(50% + 26px);
  width: calc(100% - 52px);
  border-top: 2px dashed var(--color-saffron);
}

.au-step + .au-step::after {
  content: "";
  position: absolute;
  top: 17px;
  right: calc(50% + 24px);
  border: 5px solid transparent;
  border-left: 7px solid var(--color-saffron);
}

.au-step__num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-coffee-bean);
  border-radius: var(--radius-circle);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.au-step:last-child .au-step__num {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
}

.au-step:hover .au-step__num {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
  transform: scale(1.1);
}

.au-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
}

.au-actions .btn i {
  transition: transform 220ms ease;
}

.au-actions .btn:hover i {
  transform: translateX(4px);
}

@media (max-width: 991.98px) {
  .au__wrap {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
}

@media (max-width: 575.98px) {
  .au-photos {
    gap: var(--spacing-10);
    padding-bottom: 0;
  }

  .au-photo:nth-child(even) {
    transform: none;
    animation-name: bn-rise;
  }

  .au-photos::after {
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    background-size: 26px;
  }

  .au-steps {
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
  }

  .au-step {
    flex-direction: row;
    text-align: left;
  }

  .au-step + .au-step::before {
    top: auto;
    bottom: calc(100% - 2px);
    left: 21px;
    right: auto;
    width: 0;
    height: calc(var(--spacing-16) + 4px);
    border-top: 0;
    border-left: 2px dashed var(--color-saffron);
  }

  .au-step + .au-step::after {
    display: none;
  }

  .au-text {
    padding-block: var(--spacing-32);
  }

  .au-actions .btn {
    width: 100%;
  }
}

.hm {
  padding: var(--spacing-32) var(--spacing-16) var(--spacing-24);
}

.hm__wrap {
  max-width: 1240px;
  margin-inline: auto;
}

.hm-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(440px, auto) 220px;
  grid-template-areas:
    "hero hero hero look"
    "mats cats walk walk";
  gap: var(--spacing-16);
}

.hm-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: var(--border-hairline);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hm-tile--hero {
  grid-area: hero;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px);
  border-color: var(--color-coffee-bean);
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 47px, rgba(251, 245, 231, 0.07) 47px 48px);
}

.hm-tile--hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.22;
  animation: pre-turn 60s linear infinite;
  pointer-events: none;
}

.hm-tile--look {
  grid-area: look;
  animation-delay: 100ms;
}

.hm-bento > .hm-tile--stat {
  animation-delay: 200ms;
}

.hm-bento > .hm-tile--sand {
  animation-delay: 280ms;
}

.hm-tile--walk {
  grid-area: walk;
  animation-delay: 360ms;
}

.hm-bento > .hm-tile--stat.band--coffee {
  grid-area: mats;
}

.hm-bento > .hm-tile--sand {
  grid-area: cats;
}

.hm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-saffron);
}

.hm-badge::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--rosette) center / contain no-repeat;
}

.hm-badge--dark {
  color: var(--color-mocha);
}

.hm-title {
  position: relative;
  z-index: 1;
  max-width: 14ch;
  margin: 0 0 var(--spacing-16);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: var(--font-weight-medium);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--color-eggshell-cream);
}

.hm-lead {
  position: relative;
  z-index: 1;
  max-width: 52ch;
  margin: 0 0 var(--spacing-32);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.hm-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
}

.hm-actions .btn i,
.hm-sec .btn i {
  transition: transform 220ms ease;
}

.hm-actions .btn:hover .fa-arrow-right,
.hm-sec .btn:hover .fa-arrow-right {
  transform: translateX(4px);
}

.hm-tile--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-tile--walk img {
  object-position: center 44%;
}

.hm-tile--photo:hover img {
  transform: scale(1.05);
}

.hm-cap {
  position: absolute;
  left: var(--spacing-16);
  bottom: var(--spacing-16);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  max-width: calc(100% - 32px);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-coffee-bean);
  background-color: var(--surface-eggshell-canvas);
}

.hm-cap::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background: var(--rosette) center / contain no-repeat;
}

.hm-tile--stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing-5);
  padding: var(--spacing-24);
  text-decoration: none;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-tile--stat:hover {
  transform: translateY(-4px);
}

.hm-tile--stat.band--coffee {
  border-color: var(--color-coffee-bean);
  color: var(--color-eggshell-cream);
}

.hm-tile--stat.band--coffee:hover {
  color: var(--color-eggshell-cream);
}

.hm-tile--sand {
  color: var(--color-coffee-bean);
  background-color: var(--surface-sand-tint);
}

.hm-tile--sand:hover {
  color: var(--color-coffee-bean);
}

.hm-stat__num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: var(--font-weight-medium);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.hm-stat__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.hm-stat__go {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: var(--radius-circle);
  font-size: 13px;
  transition: transform 300ms ease, background-color var(--transition-base), color var(--transition-base);
}

.hm-tile--stat:hover .hm-stat__go {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
  transform: rotate(-45deg);
}

.hm-ticker {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-24) 0;
  border-block: 1px solid var(--color-deep-indigo);
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 39px, rgba(251, 245, 231, 0.07) 39px 40px);
}

.hm-ticker__track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  animation: hm-marquee 60s linear infinite;
}

.hm-ticker:hover .hm-ticker__track,
.hm-ticker:focus-within .hm-ticker__track {
  animation-play-state: paused;
}

@keyframes hm-marquee {
  to {
    transform: translateX(-50%);
  }
}

.hm-ticker__list {
  display: flex;
  gap: var(--spacing-10);
  margin: 0;
  padding: 0 var(--spacing-10) 0 0;
  list-style: none;
}

.hm-ticker__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 44px;
  padding: 0 var(--spacing-10) 0 var(--spacing-16);
  border: var(--border-hairline);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink-black);
  background-color: var(--surface-eggshell-canvas);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.band--indigo .hm-ticker__pill {
  color: var(--color-ink-black);
  border-color: var(--color-eggshell-cream);
}

.band--indigo .hm-ticker__pill:hover {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
  border-color: var(--color-saffron);
}

.hm-ticker__count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--spacing-5);
  border-radius: var(--radius-pills);
  font-size: var(--text-micro);
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.hm-sec {
  padding: var(--section-gap) var(--spacing-16) 0;
}

.hm-sec--last {
  padding-bottom: var(--section-gap);
}

.hm-sec--band {
  position: relative;
  overflow: hidden;
  margin-top: var(--section-gap);
  padding-block: var(--section-gap);
  background-image: repeating-radial-gradient(circle at 100% 0%, transparent 0 55px, rgba(251, 245, 231, 0.07) 55px 56px);
}

.hm-sec--band > .hm__wrap {
  position: relative;
  z-index: 1;
}

.hm-sec--band .hm-head__desc {
  color: var(--color-eggshell-cream);
}

.hm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
}

.hm-head__title {
  margin: 0 0 var(--spacing-8);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.hm-head__desc {
  max-width: 60ch;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.hm-mag {
  display: grid;
  grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 3fr));
  grid-template-rows: repeat(2, auto);
  gap: var(--spacing-16);
}

.hm-card {
  display: flex;
  flex-direction: column;
  border: var(--border-hairline);
  text-decoration: none;
  color: inherit;
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color var(--transition-base);
}

.band--indigo .hm-card,
.band--indigo .hm-card:hover {
  color: var(--color-ink-black);
}

.hm-card:hover {
  color: inherit;
  border-color: var(--color-coffee-bean);
  transform: translateY(-4px);
}

.hm-card:nth-child(2) { animation-delay: 80ms; }
.hm-card:nth-child(3) { animation-delay: 160ms; }
.hm-card:nth-child(4) { animation-delay: 240ms; }
.hm-card:nth-child(5) { animation-delay: 320ms; }

.hm-card--lead {
  grid-row: 1 / 3;
}

.hm-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--border-hairline);
  background-color: var(--surface-sand-tint);
}

.hm-card--lead .hm-card__media {
  aspect-ratio: 16 / 11;
}

.hm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-card:hover .hm-card__media img {
  transform: scale(1.06);
}

.hm-card__cat {
  position: absolute;
  left: var(--spacing-10);
  top: var(--spacing-10);
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 3px var(--spacing-10);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-coffee-bean);
  background-color: var(--surface-eggshell-canvas);
}

.hm-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
}

.hm-card--lead .hm-card__body {
  gap: var(--spacing-10);
  padding: var(--spacing-24);
}

.hm-card__levels {
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-pills);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.hm-card__title {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  color: var(--color-coffee-bean);
}

.hm-card--lead .hm-card__title {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hm-card__desc {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.hm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  width: 100%;
  margin-top: auto;
  padding-top: var(--spacing-10);
  border-top: 1px solid var(--color-sand-tint);
}

.hm-card__price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
}

.hm-card__price small {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-mocha);
}

.hm-card__price strong {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.hm-card--lead .hm-card__price strong {
  font-size: var(--text-title);
}

.hm-card__price strong i {
  font-size: 12px;
  color: var(--color-saffron);
}

.hm-card__go {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: var(--border-hairline);
  border-radius: var(--radius-circle);
  font-size: 12px;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.hm-card:hover .hm-card__go {
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

.hm-duo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--spacing-24);
}

.hm-duo__photo {
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: var(--border-hairline);
  background-color: var(--surface-sand-tint);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hm-duo__photo--low {
  margin-top: var(--spacing-80);
  animation-delay: 240ms;
}

.hm-duo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-duo__photo:hover img {
  transform: scale(1.05);
}

.hm-duo__cards {
  display: grid;
  gap: var(--spacing-24);
  align-self: center;
}

.hm-duo__card {
  display: grid;
  justify-items: start;
  gap: var(--spacing-10);
  padding: var(--spacing-32) var(--spacing-24);
  border: var(--border-hairline);
  background-color: var(--surface-eggshell-canvas);
  animation: bn-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-duo__card.band--coffee {
  border-color: var(--color-coffee-bean);
  background-color: var(--surface-coffee-band);
}

.hm-duo__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  font-size: 16px;
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.hm-duo__title {
  margin: var(--spacing-5) 0 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hm-duo__text {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.hm-duo__card + .hm-duo__card {
  animation-delay: 200ms;
}

.hm-duo__card:hover {
  transform: translateY(-4px);
}

.hm-duo__card .btn {
  margin-top: var(--spacing-8);
}

.hm-trio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: var(--spacing-16);
}

.hm-tile--steps {
  padding: var(--spacing-32);
  background-color: var(--surface-eggshell-canvas);
}

.hm-path {
  display: grid;
  gap: var(--spacing-16);
  margin: var(--spacing-24) 0 0;
  padding: 0;
  list-style: none;
}

.hm-path__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.hm-path__step + .hm-path__step::before {
  content: "";
  position: absolute;
  left: 19px;
  bottom: calc(100% - 2px);
  height: calc(var(--spacing-16) + 4px);
  border-left: 2px dashed var(--color-saffron);
}

.hm-path__num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-eggshell-cream);
  background-color: var(--color-coffee-bean);
  transition: transform 260ms ease, background-color var(--transition-base), color var(--transition-base);
}

.hm-path__step:last-child .hm-path__num,
.hm-path__step:hover .hm-path__num {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.hm-path__step:hover .hm-path__num {
  transform: scale(1.1);
}

.hm-path__text {
  display: grid;
  gap: 2px;
  padding-top: 2px;
}

.hm-path__title {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-coffee-bean);
}

.hm-path__desc {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.hm-tile--pause {
  min-height: 320px;
  animation-delay: 100ms;
}

.hm-tile--credits {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  border-color: var(--color-deep-indigo);
  background-image: repeating-radial-gradient(circle at 100% 0%, transparent 0 39px, rgba(251, 245, 231, 0.07) 39px 40px);
  animation-delay: 200ms;
}

.hm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-video__veil {
  position: absolute;
  inset: 0;
  background-color: rgba(61, 40, 0, 0.55);
}

.hm-hero__body {
  position: relative;
  z-index: 1;
}

.hm-credits {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-16);
  padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
}

.hm-credits .hm-badge {
  margin: 0;
}

.hm-credits__title {
  margin: 0;
  font-size: var(--text-title);
  line-height: 1.2;
}

.hm-tiers {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid rgba(251, 245, 231, 0.3);
}

.hm-tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--spacing-10);
  padding: var(--spacing-8) 0;
  font-family: var(--font-display);
  font-size: var(--text-caption);
}

.hm-tier + .hm-tier {
  border-top: 1px solid rgba(251, 245, 231, 0.18);
}

.hm-tier__name {
  font-weight: var(--font-weight-medium);
}

.hm-tier__range {
  font-size: var(--text-eyebrow);
  font-variant-numeric: tabular-nums;
}

.hm-tier__mult {
  min-width: 44px;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-pills);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--color-eggshell-cream);
  background-color: rgba(251, 245, 231, 0.14);
}

.hm-tier--best .hm-tier__mult {
  color: var(--color-ink-black);
  background-color: var(--color-saffron);
}

.hm-video__toggle {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-16);
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-eggshell-cream);
  border-radius: var(--radius-circle);
  font-size: 11px;
  color: var(--color-eggshell-cream);
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.hm-video__toggle:hover {
  color: var(--color-coffee-bean);
  background-color: var(--color-eggshell-cream);
}

@media (max-width: 1099.98px) {
  .hm-trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-tile--steps {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991.98px) {
  .hm-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "hero hero"
      "look walk"
      "mats cats";
  }

  .hm-tile--look,
  .hm-tile--walk {
    min-height: 320px;
  }

  .hm-tile--stat {
    min-height: 180px;
  }

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

  .hm-card--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 991.98px) {
  .hm-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-16);
  }

  .hm-duo__photo--low {
    grid-column: 2;
    grid-row: 1;
    margin-top: var(--spacing-48);
  }

  .hm-duo__cards {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-16);
  }
}

@media (max-width: 575.98px) {
  .hm-duo__photo--low {
    margin-top: var(--spacing-24);
  }

  .hm-duo__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .hm-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "look"
      "mats"
      "cats"
      "walk";
  }

  .hm-mag,
  .hm-trio {
    grid-template-columns: 1fr;
  }

  .hm-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-ticker__track {
    flex-wrap: wrap;
    width: auto;
    padding-inline: var(--spacing-16);
  }

  .hm-ticker__list[aria-hidden="true"] {
    display: none;
  }

  .hm-ticker__list {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .pre__orbit {
    stroke-dashoffset: 0;
  }

  .pre__fill {
    width: 100%;
    transform: none;
  }
}