/* ==========================================================================
   Mergical
   The whole design system. One file, no page specific sheets.

   Extracted from the homepage build. Token names are unchanged, and nothing
   outside :root carries a raw hex value, with one documented exception: the
   isometric hero palette in mergical.js, which is painted onto a canvas and
   cannot read a custom property.

   ONE UNIT
   There are no horizontal rules between sections. What separates them is
   space, heading weight and the card grids themselves:
     - no border under the hero, no border between sections
     - one surface the whole way down, --mg-white
     - one line in the page chrome, under the jump bar. The masthead has no
       border, so the two sticky bars do not stack two rules
     - the closing call to action is --mg-g10, so the page ends on a shift in
       tone rather than a wall

   SHAPE
   Zero border radius everywhere except the assistant panel and its input,
   which are rounded because that is how a chat surface reads. No shadows
   except under the assistant launcher and its panel.

   Order: fonts, tokens, base, chrome, buttons, hero, sections, cards, band,
   footer, forms, prose, assistant, reduced motion.
   ========================================================================== */

/* --- 1. Fonts. Self hosted, latin subset, no external request. ------------
   Plex Sans is a variable face covering 300, 400 and 600 from one file.
   Hanken Grotesk carries the logo wordmark and nothing else. It goes the
   moment there is a final logo SVG with outlined paths.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/plexsans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plexmono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/hanken-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root{
  --mg-white:#ffffff;
  --mg-g10:#f4f4f4;
  --mg-g20:#e0e0e0;
  --mg-g30:#c6c6c6;
  --mg-g40:#a8a8a8;
  --mg-g50:#8d8d8d;
  --mg-g60:#6f6f6f;
  --mg-g70:#525252;
  --mg-g80:#393939;
  --mg-g100:#161616;
  --mg-accent:#0f62fe;
  --mg-accent-2:#6929c4;
  --mg-accent-hover:#0043ce;
  --mg-accent-10:#edf5ff;
  --mg-accent-20:#d0e2ff;
  /* The card hover. Half a step under --mg-g10, so a card on the grey media
     panel still reads as lighter than the panel behind it. */
  --mg-hover:#f7f7f7;
  --mg-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mg-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mg-headh:66px;
  --mg-jumph:48px;
}

/* --- 3. Base ------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--mg-white);color:var(--mg-g100);font-family:var(--mg-sans);
  -webkit-font-smoothing:antialiased}
img{max-width:100%}

.mg-skip{position:absolute;left:-9999px;top:0;background:var(--mg-g100);color:var(--mg-white);
  padding:.75rem 1rem;z-index:60;font-size:.875rem}
.mg-skip:focus{left:0}

.mg-inner{max-width:1584px;margin:0 auto;padding:0 1rem}
@media (min-width:672px){.mg-inner{padding:0 2.5rem}}

/* Available to the whole site: text that is read but not seen. The assistant
   uses it for the speaker labels main.js writes into each message. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- 4. Masthead. No border here: the jump bar carries the only line. ----- */

.mg-head{position:sticky;top:0;z-index:40;background:var(--mg-white)}
.mg-head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--mg-headh)}
.mg-head-left{display:flex;align-items:center;gap:2.5rem;min-width:0}
.mg-head-right{display:flex;align-items:center;gap:.75rem}
.mg-logo{display:flex;align-items:center;text-decoration:none}
.mg-logo svg{display:block;flex:none}
.mg-logo:focus-visible{outline:2px solid var(--mg-accent);outline-offset:4px}

.mg-nav{display:none;gap:26px;font:400 14px/1 var(--mg-sans);color:var(--mg-g70)}
@media (min-width:1056px){.mg-nav{display:flex}}
.mg-nav a{color:inherit;text-decoration:none;transition:color 110ms cubic-bezier(.2,0,.38,.9)}
.mg-nav a:hover{color:var(--mg-g100)}
.mg-nav a[aria-current="page"]{color:var(--mg-g100)}
.mg-nav a:focus-visible{outline:2px solid var(--mg-accent);outline-offset:4px}

