/* =========================================================
   AMPLIFICA — Foundations
   Colors, Type, Spacing, Radius, Shadow, Motion
   ========================================================= */

@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Regular-ef522b10.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Medium-6130dfc0.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Semibold-fe000689.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Bold-626e99f5.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Black-8ba8a980.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/GeistMono-Regular-6e131846.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/GeistMono-Bold-77a9cc0f.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --amp-red:     #c50bac;
  --amp-red-700: #C71810;
  --amp-red-200: #FFD9D5;

  --amp-yellow:  #FFD60A;
  --amp-yellow-700: #C39A00;
  --amp-yellow-200: #FFF1A8;

  --amp-blue:    #1148E5;
  --amp-blue-700: #0A2DA0;
  --amp-blue-200: #C7D2FF;

  --amp-paper:   #F6F2EA;
  --amp-paper-2: #EDE7DA;
  --amp-cream:   #FBF8F2;
  --amp-ink:     #0B0B0C;
  --amp-ink-2:   #1F1F22;
  --amp-graphite: #4A4A50;
  --amp-fog:     #8C8C92;
  --amp-line:    #D8D2C5;
  --amp-line-2:  #2A2A2E;

  --fg-1: var(--amp-ink);
  --fg-2: var(--amp-graphite);
  --fg-3: var(--amp-fog);
  --fg-inv: var(--amp-paper);

  --bg-1: var(--amp-paper);
  --bg-2: var(--amp-paper-2);
  --bg-3: var(--amp-cream);
  --bg-inv: var(--amp-ink);

  --border-1: var(--amp-line);
  --border-2: color-mix(in srgb, var(--amp-ink) 14%, transparent);
  --border-strong: var(--amp-ink);

  --action-primary: var(--amp-red);
  --action-primary-hover: var(--amp-red-700);
  --action-secondary: var(--amp-ink);
  --link: var(--amp-blue);
  --link-hover: var(--amp-blue-700);

  --viral-low:  #c50bac;
  --viral-mid:  #FF8A1F;
  --viral-high: #FFD60A;
  --viral-peak: #2BD66B;

  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --type-hero:     clamp(56px, 9vw, 144px);
  --type-display:  clamp(40px, 5.5vw, 88px);
  --type-h1:       clamp(34px, 3.6vw, 56px);
  --type-h2:       clamp(28px, 2.6vw, 40px);
  --type-h3:       22px;
  --type-h4:       18px;
  --type-body:     16px;
  --type-small:    14px;
  --type-micro:    12px;

  --track-hero:    -0.04em;
  --track-display: -0.03em;
  --track-h:       -0.02em;
  --track-body:    -0.005em;
  --track-mono:    0;
  --track-eyebrow: 0.12em;

  --lh-tight: 0.92;
  --lh-display: 1;
  --lh-h: 1.08;
  --lh-body: 1.5;
  --lh-ui: 1.3;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 20px;
  --radius-pill: 999px;

  --shadow-print-1: 3px 3px 0 var(--amp-ink);
  --shadow-print-2: 6px 6px 0 var(--amp-ink);
  --shadow-print-color: 4px 4px 0 var(--amp-yellow);

  --shadow-soft-1: 0 1px 2px rgba(11,11,12,.06), 0 0 0 1px rgba(11,11,12,.04);
  --shadow-soft-2: 0 4px 12px rgba(11,11,12,.08), 0 0 0 1px rgba(11,11,12,.04);
  --shadow-soft-3: 0 12px 32px rgba(11,11,12,.12), 0 0 0 1px rgba(11,11,12,.06);

  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--amp-blue) 40%, transparent);

  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-in:   cubic-bezier(.6, .04, .98, .34);
  --ease-snap: cubic-bezier(.5, 1.6, .5, 1);
  --ease-quint: cubic-bezier(.83, 0, .17, 1);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-page: 700ms;
}

/* =========================================================
   MARKETING PAGE STYLES
   ========================================================= */

.amp *, .amp *::before, .amp *::after { box-sizing: border-box; }
html.amp, body.amp { margin: 0; }
body.amp {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: var(--type-body);
  line-height: var(--lh-body);
}
.amp a { color: inherit; text-decoration: none; }
.amp img, .amp svg { display: block; max-width: 100%; }

.amp .container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.amp section { padding: 96px 0; border-bottom: 1px solid var(--border-1); }

/* ---------- NAV ---------- */
.amp .nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
}
.amp .nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.amp .nav__left { display: flex; align-items: center; gap: 40px; }
.amp .brand-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.amp .brand-link .mark { width: 26px; height: 26px; flex-shrink: 0; }
.amp .brand-link .word { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.03em; color: var(--amp-ink); line-height: 1; }
.amp .brand-link .word .accent { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--amp-red); vertical-align: 2px; margin-left: 2px; }
.amp .footer__brand .brand-link .word { color: var(--amp-paper); }
.amp .footer__brand .brand-link .mark .ink { stroke: #F6F2EA; }
.amp .nav__menu { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.amp .nav__menu a { transition: color .12s var(--ease-out); }
.amp .nav__menu a:hover { color: var(--amp-red); }
.amp .nav__right { display: flex; align-items: center; gap: 12px; }
.amp .nav__user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--amp-ink); border-radius: 999px;
  padding: 4px 12px 4px 4px; text-decoration: none; color: inherit;
  transition: box-shadow .12s var(--ease-out);
}
.amp .nav__user-chip:hover { box-shadow: 2px 2px 0 var(--amp-ink); }
.amp .nav__user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #840aff; color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.amp .nav__user-name { font-size: 14px; font-weight: 600; }
.amp .lang-toggle {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2); display: flex; gap: 8px;
}
.amp .lang-toggle .on { color: var(--fg-1); font-weight: 700; }

.amp .btn {
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em; padding: 9px 14px;
  border-radius: var(--radius-2); border: 1.5px solid var(--amp-ink);
  background: var(--amp-ink); color: var(--amp-paper);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 3px 3px 0 var(--amp-ink);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.amp .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--amp-ink); }
.amp .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--amp-ink); }
.amp .btn.ghost { background: transparent; color: var(--amp-ink); box-shadow: none; border: 1.5px solid transparent; }
.amp .btn.ghost:hover { box-shadow: none; transform: none; color: var(--amp-red); }
.amp .btn.primary { background: var(--amp-red); }
.amp .btn.yellow { background: var(--amp-yellow); color: var(--amp-ink); }
.amp .btn.lg { padding: 14px 22px; font-size: 16px; }

/* ---------- HERO ---------- */
.amp .hero { padding: 64px 0 96px; position: relative; overflow: hidden; }
.amp .hero__eyebrow {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--amp-ink); padding: 6px 12px; border-radius: 999px;
  background: var(--bg-3);
}
.amp .hero__eyebrow .dot { width: 6px; height: 6px; background: var(--amp-red); border-radius: 50%; animation: amp-pulse 2s ease-in-out infinite; }
@keyframes amp-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.amp .hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: .9; letter-spacing: -0.045em;
  margin: 24px 0 0; text-wrap: balance;
}
.amp .hero__title .red { color: var(--amp-red); }
.amp .hero__title .marker {
  position: relative; display: inline-block; padding: 0 .15em;
}
.amp .hero__title .marker::after {
  content: ""; position: absolute; inset: -8% -4% -8% -4%;
  background: url("/assets/marker-circle-aa345355.svg") no-repeat center / 100% 100%;
  pointer-events: none;
  transform: rotate(-2deg);
}
.amp .hero__period { color: var(--amp-red); }

.amp .hero__sub {
  font-size: 22px; line-height: 1.4; max-width: 640px;
  margin-top: 32px; color: var(--fg-2); text-wrap: pretty;
}
.amp .hero__sub strong { color: var(--fg-1); font-weight: 600; }
.amp .hero__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.amp .hero__meta {
  display: flex; gap: 8px; margin-top: 32px;
  flex-wrap: wrap; align-items: center;
}
.amp .hero__meta span {
  font-size: 12px; font-family: var(--font-mono);
  color: var(--fg-2); letter-spacing: .03em;
  background: rgba(11,11,12,.06); border-radius: 20px;
  padding: 5px 12px; white-space: nowrap;
}
.amp .hero__meta strong { color: var(--fg-1); font-weight: 700; font-family: var(--font-mono); }

.amp .hero__art {
  position: absolute; right: -40px; top: 80px; width: 460px;
  transform: rotate(3deg);
  display: none;
}
@media (min-width: 1100px) { .amp .hero__art { display: block; } }

.amp .score-card {
  background: var(--bg-3); border: 1.5px solid var(--amp-ink);
  border-radius: 16px; padding: 24px; box-shadow: 8px 8px 0 var(--amp-ink);
  display: flex; flex-direction: column; gap: 16px;
}
.amp .score-card__head { display: flex; justify-content: space-between; align-items: center; }
.amp .score-card__eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-2); }
.amp .score-card__chip { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border: 1.5px solid var(--amp-ink); border-radius: 999px; background: var(--amp-yellow); text-transform: uppercase; letter-spacing: .1em; }
.amp .score-card__num { font-family: var(--font-mono); font-weight: 700; font-size: 96px; letter-spacing: -0.04em; line-height: 1; font-feature-settings: "tnum"; }
.amp .score-card__num .denom { color: var(--fg-3); font-size: 36px; }
.amp .score-card__bar { height: 12px; border: 1.5px solid var(--amp-ink); border-radius: 6px; overflow: hidden; background: var(--amp-paper-2); position: relative; }
.amp .score-card__bar > .fill { height: 100%; width: 87%; background: linear-gradient(90deg,#c50bac,#FF8A1F 35%,#FFD60A 65%,#9BE044 85%,#2BD66B 100%); }
.amp .score-card__row { display: flex; justify-content: space-between; align-items: center; }
.amp .score-card__why { font-size: 14px; color: var(--fg-2); padding-top: 12px; border-top: 1px dashed var(--border-1); line-height: 1.5; }
.amp .score-card__why strong { color: var(--fg-1); }
.amp .score-card__draft {
  background: var(--amp-ink); border-radius: 8px; padding: 12px;
  color: var(--fg-inv);
  display: flex; gap: 12px; align-items: center;
}
.amp .draft-thumb {
  width: 56px; height: 56px; border-radius: 4px;
  background: linear-gradient(135deg, #c50bac, #FFD60A);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--amp-ink);
  flex-shrink: 0;
}
.amp .draft-meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(246,242,234,.6); }
.amp .draft-title { font-weight: 600; font-size: 15px; margin-top: 2px; }

/* ---------- LOGOS ---------- */
.amp .logos {
  padding: 40px 0; border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 48px; flex-wrap: wrap; justify-content: center;
}
.amp .logos__lab {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2);
}
.amp .logos__items { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; opacity: .8; }
.amp .logos__item {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; color: var(--fg-1);
}

/* ---------- HOW IT WORKS ---------- */
.amp .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 32px; flex-wrap: wrap; }
.amp .section-head__eyebrow {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2);
  display: flex; align-items: center; gap: 10px;
}
.amp .section-head__eyebrow .num { background: var(--amp-ink); color: var(--amp-paper); padding: 2px 6px; font-weight: 700; }
.amp .section-head__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.5vw, 64px); letter-spacing: -0.03em; line-height: 1;
  margin: 12px 0 0; text-wrap: balance; max-width: 800px;
}
.amp .section-head__sub { max-width: 420px; font-size: 17px; color: var(--fg-2); line-height: 1.5; }

.amp .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .amp .steps { grid-template-columns: 1fr; } }
.amp .step {
  background: var(--bg-3); border: 1.5px solid var(--amp-ink);
  border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.amp .step:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--amp-ink); }
.amp .step__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--fg-2); letter-spacing: .1em;
}
.amp .step__title {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  letter-spacing: -0.02em; line-height: 1.05;
}
.amp .step__body { color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.amp .step__art { height: 110px; margin: 8px 0 0; display: flex; align-items: center; justify-content: center; }
.amp .step__art svg { max-height: 100%; }
.amp .step--accent { background: #840aff; color: var(--amp-paper); }
.amp .step--accent .step__num { color: rgba(246,242,234,.6); }
.amp .step--accent .step__body { color: rgba(246,242,234,.78); }

/* ---------- VIRALITY ---------- */
.amp .tribe {
  background: var(--amp-ink); color: var(--fg-inv);
  border-radius: 24px; padding: 64px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
@media (max-width: 900px) { .amp .tribe { grid-template-columns: 1fr; padding: 40px 28px; } }
.amp .tribe__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.03em; line-height: 1.05;
}
.amp .tribe__title em { font-style: normal; color: #840aff; }
.amp .tribe__body { font-size: 17px; line-height: 1.55; color: rgba(246,242,234,.78); margin-top: 20px; }
.amp .tribe__list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.amp .tribe__list li {
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  display: flex; gap: 12px; align-items: center;
}
.amp .tribe__list li::before { content: "→"; color: var(--amp-yellow); font-weight: 700; }
.amp .tribe__panel {
  background: var(--bg-1); color: var(--fg-1); border-radius: 16px;
  padding: 32px;
}
.amp .tribe__panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.amp .tribe__panel-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-2); }
.amp .tribe__big-num {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 144px; letter-spacing: -0.05em; line-height: .95;
  font-feature-settings: "tnum"; color: var(--amp-ink);
}
.amp .tribe__big-num .pct { color: var(--amp-red); }
.amp .tribe__bar { height: 16px; border: 1.5px solid var(--amp-ink); border-radius: 8px; overflow: hidden; background: var(--amp-paper-2); margin: 20px 0; }
.amp .tribe__bar > div { height: 100%; width: 87%; background: linear-gradient(90deg,#c50bac,#FF8A1F 35%,#FFD60A 65%,#9BE044 85%,#2BD66B 100%); }
.amp .tribe__attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 20px; border-top: 1px solid var(--border-1); }
.amp .tribe__attr-lab { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); }
.amp .tribe__attr-val { font-weight: 600; font-size: 16px; margin-top: 2px; }

/* ---------- PRICING ---------- */
.amp .pricing { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: stretch; }
@media (min-width: 901px) { .amp .pricing--three { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .amp .pricing { grid-template-columns: 1fr; } }
.amp .pricing__custom { margin: 24px 0 0; text-align: center; color: var(--fg-2); font-size: 15px; }
.amp .pricing__custom a { color: var(--amp-red); font-weight: 600; }
.amp .price-card {
  background: var(--bg-3); border: 1.5px solid var(--amp-ink);
  border-radius: 20px; padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.amp .price-card.featured { background: var(--amp-red); color: var(--amp-paper); box-shadow: 8px 8px 0 var(--amp-ink); position: relative; overflow: hidden; }
.amp .price-card__chip {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  background: #8409ff; color: #fff;
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--amp-ink);
}
.amp .price-card__name { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.amp .price-card__price {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-weight: 900; font-size: 88px; letter-spacing: -0.04em; line-height: .9;
}
.amp .price-card__price .per { font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.amp .price-card__price .currency { font-size: 32px; font-weight: 600; align-self: flex-start; margin-top: 18px; }
.amp .price-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.amp .price-card__list li { display: flex; gap: 10px; align-items: flex-start; }
.amp .price-card__list li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amp-yellow); border: 1.5px solid var(--amp-ink);
  flex-shrink: 0; margin-top: 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='%230B0B0C' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.amp .featured .price-card__list li::before { background-color: var(--amp-yellow); }
.amp .price-card__cta { margin-top: auto; padding-top: 8px; }
.amp .price-card .btn.primary { background: #8409ff; color: #fff; }
.amp .featured .btn.primary { background: #8409ff; color: #fff; }

/* ---------- FAQ ---------- */
.amp .faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
@media (max-width: 900px) { .amp .faq { grid-template-columns: 1fr; gap: 32px; } }
.amp .faq__items { display: flex; flex-direction: column; }
.amp .faq__item { border-top: 1px solid var(--border-1); padding: 22px 0; cursor: pointer; transition: background .2s var(--ease-out); list-style: none; }
.amp .faq__item:last-child { border-bottom: 1px solid var(--border-1); }
.amp .faq__item:hover { background: var(--bg-2); margin: 0 -16px; padding: 22px 16px; }
.amp .faq__item summary { list-style: none; cursor: pointer; }
.amp .faq__item summary::-webkit-details-marker { display: none; }
.amp .faq__q { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; }
.amp .faq__q::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--fg-2); transition: transform .2s var(--ease-out); }
.amp .faq__item[open] .faq__q::after { transform: rotate(45deg); }
.amp .faq__a { font-size: 15px; color: var(--fg-2); line-height: 1.6; margin-top: 12px; }

/* ---------- CTA ---------- */
.amp .cta-section {
  background: var(--amp-yellow);
  border-radius: 24px;
  padding: 80px 56px; text-align: center;
  position: relative; overflow: hidden;
}
.amp .cta-section__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px, 7vw, 112px); letter-spacing: -0.045em; line-height: .9;
  margin: 0;
}
.amp .cta-section__sub { font-size: 18px; color: var(--fg-1); max-width: 600px; margin: 24px auto 32px; line-height: 1.5; }
.amp .cta-section__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.amp .cta-section .btn.primary { background: #840aff; color: var(--amp-paper); }
.amp .cta-section__deco {
  position: absolute; top: -20%; right: -10%; opacity: .12; transform: rotate(15deg);
  pointer-events: none; width: 60%;
}

/* ---------- AUTH ---------- */
.amp .auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 860px) { .amp .auth-page { grid-template-columns: 1fr; } }

.amp .auth-card {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(32px, 6vw, 80px);
  max-width: 520px; width: 100%; margin: 0 auto;
  gap: 32px;
}

.amp .auth-card__brand { align-self: flex-start; }

.amp .auth-card__head { display: flex; flex-direction: column; gap: 8px; }
.amp .auth-card__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1;
  margin: 0;
}
.amp .auth-card__sub { font-size: 16px; color: var(--fg-2); margin: 0; line-height: 1.5; }

