/*
 * Key Information — Divi-markup stylesheet.
 *
 * Hand-authored (never generated, unlike key-information.css). Targets the
 * Divi 5 module-wrapper markup the Task 9/10 generator produces for the
 * ten-section Key Information body layout, so the ported v13c design
 * (key-information.css, scoped to .gs-ki) actually renders as designed
 * through Divi's own <div>/<span> wrappers, tab/toggle chrome and column
 * grid. Every selector in this file starts with `.gs-ki`.
 *
 * See .superpowers/sdd/2026-09-10-key-information-divi5-template/
 * task-10-brief.md Step 4 and task-10-part3c-report.md for the full
 * child-combinator mapping, every !important's measured justification, and
 * the area-by-area design notes.
 *
 * Enqueued as handle divi-5-fixes-key-information-divi, depending on
 * divi-5-fixes-key-information (key-information.css), only on Key
 * Information pages — see divi-5-fixes.php, "Key Information — contact
 * form and enhancement".
 *
 * Markup facts below are taken from a real render of the full ten-section
 * structure on a scratch Key Information page (Task 10 part 3c scratch
 * IDs: home 57678, child 57679) — never assumed.
 */

/* ==========================================================================
 * Area 1 — child combinators.
 *
 * key-information.css was ported from the artefact's plain HTML, so every
 * `>` (child-combinator) selector in it assumes an element is a DIRECT
 * child of another with nothing structural in between. Divi 5 wraps every
 * module in its own div/span, so none of the three can match as written.
 * ========================================================================== */

/* from: .gs-ki .hero-media>img */
/* .hero-media is the column (div.et_pb_column.hero-facts-wrap.hero-media);
 * its one child is an image MODULE (div.et_pb_image > span.et_pb_image_wrap
 * > img), not a bare <img>. .et_pb_image is a stable hook (Divi always
 * wraps an image module in it), so `.hero-media .et_pb_image img` reaches
 * the same <img> through however many wrapper levels Divi uses. */
.gs-ki .hero-media .et_pb_image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

/* from: .gs-ki .fees-copy>p */
/* .fees-copy (column) has four module children: three <code> (h2 field,
 * the two raw paragraphs below, then [d5f_fee_table variant="highlight"])
 * and one <text> (fee-facts-title + fee-facts list). Confirmed on the real
 * render: only the SECOND code module's own .et_pb_code_inner has a
 * direct-child <p> at all (the artefact's two direct .fees-copy>p
 * paragraphs, "Our weekly fee is tailored…" and .fees-lead-in, are both
 * raw HTML inside that one module). The fee-table module's own <p> (the
 * "Indicative fee, updated…" note) sits two levels deeper, inside
 * article.fee-highlight, not as a direct child of .et_pb_code_inner — so
 * it is untouched by this selector, matching the artefact (there it was
 * two levels deep inside article.fee-highlight too, never a
 * .fees-copy>p match). The fee-facts-title/list live in the separate
 * <text> module's .et_pb_text_inner, also untouched. */
.gs-ki .fees-copy .et_pb_code_inner > p {
  margin-bottom: 14px;
}

/* from: .gs-ki .fee-highlight>p:not(.fee-facts-title) */
/* article.fee-highlight is preserved verbatim in [d5f_fee_table
 * variant="highlight"]'s own output (confirmed on the render: each fee row
 * is its own <article class="fee-highlight"><span class="label">…
 * <div class="amount">…<p>Indicative fee, updated…</p></article> inside
 * .et_pb_code_inner — no Divi wrapper sits between .fee-highlight and its
 * <p>, so the plain descendant form below reaches it directly.
 * :not(.fee-facts-title) is kept for parity with the original, though in
 * this structure fee-facts-title can never be a child of .fee-highlight
 * (it lives in a separate <text> module) — harmless either way. The
 * [d5f_fee_table variant="card"] used in the hero's fact-card renders
 * .fact-eyebrow/.fact-amount/.fact-note instead, so this never matches
 * there. */
.gs-ki .fee-highlight > p:not(.fee-facts-title) {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 1600px) {
  /* from: .gs-ki .fee-highlight>p:not(.fee-facts-title) */
  .gs-ki .fee-highlight > p:not(.fee-facts-title) {
    font-size: 17px;
  }
}

/* ==========================================================================
 * Area 2 — funding tabs.
 *
 * Divi 5 markup (confirmed on the render): div.et_pb_tabs.fund-tabs >
 * ul.et_pb_tabs_controls > li.et_pb_tab_nav_item(.et_pb_tab_active) >
 * a.et_pb_tab_nav_item_link; div.et_pb_all_tabs > div.et_pb_tab
 * (.et_pb_active_content) > div.et_pb_tab_content > figure.fund-tabs__media
 * + div.fund-tabs__content. The tab panel's own content (figure + div) is
 * raw HTML with no further Divi wrapper, so key-information.css's own
 * `.fund-tabs__media`/`.fund-tabs__content` descendant rules (no `>`
 * anywhere in them) already apply untouched — this area only needs to
 * carry the nav pill and panel-card chrome onto Divi's own tab elements,
 * and reset the parts of Divi's tab chrome the design has no equivalent
 * for. Divi's JS toggles `.et_pb_tab_active`/`.et_pb_active_content`
 * itself; nothing here sets `display` on a `.et_pb_tab` panel.
 * ========================================================================== */

/* key-information.css's `.gs-ki .fund-tabs{position:relative;margin-top:34px}`
 * is a plain descendant selector and already applies to div.et_pb_tabs.fund-tabs
 * untouched — but the module root itself still needs a border/background reset
 * here (fix round 1, V3): style-static.min.css sets `.et_pb_tabs{border:1px
 * solid #d9d9d9}` (1-class selector, not !important) — a light grey frame around
 * the whole tabs module the design never wants (all of the design's own tabs
 * chrome lives on .et_pb_all_tabs, the panel card, further down). Confirmed via
 * CDP (CSS.getMatchedStylesForNode) before this fix: border-top-width 1px,
 * border-color rgb(217,217,217) (#d9d9d9) on div.et_pb_tabs.fund-tabs; the
 * artefact's own .fund-tabs has no border at all. `.gs-ki .fund-tabs` (2
 * classes) already beats Divi's 1-class rule on specificity alone — no
 * !important needed. */
.gs-ki .fund-tabs {
  border: none;
  background: transparent;
}

/* Reset Divi's own <ul> chrome (style-static.min.css): grey background, a
 * bottom rule drawn by ::after, and native list markers/padding it sets
 * `!important` on. */
.gs-ki .fund-tabs .et_pb_tabs_controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: fit-content;
  margin: 0 auto -33px;
  position: relative;
  z-index: 2;
  gap: 16px;
  background: #e5e6df;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border-bottom: none;
}
.gs-ki .fund-tabs .et_pb_tabs_controls::after {
  content: none;
}
/* measured: style-static.min.css sets .et_pb_tabs_controls{padding:0!important}
 * (native Divi rule, 1-class selector, !important) — the design's pill nav
 * needs its own 13px padding, so this override must also carry !important
 * to win the cascade (specificity cannot beat !important either way). */
.gs-ki .fund-tabs .et_pb_tabs_controls {
  padding: 13px !important;
}

/* Reset the <li> to a plain flex item with no chrome of its own — the
 * Controller ruling for this area: each a.et_pb_tab_nav_item_link fills
 * its li, so the whole visible tab IS the link (the li never gets its own
 * padding/border/background). */
.gs-ki .fund-tabs .et_pb_tabs_controls li.et_pb_tab_nav_item {
  float: none;
  display: block;
  border: 0;
  background: transparent;
  line-height: normal;
}