/* The menu below 1056px. A native <details>, so it opens with JavaScript off.
   main.js adds the conveniences: Escape, click away, and reset when the
   layout goes wide. Its breakpoint is 1056 as well, so the two agree. */
.mg-menu{position:relative}
@media (min-width:1056px){.mg-menu{display:none}}
.mg-menu > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  height:36px;padding:0 .75rem;font:600 11.5px/1 var(--mg-mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--mg-g100);border:1px solid var(--mg-g30)}
.mg-menu > summary::-webkit-details-marker{display:none}
.mg-menu > summary:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}
.mg-menu[open] > summary{background:var(--mg-g10)}
.mg-menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:41;margin:0;padding:0;
  list-style:none;min-width:190px;background:var(--mg-white);border:1px solid var(--mg-g20)}
.mg-menu-list a{display:block;padding:.75rem 1rem;font:400 14px/1.3 var(--mg-sans);
  color:var(--mg-g70);text-decoration:none;border-bottom:1px solid var(--mg-g20)}
.mg-menu-list li:last-child a{border-bottom:0}
.mg-menu-list a:hover{background:var(--mg-g10);color:var(--mg-g100)}
.mg-menu-list a[aria-current="page"]{color:var(--mg-g100)}
.mg-menu-list a:focus-visible{outline:2px solid var(--mg-accent);outline-offset:-2px}

/* --- 5. Jump bar --------------------------------------------------------- */

.mg-jump{position:sticky;top:var(--mg-headh);z-index:39;background:var(--mg-white);
  border-bottom:1px solid var(--mg-g20)}
.mg-jump-row{display:flex;align-items:stretch;height:var(--mg-jumph);overflow-x:auto;
  scrollbar-width:none}
.mg-jump-row::-webkit-scrollbar{display:none}
.mg-jump a{display:flex;align-items:center;white-space:nowrap;padding:0 1.25rem;
  font:400 14px/1 var(--mg-sans);color:var(--mg-g70);text-decoration:none;
  border-bottom:2px solid transparent;transition:color 110ms,border-color 110ms}
.mg-jump a:first-child{padding-left:0}
.mg-jump a:hover{color:var(--mg-g100)}
.mg-jump a[aria-current="true"]{color:var(--mg-g100);border-bottom-color:var(--mg-accent)}
.mg-jump a:focus-visible{outline:2px solid var(--mg-accent);outline-offset:-2px}

/* --- 6. Buttons ---------------------------------------------------------- */

/* The gap is load bearing. A label like "Schedule a <span>30 minute </span>call"
   becomes three flex items, and flex drops the whitespace between them, so
   without it the button reads SCHEDULE A30 MINUTECALL. The gap puts the word
   spaces back, and still reads correctly when the span is hidden on a small
   screen and only two items are left. */
.mg-btn{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;border:0;
  font:600 11.5px/1 var(--mg-mono);letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:background 110ms cubic-bezier(.2,0,.38,.9)}
.mg-btn:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}
.mg-btn-primary{padding:14px 22px;background:var(--mg-accent);color:var(--mg-white)}
.mg-btn-primary:hover{background:var(--mg-accent-hover)}
.mg-btn-primary:focus-visible{outline-color:var(--mg-g100)}
.mg-btn-secondary{padding:14px 22px;background:transparent;color:var(--mg-g100);
  border:1px solid var(--mg-g30)}
.mg-btn-secondary:hover{background:var(--mg-g20)}
.mg-btn-head{padding:11px 18px;font-size:11px;letter-spacing:.06em;
  background:var(--mg-accent);color:var(--mg-white)}
.mg-btn-head:hover{background:var(--mg-accent-hover)}
.mg-btn-head:focus-visible{outline-color:var(--mg-g100)}
.mg-btn-head span{display:none}
@media (min-width:672px){.mg-btn-head span{display:inline}}
.mg-btn[disabled]{opacity:.55;cursor:default}

