/* ==========================================================================
   Investor Signals — Gutenberg bridge
   --------------------------------------------------------------------------
   main.css styles our own classes (.btn, .card-num, .qa …). Core blocks emit
   their own wrappers (.wp-block-button > .wp-block-button__link), so this file
   maps core block output onto the same design system. Nothing here invents new
   design decisions — every value is a token from main.css.

   Load order: main.css -> blocks.css -> mobile.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Layout: .wrap is our container. Core's constrained layout also injects
      padding, so groups carrying .wrap opt out of core's own gutter.
   -------------------------------------------------------------------------- */
.wp-block-group.wrap,
.wp-block-group.wrap.has-global-padding{
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.wp-block-group.wrap > .alignfull{
  margin-left:0;margin-right:0;width:auto;
}
/* full-bleed section bands */
.wp-block-group.alignfull,
.alignfull{
  margin-block:0;margin-inline:0;max-width:100%;width:auto;
}


/* --------------------------------------------------------------------------
   2. Buttons — core puts the class on the wrapper, the styling belongs on the
      anchor, so each variation is bridged explicitly.
   -------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);
  line-height:1;padding:16px 26px;border:1px solid transparent;border-radius:999px;
  text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap}

.wp-block-button.is-style-is-accent .wp-block-button__link{
  background:var(--green-signal);color:var(--green-deep);
}
.wp-block-button.is-style-is-primary .wp-block-button__link{
  background:var(--green-forest);color:#fff;
}
.wp-block-button.is-style-is-ghost-dark .wp-block-button__link{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.34);
}
.wp-block-button.is-style-is-ghost-light .wp-block-button__link{
  background:transparent;color:var(--text-strong);border-color:var(--border-strong);
}
.wp-block-button.is-style-is-small .wp-block-button__link{
  font-size:var(--fs-xs);padding:11px 18px;
}
@media (hover:hover) and (pointer:fine){
  .wp-block-button .wp-block-button__link:hover{transform:translateY(-1px)}
  .wp-block-button.is-style-is-accent .wp-block-button__link:hover{background:#8FD100}
  .wp-block-button.is-style-is-primary .wp-block-button__link:hover{background:#186540}
  .wp-block-button.is-style-is-ghost-dark .wp-block-button__link:hover{
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);
  }
  .wp-block-button.is-style-is-ghost-light .wp-block-button__link:hover{
    background:var(--surface-sunken);border-color:var(--text-faint);
  }
  .wp-block-button.is-style-is-accent .wp-block-button__link:hover,
  .wp-block-button.is-style-is-primary .wp-block-button__link:hover{
    box-shadow:0 6px 18px rgba(11,42,31,.18);
  }
}
@media (max-width:560px){
  .wp-block-buttons{flex-direction:column;align-items:stretch}
  .wp-block-buttons .wp-block-button,
  .wp-block-buttons .wp-block-button__link{width:100%;min-height:48px}
}


/* --------------------------------------------------------------------------
   3. Group variations — the four surfaces an editor can pick from
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-is-card{
  background:#fff;border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);padding:var(--sp-card);box-shadow:var(--shadow-card);
}
.wp-block-group.is-style-is-card-dark{
  background:var(--green-deep-2);border:1px solid var(--green-deep-3);
  border-radius:var(--radius-xl);padding:var(--sp-card);color:var(--text-inverse);
}
.wp-block-group.is-style-is-band-deep{
  background:var(--green-deep);color:#fff;
}
.wp-block-group.is-style-is-band-cloud{
  background:var(--cloud);border-block:1px solid var(--border-hairline);
}
/* headings and lead copy invert automatically inside a dark band */
.is-style-is-band-deep :where(h1,h2,h3,h4,h5,h6),
.is-style-is-card-dark :where(h1,h2,h3,h4,h5,h6){color:#fff}
.is-style-is-band-deep p:not(.is-style-is-eyebrow),
.is-style-is-card-dark p:not(.is-style-is-eyebrow){color:var(--text-inverse-muted)}

@media (hover:hover) and (pointer:fine){
  .wp-block-group.is-style-is-card{
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .wp-block-group.is-style-is-card:hover{
    transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);
  }
}


/* --------------------------------------------------------------------------
   4. Text variations
   -------------------------------------------------------------------------- */
.is-style-is-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--green-forest);
  margin-bottom:14px;
}
.is-style-is-band-deep .is-style-is-eyebrow,
.is-style-is-card-dark .is-style-is-eyebrow{color:var(--green-signal)}
.is-style-is-eyebrow::before{
  content:"";width:20px;height:2px;background:currentColor;flex:0 0 auto;
  transform-origin:left;
}

.is-style-is-lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text-muted)}
.is-style-is-band-deep .is-style-is-lead{color:var(--text-inverse-muted)}

.is-style-is-figure{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-stat);
  line-height:1;letter-spacing:-.02em;color:var(--text-strong);
  font-variant-numeric:tabular-nums;
}
.is-style-is-band-deep .is-style-is-figure{color:#fff}

.is-style-is-disclaimer{font-size:var(--fs-xs);line-height:1.7;color:var(--text-faint)}
.is-style-is-band-deep .is-style-is-disclaimer{color:var(--text-inverse-muted)}


/* --------------------------------------------------------------------------
   5. Tick list — replaces the hand-built .checks markup
   -------------------------------------------------------------------------- */
.wp-block-list.is-style-is-checks{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:12px;
}
.wp-block-list.is-style-is-checks li{
  position:relative;padding-left:32px;
  font-size:var(--fs-body);line-height:1.5;color:var(--text-body);
}
.wp-block-list.is-style-is-checks li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
  background:currentColor;color:var(--green-forest);
  -webkit-mask:var(--tick) center/20px no-repeat;
  mask:var(--tick) center/20px no-repeat;
}
.is-style-is-band-deep .wp-block-list.is-style-is-checks li{color:var(--text-inverse)}
.is-style-is-band-deep .wp-block-list.is-style-is-checks li::before{color:var(--green-signal)}


/* --------------------------------------------------------------------------
   6. Tables — core/table mapped onto the fee and comparison components
   -------------------------------------------------------------------------- */
.wp-block-table{margin:0}
.wp-block-table.is-style-is-fee-table table,
.wp-block-table.is-style-is-compare table{
  width:100%;border-collapse:collapse;
}
.wp-block-table.is-style-is-fee-table,
.wp-block-table.is-style-is-compare{
  background:#fff;border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;
}
.wp-block-table.is-style-is-fee-table th,
.wp-block-table.is-style-is-compare th{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  text-align:left;padding:15px 28px;background:var(--ink-100);border:none;
}
.wp-block-table.is-style-is-fee-table td,
.wp-block-table.is-style-is-compare td{
  padding:20px 28px;border:none;border-top:1px solid var(--border-hairline);
  font-size:var(--fs-body);color:var(--text-body);vertical-align:middle;
}
.wp-block-table.is-style-is-fee-table td:last-child{
  text-align:right;font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-h3);color:var(--green-forest);font-variant-numeric:tabular-nums;
}
.wp-block-table.is-style-is-compare th:not(:first-child),
.wp-block-table.is-style-is-compare td:not(:first-child){text-align:center}
.wp-block-table figcaption{
  font-size:var(--fs-xs);line-height:1.6;color:var(--text-faint);margin-top:14px;
}
/* swipe rather than squash on a phone */
@media (max-width:640px){
  .wp-block-table.is-style-is-fee-table,
  .wp-block-table.is-style-is-compare{
    overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .wp-block-table.is-style-is-compare table{min-width:620px}
  .wp-block-table.is-style-is-fee-table th,
  .wp-block-table.is-style-is-fee-table td,
  .wp-block-table.is-style-is-compare th,
  .wp-block-table.is-style-is-compare td{padding-left:16px;padding-right:16px}
}


/* --------------------------------------------------------------------------
   7. FAQ — core/details replaces the hand-built <details class="qa">
   -------------------------------------------------------------------------- */
.wp-block-details.is-style-is-faq{
  border-top:1px solid var(--border-hairline);padding:0;background:none;
}
.wp-block-details.is-style-is-faq:last-of-type{border-bottom:1px solid var(--border-hairline)}
.wp-block-details.is-style-is-faq summary{
  cursor:pointer;padding:24px 0;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);
  color:var(--text-strong);
}
.wp-block-details.is-style-is-faq summary::-webkit-details-marker{display:none}
.wp-block-details.is-style-is-faq summary::marker{content:""}
.wp-block-details.is-style-is-faq summary::after{
  content:"";float:right;width:12px;height:12px;margin-top:6px;
  border-right:2px solid var(--green-forest);border-bottom:2px solid var(--green-forest);
  transform:rotate(45deg);transition:transform .2s ease;
}
.wp-block-details.is-style-is-faq[open] summary::after{transform:rotate(-135deg)}
.wp-block-details.is-style-is-faq p{
  font-size:var(--fs-body);line-height:1.65;color:var(--text-muted);
  margin:0;padding:0 0 26px;
}
@media (hover:hover) and (pointer:fine){
  .wp-block-details.is-style-is-faq summary:hover{color:var(--green-forest)}
}
@media (max-width:560px){
  .wp-block-details.is-style-is-faq summary{font-size:var(--fs-h5);padding:20px 0;min-height:56px}
}


