/* MonsterPages project stylesheet - generated, do not edit */
.mp-root{--mp-primary:#1F4D3A;--mp-secondary:#C8A96B;--mp-ink:#2A2A2A;--mp-muted:#7A766C;--mp-surface:#FCFAF4;--mp-surface-alt:#F8F4EC;--mp-border:#EBE2CE;--mp-on-primary:#F8F4EC;--mp-on-gradient:#F8F4EC;--mp-on-secondary:#111111;--mp-link:#1F4D3A;--mp-link-alt:#1F4D3A;--mp-inverse-surface:#16201A;--mp-inverse-ink:#F8F4EC;--mp-font-heading:"Cormorant Garamond", 'Playfair Display', Georgia, 'Times New Roman', serif;--mp-font-body:Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;--mp-font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--mp-base:17px;--mp-leading:1.65;--mp-h-weight:600;--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:32px;--mp-section-y:40px;--mp-section-y-sm:28px;--mp-container:900px;--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 */
/* FamBranch tokens that have no slot in the brand schema.
   Mirrors apps/web/tailwind.config.ts and the SeoLandingPage.tsx component in
   the product repo, so MonsterPages and the Next app agree.

   monoFont (IBM Plex Mono) is a MonsterPages design-system choice for
   eyebrow chips and tabular figures -- the product repo does not name a
   mono typeface, this page style just needs one and Manrope has no mono cut.

   THREE FOREST VALUES, THREE JOBS. --fb-forest (#1F4D3A) is the CTA fill
   and, because it is dark enough on its own, also works as body-copy link
   text at 8.77:1 on both grounds -- no bending toward ink required, unlike
   a typical brand-blue primary. --fb-forest-deep (#15382A) is reserved for
   text ON gold: forest-on-gold is only 4.28:1 and fails, forest-deep-on-gold
   is 5.72:1 and passes. --fb-forest-ink (#16201A) is the near-black footer
   band, matching --mp-inverse-surface.

   MUTED TEXT NEEDS A DARKER READING VARIANT. The brand's own muted hex,
   #7A766C, is 4.13:1 on cream and 4.34:1 on paper -- both fail 4.5:1 as
   running text, even though the hex is correct for borders, dots and large
   labels. --fb-muted-text mixes it 70/30 toward ink: 5.79:1 on cream,
   4.67:1 on paper. Use --mp-muted for non-text chrome, --fb-muted-text for
   any muted copy a reader has to read.

   Bullet lists use a gold '✦' marker per the product's own list style,
   never a default disc. */
.mp-root{
  --fb-forest:#1F4D3A;
  --fb-forest-deep:#15382A;
  --fb-forest-ink:#16201A;
  --fb-gold:#C8A96B;
  --fb-gold-soft:#D4B06A;
  --fb-gold-tint:color-mix(in srgb, var(--fb-gold) 16%, var(--mp-surface));
  --fb-muted-text:color-mix(in srgb, var(--mp-muted) 70%, var(--mp-ink) 30%);
  --fb-on-gold:var(--fb-forest-deep);
  --fb-cta-shadow:0 8px 22px rgba(31,77,58,0.26);
  --fb-card-shadow:0 1px 2px rgba(31,77,58,.05), 0 10px 24px -14px rgba(31,77,58,.16);
}