/* ==========================================================================
   Venture Charts -- brand tokens
   Direction A, navy and gold. Signed off 2026-08-21.

   Lives at wp-content/uploads/brand/baseplate-brand.css so no theme deploy
   can overwrite it. See app/setup.php brand_css().

   These override Tailwind's @layer theme. Unlayered CSS beats a layer for
   normal declarations, so no !important is needed or wanted here.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* ---- the five the compiled CSS actually reads, ~185 uses each ---- */
  --color-shade-1000:#1C1C26;       /* ink, body copy            was #424242  */
  --color-shade-700:#1A1948B2;      /* navy, translucent         was #1b1b22b2 */
  --color-shade-300:#5C5C6B;        /* muted, secondary copy     was #adb5cd  */
  --color-shade-0:#E6E6EC;          /* mist, hairlines           was #dbdbdb  */
  --color-primary-300:#C9A24A;      /* gold, the accent          was #8cede4  */
  --color-primary-100:#F3ECDC;      /* gold tint, soft grounds   was #dffff7  */

  /* ---- named colours the compiled CSS also carries ---- */
  --color-navy-blue:#1A1948;
  --color-dark-green:#100F2C;       /* midnight. Name is inherited, not ours  */
  --color-very-light-beige:#F7F7F4; /* paper                                  */
  --color-very-light-grey:#E6E6EC;

  /* ---- type ---- */
  --font-family-sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-serif:"Fraunces", Georgia, serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  --font-size-h1:clamp(40px, 5.4vw, 68px);
  --font-size-h2:clamp(28px, 3.4vw, 40px);
  --font-size-h3:26px;
  --font-size-h4:21px;
  --font-size-bodyL:19px;
  --font-size-bodyM:17px;
  --font-size-bodyS:15px;

  /* ---- shape. Direction A is square, not rounded ---- */
  --radius-sm:2px;
  --radius-md:2px;
  --radius-lg:4px;
  --radius-xl:6px;
  --radius-2xl:8px;
  --radius-3xl:10px;

  --border-width-thin:1px;

  /* ---- Venture-only, for our own rules below ---- */
  --vc-navy:#1A1948;
  --vc-midnight:#100F2C;
  --vc-gold:#C9A24A;
  --vc-gold-light:#E0BE6E;
  --vc-paper:#F7F7F4;
  --vc-measure:1180px;
}

/* Display face on headings. Fraunces is the Direction A voice. */
h1, h2, h3,
.wp-block-heading{
  font-family:var(--font-serif);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.08;
}

body{
  font-family:var(--font-family-sans);
  color:var(--color-shade-1000);
  background:var(--vc-paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* The standing rule: a Section wraps its content in 75px, top and bottom.
   Kadence applies Section padding to .kt-inside-inner-col, not the outer
   element. See build-checks trap 4 and 15. */

/* ==========================================================================
   Header
   Baseplate ships the header markup with no CSS at all, so this is the
   client layer doing the whole job.
   ========================================================================== */

.site-head{
  /* Trap 26. A flex-row header turns the revealed mobile nav into a second
     flex ITEM sitting beside the bar, and the page overflows sideways.
     Block, from the start, not as a fix later. */
  display:block;
  position:sticky; top:0; z-index:40;
  background:rgba(247,247,244,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-shade-0);
}

.head-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--vc-measure); margin:0 auto;
  padding:0 28px;                 /* trap 10: a gutter at EVERY width */
  height:74px;
}

.site-head .brand{ display:flex; align-items:center; text-decoration:none; }

.brand__name{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-serif); font-weight:700; font-size:21px;
  letter-spacing:.02em; color:var(--vc-navy); white-space:nowrap;
}
.brand__name::before{
  content:""; width:34px; height:34px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%231A1948'/%3E%3Cpath d='M11 14h18l-9 13z' fill='%23fff'/%3E%3Cpath d='M15 14h10l-5 7z' fill='%23C9A24A'/%3E%3C/svg%3E") center/contain no-repeat;
}
.site-head .brand img{ max-height:38px; width:auto; display:block; }

.site-nav .nav{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.site-nav .nav a{
  position:relative;
  font-size:15px; font-weight:500; color:var(--color-shade-1000);
  text-decoration:none; opacity:.82; padding-bottom:5px;
  transition:opacity .2s, color .2s;
}
/* the rollover: a gold rule that wipes in from the left */
.site-nav .nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--vc-gold);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.site-nav .nav a:hover{ opacity:1; color:var(--vc-navy); }
.site-nav .nav a:hover::after,
.site-nav .nav a:focus-visible::after{ transform:scaleX(1); }
.site-nav .nav .current-menu-item > a,
.site-nav .nav .current_page_item > a,
.site-nav .nav .current-menu-ancestor > a{ opacity:1; color:var(--vc-navy); }
.site-nav .nav .current-menu-item > a::after,
.site-nav .nav .current_page_item > a::after,
.site-nav .nav .current-menu-ancestor > a::after{ transform:scaleX(1); }
/* not inside the dropdown panel, where it reads as clutter */
.site-nav .nav .sub-menu a::after{ display:none; }
@media (prefers-reduced-motion: reduce){ .site-nav .nav a::after{ transition:none; } }