/* --------------------------------------------------------------------------
   8. Images
   -------------------------------------------------------------------------- */
.wp-block-image img{display:block;height:auto;max-width:100%}
.wp-block-image.is-style-is-framed img{
  border:1px solid var(--border-hairline);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);background:var(--green-deep);
}
.wp-block-image figcaption{
  font-size:var(--fs-xs);line-height:1.6;color:var(--text-faint);margin-top:14px;
}
.wp-block-post-featured-image img{border-radius:var(--radius-lg)}


/* --------------------------------------------------------------------------
   9. Columns — core gap defaults are tighter than our card grids
   -------------------------------------------------------------------------- */
.wp-block-columns{gap:24px}
.wp-block-columns.is-not-stacked-on-mobile{gap:16px}
@media (max-width:781px){
  /* core stacks at 781px; our ladder collapses grids at 900/760 */
  .wp-block-columns{gap:20px}
}


/* --------------------------------------------------------------------------
   10. Navigation — core/navigation mapped onto the existing header design
   -------------------------------------------------------------------------- */
.wp-block-navigation{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);
}
.wp-block-navigation .wp-block-navigation-item__content{
  color:var(--text-body);text-decoration:none;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
  color:var(--text-strong);font-weight:600;
}
/* The dropdown's own styling lives with the header, where the selector carries
   enough weight to beat core's `.wp-block-navigation .has-child .…__submenu-
   container` (0,3,0). A generic `.wp-block-navigation .…__submenu-container`
   rule here would only be (0,2,0) — it would lose to core outright, and the
   dropdown would fall back to core's transparent background and -1em offset. */
@media (hover:hover) and (pointer:fine){
  .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--green-forest)}
  .wp-block-navigation .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover{background:var(--ink-100)}
}

.wp-block-site-logo img{height:38px;width:auto}
@media (max-width:1080px){.wp-block-site-logo img{height:34px}}
@media (max-width:400px){.wp-block-site-logo img{height:30px}}


/* --------------------------------------------------------------------------
   11. Query loop / blog, so posts inherit the system rather than core defaults
   -------------------------------------------------------------------------- */
.wp-block-post-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
.wp-block-post-title a{color:var(--text-strong);text-decoration:none}
.wp-block-post-date,.wp-block-post-terms{
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);
}
.wp-block-post-excerpt__excerpt{font-size:var(--fs-sm);line-height:1.65;color:var(--text-muted)}
.wp-block-separator{border:none;border-top:1px solid var(--border-hairline);opacity:1}


/* --------------------------------------------------------------------------
   12. Tick mask, defined once
   -------------------------------------------------------------------------- */
:root{
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}


/* ==========================================================================
   13. Widgets assembled at render time (see inc/block-transforms.php)
       The editor holds plain Groups; these rules style the structure PHP
       builds around them. No JavaScript in either direction.
   ========================================================================== */

/* ---- scrolling rail: .mq-copy is display:contents so one aria-hidden covers
        the duplicated half without breaking the flex track ---- */
.marquee-rail{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-rail .mq-track{
  display:flex;gap:20px;width:max-content;
  animation:tmq 72s linear infinite;will-change:transform;
}
.marquee-rail .mq-copy{display:contents}
.marquee-rail > .mq-track > *,
.marquee-rail > .mq-track > .mq-copy > *{flex:0 0 auto;width:360px}
@media (hover:hover){.marquee-rail:hover .mq-track{animation-play-state:paused}}
@media (max-width:640px){
  .marquee-rail > .mq-track > *,
  .marquee-rail > .mq-track > .mq-copy > *{width:min(78vw,320px)}
  .marquee-rail .mq-track{animation-duration:48s}
}
@media (prefers-reduced-motion:reduce){
  .marquee-rail .mq-track{animation:none}
  .marquee-rail{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* a Quote inside a rail reads as a testimonial card */
.wp-block-quote.is-style-is-testimonial{
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  margin:0;padding:28px;border:1px solid var(--border-hairline);border-left:none;
  border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-card);
}
.wp-block-quote.is-style-is-testimonial p{font-size:var(--fs-sm);line-height:1.65;color:var(--text-body)}
.wp-block-quote.is-style-is-testimonial cite{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);
  font-style:normal;color:var(--green-forest);
}

/* ---- tab panels: radio inputs come first in source order, so :checked can
        reach both the labels and the panels with a sibling combinator ---- */
/* visually hidden but focusable, and without the off-screen offset that makes
   the page jump sideways when a radio takes focus */
.is-tabs > .tabs-in{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.is-tabs > .tablist{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.is-tabs > .tablist label{
  display:inline-flex;align-items:center;gap:10px;padding:13px 22px;
  border:1px solid var(--border-strong);border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--text-body);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .16s ease;
}
.is-tabs > .tablist label .dot{width:8px;height:8px;border-radius:50%;background:var(--green-signal)}
.is-tabs > .tabpanel{display:none}

.is-tabs > .tabs-in:nth-of-type(1):checked ~ .tabpanel-1,
.is-tabs > .tabs-in:nth-of-type(2):checked ~ .tabpanel-2,
.is-tabs > .tabs-in:nth-of-type(3):checked ~ .tabpanel-3,
.is-tabs > .tabs-in:nth-of-type(4):checked ~ .tabpanel-4,
.is-tabs > .tabs-in:nth-of-type(5):checked ~ .tabpanel-5,
.is-tabs > .tabs-in:nth-of-type(6):checked ~ .tabpanel-6{display:block}

.is-tabs > .tabs-in:nth-of-type(1):checked ~ .tablist label:nth-child(1),
.is-tabs > .tabs-in:nth-of-type(2):checked ~ .tablist label:nth-child(2),
.is-tabs > .tabs-in:nth-of-type(3):checked ~ .tablist label:nth-child(3),
.is-tabs > .tabs-in:nth-of-type(4):checked ~ .tablist label:nth-child(4),
.is-tabs > .tabs-in:nth-of-type(5):checked ~ .tablist label:nth-child(5),
.is-tabs > .tabs-in:nth-of-type(6):checked ~ .tablist label:nth-child(6){
  background:var(--green-deep);color:#fff;border-color:var(--green-deep);
}
/* the focused tab must be visible even though the input is off-screen */
.is-tabs > .tabs-in:nth-of-type(1):focus-visible ~ .tablist label:nth-child(1),
.is-tabs > .tabs-in:nth-of-type(2):focus-visible ~ .tablist label:nth-child(2),
.is-tabs > .tabs-in:nth-of-type(3):focus-visible ~ .tablist label:nth-child(3),
.is-tabs > .tabs-in:nth-of-type(4):focus-visible ~ .tablist label:nth-child(4),
.is-tabs > .tabs-in:nth-of-type(5):focus-visible ~ .tablist label:nth-child(5),
.is-tabs > .tabs-in:nth-of-type(6):focus-visible ~ .tablist label:nth-child(6){
  outline:2px solid var(--green-signal);outline-offset:2px;
}
@media (hover:hover) and (pointer:fine){
  .is-tabs > .tablist label:hover{transform:translateY(-1px);background:var(--surface-sunken)}
}
@media (max-width:560px){
  .is-tabs > .tablist{gap:8px;margin-bottom:26px}
  .is-tabs > .tablist label{flex:1 1 auto;justify-content:center;padding:13px 14px;min-height:48px;font-size:var(--fs-xs)}
}

/* ---- grids an editor can pick from the sidebar ----
   auto-fit is the fallback layout: it already resolves to 2, 3 or 4 even columns
   for 2, 3 or 4 cards, so a browser without :has() support still aligns. The
   :has() rules further down pin the count exactly.

   The gap reads --wp--style--block-gap first, so if an editor sets Block spacing
   on the group in the sidebar the grid follows it; 24px is the design default
   when they have not. */
.wp-block-group.is-style-is-card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--wp--style--block-gap,24px);
}
.wp-block-group.is-style-is-figure-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border:1px solid var(--border-hairline);border-radius:var(--radius-xl);
  overflow:hidden;background:#fff;box-shadow:var(--shadow-md);
}
.wp-block-group.is-style-is-figure-grid > *{
  padding:var(--sp-card);border-left:1px solid var(--border-hairline);margin:0;
}
.wp-block-group.is-style-is-figure-grid > *:first-child{border-left:none}
.is-style-is-band-deep .wp-block-group.is-style-is-figure-grid{
  background:var(--green-deep-2);border-color:var(--green-deep-3);
}
.is-style-is-band-deep .wp-block-group.is-style-is-figure-grid > *{border-left-color:var(--green-deep-3)}
@media (max-width:900px){
  .wp-block-group.is-style-is-card-grid{grid-template-columns:1fr 1fr}
  .wp-block-group.is-style-is-card-grid > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){
  .wp-block-group.is-style-is-card-grid{grid-template-columns:1fr}
  .wp-block-group.is-style-is-card-grid > :last-child:nth-child(odd){grid-column:auto}
  .wp-block-group.is-style-is-figure-grid > *{border-left:none;border-top:1px solid var(--border-hairline)}
  .wp-block-group.is-style-is-figure-grid > *:first-child{border-top:none}
}