/* Carries .fund-tabs__tab onto the link (resetting Divi's own
 * `display:table-cell;padding:4px 30px;color:#666` table-cell chrome). */
.gs-ki .fund-tabs .et_pb_tab_nav_item_link {
  display: block;
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  background: transparent;
  color: var(--deep-green);
  font: 500 17px/1.15 "Poppins", Arial, sans-serif;
  text-decoration: none;
  text-align: center;
  vertical-align: initial;
  transition: background 0.2s ease, color 0.2s ease;
}
.gs-ki .fund-tabs .et_pb_tab_nav_item_link:hover {
  background: rgba(255, 255, 255, 0.65);
}
/* Carries .is-active onto the real active marker Divi puts on the <li>. */
.gs-ki .fund-tabs .et_pb_tab_active .et_pb_tab_nav_item_link {
  background: var(--deep-green);
  font-weight: 600;
  box-shadow: 0 3px 9px rgba(8, 56, 72, 0.18);
}
/* measured: fix round 1, V1. style-static.min.css sets `.et_pb_tab_active a{
 * color:#333!important}` (1-class selector + type, but !important) — confirmed
 * via CDP (CSS.getMatchedStylesForNode) to be the actual winning rule for this
 * element's `color`, beating the color:#fff above outright regardless of our
 * own selector's higher specificity, purely because ours wasn't !important and
 * Divi's is. Measured computed color before this fix: rgb(51,51,51) (#333) on
 * a rgb(70,95,87) (--deep-green) background — contrast 1.83:1, failing WCAG AA
 * (4.5:1) for normal text. This override must also be !important to win the
 * cascade (specificity cannot beat !important either way). After this fix,
 * computed color rgb(255,255,255) on the same background — contrast 6.92:1. */
.gs-ki .fund-tabs .et_pb_tab_active .et_pb_tab_nav_item_link {
  color: #fff !important;
}
/* Visible focus ring, matching the design's. */
.gs-ki .fund-tabs .et_pb_tab_nav_item_link:focus-visible {
  outline: 3px solid var(--deep-ink);
  outline-offset: 2px;
}

/* Panel card chrome: the design's .fund-tabs__panels wrapper has no Divi
 * equivalent element, so its background/radius/padding land on
 * .et_pb_all_tabs (the one element that is always present, wrapping every
 * .et_pb_tab regardless of which is active). */
.gs-ki .fund-tabs .et_pb_all_tabs {
  position: relative;
  background: #f7f6f1;
  border-radius: 6px;
  padding: 101px 64px 64px;
}
/* Divi's own `.et_pb_tab{padding:24px 30px}` (style-static.min.css,
 * 1-class) would double up with the panel padding above — each panel
 * itself carries none of its own. */
.gs-ki .fund-tabs .et_pb_tab {
  padding: 0;
  background: transparent;
}
/* Carries .fund-tabs__panel's grid layout onto .et_pb_tab_content, the
 * element that actually parents figure.fund-tabs__media +
 * div.fund-tabs__content (confirmed on the render) — .fund-tabs__panel
 * itself is never applied to anything the generator produces, since no
 * node in scripts/ki-template-structure.json's tab children carries that
 * class. */
.gs-ki .fund-tabs .et_pb_tab_content {
  display: grid;
  grid-template-columns: 470fr 494fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 1100px) {
  .gs-ki .fund-tabs .et_pb_tab_nav_item_link {
    font-size: 15px;
    padding: 13px 18px;
  }
  .gs-ki .fund-tabs .et_pb_tabs_controls {
    gap: 10px;
  }
}
@media (max-width: 980px) {
  .gs-ki .fund-tabs .et_pb_tab_content {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
  }
  .gs-ki .fund-tabs .et_pb_all_tabs {
    padding: 92px 40px 46px;
  }
}
@media (max-width: 767px) {
  /* fix round 1, V5. The base rule above sets `margin: 0 auto -33px` (a
   * negative bottom margin, deliberately pulling the pill nav down to overlap
   * the panel card by 33px on desktop) and is never undone at this
   * breakpoint, where the stacked nav sits ABOVE the panel image instead of
   * overlapping a card — key-information.css's own
   * `.fund-tabs__nav-wrap{margin-bottom:16px}` at this same breakpoint
   * confirms the design wants a POSITIVE gap here, not the desktop overlap.
   * Measured directly before this fix at 390px: tab-list bottom 5px BELOW
   * the panel image's top (real overlap); after, with margin-bottom 16px,
   * the gap matches the artefact's own 44px exactly (the -33px-to-16px
   * swing is +49px, and -5+49=44). */
  .gs-ki .fund-tabs .et_pb_tabs_controls {
    flex-direction: column;
    width: 100%;
    margin: 0 auto 16px;
    border-radius: 16px;
    gap: 8px;
  }
  /* measured: same style-static.min.css `padding:0!important` as above —
   * the mobile-stacked pill nav needs its own 10px padding here too. */
  .gs-ki .fund-tabs .et_pb_tabs_controls {
    padding: 10px !important;
  }
  .gs-ki .fund-tabs .et_pb_tab_nav_item_link {
    width: 100%;
    text-align: left;
    padding: 14px 18px;
    font-size: 16px;
  }
  .gs-ki .fund-tabs .et_pb_all_tabs {
    padding: 28px 24px 32px;
    border-radius: 10px;
  }
}

/* ==========================================================================
 * Area 3 — disclosure ("supporting" toggle).
 *
 * Divi 5 markup (confirmed on the render): div.et_pb_toggle.supporting
 * (.et_pb_toggle_close|et_pb_toggle_open) > h5.et_pb_toggle_title +
 * div.et_pb_toggle_content. There is no separate element for the design's
 * .disclosure-icon/.disclosure-label/.disclosure-chevron spans — Divi's h5
 * carries only the label text — so the chevron badge is redrawn as a
 * single pseudo-element (an inline SVG background-image) rather than
 * chased through non-existent child spans. Divi's JS toggles
 * .et_pb_toggle_open/.et_pb_toggle_close on the module itself; nothing
 * here sets `display` on .et_pb_toggle_content.
 * ========================================================================== */

/* Divi's own `.et_pb_toggle{border:1px solid #d9d9d9}` (style-static.min.css,
 * 1-class) becomes the design's card. */
.gs-ki .et_pb_toggle.supporting {
  background: #fff;
  border: 1px solid #e5e5df;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.gs-ki .et_pb_toggle.supporting:hover {
  border-color: #cfd6c8;
  box-shadow: 0 6px 18px rgba(23, 53, 66, 0.07);
}
.gs-ki .et_pb_toggle.supporting.et_pb_toggle_open {
  border-color: #cfd6c8;
}
/* Divi sets background+padding on the whole module per open/close state
 * (style-static.min.css: `.et_pb_toggle_close{background:#f4f4f4;padding:
 * 20px}` / `.et_pb_toggle_open{background:#fff;padding:20px}`, neither
 * !important) — the design's card background is constant white with no
 * module-level padding (padding lives on the title/content below). */
.gs-ki .et_pb_toggle.supporting.et_pb_toggle_close,
.gs-ki .et_pb_toggle.supporting.et_pb_toggle_open {
  background: #fff;
  padding: 0;
}