/* sub-menus, depth 2 */
.site-nav .nav li{ position:relative; }
.site-nav .nav .sub-menu{
  position:absolute; left:0; top:100%; min-width:220px; margin:0; padding:10px 0;
  list-style:none; background:#fff; border:1px solid var(--color-shade-0);
  box-shadow:0 24px 48px -34px rgba(26,25,72,.5);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.site-nav .nav li:hover > .sub-menu,
.site-nav .nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.site-nav .nav .sub-menu a{ display:block; padding:8px 18px; border:0; }

/* Six items in the desktop nav from 22 September. Between the phone menu
   (900 and below) and the full measure, each item stays on one line: the gap
   and the type give way, the words never wrap. */
.site-nav .nav > li > a,
.nav-cta__login{ white-space:nowrap; }
@media (min-width:901px) and (max-width:1240px){
  .head-inner{ gap:16px; }
  .site-nav .nav{ gap:16px; }
  .site-nav .nav a{ font-size:14px; }
}
@media (min-width:901px) and (max-width:1040px){
  .site-nav .nav{ gap:12px; }
  .site-nav .nav a{ font-size:13px; }
  .nav-cta{ gap:10px; }
  .nav-cta__login{ font-size:13px; }
  .brand__name{ font-size:18px; gap:9px; }
  .brand__name::before{ width:28px; height:28px; }
  .nav-cta__btn{ padding:10px 14px; font-size:13px; }
}

/* mobile toggle */
.nav-toggle{
  display:none; width:44px; height:44px; padding:10px; flex:none;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; background:var(--vc-navy); border-radius:2px;
  margin:4px 0; transition:transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile{ display:none; }
.nav-mobile[hidden]{ display:none !important; }

@media (max-width:900px){
  .site-nav{ display:none; }
  .nav-toggle{ display:block; }
  .nav-mobile{
    display:block; border-top:1px solid var(--color-shade-0);
    background:var(--vc-paper); padding:8px 28px 20px;
  }
  .nav-mobile .nav{ list-style:none; margin:0; padding:0; }
  .nav-mobile .nav a{
    display:block; padding:13px 0; font-size:17px; text-decoration:none;
    color:var(--vc-navy); border-bottom:1px solid var(--color-shade-0);
  }
  .nav-mobile .sub-menu{ list-style:none; margin:0; padding:0 0 0 16px; }
}

@media (max-width:460px){
  .head-inner{ height:62px; padding:0 18px; }
  .brand__name{ font-size:16px; gap:9px; }
  .brand__name::before{ width:27px; height:27px; }
  .nav-mobile{ padding:8px 18px 20px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{ background:#0B0A22; color:#c5c5da; padding:64px 0 34px; }
.site-footer__inner{ max-width:var(--vc-measure); margin:0 auto; padding:0 28px; }

.fgrid{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:34px; }
@media (max-width:820px){ .fgrid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:520px){ .fgrid{ grid-template-columns:1fr; } }

.fcol__title{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vc-gold); font-weight:500; margin:0 0 16px;
}
.fcol .nav{ list-style:none; margin:0; padding:0; }
.fcol .nav a{
  display:block; font-size:14px; color:#b5b5cc; padding:5px 0;
  text-decoration:none; opacity:.85; transition:opacity .2s, color .2s;
}
.fcol .nav a:hover{ opacity:1; color:#fff; }
.fcol--contact p{ font-size:13px; color:#8a8aa6; line-height:1.6; max-width:30em; margin:0; }

.site-footer__legal{
  border-top:1px solid rgba(255,255,255,.1); margin-top:28px; padding-top:22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
  font-size:12.5px; color:#7f7f9c;
}
.legal__line{ margin:0; }
.legal__nav .nav{ display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0; }
.legal__nav .nav a{ color:#7f7f9c; text-decoration:none; }
.legal__nav .nav a:hover{ color:#fff; }
.legal__reg{ flex-basis:100%; margin:0; color:#6f6f8c; }

@media (max-width:720px){
  .site-footer__social{ margin-left:0; flex-basis:100%; }
}

/* ==========================================================================
   Sections. The standing rule: 75px top and bottom, a gutter at every width.
   Kadence puts Section padding on .kt-inside-inner-col, so target that.
   ========================================================================== */

.wp-block-kadence-rowlayout > .kt-row-column-wrap{
  padding-left:28px; padding-right:28px;   /* trap 10 */
}
#main{ display:flow-root; }                /* the recurring grey strip */


/* ==========================================================================
   Plans and the art hero.

   Structure for both lives in the theme, at public/blocks-pending.css. This
   file only sets the brand values it reads, which is the split that stops a
   client stylesheet growing into per-page work again (ledger 5f).
   ========================================================================== */

:root{
  /* Plans */
  --bp-plans-card-bg:#fff;
  --bp-plans-card-border:var(--vc-gold);
  --bp-plans-radius:var(--radius-md);
  --bp-plans-accent:var(--vc-gold);
  --bp-plans-accent-ink:var(--vc-midnight);
  --bp-plans-ink:var(--vc-navy);
  --bp-plans-muted:#5C5C6B;
  --bp-plans-btn-bg:var(--vc-navy);
  --bp-plans-btn-ink:#fff;

  /* Hero buttons, shared by every variant */
  --bp-hero-btn-bg:var(--vc-gold);
  --bp-hero-btn-ink:var(--vc-midnight);
  --bp-hero-btn-radius:var(--radius-md);
  --bp-hero-btn-ghost-ink:#fff;

  /* Hero art */
  --bp-hero-art-ink:var(--vc-gold-light);
}

/* The card border is gold at 24%, not full gold. A full-strength hairline on
   every card competes with the flagged one and the section reads as noise. */
.bp-plans__card{ border-color:rgba(201,162,74,.24); }
.bp-plans__card.is-featured{ border-color:var(--vc-gold); }
.bp-plans__band{ border-color:rgba(201,162,74,.34); }

.bp-plans__heading{ font-family:var(--font-serif); font-weight:600; }
.bp-plans__name{ font-family:var(--font-serif); font-weight:600; }
.bp-plans__price{ font-family:var(--font-serif); }
.bp-plans__tier{ font-family:var(--font-mono); font-weight:500; letter-spacing:.1em; }

/* Gold rollover, wiping in from the left. Matches the primary nav. */
.bp-plans__btn{ position:relative; overflow:hidden; z-index:0; }
.bp-plans__btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--vc-gold-light);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.33,0,.15,1);
}
.bp-plans__btn:hover::after,
.bp-plans__btn:focus-visible::after{ transform:scaleX(1); }
.bp-plans__btn:hover,
.bp-plans__btn:focus-visible{ color:var(--vc-midnight); }

/* The art hero sits on midnight so the gold chart has something to read against. */
.bp-hero--art{ background:var(--vc-midnight); }
.bp-hero--art .bp-hero__inner{ color:#fff; }
.bp-hero--art .bp-hero__heading{ font-family:var(--font-serif); font-weight:600; }
.bp-hero--art .bp-hero__heading em{ color:var(--vc-gold); font-style:italic; }
.bp-hero--art .bp-hero__lede{ color:#c9c9de; }
.bp-hero--art .bp-hero__meta-value{ color:var(--vc-gold); }
.bp-hero--art .bp-hero__meta-label{ color:#9a9ac0; }
.bp-hero__art-replay{ font-family:var(--font-mono); }


/* ==========================================================================
   Icon row, Split and Text.

   These three blocks ship with no stylesheet in the theme: they deliberately
   reuse the class names of the hand-built rows they replaced, on the
   assumption that a client brand file already styles those names. On a NEW
   site nothing styles them, so the look is set here. The grids live in the
   theme, at public/blocks-pending.css.
   ========================================================================== */

/* The heading inherits the site ink, which is near-black on a midnight band. */
.bp-hero--art .bp-hero__heading{ color:#fff; }

/* --- Icon row, badge variant. The step number sits in a gold ring. --- */
.bp-iconrow--badge .v-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin:0 0 18px;
  border:1px solid var(--vc-gold); border-radius:50%;
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.06em;
  color:var(--vc-gold);
}
.bp-iconrow .v-label{
  margin:0 0 8px; font-family:var(--font-serif); font-size:21px; font-weight:600;
  line-height:1.2; color:var(--vc-navy);
}
.bp-iconrow .v-label strong{ font-weight:inherit; }
.bp-iconrow .v-sub{ margin:0 0 8px; color:#5C5C6B; font-size:16px; line-height:1.6; }
.bp-iconrow .v-sub em{ font-style:normal; }

/* The partners band is a logo row, not a step list: centre it and drop the ring. */
.sec-partners .bp-iconrow__item{ text-align:center; }
.sec-partners .bp-iconrow .v-label{ font-size:18px; color:var(--vc-navy); }

/* --- Split --- */
.split .proj-section__h{
  margin:0 0 14px; font-family:var(--font-serif); font-size:clamp(26px,3vw,34px);
  font-weight:600; line-height:1.15; color:var(--vc-navy);
}
.split .proj-section__p{ margin:0 0 16px; color:#5C5C6B; font-size:17px; line-height:1.65; }
.split__ticks li{ color:#5C5C6B; font-size:17px; line-height:1.55; }
.split__ticks li::before{
  content:""; position:absolute; left:2px; top:.5em; width:9px; height:5px;
  border-left:1.6px solid var(--vc-gold); border-bottom:1.6px solid var(--vc-gold);
  transform:rotate(-45deg);
}

/* --- Text --- */
.txt-block__heading{
  margin:0 0 14px; font-family:var(--font-serif); font-size:clamp(28px,3.4vw,40px);
  font-weight:600; line-height:1.15; color:var(--vc-navy);
}
.txt-block__col p{ margin:0 0 16px; color:#5C5C6B; font-size:17px; line-height:1.65; }
.txt-block__col > *:last-child{ margin-bottom:0; }

/* The method section leads with a centred statement above the three steps. */
.sec-method .txt-block{ max-width:760px; margin:0 auto 46px; text-align:center; }
.sec-partners .txt-block{ max-width:640px; margin:0 auto 34px; text-align:center; }
.sec-partners .txt-block__col p{ font-size:16px; }


/* --- sizes for headings the block markup emits directly ---
   These are plain <h2>/<h3> elements, not .wp-block-heading, so the display
   rule at the top of this file never reaches them. */
.bp-plans__heading{ font-size:var(--font-size-h2); line-height:1.15; }
.bp-plans__name{ font-size:var(--font-size-h4); line-height:1.25; }

/* ==========================================================================
   Corrections against the Direction A comp, 2026-08-24.

   The first pass built the structure and approximated the finish. These are
   values read out of preview/concept-a.html rather than guessed.
   ========================================================================== */

:root{ --bp-plans-radius:10px; }

/* --- the theme boxed layout, removed ---
   Baseplate ships a 1280px cap on #app over a grey ground, which suits a boxed
   client. Direction A is full-bleed, so the box goes and the bands reach the
   viewport edges. */
#app{ max-width:none; }
html, body{ background:var(--vc-paper); }
/* app.css paints #main white. The ground is paper; white is for cards. */
#main{ background:var(--vc-paper); }

/* --- full-bleed bands ---
   Kadence caps the OUTER element with a Section maxWidth, so a coloured band
   stops short of the edges. Move the cap inside: the colour bleeds, the
   content keeps its measure. */
/* !important is needed and is not laziness. Kadence emits a per-block inline
   <style> late in the document -- .kadence-column7_xxxx{max-width:1600px} --
   which is one class, same specificity as ours, and wins on source order.
   Same family as trap 3. Setting the block attribute instead would cap the
   content too; the band has to bleed while the content keeps its measure. */
.sec-hero-block,
.sec-markets,
.sec-analysis,
.sec-partners,
.sec-method{ max-width:none !important; }
/* 1236, not 1180, and the reason matters. These sections bleed, so their inner
   column carries the 28px gutter that stops copy touching the screen edge on a
   narrow window. Capping at the measure AND adding the gutter left their content
   box at 1124, so every full-bleed band sat 28px inside every contained section
   and the type stepped in and out down the page. 1180 + 28 + 28 = 1236 puts the
   content box back on the measure with the gutter intact. */
.sec-hero-block > .kt-inside-inner-col,
.sec-markets > .kt-inside-inner-col,
.sec-analysis > .kt-inside-inner-col,
.sec-partners > .kt-inside-inner-col,
.sec-method > .kt-inside-inner-col{
  max-width:1236px; margin-inline:auto; padding-left:28px; padding-right:28px;
}

/* --- hero --- */
.sec-hero-block{
  background:linear-gradient(160deg,#211F58 0%, var(--vc-navy) 45%, var(--vc-midnight) 100%);
}
.bp-hero--art{ background:none; }
.bp-hero.bp-hero--art{ grid-template-columns:1.05fr .95fr; gap:40px; }
.bp-hero--art .bp-hero__panel{ display:block; }
.bp-hero--art .bp-hero__inner{ max-width:none; padding:78px 0 84px; }
.bp-hero--art .bp-hero__heading em{ font-style:italic; color:var(--vc-gold-light); }
.bp-hero--art .bp-hero__lede{
  font-size:18px; line-height:1.6; color:#c7c7dd; max-width:30em; margin-top:22px;
}
.bp-hero__art{ padding:0; }
.bp-hero__ctas{ gap:14px; margin-top:32px; }
.bp-hero__meta{
  gap:28px; margin-top:38px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.bp-hero--art .bp-hero__meta-value{
  display:block; font-family:var(--font-serif); font-size:26px;
  font-weight:600; color:var(--vc-gold);
}
.bp-hero--art .bp-hero__meta-label{ color:#b6b6d0; font-size:13px; }

/* --- buttons, from the comp .btn --- */
.bp-hero__btn{ padding:14px 24px; border-width:1.5px; gap:9px; }
.bp-hero__btn:hover{ transform:translateY(-2px); }
.bp-hero__btn--solid:hover{ background:var(--vc-gold-light); }
.bp-hero__btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.bp-hero__btn--ghost:hover{ border-color:var(--vc-gold); color:var(--vc-gold); }

/* --- method: a dark band, steps ruled in gold rather than badged ---
   The comp does NOT use a circular badge here. Each step is a 2px gold rule
   with a mono number beneath it. */
.sec-method{ background:var(--vc-midnight); }
.sec-method .txt-block__heading{ color:#fff; }
.sec-method .txt-block__col p{ color:#b9b9d2; }
.sec-method .bp-iconrow{ gap:26px; }
.sec-method .bp-iconrow__item{ border-top:2px solid var(--vc-gold); padding-top:22px; }
.sec-method .v-badge{
  display:block; width:auto; height:auto; margin:0; border:0; border-radius:0;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.15em; color:var(--vc-gold);
}
.sec-method .v-label{ color:#fff; font-size:23px; margin:12px 0 10px; }
.sec-method .v-sub{ color:#bfbfd6; font-size:15px; }

/* --- plans --- */
.bp-plans__card{ padding:34px; border-color:#E6E6EC; }
.bp-plans__card.is-featured{
  background:linear-gradient(165deg,var(--vc-navy),var(--vc-midnight));
  border-color:var(--vc-navy); box-shadow:none; color:#fff;
}
.bp-plans__card.is-featured .bp-plans__name,
.bp-plans__card.is-featured .bp-plans__price{ color:#fff; }
.bp-plans__card.is-featured .bp-plans__sub,
.bp-plans__card.is-featured .bp-plans__term{ color:#c2c2da; }
.bp-plans__card.is-featured .bp-plans__feats{ color:#e7e7f2; }
.bp-plans__tier{ font-size:12px; letter-spacing:.18em; color:var(--vc-gold); }
.bp-plans__name{ font-size:27px; margin:6px 0 4px; }
.bp-plans__price{ font-size:42px; font-weight:600; margin:18px 0 2px; }
.bp-plans__term{ font-family:var(--font-family-sans); font-size:15px; font-weight:500; }
.bp-plans__feats{ margin:20px 0 26px; display:flex; flex-direction:column; gap:11px; }
.bp-plans__feats li{ font-size:14.5px; padding:0 0 0 26px; }
/* a filled gold disc with a dark tick inside it, not a bare tick */
.bp-plans__feats li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:13px;
  border:0; border-radius:50%; background:var(--vc-gold); transform:none;
}
.bp-plans__feats li::after{
  content:""; position:absolute; left:4px; top:9px; width:5px; height:3px;
  border-left:1.6px solid var(--vc-midnight); border-bottom:1.6px solid var(--vc-midnight);
  transform:rotate(-45deg);
}
/* the ribbon sits inside the card, not straddling its top edge */
.bp-plans__ribbon{
  top:18px; right:18px; transform:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; font-weight:500;
}
.bp-plans__band{
  margin-top:24px; padding:22px 28px;
  border:1px dashed var(--vc-gold); border-radius:10px;
  background:rgba(201,162,74,.06);
}
.bp-plans__band .bp-plans__tier{ color:var(--vc-gold); }
.bp-plans__band-text{ font-family:var(--font-serif); font-size:19px; color:var(--vc-navy); }

@media (max-width:880px){
  .bp-hero--art .bp-hero__inner{ padding:56px 0 40px; }
}

/* ==========================================================================
   The market ticker and the TradingView grid.
   Both use TradingView free embed widgets, which are iframes TradingView
   styles. We control the frame around them, not their insides.
   ========================================================================== */

/* A full-bleed strip directly under the header, not a section. */
.sec-ticker{
  max-width:none !important;
  background:var(--vc-midnight);
  border-bottom:1px solid rgba(201,162,74,.25);
}
.sec-ticker > .kt-inside-inner-col{ max-width:none; padding-left:0; padding-right:0; }
.sec-ticker .txt-block__embed{ margin:0; }

/* Markets. The comp drew six bespoke sparkline cards; these are TradingView
   mini charts in the same grid, three across so the widget stays legible. */
.sec-markets{ border-top:1px solid #E6E6EC; border-bottom:1px solid #E6E6EC; }
.sec-markets .txt-block{ margin-bottom:30px; }
.mkt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mkt-cell{
  background:#fff; border:1px solid #E6E6EC; border-radius:6px; padding:8px 10px;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.mkt-cell:hover{
  transform:translateY(-3px); border-color:var(--vc-gold);
  box-shadow:0 10px 30px -16px rgba(26,25,72,.4);
}
@media (max-width:1000px){ .mkt-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .mkt-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Latest market analysis, the dark band.
   Structure for the Posts block is in the theme; this is the finish.
   ========================================================================== */

.sec-analysis{ background:linear-gradient(180deg,var(--vc-navy),#16153A); }
.sec-analysis .bp-posts__heading{
  font-family:var(--font-serif); font-weight:600;
  font-size:var(--font-size-h2); line-height:1.15; color:#fff;
}
.sec-analysis .bp-posts__intro{ color:#b9b9d2; font-size:17px; margin-top:14px; }

.sec-analysis .bp-posts__card{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
  border-radius:10px;
}
.sec-analysis .bp-posts__card:hover{ border-color:var(--vc-gold); }

/* The comp fills an empty card with a deep blue panel and a play mark. */
.sec-analysis .bp-posts__thumb{
  background-color:#0b1a3a;
  background-image:linear-gradient(135deg,#0b1a3a,#0a2540 60%,#06304d);
}
.sec-analysis .bp-posts__thumb[style]{ background-image:none; }
.sec-analysis .bp-posts__play{ color:var(--vc-gold); }

.sec-analysis .bp-posts__stamp{
  font-family:var(--font-mono); color:var(--vc-gold-light);
  border-color:rgba(224,190,110,.5);
}
.sec-analysis .bp-posts__lock{
  font-family:var(--font-mono); color:var(--vc-midnight);
  background:var(--vc-gold);
}
.sec-analysis .bp-posts__date{ font-family:var(--font-mono); color:var(--vc-gold); }
.sec-analysis .bp-posts__title{ font-family:var(--font-serif); font-weight:600; color:#fff; }
.sec-analysis .bp-posts__excerpt{ color:#b4b4ce; }

/* The Videos page runs the same Posts section as the homepage's dark band, but
   a page that is nothing but videos reads better the way the live site has it:
   section on paper, each card white, so the cards are what lifts off the page.
   A modifier, because the homepage band stays dark. Gold at #C9A24A on white is
   about 2:1 and fails as text, so the date takes a darker gold here. */
.sec-analysis.sec-analysis--paper{ background:var(--vc-paper); }
.sec-analysis--paper .bp-posts__heading{ color:var(--vc-navy); }
.sec-analysis--paper .bp-posts__intro{ color:#5C5C6B; }
.sec-analysis--paper .bp-posts__card{
  background:#fff; border-color:#E6E6EC;
  box-shadow:0 18px 40px -34px rgba(26,25,72,.45);
}
.sec-analysis--paper .bp-posts__card:hover{ border-color:var(--vc-gold); }
.sec-analysis--paper .bp-posts__date{ color:#8A7024; }
.sec-analysis--paper .bp-posts__title{ color:var(--vc-navy); }
.sec-analysis--paper .bp-posts__excerpt{ color:#5C5C6B; }

/* ==========================================================================
   Less decoration, agreed 2026-08-24.

   Most of what goes below IS in the comp. It is being removed anyway because
   the page reads fussy with it: hairline rules and small uppercase kickers
   that carry no information. Anything that does carry information stays --
   the tier names, the card stamps, the dates.
   ========================================================================== */

/* The method heading is LEFT in the comp. Only the plans section is centred. */
.sec-method .txt-block{ max-width:640px; margin:0 0 46px; text-align:left; }

/* Gone: the hairline above the hero credential row. */
.bp-hero__meta{ border-top:0; padding-top:0; margin-top:30px; }

/* Gone: the rules top and bottom of the markets band. */
.sec-markets{ border-top:0; border-bottom:0; }

/* The gold rule over each step stays, by decision. */
.sec-method .v-badge{ font-size:13px; }

/* Partners is a slim dark band in the comp: copy left, marks right. */
.sec-partners{ background:var(--vc-midnight); }
/* Kadence makes the SECTION a flex container, so the inner column is a flex
   item. Giving it display:flex made it shrink-wrap to its content (536px) and
   the two blocks wrapped onto separate lines. An explicit width fixes it. */
/* Grid, not flex. Flex would not put these two side by side however the
   items were sized -- the same two-column grid works first time, as it did
   on .sec-learn. Not worth more time on a band. */
.sec-partners > .kt-inside-inner-col{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:40px !important; width:100%;
}
/* An ACF block wrapper is a full-width div, so as a flex ITEM it takes the
   whole line and the next block wraps beneath it. Size them to their content. */
/* The ACF block wrapper carries auto side margins, which in a flex row centre
   each item instead of pushing them to the edges. Zero them. */
.sec-partners > .kt-inside-inner-col > *{
  flex:0 1 auto; width:auto; min-width:0; margin:0;
}
.sec-partners .txt-block{ max-width:30em; margin:0; text-align:left; }
.sec-partners .txt-block__col p{ font-size:14px; color:#b9b9d2; }
.sec-partners .bp-iconrow{ display:flex; gap:30px; align-items:center; }
.sec-partners .bp-iconrow__item{ text-align:left; }
.sec-partners .bp-iconrow .v-label{
  margin:0; font-family:var(--font-serif); font-weight:600; font-size:19px;
  color:#fff; opacity:.9;
}

/* --- The learn panel, and the two-column layout it sits in --------------- */

:root{
  --bp-panel-border:#E6E6EC;
  --bp-panel-radius:10px;
  --bp-panel-bar-bg:var(--vc-midnight);
}

/* The copy was sitting too close to the panel. The comp gaps at 48; the panel
   here is a solid card with its own border, so it needs more air than a
   photograph would. Column ratio eased back too so the copy is not cramped. */
.sec-learn > .kt-inside-inner-col{
  display:grid; grid-template-columns:1fr 1fr;
  /* The gap lives in the one two-column geometry rule further down, which beats
     Kadence's inline value on specificity rather than with !important. An
     !important here would outrank it however specific that rule got, which is
     what kept this band at 88 while sec-price-split sat at 64. */
  align-items:center; width:100%;
}
.sec-learn .bp-panel{ box-shadow:0 30px 60px -40px rgba(26,25,72,.5); }

/* A rows panel is a spec table and should match the height of the copy beside
   it; a media panel is a video still and must keep its own aspect. One :has()
   tells them apart, so neither needs a page-specific class (trap 32: a single
   :has() is fine, it is nesting one inside another that fails). */
.sec-learn > .kt-inside-inner-col:has(.bp-panel__rows){ align-items:stretch; }
.sec-learn .bp-panel:has(.bp-panel__rows){ display:flex; flex-direction:column; height:100%; }
.sec-learn .bp-panel:has(.bp-panel__rows) .bp-panel__body{ display:flex; flex-direction:column; flex:1; }
.sec-learn .bp-panel:has(.bp-panel__rows) .bp-panel__rows{ display:flex; flex-direction:column; flex:1; justify-content:space-between; }
.sec-learn .bp-panel__bar-label{ font-family:var(--font-mono); color:var(--vc-gold); }
.sec-learn .bp-panel__bar-note{ font-family:var(--font-mono); color:#c9c9e0; }
.sec-learn .bp-panel__heading{ font-family:var(--font-serif); font-weight:600; color:var(--vc-navy); }
.sec-learn .bp-panel__value{ font-family:var(--font-mono); color:#5C5C6B; font-size:13px; }

/* The panel in media mode. Structure is in the shared layer; this is the look:
   a gold play control on midnight, and the same serif-over-mono pairing the
   post cards use, so a video card and an analysis card read as one family. */
.sec-learn .bp-panel{
  --bp-panel-play-bg:var(--vc-gold);
  --bp-panel-play-ink:var(--vc-midnight);
  --bp-panel-chip-bg:var(--vc-gold);
  --bp-panel-chip-ink:var(--vc-midnight);
}
.sec-learn .bp-panel__play:hover{ background:var(--vc-gold-light); }
.sec-learn .bp-panel__media-title{ font-family:var(--font-serif); font-weight:600; color:var(--vc-navy); }
.sec-learn .bp-panel__media-meta{ font-family:var(--font-mono); color:#6c6c7e; }

/* A bare <video> in the panel's embed slot has no intrinsic size until its
   metadata arrives, so it lays out at the HTML default 300x150 and the card
   collapses. The poster path already reserves its box with width and height
   attributes; this does the same for a file. The recordings are Zoom exports
   at 1728x1080, so the ratio is exact rather than assumed. */
.bp-panel__embed{ display:block; }

/* A media panel with no heading still renders its body wrapper, and Blade
   leaves whitespace inside it, so :empty never matches (trap 32). :not(:has(*))
   asks for element children instead, and the 56px of white under the video
   goes. */
.bp-panel__body:not(:has(*)){ display:none; }
.bp-panel__embed video,
.bp-panel__embed iframe{
  display:block; width:100%; height:auto;
  aspect-ratio:1728/1080;
  background:var(--vc-midnight);
}
.sec-learn .bp-panel__chip{ font-family:var(--font-mono); }
.sec-learn .split{ gap:0; }

@media (max-width:820px){
  .sec-learn > .kt-inside-inner-col,
  .sec-partners > .kt-inside-inner-col{ grid-template-columns:1fr; gap:30px; }

  /* Stacked, the panel came first and a phone met the members-area mock
     before the heading that explains it. Copy leads, panel follows, the same
     call as the hero. Both children carry an order: a child without one
     defaults to 0 and jumps ahead of every child that has one. */
  .sec-learn > .kt-inside-inner-col > .wp-block-split{ order:1; }
  .sec-learn > .kt-inside-inner-col > .wp-block-panel{ order:2; }
}

/* ==========================================================================
   Round of review notes, 2026-08-24.
   ========================================================================== */

/* --- header: member login and the gold Join button --- */
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta__login{ font-size:14px; font-weight:600; color:var(--vc-navy); text-decoration:none; }
.nav-cta__login:hover{ color:var(--vc-gold); }
.nav-cta__btn{
  display:inline-flex; align-items:center; padding:11px 20px;
  background:var(--vc-gold); color:var(--vc-midnight);
  border-radius:var(--radius-md); font-size:14px; font-weight:600;
  text-decoration:none; transition:transform .15s ease, background .2s ease;
}
.nav-cta__btn:hover{ background:var(--vc-gold-light); transform:translateY(-2px); }
@media (max-width:900px){ .nav-cta__login{ display:none; } }

/* --- the kicker, gold and mono, above or beside a heading --- */
.txt-block__kicker{
  margin:0 0 10px; font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--vc-gold);
}

/* --- markets: heading left, the live tag right, as the comp --- */
.sec-markets .txt-block{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; max-width:none; margin:0 0 30px; text-align:left;
}
/* The embed is a sibling of the heading inside .txt-block, so without an
   explicit order it sits between the heading and the kicker. Row one is
   heading and tag; the grid takes a full-width row beneath. */
.sec-markets .txt-block__heading{ margin:0; font-size:30px; order:1; }
/* The body column has no order set, so it defaults to 0 and takes the left
   slot ahead of the heading. Everything in this row needs an explicit order. */
.sec-markets .txt-block__col{ order:3; flex:1 0 100%; }
.sec-markets .txt-block__col:not(:has(*)){ display:none; }
.sec-markets .txt-block__embed{ order:4; flex:1 0 100%; margin-top:6px; }
.sec-markets .txt-block__kicker{
  order:2; margin:0; display:inline-flex; align-items:center; gap:8px;
  letter-spacing:.12em; color:#5C5C6B;
}
/* the pulsing dot */
.sec-markets .txt-block__kicker::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#1FA37A;
  box-shadow:0 0 0 0 rgba(31,163,122,.5); animation:vc-pulse 2s infinite;
}
@keyframes vc-pulse{
  0%{ box-shadow:0 0 0 0 rgba(31,163,122,.5); }
  70%{ box-shadow:0 0 0 7px rgba(31,163,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,163,122,0); }
}
@media (prefers-reduced-motion: reduce){
  .sec-markets .txt-block__kicker::before{ animation:none; }
}


/* --- learn: the "see what is inside" button --- */
.split__cta{ margin:26px 0 0; }
.split__btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px;
  border:1.5px solid var(--vc-navy); border-radius:var(--radius-md);
  color:var(--vc-navy); font-size:15px; font-weight:600; text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.split__btn:hover{ background:var(--vc-navy); color:#fff; transform:translateY(-2px); }

/* --- partners: a mark beside each name --- */
.sec-partners .bp-iconrow__item{ display:flex; align-items:center; gap:9px; }
.sec-partners .v-badge{
  display:inline-flex; width:18px; height:18px; margin:0; border:0; border-radius:0;
  color:var(--vc-gold);
}
.sec-partners .v-badge svg{ width:100%; height:100%; }

/* --- footer: the Venture mark above the note --- */
/* The brand column goes FIRST, as the comp has it. The partial renders the
   menus before the contact column, so this is an order flip rather than a
   markup change -- the partial stays client-neutral. */
.fgrid{ grid-template-columns:1.4fr 1fr 1fr; }
.fcol--contact{ order:-1; }
@media (max-width:820px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fgrid{ grid-template-columns:1fr; } }

/* A fourth column arrives with the affiliates menu. Only widen the grid when
   one is actually there, so a three-column footer is untouched. One :has(),
   not nested (trap 32). */
/* Equal tracks measured even and LOOKED bunched, because the brand column's
   paragraph fills its width while the link columns are mostly air. So the
   first track is wider and its copy is capped short of it: the leftover is
   optical space, and Explore starts where the eye expects it to. */
.fgrid:has(.fcol:nth-child(4)){ grid-template-columns:1.45fr 1fr 1fr 1fr; gap:44px; }
.fgrid:has(.fcol:nth-child(4)) .fcol--contact p{ max-width:255px; }
@media (max-width:900px){ .fgrid:has(.fcol:nth-child(4)){ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fgrid:has(.fcol:nth-child(4)){ grid-template-columns:1fr; } }

/* The social row sits between the columns and the legal bar. Named links
   rather than icons: the live site says "Twitter Updates", and an unlabelled
   glyph is worse for the one person who does not recognise it. */
/* The social links live inside the legal bar now, pushed right so they sit
   opposite the copyright line. That buys one hairline instead of two and a
   shorter footer, which is what the second rule was costing. */
.site-footer__social{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 22px;
  margin-left:auto;
}
.site-footer__social-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#8f8fae;
}
.site-footer__social-label::after{ content:":"; }
.site-footer__social .nav{ display:flex; flex-wrap:wrap; gap:26px; list-style:none; margin:0; padding:0; }
.site-footer__social .nav a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#c9c9e0; text-decoration:none;
}
.site-footer__social .nav a:hover{ color:var(--vc-gold); }

/* The brand line reads as a wordmark, not a column heading. */
.fcol--contact .fcol__title{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-serif); font-weight:700; font-size:22px;
  letter-spacing:normal; text-transform:none; color:#fff; margin:0 0 14px;
}
.fcol--contact p{ max-width:26em; }
.fcol--contact .fcol__title::before{
  content:""; flex:none; width:34px; height:34px; border-radius:50%;
  background:#26245F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M11 14h18l-9 13z' fill='%23ffffff'/><path d='M15 14h10l-5 7z' fill='%23C9A24A'/></svg>") center/22px 22px no-repeat;
}

/* --- mobile header order -------------------------------------------------
   The partial renders brand, nav, toggle, account links. With the nav hidden
   that leaves the toggle stranded in the middle of the bar. On a phone the
   toggle belongs at the far right, sitting with the Join button rather than
   floating next to the wordmark. -------------------------------------- */

@media (max-width:900px){
  .head-inner{ gap:12px; }
  .site-head .brand{ margin-right:auto; }
  .site-head .nav-cta{ order:2; gap:10px; margin-left:0; }
  .site-head .nav-toggle{ order:3; margin-left:2px; }
}

/* Below the Join button the login link is already hidden, so the pair is just
   the button and the toggle. Keep them tight. */
@media (max-width:420px){
  .site-head .nav-cta__btn{ padding:10px 16px; font-size:13px; }
  .head-inner{ gap:8px; }
}

/* --- mobile hero order ---------------------------------------------------
   On a phone the headline should land first, then the chart at full width,
   then the supporting copy. The heading and the standfirst live inside the
   same panel, so they cannot be reordered against the chart while that panel
   is a box. display:contents dissolves the panel and its inner wrapper, which
   promotes the heading, standfirst, buttons and credential row to siblings of
   the chart -- and then a plain order does the rest.

   The panel carried the padding, so the hero takes it over at this width.
   ---------------------------------------------------------------------- */

@media (max-width:780px){
  .bp-hero.bp-hero--art{
    display:grid; grid-template-columns:1fr; gap:0;
    /* The Section inner column already supplies the 28px gutter, so the hero
       adds vertical padding only -- both and the chart loses 56px of width. */
    padding:44px 0 40px;
  }
  .bp-hero--art .bp-hero__panel,
  .bp-hero--art .bp-hero__inner{ display:contents; }

  .bp-hero--art .bp-hero__eyebrow{ order:1; }
  .bp-hero--art .bp-hero__heading{ order:2; font-size:clamp(34px,9vw,46px); }
  .bp-hero--art .bp-hero__art{ order:3; margin:24px 0 20px; padding:0; }
  .bp-hero--art .bp-hero__lede{ order:4; margin-top:0; max-width:none; }
  .bp-hero--art .bp-hero__ctas{ order:5; margin-top:26px; }
  .bp-hero--art .bp-hero__meta{ order:6; }

  /* The hero keeps a 560px min-height for its desktop band. On a phone that
     just pads the grid out and leaves the chart floating in dead space, so
     the hero becomes content-height and the chart takes the full width. */
  .bp-hero.bp-hero--art{ min-height:0; }
  .bp-hero--art .bp-hero__art{
    width:100%; justify-content:stretch; align-self:auto;
  }
  .bp-hero--art .bp-hero__art-svg{ width:100%; max-width:none; }
  .bp-hero--art .bp-hero__art-replay{ right:0; bottom:-6px; }
}

/* --- the ticker is a strip at every width --------------------------------
   Kadence swaps to tabletPadding below its tablet breakpoint, so the 28px
   all-round default lands on the ticker and the hero too. On the ticker that
   turns a 44px strip into a 100px band; on the hero it stacks on top of the
   padding the hero already sets for itself. Both supply their own.
   -------------------------------------------------------------------- */
.sec-ticker > .kt-inside-inner-col{ padding:0 !important; }

@media (max-width:780px){
  .sec-hero-block > .kt-inside-inner-col{ padding-top:0 !important; padding-bottom:0 !important; }
}


/* ==========================================================================
   The editor canvas, so the client sees the page and not a stack.
   Kadence names a Section's inner wrapper .kt-inside-inner-col on the front
   end and .kadence-inner-column-inner in the editor. Every Section rule in
   this file is keyed to the first name, so in the editor none of them landed:
   the hero ran to the canvas edge with no gutter, and the learn and partners
   sections lost their two columns and stacked. Same values, second selector,
   held behind .editor-styles-wrapper, which exists only in the editor.
   Flat gap values rather than the clamp() used on the front end: vw resolves
   against the browser window in the editor, not the canvas (trap 18).
   ========================================================================== */

.editor-styles-wrapper .sec-hero-block .kadence-inner-column-inner,
.editor-styles-wrapper .sec-markets .kadence-inner-column-inner,
.editor-styles-wrapper .sec-analysis .kadence-inner-column-inner,
.editor-styles-wrapper .sec-partners .kadence-inner-column-inner,
.editor-styles-wrapper .sec-method .kadence-inner-column-inner{
  max-width:1180px; margin-inline:auto; padding-left:28px; padding-right:28px;
}

/* the ticker is a full-bleed strip in the editor too */
.editor-styles-wrapper .sec-ticker .kadence-inner-column-inner{
  max-width:none; padding-left:0; padding-right:0;
}

/* panel left, copy right, as the comp and as the live page */
.editor-styles-wrapper .sec-learn .kadence-inner-column-inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center; width:100%;
}

/* copy left, marks right */
.editor-styles-wrapper .sec-partners .kadence-inner-column-inner{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:40px; width:100%;
}

/* ==========================================================================
   Callout. Ships with the kit reusing `next-*` class names from the site it
   replaced, so on a new build nothing styles it (trap 31). This is Venture's.
   ========================================================================== */

.callout{
  background:var(--vc-navy);
  border-radius:12px;
  padding:clamp(34px,4vw,48px) clamp(28px,3.4vw,44px);
}
.callout__label{
  margin:0 0 12px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--vc-gold);
}
.callout__heading{
  margin:0 0 14px; font-family:var(--font-serif); font-weight:600;
  font-size:clamp(23px,2.4vw,29px); line-height:1.2; color:#fff;
}
.callout__text{
  margin:0; font-size:16px; line-height:1.7; color:#c9c9e0; max-width:58ch;
}
.callout__rule{
  border:0; border-top:1px solid rgba(255,255,255,.18); margin:26px 0 0;
}
/* The link is a paragraph in the markup, so the anchor carries the button. */
.callout__link{ margin:26px 0 0; }
.callout__link a{
  display:inline-flex; align-items:center; padding:14px 26px;
  background:var(--vc-gold); color:var(--vc-midnight);
  border-radius:var(--radius-md); font-size:15px; font-weight:600;
  text-decoration:none; transition:transform .15s ease, background .2s ease;
}
.callout__link a:hover{ background:var(--vc-gold-light); transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){
  .callout__link a:hover{ transform:none; }
}

/* Split layout: an aside on the left carrying the alternative action, the
   main callout on the right, a hairline between. Markup from Baseplate
   e731e16: .callout--split > .callout__aside + .callout__main. The outer
   card keeps its band styling; padding moves to the two panels so the
   hairline runs full height. */
.callout--split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  padding:0;
}
.callout--split > .callout__aside,
.callout--split > .callout__main{
  padding:clamp(34px,4vw,48px) clamp(28px,3.4vw,44px);
  min-width:0;
}
.callout--split > .callout__aside{
  border-right:1px solid rgba(255,255,255,.18);
}
.callout__heading--aside{ font-size:clamp(20px,2vw,24px); }
/* The secondary action is the outlined button, so it reads as the
   alternative rather than a second primary. */
.callout__link--aside a{
  background:transparent; color:var(--vc-gold);
  box-shadow:inset 0 0 0 1.5px var(--vc-gold);
}
.callout__link--aside a:hover{ background:rgba(201,162,74,.12); }

@media (max-width:820px){
  .callout--split{ grid-template-columns:1fr; }
  .callout--split > .callout__aside{
    border-right:0; border-bottom:1px solid rgba(255,255,255,.18);
  }
}

/* ==========================================================================
   Approach page. Reuses the homepage section classes wherever the layout is
   the same, so sec-method and sec-learn are doing the work here too. Only the
   two arrangements the homepage does not have are below.
   ========================================================================== */

/* Hero copy beside the "what I can tell you" card. Grid rather than flex, for
   the same reason the learn and partners rows are grids (trap 37). */
.sec-approach-hero > .kt-inside-inner-col{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,4.5vw,64px); align-items:center; width:100%;
}
/* The hero block paints its own band on the homepage. Here the Section carries
   the gradient, so the block inside it stays transparent. */
.sec-approach-hero .bp-hero{ background:none; min-height:0; padding:0; }
.sec-approach-hero .bp-hero__inner{ padding:0; }
.sec-approach-hero .bp-panel{ box-shadow:0 30px 60px -40px rgba(0,0,0,.6); }

/* The plain variant makes no assumption about the band behind it, so on this
   navy Section its copy inherits the dark body colour and disappears. The art
   hero on the homepage sets its own light text; this one has to be told. */
.sec-approach-hero .bp-hero__eyebrow{ color:var(--vc-gold); }
.sec-approach-hero .bp-hero__heading{ color:#fff; }
.sec-approach-hero .bp-hero__lede{ color:#c9c9e0; }

@media (max-width:820px){
  .sec-approach-hero > .kt-inside-inner-col{ grid-template-columns:1fr; gap:32px; }
}

/* The dark band reuses sec-partners for its colour, but holds a two column
   split rather than copy and marks, so the grid is overridden back to one. */
.sec-approach-never > .kt-inside-inner-col{ display:block; }
.sec-approach-never .split{ gap:clamp(40px,5vw,80px); }
.sec-approach-never .proj-section__h{ color:#fff; }
.sec-approach-never .split__copy p{ color:#c9c9e0; }

/* The closing callout sits on paper, so the Section needs no band. The Section
   is a flex container, which makes the inner column a flex item, and without an
   explicit width it shrink-wraps to the length of the copy (trap 37). */
.sec-approach-cta > .kt-inside-inner-col{
  max-width:1180px; margin-inline:auto; width:100%;
}

/* ==========================================================================
   Interior page heroes. Copy only on the navy band, no art and no card. Every
   page other than the homepage uses this, so it is a class rather than a
   per-page rule.
   ========================================================================== */

.sec-page-hero > .kt-inside-inner-col{ width:100%; }
.sec-page-hero .bp-hero{ background:none; min-height:0; padding:0; }
.sec-page-hero .bp-hero__inner{ padding:0; }
.sec-page-hero .bp-hero__eyebrow{ color:var(--vc-gold); }
.sec-page-hero .bp-hero__heading{ color:#fff; max-width:20ch; }
.sec-page-hero .bp-hero__lede{ color:#c9c9e0; max-width:52ch; }

/* A body section of plain copy, one or two columns, on paper. */
.sec-page-body > .kt-inside-inner-col{ width:100%; }
.sec-page-body .txt-block{ max-width:none; }
.sec-page-body .txt-block__heading{ font-size:clamp(24px,2.6vw,31px); margin:0 0 20px; }
.sec-page-body .txt-block__col p{ font-size:16.5px; line-height:1.65; margin:0 0 9px; }
.sec-page-body .txt-block__col p:last-child{ margin-bottom:0; }
/* An empty paragraph still takes its margin. They appear when HTML is passed to
   a field that wraps every line in <p> itself, and they read as bad spacing. */
.sec-page-body .txt-block__col p:empty{ display:none; }

/* Long-form documents inside a Text block's body field: the three legal pages.
   The body carries its own headings and lists, and nothing here styled them, so
   a heading computed 16px against 16.5px body copy while a third-level heading
   took the theme's 32px. That inversion is what read as mixed font styles.
   Scoped to the column so the block's own heading field is untouched. No
   important is needed; nothing in a layer claims these. */
.sec-page-body .txt-block__col h2{
  font-size:21px; line-height:1.3; font-weight:600; color:var(--vc-navy);
  margin:30px 0 10px;
}
.sec-page-body .txt-block__col h3{
  font-size:18px; line-height:1.35; font-weight:600; color:var(--vc-navy);
  margin:24px 0 8px;
}
.sec-page-body .txt-block__col > *:first-child{ margin-top:0; }
.sec-page-body .txt-block__col ul{ list-style:disc; padding-left:22px; margin:0 0 14px; }
.sec-page-body .txt-block__col li{ font-size:16.5px; line-height:1.65; margin:0 0 6px; }

/* The same on a dark band. */
.sec-page-band{ background:var(--vc-midnight); }
.sec-page-band > .kt-inside-inner-col{ width:100%; }
.sec-page-band .txt-block{ max-width:none; }
.sec-page-band .txt-block__kicker{ color:var(--vc-gold); }
.sec-page-band .txt-block__heading{ color:#fff; font-size:clamp(24px,2.6vw,31px); margin:0 0 20px; }
.sec-page-band .txt-block__col p{ color:#c9c9e0; font-size:16.5px; line-height:1.75; }
.sec-page-band .proj-section__h{ color:#fff; }
.sec-page-band .split__copy p{ color:#c9c9e0; }

/* The band is the one Section that paints a colour at the measure, so its copy
   sits against the edge of the colour rather than against paper, and needs its
   own inset. Every other Section can leave the horizontal padding at 0 because
   nothing shows. Flat lengths, not clamp(): a clamp with a vw term did not apply
   here at all, and it fails silently. Below 1024 Kadence's own 28px rule wins,
   and the media query below just makes that explicit rather than inherited. */
.sec-page-band > .kt-inside-inner-col{ padding-left:52px; padding-right:52px; }

@media (max-width:1024px){
  .sec-page-band > .kt-inside-inner-col{ padding-left:28px; padding-right:28px; }
}

/* A list on the band inherits the page ink, #1C1C26 on #100F2C, which measures
   contrast 1.10 and is invisible. The paragraphs were given a light colour when
   the band was written and list items were not, so it only showed on the one
   page that puts a list there. Same family as trap 19. */
.sec-page-band li{ color:#c9c9e0; }
.sec-page-band .split__ticks li{ color:#c9c9e0; }
/* ==========================================================================
   COMPARE -- the feature matrix on Compare Services.
   Structure ships in blocks-pending.css; only the look is set here (trap 31).
   ========================================================================== */

.sec-compare > .kt-inside-inner-col{ width:100%; }

.sec-compare .bp-compare{
  --bp-compare-head-bg:var(--vc-navy);
  --bp-compare-head-ink:#fff;
  --bp-compare-rule:#E6E6EC;
  --bp-compare-stripe:#fbfbf9;
  --bp-compare-yes:var(--vc-navy);
  --bp-compare-no:#C20000;
  --bp-compare-stack-head-bg:#f2f2f6;
  --bp-compare-radius:10px;
  --bp-compare-size:15.5px;
}

.sec-compare .bp-compare__heading{
  font-family:var(--vc-display,inherit);
  font-size:clamp(24px,2.6vw,31px); color:var(--vc-navy); margin:0 0 14px;
}
.sec-compare .bp-compare__intro{ font-size:16.5px; line-height:1.75; margin:0 0 30px; }

.sec-compare .bp-compare__table{
  border:1px solid #E6E6EC; border-radius:10px; overflow:hidden;
  background:#fff;
}
.sec-compare .bp-compare__table thead th:first-child{ border-top-left-radius:10px; }
.sec-compare .bp-compare__table thead th:last-child{ border-top-right-radius:10px; }
/* Scoped to tbody on purpose. The header cell carries the same class and sits on
   the navy bar, so an unscoped rule painted navy on navy and the word "Features"
   disappeared at contrast 1.00. Same family as the icon badge in trap 19: neither
   value was wrong, the pairing was. */
.sec-compare .bp-compare__table tbody .bp-compare__feature{ color:var(--vc-navy); }
.sec-compare .bp-compare__table thead .bp-compare__feature{ color:#fff; }
.sec-compare .bp-compare__value{ color:var(--vc-navy); }

/* The price row reads as the answer to the table, so it gets the gold rule. */
.sec-compare .bp-compare__table tbody tr:last-child th,
.sec-compare .bp-compare__table tbody tr:last-child td{
  border-top:2px solid var(--vc-gold); background:#fdfaf2;
}

@media (max-width:720px){
  .sec-compare .bp-compare__table{ border:0; background:none; border-radius:0; }
  .sec-compare .bp-compare__table tbody tr{ background:#fff; }
  .sec-compare .bp-compare__table tbody tr:last-child th{ border-top:2px solid var(--vc-gold); }
  .sec-compare .bp-compare__table tbody tr:last-child td{ border-top:0; background:#fdfaf2; }
}

/* ==========================================================================
   MEMBER QUOTES -- acf/testimonial, several to a Section.
   The block ships with no stylesheet of its own and reuses no existing class
   names here, so on a new site it renders as unstyled stacked text (trap 31).
   ========================================================================== */

/* Multi-column, not grid. These quotes run from two lines to twenty, and a grid
   sizes every row to its tallest card, so one long quote punched holes under the
   short ones beside it. Columns pack by height instead, which is what the eye
   expects of a wall of quotes. The cost is that reading order runs down each
   column rather than across, which is fine for testimonials and would not be for
   anything sequential. */
.sec-quotes > .kt-inside-inner-col{
  display:block;
  columns:3;
  column-gap:24px;
  width:100%;
}

@media (max-width:1024px){
  .sec-quotes > .kt-inside-inner-col{ columns:2; }
}

@media (max-width:640px){
  .sec-quotes > .kt-inside-inner-col{ columns:1; column-gap:0; }
}

/* The break must be avoided on the block's own wrapper, which is the column's
   child. Putting it on .testimonial alone lets a card split across a column. */
.sec-quotes > .kt-inside-inner-col > *{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 24px;
}

.sec-quotes .testimonial{
  border:1px solid var(--color-shade-0,#E6E6EC);
  border-radius:10px;
  padding:26px 28px 24px;
}

/* Background comes from the block's own bg_colour field, not from here, so a
   client can change it in the sidebar (trap 11). */

.sec-quotes .testimonial blockquote{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.65;
  color:#1C1C26;
}

.sec-quotes .testimonial__attr{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--vc-gold);
}

@media (max-width:640px){
  .sec-quotes > .kt-inside-inner-col > *{ margin-bottom:18px; }
  .sec-quotes .testimonial{ padding:22px 22px 20px; }
}

/* ==========================================================================
   LEVEL PAGES -- the price beside the three things it buys.
   Two blocks in one Section, so the inner column is the grid (trap 37: flex
   here shrink-wraps and the children will not line up).
   ========================================================================== */

/* The `main` prefix is load-bearing. Kadence writes its own
   `.kadence-column<id> > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm)}`
   inline and LAST in the document. Two classes, same specificity as this rule,
   so it wins on source order and the gap computed to 16px however many times
   the value here was changed. One type selector settles it, no !important
   needed. Trap 34's mechanism, applied to gap rather than max-width.

   ONE two-column geometry for the site. sec-learn was 547/547 with an 86px gap
   and this was 553/611 with a gap that computed to 16 because the clamp() never
   applied (trap 45 again, on a gap this time). Two two-column bands on the same
   page measured differently, which is what reads as "the spacing is not
   consistent". Flat values, equal columns, same gap everywhere. */
main .sec-price-split > .kt-inside-inner-col,
main .sec-learn > .kt-inside-inner-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:64px;
  row-gap:40px;
  align-items:center;
  width:100%;
}
main .sec-price-split > .kt-inside-inner-col{ align-items:stretch; }

@media (max-width:900px){
  main .sec-price-split > .kt-inside-inner-col,
  main .sec-learn > .kt-inside-inner-col{ grid-template-columns:1fr; column-gap:0; row-gap:30px; }
}

/* The price is the point of the section, so it gets the card and the weight. */
/* stretch above, and centre the copy inside, so the card matches the height of
   the three stacked beside it rather than sitting short. */
.sec-price-split .callout{
  background:var(--vc-midnight);
  border:1px solid rgba(201,162,74,.35);
  border-radius:14px;
  padding:38px 40px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}
.sec-price-split .callout__label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vc-gold); margin:0 0 14px;
}
.sec-price-split .callout__heading{
  font-family:var(--font-serif); font-weight:600; color:#fff;
  font-size:clamp(38px,4.4vw,54px); line-height:1.02; margin:0 0 12px;
}
.sec-price-split .callout__text{ color:#c9c9e0; font-size:15.5px; line-height:1.6; margin:0 0 26px; }
.sec-price-split .callout__link a{
  display:inline-block; background:var(--vc-gold); color:var(--vc-midnight);
  font-weight:600; font-size:15px; padding:13px 26px; border-radius:6px; text-decoration:none;
}
.sec-price-split .callout__link a:hover{ background:var(--vc-gold-light); }

/* The three things it buys, stacked beside the price with an icon each.
   grid-template-columns is stated explicitly: IconRow's own columns field only
   offers 2 to 5, so the block always carries a bp-iconrow--cols-N class and this
   section wants one. Setting display:grid without the columns lets that class
   supply them, which is how three items ended up in four columns. */
/* The three cards fill the column, so their block ends level with the price card
   beside it rather than stopping short. grid-auto-rows:1fr shares the height. */
.sec-price-split .bp-iconrow{
  display:grid; grid-template-columns:1fr; gap:18px;
  height:100%; grid-auto-rows:1fr; align-content:stretch;
}

/* The item has three children in a row: badge, label, and one or more body
   lines. A plain two-column grid puts the third child back under the badge, so
   the badge is placed explicitly and spans, and the copy is pinned to column 2. */
.sec-price-split .bp-iconrow__item{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:18px; row-gap:5px; align-items:start; text-align:left;
  padding:18px 20px; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:10px; background:#fff;
}
.sec-price-split .bp-iconrow .v-badge{ grid-column:1; grid-row:1 / span 2; align-self:start; }
.sec-price-split .bp-iconrow .v-label{ grid-column:2; grid-row:1; }
.sec-price-split .bp-iconrow .v-sub{ grid-column:2; }
.sec-price-split .bp-iconrow .v-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px;
  background:rgba(201,162,74,.12); color:var(--vc-gold);
}
.sec-price-split .bp-iconrow .v-badge svg{ width:24px; height:24px; }
.sec-price-split .bp-iconrow .v-label{ margin:2px 0 4px; font-size:17px; color:var(--vc-navy); }
.sec-price-split .bp-iconrow .v-sub{ margin:0; font-size:14.5px; line-height:1.55; color:#5C5C6B; }
.sec-price-split .bp-iconrow .v-sub em{ font-style:normal; }

@media (max-width:900px){
  main .sec-price-split > .kt-inside-inner-col{ grid-template-columns:1fr; gap:30px; }
  .sec-price-split .callout{ padding:30px 26px 28px; }
}


/* An embed sits hard against the copy above it, because the block gives it no
   margin of its own. Scoped to the body section rather than set on the class,
   so the homepage's widget grids keep their own spacing. */
.sec-page-body .txt-block__embed{ margin-top:26px; }

/* ==========================================================================
   CLOSING OFFER BAR -- the repeat of the price at the foot of a level page.
   The same callout as the card at the top, laid out as a row so it reads as a
   closing line rather than a second copy of the card. Without the copy it was
   a tall empty box holding one button.
   ========================================================================== */

.sec-price-bar > .kt-inside-inner-col{ width:100%; }

.sec-price-bar .callout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  /* column-gap only. A single gap also spaced the three stacked rows 30px apart
     and the price floated away from its billing line. */
  column-gap:30px;
  row-gap:0;
  align-content:center;
  background:var(--vc-midnight);
  border:1px solid rgba(201,162,74,.35);
  border-radius:14px;
  padding:30px 36px;
}
.sec-price-bar .callout__label{
  grid-column:1; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vc-gold); margin:0 0 8px;
}
.sec-price-bar .callout__heading{
  grid-column:1; font-family:var(--font-serif); font-weight:600; color:#fff;
  font-size:clamp(26px,3vw,34px); line-height:1.05; margin:0 0 6px;
}
.sec-price-bar .callout__text{ grid-column:1; color:#c9c9e0; font-size:14.5px; margin:0; }
.sec-price-bar .callout__link{ grid-column:2; grid-row:1 / span 3; margin:0; align-self:center; }
.sec-price-bar .callout__link a{
  display:inline-block; background:var(--vc-gold); color:var(--vc-midnight);
  font-weight:600; font-size:15px; padding:13px 26px; border-radius:6px; text-decoration:none;
  white-space:nowrap;
}
.sec-price-bar .callout__link a:hover{ background:var(--vc-gold-light); }

@media (max-width:700px){
  .sec-price-bar .callout{ grid-template-columns:1fr; gap:18px; padding:26px 24px; }
  .sec-price-bar .callout__link{ grid-column:1; grid-row:auto; }
}

/* Level Two has no price on his page, so its three points run three across
   rather than beside a card. Same card treatment as the level-one band. */
.sec-level-points > .kt-inside-inner-col{ width:100%; }
.sec-level-points .bp-iconrow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.sec-level-points .bp-iconrow__item{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:16px; row-gap:5px; align-items:start; text-align:left;
  padding:22px 22px 24px; border:1px solid var(--color-shade-0,#E6E6EC);
  border-radius:10px; background:#fff;
}
.sec-level-points .bp-iconrow .v-badge{
  grid-column:1; grid-row:1 / span 2; align-self:start;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px;
  background:rgba(201,162,74,.12); color:var(--vc-gold);
}
.sec-level-points .bp-iconrow .v-badge svg{ width:24px; height:24px; }
.sec-level-points .bp-iconrow .v-label{ grid-column:2; grid-row:1; margin:2px 0 4px; font-size:16.5px; color:var(--vc-navy); }
.sec-level-points .bp-iconrow .v-sub{ grid-column:2; margin:0; font-size:14.5px; line-height:1.55; color:#5C5C6B; }
.sec-level-points .bp-iconrow .v-sub em{ font-style:normal; }

@media (max-width:900px){
  .sec-level-points .bp-iconrow{ grid-template-columns:1fr; gap:16px; }
}

/* Every page header the same height, so the site does not step up and down as
   you move through it. The homepage hero is 586 because it also carries the
   credential row and two buttons; the interior heroes have neither and settled
   at 560. A min-height levels them without touching the homepage, which already
   exceeds it. Above the 780 breakpoint only: on a phone the hero reorders and
   must be free to size to its content. */
@media (min-width:781px){
  .bp-hero.bp-hero--art{ min-height:586px; }
}

/* ==========================================================================
   MEMBER FORMS -- Log In and Join.
   ! These are DUMMY layouts. Paid Memberships Pro renders the real forms and
   this is what they get styled to look like. Deliberately no <form> element and
   no action, so nothing can be submitted or collected from the build site.
   ========================================================================== */

.sec-form > .kt-inside-inner-col{ width:100%; }

.vc-form{
  max-width:520px; margin:0 auto;
  background:#fff; border:1px solid var(--color-shade-0,#E6E6EC);
  border-radius:12px; padding:36px 36px 34px;
}
.vc-form--wide{ max-width:760px; }
/* Log In and Join sat at 520 and 760 on two pages a visitor moves straight
   between, which reads as the card changing size rather than the page changing.
   One width for both. The contact form on About keeps its own, further down. */
.sec-form .vc-form{ max-width:760px; }

.vc-form__legend{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vc-gold); margin:0 0 18px;
}
.vc-form__row{ margin:0 0 18px; }
.vc-form__row label{
  display:block; font-size:14px; font-weight:600; color:var(--vc-navy); margin:0 0 6px;
}
.vc-form__row input[type=text],
.vc-form__row input[type=email],
.vc-form__row input[type=password]{
  width:100%; font:inherit; font-size:15px; color:#1C1C26;
  padding:11px 13px; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:6px;
  background:#fbfbfa;
}
.vc-form__row--split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vc-form__check{ display:flex; align-items:center; gap:9px; font-size:14px; color:#5C5C6B; margin:0 0 20px; }
.vc-form__btn{
  display:inline-block; width:100%; text-align:center;
  background:var(--vc-gold); color:var(--vc-midnight);
  font-weight:600; font-size:15px; padding:13px 26px; border:0; border-radius:6px;
  text-decoration:none; cursor:not-allowed;
}
.vc-form__note{ margin:16px 0 0; font-size:13px; color:#5C5C6B; text-align:center; }
.vc-form__note a{ color:var(--vc-navy); }

/* The level summary above the account fields on Join. */
.vc-form__summary{
  background:var(--vc-midnight); border-radius:10px; padding:22px 24px; margin:0 0 26px; color:#fff;
}
.vc-form__summary p{ margin:0 0 4px; color:#c9c9e0; font-size:14.5px; }
.vc-form__summary strong{ color:#fff; font-size:17px; }

@media (max-width:560px){
  .vc-form{ padding:26px 22px 24px; }
  .vc-form__row--split{ grid-template-columns:1fr; gap:0; }
  .vc-form__row--split .vc-form__row{ margin-bottom:18px; }
}

/* The level chooser on Join. The only live control on either dummy form: it
   changes the summary above the account fields and nothing else. */
.vc-form__row select{
  width:100%; font:inherit; font-size:15px; color:#1C1C26;
  padding:11px 13px; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:6px;
  background:#fff; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--vc-navy) 50%),linear-gradient(135deg,var(--vc-navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.vc-form__row select:focus-visible{ outline:2px solid var(--vc-gold); outline-offset:2px; }

/* The level chooser is the decision on the Join page, so it is given the weight
   of one rather than sitting in the run of account fields. */
.vc-form__choose{
  background:#fbfaf6; border:1px solid rgba(201,162,74,.45);
  border-radius:10px; padding:20px 22px 22px; margin:0 0 22px;
}
.vc-form__choose label{
  display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vc-gold); margin:0 0 10px; font-weight:500;
}
.vc-form__choose select{
  /* Full width of the panel so it matches every other field in the form; it was
     398 against their 686 and read as a stray control. appearance:none is what
     lets the chevron be drawn rather than left to the browser: the native one is
     hairline thin and sits hard against the border. Flat lengths, no clamp. */
  display:block; width:100%; box-sizing:border-box;
  font-size:16.5px; font-weight:600; color:var(--vc-navy);
  padding:15px 52px 15px 18px;
  border:1.5px solid var(--vc-navy); border-radius:10px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1.6 1.7 8 8.1 14.4 1.7' stroke='%231A1948' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:16px 10px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  cursor:pointer;
}
.vc-form__choose select:focus-visible{
  outline:2px solid var(--vc-gold); outline-offset:2px;
}

/* Contact form at the foot of About. On paper, because the section above it is
   already a coloured band. */
.sec-contact > .kt-inside-inner-col{ width:100%; }
.sec-contact .vc-form{ max-width:640px; }
.sec-contact .vc-form__row textarea{
  width:100%; font:inherit; font-size:15px; color:#1C1C26; min-height:150px; resize:vertical;
  padding:11px 13px; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:6px; background:#fbfbfa;
}
/* The intro copy used to live INSIDE the embed field with the form markup,
   which meant the only way to edit a sentence was to hand-edit raw HTML in a
   textarea. It is in the Body field now, where a client can reach it, so the
   copy is styled off .txt-block__col rather than off a class in the embed.
   Trap 43's lesson: the front end was right the whole time; the defect only
   existed where the client works. */
.sec-contact .txt-block__col p,
.sec-contact .vc-form__intro{ margin:0 0 22px; font-size:15.5px; line-height:1.6; color:#5C5C6B; }
.sec-contact .txt-block__col p:last-child{ margin-bottom:0; }

/* The form sat under the copy and centred, so a short section became a tall
   one and the page ended on a column of air. Two columns like every other
   two-column band, same 64px.

   The copy paragraphs live INSIDE the embed wrapper with the form, so they
   cannot be placed on the grid from where they are. display:contents on the
   wrapper promotes its children into the grid and the placement then works
   without touching the markup. Trap 40. */
.sec-contact .txt-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:64px; align-items:start;
}
.sec-contact .txt-block__kicker,
.sec-contact .txt-block__heading,
.sec-contact .txt-block__col{ grid-column:1; }
.sec-contact .txt-block__embed{ display:contents; }
.sec-contact .txt-block__embed > .vc-form__intro{ grid-column:1; }
.sec-contact .txt-block__embed > .vc-form{
  grid-column:2; grid-row:1 / span 20;
  max-width:none; margin:0; align-self:start;
}

@media (max-width:900px){
  .sec-contact .txt-block{ grid-template-columns:1fr; }
  .sec-contact .txt-block__embed > .vc-form{ grid-column:1; grid-row:auto; margin-top:26px; }
}

/* ==========================================================================
   PAID MEMBERSHIPS PRO
   PMPro renders its own nine pages in plain PHP and we style the output; they
   are not patterns and never will be. Classes read off the live build rather
   than from documentation, so these selectors match what actually ships.
   Everything here reuses the tokens and the shapes already used by .vc-form
   and .bp-panel, so the member pages look like the rest of the site rather
   than like a plugin.
   ========================================================================== */

.pmpro{ max-width:var(--vc-measure); margin:0 auto; padding:75px 28px; }
.pmpro a{ color:var(--vc-navy); }

/* Cards. PMPro's card is the same object as our panel, so it gets the same
   border, radius and shadow rather than a second card language. */
.pmpro .pmpro_card{
  background:#fff; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:12px;
  overflow:hidden; margin:0 0 26px;
  box-shadow:0 30px 60px -46px rgba(26,25,72,.5);
}
.pmpro .pmpro_card_title{
  margin:0; padding:18px 24px; background:var(--vc-midnight); color:#fff;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
}
.pmpro .pmpro_card_title h2,
.pmpro .pmpro_card_title h3{ font:inherit; margin:0; color:inherit; letter-spacing:inherit; }
.pmpro .pmpro_card_content{ padding:24px; }

/* The actions row sat flush against the content above it with no separation,
   so Edit Profile read as part of the email address. Its own strip, with a
   rule above it. */
.pmpro .pmpro_card_actions{
  padding:16px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  background:#fbfbfa; border-top:1px solid var(--color-shade-0,#E6E6EC);
}

/* A membership card with no subscription behind it renders an empty content
   div, which reads as a broken box rather than as nothing to say. The Testing
   Only gateway makes an order but no subscription, so this is the normal state
   on the build and will fill itself once a real gateway is connected.
   :not(:has(*)) rather than :empty, because the div is full of whitespace. */
.pmpro .pmpro_card_content:not(:has(*)){ display:none; }

/* Sections and headings */
.pmpro .pmpro_section{ margin:0 0 34px; }

/* ONE gap between a section heading and the card under it. PMPro wraps some
   cards in .pmpro_section_content and leaves others bare, so a margin on the
   wrapper reached only half of them: My Account measured 0 and My Memberships
   14 on the same page. Putting it on the heading applies either way.
   Same lesson as the two-column geometry: fix it in one place, not per case. */
.pmpro .pmpro_section > h1,
.pmpro .pmpro_section > h2,
.pmpro .pmpro_section > h3{ margin:0 0 18px; }
.pmpro .pmpro_section_content{ margin-top:0; }
.pmpro h1{ font-family:var(--font-serif); font-weight:600; color:var(--vc-navy);
  font-size:clamp(28px,3.4vw,40px); line-height:1.1; margin:0 0 10px; }
.pmpro h2, .pmpro h3{ font-family:var(--font-serif); font-weight:600; color:var(--vc-navy); }

/* Forms. Same shapes as .vc-form so a member never meets two input styles. */
.pmpro .pmpro_form_field{ margin:0 0 18px; }
.pmpro .pmpro_form_label{
  display:block; font-size:14px; font-weight:600; color:var(--vc-navy); margin:0 0 6px;
}
.pmpro .pmpro_form_input{
  width:100%; font:inherit; font-size:15px; color:#1C1C26;
  padding:11px 13px; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:6px;
  background:#fbfbfa;
}
.pmpro .pmpro_form_input:focus-visible{ outline:2px solid var(--vc-gold); outline-offset:2px; }
.pmpro .pmpro_form_input-select{ cursor:pointer; }
.pmpro .pmpro_form_fieldset{ border:0; padding:0; margin:0 0 8px; }

/* Field widths, and I got this wrong once before fixing it properly.
   Capping .pmpro_form_fields dragged the whole CARD in with it, so three of
   the four checkout cards came out narrower than Membership Information. The
   cap belongs on the fields, not on their wrapper.
   So: cards stay full width; a LONE field is capped so it cannot stretch the
   full 1074 as Current Password did; and a field inside a two-column row is
   forced to fill its column, because PMPro halves it again in there and left
   billing fields at 255 inside 528 columns, which is why email addresses had
   nowhere to go.
   The input rule is by element type as well as class, because PMPro does not
   put pmpro_form_input on every control and the class alone missed some. */
.pmpro .pmpro_form_fields:not(.pmpro_cols-2) > .pmpro_form_field{ max-width:520px; }
.pmpro .pmpro_cols-2 > .pmpro_form_field{ width:100%; max-width:none; }
.pmpro input[type="text"],
.pmpro input[type="email"],
.pmpro input[type="password"],
.pmpro input[type="tel"],
.pmpro input[type="url"],
.pmpro input[type="number"],
.pmpro select,
.pmpro textarea{ width:100%; }
.pmpro .pmpro_cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:640px){ .pmpro .pmpro_cols-2{ grid-template-columns:1fr; } }

/* Buttons */
.pmpro .pmpro_btn{
  display:inline-block; text-align:center;
  background:var(--vc-gold); color:var(--vc-midnight);
  font-weight:600; font-size:15px; padding:13px 26px; border:0; border-radius:6px;
  text-decoration:none; cursor:pointer;
}
.pmpro .pmpro_btn:hover{ background:var(--vc-gold-light); }
.pmpro .pmpro_btn-plain{
  background:transparent; color:var(--vc-navy); padding:0; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.pmpro .pmpro_btn-plain:hover{ background:transparent; color:var(--vc-gold); }
/* The select button renders display:block and fills its cell. No readable
   stylesheet sets it: every rule I can walk says inline-block, yet the computed
   value is block until !important is used. Same family as trap 13, a layered
   rule winning where an unlayered one should. One declaration, not a habit. */
.pmpro a.pmpro_btn-select{
  display:inline-block !important;
  width:auto; padding:10px 22px; font-size:14.5px;
}

/* The levels table */
.pmpro .pmpro_level_group{ margin:0 0 40px; }
.pmpro .pmpro_table{ width:100%; border-collapse:collapse; }
/* PMPro puts the level NAME in a row-header th inside the body, so the column
   heading style has to be scoped to thead or it eats the level names and turns
   them into gold mono capitals. Caught by looking at the page, not the markup. */
.pmpro .pmpro_table thead th{
  text-align:left; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vc-gold); font-weight:500;
  padding:0 0 12px; border-bottom:1px solid var(--color-shade-0,#E6E6EC);
}
.pmpro .pmpro_table tbody th{
  text-align:left; font-family:var(--font-serif); font-weight:600; font-size:18px;
  color:var(--vc-navy); letter-spacing:normal; text-transform:none;
  padding:18px 0; border-bottom:1px solid var(--color-shade-0,#E6E6EC); vertical-align:middle;
}
.pmpro .pmpro_table td{ padding:18px 0; border-bottom:1px solid var(--color-shade-0,#E6E6EC); vertical-align:middle; }
.pmpro .pmpro_table td:last-child{ text-align:right; }
.pmpro .pmpro_level_name_text{ font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--vc-navy); }
.pmpro .pmpro_level-price,
.pmpro .pmpro_level_cost_text{ font-family:var(--font-mono); font-size:14px; color:#5C5C6B; }

/* Messages. PMPro uses these for errors and for the gateway notice. */
.pmpro .pmpro_message{
  padding:14px 18px; border-radius:8px; margin:0 0 22px; font-size:15px;
  background:#fbfaf6; border:1px solid rgba(201,162,74,.45); color:#5C5C6B;
}

/* Login and the actions nav under it */
.pmpro .pmpro_login_wrap{ max-width:520px; margin:0 auto; }
.pmpro .pmpro_actions_nav{
  margin-top:18px; font-size:14px; color:#5C5C6B; display:flex; gap:18px; flex-wrap:wrap;
}
.pmpro .pmpro_font-large{ font-size:17px; }

/* ==========================================================================
   THE SPLIT CTA - the closing section on Level One and Level Two
   Written 2026-08-28. NOT YET IN baseplate-brand.css.

   Append this to the brand CSS and re-upload ONLY AFTER the Baseplate commit
   "Callout: an optional split layout with a second action" is deployed. Until
   then the markup it styles does not exist.

   Two panels divided by a gold hairline: the alternative on the left in white,
   the purchase on the right in midnight, matching the price card at the top of
   the same page.

   It carries its OWN section class rather than reusing .sec-price-bar. Those
   rules are all `.sec-price-bar .callout`, two classes, and a single-class
   `.callout--split` would lose to every one of them. A separate class is trap
   19 avoided by design instead of by !important.
   ========================================================================== */

.sec-cta-split > .kt-inside-inner-col{ width:100%; }

.sec-cta-split .callout--split{
  display:grid;
  grid-template-columns:1fr 1fr;
  /* The base .callout sets clamp() padding, which insets both panels and shows
     as white gutters around the navy one. Nothing else here overrides it, so
     it has to be zeroed explicitly. The padding lives on the panels instead. */
  padding:0;
  align-items:stretch;
  background:#fff;
  border:1px solid rgba(201,162,74,.35);
  border-radius:14px;
  overflow:hidden;
}

.sec-cta-split .callout__aside{
  background:#fff;
  border-right:1px solid var(--vc-gold);
  padding:38px 40px 34px;
  display:flex;
  flex-direction:column;
}
.sec-cta-split .callout__main{
  background:var(--vc-midnight);
  padding:38px 40px 34px;
  display:flex;
  flex-direction:column;
}

/* The aside panel, on paper */
.sec-cta-split .callout__label--aside{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#8a8aa4; margin:0 0 14px;
}
.sec-cta-split .callout__heading--aside{
  font-family:var(--font-serif); font-weight:600; color:var(--vc-navy);
  font-size:clamp(24px,2.6vw,29px); line-height:1.12; margin:0 0 12px;
}
.sec-cta-split .callout__text--aside{
  color:#4a4a66; font-size:15.5px; line-height:1.6; margin:0 0 26px;
}
/* margin-top:auto pins both buttons to the foot, so they line up across the
   hairline however unevenly the two panels fill. */
.sec-cta-split .callout__link--aside{ margin:auto 0 0; }
.sec-cta-split .callout__link--aside a{
  display:inline-block; background:#fff; color:var(--vc-navy);
  border:1px solid var(--vc-gold);
  font-weight:600; font-size:15px; padding:12px 25px; border-radius:6px;
  text-decoration:none;
}
.sec-cta-split .callout__link--aside a:hover{ background:var(--vc-paper); }

/* The purchase panel */
.sec-cta-split .callout__main .callout__label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vc-gold); margin:0 0 14px;
}
.sec-cta-split .callout__main .callout__heading{
  font-family:var(--font-serif); font-weight:600; color:#fff;
  font-size:clamp(30px,3.4vw,38px); line-height:1.05; margin:0 0 12px;
}
.sec-cta-split .callout__main .callout__text{
  color:#c9c9e0; font-size:15.5px; line-height:1.6; margin:0 0 26px;
}
.sec-cta-split .callout__main .callout__link{ margin:auto 0 0; }
.sec-cta-split .callout__main .callout__link a{
  display:inline-block; background:var(--vc-gold); color:var(--vc-midnight);
  font-weight:600; font-size:15px; padding:13px 26px; border-radius:6px;
  text-decoration:none;
}
.sec-cta-split .callout__main .callout__link a:hover{ background:var(--vc-gold-light); }

/* Stacked, the hairline turns horizontal */
@media (max-width:860px){
  .sec-cta-split .callout--split{ grid-template-columns:1fr; }
  .sec-cta-split .callout__aside{
    border-right:0; border-bottom:1px solid var(--vc-gold); padding:28px 26px;
  }
  .sec-cta-split .callout__main{ padding:28px 26px; }
}


/* --- footer social circles ---------------------------------------------------
   2026-09-14. The two social links become circles above the
   legal bar, bottom right: the X profile image (uploads/brand/x-profile-cat.jpg,
   uploaded beside this file) and the Discord mark, with X and Discord centred
   under each. The "Find us on" label is hidden, the markup is untouched, and
   the links stay named for anyone who cannot see the images. The row keeps the
   legal bar's single hairline by carrying it as its own border-bottom, so the
   bar's own border-top comes off (trap 19: same specificity, later source). */
.site-footer__legal .site-footer__social{
  order:-1; flex-basis:100%; margin-left:0; justify-content:flex-end;
  align-items:flex-start; gap:28px; padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer__legal{ border-top:0; }
.site-footer__social-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.site-footer__social .nav{ gap:28px; }
.site-footer__social .nav a{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.14em; color:#c9c9e0;
}
.site-footer__social .nav a::before{
  content:""; display:block; width:56px; height:56px; border-radius:50%;
  box-sizing:border-box; background-position:center; background-repeat:no-repeat;
}
.site-footer__social .nav li:nth-child(1) a::before{
  background-color:var(--vc-navy); background-image:url("/wp-content/uploads/brand/x-profile-cat.jpg");
  background-size:cover; border:2px solid var(--vc-gold);
}
.site-footer__social .nav li:nth-child(2) a::before{
  background-color:#5865F2; background-size:32px 32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z' fill='%23ffffff'/></svg>");
}
.site-footer__social .nav a:hover{ color:var(--vc-gold); }
/* 2026-09-16. Third circle: the YouTube channel, its own red behind a white play mark,
   the same 56px circle as the other two. Keyed on position like them: X, Discord, YouTube. */
.site-footer__social .nav li:nth-child(3) a::before{
  background-color:#FF0000; background-size:30px 30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/></svg>");
}
@media (max-width:720px){
  .site-footer__legal .site-footer__social{ justify-content:center; }
}

/* --- ticker: centre the tape in its band --------------------------------
   2026-09-15. TradingView's ticker tape renders 46px tall on a desktop
   inside a container whose inline min-height is 72px, kept for phones where
   the tape wraps to two rows. The tape sat at the top of the band with the
   rest empty. Centre it, and the band reads as one strip at every width. */
.sec-ticker .tradingview-widget-container{ display:flex; align-items:center; }
.sec-ticker .tradingview-widget-container__widget{ width:100%; }
.sec-ticker .tradingview-widget-container__widget iframe{ display:block; }

/* --- real forms ------------------------------------------------------------
   2026-09-15. The Join button is a link to the checkout now, not a dead
   control, so it gets a pointer. The About contact form is Contact Form 7
   inside the same .vc-form card, so its fields take the .vc-form__row look
   without the markup needing those classes. */
a.vc-form__btn{ cursor:pointer; }
a.vc-form__btn:hover{ background:#D9B45E; }
.sec-contact .wpcf7 form p{ margin:0 0 18px; }
.sec-contact .wpcf7 label{
  display:block; font-size:14px; font-weight:600; color:var(--vc-navy); margin:0 0 6px;
}
.sec-contact .wpcf7 input[type=text],
.sec-contact .wpcf7 input[type=email],
.sec-contact .wpcf7 textarea{
  width:100%; font:inherit; font-size:15px; color:#1C1C26; margin-top:6px;
  padding:11px 13px; border:1px solid var(--color-shade-0,#E6E6EC); border-radius:6px;
  background:#fbfbfa;
}
.sec-contact .wpcf7 textarea{ min-height:150px; resize:vertical; }
.sec-contact .wpcf7 input[type=submit]{
  display:inline-block; width:100%; text-align:center; cursor:pointer;
  background:var(--vc-gold); color:var(--vc-midnight);
  font:inherit; font-weight:600; font-size:15px; padding:13px 26px; border:0; border-radius:6px;
}
.sec-contact .wpcf7 input[type=submit]:hover{ background:#D9B45E; }
.sec-contact .wpcf7 .wpcf7-spinner{ display:block; margin:10px auto 0; }
.sec-contact .wpcf7 .wpcf7-not-valid-tip{ font-size:13px; color:#B4413A; margin-top:6px; }
.sec-contact .wpcf7 .wpcf7-response-output{
  margin:16px 0 0; padding:11px 14px; border:1px solid var(--vc-gold); border-radius:6px;
  font-size:14px; color:var(--vc-navy);
}

/* --- signed-in state -------------------------------------------------------
   2026-09-15. The welcome card's name is a link and took the body link
   colour, navy on the navy card, so it vanished. Gold. And the header's
   sign-out sits where Join sits, so it keeps that button's shape. */
.pmpro .pmpro_card_title a{ color:var(--vc-gold); text-decoration:none; }
.pmpro .pmpro_card_title a:hover{ color:#E0BE6E; }

/* --- photograph headers ------------------------------------------------------
   2026-09-15. The member area and the Weekly BTC page carry one of the
   client's own pictures instead of a drawn chart. The file has a transparent
   left edge baked in, so the picture dissolves into the band's own gradient
   rather than stopping at a line. Subject on the right at its natural height;
   on a phone the portrait version sits under the heading with its faded top
   blending into the band above it. */
.sec-hero-photo .bp-hero{
  background:linear-gradient(160deg,#211F58 0%, var(--vc-navy) 45%, var(--vc-midnight) 100%);
  /* height and measure come from the block's own fields, as the variables the
     block emits, so the editor's Height and Content width still mean something */
  min-height:var(--bp-hero-min-height, 560px);
  /* The Section's inner column is a flex box that shrink-wraps its child, so
     without this the hero is a 560px box in the middle of the band and the
     picture pins to the right of that box, not of the band. */
  width:100%;
}
.sec-hero-block.sec-hero-photo > .kt-inside-inner-col{ width:100%; max-width:none; padding:0 !important; }  /* the picture runs edge to edge; the copy carries its own gutter. !important for the same reason as the ticker strip: Kadence's tablet padding lands inline below its breakpoint */  /* the inner column shrink-wraps, centres itself and caps at the content width; two classes so it outranks the column's own rule */
.sec-hero-photo .wp-block-hero{ width:100%; }
.sec-hero-photo .bp-hero__media{
  background-size:auto 100%; background-position:right center; background-repeat:no-repeat;
}
.sec-hero-photo .bp-hero__inner{ max-width:var(--bp-hero-measure, 1120px); padding:56px 28px; }
.sec-hero-photo .bp-hero__heading{ max-width:12ch; text-shadow:none; color:#fff; }
.sec-hero-photo .bp-hero__lede{ max-width:38ch; color:#c9c9e0; }
@media (max-width:780px){
  /* Heading first on the band, the portrait picture under it, its faded top
     blending up into the band. The theme makes the media absolute; here it
     flows as a block. */
  .sec-hero-photo .bp-hero{ min-height:0; flex-direction:column; }
  .sec-hero-photo .bp-hero__inner{ order:1; padding:40px 28px 8px; }
  .sec-hero-photo .bp-hero__media{
    order:2; position:relative; inset:auto; width:100%; min-height:0;
    aspect-ratio:4 / 5; background-size:cover; background-position:center bottom;
  }
}

/* A picture that fills the band edge to edge, for a file with no faded edge.
   The subject stays right of centre so the heading has the quiet left half. */
.sec-hero-photo--cover .bp-hero__media{ background-size:cover; background-position:62% center; }
@media (max-width:780px){
  .sec-hero-photo--cover .bp-hero__media{ background-size:cover; background-position:center bottom; }
}

/* --- photograph headers: copy on the body's left edge, picture with the content ---
   2026-09-16. Measured, not eyeballed: the drawn-chart headers put their copy
   on the same left edge as the body below them (130px at 1440), the photograph
   headers put it 58px further right, because the copy's measure was 1120 with
   a 28px gutter inside it while the body's Section is 1180 with none. Same
   measure and no gutter, and they line up at every width. Between 781 and
   1240 the gutter comes back so the copy never touches the edge; the phone
   rule above still owns everything below that. */
/* Only the editor's "contained" choice is remapped, to this brand's 1180 body
   measure; narrow and wide keep the block's own values through its variable. */
.sec-hero-photo .bp-hero--width-contained .bp-hero__inner{ max-width:1180px; }
@media (min-width:1241px){ .sec-hero-photo .bp-hero__inner{ padding:56px 0; } }
@media (min-width:781px) and (max-width:1240px){ .sec-hero-photo .bp-hero__inner{ padding:56px 28px; } }
/* Below 781px the phone rule earlier in this file keeps its 28px gutter: the
   desktop padding above is fenced to its own widths so it cannot outrank it. */
/* A picture that does not fill the band (the slide deck) was pinned to the
   right edge of the screen, a long way from the copy on a wide monitor.
   Positioned from the centre instead, so its subject ends on the body's right
   edge whatever the screen: the slides occupy the left 612px of the 781px the
   render is wide at band height, and the body's half-width is 590. */
@media (min-width:781px){
  .sec-hero-photo:not(.sec-hero-photo--cover) .bp-hero__media{ background-position:calc(50% + 368px) center; }
}

/* --- the course promo at the foot of Services ------------------------------
   The slide deck sits inside the card as well, coming in from the right, so
   the card reads as the course rather than a plain navy block. Below 880px
   the copy takes the whole card and the picture goes. Keyed on the Section's
   own class, sec-course-promo, not on sec-approach-cta, which Compare
   Services shares for a plain membership card. */
.sec-course-promo .callout{
  position:relative; overflow:hidden; min-height:300px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--vc-navy) url("/wp-content/uploads/2026/09/course-slide-deck.png") no-repeat calc(100% + 30px) center / auto 120%;
  padding-right:46%;
}
@media (max-width:880px){
  .sec-course-promo .callout{ background-image:none; padding-right:clamp(28px,3.4vw,44px); min-height:0; }
}

/* The closing card on Compare Services carries a stack of chart tiles the same
   way, 22 September, keyed on its own class. Same geometry as the course promo
   so the two cards read as a pair. */
.sec-compare-promo .callout{
  position:relative; overflow:hidden; min-height:300px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--vc-navy) url("/wp-content/uploads/2026/09/compare-chart-tiles.png") no-repeat calc(100% + 30px) center / auto 120%;
  padding-right:46%;
}
@media (max-width:880px){
  .sec-compare-promo .callout{ background-image:none; padding-right:clamp(28px,3.4vw,44px); min-height:0; }
}

/* ==========================================================================
   Labels, 22 September. The small kickers, tier labels, ribbons, quote
   attributions, footer headings, form legends and the hero eyebrow leave the
   mono face: the tracked uppercase mono read as machine-made.
   They are set in the body sans, as typed, no tracking, so they read as part
   of the page rather than as a third voice. Later in the file than every rule
   they override, at the same specificity, so source order settles it. The
   captions drawn on the hero canvas keep the mono: chart annotation, not copy.
   ========================================================================== */
.fcol__title,
.bp-plans__tier,
.bp-plans__ribbon,
.txt-block__kicker,
.sec-markets .txt-block__kicker,
.site-footer__social-label,
.site-footer__social .nav a,
.callout__label,
.sec-quotes .testimonial__attr,
.sec-price-split .callout__label,
.sec-price-bar .callout__label,
.vc-form__legend,
.vc-form__choose label,
.pmpro .pmpro_card_title,
.pmpro .pmpro_table thead th,
.sec-cta-split .callout__label--aside,
.sec-cta-split .callout__main .callout__label,
.sec-method .v-badge,
.bp-hero__eyebrow{
  font-family:var(--font-family-sans);
  letter-spacing:0;
  text-transform:none;
  font-size:14px;
  font-weight:600;
}
.bp-plans__ribbon,
.site-footer__social .nav a{ font-size:13px; }

/* The same rule for the theme's own small type that the first pass missed,
   found by scanning every page (22 September, later): video card dates, stamps
   and the members-only chip, the panel cards' bars, values and chips, the
   Compare table headings, a post's category line, and the membership plugin's
   price lines. Same face, as typed, no tracking. */
.bp-posts__date,
.bp-posts__stamp,
.bp-posts__lock-text,
.bp-panel__bar-label,
.bp-panel__bar-note,
.bp-panel__value,
.bp-panel__chip,
.bp-panel__media-meta,
.bp-compare thead th,
.bp-compare__feature,
.post-header__cat,
.pmpro .pmpro_level-price,
.pmpro .pmpro_level_cost_text,
.pmpro_level_cost_text{
  font-family:var(--font-family-sans);
  letter-spacing:0;
  text-transform:none;
}
.bp-panel__bar-label,
.bp-compare thead th,
.bp-compare__feature,
.post-header__cat{ font-size:14px; font-weight:600; }
.bp-posts__date,
.bp-panel__bar-note,
.bp-panel__media-meta{ font-size:13px; font-weight:500; }
.bp-panel__value{ font-size:15px; font-weight:600; }
.bp-posts__stamp,
.bp-posts__lock-text,
.bp-panel__chip{ font-size:12px; font-weight:600; }

/* ==========================================================================
   Quote carousel, 22 September. The grid of quote cards read as blocky, so
   one quote at a time, larger and in italic, still a Section holding one kit
   block (acf/carousel). Structure is in the theme's pending
   block sheet; this is the look.
   ========================================================================== */
.sec-quote-carousel > .kt-inside-inner-col{ width:100%; max-width:1180px; margin-inline:auto; }
.sec-quote-carousel .bp-carousel__heading{
  text-align:center; margin:0 0 28px;
}
.sec-quote-carousel .bp-carousel__slide--quote{ padding:8px 56px; }
.sec-quote-carousel .bp-carousel__quote{
  max-width:44ch; margin:0 auto; text-align:center;
}
.sec-quote-carousel .bp-carousel__quote blockquote{
  margin:0 0 18px; padding:0; border:0;
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:clamp(21px,2.1vw,28px); line-height:1.4; color:var(--vc-navy);
  text-wrap:balance;
}
.sec-quote-carousel .bp-carousel__quote blockquote::before{ content:"\201C"; }
.sec-quote-carousel .bp-carousel__quote blockquote::after{ content:"\201D"; }
.sec-quote-carousel .bp-carousel__quote figcaption{
  font-family:var(--font-family-sans); font-size:14px; font-weight:600; color:var(--vc-gold);
}
.sec-quote-carousel .bp-carousel__controls{ margin-top:26px; color:var(--vc-navy); }
.sec-quote-carousel .bp-carousel__btn{ border-color:var(--color-shade-0,#E6E6EC); transition:border-color .2s, color .2s; }
.sec-quote-carousel .bp-carousel__btn:hover,
.sec-quote-carousel .bp-carousel__btn:focus-visible{ border-color:var(--vc-gold); color:var(--vc-gold); }
.sec-quote-carousel .bp-carousel__dot{ background:var(--vc-gold); }
@media (max-width:640px){
  .sec-quote-carousel .bp-carousel__slide--quote{ padding:4px 8px; }
  .sec-quote-carousel .bp-carousel__quote blockquote{ font-size:20px; }
}

/* ==========================================================================
   Markets covered, 22 September. The breadth of markets as six real-text
   cards rather than a list or a picture (a picture shrank to nothing on a
   phone): one Section, a centred heading and an icon row in the badge
   style, where the badge carries the market's name, the label the instrument
   and the line beneath what it covers.
   ========================================================================== */
.sec-markets > .kt-inside-inner-col{ width:100%; max-width:1180px; margin-inline:auto; display:block; }
.sec-markets .bp-heading{ text-align:center; margin:0 0 32px; }
.sec-markets .bp-heading__title{
  font-family:var(--font-serif); font-size:clamp(28px,3.2vw,40px); font-weight:600; line-height:1.15; color:var(--vc-navy); margin:0;
}
/* The column count is the block's own field, printed as bp-iconrow--cols-N; the
   grid here follows it rather than fixing three. */
.sec-markets .bp-iconrow{ display:grid; gap:22px; }
.sec-markets .bp-iconrow--cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sec-markets .bp-iconrow--cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sec-markets .bp-iconrow--cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.sec-markets .bp-iconrow__item{
  background:linear-gradient(165deg,#1f1e55,var(--vc-navy)); border:1px solid rgba(201,162,74,.38); border-radius:14px;
  padding:26px 28px 24px; text-align:left; box-shadow:0 24px 48px -34px rgba(26,25,72,.6);
}
.sec-markets .v-badge{
  display:block; width:auto; height:auto; margin:0 0 6px; border:0; border-radius:0;
  font-family:var(--font-family-sans); font-size:14px; font-weight:600; letter-spacing:0; color:var(--vc-gold);
}
.sec-markets .v-label{ margin:0 0 4px; font-family:var(--font-serif); font-size:clamp(22px,2vw,28px); font-weight:500; color:#fff; }
.sec-markets .v-sub{ margin:0; font-size:15px; color:#bfbfd6; }
.sec-markets .v-sub em{ font-style:normal; }
@media (max-width:900px){ .sec-markets .bp-iconrow--cols-3, .sec-markets .bp-iconrow--cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:560px){ .sec-markets .bp-iconrow--cols-2, .sec-markets .bp-iconrow--cols-3, .sec-markets .bp-iconrow--cols-4{ grid-template-columns:1fr; } .sec-markets .bp-iconrow__item{ padding:20px 22px 18px; } }

/* The drawn chart's own words, 22 September: captions, level labels, chips
   and any layer text, and the Replay button. The script draws them in a mono
   by default and a layer may set its own; this site's typography is set here,
   where a stylesheet outranks a presentation attribute, and the field stays
   meaningful for anyone who wants a different face on one label: only the
   script's mono default and unstyled layers are touched, a layer that names a
   face keeps it. */
.bp-hero__art-svg text[font-family="monospace"],
.bp-hero__art-svg text:not([font-family]){ font-family:var(--font-family-sans); letter-spacing:0; font-weight:500; }
.bp-hero__art-replay{ font-family:var(--font-family-sans); letter-spacing:0; text-transform:none; font-weight:600; }

/* No widows on a heading, 23 September: the browser balances the lines, so a
   two-line heading breaks in the middle rather than leaving one word on the
   second line. Headings with their own breaks are unaffected. */
h1, h2, h3, .bp-plans__heading, .bp-heading__title, .bp-carousel__heading{ text-wrap:balance; }