/* ---- data / mono paragraphs ---- */
.is-style-is-mono{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;color:var(--text-faint);
}
.is-style-is-band-deep .is-style-is-mono{color:var(--text-inverse-muted)}

/* ---- a bound figure is read-only in the canvas: make that legible rather
        than mysterious ---- */
.editor-styles-wrapper [data-block] p.is-style-is-figure[contenteditable="false"]{
  outline:1px dashed var(--border-strong);outline-offset:4px;
}


/* ==========================================================================
   14. Query Loops inside the design system
       A rail or card grid may be filled by a Query Loop rather than written by
       hand. The loop's own wrappers are flattened so the grid still applies to
       the cards themselves.
   ========================================================================== */

/* the rail's track must see the cards, not the loop's containers */
.marquee-rail .wp-block-query,
.marquee-rail .wp-block-post-template{display:contents}
.marquee-rail .wp-block-post-template > li{list-style:none;flex:0 0 auto;width:360px}
@media (max-width:640px){
  .marquee-rail .wp-block-post-template > li{width:min(78vw,320px)}
}

/* a post-template carrying the card grid style is the grid */
.wp-block-post-template.is-style-is-card-grid{
  list-style:none;padding:0;margin:0;
}
.wp-block-post-template.is-style-is-card-grid > li{margin:0}

/* testimonial cards coming from the post type */
.tcard .wp-block-post-title{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);
  color:var(--green-forest);margin:0;
}
.tcard .wp-block-post-title a{color:inherit;pointer-events:none;text-decoration:none}

/* the inline "Signal highlight" format */
mark.is-mark{
  background:linear-gradient(180deg,transparent 58%,var(--green-signal) 58%);
  color:inherit;padding:0 .08em;
}

/* content-only shells are outlined in the canvas so an editor can see that the
   structure is fixed while the words are not */
.editor-styles-wrapper .is-locked-shell{outline:1px dashed var(--border-strong);outline-offset:6px}


/* ==========================================================================
   15. Containers and components as pickable styles
       Everything the patterns used to spell out as a class is now available
       from the block sidebar, so a new section can be built without knowing
       the class names.
   ========================================================================== */

/* the page container: same job as .wrap, reachable from the sidebar */
.wp-block-group.is-style-is-container{
  width:100%;max-width:1240px;margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.wp-block-group.is-style-is-section{padding-block:var(--sp-sec)}
.wp-block-group.is-style-is-measure{max-width:760px}

/* pricing */
.wp-block-group.is-style-is-plan-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--wp--style--block-gap,24px);align-items:start;
}
.wp-block-group.is-style-is-plan,
.wp-block-group.is-style-is-plan-featured{
  background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-xl);
  padding:var(--sp-card);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:12px;
}
.wp-block-group.is-style-is-plan-featured{
  border-color:var(--green-deep);border-top:3px solid var(--green-signal);
  box-shadow:var(--shadow-lg);
}
.is-style-is-price{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-stat-lg);
  line-height:1;letter-spacing:-.03em;color:var(--text-strong);
  font-variant-numeric:tabular-nums;
}
@media (max-width:900px){
  .wp-block-group.is-style-is-plan-grid{grid-template-columns:1fr 1fr}
  .wp-block-group.is-style-is-plan-featured{grid-column:1 / -1;order:-1}
}
@media (max-width:640px){
  .wp-block-group.is-style-is-plan-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .wp-block-group.is-style-is-plan-featured{grid-column:auto}
}

