:root {
  --navy: #1e2f40;
  --navy-soft: #51637a;
  --blue: #5b87d8;
  --blue-deep: #3f68b8;
  --cream: #faf6ee;
  --cream-deep: #f3ecdf;
  --card: #fffdf8;
  --rust: #d65a39;
  --teal: #0f7f8c;
  --green: #3f8f68;
  --line: rgba(30, 47, 64, 0.1);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; } /* hero blobs bleed past the edge on purpose */
body {
  font-family: 'General Sans', Inter, system-ui, sans-serif;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* header */
/* The header and the hero's nav.top are one component: same wordmark, link weight, gap, padding and button size, so cream and coloured pages read as one nav. */
header.site {
  display: flex; align-items: center; justify-content: flex-start; gap: 28px;
  max-width: none; margin: 0; padding: 19.2px 32px; position: relative; z-index: 50;
  font-size: 0.92rem;
}
header.site .logo.wmlogo { display: block; }
header.site .logo.wmlogo .wm { height: 24px; width: auto; display: block; color: var(--navy); }
header.site nav.main { gap: 20px; padding-left: 28px; border-left: 1px solid var(--line); }
header.site .header-actions { margin-left: auto; }
@media (max-width: 1180px) {
  header.site { gap: 16px; }
  header.site nav.main { gap: 12px; padding-left: 16px; }
  nav.main .g { gap: 12px; }
  header.site nav.main .top { font-size: 0.86rem; }
  header.site .header-actions { gap: 6px; }
  header.site .header-actions .pill { padding: 7.2px 10.4px; font-size: 0.84rem; }
}
/* two link groups: audiences at full strength, utility links stepped back, fade on hover */
nav.main .g { display: flex; gap: 17.6px; }
nav.main .sep { width: 1px; height: 14px; background: var(--line); align-self: center; }
nav.main .g:first-child > div > .top { color: var(--navy); font-weight: 500; }
nav.main .g:last-child > div > .top { color: var(--navy-soft); }
nav.main .top { transition: opacity 0.18s var(--ease); }
nav.main:hover .g > div > .top { opacity: 0.45; }
nav.main:hover .g > div:hover > .top { opacity: 1; }
header.site nav.main .top { font-weight: 400; font-size: 0.92rem; }
header.site .header-actions .pill { padding: 7.2px 12.8px; font-size: 0.88rem; }
/* Keeps the cream-page nav matched to the hero nav: no side padding on links, transparent ghost Log in, tight pill-help padding, underline on hover and current page. */
header.site nav.main a.top, header.site nav.main span.top { padding: 6.4px 0; }
header.site nav.main a.top:hover, header.site nav.main span.top:hover,
header.site nav.main .g > div:hover > .top { background: none; }
/* the spring bar draws the underline now; a text-decoration one would sit
   under it and double up. Kept as the no-JS and reduced-motion fallback. */
html.no-js header.site nav.main a.top:hover { text-decoration: underline; text-underline-offset: 3.2px; }

/* the current page is underlined in both navs */
header.site nav.main a.top.active, header.site nav.main span.top.active { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; color: var(--navy); }
header.site .header-actions .pill-ghost {
  background: transparent; box-shadow: none; border-color: rgba(30,47,64,0.18);
}
header.site .header-actions .pill-help { padding: 7.2px 1.6px 7.2px 4.8px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo-mark { width: 16px; height: 16px; border: 4px solid var(--blue); border-radius: 50%; }
.logo sup { font-size: 0.5em; font-weight: 600; }
nav.main { display: flex; gap: 4.8px; font-size: 0.93rem; font-weight: 500; color: var(--navy-soft); }
nav.main .g > div { position: relative; }
nav.main a.top, nav.main span.top {
  display: inline-block; padding: 6.4px 10.4px; border-radius: 799.2px; cursor: pointer; transition: color 0.15s, background 0.15s;
}
nav.main a.top:hover, nav.main span.top:hover, nav.main .g > div:hover > .top { background: none; }
nav.main a.top.active { color: var(--navy); font-weight: 600; }
/* no caret on the dropdown triggers */
.drop {
  position: absolute; top: calc(100% + 4.8px); left: 0; min-width: 184px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11.2px;
  box-shadow: 0 19.2px 40px -19.2px rgba(30,47,64,0.35);
  padding: 6.4px; display: flex; flex-direction: column;
  /* origin-aware pop: scales in from the trigger, never from center */
  visibility: hidden; opacity: 0; transform: translateY(4px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
nav.main .g > div:hover .drop, nav.main .g > div:focus-within .drop {
  visibility: visible; opacity: 1; transform: none;
}
.drop a { padding: 7.2px 9.6px; border-radius: 7.2px; font-size: 0.9rem; white-space: nowrap; }
.drop a:hover { background: var(--cream-deep); color: var(--navy); }
.drop a small { display: block; font-size: 0.76rem; color: var(--navy-soft); font-weight: 400; }
.drop hr { border: 0; border-top: 1px solid var(--line); margin: 4.8px 3.2px; }
.header-actions { display: flex; gap: 8px; align-items: center; white-space: nowrap; }

/* pills */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6.4px;
  padding: 8.8px 17.6px; border-radius: 799.2px; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; border: 0; font-family: inherit;
  transition: transform 0.15s var(--ease), background 0.15s;
}
@media (hover: hover) and (pointer: fine) { .pill:hover { transform: translateY(-1px); } }
.pill:active { transform: translateY(0) scale(0.97); }
.pill-ghost { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2.4px rgba(30,47,64,0.06); }
.pill-dark { background: var(--navy); color: #fff; box-shadow: 0 6.4px 16px -8px rgba(30,47,64,0.5); }
.pill-dark:hover { background: #16273a; }
.pill-lg { padding: 12px 24px; font-size: 1rem; }
/* a plan that has not opened yet: the button shows Coming soon and does nothing */
.is-soon { opacity: 0.45; cursor: default; pointer-events: none; }

/* page scaffolding */
.wrap { max-width: 864px; margin: 0 auto; padding: 0 25.6px; }
.hero-page { text-align: left; padding: 57.6px 0 44.8px; max-width: 624px; }
.hero-page.center { text-align: center; margin: 0 auto; }
/* .kicker is kept as a hook and not rendered */
.kicker { display: none; }
h1 {
  font-family: Zodiak, Georgia, serif; font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em;
  text-wrap: balance;
}
/* headlines use one colour and one style */
h1 em, h2 em { font-style: normal; color: inherit; }
.lede { margin-top: 17.6px; color: var(--navy-soft); font-size: 1.13rem; line-height: 1.65; max-width: 58ch; }
.hero-page.center .lede { margin-inline: auto; }
.ctas { display: flex; gap: 10.4px; margin-top: 25.6px; flex-wrap: wrap; }
.hero-page.center .ctas { justify-content: center; }
.microline { margin-top: 12.8px; font-size: 0.88rem; color: var(--navy-soft); }
.microline b { color: var(--navy); }

section.band { padding: 51.2px 0; }
section.band.alt { background: #fff; border-block: 1px solid var(--line); }
h2 {
  font-family: Zodiak, Georgia, serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.15;
  text-wrap: balance; margin-bottom: 11.2px;
}
.band-intro { color: var(--navy-soft); max-width: 62ch; margin-bottom: 28.8px; }

/* cards and grids */
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14.4px;
  padding: 20.8px; display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.card:hover { transform: translateY(-2.4px); box-shadow: 0 17.6px 35.2px -20.8px rgba(30,47,64,0.35); }
.card h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.card p { color: var(--navy-soft); font-size: 0.94rem; flex: 1; }
.card .go { color: var(--blue-deep); font-weight: 600; font-size: 0.9rem; }
.card .tag {
  align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-soft);
  background: var(--cream-deep); border-radius: 799.2px; padding: 3.2px 8px;
}
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 799.2px;
  padding: 6.4px 12.8px; font-size: 0.88rem; font-weight: 500; color: var(--navy-soft);
}

/* steps */
.step span { font-family: Zodiak, Georgia, serif; font-size: 1.05rem; color: var(--blue); display: block; margin-bottom: 9.6px; font-style: italic; }
.step h3 { font-size: 1.12rem; margin-bottom: 6.4px; }
.step p { color: var(--navy-soft); font-size: 0.95rem; }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14.4px; align-items: stretch; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22.4px 19.2px; display: flex; flex-direction: column; gap: 4.8px; }
.tier.featured {
  border-color: var(--blue); box-shadow: 0 19.2px 40px -24px rgba(91,135,216,0.5);
  /* the blog's bare .featured rule sets display:grid and wins on order; re-assert the tier layout */
  display: flex; grid-template-columns: none; overflow: visible; margin-bottom: 0; border-radius: 16px;
}
.tier h3 { font-size: 1rem; }
.tier .price { font-family: Zodiak, Georgia, serif; font-size: 2.1rem; font-weight: 400; letter-spacing: -0.02em; }
.tier .price small { font-family: 'General Sans', Inter, sans-serif; font-size: 0.82rem; color: var(--navy-soft); font-weight: 500; }
.tier ul { padding-left: 13.6px; color: var(--navy-soft); font-size: 0.88rem; flex: 1; margin: 8px 0 12.8px; }
.tier li { margin: 4px 0; }
.tier .pill { width: 100%; }

/* verdict stamp */
.stamp {
  display: inline-block; font-family: Zodiak, Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 1rem; padding: 5.6px 12px; border-radius: 7.2px; transform: rotate(-5deg);
  border: 1.6px solid;
}
.stamp-scam { color: var(--rust); border-color: var(--rust); background: rgba(214,90,57,0.07); }
.stamp-ok { color: var(--teal); border-color: var(--teal); background: rgba(15,127,140,0.07); }

/* quote band */
.quote-band { text-align: center; padding: 70.4px 0; }
.quote {
  font-family: Zodiak, Georgia, serif; font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.28; letter-spacing: -0.015em;
  max-width: 608px; margin: 0 auto 24px; text-wrap: balance;
}
.quote em { color: var(--blue-deep); font-style: italic; }

/* CTA band */
.cta-band { text-align: center; padding: 64px 0; }
.cta-band h2 { margin-bottom: 17.6px; }

/* faq */
details {
  background: var(--card); border: 1px solid var(--line); border-radius: 11.2px;
  padding: 14.4px 17.6px; margin-bottom: 9.6px;
}
details summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 9.6px; }
details summary::after { content: "+"; color: var(--blue); font-weight: 700; }
details[open] summary::after { content: "–"; }
details p { margin-top: 9.6px; color: var(--navy-soft); font-size: 0.95rem; max-width: 68ch; }

/* proof strip */
.proof { text-align: center; padding: 20.8px 19.2px; color: var(--navy-soft); font-size: 0.93rem; }
.proof b { color: var(--navy); }

/* footer */
footer.site { background: #fff; border-top: 1px solid var(--line); padding: 51.2px 0 28.8px; margin-top: 38.4px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px 38.4px; }
.foot-brand p { color: var(--navy-soft); font-size: 0.9rem; margin-top: 9.6px; max-width: 30ch; }
/* footer columns: real wordmark, plain column heads, lighter links */
.foot-col b { display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); margin-bottom: 11.2px; }
.foot-col a { display: block; font-size: 0.9rem; color: var(--navy-soft); padding: 3.2px 0; }
.foot-col a:hover { color: var(--navy); }
.legal { display: flex; justify-content: space-between; gap: 12.8px; flex-wrap: wrap; margin-top: 38.4px; padding-top: 17.6px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--navy-soft); }

/* blobs, reveals, the ask hero, live pill */
.hero-page { position: relative; }
.hero-blobs { display: none; position: absolute; inset: -50% -40% -20%; pointer-events: none; z-index: -1; overflow: visible; }
.hero-blobs i { position: absolute; border-radius: 50%; filter: blur(44px); }
.hero-blobs .hb1 {
  width: 36vw; height: 27vw; left: 2%; top: 6%;
  background: radial-gradient(circle, rgba(91,135,216,0.18), transparent 66%);
  animation: hb-drift 16s ease-in-out infinite alternate;
}
.hero-blobs .hb2 {
  width: 32vw; height: 25vw; right: -4%; top: 32%;
  background: radial-gradient(circle, rgba(241,179,143,0.3), transparent 64%);
  animation: hb-drift 13s ease-in-out 1s infinite alternate-reverse;
}
@keyframes hb-drift {
  from { transform: translate(-2vw, 0) scale(1); }
  to   { transform: translate(2vw, 1.5vw) scale(1.12); }
}

/* scroll + load reveals: fast, tight stagger, strong ease */
.rv {
  opacity: 0; transform: translateY(11.2px);
  transition: opacity 0.65s var(--ease) var(--rvd, 0s), transform 0.65s var(--ease) var(--rvd, 0s);
}
.rv.in { opacity: 1; transform: none; }
/* arrived by a jump or a fling: site.js marks it, it snaps in whole */
.rv.rv-now { transition: none; }
/* phones: no scroll reveals. site.js skips .rv below 760px; this does the
   same for the homepage's own .gr sections (defined inline in index.html). */
@media (max-width: 760px) {
  html .gr { opacity: 1; transform: none; transition: none; }
}

/* the ask hero (homepage) */
.askhead { font-size: clamp(2.4rem, 4.8vw, 4rem); }
.askhead em { display: block; margin-top: 4.8px; }
.qmask { display: block; overflow: hidden; }
.qline { display: block; white-space: nowrap; will-change: transform; }
.askbar {
  display: flex; align-items: center; gap: 6.4px;
  max-width: 480px; margin: 28.8px auto 0; padding: 7.2px 7.2px 7.2px 19.2px;
  background: #fff; border: 1px solid var(--line); border-radius: 799.2px;
  box-shadow: 0 20.8px 48px -25.6px rgba(30,47,64,0.45);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.askbar:focus-within {
  border-color: rgba(91,135,216,0.55);
  box-shadow: 0 20.8px 48px -25.6px rgba(30,47,64,0.45), 0 0 0 3.2px rgba(91,135,216,0.16);
}
.askbar input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.02rem; color: var(--navy); background: transparent; }
.askbar input::placeholder { color: rgba(81,99,122,0.55); font-family: Zodiak, Georgia, serif; font-style: italic; }
.askbar button {
  border: 0; cursor: pointer; font: inherit; font-weight: 600; color: #fff;
  background: var(--navy); border-radius: 799.2px; padding: 12px 22.4px; white-space: nowrap;
  transition: background 0.15s, transform 0.16s var(--ease);
}
.askbar button:hover { background: #16273a; }
.askbar button:active { transform: scale(0.97); }
.reassure { display: flex; gap: 17.6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; color: var(--navy-soft); font-size: 0.86rem; font-weight: 500; }
.reassure span { display: flex; align-items: center; gap: 5.6px; }
.reassure span::before { content: "✓"; color: var(--blue); font-weight: 700; }

/* live catch counter */
.live-pill {
  display: inline-flex; align-items: center; gap: 5.6px;
  background: #fff; border: 1px solid var(--line); border-radius: 799.2px;
  padding: 4px 10.4px; font-weight: 600; color: var(--navy); white-space: nowrap;
}
.live-pill i {
  width: 5.6px; height: 5.6px; border-radius: 50%; background: var(--rust);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-pill b { color: var(--rust); font-variant-numeric: tabular-nums; }

/* micro-interactions */
a.card .go { transition: transform 0.3s var(--ease); display: inline-block; }
a.card:hover .go { transform: translateX(3.2px); }
.card .stamp { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card:hover .stamp { transform: rotate(-9deg) scale(1.07); }
details summary::after { transition: transform 0.25s var(--ease); }
details[open] summary::after { transform: rotate(0deg); }
:focus-visible { outline: 1.6px solid var(--blue); outline-offset: 2.4px; border-radius: 3.2px; }

@media (prefers-reduced-motion: reduce) {
  .hero-blobs i, .live-pill i { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* page-specific components */
/* dark band */
.band.dark { background: var(--navy); border: 0; color: #fff; }
.band.dark h2 { color: #fff; }
.band.dark .band-intro, .band.dark p { color: rgba(255,255,255,0.72); }
.band.dark .kicker { color: #8fb1ea; }
.offer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22.4px, 5vw, 51.2px); }
.offer h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.offer h3 em { font-style: italic; color: #9db9ec; }
.offer ul { padding-left: 14.4px; color: rgba(255,255,255,0.72); font-size: 0.95rem; margin-bottom: 14.4px; }
.offer li { margin: 5.6px 0; }
.pill-light { background: #fff; color: var(--navy); }

/* stat row */
.stats { display: flex; gap: clamp(22.4px, 6vw, 64px); flex-wrap: wrap; }
.stat b { display: block; font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -0.02em; }
.stat span { color: var(--navy-soft); font-size: 0.9rem; }

/* timeline */
.timeline { position: relative; max-width: 512px; display: flex; flex-direction: column; gap: 27.2px; padding-left: 27.2px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 4.8px; bottom: 4.8px; width: 1.6px; background: var(--line); }
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -27.2px; top: 4px; width: 9.6px; height: 9.6px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3.2px var(--cream);
}
.tl-item .when { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 4.8px; }
.tl-item h3 { font-size: 1.1rem; margin-bottom: 4.8px; }
.tl-item p { color: var(--navy-soft); font-size: 0.95rem; max-width: 56ch; }

/* zigzag feature rows */
.frow { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(22.4px, 5vw, 51.2px); align-items: center; padding: 33.6px 0; border-top: 1px solid var(--line); }
.frow.first { border-top: 0; }
.frow.flip .fmedia { order: -1; }
.frow h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.frow p { color: var(--navy-soft); max-width: 48ch; }
.fmedia { background: var(--cream-deep); border: 1px solid var(--line); border-radius: 16px; min-height: 176px; display: grid; place-items: center; padding: 20.8px; }

/* list rows */
.rows { border-top: 1px solid var(--line); }
.row { display: flex; gap: 14.4px; align-items: baseline; padding: 12.8px 4.8px; border-bottom: 1px solid var(--line); }
.row b { flex: 0 0 184px; font-weight: 600; }
.row span { color: var(--navy-soft); font-size: 0.93rem; flex: 1; }
.row .go { color: var(--blue-deep); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
a.row { transition: background 0.15s; }
a.row:hover { background: rgba(255, 255, 255, 0.55); }
.row .stamp { font-size: 0.82rem; padding: 3.2px 8.8px; flex: 0 0 auto; }

/* numbered editorial list */
ol.editorial { list-style: none; counter-reset: n; max-width: 560px; padding: 0; }
ol.editorial li { counter-increment: n; padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; gap: 17.6px; align-items: baseline; }
ol.editorial li::before { content: "0" counter(n); font-family: Zodiak, Georgia, serif; font-style: italic; color: var(--blue); font-size: 1.2rem; flex: 0 0 27.2px; }
ol.editorial b { display: block; margin-bottom: 2.4px; }
ol.editorial p { color: var(--navy-soft); font-size: 0.94rem; margin: 0; }

/* code block */
.codeblock {
  background: var(--navy); color: #d9e5f4; border-radius: 12.8px; padding: 19.2px 20.8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; line-height: 1.7;
  overflow-x: auto; box-shadow: 0 20.8px 40px -24px rgba(30, 47, 64, 0.6);
}
.codeblock .c { color: #7d93ad; } .codeblock .k { color: #9db9ec; }
.codeblock .s { color: #f1b38f; } .codeblock .v { color: #7fd8c4; }

/* lock-screen notification examples */
.notif-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14.4px; align-items: start; }
.notifcard {
  display: flex; gap: 8.8px; align-items: flex-start;
  background: #fffcf6; border: 1px solid var(--line); border-radius: 12.8px; padding: 10.4px 12px;
  box-shadow: 0 11.2px 24px -14.4px rgba(33, 55, 75, 0.3); transform: rotate(var(--tilt, 0deg));
}
.notifcard .nicon { position: relative; flex: 0 0 27.2px; width: 27.2px; height: 27.2px; border-radius: 7.2px; display: grid; place-items: center; font-size: 1.05rem; }
.notifcard .nicon i { position: absolute; top: -2.4px; right: -2.4px; width: 7.2px; height: 7.2px; border-radius: 799.2px; background: var(--rust); border: 1.2px solid #fffdf8; }
.notifcard .nhead { display: flex; justify-content: space-between; gap: 6.4px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy-soft); margin-bottom: 1.6px; }
.notifcard .nhead span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.notifcard .ntitle { font-size: 0.82rem; font-weight: 700; }
.notifcard .nmsg { font-size: 0.78rem; line-height: 1.42; color: var(--navy-soft); }

/* the mini Carmen verdict card */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22.4px, 5vw, 51.2px); align-items: center; }
.ccard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; max-width: 344px; box-shadow: 0 27.2px 56px -30.4px rgba(30, 47, 64, 0.4); }
.ccard-head { display: flex; align-items: center; gap: 8px; padding-bottom: 9.6px; border-bottom: 1px solid var(--line); margin-bottom: 11.2px; }
.ccard-head .ring { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.ccard-head .ring::before { content: ""; width: 10.4px; height: 10.4px; border: 2.8px solid var(--blue); border-radius: 50%; }
.ccard-head b { font-size: 0.88rem; display: block; line-height: 1.2; }
.ccard-head small { color: var(--navy-soft); font-size: 0.7rem; }
.ccard-head em { margin-left: auto; font-style: normal; font-size: 0.7rem; color: var(--navy-soft); }
.ccard-verdict { font-family: Zodiak, Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.25rem; color: #b25438; line-height: 1.3; }
.ccard-meta { display: flex; align-items: center; gap: 8px; margin: 7.2px 0 9.6px; }
.ccard-meta i { display: block; width: 51.2px; height: 2.4px; border-radius: 1.6px; background: rgba(30, 47, 64, 0.12); position: relative; overflow: hidden; }
.ccard-meta i::after { content: ""; position: absolute; inset: 0; width: var(--conf, 90%); background: #c9532f; border-radius: 1.6px; }
.ccard-meta span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-soft); }
.ccard-body { font-family: Zodiak, Georgia, serif; font-size: 0.9rem; line-height: 1.6; }

/* fake browser bar (extension demo) */
.urlbar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 799.2px; padding: 9.6px 14.4px;
  font-size: 0.88rem; color: var(--navy-soft); box-shadow: 0 11.2px 24px -14.4px rgba(33, 55, 75, 0.3);
}
.urlbar .flag { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--rust); background: rgba(214, 90, 57, 0.1); border-radius: 799.2px; padding: 3.2px 8px; white-space: nowrap; }

/* featured blog card */
.featured { display: grid; grid-template-columns: 1.15fr 0.85fr; background: var(--card); border: 1px solid var(--line); border-radius: 17.6px; overflow: hidden; margin-bottom: 17.6px; }
.featured .fx { padding: 27.2px 28.8px; display: flex; flex-direction: column; gap: 9.6px; }
.featured .fx h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.7rem; letter-spacing: -0.01em; }
.featured .fx p { color: var(--navy-soft); flex: 1; }
.featured .fart { background: linear-gradient(135deg, rgba(91, 135, 216, 0.18), rgba(241, 179, 143, 0.32)); display: grid; place-items: center; min-height: 192px; }
.featured .fart .stamp { font-size: 1.6rem; }

@media (max-width: 860px) {
  .offer-cols, .split, .frow, .featured, .notif-stack { grid-template-columns: minmax(0, 1fr); }
  .frow.flip .fmedia { order: 0; }
  .row b { flex-basis: 120px; }
}

@media (max-width: 960px) {
  nav.main { display: none; }
  .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .grid.c2, .grid.c3, .grid.c4, .tiers { grid-template-columns: 1fr; }
  .header-actions .pill-ghost { display: none; }
}


/* indented sub-entries in the nav dropdown (enterprise children) */
.drop a.sub { padding-left: 20.8px; position: relative; }
.drop a.sub::before { content: "└"; position: absolute; left: 8.8px; color: var(--blue); opacity: 0.55; font-size: 0.78em; }

/* datasheets: document cards with a folded corner */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.doc {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 3.2px 14.4px 14.4px 14.4px;
  padding: 19.2px 19.2px 16px; display: flex; flex-direction: column; gap: 7.2px; overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.doc:hover { transform: translateY(-2.4px); box-shadow: 0 17.6px 35.2px -20.8px rgba(30,47,64,0.35); }
.doc::before {
  content: ""; position: absolute; top: 0; left: 0; width: 20.8px; height: 20.8px;
  background: linear-gradient(135deg, var(--cream-deep) 50%, transparent 50%);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0 0 4.8px 0;
}
.doc .dkind { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-deep); margin-left: 27.2px; }
.doc h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.doc p { color: var(--navy-soft); font-size: 0.92rem; flex: 1; margin: 0; }
.doc .dmeta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 9.6px; font-size: 0.78rem; color: var(--navy-soft); }
.doc .dmeta b { color: var(--blue-deep); font-weight: 600; }

/* scam intel reports: dated editorial issues */
.issue {
  display: grid; grid-template-columns: 120px 1fr auto; gap: clamp(14.4px, 4vw, 35.2px); align-items: baseline;
  padding: 24px 4.8px; border-bottom: 1px solid var(--line); transition: background 0.15s;
}
.issues { border-top: 1px solid var(--line); }
a.issue:hover { background: rgba(255,255,255,0.55); }
.issue .idate { font-family: Zodiak, Georgia, serif; font-style: italic; color: var(--blue); font-size: 1.05rem; }
.issue h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 4.8px; }
.issue p { color: var(--navy-soft); font-size: 0.94rem; max-width: 62ch; margin: 0; }
.issue .istat { text-align: right; white-space: nowrap; }
.issue .istat b { display: block; font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--rust); }
.issue .istat span { font-size: 0.74rem; color: var(--navy-soft); }
.srcline { font-size: 0.78rem; color: var(--navy-soft); margin-top: 20.8px; }
.srcline a { color: var(--blue-deep); font-weight: 600; }

/* product glossary: letter groups + definition rows */
.gl-group { display: grid; grid-template-columns: 72px 1fr; gap: clamp(12.8px, 4vw, 32px); padding: 27.2px 0; border-top: 1px solid var(--line); }
.gl-group:first-of-type { border-top: 0; }
.gl-letter { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 2.6rem; color: var(--blue); line-height: 1; }
.gl-group dl { margin: 0; }
.gl-group dt { font-weight: 600; padding-top: 11.2px; }
.gl-group dt:first-child { padding-top: 0; }
.gl-group dt .gtag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-soft); background: var(--cream-deep); border-radius: 799.2px; padding: 1.6px 7.2px; margin-left: 7.2px; vertical-align: 1.6px; }
.gl-group dd { margin: 3.2px 0 11.2px; color: var(--navy-soft); font-size: 0.94rem; max-width: 66ch; border-bottom: 1px solid var(--line); padding-bottom: 11.2px; }
.gl-group dd:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* partner application form */
.form { display: flex; flex-direction: column; gap: 12.8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 27.2px 56px -30.4px rgba(30,47,64,0.3); }
.form label { font-size: 0.8rem; font-weight: 600; display: flex; flex-direction: column; gap: 4.8px; }
.form input, .form select, .form textarea {
  font: inherit; font-size: 0.95rem; color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 8.8px; padding: 8.8px 11.2px; outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: rgba(91,135,216,0.55); box-shadow: 0 0 0 3.2px rgba(91,135,216,0.14);
}
.form textarea { resize: vertical; min-height: 76.8px; }
.form .frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11.2px; }
.form .pill { align-self: flex-start; }

