/* Features redesign: the hub (features2.html → /features/) and the category overviews (features2-<category>.html).
   Loaded after gable.css + home2.css + features2.css on those pages only. Prefixes: ft-idx- (both), ft-hub-, ft-cat-, ft-fit-. */

/* ---------- hero: copy + an index panel (hub) or three fanned frames (categories) ---------- */
.ft-idx-hero .hx-hero-grid { min-height: 0; align-items: center; }
.ft-idx-hero .hx-hero-copy { padding-bottom: 72px; }
.ft-idx-stage { align-self: center; padding: 48px 0; }
/* feature heroes run their app frame to the card's edge; the index panels keep the copy's inset on the right */
@media (min-width: 1101px) { .ft-idx-stage { padding-right: clamp(40px, 4vw, 64px); } }

/* hub: the jump chips, one tile per category */
.ft-hub-jump ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 560px; margin-left: auto; }
.gbl .ft-hub-jump a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 92px; padding: 18px 18px 18px 20px; background: #fff; border: 1px solid var(--pb-100); border-radius: var(--r-lg); color: var(--ink); box-shadow: 0 20px 40px -32px rgba(24, 50, 140, .45); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.gbl .ft-hub-jump a:hover { transform: translateY(-3px); border-color: var(--pb-200); box-shadow: 0 28px 48px -30px rgba(24, 50, 140, .5); color: var(--ink); }
.ft-hub-jump-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.ft-hub-jump-ico .ft-ico { width: 24px; height: 24px; }
.ft-hub-jump b { display: block; font-size: 18px; line-height: 1.3; overflow-wrap: normal; word-break: normal; }
.ft-hub-jump small { display: block; font-size: 15px; color: var(--muted); }
.ft-hub-jump-arr.ft-ico { width: 18px; height: 18px; color: var(--pb-700); transition: transform .2s var(--ease); }
.gbl .ft-hub-jump a:hover .ft-hub-jump-arr { transform: translateY(3px); }

/* categories: the first three features' frames, fanned */
/* back frames step up and right and stay inside the stage (the hero card clips at its edge) */
.ft-cat-fan { position: relative; width: 100%; max-width: 580px; aspect-ratio: 580 / 500; margin-left: auto; }
.ft-cat-fan > span { position: absolute; width: 76%; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--pb-100), 0 30px 60px -34px rgba(24, 50, 140, .45); }
.ft-cat-fan img { display: block; width: 100%; height: auto; }
.ft-cat-fan-1 { left: 0; top: 20%; z-index: 3; }
.ft-cat-fan-2 { left: 12%; top: 10%; z-index: 2; }
.ft-cat-fan-3 { left: 24%; top: 0; z-index: 1; }
.ft-cat-fan-2 img { opacity: .8; }
.ft-cat-fan-3 img { opacity: .6; }

