/* ==========================================================================
   THE DESIGNERS HUB — Consultation
   Source of truth: Figma frame "consultation" #2129:1621 (1440 x 7464).
   Every coordinate in the desktop block below is the literal Figma value.
   Section tops (frame y): hero 0 | who 759 | familiar 1404 | bio 2136 |
   get 2878 | results 3600 | works 4316 | investment 5320 | faq 6432.
   Offsets inside a section are the Figma coordinate minus that section's top.

   Line heights are derived per style from each text node's own height divided
   by its line count (e.g. style_a4d26c47 renders 51px over 3 lines -> 17px),
   not from the nominal em multiplier.
   ========================================================================== */

.page-consultation main { position: relative; }

/* --------------------------------------------------------------------------
   Flow fallback (below 1200px).
   Unverified reflow, not a port of a Figma frame — the file specifies desktop
   only for this page. Kept legible; not to be described as done.
   -------------------------------------------------------------------------- */
.cn section { position: relative; padding-inline: var(--page-pad-mob); }
.cn section + section { margin-top: var(--space-48); }

.cn [aria-hidden="true"]:empty { display: none; }

/* Scoped to the fallback: as `.cn img` this outranks the per-image width/height
   rules in the desktop block (0,1,1 vs 0,1,0) and would resize every photo. */
@media (max-width: 1199px) {
  .cn img { width: 100%; height: auto; }
}

/* Nodes that exist only on the 390 frame: the wide bio photo band #2129:5888
   and the third phase connector #2129:5916. Hidden everywhere by default; the
   mobile block at the end turns them on.
   These carry the full `[aria-hidden]:empty` prefix on purpose: the desktop
   block restores every such box with `.cn [aria-hidden="true"]:empty
   { display: block }` at (0,3,0), and a bare class hide at (0,1,0) loses to
   it — which put both of these on the 1440 page. */
.cn [aria-hidden="true"]:empty.cn-bio__photo,
.cn [aria-hidden="true"]:empty.cn-works__arc--3 { display: none; }

/* Mobile-only forced line break (#2129:5899). Inert above 767 — the 1440
   frame breaks that quote on its own box width. Carries the same
   [aria-hidden]:empty prefix so the desktop restore cannot turn it back on. */
.cn [aria-hidden="true"]:empty.cn-brk { display: none; }

/* Tablet-only forced line break (#2129:7925 — Figma ends line 2 at "want"
   where Chrome pulls "to" up, and the window is INVERTED by 9.46px so no box
   width reproduces it). Same prefix, for the same reason. */
.cn [aria-hidden="true"]:empty.cn-brk-t { display: none; }

.cn h1, .cn h2 { margin-bottom: var(--space-16); }
.cn p + p { margin-top: var(--space-16); }

.cn-hero__eyebrow,
.cn-who__eyebrow,
.cn-fam__eyebrow,
.cn-bio__eyebrow,
.cn-get__eyebrow,
.cn-res__eyebrow,
.cn-works__eyebrow,
.cn-inv__eyebrow,
.cn-faq__eyebrow {
  color: var(--gold);
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
}

.cn-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 26px;
  line-height: 1.06;
  text-transform: uppercase;
}

.cn-who__title, .cn-fam__title, .cn-bio__title,
.cn-get__title, .cn-res__title, .cn-works__title,
.cn-inv__title, .cn-faq__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: 22px;
  line-height: 1.22;
  text-transform: uppercase;
}

