@layer tokens, reset, base, layout, components, utilities;

@layer tokens {
  :root {
    /* Palette */
    --bm-color-paper: #f4f1ea; /*#f4f1ea*/
    --bm-color-ink: #000000;
    --bm-color-acid: #f3633f; /*#00a878,#ffc819,#4ed2e3,#e34e4e,#b33b32,#38b491,#e0535a,#f3633f*/
    --bm-color-focus: #f4f1ea; /*#f3c93f*/
    --bm-color-grid-line: #00000009;

    /* Typography */
    --bm-font-heading: "Archivo Black", sans-serif;
    --bm-font-body: "Archivo", sans-serif;
    --bm-font-mono: "IBM Plex Mono", monospace;
    --bm-weight-regular: 400;
    --bm-weight-medium: 500;
    --bm-weight-semibold: 600;
    --bm-text-badge: 10px;
    --bm-text-label: .6875rem;
    --bm-text-button-compact: 12px;
    --bm-text-button-regular: 13px;
    --bm-text-card-body: .9375rem;
    --bm-text-body: 1rem;
    --bm-text-pricing-title: 1.125rem;
    --bm-text-card-title: 1.4375rem;
    --bm-text-pricing-price: clamp(2rem, 3.5vw, 3rem);
    --bm-text-display: clamp(3rem, 6vw, 5.125rem);
    --bm-text-section: clamp(2rem, 4vw, 3.25rem);
    --bm-line-body: 1.6;
    --bm-line-heading: 1.1;
    --bm-line-label: 1.5;
    --bm-line-button: 1.25;
    --bm-line-display: 1.09;
    --bm-tracking-label: .08em;
    --bm-tracking-badge: .06em;
    --bm-tracking-card: -.025em;
    --bm-tracking-price: -.04em;
    --bm-tracking-display: -.055em;
    --bm-tracking-section: -.045em;

    /* Spacing */
    --bm-space-1: .25rem;
    --bm-space-2: .5rem;
    --bm-space-3: .75rem;
    --bm-space-4: 1rem;
    --bm-space-5: 1.5rem;
    --bm-space-6: 2rem;
    --bm-space-7: 3rem;
    --bm-space-8: 5rem;

    /* Borders, depth, interaction */
    --bm-border-width: 3px;
    --bm-border-width-thin: 2px;
    --bm-border: var(--bm-border-width) solid var(--bm-color-ink);
    --bm-border-thin: var(--bm-border-width-thin) solid var(--bm-color-ink);
    --bm-shadow-offset: 7px;
    --bm-shadow-offset-compact: 4px;
    --bm-shadow: var(--bm-shadow-offset) var(--bm-shadow-offset) 0 var(--bm-color-ink);
    --bm-shadow-compact: var(--bm-shadow-offset-compact) var(--bm-shadow-offset-compact) 0 var(--bm-color-ink);
    --bm-press-hover-offset: 2px;
    --bm-focus-width: var(--bm-border-width);
    --bm-focus-offset: 5px;
    --bm-focus-outline: var(--bm-focus-width) solid var(--bm-color-focus);
    --bm-disabled-opacity: .5;
    --bm-motion-duration: 120ms;
    --bm-motion-easing: ease;

    /* Layout */
    --bm-container-width: 1200px;
    --bm-container-gutter: clamp(1.125rem, 3vw, 1.5rem);
    --bm-section-padding: clamp(var(--bm-space-7), 6vw, var(--bm-space-8));
    --bm-grid-gap: var(--bm-space-5);
    --bm-grid-columns: 3;
    --bm-grid-paper-size: 44px;
    --bm-grid-paper-line-width: 1px;
    --bm-scroll-offset: var(--bm-space-6);

    /* Component sizing */
    --bm-button-regular-height: 52px;
    --bm-button-regular-padding-block: 15px;
    --bm-button-regular-padding-inline: 22px;
    --bm-button-regular-gap: 1.375rem;
    --bm-button-compact-height: 40px;
    --bm-button-compact-padding-block: 9px;
    --bm-button-compact-padding-inline: 16px;
    --bm-button-compact-gap: var(--bm-space-3);
    --bm-button-icon-size: 1.25em;
    --bm-card-padding: clamp(var(--bm-space-5), 3vw, 1.75rem);
    --bm-card-label-gap: var(--bm-space-6);
    --bm-card-body-gap: var(--bm-space-4);
    --bm-pricing-gap: var(--bm-space-5);
    --bm-pricing-price-gap: var(--bm-space-2);
    --bm-pricing-feature-gap: var(--bm-space-3);
    --bm-pricing-feature-marker-gap: .625rem;
    --bm-pricing-footer-padding: var(--bm-space-4);
    --bm-pricing-badge-inset: 1.75rem;
    --bm-pricing-badge-lift: -50%;
    --bm-badge-padding-block: 6px;
    --bm-badge-padding-inline: 10px;
    --bm-badge-gap: var(--bm-space-2);
    --bm-highlight-padding: .08em;
    --bm-highlight-padding-block: .0em;
    --bm-visually-hidden-size: 1px;
    --bm-visually-hidden-margin: -1px;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p { margin: 0; }
  button, input, textarea, select { font: inherit; }
  img, svg { max-width: 100%; }
  img { display: block; height: auto; }
  button { border-radius: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  html { scroll-padding-top: var(--bm-scroll-offset); }
  body { background: var(--bm-color-paper); color: var(--bm-color-ink); font-family: var(--bm-font-body); font-size: var(--bm-text-body); line-height: var(--bm-line-body); }
  h1, h2, h3, h4 { font-family: var(--bm-font-heading); font-weight: var(--bm-weight-regular); line-height: var(--bm-line-heading); }
  a { color: inherit; }
  button { cursor: pointer; }
  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: var(--bm-focus-outline); outline-offset: var(--bm-focus-offset); }
}

@layer layout {
  .bm-container { width: 100%; max-width: var(--bm-container-width); margin-inline: auto; padding-inline: var(--bm-container-gutter); }
  .bm-section { padding-block: var(--bm-section-padding); border-bottom: var(--bm-border); }
  .bm-grid { display: grid; gap: var(--bm-grid-gap); }
  .bm-grid--three { grid-template-columns: repeat(var(--bm-grid-columns), minmax(0, 1fr)); }
  .bm-stack { display: flex; flex-direction: column; gap: var(--bm-space-4); }
  .bm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bm-space-4); }
  /* Native CSS custom properties cannot be used as media-query conditions.
     This is the single literal responsive breakpoint; no build step is required. */
  @media (max-width: 52rem) { .bm-grid--three { grid-template-columns: minmax(0, 1fr); } }
}

