/*
 * BirthdayPartyPal brand 2026: "the calm, premium host" (docs/brand/BRAND-2026.md, live page /brand/).
 *
 * The brand chrome gets grown-up; the themes keep every bit of their playfulness. This file only
 * styles brand chrome: tokens, type, logo lockup, header, footer, buttons, eyebrows, page canvas and
 * textures. It never touches invite or theme art (.inv-*, [data-theme], theme cards' art, critters
 * inside the product).
 *
 * Loaded after brand.css by the shared marketing head (public/_partials/mk-head.html), sign-in and
 * the favor shop shell. Removing this one <link> restores the pre-2026 look exactly: that is the
 * `control` arm of the `brand_look` experiment (src/features/experiments/landing.js).
 *
 * ---- What other lanes adopt (use the token, never the hex) -------------------------------------
 *   Color      --b26-ink, --b26-ink-2, --b26-ink-3, --b26-linen (canvas), --b26-paper (cards),
 *              --b26-stone (tint sections), --b26-line, --b26-line-2, --b26-night (dark sections),
 *              --b26-accent (Balloon: CTAs, links, one serif phrase), --b26-accent-hover,
 *              --b26-accent-soft (selection, focus wash), --b26-accent-on-dark (#FF9CB6)
 *   Type       --b26-f-display / --b26-f-body (Instrument Sans), --b26-f-serif (Instrument Serif),
 *              --b26-fs-display, --b26-fs-h2, --b26-fs-h3, --b26-fs-lede, --b26-fs-body, --b26-fs-fine,
 *              --b26-w-display (600), --b26-track-display (-0.032em), --b26-track-h2
 *   Shape      --b26-r-sm 10px, --b26-r-md 16px, --b26-r-lg 24px, --b26-r-pill
 *   Depth      --b26-sh-1, --b26-sh-2, --b26-sh-3 (neutral, warm; no colored glows)
 *   Motion     --b26-ease, --b26-t-fast 160ms, --b26-t-med 280ms, --b26-t-slow 560ms
 *   Components .b-btn (+ --ink, --ghost, --light, --sm, --lg), .mk-eyebrow, .mk-serif, .mk-brand
 *   Inside brand.css pages the legacy names (--ink, --balloon, --frosting, --f-display ...) are
 *   remapped below, so existing sections pick the system up without edits.
 *
 * ---- Rules ---------------------------------------------------------------------------------------
 *   One accent per screen (Balloon). No gradients on buttons or text. No critters, mascots or
 *   confetti in chrome: they live inside invites, theme cards and the Try-it preview. Display type
 *   is Instrument Sans 600, never 800. The serif is one phrase per heading at most.
 */

@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }

:root {
  /* color: neutral, warm, premium; one signature accent */
  --b26-ink: #1b1724;          /* 16.4:1 on linen */
  --b26-ink-2: #4a4554;        /* body copy, 8.7:1 on linen */
  --b26-ink-3: #625c6b;        /* captions, 6.0:1 on linen, 5.5:1 on stone */
  --b26-linen: #faf7f2;        /* page canvas */
  --b26-paper: #ffffff;        /* cards */
  --b26-stone: #f1ece4;        /* tint sections, quiet surfaces */
  --b26-line: #e6e0d6;
  --b26-line-2: #d9d2c6;
  --b26-night: #14111b;        /* footer, dark sections */
  --b26-night-2: #1f1b28;
  --b26-on-dark: #f6f3ee;
  --b26-on-dark-2: #cfc9d6;    /* 11:1 on night */
  --b26-on-dark-3: #a9a2b5;    /* 7.4:1 on night */
  --b26-accent: #c8295e;       /* Balloon. White on it 5.3:1; on linen 5.0:1 */
  --b26-accent-hover: #b02251;
  --b26-accent-soft: #f8dbe4;
  --b26-accent-on-dark: #ff9cb6; /* 9.5:1 on night */
  --b26-mark: #c8295e;
  --b26-mark-on-dark: #e0457a;
  /* type */
  --b26-f-display: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b26-f-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b26-f-serif: "Instrument Serif", "Instrument Fallback", Georgia, serif;
  --b26-fs-display: clamp(2.5rem, 5vw + .7rem, 5rem);
  --b26-fs-h2: clamp(1.95rem, 3vw + .75rem, 3.25rem);
  --b26-fs-h3: clamp(1.2rem, .8vw + 1rem, 1.5rem);
  --b26-fs-lede: clamp(1.08rem, .45vw + 1rem, 1.28rem);
  --b26-fs-body: 17px;
  --b26-fs-fine: .9rem;
  --b26-w-display: 600;
  --b26-track-display: -.032em;
  --b26-track-h2: -.026em;
  /* shape + depth */
  --b26-r-sm: 10px; --b26-r-md: 16px; --b26-r-lg: 24px; --b26-r-pill: 999px;
  --b26-sh-1: 0 1px 2px rgba(27, 23, 36, .05), 0 2px 8px rgba(27, 23, 36, .05);
  --b26-sh-2: 0 1px 3px rgba(27, 23, 36, .06), 0 14px 32px -14px rgba(27, 23, 36, .2);
  --b26-sh-3: 0 2px 6px rgba(27, 23, 36, .07), 0 32px 64px -28px rgba(27, 23, 36, .32);
  /* motion: calm and precise, no overshoot in chrome (springs belong to themes) */
  --b26-ease: cubic-bezier(.2, .7, .2, 1);
  --b26-t-fast: 160ms; --b26-t-med: 280ms; --b26-t-slow: 560ms;
}

