/* ==========================================================================
   Section components for the /lp/home-v7/ sub-pages.
   Written by hand (unlike v7-chrome.css, which is generated). Uses the same
   tokens, radii, easing and type scale as the homepage so the sandbox reads as
   one design rather than five variations on it.
   ========================================================================== */

/* ---------------------------------------------------------------- page hero */
.pg-hero{ position:relative; overflow:hidden; padding:clamp(104px,11vw,150px) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(58% 50% at 8% 0%, rgba(0,168,133,.14), transparent 62%),
    radial-gradient(46% 52% at 100% 12%, rgba(72,180,255,.13), transparent 60%),
    linear-gradient(180deg,#F4FAF8 0%,#FFFFFF 82%); }
.pg-hero__grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,56px); align-items:center; }
.pg-eyebrow{ display:inline-block; font-family:var(--font-sans); font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green-600,#0C8E77); margin:0 0 14px; }
.pg-hero h1{ font-family:var(--font-serif,Georgia,serif); font-weight:900;
  font-size:clamp(2.1rem,4.1vw,3.5rem); line-height:1.06; letter-spacing:-.015em;
  color:var(--indigo-800,#152361); margin:0 0 18px; }
.pg-hero h1 .hl{ background:linear-gradient(transparent 62%, rgba(0,168,133,.28) 0); padding:0 .06em; }
.pg-lead{ font-size:clamp(1rem,1.25vw,1.1875rem); line-height:1.6; color:var(--text-muted,#5B6590);
  margin:0 0 26px; max-width:52ch; }
.pg-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pg-hero__media{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/3.2;
  box-shadow:0 40px 80px -40px rgba(6,16,38,.55); background:var(--slate-100,#F3F4F7); }
.pg-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){
  .pg-hero__grid{ grid-template-columns:1fr; }
  .pg-hero__media{ aspect-ratio:16/10; }
}
@media(max-width:640px){
  /* the desktop clamp leaves a dead band under the floating header on phones */
  .pg-hero{ padding-top:96px; }
  .pg-hero__cta .btn{ width:100%; justify-content:center; }
}

/* --------------------------------------------------------------- trust strip
   Same block as the landing page: centred label, logos at the LP's size, full
   strength. Logos are never dimmed or recoloured (see the site-wide rule at the
   bottom of this file) because a monochrome treatment is hard to get signed off
   by the customers whose marks these are. */
.pg-trust{ border-top:1px solid rgba(21,35,97,.07); border-bottom:1px solid rgba(21,35,97,.07);
  padding:26px 0 30px; background:#fff; }
.pg-trust__inner{ display:flex; align-items:center; justify-content:center; gap:16px 44px; flex-wrap:wrap;
  max-width:1000px; margin-inline:auto; }
.pg-trust__label{ font-size:15px; font-weight:600; color:var(--indigo-800,#152361); margin:0 0 6px;
  width:100%; text-align:center; }
/* Several of these SVGs carry a lot of internal whitespace (a 170x100 canvas
   with the mark occupying the middle third), so a box that measures 34px tall
   renders a mark that looks half that. Extra height compensates; the real fix
   is properly cropped brand assets. */
.pg-trust img{ height:44px; width:auto; max-width:170px; object-fit:contain; }
@media(max-width:640px){ .pg-trust img{ height:32px; } .pg-trust__inner{ gap:14px 26px; } }

/* --------------------------------------------------------------- section head */
.pg-sec{ padding-block:clamp(44px,5vw,72px); }
.pg-sec--tint{ background:linear-gradient(180deg,#F7FBF9 0%,#FFFFFF 100%); }
.pg-sec--navy{ background:linear-gradient(135deg,#17275F,#0E1949); color:#fff; }
.pg-sechead{ max-width:64ch; margin:0 0 clamp(26px,3vw,40px); }
.pg-sechead--center{ margin-inline:auto; text-align:center; }
.pg-h2{ font-family:var(--font-serif,Georgia,serif); font-weight:900;
  font-size:clamp(1.6rem,2.7vw,2.4rem); line-height:1.14; letter-spacing:-.01em;
  color:var(--indigo-800,#152361); margin:0; }
.pg-sec--navy .pg-h2, .pg-sec--navy .pg-eyebrow{ color:#fff; }
.pg-sec--navy .pg-eyebrow{ color:#8FD0FF; }
.pg-sechead .pg-lead{ margin-top:14px; margin-bottom:0; }
.pg-sec--navy .pg-lead{ color:rgba(255,255,255,.86); }

/* --------------------------------------------------------------- card grids */
.pg-cards{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:16px; }
.pg-card{ background:var(--g-fill,linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.84)));
  border:var(--g-border,1px solid rgba(21,35,97,.08)); border-radius:20px;
  box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); padding:24px;
  transition:transform .28s var(--g-ease,cubic-bezier(.16,.84,.44,1)), box-shadow .28s; }
.pg-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(6,16,38,.45); }
.pg-sec--navy .pg-card{ background:#fff; border-color:rgba(21,35,97,.06);
  box-shadow:0 14px 34px -20px rgba(6,16,38,.55); }
.pg-ico{ width:42px; height:42px; border-radius:12px; background:rgba(0,168,133,.12);
  display:grid; place-items:center; margin-bottom:15px; }
.pg-ico svg{ width:21px; height:21px; fill:none; stroke:var(--green-600,#0C8E77); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.pg-card b{ display:block; font-family:var(--font-serif,Georgia,serif); font-size:17px; line-height:1.28;
  color:var(--indigo-800,#152361); margin-bottom:8px; }
.pg-card p{ font-size:14.5px; line-height:1.55; color:var(--text-muted,#5B6590); margin:0; }
@media(max-width:960px){ .pg-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px){ .pg-cards{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ numbered steps */
.pg-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:step; }
.pg-step{ position:relative; padding:24px; border-radius:20px; background:#fff;
  border:var(--g-border,1px solid rgba(21,35,97,.08)); box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); }
.pg-step__n{ display:grid; place-items:center; width:34px; height:34px; border-radius:999px;
  background:var(--green-500,#00A885); color:#fff; font-weight:800; font-size:15px; margin-bottom:14px; }
.pg-step b{ display:block; font-family:var(--font-serif,Georgia,serif); font-size:16.5px;
  color:var(--indigo-800,#152361); margin-bottom:7px; }
.pg-step p{ font-size:14px; line-height:1.55; color:var(--text-muted,#5B6590); margin:0; }
@media(max-width:960px){ .pg-steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .pg-steps{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------- stats */
.pg-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px); }
.pg-stat{ padding-left:1.35rem; border-left:2px solid rgba(255,255,255,.2); }
.pg-sec:not(.pg-sec--navy) .pg-stat{ border-left-color:rgba(0,168,133,.35); }
.pg-stat__n{ display:block; font-family:var(--font-serif,Georgia,serif); font-weight:900;
  font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.pg-sec:not(.pg-sec--navy) .pg-stat__n{ color:var(--indigo-800,#152361); }
.pg-stat__l{ display:block; margin-top:.5rem; font-size:.875rem; line-height:1.45; color:rgba(255,255,255,.8); }
.pg-sec:not(.pg-sec--navy) .pg-stat__l{ color:var(--text-muted,#5B6590); }
@media(max-width:760px){ .pg-stats{ grid-template-columns:1fr; }
  .pg-stat{ padding-left:0; padding-top:1rem; border-left:0; border-top:1px solid rgba(255,255,255,.18); }
  .pg-stat:first-child{ padding-top:0; border-top:0; } }

/* --------------------------------------------------------------- split blocks */
.pg-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,52px); align-items:center; }
.pg-split--rev .pg-split__media{ order:2; }
.pg-split__media{ border-radius:24px; overflow:hidden; aspect-ratio:4/3; background:var(--slate-100,#F3F4F7);
  box-shadow:0 30px 64px -36px rgba(6,16,38,.5); }
.pg-split__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-ticks{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; }
.pg-ticks li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.5;
  color:var(--text,#333); }
.pg-ticks svg{ width:20px; height:20px; flex:none; margin-top:1px; fill:none;
  stroke:var(--green-600,#0C8E77); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pg-sec--navy .pg-ticks li{ color:rgba(255,255,255,.92); }
.pg-sec--navy .pg-ticks svg{ stroke:#7FE3C6; }
@media(max-width:900px){ .pg-split{ grid-template-columns:1fr; } .pg-split--rev .pg-split__media{ order:0; } }

/* ------------------------------------------------------------- with / without */
.pg-compare{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pg-compare__col{ border-radius:22px; padding:26px; }
.pg-compare__col--without{ background:var(--slate-100,#F3F4F7); border:1px solid rgba(21,35,97,.07); }
.pg-compare__col--with{ background:linear-gradient(150deg,rgba(0,168,133,.97),rgba(12,142,119,.93)); color:#fff; }
.pg-compare__head{ display:flex; align-items:center; gap:9px; font-family:var(--font-sans); font-weight:800;
  font-size:15px; margin-bottom:16px; color:var(--indigo-800,#152361); }
/* the theme sets bare svg to fill its box, so every icon needs an explicit size */
.pg-compare__head svg{ width:18px; height:18px; flex:none; }
.pg-compare__col--with .pg-compare__head{ color:#fff; }
.pg-compare ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.pg-compare li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.5;
  color:var(--text-muted,#5B6590); }
.pg-compare__col--with li{ color:rgba(255,255,255,.94); }
.pg-compare li svg{ width:18px; height:18px; flex:none; margin-top:2px; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }
.pg-compare__col--without li svg{ stroke:#B0B7CE; }
.pg-compare__col--with li svg{ stroke:#fff; }
@media(max-width:760px){ .pg-compare{ grid-template-columns:1fr; } }

/* ----------------------------------------------------------------------- FAQ */
.pg-faq{ max-width:60rem; margin-inline:auto; display:grid; gap:10px; }
.pg-faq details{ border:var(--g-border,1px solid rgba(21,35,97,.08)); border-radius:16px; background:#fff;
  overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.pg-faq details[open]{ border-color:rgba(0,168,133,.32); box-shadow:0 16px 36px -24px rgba(6,16,38,.4); }
.pg-faq summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; font-family:var(--font-sans); font-weight:700; font-size:16px;
  line-height:1.35; color:var(--indigo-800,#152361); }
.pg-faq summary::-webkit-details-marker{ display:none; }
.pg-faq summary::after{ content:""; flex:none; width:12px; height:12px; border-right:2.2px solid var(--green-600,#0C8E77);
  border-bottom:2.2px solid var(--green-600,#0C8E77); transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s var(--g-ease,ease); }
.pg-faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.pg-faq summary:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:-2px; }
.pg-faq__a{ padding:0 22px 20px; font-size:15px; line-height:1.6; color:var(--text-muted,#5B6590); }
.pg-faq__a p{ margin:0 0 10px; } .pg-faq__a p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------- story listing */
.pg-stories{ display:grid; gap:18px; }
.pg-story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(20px,3vw,40px);
  align-items:center; padding:clamp(20px,2.4vw,30px); border-radius:24px; background:#fff;
  border:var(--g-border,1px solid rgba(21,35,97,.08)); box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5));
  transition:transform .28s var(--g-ease,cubic-bezier(.16,.84,.44,1)), box-shadow .28s; }
.pg-story:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -30px rgba(6,16,38,.45); }
.pg-story:nth-child(even) .pg-story__media{ order:2; }
/* matches the processed case-study images (766x566) so the company logo badge
   baked into the bottom of each one is never clipped by the crop */
.pg-story__media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:766/566;
  background:var(--slate-100,#F3F4F7); }
.pg-story__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--g-ease,ease); }
.pg-story:hover .pg-story__media img{ transform:scale(1.04); }
.pg-story__tag{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.94); font-size:12px; font-weight:700;
  color:var(--indigo-800,#152361); box-shadow:0 8px 20px -10px rgba(6,16,38,.5); }
.pg-story__tag svg{ width:13px; height:13px; fill:none; stroke:var(--green-600,#0C8E77); stroke-width:2.2; }
.pg-story h3{ font-family:var(--font-serif,Georgia,serif); font-weight:800;
  font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.22; color:var(--indigo-800,#152361); margin:0 0 12px; }
.pg-story p{ font-size:15px; line-height:1.6; color:var(--text-muted,#5B6590); margin:0 0 18px; }
@media(max-width:820px){
  .pg-story{ grid-template-columns:1fr; }
  .pg-story:nth-child(even) .pg-story__media{ order:0; }
}

/* --------------------------------------------------------------- catalogue */
.pg-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.pg-chip{ border:1px solid rgba(0,168,133,.24); background:rgba(0,168,133,.09);
  color:var(--green-700,#0A6B57); border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:background .18s, border-color .18s, color .18s; }
.pg-chip:hover{ background:rgba(0,168,133,.16); }
.pg-chip[aria-pressed="true"]{ background:var(--green-500,#00A885); border-color:var(--green-500,#00A885); color:#fff; }
.pg-chip:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:2px; }
.pg-cat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.pg-cat__item{ display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:#fff;
  border:var(--g-border,1px solid rgba(21,35,97,.08)); box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5));
  text-decoration:none; transition:transform .28s var(--g-ease,cubic-bezier(.16,.84,.44,1)), box-shadow .28s; }
.pg-cat__item:hover{ transform:translateY(-4px); box-shadow:0 26px 52px -30px rgba(6,16,38,.45); }
.pg-cat__thumb{ position:relative; aspect-ratio:16/9; background:var(--slate-100,#F3F4F7); overflow:hidden; }
.pg-cat__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-cat__play{ position:absolute; inset:0; display:grid; place-items:center; }
.pg-cat__play span{ display:grid; place-items:center; width:52px; height:52px; border-radius:999px;
  background:rgba(255,255,255,.92); box-shadow:0 12px 28px -12px rgba(6,16,38,.6);
  transition:transform .25s var(--g-ease,ease); }
.pg-cat__item:hover .pg-cat__play span{ transform:scale(1.09); }
.pg-cat__play svg{ width:19px; height:19px; fill:var(--indigo-800,#152361); margin-left:2px; }
.pg-cat__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.pg-cat__meta{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.03em; color:var(--green-600,#0C8E77); }
.pg-cat__meta svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; }
.pg-cat__meta i{ font-style:normal; color:var(--text-muted,#5B6590); font-weight:600; }
.pg-cat__item h3{ font-family:var(--font-serif,Georgia,serif); font-weight:800; font-size:17px;
  line-height:1.28; color:var(--indigo-800,#152361); margin:0; }
.pg-cat__topic{ margin-top:auto; padding-top:8px; font-size:12.5px; color:var(--text-muted,#5B6590); }
@media(max-width:960px){ .pg-cat{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .pg-cat{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------- closing band
   The first cut set the heading in the serif (Noto Serif JP), which at this
   size broke into ragged three-line wraps and left the right half empty. This
   version sets the heading in the UI sans, balances the wrap, caps the measure
   and gives the right column a real stack: button, reassurance line, avatars. */
.pg-band{ position:relative; overflow:hidden; border-radius:26px;
  padding:clamp(30px,3.6vw,48px) clamp(28px,3.4vw,52px);
  background:linear-gradient(118deg,#1668B8 0%,#2E9BEE 54%,#4FB6FF 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 60px -30px rgba(24,110,190,.85), inset 0 1px 0 rgba(255,255,255,.28);
  display:grid; grid-template-columns:minmax(0,1.2fr) auto; align-items:center;
  gap:clamp(24px,4vw,56px); }
/* a soft off-centre highlight so the large flat fill has some depth */
.pg-band::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 120% at 82% 10%, rgba(255,255,255,.22), transparent 60%); }
.pg-band > *{ position:relative; }
.pg-band h2{ font-family:var(--font-sans); font-weight:800;
  font-size:clamp(1.45rem,2.4vw,2.1rem); line-height:1.18; letter-spacing:-.015em;
  color:#fff; margin:0 0 12px; max-width:19ch; text-wrap:balance; }
.pg-band p{ color:rgba(255,255,255,.92); font-size:15.5px; line-height:1.6; margin:0; max-width:52ch; }
.pg-band__points{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.pg-band__points li{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:#fff; }
.pg-band__points svg{ width:17px; height:17px; flex:none; fill:none; stroke:#fff; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.pg-band__actions{ display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:210px; }
.pg-band .btn-primary{ background:#fff !important; color:#0E5FA0 !important; font-weight:700;
  justify-content:center; }
.pg-band .cta-glow{ animation:none; box-shadow:0 16px 34px -14px rgba(6,16,38,.55); }
.pg-band__note{ font-size:12.5px; color:rgba(255,255,255,.85); text-align:center; margin:0; }
@media(max-width:860px){
  .pg-band{ grid-template-columns:1fr; }
  .pg-band h2{ max-width:none; }
  .pg-band__actions{ align-items:flex-start; min-width:0; }
  .pg-band .btn-primary{ width:100%; }
  .pg-band__note{ text-align:left; }
}

/* ------------------------------------------------------------------- quotes */
.pg-quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pg-quote{ margin:0; padding:24px; border-radius:20px; background:#fff;
  border:var(--g-border,1px solid rgba(21,35,97,.08)); box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5));
  display:flex; flex-direction:column; gap:14px; }
.pg-quote blockquote{ margin:0; font-family:var(--font-serif,Georgia,serif); font-size:16px; line-height:1.45;
  color:var(--indigo-800,#152361); }
.pg-quote figcaption{ margin-top:auto; font-size:13px; color:var(--text-muted,#5B6590); }
.pg-quote figcaption b{ display:block; font-family:var(--font-sans); font-size:14px;
  color:var(--indigo-800,#152361); }
@media(max-width:900px){ .pg-quotes{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- sandbox breadcrumb */
.pg-note{ font-size:12.5px; color:var(--text-muted,#5B6590); text-align:center;
  padding:10px 16px; background:#FFF8ED; border-bottom:1px solid rgba(21,35,97,.07); }
.pg-note b{ color:var(--indigo-800,#152361); }


/* ------------------------------------------------------------------- tabs
   Used where a section asks the reader to pick which of several situations
   applies to them. Visually distinct from .pg-cards on purpose: the healthcare
   page had two card grids back to back that read as the same section twice. */
.pg-tabs{ display:grid; gap:22px; }
.pg-tablist{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pg-tab{ border:1px solid rgba(21,35,97,.10); background:#fff; color:var(--indigo-800,#152361);
  border-radius:999px; padding:11px 20px; font-family:var(--font-sans); font-size:14.5px; font-weight:700;
  cursor:pointer; transition:background .18s, border-color .18s, color .18s, box-shadow .18s; }
.pg-tab:hover{ border-color:rgba(0,168,133,.4); }
.pg-tab[aria-selected="true"]{ background:var(--green-500,#00A885); border-color:var(--green-500,#00A885);
  color:#fff; box-shadow:0 14px 30px -16px rgba(0,168,133,.9); }
.pg-tab:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:2px; }
.pg-tabpanel[hidden]{ display:none; }
.pg-tabpanel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(22px,3.4vw,44px); align-items:center; padding:clamp(22px,2.6vw,34px);
  border-radius:24px; background:#fff; border:var(--g-border,1px solid rgba(21,35,97,.08));
  box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); animation:tabIn .35s var(--g-ease,ease); }
@keyframes tabIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pg-tabpanel h3{ font-family:var(--font-serif,Georgia,serif); font-weight:800;
  font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.2; color:var(--indigo-800,#152361); margin:0 0 6px; }
.pg-tabpanel__media{ border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--slate-100,#F3F4F7); }
.pg-tabpanel__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(prefers-reduced-motion:reduce){ .pg-tabpanel{ animation:none; } }
@media(max-width:860px){ .pg-tabpanel{ grid-template-columns:1fr; } .pg-tabpanel__media{ order:-1; } }

/* ==========================================================================
   V6 CALM PASS
   Team input: smaller, calmer serif headlines (same face); consistent spacing
   and alignment; quieter borders, shadows, gradients and highlights;
   standardised cards, pills, controls and radii; one visual priority per
   section. Everything below is a token, so a change here moves the whole
   sandbox rather than one component.
   ========================================================================== */
:root{
  /* three radii instead of the seven v5 accumulated */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-full:999px;
  /* two elevations instead of a bespoke shadow per component */
  --sh-1:0 1px 2px rgba(21,35,97,.04), 0 8px 20px -14px rgba(21,35,97,.20);
  --sh-2:0 18px 40px -28px rgba(6,16,38,.28);
  --line:1px solid rgba(21,35,97,.07);
  --line-strong:1px solid rgba(21,35,97,.11);
  /* one vertical rhythm */
  --sec-y:clamp(52px,5.5vw,84px);
  --stack-sm:10px; --stack-md:16px; --stack-lg:28px;
}

/* ---- type: same faces, smaller and with more air ---- */
.pg-hero h1{ font-size:clamp(1.95rem,3.4vw,2.9rem); line-height:1.12; letter-spacing:-.01em;
  max-width:19ch; margin-bottom:20px; }
.pg-h2{ font-size:clamp(1.45rem,2.2vw,1.95rem); line-height:1.2; letter-spacing:-.005em; }
.pg-lead{ font-size:clamp(.9688rem,1.05vw,1.0625rem); line-height:1.65; max-width:56ch; }
.pg-eyebrow{ font-size:11.5px; letter-spacing:.07em; margin-bottom:12px; }
.pg-card b, .pg-step b{ font-size:16px; line-height:1.3; }
.pg-card p, .pg-step p{ font-size:14.5px; line-height:1.6; }
/* the highlight was a heavy marker; make it a quiet underline */
.pg-hero h1 .hl{ background:linear-gradient(transparent 76%, rgba(0,168,133,.20) 0); }

/* ---- rhythm: one section padding, one head spacing ---- */
.pg-sec{ padding-block:var(--sec-y); }
.pg-sechead{ margin-bottom:var(--stack-lg); }
.pg-sechead .pg-lead{ margin-top:12px; }
.pg-cards, .pg-steps, .pg-quotes, .pg-compare, .pg-cat{ gap:var(--stack-md); }

/* ---- surfaces: flat tints, no stacked gradients ---- */
.pg-hero{ background:#F6FAF8; }
.pg-sec--tint{ background:#F7FAF9; }
.pg-sec--navy{ background:#152361; }

/* ---- one card recipe, used everywhere ---- */
.pg-card, .pg-step, .pg-quote, .pg-faq details, .pg-tabpanel, .pg-story, .pg-cat__item{
  border-radius:var(--r-md); border:var(--line); box-shadow:var(--sh-1);
  background:#fff; }
.pg-card, .pg-step, .pg-quote{ padding:22px; }
.pg-sec--navy .pg-card{ box-shadow:var(--sh-2); border-color:rgba(21,35,97,.05); }
/* hover: a hint, not a jump */
.pg-card:hover, .pg-story:hover, .pg-cat__item:hover{
  transform:translateY(-2px); box-shadow:var(--sh-1), var(--sh-2); }
.pg-hero__media, .pg-split__media{ border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.pg-story__media, .pg-tabpanel__media, .pg-cat__thumb{ border-radius:var(--r-sm); }

/* ---- controls: one pill, one icon chip ---- */
.pg-ico{ width:36px; height:36px; border-radius:var(--r-sm); background:rgba(0,168,133,.10);
  margin-bottom:14px; }
.pg-ico svg{ width:18px; height:18px; }
.pg-chip, .pg-tab{ border-radius:var(--r-full); border:var(--line-strong); font-size:14px;
  padding:9px 16px; box-shadow:none; }
.pg-tab[aria-selected="true"]{ box-shadow:none; }
.pg-step__n{ width:30px; height:30px; font-size:14px; }

/* ---- stats: quieter rules ---- */
.pg-stat{ border-left-width:1px; }
.pg-sec:not(.pg-sec--navy) .pg-stat{ border-left-color:rgba(21,35,97,.12); }
.pg-stat__n{ font-size:clamp(2.1rem,3.2vw,2.9rem); font-weight:800; }

/* ---- trust strip: sits quietly between sections ---- */
.pg-trust{ border-top:var(--line); border-bottom:var(--line); }

/* ---- FAQ ---- */
.pg-faq details[open]{ border-color:rgba(0,168,133,.24); box-shadow:var(--sh-1); }
.pg-faq summary{ font-size:15.5px; }

/* ---- closing band: the bright blue gradient bar read as a second hero and
   competed with the section above it. It is now a quiet panel on the page's own
   ground, so the section has one visual priority: the words. ---- */
.pg-band{ background:#152361; border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:clamp(28px,3.2vw,40px) clamp(26px,3vw,44px); }
.pg-band::before{ display:none; }
.pg-band h2{ font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.22; max-width:22ch; }
.pg-band p{ font-size:15px; color:rgba(255,255,255,.80); }
.pg-band__points li{ font-size:13.5px; font-weight:600; color:rgba(255,255,255,.88); }
.pg-band__points svg{ stroke:#7FE3C6; opacity:1; }
.pg-band .btn-primary{ background:#fff !important; color:#152361 !important; box-shadow:none !important; }
.pg-band__note{ color:rgba(255,255,255,.62); }

/* ---- glow and gradients, dialled down by half ----
   The CTA still breathes, at half the amplitude and spread, and the sheen sweep
   is gone: it was the loudest thing on a quiet page. */
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,168,133,.20), 0 6px 14px -8px rgba(0,168,133,.32); }
  50%    { box-shadow:0 0 0 4px rgba(0,168,133,0), 0 8px 18px -8px rgba(0,168,133,.46); }
}
.cta-glow{ animation-duration:4.2s; }
.cta-glow::before{ display:none !important; }
.btn-demo{ background:#2E9BEE !important; box-shadow:0 8px 18px -10px rgba(46,155,238,.55) !important; }
@media(prefers-reduced-motion:reduce){
  .cta-glow{ animation:none; box-shadow:0 6px 14px -8px rgba(0,168,133,.4); }
}

/* ---- brand-green mode, for the sub-page components ----------------------
   v7-pages.css loads after v7-chrome.css, so the toggle's overrides have to be
   repeated here or the .pg-* components keep their gradients. */
html[data-green="brand"] .pg-compare__col--with{ background:#00A885 !important; }
html[data-green="brand"] .pg-ico{ background:rgba(0,168,133,.12) !important; }
html[data-green="brand"] .pg-tab[aria-selected="true"],
html[data-green="brand"] .pg-chip[aria-pressed="true"]{
  background:#00A885 !important; border-color:#00A885 !important; }
html[data-green="brand"] .pg-step__n{ background:#00A885 !important; }
html[data-green="brand"] .pg-hero h1 .hl{
  background:linear-gradient(transparent 76%, rgba(0,168,133,.20) 0) !important; }