@layer components {
  /* Buttons: 4 types x 3 colors.
     Types: regular, compact, regular-full-width, compact-full-width.
     The base button is always as wide as its content. */
  .bm-button {
    --bm-button-bg: var(--bm-color-ink);
    --bm-button-fg: var(--bm-color-paper);
    --bm-button-height: var(--bm-button-regular-height);
    --bm-button-padding-block: var(--bm-button-regular-padding-block);
    --bm-button-padding-inline: var(--bm-button-regular-padding-inline);
    --bm-button-gap: var(--bm-button-regular-gap);
    --bm-button-font-size: var(--bm-text-button-regular);
    --bm-button-shadow-offset: var(--bm-shadow-offset);
    display: inline-flex; align-items: center; justify-content: center;
    width: fit-content; max-width: 100%; flex: 0 0 auto;
    gap: var(--bm-button-gap); min-height: var(--bm-button-height);
    padding: var(--bm-button-padding-block) var(--bm-button-padding-inline);
    background: var(--bm-button-bg); color: var(--bm-button-fg);
    border: var(--bm-border); border-radius: 0;
    box-shadow: var(--bm-button-shadow-offset) var(--bm-button-shadow-offset) 0 var(--bm-color-ink);
    font-family: var(--bm-font-heading); font-size: var(--bm-button-font-size);
    font-weight: var(--bm-weight-regular); line-height: var(--bm-line-button);
    text-transform: uppercase; text-align: center; text-decoration: none;
    overflow-wrap: anywhere; cursor: pointer;
    transition: transform var(--bm-motion-duration) var(--bm-motion-easing), box-shadow var(--bm-motion-duration) var(--bm-motion-easing);
  }
  .bm-button--regular,
  .bm-button--regular-full-width {
    --bm-button-height: var(--bm-button-regular-height);
    --bm-button-padding-block: var(--bm-button-regular-padding-block);
    --bm-button-padding-inline: var(--bm-button-regular-padding-inline);
    --bm-button-gap: var(--bm-button-regular-gap);
    --bm-button-font-size: var(--bm-text-button-regular);
    --bm-button-shadow-offset: var(--bm-shadow-offset);
  }
  .bm-button--compact,
  .bm-button--compact-full-width {
    --bm-button-height: var(--bm-button-compact-height);
    --bm-button-padding-block: var(--bm-button-compact-padding-block);
    --bm-button-padding-inline: var(--bm-button-compact-padding-inline);
    --bm-button-gap: var(--bm-button-compact-gap);
    --bm-button-font-size: var(--bm-text-button-compact);
    --bm-button-shadow-offset: var(--bm-shadow-offset-compact);
  }
  .bm-button--regular-full-width,
  .bm-button--compact-full-width { width: 100%; }
  .bm-button--paper { --bm-button-bg: var(--bm-color-paper); --bm-button-fg: var(--bm-color-ink); }
  .bm-button--ink { --bm-button-bg: var(--bm-color-ink); --bm-button-fg: var(--bm-color-paper); }
  .bm-button--acid { --bm-button-bg: var(--bm-color-acid); --bm-button-fg: var(--bm-color-ink); }
  .bm-button__icon { color: inherit; flex-shrink: 0; font-size: var(--bm-button-icon-size); line-height: 1; }
  .bm-button--ink .bm-button__icon { color: var(--bm-color-paper); }
  @media (hover: hover) {
    .bm-button:not(:disabled):not([aria-disabled="true"]):hover {
      transform: translate(var(--bm-press-hover-offset), var(--bm-press-hover-offset));
      box-shadow: calc(var(--bm-button-shadow-offset) - var(--bm-press-hover-offset)) calc(var(--bm-button-shadow-offset) - var(--bm-press-hover-offset)) 0 var(--bm-color-ink);
    }
  }
  .bm-button:not(:disabled):not([aria-disabled="true"]):active { transform: translate(var(--bm-button-shadow-offset), var(--bm-button-shadow-offset)); box-shadow: none; }
  .bm-button:disabled, .bm-button[aria-disabled="true"] { opacity: var(--bm-disabled-opacity); cursor: not-allowed; transform: none; }

  .bm-card, .bm-pricing-card {
    --bm-surface-bg: var(--bm-color-paper);
    --bm-surface-text: var(--bm-color-ink);
    --bm-surface-heading: var(--bm-color-ink);
    min-width: 0; padding: var(--bm-card-padding);
    background: var(--bm-surface-bg); color: var(--bm-surface-text);
    border: var(--bm-border); box-shadow: var(--bm-shadow); overflow-wrap: anywhere;
  }
  .bm-card--paper, .bm-pricing-card--paper { --bm-surface-bg: var(--bm-color-paper); --bm-surface-text: var(--bm-color-ink); --bm-surface-heading: var(--bm-color-ink); }
  .bm-card--ink, .bm-pricing-card--ink { --bm-surface-bg: var(--bm-color-ink); --bm-surface-text: var(--bm-color-paper); --bm-surface-heading: var(--bm-color-paper); }
  .bm-card--acid, .bm-pricing-card--acid { --bm-surface-bg: var(--bm-color-focus); --bm-surface-text: var(--bm-color-ink); --bm-surface-heading: var(--bm-color-ink); }
  .bm-card__label, .bm-pricing-card__label { display: block; font-family: var(--bm-font-mono); font-size: var(--bm-text-label); font-weight: var(--bm-weight-semibold); line-height: var(--bm-line-label); text-transform: uppercase; color: var(--bm-surface-heading); }
  .bm-card__label { margin-bottom: var(--bm-card-label-gap); }
  .bm-card__title { color: var(--bm-surface-heading); font-size: var(--bm-text-card-title); letter-spacing: var(--bm-tracking-card); text-transform: uppercase; }
  .bm-card__body { margin-top: var(--bm-card-body-gap); font-size: var(--bm-text-card-body); line-height: var(--bm-line-body); }

  .bm-badge {
    --bm-badge-bg: var(--bm-color-ink); --bm-badge-fg: var(--bm-color-acid);
    display: inline-flex; align-items: center; gap: var(--bm-badge-gap); max-width: 100%;
    padding: var(--bm-badge-padding-block) var(--bm-badge-padding-inline); border: var(--bm-border-thin);
    background: var(--bm-badge-bg); color: var(--bm-badge-fg);
    font-family: var(--bm-font-mono); font-size: var(--bm-text-badge); font-weight: var(--bm-weight-semibold);
    line-height: var(--bm-line-label); letter-spacing: var(--bm-tracking-badge); text-transform: uppercase; overflow-wrap: anywhere;
  }
  .bm-badge--paper { --bm-badge-bg: var(--bm-color-paper); --bm-badge-fg: var(--bm-color-ink); }
  .bm-badge--ink { --bm-badge-bg: var(--bm-color-ink); --bm-badge-fg: var(--bm-color-acid); }
  .bm-badge--acid { --bm-badge-bg: var(--bm-color-acid); --bm-badge-fg: var(--bm-color-ink); }

  .bm-pricing-card { position: relative; display: flex; flex-direction: column; gap: var(--bm-pricing-gap); }
  .bm-pricing-card__badge { position: absolute; inset-block-start: 0; inset-inline-start: var(--bm-pricing-badge-inset); transform: translateY(var(--bm-pricing-badge-lift)); max-width: calc(100% - var(--bm-pricing-badge-inset) - var(--bm-pricing-badge-inset)); }
  .bm-pricing-card__title { color: var(--bm-surface-heading); font-size: var(--bm-text-pricing-title); text-transform: uppercase; }
  .bm-pricing-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bm-pricing-price-gap); color: var(--bm-surface-heading); font-family: var(--bm-font-heading); font-size: var(--bm-text-pricing-price); font-weight: var(--bm-weight-regular); line-height: var(--bm-line-heading); letter-spacing: var(--bm-tracking-price); }
  .bm-pricing-card__period { font-family: var(--bm-font-mono); font-size: var(--bm-text-label); font-weight: var(--bm-weight-medium); line-height: var(--bm-line-label); letter-spacing: 0; text-transform: uppercase; }
  .bm-pricing-card__description { font-size: var(--bm-text-card-body); }
  .bm-pricing-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bm-pricing-feature-gap); font-size: var(--bm-text-card-body); }
  .bm-pricing-card__features li { display: flex; gap: var(--bm-pricing-feature-marker-gap); align-items: baseline; }
  .bm-pricing-card__features li::before { content: '+'; color: var(--bm-surface-heading); font-family: var(--bm-font-mono); font-weight: var(--bm-weight-semibold); flex-shrink: 0; }
  .bm-pricing-card__footer { margin-top: auto; padding-top: var(--bm-pricing-footer-padding); }
}