/* ---------- legacy brand.css tokens, remapped (marketing pages only) ---------- */
body.mk {
  --midnight: var(--b26-ink); --midnight-2: var(--b26-night-2); --night: var(--b26-night);
  --ink: var(--b26-ink); --ink-2: var(--b26-ink-2); --ink-3: var(--b26-ink-3);
  --frosting: var(--b26-linen); --paper: var(--b26-paper);
  --blush: var(--b26-stone); --lilac: var(--b26-stone); --peach: var(--b26-stone);
  --balloon: var(--b26-accent); --balloon-hi: var(--b26-mark-on-dark); --balloon-soft: var(--b26-accent-soft);
  --line: var(--b26-line); --line-2: var(--b26-line-2);
  --f-display: var(--b26-f-display); --f-body: var(--b26-f-body); --f-serif: var(--b26-f-serif);
  --r-sm: var(--b26-r-sm); --r-md: var(--b26-r-md); --r-lg: var(--b26-r-lg);
  --sh-1: var(--b26-sh-1); --sh-2: var(--b26-sh-2); --sh-3: var(--b26-sh-3);
  --sh-glass: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 28px -16px rgba(27, 23, 36, .28), 0 1px 4px rgba(27, 23, 36, .06);
  --glass: rgba(252, 250, 246, .74); --glass-strong: rgba(250, 247, 242, .92);
  --ease: var(--b26-ease);
  --t-fast: var(--b26-t-fast); --t-med: var(--b26-t-med);
  --bg2: var(--b26-stone);
  background: var(--b26-linen);
}
.mk ::selection { background: var(--b26-accent-soft); color: var(--b26-ink); }
.mk :focus-visible { outline: 2.5px solid var(--b26-ink); outline-offset: 3px; }
.mk-dark :focus-visible, .mk-foot :focus-visible { outline-color: var(--b26-accent-on-dark); }

/* ---------- type: one confident grotesk, one elegant serif phrase ---------- */
.mk h1, .mk h2, .mk h3, .mk h4 { font-weight: var(--b26-w-display); font-variation-settings: normal; letter-spacing: -.02em; }
.mk-h1 { font-size: var(--b26-fs-display); font-weight: var(--b26-w-display); letter-spacing: var(--b26-track-display); line-height: 1; font-variation-settings: normal; }
.mk-hero .mk-h1 { font-weight: var(--b26-w-display); letter-spacing: -.036em; line-height: .98; }
.mk-h2 { font-size: var(--b26-fs-h2); letter-spacing: var(--b26-track-h2); line-height: 1.04; }
.mk-h3 { font-size: var(--b26-fs-h3); letter-spacing: -.012em; line-height: 1.2; }
.mk-lede { font-size: var(--b26-fs-lede); }
.mk-serif { font-family: var(--b26-f-serif); font-weight: 400; letter-spacing: -.005em; font-size: 1.08em; }
.mk-eyebrow { font-weight: 600; font-size: .78rem; letter-spacing: .14em; color: var(--b26-ink-2); }
.mk-eyebrow::before { width: 16px; height: 1.5px; background: var(--b26-accent); }
.mk-dark .mk-eyebrow { color: var(--b26-on-dark-2); }
.mk-dark .mk-eyebrow::before { background: var(--b26-accent-on-dark); }
.mk-dark .mk-serif { color: var(--b26-accent-on-dark); }

