@import url("aal-dot.css?v=20261026g"); /* grey dot token (Coop, 26 Oct 2026) */
/*
  "Myself" landing page (consumer homepage, dark neon). AI Accuracy Lab, public site.
  From the canvas board "A · Be the one who spots it (dark neon)", 25 Oct 2026.

  Everything is scoped under .me-page (the page wrapper). Class prefix: me-.
  Order: font, tokens, base, shared parts (tubes, ball, buttons, pills, motion), then each section top to bottom.

  Fonts:
  - Quicksand (the neon tube lettering) is self-hosted from ../fonts/ (full, unmodified variable font, SIL OFL 1.1, see fonts/OFL.txt).
    Alternative: load https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap and delete the @font-face below.
  - Inter (everything else) and Newsreader (the example cover letter and certificate) are the site's existing fonts.

  Motion:
  - Neon lines switch on in groups 1.1 s apart (WCAG 2.3.1: never more than 3 flashes in any second).
  - js/myself-landing.js (optional) holds each neon section's switch-on until it is 35% on screen.
  - prefers-reduced-motion: reduce turns every animation and transition off; neon shows fully lit, halos appear without flicker.
*/

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/quicksand-variable.woff2") format("woff2");
}

/* ============================================================
   Tokens
   ============================================================ */

