/* =====================================================================
   ManyMangoes brand  |  mm-brand.css  |  v1, October 2026
   One mark, one gold, two looks:
     House style (the default) ........ classes mm-*
     Kill the Slop lane (on request) .. classes slop-*
   Values come from accepted work: the NextGen USA QBR (Jul 2026), the
   lead proposal theme (Leads/_assets/proposal.css), the Exclusive
   Networks USA case study (Oct 2026) and the MangoMagic Beta launch
   assets (Sep 2026). Component sizes are in em: set font-size on the
   container (a slide, a page, a post) and everything scales with it.
   ===================================================================== */

/* ---------- Fonts (paths relative to this file) ---------------------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:block;src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:block;src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:block;src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:block;src:url('../fonts/montserrat-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:block;src:url('../fonts/montserrat-latin-900-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:block;src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:block;src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:block;src:url('../fonts/archivo-latin-900-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:block;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:block;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:block;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:block;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:block;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2');}

/* ---------- Tokens --------------------------------------------------- */
:root{
  /* Gold: the one accent */
  --mm-gold:#F1AB1C;         /* fills, rules, dots, display numerals, the title period. Never small text on white (2:1) */
  --mm-gold-text:#B07807;    /* eyebrows, tags, deltas on white or cream (bold caps) */
  --mm-gold-label:#C98A0B;   /* the date or folio in a header (tracked caps only) */
  --mm-gold-pale:#F0D9A4;    /* chart bars that are not the highlight */
  --mm-gold-line:#E9CD93;    /* pill borders on cream */
  --mm-on-gold:#221903;      /* text on a gold fill */
  --mm-on-gold-2:#6B5208;    /* small print on a gold fill */
  /* Paper */
  --mm-paper:#FFFFFF;        /* the page */
  --mm-cream:#FDF6E7;        /* big win, highlighted card, pills */
  --mm-card:#FBF8F1;         /* cards, strips, table stripes */
  --mm-hairline:#ECE5D3;     /* card borders */
  --mm-rule:#EFE9DC;         /* header, footer and table rules */
  --mm-divider:#D8D2C2;      /* the bar inside a header lockup */
  /* Ink */
  --mm-navy:#0B1424;         /* covers, section slides, bands; also fine as title ink */
  --mm-ink:#1B1E24;          /* headings, numerals, labels */
  --mm-text:#23272F;         /* bold words inside body copy */
  --mm-body:#565D6B;         /* body copy and subtitles */
  --mm-muted:#8A8576;        /* context labels and short captions */
  --mm-faint:#9A9484;        /* footers and sources */
  --mm-faint-strong:#5A5648; /* the ManyMangoes word inside a footer */
  /* On navy */
  --mm-on-navy:#FFFFFF;
  --mm-on-navy-2:#C6CDDA;    /* subtitles on navy */
  --mm-on-navy-3:#8A93A6;    /* small print on navy */
  /* Status pills (reports and pipeline tables) */
  --mm-booked:#169B55;     --mm-booked-bg:#E3F4EA;
  --mm-interested:#B77906; --mm-interested-bg:#FFF1CC;
  --mm-open:#0F7E86;       --mm-open-bg:#E1F2F3;
  /* Type */
  --mm-display:'Archivo','Inter',system-ui,sans-serif;  /* titles and numerals, 800 to 900 */
  --mm-sans:'Inter',system-ui,sans-serif;                /* everything you read */
  --mm-brand:'Montserrat','Inter',system-ui,sans-serif;  /* the wordmark and tracked lockups */
  /* Shape */
  --mm-r-sm:.5em; --mm-r:.85em; --mm-r-lg:1.1em;
  /* Kill the Slop lane */
  --slop-paper:#F4EEE2;   /* the ground */
  --slop-ink:#15120D;     /* type, pills, the stamp centre */
  --slop-grey:#8C8577;    /* the slop phrases before they are struck */
  --slop-rule:rgba(21,18,13,.12);
  --slop-studio:#24211D;  /* camera background behind a live overlay */
  --slop-live:#4ADE80;    /* the LIVE dot, nothing else */
}