/* chips */
.wp-block-group.is-style-is-chips{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp--style--block-gap,8px);
}
.is-style-is-chip{
  font-family:var(--font-mono);font-size:var(--fs-label);
  padding:6px 12px;border-radius:999px;border:1px solid var(--border-strong);
  color:var(--text-body);margin:0;
}
.is-style-is-band-deep .is-style-is-chip{border-color:var(--green-deep-3);color:#fff}

/* text left, action right */
.wp-block-group.is-style-is-split{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
}
@media (max-width:760px){
  .wp-block-group.is-style-is-split{grid-template-columns:1fr;gap:24px}
  .wp-block-group.is-style-is-split .wp-block-buttons{width:100%}
}


/* ==========================================================================
   16. The theme's own blocks
   ========================================================================== */

/* investor-signals/figure */
.is-figure-cell{display:flex;flex-direction:column;gap:12px}
.is-figure-cell .lbl{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.is-figure-cell .val{
  font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--text-strong);font-variant-numeric:tabular-nums;
}
.is-figure-cell.size-stat-sm .val{font-size:var(--fs-stat-sm)}
.is-figure-cell.size-stat .val{font-size:var(--fs-stat)}
.is-figure-cell.size-stat-lg .val{font-size:var(--fs-stat-lg)}
.is-figure-cell.is-positive .val{color:var(--green-forest)}
.is-style-is-band-deep .is-figure-cell .lbl{color:var(--text-inverse-muted)}
.is-style-is-band-deep .is-figure-cell .val{color:#fff}
.is-style-is-band-deep .is-figure-cell.is-positive .val{color:var(--green-signal)}

/* investor-signals/compliance */
.is-compliance.comp{background:var(--cloud);border-top:1px solid var(--border-hairline)}
.is-compliance .wrap{padding-block:var(--sp-sec-sm)}
.is-compliance .is-compliance-heading{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-forest);margin-bottom:16px;
}
.is-compliance .disclaimer{max-width:900px}
.is-compliance .disclaimer + .disclaimer{margin-top:14px}


/* ==========================================================================
   17. The last containers
       Every class that used to be typed into pattern markup now has a
       registered, sidebar-selectable style. Nothing here is a new design
       decision — the values are the same components from main.css, reached by a
       name an editor can pick from a menu.
   ========================================================================== */

/* ---- hero ---- */
.wp-block-group.is-style-is-hero-band{background:var(--green-deep);color:#fff}
.wp-block-group.is-style-is-hero-split{
  display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;
}
@media (max-width:1080px){
  .wp-block-group.is-style-is-hero-split{grid-template-columns:1fr;gap:44px}
}

/* the hero h1 keeps its measure without needing a class */
.is-style-is-hero-band h1,
.is-style-is-band-deep h1,
.is-style-is-band-cloud h1{max-width:24ch;text-wrap:balance}

/* ---- highlight panel (the membership card) ---- */
.wp-block-group.is-style-is-live-card{
  background:var(--green-deep-2);
  border:1px solid var(--green-deep-3);border-top:3px solid var(--green-signal);
  border-radius:var(--radius-xl);padding:var(--sp-card);box-shadow:var(--shadow-lg);
  color:var(--text-inverse);
}
.is-style-is-live-card :where(h1,h2,h3,h4,h5,h6){color:#fff}

/* ---- CTA band with the lime top rule ---- */
.wp-block-group.is-style-is-cta-band{
  background:#fff;border-top:3px solid var(--green-signal);
}
.wp-block-group.is-style-is-cta-band > .wp-block-group{padding-block:var(--sp-sec-sm)}

/* ---- image beside copy ---- */
.wp-block-group.is-style-is-media-split{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;
}
@media (max-width:1080px){
  .wp-block-group.is-style-is-media-split{grid-template-columns:1fr;gap:36px}
  .wp-block-group.is-style-is-media-split > .wp-block-image{order:-1}
}

/* ---- badges and small labels ---- */
.is-style-is-badge{
  display:inline-block;margin:0;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:var(--green-signal);color:var(--green-deep);
}
.is-style-is-label{
  margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.is-style-is-band-deep .is-style-is-label,
.is-style-is-live-card .is-style-is-label{color:var(--text-inverse-muted)}


/* ==========================================================================
   18. Header and footer, styled through core block selectors
       The template parts carry one style each; everything inside is reached by
       its core block class, so an editor can rearrange the parts in the Site
       Editor without any class surviving in the markup.
   ========================================================================== */

.wp-block-group.is-style-is-site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border-hairline);
}

/* ---- why the header drops its backdrop-filter at drawer widths ----
   A non-none backdrop-filter makes an element a containing block for its
   fixed-position descendants. The drawer is `position:fixed; inset:0` and lives
   inside the header, so with the filter on, "fixed to the viewport" became
   "fixed to the header" — the full-screen overlay collapsed into a small dark
   panel inside the header bar, which is exactly what it looked like.

   Below the drawer breakpoint the filter is therefore off and the background is
   opaque instead. Above it, where there is no overlay, the frosted effect stays. */
@media (max-width:1080px){
  .wp-block-group.is-style-is-site-header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#fff;
  }
}
.is-style-is-site-header .wp-block-site-logo img{height:38px;width:auto}
@media (max-width:1080px){.is-style-is-site-header .wp-block-site-logo img{height:34px}}
@media (max-width:400px){.is-style-is-site-header .wp-block-site-logo img{height:30px}}

.wp-block-group.is-style-is-footer{background:var(--green-deep);color:var(--text-inverse)}
.is-style-is-footer > .wp-block-group{padding-block:var(--sp-sec) calc(var(--sp-sec) * .5)}
.is-style-is-footer .wp-block-site-logo img{height:34px;width:auto}
/* Footer headings are small uppercase labels, not display headings. The
   heading size ramp is `h2.wp-block-heading:not([class*=-font-size])…` at
   (0,3,1) and this rule's :where() contributes nothing, so without full
   weight the ramp wins and the labels render at display-h2 size — the giant
   lime QUICK LINKS. Labels are terminal leaf styles; they state themselves
   with !important so neither the ramp nor global styles can inflate them. */
.is-style-is-footer :where(h1,h2,h3,h4,h5,h6){
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  font-size:var(--fs-micro) !important;
  letter-spacing:.16em !important;
  line-height:1.4 !important;
  text-transform:uppercase;
  color:var(--green-signal) !important;
  margin-bottom:18px;
}
.is-style-is-footer p,
.is-style-is-footer .wp-block-navigation a{font-size:var(--fs-sm);color:var(--text-inverse-muted)}
/* links inside footer paragraphs (the street address) match the surrounding
   text instead of taking the global accent link colour */
.is-style-is-footer p a{color:var(--text-inverse-muted);text-decoration-color:var(--green-deep-3)}
.is-style-is-footer p a:hover{color:#fff}
/* the phone number: mono for the digits, but at body rhythm, not display size */
.is-style-is-footer .is-style-is-mono{
  font-size:var(--fs-sm) !important;letter-spacing:.02em !important;color:var(--text-inverse-muted);
}
.is-style-is-footer .is-style-is-disclaimer{max-width:900px}
.is-style-is-footer .wp-block-separator{border-top-color:var(--green-deep-3)}
@media (hover:hover) and (pointer:fine){
  .is-style-is-footer .wp-block-navigation a:hover{color:#fff;transform:translateX(3px)}
  .is-style-is-footer .wp-block-navigation a{transition:color .16s ease,transform .16s ease}
  .is-style-is-footer .wp-block-social-links .wp-block-social-link.wp-social-link:hover{
    background:var(--green-signal);border-color:var(--green-signal);
    color:var(--green-deep) !important;
  }
}


/* ==========================================================================
   19. On-dark inheritance
       theme.json colours every heading with --text-strong, which is an element
       selector and therefore beats plain inheritance. Any dark surface must
       therefore say so explicitly, or an h1 lands near-black on deep green.
       Every dark surface is listed here once, so adding a new one is a matter
       of adding it to this list rather than rediscovering the bug.
   ========================================================================== */

.is-style-is-band-deep,
.is-style-is-hero-band,
.is-style-is-live-card,
.is-style-is-card-dark,
.is-style-is-footer{
  color:var(--text-inverse);
}

.is-style-is-band-deep :where(h1,h2,h3,h4,h5,h6),
.is-style-is-hero-band :where(h1,h2,h3,h4,h5,h6),
.is-style-is-live-card :where(h1,h2,h3,h4,h5,h6),
.is-style-is-card-dark :where(h1,h2,h3,h4,h5,h6){
  color:#fff;
}

/* body copy and leads step back, but stay legible */
.is-style-is-band-deep :where(p),
.is-style-is-hero-band :where(p),
.is-style-is-live-card :where(p),
.is-style-is-card-dark :where(p){
  color:var(--text-inverse-muted);
}
.is-style-is-band-deep .is-style-is-lead,
.is-style-is-hero-band .is-style-is-lead,
.is-style-is-live-card .is-style-is-lead,
.is-style-is-card-dark .is-style-is-lead{color:var(--text-inverse-muted)}

/* the eyebrow keeps the signal colour on dark */
.is-style-is-band-deep .is-style-is-eyebrow,
.is-style-is-hero-band .is-style-is-eyebrow,
.is-style-is-live-card .is-style-is-eyebrow,
.is-style-is-card-dark .is-style-is-eyebrow{color:var(--green-signal)}

/* tick lists, chips, labels, mono and disclaimers */
.is-style-is-band-deep .is-style-is-checks li,
.is-style-is-hero-band .is-style-is-checks li,
.is-style-is-live-card .is-style-is-checks li,
.is-style-is-card-dark .is-style-is-checks li{color:var(--text-inverse)}
.is-style-is-band-deep .is-style-is-checks li::before,
.is-style-is-hero-band .is-style-is-checks li::before,
.is-style-is-live-card .is-style-is-checks li::before,
.is-style-is-card-dark .is-style-is-checks li::before{color:var(--green-signal)}

.is-style-is-band-deep .is-style-is-chip,
.is-style-is-hero-band .is-style-is-chip,
.is-style-is-live-card .is-style-is-chip,
.is-style-is-card-dark .is-style-is-chip{border-color:var(--green-deep-3);color:#fff}

.is-style-is-band-deep .is-style-is-label,
.is-style-is-hero-band .is-style-is-label,
.is-style-is-live-card .is-style-is-label,
.is-style-is-card-dark .is-style-is-label,
.is-style-is-band-deep .is-style-is-mono,
.is-style-is-hero-band .is-style-is-mono,
.is-style-is-live-card .is-style-is-mono,
.is-style-is-card-dark .is-style-is-mono,
.is-style-is-band-deep .is-style-is-disclaimer,
.is-style-is-hero-band .is-style-is-disclaimer,
.is-style-is-live-card .is-style-is-disclaimer,
.is-style-is-card-dark .is-style-is-disclaimer{color:var(--text-inverse-muted)}

/* figures */
.is-style-is-band-deep .is-figure-cell .val,
.is-style-is-hero-band .is-figure-cell .val,
.is-style-is-live-card .is-figure-cell .val,
.is-style-is-card-dark .is-figure-cell .val{color:#fff}
.is-style-is-band-deep .is-figure-cell.is-positive .val,
.is-style-is-hero-band .is-figure-cell.is-positive .val,
.is-style-is-live-card .is-figure-cell.is-positive .val,
.is-style-is-card-dark .is-figure-cell.is-positive .val{color:var(--green-signal)}
.is-style-is-band-deep .is-figure-cell .lbl,
.is-style-is-hero-band .is-figure-cell .lbl,
.is-style-is-live-card .is-figure-cell .lbl,
.is-style-is-card-dark .is-figure-cell .lbl{color:var(--text-inverse-muted)}

/* hairlines and links */
.is-style-is-band-deep .wp-block-separator,
.is-style-is-hero-band .wp-block-separator,
.is-style-is-live-card .wp-block-separator,
.is-style-is-card-dark .wp-block-separator{border-top-color:var(--green-deep-3);opacity:1}
.is-style-is-band-deep a:not(.wp-block-button__link),
.is-style-is-hero-band a:not(.wp-block-button__link),
.is-style-is-live-card a:not(.wp-block-button__link),
.is-style-is-card-dark a:not(.wp-block-button__link){color:var(--green-signal)}


/* ==========================================================================
   20. Fidelity to the original design
       Core's block gap gives every child the same 24px rhythm. The original
       hero, figure band and founder split had specific spacing and specific
       treatments, so those are restored here. Values are the ones the static
       build shipped with.
   ========================================================================== */

/* ---- hero: 92/100 vertical, and the original internal rhythm ---- */
.wp-block-group.is-style-is-hero-split{
  padding-block:calc(var(--sp-sec) * 1.05) calc(var(--sp-sec) * 1.14);
}
.is-style-is-hero-split > .wp-block-group > .is-style-is-eyebrow{margin-bottom:0}
.is-style-is-hero-split h1{margin-top:18px}
.is-style-is-hero-split .is-style-is-lead{margin-top:22px;max-width:560px}
.is-style-is-hero-split .wp-block-buttons{margin-top:34px}
.is-style-is-hero-split .is-style-is-mono{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--green-deep-3);
}
@media (max-width:1080px){
  .is-style-is-hero-split .is-style-is-lead{max-width:none}
}

/* ---- the membership panel ---- */
.is-style-is-live-card .wp-block-separator{margin-block:18px}
.is-style-is-live-card .is-style-is-checks{gap:15px}

/* ---- section openers sit closer to their grid than block gap allows ---- */
.wp-block-group.is-style-is-card-grid:not(:first-child),
.wp-block-group.is-style-is-plan-grid:not(:first-child),
.wp-block-group.is-style-is-figure-grid:not(:first-child){margin-top:52px}
.marquee-rail{margin-top:44px}

/* ---- figures on a dark band are hairlines, not a card ---- */
.is-style-is-band-deep .wp-block-group.is-style-is-figure-grid,
.is-style-is-hero-band .wp-block-group.is-style-is-figure-grid{
  background:transparent;border:none;border-radius:0;box-shadow:none;
  border-top:1px solid var(--green-deep-3);
}
.is-style-is-band-deep .is-style-is-figure-grid > *,
.is-style-is-hero-band .is-style-is-figure-grid > *{
  padding:32px 28px 8px;border-left:1px solid var(--green-deep-3);
}
.is-style-is-band-deep .is-style-is-figure-grid > *:first-child,
.is-style-is-hero-band .is-style-is-figure-grid > *:first-child{
  border-left:none;padding-left:0;
}
@media (max-width:640px){
  .is-style-is-band-deep .is-style-is-figure-grid > *,
  .is-style-is-hero-band .is-style-is-figure-grid > *{
    border-left:none;padding-left:0;border-top:1px solid var(--green-deep-3);
  }
  .is-style-is-band-deep .is-style-is-figure-grid > *:first-child,
  .is-style-is-hero-band .is-style-is-figure-grid > *:first-child{border-top:none}
}

/* ---- the founder portrait is a crop, not a full-height image ---- */
.is-style-is-media-split > .wp-block-image img{
  width:100%;height:540px;object-fit:cover;object-position:top center;
  border-radius:var(--radius-lg);border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-md);
}
@media (max-width:1080px){.is-style-is-media-split > .wp-block-image img{height:420px}}
@media (max-width:560px){.is-style-is-media-split > .wp-block-image img{height:300px}}

/* ---- a section head aligns to the baseline of its heading ---- */
.is-style-is-section > .is-style-is-split{align-items:end}
.is-style-is-cta-band .is-style-is-split{align-items:center}


/* ==========================================================================
   21. Footer, matched to the original
       Core's columns and block gap flatten the footer's specific rhythm, so the
       original values are restored: 44px between columns, the logo clear of the
       blurb, vertical link lists, 11px between contact lines, and 56/26 around
       the closing rule.
   ========================================================================== */

.is-style-is-footer .wp-block-columns{gap:44px}
.is-style-is-footer .wp-block-site-logo{margin-bottom:20px}
.is-style-is-footer .wp-block-column > p{max-width:380px}
.is-style-is-footer .wp-block-column > p + p{margin-top:11px}

/* the link lists are columns, not a wrapping row */
.is-style-is-footer .wp-block-navigation{
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
}
.is-style-is-footer .wp-block-navigation .wp-block-navigation__container{
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
}

/* social row: a flex row of equal circles, never inheriting the flow rhythm */
.is-style-is-footer .wp-block-social-links{
  display:flex;align-items:center;gap:10px;margin-top:20px;padding:0;list-style:none;
}
.is-style-is-footer .wp-block-social-links > li{margin:0}
/* Core's block stylesheet prints AFTER the theme (inline, mid-document) and
   its `.wp-block-social-links .wp-block-social-link.wp-social-link
   {display:inline-block;padding:0}` ties a plain (0,3,0) theme rule and wins
   on order — the circle stops centring and the icon collapses to its top-left
   corner. Carrying .wp-social-link in the selector makes this (0,4,0), above
   everything core ships for the list item, whatever order it loads in. */
.is-style-is-footer .wp-block-social-links .wp-block-social-link.wp-social-link{
  width:38px;height:38px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;
  border:1px solid var(--green-deep-3);border-radius:50%;
  background:transparent;overflow:hidden;
}
/* the anchor fills the circle and centres the glyph — core gives it
   line-height:0 and no dimensions, which is what left the icon floating */
.is-style-is-footer .wp-block-social-links .wp-block-social-link.wp-social-link a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0;margin:0;line-height:0;
  color:inherit;border-radius:inherit;
}
.is-style-is-footer .wp-block-social-links .wp-block-social-link.wp-social-link svg{
  width:17px;height:17px;fill:currentColor;display:block;
}

/* the closing rule and the two compliance lines */
.is-style-is-footer .wp-block-separator{margin-block:56px 26px}
.is-style-is-footer .is-style-is-disclaimer{margin-top:0}
.is-style-is-footer .is-style-is-disclaimer + .wp-block-group{margin-top:20px}

@media (max-width:1080px){
  .is-style-is-footer .wp-block-columns{gap:40px}
}
@media (max-width:640px){
  .is-style-is-footer .wp-block-columns{gap:34px}
  .is-style-is-footer .wp-block-column > p{max-width:none}
  .is-style-is-footer .wp-block-separator{margin-block:40px 22px}
}


/* ==========================================================================
   22. Header menu, matched to the original
       One row: logo left, menu pushed right, action last. The menu must not
       wrap, the action label must not break, and the services submenu stays a
       dropdown rather than spilling its children into the bar.
   ========================================================================== */

/* a two-word action label breaking onto two lines makes the pill grow */
.wp-block-button .wp-block-button__link{white-space:nowrap}

.is-style-is-site-header > .wp-block-group{
  display:flex;align-items:center;flex-wrap:nowrap;gap:26px;
  min-height:var(--header-h);
}
.is-style-is-site-header .wp-block-site-logo{flex:0 0 auto;margin:0}
.is-style-is-site-header .wp-block-navigation{
  margin-left:auto;flex-wrap:nowrap;gap:26px;align-items:center;
}
/* the action sits beside the menu, not floated apart from it */
.is-style-is-site-header .wp-block-buttons{
  flex:0 0 auto;align-self:center;margin:0;
}
.is-style-is-site-header .wp-block-buttons .wp-block-button__link{white-space:nowrap}
.is-style-is-site-header .wp-block-navigation__container{
  display:flex;align-items:center;gap:26px;flex-wrap:nowrap;
  list-style:none;margin:0;padding:0;
}
.is-style-is-site-header .wp-block-navigation-item{position:relative}
.is-style-is-site-header .wp-block-navigation-item__content{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);
  color:var(--text-body);white-space:nowrap;
}
/* core/navigation renders its own <span class="wp-block-navigation__submenu-icon">
   for a parent item. Adding a ::after chevron as well gives two arrows, so the
   theme styles core's icon and never draws its own. */
.wp-block-navigation__submenu-icon{
  display:inline-flex;align-items:center;margin-left:7px;
  transition:transform .18s ease;
}
.wp-block-navigation__submenu-icon svg{width:12px;height:12px;fill:currentColor}
.is-style-is-site-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.is-style-is-site-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon{
  transform:rotate(180deg);
}

/* ---- the services dropdown ----
   Every rule for the floating desktop panel lives inside min-width:1081px.
   It used to sit unscoped: below the breakpoint these rules kept fighting the
   drawer's own submenu rules — and, combined with core's
   `.items-justified-right … {left:auto;right:0}` at (0,5,0), the phone drawer
   showed a right-aligned white card with invisible text instead of an open
   list. Scoping means the drawer has nothing to out-rank: at phone widths the
   floating panel does not exist.

   Two things decide whether the desktop panel feels right.

   Specificity: core/navigation reveals its own submenus with
     .wp-block-navigation .has-child:not(.open-on-click):hover > .…__submenu-container
   which is (0,5,0), and hides them with a (0,3,0) rule. A theme rule at (0,4,0)
   sits between the two, so it can lose to core on the properties they share and
   the panel behaves inconsistently. Every rule below carries a `li` or `nav`
   tag, putting it at (0,5,1) or better — decided, not left to chance.

   The dead zone: the panel is offset 8px below the trigger, and that gap is
   outside the parent's hover area. Moving the pointer down to the panel leaves
   the trigger, the panel closes, and the menu appears to flicker or refuse to
   stay open. `.has-child::after` bridges the gap with a transparent strip, so
   the pointer never leaves the hover target. */
@media (min-width:1081px){
.is-style-is-site-header nav li.wp-block-navigation-item.has-child{position:relative}
.is-style-is-site-header nav li.wp-block-navigation-item.has-child::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:10px;
}

/* Core's own rule is `.wp-block-navigation .has-child .…__submenu-container`,
   which is (0,3,0). The tags in `nav li` only added element units, and element
   units never outweigh a class — so at (0,2,2) this rule was losing to core and
   the dropdown fell back to core's own offset and transparent background.
   Matching core's class chain and adding the header style makes it (0,4,0). */
.is-style-is-site-header nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container{
  position:absolute;top:100%;left:-14px;right:auto;min-width:212px;
  height:auto;width:auto;overflow:visible;
  margin-top:8px;padding:10px;
  background:#fff;border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  list-style:none;flex-direction:column;align-items:stretch;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:70;
}
/* the panel is white whatever overlay colours the block carries: the preset
   classes core prints on the submenu list arrive with !important */
.is-style-is-site-header nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container.has-background{
  background-color:#fff !important;color:var(--text-body) !important;
}

/* Open on hover, on keyboard focus, and when core's own toggle reports it open.
   Core's reveal rule is
   `.wp-block-navigation .has-child:not(.open-on-click):hover > .…container`,
   which is (0,5,0) — three classes plus the :not() argument plus :hover. Adding
   the tag keeps these at (0,5,1) so the theme wins outright rather than by
   whichever stylesheet happens to load last. */
.is-style-is-site-header nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.is-style-is-site-header nav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.is-style-is-site-header nav.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container{
  opacity:1;visibility:visible;transform:translateY(0);display:flex;pointer-events:auto;
}

/* while closed the panel must not intercept the pointer, or it blocks the links
   underneath it even at opacity 0 */
.is-style-is-site-header nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container{pointer-events:none}
.is-style-is-site-header nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:block;padding:11px 14px;border-radius:var(--radius-sm);white-space:nowrap;
  color:var(--text-body) !important;
}
}
@media (min-width:1081px) and (hover:hover) and (pointer:fine){
  .is-style-is-site-header .wp-block-navigation-item__content:hover{color:var(--green-forest)}
  .is-style-is-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
    background:var(--ink-100);color:var(--green-forest) !important;
  }
}