.amp .flash {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 100; padding: 12px 20px; border-radius: var(--radius-2);
  font-size: 14px; font-weight: 600; border: 1.5px solid var(--amp-ink);
  box-shadow: 3px 3px 0 var(--amp-ink); white-space: nowrap;
  animation: flash-in .22s var(--ease-snap), flash-out .35s ease 3.8s forwards;
}
@keyframes flash-in  { from { opacity:0; transform: translateX(-50%) translateY(-10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes flash-out { from { opacity:1; transform: translateX(-50%) translateY(0);     } to { opacity:0; transform: translateX(-50%) translateY(-10px); } }
.amp .flash--notice { background: var(--amp-yellow); color: var(--amp-ink); }
.amp .flash--alert  { background: #c50bac; color: #fff; }

.amp .auth-form { display: flex; flex-direction: column; gap: 20px; }

.amp .auth-form__errors {
  background: #fff0f8; border: 1.5px solid #c50bac; border-radius: var(--radius-2);
  padding: 12px 16px; font-size: 14px; color: #8a004e; display: flex; flex-direction: column; gap: 4px;
}
.amp .auth-form__input--error { border-color: #c50bac; }

.amp .auth-form__plan-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.amp .auth-form__plan-opt {
  border: 1.5px solid var(--amp-ink); border-radius: var(--radius-3);
  padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  transition: background .12s var(--ease-out), box-shadow .12s var(--ease-out);
  position: relative;
}
.amp .auth-form__plan-opt input[type=radio] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.amp .auth-form__plan-opt.active { background: var(--amp-ink); color: var(--amp-paper); box-shadow: 3px 3px 0 #840aff; }
.amp .auth-form__plan-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.amp .auth-form__plan-badge {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  background: #840aff; color: #fff; padding: 2px 6px; border-radius: 999px;
}
.amp .auth-form__plan-price {
  font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.02em;
}
.amp .auth-form__plan-price span { font-size: 12px; font-weight: 400; opacity: .6; }
.amp .auth-form__plan-desc { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }

.amp .auth-form__field { display: flex; flex-direction: column; gap: 6px; }

.amp .auth-form__label-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.amp .auth-form__label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-2); font-weight: 700;
}
.amp .auth-form__forgot {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--amp-red);
  transition: opacity .12s var(--ease-out);
}
.amp .auth-form__forgot:hover { opacity: .7; }

.amp .auth-form__input {
  font-family: var(--font-sans); font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--amp-ink);
  border-radius: var(--radius-2);
  background: var(--bg-3);
  color: var(--fg-1);
  outline: none;
  transition: box-shadow .12s var(--ease-out), border-color .12s var(--ease-out);
  width: 100%;
}
.amp .auth-form__input-wrap { position: relative; }
.amp .auth-form__input-wrap .auth-form__input { padding-right: 44px; width: 100%; }
.amp .auth-form__eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--fg-3); display: flex; align-items: center; justify-content: center;
  transition: color .12s var(--ease-out);
}
.amp .auth-form__eye:hover { color: var(--fg-1); }
.amp .auth-form__input::placeholder { color: var(--fg-3); }
.amp .auth-form__input:focus {
  box-shadow: var(--ring-focus);
  border-color: var(--amp-blue);
}

.amp .auth-form__submit { width: 100%; justify-content: center; margin-top: 4px; }

.amp .auth-card__footer {
  font-size: 14px; color: var(--fg-2);
  border-top: 1px solid var(--border-1);
  padding-top: 24px;
  text-align: center;
}
.amp .auth-card__footer-link {
  color: var(--amp-red); font-weight: 600;
  transition: opacity .12s var(--ease-out);
}
.amp .auth-card__footer-link:hover { opacity: .7; }

.amp .auth-deco {
  background: var(--amp-ink);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 64px 48px; gap: 32px;
}
@media (max-width: 860px) { .amp .auth-deco { display: none; } }

.amp .auth-deco__card {
  background: var(--bg-1); border-radius: 20px;
  padding: 32px; width: 100%; max-width: 360px;
  border: 1.5px solid var(--amp-ink);
  box-shadow: 8px 8px 0 #c50bac;
  display: flex; flex-direction: column; gap: 16px;
}
.amp .auth-deco__eyebrow {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2);
}
.amp .auth-deco__score {
  font-family: var(--font-display); font-weight: 900;
  font-size: 80px; letter-spacing: -0.05em; line-height: 1; color: var(--amp-ink);
}
.amp .auth-deco__score span { font-size: 32px; color: var(--fg-3); }
.amp .auth-deco__bar {
  height: 10px; border: 1.5px solid var(--amp-ink);
  border-radius: 6px; overflow: hidden; background: var(--amp-paper-2);
}
.amp .auth-deco__bar-fill {
  height: 100%; width: 87%;
  background: linear-gradient(90deg,#c50bac,#FF8A1F 35%,#FFD60A 65%,#9BE044 85%,#2BD66B 100%);
}
.amp .auth-deco__label {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; padding: 3px 10px;
  border: 1.5px solid var(--amp-ink); border-radius: 999px;
  background: var(--amp-yellow); text-transform: uppercase; letter-spacing: .1em;
}
.amp .auth-deco__attrs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--border-1);
}
.amp .auth-deco__attr-lab {
  display: block; font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3);
}
.amp .auth-deco__attr-val { font-weight: 600; font-size: 14px; }
.amp .auth-deco__caption {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.03em;
  color: #fff; text-align: center;
  margin: 0;
}

/* ---------- FOOTER ---------- */
.amp footer { padding: 64px 0 40px; background: var(--amp-ink); color: var(--fg-inv); }
.amp .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--border-2); }
@media (max-width: 700px) { .amp .footer__top { grid-template-columns: 1fr 1fr; } }
.amp .footer__brand { display: flex; flex-direction: column; gap: 16px; }
.amp .footer__tagline { font-size: 14px; color: rgba(246,242,234,.6); max-width: 280px; line-height: 1.5; }
.amp .footer__col-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(246,242,234,.5); margin-bottom: 16px; }
.amp .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(246,242,234,.85); }
.amp .footer__col a:hover { color: var(--amp-yellow); }
.amp .footer__bottom { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(246,242,234,.5); flex-wrap: wrap; gap: 12px; }

/* ---------- DASHBOARD ---------- */
.amp .dash-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-1); }

.amp .dash-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1); position: sticky; top: 0; z-index: 50;
}
.amp .dash-nav__right { display: flex; align-items: center; gap: 16px; }
.amp .dash-nav__user {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-2);
}

.amp .dash-main {
  flex: 1; max-width: 900px; width: 100%;
  margin: 0 auto; padding: 48px 32px 80px;
  display: flex; flex-direction: column; gap: 24px;
}

.amp .dash-hero { display: flex; flex-direction: column; gap: 12px; }
.amp .dash-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2);
}
.amp .dash-hero__plan {
  background: #840aff; color: #fff; padding: 2px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.amp .dash-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.04em; line-height: 1; margin: 0;
}

.amp .dash-brief-card {
  background: var(--amp-ink); color: var(--amp-paper);
  border-radius: 20px; padding: 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.amp .dash-brief-card__head { display: flex; align-items: center; gap: 16px; }
.amp .dash-brief-card__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  background: #840aff; color: #fff; padding: 3px 8px; border-radius: 4px;
}
.amp .dash-brief-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em;
}
.amp .dash-brief-card__body { font-size: 16px; color: rgba(246,242,234,.7); line-height: 1.5; max-width: 560px; }

.amp .dash-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 0; }
.amp .dash-empty__text { font-size: 15px; color: var(--fg-3); text-align: center; }