.gs-ki .et_pb_toggle.supporting .et_pb_toggle_title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  margin: 0;
  padding: 20px 22px;
  /* Always 1px, transparent while closed, so opening does not make the bar
   * 1px taller and nudge the chevron down. */
  border-bottom: 1px solid transparent;
  font: 600 18px/1.45 "Poppins", Arial, sans-serif;
  color: #24453d;
  cursor: pointer;
}
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_title:hover {
  color: var(--moss);
}
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_title:focus-visible {
  outline: 3px solid var(--deep-ink);
  outline-offset: -3px;
  border-radius: 10px;
}
/* Redraws .disclosure-icon (a static 26px orange "info" outline, matching
 * the artefact's #icon-info sprite symbol) as a flex-participating
 * pseudo-element — there is no separate span in Divi's h5 to carry the
 * design's own <span class="disclosure-icon"><svg>...</svg></span> onto.
 * Divi's own icon (style-static.min.css: `.et_pb_toggle_title:before{
 * font-family:ETmodules!important;content:"\E050"}`, base declaration not
 * !important — only the font-family is) is replaced outright rather than
 * merely hidden, since :before is needed for this icon. The colour below
 * (#D97B49) is key-information.css's own --orange custom property value —
 * inlined because a var() cannot be substituted inside a url() data
 * string. */
/* style-static.min.css's `.et_pb_toggle_title:before{font-family:
 * ETmodules!important;…}` also sets position:absolute;right:0;top:50%;
 * margin-top:-.5em on this SAME pseudo-element (those four properties are
 * not themselves !important, only font-family is) — this rule's own
 * specificity already beats Divi's for every property it DOES set, but
 * position/right/top/margin-top are still inherited from Divi's rule for
 * any property this rule leaves untouched, which pulled the icon out of
 * the flex flow and stacked it on top of the chevron at the right edge
 * (confirmed directly: without this reset the icon rendered beside the
 * chevron instead of before the label). Reset explicitly below. */
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_title::before {
  position: static;
  right: auto;
  top: auto;
  margin-top: 0;
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D97B49' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Redraws .disclosure-chevron (a 34px sage circle with a white chevron)
 * as a flex-participating pseudo-element pinned to the end of the title
 * bar via margin-left:auto — there is no separate span to carry the
 * design's own two-layer (.disclosure-chevron + its own ::after arrow)
 * markup onto, since a pseudo-element cannot itself carry a further
 * pseudo-element. */
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_title::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--sage);
  /* The chevron's ink is centred in its own 10px box (it used to sit in the
   * top half of a 9px one: 2px high closed, 1px low once rotated open). An
   * even box in the 34px circle also keeps it on whole pixels. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.25L5 6.75L8.5 3.25' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.16s ease, background-color 0.16s ease;
}
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_title:hover::after {
  background-color: var(--moss);
}
.gs-ki .et_pb_toggle.supporting.et_pb_toggle_open .et_pb_toggle_title::after {
  transform: rotate(180deg);
}
.gs-ki .et_pb_toggle.supporting.et_pb_toggle_open .et_pb_toggle_title {
  border-bottom-color: #ecebe4;
}
@media (prefers-reduced-motion: reduce) {
  .gs-ki .et_pb_toggle.supporting .et_pb_toggle_title::after {
    transition: none;
  }
}

.gs-ki .et_pb_toggle.supporting .et_pb_toggle_content {
  padding: 20px 22px 22px 72px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--deep-ink);
}

@media (min-width: 1600px) {
  .gs-ki .et_pb_toggle.supporting .et_pb_toggle_title {
    padding: 22px 26px;
    font-size: 20px;
  }
  .gs-ki .et_pb_toggle.supporting .et_pb_toggle_content {
    padding: 22px 26px 24px 76px;
    font-size: 17px;
  }
}

/* ==========================================================================
 * Area 4 — Divi defaults that fight the design.
 *
 * Every fix below is measured against a real render of the full
 * ten-section structure (scratch home 57678, child 57679,
 * getComputedStyle/getBoundingClientRect via Playwright at 1440px) —
 * see task-10-part3c-report.md for the raw numbers.
 * ========================================================================== */

/* The hero section carries no `.section` class (contract: `gs-ki hero`,
 * not `gs-ki section`), so it never receives key-information.css's own
 * `.gs-ki.section{padding:54px 0}`. Without an explicit reset it falls
 * back to Divi's own section padding (style-static.min.css:
 * `@media(min-width:981px) .et_pb_section{padding:4% 0}` /
 * `.et_flex_section{padding:var(--section-padding) 0}`, both 1-class,
 * not !important) — measured at 54px top/bottom on this render, extra
 * space the artefact's own `.hero{background:#fff}` rule never adds (all
 * of the hero's real spacing lives in .hero-copy/.hero-facts-wrap's own
 * padding). `.gs-ki.hero` (2 classes) beats Divi's 1-class rules without
 * needing !important. */
.gs-ki.hero {
  padding: 0;
}

/* measured: fees-grid/home-for-life-live/hero-grid already become
 * display:grid (key-information.css's own compound rules beat Divi's
 * .et_flex_row{display:flex}), but each column's own `width` — set by
 * style-static.min.css's `.et_flex_column_N_24{width:X%}` (1-class, not
 * !important) — still applies inside the grid cell, and that percentage
 * resolves against the grid TRACK, not the row. Measured at 1440px: the
 * fees-media column came out 59px wide inside a 284px track; the
 * home-for-life/hero columns 241px inside 510px tracks — every column
 * left most of its own grid cell empty. `width:auto` lets each column
 * fill the track CSS Grid already sized correctly for it. */
.gs-ki .fees-grid > .et_pb_column,
.gs-ki .home-for-life-live > .et_pb_column,
.gs-ki .hero-grid > .et_pb_column {
  width: auto;
}

/* home-for-life-live/hero-grid never declare their own `gap` in
 * key-information.css (unlike fees-grid, which sets `gap:4.0175%`
 * explicitly and so already overrides Divi outright) — the artefact
 * relies on each column's own internal padding for visual separation, not
 * a track gap. Divi's `.et_flex_row{column-gap:var(--horizontal-gap)}`
 * (var resolves to --row-gutter-horizontal, measured 5.5%) still applies
 * to the grid (gap/row-gap/column-gap are shared Grid+Flexbox
 * properties, unaffected by the display:grid override above), adding a
 * gap the artefact never had. */
.gs-ki .hero-grid,
.gs-ki .home-for-life-live {
  gap: 0;
}

/* Divi's own `.et_flex_column`/`.et_flex_group` apply a 30px row-gap
 * between every module (style-static.min.css: `:root{--module-gutter:
 * 30px}`, referenced as both --horizontal-gap and --vertical-gap). The
 * design's own CSS already supplies a margin on every meaningful child
 * element inside these design wrappers (p, h2, ul, figure…), so this gap
 * only stacks extra space on top of the design's own rhythm — confirmed
 * directly on the fees section: with this reset in place elsewhere on the
 * page the design's own margins alone produce the intended spacing.
 * Wherever the design DOES want a flex/grid gap (fees-grid, review-panel,
 * extras-lead, trial-panel-full, hero-actions, …) it already sets one
 * explicitly with matching or higher specificity, so this reset never
 * fights those. */
.gs-ki .et_pb_column,
.gs-ki .et_pb_group {
  --module-gutter: 0;
}

/* Divi's own `.et_flex_group{--flex-direction:column}` (style-static.
 * min.css) makes every group module stack its children top-to-bottom by
 * default — the CSS default the artefact's plain `.hero-actions{display:
 * flex;gap:12px;flex-wrap:wrap}` assumed (browsers default to
 * flex-direction:row) never applied through Divi's own group default.
 * Measured directly: flex-direction computed to `column` before this
 * fix, stacking the "Speak to the home" button above the "Back to…" link
 * instead of placing them side by side. */
.gs-ki .hero-actions {
  flex-direction: row;
}