/* ==========================================================================
   23. Details the new sections need
   ========================================================================== */

/* an eyebrow inside a card sits above its heading, not beside it */
.is-style-is-card > .is-style-is-eyebrow{margin-bottom:12px}
.is-style-is-card > .is-style-is-mono{margin-bottom:14px;color:var(--green-signal)}

/* a card with a tick list and a button: keep the button at the bottom edge */
.is-style-is-card{display:flex;flex-direction:column;gap:12px}
.is-style-is-card > .wp-block-buttons{margin-top:auto;padding-top:8px}
.is-style-is-card .is-style-is-checks{margin-top:4px}

/* the two-up card grid used by "how we help" and the unit-price row */
.is-style-is-card-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
@media (max-width:760px){
  .is-style-is-card-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr}
}

/* A mission passage opens with an oversized line rather than a heading size.
   This used to be written as `.is-style-is-measure > h2:first-child`, which
   caught any section heading that happened to sit first in a measure column and
   shrank it. It is a registered style now, so it applies where it is chosen. */
.wp-block-group.is-style-is-passage > :where(h1,h2,h3){
  font-size:var(--fs-lead-xl);font-weight:500;line-height:1.45;letter-spacing:-.01em;
}

/* table captions — core/table puts the caption in a figcaption after the
   table, still inside the card, so it takes the padding the in-table
   caption used to carry */
