/* ============================================================================
   ax.css — AnalystX visual overlay for "AX Home".
   Loaded LAST, after tokens.css / landing.css / pages.css.
   Scope: (1) one typeface, (2) big & light display type, (3) near-monochrome,
   (6) radius & shadow near zero, (7) short functional motion.
   Nothing else on the page is touched.
   ========================================================================== */

/* ── 3 · Near-monochrome, cool neutrals, one interaction accent ──────────── */
:root {
  --bg:        #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f4f5f6;
  --bg-inset:  #eceef0;

  --ink:   #141414;
  --ink-2: #33393d;
  --ink-3: #6b7378;
  --ink-4: #a5abaf;

  --line:        #e3e6e8;
  --line-strong: #c7cccf;

  --accent:        #17457b;  /* interaction only — links, primary action */
  --accent-2:      #17457b;
  --accent-ink:    #ffffff;
  --accent-soft:   #eef1f5;
  --accent-soft-2: #e2e7ee;

  --hl: transparent;

  /* 6 · square-ish detailing */
  --radius-sm: 0px;
  --radius:    0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  --shadow-xs: none;
  --shadow:    none;
  --shadow-lg: none;
  --shadow-xl: none;

  /* 7 · one easing, one duration family */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── 1 · One typeface. No serif anywhere. ───────────────────────────────── */
:root { --serif: var(--sans); --serif-body: var(--sans); }
.it, .serif, .serif-body,
.hero-headline .it,
h1 em, h2 em, h3 em, .sig .name {
  font-family: var(--sans);
  font-style: normal;
  letter-spacing: inherit;
}
.it, h1 em, h2 em, h3 em { font-weight: 400; color: var(--ink); }

/* ── 2 · Display type: large, light, tight leading ──────────────────────── */
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 6.4vw, 84px); }
h2 { font-size: clamp(34px, 4.8vw, 60px); }
h3 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 400; line-height: 1.1; }

.hero-headline .big,
.bigstate,
.calm h2 {
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.02;
}
.hero-headline .big { font-size: clamp(32px, 3.6vw, 50px); margin-bottom: 22px; }
.calm h2 { font-size: clamp(34px, 5.4vw, 68px); }
.bigstate { font-size: clamp(34px, 5vw, 60px); }

/* body copy stays regular weight, one family */
.hero-headline, .lead, p, li { font-weight: 400; }
.eyebrow { font-family: var(--sans); letter-spacing: 0.14em; }
.yes-kicker { font-family: var(--sans); letter-spacing: -0.01em; text-transform: none; }

/* ── 3 · Accent is interaction only ─────────────────────────────────────── */
a { color: var(--ink); }
a:hover { color: var(--ink); }
/* Dark surfaces: never darken on hover, lighten to white.
   
   Every link on this list sits on near-black. `a:hover` above is one element
   plus one pseudo-class, which outranks the single class that painted the text
   white in the first place, so without an entry here the label turns
   #141414 on #141414 and disappears while the box stays put. That is what
   happened to the floating "Book a demo" pill: the mark kept showing because it
   is an <img> carrying its own white plate, so the button looked empty rather
   than broken.
   
   The rule is about the ANCHOR, not its container, which is why .tour, .peek
   and .skip-link are listed bare while the first three match descendants. */