/* Fees section only: the second content-row (notes/toggle/CTA) sits
 * `--section-gutter` (measured 60px) below the fees-grid row, since the
 * artefact's own `.fees-coda{margin-top:44px}` never matches anything in
 * this structure (that wrapper div is not part of the generated section —
 * the toggle/notes/CTA are direct row children instead). Trims the extra
 * ~16px so the coda sits at roughly the artefact's own spacing. */
.gs-ki#fees .et_pb_row + .et_pb_row {
  margin-top: -16px;
}

/* Divi's own image module wrapper (span.et_pb_image_wrap) is
 * position:relative by default (confirmed via getComputedStyle) — when
 * its own <img> is itself position:absolute (key-information.css's own
 * .fees-media/.hero-media img rules, plus this file's Area
 * 1 hero-media fix — all anchor the image via inset:0 against their
 * design-wrapper column), the wrap becomes the img's actual containing
 * block instead of the column further up, and — with no in-flow content
 * to size a fit-content box by, since the img is out of flow — the wrap
 * (and the .et_pb_image module div around it) collapse to 0×0. Measured
 * directly: span.et_pb_image_wrap computed to width:0;height:0 inside
 * .fees-media on this render, exactly matching the build-time warning
 * respira_build_page returned for this page ("images can collapse if the
 * theme relies on span.et_pb_image_wrap defaults"). Making the whole
 * wrapper chain position:absolute;inset:0 too skips the percentage/
 * fit-content resolution chain entirely and anchors directly on the
 * already position:relative, explicitly-sized design column — scoped to
 * only these design classes so it never touches the ribbon images
 * (home-for-life-ribbon/trial-ribbon), whose own <img> is never
 * position:absolute and whose sizing already comes correctly from the
 * ribbon module div's own `width:117.7%`/`58%` rule. */
.gs-ki .fees-media .et_pb_image,
.gs-ki .fees-media .et_pb_image_wrap,
.gs-ki .hero-media .et_pb_image,
.gs-ki .hero-media .et_pb_image_wrap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* WordPress's content filtering on the "included-notes"/"note-card--strong"
 * text modules inserts a stray, empty <p></p> immediately after each
 * note-card's <svg> (confirmed: the source JSON,
 * scripts/ki-template-structure.json, has no such element in any of the
 * three note-card instances — same class of `the_content` filtering
 * artefact documented in Task 10 part 3a's report for a stray <br>
 * elsewhere on this page). Left alone, that empty item takes
 * `.note-card{grid-template-columns:42px 1fr}`'s second track, pushing the
 * REAL paragraph onto a new implicit row's first (42px) track instead —
 * the "note-card grid" defect this step calls out by name. Removing it
 * from layout via :empty lets the real paragraph fall back into the
 * second track as the design intends. */
.gs-ki .note-card > p:empty {
  display: none;
}

/* style-static.min.css's `.et_pb_bg_layout_light.et_pb_module.
 * et_pb_button{color:#2ea3f2}` (3-class compound, not !important) ties in
 * specificity with every one of key-information.css's own button colour
 * rules (`.button-primary{color:#fff}`, `.home-for-life-copy .button{
 * color:var(--sage)}`, `.trial-body .button{color:var(--teal)}` — each
 * 2- or 3-class compounds), and Divi's own theme stylesheet (handle
 * divi-style-css) is enqueued after both Key Information stylesheets, so
 * on every one of those ties it wins by source order. Measured directly
 * on all four real button MODULES in this structure (the fees CTA is a
 * shortcode-rendered <a>, not a button module, and was unaffected):
 * hero's "Speak to the home", how's "Call us today to discuss fees",
 * Home for Life's "Learn about Home for Life" and trial's "Discuss
 * how…" all rendered rgb(46,163,242) (#2ea3f2) instead of their design
 * colour. A 4-class selector (adding .et_pb_button.et_pb_module) beats
 * Divi's rule outright regardless of load order — no !important needed. */
.gs-ki .et_pb_button.et_pb_module.button-primary {
  color: #fff;
}
.gs-ki .home-for-life-copy .et_pb_button.et_pb_module {
  color: var(--sage);
}
.gs-ki .trial-body .et_pb_button.et_pb_module {
  color: var(--teal);
}

/* ==========================================================================
 * Area 5 — fix round 1 (task-10-part3c-fix1-report.md, findings V2/V4/V6/V7).
 *
 * Every fix below is measured against the same scratch render technique as
 * Area 4 (getComputedStyle/getBoundingClientRect via Playwright, plus CDP
 * CSS.getMatchedStylesForNode for the winning-rule chain where relevant) —
 * see task-10-part3c-fix1-report.md for the raw numbers and CDP output.
 * ========================================================================== */

/* measured: fix round 1, V2. style-static.min.css sets
 * `.et_pb_row:not([class*=et_flex_column]){width:80%;width:var(
 * --content-width);max-width:1080px;max-width:var(--content-max-width);
 * margin:auto;position:relative}` — a 1-class-plus-one-:not()-attribute-
 * selector compound (specificity 0,2,0), not !important, but it TIES with
 * key-information.css's own `.gs-ki .content-row` and
 * `.gs-ki .home-for-life-live` rules (also 0,2,0) — and Divi's own theme
 * stylesheet (handle divi-style-css) is enqueued after both Key Information
 * stylesheets, so it wins every one of those ties by source order (the same
 * class of bug as the Area 4 button-colour fix). Confirmed via CDP before
 * this fix, and by direct measurement at 1440px: every .content-row-classed
 * row (and .home-for-life-live) rendered 1080px instead of the design's
 * min(80%,1600px) ≈ 1152px; .hero-grid — which the design leaves entirely
 * unconstrained, full section width — was ALSO caught by this same Divi
 * default, rendering 1080px and centred instead of the full 1440px; and the
 * un-classed contact row (its attributes are `{}` in
 * scripts/ki-template-structure.json — no design class at all) compounded
 * the bug further, since .live-contact's own `width:80%` then computed
 * against an already-1080px-narrowed row (864px measured) instead of the
 * full section width (1152px expected). At 390px the same Divi default
 * happens not to bind (80% of 390 is already under the 1080px cap), so this
 * was only ever visible at the 1440px viewport named by the review — except
 * for the compounding .live-contact case, which was ALSO wrong on mobile
 * (249.6px measured vs the artefact's 312px) for the same underlying reason.
 * Reset broadly first — the doubled `.et_pb_row.et_pb_row` compound adds one
 * specificity component over Divi's tied rule, winning outright rather than
 * only re-tying it — then re-apply the two design width formulas with the
 * same specificity boost so they still win after the reset. .hero-grid and
 * the contact row have no design width formula of their own, so the broad
 * reset alone is correct for both (matching the artefact's own unconstrained
 * rendering there).
 *
 * `width: 100%`, not `auto`: every `.et_pb_section` here is itself
 * `display:flex;flex-direction:column;align-items:center` (Divi flex mode),
 * so each `.et_pb_row` is a CROSS-axis flex item under a non-stretching
 * `align-items`. `width:auto` on such an item resolves via shrink-to-fit
 * content sizing, not "100% of the container" — confirmed this differs
 * per row's own content: .hero-grid's row (a CSS grid with two fr-sized
 * columns) happened to shrink-to-fit at the full 1440px, but the contact
 * row (a single column whose own content is ITSELF percentage-widthed,
 * `.live-contact{width:80%}` on down) hit the classic circular-percentage
 * case — percentages don't contribute to shrink-to-fit sizing, so they
 * resolve against the row's own content's intrinsic width instead, which
 * measured 1044px (an arbitrary value driven by the contact-form widget's
 * natural width), giving `.live-contact` 835px (80% of 1044) instead of the
 * intended ~1152px (80% of a properly-1440px-wide row). `width:100%` gives
 * every row an unambiguous, definite width (the flex container's content
 * box is always definite here), fixing the contact row without changing
 * .hero-grid's already-correct 1440px. */