.cn-stats, .cn-spec { display: grid; gap: var(--space-16); }
.cn-spec__k { color: var(--grey-400); font-size: 14px; }
.cn-spec__v { margin: 0; color: #444444; font-size: 14px; }

.cn-stage, .cn-phase, .cn-gain, .cn-tst, .cn-slot {
  margin-top: var(--space-24);
  padding: var(--space-16);
  border: var(--stroke-1) solid var(--color-border);
}

.cn-tst__text { margin: 0; font-style: italic; }
.cn-tst__mark { display: none; }

/* FAQ accordion base lives in accordion.css (shared with membership);
   only this page's row spacing and panel padding are set below. */

/* ==========================================================================
   DESKTOP — the 1440 Figma canvas, literal coordinates
   ========================================================================== */
@media (min-width: 1200px) {

  /* flow-root so the FAQ's margin-top cannot collapse out of main; min-height
     holds the frame's 7464px while still growing when FAQ rows expand */
  .page-consultation main {
    display: flow-root;
    width: var(--frame-desktop);
    min-height: 7392px;  /* was 7464; -72 to match the FAQ pulled up after the inv-slot removal (2026-07-21) */
    margin-inline: auto;
    overflow: visible;
  }

  .cn section {
    position: absolute;
    left: 0;
    width: var(--frame-desktop);
    margin: 0;
    padding: 0;
  }

  .cn section + section { margin-top: 0; }

  .cn [aria-hidden="true"]:empty { display: block; }

  .cn h1, .cn h2 { margin-bottom: 0; }
  .cn p + p { margin-top: 0; }

  /* Every node below is a single line in Figma (text-node height == one line
     step). The browser measures the same strings 1-4px wider, which wraps them
     and pushes everything beneath down. Hold them to one line. */
  .cn-hero__eyebrow,
  .cn-stat__key, .cn-stat__val,
  .cn-who__eyebrow,
  .cn-stage__label, .cn-stage__name,
  .cn-fam__eyebrow,
  .cn-bio__eyebrow, .cn-bio__title, .cn-bio__means,
  .cn-get__eyebrow, .cn-get__sub, .cn-get__footnote,
  /* Figma fits "THIS IS AN ACTUAL WORKING SESSION." on one line in a 622px
     box; the browser measures the same string at 627.1px and wraps it to a
     third line. Each <br>-separated line is held to one line. */
  .cn-get__title,
  .cn-gain__title,
  .cn-res__eyebrow, .cn-tst__by,
  .cn-works__eyebrow,
  .cn-phase__label, .cn-phase__num, .cn-phase__name,
  .cn-inv__eyebrow,
  .cn-price__title, .cn-price__amount, .cn-price__tabby, .cn-price__secure,
  .cn-spec__k, .cn-spec__v,
  .cn-slot__key, .cn-slot__val,
  .cn-faq__eyebrow, .cn-faq__title,
  .cn-acc__q { white-space: nowrap; }

  /* absolutely-placed children read their coordinates from the section box */
  .cn-stage, .cn-phase, .cn-gain, .cn-tst, .cn-price, .cn-spec { display: contents; }

  .cn-stage__card, .cn-stage__disc, .cn-stage__label, .cn-stage__name,
  .cn-stage__rule, .cn-stage__text,
  .cn-phase__card, .cn-phase__disc, .cn-phase__label, .cn-phase__num,
  .cn-phase__name, .cn-phase__rule, .cn-phase__text,
  .cn-gain__title, .cn-gain__rule, .cn-gain__text,
  .cn-tst__box, .cn-tst__mark, .cn-tst__text, .cn-tst__by,
  .cn-price__body, .cn-price__head, .cn-price__headrule, .cn-price__title,
  .cn-price__divider, .cn-price__amount, .cn-price__tabby, .cn-price__cta,
  .cn-price__secure, .cn-spec__k, .cn-spec__v { position: absolute; }

  /* `> picture > img` is not optional: four breakpoint image swaps wrap their
     <img> in a <picture>, making it a GRANDCHILD of the section. Without this
     they fall back to static at 0,0 — the failure that silently unpositioned
     nine images on blog/membership/event. */
  .cn section > *,
  .cn section > picture > img { position: absolute; }

  /* Several plates are wider than the 1440 canvas on purpose (the atelier
     backdrop is 1477, the line overlay 1648); base.css's max-width:100% would
     clip them to the section width. */
  .page-consultation main img { max-width: none; }

  /* Figma places every CTA on this page as the 239x52 button component with a
     single-line label. The shared .btn's 55px side padding leaves only 129px
     of content box at that width, which wraps the label onto four lines. */
  .page-consultation .btn {
    width: 239px;
    height: var(--btn-h);
    padding-inline: 0;
    white-space: nowrap;
  }

  /* shared decorative primitives */
  .cn-hero__rule, .cn-bio__rule, .cn-get__rule, .cn-res__rule,
  .cn-inv__rule, .cn-price__headrule, .cn-price__divider,
  .cn-stage__rule, .cn-phase__rule, .cn-gain__rule { height: 1px; }

  /* ======================================================================
     1. HERO — frame #2129:1642 at y:94; atelier plate y:60; stat bar y:615
     ====================================================================== */
  .cn-hero { top: 0; height: 688px; }

  /* Figma renders this plate fully desaturated. Figma applies that as an image
     fill filter, which the API node data does not expose, so the value is
     matched to the rendered frame rather than read — worth confirming if the
     designer intended a partial rather than full desaturation. The two people
     photos on this page carry no such filter and stay in colour. */
  .cn-hero__atelier {
    left: -17px; top: 60px; width: 1477px; height: 620px;
    object-fit: cover;
    filter: blur(1.25px) grayscale(1);
  }

  /* #2129:1643 light band behind the panel, 15px ink edge */
  .cn-hero__band {
    left: 33px; top: 167px; width: 1407px; height: 296px;
    background: var(--bg);
    border: var(--stroke-15) solid var(--color-surface-dark);
  }

  /* #2129:1644 dark panel, 5px light edge */
  .cn-hero__panel {
    left: 33px; top: 104px; width: 857px; height: 463px;
    background: var(--color-surface-dark);
    border: 5px solid var(--bg);
  }

  .cn-hero__lines { left: 720px; top: 83px; width: 760.68px; height: 449.43px; }

  .cn-hero__rule    { left: 33px; top: 163px; width: 291px; background: var(--gold-deep); }
  .cn-hero__eyebrow { left: 80px; top: 143px; width: 234px; text-align: center; }

  .cn-hero__title {
    left: 79px; top: 179px; width: 684px;
    color: var(--white);
    font-size: var(--fs-h1);
    line-height: 38px;
  }

  .cn-hero__lead {
    left: 79.5px; top: 303px; width: 683px;
    color: var(--white);
    font-size: var(--fs-lead);
    font-weight: var(--fw-reg);
    line-height: 22px;
  }

  .cn-hero__note {
    left: 80px; top: 385px; width: 502px;
    color: #E0E0E0;
    font-size: var(--fs-body);
    line-height: 19px;
  }

  .cn-hero__cta { left: 79.5px; top: 471px; width: 239px; }

  .cn-hero__portrait {
    left: 978px; top: 110px; width: 375px; height: 451px;
    object-fit: cover;
    border: 7px solid var(--color-surface-dark);
  }

  /* --- stat bar : dark strip #2129:1656, four cards straddling it -------- */
  .cn-stats__strip {
    left: -1px; top: 631px; width: 1441px; height: 57px;
    background: var(--color-surface-dark);
  }

  .cn-stats { display: block; }

  .cn-stat {
    position: absolute;
    top: 615px; height: 72px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--black);
  }

  /* three stats now (the "Next slot" date box was removed) — re-spaced with
     equal gaps, centred on the strip (group 169..1272, centre 720). */
  .cn-stat--2 { left: 169px; width: 227px; }
  .cn-stat--3 { left: 526px; width: 227px; }
  .cn-stat--4 { left: 883px; width: 389px; }

  .cn-stat__key,
  .cn-stat__val { position: absolute; display: block; text-align: center; }

  .cn-stat__key {
    top: 16px;
    color: var(--gold);
    font-size: var(--fs-body);
    font-weight: var(--fw-med);
    line-height: 19px;
    text-transform: uppercase;
  }

  .cn-stat__val {
    top: 37px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 16px;
  }

  .cn-stat--1 .cn-stat__key { left: 91px;  width: 92px; }
  .cn-stat--1 .cn-stat__val { left: 86px;  width: 102px; }
  .cn-stat--2 .cn-stat__key { left: 75px;  width: 77px; font-weight: var(--fw-semi); }
  .cn-stat--2 .cn-stat__val { left: 62px;  width: 102px; }
  .cn-stat--3 .cn-stat__key { left: 81px;  width: 64px; }
  .cn-stat--3 .cn-stat__val { left: 42px;  width: 142px; }
  .cn-stat--4 .cn-stat__key { left: 173px; width: 20px; }
  .cn-stat--4 .cn-stat__val { left: 128px; width: 111px; }

  /* ======================================================================
     2. WHO THIS IS FOR — light frame #2129:1641 y:759 (8px ink edge)
     ====================================================================== */
  .cn-who { top: 759px; height: 568px; }

  /* #2129:1639 sits under the light frame; only its last 48px are visible */
  .cn-who__dark {
    left: -1px; top: 432px; width: 1441px; height: 136px;
    background: var(--color-surface-dark);
  }

  .cn-who__frame {
    left: -1px; top: 0; width: 1441px; height: 520px;
    background: var(--bg);
    border: 8px solid var(--color-surface-dark);
  }

  .cn-who__lines { left: 39px; top: 200.14px; width: 1228.18px; height: 510.22px; }

  .cn-who__chip { left: 595px; top: 64px; width: 250px; height: 32px; background: var(--color-surface-dark); }

  .cn-who__eyebrow { left: 665px; top: 72px; width: 111px; text-align: center; }

  .cn-who__title {
    left: 384px; top: 104px; width: 672px;
    color: var(--color-text);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semi);
    line-height: 39px;
    text-align: center;
  }

  /* --- stage cards : groups #2129:1675 / 1682 / 1689 at y:1028 ---------- */
  .cn-stage__card {
    top: 298px; width: 344px; height: 154px;
    background: var(--color-surface-dark);
    border: var(--stroke-1) solid var(--black);
    border-radius: var(--radius-2);
  }

  .cn-stage__disc {
    top: 269px; width: 74px; height: 74px;
    background: var(--bg);
    border: 0.74px solid var(--color-surface-dark);
    border-radius: 50%;
  }

  .cn-stage__label {
    top: 297px;
    color: var(--gold);
    font-size: 14px;
    font-weight: var(--fw-med);
    line-height: 17px;
    text-transform: uppercase;
  }

  .cn-stage__name {
    top: 327px;
    color: var(--gold);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 17px;
  }

  .cn-stage__rule { top: 352px; background: var(--bg); }

  .cn-stage__text {
    top: 360px;
    color: var(--bg);
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;
  }

  .cn-stage--launch .cn-stage__card  { left: 125px; }
  .cn-stage--launch .cn-stage__disc  { left: 80px; }
  .cn-stage--launch .cn-stage__label { left: 87px;  width: 60px; }
  .cn-stage--launch .cn-stage__name  { left: 146px; width: 94px; }
  .cn-stage--launch .cn-stage__rule  { left: 126px; width: 342.5px; }
  .cn-stage--launch .cn-stage__text  { left: 146px; width: 315px; }

  .cn-stage--growth .cn-stage__card  { left: 571px; }
  .cn-stage--growth .cn-stage__disc  { left: 525px; }
  .cn-stage--growth .cn-stage__label { left: 530px; width: 64px; }
  .cn-stage--growth .cn-stage__name  { left: 593px; width: 138px; }
  .cn-stage--growth .cn-stage__rule  { left: 572px; width: 343px; }
  .cn-stage--growth .cn-stage__text  { left: 593px; width: 300px; }

  .cn-stage--scale .cn-stage__card  { left: 1016px; }
  .cn-stage--scale .cn-stage__disc  { left: 971px; }
  .cn-stage--scale .cn-stage__label { left: 985px;  width: 46px; }
  .cn-stage--scale .cn-stage__name  { left: 1039px; width: 131px; }
  .cn-stage--scale .cn-stage__rule  { left: 1016px; width: 343.5px; }
  .cn-stage--scale .cn-stage__text  { left: 1039px; width: 296px; }

  /* ======================================================================
     3. SOUND FAMILIAR? — dark plate #2129:1635 y:1404
     ====================================================================== */
  .cn-fam { top: 1404px; height: 692px; }

  .cn-fam__dark  { left: -53px; top: 0;    width: 1493px; height: 692px; background: var(--color-surface-dark); }
  .cn-fam__light { left: -44px; top: 12px; width: 1452px; height: 552px; background: var(--bg); }
  .cn-fam__lines { left: 16.04px; top: 362px; width: 1648.1px; height: 557.35px; }

  .cn-fam__chip    { left: -8px; top: 60px; width: 250px; height: 32px; background: var(--color-surface-dark); }
  .cn-fam__eyebrow { left: 80px; top: 68px; width: 116px; text-align: center; }

  .cn-fam__title {
    left: 80px; top: 100px; width: 680px;
    color: var(--color-text);
    font-size: var(--fs-h2);
    line-height: 39px;
  }

  .cn-fam__lead {
    left: 80px; top: 186px; width: 648px;
    color: var(--color-text);
    font-size: var(--fs-lead);
    line-height: 22px;
  }

  .cn-q__box {
    background: rgba(45, 45, 45, 0.04);
    border: var(--stroke-1) solid var(--color-surface-dark);
    height: 95px;
  }

  .cn-q__box--1 { left: -17px; top: 300px; width: 421px; }
  .cn-q__box--2 { left: 469px; top: 300px; width: 340px; }
  .cn-q__box--3 { left: 872px; top: 300px; width: 544px; }
  .cn-q__box--4 { left: -7px;  top: 411px; width: 411px; }
  .cn-q__box--5 { left: 469px; top: 411px; width: 340px; }
  .cn-q__box--6 { left: 872px; top: 411px; width: 544px; }

  .cn-q {
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 17px;
  }

  /* bullet sits at the group origin, 20px left and 4px above the text box */
  .cn-q::before {
    content: "";
    position: absolute;
    left: -20px; top: -4px;
    width: 10.89px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
  }

  .cn-q--1 { left: 100px; top: 322px; width: 292px; }
  .cn-q--2 { left: 508px; top: 324px; width: 285px; }
  .cn-q--3 { left: 912px; top: 324px; width: 286px; }
  .cn-q--4 { left: 100px; top: 435px; width: 276px; }
  .cn-q--5 { left: 507px; top: 433px; width: 286px; }
  .cn-q--6 { left: 912px; top: 435px; width: 256px; }

  .cn-fam__close {
    top: 603px;
    color: #E0E0E0;
    font-size: 15px;
    line-height: 18px;
  }

  .cn-fam__close--1 { left: 80px;  width: 480px; }
  .cn-fam__close--2 { left: 728px; width: 470px; }

  /* #2129:1752 — short gold connector between the two closing paragraphs */
  .cn-fam__dash { left: 583.5px; top: 615px; width: 128.5px; height: 8px; }

  /* ======================================================================
     4. REAL EXPERIENCE — dark panel #2129:1634 y:2152
     ====================================================================== */
  .cn-bio { top: 2136px; height: 685px; }

  .cn-bio__panel {
    left: 376px; top: 16px; width: 1064px; height: 576px;
    background: var(--color-surface-dark);
  }

  .cn-bio__lines { left: -148px; top: 80px; width: 595.75px; height: 727.18px; }

  .cn-bio__portrait {
    left: 80px; top: 59px; width: 451px; height: 626px;
    object-fit: cover;
    border: 10px solid var(--color-surface-dark);
  }

  .cn-bio__eyebrow { left: 631px; top: 64px; width: 115px; text-align: center; }

  .cn-bio__rule { background: var(--gold-deep); }
  .cn-bio__rule--short { left: 629px; top: 88px;  width: 179px; }
  .cn-bio__rule--long  { left: 628px; top: 280px; width: 655px; }

  .cn-bio__title {
    left: 631px; top: 96px; width: 745px;
    color: var(--white);
    font-size: var(--fs-h2);
    font-weight: var(--fw-med);
    line-height: 39px;
  }

  .cn-bio__lead {
    left: 631px; top: 143px; width: 648px;
    color: var(--white);
    font-size: var(--fs-lead);
    font-weight: var(--fw-light);
    line-height: 22px;
  }

  .cn-bio__means {
    left: 631px; top: 257px; width: 194px;
    color: var(--white);
    font-size: var(--fs-body);
    font-weight: var(--fw-med);
    line-height: 19px;
  }

  .cn-bio__point {
    color: var(--white);
    font-size: 14px;
    font-weight: var(--fw-light);
    line-height: 15px;
  }

  .cn-bio__point::before {
    content: "";
    position: absolute;
    left: -15px; top: -1px;
    width: 10.89px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
  }

  .cn-bio__point--1 { left: 646px; top: 297px; width: 276px; }
  .cn-bio__point--2 { left: 998px; top: 297px; width: 276px; }
  .cn-bio__point--3 { left: 646px; top: 344px; width: 276px; }
  .cn-bio__point--4 { left: 998px; top: 345px; width: 274px; }

  .cn-bio__close {
    left: 631px; top: 422px; width: 650px;
    color: var(--white);
    font-size: var(--fs-body);
    line-height: 19px;
  }

  .cn-bio__cta { left: 631px; top: 492px; width: 239px; }

  /* ======================================================================
     5. WHAT YOU WILL GET — outline #2129:1864 y:2878, panel #2129:1865 y:2918
     ====================================================================== */
  .cn-get { top: 2878px; height: 648px; }

  .cn-get__outline {
    left: 20px; top: 0; width: 1400px; height: 584px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .cn-get__panel {
    left: 80px; top: 40px; width: 1280px; height: 608px;
    background: var(--color-surface-dark);
  }

  .cn-get__eyebrow { left: 654px; top: 84px; width: 133px; text-align: center; }
  .cn-get__rule    { left: 583px; top: 104px; width: 275px; background: var(--gold-deep); }

  .cn-get__title {
    left: 409px; top: 112px; width: 622px;
    color: var(--bg);
    font-size: var(--fs-h2);
    font-weight: var(--fw-med);
    line-height: 39px;
    text-align: center;
  }

  .cn-get__sub {
    left: 383px; top: 198px; width: 674px;
    color: var(--bg);
    font-size: var(--fs-lead);
    font-weight: var(--fw-light);
    line-height: 22px;
    text-align: center;
  }

  .cn-gain__title {
    color: var(--gold);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    line-height: 17px;
    text-align: center;
  }

  .cn-gain__rule { width: 257px; background: var(--gold-deep); }

  .cn-gain__text {
    color: var(--bg);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 17px;
    text-align: center;
  }

  .cn-gain--1 .cn-gain__title { left: 275px; top: 268px; width: 239px; }
  .cn-gain--1 .cn-gain__rule  { left: 266px; top: 293px; }
  .cn-gain--1 .cn-gain__text  { left: 272px; top: 301px; width: 248px; }

  .cn-gain--2 .cn-gain__title { left: 624px; top: 268px; width: 190px; }
  .cn-gain--2 .cn-gain__rule  { left: 591px; top: 293px; }
  .cn-gain--2 .cn-gain__text  { left: 590px; top: 301px; width: 258px; }

  .cn-gain--3 .cn-gain__title { left: 936px; top: 268px; width: 216px; }
  .cn-gain--3 .cn-gain__rule  { left: 916px; top: 293px; }
  .cn-gain--3 .cn-gain__text  { left: 912px; top: 301px; width: 265px; }

  .cn-gain--4 .cn-gain__title { left: 314px; top: 401px; width: 164px; }
  .cn-gain--4 .cn-gain__rule  { left: 268px; top: 426px; }
  .cn-gain--4 .cn-gain__text  { left: 280px; top: 434px; width: 231px; }

  .cn-gain--5 .cn-gain__title { left: 637px; top: 401px; width: 167px; }
  .cn-gain--5 .cn-gain__rule  { left: 592px; top: 426px; }
  .cn-gain--5 .cn-gain__text  { left: 623px; top: 434px; width: 195px; }

  .cn-gain--6 .cn-gain__title { left: 935px; top: 401px; width: 219px; }
  .cn-gain--6 .cn-gain__rule  { left: 916px; top: 426px; }
  .cn-gain--6 .cn-gain__text  { left: 937px; top: 434px; width: 215px; }

  /* #2129:1888 — open-topped box, 1px light edge on the other three sides */
  .cn-get__foot {
    left: 242px; top: 512px; width: 957px; height: 56px;
    border: var(--stroke-1) solid var(--bg);
    border-top: 0;
  }

  /* left is 393-242 less the box's own 1px left border, which shifts the
     absolute containing block inward (Figma measures from the outer edge) */
  .cn-get__footnote {
    position: absolute;
    left: 150px; top: 19px; width: 655px;
    color: #E0E0E0;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
  }

  /* ======================================================================
     6. CLIENT RESULTS — moodboard #2129:1757 y:3600, panel #2129:1758 y:3628
     ====================================================================== */
  .cn-res { top: 3600px; height: 738px; }

  /* Figma mirrors this node via its own transform, which download_figma_images
     does not carry: the frame shows the photo's left edge (swatches, garment
     sketches) in the strip right of the dark panel, so it is flipped here. */
  .cn-res__bg {
    left: 0; top: 0; width: 1440px; height: 738px;
    object-fit: cover;
    transform: scaleX(-1);
    filter: grayscale(1);   /* as with the hero plate — see note above */
  }

  .cn-res__panel {
    left: -200px; top: 28px; width: 1280px; height: 676px;
    background: var(--color-surface-dark);
  }

  .cn-res__eyebrow { left: 82px; top: 92px;  width: 107px; text-align: center; }
  .cn-res__rule    { left: 80px; top: 116px; width: 146px; background: var(--gold-deep); }

  .cn-res__title {
    left: 80px; top: 124px; width: 688px;
    color: var(--white);
    font-size: var(--fs-h2);
    font-weight: var(--fw-med);
    line-height: 39px;
  }

  .cn-tst__box {
    height: 94px;
    background: rgba(255, 255, 255, 0.06);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .cn-tst__mark {
    display: block;
    width: 80px; height: 104px;
    color: var(--gold);
    font-family: var(--font-serif);
    font-weight: var(--fw-reg);
    font-size: 79.93px;
    line-height: 104px;
  }

  .cn-tst__text {
    color: var(--white);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    font-style: italic;
    line-height: 21px;
  }

  .cn-tst__by {
    color: #999999;
    font-size: 13px;
    line-height: 16px;
  }

  .cn-tst--1 .cn-tst__box  { left: 0;     top: 276px; width: 520px; }
  .cn-tst--1 .cn-tst__mark { left: 32px;  top: 272px; }
  .cn-tst--1 .cn-tst__text { left: 111px; top: 298px; width: 345px; }
  .cn-tst--1 .cn-tst__by   { left: 282px; top: 376px; width: 203px; }

  .cn-tst--2 .cn-tst__box  { left: 552px; top: 276px; width: 419px; }
  .cn-tst--2 .cn-tst__mark { left: 523px; top: 272px; }
  .cn-tst--2 .cn-tst__text { left: 602px; top: 298px; width: 350px; }
  .cn-tst--2 .cn-tst__by   { left: 702px; top: 376px; width: 270px; }

  .cn-tst--3 .cn-tst__box  { left: 0;     top: 428px; width: 520px; }
  .cn-tst--3 .cn-tst__mark { left: 32px;  top: 423px; }
  .cn-tst--3 .cn-tst__text { left: 111px; top: 449px; width: 361px; }
  .cn-tst--3 .cn-tst__by   { left: 282px; top: 527px; width: 187px; }

  .cn-tst--4 .cn-tst__box  { left: 552px; top: 428px; width: 419px; }
  .cn-tst--4 .cn-tst__mark { left: 523px; top: 420px; }
  .cn-tst--4 .cn-tst__text { left: 602px; top: 446px; width: 350px; }
  .cn-tst--4 .cn-tst__by   { left: 777px; top: 524px; width: 193px; }

  .cn-res__cta { left: 729px; top: 588px; width: 239px; }

  /* ======================================================================
     7. HOW THE SESSION WORKS — dark #2129:1623 / light #2129:1625 y:4422
     ====================================================================== */
  .cn-works { top: 4316px; height: 932px; }

  .cn-works__dark  { left: -38px; top: 106px; width: 1553px; height: 826px; background: var(--color-surface-dark); }
  .cn-works__lines { left: 668.25px; top: 0.1px; width: 857.65px; height: 960.9px; }

  .cn-works__light {
    left: 2px; top: 106px; width: 1014px; height: 826px;
    background: var(--bg);
    border: var(--stroke-15) solid var(--color-surface-dark);
  }

  .cn-works__photo { left: 1016px; top: 270px; width: 529px; height: 662px; object-fit: cover; }

  .cn-works__chip    { left: -8px; top: 158px; width: 315px; height: 32px; background: var(--color-surface-dark); }
  .cn-works__eyebrow { left: 80px; top: 166px; width: 172px; text-align: center; }

  .cn-works__title {
    left: 80px; top: 198px; width: 456px;
    color: var(--color-text);
    font-size: var(--fs-h2);
    line-height: 39px;
  }

  .cn-works__lead {
    left: 80px; top: 284px; width: 472px;
    color: var(--color-text);
    font-size: var(--fs-lead);
    line-height: 22px;
  }

  .cn-works__arc { left: 117px; width: 432px; height: 54.94px; }
  .cn-works__arc--1 { top: 369.35px; }
  .cn-works__arc--2 { top: 625px; }

  .cn-phase__card {
    width: 360px; height: 149px;
    background: var(--color-surface-dark);
    border: var(--stroke-1) solid var(--black);
    border-radius: var(--radius-2);
  }

  .cn-phase__disc {
    width: 68px; height: 68px;
    background: var(--bg);
    border: 0.68px solid var(--color-surface-dark);
    border-radius: 50%;
  }

  .cn-phase__label,
  .cn-phase__num {
    color: var(--gold);
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
  }

  .cn-phase__name {
    color: var(--gold);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 17px;
  }

  .cn-phase__rule { width: 358px; background: var(--bg); }

  .cn-phase__text {
    color: var(--bg);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 17px;
  }

  .cn-phase--1 .cn-phase__card  { left: 120px; top: 455px; }
  .cn-phase--1 .cn-phase__disc  { left: 80px;  top: 429px; }
  .cn-phase--1 .cn-phase__label { left: 90px;  top: 458px; width: 47px; }
  .cn-phase--1 .cn-phase__num   { left: 110px; top: 442px; width: 7px; }
  .cn-phase--1 .cn-phase__name  { left: 144px; top: 484px; width: 88px; }
  .cn-phase--1 .cn-phase__rule  { left: 121px; top: 509px; }
  .cn-phase--1 .cn-phase__text  { left: 144px; top: 517px; width: 321px; }

  .cn-phase--2 .cn-phase__card  { left: 568px; top: 455px; }
  .cn-phase--2 .cn-phase__disc  { left: 528px; top: 429px; }
  .cn-phase--2 .cn-phase__label { left: 538px; top: 458px; width: 47px; }
  .cn-phase--2 .cn-phase__num   { left: 558px; top: 442px; width: 9px; }
  .cn-phase--2 .cn-phase__name  { left: 592px; top: 484px; width: 121px; }
  .cn-phase--2 .cn-phase__rule  { left: 569px; top: 509px; }
  .cn-phase--2 .cn-phase__text  { left: 592px; top: 517px; width: 324px; }

  .cn-phase--3 .cn-phase__card  { left: 120px; top: 710px; }
  .cn-phase--3 .cn-phase__disc  { left: 80px;  top: 684px; }
  .cn-phase--3 .cn-phase__label { left: 90px;  top: 713px; width: 47px; }
  .cn-phase--3 .cn-phase__num   { left: 110px; top: 697px; width: 9px; }
  .cn-phase--3 .cn-phase__name  { left: 144px; top: 739px; width: 146px; }
  .cn-phase--3 .cn-phase__rule  { left: 121px; top: 764px; }
  .cn-phase--3 .cn-phase__text  { left: 144px; top: 772px; width: 321px; }

  .cn-phase--4 .cn-phase__card  { left: 568px; top: 710px; }
  .cn-phase--4 .cn-phase__disc  { left: 528px; top: 684px; }
  .cn-phase--4 .cn-phase__label { left: 538px; top: 713px; width: 47px; }
  .cn-phase--4 .cn-phase__num   { left: 558px; top: 697px; width: 9px; }
  .cn-phase--4 .cn-phase__name  { left: 592px; top: 739px; width: 239px; }
  .cn-phase--4 .cn-phase__rule  { left: 569px; top: 764px; }
  .cn-phase--4 .cn-phase__text  { left: 592px; top: 772px; width: 299px; }

  /* ======================================================================
     8. YOUR INVESTMENT — outline #2129:1627 y:5320, panel #2129:1628 y:5360
     ====================================================================== */
  .cn-inv { top: 5320px; height: 968px; }

  .cn-inv__outline {
    left: 20px; top: 0; width: 1400px; height: 704px;
    background: var(--bg);
    border: var(--stroke-1) solid var(--color-surface-dark);
  }

  .cn-inv__panel {
    /* height trimmed 928 -> 856 after the two availability slots were removed
       (2026-07-21): the panel now sits ~48px below the last note instead of
       reserving the empty band where the slots used to be. */
    left: 80px; top: 40px; width: 1280px; height: 856px;
    background: var(--color-surface-dark);
  }

  .cn-inv__eyebrow { left: 658px; top: 84px;  width: 124px; text-align: center; }
  .cn-inv__rule    { left: 583px; top: 104px; width: 275px; background: var(--gold-deep); }

  .cn-inv__title {
    left: 387px; top: 112px; width: 667px;
    color: var(--bg);
    font-size: var(--fs-h2);
    font-weight: var(--fw-med);
    line-height: 39px;
    text-align: center;
  }

  .cn-price__body { left: 344px; top: 277px; width: 752px; height: 371px; background: var(--bg); }
  .cn-price__head { left: 456px; top: 272px; width: 528px; height: 59px; background: var(--color-surface-dark); }
  .cn-price__headrule { left: 456px; top: 277px; width: 527.5px; background: var(--gold-deep); }

  .cn-price__title {
    left: 518px; top: 292px; width: 404px;
    color: var(--gold);
    font-size: var(--fs-lead);
    font-weight: var(--fw-med);
    line-height: 22px;
    text-align: center;
    text-transform: uppercase;
  }

  .cn-spec__k, .cn-spec__v { font-size: 14px; line-height: 17px; margin: 0; }
  .cn-spec__k { left: 404px; color: #999999; }
  .cn-spec__v { left: 504px; color: #444444; }

  .cn-spec__k--1, .cn-spec__v--1 { top: 355px; }
  .cn-spec__k--2, .cn-spec__v--2 { top: 383px; }
  .cn-spec__k--3, .cn-spec__v--3 { top: 411px; }
  .cn-spec__k--4, .cn-spec__v--4 { top: 439px; }
  .cn-spec__k--5, .cn-spec__v--5 { top: 467px; }

  .cn-price__divider { left: 404px; top: 504px; width: 632px; background: var(--gold); }

  .cn-price__amount {
    left: 653px; top: 528.77px; width: 134px;
    color: var(--color-text);
    font-size: var(--fs-stat);
    font-weight: var(--fw-semi);
    line-height: 34px;
    text-align: center;
  }

  .cn-price__tabby {
    left: 561px; top: 570.77px; width: 319px;
    color: var(--grey-400);
    font-size: 15px;
    line-height: 18px;
    text-align: center;
  }

  .cn-price__cta { left: 601px; top: 620.77px; width: 239px; }

  .cn-price__secure {
    left: 559px; top: 684px; width: 323px;
    color: #AAAAAA;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
  }

  .cn-inv__note {
    color: var(--bg);
    font-size: var(--fs-lead);
    font-weight: var(--fw-light);
    line-height: 22px;
  }

  .cn-inv__note--1 { left: 344px; top: 747px; width: 752px; }
  .cn-inv__note--2 { left: 343px; top: 804px; width: 769px; }

  .cn-slot {
    top: 896px; width: 276px; height: 72px;
    margin: 0; padding: 0;
    background: var(--color-surface-dark);
    border: var(--stroke-1) solid var(--gold);
  }

  .cn-slot--1 { left: 343px; }
  .cn-slot--2 { left: 820px; }

  .cn-slot__key,
  .cn-slot__val { position: absolute; text-align: center; }

  .cn-slot__key {
    top: 16px;
    color: var(--gold);
    font-size: var(--fs-body);
    font-weight: var(--fw-med);
    line-height: 19px;
    text-transform: uppercase;
  }

  .cn-slot__val {
    top: 37px;
    color: var(--white);
    font-size: 13px;
    line-height: 16px;
  }

  .cn-slot--1 .cn-slot__key { left: 46px; width: 182px; }
  .cn-slot--1 .cn-slot__val { left: 86px; width: 102px; }
  .cn-slot--2 .cn-slot__key { left: 79px; width: 116px; }
  .cn-slot--2 .cn-slot__val { left: 108px; width: 59px; }

  /* ======================================================================
     9. FAQ — chip #2129:1704 y:6432, rows from y:6559
     ====================================================================== */
  /* The FAQ is the only section that changes height at runtime, so it stays in
     flow and carries main's height with it; every section above it is absolute
     and out of flow. min-height keeps the frame's trailing space (7464-6432)
     when all rows are closed. */
  .cn section.cn-faq {
    position: relative;
    display: flow-root;      /* keeps the list's margin-top from collapsing out */
    /* pulled up 6432 -> 6360 (by the 72px reclaimed from the trimmed inv panel)
       so the inter-section gap stays the designed 144px (2026-07-21). */
    margin-top: 6360px;
    min-height: 1032px;
    height: auto;
  }

  .cn-faq__chip    { left: -8px; top: 0;   width: 250px; height: 32px; background: var(--color-surface-dark); }
  .cn-faq__eyebrow { left: 80px; top: 8px; width: 120px; text-align: center; }

  .cn-faq__title {
    left: 80px; top: 40px; width: 680px;
    color: var(--color-text);
    font-size: var(--fs-h2);
    line-height: 39px;
  }

  /* The rows are a real accordion, so this list stays in flow: opening a row
     must push the ones below it down. Figma's 24px step between rows and the
     16px gap under an open header are reproduced with margins.
     (Figma sets the 4th gap to 21px; that is an inconsistency in the file,
     not a designed value — 24px is used throughout.) */
  /* in flow (not absolute) so an expanding row grows the section, and with it
     main's height — otherwise open rows would run under the footer */
  .cn section.cn-faq > .cn-faq__list {
    position: relative;
    left: 0;
    top: 0;
    width: 1280px;
    margin: 127px 0 0 80px;
  }

  .cn-acc + .cn-acc { margin-top: 24px; }

  /* Figma frame #2129:1830 is 1280x48 with padding 14/44/13/81 measured from
     the frame's outer edge; the 1px stroke sits inside it, so each CSS padding
     is one pixel smaller. Content box then measures exactly 21px — the label's
     own line box — which lands it on its Figma y with no centring rounding. */
  .cn-acc__head { height: 48px; padding: 13px 43px 12px 80px; }

  /* Body #2129:1824 is 1280x128 at y:6623 with its answer at x:160 y:6660.
     Padding is that offset less the box's own 1px border; the bottom value
     makes the box total exactly 128 over the answer's three 17px lines. */
  .cn-acc__panel {
    margin-top: 16px;
    padding: 36px 79px 39px;
  }

  .cn-acc__a { width: 793px; }
}

/* ==========================================================================
   MOBILE — the 390 canvas, frame "Phone consultation" #2129:5766
   (390 x 7905). The largest frame in the file: 226 positioned nodes.

   The frame draws no header and no footer, so its y:0 is the top of the PAGE.
   The shared header is 81 tall, main starts at its bottom, and every
   coordinate below is THE FIGMA VALUE MINUS 81. main is 7905 - 81 = 7824.

   STACKED SECTIONS. Unlike program (where each section sits at its own top),
   the nine sections here OVERLAP — #2129:5768 starts at 2130 while #2129:5771
   still runs to 2408, and the hero photo starts at y:0, behind the header. So
   all nine are stacked transparently at top:0 at full height and every child
   carries its literal main-space y. This is the same shape the programs
   listing uses, and it removes a whole class of per-section origin error.
   `background: none` on them is load-bearing — the flow fallback puts fills on
   sections, and a filled full-height section would paint over the whole page.

   PAINT ORDER is explicit. Figma paints all five background plates FIRST
   (#5767 -> #5768 -> #5769 -> #5770 -> #5771) and everything else after, which
   is NOT the DOM order in two places:
     - cn-who: the light plate #5770 must cover the dark #5767 and the line
       texture #5769, but the DOM has dark, frame, lines;
     - cn-works: the dark #5913 must cover the light #5912, but the DOM has
       dark before light.
   Each section therefore carries an explicit ascending z-index (1-9) so it
   forms its own stacking context, and the plates that need to go under are
   pushed to -1/-2 inside it. Without the section z-index those negatives would
   escape and land under an earlier section.

   Stroke alignment, batched as node renders. INSIDE unless listed:
     OUTSIDE 2 : #5775 and #5776 (hero bands, 422x259 -> 426x263 and
                 422x230 -> 426x234), #5783 (hero portrait, 155x186 -> 159x190),
                 #5888 (bio photo, 371x240 -> 375x244), #5889 (bio portrait,
                 205x248 -> 209x252)
     OUTSIDE 1 : #5941-5944 (phase discs, 41.65 -> 43.65)
   All five OUTSIDE photos ship as node renders with the stroke baked in and
   carry no CSS border.

   #2129:5772, the hero photo, carries a 1.25px node blur. The render comes
   back 1644x717 against a declared 1639x712 because the blur expands the
   bounds, so it is placed at the RENDER box (origin shifted by half the
   difference) and the blur is NOT re-applied in CSS.

   #2129:5914-5916, the three curved connector arrows, are the one thing here
   that is MEASURED rather than read. Their declared box (155.46x174.24 at
   x:-34.41) does not match what Figma draws: scanning the frame render for
   gold in that column gives ink at x 9..46 (38 wide) and h 171, with the
   declared y correct to the pixel (5230 / 5434 / 5639). They are placed at the
   measured ink box. Same class of answer as the programs 0.72 card opacity.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------------------------------------------------------------- shell */
  /* flow-root: cn-faq is main's only in-flow child, so without a block
     formatting context its 6807px margin-top collapses through main. */
  .page-consultation main {
    position: relative;
    display: flow-root;
    width: 390px;
    min-height: 7362px;  /* was 7426; -64 to match the FAQ pulled up after the inv-slot removal (2026-07-21) */
    margin: 0;
    padding: 0;
  }

  .cn img { width: auto; height: auto; max-width: none; object-fit: fill; }

  .cn > section {
    position: absolute;
    left: 0; top: 0;
    width: 390px;
    height: 7426px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: none;
    color: inherit;
    /* THE STACKED SECTIONS SWALLOW CLICKS — found at 768 and confirmed to be
       LIVE here too. Every section is full-height with an ascending z-index,
       so .cn-inv at z8 lay over the hero, bio and results CTAs and three of
       the four gold buttons could not be clicked. Measurement and screenshots
       both pass, because the buttons are in exactly the right place and
       simply unreachable; only elementFromPoint catches it. */
    pointer-events: none;
  }
  .cn > section > *,
  .cn > section > picture > img { position: absolute; margin: 0; pointer-events: auto; }

  /* `.cn section + section { margin-top: 48px }` is (0,1,2) and beat the
     `margin: 0` above at (0,1,1) — and an absolutely positioned box still
     honours margin, so every section from cn-who down sat exactly 48px low.
     Matched here at the same specificity so source order wins. */
  .cn section + section { margin-top: 0; }

  .cn-hero { z-index: 1; } .cn-who  { z-index: 2; } .cn-fam { z-index: 3; }
  .cn-bio  { z-index: 4; } .cn-get  { z-index: 5; } .cn-res { z-index: 6; }
  .cn-works{ z-index: 7; } .cn-inv  { z-index: 8; }

  /* the unscoped base rules put margins on headings and adjacent paragraphs,
     and an absolutely positioned box still honours margin */
  .cn h1, .cn h2, .cn p, .cn p + p, .cn ul, .cn dl, .cn figure,
  .cn blockquote, .cn figcaption { margin: 0; }

  /* base gives these a border, padding and a top margin — all wrong here */
  .cn-stage, .cn-phase, .cn-gain, .cn-tst, .cn-slot {
    margin: 0; padding: 0; border: 0;
  }
  .cn-stats, .cn-spec { display: block; gap: 0; }
  .cn-tst__mark { display: block; }

  /* Line 24 hides every empty decorative box with
     `.cn [aria-hidden="true"]:empty { display: none }` at (0,3,0), and the
     desktop block turns them back on at the same specificity. The mobile block
     has to do the same — a per-element `display: block` at (0,1,0) or even
     (0,2,0) loses, and every plate, rule, card and q-box on this page is one of
     these. That was 30 of the first pass's failures. */
  .cn [aria-hidden="true"]:empty { display: block; }
  /* matched to the (0,4,0) hide above so source order wins */
  .cn [aria-hidden="true"]:empty.cn-bio__photo,
  .cn [aria-hidden="true"]:empty.cn-works__arc--3 { display: block; }

  /* ...but these have no 390 counterpart and must STAY hidden. The restore
     above is (0,3,0), so the plain-class hide list further down loses to it —
     each needs the same attribute+pseudo prefix to win. Without this the six
     desktop decoratives came back at their natural size at 0,0, including
     cn-works__photo at 1122x1404 lying across the whole top of the page.
     Every measurement still passed, because these were never measured; only
     the pixel diff caught it. */
  .cn [aria-hidden="true"]:empty.cn-hero__lines,
  .cn [aria-hidden="true"]:empty.cn-who__lines,
  .cn [aria-hidden="true"]:empty.cn-fam__lines,
  .cn [aria-hidden="true"]:empty.cn-bio__lines,
  .cn [aria-hidden="true"]:empty.cn-works__lines,
  .cn [aria-hidden="true"]:empty.cn-works__photo,
  .cn [aria-hidden="true"]:empty.cn-stats__strip,
  .cn [aria-hidden="true"]:empty.cn-price__divider { display: none; }

  /* nodes with no 390 counterpart */
  .cn-hero__lines, .cn-stats__strip, .cn-fam__lines,
  .cn-works__lines, .cn-works__photo, .cn-price__divider { display: none; }

  /* NOT PORTED — #2129:5769, the faint line texture behind the "who" block.
     Its stroke is rgba(187,187,187,0.27) at 0.36px and the light plate #5770
     covers all but its 1608-1721 tail, so almost none of it is visible; and
     like the events rings its declared box cannot be trusted against its own
     render. Left out and flagged rather than placed by guesswork. */
  .cn-who__lines { display: none; }

  /* shared type resets (the base block sets 13/16 eyebrows and 22/26px titles) */
  .cn-hero__eyebrow, .cn-who__eyebrow, .cn-fam__eyebrow, .cn-bio__eyebrow,
  .cn-get__eyebrow, .cn-res__eyebrow, .cn-works__eyebrow, .cn-inv__eyebrow,
  .cn-faq__eyebrow {
    color: var(--gold);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
  }

  /* the four gold buttons, 373x48, mixed case */
  .cn-hero__cta, .cn-bio__cta, .cn-res__cta, .cn-price__cta {
    display: flex;
    min-height: 0;
    width: 373px; height: 48px;
    max-width: none;
    padding: 0; margin: 0;
    font-family: var(--font-button);
    font-size: 14px;
    font-weight: var(--fw-bold);
    letter-spacing: normal;
    text-transform: none;
  }

  /* ===================== 1. HERO — photo y:0, frame y:104 ================= */
  .page-consultation .cn-hero__atelier { left: -898.5px; top: -83.5px;
                                         width: 1644px; height: 717px; }

  .cn-hero__band,
  .cn-hero__panel { left: -20px; width: 426px;
                    background: var(--color-surface-dark);
                    border: 2px solid var(--white); }
  .cn-hero__band  { top: 22px;  height: 263px; }

  /* CLIPPED, not 234 tall. #2129:5776 is declared 422x230 at (-18,388) inside
     FRAME #2129:5773, and a Figma frame clips its children: the frame is
     390x568 at (0,104), so the band is cut at y:672 and the hero photo below
     it shows through from there to 712. Drawn to the clip line (591 local)
     with no bottom border, because the clipped edge draws none. */
  .cn-hero__panel { top: 409px; height: 182px; border-bottom: 0; }

  .cn-hero__rule { left: -18px; top: 68px; width: 252px; height: 1px;
                   background: var(--rule-gold); }

  .cn-hero__eyebrow { left: 8px; top: 48px; width: 216px; }

  .cn-hero__title {
    left: 9px; top: 76px; width: 365px;
    color: var(--white);
    font-weight: var(--fw-semi);
    font-size: 22px;
    line-height: 23px;   /* 22 at 1.06em = 23.32 -> 23 */
    text-transform: uppercase;
  }

  .cn-hero__lead,
  .cn-hero__note {
    left: 9px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }
  .cn-hero__lead { top: 153px; width: 371px; }
  .cn-hero__note { top: 462px; width: 366px; }

  .page-consultation .cn-hero__portrait { left: 116px; top: 250px;
                                          width: 159px; height: 190px;
                                          border: 0; }

  .cn-hero__cta { left: 9px; top: 530px; }

  /* four stat boxes; the key is gold, the value white, both centred in the box */
  .cn-stats { position: static; }
  .cn-stat {
    position: absolute;
    width: 179px; height: 72px;
    background: var(--color-surface-dark);
    border: 1px solid var(--white);
    list-style: none;
  }
  /* three stats now (date box removed): two on top, the third centred below */
  .cn-stat--2 { left: 8px;   top: 655px; }
  .cn-stat--3 { left: 203px; top: 655px; }
  .cn-stat--4 { left: 105px; top: 743px; }

  .cn-stat__key, .cn-stat__val { position: absolute; text-align: center; }
  .cn-stat__key { top: 18px; color: var(--gold); font-weight: var(--fw-med);
                  font-size: 14px; line-height: 17px; text-transform: uppercase; }
  .cn-stat__val { top: 39px; color: var(--white); font-weight: var(--fw-reg);
                  font-size: 12px; line-height: 15px; }

  /* offsetLeft/Top measure from the box's BORDER edge here, so these are the
     plain Figma deltas with no border subtraction */
  .cn-stat--1 .cn-stat__key { left: 44px; width: 81px; }
  .cn-stat--1 .cn-stat__val { left: 37px; width: 95px; }
  .cn-stat--2 .cn-stat__key { left: 57px; width: 66px; }
  .cn-stat--2 .cn-stat__val { left: 44px; width: 91px; }
  .cn-stat--3 .cn-stat__key { left: 62px; width: 56px; }
  .cn-stat--3 .cn-stat__val { left: 24px; width: 131px; }
  .cn-stat--4 .cn-stat__key { left: 81px; width: 18px; }
  .cn-stat--4 .cn-stat__val { left: 38px; width: 102px; }

  /* ===================== 2. WHO — light plate y:950 ====================== */
  /* #5767 dark sits UNDER the line texture, which sits UNDER the light plate */
  .cn-who__dark  { left: 0; top: 1074px; width: 393px; height: 472px;
                   background: var(--color-surface-dark); z-index: -1; }
  .cn-who__frame { left: -369px; top: 869px; width: 760px; height: 658px;
                   background: var(--bg); border: 4px solid var(--ink); }

  .cn-who__chip { left: 95px; top: 901px; width: 200px; height: 27px;
                  background: var(--color-surface-dark); }
  .cn-who__eyebrow { left: 144px; top: 907px; width: 102px; text-align: center; }

  .cn-who__title {
    left: 31px; top: 934px; width: 329px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 20px;
    line-height: 21px;
    text-align: center;
    text-transform: uppercase;
  }

  .cn-stage { position: absolute; left: 8px; width: 374px; }
  .cn-stage--launch { top: 1078px; }
  .cn-stage--growth { top: 1230px; }
  .cn-stage--scale  { top: 1378px; }

  .cn-stage > * { position: absolute; }

  .cn-stage__card {
    left: 0; top: 0; width: 374px; height: 102px;
    background: var(--color-surface-dark);
    border: 1px solid #000;
  }
  /* the vertical white bar inside the card (#5821 / #5822 / #5829) */
  .cn-stage__card::after {
    content: "";
    position: absolute;
    left: 52px; top: 0;
    width: 1px; height: 100px;
    background: var(--white);
  }

  .cn-stage__disc {
    left: 0; top: -26px; width: 53px; height: 53px;
    border-radius: 50%;
    background: var(--bg);
    border: 0.53px solid var(--ink);
  }

  .cn-stage__label {
    top: -5px;
    color: var(--gold);
    font-weight: var(--fw-med);
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
  }
  .cn-stage--launch .cn-stage__label { left: 5px;  width: 43px; }
  .cn-stage--growth .cn-stage__label { left: 3px;  width: 46px; }
  .cn-stage--scale  .cn-stage__label { left: 10px; width: 33px; }

  .cn-stage__name {
    left: 60px; top: 11px;
    color: var(--gold);
    font-weight: var(--fw-semi);
    font-size: 14px;
    line-height: 15px;
  }
  .cn-stage--launch .cn-stage__name { width: 81px; }
  .cn-stage--growth .cn-stage__name { width: 119px; }
  .cn-stage--scale  .cn-stage__name { width: 114px; }

  .cn-stage__rule { left: 53.5px; top: 36px; width: 320px; height: 1px;
                    background: var(--bg); }

  .cn-stage__text {
    left: 60px; top: 44px;
    color: var(--bg);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 12px;
  }
  .cn-stage--launch .cn-stage__text { width: 287px; }
  .cn-stage--growth .cn-stage__text { width: 308px; }
  .cn-stage--scale  .cn-stage__text { width: 291px; }

  /* ===================== 3. SOUND FAMILIAR — plate y:1659 ================= */
  .cn-fam__dark  { left: 0; top: 2049px; width: 393px; height: 486px;
                   background: var(--color-surface-dark); z-index: -2; }
  .cn-fam__light { left: -369px; top: 1578px; width: 760px; height: 749px;
                   background: var(--bg); border: 4px solid var(--ink);
                   z-index: -1; }

  .cn-fam__chip { left: -16px; top: 1610px; width: 200px; height: 27px;
                  background: var(--color-surface-dark); }
  .cn-fam__eyebrow { left: 8px; top: 1616px; width: 107px; }

  .cn-fam__title {
    left: 8px; top: 1643px; width: 316px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 20px;
    line-height: 21px;
    text-transform: uppercase;
  }

  .cn-fam__lead {
    left: 8px; top: 1709px; width: 344px;
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 17px;
  }

  .cn-q__box { left: -45px; width: 413px; height: 70px;
               background: rgba(45, 45, 45, 0.04);
               border: 1px solid var(--ink); }
  .cn-q__box--1 { top: 1809px; } .cn-q__box--2 { top: 1891px; }
  .cn-q__box--3 { top: 1973px; } .cn-q__box--4 { top: 2055px; }
  .cn-q__box--5 { top: 2137px; } .cn-q__box--6 { top: 2219px; }

  /* The DOM order of the six quotes is NOT the frame's reading order: the
     frame runs q1, q2, q6, q4, q5, q3 down the page. Mapped by text. */
  .cn-q {
    position: absolute;
    left: 48px;
    padding-left: 16px;
    color: var(--color-text);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 12px;
  }
  .cn-q::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold);
  }
  .cn-q--1 { top: 1831px; width: 294px; }
  .cn-q--2 { top: 1913px; width: 294px; }
  .cn-q--6 { top: 1995px; width: 272px; }
  .cn-q--4 { top: 2077px; width: 272px; }
  .cn-q--5 { top: 2159px; width: 272px; }
  .cn-q--3 { top: 2241px; width: 256px; }

  .cn-fam__close {
    left: 8px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }
  .cn-fam__close--1 { top: 2354px; width: 368px; }
  .cn-fam__close--2 { top: 2468px; width: 364px; }

  .page-consultation .cn-fam__dash { left: 191px; top: 2418.5px;
                                     width: 8px; height: 33.75px; }

  /* ===================== 4. BIO — frame y:2637 =========================== */
  .cn-bio__panel {
    left: -345px; top: 2556px; width: 742px; height: 867px;
    background: var(--bg);
    border: 1px solid var(--ink);
    padding: 0;
  }
  .cn-bio__panel::before {
    content: "";
    position: absolute;
    left: 37px; top: 21px;
    width: 704px; height: 813px;
    background: var(--color-surface-dark);
  }

  .cn-bio__eyebrow { left: 8px; top: 2604px; width: 106px; }

  .cn-bio__rule { height: 1px; }
  .cn-bio__rule--short { left: -18px; top: 2624px; width: 252px;
                         background: var(--rule-gold); }
  .cn-bio__rule--long  { left: 8px;  top: 2801px; width: 178px;
                         background: var(--gold); }

  .cn-bio__title {
    left: 9px; top: 2630px; width: 235px;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: 20px;
    line-height: 21px;
    text-transform: uppercase;
  }

  .cn-bio__lead {
    left: 9px; top: 2678px; width: 351px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }

  .cn-bio__means {
    left: 8px; top: 2778px; width: 117px;
    color: var(--bg);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 15px;
  }

  /* #5874/5881/5877/5884 — a 2x2 grid; the dot is 9px at the group origin and
     the label sits at (8, 10), different again from the "who" bullets above */
  .cn-bio__point {
    position: absolute;
    padding-left: 8px;
    padding-top: 10px;
    width: 175px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 12px;
  }
  .cn-bio__point::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold);
  }
  .cn-bio__point--1 { left: 9px;   top: 2825px; }
  .cn-bio__point--2 { left: 203px; top: 2825px; }
  .cn-bio__point--3 { left: 9px;   top: 2887px; }
  .cn-bio__point--4 { left: 203px; top: 2887px; }

  /* two photos: the wide band #5888 first, the portrait #5889 over it */
  .page-consultation .cn-bio__photo    { left: 8px;  top: 2973px;
                                         width: 375px; height: 244px; border: 0; }
  .page-consultation .cn-bio__portrait { left: 91px; top: 2965px;
                                         width: 209px; height: 252px; border: 0; }

  .cn-bio__close {
    left: 9px; top: 3244px; width: 351px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }

  .cn-bio__cta { left: 9px; top: 3327px; }

  /* ===================== 5. WHAT YOU GET — frame y:3503 =================== */
  .cn-get__outline { left: -18px; top: 3422px; width: 415px; height: 569px;
                     background: var(--bg); border: 1px solid var(--ink); }
  .cn-get__panel   { left: -307px; top: 3444px; width: 704px; height: 523px;
                     background: var(--color-surface-dark); padding: 0; }

  .cn-get__eyebrow { left: 8px; top: 3470px; width: 123px; }
  .cn-get__rule    { left: -18px; top: 3490px; width: 171.5px; height: 1px;
                     background: var(--rule-gold); }

  /* 373 not Figma's 372: the second half measures 0.x px over and spilled to a
     third line, doubling the block. Measured window is 373+. */
  .cn-get__title {
    left: 9px; top: 3496px; width: 373px;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: 19px;
    line-height: 20px;
    text-transform: uppercase;
  }

  .cn-get__sub {
    left: 9px; top: 3544px; width: 307px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }

  .cn-gain { position: absolute; }
  .cn-gain > * { position: absolute; left: 0; }
  .cn-gain--1 { left: 7px;   top: 3610px; }
  .cn-gain--2 { left: 203px; top: 3610px; }
  .cn-gain--3 { left: 7px;   top: 3692px; }
  .cn-gain--4 { left: 203px; top: 3692px; }
  .cn-gain--5 { left: 7px;   top: 3774px; }
  .cn-gain--6 { left: 203px; top: 3774px; }

  /* gold, not the light body colour — sampled off the frame render as
     rgb(216,160,37), i.e. exactly --gold */
  .cn-gain__title {
    top: 0;
    color: var(--gold);
    font-weight: var(--fw-semi);
    font-size: 12px;
    line-height: 12px;
    /* All six titles are one line in Figma. "A precise brand analysis"
       measures 142.3 in its own 142 box (the Chrome-vs-Figma metric gap), so
       it wrapped to two lines and the rule below cut through the second line.
       nowrap holds every title on one line; the 0.3px is invisible and the
       179-wide rule leaves ample room. */
    white-space: nowrap;
  }
  .cn-gain__rule { top: 17px; width: 179px; height: 1px;
                   background: var(--gold-deep); }
  .cn-gain__text {
    top: 22px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 12px;
  }

  .cn-gain--1 .cn-gain__title { width: 179px; }
  .cn-gain--2 .cn-gain__title { width: 142px; }
  .cn-gain--3 .cn-gain__title { width: 162px; }
  .cn-gain--4 .cn-gain__title { width: 123px; }
  .cn-gain--5 .cn-gain__title { width: 125px; }
  .cn-gain--6 .cn-gain__title { width: 165px; }

  .cn-gain--1 .cn-gain__text { width: 165px; }
  .cn-gain--2 .cn-gain__text { width: 161px; }
  .cn-gain--3 .cn-gain__text { width: 180px; }
  .cn-gain--4 .cn-gain__text { width: 175px; }
  .cn-gain--5 .cn-gain__text { width: 180px; }
  .cn-gain--6 .cn-gain__text { width: 175px; }

  /* #6026 — stroke "0px 1px 1px": no top edge, same construction as the
     event and program frames */
  .cn-get__foot { left: -186px; top: 3866px; width: 568px; height: 56px;
                  background: none;
                  border: 1px solid var(--bg);
                  border-top: 0; }

  /* The footnote is a CHILD of #6026, not a sibling, so `section > *` never
     reaches it and it needs its own position:absolute — it was sitting static
     at 0,0 inside the box. Offsets are from that box, not the section. */
  .cn-get__footnote {
    position: absolute;
    left: 195px; top: 6px; width: 326px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }

  /* ===================== 6. CLIENT RESULTS — photo y:4096 ================= */
  .page-consultation .cn-res__bg { left: -803px; top: 4015px;
                                   width: 1734px; height: 888px; }
  .cn-res__panel { left: -3px; top: 4054px; width: 390px; height: 817px;
                   background: var(--color-surface-dark); }

  .cn-res__eyebrow { left: 5px; top: 4086px; width: 99px; }
  .cn-res__rule    { left: -21px; top: 4106px; width: 252px; height: 1px;
                     background: var(--rule-gold); }

  /* 353 not Figma's 351 — same 4-lines-instead-of-3 text-metric overflow */
  .cn-res__title {
    left: 6px; top: 4112px; width: 353px;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: 20px;
    line-height: 21px;
    text-transform: uppercase;
  }

  .cn-tst { position: absolute; left: -291px; }
  .cn-tst > * { position: absolute; }
  .cn-tst--1 { top: 4199px; }
  .cn-tst--2 { top: 4346px; }
  .cn-tst--3 { top: 4498px; }
  .cn-tst--4 { top: 4645px; }

  .cn-tst__box { left: 0; top: 0; width: 687px; height: 120px;
                 background: rgba(255, 255, 255, 0.06);
                 border: 1px solid var(--ink); }

  /* Noto Serif SC 79.93 — the only place this family is used on the site. It
     DOES resolve: the glyph takes a full-width 1em advance (CJK convention),
     which is exactly Figma's 80-wide box at 79.93px. `document.fonts.check`
     reports false for U+201C, but that is a known false negative on families
     served in many unicode-range subsets — measuring the glyph proves it.
     Gold, not white: sampled off the frame render as rgb(216,160,37). */
  .cn-tst__mark {
    left: 254px; top: 0; width: 80px; height: 104px;
    color: var(--gold);
    font-family: 'Noto Serif SC', serif;
    font-weight: var(--fw-reg);
    font-size: 79.93px;
    line-height: 104px;
  }

  .cn-tst__text {
    left: 333px; top: 26px;
    color: var(--white);
    font-style: italic;
    font-weight: var(--fw-light);
    font-size: 13px;
    line-height: 17px;
  }
  /* forces Figma's line 1/2 split; the space before it collapses at end of
     line, so the quote string itself is unchanged */
  .cn [aria-hidden="true"]:empty.cn-brk { display: inline; }
  .cn-brk::before { content: "\A"; white-space: pre; }

  .cn-tst--1 .cn-tst__text { width: 331px; }
  .cn-tst--2 .cn-tst__text,
  .cn-tst--4 .cn-tst__text { width: 334px; }
  /* 324 not Figma's declared 334: the file breaks line 2 before "the" and the
     browser pulls that word up. Measured window 323-324. Another short-word
     early break, alongside t1's "a" above. */
  .cn-tst--3 .cn-tst__text { width: 324px; }

  .cn-tst__by {
    top: 84px;
    color: var(--white);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 15px;
  }
  .cn-tst--1 .cn-tst__by { left: 480px; width: 188px; }
  .cn-tst--2 .cn-tst__by { left: 419px; width: 249px; }
  .cn-tst--3 .cn-tst__by { left: 497px; width: 173px; }
  .cn-tst--4 .cn-tst__by { left: 491px; width: 178px; }

  .cn-res__cta { left: 6px; top: 4797px; }

  /* ===================== 7. HOW IT WORKS — frame y:5008 =================== */
  .cn-works__light { left: -28px; top: 4927px; width: 468px; height: 984px;
                     background: var(--bg); border: 4px solid var(--ink);
                     z-index: -1; }
  .cn-works__dark  { left: -47px; top: 5161px; width: 537px; height: 678px;
                     background: var(--color-surface-dark); }

  .cn-works__chip { left: -19px; top: 4971px; width: 200px; height: 27px;
                    background: var(--color-surface-dark); }
  .cn-works__eyebrow { left: 4px; top: 4977px; width: 159px; }

  .cn-works__title {
    left: 4px; top: 5004px; width: 267px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 20px;
    line-height: 21px;
    text-transform: uppercase;
  }

  .cn-works__lead {
    left: 4px; top: 5054px; width: 365px;
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 17px;
  }

  /* measured ink box, not the declared one — see the header note.
     `content:` swaps the replaced image without a <picture> wrapper, which
     keeps these three out of the grandchild-of-section trap entirely. */
  .page-consultation .cn-works__arc {
    left: 9px; width: 38px; height: 171px;
    content: url("../img/vec/m-cn-arrow.svg");
  }
  .cn-works__arc--1 { top: 5149px; }
  .cn-works__arc--2 { top: 5353px; }
  .cn-works__arc--3 { top: 5558px; }

  .cn-phase { position: absolute; left: 71px; }
  .cn-phase > * { position: absolute; }
  .cn-phase--1 { top: 5140px; }
  .cn-phase--2 { top: 5340px; }
  .cn-phase--3 { top: 5540px; }
  .cn-phase--4 { top: 5740px; }

  .cn-phase__card { left: 0; top: 0; width: 242px; height: 148px;
                    background: var(--color-surface-dark);
                    border: 1px solid var(--white); }

  /* OUTSIDE 1: 41.65 declared, 43.65 drawn */
  .cn-phase__disc { left: -11px; top: -19px; width: 43.65px; height: 43.65px;
                    border-radius: 50%;
                    background: var(--color-surface-dark);
                    border: 1px solid var(--white); }

  .cn-phase__label {
    left: -5px; top: 0.75px; width: 31px;
    color: var(--gold);
    font-weight: var(--fw-semi);
    font-size: 9px;
    line-height: 11px;
    text-transform: uppercase;
  }
  .cn-phase__num {
    top: -11px;
    color: var(--gold);
    font-weight: var(--fw-semi);
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
  }
  .cn-phase--1 .cn-phase__num { left: 8px; width: 5px; }
  .cn-phase--2 .cn-phase__num,
  .cn-phase--3 .cn-phase__num,
  .cn-phase--4 .cn-phase__num { left: 7px; width: 7px; }

  .cn-phase__name {
    left: 20px; top: 30px;
    color: var(--gold);
    font-weight: var(--fw-semi);
    font-size: 14px;
    line-height: 15px;
  }
  .cn-phase--1 .cn-phase__name { width: 76px; }
  .cn-phase--2 .cn-phase__name { left: 19.5px; width: 105px; }
  .cn-phase--3 .cn-phase__name { width: 126px; }
  .cn-phase--4 .cn-phase__name { width: 100px; }

  .cn-phase__rule { top: 55px; width: 229.5px; height: 1px; background: var(--bg); }
  .cn-phase--1 .cn-phase__rule { left: 1px; }
  .cn-phase--2 .cn-phase__rule,
  .cn-phase--3 .cn-phase__rule,
  .cn-phase--4 .cn-phase__rule { left: 0; }

  .cn-phase__text {
    left: 20px; top: 63px;
    color: var(--bg);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 12px;
  }
  /* The phase copy carries a TRAILING <br> in the markup, which adds an empty
     line box and made phase 2 six lines against Figma's five. Suppressing it
     is right rather than widening the box: at Figma's own 208 the text is
     exactly five lines once the phantom line is gone. */
  .cn-phase__text br:last-child { display: none; }

  .cn-phase--1 .cn-phase__text { width: 195px; }
  .cn-phase--2 .cn-phase__text { width: 208px; }
  .cn-phase--3 .cn-phase__text { width: 210px; }
  .cn-phase--4 .cn-phase__text { width: 216px; }

  /* ===================== 8. INVESTMENT — frame y:6012 ==================== */
  .cn-inv__outline { left: -348px; top: 5931px; width: 742px; height: 820px;
                     background: var(--bg); border: 1px solid var(--ink); }
  .cn-inv__panel   { left: -310px; top: 5953px; width: 704px; height: 726px;
                     /* height trimmed 790 -> 726 after the availability slots
                        were removed (2026-07-21) — ~48px below the last note. */
                     background: var(--color-surface-dark); padding: 0; }

  .cn-inv__eyebrow { left: 5px; top: 5979px; width: 115px; }
  .cn-inv__rule    { left: -21px; top: 5999px; width: 252px; height: 1px;
                     background: var(--rule-gold); }

  .cn-inv__title {
    left: 6px; top: 6005.33px; width: 373px;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: 19px;
    line-height: 20px;
    text-transform: uppercase;
  }

  .cn-price { position: absolute; left: 29px; top: 6097px;
              width: 332px; height: 353px; background: var(--white); }
  .cn-price > *, .cn-price__body > * { position: absolute; }
  .cn-price__body { position: static; }

  .cn-price__head     { left: 61px; top: 0; width: 211px; height: 54px;
                        background: var(--color-surface-dark); }
  .cn-price__headrule { left: 61px; top: 0; width: 211px; height: 1px;
                        background: var(--rule-gold); }

  .cn-price__title {
    left: 80px; top: 10px; width: 172px;
    color: var(--gold);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 17px;
    text-align: center;
  }

  .cn-spec { position: static; }
  .cn-spec__k, .cn-spec__v {
    position: absolute;
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 12px;
    line-height: 15px;
  }
  .cn-spec__k { left: 27px; }
  .cn-spec__v { left: 101px; margin: 0; }
  .cn-spec__k--1 { top: 78px;  width: 44px; }
  .cn-spec__v--1 { top: 78px;  width: 190px; }
  .cn-spec__k--2 { top: 101px; width: 52px; }
  .cn-spec__v--2 { top: 101px; width: 156px; }
  .cn-spec__k--3 { top: 124px; width: 37px; }
  .cn-spec__v--3 { top: 124px; width: 195px; }
  .cn-spec__k--4 { top: 162px; width: 50px; }
  .cn-spec__v--4 { top: 162px; width: 196px; }
  .cn-spec__k--5 { top: 185px; width: 60px; }
  .cn-spec__v--5 { top: 185px; width: 96px; }

  .cn-price__amount {
    left: 128px; top: 224px; width: 77px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 16px;
    line-height: 19px;
    text-align: center;
  }
  .cn-price__tabby {
    left: 49px; top: 245px; width: 234px;
    color: #888888;
    font-weight: var(--fw-reg);
    font-size: 11px;
    line-height: 13px;
    text-align: center;
  }

  .cn-price__cta { position: absolute; left: -23px; top: 282px; }

  .cn-price__secure {
    left: 32px; top: 362px; width: 269px;
    color: #AAAAAA;
    font-weight: var(--fw-reg);
    font-size: 10px;
    line-height: 12px;
    text-align: center;
  }

  .cn-inv__note {
    left: 8px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 14px;
    line-height: 17px;
  }
  .cn-inv__note--1 { top: 6503px; width: 371px; }
  .cn-inv__note--2 { top: 6563px; width: 371px; }

  .cn-slot { position: absolute; top: 6663px;
             width: 179px; height: 72px;
             background: var(--color-surface-dark);
             border: 1px solid var(--gold); }
  .cn-slot--1 { left: 8px; }
  .cn-slot--2 { left: 203px; }

  .cn-slot__key, .cn-slot__val { position: absolute; text-align: center; }
  .cn-slot__key { top: 18px; color: var(--gold); font-weight: var(--fw-med);
                  font-size: 14px; line-height: 17px; text-transform: uppercase; }
  .cn-slot__val { top: 39px; color: var(--white); font-weight: var(--fw-reg);
                  font-size: 12px; line-height: 15px; }
  .cn-slot--1 .cn-slot__key { left: 44px; width: 81px; }
  .cn-slot--1 .cn-slot__val { left: 37px; width: 95px; }
  .cn-slot--2 .cn-slot__key { left: 39px; width: 102px; }
  .cn-slot--2 .cn-slot__val { left: 62px; width: 55px; }

  /* ===================== 9. FAQ — chip y:6888, IN FLOW ==================== */
  /* The only section in flow, so opening a row grows main instead of being
     clipped by the stacked full-height sections above it. */
  .cn > section.cn-faq {
    position: relative;
    display: flow-root;
    left: auto; top: auto;
    width: 390px;
    height: auto;
    /* pulled up 6807 -> 6743 (64px reclaimed from the trimmed inv panel) so the
       inter-section gap stays the designed 64px (2026-07-21). */
    margin-top: 6743px;
    overflow: visible;
    z-index: 9;
  }

  .cn-faq__chip { left: -16px; top: 0; width: 200px; height: 27px;
                  background: var(--color-surface-dark); }
  .cn-faq__eyebrow { left: 7px; top: 6px; width: 111px; }

  .cn-faq__title {
    left: 7px; top: 33px; width: 326px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 20px;
    line-height: 21px;
    text-transform: uppercase;
  }

  .cn > section.cn-faq > .cn-faq__list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 374px;
    margin: 78px 0 0 8px;
    gap: 16px;
  }

  .cn-faq__list .cn-acc__head {
    height: 35px;
    min-height: 0;
    padding: 0 9px 0 8px;
  }
  /* row 6's question is two lines, so its row is 52 not 35 */
  .cn-faq__list .cn-acc:nth-child(6) .cn-acc__head { height: 52px; }

  .cn-faq__list .cn-acc__q { font-size: 14px; line-height: 17px;
                             font-weight: var(--fw-reg); }

  .cn-faq__list .cn-acc__icon { position: relative; top: 0.5px;
                                width: 12px; height: 12px; }
  .cn-faq__list .cn-acc__icon::before { left: 0; top: 5.2255px;
                                        width: 12px; height: 1.549px; }
  .cn-faq__list .cn-acc__icon::after  { left: 5.2255px; top: 0;
                                        width: 1.549px; height: 12px; }

  .cn-faq__list .cn-acc__panel {
    width: 375px;
    min-height: 126px;
    margin: 9px 0 0 -1px;
    padding: 15px 0 0 9px;
  }
  .cn-faq__list .cn-acc__a { width: 355px; font-size: 12px; line-height: 15px; }

  /* ---- single-line holds ------------------------------------------------
     Nodes Figma draws on ONE line that Chrome measures fractionally wider. */
  .cn-stat__key, .cn-stat__val,
  .cn-slot__key, .cn-slot__val,
  .cn-bio__means,
  .cn-price__amount,
  .cn-tst__by,
  .cn-phase__name, .cn-stage__name,
  .cn-hero__eyebrow, .cn-who__eyebrow, .cn-fam__eyebrow, .cn-bio__eyebrow,
  .cn-get__eyebrow, .cn-res__eyebrow, .cn-works__eyebrow, .cn-inv__eyebrow,
  .cn-faq__eyebrow,
  .cn-faq__title { white-space: nowrap; }
}