.wp-block-table caption,
.wp-block-table.is-style-is-fee-table figcaption,
.wp-block-table.is-style-is-compare figcaption{
  caption-side:bottom;text-align:left;margin:0;padding:18px 28px;
  font-size:var(--fs-xs);color:var(--text-faint);
}
@media (max-width:640px){
  .wp-block-table caption,
  .wp-block-table.is-style-is-fee-table figcaption,
  .wp-block-table.is-style-is-compare figcaption{padding:16px}
}

/* the standout-trades table: ticker narrow, return right-aligned and green */
.is-style-is-compare td:first-child{
  font-family:var(--font-mono);font-weight:500;color:var(--text-strong);width:1%;white-space:nowrap;
}
.is-style-is-compare tbody td:last-child{
  text-align:right;font-family:var(--font-display);font-weight:700;
  color:var(--green-forest);font-variant-numeric:tabular-nums;
}
.is-style-is-compare thead th:last-child{text-align:right}

/* four figures on a dark band wrap two-up before they wrap one-up */
@media (max-width:900px){
  .is-style-is-band-deep .is-style-is-figure-grid,
  .is-style-is-hero-band .is-style-is-figure-grid{grid-template-columns:1fr 1fr}
}


/* ==========================================================================
   24. How the transform styles look in the editor
       On the front end PHP wraps these in .marquee-rail / .is-tabs. In the
       editor no transform has run, so the group keeps only its style class —
       and without these rules an author would be editing an unstyled stack.
       Both rules are written so they are harmless once the transform has run.
   ========================================================================== */

/* the rail: in the editor the quotes are direct children, on the front end the
   single child is .mq-track — a flex row is right either way */
.wp-block-group.is-style-is-marquee{display:flex;gap:20px;align-items:stretch}
.wp-block-group.is-style-is-marquee > .wp-block-quote,
.wp-block-group.is-style-is-marquee > .wp-block-group{flex:0 0 auto;width:360px}
.wp-block-group.is-style-is-marquee.marquee-rail{display:block}

/* the tab set: panels are .wp-block-group in the editor and .tabpanel on the
   front end, so this only ever styles the editor view */
.wp-block-group.is-style-is-tabs > .wp-block-group{
  border-top:1px solid var(--border-hairline);padding-top:24px;margin-top:24px;
}
.wp-block-group.is-style-is-tabs > .wp-block-group:first-child{border-top:none;margin-top:0;padding-top:0}


/* ==========================================================================
   26. The seam between the template parts
       Core spaces every top-level block in .wp-site-blocks with the global
       block gap. Between <main> and the footer part that gap is 24px of body
       background — a white strip between two deep-green bands. The three site
       landmarks butt up against each other instead.
   ========================================================================== */

.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer{margin-block:0}

/* a band that ends a page and a band that starts the footer must not be
   separated by anything either */
.wp-site-blocks > main > :last-child{margin-block-end:0}
.wp-site-blocks > footer > :first-child{margin-block-start:0}

/* the footer logo: a reverse image, and a safety net if a Site Logo block is
   used on a dark band instead — WordPress only stores one custom logo, and the
   colour version is unreadable there */
.is-style-is-reverse-logo{margin:0}
.is-style-is-reverse-logo img{width:210px;height:auto;max-width:100%}
.is-style-is-footer .wp-block-site-logo img{filter:brightness(0) invert(1)}
@media (max-width:640px){.is-style-is-reverse-logo img{width:190px}}


/* ==========================================================================
   27. Alignment
       A grid with a fixed column count leaves an orphan whenever the number of
       cards does not divide into it — the account types and the fund pillars are
       four cards in a three-column grid. The count is read from the markup with
       :has(), so a section stays aligned when an editor adds or removes a card
       rather than needing a different class.
   ========================================================================== */