/* --- 7. Hero. No bottom border, the page keeps running. ------------------ */

.mg-hero{position:relative;overflow:hidden;background:var(--mg-white)}
.mg-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mg-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(255,255,255,.97) 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,.10) 100%)}
/* The text column sits inside the same 1584px measure as every section, so
   the hero and the grid below it start on the same line at any width. */
.mg-hero-in{position:relative;max-width:1584px;margin:0 auto;padding:0 1rem}
@media (min-width:672px){.mg-hero-in{padding:0 2.5rem}}
.mg-hero-content{position:relative;min-height:560px;padding:4rem 0;display:flex;
  flex-direction:column;justify-content:center;gap:24px;max-width:760px}
.mg-eyebrow{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--mg-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mg-g70)}
.mg-eyebrow::before{content:"";width:24px;height:2px;flex:none;
  background:linear-gradient(90deg,var(--mg-accent),var(--mg-accent-2))}
.mg-hero h1{margin:0;font-weight:600;font-size:clamp(2.5rem,6.5vw,64px);line-height:1.04;
  letter-spacing:-.02em;color:var(--mg-g100);text-wrap:balance}
.mg-hero-lede{display:flex;flex-direction:column;gap:10px;max-width:540px}
.mg-hero-lede .lead{font:400 1.125rem/1.55 var(--mg-sans);color:var(--mg-g100)}
.mg-hero-lede .sub{font:300 1rem/1.55 var(--mg-sans);color:var(--mg-g70)}
.mg-hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
@media (prefers-reduced-motion:reduce){.mg-hero canvas{opacity:.9}}

/* The ad landing page puts the form beside the headline, on the canvas. */
.mg-hero--split .mg-hero-content{max-width:none;display:grid;gap:3rem;
  grid-template-columns:1fr;align-items:center}
@media (min-width:1056px){
  .mg-hero--split .mg-hero-content{grid-template-columns:minmax(0,1fr) minmax(0,480px);
    gap:4rem}
}
.mg-hero-copy{display:flex;flex-direction:column;gap:24px;max-width:640px}

/* Page header, for every page without the canvas. ------------------------- */
.mg-page-head{padding:4rem 0 0}
@media (min-width:672px){.mg-page-head{padding:5rem 0 0}}
/* The cap goes on the children, not on this element. It shares an element
   with .mg-inner, which centres what it holds, so a max-width here would
   centre the whole header instead of leaving it at the left gutter. */
.mg-page-head-in{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.mg-page-head-in > *{max-width:860px}
.mg-page-head h1{margin:0;font-weight:600;font-size:clamp(2.5rem,6.5vw,64px);
  line-height:1.04;letter-spacing:-.02em;color:var(--mg-g100);text-wrap:balance}
.mg-page-head p{margin:0;font-size:1.25rem;font-weight:400;line-height:1.55;
  color:var(--mg-g70);max-width:58ch}

/* --- 8. Sections. Space does the separating, not rules. ------------------ */

.mg-section{scroll-margin-top:calc(var(--mg-headh) + var(--mg-jumph));padding:5rem 0}
@media (min-width:672px){.mg-section{padding:6rem 0}}
.mg-section--tight{padding-bottom:0}
.mg-section-head{max-width:58ch;margin:0 0 3.5rem}
.mg-section-head h2{font-size:clamp(2.25rem,5vw,3.375rem);font-weight:300;line-height:1.15;
  letter-spacing:0;margin:0 0 1.5rem;max-width:20ch}
.mg-section-head .mg-eyebrow{margin:0 0 1.5rem}
.mg-section-head p{font-size:1.25rem;font-weight:400;line-height:1.55;color:var(--mg-g70);
  margin:0}
.mg-note{max-width:58ch;margin:2.5rem 0 0;font-size:.875rem;line-height:1.5;
  color:var(--mg-g70)}
.mg-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:3rem}