/* ==========================================================================
   TABLET — the 768 Figma canvas #2129:7903 ("tablet consultation"),
   768 x 7853. The frame draws NO chrome (rows 0-105 are the atelier photo,
   which runs BEHIND the real header, and the dark hero band only starts at
   y:106), so every coordinate below is the Figma value MINUS 81 and
   main = 7853 - 81 = 7772.

   Stroke alignment, batched over 18 boxes: EVERY bordered box on this frame
   renders at its declared size (INSIDE) — including the 8px who plates and
   the 12px works plate — EXCEPT #2129:7930, the hero portrait, which is
   OUTSIDE 4 (215x259 declared, 223x267 drawn).

   Sections OVERLAP (cn-who's light plate runs 776..1640 while its dark plate
   runs 1208..1680), so all nine are stacked at top:0 at full height,
   transparent, with an ascending z-index ladder — the same shape the 390
   block uses. cn-faq alone is IN FLOW.

   Line heights are written in px throughout: Figma rounds to the nearest
   integer, and every multi-line box below then matches its declared height.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  /* ---------------------------------------------------------------- shell */
  /* flow-root: cn-faq is main's only in-flow child, so without a block
     formatting context its 6892px margin-top collapses through main. */
  .page-consultation main {
    position: relative;
    display: flow-root;
    width: 768px;
    min-height: 7503px;  /* was 7552; -49 to match the FAQ pulled up after the inv-slot removal (2026-07-21) */
    margin-inline: auto;
    padding: 0;
  }

  .cn img { width: auto; height: auto; max-width: none; object-fit: fill; }

  .cn > section {
    position: absolute;
    left: 0; top: 0;
    width: 768px;
    height: 7552px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: none;
    color: inherit;
    /* THE STACKED SECTIONS SWALLOW CLICKS. Each is full-height (7772) with an
       ascending z-index, so .cn-inv at z8 lies over the hero, bio and results
       CTAs — `elementFromPoint` returned .cn-inv for three of the four gold
       buttons. Every measurement passed, because the buttons were in exactly
       the right place and simply unreachable. The section box is made inert
       and its children take pointer events back (the subtree inherits), so
       each element only intercepts where it is actually drawn. */
    pointer-events: none;
  }
  .cn > section > *,
  .cn > section > picture > img { position: absolute; margin: 0; pointer-events: auto; }

  /* `.cn section + section { margin-top: 48px }` is (0,1,2) and beats the
     `margin: 0` above at (0,1,1) — and an absolutely positioned box still
     honours margin, so every section from cn-who down sat exactly 48px low.
     Matched here at the same specificity so source order wins. */
  .cn section + section { margin-top: 0; }

  .cn-hero { z-index: 1; } .cn-who  { z-index: 2; } .cn-fam { z-index: 3; }
  .cn-bio  { z-index: 4; } .cn-get  { z-index: 5; } .cn-res { z-index: 6; }
  .cn-works{ z-index: 7; } .cn-inv  { z-index: 8; }

  /* the unscoped base rules put margins on headings and adjacent paragraphs */
  .cn h1, .cn h2, .cn p, .cn p + p, .cn ul, .cn dl, .cn figure,
  .cn blockquote, .cn figcaption { margin: 0; }

  /* base gives these a border, padding and a top margin — all wrong here */
  .cn-stage, .cn-phase, .cn-gain, .cn-tst, .cn-slot {
    margin: 0; padding: 0; border: 0;
  }
  .cn-stats, .cn-spec { display: block; gap: 0; }
  .cn-tst__mark { display: block; }

  /* Line 24 hides every empty decorative box with
     `.cn [aria-hidden="true"]:empty { display: none }` at (0,3,0). A
     per-element `display` at (0,1,0) or (0,2,0) loses to it, and every plate,
     rule, card and q-box on this page is one of these. */
  .cn [aria-hidden="true"]:empty { display: block; }
  /* the third phase connector IS drawn at 768 (unlike 1440), so it has to be
     restored at the same (0,4,0) the base hide uses */
  .cn [aria-hidden="true"]:empty.cn-works__arc--3 { display: block; }

  /* ...but these have no 768 counterpart and must STAY hidden. The restore
     above is (0,3,0), so a plain-class hide loses to it — each needs the same
     attribute+pseudo prefix to win. Without this the desktop decoratives come
     back at their natural size at 0,0. */
  .cn [aria-hidden="true"]:empty.cn-hero__lines,
  .cn [aria-hidden="true"]:empty.cn-hero__panel,
  .cn [aria-hidden="true"]:empty.cn-who__lines,
  .cn [aria-hidden="true"]:empty.cn-fam__lines,
  .cn [aria-hidden="true"]:empty.cn-bio__lines,
  .cn [aria-hidden="true"]:empty.cn-bio__photo,
  .cn [aria-hidden="true"]:empty.cn-works__lines,
  .cn [aria-hidden="true"]:empty.cn-brk { display: none; }

  /* NOT DRAWN at 768. The Yaser portrait is a real content difference — the
     1440 frame puts him in the bio panel and this frame has no photo there at
     all, confirmed by cropping the bio band out of the frame render. FLAGGED. */
  .page-consultation .cn-bio__portrait { display: none; }

  /* --- shared type --------------------------------------------------------
     the base block sets 13/16 eyebrows and 22/26px titles */
  .cn-hero__eyebrow, .cn-who__eyebrow, .cn-fam__eyebrow, .cn-bio__eyebrow,
  .cn-get__eyebrow, .cn-res__eyebrow, .cn-works__eyebrow, .cn-inv__eyebrow,
  .cn-faq__eyebrow {
    color: var(--gold);
    font-weight: var(--fw-reg);
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
  }

  .cn-who__title, .cn-fam__title, .cn-bio__title, .cn-get__title,
  .cn-res__title, .cn-works__title, .cn-inv__title, .cn-faq__title {
    font-size: 26px;
    line-height: 31px;
    text-transform: uppercase;
  }

  /* the four gold buttons are the same 239x52 component instance the team
     frame uses, so the shared .btn typography carries over unchanged */
  .cn-hero__cta, .cn-bio__cta, .cn-res__cta, .cn-price__cta {
    display: inline-flex;
    width: 239px; height: 52px;
    min-height: 52px; max-width: none;
    padding: 0; margin: 0;
  }

  /* every nested component positions its own children */
  .cn-stat > *, .cn-stage > *, .cn-phase > *, .cn-tst > *,
  .cn-slot > *, .cn-price > *, .cn-gain > *,
  .cn-get__foot > * { position: absolute; }

  /* Nodes Figma renders on a single line. Chrome measures each 1.61 and
     3.25px wider than the file's own box and spills a second line; the line
     COUNT check is the only thing that catches it. */
  /* ALL NINE eyebrows overflow their own Figma box by 0.02-1.61px and spill a
     second line — the boxes are hug-width in the file, so Chrome's slightly
     wider metrics break every one of them. */
  .cn-hero__eyebrow, .cn-who__eyebrow, .cn-fam__eyebrow, .cn-bio__eyebrow,
  .cn-get__eyebrow, .cn-res__eyebrow, .cn-works__eyebrow, .cn-inv__eyebrow,
  .cn-faq__eyebrow,
  .cn-bio__title, .cn-faq__title,
  .cn-tst__by, .cn-spec__v--3, .cn-spec__v--5, .cn-price__secure,
  .cn-stat__key, .cn-slot__key,
  .cn-gain--3 .cn-gain__title, .cn-gain--6 .cn-gain__title { white-space: nowrap; }

  /* ===================== 1. HERO — photo y:0, band y:106 ================== */
  /* the node render is 784x676 against a declared 779x671 because the 1.25px
     node blur bleeds 2.5px each side, so it is placed at the render box and
     the blur is NOT re-applied in CSS */
  .page-consultation .cn-hero__atelier {
    left: -2.5px; top: -83.5px; width: 784px; height: 676px;
  }

  .cn-hero__band {
    left: 0; top: 25px; width: 769px; height: 426px;
    background: var(--color-surface-dark);
    border: 4px solid var(--white);
  }

  .cn-hero__rule {
    left: 5px; top: 79px; width: 277px; height: 1px;
    background: #CD9926;              /* fill_8a077c4e */
  }

  .cn-hero__eyebrow { left: 40px; top: 59px; width: 234px; text-align: center; }

  .cn-hero__title {
    left: 42px; top: 88px; width: 608px;
    color: var(--white);
    font-size: 32px; font-weight: var(--fw-bold); line-height: 34px;
  }

  .cn-hero__lead {
    left: 42px; top: 204px; width: 470px;
    color: var(--white);
    font-size: 15px; font-weight: var(--fw-reg); line-height: 18px;
  }

  .cn-hero__note {
    left: 42px; top: 266px; width: 439px;
    color: var(--white);
    font-size: 15px; font-weight: var(--fw-light); line-height: 18px;
  }

  .cn-hero__cta { left: 42px; top: 350px; }

  /* OUTSIDE 4 — 215x259 declared, 223x267 drawn. It ships as a NODE RENDER,
     which comes back at 223x267 with the white stroke baked in, so it carries
     no CSS border. */
  .page-consultation .cn-hero__portrait {
    left: 560px; top: 184px; width: 223px; height: 267px;
    border: 0;
  }

  /* TWO full-bleed strips at Figma 576 and 667; the markup has one element, so
     the second is its ::after. The strip has a 1px border and children measure
     from the padding box, hence 90 rather than 91. */
  .cn-stats__strip {
    left: -206px; top: 495px; width: 1441px; height: 57px;
    background: var(--color-surface-dark);
    border: 1px solid var(--white);
  }
  .cn-stats__strip::after {
    content: "";
    position: absolute;
    left: -1px; top: 90px; width: 1441px; height: 57px;
    background: var(--color-surface-dark);
    border: 1px solid var(--white);
  }

  .cn-stats { left: 0; top: 0; width: 768px; height: 0; }

  /* .cn-stat is a child of .cn-stats, so it is a GRANDCHILD of the section and
     `.cn > section > *` never reaches it — it needs `position` in its own
     right, or its own left/top are inert and its children resolve against the
     section instead. Every other component here (.cn-tst, .cn-phase, .cn-gain,
     .cn-slot, .cn-price) IS a direct child and is already covered. */
  .page-consultation .cn-stat {
    position: absolute;
    width: 276px; height: 72px;
    background: var(--color-surface-dark);
    border: 1px solid var(--white);
  }
  /* three stats now (date box removed): two on top, the third centred below */
  .cn-stat--2 { left: 42px;  top: 480px; }
  .cn-stat--3 { left: 452px; top: 480px; }
  .cn-stat--4 { left: 246px; top: 571px; }

  /* every child `top` is Figma minus 1 — the box has a 1px border and children
     measure from the padding box while Figma measures from the outer edge */
  .page-consultation .cn-stat__key {
    color: var(--gold);
    font-size: 16px; font-weight: var(--fw-med); line-height: 19px;
    text-transform: uppercase; text-align: center;
  }
  .page-consultation .cn-stat__val {
    color: var(--white);
    font-size: 13px; font-weight: var(--fw-reg); line-height: 16px;
    text-align: center;
  }
  .cn-stat--1 .cn-stat__key { left: 91px;  top: 16px; width: 92px; }
  .cn-stat--1 .cn-stat__val { left: 86px;  top: 37px; width: 102px; }
  /* #2129:7940 alone is Semi Bold, not Medium */
  .cn-stat--2 .cn-stat__key { left: 99px;  top: 16px; width: 77px;
                              font-weight: var(--fw-semi); }
  .cn-stat--2 .cn-stat__val { left: 88px;  top: 37px; width: 99px; }
  .cn-stat--3 .cn-stat__key { left: 105px; top: 18px; width: 64px; }
  .cn-stat--3 .cn-stat__val { left: 66px;  top: 39px; width: 142px; }
  .cn-stat--4 .cn-stat__key { left: 127px; top: 18px; width: 20px; }
  .cn-stat--4 .cn-stat__val { left: 82px;  top: 39px; width: 111px; }

  /* ===================== 2. WHO — light plate y:776 ======================= */
  /* #2129:7916 is declared BEFORE #2129:7918, so the light plate covers the
     dark one's top and only its 1640..1680 tail shows. DOM order already
     matches, so no z-index is needed. Both strokes are the plate's own fill
     colour on the dark box, so it is drawn as a plain background. */
  .cn-who__dark {
    left: 4px; top: 1127px; width: 760px; height: 472px;
    background: var(--color-surface-dark);
  }
  .cn-who__frame {
    left: 4px; top: 695px; width: 760px; height: 864px;
    background: var(--bg);
    border: 8px solid var(--color-surface-dark);
  }
  .cn-who__chip {
    left: 259px; top: 746px; width: 250px; height: 32px;
    background: var(--color-surface-dark);
  }
  .cn-who__eyebrow { left: 329px; top: 754px; width: 111px; text-align: center; }

  /* MEASURED, not read: Figma declares 536 but Chrome measures the file's own
     line 1 ("...YOUR BRAND AND") at 540.23, so at 536 it re-breaks into four
     lines. Held at 541 — and because the box is CENTRE-aligned its origin
     comes back 2.5px so the text stays on Figma's own centre of 384.
     The break itself is forced: Figma ends line 2 at "want" and Chrome pulls
     "to" up, and the window is INVERTED by 9.46px, so no width reproduces it. */
  .cn-who__title {
    left: 113.5px; top: 786px; width: 541px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    text-align: center;
  }
  .cn [aria-hidden="true"]:empty.cn-brk-t { display: inline; }
  .cn-brk-t::before { content: "\A"; white-space: pre; }

  .cn-stage { width: 688px; height: 183px; }
  .cn-stage--launch { left: 40px; top: 923px; }
  .cn-stage--growth { left: 40px; top: 1122px; }
  .cn-stage--scale  { left: 40px; top: 1321px; }

  .page-consultation .cn-stage__card {
    left: 45px; top: 29px; width: 643px; height: 154px;
    background: var(--color-surface-dark);
    border: 1px solid #000;            /* pure black, not the ink token */
    border-radius: 2px;
  }
  .page-consultation .cn-stage__disc {
    left: 0; top: 0; width: 74px; height: 74px;
    background: var(--bg);
    border: 0.74px solid var(--color-surface-dark);
    border-radius: 50%;
  }
  .page-consultation .cn-stage__label {
    top: 28px;
    color: var(--gold);
    font-size: 14px; font-weight: var(--fw-med); line-height: 17px;
    text-transform: uppercase;
  }
  .cn-stage--launch .cn-stage__label { left: 7px;  width: 60px; }
  .cn-stage--growth .cn-stage__label { left: 5px;  width: 64px; }
  .cn-stage--scale  .cn-stage__label { left: 14px; width: 46px; }

  .page-consultation .cn-stage__name {
    top: 97px;
    color: var(--gold);
    font-size: 16px; font-weight: var(--fw-bold); line-height: 17px;
  }
  .cn-stage--launch .cn-stage__name { left: 140px; width: 94px; }
  .cn-stage--growth .cn-stage__name { left: 125px; width: 138px; }
  .cn-stage--scale  .cn-stage__name { left: 125px; width: 131px; }

  /* the vertical white hairline #2129:7969-7971, declared at section level but
     carried by each stage's own rule element */
  .page-consultation .cn-stage__rule {
    left: 335px; top: 30px; width: 1px; height: 153px;
    background: var(--white);
  }

  .page-consultation .cn-stage__text {
    left: 352px;
    color: var(--bg);
    font-size: 14px; font-weight: var(--fw-light); line-height: 15px;
  }
  .cn-stage--launch .cn-stage__text { top: 84px; width: 320px; }
  .cn-stage--growth .cn-stage__text { top: 84px; width: 310px; }
  .cn-stage--scale  .cn-stage__text { top: 75px; width: 296px; }

  /* ===================== 3. FAMILIAR — band y:1728 ======================== */
  .cn-fam__dark {
    left: -713px; top: 1647px; width: 1493px; height: 699px;
    background: var(--color-surface-dark);
  }
  .cn-fam__light {
    left: -696px; top: 1659px; width: 1452px; height: 563px;
    background: var(--bg);
  }
  .cn-fam__chip {
    left: 0; top: 1679px; width: 250px; height: 32px;
    background: var(--color-surface-dark);
  }
  .cn-fam__eyebrow { left: 40px; top: 1687px; width: 116px; }
  .cn-fam__title {
    left: 40px; top: 1719px; width: 561px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
  }
  .cn-fam__lead {
    left: 40px; top: 1789px; width: 561px;
    color: var(--color-text);
    font-size: 16px; font-weight: var(--fw-reg); line-height: 19px;
  }

  /* six q-boxes, bleeding off BOTH edges (x -170 and x 394, each 544 wide).
     Row tops are 1978 / 2086 / 2189 — steps of 108 and 103, NOT uniform. */
  .page-consultation .cn-q__box {
    width: 544px; height: 91px;
    background: rgba(45, 45, 45, 0.04);
    border: 1px solid var(--color-surface-dark);
  }
  .cn-q__box--1 { left: -170px; top: 1897px; }
  .cn-q__box--2 { left: 394px;  top: 1897px; }
  .cn-q__box--3 { left: 394px;  top: 2108px; }
  .cn-q__box--4 { left: 394px;  top: 2005px; }
  .cn-q__box--5 { left: -170px; top: 2108px; }
  .cn-q__box--6 { left: -170px; top: 2005px; }

  /* THE DOM ORDER IS NOT THE GRID ORDER — mapped by TEXT, not by index.
     The frame reads q1,q2 / q6,q4 / q5,q3 down the page. The dot is the
     ::before at the group origin and the text sits 20 right and 4 down. */
  .page-consultation .cn-q {
    padding: 4px 0 0 20px;
    color: var(--color-text);
    font-size: 14px; font-weight: var(--fw-light); line-height: 15px;
  }
  .page-consultation .cn-q::before {
    content: "";
    position: absolute;
    left: 0; top: 0; width: 10.89px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
  }
  .cn-q--1 { left: 40px;  top: 1914px; width: 259px; }
  .cn-q--2 { left: 408px; top: 1914px; width: 314px; }
  .cn-q--3 { left: 408px; top: 2134px; width: 296px; }
  .cn-q--4 { left: 408px; top: 2023px; width: 272px; }
  .cn-q--5 { left: 40px;  top: 2134px; width: 310px; }
  .cn-q--6 { left: 40px;  top: 2023px; width: 306px; }

  .page-consultation .cn-fam__close {
    color: var(--bg);
    font-size: 14px; font-weight: var(--fw-light); line-height: 17px;
  }
  /* MEASURED: Figma breaks line 3 before "the" where Chrome fits it, so the
     box is held at 320 against the declared 329. The window is 315-326
     (Figma's longest line is 314.27 and the build fits "the" at 326.32), so
     this is comfortably inside it rather than a knife-edge. Left-aligned, so
     the origin does not move. */
  .cn-fam__close--1 { left: 39px;  top: 2250px; width: 320px; }
  .cn-fam__close--2 { left: 498px; top: 2250px; width: 230px; }
  .page-consultation .cn-fam__dash {
    left: 402px; top: 2273px; width: 62.5px; height: 8px;
  }

  /* ===================== 4. BIO — outline y:2475 ========================== */
  /* #2129:8000 is declared BEFORE the panel and the panel OVERHANGS it by
     289px, so the outline is the section's ::before (its first child, painted
     first) and the panel is the real element. */
  .cn-bio::before {
    content: "";
    position: absolute;
    left: 16px; top: 2394px; width: 735px; height: 238px;
    background: var(--bg);
    border: 1px solid var(--color-surface-dark);
  }
  .cn-bio__panel {
    left: 39px; top: 2420px; width: 689px; height: 527px;
    background: var(--color-surface-dark);
  }
  .cn-bio__eyebrow { left: 80px; top: 2457px; width: 115px; }
  .page-consultation .cn-bio__rule { height: 1px; background: #CD9926; }
  .cn-bio__rule--short { left: 78px; top: 2481px; width: 179px; }
  .cn-bio__rule--long  { left: 78px; top: 2632px; width: 613px; }
  .cn-bio__title {
    left: 78px; top: 2489px; width: 590px;
    color: var(--bg);
    font-weight: var(--fw-med);
  }
  .cn-bio__lead {
    left: 78px; top: 2528px; width: 492px;
    color: var(--bg);
    font-size: 16px; font-weight: var(--fw-light); line-height: 19px;
  }
  .cn-bio__means {
    left: 81px; top: 2609px; width: 194px;
    color: var(--white);
    font-size: 16px; font-weight: var(--fw-med); line-height: 19px;
  }

  /* Inter ExtraLight 200 — added to this page's font request for these four */
  .page-consultation .cn-bio__point {
    padding: 1px 0 0 15px;
    color: var(--white);
    font-size: 14px; font-weight: 200; line-height: 15px;
  }
  .page-consultation .cn-bio__point::before {
    content: "";
    position: absolute;
    left: 0; top: 0; width: 10.89px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
  }
  .cn-bio__point--1 { left: 81px;  top: 2648px; width: 284px; }
  .cn-bio__point--2 { left: 412px; top: 2648px; width: 254px; }
  .cn-bio__point--3 { left: 81px;  top: 2710px; width: 249px; }
  .cn-bio__point--4 { left: 412px; top: 2711px; width: 279px; }

  .cn-bio__close {
    left: 80px; top: 2773px; width: 552px;
    color: var(--bg);
    font-size: 16px; font-weight: var(--fw-light); line-height: 19px;
  }
  .cn-bio__cta { left: 78px; top: 2859px; }

  /* ===================== 5. GET — outline y:3070 ========================== */
  .cn-get__outline {
    left: 12px; top: 2989px; width: 744px; height: 584px;
    background: var(--bg);
    border: 1px solid var(--color-surface-dark);
  }
  .cn-get__panel {
    left: 27px; top: 3029px; width: 715px; height: 722px;
    background: var(--color-surface-dark);
  }
  .cn-get__eyebrow { left: 318px; top: 3064px; width: 133px; text-align: center; }
  .cn-get__rule {
    left: 294px; top: 3088px; width: 179.5px; height: 1px;
    background: var(--gold);
  }
  .cn-get__title {
    left: 124px; top: 3096px; width: 521px;
    color: var(--white);
    font-weight: var(--fw-med);
    text-align: center;
  }
  .cn-get__sub {
    left: 218px; top: 3166px; width: 333px;
    color: var(--white);
    font-size: 16px; font-weight: var(--fw-reg); line-height: 19px;
    text-align: center;
  }

  /* THE TWO COLUMNS USE DIFFERENT TYPE SIZES — odd gains are the LEFT column
     at 15px, even gains the RIGHT column at 16px. Mapped by text, not index. */
  .cn-gain { width: 0; height: 0; }
  .page-consultation .cn-gain__title {
    color: var(--gold);
    font-weight: var(--fw-semi);
    text-align: center;
  }
  .page-consultation .cn-gain__rule { height: 1px; background: var(--gold-deep); width: 257px; }
  .page-consultation .cn-gain__text {
    color: var(--bg);
    font-weight: var(--fw-light);
    text-align: center;
  }
  .cn-gain--1, .cn-gain--3, .cn-gain--5 { }
  .page-consultation .cn-gain--1 .cn-gain__title,
  .page-consultation .cn-gain--3 .cn-gain__title,
  .page-consultation .cn-gain--5 .cn-gain__title { font-size: 15px; line-height: 16px; }
  .page-consultation .cn-gain--1 .cn-gain__text,
  .page-consultation .cn-gain--3 .cn-gain__text,
  .page-consultation .cn-gain--5 .cn-gain__text { font-size: 15px; line-height: 16px; }
  .page-consultation .cn-gain--2 .cn-gain__title,
  .page-consultation .cn-gain--4 .cn-gain__title,
  .page-consultation .cn-gain--6 .cn-gain__title { font-size: 16px; line-height: 17px; }
  .page-consultation .cn-gain--2 .cn-gain__text,
  .page-consultation .cn-gain--4 .cn-gain__text,
  .page-consultation .cn-gain--6 .cn-gain__text { font-size: 16px; line-height: 17px; }

  .cn-gain--1 .cn-gain__title { left: 114px; top: 3251px; width: 224px; }
  .cn-gain--1 .cn-gain__rule  { left: 98px;  top: 3276px; }
  .cn-gain--1 .cn-gain__text  { left: 104px; top: 3284px; width: 248px; }
  .cn-gain--3 .cn-gain__title { left: 125px; top: 3362px; width: 202px; }
  .cn-gain--3 .cn-gain__rule  { left: 98px;  top: 3387px; }
  .cn-gain--3 .cn-gain__text  { left: 104px; top: 3395px; width: 243px; }
  .cn-gain--5 .cn-gain__title { left: 148px; top: 3459px; width: 157px; }
  .cn-gain--5 .cn-gain__rule  { left: 98px;  top: 3484px; }
  .cn-gain--5 .cn-gain__text  { left: 104px; top: 3492px; width: 243px; }
  .cn-gain--2 .cn-gain__title { left: 448px; top: 3251px; width: 190px; }
  .cn-gain--2 .cn-gain__rule  { left: 415px; top: 3276px; }
  .cn-gain--2 .cn-gain__text  { left: 435px; top: 3284px; width: 216px; }
  .cn-gain--4 .cn-gain__title { left: 461px; top: 3362px; width: 164px; }
  .cn-gain--4 .cn-gain__rule  { left: 415px; top: 3387px; }
  .cn-gain--4 .cn-gain__text  { left: 424px; top: 3395px; width: 237px; }
  .cn-gain--6 .cn-gain__title { left: 434px; top: 3459px; width: 219px; }
  .cn-gain--6 .cn-gain__rule  { left: 415px; top: 3484px; }
  .cn-gain--6 .cn-gain__text  { left: 424px; top: 3492px; width: 237px; }

  /* #2129:8174 carries stroke "0px 1px 1px" — NO top edge, the same
     construction the event note box uses */
  .cn-get__foot {
    left: 100px; top: 3598px; width: 568px; height: 69px;
    background: none;
    border: 1px solid var(--bg);
    border-top: 0;
  }
  /* the footnote is a CHILD of .cn-get__foot, not a sibling, so its
     coordinates are foot-relative. The foot has a 1px left border and NO top
     border, so left is Figma minus 101 and top is Figma minus 3598. */
  .cn-get__footnote {
    left: 99px; top: 15px; width: 369px;
    color: var(--white);
    font-size: 16px; font-weight: var(--fw-reg); line-height: 19px;
    text-align: center;
  }

  /* ===================== 6. RESULTS — photo y:3870 ======================== */
  .page-consultation .cn-res__bg {
    left: -355px; top: 3789px; width: 1440px; height: 738px;
  }
  .cn-res__panel {
    left: 12px; top: 3828px; width: 744px; height: 991px;
    background: var(--color-surface-dark);
  }
  .cn-res__eyebrow { left: 40px; top: 3865px; width: 107px; }
  .cn-res__rule {
    left: 40px; top: 3889px; width: 119px; height: 1px;
    background: #CD9926;
  }
  .cn-res__title {
    left: 40px; top: 3897px; width: 558px;
    color: var(--bg);
    font-weight: var(--fw-med);
  }

  /* each .cn-tst is a zero-size anchor at its box origin; the attribution sits
     BELOW the box, so the wrapper is not the box itself */
  .cn-tst { width: 0; height: 0; }
  .cn-tst--1 { left: 40px; top: 4026px; }
  .cn-tst--2 { left: 41px; top: 4200px; }
  .cn-tst--3 { left: 41px; top: 4370px; }
  .cn-tst--4 { left: 41px; top: 4548px; }

  .page-consultation .cn-tst__box {
    left: 0; top: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-surface-dark);
  }
  .cn-tst--1 .cn-tst__box { width: 688px; height: 104px; }
  .cn-tst--2 .cn-tst__box,
  .cn-tst--3 .cn-tst__box,
  .cn-tst--4 .cn-tst__box { width: 687px; height: 100px; }

  /* Noto Serif SC 79.93 — a full-width CJK advance, which is why the box is
     80 wide. fonts.check is a FALSE NEGATIVE on this subsetted family;
     measure the glyph instead. The mark is GOLD, not white. */
  .page-consultation .cn-tst__mark {
    width: 80px; height: 104px;
    color: var(--gold);
    font-family: 'Noto Serif SC', serif;
    font-size: 79.9259262084961px;
    font-weight: var(--fw-reg);
    line-height: 104px;
  }
  .cn-tst--1 .cn-tst__mark { left: 19px; top: 10px; }
  .cn-tst--2 .cn-tst__mark,
  .cn-tst--3 .cn-tst__mark,
  .cn-tst--4 .cn-tst__mark { left: 18px; top: 6px; }

  .page-consultation .cn-tst__text {
    color: var(--white);
    font-size: 16px; font-weight: var(--fw-light); font-style: italic;
    line-height: 21px;
  }
  .cn-tst--1 .cn-tst__text { left: 98px; top: 36px; width: 505px; }
  .cn-tst--2 .cn-tst__text { left: 97px; top: 32px; width: 430px; }
  .cn-tst--3 .cn-tst__text { left: 97px; top: 32px; width: 472px; }
  .cn-tst--4 .cn-tst__text { left: 97px; top: 32px; width: 472px; }

  .page-consultation .cn-tst__by {
    color: #999999;
    font-size: 13px; font-weight: var(--fw-reg); line-height: 16px;
  }
  .cn-tst--1 .cn-tst__by { left: 485px; top: 114px; width: 203px; }
  .cn-tst--2 .cn-tst__by { left: 417px; top: 110px; width: 270px; }
  .cn-tst--3 .cn-tst__by { left: 500px; top: 110px; width: 187px; }
  .cn-tst--4 .cn-tst__by { left: 494px; top: 110px; width: 193px; }

  .cn-res__cta { left: 265px; top: 4722px; }

  /* ===================== 7. WORKS — frame y:4947 -> main 4866 ============= */
  .cn-works__dark {
    left: 523px; top: 4866px; width: 269px; height: 1069px;
    background: var(--color-surface-dark);
  }
  .cn-works__light {
    left: 0; top: 4866px; width: 524px; height: 1069px;
    background: var(--bg);
    border: 12px solid var(--color-surface-dark);
  }
  .page-consultation .cn-works__photo {
    display: block;
    left: 411px; top: 5273px; width: 529px; height: 662px;
  }
  .cn-works__chip {
    left: 9px; top: 4913px; width: 241px; height: 32px;
    background: var(--color-surface-dark);
  }
  .cn-works__eyebrow { left: 40px; top: 4921px; width: 172px; }
  .cn-works__title {
    left: 40px; top: 4953px; width: 536px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
  }
  .cn-works__lead {
    left: 40px; top: 5023px; width: 425px;
    color: var(--color-text);
    font-size: 16px; font-weight: var(--fw-reg); line-height: 19px;
  }

  /* MEASURED, NOT READ. The three connector SVGs export at their ink bounds
     (113x173 / 61x107 / 110x169) while the API declares 148.7x196.33 /
     85.72x113.38 / 144.33x191.33, and the ratios are non-uniform so stretching
     would distort the curve. Scanning the frame render for gold left of every
     card and disc gives the true left edge — and on all three the declared Y
     is exactly right and only the X is wrong, the same shape as the home
     tablet arcs. */
  .page-consultation .cn-works__arc--1 { left: 31px;  top: 5159px; width: 113px; height: 173px; }
  .page-consultation .cn-works__arc--2 { left: 112px; top: 5384px; width: 61px;  height: 107px; }
  .page-consultation .cn-works__arc--3 { left: 32px;  top: 5550px; width: 110px; height: 169px; }

  /* each phase is anchored at its DISC, which overhangs the card by 40/44 */
  .cn-phase { width: 0; height: 0; }
  .cn-phase--1 { left: 52px;  top: 5112px; }
  .cn-phase--2 { left: 147px; top: 5308px; }
  .cn-phase--3 { left: 52px;  top: 5500px; }
  .cn-phase--4 { left: 147px; top: 5696px; }

  .page-consultation .cn-phase__card {
    top: 26px; width: 264px; height: 148px;
    background: var(--color-surface-dark);
    border: 1px solid #000;
    border-radius: 2px;
  }
  .cn-phase--1 .cn-phase__card,
  .cn-phase--3 .cn-phase__card { left: 40px; }
  .cn-phase--2 .cn-phase__card { left: 44px; height: 156px; }
  .cn-phase--4 .cn-phase__card { left: 44px; }

  .page-consultation .cn-phase__disc {
    left: 0; top: 0; width: 68px; height: 68px;
    background: var(--bg);
    border: 0.68px solid var(--color-surface-dark);
    border-radius: 50%;
  }

  .page-consultation .cn-phase__label,
  .page-consultation .cn-phase__num {
    color: var(--gold);
    font-size: 14px; font-weight: var(--fw-med); line-height: 17px;
    text-transform: uppercase;
  }
  .page-consultation .cn-phase__label { left: 10px; width: 47px; }
  .page-consultation .cn-phase__num   { left: 29px; }
  /* phases 3 and 4 sit 2px lower than 1 and 2 — read per phase */
  .cn-phase--1 .cn-phase__label, .cn-phase--2 .cn-phase__label { top: 30px; }
  .cn-phase--3 .cn-phase__label, .cn-phase--4 .cn-phase__label { top: 32px; }
  .cn-phase--1 .cn-phase__num, .cn-phase--2 .cn-phase__num { top: 14px; }
  .cn-phase--3 .cn-phase__num, .cn-phase--4 .cn-phase__num { top: 16px; }
  .cn-phase--1 .cn-phase__num { width: 7px; }
  .cn-phase--2 .cn-phase__num { width: 9px; }
  .cn-phase--3 .cn-phase__num,
  .cn-phase--4 .cn-phase__num { width: 10px; }

  .page-consultation .cn-phase__name {
    left: 60px; top: 56px;
    color: var(--gold);
    font-size: 15px; font-weight: var(--fw-bold); line-height: 16px;
  }
  .cn-phase--1 .cn-phase__name { width: 83px; }
  .cn-phase--2 .cn-phase__name { width: 114px; }
  .cn-phase--3 .cn-phase__name { width: 137px; }
  .cn-phase--4 .cn-phase__name { width: 108px; }

  .page-consultation .cn-phase__rule { top: 81px; height: 1px; background: var(--bg); }
  .cn-phase--1 .cn-phase__rule { left: 41px;   width: 261.5px; }
  .cn-phase--2 .cn-phase__rule { left: 40.5px; width: 268px; }
  .cn-phase--3 .cn-phase__rule { left: 41px;   width: 262px; }
  .cn-phase--4 .cn-phase__rule { left: 41.5px; width: 267px; }

  /* THE MANUAL BREAKS DIFFER FROM 1440. #2129:8068 and #2129:8073 carry no \A
     at this breakpoint — the frame renders phase 2 as five lines with
     "positioning. No topic is neglected." running together — so their <br>s
     are suppressed here. #2129:8078 (phase 4) DOES carry one, so it keeps its
     break. The markup has a space before each <br>, so suppressing cannot
     join the words either side; that space collapses at end of line, leaving
     1440 unchanged. */
  .cn-phase--2 .cn-phase__text br,
  .cn-phase--3 .cn-phase__text br { display: none; }

  .page-consultation .cn-phase__text {
    left: 60px; top: 89px;
    color: var(--bg);
    font-size: 14px; font-weight: var(--fw-light); line-height: 15px;
  }
  .cn-phase--1 .cn-phase__text { width: 213px; }
  .cn-phase--2 .cn-phase__text { width: 239px; }
  .cn-phase--3 .cn-phase__text { width: 234px; }
  .cn-phase--4 .cn-phase__text { width: 225px; }

  /* ===================== 8. INVESTMENT — outline y:6064 ================== */
  .cn-inv__outline {
    left: 16px; top: 5983px; width: 735px; height: 573px;
    background: var(--bg);
    border: 1px solid var(--color-surface-dark);
  }
  .cn-inv__panel {
    /* height trimmed 811 -> 762 after the availability slots were removed
       (2026-07-21) — panel now ends ~48px below the last note. */
    left: 39px; top: 6009px; width: 689px; height: 762px;
    background: var(--color-surface-dark);
  }
  .cn-inv__eyebrow { left: 322px; top: 6046px; width: 124px; text-align: center; }
  .cn-inv__rule {
    left: 295px; top: 6070px; width: 179px; height: 1px;
    background: #CD9926;
  }
  .cn-inv__title {
    left: 113px; top: 6078px; width: 543px;
    color: var(--bg);
    font-weight: var(--fw-med);
    text-align: center;
  }

  .cn-price { left: 96px; top: 6203px; width: 0; height: 0; }
  .page-consultation .cn-price__body {
    left: 0; top: 0; width: 577px; height: 353px;
    background: var(--bg);
  }
  .page-consultation .cn-price__head {
    left: 40px; top: 0; width: 494px; height: 49px;
    background: var(--color-surface-dark);
  }
  .page-consultation .cn-price__headrule {
    left: 40px; top: 0; width: 493.5px; height: 1px;
    background: #CD9926;
  }
  .cn-price__title {
    left: 131px; top: 15px; width: 315px;
    color: var(--gold);
    font-size: 14px; font-weight: var(--fw-med); line-height: 17px;
    text-align: center;
  }

  .cn-spec { position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .page-consultation .cn-spec__k,
  .page-consultation .cn-spec__v {
    position: absolute;
    font-size: 14px; font-weight: var(--fw-reg); line-height: 17px;
  }
  .page-consultation .cn-spec__k { left: 40px;  color: #999999; }
  .page-consultation .cn-spec__v { left: 140px; color: #444444; }
  .cn-spec__k--1, .cn-spec__v--1 { top: 81px; }
  .cn-spec__k--2, .cn-spec__v--2 { top: 109px; }
  .cn-spec__k--3, .cn-spec__v--3 { top: 137px; }
  .cn-spec__k--4, .cn-spec__v--4 { top: 165px; }
  .cn-spec__k--5, .cn-spec__v--5 { top: 193px; }
  .cn-spec__k--1 { width: 51px; } .cn-spec__v--1 { width: 222px; }
  .cn-spec__k--2 { width: 61px; } .cn-spec__v--2 { width: 182px; }
  .cn-spec__k--3 { width: 44px; } .cn-spec__v--3 { width: 355px; }
  .cn-spec__k--4 { width: 58px; } .cn-spec__v--4 { width: 229px; }
  .cn-spec__k--5 { width: 70px; } .cn-spec__v--5 { width: 112px; }

  .page-consultation .cn-price__divider {
    display: block;
    left: 40px; top: 230px; width: 494.5px; height: 1px;
    background: var(--gold);
  }
  .cn-price__amount {
    left: 240px; top: 254px; width: 96px;
    color: var(--color-text);
    font-size: 20px; font-weight: var(--fw-semi); line-height: 24px;
    text-align: center;
  }
  .cn-price__tabby {
    left: 137px; top: 278px; width: 298px;
    color: #888888;
    font-size: 14px; font-weight: var(--fw-reg); line-height: 17px;
    text-align: center;
  }
  .cn-price__cta { left: 169px; top: 327px; }
  .cn-price__secure {
    left: 127px; top: 390px; width: 323px;
    color: #AAAAAA;
    font-size: 12px; font-weight: var(--fw-reg); line-height: 15px;
    text-align: center;
  }

  .page-consultation .cn-inv__note {
    left: 96px; width: 582px;
    color: var(--bg);
    font-size: 14px; font-weight: var(--fw-light); line-height: 17px;
  }
  .cn-inv__note--1 { top: 6642px; }
  .cn-inv__note--2 { top: 6689px; }

  .page-consultation .cn-slot {
    width: 279px; height: 65px;
    background: var(--color-surface-dark);
    border: 1px solid var(--gold);
  }
  .cn-slot--1 { left: 95px;  top: 6755px; }
  .cn-slot--2 { left: 394px; top: 6755px; }
  /* child tops are Figma minus 1 for the box's own border */
  .page-consultation .cn-slot__key {
    top: 14px;
    color: var(--gold);
    font-size: 14px; font-weight: var(--fw-med); line-height: 17px;
    text-transform: uppercase; text-align: center;
  }
  .page-consultation .cn-slot__val {
    top: 35px;
    color: var(--white);
    font-size: 12px; font-weight: var(--fw-reg); line-height: 15px;
    text-align: center;
  }
  .cn-slot--1 .cn-slot__key { left: 59px; width: 159px; }
  .cn-slot--1 .cn-slot__val { left: 91px; width: 95px; }
  .cn-slot--2 .cn-slot__key { left: 88px; width: 102px; }
  .cn-slot--2 .cn-slot__val { left: 112px; width: 55px; }

  /* ===================== 9. FAQ — IN FLOW, seven rows ==================== */
  /* Load-bearing: with the section absolute it has a fixed height and
     overflow:hidden, so opening more than Figma's one row silently CLIPS the
     extra panels. In flow it grows instead. */
  .cn > section.cn-faq {
    position: relative;
    display: flow-root;
    left: auto; top: auto;
    width: 768px;
    height: auto;
    /* pulled up 6892 -> 6843 (49px reclaimed from the trimmed inv panel) so the
       inter-section gap stays the designed 72px (2026-07-21). */
    margin-top: 6843px;
    overflow: visible;
    z-index: 9;
  }

  .cn-faq__chip {
    left: 0; top: 0; width: 250px; height: 32px;
    background: var(--color-surface-dark);
  }
  .cn-faq__eyebrow { left: 40px; top: 8px; width: 120px; }
  .cn-faq__title {
    left: 40px; top: 40px; width: 424px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
  }

  /* The list must be IN FLOW, not absolute. `.cn > section > *` makes every
     direct child absolute, which left the in-flow FAQ section with no in-flow
     content — so `main` never grew and with all seven rows open the last panel
     ran 209px BELOW the footer. Every measurement still passed, because the
     rows were each in exactly the right place. In flow, main is
     max(7772, 6892 + 101 + list), so Figma's one-row state keeps the frame's
     268px tail and opening rows pushes the footer down instead of clipping. */
  .page-consultation .cn-faq__list {
    position: relative;
    left: auto; top: auto;
    width: 688px;
    margin: 101px 0 0 40px;
  }
  .page-consultation .cn-faq__list .cn-acc { width: 688px; margin: 0 0 16px; }
  .page-consultation .cn-faq__list .cn-acc__head {
    height: 43px;
    padding: 0 15px;
    background: var(--color-surface-dark);
    border: 1px solid var(--color-surface-dark);
  }
  .page-consultation .cn-faq__list .cn-acc__q {
    color: var(--white);
    font-size: 16px; font-weight: var(--fw-reg); line-height: 19px;
  }
  /* The open panel is NOT flush against its bar: #2129:8123 ends at 7117 and
     #2129:8124 starts at 7123, so Figma leaves a 6px gap. Without it every
     row below sat exactly 5px high and the whole band diffed at 34.43.
     The panel is a full 1px box (INSIDE, 688x108), and its answer sits 20
     from the OUTER edge, so the padding is 19 + the 1px border. */
  .page-consultation .cn-faq__list .cn-acc__panel {
    margin-top: 6px;
    background: var(--white);
    border: 1px solid var(--color-surface-dark);
  }
  .page-consultation .cn-faq__list .cn-acc__a {
    padding: 19px 26px;
    color: var(--color-text);
    font-size: 14px; font-weight: var(--fw-reg); line-height: 17px;
  }
}