.me-page {
  /* Walls and surfaces */
  --me-ground: #120D0F;          /* page wall */
  --me-band: #141416;            /* alternate band (Heat-map, How it works, Pricing) */
  --me-card: #1A1517;            /* step and pricing cards */
  --me-card-top: #1F191B;        /* culprit card gradient */
  --me-card-bottom: #161214;
  --me-footer: #0D0A0B;
  --me-hairline: rgba(255, 255, 255, 0.08);
  --me-hairline-soft: rgba(255, 255, 255, 0.06);

  /* Text */
  --me-text: #FFFFFF;
  --me-lead: #ECE7E9;            /* hero and pricing body */
  --me-body: #D6D2D4;            /* section body */
  --me-nav: #E4E0E2;             /* header links, lists */
  --me-note: #B9B3B6;            /* disclaimers, footer, small print */
  --me-link: #FDC029;
  --me-link-hover: #FEE21F;
  --me-focus: #FEE21F;

  /* Brand neon colours (newest logo kit) */
  --me-red-deep: #C8102E;
  --me-vermilion: #E0251F;
  --me-red: #EF2E27;
  --me-orange: #F45A26;
  --me-amber: #FA8A2B;
  --me-gold: #FDC029;
  --me-yellow: #FEE21F;

  /* Tube recipes: pale core (the text colour), then the tube colour, then a wide halo */
  --me-core-yellow: #FFF6CC;
  --me-core-orange: #FFEAD6;
  --me-core-red: #FFE4DE;
  --me-tube-yellow: 0 0 1px #FFFFFF, 0 0 4px #FFF0A0, 0 0 10px #FEE21F, 0 0 22px #FDC029,
                    0 0 44px rgba(250, 138, 43, 0.85), 0 0 80px rgba(250, 138, 43, 0.5);
  --me-tube-orange: 0 0 1px #FFFFFF, 0 0 4px #FFB070, 0 0 10px #FA8A2B, 0 0 22px #F45A26,
                    0 0 46px rgba(244, 90, 38, 0.88), 0 0 90px rgba(244, 90, 38, 0.5);
  --me-tube-red:    0 0 1px #FFFFFF, 0 0 4px #FF8A7A, 0 0 10px #FF4D3D, 0 0 22px #EF2E27,
                    0 0 46px rgba(224, 37, 31, 0.9), 0 0 90px rgba(200, 16, 46, 0.6);

  /* Tube pills and rings (likelihood labels, step numbers) */
  --me-pill-red: #FF6B5E;
  --me-pill-red-glow: 0 0 6px #FF5A4A, 0 0 18px rgba(239, 46, 39, 0.75), inset 0 0 10px rgba(239, 46, 39, 0.5);
  --me-pill-orange: #FFA052;
  --me-pill-orange-glow: 0 0 6px #FFA052, 0 0 18px rgba(250, 138, 43, 0.7), inset 0 0 10px rgba(250, 138, 43, 0.45);
  --me-pill-yellow: #FFE45C;
  --me-pill-yellow-glow: 0 0 6px #FFE45C, 0 0 18px rgba(253, 192, 41, 0.65), inset 0 0 10px rgba(253, 192, 41, 0.4);

  /* Ball: lit version (neon signs) and flat version (the full stop after Inter headlines, the wordmark) */
  --me-ball-lit: var(--aal-dot-on-dark,linear-gradient(135deg,#D8D8DC 15%,#9A9AA0 85%));
  --me-ball-glow: none;   /* grey dot: no glow */
  --me-ball: var(--aal-dot-on-dark,linear-gradient(135deg,#D8D8DC 15%,#9A9AA0 85%));

  /* Gradient phrase in Inter headlines (bright version for dark walls) */
  --me-grad: linear-gradient(90deg, #FF4D3D 0%, #FF7A1A 45%, #FFB800 75%, #FFE14D 100%);
  --me-wordmark-lab: linear-gradient(90deg, #E0251F, #F45A26 55%, #FDC029);

  /* Buttons */
  --me-cta: linear-gradient(95deg, #FFD60A 0%, #FFD60A 55%, #FF8A00 80%, #F2501E 100%);
  --me-cta-ink: #1D1D1F;
  --me-cta-glow: 0 0 18px rgba(253, 192, 41, 0.6), 0 0 44px rgba(250, 138, 43, 0.45);
  --me-header-cta: #FFC21A;
  --me-ghost-line: rgba(255, 255, 255, 0.7);

  /* Culprit card halo (hover / keyboard focus): electric yellow neon ring */
  --me-halo-core: #FFF6B8;
  --me-halo-glow: 0 0 4px #FFFFFF, 0 0 10px #FEE21F, 0 0 24px #FDC029, 0 0 48px rgba(250, 138, 43, 0.75),
                  inset 0 0 10px #FEE21F, inset 0 0 28px rgba(253, 192, 41, 0.55);
  --me-halo-card: inset 0 0 0 1.5px #FFE45C, 0 0 10px rgba(254, 226, 31, 0.6), 0 0 28px rgba(253, 192, 41, 0.45),
                  0 0 64px rgba(250, 138, 43, 0.25);

  /* Heat-map flags in the example document (same line styles as the product) */
  --me-higher-fill: rgba(215, 38, 61, 0.12);
  --me-higher-line: #C8102E;     /* solid */
  --me-higher-glow: rgba(239, 46, 39, 0.42);
  --me-medium-fill: rgba(242, 99, 42, 0.16);
  --me-medium-line: #E8590C;     /* dashed */
  --me-medium-glow: rgba(255, 122, 26, 0.40);
  --me-lower-fill: rgba(253, 192, 41, 0.32);
  --me-lower-line: #C98A00;      /* dotted. #B07A00 if every underline must reach 3:1 [CONFIRM] */
  --me-lower-glow: rgba(255, 194, 26, 0.5);

  /* Paper (example document, certificate) */
  --me-paper: #FFFDF8;
  --me-ink: #1D1D1F;
  --me-muted: #5E5E63;
  --me-tag: #F1EEE8;

  /* Wall texture: fine grey noise, blended over the wall at low strength */
  --me-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --me-sign-font: Quicksand, Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --me-body-font: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --me-doc-font: Newsreader, Georgia, serif;
  --me-section-x: 20px;
}

/* ============================================================
   Base
   ============================================================ */

.me-page,
.me-page *,
.me-page *::before,
.me-page *::after { box-sizing: border-box; }

.me-page {
  position: relative;
  overflow-x: clip;               /* the halos and glows never cause sideways scroll */
  background: var(--me-ground);
  color: var(--me-text);
  font-family: var(--me-body-font);
  line-height: 1.4;
}

/* Wall texture over the whole page */
.me-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--me-noise);
  opacity: 0.13;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.me-page > * { position: relative; z-index: 1; }

.me-page a { color: var(--me-link); }
.me-page a:hover { color: var(--me-link-hover); }
.me-page :focus-visible { outline: 3px solid var(--me-focus); outline-offset: 3px; }

/* Keeps the last word and its ball together so the ball never wraps onto a line of its own */
.me-nowrap { white-space: nowrap; }

.me-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.me-inner {
  max-width: 1160px;
  margin: 0 auto;
}
.me-inner--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Two columns that stack below about 1000 px */
.me-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 64px;
}

/* ============================================================
   Shared: neon tube lettering
   ============================================================ */

/* A sign scales with its own width (container query units) */
.me-sign { container-type: inline-size; }

.me-sign-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--me-sign-font);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;        /* markup stays in sentence case so screen readers read words */
}
.me-sign-title > span { display: block; }
.me-sign-line--nowrap { white-space: nowrap; }

.me-tube--yellow { color: var(--me-core-yellow); text-shadow: var(--me-tube-yellow); }
.me-tube--orange { color: var(--me-core-orange); text-shadow: var(--me-tube-orange); }
.me-tube--red    { color: var(--me-core-red);    text-shadow: var(--me-tube-red); }

/* The lit ball: the neon sign's full stop */
.me-ball {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.08em;
  border-radius: 50%;
  background: var(--me-ball-lit);
  box-shadow: var(--me-ball-glow);
}

/* The flat ball: full stop after Inter headlines */
.me-dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.03em;
  border-radius: 50%;
  background: var(--me-ball);
}

/* Gradient phrase in Inter headlines */
.me-grad {
  background: var(--me-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Small neon label above a headline */
.me-neon-eyebrow {
  margin: 0;
  font-family: var(--me-sign-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--me-core-orange);
  text-shadow: 0 0 4px #FFB070, 0 0 12px #FA8A2B, 0 0 24px rgba(244, 90, 38, 0.8);
}

/* Section headline (Inter) */
.me-h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
}

/* ============================================================
   Shared: buttons, pills, tick lists
   ============================================================ */

.me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.me-btn--lg { min-height: 56px; padding: 0 34px; font-size: 18px; }
.me-page a.me-btn--primary,
.me-page a.me-btn--primary:hover {
  background: var(--me-cta);
  color: var(--me-cta-ink);
}
.me-btn--primary { box-shadow: var(--me-cta-glow); }
.me-btn--primary:hover { filter: brightness(1.04); }
.me-btn--primary.me-btn--quiet { box-shadow: 0 0 18px rgba(253, 192, 41, 0.5), 0 0 40px rgba(250, 138, 43, 0.35); }
.me-btn--block { display: flex; width: 100%; min-height: 54px; }
.me-page a.me-btn--ghost,
.me-page a.me-btn--ghost:hover {
  border: 1.5px solid var(--me-ghost-line);
  color: var(--me-text);
}
.me-page a.me-btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* Likelihood pills drawn as neon tubes. Labels, not buttons. */
.me-pills {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.me-pill {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2.5px solid transparent;
  color: var(--me-text);
  font-size: 16px;
  font-weight: 600;
}
.me-pill--higher { border-color: var(--me-pill-red);    box-shadow: var(--me-pill-red-glow); }
.me-pill--medium { border-color: var(--me-pill-orange); box-shadow: var(--me-pill-orange-glow); }
.me-pill--lower  { border-color: var(--me-pill-yellow); box-shadow: var(--me-pill-yellow-glow); }

/* Tick list (gold tick, text) */
.me-ticks {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: var(--me-nav);
}
.me-ticks li { display: flex; align-items: flex-start; gap: 12px; }
.me-tick {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: var(--me-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.me-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--me-note);
}

/* ============================================================
   Shared: switch-on, blink and arrow motion
   Groups start 1.1 s apart so no one-second window holds more than 3 flashes (WCAG 2.3.1).
   ============================================================ */

@keyframes me-on {
  0%, 4%    { opacity: 0.08; }
  5%        { opacity: 1; }
  7%        { opacity: 0.15; }
  10%       { opacity: 1; }
  13%       { opacity: 0.3; }
  16%, 100% { opacity: 1; }
}

@keyframes me-blink {
  0%, 62%   { opacity: 1; }
  64%       { opacity: 0.2; }
  66%       { opacity: 1; }
  68%       { opacity: 0.3; }
  71%, 100% { opacity: 1; }
}

@keyframes me-arrow {
  0%, 58%   { opacity: 1; }
  60%, 78%  { opacity: 0.16; }
  80%, 100% { opacity: 1; }
}

/* Hover halo: switches on like a tube (one quick dip), then holds */
@keyframes me-halo {
  0%        { opacity: 0; }
  20%       { opacity: 1; }
  32%       { opacity: 0.35; }
  48%, 100% { opacity: 1; }
}

.me-on-1 { animation: me-on 2.4s linear 0.3s both; }
.me-on-2 { animation: me-on 2.4s linear 1.4s both; }
.me-on-3 { animation: me-on 2.4s linear 2.5s both; }

/* Blink: two quick dips every 7 s, after the switch-on has finished */
.me-on-2.me-blink { animation: me-on 2.4s linear 1.4s both, me-blink 7s linear 4.4s infinite; }

/* Arrow: lights as group 4, then goes dark for 0.32 s once every 1.8 s */
.me-arrow { animation: me-on 2.4s linear 3.6s both, me-arrow 1.8s linear 6s infinite; }

/* Set by js/myself-landing.js until the section is on screen */
.me-wait .me-on-1,
.me-wait .me-on-2,
.me-wait .me-on-3,
.me-wait .me-arrow { animation-play-state: paused; }

/* ============================================================
   Header (dark)
   ============================================================ */

.me-header { border-bottom: 1px solid var(--me-hairline); }

.me-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.me-page a.me-wordmark {
  color: var(--me-text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
/* 31 Oct 2026 logo: gradient "AI Accuracy", "Lab" white on dark (var --me-text) or #111111 on light, yellow ball (logo only; heading dots unchanged) */
.me-page a.me-wordmark { background: linear-gradient(90deg,#B8102D 0%,#D2192B 11%,#EF2E27 23%,#FA7029 36%,#FC942C 43%,#FDCB29 62%,#FEE21F 72%,#FEE21F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.me-wordmark-lab {
  background: none;
  color: var(--me-text);
  -webkit-text-fill-color: var(--me-text);
}
.sc-body .me-wordmark-lab, .me-light .me-wordmark-lab { color: #111111; -webkit-text-fill-color: #111111; }
.me-page a.me-wordmark .me-dot { background: radial-gradient(circle at 35% 30%,#FFEB4D 0%,#FDD31F 45%,#F2B705 100%); }

.me-nav { display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; }
.me-page .me-nav a,
.me-page a.me-header-signin {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--me-nav);
  text-decoration: none;
}
.me-page .me-nav a:hover,
.me-page a.me-header-signin:hover { background: rgba(255, 255, 255, 0.06); color: var(--me-text); }
.me-page .me-nav a[aria-current="page"] { font-weight: 600; background: rgba(255, 255, 255, 0.08); }

.me-header-actions { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.me-page a.me-header-cta,
.me-page a.me-header-cta:hover {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--me-header-cta);
  color: var(--me-cta-ink);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 600px) {
  .me-header-inner { padding: 12px 20px; }
}

/* ============================================================
   1. Hero: "Be the one who spots it"
   ============================================================ */

.me-hero {
  padding: clamp(72px, 9vw, 120px) var(--me-section-x) clamp(80px, 9vw, 120px);
  background:
    radial-gradient(50% 44% at 50% 34%, rgba(239, 46, 39, 0.28), rgba(239, 46, 39, 0) 72%),
    radial-gradient(34% 22% at 50% 20%, rgba(253, 192, 41, 0.14), rgba(253, 192, 41, 0) 72%);
}

.me-hero-sign { width: min(1000px, 100%); }
.me-hero-title { gap: 2.4cqw; }
.me-hero-line1 { font-size: 7.4cqw; letter-spacing: 0.12em; }
.me-hero-line2 { font-size: 10.4cqw; letter-spacing: 0.06em; }

.me-hero-lead {
  margin: 52px 0 0;
  max-width: 660px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--me-lead);
}

.me-hero-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

/* The neon arrow pointing at Get started */
.me-arrow-svg {
  flex: 0 0 auto;
  width: 150px;
  height: 70px;
  overflow: visible;
  fill: none;
  stroke: #FFF8D6;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #FFF0A0) drop-shadow(0 0 7px #FEE21F) drop-shadow(0 0 16px rgba(250, 138, 43, 0.85));
}

/* Phones: buttons stack; the arrow sits above Get started and points down at it */
@media (max-width: 560px) {
  .me-hero-lead { margin-top: 40px; }
  .me-hero-ctas { flex-direction: column; gap: 12px; margin-top: 14px; }
  .me-arrow-svg {
    width: 100px;
    height: 47px;
    margin: 20px 0 14px;
    transform: rotate(78deg);
  }
  .me-hero-ctas .me-btn { min-width: 220px; }
}

/* ============================================================
   2. Heat-map: "See what to check before you hit send"
   ============================================================ */

.me-heatmap {
  padding: clamp(72px, 8vw, 112px) var(--me-section-x);
  border-top: 1px solid var(--me-hairline-soft);
  background:
    radial-gradient(36% 46% at 76% 46%, rgba(239, 46, 39, 0.24), rgba(239, 46, 39, 0) 70%),
    radial-gradient(28% 34% at 92% 88%, rgba(253, 192, 41, 0.16), rgba(253, 192, 41, 0) 70%),
    var(--me-band);
}

.me-heatmap-copy { flex: 1 1 420px; min-width: 0; }
.me-heatmap-copy .me-h2 { margin-top: 16px; }
.me-heatmap-lead {
  margin: 20px 0 0;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--me-body);
}
.me-heatmap-cta { margin-top: 32px; }

.me-heatmap-visual {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 28px 0 20px;
}

/* Example document */
.me-doc {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: var(--me-paper);
  color: var(--me-ink);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(26px, 4vw, 42px);
  transform: rotate(-2deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 120px rgba(239, 46, 39, 0.30);
}

.me-doc-chip {
  position: absolute;
  top: -22px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 36px);
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: #1D1D1F;
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.me-doc-chip-face {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 70%, rgba(239, 46, 39, 0.45), #2A2426 70%);
}
.me-doc-chip-face img { width: 30px; height: auto; display: block; }

.me-doc-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--me-muted);
}
.me-doc-tag { padding: 2px 8px; border-radius: 999px; background: var(--me-tag); }

.me-doc-title {
  margin: 18px 0 0;
  font-family: var(--me-doc-font);
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
  font-weight: 600;
}

.me-doc-body {
  margin-top: 16px;
  font-family: var(--me-doc-font);
  font-size: 16.5px;
  line-height: 1.95;
}
.me-doc-body p { margin: 0 0 14px; }
.me-doc-body p:last-child { margin-bottom: 0; }

/* Flags: fill + underline style + glow, per likelihood */
.me-flag {
  color: inherit;
  border-radius: 4px;
  padding: 1px 3px;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.me-flag--higher {
  background: var(--me-higher-fill);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--me-higher-line);
  box-shadow: 0 0 24px 8px var(--me-higher-glow);
}
.me-flag--medium {
  background: var(--me-medium-fill);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--me-medium-line);
  box-shadow: 0 0 20px 7px var(--me-medium-glow);
}
.me-flag--lower {
  background: var(--me-lower-fill);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--me-lower-line);
  box-shadow: 0 0 18px 6px var(--me-lower-glow);
}

@media (max-width: 600px) {
  .me-doc { transform: rotate(-1deg); }
  .me-doc-chip { right: 12px; font-size: 12px; }
}

/* ============================================================
   3. Six ways AI gets it wrong: the culprit cards
   ============================================================ */

.me-six {
  padding: clamp(80px, 9vw, 120px) var(--me-section-x);
  background: radial-gradient(44% 30% at 50% 16%, rgba(244, 90, 38, 0.22), rgba(244, 90, 38, 0) 72%);
}

.me-six-sign { width: min(820px, 100%); }
.me-six-title { gap: 2cqw; }
.me-six-line1 { font-size: 6.4cqw; letter-spacing: 0.12em; }
.me-six-line2 { font-size: 8.6cqw; letter-spacing: 0.06em; }

.me-six-lead {
  margin: 36px 0 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--me-body);
}

/* Six in a row from 1040 px, three by two on tablets, two by three on phones (never a lone card on a row) */
.me-culprits {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  justify-content: center;
  gap: 16px;
}
@media (min-width: 640px)  { .me-culprits { grid-template-columns: repeat(3, minmax(0, 240px)); } }
@media (min-width: 1040px) { .me-culprits { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.me-cul {
  --me-cul-glow: rgba(239, 46, 39, 0.55);
  position: relative;
  min-width: 0;
  padding: 20px 14px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--me-card-top), var(--me-card-bottom));
  box-shadow: inset 0 0 0 1px var(--me-hairline);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.me-cul--red    { --me-cul-glow: rgba(239, 46, 39, 0.55); }
.me-cul--orange { --me-cul-glow: rgba(250, 138, 43, 0.52); }
.me-cul--yellow { --me-cul-glow: rgba(253, 192, 41, 0.48); }

.me-cul-figure {
  position: relative;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Soft coloured glow behind every character (always on) */
.me-cul-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--me-cul-glow), rgba(0, 0, 0, 0) 70%);
}

/* Electric yellow halo ring (off until hover or keyboard focus) */
.me-cul-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid var(--me-halo-core);
  box-shadow: var(--me-halo-glow);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.2s ease, transform 0.3s ease;
  pointer-events: none;
}

.me-cul-img {
  position: relative;
  display: block;
  height: 150px;
  width: auto;
}

.me-cul-name { margin: 14px 0 0; font-size: 16px; font-weight: 700; }
.me-page a.me-cul-link { color: var(--me-text); text-decoration: none; }
/* The whole card is the link's hit area */
.me-cul-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
}
.me-cul-type { margin: 4px 0 0; font-size: 14px; color: var(--me-note); }

