/* ============================================================================
   Emmerai — Marketing Site Shared Stylesheet
   ============================================================================
   Shared across every marketing page (index.html, /platform/*.html, pricing,
   about, contact, etc.) so visual changes happen in one place, even though
   each page is its own separate static HTML file.

   Token naming note: this follows the naming already shipped in
   intake.html / admin-partners.html (--accent = dark text, --brand = teal),
   NOT the Emmerai Design System Reference doc's naming (--text-1, --accent).
   Same colors, different variable names between the doc and the shipped
   code — matching what's already live takes priority. Worth reconciling
   the doc's naming to this convention next time that doc is touched.

   --brand-rich (#174C47) is the Emerald Teal Rule color — the ONLY teal
   permitted on light/white backgrounds (text, links, borders, accent bars).
   --brand (#2B8C82) is safe only on dark backgrounds, at designer discretion.
   ============================================================================ */

:root {
  --bg: #F8F7F4;
  --surface: #FFFFFF;
  --border: rgba(40,50,60,0.10);
  --border-focus: rgba(40,50,60,0.28);
  --accent: #28323C;              /* primary text / dark UI */
  --brand: #2B8C82;                /* teal — dark backgrounds only */
  --brand-rich: #174C47;           /* teal — the only shade safe on light backgrounds (Emerald Teal Rule) */
  --brand-dim: rgba(43,140,130,0.10);
  --radius: 10px;
  --radius-sm: 7px;
  --nav-logo-height: 71.4px;       /* SINGLE SOURCE OF TRUTH for primary-nav
    logo size, every page, every route. 51px x 1.4 (40% bigger), per
    explicit sizing request — verified live via JS injection + screenshot
    before committing this value; no clipping, stays aligned with nav
    links. Change this one value to resize the logo everywhere at once —
    do not add page-specific height/width overrides anywhere else; use
    .nav-logo-link / .nav-logo-img (below) with no inline sizing. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display-serif {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ── Site nav — shared across every marketing page ──────────────────────── */
/* Hero uses the transparent/dark variant (nav-on-dark); interior pages that
   don't have a full-bleed dark hero should use nav-on-light instead. */

.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 56px;
}