.gs-ki .et_pb_row.et_pb_row {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.gs-ki .content-row.et_pb_row {
  width: min(80%, var(--content));
  margin-inline: auto;
}
.gs-ki .home-for-life-live.et_pb_row {
  width: 80%;
  max-width: 1600px;
  margin: 0 auto;
}

/* measured: fix round 1, V4. style-static.min.css sets a bare
 * `p{padding-bottom:1em}` (specificity 0,0,1, not !important) sitewide —
 * invisible extra space baked inside every non-last paragraph's own
 * border-box, stacking on top of key-information.css's own margin-bottom on
 * that same paragraph (the two never collapse into each other, since
 * padding lives inside the border box and margin lives outside it). The
 * artefact's own static HTML never loads Divi's stylesheet, so it has none
 * of this — confirmed directly: `.fund-tabs__content p`'s own
 * padding-bottom is 0px in the artefact, 18px in the build. A plain
 * getBoundingClientRect()-based "gap between consecutive paragraphs"
 * measurement doesn't show this on its own, since that metric only reports
 * the remaining margin-collapse AFTER the first paragraph's own
 * (already-padded) border box — both artefact and build measured 15px by
 * that metric alone, misleadingly identical. The true total visible
 * whitespace between two consecutive paragraphs' text is
 * padding-bottom + margin-bottom: 15px in the artefact (no padding) vs
 * 15+18=33px in the build — a ~2.2x ratio, matching the review's "~2.3x"
 * finding. The same 18px leak (padding-bottom:1em at the section's 18px
 * base font-size) was also confirmed present in #how .prose, .trial-body
 * and .fees-copy — not only the funding tab panels named by the review — so
 * this resets it once, sitewide, rather than only where it happened to be
 * visually flagged. `.gs-ki p` (specificity 0,1,1) already beats Divi's
 * bare `p` (0,0,1) on specificity alone — no !important needed. */
.gs-ki p {
  padding-bottom: 0;
}

/* measured: fix round 1, V6. key-information.css's own
 * `.fees-coda .supporting{margin-top:20px}` (line 366) can never match here
 * — `.fees-coda` is a wrapper div that exists only in the artefact's flat
 * HTML, with no Divi equivalent (the notes/toggle/CTA are direct
 * row-children instead — the same structural gap Area 4's
 * `#fees .et_pb_row + .et_pb_row` fix above already works around for the
 * row-to-row spacing). This page's #fees section has exactly one
 * `.et_pb_toggle.supporting`, always immediately preceded in document order
 * by the `.included-notes` text module (scripts/ki-template-structure.json:
 * text(.included-notes), toggle(.supporting), group(.prose-cta), as
 * siblings in the same column) — so scoping by `#fees` alone is sufficient
 * and unambiguous, without needing `:has()` or another wrapper-tolerant
 * sibling-combinator trick. Measured directly: 0px gap before this fix
 * (Divi's own --module-gutter is already reset to 0 elsewhere in this file,
 * and the toggle carries no margin of its own); the artefact's own gap is
 * 20px. */
.gs-ki#fees .et_pb_toggle.supporting {
  margin-top: 20px;
}

/* fix round 1, V7 (escalated). Markup difference, not a Divi-chrome
 * conflict — confirmed directly by comparing the live DOM in both contexts:
 * in the artefact's flat HTML, `<p class="included-footnote">` is a DIRECT
 * CHILD of `<article class="fee-highlight included-box">` (its own
 * parentElement.className measured as exactly "fee-highlight
 * included-box"), so key-information.css's OWN
 * `.fee-highlight>p:not(.fee-facts-title){font-size:16px;line-height:1.7;
 * margin:0}` (a 2-class-plus-type-plus-pseudo-class compound, specificity
 * 0,2,1) ALSO happens to match it there, and wins outright over
 * `.included-box .included-footnote{font-size:13px;…}` (0,2,0) purely on
 * that extra type-selector component — confirmed directly:
 * getComputedStyle().fontSize is 16px on the artefact's own rendered
 * footnote. In the Divi build the same `<p>` sits inside its own text
 * module's `.et_pb_text_inner` (measured parentElement.className:
 * "et_pb_text_inner"), several wrapper levels below
 * `.fee-highlight.included-box` (the column), so the child-combinator rule
 * never reaches it there, and `.included-box .included-footnote`'s own 13px
 * applies unchallenged instead — confirmed directly: 13px computed, vs the
 * artefact's 16px. Restoring the artefact's actual rendering here (even
 * though it is itself a specificity accident in the source design) rather
 * than chasing the child combinator through Divi's extra wrapper levels —
 * per the brief, the artefact is the visual source of truth. A 4-class
 * selector beats key-information.css's `.included-box .included-footnote`
 * (0,3,0 including .gs-ki) outright — no !important needed. */
.gs-ki .fee-highlight.included-box .included-footnote {
  font-size: 16px;
  line-height: 1.7;
}

/* ==========================================================================
 * Area 6 — Site divi-5-fixes.css positional _tb_body collisions.
 *
 * Round 2 (1.0.143): resolved at the source — divi-5-fixes.css scopes every
 * such rule with body:not(.d5f-ki-page) — so the overrides below were removed.
 * The measurements are kept as history.
 *
 * Task 11, fix round 2b-1, defect D5. Staging's site-wide (not vendored in
 * this repo) divi-5-fixes.css writes rules against Divi's own per-render
 * positional Theme Builder body classes (et_pb_<module>_<n>_tb_body)
 * without any body-class or template scope — those classes number modules
 * by position WITHIN WHATEVER Theme Builder body template happens to be
 * rendering, so a rule meant for one template's Nth module of a given type
 * lands on any OTHER template's own Nth module of that type too. This body
 * layout (57591) was checked against every such rule in staging's
 * divi-5-fixes.css (inventory: task-11-fix2b1-report.md, section 1) at
 * 1440x900, 1024x768 and 390x844 via Playwright, hiding overlays only via
 * injected CSS. Sixteen distinct positional classes are referenced there;
 * fifteen are harmless for this layout at these three widths (seven do not
 * exist anywhere in this template's markup at all; four are gated to
 * `@media(max-width:360px)`, narrower than every tested width; three are
 * gated by `body.parent-pageid-94`, which this page's body never carries —
 * its actual parent-pageid class is 27458, Broadlands' own care-home page).
 * Exactly one is harmful: below.
 * ========================================================================== */