@layer utilities {
  .bm-heading-display { font-family: var(--bm-font-heading); font-size: var(--bm-text-display); font-weight: var(--bm-weight-regular); line-height: var(--bm-line-display); letter-spacing: var(--bm-tracking-display); text-transform: uppercase; }
  .bm-heading-section { font-size: var(--bm-text-section); letter-spacing: var(--bm-tracking-section); text-transform: uppercase; }
  .bm-label { font-family: var(--bm-font-mono); font-size: var(--bm-text-label); font-weight: var(--bm-weight-semibold); letter-spacing: var(--bm-tracking-label); line-height: var(--bm-line-label); text-transform: uppercase; }
  .bm-highlight { background: var(--bm-color-acid); color: var(--bm-color-ink); padding-block: var(--bm-highlight-padding-block); padding-inline: var(--bm-highlight-padding); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .bm-grid-paper { background-image: linear-gradient(var(--bm-color-grid-line) var(--bm-grid-paper-line-width), transparent var(--bm-grid-paper-line-width)), linear-gradient(90deg, var(--bm-color-grid-line) var(--bm-grid-paper-line-width), transparent var(--bm-grid-paper-line-width)); background-size: var(--bm-grid-paper-size) var(--bm-grid-paper-size); }
  .bm-visually-hidden { position: absolute; width: var(--bm-visually-hidden-size); height: var(--bm-visually-hidden-size); padding: 0; margin: var(--bm-visually-hidden-margin); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) { .bm-button { transition: none; } }
}

/* FOOTER SHARED STYLES */
@layer components {
  .bm-footer {
    --bm-footer-logo-width: 170px;
    --bm-footer-social-size: 44px;
    --bm-footer-social-icon-size: 20px;
    background: var(--bm-color-paper);
    color: var(--bm-color-ink);
    font-family: var(--bm-font-body);
    font-size: var(--bm-text-card-body);
    line-height: var(--bm-line-body);
  }
  .bm-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--bm-space-7);
    padding-block: var(--bm-space-7);
  }
  .bm-footer__grid > * { min-width: 0; }
  .bm-footer__logo {
    display: block;
    width: var(--bm-footer-logo-width);
    max-width: 100%;
    color: inherit;
    text-decoration: none;
  }
  .bm-footer__logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0);
  }
  .bm-footer__description {
    margin: var(--bm-space-5) 0 0;
    font-size: var(--bm-text-card-body);
  }
  .bm-footer__heading {
    margin: 0 0 var(--bm-space-4);
    color: inherit;
  }
  .bm-footer__list, .bm-footer__social-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bm-footer__list { display: grid; gap: var(--bm-space-2); }
  .bm-footer__link {
    display: inline-block;
    padding-block: var(--bm-space-1);
    color: inherit;
    font-weight: var(--bm-weight-medium);
    text-decoration: none;
    text-underline-offset: var(--bm-space-1);
    overflow-wrap: anywhere;
  }
  .bm-footer__link:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--bm-border-width-thin);
  }
  .bm-footer__socials { margin-top: var(--bm-space-6); }
  .bm-footer__social-list { display: flex; flex-wrap: wrap; gap: var(--bm-space-3); }
  .bm-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bm-footer-social-size);
    height: var(--bm-footer-social-size);
    padding: var(--bm-space-2);
    border: var(--bm-border-thin);
    background: var(--bm-color-paper);
    color: var(--bm-color-ink);
    text-decoration: none;
  }
  .bm-footer__social svg {
    display: block;
    width: var(--bm-footer-social-icon-size);
    height: var(--bm-footer-social-icon-size);
    flex-shrink: 0;
  }
  .bm-footer__social[aria-disabled="true"] { cursor: default; }
  .bm-footer__social[href]:hover {
    background: var(--bm-color-ink);
    color: var(--bm-color-paper);
  }
  .bm-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bm-space-4);
    padding-block: var(--bm-space-5);
    border-top: var(--bm-border-thin);
  }
  .bm-footer__bottom p { margin: 0; }
  .bm-footer a:focus-visible {
    outline: var(--bm-focus-width) solid var(--bm-color-ink);
    outline-offset: var(--bm-focus-offset);
  }
  @media (max-width: 52rem) {
    .bm-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bm-space-6); }
  }
}