/* brief form */
.amp .brief-form { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.amp .brief-form__errors {
  background: #fff0f8; border: 1.5px solid #c50bac; border-radius: var(--radius-2);
  padding: 12px 16px; font-size: 13px; color: #8a004e;
  display: flex; flex-direction: column; gap: 4px;
}
.amp .brief-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .amp .brief-form__row { grid-template-columns: 1fr; } }
.amp .brief-form__field { display: flex; flex-direction: column; gap: 6px; }
.amp .brief-form__label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(246,242,234,.5); font-weight: 700;
}
.amp .brief-form__input,
.amp .brief-form__select,
.amp .brief-form__textarea {
  font-family: var(--font-sans); font-size: 15px;
  padding: 11px 14px;
  border: 1.5px solid rgba(246,242,234,.2);
  border-radius: var(--radius-2);
  background: rgba(246,242,234,.07);
  color: var(--amp-paper);
  outline: none;
  transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out);
  width: 100%;
}
.amp .brief-form__select { appearance: none; cursor: pointer; }
.amp .brief-form__textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.amp .brief-form__input::placeholder,
.amp .brief-form__textarea::placeholder { color: rgba(246,242,234,.3); }
.amp .brief-form__input:focus,
.amp .brief-form__select:focus,
.amp .brief-form__textarea:focus {
  border-color: #840aff;
  box-shadow: 0 0 0 3px rgba(132,10,255,.25);
}
.amp .brief-form__select option { background: var(--amp-ink); color: var(--amp-paper); }
.amp .brief-form__input--error { border-color: #c50bac !important; }
.amp .brief-form__hint { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(246,242,234,.3); }
.amp .brief-form__submit { align-self: flex-start; }

/* Lexxy rich composer — themed onto the dark brief form. Lexxy is fully
   CSS-variable driven and custom properties pierce its shadow boundary, so we
   re-map its light palette to the amplifica ink/paper scheme here. */
.amp lexxy-editor.brief-form__lexxy {
  --lexxy-color-canvas: rgba(246,242,234,.07);
  --lexxy-color-text: var(--amp-paper);
  --lexxy-color-text-subtle: rgba(246,242,234,.5);
  --lexxy-color-ink: var(--amp-paper);
  --lexxy-color-ink-medium: rgba(246,242,234,.6);
  --lexxy-color-ink-light: rgba(246,242,234,.45);
  --lexxy-color-ink-lighter: rgba(246,242,234,.22);
  --lexxy-color-ink-lightest: rgba(246,242,234,.1);
  --lexxy-color-accent-dark: #840aff;
  --lexxy-color-link: #b98cff;
  --lexxy-color-selected: rgba(132,10,255,.25);
  --lexxy-focus-ring-color: #840aff;
  --lexxy-color-code-bg: rgba(0,0,0,.3);
  --lexxy-editor-rows: 6lh;
  display: block;
  width: 100%;
  border: 1.5px solid rgba(246,242,234,.2);
  border-radius: var(--radius-2);
  background: rgba(246,242,234,.07);
  color: var(--amp-paper);
  font-family: var(--font-sans);
  transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.amp lexxy-editor.brief-form__lexxy:focus-within {
  border-color: #840aff;
  box-shadow: 0 0 0 3px rgba(132,10,255,.25);
}

/* mode toggle */
.amp .brief-mode-toggle {
  display: inline-flex; border: 1.5px solid rgba(246,242,234,.2);
  border-radius: var(--radius-2); overflow: hidden;
}
.amp .brief-mode-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; background: transparent; border: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: rgba(246,242,234,.45); cursor: pointer;
  transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.amp .brief-mode-btn.active { background: #840aff; color: #fff; }
.amp .brief-mode-btn:not(.active):hover { color: rgba(246,242,234,.8); }

/* voice recorder */
.amp .brief-voice { display: flex; flex-direction: column; gap: 12px; }
.amp .brief-voice__recorder {
  display: flex; align-items: center; gap: 16px;
  background: rgba(246,242,234,.06); border: 1.5px solid rgba(246,242,234,.15);
  border-radius: var(--radius-3); padding: 18px 20px;
}
.amp .brief-voice__wave {
  flex: 1; min-width: 0; height: 48px;
}
.amp .brief-voice__wave--playback { flex: 1; min-width: 0; height: 48px; }
.amp .brief-voice__btn {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: #840aff; border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.amp .brief-voice__btn:hover { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(132,10,255,.25); }
.amp .brief-voice__btn.recording { background: #c50bac; animation: amp-pulse 1s ease-in-out infinite; }
.amp .brief-voice__info { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.amp .brief-voice__status { font-size: 14px; font-weight: 600; color: var(--amp-paper); }
.amp .brief-voice__timer {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: #c50bac; letter-spacing: .05em;
}
.amp .brief-voice__stop {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: rgba(197,11,172,.2); border: 1.5px solid #c50bac;
  color: #c50bac; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease-out);
}
.amp .brief-voice__stop:hover { background: rgba(197,11,172,.35); }
.amp .brief-voice__preview {
  display: flex; align-items: center; gap: 16px;
  background: rgba(246,242,234,.06); border: 1.5px solid rgba(132,10,255,.4);
  border-radius: var(--radius-3); padding: 16px 20px;
}
.amp .brief-voice__play-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #840aff; border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease-out);
}
.amp .brief-voice__play-btn:hover { transform: scale(1.1); }
.amp .brief-voice__duration {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: rgba(246,242,234,.5); white-space: nowrap;
}
.amp .brief-voice__redo {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid rgba(246,242,234,.2); border-radius: var(--radius-2);
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: rgba(246,242,234,.6);
  cursor: pointer; white-space: nowrap;
  transition: color .12s var(--ease-out), border-color .12s var(--ease-out);
}
.amp .brief-voice__redo:hover { color: var(--amp-paper); border-color: rgba(246,242,234,.5); }

/* history */
.amp .dash-history { display: flex; flex-direction: column; gap: 16px; }
.amp .dash-history__head { display: flex; align-items: center; justify-content: space-between; }
.amp .dash-history__title {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-2);
}
.amp .dash-history__list { display: flex; flex-direction: column; gap: 12px; }
.amp .dash-brief-row {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  border: 1px solid var(--border-1); border-radius: 10px;
  padding: 10px 14px; background: var(--bg-3); flex-wrap: wrap;
}
.amp .dash-brief-row__left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.amp .dash-brief-row__platform {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  background: #840aff; color: #fff; padding: 2px 8px; border-radius: 999px;
}
.amp .dash-brief-row__tone {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  border: 1.5px solid var(--amp-ink); padding: 2px 8px; border-radius: 999px; color: var(--fg-2);
}
.amp .dash-brief-row__desc { font-size: 12px; color: var(--fg-2); margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.amp .dash-brief-row__date { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.amp .dash-brief-row__right { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0; }
.amp .dash-brief-row__status {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--amp-ink);
}
.amp .dash-brief-row__status--pending    { background: var(--amp-yellow); color: var(--amp-ink); animation: amp-pulse 2s ease-in-out infinite; }
.amp .dash-brief-row__status--processing { background: #840aff; color: #fff; animation: amp-pulse 2s ease-in-out infinite; }
.amp .dash-brief-row__status--ready      { background: #2BD66B; color: var(--amp-ink); }
.amp .dash-brief-row__drafts { display: flex; gap: 8px; }
.amp .dash-draft-slot {
  width: 40px; height: 40px; border-radius: 8px;
  border: 1.5px dashed var(--border-1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--fg-3);
  background: var(--bg-2);
}

/* ── Draft cards ── */
.amp .dash-drafts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%;
}
@media (max-width: 700px) { .amp .dash-drafts-grid { grid-template-columns: 1fr; } }
.amp .dash-draft-card {
  background: var(--bg-2); border: 1.5px solid var(--border-1); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.amp .dash-draft-card__top { display: flex; align-items: center; gap: 10px; }
.amp .dash-draft-card__label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: #840aff; color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 13px;
}
.amp .dash-draft-card__score { display: flex; align-items: center; gap: 8px; }
.amp .dash-draft-card__score-num {
  font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--amp-ink); min-width: 28px;
}
.amp .dash-draft-card__score-bar {
  flex: 1; height: 6px; border-radius: 3px; background: var(--border-1); overflow: hidden;
}
.amp .dash-draft-card__score-fill {
  height: 100%; border-radius: 3px; background: linear-gradient(90deg, #840aff, #c50bac);
}
.amp .dash-draft-card__headline {
  font-size: 15px; font-weight: 700; color: var(--amp-ink); margin: 0; line-height: 1.3;
}
.amp .dash-draft-card__hook {
  font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.4;
  font-style: italic;
}
.amp .dash-draft-card__expand .dash-draft-card__body { display: none; }
.amp .dash-draft-card__expand.open .dash-draft-card__body { display: flex; flex-direction: column; gap: 10px; }
.amp .dash-draft-card__toggle {
  background: none; border: none; padding: 0;
  font-size: 12px; font-weight: 600; color: #840aff; cursor: pointer; letter-spacing: .03em;
}
.amp .dash-draft-card__toggle:hover { text-decoration: underline; }
.amp .dash-draft-card__expand .dash-draft-card__toggle { font-size: 12px; font-weight: 600; color: #840aff; cursor: pointer; letter-spacing: .03em; }
.amp .dash-draft-card__body p { font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.5; }
.amp .dash-draft-card__cta { font-size: 13px; color: var(--amp-ink); font-weight: 600; }
.amp .dash-draft-card__divider { border: none; border-top: 1px solid var(--border-1); margin: 4px 0; }
.amp .dash-draft-card__direction { font-size: 11px; color: var(--fg-3); font-style: italic; margin: 0; }
.amp .dash-draft-card__scores {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.amp .dash-draft-card__scores span {
  font-size: 11px; color: var(--fg-3); background: var(--bg-1); border: 1px solid var(--border-1);
  padding: 2px 8px; border-radius: 20px;
}
.amp .dash-draft-card__scores strong { color: var(--amp-ink); font-weight: 700; }
.amp .dash-draft-card__why { font-size: 12px; color: var(--fg-3); margin: 0; line-height: 1.4; }

/* =========================================================
   WIZARD — 3-step setup
   ========================================================= */

.amp .wizard-steps {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-3); border: 1.5px solid var(--border-1);
  border-radius: 16px; padding: 20px 28px;
}
.amp .wizard-step {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.amp .wizard-step__circle {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  border: 2px solid var(--border-1); background: var(--bg-1); color: var(--fg-3);
  transition: all .25s ease;
}
.amp .wizard-step--done .wizard-step__circle {
  background: #2BD66B; border-color: #2BD66B; color: #fff;
}
.amp .wizard-step--active .wizard-step__circle {
  background: #840aff; border-color: #840aff; color: #fff;
  box-shadow: 0 0 0 4px rgba(132,10,255,.18);
}
.amp .wizard-step--create .wizard-step__circle {
  background: #c50bac; border-color: #c50bac;
}
.amp .wizard-step__info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.amp .wizard-step__num {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-3);
}
.amp .wizard-step--active .wizard-step__num { color: #840aff; }
.amp .wizard-step--done  .wizard-step__num  { color: #1a9e50; }
.amp .wizard-step__name {
  font-size: 14px; font-weight: 700; color: var(--amp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amp .wizard-step--locked .wizard-step__name { color: var(--fg-3); }

.amp .wizard-connector {
  flex: 1; max-width: 64px; height: 2px;
  background: var(--border-1); border-radius: 1px; margin: 0 8px; flex-shrink: 0;
  transition: background .3s ease;
}
.amp .wizard-connector--done { background: #2BD66B; }

/* =========================================================
   PRODUCT DASHBOARD — workspace, usage, profile, cards
   ========================================================= */

/* Workspace grid */
.amp .dash-workspace {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;
}
@media (max-width: 900px) { .amp .dash-workspace { grid-template-columns: 1fr; } }

/* Form panel (left) */
.amp .dash-form-panel {
  border-radius: 20px; background: var(--bg-1);
  border: 1.5px solid var(--border-1); padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.amp .dash-form-panel__head { display: flex; align-items: flex-start; gap: 16px; }
.amp .dash-form-panel__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  background: #c50bac; color: #fff; padding: 3px 9px; border-radius: 6px;
  flex-shrink: 0; margin-top: 4px;
}
.amp .dash-form-panel__title {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; margin: 0;
}
.amp .dash-form-panel__sub { font-size: 14px; color: var(--fg-2); margin: 4px 0 0; line-height: 1.4; }

/* Limit warning banner */
.amp .dash-limit-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(255,214,10,.12); border: 1.5px solid rgba(255,214,10,.4);
  border-radius: var(--radius-2); font-size: 13px; color: var(--fg-2); line-height: 1.4;
}

/* Aside (right column) */
.amp .dash-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }

/* Usage card */
.amp .dash-usage {
  background: var(--amp-ink); color: var(--amp-paper);
  border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.amp .dash-usage__top { display: flex; align-items: center; justify-content: space-between; }
.amp .dash-usage__plan {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  background: #840aff; color: #fff; padding: 3px 10px; border-radius: 999px;
}
.amp .dash-usage__tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(246,242,234,.4);
}
.amp .dash-usage__counter { display: flex; align-items: baseline; gap: 4px; line-height: 1; margin: 4px 0 2px; }
.amp .dash-usage__used {
  font-family: var(--font-display); font-weight: 900; font-size: 72px; letter-spacing: -0.04em;
}
.amp .dash-usage__sep {
  font-family: var(--font-display); font-weight: 300; font-size: 36px;
  color: rgba(246,242,234,.25); margin: 0 2px;
}
.amp .dash-usage__limit {
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  letter-spacing: -0.02em; color: rgba(246,242,234,.35);
}
.amp .dash-usage__bar {
  height: 5px; background: rgba(246,242,234,.12); border-radius: 3px; overflow: hidden;
}
.amp .dash-usage__fill {
  height: 100%; background: linear-gradient(90deg, #840aff, #c50bac);
  border-radius: 3px; transition: width .4s var(--ease-snap);
}
.amp .dash-usage__fill--full { background: #2BD66B; }
.amp .dash-usage__hint { font-size: 12px; color: rgba(246,242,234,.4); margin: 2px 0 0; }
.amp .dash-usage__hint--warn { color: var(--amp-yellow); }

/* Profile peek card */
.amp .dash-profile-peek {
  background: var(--bg-1); border: 1.5px solid var(--border-1);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.amp .dash-profile-peek__head { display: flex; align-items: center; justify-content: space-between; }
.amp .dash-profile-peek__title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3);
}
.amp .dash-profile-peek__edit { font-size: 12px !important; padding: 4px 10px !important; }
.amp .dash-profile-peek__rows { display: flex; flex-direction: column; gap: 10px; }
.amp .dash-profile-peek__row { display: flex; flex-direction: column; gap: 2px; }
.amp .dash-profile-peek__label {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3);
}
.amp .dash-profile-peek__value { font-size: 13px; color: var(--fg-1); font-weight: 500; line-height: 1.35; }

/* Profile edit section (collapsible) */
.amp .dash-profile-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3); border-bottom: 1px solid var(--border-1);
  margin-bottom: 16px;
}
.amp #profile-edit { display: flex; flex-direction: column; gap: 16px; }

/* Brief cards grid (history) */
.amp .dash-brief-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
@media (max-width: 640px) { .amp .dash-brief-cards { grid-template-columns: 1fr; } }

.amp .dash-brief-card {
  background: var(--bg-3); border: 1.5px solid var(--border-1);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.amp .dash-brief-card:hover {
  border-color: rgba(132,10,255,.25);
  box-shadow: 0 4px 20px rgba(132,10,255,.07);
}
.amp .dash-brief-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.amp .dash-brief-card__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.amp .dash-brief-card__desc {
  font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.amp .dash-brief-card__score {
  display: flex; align-items: center; gap: 8px;
  background: rgba(132,10,255,.06); border-radius: 8px; padding: 8px 10px;
}
.amp .dash-brief-card__score-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #840aff; white-space: nowrap;
}
.amp .dash-brief-card__score-bar {
  flex: 1; height: 4px; background: var(--border-1); border-radius: 2px; overflow: hidden;
}
.amp .dash-brief-card__score-fill {
  height: 100%;
  background: linear-gradient(90deg, #c50bac, #FFD60A 55%, #2BD66B);
  border-radius: 2px;
}
.amp .dash-brief-card__score-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: #840aff; white-space: nowrap;
}
.amp .dash-brief-card__generating { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.amp .dash-brief-card__gen-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3);
  animation: amp-pulse 1.4s ease-in-out infinite;
}
.amp .dash-brief-card__gen-dot:nth-child(2) { animation-delay: .2s; }
.amp .dash-brief-card__gen-dot:nth-child(3) { animation-delay: .4s; }
.amp .dash-brief-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border-1);
}
.amp .dash-brief-card__date {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-3);
}
.amp .dash-brief-card__link {
  font-size: 13px; font-weight: 700; color: #840aff;
  transition: color .12s ease;
}
.amp .dash-brief-card__link:hover { color: #c50bac; }

/* Form field overrides in light-bg panels (same as setup-card) */
.amp .dash-form-panel .brief-form__label { color: var(--fg-3); }
.amp .dash-form-panel .brief-form__input,
.amp .dash-form-panel .brief-form__select,
.amp .dash-form-panel .brief-form__textarea {
  background: var(--bg-3); border-color: var(--border-1); color: var(--fg-1);
}
.amp .dash-form-panel .brief-form__input::placeholder,
.amp .dash-form-panel .brief-form__textarea::placeholder { color: var(--fg-3); }
.amp .dash-form-panel .brief-form__input:focus,
.amp .dash-form-panel .brief-form__select:focus,
.amp .dash-form-panel .brief-form__textarea:focus { border-color: #840aff; background: #fff; outline: none; }
.amp .dash-form-panel .brief-form__select option { background: #fff; color: var(--fg-1); }
.amp .dash-form-panel .brief-form__hint { color: var(--fg-3); }
.amp .dash-form-panel .brief-form__errors { background: #fff0f8; }
.amp .dash-form-panel .brief-mode-toggle { background: var(--bg-2); border-color: var(--border-1); }
.amp .dash-form-panel .brief-mode-btn { color: var(--fg-2); }
.amp .dash-form-panel .brief-mode-btn.active { background: #840aff; color: #fff; }
.amp .dash-form-panel .brief-mode-btn:not(.active):hover { background: var(--border-1); }
.amp .dash-form-panel .brief-voice__recorder { background: var(--bg-2); border-color: var(--border-1); }
.amp .dash-form-panel .brief-voice__status { color: var(--fg-2); }
.amp .dash-form-panel .brief-voice__preview { background: var(--bg-2); border-color: var(--border-1); }
.amp .dash-form-panel .brief-voice__duration { color: var(--fg-2); }
.amp .dash-form-panel .brief-voice__redo { color: var(--fg-3); }
.amp .dash-form-panel .brief-voice__redo:hover { color: var(--fg-1); }

/* Mobile: workspace stacks, aside loses sticky */
@media (max-width: 640px) {
  .amp .dash-form-panel { padding: 20px 16px; }
  .amp .dash-aside { position: static; }
  .amp .dash-usage__used { font-size: 56px; }
  .amp .dash-usage__limit,
  .amp .dash-usage__sep { font-size: 28px; }
}

/* =========================================================
   SETUP PROGRESS — onboarding progress bar
   ========================================================= */

.amp .setup-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--bg-1);
  border: 1.5px solid var(--border-1); border-radius: 10px;
}
.amp .setup-progress__label {
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.amp .setup-progress__track {
  flex: 1; height: 4px; background: var(--border-1); border-radius: 2px; overflow: hidden;
}
.amp .setup-progress__bar {
  height: 100%; background: #840aff; border-radius: 2px;
  transition: width .4s var(--ease-snap);
}
.amp .setup-progress__status {
  font-size: 12px; font-weight: 600; color: #840aff; white-space: nowrap;
}

/* =========================================================
   SETUP CARDS — expandable step panels
   ========================================================= */

.amp .setup-card {
  border-radius: 16px; border: 1.5px solid var(--border-1);
  padding: 28px 32px; display: flex; flex-direction: column; gap: 24px;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: var(--bg-1);
}
.amp .setup-card--active {
  border-color: #840aff;
  box-shadow: 0 0 0 3px rgba(132,10,255,.1);
}
.amp .setup-card--create {
  border-color: #c50bac;
  box-shadow: 0 0 0 3px rgba(197,11,172,.08);
}
.amp .setup-card--done {
  border-color: var(--border-1); background: var(--bg-2);
}
.amp .setup-card--locked {
  border-color: var(--border-1); background: var(--bg-2);
  opacity: .55; pointer-events: none;
}

.amp .setup-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.amp .setup-card__head-left { display: flex; align-items: flex-start; gap: 16px; }
.amp .setup-card__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  background: #840aff; color: #fff; padding: 3px 9px; border-radius: 6px; flex-shrink: 0; margin-top: 3px;
}
.amp .setup-card--done   .setup-card__num { background: #2BD66B; color: var(--amp-ink); }
.amp .setup-card--create .setup-card__num { background: #c50bac; }
.amp .setup-card--locked .setup-card__num { background: var(--border-1); color: var(--fg-3); }

.amp .setup-card__title {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.amp .setup-card__tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; border: 1.5px solid #840aff; color: #840aff;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
}
.amp .setup-card__subtitle { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.4; max-width: 500px; }
.amp .setup-card__edit-btn { font-size: 13px; flex-shrink: 0; }
.amp .setup-card__cta { align-self: flex-start; }
.amp .setup-card__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* .hidden utility for JS toggling */
.amp .hidden { display: none !important; }

/* brief-form__field--optional label tweak */
.amp .brief-form__field--optional .brief-form__label::after {
  content: " (opcional)"; font-weight: 400; color: var(--fg-3); font-size: 12px;
}

/* Kit upload zone */
.amp .kit-upload-zone {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px dashed var(--border-1); border-radius: var(--radius-2);
  padding: 14px 18px; font-size: 13px; color: var(--fg-2);
  background: var(--bg-2); transition: border-color .2s, background .2s;
}
.amp .kit-upload-zone:hover { border-color: #840aff; background: var(--bg-3); }
.amp .kit-upload-zone__done { display: flex; align-items: center; gap: 6px; color: #1a9e50; font-weight: 600; }

/* =========================================================
   SETUP CARD — light-context overrides
   Form fields were designed for dark (ink) backgrounds.
   These overrides restore contrast on light setup cards.
   ========================================================= */

/* Labels */
.amp .setup-card .brief-form__label {
  color: var(--fg-2);
}

/* Inputs, selects, textareas */
.amp .setup-card .brief-form__input,
.amp .setup-card .brief-form__select,
.amp .setup-card .brief-form__textarea {
  background: #fff;
  border-color: var(--border-1);
  color: var(--fg-1);
}
.amp .setup-card .brief-form__input::placeholder,
.amp .setup-card .brief-form__textarea::placeholder {
  color: var(--fg-3);
}
.amp .setup-card .brief-form__input:focus,
.amp .setup-card .brief-form__select:focus,
.amp .setup-card .brief-form__textarea:focus {
  border-color: #840aff;
  box-shadow: 0 0 0 3px rgba(132,10,255,.12);
}
.amp .setup-card .brief-form__select option {
  background: #fff;
  color: var(--amp-ink);
}
.amp .setup-card .brief-form__hint {
  color: var(--fg-3);
}
.amp .setup-card .brief-form__errors {
  background: #fff0f8;
}

/* Mode toggle */
.amp .setup-card .brief-mode-toggle {
  border-color: var(--border-1);
  background: var(--bg-2);
}
.amp .setup-card .brief-mode-btn {
  color: var(--fg-2);
}
.amp .setup-card .brief-mode-btn.active {
  color: #fff;
}
.amp .setup-card .brief-mode-btn:not(.active):hover {
  color: var(--fg-1);
  background: var(--bg-3);
}

/* Voice recorder */
.amp .setup-card .brief-voice__recorder {
  background: var(--bg-2);
  border-color: var(--border-1);
}
.amp .setup-card .brief-voice__status {
  color: var(--fg-1);
}
.amp .setup-card .brief-voice__preview {
  background: var(--bg-2);
  border-color: rgba(132,10,255,.3);
}
.amp .setup-card .brief-voice__duration {
  color: var(--fg-2);
}
.amp .setup-card .brief-voice__redo {
  color: var(--fg-2);
  border-color: var(--border-1);
}
.amp .setup-card .brief-voice__redo:hover {
  color: var(--fg-1);
  border-color: var(--amp-ink);
}

/* =========================================================
   DRAFTS PAGE
   ========================================================= */

.amp .drafts-page {
  min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-2);
}

.amp .drafts-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--fg-3); text-decoration: none;
  transition: color .12s; align-self: flex-start;
}
.amp .drafts-back:hover { color: #840aff; }

.amp .drafts-main {
  flex: 1; max-width: 1100px; width: 100%;
  margin: 0 auto; padding: 28px 32px 120px;
  display: flex; flex-direction: column; gap: 24px;
}

/* Context header */
.amp .drafts-context { display: flex; flex-direction: column; gap: 8px; }
.amp .drafts-context__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amp .drafts-context__tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  border: 1.5px solid var(--amp-ink); padding: 2px 10px; border-radius: 999px; color: var(--fg-2);
}
.amp .drafts-context__tag--platform { background: #840aff; color: #fff; border-color: #840aff; }
.amp .drafts-context__tag--voice    { border-color: #840aff; color: #840aff; }
.amp .drafts-context__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.15; margin: 0;
  color: var(--amp-ink);
}
.amp .drafts-context__meta { font-size: 14px; color: var(--fg-2); margin: 0; }

/* Hint */
.amp .drafts-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--border-1);
  padding: 8px 14px; border-radius: 999px; align-self: flex-start;
}

/* Draft grid */
.amp .drafts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start;
}
@media (max-width: 760px) { .amp .drafts-grid { grid-template-columns: 1fr; } }

/* Draft card */
.amp .draft-card {
  background: #fff; border: 1.5px solid var(--border-1); border-radius: 16px;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.amp .draft-card--selected {
  border-color: #840aff;
  box-shadow: 0 0 0 4px rgba(132,10,255,.1), 0 2px 12px rgba(132,10,255,.08);
}

.amp .draft-card__header { display: flex; flex-direction: column; gap: 10px; }
.amp .draft-card__label-wrap { display: flex; align-items: center; gap: 8px; }
.amp .draft-card__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  background: var(--amp-ink); color: #fff;
  padding: 3px 10px; border-radius: 6px;
}
.amp .draft-card--selected .draft-card__label { background: #840aff; }

.amp .draft-card__selected-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #840aff; background: rgba(132,10,255,.1);
  padding: 2px 8px; border-radius: 999px;
}

.amp .draft-card__score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 160px; }
.amp .draft-card__score-signal {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  line-height: 1.1; color: #840aff; text-align: right;
}
.amp .draft-card__score-num {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  line-height: 1; color: #840aff;
}
.amp .draft-card__score-unit { font-size: 11px; font-weight: 700; opacity: .55; }
.amp .draft-card__score-note {
  font-family: var(--font-mono); font-size: 9px; line-height: 1.3;
  color: var(--fg-3); margin: 6px 0 0; font-style: italic;
}
.amp .draft-card__score-bar {
  flex: 1; height: 6px; border-radius: 3px; background: var(--border-1); overflow: hidden;
}
.amp .draft-card__score-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #840aff, #c50bac);
}
.amp .draft-card__score-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3);
}

.amp .draft-card__direction {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: #840aff; opacity: .7;
}

/* Design preview (SVG mockup) */
.amp .draft-card__design {
  border: 1px solid rgba(11,11,12,.08); border-radius: 10px;
  background: #0B0B0C; padding: 8px; display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.amp .draft-card__design--loading {
  background: rgba(132,10,255,.06); color: #840aff; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; padding: 28px 12px; text-align: center;
}
.amp .draft-card__design-frame {
  width: 100%; aspect-ratio: 1; background: #F6F2EA; border-radius: 6px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.amp .draft-card__design-frame svg { width: 100%; height: 100%; display: block; }
.amp .draft-card__design-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(246,242,234,.7); padding: 0 4px;
}
.amp .draft-card__design-tag { color: #FFD60A; font-weight: 700; }
.amp .draft-card__design-dl {
  color: #F6F2EA; text-decoration: none; border-bottom: 1px solid rgba(246,242,234,.3);
  padding-bottom: 1px; transition: border-color .15s;
}
.amp .draft-card__design-dl:hover { border-color: #FFD60A; color: #FFD60A; }

.amp .draft-card__headline {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; line-height: 1.25; margin: 0; color: var(--amp-ink);
}
.amp .draft-card__hook {
  font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.45;
  font-style: italic; border-left: 3px solid #840aff; padding-left: 12px;
}
.amp .draft-card__body-wrap { display: flex; flex-direction: column; gap: 10px; }
.amp .draft-card__body {
  font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.55;
}
.amp .draft-card__cta-line {
  display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--amp-ink); margin: 0;
}
.amp .draft-card__cta-tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  background: var(--amp-yellow); color: var(--amp-ink);
  padding: 1px 6px; border-radius: 4px; flex-shrink: 0;
}

/* Sub-scores row */
.amp .draft-card__sub-scores {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.amp .draft-card__sub-score {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(132,10,255,.05); border-radius: 8px; padding: 8px 6px;
}
.amp .draft-card--selected .draft-card__sub-score { background: rgba(132,10,255,.09); }
.amp .draft-card__sub-score-label {
  font-family: var(--font-mono); font-size: 8px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-3);
}
.amp .draft-card__sub-score-val {
  font-family: var(--font-display); font-weight: 900; font-size: 16px; color: #840aff;
}

.amp .draft-card__why {
  font-size: 12px; color: var(--fg-3); margin: 0; line-height: 1.5;
  border-top: 1px solid var(--border-1); padding-top: 12px;
}

/* Footer */
.amp .draft-card__footer { margin-top: 4px; }
.amp .draft-card__select-btn {
  width: 100%; justify-content: center;
  border: 2px solid var(--amp-ink); background: transparent; color: var(--amp-ink);
  font-weight: 700; border-radius: var(--radius-2);
  transition: background .15s, color .15s, border-color .15s;
}
.amp .draft-card__select-btn:hover {
  background: var(--amp-ink); color: var(--amp-paper);
}
.amp .draft-card--selected .draft-card__select-btn {
  border-color: #840aff; background: #840aff; color: #fff;
}
.amp .draft-card__selected-state {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px 0;
  font-size: 14px; font-weight: 700; color: #840aff;
  border: 2px solid #840aff; border-radius: var(--radius-2);
  background: rgba(132,10,255,.06);
}

/* Sticky CTA bar */
.amp .drafts-cta-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--amp-ink); border-top: 1px solid rgba(246,242,234,.15);
  padding: 0 32px; height: 0; overflow: hidden;
  transition: height .25s var(--ease-snap);
  z-index: 40;
}
.amp .drafts-cta-bar--visible { height: 72px; }
.amp .drafts-cta-bar__inner {
  max-width: 1100px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.amp .drafts-cta-bar__info {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--amp-paper);
}
.amp .drafts-cta-bar__check {
  width: 24px; height: 24px; border-radius: 50%;
  background: #2BD66B; color: var(--amp-ink);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.amp .drafts-cta-bar__sep { color: rgba(246,242,234,.3); }
.amp .drafts-cta-bar__headline { color: rgba(246,242,234,.6); font-style: italic; }
.amp .drafts-cta-bar__btn {
  flex-shrink: 0; background: var(--amp-yellow); color: var(--amp-ink);
  border-color: var(--amp-yellow);
}
.amp .drafts-cta-bar__btn:disabled {
  opacity: .5; cursor: not-allowed;
}

/* Link on dashboard history */
.amp .dash-brief-row__drafts-link {
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* =========================================================
   PUBLISHING (sticky CTA + draft perf)
   ========================================================= */
.amp .drafts-cta-bar__actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.amp .drafts-cta-bar__published-tag {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: #2BD66B; padding: 4px 8px;
  border: 1px solid rgba(43,214,107,.4); border-radius: 4px;
}
.amp .drafts-cta-bar__schedule { position: relative; }
.amp .drafts-cta-bar__schedule[open] .drafts-cta-bar__schedule-form { display: flex; }
.amp .drafts-cta-bar__schedule summary { list-style: none; cursor: pointer; }
.amp .drafts-cta-bar__schedule summary::-webkit-details-marker { display: none; }
.amp .drafts-cta-bar__schedule-form {
  display: none; position: absolute; bottom: calc(100% + 8px); right: 0;
  background: var(--amp-ink); border: 1px solid rgba(246,242,234,.15);
  padding: 10px; border-radius: 8px; gap: 8px; align-items: center;
  min-width: 280px;
}
.amp .drafts-cta-bar__date-input {
  background: var(--amp-paper); color: var(--amp-ink);
  font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--amp-line); border-radius: 6px; padding: 8px 10px;
}

.amp .draft-card__perf {
  margin-top: 10px; padding: 12px; background: #0B0B0C; border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.amp .draft-card__perf-head {
  display: flex; align-items: center; justify-content: space-between;
}
.amp .draft-card__perf-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: rgba(246,242,234,.6); font-weight: 700;
}
.amp .draft-card__perf-delta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
}
.amp .draft-card__perf-delta--up   { background: rgba(43,214,107,.15); color: #2BD66B; }
.amp .draft-card__perf-delta--down { background: rgba(197,11,172,.18); color: #FFB3D9; }
.amp .draft-card__perf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.amp .draft-card__perf-grid label {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(246,242,234,.55);
}
.amp .draft-card__perf-grid input {
  background: rgba(246,242,234,.08); color: var(--amp-paper);
  border: 1px solid rgba(246,242,234,.12); border-radius: 4px;
  padding: 6px 8px; font-family: var(--font-mono); font-size: 13px;
  width: 100%; box-sizing: border-box;
}
.amp .draft-card__perf-submit {
  align-self: flex-end; background: rgba(246,242,234,.1); color: var(--amp-paper);
  border-color: rgba(246,242,234,.2); font-size: 12px;
}

/* =========================================================
   ADMIN
   ========================================================= */
.amp .admin-page { background: var(--amp-paper); min-height: 100vh; }
.amp .admin-main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
.amp .admin-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--amp-ink); color: var(--amp-yellow);
  padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}