/* Keyboard focus: the card shows the halo; the link's own ring is moved to the card */
.me-page .me-cul-link:focus-visible { outline: none; }
.me-cul:focus-within { box-shadow: var(--me-halo-card), 0 0 0 3px var(--me-focus); }
.me-cul:focus-within .me-cul-halo { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: me-halo 0.7s linear both; }

/* Hover only on devices with a real pointer, so touch screens don't get a stuck halo */
@media (hover: hover) {
  .me-cul:hover { box-shadow: var(--me-halo-card); transform: translateY(-4px); }
  .me-cul:hover .me-cul-halo { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: me-halo 0.7s linear both; }
}

.me-six-more { margin: 36px 0 0; font-size: 16px; color: var(--me-body); }
.me-six-more a { font-weight: 600; text-decoration: none; }

/* ============================================================
   4. How it works: "From hunch to instinct"
   ============================================================ */

.me-how {
  padding: clamp(72px, 8vw, 112px) var(--me-section-x);
  border-top: 1px solid var(--me-hairline-soft);
  background: var(--me-band);
}
.me-how .me-h2 { text-align: center; }

.me-steps {
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.me-step {
  flex: 1 1 280px;
  min-width: 0;
  padding: 30px 28px 32px;
  border-radius: 20px;
  background: var(--me-card);
  box-shadow: inset 0 0 0 1px var(--me-hairline);
}
.me-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  font-family: var(--me-sign-font);
  font-weight: 500;
  font-size: 24px;
}
.me-step-num--yellow { border-color: var(--me-pill-yellow); color: var(--me-core-yellow); box-shadow: 0 0 6px #FFE45C, 0 0 18px rgba(253, 192, 41, 0.6), inset 0 0 8px rgba(253, 192, 41, 0.45); text-shadow: 0 0 8px #FDC029; }
.me-step-num--orange { border-color: var(--me-pill-orange); color: var(--me-core-orange); box-shadow: 0 0 6px #FFA052, 0 0 18px rgba(250, 138, 43, 0.6), inset 0 0 8px rgba(250, 138, 43, 0.45); text-shadow: 0 0 8px #FA8A2B; }
.me-step-num--red    { border-color: var(--me-pill-red);    color: var(--me-core-red);    box-shadow: 0 0 6px #FF5A4A, 0 0 18px rgba(239, 46, 39, 0.65), inset 0 0 8px rgba(239, 46, 39, 0.45); text-shadow: 0 0 8px #EF2E27; }
.me-step h3 { margin: 20px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.me-step p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--me-body); }

/* ============================================================
   5. Show it off: certificate and LinkedIn badge
   ============================================================ */

.me-show {
  padding: clamp(72px, 8vw, 112px) var(--me-section-x);
  background: radial-gradient(34% 44% at 74% 50%, rgba(253, 192, 41, 0.16), rgba(253, 192, 41, 0) 70%);
}
.me-show-copy { flex: 1 1 420px; min-width: 0; }
.me-show-lead {
  margin: 20px 0 0;
  max-width: 470px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--me-body);
}
.me-show-cta { margin-top: 30px; }

.me-show-visual {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}
.me-cert-wrap { position: relative; width: 100%; max-width: 440px; }
.me-cert {
  background: var(--me-paper);
  color: var(--me-ink);
  border-radius: 18px;
  padding: 34px 34px 30px;
  transform: rotate(-2deg);
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 110px rgba(253, 192, 41, 0.26);
}
.me-cert-org { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--me-muted); }
.me-cert-title { margin: 10px 0 0; font-family: var(--me-doc-font); font-size: 26px; font-weight: 600; line-height: 1.15; }
.me-cert-seal {
  margin: 20px auto 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F4EFE9 45%, #DDD3C8 100%);
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px #E6E2DA, 0 6px 16px rgba(0, 0, 0, 0.12);
}
.me-cert-seal span { width: 26px; height: 26px; border-radius: 50%; background: var(--me-ball); }
.me-cert-name { margin: 18px 0 0; font-family: var(--me-doc-font); font-style: italic; font-size: 20px; }
.me-cert-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--me-muted); }
.me-cert-badge {
  position: absolute;
  right: -6px;
  bottom: -18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--me-ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.me-cert-badge svg { width: 16px; height: 16px; fill: none; stroke: var(--me-ink); stroke-width: 2; stroke-linecap: round; }

@media (max-width: 600px) {
  .me-cert { padding: 28px 22px 26px; }
  .me-cert-badge { right: 0; }
}

/* ============================================================
   6. Pricing: "One subscription. Everything in it"
   ============================================================ */

.me-price {
  padding: clamp(72px, 8vw, 112px) var(--me-section-x);
  border-top: 1px solid var(--me-hairline-soft);
  background: var(--me-band);
}
.me-price-card {
  margin-top: 48px;
  width: 100%;
  max-width: 460px;
  padding: 36px 34px 32px;
  border-radius: 24px;
  background: var(--me-card);
  border: 2px solid var(--me-pill-orange);
  box-shadow: 0 0 6px rgba(255, 160, 82, 0.9), 0 0 24px rgba(250, 138, 43, 0.55), 0 0 60px rgba(244, 90, 38, 0.3),
              inset 0 0 18px rgba(250, 138, 43, 0.18);
  text-align: left;
}
.me-price-card h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.me-price-amount { margin: 18px 0 0; display: flex; align-items: baseline; gap: 8px; }
.me-price-amount strong { font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.me-price-amount span { font-size: 18px; font-weight: 600; color: var(--me-body); }
.me-price-tax { margin: 8px 0 0; font-size: 14px; color: var(--me-note); }
.me-price-card .me-ticks {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--me-lead);
}
.me-price-card .me-btn { margin-top: 28px; }
.me-price-cancel { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--me-note); }

