/* Editorial design system fonts, self-hosted. General Sans (Fontshare, FFL) for all text since 2026-11-11:
   one variable file, weights 200-700, real italic. It has no Cyrillic, Arabic or arrow glyphs, so Inter and
   Inter Tight stay below as per-glyph fallbacks; their unicode-range means a Latin page never downloads them. */
@font-face{font-family:'General Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url(/font/GeneralSans-Variable.woff2) format('woff2')}
@font-face{font-family:'General Sans';font-style:italic;font-weight:200 700;font-display:swap;src:url(/font/GeneralSans-VariableItalic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/Inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/Inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/Inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/Inter-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:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/InterTight-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/InterTight-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/InterTight-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/font/editorial/InterTight-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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/font/editorial/JetBrainsMono-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}

/* ════════════════════════════════════════════════════════════════════════
   More.You "Editorial" design system (2026-11-11)
   Source of truth: Homepage C board of the homepage redesign.
   Ten rules: warm grey page; ink #111212 + mint #B2F6E3 + white only; no pills
   (buttons 10px); General Sans 500 headlines at -0.035em, General Sans body; 28px
   panels inside a 16px page margin; bright real photos; small photos inside
   headlines; 1px hairlines; squares not circles; no invented product UI.

   Loaded OUTSIDE every grunt build:css block (usemin deletes links inside one,
   see CLAUDE.md "Build Process"). Replaces general-sans.css on marketing pages.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F8F7F4;
  --ink:#111212;
  --mint:#B2F6E3;
  --mut:#5E5C59;
  --line:rgba(17,18,18,0.14);

  --ed-label:#77736E;
  --ed-ph:#A39E98;
  --ed-on-mint:#1F2A27;
  --ed-on-dark:rgba(255,255,255,0.72);
  --ed-on-dark-sm:rgba(255,255,255,0.64);
  --ed-line-dark:rgba(255,255,255,0.16);
  --ed-soft:#F4F3EF;
  --ed-band:#F0F7F4;
  --ed-tint-mint:#E3FAF2;
  --ed-tint-sky:#E4EEFF;
  --ed-tint-peach:#FFE9DC;
  --ed-tint-lilac:#EDE7FF;
  --ed-tint-lemon:#FFF4C6;
  --ed-tint-rose:#FFE3EC;
  --ed-ink-hover:#2B2C2C;
  --ed-white-hover:#F3F2F0;
  --ed-field-line:#D5D1CB;
  --ed-live:#0B7A5C;

  --ed-r-panel:28px;--ed-r-card:22px;--ed-r-photo:18px;--ed-r-field:12px;--ed-r-btn:10px;--ed-r-chip:8px;--ed-r-sq:2px;

  /* One left edge everywhere: the page gutter, and how far a coloured block sits inside it. */
  --ed-gut:clamp(20px,4vw,48px);
  --ed-inset:clamp(8px,1.4vw,20px);
  --ed-y:clamp(40px,5.2vw,76px);
  --ed-max:1200px;

  --ed-sh-field:0 18px 40px rgba(0,0,0,0.18);
  --ed-sh-mock:0 24px 60px rgba(17,18,18,0.16);
  --ed-sh-phone:0 30px 70px rgba(17,18,18,0.28);

  --ed-sans:"General Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ed-disp:"General Sans","Inter Tight",Inter,system-ui,sans-serif;
  --ed-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  /* Older partials read these; point them at the new system. */
  --font-sans:var(--ed-sans);
  --primary:#111212;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html,body{background:var(--bg) !important;color:var(--ink)}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*,*::before,*::after{box-sizing:border-box}
/* The legacy site sets ~30 families with !important; one rule wins over all of them.
   Icon fonts (.fa) and code keep their own face. */
html,body,
body *:not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(code):not(pre):not(kbd):not(samp):not(i[class*="icon"]){font-family:var(--ed-sans) !important}
/* Display face. The :is() list plus the same :not() chain outranks the universal
   Inter rule above (which needs its weight to beat ~30 legacy !important families). */
body :is(h1,h2,h3,h4,.ed-disp,.ed-disp *,.ed-h1,.ed-h2,.ed-h3,.ed-h4,.ed-logo__word,.ed-logo__tile,.ed-marquee--big .ed-marquee__track span,.edm-card__name,.ed-theme b,.ed-pin__title,.ed-stat b,.ed-ai-close,.ed-card__title,.my-mega-item-title,.my-mob-menu a.my-mob-link,.my-mob-menu a.my-mob-top,.db-footer__watermark span,.my-pr-name,.my-pr-price,.my-pr-fee-num,.my-viz-pin-headline,.my-viz-stat .num,.my-viz-phone-name,.my-soon-tile):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(code):not(pre):not(kbd):not(samp):not(i[class*="icon"]){font-family:var(--ed-disp) !important}
body code,body pre,body kbd,body samp,body .ed-mono,body .ed-mono *{font-family:var(--ed-mono) !important}
a{color:inherit}
/* Every legacy <a> carries an indigo ::before underline glow (CLAUDE.md gotcha). */
a::before{border-bottom-color:transparent !important}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Type ─────────────────────────────────────────────────────────────── */
.ed-h1{margin:0;font:500 clamp(46px,7vw,100px)/0.92 var(--ed-disp);letter-spacing:-0.035em;text-wrap:balance}
.ed-h2{margin:0;font:500 clamp(40px,5.2vw,75px)/0.94 var(--ed-disp);letter-spacing:-0.035em;text-wrap:balance}
.ed-h3{margin:0;font:500 clamp(30px,3.4vw,50px)/1 var(--ed-disp);letter-spacing:-0.035em;text-wrap:balance}
.ed-h4{margin:0;font:500 clamp(22px,2vw,28px)/1.08 var(--ed-disp);letter-spacing:-0.03em}
.ed-lead{margin:0;font:400 19px/1.45 var(--ed-sans);color:var(--mut);text-wrap:pretty}
.ed-body{margin:0;font:400 16px/1.55 var(--ed-sans);color:var(--mut);text-wrap:pretty}
.ed-small{margin:0;font:400 14px/1.5 var(--ed-sans);color:var(--mut)}
.ed-label{margin:0;font:500 13px/1.3 var(--ed-sans);color:var(--ed-label);letter-spacing:0}
.ed-num{font:500 11px/1 var(--ed-mono);letter-spacing:.04em;color:var(--ed-label)}
@media (max-width:640px){.ed-lead{font-size:17px}}

/* ── Page frame: 16px margin, 28px panels ─────────────────────────────── */
.ed-page{padding:0 16px}
.ed-panel{position:relative;border-radius:var(--ed-r-panel);margin:0 0 16px;padding:clamp(28px,4.4vw,64px);overflow:hidden}
.ed-panel--ink{background:var(--ink);color:#fff}
.ed-panel--mint{background:var(--mint);color:var(--ed-on-mint)}
.ed-panel--white{background:#fff;color:var(--ink)}
.ed-panel--grey{background:transparent;color:var(--ink);padding-left:clamp(4px,2vw,40px);padding-right:clamp(4px,2vw,40px)}
.ed-panel--ink .ed-lead,.ed-panel--ink .ed-body,.ed-panel--ink .ed-small{color:var(--ed-on-dark)}
.ed-panel--ink .ed-label,.ed-panel--ink .ed-num{color:var(--ed-on-dark-sm)}
.ed-panel--mint .ed-lead,.ed-panel--mint .ed-body,.ed-panel--mint .ed-small,.ed-panel--mint .ed-label{color:var(--ed-on-mint)}
.ed-inner{max-width:1280px;margin:0 auto}
.ed-inner--text{max-width:760px}
.ed-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:start}
.ed-split--half{grid-template-columns:1fr 1fr;align-items:center}
.ed-stack>*+*{margin-top:20px}
@media (max-width:900px){.ed-split,.ed-split--half{grid-template-columns:1fr}}
@media (max-width:640px){.ed-panel{border-radius:22px;padding:28px 20px}}

.ed-panel h1,.ed-panel h2,.ed-panel h3,.ed-panel h4{color:inherit !important}
.ed-panel--ink h1,.ed-panel--ink h2,.ed-panel--ink h3,.ed-panel--ink h4,.ed-card--ink h3{color:#fff !important}
.ed-panel--mint h1,.ed-panel--mint h2,.ed-panel--mint h3,.ed-panel--mint h4{color:var(--ink) !important}

/* ── Announcement bar ─────────────────────────────────────────────────── */
/* Ink bar, mint accent: the one dark band above the page, so the offer reads first. */
.ed-announce{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;margin:16px 16px 0;padding:8px 8px 8px 16px;border-radius:var(--ed-r-btn);background:var(--ink);color:#fff;font:500 14px/1.35 var(--ed-sans);text-align:left;text-decoration:none;transition:background-color .15s ease}
.ed-announce:hover,.ed-announce:focus{background:var(--ed-ink-hover);color:#fff}
.ed-announce:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.ed-announce .ed-sq{background:var(--mint)}
.ed-announce__lead{margin-right:6px;color:var(--mint);font-weight:600}
.ed-announce__body{color:var(--ed-on-dark)}
.ed-announce__cta{display:inline-flex;flex:none;align-items:center;height:32px;padding:0 12px;border-radius:var(--ed-r-chip);background:var(--mint);color:var(--ink);font:600 13px/1 var(--ed-sans);white-space:nowrap;transition:background-color .15s ease}
.ed-announce__cta::after{content:"\2192";margin-left:6px}
.ed-announce:hover .ed-announce__cta{background:#fff}
@media (max-width:640px){
  .ed-announce{justify-content:flex-start;padding:10px 14px;font-size:13px}
  .ed-announce__cta{display:none}
  .ed-announce__body::after{content:"\00a0\2192";color:var(--mint)}
}

/* ── Squares, chips ───────────────────────────────────────────────────── */
.ed-sq{display:inline-block;flex:none;width:8px;height:8px;border-radius:var(--ed-r-sq);background:var(--mint);vertical-align:middle}
.ed-sq--lg{width:10px;height:10px}
.ed-sq--ink{background:var(--ink)}
.ed-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--ed-r-chip);font:500 12px/1.2 var(--ed-sans);background:#fff;color:var(--ink);white-space:nowrap}
.ed-chip::before{content:"";width:8px;height:8px;border-radius:var(--ed-r-sq);background:var(--mint);flex:none}
.ed-chip--glass{background:rgba(255,255,255,0.16);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ed-chip--dark{background:rgba(17,18,18,0.82);color:#fff}
.ed-chip--mint{background:var(--mint);color:var(--ed-on-mint)}
.ed-chip--mint::before{background:var(--ink)}
.ed-chip--soft{background:var(--ed-soft);color:var(--ink)}

/* ── Buttons: squared, 10px, never pills ──────────────────────────────── */
.ed-btn,a.ed-btn,button.ed-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border:1px solid transparent;border-radius:var(--ed-r-btn) !important;font:500 15px/1.2 var(--ed-sans);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.ed-btn.ed-btn--ink{background:var(--ink);color:#fff !important}
.ed-btn.ed-btn--ink:hover{background:var(--ed-ink-hover);color:#fff !important}
.ed-btn.ed-btn--white{background:#fff;color:var(--ink) !important}
.ed-btn.ed-btn--white:hover{background:var(--ed-white-hover);color:var(--ink) !important}
.ed-btn.ed-btn--mint{background:var(--mint);color:var(--ink) !important}
.ed-btn.ed-btn--mint:hover{background:#9EEFD8;color:var(--ink) !important}
.ed-btn.ed-btn--ghost{background:transparent;color:var(--ink) !important;border-color:var(--line)}
.ed-btn.ed-btn--ghost:hover{background:#fff}
.ed-btn.ed-btn--ghost-dark{background:transparent;color:#fff !important;border-color:var(--ed-line-dark)}
.ed-btn.ed-btn--ghost-dark:hover{background:rgba(255,255,255,0.08)}
.ed-btn.ed-btn--sm{min-height:34px;padding:7px 12px;font-size:13px}
.ed-btn.ed-btn--lg{min-height:52px;padding:14px 22px;font-size:16px}
.ed-btn .ed-arrow{font-size:.9em;line-height:1}

/* ── Form field: the page-name claim ──────────────────────────────────── */
.ed-field{display:flex;align-items:center;gap:8px;max-width:440px;padding:5px 5px 5px 14px;border-radius:var(--ed-r-field);background:#fff;color:var(--ink)}
.ed-field--float{box-shadow:var(--ed-sh-field)}
.ed-field--line{border:1px solid var(--ed-field-line)}
.ed-field__prefix{font:400 15px/1 var(--ed-sans);color:var(--mut);white-space:nowrap}
.ed-field input,.ed-field input[type=text]{flex:1;min-width:0;height:42px;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;font:400 15px/1 var(--ed-sans) !important;color:var(--ink) !important;outline:none}
.ed-field input::placeholder{color:var(--ed-ph)}
.ed-field .ed-btn{min-height:40px;padding:9px 16px;font-size:14px;margin:0}
.ed-note{margin:12px 0 0;font:500 13px/1.4 var(--ed-sans)}
@media (max-width:480px){.ed-field{flex-wrap:wrap;padding:8px}.ed-field .ed-btn{width:100%}}

/* ── Headline photo: a small rounded photo set like a letter ──────────── */
.ed-hphoto{display:inline-block;width:.66em;height:.62em;margin:0 .04em 0 .06em;border-radius:.14em;object-fit:cover;vertical-align:-.04em;background:var(--ed-soft)}
.ed-hphoto--framed{box-shadow:0 0 0 .04em #fff}

/* ── Marquee rows ─────────────────────────────────────────────────────── */
.ed-marquee{display:flex;align-items:center;gap:24px;overflow:hidden}
.ed-marquee__label{flex:none;font:500 12px/1.2 var(--ed-sans);color:var(--ed-label)}
.ed-marquee__mask{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ed-marquee__track{display:flex;align-items:center;gap:28px;width:max-content;animation:ed-marquee 48s linear infinite}
.ed-marquee__track>span{display:inline-flex;align-items:center;gap:28px;white-space:nowrap}
.ed-marquee--big .ed-marquee__track>span{font:500 clamp(24px,2.5vw,36px)/1 var(--ed-disp);letter-spacing:-0.03em;color:var(--ink)}
.ed-marquee--small .ed-marquee__track>span{font:500 14px/1 var(--ed-sans)}
.ed-marquee:hover .ed-marquee__track{animation-play-state:paused}
@keyframes ed-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ed-marquee__track{animation:none}}
@media (max-width:640px){.ed-marquee{gap:14px}.ed-marquee__label{display:none}}

/* ── Hairline lists ───────────────────────────────────────────────────── */
.ed-lines{margin:0;padding:0;list-style:none}
.ed-lines>li,.ed-lines>.ed-line{border-top:1px solid var(--line);padding:22px 0}
.ed-lines>li:last-child,.ed-lines>.ed-line:last-child{border-bottom:1px solid var(--line)}
.ed-panel--ink .ed-lines>li,.ed-panel--ink .ed-lines>.ed-line{border-color:var(--ed-line-dark)}
.ed-numlist .ed-num{display:block;margin-bottom:10px}
.ed-numlist h3{margin:0 0 8px}
.ed-numlist p{margin:0;max-width:420px}

/* ── Cards, photo cards, mockups ──────────────────────────────────────── */
.ed-card{background:#fff;border-radius:var(--ed-r-card);padding:24px;color:var(--ink)}
.ed-card--soft{background:var(--ed-soft)}
.ed-card--ink{background:var(--ink);color:#fff}
.ed-card--mint{background:var(--mint);color:var(--ed-on-mint)}
.ed-card h3,.ed-card .ed-card__title{margin:0 0 8px;font:500 22px/1.1 var(--ed-disp);letter-spacing:-0.025em}
.ed-card p{margin:0}
.ed-grid{display:grid;gap:16px}
.ed-grid--2{grid-template-columns:repeat(2,1fr)}
.ed-grid--3{grid-template-columns:repeat(3,1fr)}
.ed-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.ed-grid--4{grid-template-columns:repeat(2,1fr)}.ed-grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ed-grid--2,.ed-grid--3,.ed-grid--4{grid-template-columns:1fr}}
.ed-photocard{position:relative;display:block;margin:0;border-radius:var(--ed-r-photo);overflow:hidden;background:var(--ed-soft);aspect-ratio:4/5}
.ed-photocard img{display:block;width:100%;height:100%;object-fit:cover}
.ed-photocard .ed-chip{position:absolute;right:12px;bottom:12px}
.ed-mock{background:#fff;border-radius:var(--ed-r-card);box-shadow:var(--ed-sh-mock);color:var(--ink)}
.ed-sample{font:500 11px/1 var(--ed-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ed-label)}

/* Black card with tilted sheets behind it */
.ed-sheets{position:relative;isolation:isolate;padding:18px}
.ed-sheets::before,.ed-sheets::after{content:"";position:absolute;inset:18px;border-radius:var(--ed-r-card);z-index:-1}
.ed-sheets::before{background:var(--mint);transform:rotate(-5deg)}
.ed-sheets::after{background:#fff;transform:rotate(3deg)}
.ed-sheets>.ed-card{position:relative}

/* Phone mockup */
.ed-phone{width:260px;padding:10px;border-radius:40px;background:var(--ink);box-shadow:var(--ed-sh-phone)}
.ed-phone__screen{border-radius:30px;background:#fff;overflow:hidden;min-height:480px;padding:28px 18px}

/* ── FAQ: hairline accordion (existing .faq-item markup) ─────────────── */
.ed-faq .faq-container{max-width:none;margin:0}
.ed-faq .faq-item,body .ed-faq .faq-item{margin:0 !important;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important}
.ed-faq .faq-item:last-child{border-bottom:1px solid var(--line) !important}
.ed-faq .faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 !important;background:transparent !important;cursor:pointer}
.ed-faq .faq-question h3{margin:0 !important;font:500 clamp(18px,1.6vw,22px)/1.25 var(--ed-disp) !important;letter-spacing:-0.02em !important;color:var(--ink) !important}
.ed-faq .faq-answer{padding:0 0 22px !important;background:transparent !important;border:0 !important}
.ed-faq .faq-answer,.ed-faq .faq-answer .content-grey,.ed-faq .faq-answer .content-grey-2{max-width:720px;color:var(--mut) !important;font:400 16px/1.55 var(--ed-sans) !important}
.ed-faq .svg-icon-chevron-down{background-color:var(--ink) !important;fill:var(--ink) !important;flex:none}

/* ── Utility ──────────────────────────────────────────────────────────── */
.ed-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ed-mt-s{margin-top:16px}.ed-mt-m{margin-top:28px}.ed-mt-l{margin-top:48px}
.ed-center{text-align:center}
.ed-visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}

/* ════════════════════════════════════════════════════════════════════════
   Site header (both header partials: frontend_header.pug and the menu-less
   frontend_header_pricing.pug). Lives here, not in a partial style block, so
   one file reaches every page that has a header.
   ════════════════════════════════════════════════════════════════════════ */
.ed-logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;line-height:1}
.ed-logo__tile{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--ed-r-chip);background:var(--mint);color:var(--ink);font:600 14px/1 var(--ed-disp)}
.ed-logo__word{font:500 19px/1 var(--ed-disp);letter-spacing:-0.035em;color:inherit;text-transform:none !important}
.ed-logo--light,.ed-logo--light .ed-logo__word{color:#fff !important}

/* Desktop bar: a plain row on the grey page. No white pill, no shadow. */
body section.navigation-section{position:relative;top:auto !important;z-index:60;width:auto;max-width:none;height:auto;margin:0 16px !important;padding:0 clamp(4px,2vw,40px);border-radius:0;background:transparent !important;box-shadow:none !important;color:var(--ink)}
body section.navigation-section::before{display:none !important}
body section.navigation-section.scrolled{height:auto;box-shadow:none !important}
body section.navigation-section .row,body section.navigation-section .row-custom2{max-width:1280px !important;width:100%;margin:0 auto !important;padding:0 !important}
body section.navigation-section .large-12{padding:0 !important;width:100%}
body section.navigation-section .top-bar{display:flex;align-items:center;height:76px !important;min-height:0 !important;margin:0;background:transparent !important;overflow:visible}
body section.navigation-section .top-bar .title-area{float:none;display:flex;align-items:center;margin:0 28px 0 0;height:auto}
body section.navigation-section .top-bar .name{height:auto}
body section.navigation-section .top-bar .name a,body section.navigation-section .tab-bar__link{display:inline-flex !important;align-items:center;padding:0 !important;line-height:1 !important;height:auto !important}
body section.navigation-section .top-bar-section{position:static !important;left:auto !important;width:auto !important}
body section.navigation-section .top-bar-section:first-of-type{flex:1}
body section.navigation-section .top-bar-section ul{display:flex;align-items:center;background:transparent !important;height:auto !important;width:auto}
body section.navigation-section .top-bar-section ul li{background:transparent !important;float:none}
body section.navigation-section .top-bar-section ul.left>li>a,
body section.navigation-section .top-bar-section ul.left>li:not(.has-form)>a:not(.button){display:inline-flex !important;align-items:center;height:38px !important;padding:0 12px !important;margin:0 2px;border-radius:var(--ed-r-chip);background:transparent !important;color:var(--ink) !important;font:500 14px/1 var(--ed-sans) !important;letter-spacing:0 !important;text-transform:none !important;transform:none !important;line-height:38px !important}
body section.navigation-section .top-bar-section ul.left>li>a::after{display:none !important}
body section.navigation-section .top-bar-section ul.left>li>a:hover,
body section.navigation-section .top-bar-section ul.left>li.has-dropdown:hover>a{background:rgba(17,18,18,0.06) !important;color:var(--ink) !important}
body section.navigation-section .top-bar-section .has-dropdown>a{padding-right:12px !important}
body section.navigation-section .top-bar-section .has-dropdown>a::after{display:none !important}
body section.navigation-section li.separator,body section.navigation-section em.vertical-line,body section.navigation-section .svg-icon-right{display:none !important}
/* app-critical.css hides this list below 1280px, but the burger only appears below 1025px,
   so 1025-1280 had no menu at all. Show it wherever the desktop bar shows. */
@media (min-width:64.0625em){body section.navigation-section .top-bar-section ul.top-left-header{display:flex !important;margin-left:0 !important}}
body section.navigation-section .top-bar-section ul.right{gap:6px}
body section.navigation-section .top-bar-section ul.right>li.menu-item{display:flex !important;align-items:center;height:40px;margin:0 !important;line-height:1 !important}
body section.navigation-section .top-bar-section ul.right>li.menu-item:has(>section){display:none !important}
body section.navigation-section .top-bar-section ul.right .top-right-header{display:none}
body section.navigation-section ul.right a.button,body section.navigation-section ul.right a.ed-btn{position:static !important;top:auto !important;display:inline-flex !important;align-items:center;height:40px !important;min-height:40px;margin:0 !important;padding:0 16px !important;border:0 !important;border-radius:var(--ed-r-btn) !important;box-shadow:none !important;text-shadow:none !important;font:500 14px/40px var(--ed-sans) !important;letter-spacing:0 !important;text-transform:none !important;background:var(--ink) !important;color:#fff !important;transition:background-color .15s ease}
body section.navigation-section ul.right a.button:hover{background:var(--ed-ink-hover) !important}
body section.navigation-section ul.right a.button.login-button{background:transparent !important;color:var(--ink) !important;padding:0 12px !important}
body section.navigation-section ul.right a.button.login-button:hover{background:rgba(17,18,18,0.06) !important}
body section.navigation-section ul.right a.button::before,body section.navigation-section a::before{display:none !important}

/* Dropdowns (rebuilt after review, 2026-11-11). Both menus hang from the bar's
   left edge (the logo line), 8px below the bar, as a white sheet with hairline
   columns. Foundation still opens them on hover/focus and hides them with clip.
   The legacy menu used perspective + a transform transition; that 3D context
   painted the hero over the open menu, so no transform and no animation here. */
@media (min-width:64.0625em){
  /* Each top-level item fills the full bar height, so the hover area runs from the
     top of the bar to its bottom edge, and the menu starts 6px above that edge.
     No gap the pointer can fall into on the way from the link to the menu. */
  body section.navigation-section nav.top-bar>section.top-bar-section:first-of-type{display:flex !important;align-self:stretch;align-items:stretch;height:auto !important}
  body section.navigation-section .top-bar-section ul.top-left-header{align-self:stretch;align-items:stretch !important;height:auto !important}
  body section.navigation-section .top-bar-section ul.left>li{display:flex !important;align-items:center;height:auto !important}
  body section.navigation-section .top-bar-section ul.left>li.has-dropdown{position:static !important}
  body section.navigation-section .top-bar-section ul.left>li.has-dropdown>.dropdown{top:calc(100% - 6px) !important;left:0 !important;right:auto !important;margin:0 !important}
}
/* .ed-open is set by the hover-intent script in frontend_header.pug. */
html.ed-menu-js body section.navigation-section .top-bar-section li.has-dropdown:not(.ed-open)>.dropdown{clip:rect(1px,1px,1px,1px) !important;height:1px !important;overflow:hidden !important}
body section.navigation-section .top-bar-section li.has-dropdown.ed-open>.dropdown{clip:auto !important;height:auto !important;overflow:visible !important;display:block !important;visibility:visible !important;opacity:1 !important}
body section.navigation-section .top-bar-section .dropdown{perspective:none !important;transform:none !important;transition:none !important;animation:none !important;border:1px solid var(--line) !important;border-radius:var(--ed-r-card) !important;box-shadow:0 18px 50px rgba(17,18,18,0.12) !important;background:#fff !important;overflow:visible}
body section.navigation-section .top-bar-section .dropdown,body section.navigation-section .top-bar-section .dropdown *{letter-spacing:0 !important;text-transform:none !important}
body section.navigation-section .my-mega-drop{width:min(1000px,calc(100vw - 2 * var(--ed-gut))) !important;min-width:0 !important;max-width:none !important;padding:12px !important}
body section.navigation-section .my-uc-drop{width:min(1040px,calc(100vw - 2 * var(--ed-gut))) !important}
body section.navigation-section .my-res2-drop{width:min(860px,calc(100vw - 2 * var(--ed-gut))) !important}
body section.navigation-section .my-res-drop{width:min(580px,calc(100vw - 64px)) !important;min-width:0 !important;padding:8px !important}
body section.navigation-section .my-mega-drop li.my-mega-wrap,body section.navigation-section .my-res-drop li.my-mega-wrap{width:100% !important;float:none !important;display:block !important;background:transparent !important;padding:0 !important;opacity:1 !important;transform:none !important;transition:none !important}
.my-mega{display:block}
.my-mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.my-mega-col{display:flex;flex-direction:column;min-width:0;padding:8px}
.my-mega-col+.my-mega-col{border-inline-start:1px solid var(--line)}
.my-mega-preview{display:none !important}
.my-mega-cat{margin:4px 0 4px;padding:0 10px;font:500 12px/1.3 var(--ed-sans) !important;color:var(--ed-label) !important}
body section.navigation-section a.my-mega-item{display:block !important;width:100% !important;height:auto !important;margin:0 !important;padding:9px 10px !important;border-radius:var(--ed-r-btn) !important;background:transparent !important;line-height:1.3 !important;white-space:normal !important;transition:background-color .12s ease}
body section.navigation-section a.my-mega-item:hover,body section.navigation-section a.my-mega-item:focus-visible{background:var(--ed-soft) !important}
.my-mega-item-title{display:flex;align-items:center;gap:8px;font:500 15px/1.2 var(--ed-disp) !important;letter-spacing:-0.015em !important;color:var(--ink) !important;white-space:nowrap}
.my-mega-item-desc{margin-top:3px;font:400 13px/1.4 var(--ed-sans) !important;color:var(--mut) !important;white-space:normal !important}
.my-mega-soon{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border-radius:6px;background:var(--ed-soft);color:var(--ink);font:500 11px/1.3 var(--ed-sans) !important;flex:none}
.my-mega-soon::before{content:"";width:6px;height:6px;border-radius:var(--ed-r-sq);background:var(--mint)}
.my-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%}
/* Menus (2026-11-11, "product dropdown is very complicated, see how linkie is doing"). Product: picture cards + a plain list. Use cases: audience
   cards lead, jobs and industries beside them. Anchors restate background, colour and
   line-height with !important because Foundation's top-bar rules reach every menu link. */
body section.navigation-section .my-mega-drop a{width:auto !important;height:auto !important;margin:0 !important;text-decoration:none !important}
.my-pm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body section.navigation-section a.my-pm-card{display:flex !important;flex-direction:column;padding:14px 14px 16px !important;border-radius:16px !important;background:var(--pm-bg,var(--ed-soft)) !important;color:var(--ink) !important;line-height:1.3 !important;white-space:normal !important;transition:transform .16s ease,box-shadow .16s ease}
body section.navigation-section a.my-pm-card:hover,body section.navigation-section a.my-pm-card:focus-visible{background:var(--pm-bg,var(--ed-soft)) !important;transform:translateY(-2px);box-shadow:0 12px 26px rgba(17,18,18,0.10)}
.my-pm-art{display:flex;align-items:flex-end;justify-content:center;height:104px;margin-bottom:14px}
.my-pm-title{display:block;font:600 15px/1.25 var(--ed-disp) !important;letter-spacing:-0.01em !important;color:var(--ink) !important}
.my-pm-desc{display:block;margin-top:4px;font:400 13px/1.42 var(--ed-sans) !important;color:#3D4442 !important}
.my-pm-more{margin-top:12px;padding:12px 4px 2px;border-top:1px solid var(--line)}
.my-pm-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;margin-top:2px}
body section.navigation-section a.my-pm-link{display:flex !important;align-items:center;gap:8px;min-height:36px;padding:7px 10px !important;border-radius:10px !important;background:transparent !important;color:var(--ink) !important;font:500 14px/1.3 var(--ed-sans) !important;white-space:nowrap}
body section.navigation-section a.my-pm-link:hover,body section.navigation-section a.my-pm-link:focus-visible{background:var(--ed-soft) !important}
body section.navigation-section a.my-pm-link.my-um-all{color:var(--ink) !important;font-weight:600 !important}
/* Drawn pictures inside the Product cards. */
.my-art{display:flex;box-sizing:border-box}
.my-art i,.my-art b,.my-art u{display:block;font-style:normal;text-decoration:none}
.my-art--page{flex-direction:column;align-items:center;gap:6px;width:116px;height:104px;padding:12px 12px 0;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 8px 20px rgba(17,18,18,0.08)}
.my-art-dot{width:22px;height:22px;border-radius:50%;background:var(--mint)}
.my-art-bar{width:100%;height:13px;border-radius:5px;background:var(--ed-soft)}
.my-art-bar--ink{background:var(--ink)}
.my-art-row{display:flex !important;align-items:center;gap:6px;width:100%;height:20px;padding:0 5px;border-radius:5px;background:var(--ed-soft)}
.my-art-row b{width:10px;height:10px;border-radius:3px;background:var(--mint)}
.my-art-row u{flex:1;height:5px;border-radius:3px;background:rgba(17,18,18,0.18)}
.my-art-pin{display:flex !important;flex-direction:column;gap:5px;width:100%;margin-top:4px;padding:7px;border-radius:7px;border:1.5px solid #27C99B;background:#fff}
.my-art-pin b{font:700 8px/1 var(--ed-sans);letter-spacing:.06em;color:#0B7A5C}
.my-art-pin u{height:6px;width:82%;border-radius:3px;background:var(--ink)}
.my-art--stats{align-items:flex-end;gap:7px;width:116px;height:104px;padding:14px 14px 0;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 8px 20px rgba(17,18,18,0.08)}
.my-art--stats i{flex:1;border-radius:4px 4px 0 0;background:#C9DBFF}
.my-art--stats i.is-top{background:var(--ink)}
.my-art--code{flex-direction:column;gap:7px;width:116px;height:104px;padding:14px 12px 0;border-radius:14px 14px 0 0;background:var(--ink);box-shadow:0 8px 20px rgba(17,18,18,0.14)}
.my-art--code b{font:500 9.5px/1 var(--ed-mono) !important;color:var(--mint)}
.my-art--code i{height:5px;border-radius:3px;background:rgba(255,255,255,0.28)}
/* Use cases sheet. */
.my-um{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:4px}
.my-um-main{padding:4px;padding-inline-end:8px}
.my-um-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;margin:4px 0 6px}
body section.navigation-section a.my-um-card{display:flex !important;align-items:flex-start;gap:12px;padding:10px !important;border-radius:14px !important;background:transparent !important;color:var(--ink) !important;line-height:1.3 !important;white-space:normal !important;transition:background-color .12s ease}
body section.navigation-section a.my-um-card:hover,body section.navigation-section a.my-um-card:focus-visible{background:var(--ed-soft) !important}
.my-um-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:var(--ink)}
.my-um-txt{display:block;min-width:0;padding-top:1px}
.my-um-title{display:block;font:600 15px/1.25 var(--ed-disp) !important;letter-spacing:-0.01em !important;color:var(--ink) !important}
.my-um-desc{display:block;margin-top:3px;font:400 13px/1.4 var(--ed-sans) !important;color:var(--mut) !important}
.my-um-side{display:grid;grid-template-columns:1fr 1fr;gap:0 4px;padding:4px 0;padding-inline-start:10px;border-inline-start:1px solid var(--line)}
.my-um-list{display:flex;flex-direction:column;min-width:0}
@media (max-width:1180px){.my-um-desc,.my-pm-desc{display:none}.my-pm-art{height:84px}.my-um{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (max-width:1100px){body section.navigation-section .my-mega-drop .my-mega-item-desc{display:none}}

/* Mobile bar + burger panel */
body nav.tab-bar{height:64px;line-height:64px;margin:0;background:var(--bg) !important;box-shadow:none !important;border:0}
body nav.tab-bar .tab-bar-section{display:flex;align-items:center;top:0 !important;height:64px;left:16px !important;right:auto !important;padding:0 !important;text-align:left}
body nav.tab-bar .svg-icon-right{display:none !important}
/* The legacy tab bar is position:fixed; push the announcement out from under it. */
@media (max-width:64em){body .ed-announce{margin-top:80px}}
/* Menu-less header (terms, security, 404...): its phone bar is not fixed, so no 64px offset. */
@media (max-width:64em){body .ed-announce.ed-announce--static{margin-top:16px}}
body nav.tab-bar .tab-bar-section .tab-bar__link{display:inline-flex;align-items:center;height:64px}
body nav.tab-bar section.right-small{display:flex;align-items:center;gap:6px;width:auto !important;height:64px;right:12px !important;border:0 !important;background:transparent !important}
body nav.tab-bar section.right-small a.button{position:static !important;top:auto !important;display:inline-flex !important;align-items:center;height:38px !important;margin:0 !important;padding:0 14px !important;border:0 !important;border-radius:var(--ed-r-btn) !important;box-shadow:none !important;background:var(--ink) !important;color:#fff !important;font:500 14px/38px var(--ed-sans) !important;text-transform:none !important;letter-spacing:0 !important}
body nav.tab-bar section.right-small a.button::before{display:none !important}
/* A legacy `button` rule paints every button indigo, focus and active states included. */
body .my-mob-burger,body .my-mob-burger:hover,body .my-mob-burger:focus,body .my-mob-burger:active{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin:0;padding:10px;border:0 !important;border-radius:var(--ed-r-btn);background:transparent !important;box-shadow:none !important;cursor:pointer;vertical-align:middle}
body .my-mob-burger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.my-mob-burger span{display:block;width:20px;height:2px;border-radius:1px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.my-mob-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.my-mob-burger.is-open span:nth-child(2){opacity:0}
.my-mob-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.my-mob-menu{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:1004;display:none;padding:4px 20px 112px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
.my-mob-menu.is-open{display:block}
body.my-mob-lock{overflow:hidden}
.my-mob-group{border-bottom:1px solid var(--line)}
.my-mob-group>summary{display:flex;align-items:center;justify-content:space-between;min-height:58px;font:600 19px/1.2 var(--ed-disp);letter-spacing:-0.02em;color:var(--ink);cursor:pointer;list-style:none}
.my-mob-group>summary::-webkit-details-marker{display:none}
.my-mob-group>summary::after{content:"+";font:400 24px/1 var(--ed-sans);color:var(--ed-label)}
.my-mob-group[open]>summary::after{content:"\2212"}
.my-mob-group>:last-child{margin-bottom:14px}
.my-mob-cat{margin:14px 0 2px;font:500 12px/1.2 var(--ed-sans);color:var(--ed-label);letter-spacing:0;text-transform:none}
.my-mob-menu a.my-mob-link{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;font:500 16px/1.3 var(--ed-sans);letter-spacing:0;color:var(--ink)}
.my-mob-menu a.my-mob-link.my-mob-all{font-weight:600}
.my-mob-menu a.my-mob-top{display:flex;align-items:center;min-height:58px;padding:0;border-bottom:1px solid var(--line);font:600 19px/1.2 var(--ed-disp);letter-spacing:-0.02em;color:var(--ink)}
.my-mob-actions{position:fixed;left:0;right:0;bottom:0;z-index:1005;display:none;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.my-mob-menu.is-open .my-mob-actions{display:flex}
.my-mob-actions .ed-btn{flex:1;min-height:50px}
@media (min-width:64.0625em){.my-mob-burger,.my-mob-menu{display:none !important}}

/* ════════════════════════════════════════════════════════════════════════
   Site footer: an ink panel inside the 16px page margin. Layout from
   CreatorFlow's footer (2026-11-11): the brand column runs down the left of
   both rows, the link groups sit in a four-column grid with one list each,
   the legal links live only in the bottom row. On phones each group opens
   and closes (script in the partial adds .is-acc). Markup:
   common/v3/frontend_footer_course.pug.
   ════════════════════════════════════════════════════════════════════════ */
body footer#footerElem{margin:16px !important;padding:clamp(36px,4.4vw,64px) clamp(20px,4.4vw,64px) 0 !important;border-radius:var(--ed-r-panel);background:var(--ink) !important;background-image:none !important;color:var(--ed-on-dark);overflow:hidden;text-align:left}
body footer#footerElem .ed-foot__inner{max-width:1280px;margin:0 auto}
body footer#footerElem .ed-foot__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:clamp(24px,2.6vw,36px);border-bottom:1px solid var(--ed-line-dark)}
body footer#footerElem .ed-foot__brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
body footer#footerElem .ed-foot__tagline{margin:0;font:400 15px/1.5 var(--ed-sans);color:var(--ed-on-dark)}
body footer#footerElem .ed-foot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body footer#footerElem .ed-foot__actions .ed-btn{min-height:42px;padding:10px 18px}
body footer#footerElem .ed-foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px;padding:clamp(28px,3vw,40px) 0 40px;border-bottom:1px solid var(--ed-line-dark)}
body footer#footerElem .ed-foot__cell{min-width:0}
body footer#footerElem .ed-foot__cell .ed-foot__col+.ed-foot__col{margin-top:26px}
body footer#footerElem .ed-foot__lang{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--ed-line-dark);border-radius:10px;background:rgba(255,255,255,.04);color:#fff;font:500 14px/1 var(--ed-sans);text-decoration:none;transition:background-color .15s ease,color .15s ease}
body footer#footerElem .ed-foot__lang:hover{background:#fff;color:var(--ink)}
body footer#footerElem .ed-foot__lang:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
body footer#footerElem .ed-foot__chev{color:var(--ed-on-dark-sm)}
body footer#footerElem .ed-foot__lang:hover .ed-foot__chev{color:var(--ink)}
body footer#footerElem .ed-foot__col{min-width:0}
body footer#footerElem .ed-foot__title{margin:0 0 12px;font:500 13px/1.2 var(--ed-sans);color:var(--ed-on-dark-sm);letter-spacing:0;text-transform:none}
body footer#footerElem .ed-foot__list{margin:0;padding:0;list-style:none}
body footer#footerElem .ed-foot__list li{margin:0;padding:0;list-style:none}
body footer#footerElem .ed-foot__list a{display:inline-flex;align-items:center;gap:6px;padding:5px 0;font:400 14px/1.35 var(--ed-sans);color:#fff;opacity:.86;text-decoration:none;transition:opacity .15s ease}
body footer#footerElem .ed-foot__list a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
body footer#footerElem .ed-foot__list a.ed-foot__all{margin-top:4px;color:var(--mint);opacity:1;font-weight:500}
/* Compare lists every rival page (27 on 2026-11-11): one row across the four link columns. */
body footer#footerElem .ed-foot__col--wide{grid-column:2 / -1}
body footer#footerElem .ed-foot__col--wide .ed-foot__list{column-count:4;column-gap:32px}
body footer#footerElem .ed-foot__col--wide .ed-foot__list li{break-inside:avoid}
body footer#footerElem .ed-foot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:20px 0 4px}
body footer#footerElem .ed-foot__copy{margin:0;font:400 12.5px/1.4 var(--ed-sans);color:var(--ed-on-dark-sm)}
body footer#footerElem .ed-foot__legal{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none}
body footer#footerElem .ed-foot__legal li{margin:0;padding:0;list-style:none}
body footer#footerElem .ed-foot__legal a{font:400 12.5px/1.4 var(--ed-sans);color:var(--ed-on-dark-sm);text-decoration:none}
body footer#footerElem .ed-foot__legal a:hover{color:#fff}
/* Below the header's desktop width the brand takes the first row, then three columns. */
@media (max-width:1024px){
  body footer#footerElem .ed-foot__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
  body footer#footerElem .ed-foot__col--wide{grid-column:1 / -1}
  body footer#footerElem .ed-foot__col--wide .ed-foot__list{column-count:3;column-gap:24px}
}
@media (max-width:767px){
  body footer#footerElem .ed-foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body footer#footerElem .ed-foot__col--wide .ed-foot__list{column-count:2;column-gap:16px}
  body footer#footerElem .ed-foot__bottom{flex-direction:column;align-items:flex-start;padding-top:16px}
  /* Accordion: one row per group, 52px tall, links 44px. Without JavaScript the two columns above show every link. */
  body footer#footerElem.is-acc .ed-foot__grid{display:block;padding-bottom:0;border-bottom:0}
  body footer#footerElem.is-acc .ed-foot__cell .ed-foot__col+.ed-foot__col{margin-top:0}
  body footer#footerElem.is-acc .ed-foot__col{border-bottom:1px solid var(--ed-line-dark)}
  body footer#footerElem.is-acc .ed-foot__title{margin:0}
  body footer#footerElem.is-acc .ed-foot__acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin:0;padding:0 !important;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;font:500 15px/1.2 var(--ed-sans);letter-spacing:0;text-align:left;text-transform:none;cursor:pointer}
  body footer#footerElem.is-acc .ed-foot__acc::after{content:"+";font-size:20px;font-weight:400;line-height:1;color:var(--ed-on-dark-sm)}
  body footer#footerElem.is-acc .ed-foot__col.is-open .ed-foot__acc::after{content:"\2212"}
  body footer#footerElem.is-acc .ed-foot__acc:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
  body footer#footerElem.is-acc .ed-foot__col:not(.is-open) .ed-foot__list{display:none}
  body footer#footerElem.is-acc .ed-foot__col.is-open .ed-foot__list{padding-bottom:10px}
  body footer#footerElem.is-acc .ed-foot__list a{min-height:44px;padding:0;font-size:15px}
  body footer#footerElem .ed-foot__legal a{display:inline-flex;align-items:center;min-height:44px}
}
.ed-soon{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,0.1);color:#fff;font:500 10.5px/1.3 var(--ed-sans);vertical-align:middle}
.ed-soon::before{content:"";width:6px;height:6px;border-radius:var(--ed-r-sq);background:var(--mint)}
@media (max-width:640px){body footer#footerElem{border-radius:22px;padding:32px 20px 0 !important}body footer#footerElem .float-right{float:none !important}body footer#footerElem .ed-foot__actions{width:100%}body footer#footerElem .ed-foot__actions .ed-btn{flex:1}}

/* ════════════════════════════════════════════════════════════════════════
   Cookie banner: squared buttons, system type. (cookie-banner.css loads
   before this file.)
   ════════════════════════════════════════════════════════════════════════ */
#cookie-banner.cookie-banner .cookie-banner__card{border-radius:var(--ed-r-card) !important;border:1px solid var(--line) !important;box-shadow:var(--ed-sh-mock) !important}
#cookie-banner.cookie-banner .cookie-banner__btn{border-radius:var(--ed-r-btn) !important;font:500 14px/1.2 var(--ed-sans) !important;box-shadow:none !important}
#cookie-banner.cookie-banner .cookie-banner__btn--primary{background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important}
#cookie-banner.cookie-banner .cookie-banner__btn--primary:hover{background:var(--ed-ink-hover) !important}
#cookie-banner.cookie-banner .cookie-banner__btn--ghost{background:#fff !important;border:1px solid var(--line) !important;color:var(--ink) !important}
#cookie-banner.cookie-banner .cookie-banner__btn--ghost:hover{background:var(--ed-white-hover) !important}

/* ════════════════════════════════════════════════════════════════════════
   Email capture band (common/v3/frontend_email_capture.pug): a grey panel
   with a squared field and an ink button.
   ════════════════════════════════════════════════════════════════════════ */
body .cc-email-capture{margin:0 16px 0 !important;padding:clamp(36px,4vw,56px) 20px !important;border-radius:var(--ed-r-panel);background:transparent !important;border:0 !important;text-align:center}
body .cc-email-capture-title{margin:0 0 8px !important;font:500 clamp(26px,2.6vw,36px)/1.05 var(--ed-disp) !important;letter-spacing:-0.03em !important;color:var(--ink) !important}
body .cc-email-capture-desc{margin:0 0 20px !important;font:400 16px/1.5 var(--ed-sans) !important;color:var(--mut) !important}
body .cc-email-form{max-width:460px !important;margin:0 auto !important;padding:5px 5px 5px 14px !important;border:1px solid var(--ed-field-line) !important;border-radius:var(--ed-r-field) !important;background:#fff !important;box-shadow:none !important}
body .cc-email-form:focus-within{border-color:var(--ink) !important;box-shadow:none !important}
body .cc-email-form input[type="email"].cc-email-input{border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;font:400 15px/1.2 var(--ed-sans) !important;color:var(--ink) !important}
body .cc-email-form input[type="email"].cc-email-input::placeholder{color:var(--ed-ph) !important}
body .cc-email-form button.cc-email-submit{border-radius:var(--ed-r-btn) !important;background:var(--ink) !important;color:#fff !important;border:0 !important;box-shadow:none !important;font:500 14px/1.2 var(--ed-sans) !important;text-transform:none !important;letter-spacing:0 !important}
body .cc-email-form button.cc-email-submit:hover{background:var(--ed-ink-hover) !important}

/* ════════════════════════════════════════════════════════════════════════
   /alternatives (hub + rival pages). Their templates carry cobalt in their own
   style blocks; these overrides use a body prefix so they win without editing
   those files (another session owns their markup, 2026-11-11).
   ════════════════════════════════════════════════════════════════════════ */
body .my-alth-card{border:0;border-radius:var(--ed-r-card);background:#fff;padding:24px;transition:background-color .15s ease}
body .my-feat-bg-paper .my-alth-card{background:var(--ed-soft)}
body .my-alth-card:hover{border-color:transparent;transform:none;background:var(--ed-white-hover)}
body .my-alth-card h3{font:500 22px/1.1 var(--ed-disp);letter-spacing:-0.025em;color:var(--ink)}
body .my-alth-card p{font:400 14.5px/1.55 var(--ed-sans);color:var(--mut)}
body .my-alth-card .go{font:500 14px/1.2 var(--ed-sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
body .my-feat-section-inner.my-alth-wide{max-width:1280px}
body .my-alt-tldr{max-width:none;margin:0;padding:clamp(20px,2.4vw,32px);border:0;border-radius:var(--ed-r-card);background:var(--mint);text-align:left}
body .my-alt-tldr p{max-width:820px;font:400 19px/1.5 var(--ed-sans);color:var(--ed-on-mint)}
body .my-alt-table{max-width:none;margin:28px 0 0;border:1px solid var(--line);border-radius:var(--ed-r-card);background:#fff}
body .my-alt-table th,body .my-alt-table td{border-bottom:1px solid var(--line);font:400 15px/1.55 var(--ed-sans)}
body .my-alt-table thead th{background:var(--ink);color:#fff;font:500 14px/1.3 var(--ed-sans)}
body .my-alt-table thead th.us{background:var(--ink);color:var(--mint)}
body .my-alt-table tbody th{font:500 15px/1.4 var(--ed-sans);color:var(--ink);background:#fff}
body .my-alt-table td.us{background:var(--ed-soft);color:var(--ink)}
body .my-alt-table td.them{color:var(--mut)}
body .my-alt-note{max-width:none;margin:10px 0 0;color:var(--ed-label);font:400 13px/1.5 var(--ed-sans)}
body .my-alt-choose{gap:16px}
body .my-alt-col{border:0;border-radius:var(--ed-r-card);background:var(--ed-soft);padding:28px}
body .my-alt-col.us{border:0;background:var(--ink);color:#fff}
body .my-alt-col h3{font:500 24px/1.1 var(--ed-disp);letter-spacing:-0.025em;color:inherit !important}
body .my-alt-col li::before{top:7px;width:8px;height:8px;border-radius:var(--ed-r-sq);background:var(--ink)}
body .my-alt-col.us li::before{background:var(--mint)}
body .my-alt-col li b{font:500 16px/1.3 var(--ed-sans);color:inherit}
body .my-alt-col li span{font:400 14.5px/1.55 var(--ed-sans);color:var(--mut)}
body .my-alt-col.us li span{color:var(--ed-on-dark)}
body .my-alt-more{max-width:none;margin:28px 0 0;text-align:left;color:var(--mut)}
body .my-alt-more a{color:var(--ink) !important;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}

/* ════════════════════════════════════════════════════════════════════════
   /mcp and /mcp/docs: legacy Foundation sections and a lime theme in their own
   style blocks. Mapped onto the system here (body-class prefix + !important to
   beat their !important rules).
   ════════════════════════════════════════════════════════════════════════ */
body.mcp-landing main#hero,body.mcp-docs-page main#hero{padding-top:0 !important}
body.mcp-landing main>section,body.mcp-docs-page main>section{margin:0 16px 16px !important;border-radius:var(--ed-r-panel) !important;background:#fff !important;background-image:none !important;padding:clamp(40px,5vw,80px) clamp(20px,4vw,48px) !important}
body.mcp-landing main>section.bg-grey,body.mcp-docs-page main>section.bg-grey{background:transparent !important}
body.mcp-landing main>section.hero,body.mcp-docs-page main>section.hero{background:var(--ink) !important;color:#fff !important;min-height:0 !important}
body.mcp-landing main>section.hero::before,body.mcp-landing main>section.hero::after,body.mcp-docs-page main>section.hero::before,body.mcp-docs-page main>section.hero::after{display:none !important}
body.mcp-landing .hero h1,body.mcp-docs-page .hero h1{font:500 clamp(44px,6vw,88px)/0.94 var(--ed-disp) !important;letter-spacing:-0.035em !important;color:#fff !important;float:none !important}
body.mcp-landing .hero h2,body.mcp-docs-page .hero h2{font:400 19px/1.45 var(--ed-sans) !important;color:var(--ed-on-dark) !important;letter-spacing:0 !important;float:none !important}
body.mcp-landing .intro-text,body.mcp-docs-page .intro-text{display:inline-flex !important;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--ed-r-chip);background:rgba(255,255,255,0.12);color:#fff !important;font:500 12px/1.2 var(--ed-sans) !important;letter-spacing:0 !important;text-transform:none !important}
body.mcp-landing .intro-text::before,body.mcp-docs-page .intro-text::before{content:"";width:8px;height:8px;border-radius:var(--ed-r-sq);background:var(--mint)}
body.mcp-landing section h2,body.mcp-docs-page section h2{font:500 clamp(32px,3.8vw,56px)/0.98 var(--ed-disp) !important;letter-spacing:-0.035em !important;color:inherit !important}
body.mcp-landing section h3,body.mcp-docs-page section h3{font:500 20px/1.2 var(--ed-disp) !important;letter-spacing:-0.02em !important;color:var(--ink) !important}
body.mcp-landing .content-grey-2,body.mcp-docs-page .content-grey-2{color:var(--mut) !important}
body.mcp-landing .main-button,body.mcp-landing .cta-new-col-white,body.mcp-landing a.cta-new-col-white,body.mcp-docs-page .main-button,body.mcp-docs-page a.cta-new-col-white{display:inline-flex !important;align-items:center;gap:8px;min-height:48px;padding:12px 20px !important;border:0 !important;border-radius:var(--ed-r-btn) !important;background:#fff !important;background-image:none !important;box-shadow:none !important;color:var(--ink) !important;font:500 15px/1.2 var(--ed-sans) !important;text-transform:none !important;letter-spacing:0 !important;width:auto !important}
body.mcp-landing section:not(.hero) .main-button,body.mcp-landing section:not(.hero) a.cta-new-col-white,body.mcp-docs-page section:not(.hero) .main-button{background:var(--ink) !important;color:#fff !important}
body.mcp-landing .main-button span,body.mcp-docs-page .main-button span{color:inherit !important}
body.mcp-landing .svg-icon-right,body.mcp-docs-page .svg-icon-right{display:none !important}
body.mcp-landing .cta-white-black-border,body.mcp-docs-page .cta-white-black-border{border:1px solid var(--line) !important;border-radius:var(--ed-r-btn) !important;background:#fff !important;color:var(--ink) !important}
body.mcp-landing .mcp-clients-label{color:var(--ed-on-dark-sm) !important;font:500 12px/1.2 var(--ed-sans) !important;letter-spacing:0 !important;text-transform:none !important}
body.mcp-landing .mcp-client-chip{display:inline-flex !important;align-items:center;gap:7px;padding:6px 10px !important;border:0 !important;border-radius:var(--ed-r-chip) !important;background:rgba(255,255,255,0.12) !important;color:#fff !important;font:500 12.5px/1.2 var(--ed-sans) !important}
body.mcp-landing .mcp-client-chip::before{content:"";width:8px;height:8px;border-radius:var(--ed-r-sq);background:var(--mint)}
body.mcp-landing .mcp-url-box{border:0 !important;border-radius:var(--ed-r-card) !important;background:#fff !important;box-shadow:none !important}
body.mcp-landing .mcp-url-box .url-label{color:var(--ed-label) !important;font:500 12px/1.2 var(--ed-sans) !important;letter-spacing:0 !important;text-transform:none !important}
body.mcp-landing .mcp-url-box .url-value{border:1px solid var(--ed-field-line) !important;border-radius:var(--ed-r-field) !important;background:var(--ed-soft) !important;color:var(--ink) !important;font-family:var(--ed-mono) !important}
body.mcp-landing .mcp-url-box .url-tip{color:var(--mut) !important}
body.mcp-landing .item-panel,body.mcp-landing .mcp-tool-card,body.mcp-landing .mcp-usecase,body.mcp-landing .mcp-tier,body.mcp-docs-page .item-panel{border:0 !important;border-radius:var(--ed-r-card) !important;background:var(--ed-soft) !important;box-shadow:none !important;transform:none !important}
body.mcp-landing .bg-grey .item-panel,body.mcp-landing .bg-grey .mcp-tool-card,body.mcp-landing .bg-grey .mcp-usecase,body.mcp-landing .bg-grey .mcp-tier{background:#fff !important}
body.mcp-landing .mcp-tier.tier-paid{background:var(--ink) !important}
body.mcp-landing .mcp-tier.tier-paid h3,body.mcp-landing .mcp-tier.tier-paid .tier-desc{color:#fff !important}
body.mcp-landing .number-circle,body.mcp-docs-page .number-circle{border-radius:8px !important;background:var(--ink) !important;border-color:var(--ink) !important;color:#fff !important;font:500 12px/1 var(--ed-mono) !important}
body.mcp-landing code,body.mcp-landing .uc-prompt,body.mcp-landing .mcp-paid-badge,body.mcp-docs-page code{border:0 !important;border-radius:6px !important;background:#fff !important;color:var(--ink) !important;font-family:var(--ed-mono) !important}
body.mcp-landing .bg-grey code{background:var(--ed-soft) !important}
body.mcp-landing .final-cta-section .docs-link a{color:var(--ink) !important}

/* ════════════════════════════════════════════════════════════════════════
   Interim (2026-11-11): de/es/fr/pt/ru homepages still render the previous
   template (frontend.pug, body.my-v2-home), whose nav floats over an ink hero.
   Light nav text there until those locales move to frontend_home_editorial.pug.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:64.0625em){
  body.my-v2-home section.navigation-section .ed-logo,
  body.my-v2-home section.navigation-section .ed-logo__word,
  body.my-v2-home section.navigation-section .top-bar-section ul.left>li>a,
  body.my-v2-home section.navigation-section .top-bar-section ul.left>li:not(.has-form)>a:not(.button),
  body.my-v2-home section.navigation-section ul.right a.button.login-button{color:#fff !important}
  body.my-v2-home section.navigation-section .top-bar-section ul.left>li>a:hover,
  body.my-v2-home section.navigation-section .top-bar-section ul.left>li.has-dropdown:hover>a{background:rgba(255,255,255,0.14) !important}
  body.my-v2-home section.navigation-section ul.right a.button:not(.login-button){background:#fff !important;color:var(--ink) !important}
  body.my-v2-home section.navigation-section .my-mega-item-title{color:var(--ink) !important}
}

/* ── Sweep fixes (2026-11-11): leftovers found by an all-pages colour and shape scan ── */
/* /alternatives/<rival>: the "Import your page" button carries an inline cobalt style. */
body a[style*="2e5bff"],body a[style*="2E5BFF"]{background:var(--ink) !important;color:#fff !important}
/* /mcp and /mcp/docs: accordion chevrons and pill-shaped links. */
body.mcp-landing .svg-icon-chevron-down,body.mcp-docs-page .svg-icon-chevron-down{background-color:var(--ink) !important}
body.mcp-landing main a,body.mcp-docs-page main a{border-radius:var(--ed-r-btn) !important}
body.mcp-landing main a.mcp-client-chip,body.mcp-landing main .mcp-client-chip,body .mcp-paid-badge{border-radius:var(--ed-r-chip) !important}

/* ════════════════════════════════════════════════════════════════════════
   Fixes inside the Editorial design (2026-11-11). Vytas, after a rebuild that
   replaced the look: "you needed to keep it as close as it was before with the
   imagery". So the type scale, the panels and the photos above are the design
   as it was; this block holds only the faults he named, fixed in place.
   ════════════════════════════════════════════════════════════════════════ */
/* Tints behind the menu pictures and audience icons. */
.ed-t-mint{background:var(--ed-tint-mint) !important}.ed-t-sky{background:var(--ed-tint-sky) !important}.ed-t-peach{background:var(--ed-tint-peach) !important}.ed-t-lilac{background:var(--ed-tint-lilac) !important}.ed-t-lemon{background:var(--ed-tint-lemon) !important}.ed-t-rose{background:var(--ed-tint-rose) !important}
/* "too gray": the legacy .inner-wrap painted #E0E0E3 over the page colour, so every gap
   between panels showed a cooler, darker grey than the design's own #EFEEEC. */
body .inner-wrap{background:transparent !important}
/* Offer bar ("i dont like this gap", then "i dont like this, maybe how is on creatorflow.so"):
   no longer a rounded ink bar floating 16px from the top. It is a flat white strip across the
   very top, as on CreatorFlow: the offer in one line, an underlined link, a close button.
   Markup: common/v3/frontend_announce.pug. On phones the strip also holds the 64px that keeps
   the page clear of the fixed tab bar, so a closed strip collapses there instead of vanishing. */
body .ed-announce{position:relative;display:flex;align-items:center;justify-content:center;gap:0;min-height:46px;margin:0;padding:8px 56px;border-radius:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);font:400 14.5px/1.35 var(--ed-sans);text-align:center}
body .ed-announce:hover,body .ed-announce:focus{background:#fff;color:var(--ink)}
body .ed-announce__link{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;color:var(--ink);text-decoration:none}
body .ed-announce__link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
body .ed-announce__lead{margin-right:6px;color:var(--ink);font-weight:600}
body .ed-announce__body{color:var(--mut)}
body .ed-announce__cta{display:inline;height:auto;padding:0;border-radius:0;background:transparent;color:var(--ink);font:600 14.5px/1.35 var(--ed-sans);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
body .ed-announce:hover .ed-announce__cta{background:transparent}
body .ed-announce__close,body .ed-announce__close:hover,body .ed-announce__close:focus,body .ed-announce__close:active{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0 !important;border:0 !important;border-radius:8px;background:transparent !important;box-shadow:none !important;color:var(--ink) !important;cursor:pointer}
body .ed-announce__close:hover{background:rgba(17,18,18,0.06) !important}
body .ed-announce__close:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
body .ed-announce.is-closed{display:none}
@media (max-width:64em){
  body .ed-announce{margin-top:64px}
  body .ed-announce.ed-announce--static{margin-top:0}
  body .ed-announce.is-closed{display:block;min-height:0;height:0;padding:0;border:0;overflow:hidden}
  body .ed-announce.ed-announce--static.is-closed{display:none}
}
@media (max-width:640px){
  body .ed-announce{justify-content:flex-start;padding:10px 48px 10px 20px;font-size:13.5px;text-align:left}
  body .ed-announce__link{justify-content:flex-start}
  body .ed-announce__cta{display:inline;font-size:13.5px}
  body .ed-announce__body::after{content:none}
}
/* "hero top spacing": the hero panel was 780px tall with the headline centred in it, so the
   headline started 235px under the panel's top edge. A shorter panel lifts it. */
html body.ed-home .ed-hero{min-height:min(640px,72vh)}
@media (min-width:64.0625em){html body.ed-home .ed-hero{padding-top:118px}}
/* "mobile hero looks super messy": on a phone the headline, the text and the name field lay
   over the face in the photo. The photo now sits on top, whole, and the words sit under it
   on ink. Same photo, same words. */
@media (max-width:640px){
  html body.ed-home .ed-hero{min-height:0;padding-top:0;background:var(--ink)}
  html body.ed-home .ed-hero__img{position:relative;inset:auto;display:block;width:calc(100% + 40px);max-width:none;height:300px;margin:0 -20px;object-fit:cover;object-position:66% 28%}
  html body.ed-home .ed-hero__shade{inset:auto 0 auto 0;top:220px;height:82px;background:linear-gradient(180deg,rgba(17,18,18,0),var(--ink))}
  html body.ed-home .ed-hero__content{margin:0;padding-top:18px}
  html body.ed-home .ed-hero .ed-h1{margin:14px 0 14px}
}
/* Closing card on /about, /how-it-works and /skills: "more.you/yourname" is one unbreakable
   word, 14px wider than its column on a 390px phone, so the panel clipped it. The heading
   scales with the screen there (36px at 390) and the address stays on one line; break-word
   is the net for anything narrower. */
@media (max-width:640px){.ed-co-final .ed-h2{font-size:clamp(30px,9.2vw,40px);overflow-wrap:break-word}}
/* Hero frame on every page (2026-11-11: "no left, right spacing and on top should be no spacing
   between hero image and banner", "align across all pages"). The first panel of a page runs
   edge to edge, starts directly under the offer strip and holds the menu bar inside it, the
   way the homepage hero holds it. Its text keeps the same left edge as the panels below
   (their 16px page margin is added to its padding). Pages whose first section has no panel
   (company pages, help) keep the bar on the page colour. */
body main > section:first-child:not(.ed-panel--grey){margin-top:0 !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;border-radius:0 0 var(--ed-r-panel) var(--ed-r-panel) !important;padding-left:var(--ed-edge) !important;padding-right:var(--ed-edge) !important}

@media (min-width:64.0625em){
  body main > section:first-child:not(.ed-panel--grey){margin-top:-76px !important}
  body main > section:first-child:not(.ed-panel--grey):not(.ed-hero){padding-top:calc(76px + clamp(32px,4vw,56px)) !important}
  html body.ed-home section.navigation-section{margin-top:0 !important}
  /* Ink heroes (features, pricing, comparisons, agencies, /mcp): the bar inside them reads in white. */
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .ed-logo,
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .ed-logo__word,
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .top-bar-section ul.left>li>a,
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .top-bar-section ul.left>li:not(.has-form)>a:not(.button),
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section ul.right a.button.login-button{color:#fff !important}
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .top-bar-section ul.left>li>a:hover,
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .top-bar-section ul.left>li.has-dropdown:hover>a,
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section .top-bar-section ul.left>li.has-dropdown.ed-open>a,
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section ul.right a.button.login-button:hover{background:rgba(255,255,255,0.14) !important}
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section ul.right a.button:not(.login-button){background:#fff !important;color:var(--ink) !important}
  body:is(.my-feat,.ed-agency,.mcp-landing,.mcp-docs-page,.ed-dark-hero,.lr:has(main>section.lr-hero:first-child),.ed-co:has(main>section.ed-co-hero:first-child)) section.navigation-section ul.right a.button:not(.login-button):hover{background:var(--ed-white-hover) !important}
}
/* Page hero with a person (2026-11-11: "all pages like /for/coaches very ugly", "align across all
   pages"). Audience, industry and use-case pages open like the homepage: the menu inside, words on
   the left, a photo of a person filling the right half from top to bottom. The top of the example
   page stands on the photo as a card. No breadcrumb, one paragraph, no line under the field.
   Templates add .ed-phero to the hero panel, .ed-phero__stage to the visual column and
   .ed-dark-hero to <body> (white menu text). */
main>section.ed-phero{display:flex;align-items:stretch;min-height:min(600px,70vh);background:var(--ink) !important;color:#fff}
main>section.ed-phero>.ed-inner{position:static;display:grid;width:100%}
main>section.ed-phero .ed-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:clamp(28px,5vw,80px)}
main>section.ed-phero .ed-split>div:first-child{align-self:center;padding:12px 0}
main>section.ed-phero h1{margin:0 0 20px;font:500 clamp(40px,5.2vw,80px)/0.95 var(--ed-disp);letter-spacing:-0.035em;color:#fff !important;text-wrap:balance}
main>section.ed-phero :is(.fp-lead,.ix-lead,.uc-lead,.ed-lead,.mt-lead){max-width:540px;color:rgba(255,255,255,0.8)}
main>section.ed-phero .ed-note{color:rgba(255,255,255,0.7)}
main>section.ed-phero .ed-field{border-color:transparent}
main>section.ed-phero .ed-chip{margin-bottom:18px;background:rgba(255,255,255,0.14);color:#fff}
main>section.ed-phero .ed-phero__stage{position:static;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 !important;border-radius:0 !important;background:transparent !important}
.ed-phero__photo{position:absolute;top:0;right:0;bottom:0;width:50%;overflow:hidden;background:#1D1E1E}
.ed-phero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.ed-phero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(17,18,18,0.5) 16%,rgba(17,18,18,0) 44%),linear-gradient(180deg,rgba(17,18,18,0.55) 0,rgba(17,18,18,0) 150px)}
/* The example page as a card: the phone frame goes, the top of the page stays and fades out. */
main>section.ed-phero .ed-phero__stage>div:first-child{position:relative;z-index:1;flex:none;margin:0 0 0 calc(-1 * clamp(24px,5vw,96px))}
main>section.ed-phero .ed-phero__stage .ed-phone{width:300px;max-width:100%;padding:0;border-radius:22px;background:transparent;box-shadow:0 26px 60px rgba(0,0,0,0.38)}
main>section.ed-phero .ed-phero__stage .ed-phone__screen{position:relative;min-height:0;max-height:372px;padding:22px 16px 0;border-radius:22px;overflow:hidden}
main>section.ed-phero .ed-phero__stage .ed-phone__screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 82%)}
@media (max-width:900px){
  main>section.ed-phero{display:block;min-height:0;padding-bottom:0 !important}
  main>section.ed-phero .ed-split{grid-template-columns:1fr;gap:28px}
  main>section.ed-phero .ed-phero__stage{display:grid;margin:0 calc(-1 * var(--ed-edge))}
  .ed-phero__photo{position:relative;grid-area:1/1;width:100%;height:clamp(320px,62vw,460px)}
  .ed-phero__photo::after{background:linear-gradient(180deg,var(--ink) 0,rgba(17,18,18,0) 30%)}
  main>section.ed-phero .ed-phero__stage>div:first-child{grid-area:1/1;align-self:end;justify-self:start;margin:0 0 20px var(--ed-edge)}
  main>section.ed-phero .ed-phero__stage .ed-phone{width:250px}
  main>section.ed-phero .ed-phero__stage .ed-phone__screen{max-height:236px}
}
/* Hub heroes: three photos of the people the hub is for. */
.ed-phero__trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}
.ed-phero__trio span{display:block;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#1D1E1E}
.ed-phero__trio span:nth-child(2){transform:translateY(-22px)}
.ed-phero__trio img{display:block;width:100%;height:100%;object-fit:cover}
main>section.ed-phero .mt-badge{background:rgba(255,255,255,0.12);color:#fff;border-color:transparent}
main>section.ed-phero:has(.ed-phero__trio){min-height:0}
main>section.ed-phero:has(.ed-phero__trio) .ed-split{align-items:center}
@media (max-width:900px){.ed-phero__trio{margin-top:26px}.ed-phero__trio span:nth-child(2){transform:translateY(-12px)}}
/* ONE EDGE 2026-11-11 ("why text and header menu not vertically aligned"). The logo, the hero text
   and every section below start at the same x, and the header button ends where the content ends.
   --ed-edge is that distance from the window edge: the 16px page margin plus the panel padding, or
   the centred 1280px column on wide screens. */
:root{--ed-pad:clamp(20px,4.4vw,64px);--ed-edge:max(calc(16px + var(--ed-pad)),calc(50vw - 640px))}
body section.navigation-section{padding-left:var(--ed-pad) !important;padding-right:var(--ed-pad) !important}
.ed-panel.ed-panel--grey{padding-left:var(--ed-pad);padding-right:var(--ed-pad)}
.ed-page>.ed-marquee{padding-left:var(--ed-pad) !important;padding-right:var(--ed-pad) !important}
/* Hero labels: capitals, no dot (2026-11-11). */
main>section:first-child .ed-chip{text-transform:uppercase;letter-spacing:.07em;font-size:11px;padding:7px 11px}
main>section:first-child .ed-chip::before{display:none}
/* The logo tile starts 4px left of its box; bring it onto the shared edge. */
@media (min-width:64.0625em){body section.navigation-section .top-bar .title-area{margin-left:4px}}
/* COURSES HERO 2026-11-11 (Vytas on /learn: "i dont like this"; "in hero never add" a breadcrumb).
   The courses hub and course pages open like every other hub: dark, white words, the menu inside.
   Their markup and learn.css belong to the courses work; only the colours change here. */
html body.lr .lr-crumb{display:none !important}
html body.lr main>section.lr-hero{background:var(--ink) !important;color:#fff}
html body.lr main>section.lr-hero .lr-hero__h1{color:#fff !important}
html body.lr main>section.lr-hero .lr-hero__lead{color:rgba(255,255,255,0.8) !important}
html body.lr main>section.lr-hero .lr-chip{padding:7px 11px;border-radius:var(--ed-r-chip);background:rgba(255,255,255,0.14);color:#fff;text-transform:uppercase;letter-spacing:.07em;font-size:11px}
html body.lr main>section.lr-hero .lr-chip__ic{display:none}
html body.lr main>section.lr-hero .lr-meta li{border-color:rgba(255,255,255,0.24);color:#fff}
html body.lr main>section.lr-hero .lr-meta .lr-ic{color:rgba(255,255,255,0.7)}
html body.lr main>section.lr-hero .lr-actions .ed-btn--ink{background:#fff;color:var(--ink) !important}
html body.lr main>section.lr-hero .lr-actions .ed-btn--ink:hover{background:var(--ed-white-hover)}
html body.lr main>section.lr-hero .lr-actions .ed-btn--ghost{background:transparent;color:#fff !important;border-color:rgba(255,255,255,0.3)}
html body.lr main>section.lr-hero .lr-actions .ed-btn--ghost:hover{background:rgba(255,255,255,0.08)}
/* FEATURE HERO 2026-11-11 (Vytas: "extremely ugly pages" on /features/*). Feature pages open like
   every other page: words on the left, a photo of a person filling the right half. */
body.my-feat main>section.my-feat-hero--photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;min-height:min(600px,70vh)}
body.my-feat main>section.my-feat-hero--photo .my-feat-hero-inner{max-width:none;margin:0;padding:12px 0}
body.my-feat main>section.my-feat-hero--photo .my-feat-h1{max-width:none;font-size:clamp(40px,5.2vw,80px) !important}
body.my-feat main>section.my-feat-hero--photo .my-feat-sub{max-width:540px}
@media (max-width:900px){
  body.my-feat main>section.my-feat-hero--photo{display:block;min-height:0;padding-bottom:0 !important}
  body.my-feat main>section.my-feat-hero--photo .ed-phero__photo{margin:28px calc(-1 * var(--ed-edge)) 0;width:auto}
}
/* FOOTER FIVE 2026-11-11: ten link groups in five columns on desktop. */
@media (min-width:1025px){body footer#footerElem .ed-foot__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:44px 28px}}
body footer#footerElem .ed-foot__list a{position:relative}
/* MENU PHOTOS 2026-11-11: the Product cards and the audience rows use real photos, not drawings. */
body section.navigation-section a.my-pm-card{padding:8px 8px 14px !important;background:#fff !important;box-shadow:inset 0 0 0 1px var(--line)}
body section.navigation-section a.my-pm-card:hover,body section.navigation-section a.my-pm-card:focus-visible{background:var(--ed-soft) !important;transform:none;box-shadow:inset 0 0 0 1px var(--line)}
body section.navigation-section .my-pm-photo{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin:0 0 12px}
body section.navigation-section a.my-pm-card .my-pm-title,body section.navigation-section a.my-pm-card .my-pm-desc{padding:0 6px}
body section.navigation-section .my-um-photo{flex:none;width:46px;height:46px;border-radius:12px;object-fit:cover}
body section.navigation-section a.my-um-card{align-items:center}
/* HERO FIELD 2026-11-11 ("maybe this should slightly bigger to stand out"): the claim field in a hero
   is the main action, so it is larger than the same field further down a page. */
main>section:first-child .ed-field{max-width:540px;padding:7px 7px 7px 20px;border-radius:16px}
main>section:first-child .ed-field .ed-field__prefix,main>section:first-child .ed-field input[type="text"]{font-size:18px !important}
main>section:first-child .ed-field input[type="text"]{height:54px !important}
main>section:first-child .ed-field .ed-btn{min-height:54px;padding:14px 24px;border-radius:12px;font-size:16.5px}
@media (max-width:640px){main>section:first-child .ed-field{padding:8px}main>section:first-child .ed-field .ed-field__prefix{padding-left:10px}}
/* HERO HEIGHT 2026-11-11 ("i dont like hero full above fold"): a hero never fills the first screen;
   the top of the next section shows under it. The courses hub shows its photos in one row. */
html body.lr main>section.lr-hero{padding-bottom:clamp(36px,4vw,56px) !important}
html body.lr main>section.lr-hero--hub .lr-mosaic{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;align-items:center;max-width:560px;margin-inline-start:auto}
html body.lr main>section.lr-hero--hub .lr-mosaic li{aspect-ratio:3/4;margin:0 !important;transform:none !important}
html body.lr main>section.lr-hero--hub .lr-mosaic li:nth-child(even){transform:translateY(-18px) !important}
html body.lr main>section.lr-hero--hub .lr-mosaic__label{left:8px;right:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.lr main>section.lr-hero--hub .lr-mosaic__ic{display:none}
html body.lr main>section.lr-hero .lr-hero__photo{max-height:340px}
@media (max-width:900px){html body.lr main>section.lr-hero--hub .lr-mosaic{max-width:none;margin-top:8px}}
/* COMPARISON HERO 2026-11-11: words on the left, the comparison picture on the right, so the hero
   stays short and the answer below it shows on the first screen. Same for the agencies hero. */
body.my-feat:not(.ed-feature) main>section.my-feat-hero:has(>.my-feat-hero-video){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
body.my-feat:not(.ed-feature) main>section.my-feat-hero:has(>.my-feat-hero-video) .my-feat-hero-inner{max-width:none;margin:0}
body.my-feat:not(.ed-feature) main>section.my-feat-hero:has(>.my-feat-hero-video) .my-feat-h1{font-size:clamp(40px,5.2vw,80px) !important}
body.my-feat:not(.ed-feature) main>section.my-feat-hero:has(>.my-feat-hero-video) .my-feat-hero-video{width:100%;max-width:none;margin:0;border-radius:var(--ed-r-card);box-shadow:none}
@media (max-width:900px){body.my-feat:not(.ed-feature) main>section.my-feat-hero:has(>.my-feat-hero-video){grid-template-columns:1fr}}
main>section.ag-hero .ed-h1{font-size:clamp(40px,5.2vw,80px)}
/* MENU FIVE 2026-11-11: the Product menu is five outcome cards in one row. */
body section.navigation-section .my-pm-drop{width:min(1080px,calc(100vw - 2 * var(--ed-edge))) !important}
body section.navigation-section .my-pm-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body section.navigation-section a.my-pm-card .my-pm-title{display:block;font:500 16px/1.2 var(--ed-disp);letter-spacing:-0.02em;color:var(--ink)}
body section.navigation-section a.my-pm-card .my-pm-desc{display:block;margin-top:5px;font:400 13.5px/1.4 var(--ed-sans);color:var(--mut)}
/* MENU WEIGHT 2026-11-11 ("why titles in bold in dropdown -- do not do this"): menu titles use the
   same medium weight as every other heading. */
body section.navigation-section :is(.my-um-title,.my-pm-title,.my-mega-item-title,.my-pm-link){font-weight:500 !important}
/* MENU TEXT ONLY 2026-11-11 ("i dont like this visuals, no images in dropdowns"): menus are words
   only. A title in medium weight and one plain line under it. */
body section.navigation-section a.my-pm-card{padding:16px 16px 18px !important;box-shadow:none;background:transparent !important;border-radius:14px !important}
body section.navigation-section a.my-pm-card:hover,body section.navigation-section a.my-pm-card:focus-visible{background:var(--ed-soft) !important;box-shadow:none}
body section.navigation-section a.my-pm-card .my-pm-title,body section.navigation-section a.my-pm-card .my-pm-desc{padding:0}
body section.navigation-section .my-pm-cards{gap:4px}
body section.navigation-section a.my-um-card{align-items:flex-start}
/* COMPANY HERO 2026-11-11 ("ugly page" on /how-it-works; "align across all pages"): company pages
   open dark and edge to edge like every other page, with the menu inside the hero. */
body.ed-co main>section.ed-co-hero:first-child{margin-top:0 !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;border-radius:0 0 var(--ed-r-panel) var(--ed-r-panel) !important;padding-left:var(--ed-edge) !important;padding-right:var(--ed-edge) !important;padding-bottom:clamp(40px,5vw,72px) !important;background:var(--ink) !important;color:#fff}
@media (min-width:64.0625em){body.ed-co main>section.ed-co-hero:first-child{margin-top:-76px !important;padding-top:calc(76px + clamp(32px,4vw,56px)) !important}}
body.ed-co main>section.ed-co-hero:first-child :is(h1,.ed-h1){color:#fff !important;font-size:clamp(40px,5.2vw,80px)}
body.ed-co main>section.ed-co-hero:first-child :is(.ed-lead,.ed-body,p){color:rgba(255,255,255,0.8)}
body.ed-co main>section.ed-co-hero:first-child .ed-label{color:rgba(255,255,255,0.64)}
body.ed-co main>section.ed-co-hero:first-child .ed-chip{background:rgba(255,255,255,0.14);color:#fff}
body.ed-co main>section.ed-co-hero:first-child .ed-btn--ink{background:#fff;color:var(--ink) !important}
body.ed-co main>section.ed-co-hero:first-child .ed-btn--ink:hover{background:var(--ed-white-hover)}
body.ed-co main>section.ed-co-hero:first-child .ed-btn--ghost{background:transparent;color:#fff !important;border-color:rgba(255,255,255,0.3)}
body.ed-co main>section.ed-co-hero:first-child .ed-btn--ghost:hover{background:rgba(255,255,255,0.08)}
body.ed-co main>section.ed-co-hero:first-child a:not(.ed-btn){color:#fff}
/* AI READS 2026-11-11: what an AI assistant reads on a page, as a plain list (no code box). */
.ed-reads{padding:8px 24px 10px;border-radius:var(--ed-r-card);background:rgba(255,255,255,0.06)}
.ed-reads__title{margin:0;padding:16px 0 14px;font:500 13px/1.3 var(--ed-sans);color:rgba(255,255,255,0.64)}
.ed-reads dl{margin:0}
.ed-reads dl>div{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,0.14)}
.ed-reads dt{margin:0;font:400 14.5px/1.4 var(--ed-sans);color:rgba(255,255,255,0.64)}
.ed-reads dt::first-letter,.ed-reads dd::first-letter{text-transform:uppercase}
.ed-reads dd{margin:0;font:500 15px/1.4 var(--ed-sans);color:#fff}
@media (max-width:640px){.ed-reads{padding:4px 16px 6px}.ed-reads dl>div{grid-template-columns:1fr;gap:2px}}
/* Help topic and guide pages: one plain link back instead of a breadcrumb trail (2026-11-11). */
a.ht-back{display:inline-block;margin:0 0 16px;font:500 14px/1.3 var(--ed-sans);color:var(--mut) !important;text-decoration:none !important}
a.ht-back:hover{color:var(--ink) !important}
/* MENU PREVIEWS 2026-11-11 ("not visual, not clear what it is"): each Product card opens with a
   small drawn page that shows the result. Drawn in HTML on a warm grey tile, ink and mint only,
   no photos. Replaces the words-only ruling for the Product menu. */
body section.navigation-section a.my-pm-card{padding:10px 10px 16px !important}
body section.navigation-section a.my-pm-card:hover,body section.navigation-section a.my-pm-card:focus-visible{background:var(--ed-soft) !important}
body section.navigation-section a.my-pm-card .my-pm-title,body section.navigation-section a.my-pm-card .my-pm-desc{padding:0 6px}
.pm-art{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:128px;margin:0 0 14px;border-radius:12px;background:var(--ed-soft);overflow:hidden;font:500 9.5px/1.2 var(--ed-sans);color:var(--ink);letter-spacing:0;transition:background-color .16s ease}
a.my-pm-card:hover .pm-art,a.my-pm-card:focus-visible .pm-art{background:#E9E7E2}
.pm-art i,.pm-art b,.pm-art u{font-style:normal;text-decoration:none}
.pm-page{display:flex;flex-direction:column;align-items:center;gap:5px;width:92px;padding:10px 8px;border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(17,18,18,0.06),0 8px 20px rgba(17,18,18,0.08)}
.pm-ava{display:block;width:20px;height:20px;border-radius:50%;background:var(--mint);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--line)}
.pm-name{display:block;width:44px;height:5px;margin-bottom:2px;border-radius:3px;background:var(--ink)}
.pm-row{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:17px;border-radius:5px;background:var(--ed-soft);white-space:nowrap}
.pm-bar{display:block;width:100%;height:6px;border-radius:3px;background:currentColor;opacity:.18}
/* Your own design: one page in three looks. */
.pm-art--design .pm-page{width:58px;padding:9px 7px;gap:5px;align-items:flex-start}
.pm-art--design .pm-page b{font:600 14px/1 var(--ed-disp);letter-spacing:-0.02em}
.pm-art--design .pm-page--a{transform:rotate(-6deg) translateY(4px)}
.pm-art--design .pm-page--b{background:var(--ink);color:#fff;z-index:1}
.pm-art--design .pm-page--b .pm-bar{opacity:.4}
.pm-art--design .pm-page--c{background:var(--mint);color:var(--ed-on-mint);transform:rotate(6deg) translateY(4px)}
.pm-art--design .pm-page--c b{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic}
.pm-art--design .pm-page .pm-bar:last-child{width:70%}
/* Newest post on top: the new post sits first, the others move down. */
.pm-art--pin .pm-page{width:104px;gap:6px}
.pm-row--new{justify-content:flex-start;height:24px;padding:0 6px 0 4px;background:var(--ink);color:#fff;font-weight:600}
.pm-row--new u{margin-left:auto;display:grid;place-items:center;width:13px;height:13px;border-radius:4px;background:var(--mint);color:var(--ink);font:700 9px/1 var(--ed-sans)}
.pm-thumb{display:block;width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--mint),#7FD9C0)}
.pm-row--old{color:var(--mut)}
/* See your clicks: a number and a week of bars. */
.pm-stat{display:flex;flex-direction:column;width:118px;padding:10px 10px 8px;border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(17,18,18,0.06),0 8px 20px rgba(17,18,18,0.08)}
.pm-num{font:600 17px/1 var(--ed-disp);letter-spacing:-0.02em}
.pm-cap{margin-top:3px;color:var(--mut);font-weight:400}
.pm-bars{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:8px}
.pm-bars i{flex:1;display:block;border-radius:3px 3px 1px 1px;background:var(--ed-soft)}
.pm-bars i.is-top{background:var(--mint);box-shadow:inset 0 0 0 1px rgba(17,18,18,0.12)}
/* Move from Linktree: an old page becomes a More.You page. */
.pm-art--import .pm-page{width:62px;padding:9px 7px;gap:5px}
.pm-art--import .pm-page--old{background:#E2E0DB;box-shadow:none;color:var(--mut)}
.pm-art--import .pm-page--new .pm-row{height:9px}
.pm-art--import .pm-page--new .pm-row:first-of-type{background:var(--ink)}
.pm-arrow{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:600 12px/1 var(--ed-sans)}
@media (max-width:1180px){.pm-art{height:104px;transform-origin:center}.pm-art>*{transform:scale(.86)}.pm-art--design .pm-page--a{transform:scale(.86) rotate(-6deg) translateY(4px)}.pm-art--design .pm-page--c{transform:scale(.86) rotate(6deg) translateY(4px)}}
@media (prefers-reduced-motion:reduce){.pm-art{transition:none}}
.pm-art--links .pm-page{gap:4px;padding:8px 8px 9px}
.pm-art--links .pm-row{height:15px}
.pm-art--links .pm-ava{width:18px;height:18px}
.pm-art--design{gap:6px}
.pm-art--design .pm-page{width:52px}
.pm-art--import .pm-page--old .pm-ava{background:#CFCCC6;box-shadow:none}
.pm-art--import .pm-page--old .pm-bar{height:9px;border-radius:4px;opacity:1;background:#fff}
/* MOBILE HERO 2026-11-11 ("all mobile hero looks super bad"). One pattern on phones for every page:
   the words and the action first, then one full-width rounded photo. No overlapping example card,
   no photo strip, no dark bars beside the picture. */
@media (max-width:900px){
  main>section.ed-phero{display:block;min-height:0;padding-bottom:28px !important}
  main>section.ed-phero .ed-phero__stage{display:block !important;margin:0 !important}
  main>section.ed-phero .ed-phero__stage>div:first-child{display:none !important}
  .ed-phero__photo{position:relative !important;top:auto;right:auto;bottom:auto;width:100% !important;height:clamp(240px,68vw,440px) !important;margin:0 !important;border-radius:22px}
  .ed-phero__photo::after{display:none}
  body.my-feat main>section.my-feat-hero--photo{padding-bottom:28px !important}
  body.my-feat main>section.my-feat-hero--photo .ed-phero__photo{margin:28px 0 0 !important}
  .ed-phero__trio{margin-top:28px}
}
@media (max-width:640px){
  html body.ed-home .ed-hero{display:flex;flex-direction:column;min-height:0;padding-top:28px !important;padding-bottom:28px !important;background:var(--ink)}
  html body.ed-home .ed-hero__content{order:1;margin:0;padding-top:0}
  html body.ed-home .ed-hero__img{order:2;position:relative;inset:auto;display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3.3;margin:26px 0 0;border-radius:22px;object-fit:cover;object-position:66% 30%}
  html body.ed-home .ed-hero__shade{display:none}
  html body.ed-home .ed-hero .ed-h1{margin:14px 0 14px}
}

/* Menu labels in other languages (2026-11-11 night; found by scripts/locales/menu-qa.js). English fits on one
   line. In eleven other languages a label in the Use cases menu was wider than its column and was cut at the
   edge ("Salles de sport et studios de fitness", "Gyms" in Arabic). A long label now wraps onto a second line.
   The small sample rows drawn inside the Product cards end with an ellipsis instead of running past their pill. */
body section.navigation-section .my-um-list a.my-pm-link{white-space:normal;overflow-wrap:break-word}
.pm-row:not(.pm-row--new){display:block;padding:0 4px;line-height:17px;text-align:center;overflow:hidden;text-overflow:ellipsis}
/* The "New video" sample row: a longer label ("Nouvelle vidéo", "Новое видео") squeezed its thumbnail to nothing.
   Outside English the label may take two lines, and the thumbnail and the arrow keep the size English shows. */
html:not([lang^="en"]) .pm-row--new{white-space:normal;line-height:1.15}
html:not([lang^="en"]) .pm-row--new .pm-thumb{flex-shrink:100;min-width:11.5px}
html:not([lang^="en"]) .pm-row--new u{flex-shrink:100;min-width:9.5px}