/* ==========================================================================
   Crypticorn — sections.css
   Layout vocabulary for the marketing pages. The page content is stored as plain HTML built from
   a small set of primitives (.sec rows, .col columns, and a dozen element classes). Every layout
   parameter the builder used to carry inline — paddings, gaps, widths, backgrounds, radii,
   per-device spacing — is expressed as a class or a CSS custom property on the element, and this
   file turns those into geometry. Breakpoints mirror the original theme's: ≤690 phone, ≤999
   tablet, ≥1000 desktop, ≥1425 large desktop.
   ========================================================================== */

/* 1. PAGE CONTAINER ========================================================= */

:root {
  --cw: 1600px;              /* container max (incl. gutters) */
  --cpad: 90px;              /* container gutter */
}
@media (max-width: 999px) {
  :root { --cpad: 0px; }
}

.page-entry {
  width: 100%;
  overflow-x: clip;
  font-size: 1rem;
  line-height: 1.3;
  color: #555;
}

/*
 * First-row top margins from Salient (top_margin_50px) collapse away on production, so the hero
 * background runs flush under the transparent header. overflow-x: clip above blocks that collapse
 * and leaves a white band only on pages that still carry --mt on the hero (e.g. /ai-crypticorn-aic-token/).
 */
.page-entry > .sec:first-child {
  --mt: 0;
  margin-top: 0 !important;
}

/* 2. ROWS =================================================================== */

/* Custom properties inherit, and rows, columns and elements share names (--mt, --pt-p, --w …).
   Every layer resets the set it does not own, so a row's margin never leaks into its columns
   and a column's phone padding never lands on the images inside it. */
.sec, .col, .img, .cta-wrap, .badge-wrap, .sp, .rule, .fancy, .merged > .grad, .vid, .icon, .txt, .split, .faq, .ticker, .carousel, .tabs, .bar, .price {
  --mt: initial; --mb: initial; --mt-p: initial; --mb-p: initial; --ml-p: initial; --mr-p: initial;
  --pt: initial; --pb: initial; --pl: initial; --pr: initial;
  --pt-p: initial; --pb-p: initial; --pl-p: initial; --pr-p: initial;
  --pt-d: initial; --pb-d: initial; --pl-d: initial; --pr-d: initial;
  --tx: initial; --ty: initial; --tx-p: initial; --ty-p: initial; --rot-d: initial;
  --posl-d: initial; --post-d: initial; --posr-d: initial; --posb-d: initial;
  --w: initial; --w-p: initial; --mw: initial; --mw-p: initial; --r: initial; --h: initial; --h-p: initial;
  --pp: initial; --ppp: initial; --col-bg: initial; --col-bg-op: initial; --col-r: initial; --col-bd: initial; --delay: initial;
  --sp: initial; --fs-d: initial; --fs-min: initial; --bg: initial; --size: initial; --pad: initial; --btn-pad: initial;
  --ratio: initial; --cols: initial; --cell-bg: initial;
}
.sec { --gap: initial; --stack: initial; }
/* el_spacing belongs to the column and must reach every element in it, so only layout layers reset it. */
.sec, .col { --els: initial; }


.sec {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--pt, 0);
  padding-bottom: var(--pb, 0);
  margin-top: var(--mt, 0);
  margin-bottom: var(--mb, 0);
}
/* Stacked rows keep the builder's spacing: a pixel gutter spaces rows by that gutter, the default
   gutter by 21px, and full-width rows, "none" rows and the last default row in a wrapper by nothing. */
.sec:not(.sec--edge):not(.sec--bleed) { margin-bottom: var(--mb, 21px); }
.sec[data-gap$="px"]:not(.sec--edge):not(.sec--bleed) { margin-bottom: var(--mb, var(--gap)); }
.sec[data-gap="none"]:not(.sec--edge):not(.sec--bleed),
.sec:not([data-gap$="px"]):last-child { margin-bottom: var(--mb, 0px); }
/* Do NOT add `.col__in > .sec:last-child { margin-bottom: 0 }` here. Production's
   `.wpb_wrapper > div:last-child { margin-bottom: 0 }` does zero the last inner row of the
   "$AIC Token Powers" section on /ai-crypticorn-aic-token/ (50px on the rebuild, 0 on production),
   but .col__in is not the same set as .wpb_wrapper: production nests further wrappers inside a
   column, so many rows that end a .col__in here are not last in their .wpb_wrapper there and do keep
   their gutter. Applied across the site it cost 17-90px on five pages -- / -41, ai-trading-agents
   -24, dex -33, dashboard -56, token -77 -- against a +13 it was meant to close. Measured and
   reverted; the token row needs a pairing that survives production's extra wrapper levels.
   Hooked on the gutter value instead, which does survive it: a 50px inner gutter occurs once in the
   whole site, on exactly that row, and production paints it flush (its row runs 6213-6709 inside a
   column ending at 6789, all 80px of that the column's own padding). Ties with the data-gap rule
   above on specificity, so it has to stay below it. */
.col__in > .sec[data-gap="50px"]:last-child { margin-bottom: var(--mb, 0px); }
/* A row nested in a column follows that column's element spacing, not the 21px stacking default.
   Production: `.wpb_column.el_spacing_0px > … > div:not(:last-child) { margin-bottom: 0 }`, which
   reaches every child including a nested row. The rebuild carries element spacing as --els and hands
   it to column children through --wrap-mb, but the rule above reads --mb and so outranked it, giving
   the five-column icon row on /up-down…/ a 21px gap production does not have and pushing everything
   below it down. Mirrors production's :not(:last-child); matches exactly that one row sitewide. */
.col[style*="--els"] > .col__in > .sec:not(:last-child):not(.sec--edge):not(.sec--bleed) { margin-bottom: var(--mb, var(--els)); }

.sec__bg,
.sec__ov {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sec__ov { z-index: 1; }

/* A plain row keeps its background inside the container, like the builder did. */
.sec:not(.sec--bleed):not(.sec--edge):not(.sec--inner) > .sec__bg,
.sec:not(.sec--bleed):not(.sec--edge):not(.sec--inner) > .sec__ov {
  left: 0;
  right: 0;
  width: auto;
  max-width: calc(min(100%, var(--cw)) - 2 * var(--cpad));
  margin-inline: auto;
}
@media (max-width: 999px) {
  .sec:not(.sec--bleed):not(.sec--edge):not(.sec--inner) > .sec__bg,
  .sec:not(.sec--bleed):not(.sec--edge):not(.sec--inner) > .sec__ov { max-width: 88%; }
}

.sec__cols {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--gap, 2%);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cw);
  margin-inline: auto;
  padding-left: var(--pl, var(--cpad));
  padding-right: var(--pr, var(--cpad));
}

@media (max-width: 999px) {
  .sec__cols { max-width: 88%; }
}

/* Edge-to-edge content. */
.sec--edge > .sec__cols { max-width: none; padding-left: var(--pl, 0); padding-right: var(--pr, 0); }
@media (max-width: 999px) {
  .sec--edge > .sec__cols { max-width: none; }
}

/* Inner rows fill the column they sit in. */
.sec--inner > .sec__cols { max-width: none; padding-left: var(--pl, 0); padding-right: var(--pr, 0); }
@media (max-width: 999px) {
  .sec--inner > .sec__cols { max-width: none; }
}

.sec--flex > .sec__cols { align-items: stretch; }
.sec--cmid > .sec__cols { align-items: center; }
.sec--vh  > .sec__cols { min-height: 100vh; }

[data-gap="none"] { --gap: 0px; }
[data-gap="5px"]  { --gap: 5px; }
[data-gap="10px"] { --gap: 10px; }
[data-gap="20px"] { --gap: 20px; }
[data-gap="30px"] { --gap: 30px; }
[data-gap="40px"] { --gap: 40px; }
[data-gap="50px"] { --gap: 50px; }
[data-gap="70px"] { --gap: 70px; }

/* Phone-only spacing overrides ("top_padding_phone_70px" and friends). */
@media (max-width: 690px) {
  .sec {
    padding-top: var(--pt-p, var(--pt, 0));
    padding-bottom: var(--pb-p, var(--pb, 0));
    margin-top: var(--mt-p, var(--mt, 0));
    margin-bottom: var(--mb-p, var(--mb, 0));
  }
  .sec__cols { padding-left: var(--pl-p, var(--pl, var(--cpad))); padding-right: var(--pr-p, var(--pr, var(--cpad))); }
  .sec--rev-p > .sec__cols { flex-direction: column-reverse; flex-wrap: nowrap; }
}

@media (min-width: 1000px) {
  .sec--rev-d > .sec__cols { flex-direction: row-reverse; }
}

/* The builder gave every top-level full-bleed row a little extra headroom below the desktop breakpoint. */
@media (max-width: 999px) {
  .sec--tl.sec--bleed > .sec__cols { padding-top: 25px; }
}
@media (max-width: 690px) {
  .sec--tl.sec--bleed > .sec__cols { padding-top: 55px; }
}

.sec.row_position_absolute {
  position: absolute;
  z-index: 5;
  width: auto; /* shrink-to-fit, like the builder's absolutely positioned row */
  left: var(--posl-d, auto);
  top: var(--post-d, auto);
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot-d, 0deg));
}
.sec.row_position_absolute > .sec__cols { width: max-content; max-width: none; padding: 0; }
.sec.row_position_absolute > .sec__cols > .col { width: auto; }
@media (max-width: 999px) {
  .sec.row_position_absolute { display: none; }
}
.no-pointer-events { pointer-events: none; }

/* 3. COLUMNS ================================================================ */

.col {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  margin-top: var(--mt, 0);
  margin-bottom: var(--mb, 0);
  /* Percent padding is measured against a fixed basis, not the column: 1245px on large screens,
     the viewport minus the gutters on ordinary desktops, 600px on tablets, 690px on phones. */
  --pbase: 1245px;
  --pmult: 1;
  --pp-eff: var(--pp, 0);
  --padv: calc(var(--pbase) * var(--pp-eff) / 100 * var(--pmult));
}

/* A padded column nested inside a narrower column halves its padding. */
.col:not(.c-12) .col { --pmult: .5; }
/* Salient stores separate desktop and phone element padding, and only the desktop value is halved
   for a nested full-width column. The homepage's "Know exactly where the prices…" card wants the
   halved 74px at 1440 (409px of copy, which un-halving cut to 335px) and the full 34.5px at 390
   (274px, which halving widened to 309px). Restoring the multiplier below 690 gets both.
   Not just the full-width ones: the exchange cards under "Working Only with Trusted Crypto
   Exchanges" are nested .c-6.xs-6 and production pads them 13.8px and 6.9px on a phone where the
   halving gave 6.9 and 3.45, while matching exactly at 1440 (24.9 / 31.125 / 43.575 on both). The
   16px of extra width that bought was enough to stop "COMING SOON" wrapping, so two of the three
   logo rows came out 14 and 31px short. */
@media (max-width: 690px) {
  .col:not(.c-12) .col { --pmult: 1; }
}

/* Edge-to-edge rows measure their percent padding against the viewport. */
.sec--edge > .sec__cols > .col { --pbase: 100vw; }