/* A service detail section on the services page. The heading clears both
   sticky bars, so linking to it never hides it behind the chrome. */
.mg-svc{scroll-margin-top:calc(var(--mg-headh) + var(--mg-jumph));padding:4rem 0 0}
@media (min-width:672px){.mg-svc{padding:5rem 0 0}}
.mg-svc-in{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:start}
@media (min-width:1056px){
  .mg-svc-in{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:4rem}
}
.mg-svc-art{background:var(--mg-g10);padding:1.5rem;display:flex;align-items:center;
  justify-content:center}
.mg-svc:nth-of-type(3n+2) .mg-svc-art{background:var(--mg-accent-10)}
.mg-svc:nth-of-type(3n+3) .mg-svc-art{background:var(--mg-white);border:1px solid var(--mg-g20)}
.mg-svc-art .mg-ill{display:block;width:100%;height:auto;max-height:240px}
.mg-svc-body h2{font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:400;line-height:1.2;
  letter-spacing:0;margin:0 0 1.5rem;max-width:24ch}
.mg-svc-body p{font-size:1rem;line-height:1.55;letter-spacing:.16px;color:var(--mg-g70);
  margin:0 0 1.25rem;max-width:64ch}
.mg-svc-body p:last-child{margin-bottom:0}

/* The anchors the old services page used. Kept so links from outside the
   site still land on the right section. */
.mg-legacy-anchor{display:block;height:0;overflow:hidden;
  scroll-margin-top:calc(var(--mg-headh) + var(--mg-jumph))}

/* Tool and platform names, set in type. We do not hold licensed logo files
   for other people's software, and would not use them without asking. */
.mg-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.5rem;padding:0;list-style:none}
.mg-tools li{font:500 11px/1 var(--mg-mono);letter-spacing:.06em;color:var(--mg-g70);
  border:1px solid var(--mg-g20);padding:7px 10px}

/* An illustrative example, inline in a section. Labelled, always. */
.mg-eg{border-left:2px solid var(--mg-accent);padding:0 0 0 1.25rem;margin:0 0 1.5rem;
  max-width:64ch}
.mg-eg-label{display:block;font:500 11px/1 var(--mg-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mg-g70);margin:0 0 .75rem}
.mg-eg p{margin:0;font-size:1rem;line-height:1.55;letter-spacing:.16px;color:var(--mg-g70)}

/* --- 9. Card grid -------------------------------------------------------- */

/* An <ol> when the cards are a real sequence, a <div> otherwise. Either way
   the grid itself carries no list styling: a card with display:flex is not a
   list item box, so the marker is gone and the number is set in the card.

   The hairlines are drawn by the cards themselves rather than by a grey
   ground showing through 1px gaps. Each card carries its right and bottom
   edge, the grid carries the top and the left, and the two meet to make one
   line between neighbours. The point of doing it this way: a cell with no
   card in it has no lines at all, so a short last row simply stops and
   leaves white, and every card stays the same width. */
.mg-grid{display:grid;gap:0;grid-template-columns:1fr;background:var(--mg-white);
  border-top:1px solid var(--mg-g20);border-left:1px solid var(--mg-g20);
  margin:0;padding:0;list-style:none}
@media(min-width:672px){.mg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1056px){.mg-grid{grid-template-columns:repeat(3,1fr)}}

.mg-card{display:flex;flex-direction:column;background:var(--mg-white);text-decoration:none;
  color:inherit;min-height:100%;
  border-right:1px solid var(--mg-g20);border-bottom:1px solid var(--mg-g20);
  transition:background 110ms cubic-bezier(.2,0,.38,.9)}
a.mg-card:hover{background:var(--mg-hover)}
.mg-card:focus-visible{outline:2px solid var(--mg-accent);outline-offset:-2px}