.site-nav.nav-on-light {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-nav .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Canonical primary-nav logo — the ONLY sizing rule for the nav logo,
   anywhere it appears (homepage hero nav, every interior marketing page,
   every /platform/*.html page). Fixed height + width:auto preserves
   aspect ratio regardless of the source PNG's own intrinsic dimensions;
   object-fit:contain guarantees no cropping/stretching. The black and
   white logo variants share this exact same class pair — swapping which
   PNG is in `src` is the only thing that should ever differ per page.
   No page should define its own height/width/position for this element;
   if the logo needs to be a different size, change --nav-logo-height
   above, once, and every instance updates together. ── */
.nav-logo-link {
  display: flex;
  align-items: center;
  height: var(--nav-logo-height);
}

.nav-logo-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-on-dark .nav-links a,
.nav-on-dark .nav-links button,
.nav-on-dark .nav-actions .nav-login {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.nav-on-light .nav-links a,
.nav-on-light .nav-links button,
.nav-on-light .nav-actions .nav-login {
  color: var(--accent);
}

.nav-links a,
.nav-links button {
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}

/* ── Nav hover ─────────────────────────────────────────────────────────────
   The four top-level nav items (Platform, How It Works, Pricing, About) and
   the Log in link had no hover state, on any of the thirteen pages. The
   pill button, the CTA button and the dropdown items already did — this is
   the gap between them, not the whole nav.

   CHILD COMBINATOR IS LOAD-BEARING. `.nav-links a` would also match the
   five links inside .platform-dropdown, which sit deeper in the same list.
   Those are dark text on a white panel with their own background hover, and
   on the homepage's dark nav they would inherit the light-teal colour below
   and become near-invisible on white. `> li >` restricts this to the
   top-level items and leaves the dropdown's own rule alone.

   The two hover colours are not a stylistic pick: on light backgrounds the
   Emerald Teal Rule permits #174C47 (--brand-rich) and nothing lighter; on
   dark the restriction lifts, and #5DCAA5 is already this site's accent on
   dark surfaces (the How Emmerai Thinks eyebrow, the hero arrows). Each
   background gets the shade that is correct for it. */

.nav-links > li > a,
.nav-links > li > button,
.nav-actions .nav-login {
  transition: color 0.15s ease;
}

/* WHY .site-nav IS IN THESE SELECTORS. Several pages carry a local copy of
   the nav colour rules in their own <style> block, at three classes:

     .site-nav.nav-on-light .nav-links > li > a { color: #28323c; }

   Written as `.nav-on-light .nav-links > li > a:hover` these rules score
   the same (two classes plus a pseudo-class ties three classes), and on a
   tie the later rule wins — the page's inline <style> always loads after
   this external file, so the page pinned the colour in every state and the
   hover silently did nothing. Verified on pricing.html: the rule parsed,
   the selector matched, and no colour ever changed.

   Adding .site-nav takes these to three classes plus a pseudo-class, which
   outranks the page copies without needing !important and without editing
   twelve files. */

/* AN UNDERLINE CARRIES THIS, NOT THE COLOUR CHANGE. Colour alone shipped
   first and was invisible in use — on a light nav that meant #28323C to
   #174C47, near-black to very dark teal, which at 15px nobody registers.
   The obvious repair, a brighter teal, is not available: the Emerald Teal
   Rule permits #174C47 and nothing lighter on light backgrounds. So the
   legible signal has to come from something other than hue.

   Verified by forcing the hover colour on directly from the console and
   watching the nav — no perceptible change. Worth remembering before
   anyone "simplifies" this back to a colour swap.

   text-decoration rather than an ::after bar, deliberately:
   pricing.html's current-page indicator (.pricing-nav-active::after) is
   already an ::after on one of these very links, and a second one would
   have to fight it. */

.site-nav.nav-on-dark .nav-links > li > a:hover,
.site-nav.nav-on-dark .nav-links > li > a:focus-visible,
.site-nav.nav-on-dark .nav-links > li > button:hover,
.site-nav.nav-on-dark .nav-links > li > button:focus-visible,
.site-nav.nav-on-dark .nav-actions .nav-login:hover,
.site-nav.nav-on-dark .nav-actions .nav-login:focus-visible {
  color: #5DCAA5;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.site-nav.nav-on-light .nav-links > li > a:hover,
.site-nav.nav-on-light .nav-links > li > a:focus-visible,
.site-nav.nav-on-light .nav-links > li > button:hover,
.site-nav.nav-on-light .nav-links > li > button:focus-visible,
.site-nav.nav-on-light .nav-actions .nav-login:hover,
.site-nav.nav-on-light .nav-actions .nav-login:focus-visible {
  color: var(--brand-rich);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.nav-links .has-dropdown {
  position: relative;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-login {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-rich);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 13px 24px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-pill:hover { background: #123833; }

/* Homepage dark hero only (.nav-on-dark) — was a solid white pill (Figma
   node 494:3/494:4), replaced per direct request: the white fill was
   pulling too much visual weight away from the center "Get Started"
   CTA, and making both buttons the same green read as "too much green."
   Ghost outline instead — transparent fill, thin low-opacity border, so
   Create account still reads clearly as an action but carries zero
   color weight against the green CTA. Interior/light pages keep the
   base .btn-pill above untouched; this override only ever applies on
   the dark hero. */
.nav-on-dark .btn-pill {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F4F3EF;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nav-on-dark .btn-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Platform dropdown menu ──────────────────────────────────────────────── */

.platform-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  width: 600px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(10,13,15,0.18);
  padding: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  z-index: 30;
}

.platform-dropdown.open { display: grid; }

.nav-links .platform-dropdown a {
  display: block;
  padding: 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--accent);
  text-shadow: none;
}

.nav-links .platform-dropdown a:hover { background: var(--bg); }

.platform-dropdown .item-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.platform-dropdown .item-desc {
  font-size: 13px;
  color: rgba(40,50,60,0.6);
  line-height: 1.4;
}

/* ── CTA button (primary, dark fill) — used across all marketing pages ──── */

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-rich);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 15px 26px;
  font-size: 15.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-cta:hover { background: #123833; }

/* ── Authenticated marketing navigation ──────────────────────────────────
   Driven entirely by the `is-authed` class that emmerai-marketing.js sets on
   <html> from <head>, before the nav paints. Deliberately CSS rather than a
   DOM rewrite: a JS swap after DOMContentLoaded would render "Create account"
   for a frame and then replace it — a visible glitch on the exact page a
   person lands on immediately after creating an account.

   Signed out (default, unchanged):  Log in   [Create account]
   Signed in:                                 [Open Emmerai →]

   REVISED. This previously read "no account menu, no sign-out", and named
   the consequence honestly: someone signed into the wrong account had no way
   to switch from here. That dead end has now been closed by direct decision.
   The nav shows WHO is signed in, with sign-out inside it:

       [ adam@emmerai.com v ]   [ Open Emmerai -> ]
                    +- Log out

   A bare "Log out" button was considered and rejected: it fixes the escape
   route but not the underlying problem, which is that "Open Emmerai" gives
   no indication of which account it will open. Showing the identity answers
   that BEFORE the click. Still not an account-management surface — one
   identity, one action.

   The pill keeps its own base styling, so this inherits the nav-on-dark ghost
   treatment on the homepage hero and the solid teal on interior light pages
   automatically — same element, same slot, no layout shift between states. */

html.is-authed .nav-actions .nav-login { display: none; }

/* font-size:0 hides the "Create account" text node without removing the
   element (which would take its padding and box with it); ::before supplies
   the replacement at the real size. The href and aria-label are corrected in
   emmerai-marketing.js — CSS can do neither. */
/* The pill is REMOVED when signed in, not relabelled. It previously became
   "Open Emmerai" via font-size:0 plus ::before, leaving two controls side by
   side: a quiet identity label and a filled button. That put the weaker of
   the two in charge of the more important question — which account am I
   about to open. Now there is one control: the account IS the button, and
   both actions live inside it. */
html.is-authed .nav-actions .btn-pill { display: none; }

/* Account menu. Injected by emmerai-marketing.js only when a real (non
   anonymous) session exists, so it never appears for a signed-out or
   anonymous visitor. Hidden by default in case the markup is present
   before the class is set — same anti-glitch reasoning as the pill above. */
.nav-account { display: none; position: relative; }
html.is-authed .nav-actions .nav-account { display: inline-flex; }

/* MEASURED ON THE LIVE HERO: at 0.72 opacity against a near-black
   background this was effectively unreadable. "Secondary" has to mean
   quieter than the pill, not invisible — a label nobody can read fails
   the one job it has, which is telling you which account you are about
   to open. Explicit colour rather than opacity, so the value is the
   rendered value and does not compound with anything inherited. */
/* Subtle, not shouty. Three passes to land here: 0.72 opacity was
   unreadable, 0.82 read as secondary next to a filled pill, and replacing
   the pill outright over-corrected into a large button. An email address
   is context, not a call to action — it needs to be legible and clickable,
   nothing more. No fill, no border, smaller type, high-contrast ink. */
.nav-account-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 8px 2px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  /* Emmerai green at FULL strength, no alpha. White at 0.9 still read as
     grey against the near-black hero — the fourth time this control has
     been too quiet, so the value is now solid rather than a fraction of
     something. #5FA99F is the same teal the app's project sidebar uses on
     dark surfaces, so it is a house colour rather than a new one. */
  color: #5FA99F; max-width: 260px;
  transition: color 0.15s ease;
}
.nav-account-btn:hover { color: #7FC4B8; }
.nav-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-caret { font-size: 9px; opacity: 0.85; }

.nav-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 190px; padding: 6px;
  background: #16181c; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 9px; box-shadow: 0 14px 34px rgba(0,0,0,0.4);
}
.nav-account-menu[hidden] { display: none; }
.nav-account-menu a,
.nav-account-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 9px 11px; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.92);
}
.nav-account-menu a { text-decoration: none; }
.nav-account-menu a:hover,
.nav-account-menu button:hover { background: rgba(255,255,255,0.08); }
/* Going in and signing out are different kinds of action; a thin rule keeps
   them from reading as one undifferentiated list. */
.nav-account-sep { height: 1px; background: rgba(255,255,255,0.12); margin: 5px 4px; }

/* Interior pages are light, so the trigger needs dark ink there while the
   dropdown itself stays dark in both places. */
/* Interior pages are light, so the ink flips. Still no fill — the teal
   button was doing a job this control does not have. */
/* MEASURED LIVE: body.className is EMPTY on the homepage, so the earlier
   `body:not(.home)` rule matched there and painted the dark-green
   light-page colour onto a black hero. There is no `home` class — I
   invented one. The stylesheet already distinguishes surfaces with
   .nav-on-dark / .nav-on-light on the nav itself, which is what every
   other rule in this file keys off, so this does the same.
   Default above is the dark-surface teal; this overrides only where the
   nav has explicitly declared itself light. */
.nav-on-light .nav-account-btn { color: #174c47; }
.nav-on-light .nav-account-btn:hover { color: #0f3733; }

@media (max-width: 720px) {
  /* The pill alone is the priority at this width; identity is available
     inside the app. */
  .nav-account { display: none !important; }
}

/* ── PRIMARY NAV, NARROW ─────────────────────────────────────────────
   MEASURED, NOT ESTIMATED. .nav-links is a flex row with 36px gaps and
   no wrap. It compresses to a hard floor of 596px and then overflows the
   page rather than the nav: measured live at a 390px viewport, the
   document scrolls sideways by 206px on how-it-works, 204 on contact and
   on security, and 187 on privacy and on terms. Nothing inside the
   footer contributes to any of it. The links themselves still fit down
   to roughly 620px, below which the row cannot compress further.

   index.html has carried `.nav-links { display: none }` below 900px
   since the hero frame was built, with a note calling the mobile nav a
   follow-up pass. That rule sits in index.html's own <style> block, so
   the ten other pages never received it. This is the same decision,
   written once, in the file they all load.

   THIS IS A DEFERRAL, NOT A MOBILE NAV. Below 900px the primary links
   cannot be reached from the top of the page. They are reachable from
   the footer, which now carries every one of them at a 44px target on
   all eight pages. When a real mobile nav is built, this rule is the
   thing it replaces — and 900px is the one number it has to agree with.

   900px rather than the ~620px the row actually needs, so that all eight
   marketing pages behave identically at every width. The cost is stated
   plainly: between 620 and 900 the links would still have fitted. */
@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* NAV:MEGA-MENU-CSS START */
/* ── PLATFORM MEGA-MENU ───────────────────────────────────────────────
   Figma node 1225:1365. Every number below is measured from that node,
   not estimated. Kept in this page's own <style> block on purpose while
   only index.html is converted: emmerai-marketing.css is shared by all
   eleven public pages, and the other ten still carry the old
   .platform-dropdown markup. New pm- class names mean nothing here can
   reach them. This whole block moves to the shared stylesheet at
   propagation time, once nav_menu.py exists.

   TOKENS ARE MENU-SPECIFIC BY DESIGN. #004D47 and #3FA69A are new to the
   codebase and are declared here rather than replacing --brand-rich.
   #004D47 is DARKER than --brand-rich (#174C47), so it satisfies the
   Emerald Teal Rule on a light surface. #3FA69A is lighter and would
   violate it, which is why it appears only on the dark right panel,
   where the rule lifts. */
.pm-mega {
  --pm-emerald-dark: #004D47;   /* arrows and hovered titles, light panel only */
  --pm-emerald-lift: #3FA69A;   /* eyebrow and link, dark panel only */
  --pm-panel: #F8F7F4;

  position: absolute;
  top: 100%;
  left: 50%;
  /* translateX(-50%) is the resting transform, so the open animation has
     to carry it too or the panel jumps 587px left as it animates. */
  transform: translateX(-50%) translateY(-7px) scale(0.99);
  width: min(1174px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 598fr 576fr;   /* 51/49, from the Figma node */
  min-height: 430px;
  background: var(--pm-panel);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(10, 13, 15, 0.22);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 200ms;
}

.pm-mega.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s;
}

/* Closing is faster than opening, per the motion spec. */
.pm-mega:not(.open) {
  transition-duration: 150ms, 150ms, 0s;
  transition-delay: 0s, 0s, 150ms;
}

/* ── Backdrop ─────────────────────────────────────────────────────────
   WHAT THIS ACTUALLY DOES, MEASURED BY LOOKING AT IT: the point is not
   to separate the panel from the photograph, which was the original
   theory. At 0.45 the hero headline and the Start a project CTA fall to
   roughly the same visual weight as the dimmed image, so the panel
   becomes the only lit thing on screen. The panel gains no contrast; the
   page goes quiet around it.

   Tried live at three values before choosing. 0.25 was not legible as a
   change. 0.62 turned a navigation menu into a modal, which is a heavier
   gesture than a nav has earned in this design language.

   z-index 19 puts it under .pm-mega (30) and under .site-nav (20), so
   the nav stays lit and clickable while the page behind it dims.

   HOMEPAGE VALUE. This dims a dark photograph. The ten interior pages
   put this nav on a light background, where 0.45 dims white and reads
   considerably heavier. Settle that value when the shared version is
   built rather than assuming this one carries over. */
.pm-scrim {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(8, 10, 10, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Same duration and same curve as the panel, deliberately. A backdrop
     that appears instantly under a panel that eases in is exactly the
     over-animated tell the motion spec rules out, in reverse. */
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 200ms;
}

.pm-scrim.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s;
}

.pm-scrim:not(.open) {
  transition-duration: 150ms, 0s;
  transition-delay: 0s, 150ms;
}

/* ── Left panel ── */
.pm-mega-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 2px 20px;
  padding: 40px 32px;
}

.nav-links a.pm-item,
.pm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 4px 13px 0;
  text-decoration: none;
  text-shadow: none;
  border-radius: 8px;
}

/* NO CARD, PER THE SPEC. The hover response is carried by the title
   colour, the arrow, and the icon container only. Deliberately no
   background, border, shadow or lift on .pm-item itself. */
.pm-item-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 76, 71, 0.05);   /* warm neutral, barely there */
  color: #2E5A54;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.pm-item-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

.pm-item-body {
  display: block;
  min-width: 0;
}

.pm-mega .pm-item-title {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: #28323C;
  margin-bottom: 5px;
  transition: color 160ms ease;
}

.pm-mega .pm-item-desc {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 25px;
  color: #000;
}

.pm-item-arrow {
  display: inline-block;
  margin-left: 7px;
  font-size: 13px;
  color: var(--pm-emerald-dark);
  transition: transform 160ms ease;
}

.pm-item:hover .pm-item-title,
.pm-item:focus-visible .pm-item-title {
  color: var(--pm-emerald-dark);
}

.pm-item:hover .pm-item-arrow,
.pm-item:focus-visible .pm-item-arrow {
  transform: translateX(4px);
}

.pm-item:hover .pm-item-icon,
.pm-item:focus-visible .pm-item-icon {
  background: rgba(0, 77, 71, 0.09);
  color: var(--pm-emerald-dark);
  transform: scale(1.03);
}

/* Focus is not a weaker hover: keyboard users get the same treatment
   plus a real ring, since they cannot see a cursor position. */
.pm-item:focus-visible {
  outline: 2px solid var(--pm-emerald-dark);
  outline-offset: 2px;
}

/* ── Right panel ── */
.pm-mega-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 44px;
  background-color: #0C0A08;   /* shows through before the art loads */
  background-image: url('/assets/marketing/platform-nav.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Only as much overlay as the copy needs. The art is already dark on the
   left, so this is a gradient that fades to nothing by mid-panel rather
   than a flat scrim over the object. */
.pm-mega-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 10, 0.62) 0%, rgba(8, 10, 10, 0.28) 45%, rgba(8, 10, 10, 0) 72%);
  pointer-events: none;
}