/* ---------- dark sections: warm night, not purple ---------- */
.mk-dark { background: var(--b26-night); color: var(--b26-on-dark); --ink-2: var(--b26-on-dark-2); --ink-3: var(--b26-on-dark-3); --line: rgba(255, 255, 255, .1); }
.mk-dark a { color: var(--b26-accent-on-dark); }

/* ---------- logo lockup: the Pal balloon, refined; Instrument Sans wordmark ----------
   The header SVG carries both drawings: .mk-mark--classic (pre-2026, shown without this file) and
   .mk-mark--2026 (display="none" as a presentation attribute, which this rule overrides). */
.mk-brand { gap: 9px; font-family: var(--b26-f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.028em; font-variation-settings: normal; }
.mk-brand svg { width: 30px; height: 30px; }
.mk-brand:hover svg { transform: translateY(-2px); transition: transform var(--b26-t-med) var(--b26-ease); }
.mk-brand b { font-weight: 600; color: var(--b26-accent); }
.mk-brand .mk-mark--classic { display: none; }
.mk-brand .mk-mark--2026 { display: inline; }
.mk-head.on-dark .mk-brand b, .mk-foot .mk-brand b { color: var(--b26-accent-on-dark); }
.mk-head.on-dark .mk-brand .mk-mark__body, .mk-foot .mk-brand .mk-mark__body { fill: var(--b26-mark-on-dark); stroke: var(--b26-mark-on-dark); }
.mk-head.on-dark .mk-brand .mk-mark__string, .mk-foot .mk-brand .mk-mark__string { stroke: var(--b26-on-dark); }
@media (max-width: 380px) { .mk-brand { font-size: 1.04rem; gap: 7px; } .mk-brand svg { width: 26px; height: 26px; } }

/* ---------- header ---------- */
.mk-nav a { font-weight: 500; font-size: .96rem; color: var(--b26-ink) !important; }
.mk-nav a:hover, .mk-head__signin:hover { background: rgba(27, 23, 36, .05); }
.mk-nav a[aria-current="page"]::after { width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; bottom: 4px; background: var(--b26-accent); }
.mk-head__signin { font-weight: 500; }
.mk-head__bg { background: rgba(250, 247, 242, .86); }
.mk-head.is-condensed .mk-head__bg { border-color: rgba(27, 23, 36, .08); box-shadow: 0 10px 28px -18px rgba(27, 23, 36, .35); }
.mk-head.on-dark .mk-head__bg, .mk-head.is-condensed.on-dark .mk-head__bg { background: rgba(20, 17, 27, .8); }
.mk-burger { background: rgba(27, 23, 36, .06); }
.mk-menu a.mk-menu__link { font-weight: 600; letter-spacing: -.025em; }

/* ---------- buttons: crisp, confident, no shine sweep or colored glow ---------- */
.b-btn { font-family: var(--b26-f-body); font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 1px 2px rgba(27, 23, 36, .16), 0 6px 16px -8px rgba(27, 23, 36, .3);
  transition: transform var(--b26-t-fast) var(--b26-ease), box-shadow var(--b26-t-med) var(--b26-ease), background-color var(--b26-t-fast) var(--b26-ease); }
.b-btn::after { display: none; }
.b-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bb) 88%, #000); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 2px 4px rgba(27, 23, 36, .16), 0 12px 24px -12px rgba(27, 23, 36, .38); }
.b-btn:active { transform: translateY(0) scale(.985); }
.b-btn .ar { transition: transform var(--b26-t-med) var(--b26-ease); }
.b-btn:hover .ar { transform: translateX(3px); }
.b-btn--light:hover { background: var(--b26-stone); }
.b-btn--ghost { box-shadow: inset 0 0 0 1.5px var(--b26-line-2); background: rgba(255, 255, 255, .6); }
.b-btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--b26-ink); }
.mk-dark .b-btn--ghost { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.mk-dark .b-btn--ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px #fff; }
.b-link:hover { color: var(--b26-accent) !important; }
.b-chip { font-weight: 550; }
.mk-pill { font-weight: 550; }
.mk-pill b { font-weight: 600; }

/* ---------- canvas + texture: linen paper, one soft warm light, a whisper of grain ---------- */
.mk-tint-blush, .mk-tint-lilac { background: linear-gradient(180deg, var(--b26-linen), var(--b26-stone) 30%, var(--b26-linen)); }
.mk-aurora::before, .js-motion .mk-aurora::before { animation: none; background:
  radial-gradient(42% 36% at 76% 28%, rgba(200, 41, 94, .09), transparent 70%),
  radial-gradient(40% 34% at 16% 12%, rgba(214, 186, 150, .22), transparent 70%); }
.mk-aurora::after { opacity: .08; }
.mk-aurora--night::before, .js-motion .mk-aurora--night::before { background:
  radial-gradient(44% 40% at 82% 18%, rgba(224, 69, 122, .16), transparent 70%),
  radial-gradient(40% 36% at 14% 90%, rgba(214, 186, 150, .08), transparent 70%); }
.mk-aurora--night::after { opacity: .18; }

/* No critters or confetti in the chrome: inner-page heroes are type, space and the product. */
.mk-phero .crew--phero, .mk-phero .mk-confetti { display: none !important; }

/* ---------- footer ---------- */
.mk-foot { background: var(--b26-night); color: var(--b26-on-dark-2); }
.mk-foot a { color: var(--b26-on-dark) !important; }
.mk-foot__brand p { color: var(--b26-on-dark-3); }
.mk-foot nav h2 { color: var(--b26-on-dark-3); font-weight: 600; letter-spacing: .14em; }
.mk-foot__base { color: var(--b26-on-dark-3); border-top-color: rgba(255, 255, 255, .1); }
.mk-foot__promise .ic { color: var(--b26-on-dark-2); }
.mk-foot__word { font-family: var(--b26-f-display); font-weight: 600; letter-spacing: -.045em; color: rgba(255, 255, 255, .03); }
.mk-foot__tag { margin: 6px 0 0; font-family: var(--b26-f-serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; color: var(--b26-on-dark) !important; }

/* The descriptor line is part of the 2026 lockup only: the brand_look control arm removes the element. */

/* ---------- sign-in: the refined mark on quiet paper (no smiling balloon, no confetti) ---------- */
.mk-signin .signin-hero, .mk-signin .signin-mail { background:
  radial-gradient(60% 90% at 50% 0%, rgba(200, 41, 94, .08) 0%, transparent 70%),
  linear-gradient(180deg, var(--b26-stone), #fff); }
.mk-signin .sh-pal .mk-mark--classic { display: none; }
.mk-signin .sh-pal .mk-mark--2026 { display: inline; }
.mk-signin .sh-pal { width: 72px; height: 72px; margin-left: -36px; filter: drop-shadow(0 10px 12px rgba(27, 23, 36, .14)); }
.mk-signin .sh-balloon, .mk-signin .sh-confetti { display: none; }

/* ---------- inner-page heroes: the same quiet light ---------- */
.mk-phero::before { background:
  radial-gradient(34% 44% at 86% 18%, rgba(200, 41, 94, .07), transparent 70%),
  radial-gradient(36% 44% at 10% 26%, rgba(214, 186, 150, .2), transparent 70%); }
.mk-phero::after { opacity: .07; }

/* ---------- the price card (the $29 moment): ink, one accent, no sunbeam/purple tints ---------- */
.price__card::before { background: radial-gradient(closest-side, rgba(224, 69, 122, .28), transparent); }
.price__card .mk-eyebrow { color: var(--b26-on-dark-2); }
.price__amt { font-weight: 600; letter-spacing: -.045em; }
.price__per { color: var(--b26-on-dark-2); font-weight: 500; }
.price__pay span { color: var(--b26-on-dark-2); font-weight: 550; }
.price__trial .ic { color: var(--b26-accent-on-dark); }

/* No confetti in shared chrome sections (final CTA band). */
.mk-final .mk-confetti { display: none !important; }

/* ---------- sign-in button: the same crisp button as .b-btn ---------- */
.mk-signin .btn { font-weight: 600; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 1px 2px rgba(27, 23, 36, .16), 0 6px 16px -8px rgba(27, 23, 36, .3); }
.mk-signin .btn::after { display: none; }
.mk-signin .btn:hover { background: var(--b26-accent-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 2px 4px rgba(27, 23, 36, .16), 0 12px 24px -12px rgba(27, 23, 36, .38); }
.mk-signin .btn:active { box-shadow: 0 1px 2px rgba(27, 23, 36, .2); }

/* ---------- account app (/app): the app bar lockup only; the rest of app.css adopts tokens in its own lane ---------- */
.appbar .brand { font-family: var(--b26-f-display); font-weight: 600; letter-spacing: -.028em; color: var(--b26-ink) !important; }

/* ---------- home, Oct 2026: the dark theater hero ("Put their name in lights") ----------
   The theater sits on warm Night like every dark band; its lights stay gold (the hero's one primary),
   the room around them loses the purple cast. The marquee art itself belongs to the hero lane. */
.mk-hero--lights::before { background:
  radial-gradient(60% 50% at 72% 40%, rgba(224, 69, 122, .16), transparent 70%),
  radial-gradient(40% 40% at 18% 8%, rgba(214, 186, 150, .12), transparent 70%); }
.mk-hero--lights .lt-eyebrow { color: var(--b26-on-dark-2); }
.mk-hero--lights .lt-eyebrow::before { background: var(--b26-accent-on-dark); }
.mk-hero--lights .lt-h1 { font-weight: var(--b26-w-display); letter-spacing: -.04em; }
.mk-hero--lights .lt-h1 .mk-serif { color: var(--b26-accent-on-dark); }
.lt-marquee { background: linear-gradient(#2a2230, #1c1720); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 2px #3a3040 inset, 0 0 90px -10px var(--gold-glow); }
.lt-marquee__in { background: radial-gradient(120% 100% at 50% 0%, #2a2230, #110e15 70%); }
.lt-marquee__post { background: linear-gradient(90deg, transparent 0 8%, #2a2230 8% 14%, transparent 14% 86%, #2a2230 86% 92%, transparent 92%); }
.lt-go { font-family: var(--b26-f-body); font-weight: 600; color: var(--b26-ink); }
.lt-try select option { color: var(--b26-ink); }
/* The header over the theater: the 2026 lockup in reverse; "Try it free" is a ghost while the name form is in view. */
body.ask-in-view .mk-head a.b-btn[data-cta]:hover { background: rgba(27, 23, 36, .05); transform: none; }
body.ask-in-view .mk-head.on-dark a.b-btn[data-cta]:hover { background: rgba(255, 255, 255, .1); }

/* The hand-drawn yellow squiggle under serif phrases is retired everywhere (BRAND-2026 §6). */
.mk-ul.mk-serif::after { display: none; }

/* ---------- home below the hero: 2026 neutrals, one accent ---------- */
.occ-sec { background: linear-gradient(180deg, var(--b26-paper), var(--b26-linen)); }
.ans__ic { background: var(--b26-stone); color: var(--b26-accent); }
.hw__no { font-weight: 600; }
/* "Try it now" button hover: warm ink, not purple (lp.css loads after this file, hence body.mk). */
body.mk .try__go:hover, body.mk .mk-hero--lp .try--hero .try__go:hover { background: var(--b26-night-2); }
body.mk .try--hero .try__go { box-shadow: 0 1px 2px rgba(27, 23, 36, .16), 0 6px 16px -8px rgba(27, 23, 36, .3); }

/* ---------- one header CTA, everywhere (docs/design/UI-AUDIT.md #6) ----------
   The header's "Try it free" is the brand's small button: filled Balloon by default, an ink-hairline
   ghost while the page's own primary is on screen (home and /lp toggle body.ask-in-view; a theme page's
   hero always carries it). Never an outlined Balloon: that was a fifth variant. */
body.mk:has(.tl-hero) .mk-head__act a.b-btn[data-cta] { --bb: transparent; --bf: var(--b26-ink); background: transparent; color: var(--b26-ink) !important; box-shadow: inset 0 0 0 1.5px var(--b26-line-2); }
body.mk:has(.tl-hero) .mk-head__act a.b-btn[data-cta]:hover { background: rgba(27, 23, 36, .05); box-shadow: inset 0 0 0 1.5px var(--b26-ink); transform: none; }