.mg-media{padding:1.5rem 1.5rem 0;display:flex;align-items:flex-end;justify-content:center}
.mg-body{padding:2rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.mg-title{font-size:1.5rem;font-weight:400;line-height:1.25;margin:0 0 1.25rem;
  letter-spacing:0;max-width:22ch}
.mg-copy{font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:.16px;
  color:var(--mg-g70);margin:0 0 2.5rem;max-width:40ch}
.mg-copy:last-child{margin-bottom:0}
.mg-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;color:var(--mg-accent);font-size:1rem;line-height:1.375;letter-spacing:.16px}
.mg-card:hover .mg-cta{color:var(--mg-accent-hover);text-decoration:underline}
.mg-cta svg{flex:none;transition:transform 110ms cubic-bezier(.2,0,.38,.9)}
.mg-card:hover .mg-cta svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.mg-card,.mg-cta svg{transition:none}}

/* Service cards: filled illustrations on an alternating panel ------------- */
.mg-grid--svc .mg-media{background:var(--mg-g10);min-height:196px}
.mg-grid--svc .mg-card:nth-child(3n+2) .mg-media{background:var(--mg-accent-10)}
.mg-grid--svc .mg-card:nth-child(3n+3) .mg-media{background:var(--mg-white)}
.mg-grid--svc .mg-ill{display:block;width:100%;height:auto;max-height:180px}
.mg-ill .box{fill:var(--mg-white);stroke:var(--mg-g30);stroke-width:1.5}
.mg-ill .slab{fill:var(--mg-g20)}
.mg-ill .slab-d{fill:var(--mg-g40)}
.mg-ill .ink{fill:var(--mg-g100)}
.mg-ill .acc{fill:var(--mg-accent)}
.mg-ill .acc-soft{fill:var(--mg-accent-20)}
.mg-ill .paper{fill:var(--mg-white)}
.mg-grid--svc .mg-ill .ln,.mg-svc-art .mg-ill .ln{fill:none;stroke:var(--mg-g40);stroke-width:1.5}
.mg-ill .ln-acc{fill:none;stroke:var(--mg-accent);stroke-width:1.5}
.mg-ill .dash{stroke-dasharray:4 4}

/* Case study cards: 96px line-art mark, no panel -------------------------- */
.mg-card--case .mg-media{padding:2rem 1.5rem 0;justify-content:flex-start;background:none}
.mg-card--case .mg-ill{display:block;width:96px;height:96px}
.mg-card--case .mg-ill .ln{fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}

/* A card that is not a link: a tier, a principle, a step ------------------ */
.mg-card--static .mg-body{padding:2rem 1.5rem}
.mg-card--static .mg-title{font-size:1.25rem}
.mg-card-lead{font:500 11px/1 var(--mg-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mg-g70);margin:0 0 1.25rem}
.mg-card-shape{font-size:.875rem;line-height:1.5;color:var(--mg-g100);margin:0 0 1.25rem}
.mg-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem}
.mg-list li{position:relative;padding-left:1.25rem;font-size:1rem;line-height:1.5;
  letter-spacing:.16px;color:var(--mg-g70)}
.mg-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;
  background:var(--mg-accent)}
.mg-list--no li::before{background:var(--mg-g40)}

/* Steps. A real sequence, so the numbering is doing work here. */
.mg-grid--steps{counter-reset:none}
@media (min-width:1056px){.mg-grid--steps{grid-template-columns:repeat(4,1fr)}}
.mg-step-n{font:600 11.5px/1 var(--mg-mono);letter-spacing:.06em;color:var(--mg-accent);
  margin:0 0 1.25rem}
.mg-step-when{margin-top:auto;padding-top:1.5rem;font:500 11px/1.4 var(--mg-mono);
  letter-spacing:.06em;color:var(--mg-g70)}

/* --- 10. Closing call to action ----------------------------------------- */

.mg-band{background:var(--mg-g10);
  scroll-margin-top:calc(var(--mg-headh) + var(--mg-jumph))}
