/* Designer package v1. Fonts are bundled in fonts.css; no remote runtime import. */
:root {
  color-scheme: light;
  --cc-paper: #F7F0E2;
  --cc-card: #F1E2C6;
  --cc-white: #FFF9EF;
  --cc-ink: #4B2B1E;
  --cc-brown-muted: #8A654B;
  --cc-pencil: #6B4A36;
  --cc-red: #E84B3C;
  --cc-red-soft: #F8D8D0;
  --cc-divider: #DCC9A8;
  --cc-pure-white: #FFFFFF;

  --cc-font-display: "Bowlby One SC", "Lilita One", system-ui, sans-serif;
  --cc-font-body: "DM Sans", system-ui, sans-serif;
  --cc-font-hand: "Caveat", cursive;

  --cc-radius-card: 24px;
  --cc-radius-panel: 18px;
  --cc-radius-control: 14px;
  --cc-radius-pill: 999px;

  --cc-space-1: 0.5rem;
  --cc-space-2: 1rem;
  --cc-space-3: 1.5rem;
  --cc-space-4: 2rem;
  --cc-space-5: 2.5rem;
  --cc-page-gutter: clamp(1.125rem, 5vw, 1.5rem);
  --cc-content-max: 32rem;

  --cc-border: 1px solid var(--cc-divider);
  --cc-focus: 0 0 0 3px rgba(232, 75, 60, 0.35);
}

* { box-sizing: border-box; }

html { background: var(--cc-paper); }

body {
  margin: 0;
  background: var(--cc-paper);
  color: var(--cc-ink);
  font-family: var(--cc-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cc-app {
  width: min(100%, var(--cc-content-max));
  margin-inline: auto;
  padding: 1.25rem var(--cc-page-gutter) 2rem;
}

.cc-wordmark,
.cc-display-title {
  margin: 0;
  color: var(--cc-ink);
  font-family: var(--cc-font-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.cc-wordmark { font-size: clamp(2rem, 7vw, 3.4rem); }
.cc-display-title { font-size: clamp(1.8rem, 5vw, 2.5rem); }
.cc-section-title { margin: 0; font-size: 1.25rem; line-height: 1.2; font-weight: 700; }
.cc-body { margin: 0; font-size: 1rem; }
.cc-helper { color: var(--cc-brown-muted); font-size: .875rem; }
.cc-hand-note { font-family: var(--cc-font-hand); font-size: 1.25rem; font-weight: 600; }

.cc-panel {
  background: var(--cc-white);
  border: var(--cc-border);
  border-radius: var(--cc-radius-panel);
}

.cc-loyalty-card {
  padding: 1.25rem;
  background: var(--cc-card);
  border: 1.5px solid var(--cc-divider);
  border-radius: var(--cc-radius-card);
}

.cc-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  border: 1.5px solid transparent;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-red);
  color: #fff;
  font: 700 1rem/1.2 var(--cc-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}
.cc-button:hover { transform: translateY(-1px); }
.cc-button:active { transform: translateY(0); }
.cc-button:focus-visible, .cc-link:focus-visible, .cc-control:focus-visible {
  outline: none;
  box-shadow: var(--cc-focus);
}
.cc-button--secondary {
  background: transparent;
  color: var(--cc-ink);
  border-color: var(--cc-pencil);
}

.cc-plan-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  padding: 1rem;
  background: var(--cc-white);
  border: var(--cc-border);
  border-radius: var(--cc-radius-panel);
}
.cc-plan-price { white-space: nowrap; font-weight: 700; font-size: 1.1rem; }

.cc-avatar { width: 3rem; height: 3rem; display: block; flex: none; }
.cc-divider { height: 1px; border: 0; background: var(--cc-divider); margin: 1.25rem 0; }

@media (min-width: 700px) {
  .cc-app { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}