/* MonsterPages project stylesheet - generated, do not edit */
.mp-root{--mp-primary:#FF5A36;--mp-secondary:#2453FF;--mp-ink:#1B1E24;--mp-muted:#6B7280;--mp-surface:#FFFFFF;--mp-surface-alt:#F7F8FA;--mp-border:#E6E8EC;--mp-on-primary:#1B1E24;--mp-on-gradient:#1B1E24;--mp-on-secondary:#ffffff;--mp-link:#c64b32;--mp-link-alt:#bb4831;--mp-inverse-surface:#1B1E24;--mp-inverse-ink:#FFFFFF;--mp-font-heading:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;--mp-font-body:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;--mp-font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--mp-base:16px;--mp-leading:1.6;--mp-h-weight:800;--mp-h-tracking:-0.03em;--mp-h1:clamp(30px, 3.60vw + 14px, 56px);--mp-h2:clamp(24px, 2.10vw + 12px, 36px);--mp-h3:clamp(19px, 1.10vw + 12px, 23px);--mp-radius:16px;--mp-radius-sm:9.6px;--mp-radius-lg:25.6px;--mp-btn-radius:10px;--mp-section-y:80px;--mp-section-y-sm:49.6px;--mp-container:1120px;--mp-gap:28.8px;--mp-primary-soft:color-mix(in srgb, var(--mp-primary) 12%, transparent);--mp-secondary-soft:color-mix(in srgb, var(--mp-secondary) 12%, transparent);--mp-ink-soft:color-mix(in srgb, var(--mp-ink) 6%, transparent)}
.mp-root{
  font-family:var(--mp-font-body);
  font-size:var(--mp-base);
  line-height:var(--mp-leading);
  color:var(--mp-ink);
  background:var(--mp-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
.mp-root *,.mp-root *::before,.mp-root *::after{box-sizing:border-box}
.mp-root img,.mp-root svg,.mp-root video{max-width:100%;height:auto;display:block}
/* Buttons are excluded deliberately. This selector is (0,1,1), which outranks a
   page's own .btn-primary at (0,1,0) — so without the guard every CTA in a page
   gets repainted to the link colour, and a primary button ends up with its label
   in the same hue as its fill. Invisible. Both class names are matched because
   pages authored against the design skill use .btn and engine markup uses
   .mp-btn. */
.mp-root a:not(.btn):not(.mp-btn){color:var(--mp-link);text-decoration:none}
.mp-root a:not(.btn):not(.mp-btn):hover{text-decoration:underline;text-underline-offset:3px}
.mp-root :where(h1,h2,h3,h4,h5,h6){
  font-family:var(--mp-font-heading);
  font-weight:var(--mp-h-weight);
  letter-spacing:var(--mp-h-tracking);
  line-height:1.14;
  margin:0;
  text-wrap:balance;
}
.mp-root :focus-visible{outline:2px solid var(--mp-secondary);outline-offset:3px;border-radius:4px}
.mp-root code,.mp-root kbd,.mp-root pre{font-family:var(--mp-font-mono);font-size:.9em}

/* Prose defaults. Zero-specificity so a page's own <style> overrides them, but
   present so plain authored markup is readable without restating the basics. */
.mp-root :where(p,ul,ol,blockquote,pre,table,figure,dl){margin-block:0 1em}
.mp-root :where(p,ul,ol,blockquote,pre,table,figure,dl):last-child{margin-block-end:0}
.mp-root :where(h2){font-size:var(--mp-h2);margin-block:1.8em .55em}
.mp-root :where(h3){font-size:var(--mp-h3);margin-block:1.5em .45em}
.mp-root :where(h4,h5,h6){font-size:1.02rem;margin-block:1.3em .4em}
.mp-root :where(h1,h2,h3,h4,h5,h6):first-child{margin-block-start:0}
.mp-root :where(ul,ol){padding-inline-start:1.3em}
.mp-root :where(li)+:where(li){margin-block-start:.4em}
.mp-root :where(blockquote){
  border-inline-start:3px solid var(--mp-primary);padding-inline-start:18px;color:var(--mp-ink)
}
.mp-root :where(hr){border:0;border-block-start:1px solid var(--mp-border);margin-block:2em}
.mp-root :where(strong){font-weight:650}
.mp-root :where(small){font-size:.86em;color:var(--mp-muted)}

/* --- layout ------------------------------------------------------------- */
.mp-root .mp-section{padding-block:var(--mp-section-y);position:relative}
.mp-root .mp-section+.mp-section{padding-block-start:var(--mp-section-y)}
.mp-root .mp-container{width:100%;max-width:var(--mp-container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.mp-root .mp-tone-alt{background:var(--mp-surface-alt)}
.mp-root .mp-tone-alt a:not(.mp-btn){color:var(--mp-link-alt)}
.mp-root .mp-tone-inverse{background:var(--mp-inverse-surface);color:var(--mp-inverse-ink)}
.mp-root .mp-tone-inverse :where(h1,.mp-root h2,.mp-root h3,.mp-root h4,.mp-root h5,.mp-root h6){color:var(--mp-inverse-ink)}
.mp-root .mp-tone-inverse .mp-sub,.mp-root .mp-tone-inverse .mp-muted{color:color-mix(in srgb,var(--mp-inverse-ink) 72%,transparent)}
.mp-root .mp-tone-inverse .mp-eyebrow{color:color-mix(in srgb,var(--mp-primary) 70%,white)}
.mp-root .mp-tone-inverse .mp-card{background:color-mix(in srgb,var(--mp-inverse-ink) 7%,transparent);border-color:color-mix(in srgb,var(--mp-inverse-ink) 16%,transparent)}
.mp-root .mp-tone-inverse a{color:color-mix(in srgb,var(--mp-primary) 65%,white)}

/* --- shared type clusters ---------------------------------------------- */
.mp-root .mp-sec-head{display:grid;gap:14px;max-width:62ch;margin-block-end:calc(var(--mp-gap) * 1.5)}
.mp-root .mp-sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
.mp-root .mp-eyebrow{
  font-family:var(--mp-font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mp-primary);margin:0
}
.mp-root .mp-heading{font-size:var(--mp-h2)}
.mp-root .mp-hero .mp-heading{font-size:var(--mp-h1)}
.mp-root .mp-sub{font-size:clamp(1rem,.4vw + .95rem,1.16rem);color:var(--mp-muted);line-height:1.55;max-width:60ch}
.mp-root .mp-muted{color:var(--mp-muted)}
.mp-root .mp-h{font-size:var(--mp-h3);margin-block:1.6em .5em}
.mp-root .mp-h:first-child{margin-block-start:0}

/* --- buttons ------------------------------------------------------------ */
.mp-root .mp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mp-root .mp-btn{
  --mp-btn-bg:var(--mp-primary);--mp-btn-fg:var(--mp-on-primary);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mp-font-heading);font-size:.97rem;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:var(--mp-btn-radius);border:1px solid transparent;
  background:var(--mp-btn-bg);color:var(--mp-btn-fg);cursor:pointer;
  text-decoration:none;transition:filter .15s ease,transform .15s ease,background .15s ease;
  white-space:nowrap
}
.mp-root .mp-btn:hover{text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)}
.mp-root .mp-btn:active{transform:translateY(0)}
.mp-root .mp-btn--secondary{--mp-btn-bg:transparent;--mp-btn-fg:var(--mp-ink);border-color:var(--mp-border)}
.mp-root .mp-btn--secondary:hover{--mp-btn-bg:var(--mp-surface-alt)}
.mp-root .mp-btn--ghost{--mp-btn-bg:transparent;--mp-btn-fg:var(--mp-primary);padding-inline:4px}
.mp-root .mp-btn--ghost:hover{text-decoration:underline;text-underline-offset:3px;transform:none}
.mp-root .mp-tone-inverse .mp-btn--secondary{--mp-btn-fg:var(--mp-inverse-ink);border-color:color-mix(in srgb,var(--mp-inverse-ink) 30%,transparent)}
.mp-root .mp-tone-inverse .mp-btn--secondary:hover{--mp-btn-bg:color-mix(in srgb,var(--mp-inverse-ink) 10%,transparent)}

/* --- cards, chips, rules ----------------------------------------------- */
.mp-root .mp-card{
  background:var(--mp-surface);border:1px solid var(--mp-border);
  border-radius:var(--mp-radius);padding:26px
}
.mp-root .mp-card--flat{border-color:transparent;padding-inline:0}
.mp-root .mp-chip{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mp-font-mono);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:var(--mp-primary-soft);color:var(--mp-primary)
}
.mp-root .mp-rule{border:0;border-block-start:1px solid var(--mp-border);margin-block:2em}
.mp-root .mp-icon{width:22px;height:22px;flex:none}
.mp-root .mp-list{padding-inline-start:1.25em;display:grid;gap:.5em}
.mp-root .mp-list li{padding-inline-start:.15em}
.mp-root .mp-quote{
  border-inline-start:3px solid var(--mp-primary);padding-inline-start:18px;
  font-size:1.08em;color:var(--mp-ink)
}
.mp-root .mp-code{
  background:var(--mp-surface-alt);border:1px solid var(--mp-border);
  border-radius:var(--mp-radius-sm);padding:16px 18px;overflow-x:auto;
  font-size:.85rem;line-height:1.6
}
.mp-root .mp-table-wrap{overflow-x:auto;border-radius:var(--mp-radius);border:1px solid var(--mp-border)}
.mp-root .mp-table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--mp-surface)}
.mp-root .mp-table th,.mp-root .mp-table td{padding:14px 18px;text-align:left;border-block-end:1px solid var(--mp-border);vertical-align:top}
.mp-root .mp-table thead th{
  font-family:var(--mp-font-heading);font-size:.8rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mp-muted);
  background:var(--mp-surface-alt);white-space:nowrap
}
.mp-root .mp-table tbody tr:last-child td{border-block-end:0}