/* measured: `.et-l--body .et_pb_text_1_tb_body .et_pb_text_inner p{
 * font-size:clamp(34px,9.5vw,48px)!important;line-height:1.08!important}`
 * in divi-5-fixes.css, @media(max-width:767px) — written for the care-home
 * hero layout 56706's own "1st text module" (its H1-adjacent lede), and
 * this body layout's hero lede text module (et_pb_text_1_tb_body, the
 * <p class="lede"> right after the H1) lands in that exact same positional
 * slot, so the class collides. Confirmed via CDP CSS.getMatchedStylesForNode
 * on the live page at 390px, BEFORE this fix: this rule (matching via its
 * `.et-l--body .et_pb_text_1_tb_body .et_pb_text_inner p` item — 3 classes
 * plus the `p` type selector, specificity 0,3,1) beat key-information.css's
 * own `.gs-ki .hero-copy .lede{font-size:16px}` (3 classes, specificity
 * 0,3,0, not !important) on !important alone. Computed before this fix:
 * font-size 37.05px (the clamp resolved against a 390px viewport) vs the
 * artefact's 16px; line-height 40.014px (37.05×1.08) vs the artefact's
 * 24.8px (16×1.55) — matching the review's "37px instead of 16px" finding
 * and the hero's 1498px-vs-1194px height gap.
 *
 * FIRST ATTEMPT at this fix used `.gs-ki .hero-copy .lede{...!important}` —
 * 3 classes, specificity 0,3,0 — and, deployed to staging, still measured
 * 37.05px: once both sides carry !important, the tie is broken by
 * specificity, and the site rule's matching item has an extra `p` type
 * selector (0,3,1) that this file's 3-class selector alone (0,3,0) can't
 * beat. Fixed below by adding `.hero` — the hero SECTION carries both
 * `gs-ki` and `hero` as one compound class list (confirmed on the render:
 * `<div class="et_pb_section_0_tb_body et_pb_section et_section_regular
 * et_flex_section gs-ki hero">`), so `.gs-ki.hero` is a real, accurate
 * description of that element, not an artificial specificity bump — and it
 * raises this selector to 4 classes (0,4,0), which beats (0,3,1) purely on
 * class count, regardless of source order. Reconfirmed via CDP after this
 * fix: computed font-size 16px, line-height 24.8px, hero height 1193.55px —
 * matching the artefact's 16px / 24.8px / 1193.55px exactly (see
 * task-11-fix2b1-report.md section 5 for the full before/after/artefact
 * table). This override must also be !important to win the cascade
 * (specificity cannot beat !important either way); the media query is
 * repeated here (rather than added to key-information.css's own
 * @media(max-width:767px){.gs-ki{...}} block) because this file, not the
 * generated one, is where a site-stylesheet-specific fix belongs. */
/* Removed in round 2 (1.0.143): divi-5-fixes.css positional rules now exclude
 * body.d5f-ki-page, so this override is no longer needed. */

/* Task 11, fix round 2b-2, defect A1. Round 2b-1 only measured 1440/1024/390
 * — four more positional collisions in divi-5-fixes.css are gated
 * `@media(max-width:360px)`, narrower than every width tested there. Re-run
 * at 320x568, 360x740 and 375x667 (task-11-fix2b2-report.md, section "A1"):
 * `et_pb_row_4_tb_body`/`et_pb_row_8_tb_body` (#how's and #trial's single-
 * column content-rows) are harmless — the row-level flex-wrap/justify-
 * content/gap only matter for multi-item flex rows (these rows have exactly
 * one child column), the column-level width/max-width/flex/margin already
 * match Divi's own full-width single-column default, and the column-level
 * text-align:center never reaches any rendered text (every heading/
 * paragraph inside already has its own explicit .gs-ki rule). One real,
 * measured effect survives, though: `et_pb_button_2_tb_body`/
 * `_3_tb_body`'s own `text-align:center` (not !important, specificity
 * 0,1,0) is the ONLY rule anywhere setting text-align on the "Learn about
 * Home for Life" and trial CTA buttons (CDP CSS.getMatchedStylesForNode
 * confirmed no other rule touches it) — the artefact computes
 * text-align:start on every button at every width, and both buttons wrap to
 * 2+ lines at 320/360, so centering vs left-aligning the wrapped lines is
 * visually real. `.gs-ki .button` (2 classes, 0,2,0) already beats the site
 * rule's 1-class selector-list item (0,1,0) on specificity alone — no
 * !important needed. Scoped to the same @media(max-width:360px) as the rule
 * it counters, not sitewide — see Area 7 below for why a wider max-width:767
 * button rule would be wrong for these same two buttons. */
/* Removed in round 2 (1.0.143): divi-5-fixes.css positional rules now exclude
 * body.d5f-ki-page, so this override is no longer needed. */

/* ==========================================================================
 * Area 7 — Divi core button-module max-content clamp vs the hero's full-
 * width primary button. Task 11, fix round 2b-2, defect A2.
 * ========================================================================== */

/* measured: Divi core's `.et_pb_module.et_pb_button:not(.et_block_module)
 * {max-width:max-content}` (specificity 0,3,0 — two classes plus
 * `:not(.et_block_module)`'s own class-level argument — no media, not
 * !important) beats key-information.css's `.gs-ki .button{width:100%}`
 * (@media(max-width:767px), 0,2,0) on the max-width property alone,
 * clamping "Speak to the home" (a real Divi Button module,
 * et_pb_button_0_tb_body, inside .hero-actions) back to its shrink-to-fit
 * content width — measured 234px at every width ≤767px, before this fix —
 * while "Back to Broadlands" beneath it (a Code-module <a class="button
 * button-secondary">, not .et_pb_button, never touched by the Divi rule)
 * already rendered full width, exactly the brief's "Speak to the home is
 * shrink-to-fit while Back to Broadlands is full width" symptom. CDP
 * CSS.getMatchedStylesForNode on the live page confirmed this is the only
 * competing max-width declaration. `.gs-ki.hero .hero-actions
 * .button-primary` (4 classes, 0,4,0) beats Divi's rule on specificity
 * alone regardless of source order — no !important needed.
 *
 * Scoped narrowly to .hero-actions, NOT sitewide: et_pb_button_2_tb_body/
 * _3_tb_body (Home for Life / trial CTA, see the text-align fix above) are
 * ALSO real Divi Button modules hit by the very same core rule, and for
 * those two the max-content clamp is coincidentally CORRECT — the
 * artefact's own widths for them (230/259/270px and 208/240/252px at
 * 320/360/375) are themselves shrink-to-fit, not full-width (confirmed by
 * direct artefact measurement) — so cancelling the clamp sitewide would
 * wrongly stretch those two buttons full width instead.
 *
 * Verified via local CSS injection on the live page before deploying:
 * 360px 234px -> 295.21875px (artefact: 295.21875px, exact); 390px 234px ->
 * 319.8125px (artefact: 319.8125px, exact); 768px unaffected, 234px before
 * and after (correctly excluded by the @media(max-width:767px) guard,
 * matching the artefact's own shrink-to-fit rendering there — the ~10px gap
 * remaining at 768px, 234px live vs 244px artefact, is unrelated to this
 * clamp and outside this defect's scope, see the report's Concerns). */
@media (max-width: 767px) {
  .gs-ki.hero .hero-actions .button-primary {
    max-width: none;
  }
}

/* ==========================================================================
 * Area 8 — client feedback round 1 (2026-09-24).
 *
 * Spec and plan live in the Greensleeves project repo:
 * docs/superpowers/specs/2026-09-24-key-information-client-feedback-design.md
 * docs/superpowers/plans/2026-09-24-key-information-client-feedback.md
 *
 * New components only. The template change kept every positional Theme
 * Builder slot Area 6 audited (text_1 = lede, button_2/3 = Home for Life and
 * trial CTAs, row_4/row_8 = the single-column How and Trial rows), so nothing
 * here needs to fight divi-5-fixes.css. The row_4/row_8 rule's column-level
 * text-align:center (<=360px) is why every text element inside .ki-panel and
 * .trial-cards sets its own text-align below.
 * ========================================================================== */

/* Hero title: home name in the brand script over "FEES & FUNDING" caps,
 * replacing the yellow caps name so the page reads differently from the
 * home's own landing page. */