/* The same trap as the page header. This element also carries .mg-inner,
   which centres what it holds, so the width cap goes on the children.
   Put it here and the whole band drifts into the middle of the page while
   everything above it starts at the left gutter. */
.mg-band-in{padding:5rem 0;display:flex;flex-direction:column;gap:1.5rem;
  align-items:flex-start}
.mg-band-in > *{max-width:48rem}
@media (min-width:672px){.mg-band-in{padding:6rem 0}}
.mg-band h2{font-size:clamp(2.25rem,5vw,3.375rem);font-weight:300;line-height:1.15;margin:0;
  max-width:20ch}
.mg-band p{font-size:1.25rem;line-height:1.55;color:var(--mg-g70);margin:0}
.mg-band-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:.5rem}

/* --- 11. Footer ---------------------------------------------------------- */

.mg-foot{background:var(--mg-g10);padding:0 0 3rem;font-size:.875rem;line-height:1.6;
  color:var(--mg-g70)}
/* A page that does not end on the band needs the footer to open its own
   space, or the first line sits against the edge of the grey. */
.mg-foot--open{padding-top:3rem}
.mg-foot a{color:var(--mg-accent);text-decoration:none}
.mg-foot a:hover{color:var(--mg-accent-hover);text-decoration:underline}
.mg-foot a:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}
.mg-foot-row{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between}
.mg-foot strong{color:var(--mg-g100);font-weight:600}

/* --- 12. Forms ----------------------------------------------------------- */

.mg-form{display:flex;flex-direction:column;gap:1.5rem;max-width:34rem}
.mg-field{display:flex;flex-direction:column;gap:.5rem}
.mg-field label{font:400 .875rem/1.4 var(--mg-sans);color:var(--mg-g100)}
.mg-field .opt{color:var(--mg-g70)}
.mg-field input,.mg-field textarea{width:100%;font:400 1rem/1.5 var(--mg-sans);
  color:var(--mg-g100);background:var(--mg-g10);border:0;border-bottom:1px solid var(--mg-g50);
  padding:.75rem;border-radius:0}
.mg-field textarea{resize:vertical;min-height:96px}
.mg-field input::placeholder,.mg-field textarea::placeholder{color:var(--mg-g60)}
.mg-field input:focus-visible,.mg-field textarea:focus-visible{outline:2px solid var(--mg-accent);
  outline-offset:-2px}
.mg-field input[aria-invalid="true"],.mg-field textarea[aria-invalid="true"]{
  border-bottom-color:var(--mg-accent-2)}
/* The error is text next to the field. Colour alone never carries it. */
.mg-field-error{font:400 .875rem/1.4 var(--mg-sans);color:var(--mg-g100);
  display:flex;align-items:flex-start;gap:.5rem}
.mg-field-error::before{content:"";flex:none;width:2px;align-self:stretch;
  background:var(--mg-accent-2)}
.mg-form-msg{font:400 .875rem/1.5 var(--mg-sans);color:var(--mg-g100);
  border-left:2px solid var(--mg-accent-2);padding-left:.75rem;margin:0}
.mg-form-note{font:400 .875rem/1.5 var(--mg-sans);color:var(--mg-g70);margin:0;max-width:44ch}
.mg-form-note a{color:var(--mg-accent)}
.mg-form .mg-btn{align-self:flex-start}

/* The honeypot. Off screen for people, and left empty by them. */
.mg-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.mg-done{border-left:2px solid var(--mg-accent);padding-left:1.25rem;max-width:34rem}
.mg-done h2{font-size:1.5rem;font-weight:400;line-height:1.25;margin:0 0 1rem}
.mg-done p{font-size:1rem;line-height:1.55;color:var(--mg-g70);margin:0}
.mg-done a{color:var(--mg-accent)}