@media (max-width: 600px) {
  .me-price-card { padding: 30px 24px 28px; }
}

/* ============================================================
   7. Final CTA: "Use AI. Trust what you send"
   ============================================================ */

.me-final {
  padding: clamp(88px, 10vw, 140px) var(--me-section-x);
  background:
    radial-gradient(50% 50% at 50% 42%, rgba(239, 46, 39, 0.26), rgba(239, 46, 39, 0) 72%),
    radial-gradient(30% 24% at 50% 26%, rgba(253, 192, 41, 0.12), rgba(253, 192, 41, 0) 72%);
}
.me-final-sign { width: min(900px, 100%); }
.me-final-title { gap: 2.2cqw; }
.me-final-line1 { font-size: 7cqw; letter-spacing: 0.12em; }
.me-final-line2 { font-size: 7.4cqw; letter-spacing: 0.04em; }
.me-final-lead {
  margin: 44px 0 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--me-body);
}
.me-final-ctas {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}

/* ============================================================
   Older browsers without container queries: each sign is min(its max width, viewport − 40px), so size from vw
   ============================================================ */

@supports not (container-type: inline-size) {
  .me-hero-title  { gap: min(24px, 2.4vw - 0.96px); }
  .me-hero-line1  { font-size: min(74px, 7.4vw - 2.96px); }
  .me-hero-line2  { font-size: min(104px, 10.4vw - 4.16px); }
  .me-six-title   { gap: min(16.4px, 2vw - 0.8px); }
  .me-six-line1   { font-size: min(52.5px, 6.4vw - 2.56px); }
  .me-six-line2   { font-size: min(70.5px, 8.6vw - 3.44px); }
  .me-final-title { gap: min(19.8px, 2.2vw - 0.88px); }
  .me-final-line1 { font-size: min(63px, 7vw - 2.8px); }
  .me-final-line2 { font-size: min(66.6px, 7.4vw - 2.96px); }
}