.gs-ki .hero-title {
  margin: 0 0 20px;
  line-height: 1;
}
.gs-ki .hero-title__home {
  display: block;
  font: 400 clamp(58px, 5.6vw, 88px)/1 turbinado-pro, "Turbinado Pro", cursive;
  color: var(--moss);
  overflow-wrap: break-word;
}
.gs-ki .hero-title__caps {
  display: block;
  margin-top: 8px;
  font: 700 clamp(32px, 3.2vw, 48px)/1.1 "Poppins", Arial, sans-serif;
  color: var(--deep-green);
  text-transform: uppercase;
  letter-spacing: -1px;
}
@media (max-width: 767px) {
  .gs-ki .hero-title__home {
    font-size: 54px;
  }
  .gs-ki .hero-title__caps {
    font-size: 30px;
    letter-spacing: -.5px;
  }
}

/* Hero fee card: the fact rows as signposts. The "About our fees" panel above
 * them is a native Group styled by KI presets since round 2. */
.gs-ki .fact-amount {
  margin-bottom: 20px;
}
.gs-ki .fact-list li.is-link {
  display: block;
  padding: 0;
}
.gs-ki .fact-list li.is-link > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 14px 0;
  text-decoration: none;
}
.gs-ki .fact-list li.is-link span {
  text-decoration: underline;
  text-decoration-color: rgba(66, 83, 57, .35);
  text-underline-offset: 3px;
}
.gs-ki .fact-list li.is-link > a:hover span,
.gs-ki .fact-list li.is-link > a:focus-visible span {
  text-decoration-color: currentColor;
}

/* "More on what the weekly fee includes" toggle: sub-headings and link. */
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_content h3 {
  font: 600 16px/1.4 "Poppins", Arial, sans-serif;
  color: var(--moss);
  margin: 18px 0 4px;
}
.gs-ki .et_pb_toggle.supporting .et_pb_toggle_content a {
  color: var(--link);
  font-weight: 600;
}

/* Dark-green panel shared by "How fees are calculated" and "Changes to fees":
 * script title on the left, copy on the right, ribbon bottom-right. The
 * column is a Divi flex column; grid needs the extra .et_pb_column class to
 * outrank Divi's column display rule.
 *
 * Ribbon (client round 3, 2026-10-12: "match the ribbons you've already built").
 * The care-home pages' Home for Life and Legacy modules show the whole brand
 * ribbon (media #57025), 58.85% of the row wide, right-aligned, dipping a
 * quarter of its height below the bottom edge; at 980px and below it is cut at
 * the edge. Round 1 showed a cropped piece of it here instead, and at about
 * 1024px it ran into the last line of text. The bottom padding is the part of
 * the ribbon inside the panel (12.4% of the width) plus a 32px gap, so the
 * ribbon always sits clear of the copy and button. */
.gs-ki .et_pb_column.ki-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr);
  column-gap: 64px;
  align-items: start;
  background: var(--moss);
  border-radius: 10px;
  padding: 60px 60px calc(12.4% + 32px);
  isolation: isolate;
}
.gs-ki .ki-panel > .et_pb_module {
  grid-column: 2;
  margin-bottom: 0;
}
.gs-ki .ki-panel > .et_pb_heading {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.gs-ki .ki-panel h2 {
  font: 400 clamp(64px, 5.4vw, 90px)/1.05 turbinado-pro, "Turbinado Pro", cursive;
  color: #fff;
  text-align: left;
  margin: 0;
}
.gs-ki .ki-panel p {
  font: 400 17px/1.75 "Poppins", Arial, sans-serif;
  color: #fff;
  text-align: left;
  margin: 0 0 16px;
}
.gs-ki .ki-panel p:last-child {
  margin-bottom: 0;
}
.gs-ki#how .ki-panel .prose {
  columns: auto;
}
.gs-ki .ki-panel .prose a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.gs-ki .ki-panel .prose-cta {
  margin-top: 28px;
  text-align: left;
}
.gs-ki .ki-panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58.85%;
  aspect-ratio: 1056 / 294;
  background: url("/wp-content/uploads/2026/05/Brand-Ribbon_Double-Section.png") no-repeat center / 100% 100%;
  transform: translateY(24.4%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 980px) {
  .gs-ki .et_pb_column.ki-panel {
    grid-template-columns: 1fr;
    padding: 40px 30px calc(12.4% + 32px);
    overflow: hidden;
  }
  .gs-ki .ki-panel > .et_pb_module,
  .gs-ki .ki-panel > .et_pb_heading {
    grid-column: 1;
    grid-row: auto;
  }
  .gs-ki .ki-panel h2 {
    font-size: 58px;
    margin-bottom: 14px;
  }
  .gs-ki .ki-panel p {
    font-size: 16px;
  }
}
/* Phones: full width, as on the care-home pages. */
@media (max-width: 767px) {
  .gs-ki .et_pb_column.ki-panel {
    padding-bottom: calc(22.3% + 24px);
  }
  .gs-ki .ki-panel::after {
    width: 100%;
    transform: translateY(20%);
  }
}

/* Types of funding: the three rows are native Groups styled by KI presets
 * (round 2). This only spaces the container they sit in. */
.gs-ki .fund-rows {
  display: grid;
  gap: 28px;
  margin-top: 8px;
}
.gs-ki .fund-rows > .et_pb_module {
  margin-bottom: 0;
}
/* Proof of funding: the 18-months stat box is gone, so the card is one column. */
.gs-ki .proof-card {
  grid-template-columns: 1fr;
}
.gs-ki .proof-card strong {
  color: var(--moss);
}

/* Trial: heading, intro and button around the native trial card (KI presets,
 * round 2), on the page background instead of the old dark panel. */
.gs-ki .et_pb_column.trial-cards {
  display: block;
}
.gs-ki .trial-content h2 {
  text-align: center;
  margin-bottom: 7px;
}
.gs-ki .trial-content .section-intro {
  margin: 0 auto 30px;
  text-align: center;
}
.gs-ki .trial-content {
  text-align: center;
}
.gs-ki .trial-content .et_pb_button_module_wrapper,
.gs-ki .trial-content > .et_pb_button {
  margin-top: 28px;
}
.gs-ki .et_pb_button.et_pb_module.button-secondary {
  color: var(--moss); /* sage on white was 3.55:1 (axe) */
  background: #fff;
  border: 1px solid var(--deep-green);
}
/* Contact: centre the heading, address, "Select type of enquiry" label and
 * enquiry choices; the form fields themselves stay left-aligned for easier
 * completion. Measured on the render: the LWF form's own markup is
 * h2 + p.address + h4 + div.lwf-cf-radio-group, and the form has ten more
 * h4s further down, hence `.address + h4` for the label only. */
.gs-ki .live-contact p.address,
.gs-ki .live-contact p.address + h4 {
  text-align: center;
}
.gs-ki .live-contact .lwf-cf-radio-group {
  justify-content: center;
  flex-wrap: wrap;
}

/* Tuning after the staging review (same day). */

/* "Our funding assurance" wraps to two lines where "A Home for Life" fitted
 * on one; key-information.css's line-height:1.6 (sized for one line) left a
 * large gap between them. */
.gs-ki .home-for-life-copy h2 {
  line-height: 1.05;
  padding-bottom: 6px;
}

/* The client's trial mockup sits the white card on a cream band. */
.gs-ki#trial {
  background: var(--warm150);
}

/* Exceptional services: no image (client round 3, 2026-10-12), so the intro is a
 * centred standfirst under the centred heading, as the trial section's intro is. */