/* The column beside a form: email, phone, where we work. */
.mg-aside{display:flex;flex-direction:column;gap:2.5rem}
.mg-aside h2,.mg-aside h3{font-size:1.25rem;font-weight:400;line-height:1.25;margin:0 0 .75rem}
.mg-aside p{font-size:1rem;line-height:1.55;color:var(--mg-g70);margin:0 0 .75rem}
.mg-aside p:last-child{margin-bottom:0}
.mg-aside a{color:var(--mg-accent);text-decoration:none}
.mg-aside a:hover{color:var(--mg-accent-hover);text-decoration:underline}
.mg-big{font-size:1.125rem;line-height:1.4;word-break:break-word}
.mg-linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--mg-accent);
  cursor:pointer;text-align:left}
.mg-linkbtn:hover{color:var(--mg-accent-hover);text-decoration:underline}
.mg-linkbtn:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}

.mg-two{display:grid;gap:3rem;grid-template-columns:1fr;align-items:start}
@media (min-width:1056px){.mg-two{grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:4rem}}
.mg-two--even{grid-template-columns:1fr}
@media (min-width:672px){.mg-two--even{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The form on the ad landing page, over the canvas. */
.mg-form-card{background:var(--mg-white);border:1px solid var(--mg-g20);padding:2rem 1.5rem}
@media (min-width:672px){.mg-form-card{padding:2.5rem 2rem}}
.mg-form-card h2{font-size:1.5rem;font-weight:400;line-height:1.25;margin:0 0 .5rem}
.mg-form-card .mg-form{max-width:none}
.mg-form-card > p{font-size:.875rem;line-height:1.5;color:var(--mg-g70);margin:0 0 1.5rem}

/* --- 13. Long form text -------------------------------------------------- */

.mg-prose{max-width:68ch}
.mg-prose h2{font-size:1.5rem;font-weight:400;line-height:1.25;margin:3rem 0 1rem}
.mg-prose h2:first-child{margin-top:0}
.mg-prose p,.mg-prose li{font-size:1rem;line-height:1.6;color:var(--mg-g70)}
.mg-prose p{margin:0 0 1rem}
.mg-prose ul{margin:0 0 1rem;padding-left:1.25rem}
.mg-prose li{margin:0 0 .75rem}
.mg-prose strong{color:var(--mg-g100);font-weight:600}
.mg-prose a{color:var(--mg-accent)}
.mg-prose a:hover{color:var(--mg-accent-hover)}

/* ==========================================================================
   14. The assistant

   The launcher and the panel are new. What runs inside them is not: the log,
   the suggested questions, the composer and every class main.js writes are
   the existing widget, restyled. Same endpoint, same streaming, same
   conversation id, same system prompt on the server.

   Without JavaScript the launcher is hidden rather than left as a button
   that does nothing. Every page carries the email address instead.
   ========================================================================== */

.mg-ai-launch{display:none}
.js .mg-ai-launch{position:fixed;right:1.5rem;bottom:1.5rem;z-index:50;width:64px;height:64px;
  padding:0;border:0;border-radius:50%;background:none;cursor:pointer;line-height:0;
  display:block;filter:drop-shadow(0 6px 20px rgba(22,22,22,.22));
  transition:transform 150ms cubic-bezier(.2,0,.38,.9)}
.mg-ai-launch:hover{transform:scale(1.06)}
.mg-ai-launch:focus-visible{outline:2px solid var(--mg-g100);outline-offset:4px}
.mg-ai-launch svg{display:block;width:64px;height:64px}
.js .mg-ai-launch[aria-expanded="true"]{opacity:0;pointer-events:none}

.mg-ai{position:fixed;right:1.5rem;bottom:1.5rem;z-index:51;
  width:min(400px,calc(100vw - 2rem));max-height:min(620px,calc(100vh - 3rem));
  max-height:min(620px,calc(100dvh - 3rem));
  display:none;flex-direction:column;background:var(--mg-white);
  border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(22,22,22,.24)}
.mg-ai.is-open{display:flex}
@media (min-width:672px){.mg-ai,.js .mg-ai-launch{right:2.5rem}}

.mg-ai-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.875rem 1rem;border-bottom:1px solid var(--mg-g20)}
.mg-ai-head strong{font-size:.9375rem;font-weight:600}
.mg-ai-head span{display:block;font-size:.75rem;color:var(--mg-g70);font-weight:400}
.mg-ai-close{border:0;background:none;padding:.375rem;cursor:pointer;color:var(--mg-g70);
  line-height:0}
.mg-ai-close:hover{color:var(--mg-g100)}
.mg-ai-close:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}