.pm-mega-right > * { position: relative; }

.pm-mega .pm-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--pm-emerald-lift);
  margin: 0 0 18px;
  transition: opacity 165ms ease;
}

.pm-mega .pm-eyebrow.is-fading { opacity: 0; }

.pm-mega .pm-headline {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 22px;
  max-width: 330px;
}

.pm-mega .pm-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 25px;
  color: #fff;
  margin: 0 0 26px;
  max-width: 310px;
}

.nav-links a.pm-link,
.pm-link {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--pm-emerald-lift);
  text-decoration: none;
  text-shadow: none;
  /* The 147px rule above this link is in the Figma node and was removed
     by decision: on the finished panel it read as a divider between the
     body copy and the link rather than as the editorial underline it is
     in the static design. The 26px margin under .pm-body already gives
     the separation the rule was carrying. */
}

.pm-link-arrow {
  margin-left: 8px;
  transition: transform 160ms ease;
}

.pm-link:hover .pm-link-arrow,
.pm-link:focus-visible .pm-link-arrow { transform: translateX(4px); }

.pm-link:hover,
.pm-link:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

/* ── Trigger ── */
.nav-links .has-dropdown { position: relative; z-index: 21; }
.nav-links .has-dropdown::after { content: ''; position: absolute; left: -56px; right: -56px; top: 100%; height: 62px; }