.gs-ki .extras-lead {
  display: block;
  margin: 0;      /* heading to intro 24px, as in the trial section */
}
.gs-ki .extras-lead .extras-standfirst {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.gs-ki .extras-index {
  margin-top: 40px;
}

/* Visual QA round (same day), measured with Playwright at 768-1440px. */

/* Hero fee card: key-information.css positions it absolutely (bottom:34px)
 * inside a 600-630px photo column, so the card can never grow the hero. With
 * the round-1 "About our fees" panel it became taller than that column at
 * ~768-880px and its top ("Indicative fees from" and half the amount) was
 * clipped under the site header. key-information.css already solves this on
 * phones by keeping the card in flow at the bottom of a flex column; the same
 * approach here makes a taller card grow the hero instead of overflowing it.
 * The photo is its own absolutely positioned image module (Area 1/4), so it
 * still fills the column. Insets match the old absolute offsets. */
@media (min-width: 768px) {
  .gs-ki .hero-facts-wrap.hero-media {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 34px 36px;
  }
  .gs-ki .hero-media .fact-card {
    position: relative;
    inset: auto;
    width: 100%;
  }
}

/* Sub-nav at small tablet widths: the seven pills need ~740px at 768px but
 * divi-5-fixes.css pads each link 16px (!important, 768-1180px), so the last
 * pills sat off-screen in the nav's hidden-scrollbar strip (this predates
 * round 1 at exactly 768px). 12px padding fits them with the short labels. */
@media (min-width: 768px) and (max-width: 860px) {
  /* body.d5f-ki-page, not .gs-ki: once stuck, the nav is moved to <body>, outside .gs-ki. */
  body.d5f-ki-page .d5f-internal-nav__link {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

/* Round 2: the rebuilt parts are native modules styled by "KI •" presets, so
 * their look lives in Divi, not here. key-information.css gives every paragraph
 * a bottom margin (and Divi pads lists); round 1 zeroed that per component, so
 * the last block in a preset-styled text or blurb gets none. Only the KI presets
 * add preset classes on this layout, so other modules keep their spacing. */
.gs-ki [class*="preset--module--divi-text--"] .et_pb_text_inner > :last-child,
.gs-ki [class*="preset--module--divi-blurb--"] .et_pb_blurb_description > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* The FNC paragraph is its own text module holding only [d5f_ki_if_care_type
 * wrap="p"]. On homes without nursing care the shortcode outputs nothing, so the
 * module holds no element; take it out of the layout, or the row's flex gap still
 * leaves space for it. Every other preset-styled text module holds a <p> or <ul>. */
.gs-ki [class*="preset--module--divi-text--"]:not(:has(.et_pb_text_inner > *)) {
  display: none;
}

/* Hover and keyboard focus on Divi Button modules (found testing hover states,
 * 2026-09-24; it predates round 2). Divi's theme-wide button hover makes the border
 * transparent, switches to its icon padding, fades the background to 5% black and
 * squares the pill, which left "Speak to the home" as white text on near-white.
 * Divi also positions the arrow absolutely, so it sat on the label. Keep each
 * button's resting look on hover (with key-information.css's 1px lift), and put the
 * arrow in the right padding after the label, so no button changes size. */
.gs-ki .et_pb_button.et_pb_module.button::after {
  position: absolute;
  left: auto;
  right: 13px;
  top: 50%;
  margin: -4px 0 0;
}
.gs-ki .et_pb_button.et_pb_module.button:hover::after,
.gs-ki .et_pb_button.et_pb_module.button:focus-visible::after {
  margin: -4px 0 0;
}
.gs-ki .et_pb_button.et_pb_module.button:hover {
  padding: 12px 28px;
  border-radius: var(--pill);
}
.gs-ki .et_pb_button.et_pb_module.button-primary:hover {
  background: var(--orange);
  border: 2px solid #fff;
}
.gs-ki .et_pb_button.et_pb_module.button-secondary:hover {
  background: #fff;
  border: 1px solid var(--deep-green);
}
.gs-ki .home-for-life-copy .et_pb_button.et_pb_module.button:hover {
  background: #f6f5ee;
  color: var(--moss);
  border: 0;
  border-radius: 80px;
}


/* Type sizes checked against the v13c design (1.0.147). */

/* Contact: the enquiry form's sizes live in the care-home body layout's own
 * custom CSS (#56706), so they never reached these pages, which showed the LWF
 * plugin's 13px base chips and a 20px black label. These are those rules,
 * minus their text-align:left (the client asked for this block centred). */
.gs-ki .live-contact .lwf-main-contact-option1 h4 {
  color: #33402c !important;
  font-family: "Poppins", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: 22px !important;
  line-height: 1;
  margin: 0 0 24px;
  padding-bottom: 0;
}
.gs-ki .live-contact .lwf-cf-radio-group label {
  gap: 12px;
  padding: 8px 16px;
  font-size: 18px;
}
.gs-ki .live-contact .lwf-cf-radio-group .material-icons {
  font-size: 20px;
  padding: 8px;
}
.gs-ki .live-contact .lwf-friends-family-phone a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #768f68;
  font: 600 16px "Poppins", Helvetica, Arial, Lucida, sans-serif;
  text-decoration: none;
}
.gs-ki .live-contact .lwf-friends-family-phone .material-icons {
  font-size: 24px;
  color: #768f68;
  padding-right: 4px;
}

/* What's included: the design sets its intro at 16px/1.7; key-information.css
 * has a later 15px rule for .included-lead. */
.gs-ki .included-box .included-lead {
  font-size: 16px;
  line-height: 1.7;
}

/* How fees are calculated / Changes to fees: 18px on desktop, the design's own
 * "How fees are calculated" paragraph size. 980px and below keep round 1's 16px. */
@media (min-width: 981px) {
  .gs-ki .ki-panel p {
    font-size: 18px;
  }
}

/* Client round 3 (2026-10-12). */

/* Fees section boxes: one per figure, in dark green so they stand out from the
 * white cards around them. White on #425339 is 8.3:1, the yellow label 5.25:1 and
 * the cream text 7.6:1 (WCAG AA asks 4.5:1; sage or orange with white text would
 * fail, at 3.6:1 and 3.1:1). Scoped to the shortcode's wrapper because the What's
 * included column carries .fee-highlight too. Since round 4 (2026-10-14) a box is
 * only the label and the amount, so the amount keeps no bottom margin. */
.gs-ki .d5f-fee-table--highlight {
  display: grid;
  gap: 16px;
}
.gs-ki .d5f-fee-table--highlight .fee-highlight {
  margin-top: 0;
  background: var(--moss);
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 18px 42px rgba(23, 53, 66, .18);
}
.gs-ki .d5f-fee-table--highlight .fee-highlight .label {
  color: var(--yellow);
}
.gs-ki .d5f-fee-table--highlight .fee-highlight .amount {
  margin-bottom: 0;
  color: #fff;
}
.gs-ki .d5f-fee-table--highlight .fee-highlight .amount small {
  color: var(--warm150);
}

/* Our funding assurance: the ribbon as the care-home pages' Home for Life module
 * shows it (see the dark panels above). It starts inside the green panel, so the
 * photo column no longer clips it on desktop (the template's style module); at
 * 980px and below it runs along the bottom of the photo at the photo's width. */
@media (min-width: 981px) {
  .gs-ki .home-for-life-live .home-for-life-ribbon {
    bottom: 0;
    /* 117.7% of the photo column, as on the care-home pages, except where the text
     * column is narrow (981 to about 1070px): there its left end reached the "Learn
     * about Home for Life" button. The overhang stops 24px short of the button, which
     * is 292px wide after the copy column's 10% padding. */
    width: calc(100% + min(17.7%, 90% - 316px));
    transform: translateY(24.4%);
  }
}
@media (max-width: 980px) {
  .gs-ki .home-for-life-live .home-for-life-media {
    overflow: hidden;
  }
  .gs-ki .home-for-life-live .home-for-life-ribbon {
    width: 100%;
    bottom: 0;
    transform: translateY(22%);
  }
}