.amp .admin-hero { margin-bottom: 32px; }
.amp .admin-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 5vw, 64px); letter-spacing: -.03em; line-height: 1;
  margin: 8px 0; color: var(--amp-ink);
}
.amp .admin-hero__title::after { content: "."; color: var(--amp-red); }
.amp .admin-hero__sub { color: var(--fg-2); font-size: 16px; margin: 0; }

.amp .admin-counts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 40px;
}
.amp .admin-count {
  background: var(--amp-cream); border: 1px solid var(--border-1);
  border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.amp .admin-count__num {
  font-family: var(--font-display); font-weight: 900; font-size: 36px;
  color: var(--amp-ink); letter-spacing: -.02em; line-height: 1;
}
.amp .admin-count__label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2);
}

.amp .admin-section { margin-bottom: 40px; }
.amp .admin-section__head {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-1); padding-bottom: 8px;
}
.amp .admin-section__title {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; margin: 0; color: var(--amp-ink);
}
.amp .admin-section__hint {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-3);
}

.amp .admin-orgs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px;
}
.amp .admin-org {
  background: var(--amp-cream); border: 1px solid var(--border-1);
  border-left: 4px solid var(--org-accent); border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.amp .admin-org__head { display: flex; align-items: center; gap: 8px; }
.amp .admin-org__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--org-accent); flex-shrink: 0; }
.amp .admin-org__name {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  color: var(--amp-ink); flex: 1;
}
.amp .admin-org__kind {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .12em; padding: 2px 6px; border-radius: 4px;
}
.amp .admin-org__kind--internal { background: var(--amp-yellow); color: var(--amp-ink); }
.amp .admin-org__kind--external { background: var(--amp-ink); color: var(--amp-paper); }
.amp .admin-org__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.amp .admin-org__stats > div { display: flex; flex-direction: column; gap: 2px; }
.amp .admin-org__stat-num {
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  color: var(--amp-ink); line-height: 1;
}
.amp .admin-org__stat-lab {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3);
}
.amp .admin-org__users {
  display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px;
  border-top: 1px dashed var(--border-1);
}
.amp .admin-org__user {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-2); padding: 2px 6px;
  background: rgba(11,11,12,.04); border-radius: 4px;
}

.amp .admin-table { display: flex; flex-direction: column; gap: 4px; }
.amp .admin-row {
  display: grid; grid-template-columns: 180px 110px 110px 1fr 100px 80px;
  gap: 12px; align-items: center; padding: 10px 12px;
  background: var(--amp-cream); border: 1px solid var(--border-1); border-radius: 8px;
  font-size: 13px;
}
.amp .admin-row__org {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--amp-ink);
}
.amp .admin-row__platform, .amp .admin-row__tone {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-2);
  padding: 2px 6px; border: 1px solid var(--border-1); border-radius: 4px;
  background: var(--amp-paper); justify-self: start;
}
.amp .admin-row__desc, .amp .admin-row__headline {
  color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.amp .admin-row__status {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  justify-self: start;
}
.amp .admin-row__status--pending    { background: rgba(255,138,31,.15); color: #c66600; }
.amp .admin-row__status--processing { background: rgba(255,138,31,.15); color: #c66600; }
.amp .admin-row__status--ready      { background: rgba(43,214,107,.15); color: #1a9e50; }
.amp .admin-row__when { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.amp .admin-row__pred {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
}
.amp .admin-row__delta {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; justify-self: start;
}
.amp .admin-row__delta--up      { background: rgba(43,214,107,.15); color: #1a9e50; }
.amp .admin-row__delta--down    { background: rgba(197,11,172,.15); color: var(--amp-red); }
.amp .admin-row__delta--pending { background: rgba(11,11,12,.04); color: var(--fg-3); }
.amp .admin-row__link {
  text-decoration: none; color: var(--amp-ink); font-size: 16px;
  border: 1px solid var(--border-1); border-radius: 4px;
  width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
}
.amp .admin-row__link:hover { background: var(--amp-yellow); }
.amp .admin-empty {
  padding: 20px; background: var(--amp-cream); border: 1px dashed var(--border-1);
  border-radius: 10px; text-align: center; color: var(--fg-3);
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
}

@media (max-width: 900px) {
  .amp .admin-row { grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================
   TENANT IDENTITY (--org-accent driven)
   ========================================================= */

/* Brand mark brushstroke picks up tenant color via inline var on <body> */
/* (the existing .mark .ink + accent paths already render; tenant_nav uses var(--org-accent) directly) */

/* Tenant pill in nav */
.amp .dash-nav--tenant {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--border-1);
  background: var(--amp-paper);
}
.amp .dash-nav--tenant .dash-nav__right { margin-left: auto; }
.amp .dash-nav--admin { background: var(--amp-ink); color: var(--amp-paper); border-bottom-color: rgba(246,242,234,.1); }
.amp .dash-nav--admin .brand-link .word { color: var(--amp-paper); }
.amp .dash-nav--admin .mark path[stroke="#0B0B0C"] { stroke: var(--amp-paper); }
.amp .dash-nav--admin .dash-nav__user { color: rgba(246,242,234,.7); }
.amp .dash-nav--admin .btn.ghost { color: var(--amp-paper); border-color: rgba(246,242,234,.25); }
.amp .dash-nav--admin .btn.ghost:hover { background: rgba(246,242,234,.06); }

.amp .tenant-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--amp-cream); border: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--amp-ink);
}
.amp .tenant-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--org-accent); flex-shrink: 0;
}
.amp .tenant-pill__name { font-weight: 700; }
.amp .tenant-pill__kind {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  font-weight: 700; letter-spacing: .12em;
}
.amp .tenant-pill__kind--internal { background: var(--amp-yellow); color: var(--amp-ink); }
.amp .tenant-pill__kind--external { background: var(--amp-ink); color: var(--amp-paper); }

/* Account (organization) switcher — dropdown built on <details>/<summary>. */
.amp .tenant-switch { position: relative; }
.amp .tenant-switch summary { list-style: none; cursor: pointer; }
.amp .tenant-switch summary::-webkit-details-marker { display: none; }
.amp .tenant-pill--button { user-select: none; }
.amp .tenant-pill__caret { font-size: 9px; opacity: .6; }
.amp .tenant-switch__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 240px; padding: 6px;
  background: var(--amp-paper); border: 1px solid var(--border-1);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.amp .tenant-switch__label {
  display: block; padding: 6px 10px 8px; font-family: var(--font-mono);
  font-size: 9px; text-transform: uppercase; letter-spacing: .12em; opacity: .55;
}
.amp .tenant-switch__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: none; background: transparent;
  text-align: left; cursor: pointer; color: var(--amp-ink);
}
.amp .tenant-switch__item:hover { background: var(--amp-cream); }
.amp .tenant-switch__item--active { background: var(--amp-cream); }
.amp .tenant-switch__name { font-weight: 700; flex: 1; }
.amp .tenant-switch__check { color: var(--org-accent); font-weight: 700; }

/* Org label in dashboard hero */
.amp .dash-hero__org {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--amp-ink);
}
.amp .dash-hero__org-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--org-accent); display: inline-block;
}

/* Section eyebrow numbers (the "01", "02" etc.) take tenant color when logged in */
.amp .dash-page .section-head__eyebrow .num,
.amp .drafts-page .section-head__eyebrow .num,
.amp .admin-page .section-head__eyebrow .num { color: var(--org-accent); }

/* Setup card active-state border */
.amp .setup-card--active { border-color: var(--org-accent); }
.amp .setup-card--active .setup-card__num { background: var(--org-accent); color: var(--amp-paper); }

/* Selected draft border on drafts page */
.amp .draft-card--selected { border-color: var(--org-accent); }
.amp .draft-card--selected .draft-card__label { background: var(--org-accent); }
.amp .draft-card__hook { border-left-color: var(--org-accent); }
.amp .draft-card__direction { color: var(--org-accent); }

/* Primary action gets a colored ring on hover for tenant feel; magenta stays the fill (brand cohesion) */
.amp .dash-page .btn.primary:hover,
.amp .drafts-page .btn.primary:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--org-accent) 30%, transparent);
}

/* Brief mode toggle active state */
.amp .brief-mode-btn.active { border-color: var(--org-accent); color: var(--org-accent); }

/* =========================================================
   PRO — feature showcase (/pro)
   ========================================================= */
.amp .pro-page { background: var(--amp-paper); min-height: 100vh; }
.amp .pro-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

.amp .dash-nav__pro-link {
  color: var(--amp-ink); border-color: var(--amp-yellow);
  background: rgba(255,214,10,.18); font-weight: 700;
}
.amp .dash-nav__pro-link:hover { background: var(--amp-yellow); }

.amp .pro-hero { margin-bottom: 48px; }
.amp .pro-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 4.8vw, 64px); letter-spacing: -.03em; line-height: 1.02;
  margin: 12px 0 16px; color: var(--amp-ink);
}
.amp .pro-hero__title::after { content: "."; color: var(--org-accent, var(--amp-red)); }
.amp .pro-hero__sub {
  font-size: 18px; color: var(--fg-2); margin: 0 0 24px; max-width: 720px; line-height: 1.5;
}

.amp .pro-hero__tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px;
}
.amp .pro-tier-chip {
  background: var(--amp-cream); border: 1px solid var(--border-1); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  position: relative; transition: border-color .15s, transform .15s;
}
.amp .pro-tier-chip--current {
  border-color: var(--org-accent, var(--amp-red)); border-width: 2px;
  background: var(--amp-paper);
}
.amp .pro-tier-chip--current::before {
  content: "Tu plan"; position: absolute; top: -8px; left: 12px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  background: var(--org-accent, var(--amp-red)); color: var(--amp-paper);
  padding: 2px 6px; border-radius: 3px;
}
.amp .pro-tier-chip__name {
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  letter-spacing: .04em; color: var(--amp-ink);
}
.amp .pro-tier-chip__price {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
}
.amp .pro-tier-chip__hint {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3);
}

.amp .pro-hero__progress {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--amp-cream);
  border: 1px solid var(--border-1); border-radius: 8px;
}
.amp .pro-hero__progress-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-2); font-weight: 700;
}
.amp .pro-hero__progress-bar {
  flex: 1; height: 6px; background: var(--border-1); border-radius: 3px; overflow: hidden;
}
.amp .pro-hero__progress-fill {
  height: 100%; background: var(--org-accent, var(--amp-red));
  transition: width .25s;
}
.amp .pro-hero__progress-count {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--amp-ink);
}

.amp .pro-section { margin-bottom: 40px; }
.amp .pro-section__head { margin-bottom: 16px; }
.amp .pro-section__sub {
  margin: 6px 0 0; color: var(--fg-2); font-size: 14px; max-width: 720px;
}

.amp .pro-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px;
}

.amp .feature-card {
  background: var(--amp-cream); border: 1px solid var(--border-1);
  border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; transition: border-color .15s, transform .15s;
}
.amp .feature-card--unlocked { border-color: var(--org-accent, var(--amp-red)); }
.amp .feature-card--locked   { opacity: .92; }
.amp .feature-card--locked::after {
  content: "🔒"; position: absolute; top: 14px; right: 14px;
  font-size: 14px; opacity: .5;
}

.amp .feature-card__head {
  display: flex; align-items: center; gap: 6px;
}
.amp .feature-card__status, .amp .feature-card__tier {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 2px 6px; border-radius: 4px;
}
.amp .feature-card__status--planned  { background: rgba(11,11,12,.06);   color: var(--fg-2); }
.amp .feature-card__status--building { background: rgba(255,138,31,.18); color: #c66600; }
.amp .feature-card__status--beta     { background: rgba(255,214,10,.25); color: #6a5100; }
.amp .feature-card__tier--pro     { background: rgba(197,11,172,.12); color: var(--amp-red); }
.amp .feature-card__tier--holding { background: var(--amp-ink);        color: var(--amp-yellow); }
.amp .feature-card__tier--solo    { background: rgba(11,11,12,.05);    color: var(--fg-2); }

.amp .feature-card__name {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; line-height: 1.2; margin: 0; color: var(--amp-ink);
}
.amp .feature-card__blurb {
  font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 0;
}
.amp .feature-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; margin-top: auto;
  border-top: 1px dashed var(--border-1);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.amp .feature-card__complexity { color: var(--fg-3); }
.amp .feature-card__complexity strong { color: var(--amp-ink); font-weight: 700; }
.amp .feature-card__lock-state--on  { color: #1a9e50; font-weight: 700; }
.amp .feature-card__lock-state--off { color: var(--fg-3); }

.amp .pro-cta {
  margin-top: 48px; padding: 32px;
  background: var(--amp-ink); color: var(--amp-paper);
  border-radius: 12px;
}
.amp .pro-cta__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 12px; color: var(--amp-paper);
}
.amp .pro-cta__title::after { content: ""; }
.amp .pro-cta__body {
  font-size: 15px; line-height: 1.6; color: rgba(246,242,234,.85);
  margin: 0 0 16px; max-width: 760px;
}
.amp .pro-cta__body strong { color: var(--amp-yellow); }
.amp .pro-cta__body code,
.amp .pro-cta__footnote code {
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(246,242,234,.08); color: var(--amp-yellow);
  padding: 2px 6px; border-radius: 3px;
}
.amp .pro-cta__footnote {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(246,242,234,.55); margin: 0;
  text-transform: uppercase; letter-spacing: .08em;
}

@media (max-width: 760px) {
  .amp .pro-hero__tiers { grid-template-columns: 1fr; }
}

/* =========================================================
   SKILLS — template library
   ========================================================= */
.amp .skills-page { background: var(--amp-paper); min-height: 100vh; }
.amp .skills-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

.amp .skills-hero { margin-bottom: 32px; }
.amp .skills-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.03em; line-height: 1.04;
  margin: 12px 0 12px; color: var(--amp-ink);
}
.amp .skills-hero__title::after { content: "."; color: var(--org-accent, var(--amp-red)); }
.amp .skills-hero__sub { color: var(--fg-2); font-size: 16px; max-width: 720px; line-height: 1.5; margin: 0; }

.amp .skills-section { margin-bottom: 40px; }
.amp .skills-section__head { margin-bottom: 16px; }
.amp .skills-section--popular {
  padding: 24px; background: var(--amp-cream);
  border: 1px solid var(--border-1); border-radius: 12px;
}

.amp .skills-filter {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-1);
}
.amp .skills-filter__label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3); margin-right: 4px;
}
.amp .skills-filter__chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 999px;
  background: var(--amp-cream); border: 1px solid var(--border-1);
  color: var(--amp-ink); text-decoration: none;
}
.amp .skills-filter__chip:hover { border-color: var(--org-accent, var(--amp-red)); }
.amp .skills-filter__chip--active {
  background: var(--amp-ink); color: var(--amp-paper); border-color: var(--amp-ink);
}