.pm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pm-chevron { transition: transform 180ms ease; }
.pm-trigger[aria-expanded="true"] .pm-chevron { transform: rotate(180deg); }
.site-nav.nav-on-dark .pm-trigger[aria-expanded="true"] { color: #5DCAA5; }
.site-nav.nav-on-light .pm-trigger[aria-expanded="true"] { color: var(--brand-rich); }

/* ── Responsive ──────────────────────────────────────────────────────
   The panel never forces 1174px: width is min(1174px, 100vw - 48px), so
   it narrows before it can overflow. Below 1080 the two capability
   columns would drop under 240px each and descriptions would wrap to
   four lines, so the art panel goes first: it is the decorative half.
   Below 720 the capability grid itself goes to one column. */
@media (max-width: 1080px) {
  .pm-mega { grid-template-columns: 1fr; min-height: 0; }
  .pm-mega-right { display: none; }
}

@media (max-width: 720px) {
  .pm-mega-left { grid-template-columns: 1fr; padding: 24px 20px; }
  .pm-mega { width: calc(100vw - 24px); }
}

/* ── Reduced motion ──────────────────────────────────────────────────
   Everything positional or scaling is removed. The panel still needs to
   appear and disappear, so opacity is kept but made effectively
   instant, and the resting translateX(-50%) is preserved in both states
   or the panel would sit half a screen to the right. */
@media (prefers-reduced-motion: reduce) {
  .pm-mega,
  .pm-mega.open,
  .pm-mega:not(.open) {
    transform: translateX(-50%);
    transition: opacity 1ms linear, visibility 0s;
  }
  .pm-scrim,
  .pm-scrim.open,
  .pm-scrim:not(.open) { transition: opacity 1ms linear, visibility 0s; }
  .pm-item-icon,
  .pm-item-arrow,
  .pm-link-arrow,
  .pm-chevron,
  .pm-eyebrow,
  .pm-mega .pm-item-title { transition: none; }
  .pm-item:hover .pm-item-icon,
  .pm-item:focus-visible .pm-item-icon { transform: none; }
  .pm-item:hover .pm-item-arrow,
  .pm-item:focus-visible .pm-item-arrow { transform: none; }
  .pm-link:hover .pm-link-arrow { transform: none; }
}
/* NAV:MEGA-MENU-CSS END */

/* ============================================================================
   CANONICAL SITE FOOTER
   ============================================================================
   THIS IS THE ONLY PLACE FOOTER APPEARANCE IS DEFINED. Before this block the
   footer was styled in each page's own <style>, thirteen times over, and had
   drifted into three structural variants plus two live bugs (see below). Any
   future footer change belongs here and nowhere else.

   Values measured off the approved reference (2048x768), expressed against a
   1320px content box. Colours resolved to existing site tokens where one
   exists rather than to the reference's exact samples:

     field       reference #0E1515              used as measured
     links       reference #FFFEFD  ->  #F4F1EA  (existing ivory)
     labels      reference #B5BABB  ->  #9e9c96  (existing warm grey)
     bronze      reference #AA8856  ->  #977948  (existing bronze token)
     hairlines   rgba(255,255,255,0.10)

   REPLACES A 1440px ABSOLUTELY-POSITIONED CANVAS. The old footer was a
   drawing scaled by fitCanvas(); every element carried left/top coordinates.
   That is why it needed a whole separate hand-built stacked layout below
   900px, and why four platform pages that never got that layout rendered
   their footer at 27% scale on a phone: 14.5px links at 3.9px, tap targets
   near 10px against a 44px minimum. This is real flow layout, so there is no
   canvas, no fitCanvas registration, and no second mobile design to keep in
   sync - the grid simply reflows.
   ========================================================================= */

.efoot {
  width: 100%;
  background: #0E1515;
}

.efoot-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 60px 56px;
}