/* --- details/summary: the accessible, crawlable accordion ---------------- */
.mp-root :where(details){
  border:1px solid var(--mp-border);border-radius:var(--mp-radius);
  background:var(--mp-surface)
}
.mp-root :where(details)+:where(details){margin-block-start:10px}
/* Padding lives on summary and the content rather than on the <details> box, so
   an author restyling the box cannot end up with cramped or doubled spacing. */
.mp-root :where(summary){
  font-family:var(--mp-font-heading);font-weight:600;cursor:pointer;
  list-style:none;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:16px 20px
}
.mp-root :where(details)>:not(summary){padding:0 20px 18px;margin-block:0}
.mp-root :where(summary)::-webkit-details-marker{display:none}
.mp-root :where(summary)::after{
  content:"+";flex:none;color:var(--mp-primary);font-weight:400;font-size:1.25em;line-height:1
}
.mp-root :where(details[open]) :where(summary)::after{content:"\2212"}


/* --- primitives a generated page can reuse ------------------------------ */
.mp-root .mp-anchor-target{scroll-margin-block-start:90px}
/* Heading anchors: the whole heading is the link, but it reads as a heading
   until hovered, so prose stays free of link furniture. */
.mp-root .mp-h-anchor{color:inherit;text-decoration:none}
.mp-root .mp-h-anchor:hover{color:var(--mp-primary);text-decoration:none}
.mp-root .mp-h-anchor:hover::after{
  content:"#";margin-inline-start:.35em;color:var(--mp-primary);
  font-weight:400;opacity:.55
}
.mp-root .mp-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* --- responsive --------------------------------------------------------- */
@media (max-width:820px){
  .mp-root .mp-section{padding-block:var(--mp-section-y-sm)}
  .mp-root .mp-btn{width:auto}
}
@media (max-width:520px){
  .mp-root .mp-cta-row{width:100%}
  .mp-root .mp-cta-row .mp-btn{flex:1 1 100%}
}