.amp .skills-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;
}

.amp .skill-card {
  background: var(--amp-cream); border: 1px solid var(--border-1);
  border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .15s;
}
.amp .skill-card:hover { border-color: var(--org-accent, var(--amp-red)); transform: translateY(-1px); }

.amp .skill-card__head { display: flex; align-items: center; justify-content: space-between; }
.amp .skill-card__layer {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 2px 6px; border-radius: 4px;
}
.amp .skill-card__layer--social     { background: rgba(197,11,172,.12); color: var(--amp-red); }
.amp .skill-card__layer--lead_gen   { background: rgba(17,72,229,.12); color: var(--amp-blue); }
.amp .skill-card__layer--email      { background: rgba(255,138,31,.18); color: #c66600; }
.amp .skill-card__layer--retention  { background: rgba(43,214,107,.15); color: #1a9e50; }
.amp .skill-card__layer--awareness  { background: rgba(255,214,10,.25); color: #6a5100; }
.amp .skill-card__layer--brand      { background: rgba(11,11,12,.07); color: var(--amp-ink); }

.amp .skill-card__uses {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: .08em;
}
.amp .skill-card__name {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; line-height: 1.2; margin: 0; color: var(--amp-ink);
}
.amp .skill-card__desc { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 0; }
.amp .skill-card__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.amp .skill-card__tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-2);
  padding: 2px 6px; background: var(--amp-paper); border: 1px solid var(--border-1); border-radius: 4px;
}
.amp .skill-card__hint {
  font-size: 12px; font-style: italic; color: var(--fg-3);
  margin: 0; padding-top: 8px; border-top: 1px dashed var(--border-1);
}
.amp .skill-card__foot { margin-top: auto; padding-top: 8px; }
.amp .skill-card__cta { width: 100%; }

.amp .skill-detail {
  max-width: 720px; background: var(--amp-cream);
  border: 1px solid var(--border-1); border-radius: 12px;
  padding: 32px; display: flex; flex-direction: column; gap: 20px;
}
.amp .skill-detail__head { display: flex; flex-direction: column; gap: 10px; }
.amp .skill-detail__title {
  font-family: var(--font-display); font-weight: 900; font-size: 32px;
  letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--amp-ink);
}
.amp .skill-detail__desc { color: var(--fg-2); font-size: 15px; margin: 0; }
.amp .skill-detail__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 12px; background: var(--amp-paper); border-radius: 8px;
}
.amp .skill-detail__meta > div { display: flex; flex-direction: column; gap: 2px; }
.amp .skill-detail__lab {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-3);
}
.amp .skill-detail__val {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--amp-ink);
}
.amp .skill-detail__block { display: flex; flex-direction: column; gap: 8px; }
.amp .skill-detail__h {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--fg-2); margin: 0;
}
.amp .skill-detail__body { font-size: 14px; color: var(--fg-2); line-height: 1.6; margin: 0; }
.amp .skill-detail__pre {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  background: var(--amp-paper); border: 1px solid var(--border-1);
  border-radius: 8px; padding: 12px; margin: 0; white-space: pre-wrap;
  color: var(--amp-ink);
}

/* Skill applied / hint on brief form */
.amp .brief-form__skill-applied {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  background: rgba(197,11,172,.06);
  border: 1px solid var(--org-accent, var(--amp-red)); border-radius: 8px;
}
.amp .brief-form__skill-applied-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--org-accent, var(--amp-red));
}
.amp .brief-form__skill-applied-name {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--amp-ink); flex: 1;
}
.amp .brief-form__skill-applied-link {
  font-size: 13px; color: var(--fg-2); text-decoration: underline;
}
.amp .brief-form__skill-hint {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 16px;
  background: var(--amp-cream); border: 1px dashed var(--border-1); border-radius: 8px;
  font-size: 13px; color: var(--fg-2);
}
.amp .brief-form__skill-hint-link { color: var(--amp-ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--org-accent, var(--amp-red)); }

/* =========================================================
   PROVIDER CREDENTIALS — BYOK
   ========================================================= */
.amp .creds-page { background: var(--amp-paper); min-height: 100vh; }
.amp .creds-main { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }

.amp .creds-hero { margin-bottom: 32px; }
.amp .creds-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 4vw, 48px); letter-spacing: -.02em; line-height: 1.05;
  margin: 12px 0 12px; color: var(--amp-ink);
}
.amp .creds-hero__title::after { content: "."; color: var(--org-accent, var(--amp-red)); }
.amp .creds-hero__sub { color: var(--fg-2); font-size: 15px; line-height: 1.55; margin: 0; max-width: 700px; }
.amp .creds-hero__sub strong { color: var(--amp-ink); }

.amp .creds-section { margin-bottom: 36px; }
.amp .creds-section__head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-1); padding-bottom: 8px;
}
.amp .creds-section__title {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -.02em; margin: 0; color: var(--amp-ink);
}
.amp .creds-section__hint {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-3);
}

.amp .creds-form {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; background: var(--amp-cream);
  border: 1px solid var(--border-1); border-radius: 10px;
}

.amp .creds-list { display: flex; flex-direction: column; gap: 6px; }
.amp .cred-row {
  display: grid; grid-template-columns: 120px 160px 160px 1fr auto;
  gap: 12px; align-items: center; padding: 10px 14px;
  background: var(--amp-cream); border: 1px solid var(--border-1); border-radius: 8px;
  font-size: 13px;
}
.amp .cred-row--inactive { opacity: .55; }
.amp .cred-row__provider {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--amp-ink);
}
.amp .cred-row__label { font-weight: 700; color: var(--amp-ink); }
.amp .cred-row__key {
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(11,11,12,.04); padding: 4px 8px; border-radius: 4px;
  color: var(--fg-2);
}
.amp .cred-row__used {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3);
}
.amp .cred-row__actions { display: flex; gap: 6px; }
.amp .cred-row__actions form { display: inline-flex; margin: 0; }
.amp .cred-row__actions .btn { font-size: 11px; padding: 4px 10px; }
.amp .cred-row__delete { color: var(--amp-red); border-color: var(--amp-red); }

@media (max-width: 760px) {
  .amp .cred-row { grid-template-columns: 1fr; }
}

/* =========================================================
   REFINEMENT — conversational draft editing
   ========================================================= */
.amp .draft-card__refine {
  margin-top: 10px; background: rgba(11,11,12,.03);
  border: 1px solid var(--border-1); border-radius: 8px;
  overflow: hidden;
}
.amp .draft-card__refine[open] { background: var(--amp-cream); }
.amp .draft-card__refine-toggle {
  list-style: none; cursor: pointer; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--amp-ink);
}
.amp .draft-card__refine-toggle::-webkit-details-marker { display: none; }
.amp .draft-card__refine-hint {
  font-weight: 400; letter-spacing: .08em; color: var(--fg-3); font-size: 10px;
}
.amp .draft-card__refine-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }

/* Manual copy editor (Lexxy) on the draft card — mirrors the refine panel. */
.amp .draft-card__edit {
  margin-top: 10px; background: rgba(11,11,12,.03);
  border: 1px solid var(--border-1); border-radius: 8px; overflow: hidden;
}
.amp .draft-card__edit[open] { background: var(--amp-cream); }
.amp .draft-card__edit-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.amp .draft-card__lexxy {
  --lexxy-editor-rows: 4lh;
  --lexxy-focus-ring-color: var(--org-accent, #c50bac);
  --lexxy-color-link: var(--org-accent, #c50bac);
  display: block; width: 100%; background: #fff;
  border: 1px solid var(--border-1); border-radius: 8px;
}

.amp .draft-card__refine-history {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
  padding: 10px; background: var(--amp-paper); border-radius: 6px;
}
.amp .refine-msg {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 6px;
  border-left: 3px solid var(--border-1); background: rgba(255,255,255,.5);
}
.amp .refine-msg--system { border-left-color: var(--fg-3); }
.amp .refine-msg--user   { border-left-color: var(--org-accent, var(--amp-red)); }
.amp .refine-msg__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3);
}
.amp .refine-msg__version { font-weight: 700; color: var(--amp-ink); }
.amp .refine-msg__role { color: var(--fg-2); }
.amp .refine-msg__time { margin-left: auto; }
.amp .refine-msg__revert {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  background: transparent; border: 1px solid var(--border-1); border-radius: 4px;
  padding: 2px 6px; color: var(--fg-2); cursor: pointer;
  margin: 0;
}
.amp .refine-msg__revert:hover { color: var(--amp-ink); border-color: var(--amp-ink); }
.amp form.refine-msg__revert,
.amp form:has(.refine-msg__revert) { display: inline; margin: 0; }
.amp .refine-msg__prompt { font-size: 13px; color: var(--amp-ink); margin: 0; line-height: 1.4; }
.amp .refine-msg__prompt--muted { color: var(--fg-3); font-style: italic; }

.amp .draft-card__refine-form { display: flex; flex-direction: column; gap: 8px; }
.amp .draft-card__refine-input {
  background: var(--amp-paper); border: 1px solid var(--border-1); border-radius: 6px;
  padding: 8px 10px; font-family: var(--font-sans); font-size: 13px;
  color: var(--amp-ink); resize: vertical; min-height: 50px;
  width: 100%; box-sizing: border-box;
}
.amp .draft-card__refine-input:focus { border-color: var(--org-accent, var(--amp-red)); outline: none; }
.amp .draft-card__refine-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.amp .draft-card__refine-tip {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3);
}

/* =========================================================
   HAMBURGER NAV
   ========================================================= */

.amp .nav__hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; background: none;
  border: 1.5px solid var(--border-1); border-radius: var(--radius-2);
  cursor: pointer; flex-shrink: 0;
}
.amp .nav__bar {
  display: block; width: 18px; height: 2px;
  background: var(--amp-ink); border-radius: 1px;
  transition: transform .2s var(--ease-snap), opacity .15s ease;
}
.amp .nav--open .nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.amp .nav--open .nav__bar:nth-child(2) { opacity: 0; }
.amp .nav--open .nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.amp .nav__mobile {
  display: none;
  flex-direction: column; gap: 0;
  border-top: 1px solid var(--border-1);
  background: var(--bg-1);
}
.amp .nav__mobile-links {
  display: flex; flex-direction: column;
  padding: 8px 0;
}
.amp .nav__mobile-links a {
  display: block; padding: 14px 24px;
  font-size: 16px; font-weight: 500; color: var(--fg-1);
  border-bottom: 1px solid var(--border-1);
  transition: color .12s ease, background .12s ease;
}
.amp .nav__mobile-links a:last-child { border-bottom: none; }
.amp .nav__mobile-links a:hover { color: var(--amp-red); background: var(--bg-2); }
.amp .nav__mobile-actions {
  display: flex; gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--border-1);
  flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE — GLOBAL
   ========================================================= */

/* ── 1024px: tableta grande / laptop pequeño ── */
@media (max-width: 1024px) {
  /* Ocultar hero art antes de que se corte */
  .amp .hero__art { display: none !important; }

  /* Drafts: 3 → 2 columnas */
  .amp .drafts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 900px: tableta ── */
@media (max-width: 900px) {
  /* Hero padding intermedio */
  .amp .hero { padding: 48px 0 64px; }

  /* Sections */
  .amp section { padding: 48px 0; }

  /* Dashboard brief cards: forzar 2 cols antes del auto-fill */
  .amp .dash-brief-cards { grid-template-columns: repeat(2, 1fr); }

  /* Pricing: reducir gap al apilar */
  .amp .pricing { gap: 20px; }
}

/* ── 768px: tableta / hamburger ── */
@media (max-width: 768px) {
  /* Nav: hamburger + esconder ítems de escritorio */
  .amp .nav__hamburger { display: flex; }
  .amp .nav__desktop-only { display: none !important; }
  .amp .lang-toggle { display: none; }
  .amp .nav__menu { display: none; }
  .amp .nav--open .nav__mobile { display: flex; }
  .amp .nav__inner { gap: 12px; }

  /* Container */
  .amp .container { padding: 0 20px; }

  /* Sections */
  .amp section { padding: 56px 0; }

  /* Hero */
  .amp .hero { padding: 40px 0 56px; }
  .amp .hero__sub { font-size: 18px; max-width: 100%; }
  .amp .hero__meta { gap: 6px; margin-top: 24px; }

  /* CTA section */
  .amp .cta-section { padding: 56px 24px; border-radius: 16px; }

  /* Footer: 4 → 2 columnas en tableta */
  .amp .footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .amp .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Dashboard aside: no sticky en tableta */
  .amp .dash-aside { position: static; top: auto; }

  /* Pricing price: ligeramente más pequeño */
  .amp .price-card__price { font-size: 64px; }
  .amp .price-card__price .currency { font-size: 24px; margin-top: 12px; }
}

/* ── 640px: móvil ── */
@media (max-width: 640px) {
  /* Container ajustado */
  .amp .container { padding: 0 16px; }

  /* Sections más compactas */
  .amp section { padding: 40px 0; }

  /* ── Navegación ── */
  .amp .nav__inner { gap: 8px; }
  .amp .nav .word { font-size: 18px; }

  /* ── Dashboard nav (tenant nav) ── */
  .amp .dash-nav { padding: 0 16px; height: 56px; }
  .amp .dash-nav__user { display: none; }
  .amp .tenant-pill { font-size: 10px; padding: 4px 10px; }
  .amp .tenant-pill__dot { width: 6px; height: 6px; }

  /* ── Dashboard main ── */
  .amp .dash-main { padding: 24px 16px 64px; }

  /* ── Hero (home) ── */
  .amp .hero__sub { font-size: 16px; }
  .amp .hero__cta { flex-direction: column; }
  .amp .hero__cta .btn { width: 100%; justify-content: center; }
  .amp .hero__meta { gap: 6px; } .amp .hero__meta span { font-size: 11px; padding: 4px 10px; }

  /* ── Cards/shadows: reducir en móvil ── */
  .amp .score-card { box-shadow: 4px 4px 0 var(--amp-ink); padding: 18px; }
  .amp .setup-card { box-shadow: 4px 4px 0 var(--amp-ink); }
  .amp .price-card { box-shadow: none; }
  .amp .price-card.featured { box-shadow: 4px 4px 0 var(--amp-ink); }

  /* ── Setup / onboarding ── */
  .amp .setup-card { padding: 20px 16px; gap: 16px; }
  .amp .setup-card__head { gap: 12px; }
  .amp .setup-card__title { font-size: 17px; }
  .amp .setup-card__subtitle { font-size: 13px; }

  /* ── Brief form ── */
  .amp .brief-form__input,
  .amp .brief-form__select,
  .amp .brief-form__textarea {
    font-size: 16px; /* previene zoom en iOS */
    padding: 12px 14px;
    min-height: 44px; /* touch target */
  }
  .amp .brief-form__row { gap: 12px; }
  .amp .brief-form__hint { font-size: 11px; }

  /* Brief mode toggle: apilar */
  .amp .brief-mode-toggle { flex-direction: column; gap: 6px; }
  .amp .brief-mode-btn { width: 100%; justify-content: center; padding: 10px 16px; }

  /* Skill hint */
  .amp .brief-form__skill-hint,
  .amp .brief-form__skill-applied { font-size: 12px; }

  /* ── Dashboard form panel ── */
  .amp .dash-form-panel { padding: 20px 16px; }
  .amp .dash-form-panel__head { gap: 10px; margin-bottom: 16px; }
  .amp .dash-form-panel__title { font-size: 17px; }
  .amp .dash-form-panel__num { width: 28px; height: 28px; font-size: 13px; }

  /* ── Dashboard usage ── */
  .amp .dash-usage__used { font-size: 48px; }
  .amp .dash-usage__limit { font-size: 20px; }

  /* ── Dashboard profile peek ── */
  .amp .dash-profile-peek { padding: 16px; }
  .amp .dash-profile-peek__label { font-size: 10px; }
  .amp .dash-profile-peek__value { font-size: 12px; }

  /* ── Brief cards history ── */
  .amp .dash-brief-cards { grid-template-columns: 1fr; }
  .amp .dash-brief-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .amp .dash-brief-row__right { width: 100%; justify-content: space-between; }
  .amp .dash-brief-row__desc { max-width: 100%; white-space: normal; }

  /* ── Drafts page ── */
  .amp .drafts-main { padding: 20px 16px 80px; }
  .amp .drafts-grid { grid-template-columns: 1fr; }
  .amp .draft-card { padding: 18px 16px; }
  .amp .draft-card__headline { font-size: 16px; }
  .amp .draft-card__score-num { font-size: 20px; }

  /* Sub-scores: 4 → 2 columnas */
  .amp .draft-card__sub-scores { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .amp .draft-card__sub-score-val { font-size: 18px; }

  /* Design preview: limitar altura */
  .amp .draft-card__design-frame { max-height: 300px; overflow: hidden; }

  /* Refine history */
  .amp .draft-card__refine-history { max-height: 160px; }
  .amp .refine-msg__head { flex-wrap: wrap; gap: 6px; }

  /* Sticky CTA bar */
  .amp .drafts-cta-bar { padding: 0 16px; }
  .amp .drafts-cta-bar--visible { height: auto; min-height: 64px; overflow: visible; }
  .amp .drafts-cta-bar__inner { flex-direction: column; gap: 10px; padding: 12px 0; height: auto; }
  .amp .drafts-cta-bar__info { font-size: 13px; flex-wrap: wrap; }
  .amp .drafts-cta-bar__sep,
  .amp .drafts-cta-bar__headline { display: none; }
  .amp .drafts-cta-bar__btn { width: 100%; justify-content: center; }

  /* ── Pricing ── */
  .amp .price-card { padding: 24px 20px; }
  .amp .price-card__name { font-size: 26px; }
  .amp .price-card__price { font-size: 52px; line-height: 1; }
  .amp .price-card__price .currency { font-size: 18px; margin-top: 10px; }
  .amp .price-card__list { font-size: 14px; gap: 8px; }

  /* ── Auth ── */
  .amp .auth-card { padding: 28px 20px; }
  .amp .auth-form__plan-toggle { grid-template-columns: 1fr; gap: 10px; }
  .amp .auth-form__input { font-size: 16px; min-height: 44px; }

  /* ── Footer ── */
  .amp .footer__top { grid-template-columns: 1fr 1fr; gap: 20px; }
  .amp footer { padding: 48px 0 32px; }

  /* ── CTA section ── */
  .amp .cta-section__title { font-size: clamp(36px, 9vw, 52px); }

  /* ── Section heads ── */
  .amp .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .amp .section-head__sub { max-width: 100%; font-size: 15px; }
  .amp .section-head__title { font-size: clamp(24px, 6.5vw, 36px); }
}

/* ── 400px: teléfonos muy pequeños ── */
@media (max-width: 400px) {
  .amp .nav__mobile-actions { flex-direction: column; }
  .amp .nav__mobile-actions .btn { width: 100%; justify-content: center; }
  .amp footer .footer__top { grid-template-columns: 1fr; }
  .amp .draft-card__sub-scores { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   EMPRESAS PAGE
   ========================================================= */

/* ── Active nav link ── */
.amp .nav__menu-active {
  color: var(--amp-red); font-weight: 600;
}

/* ── Hero 2-col ── */
.amp .emp-hero {
  padding: 56px 0 80px;
  overflow: hidden;
}
.amp .emp-hero__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: center;
}
.amp .emp-hero__text {
  display: flex; flex-direction: column; gap: 0;
}
.amp .emp-hero__eyebrow {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--amp-ink); padding: 5px 12px; border-radius: 999px;
  background: var(--bg-3); width: fit-content;
}
.amp .emp-hero__eyebrow .dot {
  width: 6px; height: 6px; background: var(--amp-red); border-radius: 50%;
  animation: amp-pulse 2s ease-in-out infinite;
}
.amp .emp-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1.0; letter-spacing: -0.04em;
  margin: 20px 0 0; color: var(--fg-1);
}
.amp .emp-hero__accent { color: var(--amp-red); }
.amp .emp-hero__sub {
  font-size: 18px; line-height: 1.5; max-width: 520px;
  margin-top: 20px; color: var(--fg-2);
}
.amp .emp-hero__cta {
  display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;
}
.amp .emp-hero__meta {
  display: flex; gap: 20px; margin-top: 36px; padding-top: 24px;
  border-top: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-2); flex-wrap: wrap;
}
.amp .emp-hero__meta strong { color: var(--fg-1); }