/* Brand column is 1.6fr against three 1fr navigation columns. The reference
   has four navigation columns; RESOURCES is absent here because none of its
   links exist - Help Center, Blog, Guides, Templates and Status are all
   reference-only. Do not add the column back without real destinations. */
.efoot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 0;
}

/* The hairlines are the reference's only separation device: no cards, no
   panels, no background changes between groups. */
.efoot-col {
  padding-left: 44px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.efoot-brand { padding-right: 44px; }

.efoot-logo {
  display: block;
  width: 232px;
  height: auto;
  margin: 0 0 34px;
}

/* The editorial serif, not navigation type - this is a statement, not a
   label. Both this and the closing signature already existed on the page,
   jammed together in one centred paragraph at the foot; the redesign only
   separates them. Neither is new copy. */
.efoot-statement {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.36;
  color: #F4F1EA;
  margin: 0;
  max-width: 22ch;
}

.efoot-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9e9c96;
  margin: 0 0 24px;
}

.efoot-col a {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: #F4F1EA;
  text-decoration: none;
  padding: 11px 0;
  transition: color 0.15s ease;
}
.efoot-col a:hover,
.efoot-col a:focus-visible { color: #5DCAA5; }

/* Icon plus text, monochrome. The outgoing footer used 24px #2b8c82 rounded
   squares; the reference has no filled shapes anywhere. Icons inherit
   currentColor so they pick up the link hover with the label. */
.efoot-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.efoot-social svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.efoot-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 76px 0 0;
}