/* --- motion + print ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mp-root *,.mp-root *::before,.mp-root *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
}
@media print{
  .mp-root{background:#fff;color:#000}
  .mp-root .mp-section{padding-block:18px;break-inside:avoid}
  /* Print every answer, not just the ones the reader happened to open. */
  .mp-root :where(details){border-color:#ccc;break-inside:avoid}
  .mp-root :where(details)>*{display:revert !important}
  .mp-root .mp-btn{border:1px solid #999;color:#000;background:none}
}
/* project custom css */
/* GridDealer tokens with no slot in the brand schema. Every hex here comes
   from packages/shared/src/brand.ts (BRAND.colors), apps/web/src/app/globals.css
   (the @theme block) or apps/web/src/components/ui.tsx (Button/ButtonLink
   VARIANTS) in the griddealer repo -- nothing here is invented. This is a
   LIGHT theme: --mp-surface-alt (#F7F8FA) is BRAND.colors.bg, the real page
   background; --mp-surface (#FFFFFF) is the app's real --color-surface, used
   for cards.

   CONTRAST, COMPUTED. --mp-primary is coral (#FF5A36), BRAND.colors.coral
   and the app's default Button/ButtonLink fill. White text on coral -- the
   app's own real choice (VARIANTS.coral: 'bg-coral text-white') -- is only
   3.10:1, which fails WCAG AA for anything but large bold text. Ink
   (#1B1E24) on coral is 6.77:1. Per design.md's rule (pick whichever of
   black/white scores higher), --mp-on-primary here is ink, deliberately
   stricter than the shipped app's own button.

   --mp-link needs coral bent toward ink: coral itself is 3.10:1 on white
   (fails), and even the app's real coral-hover token (#E64A29,
   --color-coral-hover) is only 3.91:1 (still fails as running text). A 70%
   coral / 30% ink mix clears 5.16:1 on --mp-surface and ~4.85:1 on
   --mp-surface-alt -- that mix is --gd-link below, and it overrides the
   engine's default computed --mp-link.

   --mp-muted (#6B7280, the app's real --color-muted) passes running-text
   contrast as-is -- 4.84:1 on white, 4.55:1 on #F7F8FA -- so unlike a
   typical brand-gray it needs no bend toward ink.

   --mp-border (#E6E8EC) is the app's real --color-line, used as-is, not a
   synthetic mix.

   --mp-inverse-surface / --mp-inverse-ink mirror the app's own dark-hero
   pattern: the real homepage hero section is literally `bg-ink text-white`
   (apps/web/src/app/(site)/page.tsx) -- ink as a dark fill, white as the
   text on it, 16.7:1.

   Secondary (blue, #2453FF) is real too -- BRAND.colors.blue, used on the
   homepage's sample-grid "NEW" badge (bg-blue text-white). White on blue is
   5.59:1, so --mp-on-primary's rule (pick the higher of black/white) also
   gives white for any blue fill -- unlike primary, no override needed there.

   --gd-coral-tint / --gd-blue-tint / --gd-success / --gd-danger / --gd-amber
   mirror the app's own @theme tokens (globals.css: --color-coral-tint,
   --color-blue-tint, --color-success, --color-danger, --color-amber) so an
   authored comparison table can tint a winning column or mark a yes/no cell
   with the same colors the real dashboard already uses, instead of
   inventing new ones. */
.mp-root{
  --gd-coral-hover:#E64A29;
  --gd-coral-tint:#FFF1EC;
  --gd-blue-tint:#EAF0FF;
  --gd-success:#1A8F5C;
  --gd-danger:#D1453B;
  --gd-amber:#C9820A;
  --gd-link:color-mix(in srgb, var(--mp-primary) 70%, var(--mp-ink) 30%);
  --mp-link:var(--gd-link);
}