.amp .emp-hero__card {
  flex-shrink: 0;
}
.amp .emp-hero__card .score-card {
  transform: rotate(1.5deg);
}

/* ── Features grid (dark section) ── */
.amp .emp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(246,242,234,.1);
  border: 1px solid rgba(246,242,234,.1);
  border-radius: var(--radius-3);
  overflow: hidden;
  margin-top: 48px;
}
.amp .emp-feature {
  padding: 28px 24px;
  background: rgba(246,242,234,.04);
  display: flex; flex-direction: column; gap: 10px;
  transition: background .15s ease;
}
.amp .emp-feature:hover { background: rgba(246,242,234,.09); }
.amp .emp-feature__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-2);
  background: rgba(197,11,172,.18);
  color: #d94dcc;
  flex-shrink: 0;
}
.amp .emp-feature__title {
  font-size: 14px; font-weight: 700;
  color: var(--fg-inv); line-height: 1.3;
}
.amp .emp-feature__body {
  font-size: 13px; line-height: 1.6;
  color: rgba(246,242,234,.58); flex: 1;
}
.amp .emp-feature__tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--amp-yellow); background: rgba(255,214,10,.1);
  padding: 2px 7px; border-radius: 99px;
  border: 1px solid rgba(255,214,10,.25);
  width: fit-content; margin-top: 4px;
}

/* ── Per-seat note under price ── */
.amp .emp-per-seat {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-2);
  margin: 0 0 4px; padding: 0;
}

/* ── Compare note ── */
.amp .emp-compare {
  margin-top: 28px; text-align: center;
}
.amp .emp-compare__note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-3);
}
.amp .emp-compare__link {
  color: var(--amp-red); text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .amp .emp-hero__grid {
    grid-template-columns: 1fr 340px;
    gap: 48px;
  }
}
@media (max-width: 800px) {
  .amp .emp-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .amp .emp-hero__card {
    max-width: 480px;
  }
  .amp .emp-hero__card .score-card {
    transform: none;
  }
  .amp .emp-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .amp .emp-hero { padding: 40px 0 56px; }
  .amp .emp-hero__title { font-size: clamp(32px, 8vw, 52px); }
  .amp .emp-hero__sub { font-size: 16px; }
  .amp .emp-hero__cta { flex-direction: column; }
  .amp .emp-hero__cta .btn { width: 100%; justify-content: center; }
  .amp .emp-hero__meta { gap: 12px; }
  .amp .emp-features { grid-template-columns: 1fr; }
  .amp .emp-feature { padding: 20px 18px; }
}

/* ═══════════════════════════════════════════════════════════
   HASHTAG GROUPS
   ═══════════════════════════════════════════════════════════ */
