@font-face {
  font-family: "Manrope";
  src: url("../Typography/Fonts/Manrope-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --tt-black: #000000; --tt-white: #FFFFFF; --tt-forest: #174C36;
  --tt-cloud: #F4F6F4; --tt-sage: #DCE8DE; --tt-peach: #F1A88D;
  --tt-ink: #17231B; --tt-muted: #526057; --tt-line: #CED7D0;
  --tt-control: #718177; --tt-hover: #103B2A; --tt-pressed: #0B2B1E;
  --tt-error: #B42318; --tt-success: #246A47; --tt-warning: #8A5700; --tt-info: #235EA7;
  --tt-font: "Manrope", Arial, sans-serif;
  --tt-space-1: .25rem; --tt-space-2: .5rem; --tt-space-3: .75rem;
  --tt-space-4: 1rem; --tt-space-6: 1.5rem; --tt-space-8: 2rem;
  --tt-space-12: 3rem; --tt-space-16: 4rem; --tt-space-24: 6rem;
  --tt-container: 80rem; --tt-gutter: 1.25rem; --tt-section: 3rem;
  --tt-radius-control: .25rem; --tt-radius-panel: .5rem;
  --tt-duration-fast: 160ms; --tt-duration-standard: 220ms; --tt-easing: ease-out;
  --tt-display: 2.5rem; --tt-h1: 2rem; --tt-h2: 1.75rem; --tt-h3: 1.375rem; --tt-lead: 1.125rem;
}
.tt-scope { font-family: var(--tt-font); color: var(--tt-ink); background: var(--tt-white); font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
.tt-scope *, .tt-scope *::before, .tt-scope *::after { box-sizing: border-box; }
.tt-container { max-width: calc(var(--tt-container) + var(--tt-gutter) * 2); margin-inline: auto; padding-inline: var(--tt-gutter); }
.tt-section { padding-block: var(--tt-section); }
.tt-display { font-size: var(--tt-display); font-weight: 800; line-height: 1.08; }
.tt-h1 { font-size: var(--tt-h1); font-weight: 800; line-height: 1.12; }
.tt-h2 { font-size: var(--tt-h2); font-weight: 800; line-height: 1.2; }
.tt-h3 { font-size: var(--tt-h3); font-weight: 600; line-height: 1.3; }
.tt-lead { font-size: var(--tt-lead); font-weight: 400; line-height: 1.5; }
.tt-label { font-size: .875rem; font-weight: 600; line-height: 1.4; }
.tt-caption { font-size: .75rem; font-weight: 400; line-height: 1.5; }
.tt-prose { max-width: 66ch; }
.tt-price { font-variant-numeric: tabular-nums; }
.tt-link { color: var(--tt-forest); text-decoration: underline; text-underline-offset: .22em; }
.tt-scope :focus-visible { outline: 2px solid var(--tt-ink); outline-offset: 4px; box-shadow: 0 0 0 4px var(--tt-white); }
.tt-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.25rem; border: 1px solid transparent;
  border-radius: var(--tt-radius-control); background: var(--tt-forest); color: var(--tt-white);
  font: 600 .875rem/1.4 var(--tt-font); letter-spacing: 0; text-align: center; text-decoration: none;
  cursor: pointer; overflow-wrap: anywhere;
  transition: background-color var(--tt-duration-fast) var(--tt-easing), border-color var(--tt-duration-fast) var(--tt-easing);
}
.tt-button:hover:not(:disabled) { background: var(--tt-hover); }
.tt-button:active:not(:disabled) { background: var(--tt-pressed); }
.tt-button--secondary { color: var(--tt-ink); background: transparent; border-color: var(--tt-control); }
.tt-button--secondary:hover:not(:disabled) { background: var(--tt-cloud); }
.tt-button--secondary:active:not(:disabled) { background: var(--tt-sage); }
.tt-button:disabled { cursor: not-allowed; background: var(--tt-cloud); color: var(--tt-muted); border-color: var(--tt-line); }
.tt-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; color: var(--tt-ink); border: 1px solid var(--tt-control); border-radius: var(--tt-radius-control); cursor: pointer; }
.tt-field { display: grid; gap: .5rem; }
.tt-field label { font-size: .875rem; font-weight: 600; }
.tt-input { width: 100%; min-height: 3rem; border: 1px solid var(--tt-control); border-radius: var(--tt-radius-control); padding: .75rem; font: 400 1rem/1.4 var(--tt-font); color: var(--tt-ink); background: var(--tt-white); }
.tt-input::placeholder { color: var(--tt-muted); opacity: 1; }
.tt-input[aria-invalid="true"] { border-color: var(--tt-error); }
.tt-help { margin: 0; color: var(--tt-muted); font-size: .875rem; }
.tt-error { margin: 0; color: var(--tt-error); font-size: .875rem; }
.tt-choice { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; cursor: pointer; }
.tt-choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--tt-forest); }
.tt-status { border-left: 3px solid currentColor; padding: .75rem 1rem; font-size: .875rem; background: var(--tt-white); }
.tt-status--success { color: var(--tt-success); }.tt-status--error { color: var(--tt-error); }
.tt-status--warning { color: var(--tt-warning); }.tt-status--info { color: var(--tt-info); }
.tt-product-image { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--tt-cloud); }
.tt-editorial-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tt-logo { display: block; width: 160px; max-width: 100%; height: auto; }
.tt-skip { position: fixed; top: 8px; left: 8px; z-index: 99; padding: 12px 16px; background: var(--tt-white); color: var(--tt-ink); transform: translateY(-160%); }
.tt-skip:focus { transform: translateY(0); }
@media (min-width: 640px) { :root { --tt-gutter: 2rem; --tt-section: 5rem; } }
@media (min-width: 1024px) { :root { --tt-gutter: 3rem; --tt-section: 6rem; --tt-display: 4rem; --tt-h1: 3rem; --tt-h2: 2rem; --tt-h3: 1.5rem; --tt-lead: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .tt-scope *, .tt-scope *::before, .tt-scope *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }