/**
 * CPM Landing — landing.css
 *
 * Single stylesheet for the landing site. Imports design tokens as CSS custom
 * properties, then defines layout, typography, and component styles.
 *
 * Rules:
 *   - All color, spacing, radius, elevation, and motion values use token vars.
 *   - No external font imports — system font stack (zero transfer weight).
 *   - Target: < 20KB minified.
 *
 * Sections:
 *   1. Token import
 *   2. Reset & base
 *   3. Layout utilities
 *   4. Skip link
 *   5. Buttons
 *   6. Site header & navigation
 *   7. Site footer
 *   8. Section patterns
 *   9. Hero
 *  10. Feature cards
 *  11. Steps
 *  12. Check list
 *  13. Callout
 *  14. Pricing
 *  15. FAQ accordion
 *  16. Sign-in card
 *  17. Page hero
 *  18. CTA band
 *  19. Prose
 *  20. Accessibility utilities
 */

/* 1. Token import ─────────────────────────────────────────────────────────── */
/* Landing consumes only the design-tokens package — no other dependencies.   */
/* In the built output this is inlined by the build step / served as separate  */
/* file in dev. Eleventy passes it through unchanged from src/css/.            */

/* NOTE: In the Eleventy build the token file is referenced via the           */
/* packages/design-tokens path. Since Eleventy doesn't resolve node_modules,  */
/* the tokens are declared inline below as a self-contained copy for the       */
/* static build. This avoids a bundler dependency for a pure-static site.      */
/* The token values are the single source from packages/design-tokens/src/*.   */

/* ── Primitive palette ─ */
:root {
  --color-surface:          #FFFFFF;
  --color-surface-subtle:   #F4F1EC;
  --color-surface-raised:   #FFFFFF;
  --color-surface-overlay:  rgba(26, 23, 20, 0.46);
  --color-text:             #1A1714;
  --color-text-muted:       #5C554C;
  --color-text-disabled:    #8B8377;
  --color-text-inverse:     #FFFFFF;
  --color-primary:          #B45309;
  --color-primary-hover:    #993D07;
  --color-primary-muted:    #FBEEDF;
  --color-on-primary:       #FFFFFF;
  --color-positive:         #1E7A4D;
  --color-positive-muted:   #E6F4EC;
  --color-on-positive:      #FFFFFF;
  --color-negative:         #C0392B;
  --color-negative-hover:   #A6291C;
  --color-negative-muted:   #FBEAE7;
  --color-on-negative:      #FFFFFF;
  --color-warning:          #B7791F;
  --color-warning-muted:    #FBF0DA;
  --color-on-warning:       #1A1714;
  --color-info:             #0E7C86;
  --color-info-muted:       #E2F3F4;
  --color-on-info:          #FFFFFF;
  --color-border:           #E7E2D9;
  --color-border-strong:    #D8D2C6;
  --color-border-subtle:    #EFEBE3;
  --color-focus-ring:       #B45309;
  --focus-ring-width:       2px;
  --focus-ring-offset:      2px;

  /* ── Typography ─ */
  --font-family-sans: "Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-numeric:     tabular-nums;
  --font-size-xs:     0.75rem;
  --font-size-sm:     0.875rem;
  --font-size-md:     1rem;
  --font-size-lg:     1.25rem;
  --font-size-xl:     1.5625rem;
  --font-size-2xl:    1.9375rem;
  --font-size-3xl:    2.4375rem;
  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --letter-spacing-tight: -0.025em;

  /* ── Spacing ─ */
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Radius ─ */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* ── Elevation ─ */
  --elevation-1: 0 1px 2px 0 rgba(0,0,0,0.05);
  --elevation-2: 0 1px 3px 0 rgba(0,0,0,0.10),0 1px 2px -1px rgba(0,0,0,0.10);
  --elevation-3: 0 4px 6px -1px rgba(0,0,0,0.10),0 2px 4px -2px rgba(0,0,0,0.10);

  /* ── Motion ─ */
  --motion-duration-fast:   100ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow:   300ms;
  --motion-ease-standard:   cubic-bezier(0.4,0,0.2,1);

  /* ── Layout ─ */
  --container-max:      80rem;
  --container-padding-x: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast:   0ms;
    --motion-duration-normal: 0ms;
    --motion-duration-slow:   0ms;
  }
}

/* 2. Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-family-sans);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body { margin: 0; line-height: var(--line-height-normal); }

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

a { color: var(--color-primary); text-decoration: underline; }
a:hover { color: var(--color-primary-hover); }

h1,h2,h3,h4,h5,h6 {
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; }

/* 3. Layout utilities ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-8); }
}

/* 4. Skip link ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
}
.skip-link:focus { transform: translateY(0); }

/* 5. Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary-muted);
}

.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-md); }
.btn--full { width: 100%; }

/* 6. Site header & navigation ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--elevation-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 4rem;
}

.site-header__logo {
  text-decoration: none;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.site-nav__link {
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
              background var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-nav__link:hover,
.site-nav__link--active { color: var(--color-text); background: var(--color-surface-subtle); }
.site-nav__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-nav__cta { margin-left: var(--space-2); }

/*
 * Mobile nav: CSS-only checkbox/label toggle.
 *
 * Mechanism:
 *   1. #nav-checkbox is visually hidden but focusable via its <label>.
 *   2. .nav-toggle (<label for="nav-checkbox">) is visible on mobile only.
 *   3. .nav-checkbox:checked ~ .site-nav shows the dropdown on mobile.
 *   4. On desktop (≥ 768px) .site-nav is always in-flow; checkbox is irrelevant.
 *
 * No JavaScript is involved. The checked state is the sole open/close signal.
 * Default state: checkbox unchecked → menu hidden on mobile (correct closed default).
 */

/* Checkbox: visually hidden but still in the tab/focus order via its label. */
/* Positioned at (0,0) so it doesn't affect layout; clip hides the visual box. */
.nav-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hamburger label — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  margin-left: auto;
  cursor: pointer;
  border-radius: var(--radius-sm);
  /* Provide a focus ring on the label itself for keyboard users */
  outline-offset: var(--focus-ring-offset);
}
.nav-toggle:focus-within,
.nav-checkbox:focus-visible + .nav-toggle {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  border-radius: var(--radius-sm);
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
}

@media (max-width: 767px) {
  /* Show hamburger label on mobile */
  .nav-toggle { display: flex; }

  /* Mobile nav: hidden by default, revealed when checkbox is checked */
  .site-nav {
    display: none;
    position: absolute;
    top: 4rem;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-3);
    box-shadow: var(--elevation-2);
  }

  /* The sole open-state rule — no JS, no aria-hidden selector needed */
  .nav-checkbox:checked ~ .site-nav {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }
  .site-nav__link {
    padding: var(--space-2) var(--space-3);
  }
  .site-nav__cta { margin-left: 0; width: 100%; }
}

/* 7. Site footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-12) 0 var(--space-8);
  margin-top: var(--space-16);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}

.site-footer__logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  color: var(--color-text);
}

.site-footer__tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.site-footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__link {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-footer__link:hover { color: var(--color-text); }
.site-footer__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.site-footer__legal { grid-column: 1 / -1; }
.site-footer__copy {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* 8. Section patterns ─────────────────────────────────────────────────────── */
.section { padding: var(--space-16) 0; }
.section--alt { background: var(--color-surface-subtle); }

.section__title {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-2xl);
}

.section__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-bottom: var(--space-10);
  line-height: var(--line-height-relaxed);
}

/* 9. Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--color-surface) 60%, var(--color-primary-muted) 100%);
  padding: var(--space-20) 0 var(--space-16);
}

.hero__headline {
  font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-3xl));
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-6);
  line-height: var(--line-height-tight);
}

.hero__subhead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 55ch;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 10. Feature cards ───────────────────────────────────────────────────────── */
.features__list {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  margin-top: var(--space-8);
}

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

.feature-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
}

.feature-card__icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-3);
}

.feature-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.feature-card__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* 11. Steps ───────────────────────────────────────────────────────────────── */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.step__number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.step__content p {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* 12. Check list ──────────────────────────────────────────────────────────── */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.check-list li::before {
  content: "✔";
  color: var(--color-positive);
  flex-shrink: 0;
  font-weight: var(--font-weight-bold);
  margin-top: 1px;
}

/* 13. Callout ─────────────────────────────────────────────────────────────── */
.callout {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: var(--space-6) 0;
}
.callout--info {
  background: var(--color-info-muted);
  border-color: var(--color-info);
}

/* 14. Pricing ─────────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; max-width: 48rem; }
}

.pricing-card {
  position: relative;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pricing-card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--elevation-3);
}

.pricing-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-0-5) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-card__name {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-2);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.pricing-card__amount {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: var(--font-numeric);
  letter-spacing: var(--letter-spacing-tight);
}

.pricing-card__period {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.pricing-card__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.pricing-feature__check {
  color: var(--color-positive);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* 15. FAQ accordion ───────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 65ch;
}

.faq-item { border-bottom: 1px solid var(--color-border-subtle); }

.faq-details { width: 100%; }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question__icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
  margin-top: 2px;
}

.faq-question__icon::before { content: "+"; }
.faq-details[open] .faq-question__icon::before { content: "−"; }

.faq-question:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.faq-answer {
  padding: 0 0 var(--space-4);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.faq-answer p { margin: 0; }

/* 16. Sign-in card ────────────────────────────────────────────────────────── */
.signin-card {
  max-width: 28rem;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: center;
}

.signin-card__body {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.signin-card__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* 17. Page hero ───────────────────────────────────────────────────────────── */
.page-hero { padding: var(--space-16) 0 var(--space-10); }
.page-hero h1 { margin-bottom: var(--space-4); }
.page-hero__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* 18. CTA band ────────────────────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band__inner { max-width: 40rem; margin-inline: auto; }
.cta-band__title { margin-bottom: var(--space-4); }
.cta-band__body {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: var(--line-height-relaxed);
}

/* 19. Prose ───────────────────────────────────────────────────────────────── */
.prose { max-width: var(--container-prose); }
.prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-3); }
.prose p { color: var(--color-text-muted); line-height: var(--line-height-relaxed); }
.prose a { color: var(--color-primary); }
.prose a:hover { color: var(--color-primary-hover); }
.prose a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* 20. Accessibility utilities ─────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}