/* The log. main.js appends .msg elements into this. */
.chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;
  min-height:180px}
.msg{font-size:.9375rem;line-height:1.5;padding:.625rem .875rem;max-width:88%;
  white-space:pre-wrap}
.msg-bot{background:var(--mg-g10);color:var(--mg-g100);align-self:flex-start}
.msg-you{background:var(--mg-accent);color:var(--mg-white);align-self:flex-end}
.msg-error{align-self:stretch;max-width:100%;background:none;padding:0;font-size:.8125rem;
  color:var(--mg-g100);border-left:2px solid var(--mg-accent-2);padding-left:.75rem;
  white-space:normal}
.msg-you a{color:var(--mg-white)}
.msg-bot a,.msg-error a{color:var(--mg-accent)}
/* main.js writes the speaker into every message. The bubble already says who
   is talking, so it is read but not seen. */
.msg-role{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.typing{display:inline-flex;gap:4px;align-items:center;height:1.5em}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mg-g50);
  animation:mg-blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes mg-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.chat-seeds{display:flex;flex-wrap:wrap;gap:6px;padding:0 1rem 1rem}
.seed{font:400 .8125rem/1.3 var(--mg-sans);color:var(--mg-g70);background:var(--mg-white);
  border:1px solid var(--mg-g20);padding:8px 10px;cursor:pointer;text-align:left}
.seed:hover{border-color:var(--mg-g50);color:var(--mg-g100)}
.seed:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}

.mg-ai-bar{display:flex;align-items:center;gap:.75rem;padding:.75rem;
  background:linear-gradient(90deg,var(--mg-accent) 0%,var(--mg-accent-2) 100%)}
.mg-ai-field{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--mg-white);
  border-radius:10px;padding:.5rem .5rem .5rem .875rem;min-width:0}
.chat-input{flex:1;min-width:0;border:0;outline:0;background:none;resize:none;
  font:400 .9375rem/1.4 var(--mg-sans);color:var(--mg-g100);max-height:112px}
.chat-input::placeholder{color:var(--mg-g60)}
.chat-input:focus-visible{outline:2px solid var(--mg-accent);outline-offset:2px}
.chat-send{border:0;background:none;padding:.25rem;cursor:pointer;color:var(--mg-g50);
  line-height:0;transition:color 110ms}
.chat-send:hover{color:var(--mg-accent)}
.chat-send[disabled]{opacity:.5;cursor:default}
.chat-send:focus-visible,.mg-ai-icon:focus-visible{outline:2px solid var(--mg-accent);
  outline-offset:2px}
.mg-ai-icon{border:0;background:none;padding:.25rem;cursor:pointer;color:var(--mg-white);
  line-height:0;opacity:.9;text-decoration:none}
.mg-ai-icon:hover{opacity:1}
.mg-ai-icon:focus-visible{outline-color:var(--mg-white)}
.mg-ai-legal{margin:0;padding:.75rem 1rem;font-size:.6875rem;line-height:1.5;
  color:var(--mg-g70);border-top:1px solid var(--mg-g20)}
.mg-ai-legal a{color:var(--mg-accent)}

@media (prefers-reduced-motion:reduce){
  .mg-ai-launch{transition:none}
  .typing i{animation:none;opacity:.6}
}