.amp .hg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.amp .hg-card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--hg-color, #6366f1); }
.amp .hg-card__head { display: flex; align-items: center; gap: 10px; }
.amp .hg-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hg-color, #6366f1); flex-shrink: 0; }
.amp .hg-card__name { font-weight: 700; font-size: 15px; flex: 1; }
.amp .hg-card__count { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.amp .hg-card__tags { font-size: 13px; color: var(--fg-2); line-height: 1.6; word-break: break-word; margin: 0; flex: 1; }
.amp .hg-card__more { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }
.amp .hg-card__actions { display: flex; gap: 8px; }
.amp .form-color { width: 48px; height: 36px; border-radius: 6px; border: 1px solid var(--border-1); cursor: pointer; padding: 2px; }

/* ═══════════════════════════════════════════════════════════
   MEDIA LIBRARY
   ═══════════════════════════════════════════════════════════ */
.amp .media-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.amp .media-search { margin-left: auto; }
/* Drag-and-drop upload zone */
.media-drop { border: 1.5px dashed rgba(0,0,0,.18); border-radius: 10px; padding: 14px; transition: border-color .12s, background .12s; }
.media-drop.is-over { border-color: var(--org-accent, #c50bac); background: rgba(197,11,172,.06); }
.media-drop__hint { margin: 8px 0 0; font-size: 12px; color: rgba(0,0,0,.45); }
.amp .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.amp .media-card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.amp .media-card__thumb { height: 140px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.amp .media-card__img { width: 100%; height: 100%; object-fit: cover; }
.amp .media-card__icon { font-size: 36px; }
.amp .media-card__body { padding: 10px 12px; flex: 1; }
.amp .media-card__name { font-size: 13px; font-weight: 600; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amp .media-card__kind { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.amp .media-card__actions { padding: 8px 12px; display: flex; gap: 6px; border-top: 1px solid var(--border-1); }
.amp .btn.sm { font-size: 11px; padding: 4px 10px; }
.amp .btn.danger { color: #e53e3e; }
.amp .btn.danger:hover { background: #fff5f5; }

/* Upload modal */
.amp .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.amp .modal[hidden] { display: none; }
.amp .modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.amp .modal__box { position: relative; background: var(--bg-1); border-radius: 14px; padding: 28px; width: 100%; max-width: 480px; z-index: 1; }
.amp .modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.amp .modal__head h2 { margin: 0; font-size: 18px; }
.amp .modal__close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--fg-2); }
.amp .modal__body { display: flex; flex-direction: column; gap: 16px; }

/* ═══════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════ */
.amp .cal-nav { display: flex; gap: 8px; align-items: center; }
.amp .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-1); border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; margin-top: 24px; }
.amp .cal-dow { background: var(--bg-2); padding: 10px 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-mono); }
.amp .cal-cell { background: var(--bg-1); min-height: 120px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.amp .cal-cell--today { background: var(--bg-2); }
.amp .cal-cell--today .cal-cell__num { background: var(--amp-yellow); color: var(--amp-ink); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.amp .cal-cell--out .cal-cell__num { color: var(--fg-3); }
.amp .cal-cell__num { font-size: 13px; font-weight: 600; margin-bottom: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.amp .cal-post { display: flex; flex-direction: column; gap: 1px; background: var(--bg-3); border-radius: 5px; padding: 4px 6px; font-size: 10px; text-decoration: none; color: var(--fg-1); border-left: 3px solid var(--amp-yellow); }
.amp .cal-post--scheduled   { border-left-color: #6366f1; }
.amp .cal-post--publishing  { border-left-color: #f59e0b; }
.amp .cal-post--published   { border-left-color: #2BD66B; }
.amp .cal-post--failed      { border-left-color: #e53e3e; }
.amp .cal-post:hover { background: var(--bg-2); }
.amp .cal-post__time { font-family: var(--font-mono); color: var(--fg-3); }
.amp .cal-post__platform { font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.amp .cal-post__label { font-size: 9px; color: var(--fg-3); }
@media (max-width: 700px) { .amp .cal-grid { grid-template-columns: repeat(7, 1fr); } .amp .cal-cell { min-height: 60px; padding: 4px; } }

/* ═══════════════════════════════════════════════════════════
   SOCIAL ACCOUNTS
   ═══════════════════════════════════════════════════════════ */
.amp .social-connect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 40px; }
.amp .social-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; text-decoration: none; color: var(--fg-1); font-size: 13px; font-weight: 600; transition: border-color .15s, transform .1s; }
.amp .social-btn:hover { border-color: var(--amp-yellow); transform: translateY(-2px); }
.amp .social-btn__icon { font-size: 28px; }
.amp .social-accounts-list { display: flex; flex-direction: column; gap: 12px; }
.amp .social-account-row { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 14px 16px; }
.amp .social-account-row__icon { font-size: 22px; width: 36px; text-align: center; flex-shrink: 0; }
.amp .social-account-row__info { flex: 1; }
.amp .social-account-row__name { font-weight: 600; font-size: 14px; }
.amp .social-account-row__username { font-size: 12px; color: var(--fg-2); font-family: var(--font-mono); }
.amp .social-account-row__status { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 700; letter-spacing: .04em; }
.amp .social-account-row__status--ok      { background: #d1fae5; color: #065f46; }
.amp .social-account-row__status--expired { background: #fee2e2; color: #991b1b; }
.amp .social-account-row__actions { display: flex; gap: 6px; }
.amp .social-section__head { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); margin: 24px 0 10px; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════
   APPROVALS
   ═══════════════════════════════════════════════════════════ */
.amp .approval-list { display: flex; flex-direction: column; gap: 16px; }
.amp .approval-card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 20px; }
.amp .approval-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.amp .approval-card__meta { flex: 1; }
.amp .approval-card__platform { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); font-family: var(--font-mono); }
.amp .approval-card__headline { font-size: 16px; font-weight: 700; margin: 4px 0; }
.amp .approval-card__submitter { font-size: 12px; color: var(--fg-2); }
.amp .approval-card__body { font-size: 14px; color: var(--fg-2); margin: 0 0 16px; line-height: 1.6; }
.amp .approval-card__actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.amp .approval-card__note { flex: 1; min-width: 200px; }
.amp .approval-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .04em; }
.amp .approval-badge--in_review { background: #fef3c7; color: #92400e; }
.amp .approval-badge--approved  { background: #d1fae5; color: #065f46; }
.amp .approval-badge--rejected  { background: #fee2e2; color: #991b1b; }
.amp .btn.success { background: #2BD66B; color: var(--amp-ink); }
.amp .btn.success:hover { background: #22c55e; }

/* ═══════════════════════════════════════════════════════════
   INVITATIONS / TEAM
   ═══════════════════════════════════════════════════════════ */
.amp .team-invite-form { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 24px; margin-bottom: 32px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.amp .team-invite-form .form-field { flex: 1; min-width: 180px; margin: 0; }
.amp .invite-list { display: flex; flex-direction: column; gap: 10px; }
.amp .invite-row { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 12px 16px; }
.amp .invite-row__email { flex: 1; font-size: 14px; }
.amp .invite-row__role { font-size: 11px; font-family: var(--font-mono); color: var(--fg-3); }
.amp .invite-row__status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.amp .invite-row__status--pending  { background: #fef3c7; color: #92400e; }
.amp .invite-row__status--accepted { background: #d1fae5; color: #065f46; }
.amp .invite-row__status--expired  { background: #f3f4f6; color: #6b7280; }

/* ═══════════════════════════════════════════════════════════
   POST VERSIONS (per-platform tabs)
   ═══════════════════════════════════════════════════════════ */
.amp .pv-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.amp .pv-tab { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-1); background: var(--bg-2); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.amp .pv-tab--active { background: var(--amp-ink); color: var(--amp-paper); border-color: var(--amp-ink); }
.amp .pv-panel { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 20px; }
.amp .pv-panel__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; font-family: var(--font-mono); }
.amp .dash-nav__links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.amp .dash-nav__links .btn.active { background: var(--bg-3); }

/* ═══════════════════════════════════════════════════════════
   LANDING — FEATURES BENTO  (redesigned)
   ═══════════════════════════════════════════════════════════ */
#features { padding: 100px 0; background: var(--amp-paper); }

/* Hero header */
.features-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; align-items: end; margin-bottom: 56px; }
@media (max-width: 700px) { .features-hero { grid-template-columns: 1fr; gap: 20px; } }
.features-hero__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); color: var(--fg-3); display: block; margin-bottom: 14px; }
.features-hero__eyebrow .num { background: var(--amp-ink); color: var(--amp-paper); padding: 2px 6px; font-weight: 700; }
.features-hero__title { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 0; color: var(--amp-ink); }
@media (max-width: 900px) { .features-hero__title { font-size: 32px; } }
.features-hero__sub { align-self: center; }
.fh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fh-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 1.5px solid rgba(11,11,12,.07); border-radius: 12px; transition: box-shadow .15s, transform .15s; }
.fh-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11,11,12,.06); }
.fh-card__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.fh-card__label { font-size: 13px; font-weight: 700; color: var(--fg-1); display: block; margin-bottom: 2px; line-height: 1.3; }
.fh-card__desc { font-size: 11px; color: var(--fg-3); margin: 0; line-height: 1.4; }

/* Bento grid */
.features-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .features-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features-bento { grid-template-columns: 1fr; } }

.features-tile {
  background: #fff;
  border: 1.5px solid rgba(11,11,12,.07);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.features-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 48px rgba(11,11,12,.07); }
.features-tile--wide { grid-column: span 2; }
@media (max-width: 600px) { .features-tile--wide { grid-column: span 1; } }

.features-tile__tag { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-mono); }
.features-tile__title { font-size: 17px; font-weight: 800; line-height: 1.22; margin: 0; letter-spacing: -0.02em; color: var(--amp-ink); }
.features-tile__body { font-size: 13px; color: var(--fg-2); line-height: 1.6; margin: 0; }

/* ── Tile 1: Social Publishing (dark, wide) ── */
.features-tile--dark { background: var(--amp-ink); color: var(--amp-paper); border-color: var(--amp-ink); }
.features-tile--dark .features-tile__tag  { color: rgba(246,242,234,.4); }
.features-tile--dark .features-tile__title { color: var(--amp-paper); }
.features-tile--dark .features-tile__body { color: rgba(246,242,234,.65); }
.features-tile--dark:hover { box-shadow: 0 14px 48px rgba(11,11,12,.28); }

.features-tile--social { flex-direction: row; align-items: center; gap: 36px; }
@media (max-width: 700px) { .features-tile--social { flex-direction: column; align-items: flex-start; gap: 24px; } }
.ft-social-content { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.features-tile--social .features-tile__title { font-size: 22px; line-height: 1.15; }

.ft-platforms-grid { display: grid; grid-template-columns: repeat(4, 40px); gap: 8px; flex-shrink: 0; }
.ft-platform {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
  transition: transform .15s ease;
}
.ft-platform:hover { transform: scale(1.12); }
.ft-platform--ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; }
.ft-platform--x  { background: #000; color: #fff; }
.ft-platform--li { background: #0077b5; color: #fff; }
.ft-platform--fb { background: #1877f2; color: #fff; }
.ft-platform--tk { background: #010101; color: #fff; outline: 1px solid rgba(255,255,255,.2); }
.ft-platform--yt { background: #ff0000; color: #fff; }
.ft-platform--th { background: #000; color: #fff; }
.ft-platform--ms { background: #563acc; color: #fff; font-size: 16px; }
.ft-platform--bs { background: #0085ff; color: #fff; }
.ft-platform--gb { background: #4285f4; color: #fff; }
.ft-platform--pt { background: #e60023; color: #fff; }

/* ── Tile 2: Calendar ── */
.features-tile--calendar { background: #f9f8f5; }
.ft-cal2__head { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 5px; }
.ft-cal2__head span { font-size: 9px; font-weight: 700; color: var(--fg-3); text-align: center; font-family: var(--font-mono); padding: 2px 0; }
.ft-cal2__body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ft-cal2__body span { height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-mono); color: var(--fg-3); background: #fff; border: 1px solid rgba(11,11,12,.08); }
.ft-cal2__d { color: var(--fg-1) !important; font-weight: 600; position: relative; }
.ft-cal2__d--today { background: var(--amp-ink); color: var(--amp-paper) !important; font-weight: 700; border-radius: 50%; }
.ft-cal2__d--dot::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--dc, #c50bac); }
.ft-cal2__legend { font-size: 9px; font-family: var(--font-mono); color: var(--fg-3); margin: 10px 0 0; display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.ft-cal2__legend span { color: var(--lc); font-size: 10px; }

/* ── Tile 3: Media Library ── */
.ft-media2 { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ft-media2__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg); border: 1px solid rgba(11,11,12,.06); }
.ft-media2__icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.ft-media2__name { font-size: 11px; font-family: var(--font-mono); color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ft-media2__meta { font-size: 9px; font-family: var(--font-mono); color: var(--fg-3); flex-shrink: 0; }

/* ── Tile 4: Hashtag Groups ── */
.ft-hg-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.ft-hg-group { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg-2); border-radius: 8px; }
.ft-hg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ft-hg-name { font-size: 12px; font-weight: 600; color: var(--fg-1); flex: 1; }
.ft-hg-count { font-size: 9px; font-family: var(--font-mono); color: var(--fg-3); }
.ft-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ft-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }

/* ── Tile 5: Approval Workflow (wide) ── */
.features-tile--approvals { background: linear-gradient(150deg, #fafaf8 0%, #f0ede7 100%); }
.ft-approval2 { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.ft-approval2__track { display: flex; align-items: center; gap: 0; overflow-x: auto; padding-bottom: 2px; }
.ft-approval2__step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.ft-approval2__step span { font-size: 10px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.ft-approval2__dot { width: 14px; height: 14px; border-radius: 50%; background: #e5e7eb; border: 2px solid #d1d5db; transition: transform .2s; }
.ft-approval2__step--done .ft-approval2__dot  { background: #2BD66B; border-color: #2BD66B; }
.ft-approval2__step--done  span { color: var(--fg-1); }
.ft-approval2__step--active .ft-approval2__dot { background: var(--amp-yellow); border-color: var(--amp-ink); animation: pulse-dot 1.8s ease-in-out infinite; }
.ft-approval2__step--active span { color: var(--amp-ink); font-weight: 700; }
.ft-approval2__line { flex: 1; height: 2px; background: #e5e7eb; min-width: 18px; max-width: 48px; }
.ft-approval2__line--done   { background: #2BD66B; }
.ft-approval2__line--active { background: linear-gradient(90deg, #2BD66B 0%, var(--amp-yellow) 100%); }
.ft-approval2__card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 12px; border: 1px solid rgba(11,11,12,.07); box-shadow: 0 2px 12px rgba(11,11,12,.05); }
.ft-approval2__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--amp-ink); color: var(--amp-paper); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.ft-approval2__msg { font-size: 12px; line-height: 1.55; color: var(--fg-2); }
.ft-approval2__msg strong { color: var(--fg-1); font-weight: 700; }
.ft-approval2__role { font-size: 10px; color: var(--fg-3); }
.ft-approval2__note { font-style: italic; color: var(--fg-3); }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.8} }

/* ── Tile 6: Team ── */
.ft-team-avatars { display: flex; margin-top: 10px; }
.ft-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: calc(var(--i, 0) * -12px); border: 2.5px solid #fff; position: relative; z-index: calc(4 - var(--i, 0)); letter-spacing: .02em; }
.ft-avatar--more { background: var(--bg-2) !important; color: var(--fg-3) !important; font-size: 11px; }
.ft-team-roles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ft-role { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 12px; letter-spacing: .03em; }
.ft-role--admin    { background: var(--amp-ink); color: var(--amp-paper); }
.ft-role--reviewer { background: #ede9fe; color: #6366f1; }
.ft-role--member   { background: #f3f4f6; color: #6b7280; }

/* ── Tile 7: Per-platform versions ── */
.ft-versions-tabs { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.ft-vtab { font-size: 10px; font-weight: 700; padding: 5px 12px; border-radius: 16px; background: #f3f4f6; color: var(--fg-2); cursor: pointer; border: 1.5px solid transparent; transition: background .14s, color .14s, border-color .14s; display: flex; align-items: center; gap: 5px; }
.ft-vtab:hover { background: #e9e7e3; color: var(--fg-1); }
.ft-vtab--active { background: var(--amp-ink); color: var(--amp-paper); border-color: var(--amp-ink); }
.ft-vtab__icon { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.ft-vtab__icon--ig { background: linear-gradient(135deg,#f09433,#dc2743,#bc1888); }
.ft-vtab__icon--li { background: #0077b5; }
.ft-vtab__icon--x  { background: #000; }
.ft-versions-preview { background: #f9f8f5; border-radius: 10px; padding: 12px 14px; border: 1px solid rgba(11,11,12,.06); flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ft-versions-meta { display: flex; align-items: center; justify-content: space-between; }
.ft-versions-platform { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); }
.ft-versions-platform--ig { background: linear-gradient(135deg,#f0943322,#bc188822); color: #bc1888; }
.ft-versions-platform--li { background: #0077b515; color: #0077b5; }
.ft-versions-platform--x  { background: #00000010; color: #000; }
.ft-versions-chars { font-size: 9px; font-family: var(--font-mono); color: var(--fg-3); }
.ft-versions-text { font-size: 12px; color: var(--fg-1); line-height: 1.6; margin: 0; }
.ft-versions-hashtags { color: #c50bac; font-weight: 600; }



/* ═══════════════════════════════════════════════════════════════════════
 * Open Design suite — design systems, skills, studio, automation, plugins
 * Neo-brutalist editorial language, scoped to .amp (marketing layout body).
 * ═══════════════════════════════════════════════════════════════════════ */

.amp .od-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 32px 120px;
}
.amp .od-detail { max-width: 1080px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.amp .od-hero { margin-bottom: 40px; }
.amp .od-hero--compact { margin-bottom: 28px; }
.amp .od-hero__title {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: var(--lh-h);
  letter-spacing: var(--track-h);
  font-weight: 800;
  margin: 14px 0 14px;
  max-width: 22ch;
}
.amp .od-hero__sub {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 70ch;
}
.amp .od-hero__sub code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--amp-paper-2);
  padding: 1px 6px;
  border-radius: 5px;
}
.amp .od-hero__active {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--amp-ink);
  color: var(--amp-paper);
  font-size: 13px;
}

/* ── Search + filters ─────────────────────────────────────────────────── */
.amp .od-search { display: flex; gap: 10px; margin-top: 22px; max-width: 560px; }
.amp .od-search__input {
  flex: 1;
  padding: 11px 16px;
  border: 2px solid var(--amp-ink);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  background: var(--amp-cream);
}
.amp .od-search__input:focus { outline: none; box-shadow: 3px 3px 0 var(--org-accent, var(--amp-red)); }

.amp .od-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; align-items: center; }
.amp .od-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid var(--border-1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  background: transparent;
  transition: all .12s ease;
}
.amp .od-chip:hover { border-color: var(--amp-ink); color: var(--amp-ink); }
.amp .od-chip--active { background: var(--amp-ink); color: var(--amp-paper); border-color: var(--amp-ink); }
.amp .od-chip--static { cursor: default; font-family: var(--font-mono); font-weight: 500; }
.amp .od-chip--static:hover { border-color: var(--border-1); color: var(--fg-2); }

/* ── Grid + cards ─────────────────────────────────────────────────────── */
.amp .od-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.amp .od-grid--craft { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.amp .od-grid--artifacts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.amp .od-card {
  display: block;
  padding: 22px;
  border: 2px solid var(--amp-ink);
  border-radius: 16px;
  background: var(--amp-cream);
  text-decoration: none;
  color: var(--amp-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.amp .od-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--amp-ink); }
.amp .od-card--adopted { background: var(--amp-yellow-200); }
.amp .od-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.amp .od-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.amp .od-card__title a { text-decoration: none; color: inherit; }
.amp .od-card__emoji { margin-right: 4px; }
.amp .od-card__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--org-accent, var(--amp-red));
}
.amp .od-card__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.amp .od-card__hint {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--fg-3);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  padding: 1px 7px;
}
.amp .od-card__hint--official { color: var(--amp-blue); border-color: var(--amp-blue-200); }
.amp .od-card__hint--community { color: var(--fg-2); }
.amp .od-card__desc { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin-top: 10px; }
.amp .od-card__desc code { font-family: var(--font-mono); font-size: 12px; }
.amp .od-card__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.amp .od-card__badge--active { background: var(--amp-ink); color: var(--amp-paper); }
.amp .od-card__swatch { display: flex; gap: 0; margin-top: 16px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-1); }
.amp .od-card__swatch span { flex: 1; height: 26px; }

/* artifact cards w/ preview */
.amp .od-card--artifact { padding: 0; overflow: hidden; }
.amp .od-card__preview { display: block; height: 200px; background: var(--amp-paper-2); border-bottom: 2px solid var(--amp-ink); overflow: hidden; }
.amp .od-card__meta { padding: 16px 18px 18px; }
.amp .od-card__status {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-weight: 700; color: var(--fg-2);
}
.amp .od-card__status--failed { color: var(--amp-red-700); }

/* generating-state skeleton inside a gallery card preview */
.amp .od-card__skeleton { position: relative; height: 100%; width: 100%; overflow: hidden; }
.amp .od-card__skeleton-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}

.amp .od-empty { color: var(--fg-2); font-size: 16px; padding: 40px 0; }
.amp .od-empty a { color: var(--link); }

/* ── Detail pages ─────────────────────────────────────────────────────── */
.amp .od-breadcrumb { margin-bottom: 20px; }
.amp .od-breadcrumb__back { font-size: 14px; font-weight: 600; color: var(--fg-2); text-decoration: none; }
.amp .od-breadcrumb__back:hover { color: var(--amp-red); }
.amp .od-detail__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.amp .od-detail__title {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 800;
  letter-spacing: var(--track-h);
  line-height: 1.05;
  margin: 10px 0 8px;
}
.amp .od-detail__tagline { font-size: 18px; color: var(--fg-2); max-width: 60ch; }
.amp .od-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.amp .od-adopted-pill {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: var(--amp-yellow); color: var(--amp-ink); font-weight: 700; font-size: 14px;
}
.amp .od-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.amp .od-detail__aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; }
.amp .od-detail__section { margin: 22px 0; }
.amp .od-detail__subhead { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 10px; }

/* token swatches */
.amp .od-tokens { margin: 8px 0 30px; }
.amp .od-swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.amp .od-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.amp .od-swatch__chip { width: 52px; height: 52px; border-radius: 10px; border: 2px solid var(--amp-ink); }
.amp .od-swatch code { font-size: 10px; font-family: var(--font-mono); color: var(--fg-3); }

/* triggers */
.amp .od-triggers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 28px; }
.amp .od-triggers__label { font-size: 13px; color: var(--fg-3); font-weight: 600; }

/* ── Markdown prose ───────────────────────────────────────────────────── */
.amp .od-md { font-size: 15px; line-height: 1.65; color: var(--fg-1); }
.amp .od-md--narrow { max-width: 78ch; }
.amp .od-md h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 34px 0 12px; }
.amp .od-md h3 { font-size: 19px; font-weight: 700; margin: 26px 0 10px; }
.amp .od-md h4 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--fg-2); }
.amp .od-md p { margin: 12px 0; }
.amp .od-md ul, .amp .od-md ol { margin: 12px 0 12px 22px; }
.amp .od-md li { margin: 5px 0; }
.amp .od-md ul li { list-style: disc; }
.amp .od-md ol li { list-style: decimal; }
.amp .od-md a { color: var(--link); }
.amp .od-md code { font-family: var(--font-mono); font-size: 13px; background: var(--amp-paper-2); padding: 1px 6px; border-radius: 5px; }
.amp .od-md blockquote {
  border-left: 3px solid var(--org-accent, var(--amp-red));
  padding: 4px 0 4px 16px; margin: 16px 0; color: var(--fg-2); font-style: italic;
}
.amp .od-md hr { border: none; border-top: 1.5px solid var(--border-1); margin: 28px 0; }
.amp .od-md-pre {
  background: var(--amp-ink); color: #E8E6E1; border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.55;
  font-family: var(--font-mono); margin: 14px 0;
}
.amp .od-md-pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.amp .od-md-table { overflow-x: auto; margin: 16px 0; }
.amp .od-md-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.amp .od-md-table th, .amp .od-md-table td { border: 1px solid var(--border-1); padding: 8px 12px; text-align: left; }
.amp .od-md-table th { background: var(--amp-paper-2); font-weight: 700; }

/* disclosure */
.amp .od-disclosure { border: 1.5px solid var(--border-1); border-radius: 12px; overflow: hidden; background: var(--amp-cream); }
.amp .od-disclosure summary { padding: 12px 16px; font-weight: 700; cursor: pointer; font-size: 14px; }
.amp .od-disclosure[open] summary { border-bottom: 1.5px solid var(--border-1); }
.amp .od-disclosure .od-md-pre { margin: 0; border-radius: 0; max-height: 360px; }
.amp .od-disclosure .od-preview-frame { border: none; border-radius: 0; }

/* ── Sandboxed previews ───────────────────────────────────────────────── */
.amp .od-preview-frame { width: 100%; border: 0; background: #fff; display: block; }
.amp .od-preview-frame--tall { height: 480px; }
.amp .od-preview-frame--thumb {
  height: 760px; width: 380%;
  transform: scale(0.263); transform-origin: top left; pointer-events: none;
}
.amp .od-preview-frame--stage { height: 78vh; min-height: 560px; }

.amp .od-stage { border: 2px solid var(--amp-ink); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--amp-ink); }
.amp .od-stage--message {
  display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  min-height: 320px; color: var(--fg-2); background: var(--amp-cream); box-shadow: none;
}
.amp .od-error-detail { font-family: var(--font-mono); font-size: 12px; color: var(--amp-red-700); }
.amp .od-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid var(--border-1); border-top-color: var(--org-accent, var(--amp-red));
  animation: od-spin 0.8s linear infinite;
}
@keyframes od-spin { to { transform: rotate(360deg); } }

/* ── Forms ────────────────────────────────────────────────────────────── */
.amp .od-form { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.amp .od-field { display: flex; flex-direction: column; gap: 7px; }
.amp .od-field__label { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.amp .od-field__input {
  padding: 11px 14px; border: 2px solid var(--amp-ink); border-radius: 12px;
  font: inherit; font-size: 15px; background: var(--amp-cream); width: 100%;
}
.amp .od-field__input:focus { outline: none; box-shadow: 3px 3px 0 var(--org-accent, var(--amp-red)); }
.amp .od-field__textarea { resize: vertical; line-height: 1.5; }
.amp .od-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.amp .od-form__actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.amp .od-form__errors {
  border: 2px solid var(--amp-red); background: var(--amp-red-200); color: var(--amp-red-700);
  border-radius: 12px; padding: 12px 16px; font-size: 14px;
}
.amp .od-form__errors p { margin: 2px 0; }

/* ── Tables (automations) ─────────────────────────────────────────────── */
.amp .od-table-card { border: 2px solid var(--amp-ink); border-radius: 16px; overflow: hidden; background: var(--amp-cream); }
.amp .od-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.amp .od-list-table th {
  text-align: left; padding: 12px 16px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-3); background: var(--amp-paper-2); border-bottom: 2px solid var(--amp-ink);
}
.amp .od-list-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-1); vertical-align: middle; }
.amp .od-list-table tr:last-child td { border-bottom: none; }
.amp .od-list-table__muted { color: var(--fg-2); }
.amp .od-list-table__actions { display: flex; gap: 8px; justify-content: flex-end; }
.amp .btn--sm { padding: 6px 12px !important; font-size: 13px !important; }

/* ── Nav separator ────────────────────────────────────────────────────── */
.amp .dash-nav__sep { width: 1px; height: 20px; background: var(--border-1); margin: 0 4px; display: inline-block; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .amp .od-detail__cols { grid-template-columns: 1fr; }
  .amp .od-detail__aside { position: static; }
}
@media (max-width: 640px) {
  .amp .od-main { padding: 80px 18px 80px; }
  .amp .od-detail__head { flex-direction: column; }
  .amp .od-preview-frame--stage { height: 60vh; }
  .amp .od-list-table { font-size: 12px; }
  .amp .od-list-table th:nth-child(2), .amp .od-list-table td:nth-child(2) { display: none; }
}

/* ── Open Design suite v2 — kinds, exports, critique, authoring ───────────── */
.amp .od-section { margin: 8px 0 30px; }
.amp .od-section .section-head__eyebrow { display: inline-block; margin-bottom: 14px; }

/* export dropdown */
.amp .od-export { position: relative; display: inline-block; }
.amp .od-export > summary { list-style: none; cursor: pointer; }
.amp .od-export > summary::-webkit-details-marker { display: none; }
.amp .od-export__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--amp-cream); border: 2px solid var(--amp-ink); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--amp-ink); min-width: 180px; overflow: hidden;
}
.amp .od-export__item { display: block; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--amp-ink); text-decoration: none; }
.amp .od-export__item:hover { background: var(--amp-yellow-200); }

/* critique block */
.amp .od-critique { border-color: var(--org-accent, var(--amp-red)); }
.amp .od-critique > summary { color: var(--org-accent, var(--amp-red)); }
.amp .od-critique .od-md { padding: 16px 18px; }

/* authoring form niceties */
.amp .od-field--mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.amp .od-field__hint { font-size: 12px; color: var(--fg-3); }
.amp .od-field__hint code { font-family: var(--font-mono); }

/* =========================================================
   RailsBlocks — Toast animations
   Drives the Sonner-style stacking the toast Stimulus controller relies on.
   (These selectors are global on purpose: the controller injects
   .toast-item <li> elements at runtime, outside Tailwind's content scan.)
   ========================================================= */
/* Pin the toast stack to a readable width at the top-right, independent of
   Tailwind responsive utilities (this build doesn't emit `sm:` variants, so the
   partial's `sm:w-auto` never applies and `w-full` would stretch it edge-to-edge). */
[data-controller~="toast"] {
  left: auto;
  right: 1rem;
  width: min(360px, calc(100vw - 2rem));
}

.toast-item {
  position: absolute;
  left: 0;
  right: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--toast-z-index, 0);
}
.toast-item[data-mounted="false"] { opacity: 0; }
.toast-item[data-mounted="false"][data-position^="top"] { transform: translateY(-100%); }
.toast-item[data-mounted="false"][data-position^="bottom"] { transform: translateY(100%); }
.toast-item[data-mounted="true"] { opacity: 1; }
.toast-item[data-removed="true"] { opacity: 0; pointer-events: none; }
.toast-item[data-removed="true"][data-position^="top"] { transform: translateY(-100%); }
.toast-item[data-removed="true"][data-position^="bottom"] { transform: translateY(100%); }
.toast-item[data-expanded="false"][data-visible="true"] {
  transform: translateY(calc(var(--toast-index, 0) * 8px)) scale(calc(1 - var(--toast-index, 0) * 0.05));
}
.toast-item[data-expanded="false"][data-visible="false"] {
  opacity: 0;
  transform: translateY(calc(var(--toast-index, 0) * 8px)) scale(0.9);
}
.toast-item[data-expanded="true"][data-position^="top"] { transform: translateY(var(--toast-offset, 0)); }
.toast-item[data-expanded="true"][data-position^="bottom"] { transform: translateY(calc(var(--toast-offset, 0) * -1)); }
.toast-item[data-expanded="false"] > span { height: var(--front-toast-height, auto); overflow: hidden; }
.toast-item[data-expanded="false"][data-front="true"] > span,
.toast-item[data-expanded="true"] > span { height: auto; overflow: visible; }
.toast-item[data-expanded="false"][data-front="false"] > span > div { opacity: 0; }
.toast-item[data-expanded="false"][data-front="true"] > span > div,
.toast-item[data-expanded="true"] > span > div { opacity: 1; }

/* =========================================================
   Tenant top-nav — responsive collapse (hamburger ≤1024px)
   The 13-item nav can't fit a phone/tablet row, so below 1024px it
   collapses behind a hamburger that drops a stacked panel. On desktop the
   wrapper is `display:contents`, leaving the original flex layout untouched.
   ========================================================= */
.amp .dash-nav__burger { display: none; }
.amp .dash-nav__collapse { display: contents; }

/* ── Desktop: each section is a grouped dropdown ──
   The label is the trigger; its links reveal on hover/focus. Turns 15 flat
   links into three tidy menus. (Mobile overrides below expand them in place.) */
.amp .dash-nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.amp .dash-nav__group { position: relative; }
.amp .dash-nav__group-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  color: var(--amp-ink); padding: 9px 14px; border-radius: var(--radius-2);
  border: 1.5px solid transparent; cursor: pointer; user-select: none; white-space: nowrap;
}
.amp .dash-nav__group-label::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .15s var(--ease-out);
}
.amp .dash-nav__group:has(.active) .dash-nav__group-label { background: var(--bg-3); }
.amp .dash-nav__group:hover .dash-nav__group-label,
.amp .dash-nav__group:focus-within .dash-nav__group-label { color: var(--amp-red); }
.amp .dash-nav__group:hover .dash-nav__group-label::after,
.amp .dash-nav__group:focus-within .dash-nav__group-label::after { transform: rotate(225deg); margin-top: 2px; }

.amp .dash-nav__group-items {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 212px; padding: 8px;
  background: var(--bg-1); border: 1.5px solid var(--amp-ink); border-radius: var(--radius-2);
  box-shadow: 4px 4px 0 var(--amp-ink);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .14s var(--ease-out), transform .14s var(--ease-out), visibility .14s;
}
/* invisible bridge so the cursor can cross into the menu without it closing */
.amp .dash-nav__group-items::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.amp .dash-nav__group:hover .dash-nav__group-items,
.amp .dash-nav__group:focus-within .dash-nav__group-items { opacity: 1; visibility: visible; transform: none; }
.amp .dash-nav__group-items .btn { width: 100%; justify-content: flex-start; text-align: left; white-space: nowrap; }
.amp .dash-nav__sep { display: none; } /* groups replace the inline separator */

@media (max-width: 1024px) {
  .amp .dash-nav { flex-wrap: nowrap; gap: 12px; }

  .amp .dash-nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 42px; height: 42px; flex-shrink: 0; margin-left: auto; padding: 0;
    background: var(--bg-3); border: 1.5px solid var(--amp-ink); border-radius: 8px;
    cursor: pointer; transition: box-shadow .12s var(--ease-out);
  }
  .amp .dash-nav__burger:hover { box-shadow: 2px 2px 0 var(--amp-ink); }
  .amp .dash-nav__burger-bar {
    display: block; width: 18px; height: 2.5px; background: var(--amp-ink); border-radius: 2px;
    transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
  }
  .amp .dash-nav--open .dash-nav__burger-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .amp .dash-nav--open .dash-nav__burger-bar:nth-child(2) { opacity: 0; }
  .amp .dash-nav--open .dash-nav__burger-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .amp .dash-nav__collapse {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-1); border-bottom: 2px solid var(--amp-ink);
    box-shadow: 0 8px 0 -2px var(--amp-ink), 0 12px 26px rgba(11, 11, 12, 0.14);
    padding: 8px; max-height: calc(100vh - 56px); overflow-y: auto;
  }
  .amp .dash-nav--open .dash-nav__collapse { display: flex; }

  /* Stack the labeled sections; each section header + a compact 2-column grid.
     (Resets the desktop dropdown positioning so items show in place.) */
  .amp .dash-nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%;
  }
  .amp .dash-nav__group { display: block; position: static; width: 100%; }
  .amp .dash-nav__group-label {
    display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
    padding: 0 4px 6px; cursor: default;
  }
  .amp .dash-nav__group-label::after { display: none; } /* no chevron in the expanded panel */
  .amp .dash-nav__group:has(.active) .dash-nav__group-label { background: none; } /* labels are plain headers here */
  .amp .dash-nav__group:hover .dash-nav__group-label,
  .amp .dash-nav__group:focus-within .dash-nav__group-label { color: var(--fg-3); }
  .amp .dash-nav__group-items {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    min-width: 0; padding: 0; background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .amp .dash-nav__group-items::before { display: none; }
  .amp .dash-nav__links .btn {
    width: 100%; justify-content: flex-start; text-align: left;
    padding: 7px 11px; font-size: 13px;
  }
  .amp .dash-nav__pro-link { grid-column: 1 / -1; } /* Pro spans the row as a section accent */
  .amp .dash-nav__sep { display: none; }

  .amp .dash-nav__right {
    width: 100%; margin-left: 0; gap: 6px; flex-wrap: wrap;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-1);
  }
  .amp .dash-nav--open .dash-nav__right .dash-nav__user {
    display: inline-flex; align-items: center; width: 100%;
    font-size: 11px; margin-bottom: 2px;
  }
  .amp .dash-nav__right form.button_to, .amp .dash-nav__right > .btn { flex: 1; }
  .amp .dash-nav__right .btn { padding: 7px 11px; font-size: 13px; }
}

/* ── In-product AI concierge (floating launcher) ───────────────────────── */
.amp-assistant { position: fixed; right: 22px; bottom: 22px; z-index: 1000; font-family: system-ui, -apple-system, sans-serif; }
.amp-assistant__fab {
  width: 56px; height: 56px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--org-accent, #c50bac); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s ease, box-shadow .15s ease;
}
.amp-assistant__fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.amp-assistant__panel {
  position: absolute; right: 0; bottom: 70px; width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px)); background: #fff; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.amp-assistant__head {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  background: var(--org-accent, #c50bac); color: #fff; font-size: 14px;
}
.amp-assistant__title strong { font-weight: 800; }
.amp-assistant__close { background: none; border: none; color: #fff; font-size: 15px; cursor: pointer; opacity: .85; }
.amp-assistant__close:hover { opacity: 1; }
.amp-assistant__body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.amp-assistant__messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #faf8f5; }
.amp-msg { display: flex; }
.amp-msg--user { justify-content: flex-end; }
.amp-msg--assistant { justify-content: flex-start; }
.amp-msg__bubble {
  max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
  white-space: normal;
}
.amp-msg__bubble p { margin: 0 0 6px; } .amp-msg__bubble p:last-child { margin-bottom: 0; }
.amp-msg--assistant .amp-msg__bubble { background: #fff; color: #1a1a1a; border: 1px solid rgba(0,0,0,.07); border-bottom-left-radius: 4px; }
.amp-msg--user .amp-msg__bubble { background: var(--org-accent, #c50bac); color: #fff; border-bottom-right-radius: 4px; }
.amp-assistant__composer { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid rgba(0,0,0,.07); background: #fff; }
.amp-assistant__composer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amp-assistant__hint { font-size: 10.5px; color: rgba(0,0,0,.4); }
/* Compact Lexxy editor for the chat (light theme — matches the panel). */
.amp-assistant__lexxy {
  --lexxy-editor-rows: 2lh;
  --lexxy-radius: 14px;
  --lexxy-focus-ring-color: var(--org-accent, #c50bac);
  --lexxy-color-link: var(--org-accent, #c50bac);
  display: block; width: 100%;
  border: 1px solid rgba(0,0,0,.14); border-radius: 14px;
  font-size: 13.5px; background: #fff;
}
.amp-assistant__lexxy:focus-within { border-color: var(--org-accent, #c50bac); }
.amp-msg__files { margin-top: 6px; }
.amp-msg__files img { max-width: 100%; border-radius: 8px; display: block; }
.amp-assistant__send {
  border: none; cursor: pointer; width: 40px; height: 34px; border-radius: 999px; background: var(--org-accent, #c50bac);
  color: #fff; font-size: 17px; font-weight: 700; flex: 0 0 auto;
}
@media (max-width: 480px) { .amp-assistant { right: 14px; bottom: 14px; } }

/* ── AI-first onboarding ───────────────────────────────────────────────── */
/* Magic box (entry) */
.onb-enter { max-width: 720px; margin: 0 auto; }
.onb-magic { margin-top: 8px; }
.onb-magic__input {
  width: 100%; border: 1.5px solid rgba(0,0,0,.14); border-radius: 16px; padding: 18px;
  font-size: 16px; line-height: 1.5; resize: vertical; outline: none; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.onb-magic__input:focus { border-color: var(--org-accent, #c50bac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--org-accent, #c50bac) 14%, transparent); }
/* Lexxy magic box — same prominent look as the textarea, with inline uploads. */
.onb-magic__lexxy {
  --lexxy-editor-rows: 3lh;
  --lexxy-radius: 16px;
  --lexxy-focus-ring-color: var(--org-accent, #c50bac);
  --lexxy-color-link: var(--org-accent, #c50bac);
  display: block; width: 100%; background: #fff;
  border: 1.5px solid rgba(0,0,0,.14); border-radius: 16px;
  font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.onb-magic__lexxy:focus-within { border-color: var(--org-accent, #c50bac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--org-accent, #c50bac) 14%, transparent); }
.onb-magic__row { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.onb-magic__cta { font-size: 15px; padding: 13px 22px; }
.onb-magic__hint { font-size: 13px; color: #6b6b6b; }
.onb-manual-toggle { margin-top: 22px; background: none; border: none; color: #6b6b6b; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.onb-manual-toggle:hover { color: var(--org-accent, #c50bac); }
.onb-manual-note { margin: 18px 0; color: #6b6b6b; font-size: 14px; }
.onb-error { margin: 14px 0; padding: 12px 16px; border-radius: 12px; background: #FFF1F0; border: 1px solid #FFCCC7; color: #A8071A; font-size: 13.5px; }

/* Analyzing screen */
.onb-analyze { max-width: 560px; margin: 40px auto; text-align: center; }
.onb-analyze__orb { position: relative; width: 96px; height: 96px; margin: 0 auto 28px; }
.onb-analyze__orb span {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--org-accent, #c50bac); animation: onb-spin 1.1s linear infinite;
}
.onb-analyze__orb span:nth-child(2) { inset: 12px; border-top-color: #FFD60A; animation-duration: 1.5s; animation-direction: reverse; }
.onb-analyze__orb span:nth-child(3) { inset: 24px; border-top-color: #2BD66B; animation-duration: .9s; }
@keyframes onb-spin { to { transform: rotate(360deg); } }
.onb-analyze__title { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 8px; }
.onb-analyze__sub { color: #6b6b6b; margin-bottom: 28px; }
.onb-analyze__steps { list-style: none; padding: 0; max-width: 340px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.onb-step { position: relative; padding-left: 30px; color: #b3b3b3; font-size: 14.5px; transition: color .3s ease; }
.onb-step::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #ddd; transition: all .3s ease;
}
.onb-step--active { color: #1a1a1a; font-weight: 600; }
.onb-step--active::before { border-color: var(--org-accent, #c50bac); animation: onb-pulse 1s ease infinite; }
.onb-step--done { color: #1a1a1a; }
.onb-step--done::before { border-color: #2BD66B; background: #2BD66B; }
.onb-step--done::after { content: "✓"; position: absolute; left: 4px; top: 0; color: #fff; font-size: 12px; font-weight: 900; }
@keyframes onb-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--org-accent,#c50bac) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* Review + celebration */
.onb-hero--done .dash-hero__title { font-size: clamp(30px, 5vw, 46px); }
.onb-hero__lead { margin-top: 14px; font-size: 16px; color: #4b4b4b; max-width: 60ch; line-height: 1.5; }
.onb-confirm { margin-top: 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.onb-confirm__cta { font-size: 16px; padding: 15px 28px; }
.onb-confirm__cta:hover { transform: translateY(-1px); }
.onb-confirm form { display: inline; }

/* Confetti */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.confetti-bit { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .onb-analyze__orb span, .onb-step--active::before { animation: none; }
}

/* =========================================================
   RailsBlocks rb-modal — center the dialog with a brand-styled
   backdrop (this Tailwind build omits the sm: width utilities, so
   the essentials are pinned here for deterministic placement).
   ========================================================= */
dialog[data-rb-modal-target="dialog"] {
  position: fixed; inset: 0; margin: auto;
  width: min(460px, calc(100vw - 2rem)); max-height: 88vh; overflow: auto;
  border: 1.5px solid var(--amp-ink); border-radius: 14px;
  background: var(--bg-1); color: var(--fg-1); padding: 22px;
  box-shadow: 8px 8px 0 var(--amp-ink);
}
dialog[data-rb-modal-target="dialog"]::backdrop { background: rgba(11, 11, 12, 0.45); }

/* design-systems filter: inline chips on desktop, a drawer on mobile */
@media (max-width: 700px) {
  .amp .od-filter--desktop { display: none; }
  .amp .od-filter--mobile { display: block !important; }
}

/* A closed <dialog> must stay hidden even when a utility class (e.g. `flex`)
   would otherwise force it visible — affects the command palette dialog. */
dialog[data-rb-modal-target="dialog"]:not([open]) { display: none !important; }

/* =========================================================
   RailsBlocks → Amplifica brand harmonization
   These neutral/white Tailwind utilities are used ONLY by the RailsBlocks
   component partials (verified: no app view uses them), so retargeting them
   inside .amp folds every component into the cream/ink editorial language
   instead of the default white/neutral look.
   ========================================================= */

/* Light surfaces → cream paper */
.amp .bg-white,
.amp .bg-neutral-50      { background-color: var(--bg-3) !important; }
.amp .bg-white\/90,
.amp .bg-neutral-100     { background-color: var(--bg-2) !important; }
.amp .bg-neutral-200     { background-color: var(--amp-line) !important; } /* skeletons / tracks */

/* Dark surfaces (toast, tooltip, active tab, dark buttons) → brand ink */
.amp .bg-neutral-700     { background-color: var(--amp-ink-2) !important; }
.amp .bg-neutral-800,
.amp .bg-neutral-900     { background-color: var(--amp-ink) !important; }

/* Borders → ink line */
.amp .border-neutral-200,
.amp .border-neutral-300,
.amp .border-black\/10,
.amp .border-black\/5    { border-color: var(--border-1) !important; }
.amp .border-neutral-600,
.amp .border-neutral-700 { border-color: var(--border-2) !important; }

/* Text on light surfaces → ink scale */
.amp .text-neutral-900,
.amp .text-neutral-800   { color: var(--fg-1) !important; }
.amp .text-neutral-700,
.amp .text-neutral-600   { color: var(--fg-2) !important; }
.amp .text-neutral-500,
.amp .text-neutral-400   { color: var(--fg-3) !important; }

/* Hover / focus tints → subtle cream */
.amp .hover\:bg-neutral-50:hover,
.amp .hover\:bg-neutral-100:hover,
.amp .focus\:bg-neutral-100:focus,
.amp .data-\[highlighted\]\:bg-neutral-100[data-highlighted] { background-color: var(--bg-2) !important; }

/* Tom Select (searchable dropdowns) — match the brand */
.amp .ts-control { background: var(--bg-3) !important; border-color: var(--amp-ink) !important; }
.amp .ts-dropdown {
  background: var(--bg-3) !important; border: 1.5px solid var(--amp-ink) !important;
  box-shadow: 4px 4px 0 var(--amp-ink) !important;
}
.amp .ts-dropdown .active { background: var(--amp-yellow-200) !important; color: var(--amp-ink) !important; }
.amp .ts-dropdown .optgroup-header { color: var(--fg-3) !important; background: transparent !important; font-family: var(--font-mono); font-size: 11px; }

/* Floating surfaces (menus / popovers) need a strong ink edge + print shadow
   to stand out now that they're cream-on-cream. */
.amp dialog[data-dropdown-popover-target="menu"],
.amp [data-popover-target="content"],
.amp [data-controller~="popover"] [role="tooltip"] {
  border: 1.5px solid var(--amp-ink) !important;
  box-shadow: 4px 4px 0 var(--amp-ink) !important;
  border-radius: 10px !important;
}
/* Active/segmented controls (tabs) — ink pill, cream track */
.amp [data-rb-tabs-target="tabList"] { background: var(--bg-2) !important; }

/* Slideover / drawer <dialog> panels live in the top layer (portaled), so they
   need direct targeting — cream panel with a strong ink edge. */
dialog[data-slideover-target="dialog"] {
  background: var(--bg-3) !important; color: var(--fg-1) !important;
  border-left: 1.5px solid var(--amp-ink) !important;
}
dialog[data-drawer-target="dialog"] {
  background: var(--bg-3) !important; color: var(--fg-1) !important;
  border-top: 1.5px solid var(--amp-ink) !important;
}
dialog[data-slideover-target="dialog"]::backdrop,
dialog[data-drawer-target="dialog"]::backdrop { background: rgba(11, 11, 12, 0.45) !important; }