/* ============================================================
   Footer (dark)
   ============================================================ */

.me-footer {
  background: var(--me-footer);
  border-top: 1px solid var(--me-hairline);
}
.me-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
  color: var(--me-note);
}
.me-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.me-footer-brand { display: flex; flex-direction: column; gap: 6px; }
.me-footer-wordmark { color: var(--me-text); font-size: 18px; font-weight: 800; letter-spacing: -0.035em; }
.me-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.me-page .me-footer-nav a { color: var(--me-note); text-decoration: none; }
.me-page .me-footer-nav a:hover { color: var(--me-text); }
.me-footer-legal {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--me-hairline);
  font-size: 13px;
}

@media (max-width: 600px) {
  .me-footer-inner { padding: 36px 20px 28px; }
}

/* ============================================================
   Reduced motion: everything fully lit and still; halos appear without flicker or lift.
   Every selector is prefixed with .me-page so it outranks the motion rules above,
   including the two-class .me-on-2.me-blink and the hover rules.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .me-page .me-on-1,
  .me-page .me-on-2,
  .me-page .me-on-3,
  .me-page .me-on-2.me-blink,
  .me-page .me-arrow { animation: none; }

  .me-page .me-cul,
  .me-page .me-cul-halo { transition: none; }
  .me-page .me-cul:hover,
  .me-page .me-cul:focus-within { transform: none; }
  .me-page .me-cul:hover .me-cul-halo,
  .me-page .me-cul:focus-within .me-cul-halo { animation: none; transform: translate(-50%, -50%); }
}

/* Heat-map mock, dark "light up" style (Coop, 29 Oct 2026) */
.me-heatmap-visual { padding-bottom: 72px; }
.me-doc {
  background: #1A1A1A;
  color: #D4D4D4;
  transform: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 120px rgba(239, 46, 39, 0.22);
}
.me-doc-meta { color: #BDBDBD; }
.me-doc-tag { background: #2E2E2E; color: #FFFFFF; }
.me-doc-title { color: #FFFFFF; }
.me-flag {
  color: #FFFFFF;
  background: transparent;
  text-decoration: none;
  border-radius: 6px;
  padding: 1px 4px;
}
.me-flag--higher { background: rgba(239, 46, 39, 0.10); box-shadow: 0 0 0 1.5px #FF6A5C, 0 0 10px 2px rgba(255, 59, 48, 0.75), 0 0 26px 6px rgba(239, 46, 39, 0.45); }
.me-flag--medium { background: rgba(255, 122, 26, 0.10); box-shadow: 0 0 0 1.5px #FF9A4D, 0 0 10px 2px rgba(255, 122, 26, 0.7), 0 0 22px 5px rgba(255, 122, 26, 0.4); }
.me-flag--lower { background: rgba(255, 210, 26, 0.08); box-shadow: 0 0 0 1.5px #FFD84D, 0 0 9px 2px rgba(255, 210, 26, 0.6), 0 0 20px 4px rgba(255, 194, 26, 0.35); }

.me-fp {
  position: relative;
  width: 330px;
  max-width: 100%;
  margin: 30px -56px -96px auto;
  padding: 16px 18px 20px;
  border-radius: 18px;
  background: #161616;
  color: #FFFFFF;
  font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  border: 1.5px solid #FF3B30;
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.75), 0 0 34px rgba(239, 46, 39, 0.4), 0 30px 60px rgba(0, 0, 0, 0.6);
}
.me-fp::before {
  content: ""; position: absolute; top: -9px; left: 40px; width: 16px; height: 16px;
  background: #161616; border-left: 1.5px solid #FF3B30; border-top: 1.5px solid #FF3B30;
  transform: rotate(45deg);
}
.me-fp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #333; font-size: 13px; font-weight: 600; }
.me-fp-btns { display: inline-flex; gap: 6px; }
.me-fp-b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #2A2A2A; }
.me-fp-b--on { background: #000; box-shadow: 0 0 0 1.5px #D4D4D4; }
.me-fp-b svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.me-fp-who { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.me-fp-av { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; background: #262626; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.me-fp-av img { width: 42px; height: 42px; object-fit: contain; }
.me-fp-nm { margin: 0; font-size: 14px; color: #D4D4D4; }
.me-fp-nm b { color: #FFFFFF; }
.me-fp-pill { display: inline-flex; align-items: center; gap: 5px; margin: 5px 0 0; padding: 2px 9px; border-radius: 999px; border: 1.5px solid #FF6A5C; background: #2A1210; color: #FFFFFF; font-size: 12.5px; font-weight: 600; }
.me-fp-pill svg { width: 11px; height: 11px; fill: #FF6A5C; }
.me-fp-h { margin: 16px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: #FFFFFF; }
.me-fp-l { margin: 14px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #D4D4D4; }
.me-fp-p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: #FFFFFF; }

@media (max-width: 900px) {
  .me-heatmap-visual { padding-bottom: 20px; }
  .me-fp { width: auto; margin: 28px 0 0; }
}
@media (max-width: 600px) { .me-doc { transform: none; } }

/* Coop 29 Oct 2026: Pricing now sits before Show it off, so swap their grounds to keep the band / plain alternation */
.me-price { background: transparent; }
.me-show {
  border-top: 1px solid var(--me-hairline-soft);
  background: radial-gradient(34% 44% at 74% 50%, rgba(253, 192, 41, 0.16), rgba(253, 192, 41, 0) 70%), var(--me-band);
}