@media (max-width: 1424px) { .col { --pbase: calc(100vw - 180px); } }
@media (max-width: 999px)  { .col, .sec--edge > .sec__cols > .col { --pbase: 600px; } }
@media (max-width: 690px)  { .col { --pbase: 690px; --pp-eff: var(--ppp, var(--pp, 0)); } }
/* A tinted card with no separate phone value (--ppp absent) resolves its padding against the
   viewport on production, not the 690px base: /dex-ai-trading/'s "Review holder concentration" card
   insets 11.7px there -- 3% of 390 -- against the 20.7px that 3% of 690 gives. Restricted to
   .has-bg: applying it to every --ppp-less column also caught the homepage's plain c-12 (--pp:2),
   which production does keep on the 690 base, so that one lost 6px a side. */
@media (max-width: 690px) { .col.has-bg:not([style*="--ppp"]) { --pbase: 100vw; } }
/* Salient's padding class name is a bucket, not the value: the per-page CSS it generates for the
   legal pages' card column reads `calc(600px*0.06)` below 1000 and `calc(100vw*0.06)` below 690,
   i.e. 6%, while the class is padding-5-percent and the desktop value really is 5%. The transpiler
   took 5 from the class, so the card was 8px wider inside on a phone (304 against production's 296)
   and every paragraph wrapped one line short -- the five text-only pages ran 6-7% short at 390
   (/terms-of-sale/ -1192px) while measuring exactly 0 at 1440. Verified at four widths: production
   62.25/36/41.4/23.4 at 1440/800/690/390, the rebuild 62.25/30/34.5/19.5.
   `.has-bg` with --pp:5 and no --ppp matches these five columns and nothing else sitewide -- every
   other --pp:5 column carries its own phone value. */
@media (max-width: 999px) {
  .page-entry .col.has-bg[style*="--pp:5"]:not([style*="--ppp"]) { --pp-eff: 6; }
}
/*
 * WPBakery gives every column a 15px side gutter. The rebuild folded that into the column widths
 * instead, which lands on production's content width nearly everywhere -- but not for these three,
 * whose outer width already equals production's, so they came out 30px wider inside: 281 against
 * 251 on /ai-trading-agents/ and 351 against 321 on /about/ and /ai-crypticorn-aic-token/. The
 * extra width re-wrapped "Your Crypto AI Trading Agents Benefits" from three lines to two.
 * `--pp:4` selects exactly those three columns and nothing else on the marketing pages.
 */
/*
 * The same columns need the gutter back above the phone breakpoint, but not a flat 15px: the
 * transpiler folded a different share of it into each column's width, so what is left to restore
 * varies by column size. Measured against production's content width at 1440 -- c-6 columns come out
 * 633 against production's 618, c-8 columns 854 against 834, and the token contract column 705
 * against 675. Percentages are no use here: CSS resolves percentage padding against the row, not the
 * column, so every column would get the same value.
 */
@media (min-width: 691px) {
  .page-entry .col.c-6:is(.hero, .tc)[style*="--pp:4"] { padding-inline: 7.5px; }
  .page-entry .col.c-8:is(.hero, .tc)[style*="--pp:4"] { padding-inline: 10px; }
  .page-entry .col:is(.hero, .tc)[style*="--pp:4"][style*="--els:10px"] { padding-inline: 15px; }
}
@media (max-width: 690px) {
  .page-entry .col:is(.hero, .tc)[style*="--pp:4"] { padding-inline: 15px; }
  /* The token contract column sits in an edge-to-edge section where production pads the row as well
     as the column, insetting its copy 30px rather than 15 -- 330px against the 360px one inset
     leaves. Applying that to every edge-section column instead narrowed eleven others by 30px, so it
     is pinned to this one: --pp:4 with --els:10px matches exactly one column on the marketing pages. */
  .page-entry .col:is(.hero, .tc)[style*="--pp:4"][style*="--els:10px"] { padding-inline: 30px; }
  /* One left-aligned column resolves its inset against the viewport rather than the 690px base:
     production insets it 23.4px at 390 -- 6% of the viewport, the same proportion its products grid
     uses -- against the 27.6px that 4% of 690 gives. The only .tl-d[--pp:4] column on the site. */
  .page-entry .col.tl-d[style*="--pp:4"] > .col__in { padding-inline: 6vw; }
}
/* A row that inherited its wrapper column's phone side margins narrows its content by them. */
@media (max-width: 690px) {
  .sec[style*="--pl-p"] > .sec__cols { padding-left: var(--pl-p); }
  .sec[style*="--pr-p"] > .sec__cols { padding-right: var(--pr-p); }
}

.c-12 { flex-basis: 100%; }
.c-11 { flex-basis: calc((100% + var(--gap, 2%)) * .916667 - var(--gap, 2%)); }
.c-10 { flex-basis: calc((100% + var(--gap, 2%)) * .833333 - var(--gap, 2%)); }
.c-9  { flex-basis: calc((100% + var(--gap, 2%)) * .75 - var(--gap, 2%)); }
.c-8  { flex-basis: calc((100% + var(--gap, 2%)) * .666667 - var(--gap, 2%)); }
.c-7  { flex-basis: calc((100% + var(--gap, 2%)) * .583333 - var(--gap, 2%)); }
.c-6  { flex-basis: calc((100% + var(--gap, 2%)) * .5 - var(--gap, 2%)); }
.c-5  { flex-basis: calc((100% + var(--gap, 2%)) * .416667 - var(--gap, 2%)); }
.c-4  { flex-basis: calc((100% + var(--gap, 2%)) * .333333 - var(--gap, 2%)); }
.c-3  { flex-basis: calc((100% + var(--gap, 2%)) * .25 - var(--gap, 2%)); }
.c-2  { flex-basis: calc((100% + var(--gap, 2%)) * .166667 - var(--gap, 2%)); }
.c-1  { flex-basis: calc((100% + var(--gap, 2%)) * .083333 - var(--gap, 2%)); }
.c-1of5 { flex-basis: calc((100% + var(--gap, 2%)) * .2 - var(--gap, 2%)); }
/* Production runs this five-across row with no gap at all: five equal 167px columns in an 834px row,
   separated by their own inner padding. The 2% gap here left them 153px. */
@media (min-width: 691px) {
  .page-entry .sec__cols:has(> .col.c-1of5) { gap: 0; }
  .page-entry .col.c-1of5 { flex: 0 0 20%; max-width: 20%; }
}
/* Production keeps all five side by side on a phone as well -- measured at 390 its columns are 58px
   wide on flex-basis 18%, one line, and its 16px copy overflows them and collides. The rebuild had
   been stacking them instead, which reads better but is a design change: it was raised as a question
   several times and the instruction to match production exactly came back unchanged, so production's
   layout is what ships. That row is ~414px of the phone-height gap on
   /up-down-crypto-predictions-15min-1h-4h-daily/ on its own.
   .page-entry keeps this off the footer's five-across social row, which is not a content column. */
@media (max-width: 690px) {
  .page-entry .sec__cols:has(> .col.c-1of5) { gap: 0; }
  .page-entry .col.c-1of5 { flex: 0 0 18%; max-width: 18%; }
}
.c-2of5 { flex-basis: calc((100% + var(--gap, 2%)) * .4 - var(--gap, 2%)); }
.c-3of5 { flex-basis: calc((100% + var(--gap, 2%)) * .6 - var(--gap, 2%)); }

/* The column owns its background, border and radius (so they span the full stretched height);
   the inner box is plain block flow, so the margins of adjacent elements collapse exactly as they
   did inside the builder's wrapper. */
.col { isolation: isolate; border-radius: var(--col-r, 0); }
.col__in {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--col-r, 0);
  border: var(--col-bd, 0);
  padding: var(--pt-d, var(--padv)) var(--pr-d, var(--padv)) var(--pb-d, var(--padv)) var(--pl-d, var(--padv));
}

.pad-top .col__in { padding-right: 0; padding-bottom: 0; padding-left: 0; }
.pad-topbottom .col__in { padding-right: 0; padding-left: 0; }
.pad-leftright .col__in { padding-top: 0; padding-bottom: 0; }

@media (max-width: 999px) {
  .col__in { padding: var(--pt-p, var(--padv)) var(--pr-p, var(--padv)) var(--pb-p, var(--padv)) var(--pl-p, var(--padv)); }
  .pad-top .col__in { padding-right: 0; padding-bottom: 0; padding-left: 0; }
  .pad-topbottom .col__in { padding-right: 0; padding-left: 0; }
  .pad-leftright .col__in { padding-top: 0; padding-bottom: 0; }
}

/* Column background layer — a pseudo element so it can be revealed with a clip-path. */
.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--col-bg);
  opacity: var(--col-bg-op, 1);
  pointer-events: none;
}
.shadow-medium_depth::before { box-shadow: 0 30px 60px rgba(0, 0, 0, .15); }

/* Equal-height rows: each column is a flex column and the inner box floats to the middle/bottom. */
.sec--flex > .sec__cols > .col { display: flex; flex-direction: column; }
.sec--flex > .sec__cols > .col > .col__in { flex: 0 0 auto; }
/* Equal-height rows with top-aligned content: the inner box fills the column so anything anchored to
   its bottom (the pricing buttons) lines up across the row. */
.sec--flex:not(.sec--mid):not(.sec--bot) > .sec__cols > .col > .col__in { flex: 1 0 auto; }
.sec--mid > .sec__cols > .col > .col__in { margin-top: auto; margin-bottom: auto; }
.sec--bot > .sec__cols > .col > .col__in { margin-top: auto; }

/* Column media backgrounds. */
.col:has(> .col__video),
.col:has(> .col__bgimg) { overflow: hidden; border-radius: var(--col-r, 0); }
.col__video,
.col__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: var(--col-r, 0);
  background-size: cover;
  background-position: center;
}

/*
 * Crystal ball (AIC token ecosystem section).
 *
 * Production stacks two PNGs in one column (Salient column-image-bg + rotate img):
 *   1. token-presale_ok_new.png — logo + inner glow orb (behind, cover-sized)
 *   2. cc-logo-world.png — rotating wireframe shell (on top, full column width)
 */