/* ---------- House style: base ------------------------------------------ */
.mm{font-family:var(--mm-sans);color:var(--mm-ink);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
.mm *,.slop *{box-sizing:border-box;}
.mm img{display:block;}
.mm-navy{background:var(--mm-navy);color:var(--mm-on-navy);}

/* ---------- Lockups ---------------------------------------------------- */
/* Company lockup: mark + ManyMangoes in Montserrat 800. Set font-size on it. */
.mm-lockup{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mm-brand);font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--mm-ink);white-space:nowrap;}
.mm-lockup img{height:1.9em;width:auto;flex:none;}
.mm-lockup .ctx{font-family:var(--mm-sans);font-weight:600;font-size:.84em;letter-spacing:0;color:var(--mm-muted);margin-left:.35em;padding-left:.85em;border-left:1px solid var(--mm-divider);line-height:1.2;}
.mm-navy .mm-lockup,.mm-lockup.on-navy{color:#fff;}
.mm-navy .mm-lockup .ctx,.mm-lockup.on-navy .ctx{color:var(--mm-on-navy-3);border-color:rgba(255,255,255,.18);}
/* Product lockup: mark + MANGOMAGIC(TM) in tracked caps. */
.mm-lockup.caps{font-weight:800;letter-spacing:.18em;text-transform:uppercase;gap:.75em;}
.mm-lockup.caps img{height:2.6em;}
/* Endorsed lockup: ManyMangoes with MANGOMAGIC under it (offers sold by ManyMangoes). */
.mm-lockup .stack{display:flex;flex-direction:column;gap:.28em;}
.mm-lockup .stack small{font-family:var(--mm-sans);font-weight:800;font-size:.5em;letter-spacing:.24em;text-transform:uppercase;color:var(--mm-muted);}

/* ---------- Type ------------------------------------------------------- */
.mm-eyebrow{font-family:var(--mm-sans);font-weight:800;font-size:.72em;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;color:var(--mm-gold-text);}
.mm-navy .mm-eyebrow{color:var(--mm-gold);}
.mm-title{font-family:var(--mm-display);font-weight:900;font-size:2.4em;line-height:1.04;letter-spacing:-.022em;color:var(--mm-ink);margin:0;}
.mm-title.xl{font-size:4.4em;line-height:.98;letter-spacing:-.028em;}
.mm-title.sm{font-size:1.7em;}
.mm-navy .mm-title{color:#fff;}
.mm-title .dot,.mm-dot{color:var(--mm-gold);}          /* the gold full stop: "The program in numbers." */
.mm-title .gold,.mm-gold{color:var(--mm-gold);}        /* a gold second line, display sizes only */
.mm-sub{font-family:var(--mm-sans);font-weight:400;font-size:1em;line-height:1.5;color:var(--mm-body);margin:0;}
.mm-navy .mm-sub{color:var(--mm-on-navy-2);font-weight:600;}
.mm-body{font-size:.92em;line-height:1.55;color:var(--mm-body);}
.mm-body b,.mm-sub b{color:var(--mm-text);font-weight:700;}
.mm-num{font-family:var(--mm-display);font-weight:900;letter-spacing:-.02em;line-height:1;}

/* ---------- Pills ------------------------------------------------------ */
.mm-pill{display:inline-flex;align-items:center;gap:.6em;padding:.62em 1.25em;border-radius:999px;border:1px solid var(--mm-gold-line);background:var(--mm-cream);color:var(--mm-gold-text);font-family:var(--mm-sans);font-weight:800;font-size:.68em;line-height:1;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;}
.mm-pill.outline{background:transparent;border-color:rgba(241,171,28,.6);color:var(--mm-gold);}
.mm-pill.ink{background:var(--mm-navy);border-color:var(--mm-navy);color:#fff;}
.mm-pill.gold{background:var(--mm-gold);border-color:var(--mm-gold);color:var(--mm-on-gold);}
.mm-status{display:inline-block;padding:.38em .9em;border-radius:999px;font-family:var(--mm-sans);font-weight:700;font-size:.78em;line-height:1.2;white-space:nowrap;}
.mm-status.booked{background:var(--mm-booked-bg);color:var(--mm-booked);}
.mm-status.interested{background:var(--mm-interested-bg);color:var(--mm-interested);}
.mm-status.open{background:var(--mm-open-bg);color:var(--mm-open);}

/* ---------- Surfaces --------------------------------------------------- */
.mm-card{background:var(--mm-card);border:1.5px solid var(--mm-hairline);border-radius:var(--mm-r);padding:1.4em 1.5em;}
.mm-card.white{background:#fff;}
.mm-card.hl{background:var(--mm-cream);border-color:var(--mm-gold);}
.mm-card h3,.mm-card .h{font-family:var(--mm-sans);font-weight:800;font-size:1em;color:var(--mm-ink);margin:0 0 .45em;}
.mm-card p{margin:0;font-size:.88em;line-height:1.55;color:var(--mm-body);}
.mm-card .tag{display:block;margin-bottom:.7em;}

/* Big win: the one result the page is about */
.mm-bigwin{background:var(--mm-cream);border:2px solid var(--mm-gold);border-radius:var(--mm-r);padding:1.25em 1.75em 1.35em;}
.mm-bigwin .mm-eyebrow{font-size:.66em;}
.mm-bigwin .head{font-family:var(--mm-display);font-weight:800;font-size:1.45em;line-height:1.2;color:var(--mm-ink);margin:.45em 0 .35em;letter-spacing:-.01em;}
.mm-bigwin p{margin:0;font-size:.88em;line-height:1.5;color:var(--mm-body);}

/* KPI card: a number, what it counts, where it comes from */
.mm-kpi{background:#fff;border:1.5px solid var(--mm-hairline);border-radius:var(--mm-r);padding:1.3em 1.4em 1.2em;}
.mm-kpi .n{font-family:var(--mm-display);font-weight:900;font-size:2.55em;line-height:1;letter-spacing:-.02em;color:var(--mm-ink);}
.mm-kpi.gold .n{color:var(--mm-gold);}
.mm-kpi .l{font-weight:800;font-size:.82em;color:var(--mm-ink);margin-top:.75em;}
.mm-kpi .c{font-size:.74em;color:var(--mm-muted);margin-top:.3em;line-height:1.4;}

/* Strip: a quiet row of dated facts */
.mm-strip{display:flex;align-items:center;gap:2.2em;background:var(--mm-card);border:1.5px solid var(--mm-hairline);border-radius:var(--mm-r);padding:.95em 1.5em;font-size:.82em;color:var(--mm-body);}
.mm-strip span{display:inline-flex;align-items:center;gap:.6em;}
.mm-strip span::before{content:'';width:.62em;height:.62em;border-radius:50%;background:var(--mm-gold);flex:none;}
.mm-strip b{color:var(--mm-ink);}

/* Quote band and call to action band */
.mm-qband{background:var(--mm-gold);border-radius:var(--mm-r);padding:1.2em 1.6em;color:var(--mm-on-gold);}
.mm-qband .q{font-weight:800;font-style:italic;font-size:1.1em;line-height:1.4;}
.mm-qband .s{font-weight:800;font-size:.66em;letter-spacing:.2em;text-transform:uppercase;color:var(--mm-on-gold-2);margin-top:.7em;}
.mm-cta{background:var(--mm-navy);border-radius:var(--mm-r);padding:1.4em 1.8em;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:2em;}
.mm-cta .t{font-family:var(--mm-display);font-weight:900;font-size:1.35em;line-height:1.15;}
.mm-cta .t .dot{color:var(--mm-gold);}
.mm-cta .who{font-size:.8em;line-height:1.7;color:var(--mm-on-navy-2);text-align:right;}
.mm-cta .who b{color:#fff;}

/* Numbered steps */
.mm-step{display:flex;gap:1em;align-items:flex-start;}
.mm-step .n{flex:none;width:2.1em;height:2.1em;border-radius:50%;border:2px solid var(--mm-gold);background:var(--mm-cream);color:var(--mm-gold-text);font-weight:800;font-size:.95em;display:flex;align-items:center;justify-content:center;}
.mm-step b{display:block;font-weight:800;color:var(--mm-ink);font-size:.95em;margin-bottom:.2em;}
.mm-step span{font-size:.86em;line-height:1.5;color:var(--mm-body);}

/* Tables */
.mm-table{width:100%;border-collapse:collapse;font-size:.85em;}
.mm-table th{font-weight:800;font-size:.78em;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-muted);text-align:left;padding:.7em .8em;border-bottom:1.5px solid var(--mm-hairline);}
.mm-table td{padding:.75em .8em;border-bottom:1px solid var(--mm-rule);color:var(--mm-text);}
.mm-table tr.hl td{background:var(--mm-cream);}
.mm-table td.num{font-family:var(--mm-display);font-weight:800;}

/* Header and footer for slides and pages */
.mm-head{display:flex;align-items:center;justify-content:space-between;}
.mm-head .folio{font-family:var(--mm-sans);font-weight:800;font-size:.72em;letter-spacing:.24em;text-transform:uppercase;color:var(--mm-gold-label);}
.mm-navy .mm-head .folio{color:var(--mm-gold);}
.mm-foot{font-size:.66em;color:var(--mm-faint);text-align:center;}
.mm-foot b{font-family:var(--mm-brand);font-weight:700;color:var(--mm-faint-strong);}

/* ---------- Kill the Slop lane ----------------------------------------- */
/* Ground and type: cream paper, warm ink, Montserrat only, 900 for display. */
.slop{background:var(--slop-paper);color:var(--slop-ink);font-family:var(--mm-brand);-webkit-font-smoothing:antialiased;}
.slop-lockup{display:inline-flex;align-items:center;gap:.8em;font-family:var(--mm-brand);font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;}
.slop-lockup img{height:2.75em;width:auto;display:block;flex:none;}
.slop-pill{display:inline-flex;align-items:center;gap:.7em;padding:.72em 1.3em;border-radius:999px;background:var(--slop-ink);color:var(--slop-paper);font-family:var(--mm-brand);font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;}
.slop-pill .dot{width:.7em;height:.7em;border-radius:50%;background:var(--mm-gold);flex:none;}
.slop-display{font-family:var(--mm-brand);font-weight:900;line-height:1;letter-spacing:-.035em;}

/* Marker strike: two hand-drawn gold strokes through the slop phrase.
   Markup: <span class="slop-strike">AI slop.<svg ...two paths...></svg></span> (see templates). */
.slop-strike{position:relative;display:inline-flex;align-self:flex-start;white-space:nowrap;}
.slop-strike > svg{position:absolute;z-index:2;left:-3%;top:.25em;width:106%;height:.6em;overflow:visible;pointer-events:none;}
.slop-strike > svg path{fill:none;stroke:var(--mm-gold);stroke-linecap:round;vector-effect:non-scaling-stroke;}
.slop-strike > svg path.a{stroke-width:.17em;}
.slop-strike > svg path.b{stroke-width:.07em;opacity:.9;}
/* Thin single strike for the grey slop list */
.slop-list{display:flex;flex-direction:column;gap:.5em;}
.slop-list > span{position:relative;display:inline-flex;align-self:flex-start;color:var(--slop-grey);font-weight:700;white-space:nowrap;}
.slop-list > span > svg{position:absolute;left:-2%;top:.3em;width:104%;height:.61em;overflow:visible;}
.slop-list > span > svg path{fill:none;stroke:var(--mm-gold);stroke-width:.167em;stroke-linecap:round;vector-effect:non-scaling-stroke;}

/* Highlighter swipe: a tilted gold block behind the human phrase. */
.slop-swipe{position:relative;display:inline-flex;align-self:flex-start;white-space:nowrap;}
.slop-swipe::before{content:'';position:absolute;z-index:0;left:-.12em;right:-.16em;bottom:.1em;height:.42em;background:var(--mm-gold);border-radius:.08em .16em .1em .14em;transform:rotate(-1.2deg);}
.slop-swipe > span,.slop-swipe > b{position:relative;z-index:1;}

/* Gold dot bullets and the URL sign-off */
.slop-bullets{display:flex;flex-direction:column;gap:.62em;}
.slop-bullets > div{display:flex;align-items:center;gap:.6em;font-weight:700;line-height:1.25;}
.slop-bullets > div::before{content:'';width:.52em;height:.52em;border-radius:50%;background:var(--mm-gold);flex:none;}
.slop-url{font-family:var(--mm-brand);font-weight:800;letter-spacing:-.01em;white-space:nowrap;}
.slop-rule{border-top:2px solid var(--slop-rule);}

/* WOW OR MANGOES stamp: size it with width/height on .slop-stamp. The SVG carries the logo. */
.slop-stamp{position:relative;flex:none;transform:rotate(-12deg);}
.slop-stamp svg{display:block;width:100%;height:100%;overflow:visible;}