.calm a:hover, .nav-panel a:hover, .lfoot--dark a:hover,
.tour:hover, .peek:hover, .skip-link:hover { color: #fff; }
.hl {
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-weight: 500;
}
.yes-tag { background: transparent; color: var(--ink); padding: 0; font-weight: 500; }
/* --hl is transparent in this theme, so the "It's time" mark needs its own ground */
.timelite li strong.hl { background: var(--ink); color: #fff; padding: 0.06em 0.32em; border-radius: 3px; font-weight: 500; }
.ticks .t { color: var(--ink-2); }
.calm { background: #141414; }

/* ── 6 · Hairlines instead of cards; square corners; no shadow ──────────── */
.who .card, .recipes li, .ticks div, .feat-chips span,
.class-next, .class-row, .nav-panel, .lang-menu, .modal-dialog,
.ag-step, .ag-said, .ag-said-inner,
.faq-item {
  border-radius: 0;
  box-shadow: none;
}
/* controls get a small radius — square corners are for structure, not for
   things you click */
.lang-btn, .nav-toggle, input, select, textarea { border-radius: 6px; }
.shot { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; overflow: hidden; }
.brand img, .hero-brand img, .lnav .lnav-brand img { border-radius: 0; }
.sig-photo { border-radius: 0; }
.btn { border-radius: 6px; font-weight: 500; letter-spacing: 0; }
/* solid buttons keep their own text colour on hover — the link rule must not win */
.btn-primary, .btn-primary:hover, .btn-dark, .btn-dark:hover { color: #fff; }
.feat-chips span { border-radius: 6px; }
.calm-noise span { border-radius: 0; }

/* FAQ becomes hairline rules, no container */
.faq--accordion .faq-item {
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding-inline: 0;
}
.faq--accordion .faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq--accordion .faq-q { font-weight: 400; }

/* ── 7 · Motion: short, functional, no bounce, no blur ──────────────────── */
* {
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}
.reveal {
  transition-duration: 260ms !important;
  transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1) !important;
}
.btn:active { transform: none; }
.who .card:hover { transform: none; }
/* hover = a small lift, not a colour change (the shadow tokens are none here,
   so the stock .tour hover had nothing left to express) */
.hero-menu a { transition: transform .16s cubic-bezier(0.2, 0, 0.2, 1); }
.hero-menu a:hover { color: var(--ink-3); transform: translateY(-2px); }
.hero-menu a:hover strong { color: var(--ink); text-decoration-color: var(--ink); }
.tour.tour--show:hover { transform: translateY(-2px) scale(1); box-shadow: none; }

/* calm section: fade + small lift, no blur, no scale */
.calm h2 {
  filter: none;
  transform: translateY(8px);
  transition: opacity 280ms cubic-bezier(0.2, 0, 0.2, 1), transform 280ms cubic-bezier(0.2, 0, 0.2, 1);
}
.calm p {
  transition: opacity 280ms cubic-bezier(0.2, 0, 0.2, 1) 60ms, transform 280ms cubic-bezier(0.2, 0, 0.2, 1) 60ms;
}
.calm-noise span {
  transition: opacity 240ms cubic-bezier(0.2, 0, 0.2, 1), transform 240ms cubic-bezier(0.2, 0, 0.2, 1);
  animation: none !important;
}
.calm.in .calm-noise span { transform: none; opacity: 0; }

/* ── Hero: keep the product shot beside the copy on medium screens ──────── */
/* Stock breakpoint drops to one column under 980px, which pushes the
   screenshot far below the fold in a narrow preview pane. */
@media (min-width: 820px) and (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(24px, 3vw, 40px); }
  .hero-copy { display: flex; min-height: 0; }
}

.tour { border-radius: 6px; }
/* the mark's SVG carries its own white plate, so the stock gap reads too wide */
.hero-brand { gap: 4px; }

/* the mark is already black-on-white; the stock invert would flatten it */
.peek img { filter: none; }
.peek { border-radius: 6px; }
.tour-thumb { border-radius: 4px; }

/* every clickable control lands on the same 6px radius */
.btn, .btn-primary, .btn-white, .btn-dark, .btn-ghost, .btn-block,
button, .tour, .peek, .vw-btn, .lang-btn, .nav-toggle,
.class-cta, .class-btn, .class-row .btn, .final-cta-copy .btn,
.class-next, .class-row, .cn-btn, .faq-item,
input, select, textarea { border-radius: 6px; }

/* "Book demo" read as plain text next to the email address */
.class-note-link {
  display: inline-block; margin-left: 8px;
  padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.class-note-link:hover { color: var(--ink); border-color: var(--ink); background: var(--bg-sunken); }

/* Shot a touch wider so its bottom edge sits level with the tour button. */
@media (min-width: 981px) {
  .hero-visual .shot { width: 1455px; }
}

/* The hero shot must never depend on the scroll-reveal observer to become
   visible — it is above the fold. Same for the hero copy, menu and CTAs:
   a re-render (e.g. a direct text edit) leaves them stuck at opacity 0. */
.hero-visual.reveal,
.hero-copy .reveal,
.hero-menu.reveal,
.hero-headline.reveal,
.hero-ctas.reveal { opacity: 1; transform: none; }

/* menu labels: not bold, but not the display's 300 either — 400 with a touch
   of tracking so they stay legible at 16px */
.hero-menu a strong { font-weight: 500; letter-spacing: 0; text-decoration-thickness: 1px; }
.nav-panel-links a strong, .lfoot-links a { font-weight: 500; }

/* logo marquee: near-still */
.logos-track { animation-duration: 140s !important; }


/* ── Agent-ready page: fold agents.css into the AX voice ──────────────────── */
.ag-kicker, .ag-step-kind, .mono { font-family: var(--sans); letter-spacing: 0.02em; text-transform: none; }
.ag-step, .ag-said, .ag-said-inner { border-radius: 6px; }
.ag-hero-copy .hero-brand { margin-bottom: 64px; }

/* Agent-ready: brand and CTA share one line, so the fixed bar only carries the menu */
.ag-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 64px; }
.ag-topline .hero-brand, .ag-topline .btn { margin: 0; align-self: center; }
.ag-topline .hero-brand { line-height: 1; }
.ag-hero-copy .hero-brand { margin-bottom: 0; }
.ag-hero .ag-topline + .ag-h1 { margin-top: 0; }
/* the bar's own signup button would sit above the new one */
/* One brand mark per page.
   
   Both of these exist on a sub-page: the nav bar's, and the topline's inside
   the hero. On desktop landing.css keeps .lnav-brand hidden, so only the
   topline shows and the two never meet. On phones it reveals the nav brand,
   because on softsync-site that IS the only mark up there: its sub-pages use
   the minimal <PageBrand> header, which carries no wordmark of its own.
   
   AnalystX sub-pages carry both, so the phone got two AnalystX wordmarks
   overlapping. The topline is the one to keep: it is the mark the layout is
   built around, and it has the Get access button beside it.
   
   Same shape as the signup rule below, and for the same reason. */
body:has(.ag-topline) .lnav .lnav-brand { display: none; }
body:has(.ag-topline) .lnav .nav-signup { display: none; }

/* four assistant marks, so the bloom cycle has to be four beats long */
.ag-mark { animation-duration: 7.2s; }
@keyframes ag-bloom {
  0%, 18%  { filter: grayscale(0); opacity: 1; }
  25%, 93% { filter: grayscale(1); opacity: 0.28; }
  100%     { filter: grayscale(0); opacity: 1; }
}

.lp-addons { margin: clamp(28px, 4vw, 44px) 0 0; font-size: 16px; color: var(--ink-3); max-width: 60ch; }

/* pricing cards follow the same 6px language as everything else you can click */
.plan, .showcase .plan, .billing, .demo-cta { border-radius: 6px; }
.billing button, .curr-btn, .curr-menu { border-radius: 6px; }
.billing .seg-pill { border-radius: 4px; }
/* --hl is transparent in this theme, so the "Most popular" tag lost its ground */
.plan-tag { background: var(--ink); color: #fff; border-radius: 4px; padding: 3px 8px; }

.plan-year { margin: 6px 0 0; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.lp-addons strong { color: var(--ink); font-weight: 600; }

/* four plans: flat firm pricing, so the grid gains a column */
.showcase--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(48px, 6vw, 76px); }
.showcase--4 .plan { padding: 26px 22px; }
.showcase--4 .plan-price .amount { font-size: clamp(34px, 3.4vw, 46px); }
@media (max-width: 1100px) { .showcase--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .showcase--4 { grid-template-columns: 1fr; } }

.lp-demo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; font-size: 15px; color: var(--ink-3); }
.lp-demo strong { color: var(--ink); font-weight: 600; }
.showcase--4 .plan-blurb { min-height: 56px; }
.showcase--4 .plan-note { min-height: 40px; }

/* the 3-plan layout staggered the cards vertically; four flat tiers sit level */
.showcase--4 .plan, .showcase--4 .plan--s1, .showcase--4 .plan--s2, .showcase--4 .plan--s3, .showcase--4 .plan--s4 { margin-top: 0; }
.showcase--4 .plan-price { align-items: baseline; margin-top: 22px; }
.showcase--4 .plan-year { min-height: 22px; }
/* The four-card row shows its tick lists. They were hidden here on the
   assumption that four narrower cards had no room, which left the page saying
   the price covers a firm "within a people range" and never printing one.
   The list is where the range goes, so it comes back; the button is pushed to
   the bottom instead so the cards still end level. */
.showcase--4 .plan-feats {
  margin-top: 16px; padding-top: 16px;
  /* pages.css gives .plan-feats flex: 1 0 auto so the cards end level, and the
     list is a grid, so the spare height was being shared out between the rows
     as gap. Pack them to the top and let the growth fall below the last one. */
  align-content: start;
  /* And a floor under that growth. Because the list absorbs ALL the free space,
     margin-top: auto on the button below resolves to nothing, so on the tallest
     card the last tick sat flush against the button. This margin is the gap on
     every card, tallest included, which is also why it is here and not on the
     button: it has to be a constant, not a remainder. */
  margin-bottom: 22px;
}
.showcase--4 .plan-feats li { font-size: 13.5px; padding-left: 22px; }
.showcase--4 .plan { display: flex; flex-direction: column; }
.showcase--4 .plan .btn { margin-top: auto; }
.amount--word { font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.03em; }

.lp-demo--below { margin-top: 18px; }
.plan-tag { white-space: nowrap; }

/* ── Journeys page ────────────────────────────────────────────────────────── */
/* the ax radius reset flattened the chooser tiles; they are clickable, so 6px */
.pcard, .paper { border-radius: 6px; }
/* accent is the blue interaction colour, wrong for a selected tile or an end node */
.pcard.is-active { outline-color: var(--ink); border-color: var(--ink); }
.ppt--end .pbub, .pfeature-foot .ss-mark { background: var(--bg-raised); border: 1px solid var(--ink); }
/* the logomark carries its own plate, so inverting it painted a square */
.ppt--end .pbub img, .pfeature-foot .ss-mark img { filter: none; }

/* stand-in lettermarks until the real Salesforce / Affinity logos land */
.pword { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: -0.02em; color: var(--ink-3); }
.pbig .pword { font-size: 19px; }

.pfeature-foot .ss-sub { max-width: 42ch; }

/* journeys hero: same rhythm as the other AX pages */
.page-head--tight .ag-topline { margin-bottom: 64px; }
.page-head--tight .lp-head { margin-bottom: clamp(48px, 6vw, 76px); }
.paths-nav { margin-top: 0; }

/* ── Lingo page: sales word → fund word ───────────────────────────────────── */
.lingo { padding-block: clamp(64px, 8vw, 110px); }
.lingo-list { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.lingo-row {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 10px 18px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.lingo-old { font-family: var(--sans); font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-4); text-decoration: line-through; text-decoration-thickness: 1px; }
.lingo-arrow { color: var(--ink-4); font-size: 15px; }
.lingo-new { font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.02em; color: var(--ink); }
.lingo-note { font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
@media (max-width: 820px) {
  .lingo-row { grid-template-columns: minmax(0, auto) 22px minmax(0, 1fr); }
  .lingo-note { grid-column: 1 / -1; }
}

.objects { padding-block: clamp(56px, 7vw, 96px); }
/* two-part list items (label + explanation) wherever the yes list is used */
.yes--big li:has(strong) { padding-left: 0; }
.yes--big li:has(strong)::before { content: none; }
.yes--big li strong { display: block; color: var(--ink); font-weight: 600; font-size: clamp(18px, 1.9vw, 21px); letter-spacing: -0.02em; }
.yes--big li strong + span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }

.lingo-mark {
  display: inline-flex; align-items: center; gap: .28em;
  padding: 0 .3em .04em; border-radius: 6px;
  background: var(--ink); color: #fff;
  font-weight: 500; letter-spacing: -0.01em;
}
.lingo-mark svg { width: .62em; height: .62em; }

/* dollar signs drifting off the headline, like zzz */
.zzz { position: relative; display: inline-block; width: 1.5em; height: 1em; margin-left: .12em; vertical-align: baseline; }
.zzz i {
  position: absolute; bottom: .1em; left: 0;
  font-family: var(--sans); font-style: normal; font-weight: 500;
  color: var(--ink-3); opacity: 0;
  animation: zzzRise 4.2s cubic-bezier(.4,0,.5,1) infinite;
}
.zzz i:nth-child(1) { font-size: .3em; animation-delay: 0s; }
.zzz i:nth-child(2) { font-size: .38em; animation-delay: 1.4s; }
.zzz i:nth-child(3) { font-size: .46em; animation-delay: 2.8s; }
@keyframes zzzRise {
  0%   { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  18%  { opacity: .85; }
  100% { transform: translate(1.6em, -2.6em) rotate(12deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .zzz i { animation: none; opacity: .5; } }

/* Lingo: a seed round as a sales CRM sees it */
.calm .calm-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 5vw, 80px); align-items: center; max-width: var(--maxw); text-align: left; }
.calm .calm-grid h2 { margin: 0; text-align: left; max-width: 18ch; font-size: clamp(30px, 3.6vw, 50px); }
.calm .calm-grid p { margin: 22px 0 0; text-align: left; max-width: 40ch; }
.jrec { text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 20px 22px 8px; }
.jrec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.jrec-title { font-family: var(--sans); font-weight: 600; font-size: 17px; color: #fff; }
.jrec-badge { font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 3px 7px; }
.jrec-fields { margin: 0; }
.jrec-fields > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; text-align: left; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.jrec-fields > div:last-child { border-bottom: 0; }
.jrec-fields dt { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.45); }
.jrec-fields dd { margin: 0; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.88); }
/* Stacks below 880. Written as .calm .calm-grid, not .calm-grid: the two-column
   rule above is also two classes, and a media query buys no specificity, so the
   single-class version lost and the card kept its half-width column on a phone.
   It ran off the right edge with the badge and the values clipped. */
@media (max-width: 880px) {
  .calm .calm-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .calm .calm-grid h2 { max-width: none; }
}

.calm .calm-aside { margin-top: 18px; font-size: 16px; color: rgba(255,255,255,.55); max-width: 44ch; }

/* this .calm has no noise layer, so site.js never adds .in — the copy must not
   start invisible; the wrapper's .reveal handles the entrance instead */
.calm .calm-grid h2, .calm .calm-grid p { filter: none; opacity: 1; transform: none; }
.calm:has(.calm-grid) { min-height: 0; padding-block: clamp(80px, 12vw, 160px); }

/* a portrait capture keeps the same frame as every other shot: crop from the top */
.show-visual .shot--portrait { height: 700px; }
.show-visual .shot--portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Features page: screenshots replaced the video players, so the blocks need
   their own rhythm — image, then the claim, with air on both sides */
.lp-block { padding-block: clamp(34px, 5vw, 64px); }
.lp-block:first-of-type { padding-top: clamp(44px, 6vw, 80px); }
.lp-block .shot { margin: 0 0 clamp(22px, 3vw, 34px); }
.lp-block h2 { max-width: 26ch; }
.lp-block p { max-width: 60ch; }
.lp-head { margin-bottom: clamp(20px, 3vw, 36px); }

.lp-head .lead { max-width: 62ch; }
.lp .lp-block { max-width: none; }


/* ------------------------------------------------------------------
   One top rhythm for every AX subpage (Home keeps its own hero).
   The brand + Get access line sat at a different height on each page
   because .page-head, .page-head--flush/--tight and .ag-hero each
   picked up their own padding (and smartest.css overrode it again on
   small screens). Pin all of them to the same value.
   ------------------------------------------------------------------ */
.page-head:has(.ag-topline),
.ag-hero:has(.ag-topline) { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 720px) {
  .page-head:has(.ag-topline),
  .ag-hero:has(.ag-topline) { padding-top: 28px; }
}
.ag-topline { margin-bottom: clamp(40px, 5vw, 64px); }
.page-head--tight .ag-topline { margin-bottom: clamp(40px, 5vw, 64px); }

/* Autopilot steps: numbers in ink, not the accent blue */
.ap-step-n { background: var(--ink); color: #fff; }

/* ============================================================================
   Appendix — the AnalystX-only rules that the design export carried in its own
   copy of landing.css.

   They live here, not in landing.css, on purpose. landing.css is the shared
   design system, kept as close to its upstream as possible so a fix made on
   either site can be copied straight across. The design export's copy had
   drifted (it predates the thank-you page's heart mark), so merging it
   wholesale would have quietly reverted newer work to win four rules. These
   four are those rules, restated as overrides.
   ========================================================================== */

/* Body links outside .prose. The AnalystX pages almost never link mid-sentence;
   the AnalystX pages do it constantly ("Point Claude or ChatGPT straight at
   your fund's intelligence"), so an inline link needs to read as one without
   turning the paragraph blue. */
.show-text p a, .final-cta-lead a, .yes a, .timelite a {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: var(--line-strong);
  transition: text-decoration-color .15s;
}
.show-text p a:hover, .final-cta-lead a:hover, .yes a:hover, .timelite a:hover {
  text-decoration-color: var(--ink);
}

/* The letter runs long here — it is the founder's "does this sound familiar",
   not a caption — so the heading column gives width back to the prose.
   
   Above 880 only. landing.css collapses .columns to one column below that, and
   an ID beats a class no matter which media query it sits in, so unscoped this
   rule kept two columns on a phone and set the heading in a 0.6fr sliver:
   "Does / this / sound / familiar?", one word a line. */
@media (min-width: 881px) {
  #letter .columns {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: clamp(28px, 4vw, 56px);
  }
}

/* The calm section is two lines of copy over the noise field, and ax.css has
   already flattened the type scale. At the shared size it reads as a caption
   rather than as the turn in the argument, so it goes back up. */
.calm p {
  max-width: 46ch; margin: 24px auto 0;
  font-size: clamp(19px, 2.3vw, 25px); line-height: 1.45;
}

/* The American flag and the restriped band have MOVED to landing.css, as
   `.us-flag` and `.flag-band--us`, because softsync-site's English edition now
   needs them too. They were an AnalystX-only repaint when this was the only
   site incorporated in Delaware; a rule two sites use belongs in the shared
   sheet, which is the whole point of keeping landing.css in step.
   Footer.astro opts in with .flag-band--us on every page here. */

/* The reassurance line under the final CTA's buttons. */
.final-cta-trust {
  margin: 26px 0 0; max-width: 52ch;
  font-size: 15px; line-height: 1.55; opacity: .62;
}

/* ============================================================================
   Pairing a page head with the section under it.

   Four artboards do this with inline styles: the head loses its bottom padding
   and its lp-head margin, and the section below halves its top padding, so the
   headline and the first screenshot read as one unit. The inline styles are not
   portable to a CMS, so the same three values live here as classes.

   `--tight --flush` together, rather than `--flush` alone: --tight is what sets
   the wide container and the 660px measure, and in landing.css it is declared
   AFTER --flush, so its padding-bottom would win. This rule is later still.
   ========================================================================== */
.page-head--tight.page-head--flush { padding-bottom: 0; }
.page-head--tight.page-head--flush .lp-head { margin-bottom: 0; }
.show--flush-top { padding-top: clamp(28px, 3.5vw, 48px); }

/* ============================================================================
   Appendix 2 — the lead-magnet sheet, repainted.

   magnets.css was inherited and unreferenced until /hubspot, /affinity and
   /attio needed it (see the note in src/lib/pageStyles.ts). It is 304 var()
   references and eleven hardcoded colours, and those eleven are SoftSync's
   terracotta: they predate the tokens and never got converted. Loaded as-is
   they would put another company's accent on three AnalystX pages, in the one
   place a reader is already comparing brands.

   Repainted here rather than in magnets.css for the same reason landing.css is
   left alone: the sheet stays copyable to and from softsync-site, and the
   AnalystX-only rules live in one place at the end of the cascade. ax.css loads
   last, so these win without !important.

   AnalystX is near-monochrome with one navy interaction accent, and none of
   these marks is an interaction: they are corrections and warnings. So they go
   to ink rather than to accent, and carry their weight through strike, rule and
   position instead of hue. The one exception is the struck competitor mark,
   which needs to read as a strike from across the page.
   ========================================================================== */

/* badTranslations: the middle column is the vendor's own word, struck through
   by the component. Terracotta made it look like an error state; the point is
   that it is a perfectly good word in the wrong building. */
.xlate-them { color: var(--ink-3); }

/* priceReceipt: a line you cannot decline (onboarding fees and the like). It is
   already the only bold amount in the column; the colour was doing the work
   twice. */
.receipt-lines li.rl-forced .rl-amount { color: var(--ink); font-weight: 500; }

/* crossedLogo: the strike itself. Unused today, and the one place a real line
   colour earns its keep, so it goes to full ink rather than to a mid grey that
   would read as a smudge over a logo. */
.xlogo-strike line { stroke: var(--ink); }
.xlogo--dark .xlogo-strike line { stroke: #ffffff; }

/* sheetDecay's rotted column, consultantChain's toll and priceCalc's cliff.
   None of the three is on a page yet. Repainted with the rest so that the day
   one of them is, it does not arrive wearing the old accent. */
.d-3, .sheet thead.sheet-cols th.d-3 { color: var(--ink); }
.sheet td.cell-flag { background: var(--bg-inset); color: var(--ink); }
.cc-toll, .pc-cliff { color: var(--ink); background: var(--bg-inset); }

/* ── The campaign heroes, given the AnalystX topline ──────────────────────────
   TagHero and DurationHero now render <Topline> inside .wrap, the way every
   other AX page opener does. landing.css knows nothing about that pairing, so
   the rhythm is pinned here, to the same two values ax.css already pins for
   .page-head and .ag-hero further up. Keep the three in step. */
.phero:has(.ag-topline) { padding-top: clamp(40px, 5vw, 72px); }
.phero .ag-topline { margin-bottom: 64px; }
@media (max-width: 720px) {
  .phero:has(.ag-topline) { padding-top: 28px; }
  .phero .ag-topline { margin-bottom: 44px; }
}


/* ============================================================================
   Appendix 3 — the pricing grid at five cards. CURRENTLY UNUSED.

   Pricing went four tiers, briefly five, then back to four when Platform was
   folded into a custom-priced Multi-Fund. This block is kept rather than
   deleted, for the same reason src/lib/pageStyles.ts keeps european.css: the
   component supports five cards and the failure without these rules is silent.
   PriceCards used to slice firmPlans to four, so a fifth card vanished with a
   green build; that slice is now five, and if the CSS went away the fifth card
   would instead fall back to landing.css's three columns and wrap onto a
   narrower second row. The pair closes the footgun. Delete both or neither.

   Same shape as --4, one size down: five cards across a 1200px measure is
   about 230px each, which the 4-card type scale overflows. It breaks to three
   then two then one, earlier than --4 does, because five run out of room first.
   ========================================================================== */
.showcase--5 { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: clamp(48px, 6vw, 76px); }
.showcase--5 .plan { padding: 22px 16px; }
.showcase--5 .plan-price .amount { font-size: clamp(26px, 2.4vw, 34px); }
.showcase--5 .plan-name { font-size: 15px; }
.showcase--5 .plan-blurb { min-height: 60px; }
.showcase--5 .plan-note { min-height: 52px; }
.showcase--5 .plan-year { min-height: 22px; }
.showcase--5 .plan-price { align-items: baseline; margin-top: 20px; }
/* The staircase offsets are a four-card flourish. At five they cost more
   vertical rhythm than they buy, so every card sits on the same line. */
.showcase--5 .plan,
.showcase--5 .plan--s1, .showcase--5 .plan--s2, .showcase--5 .plan--s3,
.showcase--5 .plan--s4, .showcase--5 .plan--s5 { margin-top: 0; }
@media (max-width: 1240px) { .showcase--5 { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 900px)  { .showcase--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .showcase--5 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .showcase--5 .plan-blurb, .showcase--5 .plan-note { min-height: 0; } }


/* ============================================================================
   Appendix 4 — the competitor pages (/hubspot, /affinity, /attio).

   magnets.css was written against SoftSync's palette, where the page ground is
   a warm cream and --bg-sunken is a tone you can see. AnalystX repaints --bg to
   pure #ffffff, and three rules in that sheet quietly stopped working when it
   did. None of them fails loudly: the block renders, it just renders invisible.
   Fixed here rather than in magnets.css so the sheet stays copyable between the
   two repos, which is the same reason landing.css is left byte-identical.
   ========================================================================== */

/* 1 · The clutter marquee.

   .clutter-pill is --ink-4 text on --bg-sunken inside a --line border. On cream
   that is a legible grey pill. On #ffffff it is #a5abaf on #f4f5f6 behind a
   #e3e6e8 edge, which is three shades of almost-white stacked on each other:
   at the top of /hubspot the whole row read as a rendering fault rather than as
   the sixteen things the reader's CRM believes. The mask fading both ends makes
   it worse, because the pills that survive the fade are the palest part of it.

   Text to --ink-3 and the edge to --line-strong. That is the smallest change
   that makes the row legible without turning a background texture into a
   foreground element: these pills are meant to be clutter, just visible clutter. */
.clutter-pill {
  color: var(--ink-3);
  border-color: var(--line-strong);
}

/* 2 · The price ladder.

   PriceLadder.astro scales each rung between 96px and MAX off its own digits,
   so the riser between Professional and Enterprise is the argument. What the
   component cannot see is that .rung-note reserves three lines to keep the row
   of prices level, and three lines plus the padding, the tier label and the
   price is a content floor around 195px. Every rung below that floor renders at
   the floor, so at MAX 300 the ladder ran 195 / 195 / 218 / 300: four cards of
   roughly equal height, which is precisely the shape the block exists to avoid.

   MAX moved to 430 in the component. The floor is left alone: dropping the note
   reservation would fix the flatness by breaking the price alignment, and the
   comment above that rule in magnets.css explains why that alignment is worth
   more. With the taller peak the same four rungs run 195 / 195 / 296 / 430, and
   Free and Starter sharing the floor is honest, because $0 and $7 really are
   the same distance from nothing. */

/* 3 · The jump rung.

   --shadow is `none` under this brand, so .rung--jump lost the one cue that
   separated it from its neighbours and was left with a border a shade darker
   than the others. It is the tier the whole page argues a fund is pushed onto,
   so it gets a solid ink cap instead: no shadow, no colour, and it still reads
   first at a glance. */
.rung--jump {
  border-top: 3px solid var(--ink);
  background: var(--bg-inset);
}