/* MonsterPages project stylesheet - generated, do not edit */
.mp-root{--mp-primary:#E8763C;--mp-secondary:#1C8C8C;--mp-ink:#0A2F42;--mp-muted:#5B6B72;--mp-surface:#FFFFFF;--mp-surface-alt:#F5F3EC;--mp-border:#E2DDCA;--mp-on-primary:#111111;--mp-on-gradient:#111111;--mp-on-secondary:#111111;--mp-link:#a5613e;--mp-link-alt:#9a5d3e;--mp-inverse-surface:#0A2F42;--mp-inverse-ink:#FFFFFF;--mp-font-heading:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;--mp-font-body:Inter, ui-sans-serif, 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:700;--mp-h-tracking:-0.01em;--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:56px;--mp-section-y-sm:34.72px;--mp-container:1180px;--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 */
/* SaleHull tokens sourced directly from the live repo, not invented.
   apps/web/src/app/globals.css defines the product's own @theme tokens:
     --color-bg:#f5f3ec  --color-ink:#0a2f42  --color-coral:#e8763c
     --color-blue:#1c8c8c  --color-surface:#ffffff  --color-line:#e2ddca
     --color-subtle:#ece7d8  --color-muted:#5b6b72  --color-amber:#b8791a
     --color-danger:#b3261e  --color-success:#1c7a4a
   brand.ts's own comment calls this palette 'deep marine navy / sandy cream /
   buoy orange / teal' and says it is deliberately not GridDealer's coral+blue
   pair (different hex values), so it reads as its own marine product rather
   than a recolor of the sibling car-dealer product.

   MAPPING TO MP TOKENS. --mp-primary is the real 'coral' button variant used
   for the homepage's main CTA (variant="coral" on the /sign-up button).
   --mp-secondary is the real 'blue' (teal) token. --mp-surface (#FFFFFF) is
   the product's own --color-surface, used for card backgrounds (Card
   component: 'bg-surface'). --mp-surface-alt (#F5F3EC) is the product's own
   --color-bg, the actual <body> background. --mp-border (#E2DDCA) is the
   product's own --color-line, used on every Card ('border-line'). --mp-muted
   (#5B6B72) is the product's own --color-muted, unmodified -- see contrast
   below, it already clears running-text contrast with no adjustment needed
   (unlike a lot of brand-supplied mutes, which usually need bending toward
   ink first).

   CONTRAST, COMPUTED (WCAG relative-luminance formula, checked by hand):
     ink (#0A2F42) on surfaceAlt (#F5F3EC): 12.6:1 -- passes easily as body text.
     white on ink: 14.0:1 -- inverse bands (hero, closing CTA) use ink as the
       fill and white as the text.
     muted (#5B6B72) on surfaceAlt: 5.0:1. muted on surface (#FFFFFF): 5.5:1.
       Both clear 4.5:1 with the real hex, unchanged.
     onPrimary: black-or-white computed against coral (#E8763C) -- black
       (#111111) scores 6.4:1, white scores 3.0:1. Black wins, so buttons on
       coral use #111111, not white, even though white is the more common
       choice for a saturated fill -- this hue is light enough that it fails
       with white text. Checked again against secondary/blue (#1C8C8C) for any
       button built on that fill: black scores 4.7:1, white 4.1:1 -- black
       wins there too, so --sh-on-secondary also uses #111111.
     Link color: --mp-primary (coral) fails as running text at 2.7:1 on
       surfaceAlt, so the engine's default behaviour would bend it toward ink.
       Doing that to coral desaturates it into a muddy brown by the time it
       clears 4.5:1 (~35% ink mix, #9A5D3E) and reads as broken alongside a
       real coral CTA on the same page. --mp-secondary (teal) only needs a
       light 20% push toward ink to clear 4.5:1 (result #18797D, 4.65:1 on
       surfaceAlt / 5.16:1 on white surface) and stays recognizably teal, so
       links use the teal-derived color instead of the engine's coral-derived
       default -- the same override pattern raritypay uses for --mp-link.
     border (#E2DDCA) is a visual divider only, not text -- no contrast
       requirement applies, used as-is from the real --color-line token.

   SEMANTIC EXTRAS. --sh-amber/--sh-danger/--sh-success mirror the product's
   own --color-amber/--color-danger/--color-success, for any status chip
   (e.g. an 'active listing' or 'sold' tag) that should match the real app's
   semantics instead of inventing new colors for the same meaning. */
.mp-root{
  --sh-link:#18797D;
  --sh-on-primary:#111111;
  --sh-on-secondary:#111111;
  --sh-amber:#B8791A;
  --sh-danger:#B3261E;
  --sh-success:#1C7A4A;
  --sh-primary-tint:color-mix(in srgb, var(--mp-primary) 10%, var(--mp-surface));
  --sh-secondary-tint:color-mix(in srgb, var(--mp-secondary) 12%, var(--mp-surface));
  --sh-card-shadow:0 1px 2px rgba(10,47,66,.05), 0 12px 26px -16px rgba(10,47,66,.18);
  --sh-cta-shadow:0 10px 24px -8px rgba(232,118,60,.35);
  --mp-link:var(--sh-link);
}