/* AlterMe brand foundations — shared by landing + 3 prototypes */
:root {
  --ink: #1A1818;
  --ink-2: #121A16;
  --cream: #FFFCF4;
  --bone: #F5F4EF;
  --paper: #FFFFFF;

  /* Tier accents */
  --active: #FDB135;     /* yellow — entry */
  --essential: #7B84DC;  /* lavender — core brand */
  --advanced: #823D5F;   /* plum — flagship */

  /* Supporting */
  --coral: #C25C47;
  --teal: #7AD9D2;
  --lime: #DAEE64;
  --sage: #A7E39E;
  --gold: #CD9854;
  --mute: #606367;
  --line: rgba(26,24,24,0.12);
  --line-light: rgba(255,252,244,0.18);
}

html, body { background: var(--cream); color: var(--ink); font-family: 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
* { box-sizing: border-box; }

.serif { font-family: 'Sabon LT Std', 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.upper { text-transform: uppercase; letter-spacing: 0.06em; }

.h-display { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 200; letter-spacing: -0.04em; line-height: 0.96; }
.h-mid     { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; }

.eyebrow {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(26,24,24,0.55);
}

/* Buttons */
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 500;
  cursor: pointer; border: none;
  transition: transform 0.15s ease, background 0.2s ease;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill .arrow { display: inline-block; margin-left: 4px; transition: transform 0.2s; }
.btn-pill:hover .arrow { transform: translateX(4px); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-outline {
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* Tier dots */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.active    { background: var(--active); }
.dot.essential { background: var(--essential); }
.dot.advanced  { background: var(--advanced); }

/* Image placeholders */
.imgph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 9px),
    var(--ph-bg, #2a2522);
  color: rgba(255,252,244,0.65);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; overflow: hidden;
}
.imgph::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px dashed rgba(255,252,244,0.22);
  pointer-events: none;
}
.imgph .label { position: relative; z-index: 1; padding: 6px 10px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,252,244,0.18); border-radius: 2px; }

/* Site nav (shared across 3 prototypes) */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: rgba(255, 252, 244, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-nav .logo img { height: 26px; display: block; }
.site-nav.dark { background: rgba(26,24,24,0.85); border-color: rgba(255,252,244,0.1); }
.site-nav.dark .links { color: rgba(255,252,244,0.78); }
.site-nav.dark .logo img { filter: invert(1) brightness(1.5); }
.site-nav .links { display: flex; gap: 32px; font-size: 14px; color: rgba(26,24,24,0.78); }
.site-nav .links span { cursor: pointer; transition: color 0.2s; }
.site-nav .links span:hover { color: var(--ink); }
.site-nav .right { display: flex; gap: 14px; align-items: center; font-size: 14px; }

/* "Back to portal" pill — appears on every prototype */
.portal-back {
  position: fixed; top: 80px; left: 24px; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 8px 14px 8px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  border: 1px solid rgba(255,252,244,0.18);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}
.portal-back:hover { transform: translateY(-1px); }

/* Toast / cart drawer */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px;
  background: var(--cream); color: var(--ink);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0,0,0,0.18);
}
.cart-drawer.open { transform: translateX(0); }
.cart-backdrop {
  position: fixed; inset: 0; background: rgba(26,24,24,0.5);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.cart-backdrop.open { opacity: 1; pointer-events: all; }

/* Pulse */
@keyframes pulse-soft { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.pulse { animation: pulse-soft 2.6s ease-in-out infinite; }

/* Lift on hover */
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover { transform: translateY(-3px); }

/* Fine grid bg */
.grid-bg {
  background-image:
    linear-gradient(rgba(26,24,24,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,24,24,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Footer */
.site-footer {
  background: var(--ink); color: var(--cream);
  padding: 80px 80px 48px;
}
.site-footer a { color: rgba(255,252,244,0.7); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.footer-col h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 16px; color: rgba(255,252,244,0.55); font-family: ui-monospace, Menlo, monospace; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 32px; border-top: 1px solid rgba(255,252,244,0.1); font-size: 12px; color: rgba(255,252,244,0.5); }