@media (max-width: 860px) {
  .doc-grid { grid-template-columns: 1fr 1fr; }
  .issue { grid-template-columns: minmax(0, 1fr); gap: 4.8px; }
  .issue .istat { text-align: left; white-space: normal; }
  .gl-group { grid-template-columns: 1fr; gap: 6.4px; }
  .form .frow2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .doc-grid { grid-template-columns: 1fr; }
}

/* "What people ask Carmen" glass cards */
.checks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14.4px; }
.checkcard {
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6.4px);
  border: 1px solid var(--line); border-radius: 16px; padding: 22.4px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.checkcard:hover {
  transform: translateY(-2.4px); background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 19.2px 40px -24px rgba(34, 52, 74, 0.4);
}
.checkcard b {
  display: block; font-family: Zodiak, Georgia, serif; font-style: italic;
  font-weight: 500; color: var(--blue-deep); font-size: 1.05rem; margin-bottom: 7.2px;
}
.checkcard p { color: var(--navy-soft); font-size: 0.96rem; line-height: 1.62; margin: 0; }
.checkcard p strong { color: var(--navy); font-weight: 600; }

/* halo band */
.halo-band {
  position: relative; overflow: hidden; text-align: center;
  color: #fff8f0; background: #d96a3f; padding: 88px 19.2px;
}
.halo-band.halo-hero { padding: 96px 19.2px 88px; }
.halo-band .hblob { position: absolute; border-radius: 50%; filter: blur(44px); will-change: transform; transform: translateZ(0); pointer-events: none; }
.halo-band .hb-a { width: 70vw; height: 70vw; left: -22vw; top: -30vw; background: radial-gradient(circle, #f0a05c 0%, rgba(240,160,92,0) 68%); animation: halo-sway-a 18s ease-in-out infinite alternate, halo-glow 7s ease-in-out infinite alternate; }
.halo-band .hb-b { width: 55vw; height: 55vw; right: -14vw; bottom: -28vw; background: radial-gradient(circle, #c74f33 0%, rgba(199,79,51,0) 66%); animation: halo-sway-b 15s ease-in-out infinite alternate, halo-glow 9s ease-in-out 1.5s infinite alternate; }
.halo-band .hb-c { width: 45vw; height: 45vw; left: 34vw; top: -8vh; background: radial-gradient(circle, #e88a9a 0%, rgba(232,138,154,0) 64%); animation: halo-sway-a 22s ease-in-out infinite alternate-reverse, halo-glow 6s ease-in-out 3s infinite alternate; }
.halo-band .hbeam {
  position: absolute; width: 34vw; height: 180%; left: 50%; margin-left: -17vw; top: -40%;
  background: linear-gradient(90deg, rgba(155,183,235,0) 0%, rgba(155,183,235,0.85) 42%, rgba(214,232,250,0.95) 55%, rgba(155,183,235,0) 100%);
  filter: blur(36.8px); pointer-events: none; will-change: transform, opacity;
  animation: halo-beam 14s ease-in-out infinite alternate, halo-glow 5.5s ease-in-out 1s infinite alternate;
}
.halo-band .hgrain {
  position: absolute; inset: -10%; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.34; mix-blend-mode: soft-light;
}
@keyframes halo-sway-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(7vw, 5vh) scale(1.12); } }
@keyframes halo-sway-b { from { transform: translate(0, 0) scale(1.08); } to { transform: translate(-6vw, -6vh) scale(0.94); } }
@keyframes halo-beam { from { transform: translateX(-44vw) rotate(24deg); } to { transform: translateX(44vw) rotate(21deg); } }
@keyframes halo-glow { from { opacity: 0.62; } to { opacity: 1; } }
.halo-inner { position: relative; z-index: 2; }
.halo-kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 248, 240, 0.85); margin-bottom: 14.4px;
}
.halo-head {
  font-family: Zodiak, Georgia, serif; font-weight: 500; color: #fff8f0;
  font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: 1.04; letter-spacing: -0.02em;
  text-shadow: 0 1.6px 32px rgba(120, 40, 10, 0.2); text-wrap: balance;
}
.halo-head em { font-style: italic; color: rgba(255, 232, 214, 0.95); }
.halo-sub { max-width: 448px; margin: 19.2px auto 0; font-size: 1.12rem; line-height: 1.65; color: rgba(255, 248, 240, 0.92); }
.halo-band .ctas { justify-content: center; margin-top: 27.2px; }
.pill-cream { background: #fff8f0; color: #b1502e; }
.pill-cream:hover { background: #fff; }
.pill-outline { border: 1.2px solid rgba(255, 248, 240, 0.6); color: #fff8f0; background: transparent; }

@media (max-width: 860px) {
  .checks-grid { grid-template-columns: 1fr; }
}
.halo-band + footer.site { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .halo-band .hblob, .halo-band .hbeam { animation: none; }
}

/* Help is a permanent nav button. Rust is reserved for risk, and this button is for someone who has already lost money. Ghost style so it does not outrank the main call to action. */
/* a text link with a rust rule, last in the row */
.pill-help {
  color: var(--navy);
  border: 0;
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rust, #d65a39);
  text-decoration-thickness: 1.6px;
  text-underline-offset: 4px;
  padding-left: 4.8px; padding-right: 1.6px;
}
.pill-help:hover { text-decoration-thickness: 2.4px; }
.pill-help:focus-visible { outline: 1.6px solid var(--rust, #d65a39); outline-offset: 1.6px; }

/* All rem type is scaled to 80% site-wide. Pages with viewport-height sections compensate locally (100dvh / 0.8), and canvas engines size from offset boxes, not rects. */
html { font-size: 15.2px; } /* base rem size; spacing stays in px, only rem type scales */
/* phones: rem type is 90% so running text clears 11px; px-sized mocks stay as drawn */
@media (max-width: 900px) { html { font-size: 16px; } }

.foot-logo .foot-wm { height: 20.8px; width: auto; display: block; color: var(--navy); }
.foot-col a { display: block; padding: 3.2px 0; font-size: 0.88rem; color: var(--navy-soft); }
.foot-col a:hover { color: var(--navy); }
.foot-brand p { margin-top: 12.8px; }

/* phone: ruled rows stack their label over the description instead of squeezing three columns */
@media (max-width: 620px) {
  .row { flex-wrap: wrap; gap: 4.8px 9.6px; }
  .row b { flex: 1 1 100%; }
  .row > span:not(.go) { flex: 1 1 calc(100% - 32px); }
  .row .go { flex: 0 0 auto; }
}

/* phones: the smallest running text stays at or above 11px */
@media (max-width: 900px) {
  #fhero nav.top .cta, #fhero nav.top .acts a, #fhero .acts .cta { font-size: 12px !important; }
  .doc .dmeta, .issue .istat span, .hist-src, .srcline, .tier-note, .proof, .microline, .stat span, .doc .dmeta span { font-size: 0.8rem !important; }
  .lab, .lab a, .lab b, .lab-name, .seg-btn, .soft-bar button, .end-sw button, .tail-sw button { font-size: 12px !important; }
  .notifcard .nhead, .notifcard .nhead span { font-size: 0.78rem !important; }
}

/* hero nav as static CSS so it loads before first paint; the 'html' prefix outranks the page's inline rules */

/* the hero nav sits above the stage layers so an open dropdown is not painted behind them */
html #fhero nav.top { z-index: 70; }
/* The inline navs dim .links to 0.85 and opacity would dim the dropdown with it. Dim the links themselves so the panel stays solid. */
html #fhero nav.top .links { opacity: 1; }
html #fhero nav.top .links > a, html #fhero nav.top .links > .hn-wrap > a { opacity: 0.85; }
html #fhero nav.top .links > a:hover, html #fhero nav.top .links > a.here,
html #fhero nav.top .links > .hn-wrap > a:hover { opacity: 1; }
html #fhero nav.top .links > .hn-wrap { position: relative; display: inline-block; }
html #fhero nav.top .links .g > .hn-wrap { position: relative; display: inline-block; }
/* left cluster: links beside the logo behind a hairline in two groups; on hover the others fade and the hovered link holds. No underline. */
html #fhero nav.top { justify-content: flex-start; gap: 28px; }
html #fhero nav.top .acts { margin-left: auto; }
html #fhero nav.top .links { gap: 20px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.22); }
html #fhero nav.top .links .g { display: flex; gap: 17.6px; }
html #fhero nav.top .links .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.28); align-self: center; }
html #fhero nav.top .links .g > a, html #fhero nav.top .links .g > .hn-wrap > a { transition: opacity 0.18s cubic-bezier(0.23,1,0.32,1); }
html #fhero nav.top .links .g:first-child > a, html #fhero nav.top .links .g:first-child > .hn-wrap > a { opacity: 1; font-weight: 500; }
html #fhero nav.top .links .g:last-child > a, html #fhero nav.top .links .g:last-child > .hn-wrap > a { opacity: 0.62; }
html #fhero nav.top .links:hover .g > a, html #fhero nav.top .links:hover .g > .hn-wrap > a { opacity: 0.45; }
html #fhero nav.top .links:hover .g > a:hover, html #fhero nav.top .links:hover .g > .hn-wrap:hover > a { opacity: 1; }
html #fhero nav.top .links a:hover { text-decoration: none; }
html #fhero nav.top .links .g > a::after { display: none; }
/* current-page marker for every hero page: a hairline under the link */
html #fhero nav.top .links .g > a.here { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html #fhero nav.top .links:hover .g > a.here { text-decoration: underline; }
html #fhero nav.top .hn-wrap > a::after { display: none; }
/* between the tablet drawer (900) and 1180 the seven links plus three buttons need tighter gaps to hold one row */
@media (max-width: 1180px) {
  html #fhero nav.top { gap: 16px; }
  html #fhero nav.top .links { gap: 12px; padding-left: 16px; }
  html #fhero nav.top .links .g { gap: 12px; }
  html #fhero nav.top .links .g > a, html #fhero nav.top .links .g > .hn-wrap > a { font-size: 0.86rem; }
  html #fhero nav.top .acts { gap: 6px; }
  html #fhero nav.top .cta { padding: 7.2px 10.4px; font-size: 0.84rem; }
}
/* no caret on the dropdown triggers */
html #fhero nav.top .hn-drop { position: absolute; top: calc(100% + 9.6px); left: 50%; transform: translateX(-50%) translateY(3.2px);
  min-width: 200px; background: #fffdf8; color: #21374b; border: 1px solid rgba(30,47,64,0.1);
  border-radius: 11.2px; padding: 8px; box-shadow: 0 1px 1.6px rgba(30,47,64,0.05), 0 19.2px 48px -19.2px rgba(30,47,64,0.4);
  display: flex; flex-direction: column; gap: 1.6px; opacity: 0; visibility: hidden;
  transition: opacity 0.18s cubic-bezier(0.23,1,0.32,1), transform 0.18s cubic-bezier(0.23,1,0.32,1), visibility 0.18s; z-index: 60; }
html #fhero nav.top .hn-wrap:hover .hn-drop, html #fhero nav.top .hn-wrap:focus-within .hn-drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
html #fhero nav.top .hn-drop a { display: block; padding: 7.2px 9.6px; border-radius: 7.2px; font-size: 0.9rem;
  color: #21374b; opacity: 1; font-weight: 500; white-space: nowrap; }
html #fhero nav.top .hn-drop a:hover { background: #f3ecdf; text-decoration: none; }
/* no underlines in the submenu: the hero link underline selector reaches descendants, so it is switched off for dropdown rows. The caret on .hn-wrap > a is untouched. */
html #fhero nav.top .hn-drop a::after { display: none; }
html #fhero nav.top .hn-drop a small { display: block; font-size: 0.76rem; color: rgba(33,55,75,0.65); font-weight: 400; }
html #fhero nav.top .hn-drop a.sub { padding-left: 19.2px; }
html #fhero nav.top .hn-drop hr { border: 0; border-top: 1px solid rgba(30,47,64,0.12); margin: 4.8px 3.2px; }
@media (prefers-reduced-motion: reduce) { html #fhero nav.top .hn-drop { transition: none; } }
/* mobile */
@media (max-width: 700px) {
  html #fhero nav.top { padding: 11.2px 12.8px; gap: 6.4px; }
  html #fhero nav.top .wm { height: 17.6px; }
  html #fhero nav.top .links { display: none; }
  html #fhero nav.top .acts { gap: 4.8px; }
  html #fhero nav.top .cta { white-space: nowrap; padding: 6.4px 9.6px; font-size: 0.76rem; }
  html #fhero nav.top .cta.ghost { display: none; }
  html #fhero .app .alert, html #fhero .app ol, html #fhero .app .fpill { opacity: 1 !important; transform: none !important; }
  /* Log in holds the bar; Get help lives in the menu */
  html #fhero nav.top .cta.help { display: none; }
  html #fhero nav.top .cta.ghost { display: inline-flex; }
}