.crystal-ball {
  /*
   * No `flex: 0 0 auto; width: 100%` here: this is the c-5 half of a two-column row, and taking the
   * full width made it wrap below the c-7 and stretch to 1260px, adding 1200px to the page
   * (/ai-crypticorn-aic-token/ measured 15989 against production's 14789). Production keeps the two
   * side by side -- its column is 546 wide with a 496px square inner. Letting `.c-5` supply the
   * flex-basis restores that; the aspect-ratio still squares the globe inside it.
   */
  align-self: center;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.crystal-ball > .col__in {
  position: absolute;
  inset: 0;
  padding: 0;
}

.crystal-ball .img--orb,
.crystal-ball .img--globe {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.crystal-ball .img--orb {
  z-index: 1;
}

.crystal-ball .img--orb > img {
  width: 100%;
  height: auto;
  max-width: none;
}

.crystal-ball .img--globe {
  z-index: 2;
}

.crystal-ball .img--globe > img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.sec__cols:has(.crystal-ball) {
  align-items: center;
}

/*
 * Once the row stacks it turns column-reverse (sec--rev-p), so the cross axis is horizontal and the
 * centring above shrink-wraps its items sideways instead of centring them vertically. The crystal
 * ball's only content is the absolutely-positioned .col__in, so it shrank to 0x0 and the two PNGs
 * vanished from the phone layout entirely -- production shows them there as a 320x320 square above
 * the copy. Stretching restores the full width, and aspect-ratio: 1 squares it as it does on desktop.
 */
@media (max-width: 999px) {
  .sec__cols:has(.crystal-ball) { align-items: stretch; }
  .crystal-ball { align-self: stretch; }
}


/* Stacking below the desktop breakpoint. */
@media (max-width: 999px) {
  /* Stays a container gap. Production spaces stacked columns with each column's own bottom margin
     instead, and the two diverge when a row ends in an empty column -- a gap still applies before a
     zero-height item, a margin on the item before it does not -- which is why the "Become one of the
     traders using AI" section on /up-down.../ measures 445 against production's 420, four sections
     on that page carrying the same +25. Swapping to `> .col:not(:last-child) { margin-bottom }` does
     fix those, but a bottom margin on a flex item adds to its LINE, so every row still side by side
     on a phone (the .xs-* ones) grew by the same amount: mobile went +105 on /, +394 on
     /dex-ai-trading/, +151 on /products/, worse on all fourteen. Measured and reverted. Whatever
     replaces this has to distinguish a wrapped column from one sharing its line. */
  .sec__cols { row-gap: var(--stack, 25px); }
  [data-gap="none"] { --stack: 0px; }
  [data-gap="5px"]  { --stack: 5px; }
  [data-gap="10px"] { --stack: 10px; }
  [data-gap="20px"] { --stack: 20px; }
  [data-gap="30px"] { --stack: 30px; }
  [data-gap="40px"] { --stack: 40px; }
  /* No 50px entry: a row's element gutter and the margin its columns take once stacked are separate
     values in the builder, and they only happen to agree for the gaps above. The single row carrying
     a 50px gutter (the $AIC ecosystem row, one element sitewide) stacks its columns on production
     with the ordinary 25px, so it takes the fallback. */
  [data-gap="70px"] { --stack: 70px; }
  /* A row that stacks in reverse takes the builder's plain 25px column margin, not its element
     gutter. Measured on production at 390: every column-reverse row sits 25px apart -- the two
     homepage AI rows, "Everything You Need to Know", "AI Automatic Crypto Trading Agent", the $AIC
     hero and all three "Join Our Community" rows -- while the normal-order rows do take their gutter
     (30px against 30px). The $AIC hero is the expensive one: its 70px gutter put 45px of air between
     the orb and the copy that production does not have, and that offset carried down the page. */
  .sec--rev-p { --stack: 25px; }
  .col { flex: 0 1 100%; }
  .xs-2 { flex-basis: calc((100% + var(--gap, 2%)) * .166667 - var(--gap, 2%)); }
  .xs-3 { flex-basis: calc((100% + var(--gap, 2%)) * .25 - var(--gap, 2%)); }
  .xs-4 { flex-basis: calc((100% + var(--gap, 2%)) * .333333 - var(--gap, 2%)); }
  .xs-6 { flex-basis: calc((100% + var(--gap, 2%)) * .5 - var(--gap, 2%)); }
  .xs-8 { flex-basis: calc((100% + var(--gap, 2%)) * .666667 - var(--gap, 2%)); }
  .xs-12 { flex-basis: 100%; }
  /* Empty (decorative) columns stay in flow on phones, as the original stacked them with their padding. */
}

/* The pre-footer social row keeps production's second line. Its six columns are four icons carrying
   an explicit phone width and two empty ones that do not, so production wraps the empty pair onto a
   line of their own at half width each -- and that line is 26px tall because their empty wrapper
   inherits a 26px line box. Nothing is drawn in it; it is 34px of blank space arising from how the
   row was authored, and it sits above the footer on every page, which is why the rebuild reads ~36px
   short there sitewide. Reproduced rather than tidied away, on the same grounds as the five-across
   row and the "Title" placeholder: the brief is production's layout as it renders.
   :has(> .col.xs-2) picks this row alone -- the other 37 half-width columns on the marketing pages
   sit in rows with no explicit phone widths at all. */
@media (max-width: 690px) {
  .page-entry .sec__cols:has(> .col.xs-2) { row-gap: 8px; }
  .page-entry .sec__cols:has(> .col.xs-2) > .col.c-2:not(.xs-2) { flex-basis: 50%; min-height: 26px; }
}

@media (max-width: 690px) {
  .col {
    margin-top: var(--mt-p, var(--mt, 0));
    margin-bottom: var(--mb-p, var(--mb, 0));
    margin-left: var(--ml-p, 0);
    margin-right: var(--mr-p, 0);
    transform: translate(var(--tx-p, 0px), var(--ty-p, 0px));
  }
}

/* Text alignment utilities. */
.tc { text-align: center; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-l { text-align: left; }
@media (min-width: 1000px) {
  .tc-d { text-align: center; }
  .tl-d { text-align: left; }
}
@media (max-width: 690px) {
  .tc-p, .tc-p .cta-wrap { text-align: center; }
  .tl-p { text-align: left; }
  .ta-c-p { text-align: center; }
  .tc-p .img > img { margin-inline: auto; }
}
.ovh { overflow: hidden; }
.hidden { display: none !important; }
/* A hidden picture inside an el_spacing column still occupied its gap on the original. */
.col[style*="--els"] > .col__in > .img.hidden { display: block !important; height: 0; overflow: hidden; }
.opacity_0 { opacity: 0; }
.opacity_25 { opacity: .25; }
.opacity_50 { opacity: .5; }

@media (min-width: 1000px) {
  .abs-d {
    position: absolute;
    top: var(--post-d, auto);
    right: var(--posr-d, auto);
    bottom: var(--posb-d, auto);
    left: var(--posl-d, auto);
  }
}

/* 4. ELEMENT RHYTHM ========================================================= */

/* The builder wrapped the pre-footer global section in a default row (21px bottom margin), so the
   content ends 21px above the footer -- on the content pages. The five legal pages do not get it:
   measured on /disclaimer/, production runs its column to y=799 and starts the footer at 899, a flat
   100px, where the 21px here pushed staging's to 918 and left every legal page 19px long. They are
   exactly the pages carrying the promoted h1.as-h2 title. */
/* Removed: measured against production this is 21px too much on every content page. Production's
   gap from the last content to the footer block is 30px (/about/ 48, /products/ 5 -- the reference
   element differs, the delta does not); with this padding staging was 51, 69 and 21. It was
   cancelling a deficit elsewhere rather than matching anything. */

/* The base theme spaces migrated paragraphs; rebuilt content carries its own rhythm. */
.page-entry p + p,
.page-entry .wp-block-heading + p { margin-top: 0; }


.col__in > * { margin-bottom: var(--wrap-mb, 0px); --wrap-mb: 0px; }
.col__in > .split,
.col__in > .grad--full { margin-bottom: calc(var(--wrap-mb, 24px) + var(--own-mb, 0px)); --wrap-mb: 24px; }
.col__in > .badge-wrap { margin-bottom: var(--wrap-mb, 24px); --wrap-mb: 24px; }
.col__in > .txt { margin-bottom: var(--wrap-mb, 21px); --wrap-mb: 21px; }
/* 15px, not production's mb=0 on the wrapper itself: production leaves the same 14px between the
   image and the copy below via its text column, so matching the declared margin instead moved every
   card's copy 15px up -- the card text sits at y+262 on production and y+263 here with this value,
   y+247 without it. */
.col__in > .img { margin-bottom: 15px; }
/* The three press-quote cards ("Crypticorn in Press & Media" on /ai-crypticorn-aic-token/) are the
   exception, and they are identifiable: production pairs the logo with a text block pulled up 20px,
   and the transpiler carried that as an inline margin-top:-20px. Exactly three elements sitewide.
   Production's logo wrapper is the image plus 15px (its inner .hover-wrap's own bottom margin, held
   inside the wrapper) and then a 30px margin, so 75px in all against 45 here -- with only 45 the
   quote began 5px ABOVE the logo's bottom edge instead of 25px below it. A further 15px sits below
   the quote inside production's column. Each card measured 45px shorter than production's at both
   1440 and 390 (231 v 186 desktop, 179/245/206 v 134/200/161 phone). */
.page-entry .col__in > figure.img--c:has(+ .txt[style*="margin-top:-20px"]) { padding-bottom: 15px; margin-bottom: 30px; }
/* Keyed off the figure, not the inline margin alone: eleven text blocks on this page carry
   margin-top:-20px, only the three following a centred logo are press cards. The element in the
   selector also lifts it past `.col[style*="--els"] > .col__in > :last-child`, which ties on the
   class column and would otherwise win on order. */
.page-entry .col__in > figure.img--c + .txt[style*="margin-top:-20px"] { margin-bottom: 15px; }
/* The pricing cards carry an empty figure between the price and its rule. Production's equivalent
   wrapper is out of flow -- it reports margin-bottom 10px yet its divider starts at the wrapper's own
   y -- so copying the declared value does not reproduce the layout. Matching where production
   actually paints: its divider sits 15px below the price and the features list at y=768, which 5px
   here lands exactly. Six figures, all on /pricing/. */
.col__in > figure.img.hidden { margin-bottom: 5px; }
.col__in > .icon { margin-bottom: var(--wrap-mb, 5px); --wrap-mb: 5px; }
.col__in > :last-child { margin-bottom: 0; }
/* el_spacing_Npx: the builder's per-column element gap replaces every wrapper margin. */
.col[style*="--els"] > .col__in > * { --wrap-mb: var(--els); }
.col[style*="--els"] > .col__in > :last-child { margin-bottom: 0; }

/* 5. TYPOGRAPHY (read off the original theme's child stylesheet) =========== */

.page-entry p,
.page-entry li { font-size: 1rem; line-height: 1.3rem; color: #555; }
.page-entry p { color: #3f4756 !important; }

.page-entry h1, .page-entry h2, .page-entry h3, .page-entry h4, .page-entry h5, .page-entry h6 {
  font-weight: 500;
  color: #13182b;
  letter-spacing: normal;
}
.page-entry h1 { font-size: 3.7rem; line-height: 4.1rem; margin-bottom: -2px; --own-mb: -2px; }
.page-entry h2 { font-size: 2.6rem; line-height: 3rem; margin-bottom: 1px; --own-mb: 1px; }
.page-entry h3 { font-size: 1.8rem; line-height: 1.9rem; margin-bottom: 8px; --own-mb: 8px; }
/* Split headings deliberately take no line-height of their own. An earlier note here put them
   at 1.2 "on the original", but measuring the live production DOM gives 65.6px on a 59.2px h1
   (1.108), 48px on a 41.6px h2 (1.154) and 30.4px on a 28.8px h3 (1.056) -- e.g. the h3
   "Official Partnerships" and the h2 "Frequent Asked Questions" on the homepage. Those are
   exactly the values the .page-entry h1/h2/h3 rules above already set, so the override only
   moved 57 headings off production. It changed line breaking too: "Be the First to know the /
   Trend" came out as "Be the First to / know the Trend". */
/* A promoted document title: h1 for the outline, the original h2 look. */
/* Production's legal-page title sits in a split-heading wrapper carrying 24px below it; the
   promoted h1 here had 1px, so the body copy started 23px high on /privacy-policy/, /cookies-policy/,
   /disclaimer/ and /terms-of-service/. /terms-of-sale/ is unaffected: its first child is an h3 whose
   own 30px top margin collapses with this one, and 30 > 24. Only these five pages use as-h2. */
.page-entry h1.as-h2 { font-size: 2.6rem; line-height: 3rem; margin-bottom: 24px; --own-mb: 24px; }
/* Extra h1s the builder used (device variants, stat figures) are h2s with the h1 look. */
.page-entry h2.as-h1 { font-size: 3.7rem; line-height: 4.1rem; margin-bottom: -2px; --own-mb: -2px; }
.page-entry h4,
.page-entry h6 { font-size: 1.1rem; line-height: 1.25rem; margin-bottom: 15px; --own-mb: 15px; }
.page-entry h5 { font-size: .9rem; line-height: 1.1rem; font-weight: 700; letter-spacing: 2px; }

.page-entry .bold { font-weight: 700; }
.accent-h4 h4, .accent-h3 h3 { color: #003bce; }
.blue-strong strong { color: #003bce; }
.page-entry .hero p { font-size: 1.2rem; line-height: 1.5rem; }
.page-entry p.split.pad { padding-bottom: 1.5em; } /* a paragraph the builder stacked before another in one wrapper */
.page-entry a { color: #003bce; }

/* The original scales headings with the viewport (Salient's responsive typography): laptops up to
   1300px, tablets to 999px and phones to 690px each get fixed pixel sizes; paragraphs stay
   1rem/1.3rem. Only h1-h3 scale -- measured on production, h4 stays 17.6px/20px and h5 stays
   14.4px/17.6px at 1440, 1200 and 390 alike, so neither takes a responsive override here. */
/* h1.as-h2 scales on the h2 ramp, not the h1 one: it is an h2 promoted to h1 for the outline, and
   production renders the legal-page title at the h2 size at every width -- 41.6px at 1440 and 25.5px
   at 390. Grouping it with h1 here left it at 35.1px on a phone, a 42px line box against
   production's 32, which is the +10 the five text pages carried at 390 once their column padding and
   footer were corrected. Desktop was unaffected because the base rule already sets 2.6rem. */
@media (max-width: 1300px) {
  .page-entry h1, .page-entry h2.as-h1, .page-entry .merged > .grad--h1 { font-size: 40.5px; line-height: 45px; }
  .page-entry h2, .page-entry h1.as-h2, .page-entry .merged > .grad--h2 { font-size: 28.9px; line-height: 35.7px; }
  .page-entry h3, .page-entry .merged > .grad--h3 { font-size: 18.7px; line-height: 27.2px; }
  .page-entry h6 { font-size: 14px; line-height: 24px; }
}
@media (max-width: 999px) {
  .page-entry h1, .page-entry h2.as-h1, .page-entry .merged > .grad--h1 { font-size: 37.8px; line-height: 42px; }
  .page-entry h2, .page-entry h1.as-h2, .page-entry .merged > .grad--h2 { font-size: 27.2px; line-height: 33.6px; }
  .page-entry h3, .page-entry .merged > .grad--h3 { font-size: 17.6px; line-height: 25.6px; }
}
@media (max-width: 690px) {
  .page-entry h1, .page-entry h2.as-h1, .page-entry .merged > .grad--h1 { font-size: 35.1px; line-height: 39px; }
  .page-entry h2, .page-entry h1.as-h2, .page-entry .merged > .grad--h2 { font-size: 25.5px; line-height: 31.5px; }
  .page-entry h3, .page-entry .merged > .grad--h3 { font-size: 17.6px; line-height: 25.6px; }
  .page-entry .h2-visual { font-size: 25.5px; line-height: 31.5px; margin-bottom: 0; }
  .page-entry .h3-visual { font-size: 17.6px; line-height: 25.6px; }
  .page-entry .post-grid .card .card__title { font-size: 17.6px; line-height: 32px; }
  .page-entry .crypticorn-about-founder__media { max-width: 220px; }
  .page-entry .crypticorn-about-founder__avatar { width: 220px; max-width: 100%; }
  /* No phone override for the question itself: production holds it at 18px/24px, weight 300,
     #2e3545 at 390 exactly as at 1440. Taking it to 17.6px/500/#13182b here made it heavier and
     darker than production's. */
  .page-entry .faq .faq__item .faq__q { padding: 30px 100px 30px 30px; }
}
/* Columns the builder marked "ico-page" keep the desktop heading sizes on every viewport --
   confirmed at 390px, where production holds "Our Pricing" at 59.2px and "Our Mission & Team"
   at 41.6px. It does not hold for h3: production takes "Featured in" and "Official
   Partnerships" down to 17.6px/25.6px like any other h3, so h3 is left out. Note this block
   sits at max-width:1300px but outranks the 999px and 690px rules on specificity, so an entry
   here pins the size at every width below 1300, not just laptops. */
@media (max-width: 1300px) {
  .page-entry .ico-page h1, .page-entry .ico-page h2.as-h1 { font-size: 3.7rem; line-height: 4.1rem; }
  .page-entry .ico-page h2 { font-size: 2.6rem; line-height: 3rem; }
}

/* Headings promoted to close an outline gap keep their authored size. */
.page-entry .h2-visual { font-size: 2.6rem; line-height: 3rem; margin-bottom: 1px; --own-mb: 1px; }
.page-entry .h3-visual { font-size: 1.8rem; line-height: 1.9rem; margin-bottom: 8px; --own-mb: 8px; }
.page-entry .h4-visual, .page-entry .h6-visual { font-size: 1.1rem; line-height: 1.25rem; margin-bottom: 15px; }
.page-entry .h5-visual { font-size: .9rem; line-height: 1.1rem; font-weight: 700; letter-spacing: 2px; }
@media (max-width: 500px) {
  .page-entry .h2-visual { font-size: 1.55rem; line-height: 1.9rem; margin-bottom: 0; }
  .page-entry .h3-visual { font-size: 1.4rem; line-height: 1.4rem; }
  .page-entry .h4-visual, .page-entry .h6-visual { font-size: 1.1rem; line-height: 1.45rem; }
}

/* Headings: the split-heading is the plain one, the gradient span is the second line. */
.split { display: block; }
/* Production wraps each line of a split heading in its own span for the reveal, and those spans are
   the font's natural 1.2em line box rather than the CSS line-height: 71px against 65.6 on the h1
   heroes, 50 against 48 on h2, 35 against 30.4 on h3, 21 against 20 on h4. Every multi-line split
   heading was therefore tighter than production's -- the /up-down…/ hero by 27px over five lines.
   The gradient half keeps its own line-height, which production also paints at 66px.
   Headings only: production's split paragraphs keep the body's 20.8px line-height, so applying 1.2
   to every .split shortened the step-card copy on /ai-trading-agents/ from 62px to 58.
   h5 is excluded: it is the small-caps eyebrow ("IT REALLY WORKS", "FEATURES AND BENEFITS"), and
   production keeps it at the 1.1rem/17.6px of the base h5 rule whether it is split or not -- measured
   17.6px on all nine eyebrows across six pages. 1.2 gave 17.28px, an 18px box against production's
   17px, which is half of the ~7.3px each eyebrow was losing. */
.page-entry :is(h1, h2, h3, h4, h6).split { line-height: 1.2; }
/*
 * ...but 1.2em is a floor, not the value: a split heading's box is the LARGER of its own responsive
 * line-height and the 1.2em of those spans. At 1440 the spans win everywhere (h3's 34.56 over a
 * 30.4 ramp) and the flat rule matched production's boxes exactly, which is why it read as correct.
 * Below the desktop scale the ramp overtakes them for h2 and h3 and it stopped matching: measured at
 * 390, production's h3 box is 26px against 21 here on 52 headings and 51 against 42 on 4 more, its
 * h2 boxes 32/63/95 against 31/61/92 on 8 -- the four $AIC incentive cards each lost 13px this way.
 * h1 and h4 need nothing at any width; their 1.2em is always the larger and their boxes already
 * match. These have to sit after the rule above, not inside the responsive blocks where the ramp is
 * set: `.page-entry h3.split` and `.page-entry :is(...).split` are both (0,2,1), so it comes down to
 * order, and from up there they lost.
 */
@media (max-width: 1300px) {
  .page-entry h2.split, .page-entry h1.as-h2.split { line-height: max(1.2em, 35.7px); }
  .page-entry h3.split { line-height: max(1.2em, 27.2px); }
}
@media (max-width: 999px) {
  .page-entry h2.split, .page-entry h1.as-h2.split { line-height: max(1.2em, 33.6px); }
  .page-entry h3.split { line-height: max(1.2em, 25.6px); }
}
@media (max-width: 690px) {
  .page-entry h2.split, .page-entry h1.as-h2.split { line-height: max(1.2em, 31.5px); }
  .page-entry h3.split { line-height: max(1.2em, 25.6px); }
}
/* The other half: production's split-heading h5 carries margin-bottom 7px (a plain h5 carries none).
   Where the eyebrow stands alone that is its own bottom margin; where it is merged with a gradient
   line the 7px sits between the two, so it has to move onto the gradient span, composing with the
   24px already there and with the --els:0px columns that zero that 24. */
.page-entry h5.split { --grad-mt-extra: 7px; }
.page-entry .col__in > h5.split:not(.merged) { --own-mb: 7px; }
.split__cap { display: inline-block; vertical-align: top; }
.page-entry .grad {
  color: #2ac4ea;
  background-image: linear-gradient(to right, #003bce, #2ac4ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.merged > .grad { font-size: inherit; line-height: inherit; font-weight: inherit; }
.page-entry .grad--diag { background-image: linear-gradient(to bottom right, #003bce, #2ac4ea); }
/* A gradient line inside a merged heading keeps the scale of the level it was authored at. */
.page-entry .merged > .grad { display: block; width: fit-content; margin-top: calc(24px + var(--grad-mt-extra, 0px) + var(--mt, 0px)); margin-bottom: var(--mb, 1px); }
/*
 * Production paints each gradient heading on an inline-block, so #003bce -> #2ac4ea runs across the
 * glyphs exactly (measured: the text starts at fraction 0.00 of its box and ends at 1.00). A
 * block-level span instead spans the whole column and the glyphs reveal only a slice: "Different?"
 * showed the first 39% and never reached cyan, and centred headings such as "Testimonials" began
 * mid-gradient at rgb(78,142,225) rather than #003bce. Shrink-wrapping restores the mapping.
 * A shrink-wrapped block is placed by its margins rather than by text-align, so the centred variants
 * need auto margins to stay where they were; these mirror the alignment utilities above, including
 * their breakpoints.
 */
.page-entry :is(.tc, .ta-c) .merged > .grad,
.page-entry .merged:is(.tc, .ta-c) > .grad { margin-inline: auto; }
.page-entry .merged.ta-l > .grad { margin-inline: 0; }
@media (min-width: 1000px) {
  .page-entry .tc-d .merged > .grad,
  .page-entry .merged.tc-d > .grad { margin-inline: auto; }
  .page-entry .tl-d .merged > .grad,
  .page-entry .merged.tl-d > .grad { margin-inline: 0; }
}
@media (max-width: 690px) {
  .page-entry :is(.tc-p, .ta-c-p) .merged > .grad,
  .page-entry .merged:is(.tc-p, .ta-c-p) > .grad { margin-inline: auto; }
  .page-entry .tl-p .merged > .grad,
  .page-entry .merged.tl-p > .grad { margin-inline: 0; }
}
.col[style*="--els:0px"] .page-entry .merged > .grad,
.col[style*="--els:0px"] > .col__in > .merged > .grad { margin-top: calc(var(--grad-mt-extra, 0px) + var(--mt, 0px)); }
.merged > .grad--h1 { font-size: 3.7rem; line-height: 4.1rem; }
/* The /ai-trading-agents/ hero is the only gradient span not inside a .merged heading, so neither
   ".merged > .grad" nor the modifier above reaches it and ":is(h1..h6) .grad" leaves it at --fs-h2:
   41.6px inside a 59.2px h2.as-h1. Production renders that line at the heading's own size, which is
   what wraps it to "For Passive / Monthly Profits" instead of one long line. Inheriting rather than
   restating 3.7rem keeps it on the h1 responsive scale at 1300/999/690 automatically.
   Scoped to a .grad--h1 that is the CHILD of a heading: /pricing/ has a standalone
   h1.grad.grad--full.grad--h1 whose parent is a plain div, and an unscoped ":not(.merged) >" made it
   inherit the column's 16px -- 84x21 against production's 314x66. */
.page-entry :is(h1, h2, h3, h4, h5, h6):not(.merged) > .grad--h1 { font-size: inherit; line-height: inherit; }
.merged > .grad--h2 { font-size: 2.6rem; line-height: 3rem; }
.merged > .grad--h3 { font-size: 1.8rem; line-height: 1.9rem; }
.merged > .grad--h4 { font-size: 1.1rem; line-height: 1.25rem; }
/* When the gradient opens the heading, the plain text sits on its own line below it. */
.page-entry .merged > .grad--lead { margin-top: 0; margin-bottom: 25px; }
.col[style*="--els:0px"] > .col__in > .merged > .grad--lead { margin-bottom: 1px; }

.grad--full { display: block; }

/* 6. TEXT COLUMN ============================================================ */

.txt > :last-child { margin-bottom: 0; }
.txt > h2 { margin-bottom: 1px; }
/* The original skin pads every paragraph 1.5em below except the last in its column. */
.page-entry :is(.txt, .fancy, .fancy li, .faq__a) p:not(:last-child) { padding-bottom: 1.5em; }
.page-entry .fancy > p { margin: 0; }
.page-entry .fancy > ul { margin-bottom: 30px; }
.page-entry .fancy > blockquote { margin: 0 0 30px; padding: 0 0 0 1.8em; font-size: 22px; font-weight: 300; }
.txt img { height: auto; max-width: 100%; }
.el-text p { padding-bottom: 24px; }
.el-text p:last-child { padding-bottom: 0; }
.el-heading strong, .el-text strong { color: #003bce; }
.txt ul, .txt ol { margin: 0 0 30px; padding-left: 30px; }
/* A list nested inside a list item gets no bottom margin on production -- the outer list carries on
   straight after it. The 30px above pushed everything below the nested list on /terms-of-service/
   down by 30px from section 5 onwards. */
.txt li > ul, .txt li > ol { margin-bottom: 0; }
/* Rules inside documents are browser-default rules on the original (two-tone 2px line, 8px margins). */
.page-entry .txt hr { margin: .5em 0; border: 1px inset; height: 0; background: none; }

/* 7. FANCY LIST ============================================================= */

.fancy { line-height: 1.3; font-size: max(var(--fs-min, 1rem), var(--fs-d, 1rem)); }
.fancy ul { list-style: none; margin: 0; padding: 0; }
.fancy li { position: relative; padding-left: 38px; margin-bottom: var(--sp, 0px); line-height: 1.3em; }
/* Production does not zero the last item's margin: measured across every multi-item list on
   /ai-trading-agents/, / and /ai-crypticorn-aic-token/, the last item always carries the same
   bottom margin as the one before it (25px, 20px, or 0 where the list has no spacing at all). */
/* The skin gives the list itself a 30px bottom margin (see `.fancy > ul` above) and nothing to the
   wrapper, so the gap below a list block is whatever its own last child contributes, collapsed
   through the wrapper. Forcing 30px onto the wrapper instead was right only for the common case.
   Where the block ends in a paragraph rather than the list -- `.fancy > p` has margin 0 -- production
   leaves no gap at all, and the forced 30px made /dex-ai-trading/'s intro column 570px against
   production's 540px, carrying +30 down the rest of that page. Measured across all 14 marketing
   pages, the trailing gap below a column-final list block is 30px everywhere except /dex-ai-trading/,
   where it is 0; letting it collapse reproduces both without a special case. So no rule here: the
   generic `.col__in > *` margin applies, and the inner list's own margin collapses through it. */
.fancy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 20px;
  height: 20px;
  color: #003bce;
  background: currentColor;
  -webkit-mask: var(--mark) center / 14px 14px no-repeat;
  mask: var(--mark) center / 14px 14px no-repeat;
}
.fancy--check li::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5 6 12 13.5 4'/%3E%3C/svg%3E"); }
.fancy--dash li::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M2 8h12'/%3E%3C/svg%3E"); }
/* Production gives the h4 in these list items 15px, not the 8px its h3 gets: each item ran 70px
   against production's 77, and the pages carry 28 of them (19 on /ai-crypticorn-aic-token/, 6 on
   /dex-ai-trading/, 3 on /ai-trading-agents/), so the rows drifted ~7px further apart with each one.
   The h3 half is right at 8px -- production measures 8px on the homepage's li > h3. */
.fancy li > h3 { margin-bottom: 8px; }
.fancy li > h4 { margin-bottom: 15px; }
.fancy li > p { color: #3f4756; }
.fancy li > p:not(:last-child) { padding-bottom: 1.5em; }
.fancy__title { margin-bottom: 15px; }
.fancy--anim li { opacity: 0; transform: translateX(-20px); transition: opacity .6s ease, transform .6s ease; }
.fancy--anim.is-revealed li { opacity: 1; transform: none; }
.fancy--anim.is-revealed li:nth-child(2) { transition-delay: .1s; }
.fancy--anim.is-revealed li:nth-child(3) { transition-delay: .2s; }
.fancy--anim.is-revealed li:nth-child(4) { transition-delay: .3s; }
.fancy--anim.is-revealed li:nth-child(5) { transition-delay: .4s; }
.fancy--anim.is-revealed li:nth-child(6) { transition-delay: .5s; }

/* 8. CTA BUTTON ============================================================= */

.cta-wrap { display: block; height: 37px; line-height: 0; font-size: 14px; }
.cta-wrap > .cta { margin-top: -16px; vertical-align: top; }
.cta-wrap--inline { display: inline-block; }
/* A button the builder wrapped in an h3: the heading's line box (44px) plus its 8px margin. */
.cta-wrap--h3 { box-sizing: border-box; height: 52px; padding-bottom: 8px; }
/* Block display: a full-width 60px pill with centred text, in a 75px line box. */
.cta-wrap--block { height: 75px; }
.cta-wrap--block > .cta { display: flex; width: 100%; box-sizing: border-box; height: 60px; margin-top: 0; padding-top: 0; padding-bottom: 0; align-items: center; justify-content: center; }
.cta-wrap.abs-d { position: absolute; }
/* The h3 this button was wrapped in also gave it the heading's weight; flattening the heading lost
   it. Production renders this label at 500 and every other CTA on the site at 400 -- it is the only
   cta-wrap--h3 on the marketing pages, so the weight belongs here rather than on .cta. */
.cta-wrap--h3 > .cta { margin-top: -9px; font-weight: 500; }
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  /* Production's box: 15px padding + a 2px border + a 21px content box = 55px, with the border in
     the fill colour so it reads as part of the pill. Reproducing that model rather than emulating
     its total matters because the transpiler passes production's own padding through --btn-pad:
     with 17.5px/no-border the defaults happened to reach 55, but "Subscribe Now" (--btn-pad:15px
     30px) came out at 50 against production's 55, and every pill was 4px narrower. */
  padding: var(--btn-pad, 15px 25px);
  border: 2px solid #003bce;
  border-radius: 165px;
  background: #003bce;
  color: #fff;
  font-size: 1.1rem;
  line-height: 21px;
  font-weight: 400;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
  overflow: hidden;
  /* Salient's .link_wrap is display:inline and so is not capped by its column -- measured on
     production, "Read our Whitepaper" runs to 267px in a 262px box on /ai-crypticorn-aic-token/ and
     "Get DEX AI Signals Now" to 291px in a 275px box on /dex-ai-trading/. This inline-flex button
     was capped instead, so both wrapped to two lines and grew to 75px where production keeps a
     55px one-liner. 20px covers both overspills; every other CTA on the marketing pages sits well
     inside its box and is unaffected. The viewport bound keeps a long label from running off the
     side of the screen. */
  width: max-content;
  max-width: min(calc(100% + 20px), calc(100vw - 40px));
}
.page-entry .cta, .page-entry .cta:hover { color: #fff; }
.cta:hover { background: #0033a0; border-color: #0033a0; }
.cta__line {
  display: block;
  width: 25px;
  height: 1px;
  margin-right: 15px;
  background: currentColor;
  transform-origin: left;
  transition: transform .45s cubic-bezier(.23, .46, .4, 1), opacity .45s;
}
.cta__text { display: block; transition: transform .45s cubic-bezier(.23, .46, .4, 1); }
/* Production gives this one label a 10px right margin its other whitepaper buttons do not have:
   span.text computes margin 0 10px 15px 0 here against 0 0 15px on /ai-crypticorn-aic-token/, so the
   pill is 277px where the others are 267px. It is the only /crypticorns-technology link on the site. */
.cta[href*="crypticorns-technology"] .cta__text { margin-right: 10px; }
.cta__arrow {
  position: absolute;
  left: 25px;
  top: 50%;
  width: 6px;
  height: 10px;
  transform: translate(-6px, -50%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.23, .46, .4, 1) .1s, opacity .3s .1s;
}
.cta:hover .cta__line { transform: scaleX(0); opacity: 0; }
.cta:hover .cta__text { transform: translateX(-28px); }
.cta:hover .cta__arrow { transform: translate(0, -50%); opacity: 1; }
.cta:hover .cta__arrow { left: auto; right: 25px; transform: translate(0, -50%); }
.cta:focus-visible { outline: 2px solid #003bce; outline-offset: 3px; }

/*
 * Salient's .link_wrap is display:inline, so the pill's padding paints outside the line box and the
 * wrapper only ever occupies the label's own lines. Measured across all 30 CTAs on the marketing
 * pages at 390: a one-line label (20px) gives a 35px wrapper with the 55px pill starting 18px above
 * it, a two-line label (40px) gives a 55px wrapper with the pill starting 2px below. Both reduce to
 * `height = label + 15` and `margin-top = label - 38`, i.e. the pill's bottom edge always sits 2px
 * under the wrapper's. Releasing the height to auto here instead let the 55px pill set the height,
 * so every single-line button on a phone occupied 20px more than production's and sat 18px lower.
 * --cta-lbl is measured per button by initCtaLabels() in rebuild.js, because the line count depends
 * on where the label wraps and CSS cannot see that; the 20px default is the single-line case, which
 * is 23 of the 30, so the layout stays right if the script never runs.
 */
@media (max-width: 500px) {
  .cta-wrap { height: calc(15px + var(--cta-lbl, 20px)); }
  .cta-wrap > .cta { margin-top: calc(var(--cta-lbl, 20px) - 38px); }
  /* The pricing pill keeps its own block geometry: production measures 75/60 with no offset. */
  .cta-wrap--block { height: 75px; }
  .cta-wrap--block > .cta { margin-top: 0; }
}

@media (max-width: 500px) {
  .cta { font-size: .95rem; line-height: 1.1rem; justify-content: center; }
  .fs-p-14 .cta { font-size: .95rem; }
  /* The dash and arrow stay on phones: production shows them at 390px, and the 40px indent the
     dash sits in is what sets the button's width. Hiding them made every mobile CTA exactly 40px
     narrower than production (346->306, 328->274, 311->271, 287->247).

     Production's pill is a fixed 55px whether the label runs to one line or two -- "Explore
     Prediction Dashboard" and "Explore Up/Down Predictions" both wrap at 390px and both stay 55px,
     with the two 20px lines centred inside. Staging's inline-flex box grew to 75px instead, so pin
     the height and let align-items centre the label the same way. */
  .cta {
    height: 55px;
    /* Salient's .link_wrap is display:inline, so it is not capped by the column's content box --
       "Explore AI Trading Agents" runs to 311px and "Get Access to Crypticorn Now" to 346px inside
       a 274px box, spilling into the column's 34.5px padding either side. The rebuild's inline-flex
       button is capped at 274px instead, so every label wrapped to two lines where production keeps
       most on one. Allow the same overspill: max-content, up to 54px past the content box.

       54px is measured, not the 69px of column padding: production wraps "Explore Prediction
       Dashboard" and "Explore Up/Down Predictions" at 328px in a 274px column and leaves "Explore
       AI Trading Agents" (311), "Explore DEX AI Trading" (287) and "Get Access to Crypticorn Now"
       (346, wider column) on one line. 274 + 54 = 328 reproduces all five.

       The viewport bound was added because /dex-ai-trading/ put a CTA in a container 30px wider
       than production's, so +54px overshot to 405px. That container now takes Salient's 15px gutter
       like production's, so +54px lands on production's 375px by itself and the old 100vw - 40px cap
       (350px at 390) was cutting 25px off the pill. Kept only as a bound against a label running off
       the side of the screen, set clear of the widest pill production actually paints. */
    width: max-content;
    max-width: min(calc(100% + 54px), calc(100vw - 15px));
  }
}

/* 9. IMAGES ================================================================= */

.img { margin: 0; line-height: 0; }
/* A percentage width ("max-width: 75%") sized the picture inside the wrapper, whose own margins stay. */
.img > img {
  display: block;
  height: auto;
  max-width: var(--mw, 100%);
  border-radius: var(--r, 0);
}
/* A fixed-width image ("custom-width-5vw") sizes the figure, and the image fills it. */
.img[style*="--w"] { width: var(--w); max-width: none; }
.img[style*="--w"] > img { width: 100%; max-width: none; }
/* The 32px feature icons paint at 43px on the original. */
.img > img[width="32"] { width: 43px; }
.img--c > img { margin-inline: auto; }
/* A centred wrap wider than its column (150%, 175%) overflows both sides equally, like the builder's
   inner wrap; whatever sits inside stays centred in it (a small icon keeps its place). */
.img--c[style*="--mw:1"]:not([style*="--mw:100%"]) { width: var(--mw); max-width: none; margin-left: calc((100% - var(--mw)) / 2); }
.img--c[style*="--mw:1"]:not([style*="--mw:100%"]) > img { max-width: 100%; margin-inline: auto; }
.img--c { margin-inline: auto; }
.img--r > img { margin-left: auto; }
.img--circle > img { border-radius: 50%; object-fit: cover; aspect-ratio: 1; }
/* The DEX signal cards' token logo is sized by its column on production, not by a fixed width: it
   comes out 91.53px against the 100px the transpiler wrote inline, so each card row ran 9px tall and
   the page drifted 46px over nine of them. Nine figures, all on /dex-ai-trading/. */
.page-entry figure.img--circle[style*="--w:100px"] { width: 91.53px; }

/* Team cards on /ai-crypticorn-aic-token/. Production builds each one from separate Elementor
   widgets, so the parts carry the widgets' own margins; the transpiled version stacks them in one
   column and the spacing collapsed. Measured against production, image->name was 46px against 60,
   name->role -7px against 5 and role->bio 1px against 25.

   Scoped on the direct-child structure rather than .img--circle alone: the DEX token cards on
   /dex-ai-trading/ use that class too, but they carry an h3 and a .cta-wrap with no h4 and no
   .el-text, so requiring both a figure and an h4 child separates them. */
/* Matching those three gaps still left each card 15px taller than production's (489 -> 504,
   measured off the painted card, and the same +15 on all seven). The overshoot is in two margins:
   production runs 25px from the image's bottom edge to the spacer and 26px from the name's top to
   the role block, where 29 and 37 gave 29 and 37. */
.page-entry .col__in:has(> figure.img--circle):has(> h4) > figure.img--circle { margin-bottom: 25px; }
.page-entry .col__in:has(> figure.img--circle):has(> h4) > h4 { margin-bottom: 26px; }
.page-entry .col__in:has(> figure.img--circle):has(> h4) .el-text + .el-text { margin-top: 24px; }
/* No phone override: production's card is the same at 390 as at 1440 -- image bottom to spacer 25px,
   name top to role block 26px, wrapper 414px throughout. The 13px here was chasing a gap reading
   that paired the wrong element (production's name exists as both a 36px split-heading wrapper and
   a 21px h4), and left the card 12px short on a phone. */
.img--rotate > img { animation: cc-rotate 12s linear infinite; }
.img > img.bn { filter: grayscale(1); transition: filter .3s ease; }
.img > img.bn:hover { filter: none; }
@keyframes cc-rotate { to { transform: rotate(360deg); } }

/* Wider-than-column images ("150%") bleed to the right. */
.img[style*="--mw:150%"] { max-width: 150%; width: 150%; }
.img[style*="--mw:150%"] > img { max-width: 100%; }

@media (max-width: 999px) {
  /* width follows --mw-p too, not just max-width: with `width: auto` the figure shrinks to its
     content and the phone bleed never happens. The tablet mock on
     /ai-crypto-price-prediction-dashboard/ carries --mw-p:175% and rendered 304px against
     production's 532 -- exactly 1.75x, at 999, 768, 690, 500 and 390 alike. Only two figures on the
     site set --mw-p (this one and the 150% backtest laptop), so nothing else changes: without the
     variable this still resolves to `auto`. */
  .img { max-width: var(--mw-p, 100%); width: var(--mw-p, auto); }
  /* Respect the transpiler's phone value instead of forcing 100%. The rule above already reads
     --mw-p; this one overrode it, so the backtest laptop on /ai-trading-agents/ -- the only
     non-centred 150% image on the site, and one that carries --mw-p:150% -- dropped to the column
     width below 999px. Production keeps the bleed at every width: measured 1.5x staging at 999,
     768, 690, 500 and 390 (515px against 343px on a phone), and identical above 999. */
  .img[style*="--mw:150%"] { max-width: var(--mw-p, 100%); width: var(--mw-p, 100%); }
  .img--c[style*="--mw:1"]:not([style*="--mw:100%"]) { width: 100%; max-width: 100%; margin-left: 0; }
}
@media (max-width: 690px) {
  .img[style*="--w-p"] { width: var(--w-p); max-width: none; }
  .img[style*="--w-p"] > img { width: 100%; max-width: none; }
  .img { margin-left: var(--ml-p, 0) !important; margin-right: var(--mr-p, 0) !important; margin-top: var(--mt-p, 0); transform: translate(var(--tx-p, 0px), var(--ty-p, 0px)); }
  .img--c { margin-inline: auto !important; }
}

.wrap-link { display: block; color: inherit; text-decoration: none; }

/* 10. SPACERS & RULES ======================================================= */

.sp { height: var(--h, 20px); }
@media (max-width: 690px) {
  .sp { height: var(--h-p, var(--h, 20px)); }
}
.rule { height: 1px; border: 0; background: rgba(0, 0, 0, .12); }
@media (max-width: 690px) {
  .rule[style*="--h-p"] { margin-block: calc(var(--h-p) / 2) !important; }
}

/* 11. BADGES ================================================================ */

.badge-wrap { display: block; margin: 0; line-height: 0; }
.page-entry .badge {
  display: inline-block;
  line-height: 1;
  border-radius: 20px;
  padding: .65em 1.25em;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: normal;
  text-transform: none;
  background: var(--bg, none);
}
.page-entry .badge--grad { background: linear-gradient(to right, #003bce, #2ac4ea); }
.page-entry .badge--tint { background: #f1f3fc; }
.page-entry .badge--white { background: #fff; }
.page-entry .badge--accent { background: #003bce; }
.page-entry .badge--ink { background: #13182b; }
.page-entry .badge--sm { padding: .5em 1em; }
.page-entry .badge--lg { padding: .8em 1.6em; }
.page-entry .badge--p0 { padding: 0; }
.page-entry .badge--body { font-size: 14px; font-weight: 400; }
.page-entry .badge--h3 { font-size: 1.1rem; font-weight: 300; }
.page-entry .badge--italic { font-style: italic; font-weight: 400; font-size: 14px; }
.page-entry .badge--label { font-size: .875rem; font-weight: 600; }
.badge-wrap.abs-d { position: absolute; }

/* 12. LOGO TICKER =========================================================== */

.ticker { overflow: hidden; width: 100%; line-height: 0; }
.ticker__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: cc-ticker 40s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
/* Each cell is the carousel's column padding around a picture wrap that keeps its 15px hover margin;
   cells stretch to the tallest one and their content stays at the top, as the original laid it out. */
.ticker__cell { flex: 0 0 auto; padding: var(--cp, 10px); margin: 0 20px; }
.ticker__cell .img { margin: 0 0 15px; }
@keyframes cc-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker__cell:nth-child(n+8) { display: none; }
}

/* 13. CAROUSEL (roadmap) ==================================================== */

.carousel { overflow: hidden; }
/* 40px, not 20: production's roadmap cards measure 610px wide with 40px between them inside the
   same 1260px track, where these were 620/20. The carousel is used only by that one section, so the
   gap can carry production's value directly. */
.carousel__track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.carousel__cell {
  flex: 0 0 calc((100% - 40px * (var(--cols, 2) - 1)) / var(--cols, 2));
  scroll-snap-align: start;
  background: var(--cell-bg, transparent);
  border-radius: var(--r, 0);
}
/* The builder gave the roadmap cards 28.8px of inner padding; the rebuild's default column padding
   is 24.9px, which left their content 8px wider and the cards 8px shorter than production's. Every
   other column on /, /ai-crypticorn-aic-token/ and /ai-trading-agents/ already matches (27, 47 and
   25 of them), so this is scoped to the carousel rather than changing the default. */
.page-entry .carousel__cell .col__in { padding: 28.8px; }
/* The exchange cards under "Working Only with Trusted Crypto Exchanges" came out of the transpiler
   with --col-bg:#ffffff, but production fills all five with #f1f3fc -- sampled from a screenshot at
   each card in turn, they read (242,244,252) and (247-248,...) for the two the COMING SOON overlay
   dims. Staging painted them pure white, so on screen only the two cards that also carry a 2px
   #f1f3fc border showed as cards at all and the other three looked like bare logos on the page.

   `.col.c-6.xs-6` carrying --col-bg:#ffffff occurs on no other page: the footer's c-6 columns set no
   background, and the white-column check across the marketing pages found production genuinely
   painting white for every other one. */
/* Overriding ::before rather than --col-bg: the variable is set inline on the column, and an inline
   custom property beats any stylesheet rule short of !important. .has-bg::before is what paints. */
.page-entry .col.c-6.xs-6[style*="--col-bg:#ffffff"]::before { background: #f1f3fc; }

@media (max-width: 999px) { .carousel__cell { flex-basis: 100%; } }
/* Below the tablet breakpoint production stops showing a whole card and lets the neighbours peek:
   its cell is 80% of the viewport from 481 to 690 and 90% at 480 and below, measured by bisection
   (480 -> 380/422, 481 -> 339/423). A full-width cell here made the roadmap copy 32px wider than
   production's on a phone -- 286 against 254 -- so every entry wrapped onto fewer lines and the six
   roadmap cards came out 19, 39, 60, 101, 18 and 18px short. Above 690 the two builds already
   agree (100% at 700, 48% from 1000). */
@media (max-width: 690px) { .carousel__cell { flex-basis: 80%; } }
@media (max-width: 480px) { .carousel__cell { flex-basis: 90%; } }

/* 14. FAQ TOGGLES =========================================================== */

.page-entry .faq { max-width: none; }
.page-entry .faq__a { padding: 20px 30px; }
.page-entry .faq__item .faq__q .faq__h { font-size: 18px; line-height: 24px; font-weight: 300; color: #2e3545; }
.page-entry .faq__item {
  background: #fff;
  border: 0;
  border-radius: 15px;
  padding: 0;
  margin-bottom: 10px;
}
.page-entry .faq__q {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  /* Production insets the question text 30px on the left and 100px on the right (its card pads 30px
     and the question anchor adds 70px), giving a 1130px text box at 1440 and 213px at 390. The
     narrower right inset here let questions run a line shorter than production's. */
  padding: 30px 100px 30px 30px;
  margin: 0;
}
.page-entry .faq__q::-webkit-details-marker { display: none; }
.page-entry .faq__h {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #2e3545;
}
.page-entry .faq__q::before,
.page-entry .faq__q::after { content: ""; position: absolute; }
/* Production's toggle is a 30px ring with a 14px plus inside, 2px strokes in #2e3545, its right edge
   50px in from the card -- identical at 1440 and 390. Measured off the painted pixels: the ring runs
   287..316 with 2px edges and the plus bar 295..308. */
.page-entry .faq__q::before {
  right: 50px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border: 2px solid #2e3545;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform .3s ease;
}
.page-entry .faq__q::after {
  /* Centred in the ring above: 50px + (30 - 14) / 2. */
  right: 58px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  /* theme.css styles a bare `.faq__q::after` for FAQs outside .page-entry (only page.php uses that
     wrapper, so that rule is still live for blog content). It sets border, border-radius and
     margin-right, none of which this rule replaced, so its 1px grey ring and 18px offset leaked in
     and painted a second small circle beside the real one. Reset them explicitly. */
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#2e3545, #2e3545) center / 14px 2px no-repeat,
    linear-gradient(#2e3545, #2e3545) center / 2px 14px no-repeat;
  transition: transform .3s ease;
}
.page-entry .faq__item[open] > .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.page-entry .faq__a { padding: 0 30px 20px; color: #3f4756; }
.page-entry .faq__a > :last-child { margin-bottom: 0; }
@media (max-width: 500px) {
  .page-entry .faq__q { padding: 15px 50px 15px 20px; }
  .page-entry .faq__h { font-size: 1rem; line-height: 1.2rem; }
  /* No phone override for the toggle: production keeps the same 30px ring at the same 50px inset at
     390 as at 1440. */
}

/* 15. PRICE, TABS, BARS ===================================================== */

/* Price typography (the base theme's legacy .price rules are overridden here): 60px/300 on a 1.5
   line, currency at .4em top-aligned, period at .4em on the baseline. */
.page-entry .price { display: block; line-height: 1.5; font-size: min(60px, 4vw); font-weight: 300; margin-top: 0; }
.page-entry .price > span { display: inline; font-size: inherit; line-height: inherit; vertical-align: baseline; }
.page-entry .price > .price__before { font-size: .4em; vertical-align: top; margin-right: .2em; }
.page-entry .price > .price__after { font-size: .4em; margin-left: .2em; }
@media (max-width: 999px) { .page-entry .price { font-size: min(60px, 7vw); } }
@media (max-width: 690px) { .page-entry .price { font-size: min(60px, 12vw); } }

.tabs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Production's tab strip clears 30px before the plan cards; 17px started them 13px high and the
     whole page below inherited it. */
  margin: 0 0 30px;
}
.tabs__tab {
  padding: 8px 15px;
  background: none;
  border: 0;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
}
.tabs__switch {
  position: relative;
  display: block;
  width: 70px;
  height: 28px;
  margin: 0 10px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #003bce;
  box-shadow: 0 0 0 4px #003bce;
  cursor: pointer;
  overflow: hidden;
}
.tabs__knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 28px;
  border-radius: 100px;
  background: #fff;
  transform: translateX(-42px);
  transition: transform .45s cubic-bezier(.23, .46, .4, 1);
}
.tabs[data-active="1"] .tabs__knob { transform: translateX(42px); }
.tabs__panel[hidden] { display: none; }

/*
 * Progress bar (.bar) — ported from Salient's nectar-progress-bar.
 *
 * The transpiler keeps the VC placeholder label ("Title") in `.bar__label`; production hides it
 * and shows the percentage from `.bar__fill strong` above the right edge of the fill.
 */
.bar { margin-bottom: 0; }

.bar__label { display: none; }
/* Hidden only down to 690: below that production shows the placeholder, so all three "Available"
   cards on /ai-crypticorn-aic-token/ carry a literal "Title" line above the bar on a phone. Verified
   by bisection -- display is none at 690 and 691, block at 689 and every width below, on repeated
   runs. It is 29px of real layout each (a 14px/300 line plus 15px padding, #3f4756), 87px of the
   100px that section was short at 390. Production's placeholder text is its own content slip, but
   the brief is to carry production's design across unchanged, so it ships as production renders it. */
@media (max-width: 689px) {
  /* .page-entry-scoped: a bare .bar__label loses the type to `.page-entry p`, which is (0,1,1), and
     the label came out 36px instead of production's 29. */
  .page-entry .bar__label {
    display: block;
    margin: 0;
    padding-bottom: 15px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
  }
}

.bar__track {
  height: 14px;
  border-radius: 300px;
  background: rgba(0, 59, 206, .12);
  margin-bottom: 20px;
  overflow: visible;
}

.bar__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 300px;
  background: linear-gradient(to right, #003bce, #2ac4ea);
  position: relative;
  overflow: visible;
}

.bar__fill strong {
  position: absolute;
  right: 0;
  top: -23px;
  display: block;
  min-width: 43px;
  font-size: 11px;
  line-height: 12px;
  font-weight: 600;
  font-style: normal;
  text-align: right;
  color: var(--c-ink-600);
}

/* 16. ICONS ================================================================= */

.icon { display: inline-block; line-height: 0; }
.icon a { display: inline-block; color: inherit; }
.icon .ico { width: var(--size, 20px); height: var(--size, 20px); display: block; fill: currentColor; }
.icon--accent { color: #003bce; }
/* Production sets these five icons in a 90x90 wrap with the 50px glyph centred, so the copy below
   starts 95px under the icon's top edge; the bare 50px span here left it at 55 and the row came out
   35px short. Scoped to the five-across columns, which exist only in this row -- .icon--accent
   itself appears nine times on every page in the header and footer. */
.page-entry .col.c-1of5 .icon--accent {
  width: 90px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon--extra { color: #13182b; }
.icon a:hover { color: #2ac4ea; }

/* 17. VIDEO ================================================================= */

.vid { position: relative; margin: 0; width: 100%; aspect-ratio: var(--ratio, 16/9); overflow: hidden; border-radius: var(--r, 0); }
.vid__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 18. TESTIMONIALS (structure only; look lives in theme.css) =============== */

/* Testimonials: an edge-to-edge strip of 40vw cards (padding 15px, 30px below), each a tinted
   speech bubble with the quote at 16px/300, the name in accent 600 and the role in 14px/100. */
.page-entry .quotes { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; position: relative; }
.page-entry .quotes__track {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.25, 1, .33, 1);
}
.page-entry .quote {
  flex: 0 0 576px;
  max-width: 576px;
  box-sizing: border-box;
  padding: 15px;
  margin: 0 0 30px;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  opacity: .35;
  transition: opacity .3s cubic-bezier(.25, 1, .33, 1);
}
.page-entry .quote.is-selected { opacity: 1; }
.page-entry .quote:not(.is-selected) p {
  background: transparent;
  box-shadow: none;
}
.page-entry .quote:not(.is-selected) p::after { display: none; }
.page-entry .quote p {
  position: relative;
  margin: 0 0 40px;
  padding: 50px;
  border-radius: 20px;
  background: #f1f3fc;
  box-shadow: 40px 60px 60px -20px rgba(0, 0, 0, .025);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 300;
  color: #3f4756;
  text-align: center;
}
.page-entry .quote p::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 40px; height: 40px; margin-left: -20px; border-radius: 5px; background: inherit; transform: rotate(45deg); }
.page-entry .quote cite { display: block; font-style: normal; }
.page-entry .quote__name { display: block; font-size: 16px; line-height: 22px; font-weight: 600; color: #003bce; }
.page-entry .quote__role { display: block; font-size: 14px; line-height: 22px; font-weight: 100; color: #13182b; }
/* The single-quote variant (default slider style): one centred quote at a time, quote mark above. */
/* One quote fills the row: .quote's own max-width:576px was still capping these to a three-up
   track, so production's single 1260px slide rendered as three 576px cells with faded neighbours. */
.page-entry .quotes--single .quote { flex: 0 0 100%; max-width: none; padding: 0; margin: 0; font-size: 22px; opacity: 1; }
/* Production's quote mark is a bordered disc, not a bare glyph: a 50x50 circle with a 2px
   rgba(0,0,0,.13) edge, the character set in Georgia at 50px/70px in the heading ink colour. */
.page-entry .quotes--single .quote::before {
  content: "\201C";
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  margin: 0 auto 33px;
  border: 2px solid rgba(0, 0, 0, .13);
  border-radius: 100px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 50px;
  line-height: 70px;
  color: #13182b;
  text-align: center;
}
/* The slider's column is centred on production; the transpiler left it at start. */
.page-entry .col:has(.quotes--single) { text-align: center; }
.page-entry .quotes--single .quote p { margin: 0; padding: 0 0 30px; background: none; box-shadow: none; border-radius: 0; }
.page-entry .quotes--single .quote p::after { display: none; }
.page-entry .quotes--single .quote__role { font-size: 12px; font-weight: 600; opacity: .6; }
.page-entry .quotes--single { width: auto; margin-left: 0; }
/* Salient's page dots for this slider: 10px circles on an 18px pitch, 1px #333 border, the active
   one filled. The three-up carousel keeps its prev/next arrows; this variant has no arrows at all. */
.page-entry .quotes__dots { display: flex; justify-content: center; gap: 8px; margin: 36px 0 0; padding: 8px 0; list-style: none; }
.page-entry .quotes__dots li { display: block; line-height: 0; }
.page-entry .quotes__dot { width: 10px; height: 10px; padding: 0; border: 1px solid #333; border-radius: 10px; background: none; cursor: pointer; transition: background .2s ease; }
.page-entry .quotes__dot.is-active { background: #333; }
/* Production's carousel controls are Flickity's: a 50x50 transparent button with a black arrow
   12px wide over the button's full height, the pair 24px apart. They were blue 44px discs with a
   white chevron here, which is the most conspicuous thing on the testimonials band. */
/* Production leaves 24px between the track and the buttons and nothing below them, so the slider
   comes to 464px against the track's 390. Padding below instead of above left it 450. */
.page-entry .quotes__nav { display: flex; justify-content: center; gap: 24px; padding: 24px 0 0; }
.page-entry .quotes__btn { position: relative; width: 50px; height: 50px; border-radius: 200px; border: 0; background: none; color: #000; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: opacity .2s ease; }
.page-entry .quotes__btn:hover { opacity: .6; }
.page-entry .quotes__btn svg { width: 12px; height: 50px; }
.page-entry .quotes__btn svg .arrow { fill: currentColor; }
/* The glyph is a chevron plus a separate 18x2 bar for the shaft -- the svg alone renders as "<",
   which is why the arrows read as chevrons against production's "←". Production also paints a white
   disc behind the button, invisible on a white band but not on a tinted one. Offsets are its own:
   svg translated -4px on the previous button and +5px on the next, the bar scaled to 90%. */
.page-entry .quotes__btn::before { content: ""; position: absolute; inset: 0; border-radius: 100px; background: #fff; }
.page-entry .quotes__btn::after { content: ""; position: absolute; top: 24px; width: 18px; height: 2px; background: currentColor; transform: scaleX(.9); }
.page-entry .quotes__btn svg { position: relative; z-index: 1; }
.page-entry .quotes__btn--prev::after { left: 18px; }
.page-entry .quotes__btn--next::after { left: 7px; transform: scaleX(.9) translateX(7.2px); }
.page-entry .quotes__btn--prev svg { transform: translateX(-4px); }
.page-entry .quotes__btn--next svg { transform: translateX(5px); }
/* The testimonial star rating. Production prints five U+F005 glyphs from the icomoon icon font --
   #ddd for the empty row, #003bce for the .filled overlay whose inline width carries the rating.
   The rebuild drops the icon fonts, so the outline is extracted from production's icomoon.woff and
   used as a mask, reproducing its painted geometry: five 14px stars on a 24px pitch, ink at y=3..17
   of a 112x22 box. The markup was already present; nothing was rendering it. */
.page-entry .star-rating-wrap { display: block; padding: 7.5px 0; }
.page-entry .star-rating { position: relative; display: inline-block; width: 112px; height: 22px; }
.page-entry .star-rating::before,
.page-entry .star-rating .filled::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2022%22%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%280%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2824%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2848%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2872%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2896%2C0%29%22%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 112px 22px;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2022%22%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%280%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2824%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2848%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2872%2C0%29%22%2F%3E%3Cpath%20d%3D%22M14.2655%208.281749999999999Q14.2655%208.469249999999999%2014.04675%208.687999999999999L10.937375%2011.719249999999999L11.67175%2016.0005Q11.67175%2016.063%2011.67175%2016.188Q11.67175%2016.3755%2011.578%2016.484875Q11.48425%2016.609875%2011.328%2016.609875Q11.156125%2016.609875%2010.98425%2016.5005L7.124875%2014.484874999999999L3.281125%2016.5005Q3.093625%2016.609875%202.937375%2016.609875Q2.7655%2016.609875%202.67175%2016.484875Q2.578%2016.3755%202.578%2016.188Q2.578%2016.1255%202.593625%2016.0005L3.328%2011.719249999999999L0.203%208.687999999999999Q-0.00012499999999998623%208.469249999999999%20-0.00012499999999998623%208.281749999999999Q-0.00012499999999998623%207.969249999999999%200.48425%207.875499999999999L4.781125%207.266124999999999L6.703%203.359874999999999Q6.874875%203.000499999999999%207.124875%203.000499999999999Q7.3905%203.000499999999999%207.54675%203.359874999999999L9.48425%207.266124999999999L13.781125%207.875499999999999Q14.2655%207.969249999999999%2014.2655%208.281749999999999Z%22%20transform%3D%22translate%2896%2C0%29%22%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 112px 22px;
}
.page-entry .star-rating::before { background: #ddd; }
.page-entry .star-rating .filled { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.page-entry .star-rating .filled::before { width: 112px; background: #003bce; }
.page-entry .star-rating::before { background: #ddd; }
.page-entry .star-rating .filled { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.page-entry .star-rating .filled::before { background: #003bce; width: 112px; }

@media (max-width: 781px) {
  .page-entry .quote { flex-basis: 86vw; max-width: 86vw; }
  .page-entry .quote p { padding: 30px; }
}

/* 19. CASCADE =============================================================== */

.cascade { display: grid; }
.cascade__item { grid-area: 1 / 1; margin: 0; line-height: 0; }
.cascade__item img { width: 100%; height: auto; }

/* 20. REVEAL ANIMATIONS ===================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.215, .61, .355, 1) var(--delay, 0s),
                transform .8s cubic-bezier(.215, .61, .355, 1) var(--delay, 0s);
  }
  [data-reveal="up"] { transform: translateY(30px); }
  [data-reveal="lines"] { transform: translateY(12px); }
  [data-reveal="grow"] { transform: scale(.92); }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
  /* ...except where the builder dimmed the column. .opacity_50 is 0,1,0 and loses to the line
     above, so the two "COMING SOON" exchange cards on /ai-trading-agents/ finished their reveal at
     full strength where production holds them at 0.5. */
  [data-reveal].is-revealed.opacity_50 { opacity: .5; }

  [data-reveal-bg]::before { transition: clip-path 1.3s cubic-bezier(.33, 1, .68, 1); }
  [data-reveal-bg="left"]::before { clip-path: inset(0 100% 0 0); }
  [data-reveal-bg="right"]::before { clip-path: inset(0 0 0 100%); }
  [data-reveal-bg="top"]::before { clip-path: inset(0 0 100% 0); }
  [data-reveal-bg].is-revealed::before { clip-path: inset(0); }
}

/* 21. MISC PRODUCTION HOOKS ================================================= */

.lottie-arrow {
  display: inline-block;
  width: 40px;
  height: 36px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 130' fill='none' stroke='rgb(0,0,0)' stroke-width='8' stroke-linecap='round' stroke-miterlimit='10'><g transform='matrix(0.82026,0,0,0.82026,-166.4996,-249.323)'><g transform='translate(228.585,411.452)'><path d='M14.597,29.193 C14.597,29.193 -14.596,0 -14.596,0 C-14.596,0 14.597,-29.193 14.597,-29.193'/></g><g transform='translate(299.124,378.317)'><path d='M-76.135,32.811 C-76.135,32.811 56.526,52 76.135,-52'/></g></g></svg>") no-repeat center / contain;
}
.list-footer-2 { margin-bottom: -25px; }
.footer_texts * { font-size: .85rem; line-height: 1.2rem; }
/* Stated at 0,3,1 because this paragraph sits inside a .hero, and `.page-entry .hero p` (0,2,1)
   was setting it to 1.2rem -- 19.2px against production's 12.8px on
   /ai-crypto-price-prediction-dashboard/. */
.token_holder_text p,
.page-entry .hero .token_holder_text p { font-size: .8rem; font-weight: 800; }
.roadmap li { color: #000; }
.press-media .col__in > h3, .press-media .col__in > h4 { color: #003bce; }
.bottom_column { position: absolute; bottom: 40px; }
.bottom_column_v2 { position: absolute; bottom: 15px; }
.break-word { overflow-wrap: break-word; }

/* 22. HOMEPAGE POST GRID ==================================================== */

.page-entry .card { border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.page-entry .card:hover { transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
/* grid-auto-rows: max-content because the card wraps its media and body in a single <a>, so the
   thumbnail's aspect-ratio height never reaches the grid's row-sizing pass -- the row measured the
   card at 433px, the stretched card handed that height down, and the thumbnail absorbed the
   shortfall. On a phone that left the three homepage cards a flat 433 with thumbnails of 116, 148
   and 158 against production's 482/457/441 and a consistent 168. Sizing the rows to their content
   gives 486/454/444 and 168 throughout. Desktop is unaffected -- the three cards share one row there
   and still stretch to an equal 532, as production's do at 528.

   A percentage row-gap resolves against the grid's own block size, which is indefinite here, so the
   browser sizes the tracks without it and then paints the gaps anyway: the container reported 1383
   while its last card ended at 1466, and everything below the grid rode 83px too high. Production's
   gap between stacked cards is a flat 40px, so the rows take that and only the columns stay at 3%. */
.page-entry .post-grid { column-gap: 3%; row-gap: 40px; margin-bottom: 3%; grid-auto-rows: max-content; }
.page-entry .card__body { padding: 10%; gap: 0; }
.page-entry .card__cat, .page-entry .card__meta { display: none; }
.page-entry .card__title { font-size: 1.8rem; line-height: 2rem; font-weight: 500; color: #003bce; margin: 0 0 3px; }
.page-entry .card__excerpt { margin-top: 25px; font-size: 1rem; line-height: 1.3rem; color: #555; }
.page-entry .card__media { aspect-ratio: 1000 / 490; }

/* 23. ABOUT FOUNDER CARD ===================================================== */
/* The card is generated by the crypticorn-core plugin on both sites; these are the original's
   values, restated above the page typography so they survive it. */
.page-entry .crypticorn-about-founder__eyebrow { margin: 0 0 .25rem; font-size: .8rem; line-height: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-brand-700, #0033a0) !important; }
.page-entry .crypticorn-about-founder__body > p:not(:last-child) { padding-bottom: 1.5em; }
.page-entry .crypticorn-about-founder__links { font-size: 14px; line-height: 26px; }
.page-entry .crypticorn-about-founder__name { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.15; font-weight: 500; color: #0b1f44; }
.page-entry .crypticorn-about-founder__title { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.3rem; font-weight: 600; color: #1e4fd9 !important; }
.page-entry .crypticorn-about-founder__credentials { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.page-entry .crypticorn-about-founder__credentials li { margin: 0; padding: .32rem .7rem; border-radius: 999px; background: rgb(0 59 206 / .08); color: #0b1f44; font-size: .86rem; font-weight: 600; line-height: 1.35; }
.page-entry .crypticorn-about-founder__bio { margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.7; color: #334155 !important; max-width: 62ch; }

/*
 * /pricing/ top spacing below the desktop breakpoint. The transpiler gave the first section
 * `--pt: calc(100vw*0.03 + 80px)` and `--pt-p: calc(100vw*0.03 + 60px)`, which lands production's
 * value at 1440 and 1200 and falls short everywhere below: measured from the header bottom to the
 * "Our Pricing" heading, production has 66px at 999, 87px at 690 and 69px at 390 against 41, 32 and
 * 14 here. Adding 25px in the tablet band and 55px on phones reproduces production's heading offset
 * at 999 (135), 768 (128), 690 (156), 500 (145) and 390 (138) -- the 3vw top margin already in the
 * inline style accounts for the rest.
 *
 * Overriding padding-top rather than the variables: they are set inline on the section, and an
 * inline custom property beats any stylesheet rule. The selector matches exactly one element.
 */
@media (max-width: 999px) {
  body.page--pricing .page-entry > .sec:first-of-type { padding-top: calc(100vw * 0.03 + 105px); }
}
@media (max-width: 690px) {
  body.page--pricing .page-entry > .sec:first-of-type { padding-top: calc(100vw * 0.03 + 115px); }
}

/*
 * The up/down hero band. Production paints it with `rgba(0, 59, 206, .03)` over white, which
 * resolves to rgb(247,249,253); the transpiler baked a flat #e9f1f6 = rgb(233,241,246) instead --
 * a visibly greener, darker tint across the whole band. Every other .sec__bg on the marketing pages
 * carries either the brand overlay or a colour that already matches, and this attribute selector
 * matches exactly one element sitewide.
 *
 * !important because the colour is set inline on the element.
 */
.sec__bg[style*="e9f1f6"] { background-color: rgba(0, 59, 206, .03) !important; }

.polymarket-hero > .sec__bg {
  background-color: #e6eff4 !important;
}