/* two cards: half each */
.wp-block-group.is-style-is-card-grid:has(> :nth-child(2):last-child){
  grid-template-columns:1fr 1fr;
}
/* three cards: thirds (the default) */
.wp-block-group.is-style-is-card-grid:has(> :nth-child(3):last-child){
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* four cards: quarters, so nothing is left over */
.wp-block-group.is-style-is-card-grid:has(> :nth-child(4):last-child){
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
/* five or more: let them flow and wrap evenly */
.wp-block-group.is-style-is-card-grid:has(> :nth-child(5)){
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

@media (max-width:1080px){
  .wp-block-group.is-style-is-card-grid:has(> :nth-child(4):last-child){
    grid-template-columns:1fr 1fr;gap:24px;
  }
}
@media (max-width:640px){
  .wp-block-group.is-style-is-card-grid:has(> :nth-child(2):last-child),
  .wp-block-group.is-style-is-card-grid:has(> :nth-child(3):last-child),
  .wp-block-group.is-style-is-card-grid:has(> :nth-child(4):last-child),
  .wp-block-group.is-style-is-card-grid:has(> :nth-child(5)){
    grid-template-columns:1fr;
  }
}

/* ---- a split band: the right-hand column was sized `auto`, so a paragraph
        took its full max-content width and shoved the heading over ---- */
.wp-block-group.is-style-is-split > p{max-width:420px;justify-self:end}
.wp-block-group.is-style-is-split > .wp-block-buttons{justify-content:flex-end}
@media (max-width:760px){
  .wp-block-group.is-style-is-split > p{max-width:none;justify-self:start}
  .wp-block-group.is-style-is-split > .wp-block-buttons{justify-content:flex-start}
}

/* ---- tables: centring every column but the first suits a plan matrix and
        ruins a three-column data table, so it applies only when there are
        four or more columns ---- */
.is-style-is-compare th,
.is-style-is-compare td{text-align:left}
.is-style-is-compare table:has(thead th:nth-child(4)) :is(th,td):not(:first-child){text-align:center}
.is-style-is-compare table:not(:has(thead th:nth-child(4))) tbody td:last-child,
.is-style-is-compare table:not(:has(thead th:nth-child(4))) thead th:last-child{text-align:right}

/* ---- figures line up on their baseline whatever the label wraps to ---- */
.is-style-is-figure-grid{align-items:start}
.is-figure-cell{justify-content:flex-start}
.is-figure-cell .lbl{min-height:2.4em;display:flex;align-items:flex-start}

/* ---- cards in a row share a baseline for their heading and their action ---- */
.is-style-is-card-grid > .is-style-is-card{height:100%}

/* ---- a centred intro keeps its measure centred, not just its text ---- */
.is-style-is-measure.has-text-align-center,
.is-style-is-measure:has(> .has-text-align-center){margin-inline:auto}


/* ==========================================================================
   28. Our own grids and flex rows must not inherit core's flow margins
       --------------------------------------------------------------------
       A group whose layout is "default" is a flow layout to WordPress, so core
       adds `margin-block-start` to every child except the first — even when our
       CSS has turned that group into a grid or a flex column. The result is the
       second and third cards in a row sitting lower than the first, and uneven
       gaps inside a card.

       Core's rule is written with :where(), so it has zero specificity and a
       single class selector overrides it. Spacing then comes from one place:
       the container's own `gap`.
   ========================================================================== */

.wp-block-group.is-style-is-card-grid > *,
.wp-block-group.is-style-is-figure-grid > *,
.wp-block-group.is-style-is-plan-grid > *,
.wp-block-group.is-style-is-hero-split > *,
.wp-block-group.is-style-is-media-split > *,
.wp-block-group.is-style-is-split > *,
.wp-block-group.is-style-is-chips > *,
.wp-block-group.is-style-is-marquee > *,
.wp-block-group.is-style-is-tabs > *,
.wp-block-group.is-style-is-card > *,
.wp-block-group.is-style-is-card-dark > *,
.wp-block-group.is-style-is-plan > *,
.wp-block-group.is-style-is-plan-featured > *,
.wp-block-group.is-style-is-live-card > *,
.marquee-rail > *,
.marquee-rail .mq-track > *{
  margin-block:0;
}

/* cards therefore rely on their own gap, which the original set at 12px with a
   little more air under the number */
.wp-block-group.is-style-is-card,
.wp-block-group.is-style-is-card-dark,
.wp-block-group.is-style-is-plan,
.wp-block-group.is-style-is-plan-featured{gap:12px}
.is-style-is-card > .is-style-is-mono + h3,
.is-style-is-card > .is-style-is-eyebrow + h3{margin-block-start:4px}

/* a row of cards starts at the top and stretches to a shared height, so the
   headings sit on one line and the buttons on another */
.wp-block-group.is-style-is-card-grid,
.wp-block-group.is-style-is-plan-grid{align-items:stretch}

/* the centred intro above a grid keeps its own rhythm */
.is-style-is-measure > * + *{margin-block-start:14px}
.is-style-is-measure > h2 + p{margin-block-start:18px}


/* ==========================================================================
   30. Centring an inline-level element
       --------------------------------------------------------------------
       `has-text-align-center` sets text-align, which centres the *text inside*
       an element — it cannot move an inline-flex element within its parent. The
       eyebrow is inline-flex (the lime dash has to sit on the same baseline as
       the label), so a centred section opener left its eyebrow hard against the
       left edge while the heading and lead were centred.

       Anything inline-level therefore has to react to the alignment class
       itself. This is the single place that happens.
   ========================================================================== */

/* the eyebrow becomes a full-width flex row and centres its own contents */
.is-style-is-eyebrow.has-text-align-center{
  display:flex;justify-content:center;width:100%;
}
.is-style-is-eyebrow.has-text-align-right{
  display:flex;justify-content:flex-end;width:100%;
}

/* a chip row cannot be centred by text-align either */
.is-style-is-chips.has-text-align-center{justify-content:center}
.is-style-is-chips.has-text-align-right{justify-content:flex-end}

/* the same for the badge and the link arrow, which are inline-block/inline-flex */
.is-style-is-badge.has-text-align-center,
.link-arrow.has-text-align-center{display:flex;justify-content:center;width:100%}

/* a section opener sets the alignment once and everything under it follows,
   so an editor centres the group rather than each block in turn */
.wp-block-group.has-text-align-center > .is-style-is-eyebrow,
.wp-block-group.has-text-align-center > .is-style-is-chips{
  display:flex;justify-content:center;width:100%;
}
.wp-block-group.has-text-align-center > :where(h1,h2,h3,h4,h5,h6,p){text-align:center}

/* a centred measure column stays centred in its container */
.is-style-is-measure:has(> .has-text-align-center),
.wp-block-group.has-text-align-center.is-style-is-measure{margin-inline:auto}


/* ==========================================================================
   31. Heading sizes come from the theme's own tokens
       --------------------------------------------------------------------
       theme.json drives the editor's type controls, and its element styles are
       emitted as bare `h2 { … }` rules referencing --wp--preset--font-size--*.
       A bare element selector is the weakest thing in the cascade and the preset
       variable is outside the theme's control, so a section heading could end up
       at the inherited body size — small and bold, with the lead beneath it
       looking larger than the heading above.

       These rules restate the same sizes from the --fs-* tokens defined in
       main.css. Class-scoped, so they beat the element selector; identical
       values, so nothing about the design changes; and independent of whether a
       preset variable resolved.
   ========================================================================== */

/* The guard matters: WordPress writes a sidebar-chosen size as
   `.has-x-font-size` (one class) or an inline style. A rule of
   `h2.wp-block-heading` is more specific than that, so without excluding those
   cases the theme would silently override an editor's choice — the opposite of
   what a block theme should do. */
:where(h1.wp-block-heading,.wp-block-post-title):not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:-.03em;font-weight:800;
}
h2.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.025em;font-weight:700;
}

h3.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-h3);line-height:var(--lh-head);font-weight:600;
}
h4.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-h4);line-height:var(--lh-head);font-weight:600;
}

/* Credential chips in a figure grid read as h3-sized labels whatever their
   outline level. The About hero uses h2 (so the outline runs h1 -> h2 with no
   jump), and this keeps the rendering identical to the old h3 chips. Matches
   the ramp's specificity and sits after it, so it wins by order. */
.wp-block-group.is-style-is-figure-grid > * > h2.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]),
.wp-block-group.is-style-is-figure-grid > * > h3.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]),
.wp-block-group.is-style-is-figure-grid > * > h4.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-h3);line-height:var(--lh-head);font-weight:600;letter-spacing:-.01em;
  margin:0 0 6px;
}
h5.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-h5);line-height:var(--lh-head);font-weight:600;
}
h6.wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]){
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}

/* the passage style is a deliberate override, so it comes after and wins */
.wp-block-group.is-style-is-passage > :where(h1,h2,h3).wp-block-heading{
  font-size:var(--fs-lead-xl);font-weight:500;line-height:1.45;letter-spacing:-.01em;
}


/* ==========================================================================
   32. Core table rules the styled tables have to answer
       --------------------------------------------------------------------
       core/table ships `.wp-block-table thead{border-bottom:3px solid}` and a
       matching tfoot rule. Nothing in the theme addressed them, so the fee and
       comparison tables were drawing a heavy 3px rule under their header row —
       not in the design, which uses a tinted header cell and a hairline.
   ========================================================================== */

.wp-block-table.is-style-is-fee-table thead,
.wp-block-table.is-style-is-compare thead{
  border-bottom:none;
}
.wp-block-table.is-style-is-fee-table tfoot,
.wp-block-table.is-style-is-compare tfoot{
  border-top:1px solid var(--border-hairline);
}
.wp-block-table.is-style-is-fee-table tfoot td,
.wp-block-table.is-style-is-compare tfoot td{
  font-family:var(--font-display);font-weight:600;
}

/* core also sets a 1px border on every cell; the design uses a single hairline
   between rows, which the cell rules already handle — this only makes sure the
   outer edge is not doubled by the wrapper's own border */
.wp-block-table.is-style-is-fee-table table,
.wp-block-table.is-style-is-compare table{border:none}


/* ==========================================================================
   32. The drawer
       --------------------------------------------------------------------
       inc/block-transforms.php renames core's overlay hooks to .is-drawer,
       .is-drawer-dialog, .is-drawer-content, .is-drawer-open and
       .is-drawer-close, and injects a checkbox before the panel. Core therefore
       has no rule that matches any of this, so nothing here is a specificity
       race and a WordPress change cannot reopen it.

       The breakpoint is the theme's own 1080px, not core's 600px: six menu
       items, a logo and an action do not fit a tablet row.
   ========================================================================== */

/* the state: hidden but focusable, and out of the layout where it has no use */
.is-nav-toggle{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;appearance:none;
}
.is-nav-toggle:focus-visible ~ .is-drawer-open{
  outline:2px solid var(--green-signal);outline-offset:2px;border-radius:var(--radius-sm);
}