.efoot-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0 0;
}

.efoot-copy {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #9e9c96;
  margin: 0;
}

/* A quiet signature, not a headline: small, tracked, and pushed to the far
   right behind a short bronze rule. Deliberately not centred and not large. */
.efoot-signature {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9e9c96;
  margin: 0;
  text-align: right;
}
.efoot-signature::before {
  content: "";
  flex: 0 0 56px;
  height: 1px;
  background: #977948;
}

/* ── NARROW ──────────────────────────────────────────────────────────────
   The vertical hairlines stop meaning anything once the columns stack, so
   they go rather than becoming stray horizontal lines. Order is preserved
   from the desktop grid: logo, statement, navigation, social, rule,
   copyright, signature. */
@media (max-width: 1000px) {
  .efoot-inner { padding: 72px 40px 48px; }
  .efoot-grid { grid-template-columns: 1fr 1fr; row-gap: 52px; }
  .efoot-brand { grid-column: 1 / -1; padding-right: 0; }
  .efoot-col:nth-of-type(2) { border-left: none; padding-left: 0; }
  .efoot-rule { margin-top: 56px; }
}

@media (max-width: 620px) {
  .efoot-inner { padding: 60px 24px 40px; }
  .efoot-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .efoot-col { border-left: none; padding-left: 0; }
  .efoot-logo { width: 188px; margin-bottom: 26px; }
  .efoot-statement { font-size: 21px; max-width: none; }
  .efoot-base { flex-direction: column; align-items: flex-start; gap: 18px; }
  .efoot-signature { text-align: left; gap: 16px; }
  .efoot-signature::before { flex-basis: 34px; }
}