/* ---------- hub: grouped rows ---------- */
.ft .ft-hub-sec { padding-top: 72px; }
.ft-hub-grp { max-width: 1120px; margin: 0 auto; scroll-margin-top: calc(var(--ft-head, 80px) + 16px); }
.ft-hub-grp + .ft-hub-grp { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.ft-hub-grp-h { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-bottom: 24px; }
.ft-hub-grp-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.ft-hub-grp-ico .ft-ico { width: 28px; height: 28px; }
.ft-hub-grp-h p { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--body); }
.gbl .ft-hub-grp-more { white-space: nowrap; }
.ft-hub-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ft-hub-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 16px; padding: 16px 20px 16px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md, 16px); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.ft-hub-row:hover { transform: translateY(-2px); border-color: var(--pb-200); box-shadow: 0 22px 44px -32px rgba(24, 50, 140, .4); }
.ft-hub-row-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.ft-hub-row-ico .ft-ico { width: 22px; height: 22px; }
.ft-hub-row-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gbl a.ft-hub-a { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
/* the whole row is the link; footnote markers sit above it so they stay their own links */
.gbl a.ft-hub-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ft-hub-row-txt small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.ft-hub-row .ft-fn, .ft-cat-card .ft-fn { position: relative; z-index: 2; }
.ft-hub-row-arr.ft-ico { width: 18px; height: 18px; color: var(--pb-700); transition: transform .2s var(--ease); }
.ft-hub-row:hover .ft-hub-row-arr { transform: translateX(3px); }
.ft-hub-row:focus-within { border-color: var(--pb-200); }

.ft-addon { display: inline-block; padding: 3px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }

/* ---------- categories: text-only feature cards (Earl 2026-10-16: no screenshots; the hero fan keeps its frames) ---------- */
.ft .ft-cat-sec { padding-top: 80px; }
.ft-cat-sec .gbl-sec-head { margin-bottom: 36px; }
.ft-cat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
.ft-cat-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.ft-cat-card:hover { transform: translateY(-3px); border-color: var(--pb-200); box-shadow: 0 28px 56px -34px rgba(24, 50, 140, .45); }
.ft-cat-card:focus-within { border-color: var(--pb-200); }
.ft-cat-body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 26px; }
.ft-cat-ico { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; display: grid; place-items: center; background: var(--pb-50); color: var(--pb-700); }
.ft-cat-ico .ft-ico { width: 24px; height: 24px; }
.ft-cat-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 20px; line-height: 1.3; }
.gbl a.ft-cat-a { color: var(--ink); }
/* the whole card is the link; footnote markers sit above it so they stay their own links */
.gbl a.ft-cat-a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ft-cat-tag { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--body); }
/* the bullets sit under a hairline, so each card reads name + promise, then what's in it */
.ft-cat-pts { display: grid; gap: 8px; margin: 18px 0 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ft-cat-pts li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--body); }
/* first line of a wrapped label (decision: align small icons to the first line) */
.ft-cat-pts .ft-ico { width: 16px; height: 16px; margin-top: 3px; color: var(--pb-600); }
.ft-cat-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--pb-700); }
.ft-cat-more .ft-ico { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.ft-cat-card:hover .ft-cat-more .ft-ico { transform: translateX(3px); }
.ft-cat-pts:empty { display: none; }
/* a card with no bullets (Treasury: tagline + disclosures only, compliance D3) gets a soft tint, and its link drops to
   the foot of the card like its neighbours', so the row's height reads as designed rather than empty */
.ft-cat-card:not(:has(.ft-cat-pts)) { background: linear-gradient(165deg, #fff 0%, #f5f9ff 45%, var(--pb-50) 100%); border-color: var(--pb-100); }
.ft-cat-card:not(:has(.ft-cat-pts)) .ft-cat-ico { background: #fff; box-shadow: 0 0 0 1px var(--pb-100); }
.ft-cat-card:not(:has(.ft-cat-pts)) .ft-cat-more { padding-top: 22px; }
/* V4: Bookkeeping's starting price, beside its Add-on chip */
.ft-cat-price { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--pb-50); border: 1px solid var(--pb-100); color: var(--pb-700); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
/* 4 features: two wide columns. A lone last card runs full width: .is-wide3 when it's alone on a 3-column row
   (7 = 3 + 3 + 1), .is-wide2 when it's alone on a 2-column row (an odd count). Set by the renderer. With no picture to
   fill the width, the name and promise sit on the left and the bullets in two columns on the right. */
@media (min-width: 1101px) {
  .ft-cat-cards.is-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
  /* 5 features (Communications since Calendar, 2026-10-18): three across, then two halves, no empty slot */
  .ft-cat-cards.is-n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ft-cat-cards.is-n5 > .ft-cat-card { grid-column: span 2; }
  .ft-cat-cards.is-n5 > .ft-cat-card:nth-child(n+4) { grid-column: span 3; }
  .ft-cat-card.is-wide3 { grid-column: 1 / -1; }
  .ft-cat-card.is-wide3 .ft-cat-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto 1fr auto; column-gap: 48px; padding: 32px 36px; }
  .ft-cat-card.is-wide3 .ft-cat-body > * { grid-column: 1; }
  .ft-cat-card.is-wide3 .ft-cat-pts { grid-column: 2; grid-row: 1 / -1; align-self: center; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; margin: 0; padding: 0 0 0 48px; border-top: 0; border-left: 1px solid var(--line); }
  .ft-cat-card.is-wide3 .ft-cat-more { margin-top: 18px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .ft-cat-card.is-wide2 { grid-column: 1 / -1; }
  .ft-cat-card.is-wide2 .ft-cat-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 36px; }
  .ft-cat-card.is-wide2 .ft-cat-body > * { grid-column: 1; }
  .ft-cat-card.is-wide2 .ft-cat-pts { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding: 0 0 0 36px; border-top: 0; border-left: 1px solid var(--line); }
  .ft-cat-card.is-wide2 .ft-cat-more { margin-top: 18px; }
}

/* ---------- "How it fits together" ---------- */
.ft .ft-fit-sec { padding-top: 88px; }
.ft-fit { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
/* the connecting line behind the step numbers */
.ft-fit::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 19px; height: 2px; background: linear-gradient(90deg, var(--pb-100), var(--pb-200), var(--pb-100)); }
.ft-fit li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-fit-n { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--pb-600); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 0 0 6px #fff; }
.gbl a.ft-fit-f { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 6px 12px; min-height: 44px; border-radius: 999px; background: var(--pb-50); border: 1px solid var(--pb-100); color: var(--pb-700); font-size: 14px; font-weight: 600; line-height: 1.2; transition: border-color .2s, background .2s; }
.gbl a.ft-fit-f:hover { border-color: var(--pb-200); background: #fff; color: var(--pb-700); }
.ft-fit-f .ft-ico { width: 16px; height: 16px; flex: none; }
.ft-fit h3 { margin-top: 14px; font-size: 19px; line-height: 1.3; }
.ft-fit p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 260px; }

/* ---------- breakpoints (match features2.css: 1100 / 768 / 560) ---------- */
/* narrow two-column heroes: the icon goes above the label so "Communications" never breaks inside the word */
@media (max-width: 1439px) and (min-width: 1101px) {
  .gbl .ft-hub-jump a { grid-template-columns: minmax(0, 1fr) 16px; gap: 10px 8px; padding: 16px; }
  .ft-hub-jump-ico { grid-column: 1 / -1; width: 40px; height: 40px; }
}
@media (max-width: 1200px) and (min-width: 1101px) {
  .ft-hub-jump ul { gap: 10px; }
  .gbl .ft-hub-jump a { padding: 14px; }
  .ft-hub-jump b { font-size: 17px; }
}
@media (max-width: 1100px) {
  .ft-idx-hero .hx-hero-copy { padding-bottom: 40px; }
  .ft-idx-stage { padding: 0 0 48px; }
  .ft-hub-jump ul { margin: 0 auto; max-width: 640px; }
  .ft-cat-fan { display: none; }
  .ft-idx-hero .ft-idx-stage:has(.ft-cat-fan) { display: none; }
  .ft-cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .ft-fit { grid-template-columns: 1fr; max-width: 560px; gap: 0; }
  .ft-fit::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--pb-100), var(--pb-200), var(--pb-100)); }
  .ft-fit li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; padding-bottom: 28px; }
  .ft-fit li > :not(.ft-fit-n) { grid-column: 2; }
  .ft-fit-n { grid-row: span 3; }
  .gbl a.ft-fit-f { justify-self: start; margin-top: -2px; }
  .ft-fit h3 { margin-top: 10px; }
  .ft-fit p { max-width: none; }
}
@media (max-width: 768px) {
  .ft .ft-hub-sec, .ft .ft-cat-sec { padding-top: 56px; }
  .ft .ft-fit-sec { padding-top: 64px; }
  .ft-hub-rows { grid-template-columns: 1fr; }
  .ft-hub-grp-h { grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; }
  .ft-hub-grp-ico { width: 44px; height: 44px; border-radius: 12px; margin-top: -4px; }
  .ft-hub-grp-ico .ft-ico { width: 24px; height: 24px; }
  .gbl .ft-hub-grp-more { grid-column: 2; justify-self: start; margin-top: -8px; }
  .ft-hub-grp + .ft-hub-grp { margin-top: 40px; padding-top: 40px; }
  .ft-cat-cards { grid-template-columns: 1fr; max-width: 560px; gap: 20px; }
}
@media (max-width: 560px) {
  .ft-hub-jump ul { gap: 10px; }
  .gbl .ft-hub-jump a { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; padding: 14px; }
  .ft-hub-jump-ico { width: 36px; height: 36px; border-radius: 10px; }
  .ft-hub-jump-ico .ft-ico { width: 20px; height: 20px; }
  .ft-hub-jump b { font-size: 16px; }
  .ft-hub-jump small { font-size: 14px; }
  .ft-hub-jump-arr.ft-ico { display: none; }
  .ft-hub-row { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; padding: 14px 14px 14px 12px; }
  .ft-hub-row-ico { width: 40px; height: 40px; }
  .ft-hub-grp-h p { font-size: 16px; }
  .ft-cat-body { padding: 22px 20px 22px; }
  .ft-cat-t { font-size: 19px; }
}
/* the narrowest phones: one tile per row, icon beside the label */
@media (max-width: 374px) {
  .ft-hub-jump ul { grid-template-columns: 1fr; }
  .gbl .ft-hub-jump a { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; }
}