/* the two controls */
.is-drawer-open,
.is-drawer-close{
  background:transparent;border:none;padding:10px;cursor:pointer;
  min-width:44px;min-height:44px;
  display:none;align-items:center;justify-content:center;
}
.is-drawer-open svg,
.is-drawer-close svg{width:24px;height:24px;fill:currentColor}
.is-drawer-open{color:var(--text-strong)}
.is-drawer-close{color:#fff}

/* ---- desktop: the panel is just the menu row ---- */
@media (min-width:1081px){
  .is-nav-toggle{display:none}
  .is-drawer{display:block;position:relative;width:auto}
  .is-drawer-dialog,
  .is-drawer-content{display:contents}

  /* The navigation block's overlayBackgroundColor / overlayTextColor come out
     as .has-green-deep-background-color and .has-white-color preset classes on
     the panel — with !important, because that is how core emits presets. On a
     phone the panel IS the overlay, so those are right; on desktop the panel is
     the menu row on a white header, so they must be cancelled at equal weight. */
  .is-style-is-site-header .is-drawer{
    background-color:transparent !important;
    color:inherit !important;
  }
}

/* ---- tablet and phone: the panel is a full-screen drawer ---- */
@media (max-width:1080px){
  .is-drawer-open{display:flex;margin-left:auto}

  /* one control at a time: the burger hands over to the X while the drawer is
     open, instead of both stacking in the corner */
  .is-nav-toggle:checked ~ .is-drawer-open{display:none}

  .is-nav-toggle:not(:checked) ~ .is-drawer{display:none}

  .is-nav-toggle:checked ~ .is-drawer{
    display:flex;position:fixed;inset:0;z-index:120;
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--green-deep);
    padding:calc(var(--gutter) + 8px) var(--gutter) var(--gutter);
  }
  .is-nav-toggle:checked ~ .is-drawer .is-drawer-dialog,
  .is-nav-toggle:checked ~ .is-drawer .is-drawer-content{
    display:flex;flex-direction:column;align-items:stretch;width:100%;
  }
  .is-nav-toggle:checked ~ .is-drawer .is-drawer-close{display:flex;align-self:flex-end}

  /* The list. Structure carries !important for the same reason the submenu
     does: core's layout engine prints its own flex rules for this container
     (`.wp-container-core-navigation-…`, `.is-layout-flex`) and the desktop
     header styles the same list as a row. In the drawer it is a column, full
     width, one item per line — stated at full weight so no generated rule can
     turn it back into a row. */
  .is-nav-toggle:checked ~ .is-drawer .wp-block-navigation__container{
    display:flex !important;flex-direction:column !important;
    flex-wrap:nowrap !important;align-items:stretch !important;
    gap:0 !important;width:100% !important;
    list-style:none;margin:0 !important;padding:0 !important;
  }
  .is-nav-toggle:checked ~ .is-drawer .wp-block-navigation-item{
    width:100% !important;position:static !important;
  }
  .is-nav-toggle:checked ~ .is-drawer .wp-block-navigation-item__content{
    display:flex !important;align-items:center;width:100% !important;
    min-height:52px;
    color:#fff !important;font-family:var(--font-display);font-size:var(--fs-h4);
    border-bottom:1px solid var(--green-deep-3);white-space:normal;
  }

  /* A submenu is a dropdown on desktop; here it is simply open, in flow, full
     width. Everything structural carries !important: core's own submenu rules
     run up to (0,5,0) — `.items-justified-right …{left:auto;right:0}` among
     them — and the overlay colour presets core prints on the list
     (`has-green-deep-background-color`) arrive with !important of their own.
     This list must not be a card, must not float, and must not be paintable
     by anything upstream, so the drawer states it at full weight. */
  .is-style-is-site-header nav .is-drawer li.has-child .wp-block-navigation__submenu-container{
    position:static !important;
    top:auto !important;left:auto !important;right:auto !important;
    height:auto !important;width:100% !important;min-width:0 !important;
    overflow:visible !important;
    opacity:1 !important;visibility:visible !important;
    display:flex !important;flex-direction:column !important;
    transform:none !important;pointer-events:auto !important;
    transition:none !important;
    background:transparent !important;background-color:transparent !important;
    color:inherit !important;
    border:none !important;box-shadow:none !important;border-radius:0 !important;
    margin:0 !important;padding:0 0 10px 16px !important;
    list-style:none;align-items:stretch;gap:0;z-index:auto !important;
  }
  .is-style-is-site-header nav .is-drawer .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    display:flex !important;align-items:center;width:100% !important;
    color:var(--text-inverse-muted) !important;
    background:transparent !important;
    font-size:var(--fs-body);min-height:46px;
    padding:0 !important;border-radius:0 !important;
    border-bottom:none;white-space:normal;
  }
  .is-style-is-site-header nav .is-drawer .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .is-style-is-site-header nav .is-drawer .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active{
    color:#fff !important;background:transparent !important;
  }
  .is-nav-toggle:checked ~ .is-drawer .wp-block-navigation__submenu-icon{color:var(--green-signal)}
  .is-nav-toggle:checked ~ .is-drawer .has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon{
    transform:rotate(180deg);
  }

  /* no hover bridge in the drawer: there is no dropdown to bridge to */
  .is-style-is-site-header nav li.wp-block-navigation-item.has-child::after{display:none}

  /* the action reappears inside the drawer as the pill the header gives up */
  .is-nav-toggle:checked ~ .is-drawer .is-style-is-nav-cta{display:block;margin-top:22px}
  .is-nav-toggle:checked ~ .is-drawer .is-style-is-nav-cta .wp-block-navigation-item__content{
    justify-content:center;border-bottom:none;border-radius:999px;min-height:48px;
    background:var(--green-signal);color:var(--green-deep);font-weight:600;
    font-size:var(--fs-body);
  }
}

/* Below the drawer breakpoint the action lives inside the drawer, so the header
   pill stands down for the whole band — not only on a phone. Leaving it visible
   on a tablet put two competing calls to action in one row and crowded the
   burger. */
@media (max-width:1080px){
  .is-style-is-site-header .wp-block-buttons{display:none}
}

/* the drawer's action item is hidden until the drawer is open — the header's
   own button carries the action on desktop */
.wp-block-navigation-item.is-style-is-nav-cta{display:none}


/* ==========================================================================
   33. Sections restored from the original build
   ========================================================================== */

/* a numbered reason: a rule under the figure rather than a card */
.wp-block-group.is-style-is-reason{
  display:flex;flex-direction:column;gap:0;
}
.is-style-is-reason > .is-style-is-mono{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);
  color:var(--green-forest);padding-bottom:16px;
  border-bottom:2px solid var(--green-signal);
  align-self:flex-start;margin:0;
}
.is-style-is-reason > h3{margin-top:20px}
.is-style-is-reason > p{margin-top:10px;color:var(--text-muted)}

/* the arrow link that closes the how-it-works section */
.is-style-is-arrow-link{margin-top:32px}
.is-style-is-arrow-link a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--green-forest);text-decoration:none;
}
.is-style-is-arrow-link a::after{
  content:"";width:17px;height:17px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--arrow) center/17px no-repeat;
  mask:var(--arrow) center/17px no-repeat;
  transition:transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .is-style-is-arrow-link a:hover::after{transform:translateX(3px)}
}
.is-style-is-arrow-link.has-text-align-center{display:flex;justify-content:center;width:100%}

:root{
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
}

/* a holding pill in the fund's rail: the company name with its ticker */
.wp-block-group.is-style-is-holding{
  display:flex;align-items:center;gap:12px;
  height:64px;padding:0 26px;
  background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);white-space:nowrap;
}
.is-style-is-holding > p{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);
  color:var(--green-deep);margin:0;
}
.is-style-is-holding > .is-style-is-mono{
  font-weight:500;font-size:var(--fs-xs);color:var(--text-faint);
}
/* the rail sizes its own cards; a holding is narrower than a testimonial */
.marquee-rail > .mq-track > .is-style-is-holding,
.marquee-rail > .mq-track > .mq-copy > .is-style-is-holding{width:auto}

/* a heading that highlights a figure — the brokerage hero's "$8". The mark is
   the same inline format the editor toolbar offers, so an editor can move the
   highlight without touching markup. */
.wp-block-heading.is-style-is-amount mark.is-mark{
  background:none;color:var(--green-forest);
}


/* ==========================================================================
   34. The drawer holds the page still
       --------------------------------------------------------------------
       With the overlay open, the page behind it must not scroll. Core does this
       from JavaScript by adding a class to the body; the drawer here is CSS, so
       the lock is CSS too: :has() lets an ancestor react to the checkbox state.

       overscroll-behavior stops a touch scroll inside the overlay from chaining
       to the document even when the overlay itself has nothing to scroll, which
       covers browsers without :has() as well.
   ========================================================================== */

@media (max-width:1080px){
  html:has(.is-nav-toggle:checked),
  body:has(.is-nav-toggle:checked){
    overflow:hidden;
    /* touch-action as well: overflow:hidden alone does not stop momentum
       scrolling on iOS */
    touch-action:none;
  }
  /* the overlay itself still scrolls, for a menu longer than the screen */
  html:has(.is-nav-toggle:checked) .is-drawer,
  body:has(.is-nav-toggle:checked) .is-drawer{touch-action:auto}

  .is-style-is-site-header nav .is-nav-toggle:checked ~ .is-drawer{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* the two controls sit above the overlay so both are always clickable */
  .is-style-is-site-header .is-drawer-open{position:relative;z-index:130}
  .is-style-is-site-header nav .is-nav-toggle:checked ~ .is-drawer .is-drawer-close{
    position:relative;z-index:140;
  }
}